sqlite-hub 0.3.2 → 0.5.0

package/{js → frontend/js}/components/modal.js

@@ -1,4 +1,5 @@
 import { escapeHtml, truncateMiddle } from "../utils/format.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 function renderField({ label, name, type = "text", placeholder = "", value = "" }) {
   return `
@@ -31,6 +32,32 @@ function renderCheckboxField({ label, name, checked = false, text }) {
   `;
 }
 
+function renderFileField({
+  label,
+  name,
+  accept = "",
+  helpText = "",
+}) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <input
+        accept="${escapeHtml(accept)}"
+        class="block w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface file:mr-4 file:border-0 file:bg-primary-container file:px-3 file:py-2 file:text-xs file:font-bold file:text-on-primary"
+        name="${escapeHtml(name)}"
+        type="file"
+      />
+      ${
+        helpText
+          ? `<p class="text-[11px] leading-5 text-on-surface-variant/60">${escapeHtml(helpText)}</p>`
+          : ""
+      }
+    </label>
+  `;
+}
+
 function renderError(error) {
   if (!error) {
     return "";
@@ -102,6 +129,36 @@ function renderEditConnectionForm(modal) {
         placeholder: "Optional display name",
         value: connection.label ?? "",
       })}
+      <div class="space-y-3">
+        <span class="block text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Database Icon
+        </span>
+        <div class="flex flex-wrap items-center gap-4 border border-outline-variant/10 bg-surface-container-lowest px-4 py-4">
+          ${renderConnectionLogo(connection, {
+            containerClass:
+              "flex h-16 w-16 items-center justify-center overflow-hidden border border-outline-variant/20 bg-surface-container-highest",
+            imageClassName: "h-full w-full object-cover",
+            iconClassName: "text-2xl text-primary-container",
+          })}
+          <div class="min-w-0 flex-1">
+            ${renderFileField({
+              label: "Upload image",
+              name: "logoFile",
+              accept: ".png,.jpg,.jpeg,.webp,image/png,image/jpeg,image/webp",
+              helpText: "Allowed formats: PNG, JPG, WEBP. The file is stored in db_logos.",
+            })}
+            ${
+              connection.logoUrl
+                ? renderCheckboxField({
+                    label: "Reset icon",
+                    name: "clearLogo",
+                    text: "Use the default icon again",
+                  })
+                : ""
+            }
+          </div>
+        </div>
+      </div>
       ${renderCheckboxField({
         label: "Open read-only",
         name: "readOnly",

package/{js → frontend/js}/components/queryEditor.js

@@ -9,23 +9,6 @@ function renderLineNumbers(query) {
     .join("");
 }
 
-function renderHistoryOptions(history) {
-  if (!history.length) {
-    return '<option value="">No recent statements</option>';
-  }
-
-  return [
-    '<option value="">Load recent statement...</option>',
-    ...history.map(
-      (entry) => `
-        <option value="${escapeHtml(entry.id)}">
-          ${escapeHtml(entry.sql.replace(/\s+/g, " ").slice(0, 96))}
-        </option>
-      `
-    ),
-  ].join("");
-}
-
 function renderHighlightedQuery(query) {
   if (query) {
     return highlightSql(query);
@@ -34,13 +17,41 @@ function renderHighlightedQuery(query) {
   return '<span class="text-on-surface-variant/35">SELECT name FROM sqlite_master WHERE type = \'table\';</span>';
 }
 
+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>
+      <div class="relative 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>
+        <div class="query-editor-layer relative z-10 h-full min-h-[140px]">
+          <pre
+            aria-hidden="true"
+            class="query-editor-highlight"
+            data-query-editor-highlight
+          >${renderHighlightedQuery(query)}</pre>
+          <textarea
+            class="query-editor-input custom-scrollbar relative z-10 h-full min-h-[140px] w-full resize-none border-none focus:ring-0"
+            data-bind="current-query"
+            placeholder="SELECT name FROM sqlite_master WHERE type = 'table';"
+            spellcheck="false"
+          >${escapeHtml(query)}</textarea>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 export function renderQueryEditor({
   query,
   title,
   executing = false,
   exporting = false,
-  history = [],
   historyLoading = false,
+  historyTotal = 0,
 }) {
   const left = `
     <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
