sqlite-hub 0.6.0 → 0.8.7

package/frontend/js/components/queryEditor.js

@@ -52,7 +52,10 @@ export function renderQueryEditor({
   exporting = false,
   historyLoading = false,
   historyTotal = 0,
+  editorVisible = true,
+  historyVisible = true,
 }) {
+  const secondaryButtonClass = "standard-button";
   const left = `
     <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
       <span class="material-symbols-outlined text-xs text-[#FCE300]">database</span>
@@ -68,21 +71,39 @@ export function renderQueryEditor({
 
   const right = `
     <button
-      class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
+      class="${secondaryButtonClass}"
+      data-action="toggle-editor-panel"
+      data-next-value="${editorVisible ? "false" : "true"}"
+      type="button"
+    >
+      <span class="material-symbols-outlined text-sm">${editorVisible ? "keyboard_arrow_down" : "terminal"}</span>
+      ${editorVisible ? "Hide Editor" : "Show Editor"}
+    </button>
+    <button
+      class="${secondaryButtonClass}"
+      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 History" : "Show History"}
+    </button>
+    <button
+      class="${secondaryButtonClass}"
       data-action="clear-query"
       type="button"
     >
       Clear
     </button>
     <button
-      class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
+      class="${secondaryButtonClass}"
       data-action="export-query-csv"
       type="button"
     >
       ${exporting ? "Exporting..." : "Export CSV"}
     </button>
     <button
-      class="bg-primary-container px-6 py-1.5 text-xs font-black uppercase tracking-tighter text-on-primary shadow-[0_0_15px_-5px_rgba(252,227,0,0.4)] transition-all hover:brightness-110"
+      class="signature-button"
       data-action="execute-query"
       type="button"
     >
@@ -99,9 +120,15 @@ export function renderQueryEditor({
           className: "flex-wrap",
         })}
       </div>
-      <div class="flex min-h-0 flex-1 flex-col">
-        ${renderEditorSurface({ query })}
-      </div>
+      ${
+        editorVisible
+          ? `
+            <div class="flex min-h-0 flex-1 flex-col">
+              ${renderEditorSurface({ query })}
+            </div>
+          `
+          : ""
+      }
     </div>
   `;
 }

package/frontend/js/components/queryHistoryDetail.js

@@ -155,14 +155,14 @@ export function renderQueryHistoryDetail({
           </label>
           <div class="mt-2 flex gap-2">
             <input
-              class="flex-1 border border-outline-variant/20 bg-surface-container px-3 py-2 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+              class="control-input flex-1 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"
               name="title"
               placeholder="${escapeHtml(item.displayTitle)}"
               type="text"
               value="${escapeHtml(item.title ?? "")}"
             />
             <button
-              class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              class="standard-button"
               type="submit"
             >
               Save
@@ -175,7 +175,7 @@ export function renderQueryHistoryDetail({
 
         <div class="mt-5 flex flex-wrap gap-2">
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
             data-action="open-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
@@ -183,7 +183,16 @@ export function renderQueryHistoryDetail({
             Open In Editor
           </button>
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
+            data-action="navigate"
+            data-to="/charts/${encodeURIComponent(item.id)}"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-sm">bar_chart</span>
+            Open In Charts
+          </button>
+          <button
+            class="standard-button"
             data-action="run-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
@@ -191,7 +200,7 @@ export function renderQueryHistoryDetail({
             Run Now
           </button>
           <button
-            class="toolbar-button border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+            class="standard-button"
             data-action="toggle-query-history-saved"
             data-history-id="${escapeHtml(item.id)}"
             data-next-value="${item.isSaved ? "false" : "true"}"
@@ -200,7 +209,7 @@ export function renderQueryHistoryDetail({
             ${item.isSaved ? "Unsave" : "Save"}
           </button>
           <button
-            class="toolbar-button border border-error/25 bg-error-container/20 px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-error transition-colors hover:border-error hover:bg-error-container/30"
+            class="delete-button"
             data-action="delete-query-history"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
@@ -228,7 +237,7 @@ export function renderQueryHistoryDetail({
           )}</textarea>
           <div class="mt-2 flex justify-end">
             <button
-              class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+              class="standard-button"
               type="submit"
             >
               Save Notes

package/frontend/js/components/queryHistoryPanel.js

@@ -150,17 +150,28 @@ export function renderQueryHistoryPanel({
   return `
     <aside class="query-history-panel border-l border-outline-variant/10 bg-surface-container-lowest">
       <div class="border-b border-outline-variant/10 px-4 py-4">
