sqlite-hub 0.3.2 → 0.5.0

package/README.md

@@ -1,6 +1,6 @@
 # sqlite-hub ⚡️
 
-![](/assets/mockups/home.png)
+![](./frontend/assets/mockups/home.png)
 
 A focused local-first app for browsing, editing, and querying SQLite databases.
 
@@ -24,25 +24,25 @@ SQLite Hub keeps that workflow sharp:
 
 ### Structure view
 
-![](/assets/mockups/graph_visualize.png)
+![](./frontend/assets/mockups/graph_visualize.png)
 
 Inspect tables, columns, types, and schema details without losing pace. Visualized in a graph.
 
 ### Data browser
 
-![](/assets/mockups/data.png)
+![](./frontend/assets/mockups/data.png)
 
 Scan rows, sort fast, move through local data quickly, and export full tables as CSV.
 
 ### Row editing
 
-![](/assets/mockups/data_edit.png)
+![](./frontend/assets/mockups/data_edit.png)
 
 Open one record, edit it in place, commit, continue.
 
 ### SQL editor
 
-![](/assets/mockups/sql_editor.png)
+![](./frontend/assets/mockups/sql_editor.png)
 
 Write queries in a syntax-highlighted editor, inspect results in the same workflow, and export result sets as CSV.
 

package/changelog.md

@@ -1,3 +1,17 @@
+# 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
+- shift + enter
+- logos for databases
+- clean up some chaotic code things :)
+
 # v0.3.2
 
 - delete rows

