sqlite-hub 1.1.0 → 1.1.2

package/frontend/js/components/queryEditor.js

@@ -1,3 +1,4 @@
+import { renderDropdownButton } from "./dropdownButton.js";
 import { escapeHtml, highlightSql } from "../utils/format.js";
 
 function renderLineNumbers(query) {
@@ -45,7 +46,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"
@@ -56,21 +58,29 @@ export function renderQueryEditor({
   `;
 
   const center = `
-    <button
-      class="${secondaryButtonClass}"
-      data-action="format-current-query"
-      type="button"
-    >
-      <span class="material-symbols-outlined text-sm">format_align_left</span>
-      Format
-    </button>
-    <button
-      class="${secondaryButtonClass}"
-      data-action="clear-query"
-      type="button"
-    >
-      Clear
-    </button>
+    ${renderDropdownButton({
+      icon: "edit_note",
+      label: "Editor",
+      title: "Editor actions",
+      items: [
+        {
+          action: "format-current-query",
+          icon: "format_align_left",
+          label: "Format",
+        },
+        {
+          action: "clear-query",
+          icon: "delete_sweep",
+          label: "Clear",
+          danger: true,
+        },
+        {
+          action: "copy-current-query",
+          icon: "content_copy",
+          label: "Copy to Clipboard",
+        },
+      ],
+    })}
     <button
       class="${secondaryButtonClass}"
       data-action="open-query-export-modal"
@@ -90,7 +100,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 +113,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/queryHistoryDetail.js

@@ -35,11 +35,30 @@ function getQueryTypeTone(queryType) {
   return "muted";
 }
 
+function getExecutionSourceTone(source) {
+  if (source === "api") {
+    return "primary";
+  }
+
+  if (source === "cli") {
+    return "warning";
+  }
+
+  if (source === "mcp") {
+    return "muted";
+  }
+
+  return "success";
+}
+
 function renderRunItem(run) {
+  const executedBy = String(run.executedBy ?? "user").trim().toLowerCase() || "user";
+
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
       <div class="flex flex-wrap items-center gap-2">
         ${renderStatusBadge(run.status, run.status === "error" ? "alert" : "success")}
+        ${renderStatusBadge(executedBy, getExecutionSourceTone(executedBy))}
         <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
           ${escapeHtml(formatCompactDateTime(run.executedAt))}
         </span>
@@ -199,7 +218,7 @@ export function renderQueryHistoryDetail({
     "</button>",
     '<button class="delete-button" data-action="open-delete-query-history-modal" data-history-id="',
     escapeHtml(item.id),
-    '" type="button">Delete</button></div>',
+    '" type="button"><span class="material-symbols-outlined text-sm">delete</span>Delete</button></div>',
     '<div class="mt-6"><div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">SQL</div>',
     '<pre class="query-history-detail-sql custom-scrollbar mt-2 overflow-auto border border-outline-variant/10 bg-surface-container-lowest p-4 font-mono text-sm leading-6 text-on-surface"><code>',
     highlightSql(item.rawSql),

package/frontend/js/components/queryHistoryHeader.js

@@ -34,10 +34,11 @@ export function renderQueryHistorySearch({
     placeholder = 'Search SQL, titles, notes...',
 } = {}) {
     return `
-      <label class="mt-4 block">
+      <label class="query-history-search">
         <span class="sr-only">Search query history</span>
+        <span class="material-symbols-outlined query-history-search__icon" aria-hidden="true">search</span>
         <input
-          class="control-input w-full border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+          class="control-input query-history-search__input w-full border border-outline-variant/20 bg-surface-container text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
           data-bind="${escapeHtml(bind)}"
           placeholder="${escapeHtml(placeholder)}"
           type="search"

package/frontend/js/components/rowEditorPanel.js

@@ -521,6 +521,7 @@ export function renderRowEditorPanel({
           ' type="button" ',
           saving || deleting ? "disabled" : "",
           ">",
+          '<span class="material-symbols-outlined text-sm">delete</span>',
           escapeHtml(deleting ? "Deleting..." : deleteLabel),
           "</button>",
         ].join("")

package/frontend/js/components/sidebar.js

@@ -19,6 +19,7 @@ const sidebarItems = [
             { label: 'TAGGING_QUEUE', href: '#/media-tagging/queue', key: 'mediaTaggingQueue' },
         ],
     },
+    { label: 'Backups', href: '#/backups', key: 'backups', icon: 'inventory_2' },
     { label: 'Settings', href: '#/settings', key: 'settings', icon: 'settings' },
 ];
 

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/router.js

@@ -11,6 +11,8 @@ export function parseHash(hash = window.location.hash) {
     switch (segments[0]) {
         case 'connections':
             return { name: 'connections', path: '/connections', params: {} };
+        case 'backups':
+            return { name: 'backups', path: '/backups', params: {} };
         case 'overview':
             return { name: 'overview', path: '/overview', params: {} };
         case 'charts':