sqlite-hub 1.0.0 → 1.1.1

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"
@@ -351,49 +351,11 @@ export function renderTableDesignerEditor(state) {
               value="${escapeHtml(draft.tableName)}"
             />
             ${
-              draft.mode === "edit"
-                ? `<div class="status-badge status-badge--muted">FROM ${escapeHtml(
-                    draft.originalTableName
-                  )}</div>`
-                : `<div class="status-badge status-badge--primary">CREATE</div>`
+              draft.mode === "create"
+                ? `<div class="status-badge status-badge--primary">CREATE</div>`
+                : ""
             }
           </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"
@@ -402,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

@@ -49,10 +49,13 @@ const UI_PREFERENCE_STORAGE_KEYS = {
     dataTablesVisible: 'sqlite_hub_data_tables_visible',
     structureTablesVisible: 'sqlite_hub_structure_tables_visible',
     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;
@@ -63,6 +66,8 @@ const TEXT_EXPORT_FORMAT_LABELS = {
     csv: 'CSV',
     tsv: 'TSV',
     md: 'Markdown',
+    json: 'JSON',
+    parquet: 'Parquet',
 };
 const MISSING_DATABASE_ERROR = {
     code: 'ACTIVE_DATABASE_REQUIRED',
@@ -262,6 +267,9 @@ const state = {
         error: null,
         appVersion: null,
         sqliteVersion: null,
+        versionCheck: null,
+        versionCheckLoading: false,
+        versionCheckError: null,
     },
     overview: {
         data: null,
@@ -331,10 +339,13 @@ const state = {
         loading: false,
         error: null,
         historyTab: readStoredChartsHistoryTab(),
+        historySearchInput: '',
+        historySearch: '',
         historyPanelVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsHistoryVisible, true),
+        detailPanelVisible: false,
         selectedHistoryId: null,
         chartHeightPreset: 'medium',
-        sqlExpanded: false,
+        queryVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsQueryVisible, true),
         resultsVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true),
         detail: null,
         detailLoading: false,
@@ -347,6 +358,7 @@ const state = {
         items: [],
         selectedId: null,
         selected: null,
+        searchQuery: '',
         draftFilename: '',
         draftContent: '',
         dirty: false,
@@ -363,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,
@@ -415,7 +428,7 @@ const state = {
         issues: [],
         dismissedIssueKeys: [],
         selectedTagKeys: [],
-        workflowMediaDetailsVisible: true,
+        workflowMediaDetailsVisible: readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.mediaTaggingViewerVisible, true),
         workflowMediaRotationDegrees: 0,
         skippedMediaKeys: [],
         tagFormValues: {},
@@ -929,10 +942,13 @@ function resetChartsState() {
     state.charts.loading = false;
     state.charts.error = null;
     state.charts.historyTab = readStoredChartsHistoryTab(state.charts.historyTab);
+    state.charts.historySearchInput = '';
+    state.charts.historySearch = '';
     state.charts.historyPanelVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsHistoryVisible, true);
+    state.charts.detailPanelVisible = false;
     state.charts.selectedHistoryId = null;
     state.charts.chartHeightPreset = 'medium';
-    state.charts.sqlExpanded = false;
+    state.charts.queryVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsQueryVisible, true);
     state.charts.resultsVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true);
     state.charts.detail = null;
     state.charts.detailLoading = false;
@@ -947,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;
@@ -1019,7 +1036,7 @@ function normalizeChartsHeightPreset(value) {
 }
 
 function normalizeChartsHistoryTab(value) {
-    return ['recent', 'saved'].includes(value) ? value : 'recent';
+    return ['recent', 'saved', 'unsaved'].includes(value) ? value : 'recent';
 }
 
 function mergeQueryHistoryItemWithChartSummary(updatedItem, fallbackItem = null) {
@@ -1177,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;
@@ -1358,6 +1376,33 @@ export function setSettingsSection(section) {
     emitChange();
 }
 
+export async function checkSettingsAppVersion() {
+    state.settings.versionCheckLoading = true;
+    state.settings.versionCheckError = null;
+    emitChange();
+
+    try {
+        const response = await api.checkAppVersion();
+        const result = response.data ?? null;
+
+        state.settings.versionCheck = result;
+        pushToast(
+            result?.updateAvailable
+                ? `SQLite Hub v${result.latestVersion} is available.`
+                : 'SQLite Hub is up to date.',
+            'success',
+        );
+        return result;
+    } catch (error) {
+        state.settings.versionCheckError = normalizeError(error);
+        pushToast('Version check failed.', 'alert');
+        return null;
+    } finally {
+        state.settings.versionCheckLoading = false;
+        emitChange();
+    }
+}
+
 export async function deleteSettingsApiToken(tokenId) {
     state.settings.tokenSaving = true;
     state.settings.error = null;
@@ -1557,7 +1602,8 @@ async function loadChartsDetail(historyId) {
 
     if (!Number.isInteger(numericId) || numericId < 1) {
         state.charts.selectedHistoryId = null;
-        state.charts.sqlExpanded = false;
+        state.charts.detailPanelVisible = false;
+        state.charts.queryVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsQueryVisible, true);
         state.charts.resultsVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true);
         state.charts.detail = null;
         state.charts.detailLoading = false;
@@ -1570,7 +1616,7 @@ async function loadChartsDetail(historyId) {
     }
 
     state.charts.selectedHistoryId = numericId;
-    state.charts.sqlExpanded = false;
+    state.charts.queryVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsQueryVisible, true);
     state.charts.resultsVisible = readStoredBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsResultsVisible, true);
     state.charts.detail = null;
     state.charts.detailLoading = true;
@@ -2344,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;
@@ -2388,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 = {};
@@ -3448,7 +3499,8 @@ export async function openEditorRowUpdatePreview(rowIndex, values) {
 }
 
 export function toggleChartsSqlPanel() {
-    state.charts.sqlExpanded = !state.charts.sqlExpanded;
+    state.charts.queryVisible = !state.charts.queryVisible;
+    storeBoolean(UI_PREFERENCE_STORAGE_KEYS.chartsQueryVisible, state.charts.queryVisible);
     emitChange();
 }
 
@@ -3470,6 +3522,17 @@ export function setChartsHistoryPanelVisibility(visible) {
     emitChange();
 }
 
+export function setChartsDetailPanelVisibility(visible) {
+    const nextValue = typeof visible === 'boolean' ? visible : !Boolean(state.charts.detailPanelVisible);
+
+    if (state.charts.detailPanelVisible === nextValue) {
+        return;
+    }
+
+    state.charts.detailPanelVisible = nextValue;
+    emitChange();
+}
+
 export function setChartsHeightPreset(preset) {
     const nextPreset = normalizeChartsHeightPreset(preset);
 
@@ -3497,6 +3560,18 @@ export function setChartsHistoryTab(tab) {
     emitChange();
 }
 
+export function setChartsHistorySearchInput(query) {
+    const nextQuery = String(query ?? '');
+
+    if (state.charts.historySearchInput === nextQuery && state.charts.historySearch === nextQuery.trim()) {
+        return;
+    }
+
+    state.charts.historySearchInput = nextQuery;
+    state.charts.historySearch = nextQuery.trim();
+    emitChange();
+}
+
 export function updateCurrentQueryChartDraftField(field, value) {
     if (state.modal?.kind !== 'chart-editor' || !state.modal.draft) {
         return;
@@ -3935,7 +4010,9 @@ export function openQueryHistoryInEditor(historyId, options = {}) {
     clearQueryHistoryDetailState();
     state.editor.sqlText = options.append ? [state.editor.sqlText.trim(), rawSql].filter(Boolean).join('\n\n') : rawSql;
     storeString(UI_PREFERENCE_STORAGE_KEYS.sqlEditorQueryDraft, state.editor.sqlText);
-    emitChange();
+    if (options.notify !== false) {
+        emitChange();
+    }
     return true;
 }
 
@@ -4042,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();
@@ -4052,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);
 
@@ -4293,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/utils/exportFilenames.js

@@ -2,6 +2,8 @@ export const TEXT_EXPORT_EXTENSIONS = {
   csv: "csv",
   tsv: "tsv",
   md: "md",
+  json: "json",
+  parquet: "parquet",
 };
 
 export function normalizeTextExportFormat(format = "csv") {
@@ -10,7 +12,7 @@ export function normalizeTextExportFormat(format = "csv") {
 }
 
 function stripKnownTextExportExtension(value = "") {
-  return String(value).replace(/\.(csv|tsv|md)$/i, "");
+  return String(value).replace(/\.(csv|tsv|md|json|parquet)$/i, "");
 }
 
 export function sanitizeExportFilenameBase(value, fallback = "export") {