sqlite-hub 1.0.0 → 1.1.1

package/frontend/js/views/connections.js

@@ -1,39 +1,36 @@
-import { renderConnectionCard } from "../components/connectionCard.js";
-import { renderPageHeader } from "../components/pageHeader.js";
-import { escapeHtml } from "../utils/format.js";
+import { renderConnectionCard } from '../components/connectionCard.js';
+import { renderPageHeader } from '../components/pageHeader.js';
+import { escapeHtml } from '../utils/format.js';
 
 function renderConnectionsActionButton({
-  label,
-  icon,
-  action = "open-modal",
-  modal,
-  tone = "secondary",
-  disabled = false,
+    label,
+    icon,
+    action = 'open-modal',
+    modal,
+    tone = 'secondary',
+    disabled = false,
 }) {
-  const toneClassName =
-    tone === "primary"
-      ? "signature-button"
-      : "standard-button";
-  const iconClassName = "";
-  const modalAttribute = modal ? `data-modal="${modal}"` : "";
+    const toneClassName = tone === 'primary' ? 'signature-button' : 'standard-button';
+    const iconClassName = '';
+    const modalAttribute = modal ? `data-modal="${modal}"` : '';
 
-  return `
+    return `
     <button
       class="${toneClassName}"
       data-action="${escapeHtml(action)}"
       ${modalAttribute}
       type="button"
-      ${disabled ? "disabled" : ""}
+      ${disabled ? 'disabled' : ''}
     >
       <span>${label}</span>
-      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ""}">${icon}</span>
+      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ''}">${icon}</span>
     </button>
   `;
 }
 
 function renderConnectionsBody(state) {
-  if (state.connections.loading && !state.connections.recent.length) {
-    return `
+    if (state.connections.loading && !state.connections.recent.length) {
+        return `
       <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
         <div class="text-center text-on-surface-variant/40">
           <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
@@ -41,10 +38,10 @@ function renderConnectionsBody(state) {
         </div>
       </div>
     `;
-  }
+    }
 
-  if (state.connections.error) {
-    return `
+    if (state.connections.error) {
+        return `
       <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
         <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
           ${escapeHtml(state.connections.error.code)}
@@ -52,10 +49,10 @@ function renderConnectionsBody(state) {
         <div class="mt-2">${escapeHtml(state.connections.error.message)}</div>
       </div>
     `;
-  }
+    }
 
-  if (!state.connections.recent.length) {
-    return `
+    if (!state.connections.recent.length) {
+        return `
       <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-10 text-center">
         <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
         <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
@@ -66,71 +63,69 @@ function renderConnectionsBody(state) {
         </p>
         <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
           ${renderConnectionsActionButton({
-            label: "Open Database",
-            icon: "folder_open",
-            modal: "open-connection",
-            tone: "primary",
+              label: 'Create Database',
+              icon: 'note_add',
+              modal: 'create-connection',
           })}
           ${renderConnectionsActionButton({
-            label: "Create Database",
-            icon: "note_add",
-            modal: "create-connection",
+              label: 'Open Database',
+              icon: 'folder_open',
+              modal: 'open-connection',
+              tone: 'primary',
           })}
         </div>
       </div>
     `;
-  }
+    }
 
-  return `
+    return `
     <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
       ${state.connections.recent
-        .map((connection) =>
-          renderConnectionCard(connection, state.connections.active?.id)
-        )
-        .join("")}
+          .map(connection => renderConnectionCard(connection, state.connections.active?.id))
+          .join('')}
     </div>
   `;
 }
 
 export function renderConnectionsView(state) {
-  const actions = `
+    const actions = `
+    ${
+        state.connections.active
+            ? renderConnectionsActionButton({
+                  label: state.connections.backupLoading ? 'Creating Backup...' : 'Create Backup',
+                  icon: 'inventory_2',
+                  action: 'create-backup',
+                  disabled: state.connections.backupLoading,
+              })
+            : ''
+    }
     ${renderConnectionsActionButton({
-      label: "Open Database",
-      icon: "folder_open",
-      modal: "open-connection",
-      tone: "primary",
+        label: 'Create Database',
+        icon: 'note_add',
+        modal: 'create-connection',
     })}
     ${renderConnectionsActionButton({
-      label: "Create Database",
-      icon: "note_add",
-      modal: "create-connection",
+        label: 'Open Database',
+        icon: 'folder_open',
+        modal: 'open-connection',
+        tone: 'primary',
     })}
-    ${
-      state.connections.active
-        ? renderConnectionsActionButton({
-            label: state.connections.backupLoading ? "Creating Backup..." : "Create Backup",
-            icon: "inventory_2",
-            action: "create-backup",
-            disabled: state.connections.backupLoading,
-          })
-        : ""
-    }
   `;
 