package/{js → 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/{js → frontend/js}/app.js

@@ -16,30 +16,43 @@ 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,
+  setDataSearchColumn,
+  setDataSearchQuery,
   setCurrentQuery,
   setEditorTab,
+  sortDataTableByColumn,
+  sortEditorResultsByColumn,
+  setQueryHistorySearchInput,
+  setQueryHistoryTab,
   setRoute,
+  saveQueryHistoryNotes,
+  saveQueryHistoryTitle,
   submitCreateConnection,
   submitDeleteRowConfirmation,
   submitDataRowUpdate,
@@ -48,6 +61,7 @@ import {
   submitImportSql,
   submitOpenConnection,
   subscribe,
+  toggleQueryHistorySavedState,
 } from "./store.js";
 import { renderConnectionsView } from "./views/connections.js";
 import { renderDataView } from "./views/data.js";
@@ -115,6 +129,35 @@ function syncQueryEditorScroll(textarea) {
   highlightNode.style.transform = `translate(${-textarea.scrollLeft}px, ${-textarea.scrollTop}px)`;
 }
 
+function readFileAsBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      const result = String(reader.result ?? "");
+      const markerIndex = result.indexOf(",");
+      resolve(markerIndex >= 0 ? result.slice(markerIndex + 1) : result);
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("The selected logo could not be read."));
+    };
+
+    reader.readAsDataURL(file);
+  });
+}
+
+async function buildConnectionLogoUpload(file) {
+  if (!(file instanceof File) || !file.size) {
+    return null;
+  }
+
+  return {
+    fileName: file.name,
+    mimeType: file.type,
+    base64: await readFileAsBase64(file),
+  };
+}
+
 function renderNotFoundView() {
   return {
     main: `
@@ -224,7 +267,9 @@ function restoreFocusedInputState(snapshot) {
 function renderApp(state) {
   const focusedInput = captureFocusedInputState();
   const { main, panel } = resolveView(state);
-  const isLockedRoute = ["editor", "editorResults", "data"].includes(state.route.name);
+  const isLockedRoute = ["editor", "editorResults", "data", "structure"].includes(
+    state.route.name
+  );
 
   teardownStructureGraph();
   shellRefs.topNav.innerHTML = renderTopNav(state);
@@ -249,6 +294,11 @@ const router = createRouter((route) => {
   setRoute(route);
 });
 
+async function executeEditorQueryAndNavigate() {
+  const success = await executeCurrentQuery();
+  router.navigate(success ? "/editor/results" : "/editor");
+}
+
 async function handleAction(actionNode) {
   const { action } = actionNode.dataset;
 
@@ -300,9 +350,11 @@ async function handleAction(actionNode) {
     case "create-backup":
       await createActiveConnectionBackup();
       return;
+    case "open-overview-in-finder":
+      await openOverviewInFinder();
+      return;
     case "execute-query": {
-      const success = await executeCurrentQuery();
-      router.navigate(success ? "/editor/results" : "/editor");
+      await executeEditorQueryAndNavigate();
       return;
     }
     case "delete-data-row":
@@ -313,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) {
@@ -327,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;
@@ -362,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);
@@ -385,6 +490,27 @@ document.addEventListener("click", (event) => {
 });
 
 document.addEventListener("keydown", (event) => {
+  const target = event.target;
+
+  if (
+    event.key === "Enter" &&
+    event.shiftKey &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.defaultPrevented &&
+    target instanceof HTMLTextAreaElement &&
+    target.dataset.bind === "current-query"
+  ) {
+    event.preventDefault();
+
+    if (!getState().editor.executing) {
+      void executeEditorQueryAndNavigate();
+    }
+
+    return;
+  }
+
   if (event.key !== "Escape" || event.defaultPrevented) {
     return;
   }
@@ -420,6 +546,16 @@ document.addEventListener("input", (event) => {
     syncQueryEditorHighlight(bindNode);
     syncQueryEditorScroll(bindNode);
     setCurrentQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "data-search-query") {
+    setDataSearchQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "query-history-search") {
+    setQueryHistorySearchInput(bindNode.value);
   }
 });
 
@@ -444,9 +580,8 @@ document.addEventListener("change", (event) => {
     return;
   }
 
-  if (bindNode.dataset.bind === "history-entry" && bindNode.value) {
-    loadQueryFromHistory(bindNode.value);
-    bindNode.value = "";
+  if (bindNode.dataset.bind === "data-search-column") {
+    setDataSearchColumn(bindNode.value);
   }
 });
 
@@ -512,6 +647,8 @@ document.addEventListener("submit", async (event) => {
     case "edit-connection": {
       const connectionId = String(formData.get("connectionId") ?? "");
       const isActiveConnection = getState().connections.active?.id === connectionId;
+      const logoFile = formData.get("logoFile");
+      const logoUpload = await buildConnectionLogoUpload(logoFile);
 
       if (isActiveConnection) {
         resetStructureGraphForDatabaseChange();
@@ -521,6 +658,8 @@ document.addEventListener("submit", async (event) => {
         path: String(formData.get("path") ?? ""),
         label: String(formData.get("label") ?? ""),
         readOnly: formData.get("readOnly") === "on",
+        clearLogo: formData.get("clearLogo") === "on" && !logoUpload,
+        logoUpload,
       });
 
       return;
@@ -562,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/{js → frontend/js}/components/connectionCard.js

@@ -5,6 +5,7 @@ import {
   truncateMiddle,
 } from "../utils/format.js";
 import { renderStatusBadge } from "./badges.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 export function renderConnectionCard(connection, activeConnectionId) {
   const isActive = activeConnectionId
@@ -20,16 +21,14 @@ export function renderConnectionCard(connection, activeConnectionId) {
     >
       <div class="flex-1 p-6">
         <div class="mb-6 flex items-start justify-between">
-          <div
-            class="clipped-corner flex h-10 w-10 items-center justify-center transition-colors ${
+          ${renderConnectionLogo(connection, {
+            containerClass: `clipped-corner flex h-10 w-10 items-center justify-center overflow-hidden transition-colors ${
               isActive ? "bg-primary-container" : "bg-surface-container-highest"
-            }"
-            style="--clip-path: ${clipPath};"
-          >
-            <span class="material-symbols-outlined ${
-              isActive ? "text-on-primary" : "text-outline-variant"
-            }">database</span>
-          </div>
+            }`,
+            containerAttributes: `style="--clip-path: ${clipPath};"`,
+            imageClassName: "h-full w-full object-cover",
+            iconClassName: isActive ? "text-on-primary" : "text-outline-variant",
+          })}
           <div class="flex items-center gap-2">
             ${renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted")}
             ${connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : ""}

package/frontend/js/components/connectionLogo.js

@@ -0,0 +1,33 @@
+import { escapeHtml } from "../utils/format.js";
+
+export function renderConnectionLogo(
+  connection,
+  {
+    containerClass = "",
+    containerAttributes = "",
+    imageClassName = "h-full w-full object-cover",
+    iconClassName = "",
+    icon = "database",
+  } = {}
+) {
+  const logoUrl = connection?.logoUrl ?? null;
+  const label = connection?.label ?? "Database";
+
+  if (logoUrl) {
+    return `
+      <div ${containerAttributes} class="${containerClass}">
+        <img
+          alt="${escapeHtml(`${label} logo`)}"
+          class="${imageClassName}"
+          src="${escapeHtml(logoUrl)}"
+        />
+      </div>
+    `;
+  }
+
+  return `
+    <div ${containerAttributes} class="${containerClass}">
+      <span class="material-symbols-outlined ${iconClassName}">${escapeHtml(icon)}</span>
+    </div>
+  `;
+}

package/{js → 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/{js → frontend/js}/components/emptyState.js

@@ -4,6 +4,7 @@ import {
   formatDateTime,
   truncateMiddle,
 } from "../utils/format.js";
+import { renderConnectionLogo } from "./connectionLogo.js";
 
 function renderRecentConnections(recentConnections = []) {
   if (!recentConnections.length) {
@@ -26,7 +27,12 @@ function renderRecentConnections(recentConnections = []) {
               data-connection-id="${escapeHtml(connection.id)}"
               type="button"
             >
-              <span class="material-symbols-outlined text-sm text-primary-container">database</span>
+              ${renderConnectionLogo(connection, {
+                containerClass:
+                  "flex h-8 w-8 items-center justify-center overflow-hidden bg-surface-container-highest",
+                imageClassName: "h-full w-full object-cover",
+                iconClassName: "text-sm text-primary-container",
+              })}
               <span class="min-w-0">
                 <span class="block truncate font-mono text-xs">${escapeHtml(connection.label)}</span>
                 <span class="block truncate text-[10px] text-on-surface-variant/45">${escapeHtml(
@@ -53,16 +59,24 @@ function renderActiveConnection(activeConnection) {
   return `
     <div class="mx-auto max-w-2xl border border-outline-variant/15 bg-surface-container-low px-6 py-5 text-left">
       <div class="flex flex-wrap items-start justify-between gap-4">
