sqlite-hub 1.1.0 → 1.1.1

package/frontend/js/app.js

@@ -83,8 +83,10 @@ import {
     selectConnection,
     selectQueryHistoryItem,
     selectStructureEntry,
+    setDocumentsSearchQuery,
     setTableDesignerSearchQuery,
     setTableDesignerSqlPreviewVisibility,
+    toggleTableDesignerTablesPanel,
     setDataTableSearchQuery,
     setStructureTableSearchQuery,
     toggleStructureTablesPanel,
@@ -376,21 +378,19 @@ function syncMediaTaggingCurrentMediaUi(button, detailsVisible) {
     }
 
     const nextVisible = Boolean(detailsVisible);
-    const expandedLabel = button.dataset.expandedLabel || 'Shrink Media Viewer';
-    const collapsedLabel = button.dataset.collapsedLabel || 'Show Media Viewer';
+    const expandedLabel = button.dataset.expandedLabel || 'Hide Viewer';
+    const collapsedLabel = button.dataset.collapsedLabel || 'Show Viewer';
     preview.classList.toggle('media-tagging-preview--meta-hidden', !nextVisible);
+    button.classList.toggle('is-active', !nextVisible);
     button.dataset.nextValue = nextVisible ? 'false' : 'true';
     button.setAttribute('aria-expanded', nextVisible ? 'true' : 'false');
+    button.setAttribute('aria-pressed', nextVisible ? 'false' : 'true');
 
-    if (nextVisible) {
-        const icon = document.createElement('span');
+    const icon = document.createElement('span');
 
-        icon.className = 'material-symbols-outlined';
-        icon.textContent = 'visibility_off';
-        button.replaceChildren(icon, document.createTextNode(` ${expandedLabel}`));
-    } else {
-        button.textContent = collapsedLabel;
-    }
+    icon.className = 'material-symbols-outlined';
+    icon.textContent = nextVisible ? 'visibility_off' : 'visibility';
+    button.replaceChildren(icon, document.createTextNode(` ${nextVisible ? expandedLabel : collapsedLabel}`));
 
     return true;
 }
