sqlite-hub 0.3.2 → 0.5.0

package/frontend/js/components/queryHistoryPanel.js

@@ -0,0 +1,228 @@
+import {
+  escapeHtml,
+  formatNumber,
+} from "../utils/format.js";
+import { renderStatusBadge } from "./badges.js";
+
+function getQueryTypeTone(queryType, isDestructive) {
+  if (isDestructive) {
+    return "alert";
+  }
+
+  if (queryType === "select") {
+    return "success";
+  }
+
+  if (queryType === "pragma") {
+    return "primary";
+  }
+
+  return "muted";
+}
+
+function renderHistoryItem(item, activeHistoryId, selectedHistoryId) {
+  const isActive = Number(activeHistoryId) === Number(item.id);
+  const isSelected = Number(selectedHistoryId) === Number(item.id);
+  const visibleTables = (item.tablesDetected ?? []).slice(0, 3);
+
+  return `
+    <article class="query-history-item ${isActive ? "is-active" : ""} ${
+      item.lastRun?.status === "error" ? "is-error" : ""
+    }">
+      <button
+        class="query-history-item-hit ${isActive ? "is-active" : ""}"
+        data-action="select-query-history-item"
+        data-history-id="${escapeHtml(item.id)}"
+        type="button"
+      >
+        <div class="flex flex-wrap items-center gap-2">
+          <span class="truncate font-headline text-sm font-bold uppercase tracking-tight text-on-surface">
+            ${escapeHtml(item.displayTitle)}
+          </span>
+          ${renderStatusBadge(item.queryType, getQueryTypeTone(item.queryType, item.isDestructive))}
+          ${item.isSaved ? renderStatusBadge("saved", "primary") : ""}
+          ${item.isDestructive ? renderStatusBadge("destructive", "alert") : ""}
+        </div>
+        <p class="query-history-sql-preview mt-2 text-left font-mono text-xs leading-5 text-on-surface-variant/75">
+          ${escapeHtml(item.previewSql)}
+        </p>
+      </button>
+      <div class="flex items-center justify-between gap-3 border-t border-outline-variant/10 px-3 pb-3 pt-2">
+        <div class="min-w-0 flex flex-wrap gap-2 text-[10px] font-mono uppercase tracking-[0.14em] text-on-surface-variant/55">
+          ${visibleTables
+            .map(
+              (tableName) => `
+                <span class="border border-outline-variant/20 bg-surface-highest px-2 py-1">
+                  ${escapeHtml(tableName)}
+                </span>
+              `
+            )
+            .join("")}
+        </div>
+        <div class="flex items-center gap-1">
+          <button
+            class="query-history-icon-button"
+            data-action="open-query-history"
+            data-history-id="${escapeHtml(item.id)}"
+            title="Open in editor"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">edit_note</span>
+          </button>
+          <button
+            class="query-history-icon-button"
+            data-action="run-query-history"
+            data-history-id="${escapeHtml(item.id)}"
+            title="Run query"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">play_arrow</span>
+          </button>
+          <button
+            class="query-history-icon-button ${item.isSaved ? "is-active" : ""}"
+            data-action="toggle-query-history-saved"
+            data-history-id="${escapeHtml(item.id)}"
+            data-next-value="${item.isSaved ? "false" : "true"}"
+            title="${item.isSaved ? "Remove from saved" : "Save query"}"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">
+              ${item.isSaved ? "bookmark" : "bookmark_add"}
+            </span>
+          </button>
+          <button
+            class="query-history-icon-button ${isSelected ? "is-active" : ""}"
+            data-action="select-query-history-item"
+            data-history-id="${escapeHtml(item.id)}"
+            title="Open query detail"
+            type="button"
+          >
+            <span class="material-symbols-outlined text-[18px]">info</span>
+          </button>
+        </div>
+      </div>
+    </article>
+  `;
+}
+
+function renderQueryHistoryTabs(activeTab, historyTotal) {
+  const tabs = [
+    { id: "recent", label: "Recent" },
+    { id: "saved", label: "Saved" },
+    { id: "failed", label: "Failed" },
+  ];
+
+  return `
+    <div class="flex items-center gap-2">
+      ${tabs
+        .map(
+          (tab) => `
+            <button
+              class="query-history-tab ${activeTab === tab.id ? "is-active" : ""}"
+              data-action="set-query-history-tab"
+              data-tab="${tab.id}"
+              type="button"
+            >
+              ${escapeHtml(tab.label)}
+            </button>
+          `
+        )
+        .join("")}
+      <span class="ml-auto text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/50">
+        ${escapeHtml(formatNumber(historyTotal))}
+      </span>
+    </div>
+  `;
+}
+
+export function renderQueryHistoryPanel({
+  items = [],
+  loading = false,
+  loadingMore = false,
+  error = null,
+  activeTab = "recent",
+  search = "",
+  total = 0,
+  hasMore = false,
+  activeHistoryId = null,
+  selectedHistoryId = null,
+}) {
+  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>
+        <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"
+            data-bind="query-history-search"
+            placeholder="Search SQL, titles, notes..."
+            type="search"
+            value="${escapeHtml(search)}"
+          />
+        </label>
+      </div>
+      <div class="custom-scrollbar min-h-0 flex-1 overflow-auto px-3 py-3">
+        ${
+          error
+            ? `
+              <div class="border border-error/30 bg-error-container/20 px-4 py-3 text-sm text-error">
+                ${escapeHtml(error.message)}
+              </div>
+            `
+            : ""
+        }
+        ${
+          !loading && !items.length
+            ? `
+              <div class="flex h-full min-h-[240px] flex-col items-center justify-center px-6 text-center">
+                <span class="material-symbols-outlined text-4xl text-on-surface-variant/25">manage_search</span>
+                <p class="mt-4 font-headline text-lg font-bold uppercase tracking-tight text-on-surface">
+                  No Matching Queries
+                </p>
+                <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/65">
+                  Executed statements will appear here once they run against the active database.
+                </p>
+              </div>
+            `
+            : ""
+        }
+        <div class="space-y-3">
+          ${items
+            .map((item) => renderHistoryItem(item, activeHistoryId, selectedHistoryId))
+            .join("")}
+        </div>
+        ${
+          loading
+            ? `
+              <div class="mt-4 text-center text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/50">
+                Loading query history...
+              </div>
+            `
+            : ""
+        }
+        ${
+          hasMore
+            ? `
+              <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"
+                  data-action="load-more-query-history"
+                  type="button"
+                >
+                  ${loadingMore ? "Loading..." : "Load More"}
+                </button>
+              </div>
+            `
+            : ""
+        }
+      </div>
+    </aside>
+  `;
+}

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

@@ -1,9 +1,39 @@
 import { renderDataGrid } from "./dataGrid.js";
 import { escapeHtml, formatCellValue, formatNumber } from "../utils/format.js";
 
+function getSortIcon(columnName, sortColumn, sortDirection) {
+  if (columnName !== sortColumn) {
+    return "unfold_more";
+  }
+
+  return sortDirection === "desc" ? "south" : "north";
+}
+
+function renderSortableHeader(columnName, sortColumn, sortDirection) {
+  const isActive = columnName === sortColumn;
+
+  return `
+    <button
+      class="flex w-full items-center justify-between gap-2 text-left transition-colors ${
+        isActive ? "text-primary-container" : "text-on-surface-variant hover:text-primary-container"
+      }"
+      data-action="sort-editor-results-column"
+      data-column-name="${escapeHtml(columnName)}"
+      type="button"
+    >
+      <span class="truncate">${escapeHtml(columnName)}</span>
+      <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
+        columnName,
+        sortColumn,
+        sortDirection
+      )}</span>
+    </button>
+  `;
+}
+
 export function renderQueryResultsPane(
   result,
-  { exporting = false, selectedRowIndex = null, editable = false, editStatusMessage = "" } = {}
+  { selectedRowIndex = null, editable = false, sortColumn = null, sortDirection = null } = {}
 ) {
   if (!result) {
     return `
