sqlite-hub 0.7.0 → 0.8.7

package/frontend/js/components/tableDesignerEditor.js

@@ -86,7 +86,7 @@ function renderColumnRow(column, draft, catalogTables) {
           )
           .join("")}
       </select>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -96,7 +96,7 @@ function renderColumnRow(column, draft, catalogTables) {
         />
         <span>Not null</span>
       </label>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -106,7 +106,7 @@ function renderColumnRow(column, draft, catalogTables) {
         />
         <span>Unique</span>
       </label>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -164,12 +164,13 @@ function renderColumnRow(column, draft, catalogTables) {
           .join("")}
       </select>
       <button
-        class="table-designer-delete"
+        class="delete-button"
         data-action="remove-table-designer-column"
         data-column-id="${escapeHtml(column.id)}"
         type="button"
       >
         <span class="material-symbols-outlined text-base">delete</span>
+        <span>Remove</span>
       </button>
     </div>
   `;
@@ -204,7 +205,7 @@ function renderFillToggle(draft) {
   const hasImportedRows = (draft.importedCsvRows?.length ?? 0) > 0;
 
   return `
-    <label class="table-designer-fill-toggle ${hasImportedRows ? "" : "is-disabled"}">
+    <label class="standard-checkbox table-designer-fill-toggle table-designer-checkbox-override ${hasImportedRows ? "" : "is-disabled"}">
       <input
         data-bind="table-designer-field"
         data-field="fillImportedRows"
@@ -301,14 +302,14 @@ export function renderTableDesignerEditor(state) {
         <div class="table-designer-main__actions">
           ${renderFillToggle(draft)}
           <button
-            class="table-designer-main__secondary"
+            class="standard-button"
             data-action="refresh-view"
             type="button"
           >
             Reload Schema
           </button>
           <button
-            class="table-designer-main__primary ${draft.canSave ? "" : "is-disabled"}"
+            class="standard-button"
             data-action="save-table-designer"
             ${draft.canSave ? "" : "disabled"}
             type="button"
@@ -342,7 +343,7 @@ export function renderTableDesignerEditor(state) {
             <div class="table-designer-main__section-title">Columns</div>
           </div>
           <button
-            class="table-designer-main__secondary"
+            class="standard-button"
             data-action="add-table-designer-column"
             type="button"
           >

package/frontend/js/components/tableDesignerSidebar.js

@@ -28,15 +28,7 @@ export function renderTableDesignerSidebar(state) {
         </div>
         <div class="table-designer-sidebar__header-actions">
           <button
-            class="table-designer-sidebar__new-button"
-            data-action="navigate"
-            data-to="/table-designer/new"
-            type="button"
-          >
-            + New Table
-          </button>
-          <button
-            class="table-designer-sidebar__import-button"
+            class="standard-button"
             data-action="import-table-designer-csv"
             type="button"
           >
@@ -47,7 +39,16 @@ export function renderTableDesignerSidebar(state) {
             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>
 

package/frontend/js/components/tableDesignerSqlPreview.js

@@ -1,40 +1,72 @@
 import { escapeHtml } from "../utils/format.js";
 
-export function renderTableDesignerSqlPreview(draft) {
+function renderPreviewHeader(draft, isVisible) {
+  return `
+    <div class="table-designer-preview__header">
+      <div>
+        <div class="table-designer-preview__eyebrow">SQL Preview</div>
+        <div class="table-designer-preview__title">${
+          draft ? "Live SQLite Output" : "No Draft Selected"
+        }</div>
+      </div>
+      <div class="table-designer-preview__actions">
+        ${
+          draft && isVisible
+            ? `
+              <button
+                class="standard-button"
+                data-action="copy-table-designer-sql"
+                type="button"
+              >
+                Copy SQL
+              </button>
+            `
+            : ""
+        }
+        <button
+          class="standard-button"
+          data-action="toggle-table-designer-sql-preview"
+          data-next-value="${isVisible ? "false" : "true"}"
+          type="button"
+        >
+          <span class="material-symbols-outlined">${isVisible ? "visibility_off" : "expand_less"}</span>
+          ${isVisible ? "Hide" : "Show"}
+        </button>
+      </div>
+    </div>
+  `;
+}
+
+export function renderTableDesignerSqlPreview(draft, isVisible = true) {
   if (!draft) {
     return `
-      <section class="table-designer-preview shell-section">
-        <div class="table-designer-preview__header">
-          <div>
-            <div class="table-designer-preview__eyebrow">SQL Preview</div>
-            <div class="table-designer-preview__title">No Draft Selected</div>
-          </div>
-        </div>
-        <div class="table-designer-preview__empty">
-          Select a table or create a new one to inspect the generated SQLite statements.
-        </div>
+      <section class="table-designer-preview shell-section${isVisible ? "" : " is-collapsed"}">
+        ${renderPreviewHeader(draft, isVisible)}
+        ${
+          isVisible
+            ? `
+              <div class="table-designer-preview__empty">
+                Select a table or create a new one to inspect the generated SQLite statements.
+              </div>
+            `
+            : ""
+        }
       </section>
     `;
   }
 
   return `
-    <section class="table-designer-preview shell-section">
-      <div class="table-designer-preview__header">
-        <div>
-          <div class="table-designer-preview__eyebrow">SQL Preview</div>
-          <div class="table-designer-preview__title">Live SQLite Output</div>
-        </div>
-        <button
-          class="table-designer-preview__copy"
-          data-action="copy-table-designer-sql"
-          type="button"
-        >
-          Copy SQL
-        </button>
-      </div>
-      <pre class="table-designer-preview__body custom-scrollbar">${escapeHtml(
-        draft.sqlPreview || "-- SQL preview unavailable."
-      )}</pre>
+    <section class="table-designer-preview shell-section${isVisible ? "" : " is-collapsed"}">
+      ${renderPreviewHeader(draft, isVisible)}
+      ${
+        isVisible
+          ? `
+            <pre class="table-designer-preview__body custom-scrollbar">${escapeHtml(
+              draft.sqlPreview || "-- SQL preview unavailable."
+            )}</pre>
+          `
+          : ""
+      }
     </section>
   `;
 }

package/frontend/js/store.js

@@ -135,6 +135,7 @@ const state = {
     tables: [],
     selectedTableName: null,
     draft: null,
+    sqlPreviewVisible: true,
     pendingImportedDraft: null,
     loading: false,
     detailLoading: false,
@@ -148,6 +149,7 @@ const state = {
     data: null,
     selectedName: null,
     detail: null,
+    tablesVisible: true,
     loading: false,
     detailLoading: false,
     error: null,
@@ -571,6 +573,7 @@ function setMissingDatabaseState() {
   state.structure.detailLoading = false;
   state.structure.data = null;
   state.structure.detail = null;
+  state.structure.tablesVisible = true;
   state.structure.error = error;
 
   state.tableDesigner.loading = false;
@@ -578,6 +581,7 @@ function setMissingDatabaseState() {
   state.tableDesigner.tables = [];
   state.tableDesigner.selectedTableName = null;
   state.tableDesigner.draft = null;
+  state.tableDesigner.sqlPreviewVisible = true;
   state.tableDesigner.pendingImportedDraft = null;
   state.tableDesigner.saving = false;
   state.tableDesigner.searchQuery = "";
@@ -1248,6 +1252,7 @@ function invalidateDatabaseCaches() {
   state.tableDesigner.tables = [];
   state.tableDesigner.selectedTableName = null;
   state.tableDesigner.draft = null;
+  state.tableDesigner.sqlPreviewVisible = true;
   state.tableDesigner.pendingImportedDraft = null;
   state.tableDesigner.saving = false;
   state.tableDesigner.searchQuery = "";
@@ -1257,6 +1262,7 @@ function invalidateDatabaseCaches() {
   resetChartsState();
   state.structure.data = null;
   state.structure.detail = null;
+  state.structure.tablesVisible = true;
 }
 
 async function loadRouteData(route) {
@@ -2125,11 +2131,28 @@ export async function selectStructureEntry(name) {
   await loadStructureDetail(++routeLoadVersion);
 }
 
+export function toggleStructureTablesPanel() {
+  state.structure.tablesVisible = state.structure.tablesVisible === false;
+  emitChange();
+}
+
 export function setTableDesignerSearchQuery(query) {
   state.tableDesigner.searchQuery = String(query ?? "");
   emitChange();
 }
 
+export function setTableDesignerSqlPreviewVisibility(visible) {
+  const nextValue =
+    typeof visible === "boolean" ? visible : !Boolean(state.tableDesigner.sqlPreviewVisible);
+
+  if (state.tableDesigner.sqlPreviewVisible === nextValue) {
+    return;
+  }
+
+  state.tableDesigner.sqlPreviewVisible = nextValue;
+  emitChange();
+}
+
 export function updateCurrentTableDesignerField(field, value) {
   if (!state.tableDesigner.draft) {
     return;

package/frontend/js/views/charts.js

@@ -157,7 +157,7 @@ function renderQuerySqlSection(state, rawSql) {
     return `
     <section class="mt-5 border border-outline-variant/10 bg-surface-container-lowest">
       <button
-        class="flex w-full items-center justify-between gap-3 border-b border-outline-variant/10 px-4 py-3 text-left"
+        class="standard-button flex w-full justify-between border-b border-outline-variant/10 px-4 text-left"
         data-action="toggle-charts-sql-panel"
         type="button"
       >
@@ -192,10 +192,13 @@ function renderQueryResultsSection(state) {
           Results
         </span>
         <button
-          class="toolbar-button query-chart-card__action"
+          class="standard-button"
           data-action="toggle-charts-results-panel"
           type="button"
         >
+          <span class="material-symbols-outlined text-sm">
+            ${isVisible ? 'table_rows_narrow' : 'table_rows'}
+          </span>
           ${isVisible ? 'Hide Results' : 'Show Results'}
         </button>
       </div>
@@ -244,7 +247,7 @@ function renderChartHeightPresetToggle(state) {
             .map(
                 preset => `
               <button
-                class="toolbar-button charts-height-toggle__button ${activePreset === preset.value ? 'is-active' : ''}"
+                class="standard-button charts-height-toggle__button ${activePreset === preset.value ? 'is-active' : ''}"
                 data-action="set-charts-height-preset"
                 data-preset="${preset.value}"
                 type="button"
@@ -312,7 +315,7 @@ function renderChartCard(chart, state, analysis) {
         </div>
         <div class="flex flex-wrap items-center gap-2">
           <button
-            class="toolbar-button query-chart-card__action"
+            class="standard-button"
             data-action="open-edit-query-chart-modal"
             data-chart-id="${escapeHtml(chart.id)}"
             type="button"
@@ -320,7 +323,7 @@ function renderChartCard(chart, state, analysis) {
             Edit
           </button>
           <button
-            class="toolbar-button query-chart-card__action"
+            class="delete-button"
             data-action="open-delete-query-chart-modal"
             data-chart-id="${escapeHtml(chart.id)}"
             type="button"
@@ -328,7 +331,7 @@ function renderChartCard(chart, state, analysis) {
             Delete
           </button>
           <button
-            class="toolbar-button query-chart-card__action"
+            class="standard-button"
             data-action="export-query-chart-png"
             data-chart-id="${escapeHtml(chart.id)}"
             type="button"
@@ -347,6 +350,7 @@ function renderChartCard(chart, state, analysis) {
 function renderChartsDetail(state) {
     const detail = state.charts.detail;
     const selectedHistoryId = state.charts.selectedHistoryId;
+    const historyVisible = state.editor.historyPanelVisible !== false;
 
     if (!selectedHistoryId) {
         return renderEmptyChartDetail();
@@ -384,32 +388,48 @@ function renderChartsDetail(state) {
     <div class="custom-scrollbar flex-1 overflow-auto">
       <div class="charts-detail-shell">
         <header class="charts-detail-shell__header">
-          <div class="min-w-0">
-            <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
-              Charts
-            </div>
+          <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
+            Charts
+          </div>
+          <div class="charts-detail-shell__title">
             <h1 class="mt-2 truncate font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(detail.item.displayTitle)}
             </h1>
           </div>
           <div class="charts-detail-shell__controls">
-            ${renderChartHeightPresetToggle(state)}
-            <button
-              class="toolbar-button charts-detail-shell__button"
-              data-action="open-query-history"
-              data-history-id="${escapeHtml(detail.item.id)}"
-              type="button"
-            >
-              Open In Editor
-            </button>
-            <button
-              class="toolbar-button charts-detail-shell__button charts-detail-shell__button--primary"
-              data-action="open-create-query-chart-modal"
-              type="button"
-              ${state.charts.resultError || !state.charts.result ? 'disabled' : ''}
-            >
-              New Chart
-            </button>
+            <div class="charts-detail-shell__controls-group">
+              ${renderChartHeightPresetToggle(state)}
+              <button
+                class="standard-button"
+                data-action="toggle-query-history-panel"
+                data-next-value="${historyVisible ? 'false' : 'true'}"
+                type="button"
+              >
+                <span class="material-symbols-outlined text-sm">${
+                  historyVisible ? 'visibility_off' : 'history'
+                }</span>
+                ${historyVisible ? 'Hide Query History' : 'Show Query History'}
+              </button>
+            </div>
+            <div class="charts-detail-shell__controls-group charts-detail-shell__controls-group--end">
+              <button
+                class="standard-button"
+                data-action="open-query-history"
+                data-history-id="${escapeHtml(detail.item.id)}"
+                type="button"
+              >
+                <span class="material-symbols-outlined text-sm">terminal</span>
+                Open In Editor
+              </button>
+              <button
+                class="signature-button"
+                data-action="open-create-query-chart-modal"
+                type="button"
+                ${state.charts.resultError || !state.charts.result ? 'disabled' : ''}
+              >
+                New Chart
+              </button>
+            </div>
           </div>
         </header>
 
@@ -442,6 +462,8 @@ function renderChartsDetail(state) {
 }
 
 export function renderChartsView(state) {
+    const historyVisible = state.editor.historyPanelVisible !== false || !state.charts.selectedHistoryId;
+
     if (!state.connections.active && state.charts.error?.code === 'ACTIVE_DATABASE_REQUIRED') {
         return {
             main: `<section class="view-surface flex min-h-full">${renderMissingDatabase()}</section>`,
@@ -452,17 +474,23 @@ export function renderChartsView(state) {
     return {
         main: `
       <section class="charts-view">
-        <aside class="charts-view__sidebar">
-          <div class="charts-view__sidebar-header">
-            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
-              Query History
-            </div>
-            <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
-              Charts
-            </h2>
-          </div>
-          ${renderChartsList(state)}
-        </aside>
+        ${
+            historyVisible
+                ? `
+                  <aside class="charts-view__sidebar">
+                    <div class="charts-view__sidebar-header">
+                      <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+                        Query History
+                      </div>
+                      <h2 class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                        Charts
+                      </h2>
+                    </div>
+                    ${renderChartsList(state)}
+                  </aside>
+                `
+                : ''
+        }
         <div class="charts-view__detail">${renderChartsDetail(state)}</div>
       </section>
     `,

package/frontend/js/views/connections.js

@@ -8,32 +8,25 @@ function renderConnectionsActionButton({
   action = "open-modal",
   modal,
   tone = "secondary",
-  className = "",
   disabled = false,
 }) {
-  const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
   const toneClassName =
     tone === "primary"
-      ? "clipped-corner border border-primary-container bg-primary-container text-on-primary shadow-[0_0_18px_-10px_rgba(252,227,0,0.65)] hover:bg-primary-fixed"
-      : "clipped-corner border border-outline-variant/20 bg-surface-container-highest text-primary-container shadow-[inset_2px_0_0_0_rgba(252,227,0,0.95)] hover:bg-surface-bright";
-  const iconClassName =
-    tone === "primary"
-      ? "text-base text-on-primary"
-      : "text-base text-primary-container/90";
-  const clipStyle = `style="--clip-path: ${clipPath};"`;
+      ? "signature-button"
+      : "standard-button";
+  const iconClassName = "";
   const modalAttribute = modal ? `data-modal="${modal}"` : "";
 
   return `
     <button
-      class="flex h-11 items-center justify-between gap-6 px-5 font-headline text-xs font-bold uppercase tracking-[0.18em] transition-colors disabled:cursor-default disabled:opacity-40 ${toneClassName} ${className}"
+      class="${toneClassName}"
       data-action="${escapeHtml(action)}"
       ${modalAttribute}
-      ${clipStyle}
       type="button"
       ${disabled ? "disabled" : ""}
     >
       <span>${label}</span>
-      <span class="material-symbols-outlined ${iconClassName}">${icon}</span>
+      <span class="material-symbols-outlined${iconClassName ? ` ${iconClassName}` : ""}">${icon}</span>
     </button>
   `;
 }
@@ -77,13 +70,11 @@ function renderConnectionsBody(state) {
             icon: "folder_open",
             modal: "open-connection",
             tone: "primary",
-            className: "min-w-[17rem] px-8 py-6 text-sm",
           })}
           ${renderConnectionsActionButton({
             label: "Create Database",
             icon: "note_add",
             modal: "create-connection",
-            className: "min-w-[17rem] px-8 py-6 text-sm",
           })}
         </div>
       </div>
@@ -108,13 +99,11 @@ export function renderConnectionsView(state) {
       icon: "folder_open",
       modal: "open-connection",
       tone: "primary",
-      className: "min-w-[13rem]",
     })}
     ${renderConnectionsActionButton({
       label: "Create Database",
       icon: "note_add",
       modal: "create-connection",
-      className: "min-w-[13rem]",
     })}
     ${
       state.connections.active
@@ -122,7 +111,6 @@ export function renderConnectionsView(state) {
             label: state.connections.backupLoading ? "Creating Backup..." : "Create Backup",
             icon: "inventory_2",
             action: "create-backup",
-            className: "min-w-[13rem]",
             disabled: state.connections.backupLoading,
           })
         : ""

package/frontend/js/views/data.js

@@ -93,14 +93,14 @@ function renderWorkspaceHeader(state) {
           ${
               table
                   ? `<button
-                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                    class="standard-button"
                     data-action="toggle-data-tables"
                     type="button"
                   >
                     ${tablesVisible ? '<span class="material-symbols-outlined text-sm">visibility_off</span> Hide Tables' : 'Show Tables'}
                   </button>
                   <button
-                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                    class="standard-button"
                     data-action="export-data-csv"
                     type="button"
                   >
@@ -109,7 +109,7 @@ function renderWorkspaceHeader(state) {
                   : ''
           }
           <button
-            class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+            class="standard-button"
             data-action="refresh-view"
             type="button"
           >
@@ -119,11 +119,12 @@ function renderWorkspaceHeader(state) {
               table
                   ? `
                   <button
-                    class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                    class="standard-button"
                     data-action="navigate"
                     data-to="/structure"
                     type="button"
                   >
+                  <span class="material-symbols-outlined">account_tree</span>
                     Open Structure
                   </button>
                 `
@@ -239,10 +240,10 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
 
     return `
     <div class="flex flex-wrap items-center gap-3 border-b border-outline-variant/10 bg-surface-container-low px-6 py-4">
-      <label class="flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-4 py-3">
+      <label class="control-shell flex min-w-[18rem] flex-1 items-center gap-3 border border-outline-variant/20 bg-surface-container-lowest px-3">
         <span class="material-symbols-outlined text-base text-on-surface-variant/55">search</span>
         <input
-          class="min-w-0 flex-1 bg-transparent text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
+          class="control-input control-input--ghost min-w-0 flex-1 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/40"
           data-bind="data-search-query"
           placeholder="Filter current page..."
           type="search"
@@ -250,7 +251,7 @@ function renderTableSearchBar(table, state, activeColumn, filteredRowCount) {
         />
       </label>
       <select
-        class="min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
+        class="control-select min-w-[14rem] border border-outline-variant/20 bg-surface-container-lowest font-mono text-xs tracking-[0.04em] text-on-surface outline-none"
         data-bind="data-search-column"
       >
         ${columns
@@ -390,10 +391,8 @@ function renderTableSurface(state) {
                   .map(
                       pageSize => `
                     <button
-                      class="border px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] transition-colors ${
-                          pageSize === (table.limit ?? state.dataBrowser.pageSize)
-                              ? 'border-primary-container/30 bg-surface-container-high text-primary-container'
-                              : 'border-outline-variant/20 text-on-surface hover:bg-surface-container-highest'
+                      class="standard-button ${
+                          pageSize === (table.limit ?? state.dataBrowser.pageSize) ? 'is-active' : ''
                       }"
                       data-action="set-data-page-size"
                       data-page-size="${pageSize}"
@@ -408,7 +407,7 @@ function renderTableSurface(state) {
           </div>
           <div class="flex items-center gap-2">
             <button
-              class="border border-outline-variant/20 px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:bg-surface-container-highest disabled:cursor-default disabled:opacity-30"
+              class="standard-button"
               data-action="set-data-page"
               data-page="${page - 1}"
               type="button"
@@ -420,7 +419,7 @@ function renderTableSurface(state) {
               page ${escapeHtml(formatNumber(page))} / ${escapeHtml(formatNumber(pageCount))}
             </div>
             <button
-              class="border border-outline-variant/20 px-3 py-2 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors hover:bg-surface-container-highest disabled:cursor-default disabled:opacity-30"
+              class="standard-button"
               data-action="set-data-page"
               data-page="${page + 1}"
               type="button"