@@ -51,24 +62,11 @@ export function renderQueryEditor({
     </div>
     <div class="hidden items-center gap-2 text-[10px] font-mono uppercase tracking-widest text-on-surface-variant/40 md:flex">
       <span class="material-symbols-outlined text-xs">history</span>
-      ${historyLoading ? "Loading history..." : `${history.length} statements in history`}
+      ${historyLoading ? "Loading history..." : `${historyTotal} queries tracked`}
     </div>
   `;
 
   const right = `
-    <select
-      class="min-w-[220px] border border-outline-variant/20 bg-surface-container-lowest px-3 py-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant outline-none"
-      data-bind="history-entry"
-    >
-      ${renderHistoryOptions(history)}
-    </select>
-    <button
-      class="px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest text-on-surface hover:bg-surface-container-highest transition-colors"
-      data-action="clear-sql-history"
-      type="button"
-    >
-      Clear History
-    </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"
       data-action="clear-query"
@@ -93,7 +91,7 @@ export function renderQueryEditor({
   `;
 
   return `
-    <div class="flex h-full flex-col">
+    <div class="flex h-full min-h-0 flex-col">
       <div class="bg-surface-container-low px-6 py-3">
         ${renderActionBar({
           left,
@@ -101,28 +99,8 @@ export function renderQueryEditor({
           className: "flex-wrap",
         })}
       </div>
-      <div class="flex 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>
-        <div class="relative 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>
-          <div class="query-editor-layer relative z-10 h-full min-h-[140px]">
-            <pre
-              aria-hidden="true"
-              class="query-editor-highlight"
-              data-query-editor-highlight
-            >${renderHighlightedQuery(query)}</pre>
-            <textarea
-              class="query-editor-input custom-scrollbar relative z-10 h-full min-h-[140px] w-full resize-none border-none focus:ring-0"
-              data-bind="current-query"
-              placeholder="SELECT name FROM sqlite_master WHERE type = 'table';"
-              spellcheck="false"
-            >${escapeHtml(query)}</textarea>
-          </div>
-        </div>
+      <div class="flex min-h-0 flex-1 flex-col">
+        ${renderEditorSurface({ query })}
       </div>
     </div>
   `;

package/frontend/js/components/queryHistoryDetail.js

@@ -0,0 +1,263 @@
+import {
+  escapeHtml,
+  formatCompactDateTime,
+  formatDateTime,
+  formatDurationMs,
+  formatNumber,
+  highlightSql,
+} from "../utils/format.js";
+import { renderStatusBadge } from "./badges.js";
+
+function renderDetailMetaItem(label, value) {
+  return `
+    <div class="border border-outline-variant/10 bg-surface-container px-3 py-3">
+      <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+        ${escapeHtml(label)}
+      </div>
+      <div class="mt-2 text-sm text-on-surface">${escapeHtml(value)}</div>
+    </div>
+  `;
+}
+
+function renderRunItem(run) {
+  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")}
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          ${escapeHtml(formatCompactDateTime(run.executedAt))}
+        </span>
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          ${escapeHtml(formatDurationMs(run.durationMs))}
+        </span>
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          rows ${escapeHtml(formatNumber(run.rowCount ?? 0))}
+        </span>
+        <span class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          affected ${escapeHtml(formatNumber(run.affectedRows ?? 0))}
+        </span>
+      </div>
+      ${
+        run.errorMessage
+          ? `
+            <div class="mt-3 border border-error/20 bg-error-container/20 px-3 py-3 text-sm leading-6 text-error">
+              ${escapeHtml(run.errorMessage)}
+            </div>
+          `
+          : ""
+      }
+    </div>
+  `;
+}
+
+export function renderQueryHistoryDetail({
+  item = null,
+  runs = [],
+  loading = false,
+  error = null,
+}) {
+  if (!item && !loading && !error) {
+    return "";
+  }
+
+  if (loading) {
+    return `
+      <section class="flex h-full min-h-0 flex-col bg-surface-low">
+        <div class="border-b border-outline-variant/10 px-5 py-4">
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+              Query Detail
+            </span>
+            <button
+              class="query-history-icon-button"
+              data-action="clear-query-history-selection"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-[18px]">close</span>
+            </button>
+          </div>
+        </div>
+        <div class="flex flex-1 items-center justify-center px-6 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+          Loading query detail...
+        </div>
+      </section>
+    `;
+  }
+
+  if (error) {
+    return `
+      <section class="flex h-full min-h-0 flex-col bg-surface-low">
+        <div class="border-b border-outline-variant/10 px-5 py-4">
+          <div class="flex items-center justify-between gap-3">
+            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+              Query Detail
+            </span>
+            <button
+              class="query-history-icon-button"
+              data-action="clear-query-history-selection"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-[18px]">close</span>
+            </button>
+          </div>
+        </div>
+        <div class="p-5">
+          <div class="border border-error/30 bg-error-container/20 px-4 py-4 text-sm text-error">
+            ${escapeHtml(error.message)}
+          </div>
+        </div>
+      </section>
+    `;
+  }
+
+  return `
+    <section class="flex h-full min-h-0 flex-col bg-surface-low">
+      <div class="border-b border-outline-variant/10 px-5 py-4">
+        <div class="flex items-center justify-between gap-3">
+          <div>
+            <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">
+              Query Detail
+            </div>
+            <h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">
+              ${escapeHtml(item.displayTitle)}
+            </h2>
+          </div>
+          <button
+            class="query-history-icon-button"
+            data-action="clear-query-history-selection"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">close</span>
+          </button>
+        </div>
+        <div class="mt-4 flex flex-wrap gap-2">
+          ${renderStatusBadge(item.queryType, item.isDestructive ? "alert" : "primary")}
+          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
+          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+          ${item.lastRun ? renderStatusBadge(item.lastRun.status, item.lastRun.status === "error" ? "alert" : "success") : ""}
+        </div>
+      </div>
+      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-5 py-5">
+        <div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          ${renderDetailMetaItem("Last Used", formatDateTime(item.lastUsedAt))}
+          ${renderDetailMetaItem("First Executed", formatDateTime(item.firstExecutedAt))}
+          ${renderDetailMetaItem("Use Count", formatNumber(item.useCount))}
+          ${renderDetailMetaItem(
+            "Tables",
+            item.tablesDetected?.length ? item.tablesDetected.join(", ") : "None detected"
+          )}
+        </div>
+
+        <form class="mt-5" data-form="save-query-history-title">
+          <input name="historyId" type="hidden" value="${escapeHtml(item.id)}" />
+          <label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+            Custom Title
+          </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"
+              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"
+              type="submit"
+            >
+              Save
+            </button>
+          </div>
+          <p class="mt-2 text-xs text-on-surface-variant/60">
+            Leave empty to fall back to the auto title generated from the query.
+          </p>
+        </form>
+
+        <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"
+            data-action="open-query-history"
+            data-history-id="${escapeHtml(item.id)}"
+            type="button"
+          >
+            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"
+            data-action="run-query-history"
+            data-history-id="${escapeHtml(item.id)}"
+            type="button"
+          >
+            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"
+            data-action="toggle-query-history-saved"
+            data-history-id="${escapeHtml(item.id)}"
+            data-next-value="${item.isSaved ? "false" : "true"}"
+            type="button"
+          >
+            ${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"
+            data-action="delete-query-history"
+            data-history-id="${escapeHtml(item.id)}"
+            type="button"
+          >
+            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
+          )}</code></pre>
+        </div>
+
+        <form class="mt-6" data-form="save-query-history-notes">
+          <input name="historyId" type="hidden" value="${escapeHtml(item.id)}" />
+          <label class="block text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+            Notes
+          </label>
+          <textarea class="custom-scrollbar mt-2 min-h-[120px] w-full resize-y border border-outline-variant/20 bg-surface-container px-3 py-3 text-sm leading-6 text-on-surface outline-none placeholder:text-on-surface-variant/35 focus:border-primary-container" name="notes" placeholder="Add context, caveats, or why this query matters...">${escapeHtml(
+            item.notes ?? ""
+          )}</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"
+              type="submit"
+            >
+              Save Notes
+            </button>
+          </div>
+        </form>
+
+        <div class="mt-6">
+          <div class="flex items-center justify-between gap-3">
+            <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+              Latest Runs
+            </div>
+            <div class="text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/40">
+              ${escapeHtml(formatNumber(runs.length))}
+            </div>
+          </div>
+          <div class="mt-3 space-y-3">
+            ${
+              runs.length
+                ? runs.map((run) => renderRunItem(run)).join("")
+                : `
+                    <div class="border border-outline-variant/10 bg-surface-container px-3 py-4 text-sm text-on-surface-variant/65">
+                      No execution runs recorded yet.
+                    </div>
+                  `
+            }
+          </div>
+        </div>
+      </div>
+    </section>
+  `;
+}