sqlite-hub 0.8.7 → 0.9.0

package/frontend/js/components/modal.js

@@ -1,10 +1,18 @@
-import { escapeHtml, truncateMiddle } from "../utils/format.js";
+import { escapeHtml, highlightSql, truncateMiddle } from "../utils/format.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 import {
   analyzeQueryChartResult,
   getQueryChartTypeLabel,
   QUERY_CHART_TYPES,
 } from "../lib/queryCharts.js";
+import {
+  hasDefaultMediaTaggingTagTable,
+  hasDefaultMediaTaggingMappingTable,
+  MEDIA_TAGGING_DEFAULT_MAPPING_TABLE,
+  MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL,
+  MEDIA_TAGGING_DEFAULT_TAG_TABLE,
+  MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL,
+} from "../lib/mediaTaggingDefaults.js";
 
 function renderField({ label, name, type = "text", placeholder = "", value = "" }) {
   return `
@@ -25,7 +33,7 @@ function renderField({ label, name, type = "text", placeholder = "", value = ""
 
 function renderCheckboxField({ label, name, checked = false, text }) {
   return `
-    <label class="block space-y-2">
+    <label class="flex flex-col gap-2">
       <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
       </span>
@@ -41,6 +49,27 @@ function renderCheckboxField({ label, name, checked = false, text }) {
   `;
 }
 
+function renderSqlPreviewField(value, minHeightClass = "sql-highlight-shell--tall") {
+  return `
+    <div class="sql-highlight-shell ${minHeightClass}">
+      <div class="query-editor-layer sql-highlight-layer">
+        <div
+          aria-hidden="true"
+          class="query-editor-highlight sql-highlight-content"
+          data-query-editor-highlight
+        >${value ? highlightSql(value) : ""}</div>
+        <textarea
+          class="query-editor-input sql-highlight-input custom-scrollbar"
+          data-sql-highlight="true"
+          readonly
+          spellcheck="false"
+          wrap="off"
+        >${escapeHtml(value)}</textarea>
+      </div>
+    </div>
+  `;
+}
+
 function renderFileField({
   label,
   name,
@@ -70,7 +99,7 @@ function renderFileField({
 function renderSelectField({ label, name, value = "", options = [], bind = "" }) {
   return `
     <label class="block space-y-2">
-      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+      <span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
         ${escapeHtml(label)}
       </span>
       <select
@@ -687,6 +716,167 @@ function renderDeleteChartForm(modal) {
   `;
 }
 
+function renderDeleteQueryHistoryForm(modal) {
+  return `
+    <form class="space-y-5" data-form="delete-query-history-confirm">
+      <div class="space-y-3">
+        <p class="text-sm leading-7 text-on-surface">
+          Delete query <span class="font-bold text-primary-container">${escapeHtml(
+            modal.queryTitle ?? "SQL query"
+          )}</span>?
+        </p>
+        <p class="text-sm leading-7 text-on-surface-variant/65">
+          This removes the query-history entry and all recorded runs linked to it.
+        </p>
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="delete-button"
+          type="submit"
+        >
+          ${modal.submitting ? "Deleting..." : "Delete Query"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function renderCreateMediaTaggingMappingTableForm(modal, state) {
+  const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
+  const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
+
+  return `
+    <form class="space-y-5" data-form="create-media-tagging-mapping-table">
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Mapping Table
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-sm text-on-surface">
+          ${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)}
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Status
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
+          ${
+            mappingExists
+              ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} already exists in the active database.`
+              : `${escapeHtml(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE)} does not exist yet.`
+          }
+          ${
+            readOnly && !mappingExists
+              ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
+              : ""
+          }
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          SQL
+        </div>
+        ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL)}
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+        >
+          Close
+        </button>
+        ${
+          !mappingExists
+            ? `
+                <button
+                  class="standard-button"
+                  type="submit"
+                  ${readOnly ? "disabled" : ""}
+                >
+                  ${modal.submitting ? "Creating..." : "Create Table"}
+                </button>
+              `
+            : ""
+        }
+      </div>
+    </form>
+  `;
+}
+
+function renderCreateMediaTaggingTagTableForm(modal, state) {
+  const tagTableExists = hasDefaultMediaTaggingTagTable(state.mediaTagging.schemaTables ?? []);
+  const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
+
+  return `
+    <form class="space-y-5" data-form="create-media-tagging-tag-table">
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Tag Table
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 font-mono text-sm text-on-surface">
+          ${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)}
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Status
+        </div>
+        <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface">
+          ${
+            tagTableExists
+              ? `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} already exists in the active database.`
+              : `${escapeHtml(MEDIA_TAGGING_DEFAULT_TAG_TABLE)} does not exist yet.`
+          }
+          ${
+            readOnly && !tagTableExists
+              ? `<div class="mt-2 text-on-surface-variant/60">The active connection is read-only, so the table cannot be created here.</div>`
+              : ""
+          }
+        </div>
+      </div>
+      <div class="space-y-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          SQL
+        </div>
+        ${renderSqlPreviewField(MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL)}
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+        >
+          Close
+        </button>
+        ${
+          !tagTableExists
+            ? `
+                <button
+                  class="standard-button"
+                  type="submit"
+                  ${readOnly ? "disabled" : ""}
+                >
+                  ${modal.submitting ? "Creating..." : "Create Table"}
+                </button>
+              `
+            : ""
+        }
+      </div>
+    </form>
+  `;
+}
+
 export function renderModal(state) {
   const modal = state.modal;
 
@@ -730,6 +920,21 @@ export function renderModal(state) {
       title: "Delete Chart",
       body: renderDeleteChartForm(modal),
     },
+    "delete-query-history": {
+      eyebrow: "History // Confirm query deletion",
+      title: "Delete Query",
+      body: renderDeleteQueryHistoryForm(modal),
+    },
+    "create-media-tagging-tag-table": {
+      eyebrow: "Media Tagging // Create default tag table",
+      title: "Create Tag Table",
+      body: renderCreateMediaTaggingTagTableForm(modal, state),
+    },
+    "create-media-tagging-mapping-table": {
+      eyebrow: "Media Tagging // Create default join table",
+      title: "Create Mapping Table",
+      body: renderCreateMediaTaggingMappingTableForm(modal, state),
+    },
   };
 
   const config = contentByKind[modal.kind];

package/frontend/js/components/queryEditor.js

@@ -19,11 +19,16 @@ function renderHighlightedQuery(query) {
 
 function renderEditorSurface({ query }) {
   return `
-    <div class="flex min-h-0 flex-1 overflow-hidden">
-      <div class="flex w-12 flex-col items-center bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">
-        ${renderLineNumbers(query)}
+    <div class="query-editor-shell flex min-h-0 flex-1 overflow-hidden">
+      <div class="flex w-12 min-h-0 overflow-hidden bg-surface-container-lowest py-4 font-mono text-xs select-none text-outline-variant/30">
+        <div
+          class="query-editor-gutter-track flex w-full flex-col items-center"
+          data-query-editor-gutter
+        >
+          ${renderLineNumbers(query)}
+        </div>
       </div>
-      <div class="relative flex-1 overflow-hidden bg-surface-container p-6 font-mono text-sm leading-relaxed">
+      <div class="relative min-h-0 flex-1 overflow-hidden bg-surface-container p-6 font-mono text-sm leading-relaxed">
         <div class="pointer-events-none absolute right-0 top-0 p-4 opacity-5">
           <span class="material-symbols-outlined text-[120px] font-thin">terminal</span>
         </div>

package/frontend/js/components/queryHistoryDetail.js

@@ -19,6 +19,10 @@ function renderDetailMetaItem(label, value) {
   `;
 }
 
+function canOpenQueryHistoryInCharts(item) {
+  return Boolean(item?.chartsEligible);
+}
+
 function renderRunItem(run) {
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
@@ -182,15 +186,21 @@ export function renderQueryHistoryDetail({
           >
             Open In Editor
           </button>
-          <button
-            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>
+          ${
+            canOpenQueryHistoryInCharts(item)
+              ? `
+                <button
+                  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"
@@ -210,7 +220,7 @@ export function renderQueryHistoryDetail({
           </button>
           <button
             class="delete-button"
-            data-action="delete-query-history"
+            data-action="open-delete-query-history-modal"
             data-history-id="${escapeHtml(item.id)}"
             type="button"
           >

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" },
   ];
 
@@ -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>
         ${

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
@@ -135,7 +156,7 @@ export function renderRowEditorPanel({
           <button
             class="delete-button"
             data-action="${escapeHtml(deleteAction)}"
-            data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
+            ${deleteRowIndex === null ? "" : `data-row-index="${escapeHtml(String(deleteRowIndex))}"`}
             type="button"
             ${saving || deleting ? "disabled" : ""}
           >

package/frontend/js/components/sidebar.js

@@ -5,10 +5,19 @@ 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: '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' },
 ];
 
@@ -21,24 +30,59 @@ function getActiveSidebarKey(routeName) {
         return 'editor';
     }
 
+    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 expandedKey = activeKey === 'mediaTagging' ? 'mediaTagging' : null;
 
     return `
     <nav class="sidebar-links">
       ${sidebarItems
-          .map(
-              item => `
+          .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('')}
     </nav>
     <div class="sidebar-footer">