sqlite-hub 0.4.0 → 0.5.0

package/changelog.md

@@ -1,3 +1,10 @@
+# v0.5.0
+
+- sql query history
+- open in finder in overview
+- sort columns in data & sql_editor
+- json view in row editor
+
 # v0.4.0
 
 - search in data

package/frontend/js/api.js

@@ -123,6 +123,12 @@ export function getOverview() {
   return request("/api/db/overview");
 }
 
+export function openOverviewInFinder() {
+  return request("/api/db/overview/open-in-finder", {
+    method: "POST",
+  });
+}
+
 export function getDbStatus() {
   return request("/api/db/status");
 }
@@ -134,16 +140,92 @@ export function executeSql(sql) {
   });
 }
 
-export function getSqlHistory() {
-  return request("/api/sql/history");
+export function getQueryHistory(options = {}) {
+  const params = new URLSearchParams();
+
+  if (options.tab) {
+    params.set("tab", String(options.tab));
+  }
+
+  if (options.limit !== undefined) {
+    params.set("limit", String(options.limit));
+  }
+
+  if (options.offset !== undefined) {
+    params.set("offset", String(options.offset));
+  }
+
+  if (options.search) {
+    params.set("search", String(options.search));
+  }
+
+  if (options.queryType) {
+    params.set("queryType", String(options.queryType));
+  }
+
+  if (options.onlySaved) {
+    params.set("onlySaved", "true");
+  }
+
+  if (options.onlyFavorites) {
+    params.set("onlyFavorites", "true");
+  }
+
+  const query = params.toString();
+  return request(`/api/sql/history${query ? `?${query}` : ""}`);
 }
 
-export function clearSqlHistory() {
+export function clearQueryHistory() {
   return request("/api/sql/history", {
     method: "DELETE",
   });
 }
 
+export function getQueryHistoryItem(historyId) {
+  return request(`/api/sql/history/${encodeURIComponent(historyId)}`);
+}
+
+export function getQueryHistoryRuns(historyId, options = {}) {
+  const params = new URLSearchParams();
+
+  if (options.limit !== undefined) {
+    params.set("limit", String(options.limit));
+  }
+
+  const query = params.toString();
+
+  return request(
+    `/api/sql/history/${encodeURIComponent(historyId)}/runs${query ? `?${query}` : ""}`
+  );
+}
+
+export function toggleQueryHistorySaved(historyId, value) {
+  return request(`/api/sql/history/${encodeURIComponent(historyId)}/saved`, {
+    method: "PATCH",
+    body: { value },
+  });
+}
+
+export function renameQueryHistoryItem(historyId, title) {
+  return request(`/api/sql/history/${encodeURIComponent(historyId)}/title`, {
+    method: "PATCH",
+    body: { title },
+  });
+}
+
+export function updateQueryHistoryNotes(historyId, notes) {
+  return request(`/api/sql/history/${encodeURIComponent(historyId)}/notes`, {
+    method: "PATCH",
+    body: { notes },
+  });
+}
+
+export function deleteQueryHistoryItem(historyId) {
+  return request(`/api/sql/history/${encodeURIComponent(historyId)}`, {
+    method: "DELETE",
+  });
+}
+
 export function getStructureOverview() {
   return request("/api/structure");
 }
@@ -167,6 +249,14 @@ export function getDataTable(tableName, options = {}) {
     params.set("offset", String(options.offset));
   }
 
+  if (options.sortColumn) {
+    params.set("sortColumn", String(options.sortColumn));
+  }
+
+  if (options.sortDirection) {
+    params.set("sortDirection", String(options.sortDirection));
+  }
+
   const query = params.toString();
 
   return request(`/api/data/${encodeURIComponent(tableName)}${query ? `?${query}` : ""}`);
@@ -205,10 +295,14 @@ export function downloadQueryCsv(sql) {
   });
 }
 
