sqlite-hub 0.7.0 → 0.9.0

package/frontend/js/components/queryHistoryPanel.js

@@ -20,7 +20,7 @@ function getQueryTypeTone(queryType, isDestructive) {
   return "muted";
 }
 
-function renderHistoryItem(item, activeHistoryId, selectedHistoryId) {
+export function renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId) {
   const isActive = Number(activeHistoryId) === Number(item.id);
   const isSelected = Number(selectedHistoryId) === Number(item.id);
   const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
@@ -109,6 +109,7 @@ function renderQueryHistoryTabs(activeTab, historyTotal) {
   const tabs = [
     { id: "recent", label: "Recent" },
     { id: "saved", label: "Saved" },
+    { id: "unsaved", label: "Unsaved" },
     { id: "failed", label: "Failed" },
   ];
 
@@ -171,7 +172,7 @@ export function renderQueryHistoryPanel({
         <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"
@@ -204,9 +205,9 @@ export function renderQueryHistoryPanel({
             `
             : ""
         }
-        <div class="space-y-3">
+          <div class="space-y-3">
           ${items
-            .map((item) => renderHistoryItem(item, activeHistoryId, selectedHistoryId))
+            .map((item) => renderQueryHistoryListItem(item, activeHistoryId, selectedHistoryId))
             .join("")}
         </div>
         ${
@@ -223,7 +224,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

@@ -42,12 +42,23 @@ function renderJsonViewer(prettyJson, title = "JSON Viewer") {
 }
 
 function renderReadonlyField(label, value) {
+  const badges = Array.isArray(label?.badges) ? label.badges : [];
+  const displayLabel = typeof label === "object" ? label.label : label;
   const jsonPreview = getJsonPreview(value);
 
   return `
     <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
-      <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
-        ${escapeHtml(label)}
+      <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+        <span>${escapeHtml(displayLabel)}</span>
+        ${badges
+          .map(
+            (badge) => `
+              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
+                ${escapeHtml(badge)}
+              </span>
+            `
+          )
+          .join("")}
       </div>
       ${
         jsonPreview
@@ -59,12 +70,22 @@ function renderReadonlyField(label, value) {
 }
 
 function renderEditableField(field) {
+  const badges = Array.isArray(field.badges) ? field.badges : [];
   const jsonPreview = getJsonPreview(field.value);
 
   return `
     <label class="block space-y-2">
-      <span class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
-        ${escapeHtml(field.label ?? field.name)}
+      <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+        <span>${escapeHtml(field.label ?? field.name)}</span>
+        ${badges
+          .map(
+            (badge) => `
+              <span class="border border-outline-variant/20 bg-surface-container px-2 py-1 text-[9px] text-primary-container">
+                ${escapeHtml(badge)}
+              </span>
+            `
+          )
+          .join("")}
       </span>
       ${
         jsonPreview
@@ -106,12 +127,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)}"
+            ${deleteRowIndex === null ? "" : `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 +189,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,61 +1,104 @@
-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: "Charts", href: "#/charts", key: "charts", icon: "bar_chart" },
-  { 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: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
+    { label: 'SQL Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
+    { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
+    { label: 'Table Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
+    {
+        label: 'Media Tagging',
+        key: 'mediaTagging',
+        icon: 'sell',
+        children: [
+            { label: 'Setup', href: '#/media-tagging', key: 'mediaTaggingSetup' },
+            { label: 'Tagging Queue', href: '#/media-tagging/queue', key: 'mediaTaggingQueue' },
+        ],
+    },
+    { 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;
+    if (routeName === 'mediaTaggingSetup' || routeName === 'mediaTaggingQueue') {
+        return 'mediaTagging';
+    }
+
+    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;
+    const expandedKey = activeKey === 'mediaTagging' ? 'mediaTagging' : null;
 
-  return `
+    return `
     <nav class="sidebar-links">
       ${sidebarItems
-        .map(
-          (item) => `
-            <a class="sidebar-link ${item.key === activeKey ? "is-active" : ""}" href="${item.href}">
+          .map(item => {
+              if (item.children) {
+                  const isExpanded = expandedKey === item.key;
+                  const isActive = activeKey === item.key;
+                  return `
+            <div class="sidebar-group">
+              <a class="sidebar-link ${isActive ? 'is-active' : ''}" href="${item.children[0].href}" data-group="${item.key}">
+                <span class="material-symbols-outlined">${item.icon}</span>
+                <span>${item.label}</span>
+                <span class="material-symbols-outlined ml-auto text-[14px] ${isExpanded ? 'rotate-180' : ''}">expand_more</span>
+              </a>
+              ${
+                  isExpanded
+                      ? `
+              <div class="sidebar-sublinks">
+                ${item.children
+                    .map(
+                        child => `
+                <a class="sidebar-sublink ${state.route.name === child.key ? 'is-active' : ''}" href="${child.href}">
+                  ${child.label}
+                </a>
+                `,
+                    )
+                    .join('')}
+              </div>
+              `
+                      : ''
+              }
+            </div>
+          `;
+              }
+              return `
+            <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>