-  return {
-    main: `
+    return {
+        main: `
       <section class="view-surface relative min-h-full overflow-hidden">
         <div class="data-grid-texture pointer-events-none absolute inset-0"></div>
         <div class="view-frame relative z-10">
           ${renderPageHeader({
-            title: "Connections",
-            subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, "0")}`,
-            actions,
+              title: 'Connections',
+              subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, '0')}`,
+              actions,
           })}
           ${renderConnectionsBody(state)}
         </div>
       </section>
     `,
-    panel: "",
-  };
+        panel: '',
+    };
 }

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,30 +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-5">
-      <div class="flex flex-wrap items-end justify-between gap-4">
-        <div class="data-headline-container">
-          <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-            Data Browser
-          </div>
-          <h1 class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
-            ${escapeHtml(table?.name ?? 'Table Data')}
-          </h1>
-          <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-            ${
-                table
-                    ? `rows ${escapeHtml(formatNumber(table.rowCount ?? 0))} // columns ${escapeHtml(
-                          formatNumber(table.columns?.length ?? 0),
-                      )}`
-                    : `tables ${escapeHtml(formatNumber(state.dataBrowser.tables.length))}`
-            }
-          </div>
-        </div>
+    <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"
                   >
@@ -145,7 +130,14 @@ function renderWorkspaceHeader(state) {
                             : '<span class="material-symbols-outlined text-sm">visibility</span> Show Tables'
                     }
                   </button>
-                  <button
+                  `
+                  : ''
+          }
+        </div>
+        <div class="flex flex-wrap items-center justify-end gap-3">
+          ${
+              table
+                  ? `<button
                     class="standard-button"
                     data-action="open-data-export-modal"
                     type="button"
@@ -476,6 +468,8 @@ function renderTableSurface(state) {
         escapeHtml(formatNumber(totalRows)),
         filteredRowsText,
         ' rows',
+        ' // columns ',
+        escapeHtml(formatNumber(table.columns?.length ?? 0)),
         '</div>',
         '<div class="flex flex-wrap items-center gap-4"><div class="flex items-center gap-2">',
         '<span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">rows</span>',
@@ -639,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)}

package/frontend/js/views/documents.js

@@ -24,7 +24,7 @@ function renderDocumentListItem(item, selectedId) {
 
     return `
       <button
-        class="documents-list-item ${isSelected ? 'is-selected' : ''}"
+        class="documents-list-item subnavi-item ${isSelected ? 'is-selected' : ''}"
         data-action="select-document"
         data-document-id="${escapeHtml(item.id)}"
         type="button"
@@ -42,33 +42,58 @@ function renderDocumentListItem(item, selectedId) {
     `;
 }
 
+function getFilteredDocuments(items, searchQuery) {
+    const normalizedSearch = String(searchQuery ?? '')
+        .trim()
+        .toLowerCase();
+
+    if (!normalizedSearch) {
+        return items;
+    }
+
+    return items.filter(item =>
+        [item.filename, item.title]
+            .filter(Boolean)
+            .some(value => String(value).toLowerCase().includes(normalizedSearch)),
+    );
+}
+
+function renderDocumentsSearch(documents) {
+    return `
+      <label class="table-designer-sidebar__search">
+        <span class="material-symbols-outlined text-sm text-on-surface-variant/55">search</span>
+        <input
+          class="table-designer-sidebar__search-input"
+          data-bind="documents-search"
+          placeholder="Search documents..."
+          spellcheck="false"
+          type="search"
+          value="${escapeHtml(documents.searchQuery ?? '')}"
+        />
+      </label>
+    `;
+}
+
 function renderDocumentsSidebar(documents) {
     const items = documents.items ?? [];
+    const filteredItems = getFilteredDocuments(items, documents.searchQuery);
 
     return `
-      <aside class="documents-view__sidebar">
-        <div class="documents-view__sidebar-header">
+      <aside class="documents-view__sidebar subnavi-panel">
+        <div class="documents-view__sidebar-header subnavi-header">
           <div>
-            <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/50">
-              Documents
-            </div>
-            <div class="mt-1 font-mono text-xs text-primary-container">${formatNumber(items.length)} files</div>
+            <div class="subnavi-header-title">Documents</div>
+            <div class="subnavi-header-details">${formatNumber(items.length)} files</div>
           </div>
-          <button
-            class="icon-button"
-            data-action="create-document"
-            title="New document"
-            type="button"
-            ${documents.saving ? 'disabled aria-disabled="true"' : ''}
-          >
-            <span class="material-symbols-outlined">add</span>
-          </button>
         </div>
-        <div class="documents-view__sidebar-body custom-scrollbar">
+        ${renderDocumentsSearch(documents)}
+        <div class="documents-view__sidebar-body subnavi-list custom-scrollbar">
           ${
-              items.length
-                  ? items.map(item => renderDocumentListItem(item, documents.selectedId)).join('')
-                  : `<div class="documents-list-empty">No documents yet</div>`
+              filteredItems.length
+                  ? filteredItems.map(item => renderDocumentListItem(item, documents.selectedId)).join('')
+                  : `<div class="documents-list-empty">${
+                        items.length ? 'No documents match the current search.' : 'No documents yet'
+                    }</div>`
           }
         </div>
       </aside>
@@ -78,7 +103,9 @@ function renderDocumentsSidebar(documents) {
 function renderDocumentToolbar(documents) {
     const disabled = documents.saving || documents.detailLoading || !documents.selectedId;
 
-    return `       <label class="documents-filename-field">
+    return `
+      <div class="documents-titlebar">
+        <label class="documents-filename-field">
           <input
             class="control-input"
             data-bind="document-field"
@@ -90,13 +117,24 @@ function renderDocumentToolbar(documents) {
             ${!documents.selectedId ? 'disabled' : ''}
           />
         </label>
+        <button
+          class="signature-button documents-create-button"
+          data-action="create-document"
+          type="button"
+          ${documents.saving ? 'disabled aria-disabled="true"' : ''}
+        >
+          <span class="material-symbols-outlined">add</span>
+          New Document
+        </button>
+      </div>
       <div class="documents-toolbar">
    
  
        
         <div class="documents-toolbar__actions">
           <button
-            class="standard-button"
+            class="standard-button panel-toggle-button ${documents.editorVisible ? '' : 'is-active'}"
+            aria-pressed="${documents.editorVisible ? 'false' : 'true'}"
             data-action="toggle-document-pane"
             data-pane="editor"
             type="button"
@@ -105,7 +143,8 @@ function renderDocumentToolbar(documents) {
             ${documents.editorVisible ? 'Hide Editor' : 'Show Editor'}
           </button>
           <button
-            class="standard-button"
+            class="standard-button panel-toggle-button ${documents.previewVisible ? '' : 'is-active'}"
+            aria-pressed="${documents.previewVisible ? 'false' : 'true'}"
             data-action="toggle-document-pane"
             data-pane="preview"
             type="button"

package/frontend/js/views/editor.js

@@ -307,8 +307,6 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
                 query: state.editor.sqlText,
                 executing: state.editor.executing,
                 exporting: state.editor.exportLoading,
-                historyLoading: state.editor.historyLoading,
-                historyTotal: state.editor.historyTotal,
                 editorVisible: state.editor.editorPanelVisible,
                 historyVisible: state.editor.historyPanelVisible,
             })}

package/frontend/js/views/mediaTagging.js

@@ -396,8 +396,8 @@ function renderPreviewMedia(
 
     const metadata = getWorkflowMetadataEntries(currentItem);
     const toggleLabel = detailsVisible
-        ? '<span class="material-symbols-outlined">visibility_off</span> Shrink Media Viewer'
-        : 'Show Media Viewer';
+        ? '<span class="material-symbols-outlined">visibility_off</span> Hide Viewer'
+        : '<span class="material-symbols-outlined">visibility</span> Show Viewer';
 
     return `
     <div class="media-tagging-preview ${detailsVisible ? '' : 'media-tagging-preview--meta-hidden'}">
@@ -450,11 +450,12 @@ function renderPreviewMedia(
                     : ''
             }
             <button
-              class="standard-button media-tagging-preview__toggle"
+              class="standard-button panel-toggle-button media-tagging-preview__toggle ${detailsVisible ? '' : 'is-active'}"
+              aria-pressed="${detailsVisible ? 'false' : 'true'}"
               data-action="toggle-media-tagging-current-media"
               data-next-value="${detailsVisible ? 'false' : 'true'}"
-              data-expanded-label="Shrink Media Viewer"
-              data-collapsed-label="Show Media Viewer"
+              data-expanded-label="Hide Viewer"
+              data-collapsed-label="Show Viewer"
               aria-expanded="${detailsVisible ? 'true' : 'false'}"
               type="button"
             >

package/frontend/js/views/settings.js

@@ -30,6 +30,66 @@ function renderSettingsNavigation(activeSection) {
     `;
 }
 
+function renderVersionCheckStatus(settings) {
+    const result = settings.versionCheck;
+    const error = settings.versionCheckError;
+
+    if (error) {
+        return `
+          <div class="border border-error/20 bg-error-container/10 px-4 py-3 text-sm text-on-surface">
+            <div class="font-mono text-[10px] font-bold uppercase tracking-[0.18em] text-error">
+              ${escapeHtml(error.code ?? 'VERSION_CHECK_FAILED')}
+            </div>
+            <div class="mt-1 text-on-surface-variant">${escapeHtml(error.message ?? 'Version check failed.')}</div>
+          </div>
+        `;
+    }
+
+    if (!result) {
+        return `
+          <div class="border border-outline-variant/10 bg-surface-container-high px-4 py-3 text-sm text-on-surface-variant">
+            No version check has been run yet.
+          </div>
+        `;
+    }
+
+    const updateAvailable = Boolean(result.updateAvailable);
+    const releaseLink =
+        updateAvailable && result.releaseUrl
+            ? `
+              <a
+                class="standard-button"
+                href="${escapeHtml(result.releaseUrl)}"
+                rel="noreferrer"
+                target="_blank"
+              >
+                <span class="material-symbols-outlined text-sm">open_in_new</span>
+                Open Release
+              </a>
+            `
+            : '';
+
+    return `
+      <div class="border ${
+          updateAvailable ? 'border-primary-container/30 bg-primary-container/5' : 'border-outline-variant/10 bg-surface-container-high'
+      } px-4 py-3">
+        <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+          <div class="min-w-0">
+            <div class="font-mono text-[10px] font-bold uppercase tracking-[0.18em] ${
+                updateAvailable ? 'text-primary-container' : 'text-on-surface-variant/70'
+            }">
+              ${updateAvailable ? 'New Version Available' : 'Up To Date'}
+            </div>
+            <div class="mt-1 text-sm text-on-surface-variant">
+              Current v${escapeHtml(result.currentVersion ?? '0.0.0')} · Latest v${escapeHtml(result.latestVersion ?? 'unknown')}
+            </div>
+          </div>
+          ${releaseLink}
+        </div>
+      </div>
+    `;
+}
+
 function renderSettingsContent(state) {
     if (state.settings.loading && !state.settings.appVersion) {
         return `
@@ -56,6 +116,7 @@ function renderSettingsContent(state) {
     const activeSection = state.settings.section === 'api-tokens' ? 'api-tokens' : 'information';
     const appVersion = escapeHtml(state.settings.appVersion ?? '0.0.0');
     const sqliteVersion = escapeHtml(state.settings.sqliteVersion ?? 'unknown');
+    const versionCheckLoading = Boolean(state.settings.versionCheckLoading);
     const tokenDatabase = state.settings.tokenDatabase;
     const apiTokens = state.settings.apiTokens ?? [];
     const createdApiToken = state.settings.createdApiToken;
@@ -171,6 +232,23 @@ function renderSettingsContent(state) {
           <div class="border-t border-outline-variant/10 py-4 text-sm leading-6 text-on-surface-variant">
             SQL functions and syntax are evaluated with this SQLite runtime.
           </div>
+          <div class="border-t border-outline-variant/10 pt-4">
+            <div class="mb-3 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div class="text-[10px] font-mono uppercase tracking-[0.2em] text-on-surface-variant/60">
+                Version_Check
+              </div>
+              <button
+                class="standard-button"
+                data-action="check-app-version"
+                type="button"
+                ${versionCheckLoading ? 'disabled aria-disabled="true"' : ''}
+              >
+                <span class="material-symbols-outlined text-sm">${versionCheckLoading ? 'progress_activity' : 'sync'}</span>
+                ${versionCheckLoading ? 'Checking...' : 'Check Updates'}
+              </button>
+            </div>
+            ${renderVersionCheckStatus(state.settings)}
+          </div>
         </div>
       </section>