-export function downloadTableCsv(tableName) {
+export function downloadTableCsv(tableName, options = {}) {
   return download("/api/export/table.csv", {
     method: "POST",
-    body: { tableName },
+    body: {
+      tableName,
+      sortColumn: options.sortColumn,
+      sortDirection: options.sortDirection,
+    },
     fallbackFilename: `${tableName || "table"}.csv`,
   });
 }

package/frontend/js/app.js

@@ -16,24 +16,29 @@ import {
   clearDataRowSelection,
   clearEditorRowSelection,
   clearEditorResults,
-  clearSqlHistoryStateAndData,
+  clearQueryHistorySelection,
   closeModal,
+  deleteQueryHistoryStateItem,
   dismissToast,
   executeCurrentQuery,
   exportCurrentDataTableCsv,
   exportCurrentQueryCsv,
   getState,
   initializeApp,
-  loadQueryFromHistory,
+  loadMoreQueryHistory,
   openModal,
+  openOverviewInFinder,
+  openQueryHistoryInEditor,
   openDeleteDataRowModal,
   openDeleteEditorRowModal,
   openEditConnectionModal,
   refreshCurrentRoute,
   removeConnection,
+  runQueryHistoryItem,
   selectDataRow,
   selectEditorRow,
   selectConnection,
+  selectQueryHistoryItem,
   selectStructureEntry,
   setDataPage,
   setDataPageSize,
@@ -41,7 +46,13 @@ import {
   setDataSearchQuery,
   setCurrentQuery,
   setEditorTab,
+  sortDataTableByColumn,
+  sortEditorResultsByColumn,
+  setQueryHistorySearchInput,
+  setQueryHistoryTab,
   setRoute,
+  saveQueryHistoryNotes,
+  saveQueryHistoryTitle,
   submitCreateConnection,
   submitDeleteRowConfirmation,
   submitDataRowUpdate,
@@ -50,6 +61,7 @@ import {
   submitImportSql,
   submitOpenConnection,
   subscribe,
+  toggleQueryHistorySavedState,
 } from "./store.js";
 import { renderConnectionsView } from "./views/connections.js";
 import { renderDataView } from "./views/data.js";
@@ -338,6 +350,9 @@ async function handleAction(actionNode) {
     case "create-backup":
       await createActiveConnectionBackup();
       return;
+    case "open-overview-in-finder":
+      await openOverviewInFinder();
+      return;
     case "execute-query": {
       await executeEditorQueryAndNavigate();
       return;
@@ -350,11 +365,57 @@ async function handleAction(actionNode) {
       return;
     case "clear-query":
       clearCurrentQuery();
+      if (getState().route.name === "editorResults") {
+        router.navigate("/editor");
+      }
       return;
     case "clear-results":
       clearEditorResults();
       router.navigate("/editor");
       return;
+    case "select-query-history-item":
+      if (actionNode.dataset.historyId) {
+        await selectQueryHistoryItem(actionNode.dataset.historyId);
+      }
+      return;
+    case "clear-query-history-selection":
+      clearQueryHistorySelection();
+      return;
+    case "set-query-history-tab":
+      if (actionNode.dataset.tab) {
+        await setQueryHistoryTab(actionNode.dataset.tab);
+      }
+      return;
+    case "load-more-query-history":
+      await loadMoreQueryHistory();
+      return;
+    case "open-query-history":
+      if (actionNode.dataset.historyId && openQueryHistoryInEditor(actionNode.dataset.historyId)) {
+        router.navigate("/editor");
+      }
+      return;
+    case "run-query-history":
+      if (actionNode.dataset.historyId) {
+        const success = await runQueryHistoryItem(actionNode.dataset.historyId);
+        router.navigate(success ? "/editor/results" : "/editor");
+      }
+      return;
+    case "toggle-query-history-saved":
+      if (actionNode.dataset.historyId) {
+        await toggleQueryHistorySavedState(
+          actionNode.dataset.historyId,
+          actionNode.dataset.nextValue === "true"
+        );
+      }
+      return;
+    case "delete-query-history":
+      if (
+        actionNode.dataset.historyId &&
+        window.confirm("Delete this query history item and all recorded runs?")
+      ) {
+        await deleteQueryHistoryStateItem(actionNode.dataset.historyId);
+      }
+      return;
     case "set-editor-tab": {
       const tab = actionNode.dataset.tab;
       if (!tab) {
@@ -364,9 +425,6 @@ async function handleAction(actionNode) {
       router.navigate(tab === "results" ? "/editor/results" : "/editor");
       return;
     }
-    case "clear-sql-history":
-      await clearSqlHistoryStateAndData();
-      return;
     case "export-query-csv":
       await exportCurrentQueryCsv();
       return;
@@ -399,6 +457,16 @@ async function handleAction(actionNode) {
         await setDataPage(actionNode.dataset.page);
       }
       return;
+    case "sort-data-column":
+      if (actionNode.dataset.columnName) {
+        await sortDataTableByColumn(actionNode.dataset.columnName);
+      }
+      return;
+    case "sort-editor-results-column":
+      if (actionNode.dataset.columnName) {
+        sortEditorResultsByColumn(actionNode.dataset.columnName);
+      }
+      return;
     case "set-data-page-size":
       if (actionNode.dataset.pageSize) {
         await setDataPageSize(actionNode.dataset.pageSize);
@@ -483,6 +551,11 @@ document.addEventListener("input", (event) => {
 
   if (bindNode.dataset.bind === "data-search-query") {
     setDataSearchQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "query-history-search") {
+    setQueryHistorySearchInput(bindNode.value);
   }
 });
 
@@ -507,12 +580,6 @@ document.addEventListener("change", (event) => {
     return;
   }
 
-  if (bindNode.dataset.bind === "history-entry" && bindNode.value) {
-    loadQueryFromHistory(bindNode.value);
-    bindNode.value = "";
-    return;
-  }
-
   if (bindNode.dataset.bind === "data-search-column") {
     setDataSearchColumn(bindNode.value);
   }
@@ -634,6 +701,18 @@ document.addEventListener("submit", async (event) => {
       );
       return;
     }
+    case "save-query-history-title":
+      await saveQueryHistoryTitle(
+        String(formData.get("historyId") ?? ""),
+        String(formData.get("title") ?? "")
+      );
+      return;
+    case "save-query-history-notes":
+      await saveQueryHistoryNotes(
+        String(formData.get("historyId") ?? ""),
+        String(formData.get("notes") ?? "")
+      );
+      return;
     default:
   }
 });

package/frontend/js/components/bottomTabs.js

@@ -3,8 +3,8 @@ import { escapeHtml } from "../utils/format.js";
 export function renderBottomTabs(activeTab, counts = {}) {
   const tabs = [
     { key: "results", label: "results", meta: counts.resultRows ?? 0 },
-    { key: "messages", label: "messages", meta: counts.messages ?? 0 },
     { key: "performance", label: "performance", meta: counts.statementCount ?? 0 },
+    { key: "messages", label: "messages", meta: counts.messages ?? 0 },
   ];
 
   return `

package/frontend/js/components/dataGrid.js

@@ -14,9 +14,9 @@ export function renderDataGrid({
         <tr class="${headerRowClass}">
           ${columns
             .map(
-              (column) => `
-                <th class="${column.headerClassName ?? ""}">
-                  ${column.label}
+            (column) => `
+                <th class="${column.headerClassName ?? ""}" ${column.headerAttrs ?? ""}>
+                  ${column.renderHeader ? column.renderHeader() : column.label}
                 </th>
               `
             )

package/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>
   `;