sqlite-hub 1.1.1 → 1.2.0

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) {
@@ -57,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"

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

@@ -147,7 +147,7 @@ export function renderQueryResultsPane(
               ? renderDataGrid({
                   columns,
                   rows: result.rows ?? [],
-                  tableClass: "min-w-full border-collapse text-left font-mono text-xs",
+                  tableClass: "data-table min-w-full border-collapse text-left font-mono text-xs",
                   theadClass: "sticky top-0 z-10 bg-surface-container-highest text-on-surface",
                   tbodyClass: "divide-y divide-outline-variant/5",
                   getRowClass: (_, index) =>

package/frontend/js/components/rowEditorPanel.js

@@ -1,4 +1,6 @@
 import { escapeHtml } from "../utils/format.js";
+import { renderDropdownButton } from "./dropdownButton.js";
+import { detectEmailValue } from "../utils/emailPreview.js";
 import {
   compactPathForDisplay,
   detectFilePathValue,
@@ -49,6 +51,19 @@ function withUrlBadge(badges = [], url) {
   return hasUrlBadge ? badges : [...badges, { label: "URL", tone: "url" }];
 }
 
+function withEmailBadge(badges = [], email) {
+  if (!email) {
+    return badges;
+  }
+
+  const hasEmailBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "EMAIL";
+  });
+
+  return hasEmailBadge ? badges : [...badges, { label: "EMAIL", tone: "email" }];
+}
+
 function getAllowedValues(field) {
   const seen = new Set();
 
@@ -277,7 +292,11 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
   const filePathPreview = getFieldFilePathPreview({ ...field, rawValue }, tableMeta);
   const url = getUrlValue(value);
-  const badges = withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview);
+  const email = detectEmailValue(rawValue);
+  const badges = withEmailBadge(
+    withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview),
+    email
+  );
   const displayLabel = typeof label === "object" ? label.label : label;
   const jsonPreview = formatJsonPreview(value);
   const valueState = getRowEditorValueState(rawValue);
@@ -290,7 +309,9 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${
       url ? "data-row-editor-url-field" : ""
-    }>
+    }
+      ${email ? "data-row-editor-email-field" : ""}
+    >
       <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>
         ${renderFieldBadgesWithCharacterCount(badges, rawValue)}
@@ -334,10 +355,11 @@ function renderEditableField(field, tableMeta = {}) {
   const columnName = getFieldColumnName(field);
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
   const url = getUrlValue(field.value);
+  const email = detectEmailValue(getFieldRawValue(field));
   const allowedValues = getAllowedValues(field);
   const filePathPreview = getFieldFilePathPreview(field, tableMeta);
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
-  const badges = withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview);
+  const badges = withEmailBadge(withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview), email);
   const jsonPreview = formatJsonPreview(field.value);
   const inputType = field.inputType === "number" ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
@@ -351,6 +373,7 @@ function renderEditableField(field, tableMeta = {}) {
       data-row-editor-initial-state="${escapeHtml(valueState)}"
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${url ? "data-row-editor-url-field" : ""}
+      ${email ? "data-row-editor-email-field" : ""}
     >
       <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>
@@ -427,6 +450,10 @@ function getFieldBadgeClassName(tone) {
     return "border-primary-container/35 bg-primary-container/15 text-primary-container";
   }
 
+  if (tone === "email") {
+    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
+  }
+
   if (tone === "check") {
     return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
   }
@@ -488,16 +515,28 @@ export function renderRowEditorPanel({
         ].join("")
       : "",
     jsonActionsEnabled
-      ? [
-          '<button class="standard-button" data-action="copy-row-editor-json" type="button">',
-          '<span class="material-symbols-outlined text-sm">content_copy</span>',
-          "Copy as JSON",
-          "</button>",
-          '<button class="standard-button" data-action="export-row-editor-json" type="button">',
-          '<span class="material-symbols-outlined text-sm">download</span>',
-          "Export as JSON",
-          "</button>",
-        ].join("")
+      ? renderDropdownButton({
+          icon: "download",
+          label: "Export",
+          title: "Export row",
+          items: [
+            {
+              action: "copy-row-editor-json",
+              icon: "content_copy",
+              label: "Copy to clipboard",
+            },
+            {
+              action: "export-row-editor-json",
+              icon: "download",
+              label: "JSON file",
+            },
+            {
+              action: "insert-row-editor-json-into-document",
+              icon: "description",
+              label: "Markdown document",
+            },
+          ],
+        })
       : "",
     canSubmit
       ? [
@@ -521,6 +560,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/topNav.js

@@ -1,11 +1,8 @@
 export function renderTopNav() {
-  return `
+    return `
     <div class="top-nav-shell">
       <a class="top-nav-brand" href="#/">SQLite Hub</a>
       <div class="top-nav-actions">
-        <button class="top-nav-icon" data-action="refresh-view" type="button" aria-label="Refresh">
-          <span class="material-symbols-outlined">refresh</span>
-        </button>
         <button
           class="top-nav-icon"
           data-action="open-modal"

package/frontend/js/components/workspaceOpenDropdown.js

@@ -0,0 +1,52 @@
+import { renderDropdownButton } from "./dropdownButton.js";
+
+function buildOpenItem({ disabled, icon, label, target, tableName }) {
+  return {
+    action: "navigate",
+    dataAttributes: {
+      to: target,
+    },
+    disabled,
+    icon,
+    label,
+  };
+}
+
+export function renderWorkspaceOpenDropdown({
+  align = "right",
+  destinations = [],
+  disabled = false,
+  tableName = "",
+} = {}) {
+  const safeTableName = String(tableName ?? "").trim();
+  const items = destinations.map((destination) => {
+    if (destination.key === "sql-editor") {
+      return {
+        action: "open-table-in-sql-editor",
+        dataAttributes: {
+          tableName: safeTableName,
+        },
+        disabled: disabled || !safeTableName,
+        icon: "terminal",
+        label: "SQL Editor",
+      };
+    }
+
+    return buildOpenItem({
+      disabled: disabled || !safeTableName,
+      icon: destination.icon,
+      label: destination.label,
+      target: destination.target(safeTableName),
+      tableName: safeTableName,
+    });
+  });
+
+  return renderDropdownButton({
+    align,
+    disabled: disabled || !safeTableName,
+    icon: "open_in_new",
+    items,
+    label: "Open",
+    title: safeTableName ? `Open ${safeTableName}` : "Open table",
+  });
+}

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':