@@ -2656,6 +2656,9 @@ async function handleAction(actionNode) {
         case 'toggle-structure-tables':
             toggleStructureTablesPanel();
             return;
+        case 'toggle-table-designer-tables':
+            toggleTableDesignerTablesPanel();
+            return;
         case 'select-structure-entry':
             if (actionNode.dataset.entryName) {
                 await selectStructureEntry(actionNode.dataset.entryName);
@@ -2989,6 +2992,18 @@ document.addEventListener('keydown', event => {
         return;
     }
 
+    if (state.route.name === 'charts' && state.charts.detailPanelVisible) {
+        event.preventDefault();
+        setChartsDetailPanelVisibility(false);
+        return;
+    }
+
+    if (state.editor.historySelectedId !== null || state.editor.historyDetail) {
+        event.preventDefault();
+        clearQueryHistorySelection();
+        return;
+    }
+
     if (
         state.route.name === 'data' &&
         (typeof state.dataBrowser.selectedRowIndex === 'number' || Boolean(state.dataBrowser.selectedRow))
@@ -3051,6 +3066,11 @@ document.addEventListener('input', event => {
         return;
     }
 
+    if (bindNode.dataset.bind === 'documents-search') {
+        setDocumentsSearchQuery(bindNode.value);
+        return;
+    }
+
     if (bindNode.dataset.bind === 'data-search-query') {
         void setDataSearchQuery(bindNode.value);
         return;

package/frontend/js/components/queryEditor.js

@@ -45,7 +45,8 @@ export function renderQueryEditor({
   const secondaryButtonClass = "standard-button";
   const left = `
     <button
-      class="${secondaryButtonClass}"
+      class="${secondaryButtonClass} panel-toggle-button ${editorVisible ? "" : "is-active"}"
+      aria-pressed="${editorVisible ? "false" : "true"}"
       data-action="toggle-editor-panel"
       data-next-value="${editorVisible ? "false" : "true"}"
       type="button"
@@ -90,7 +91,8 @@ export function renderQueryEditor({
 
   const right = `
     <button
-      class="${secondaryButtonClass}"
+      class="${secondaryButtonClass} panel-toggle-button ${historyVisible ? "" : "is-active"}"
+      aria-pressed="${historyVisible ? "false" : "true"}"
       data-action="toggle-query-history-panel"
       data-next-value="${historyVisible ? "false" : "true"}"
       type="button"
@@ -102,7 +104,7 @@ export function renderQueryEditor({
 
   return `
     <div class="flex h-full min-h-0 flex-col">
-      <div class="bg-surface-container-low px-6 py-3">
+      <div class="workspace-header workspace-header--low">
         <div class="query-editor-toolbar">
           <div class="query-editor-toolbar__left">${left}</div>
           <div class="query-editor-toolbar__center">${center}</div>

package/frontend/js/components/structureGraph.js

@@ -966,6 +966,7 @@ function updateInspectorToggleButton() {
     }
 
     currentGraph.inspectorToggleButton.classList.toggle('is-active', currentGraph.inspectorHidden);
+    currentGraph.inspectorToggleButton.setAttribute('aria-pressed', currentGraph.inspectorHidden ? 'true' : 'false');
     const icon = document.createElement('span');
     const label = currentGraph.inspectorHidden ? 'Show Inspector' : 'Hide Inspector';
 

package/frontend/js/components/tableDesignerEditor.js

@@ -323,7 +323,6 @@ export function renderTableDesignerEditor(state) {
   }
 
   const catalogTables = state.tableDesigner.tables ?? [];
-  const visibleColumns = draft.columns.filter((column) => !column.deleted);
   const saveLabel =
     draft.mode === "create"
       ? state.tableDesigner.saving
@@ -335,11 +334,12 @@ export function renderTableDesignerEditor(state) {
 
   return `
     <section class="table-designer-main shell-section">
-      <header class="table-designer-main__header">
-        <div>
-          <div class="table-designer-main__eyebrow">
-            ${draft.mode === "create" ? "New Table Draft" : "Editing Existing Table"}
-          </div>
+      <div data-table-designer-feedback>
+        ${renderTableDesignerFeedback(draft, state.tableDesigner.saveError)}
+      </div>
+
+      <section class="table-designer-main__section">
+        <div class="table-designer-main__section-header">
           <div class="table-designer-main__title-row">
             <input
               class="table-designer-main__name"
@@ -356,42 +356,6 @@ export function renderTableDesignerEditor(state) {
                 : ""
             }
           </div>
-          <div class="table-designer-main__subtitle">
-            ${escapeHtml(String(visibleColumns.length))} visible column${
-              visibleColumns.length === 1 ? "" : "s"
-            } // Table Designer v2 // SQLite-safe operations only
-          </div>
-        </div>
-        <div class="table-designer-main__actions">
-          ${renderFillToggle(draft)}
-          <button
-            class="standard-button"
-            data-action="refresh-view"
-            type="button"
-          >
-            Reload Schema
-          </button>
-          <button
-            class="standard-button"
-            data-action="save-table-designer"
-            data-table-designer-save-button
-            ${draft.canSave ? "" : "disabled"}
-            type="button"
-          >
-            ${escapeHtml(saveLabel)}
-          </button>
-        </div>
-      </header>
-
-      <div data-table-designer-feedback>
-        ${renderTableDesignerFeedback(draft, state.tableDesigner.saveError)}
-      </div>
-
-      <section class="table-designer-main__section">
-        <div class="table-designer-main__section-header">
-          <div>
-            <div class="table-designer-main__section-title">Columns</div>
-          </div>
           <div class="table-designer-main__section-actions">
             <button
               class="standard-button"
@@ -400,6 +364,23 @@ export function renderTableDesignerEditor(state) {
             >
               + Add Column
             </button>
+            <button
+              class="standard-button"
+              data-action="refresh-view"
+              type="button"
+            >
+              Reload Schema
+            </button>
+            <button
+              class="standard-button"
+              data-action="save-table-designer"
+              data-table-designer-save-button
+              ${draft.canSave ? "" : "disabled"}
+              type="button"
+            >
+              ${escapeHtml(saveLabel)}
+            </button>
+            ${renderFillToggle(draft)}
           </div>
         </div>
         ${renderColumnGrid(draft, catalogTables)}

package/frontend/js/components/tableDesignerSidebar.js

@@ -18,38 +18,14 @@ export function renderTableDesignerSidebar(state) {
     const isNewDraft = state.tableDesigner.draft?.mode === 'create';
 
     return `
-    <aside class="table-designer-sidebar">
-      <div class="table-designer-sidebar__header">
+    <aside class="table-designer-sidebar subnavi-panel">
+      <div class="table-designer-sidebar__header subnavi-header">
         <div>
-          <div class="table-designer-sidebar__eyebrow">Table Designer</div>
-          <div class="table-designer-sidebar__meta">
+          <div class="subnavi-header-title">Table Designer</div>
+          <div class="subnavi-header-details">
             ${escapeHtml(formatNumber(tables.length))} table${tables.length === 1 ? '' : 's'}
           </div>
         </div>
-        <div class="table-designer-sidebar__header-actions">
-          <button
-            class="standard-button"
-            data-action="import-table-designer-csv"
-            type="button"
-          >
-            Import CSV
-          </button>
-          <input
-            accept=".csv,text/csv"
-            class="table-designer-sidebar__file-input"
-            data-bind="table-designer-import-file"
-            type="file"
-          />  
-          <button
-            class="signature-button"
-            data-action="navigate"
-            data-to="/table-designer/new"
-            type="button"
-          >
-            + New Table
-          </button>
-  
-        </div>
       </div>
 
       <label class="table-designer-sidebar__search">
@@ -64,7 +40,7 @@ export function renderTableDesignerSidebar(state) {
         />
       </label>
 
-      <div class="table-designer-sidebar__list custom-scrollbar">
+      <div class="table-designer-sidebar__list subnavi-list custom-scrollbar">
         ${
             state.tableDesigner.loading && !tables.length
                 ? `
@@ -76,7 +52,7 @@ export function renderTableDesignerSidebar(state) {
                 : isNewDraft
                   ? `
                   <button
-                    class="table-designer-sidebar__item is-active w-full border border-primary-container/30 bg-surface-container-high px-4 py-3 text-left transition-colors"
+                    class="table-designer-sidebar__item subnavi-item is-active border border-primary-container/30 bg-surface-container-high px-4 py-3 text-left transition-colors"
                     data-action="navigate"
                     data-to="/table-designer/new"
                     type="button"
@@ -102,7 +78,7 @@ export function renderTableDesignerSidebar(state) {
                       .map(
                           table => `
                     <button
-                      class="table-designer-sidebar__item w-full border px-4 py-3 text-left transition-colors ${
+                      class="table-designer-sidebar__item subnavi-item border px-4 py-3 text-left transition-colors ${
                           !isNewDraft && table.name === state.tableDesigner.selectedTableName
                               ? 'is-active border-primary-container/30 bg-surface-container-high'
                               : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'

package/frontend/js/components/tableDesignerSqlPreview.js

@@ -23,7 +23,8 @@ function renderPreviewHeader(draft, isVisible) {
                 : ''
         }
         <button
-          class="standard-button"
+          class="standard-button panel-toggle-button ${isVisible ? '' : 'is-active'}"
+          aria-pressed="${isVisible ? 'false' : 'true'}"
           data-action="toggle-table-designer-sql-preview"
           data-next-value="${isVisible ? 'false' : 'true'}"
           type="button"

package/frontend/js/store.js

@@ -51,9 +51,11 @@ const UI_PREFERENCE_STORAGE_KEYS = {
     chartsHistoryVisible: 'sqlite_hub_charts_history_visible',
     chartsQueryVisible: 'sqlite_hub_charts_query_visible',
     chartsResultsVisible: 'sqlite_hub_charts_results_visible',
+    tableDesignerTablesVisible: 'sqlite_hub_table_designer_tables_visible',
     tableDesignerSqlPreviewVisible: 'sqlite_hub_table_designer_sql_preview_visible',
     documentsEditorVisible: 'sqlite_hub_documents_editor_visible',
     documentsPreviewVisible: 'sqlite_hub_documents_preview_visible',
+    mediaTaggingViewerVisible: 'sqlite_hub_media_tagging_viewer_visible',
 };
 const QUERY_HISTORY_PAGE_SIZE = 30;
 const QUERY_HISTORY_RUN_LIMIT = 8;
@@ -356,6 +358,7 @@ const state = {
         items: [],
         selectedId: null,
         selected: null,
+        searchQuery: '',
         draftFilename: '',
         draftContent: '',
         dirty: false,
@@ -372,6 +375,7 @@ const state = {
         tables: [],
         selectedTableName: null,
         draft: null,
+        tablesVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerTablesVisible, true),
         sqlPreviewVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerSqlPreviewVisible, true),
         pendingImportedDraft: null,
         loading: false,
@@ -424,7 +428,7 @@ const state = {
         issues: [],
         dismissedIssueKeys: [],
         selectedTagKeys: [],
-        workflowMediaDetailsVisible: true,
+        workflowMediaDetailsVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.mediaTaggingViewerVisible, true),
         workflowMediaRotationDegrees: 0,
         skippedMediaKeys: [],
         tagFormValues: {},
@@ -959,6 +963,7 @@ function resetDocumentsState() {
     state.documents.items = [];
     state.documents.selectedId = null;
     state.documents.selected = null;
+    state.documents.searchQuery = '';
     state.documents.draftFilename = '';
     state.documents.draftContent = '';
     state.documents.dirty = false;
@@ -1189,6 +1194,7 @@ function setMissingDatabaseState() {
     state.tableDesigner.tables = [];
     state.tableDesigner.selectedTableName = null;
     state.tableDesigner.draft = null;
+    state.tableDesigner.tablesVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerTablesVisible, true);
     state.tableDesigner.sqlPreviewVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerSqlPreviewVisible, true);
     state.tableDesigner.pendingImportedDraft = null;
     state.tableDesigner.saving = false;
@@ -2384,6 +2390,7 @@ function invalidateDatabaseCaches(options = {}) {
     state.tableDesigner.tables = [];
     state.tableDesigner.selectedTableName = null;
     state.tableDesigner.draft = null;
+    state.tableDesigner.tablesVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerTablesVisible, true);
     state.tableDesigner.sqlPreviewVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerSqlPreviewVisible, true);
     state.tableDesigner.pendingImportedDraft = null;
     state.tableDesigner.saving = false;
@@ -2428,6 +2435,10 @@ function invalidateDatabaseCaches(options = {}) {
     state.mediaTagging.issues = [];
     state.mediaTagging.dismissedIssueKeys = [];
     state.mediaTagging.selectedTagKeys = [];
+    state.mediaTagging.workflowMediaDetailsVisible = readStoredBoolean(
+        UI_PREFERENCE_STORAGE_KEYS.mediaTaggingViewerVisible,
+        true,
+    );
     state.mediaTagging.workflowMediaRotationDegrees = 0;
     state.mediaTagging.skippedMediaKeys = [];
     state.mediaTagging.tagFormValues = {};
@@ -4108,6 +4119,12 @@ export function setTableDesignerSearchQuery(query) {
     emitChange();
 }
 
+export function toggleTableDesignerTablesPanel() {
+    state.tableDesigner.tablesVisible = state.tableDesigner.tablesVisible === false;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.tableDesignerTablesVisible, state.tableDesigner.tablesVisible);
+    emitChange();
+}
+
 export function setDataTableSearchQuery(query) {
     state.dataBrowser.tableSearchQuery = String(query ?? '');
     emitChange();
@@ -4118,6 +4135,11 @@ export function setStructureTableSearchQuery(query) {
     emitChange();
 }
 
+export function setDocumentsSearchQuery(query) {
+    state.documents.searchQuery = String(query ?? '');
+    emitChange();
+}
+
 export function setTableDesignerSqlPreviewVisibility(visible) {
     const nextValue = typeof visible === 'boolean' ? visible : !Boolean(state.tableDesigner.sqlPreviewVisible);
 
@@ -4359,6 +4381,7 @@ export function setMediaTaggingWorkflowMediaDetailsVisible(value, options = {})
     }
 
     state.mediaTagging.workflowMediaDetailsVisible = nextValue;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.mediaTaggingViewerVisible, nextValue);
 
     if (options.notify !== false) {
         emitChange();

package/frontend/js/views/charts.js

@@ -170,10 +170,10 @@ function renderChartsList(state) {
                 hasSearch
                     ? 'Try another title, SQL fragment, chart type, or saved status.'
                     : isSavedTab
-                    ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
-                    : isUnsavedTab
-                      ? 'Unsaved chartable queries will appear here until you bookmark them.'
-                    : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
+                      ? 'Save chartable queries from this list or from the SQL Editor to keep them here.'
+                      : isUnsavedTab
+                        ? 'Unsaved chartable queries will appear here until you bookmark them.'
+                        : 'Run SELECT queries in the SQL Editor first. They will appear here automatically.'
             }
           </p>
         </div>
@@ -549,7 +549,7 @@ function renderChartCard(chart, state, analysis) {
         '<div class="flex flex-wrap items-center gap-2">',
         '<h3 class="truncate font-headline text-xl font-black uppercase tracking-tight text-on-surface">',
         escapeHtml(chart.name),
-        "</h3>",
+        '</h3>',
         renderStatusBadge(getQueryChartTypeLabel(chart.chartType), 'primary'),
         '</div></div><div class="flex flex-wrap items-center gap-2">',
         '<button class="standard-button" data-action="open-edit-query-chart-modal" data-chart-id="',
@@ -563,8 +563,8 @@ function renderChartCard(chart, state, analysis) {
         '" type="button">Export PNG</button>',
         '</div></header><div class="query-chart-card__body">',
         renderChartSurface(chart, state, analysis),
-        "</div></article>",
-    ].join("");
+        '</div></article>',
+    ].join('');
 }
 
 export function renderChartsDetail(state) {
@@ -636,15 +636,16 @@ export function renderChartsDetail(state) {
             </div>
             <div class="charts-detail-shell__controls-group charts-detail-shell__controls-group--end">
               <button
-                class="standard-button"
+                class="standard-button panel-toggle-button ${historyVisible ? '' : 'is-active'}"
+                aria-pressed="${historyVisible ? 'false' : 'true'}"
                 data-action="toggle-query-history-panel"
                 data-next-value="${historyVisible ? 'false' : 'true'}"
                 type="button"
               >
                 <span class="material-symbols-outlined text-sm">${
-                  historyVisible ? 'visibility_off' : 'visibility'
+                    historyVisible ? 'visibility_off' : 'visibility'
                 }</span>
-                ${historyVisible ? 'Hide Query History' : 'Show Query History'}
+                ${historyVisible ? 'Hide History' : 'Show History'}
               </button>
             </div>
           </div>

package/frontend/js/views/data.js

@@ -78,31 +78,32 @@ function renderTableList(state) {
     }
 
     return `
-    <div class="custom-scrollbar flex-1 overflow-auto px-4 py-4">
-      <div class="space-y-2">
-        ${filteredTables
-            .map(
-                table => `
-              <button
-                class="w-full border px-4 py-3 text-left transition-colors ${
-                    table.name === activeName
-                        ? 'border-primary-container/30 bg-surface-container-high'
-                        : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
-                }"
-                data-action="navigate"
-                data-to="/data/${encodeURIComponent(table.name)}"
-                type="button"
-              >
-                <div class="truncate font-mono text-xs ${
-                    table.name === activeName ? 'text-primary-container' : 'text-on-surface'
-                }">
-                  ${escapeHtml(table.name)}
-                </div>
-              </button>
-            `,
-            )
-            .join('')}
-      </div>
+    <div class="subnavi-list custom-scrollbar">
+      ${filteredTables
+          .map(
+              table => `
+            <button
+              class="table-designer-sidebar__item subnavi-item border px-4 py-3 text-left transition-colors ${
+                  table.name === activeName
+                      ? 'is-active border-primary-container/30 bg-surface-container-high'
+                      : 'border-outline-variant/10 bg-surface-container-lowest hover:bg-surface-container-high'
+              }"
+              data-action="navigate"
+              data-to="/data/${encodeURIComponent(table.name)}"
+              type="button"
+            >
+              <div class="table-designer-sidebar__item-name ${table.name === activeName ? 'is-active' : ''}">
+                ${escapeHtml(table.name)}
+              </div>
+              <div class="mt-1 truncate text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+                ${escapeHtml(formatNumber(table.columnCount ?? 0))} column${
+                    Number(table.columnCount ?? 0) === 1 ? '' : 's'
+                }
+              </div>
+            </button>
+          `,
+          )
+          .join('')}
     </div>
   `;
 }
@@ -112,13 +113,14 @@ function renderWorkspaceHeader(state) {
     const tablesVisible = state.dataBrowser.tablesVisible !== false;
 
     return `
-    <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-3">
+    <header class="workspace-header">
       <div class="flex flex-wrap items-center justify-between gap-4">
         <div class="flex items-center gap-3">
           ${
               table
                   ? `<button
-                    class="standard-button"
+                    class="standard-button panel-toggle-button ${tablesVisible ? '' : 'is-active'}"
+                    aria-pressed="${tablesVisible ? 'false' : 'true'}"
                     data-action="toggle-data-tables"
                     type="button"
                   >
@@ -631,17 +633,17 @@ export function renderDataView(state) {
     return {
         main: `
       <section class="view-surface min-h-full bg-surface-container flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="grid h-full min-h-0 grid-cols-1 ${tablesVisible ? 'md:grid-cols-[18rem_minmax(0,1fr)]' : ''}">
+        <div class="data-view-grid ${tablesVisible ? 'data-view-grid--with-subnavi' : ''}">
           ${
               tablesVisible
                   ? `
-                    <aside class="flex min-h-0 flex-col border-r border-outline-variant/10 bg-surface-low">
-                      <div class="border-b border-outline-variant/10 px-6 py-5">
-                        <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-                          Tables
-                        </div>
-                        <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-                          total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
+                    <aside class="data-view__sidebar subnavi-panel">
+                      <div class="subnavi-header">
+                        <div>
+                          <div class="subnavi-header-title">Tables</div>
+                          <div class="subnavi-header-details">
+                            total ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}
+                          </div>
                         </div>
                       </div>
                       ${renderDataTableSearch(state)}