-        <div>
-          <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
-            ACTIVE_DATABASE
-          </p>
-          <h2 class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
-            ${escapeHtml(activeConnection.label)}
-          </h2>
-          <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
-            truncateMiddle(activeConnection.path, 72)
-          )}</p>
+        <div class="flex items-start gap-4">
+          ${renderConnectionLogo(activeConnection, {
+            containerClass:
+              "flex h-14 w-14 items-center justify-center overflow-hidden border border-outline-variant/15 bg-surface-container-highest",
+            imageClassName: "h-full w-full object-cover",
+            iconClassName: "text-2xl text-primary-container",
+          })}
+          <div>
+            <p class="text-[10px] font-mono uppercase tracking-[0.24em] text-primary-container/70">
+              ACTIVE_DATABASE
+            </p>
+            <h2 class="mt-2 font-headline text-2xl font-black uppercase tracking-tight text-primary-container">
+              ${escapeHtml(activeConnection.label)}
+            </h2>
+            <p class="mt-2 font-mono text-[10px] text-on-surface-variant/55">${escapeHtml(
+              truncateMiddle(activeConnection.path, 72)
+            )}</p>
+          </div>
         </div>
         <div class="text-right text-xs text-on-surface-variant/65">
           <div>${escapeHtml(formatBytes(activeConnection.sizeBytes))}</div>