-        <div class="flex items-center gap-2">
-          <span class="material-symbols-outlined text-[18px] text-primary-container">history</span>
-          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
-            Query History
-          </span>
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex items-center gap-2">
+            <span class="material-symbols-outlined text-[18px] text-primary-container">history</span>
+            <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+              Query History
+            </span>
+          </div>
+          <button
+            class="query-history-icon-button"
+            data-action="toggle-query-history-panel"
+            data-next-value="false"
+            title="Hide query history"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
         <div class="mt-4">${renderQueryHistoryTabs(activeTab, total)}</div>
         <label class="mt-4 block">
           <span class="sr-only">Search query history</span>
           <input
-            class="w-full border border-outline-variant/20 bg-surface-container px-3 py-2 text-sm text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container"
+            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"
             data-bind="query-history-search"
             placeholder="Search SQL, titles, notes..."
             type="search"
@@ -212,7 +223,7 @@ export function renderQueryHistoryPanel({
             ? `
               <div class="mt-4 flex justify-center">
                 <button
-                  class="border border-outline-variant/20 bg-surface-container px-4 py-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant transition-colors hover:border-primary-container hover:text-primary-container"
+                  class="standard-button"
                   data-action="load-more-query-history"
                   type="button"
                 >

package/frontend/js/components/rowEditorPanel.js

@@ -106,12 +106,52 @@ export function renderRowEditorPanel({
   const canSubmit = !disabledMessage && editableFields.length > 0;
   const canDelete = !disabledMessage && deleteEnabled;
   const formId = `${formName}-panel-form`;
+  const headerActions = [
+    reloadAction
+      ? `
+          <button
+            class="standard-button"
+            data-action="${escapeHtml(reloadAction)}"
+            type="button"
+          >
+            Reload
+          </button>
+        `
+      : "",
+    canSubmit
+      ? `
+          <button
+            class="standard-button"
+            form="${escapeHtml(formId)}"
+            type="submit"
+            ${saving || deleting ? "disabled" : ""}
+          >
+            ${escapeHtml(saving ? "Saving..." : submitLabel)}
+          </button>
+        `
+      : "",
+    canDelete
+      ? `
+          <button
+            class="delete-button"
+            data-action="${escapeHtml(deleteAction)}"
+            data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
+            type="button"
+            ${saving || deleting ? "disabled" : ""}
+          >
+            ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
+          </button>
+        `
+      : "",
+  ]
+    .filter(Boolean)
+    .join("");
 
   return `
     <section class="flex h-full min-h-0 flex-col bg-surface-low">
       <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
-        <div class="space-y-4">
-          <div>
+        <div class="flex items-start justify-between gap-4">
+          <div class="min-w-0 flex-1">
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
             </div>
@@ -128,59 +168,24 @@ export function renderRowEditorPanel({
                 : ""
             }
           </div>
-          <div class="flex flex-wrap items-center justify-end gap-2">
-            ${
-              reloadAction
-                ? `
-                    <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"
-                      data-action="${escapeHtml(reloadAction)}"
-                      type="button"
-                    >
-                      Reload
-                    </button>
-                  `
-                : ""
-            }
-            ${
-              canSubmit
-                ? `
-                    <button
-                      class="bg-primary-container px-5 py-3 text-[10px] font-black uppercase tracking-[0.16em] text-on-primary disabled:cursor-default disabled:opacity-40"
-                      form="${escapeHtml(formId)}"
-                      type="submit"
-                      ${saving || deleting ? "disabled" : ""}
-                    >
-                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
-                    </button>
-                  `
-                : ""
-            }
-            ${
-              canDelete
-                ? `
-                    <button
-                      class="border border-error/25 bg-error-container/10 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-colors hover:bg-error-container/20 disabled:cursor-default disabled:opacity-40"
-                      data-action="${escapeHtml(deleteAction)}"
-                      data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
-                      type="button"
-                      ${saving || deleting ? "disabled" : ""}
-                    >
-                      ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
-                    </button>
-                  `
-                : ""
-            }
-            <button
-              aria-label="Close panel"
-              class="flex h-11 w-11 items-center justify-center border border-outline-variant/20 text-on-surface hover:bg-surface-container-highest"
-              data-action="${escapeHtml(closeAction)}"
-              type="button"
-            >
-              <span class="material-symbols-outlined text-base">close</span>
-            </button>
-          </div>
+          <button
+            aria-label="Close panel"
+            class="query-history-icon-button shrink-0"
+            data-action="${escapeHtml(closeAction)}"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
         </div>
+        ${
+          headerActions
+            ? `
+                <div class="mt-4 flex flex-wrap items-center justify-end gap-2">
+                  ${headerActions}
+                </div>
+              `
+            : ""
+        }
       </header>
       <div class="custom-scrollbar flex-1 overflow-auto px-6 py-6">
         ${

package/frontend/js/components/sidebar.js

@@ -1,60 +1,60 @@
-import { escapeHtml } from "../utils/format.js";
-import { renderConnectionLogo } from "./connectionLogo.js";
+import { escapeHtml } from '../utils/format.js';
+import { renderConnectionLogo } from './connectionLogo.js';
 
 const sidebarItems = [
-  { label: "Connections", href: "#/connections", key: "connections", icon: "database" },
-  { label: "Overview", href: "#/overview", key: "overview", icon: "dashboard" },
-  { label: "Data", href: "#/data", key: "data", icon: "table_rows" },
-  { label: "SQL Editor", href: "#/editor", key: "editor", icon: "terminal" },
-  { label: "Structure", href: "#/structure", key: "structure", icon: "account_tree" },
-  { label: "Table Designer", href: "#/table-designer", key: "tableDesigner", icon: "table_chart" },
-  { label: "Settings", href: "#/settings", key: "settings", icon: "settings" },
+    { label: 'Connections', href: '#/connections', key: 'connections', icon: 'database' },
+    { label: 'Overview', href: '#/overview', key: 'overview', icon: 'dashboard' },
+    { label: 'Data', href: '#/data', key: 'data', icon: 'table_rows' },
+    { label: 'SQL Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
+    { label: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
+    { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
+    { label: 'Table Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
+    { label: 'Settings', href: '#/settings', key: 'settings', icon: 'settings' },
 ];
 
 function getActiveSidebarKey(routeName) {
-  if (routeName === "landing") {
-    return "connections";
-  }
+    if (routeName === 'landing') {
+        return 'connections';
+    }
 
-  if (routeName === "editorResults") {
-    return "editor";
-  }
+    if (routeName === 'editorResults') {
+        return 'editor';
+    }
 
-  return routeName;
+    return routeName;
 }
 
 export function renderSidebar(state) {
-  const activeKey = getActiveSidebarKey(state.route.name);
-  const activeConnection = state.connections.active;
+    const activeKey = getActiveSidebarKey(state.route.name);
+    const activeConnection = state.connections.active;
 
-  return `
+    return `
     <nav class="sidebar-links">
       ${sidebarItems
-        .map(
-          (item) => `
-            <a class="sidebar-link ${item.key === activeKey ? "is-active" : ""}" href="${item.href}">
+          .map(
+              item => `
+            <a class="sidebar-link ${item.key === activeKey ? 'is-active' : ''}" href="${item.href}">
               <span class="material-symbols-outlined">${item.icon}</span>
               <span>${item.label}</span>
             </a>
-          `
-        )
-        .join("")}
+          `,
+          )
+          .join('')}
     </nav>
     <div class="sidebar-footer">
       <div class="sidebar-footer-card">
         ${renderConnectionLogo(activeConnection, {
-          containerClass:
-            "sidebar-footer-mark overflow-hidden bg-primary-container text-on-primary",
-          imageClassName: "h-full w-full object-cover",
-          iconClassName: "text-[15px]",
-          icon: "memory",
+            containerClass: 'sidebar-footer-mark overflow-hidden bg-primary-container text-on-primary',
+            imageClassName: 'h-full w-full object-cover',
+            iconClassName: 'text-[15px]',
+            icon: 'memory',
         })}
         <div class="min-w-0">
           <p class="truncate text-[10px] font-bold text-on-surface">
-            ${escapeHtml(activeConnection?.label ?? "NO_ACTIVE_DATABASE")}
+            ${escapeHtml(activeConnection?.label ?? 'NO_ACTIVE_DATABASE')}
           </p>
           <p class="text-[8px] text-on-surface-variant/60">
-            ${activeConnection?.readOnly ? "READ_ONLY" : "READ_WRITE"}
+            ${activeConnection?.readOnly ? 'READ_ONLY' : 'READ_WRITE'}
           </p>
         </div>
       </div>