@@ -17,9 +47,9 @@ export function renderQueryResultsPane(
   }
 
   const columns = (result.columns ?? []).map((columnName) => ({
-    label: escapeHtml(columnName),
     headerClassName:
       "border-b-2 border-primary-container px-4 py-3 text-[10px] font-bold uppercase tracking-widest",
+    renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection),
     cellClassName: "px-4 py-3 align-top text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);
@@ -32,50 +62,6 @@ export function renderQueryResultsPane(
 
   return `
     <div class="relative flex h-full min-h-0 flex-col overflow-hidden bg-surface-container">
-      <div class="flex items-center justify-between gap-4 bg-surface-container-high px-4 py-2">
-        <div class="flex items-center gap-4">
-          <div class="flex items-center gap-2 text-primary-container">
-            <span class="material-symbols-outlined text-sm">database</span>
-            <span class="text-[10px] font-bold uppercase tracking-widest">Query Results</span>
-          </div>
-          <div class="h-3 w-px bg-outline-variant/30"></div>
-          <div class="text-[10px] font-mono text-on-surface-variant/60">
-            ROWS_RETURNED: ${escapeHtml(formatNumber(result.rows?.length ?? 0))}
-          </div>
-          <div class="text-[10px] font-mono text-on-surface-variant/60">
-            AFFECTED: ${escapeHtml(formatNumber(result.affectedRowCount ?? 0))}
-          </div>
-          <div class="text-[10px] font-mono text-on-surface-variant/60">
-            EXEC: ${escapeHtml(String(result.timingMs ?? 0))}ms
-          </div>
-          ${
-            editStatusMessage
-              ? `
-                  <div class="h-3 w-px bg-outline-variant/30"></div>
-                  <div class="text-[10px] font-mono text-on-surface-variant/60">
-                    ${escapeHtml(editStatusMessage)}
-                  </div>
-                `
-              : ""
-          }
-        </div>
-        <div class="flex gap-4 text-[10px] font-mono uppercase">
-          <button
-            class="text-on-surface-variant transition-colors hover:text-primary-container"
-            data-action="export-query-csv"
-            type="button"
-          >
-            ${exporting ? "Exporting..." : "Export CSV"}
-          </button>
-          <button
-            class="text-on-surface-variant transition-colors hover:text-primary-container"
-            data-action="clear-results"
-            type="button"
-          >
-            Clear Results
-          </button>
-        </div>
-      </div>
       <div class="custom-scrollbar min-h-0 flex-1 overflow-auto bg-surface-container-lowest">
         ${
           result.columns?.length

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

@@ -1,16 +1,87 @@
 import { escapeHtml } from "../utils/format.js";
 
+function getJsonPreview(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+
+  const text = String(value).trim();
+
+  if (!text || !["{", "["].includes(text[0])) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+
+    if (!parsed || typeof parsed !== "object") {
+      return null;
+    }
+
+    return JSON.stringify(parsed, null, 2);
+  } catch (error) {
+    return null;
+  }
+}
+
+function renderJsonViewer(prettyJson, title = "JSON Viewer") {
+  return `
+    <div class="border border-outline-variant/10 bg-surface-container px-4 py-4">
+      <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/75">
+        ${escapeHtml(title)}
+      </div>
+      <pre class="custom-scrollbar mt-3 max-h-[18rem] overflow-auto whitespace-pre-wrap break-words border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface">${escapeHtml(
+        prettyJson
+      )}</pre>
+    </div>
+  `;
+}
+
 function renderReadonlyField(label, value) {
+  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>
-      <div class="mt-2 text-sm text-on-surface">${escapeHtml(value)}</div>
+      ${
+        jsonPreview
+          ? `<div class="mt-2">${renderJsonViewer(jsonPreview)}</div>`
+          : `<div class="mt-2 text-sm text-on-surface">${escapeHtml(value)}</div>`
+      }
     </div>
   `;
 }
 
+function renderEditableField(field) {
+  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>
+      ${
+        jsonPreview
+          ? renderJsonViewer(jsonPreview, "JSON Preview")
+          : ""
+      }
+      <textarea
+        class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container ${
+          jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
+        }"
+        name="field:${escapeHtml(field.name)}"
+        spellcheck="false"
+      >${escapeHtml(field.value ?? "")}</textarea>
+    </label>
+  `;
+}
+
 export function renderRowEditorPanel({
   title,
   sectionLabel = "Row Editor",
@@ -137,19 +208,7 @@ export function renderRowEditorPanel({
                       ? `
                           <div class="space-y-4">
                             ${editableFields
-                              .map(
-                                (field) => `
-                                  <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>
-                                    <textarea
-                                      class="min-h-[56px] w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
-                                      name="field:${escapeHtml(field.name)}"
-                                    >${escapeHtml(field.value ?? "")}</textarea>
-                                  </label>
-                                `
-                              )
+                              .map((field) => renderEditableField(field))
                               .join("")}
                           </div>
                         `

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

@@ -1,4 +1,5 @@
 import { escapeHtml } from "../utils/format.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 const sidebarItems = [
   { label: "Connections", href: "#/connections", key: "connections", icon: "database" },
@@ -40,9 +41,13 @@ export function renderSidebar(state) {
     </nav>
     <div class="sidebar-footer">
       <div class="sidebar-footer-card">
-        <div class="sidebar-footer-mark">
-          <span class="material-symbols-outlined text-[15px]">memory</span>
-        </div>
+        ${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",
+        })}
         <div class="min-w-0">
           <p class="truncate text-[10px] font-bold text-on-surface">
             ${escapeHtml(activeConnection?.label ?? "NO_ACTIVE_DATABASE")}