sqlite-hub 0.3.1 → 0.4.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.
 
@@ -69,6 +69,12 @@ brew install sqlite-hub
 npm install -g sqlit-hub
 ```
 
+## alternative port
+
+```bash
+sqlit-hub --port:4174
+```
+
 ## Changelog
 
-[Changelog](changelog.md)
+[Changelog](/changelog.md)

package/changelog.md

@@ -1,3 +1,15 @@
+# v0.4.0
+
+- search in data
+- shift + enter
+- logos for databases
+- clean up some chaotic code things :)
+
+# v0.3.2
+
+- delete rows
+- modal windows for rows
+
 # v0.3.1
 
 - visualize tables

package/{js → frontend/js}/api.js

@@ -179,6 +179,13 @@ export function updateDataTableRow(tableName, payload) {
   });
 }
 
+export function deleteDataTableRow(tableName, payload) {
+  return request(`/api/data/${encodeURIComponent(tableName)}/rows`, {
+    method: "DELETE",
+    body: payload,
+  });
+}
+
 export function getSettings() {
   return request("/api/settings");
 }

package/{js → frontend/js}/app.js

@@ -26,6 +26,8 @@ import {
   initializeApp,
   loadQueryFromHistory,
   openModal,
+  openDeleteDataRowModal,
+  openDeleteEditorRowModal,
   openEditConnectionModal,
   refreshCurrentRoute,
   removeConnection,
@@ -35,10 +37,13 @@ import {
   selectStructureEntry,
   setDataPage,
   setDataPageSize,
+  setDataSearchColumn,
+  setDataSearchQuery,
   setCurrentQuery,
   setEditorTab,
   setRoute,
   submitCreateConnection,
+  submitDeleteRowConfirmation,
   submitDataRowUpdate,
   submitEditorRowUpdate,
   submitEditConnection,
@@ -112,6 +117,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: `
@@ -221,7 +255,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);
@@ -246,6 +282,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;
 
@@ -298,10 +339,15 @@ async function handleAction(actionNode) {
       await createActiveConnectionBackup();
       return;
     case "execute-query": {
-      const success = await executeCurrentQuery();
-      router.navigate(success ? "/editor/results" : "/editor");
+      await executeEditorQueryAndNavigate();
       return;
     }
+    case "delete-data-row":
+      openDeleteDataRowModal(actionNode.dataset.rowIndex);
+      return;
+    case "delete-editor-row":
+      openDeleteEditorRowModal(actionNode.dataset.rowIndex);
+      return;
     case "clear-query":
       clearCurrentQuery();
       return;
@@ -376,6 +422,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;
   }
@@ -411,6 +478,11 @@ document.addEventListener("input", (event) => {
     syncQueryEditorHighlight(bindNode);
     syncQueryEditorScroll(bindNode);
     setCurrentQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "data-search-query") {
+    setDataSearchQuery(bindNode.value);
   }
 });
 
@@ -438,6 +510,11 @@ document.addEventListener("change", (event) => {
   if (bindNode.dataset.bind === "history-entry" && bindNode.value) {
     loadQueryFromHistory(bindNode.value);
     bindNode.value = "";
+    return;
+  }
+
+  if (bindNode.dataset.bind === "data-search-column") {
+    setDataSearchColumn(bindNode.value);
   }
 });
 
@@ -503,6 +580,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();
@@ -512,10 +591,15 @@ 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;
     }
+    case "delete-row-confirm":
+      await submitDeleteRowConfirmation();
+      return;
     case "save-data-row": {
       const values = {};
 

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/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>

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",
@@ -254,6 +311,75 @@ function renderImportSqlForm(modal, state) {
   `;
 }
 
+function renderDeleteRowConfirmForm(modal) {
+  const rowPreview = modal.rowPreview ?? [];
+
+  return `
+    <form class="space-y-5" data-form="delete-row-confirm">
+      <div class="space-y-3">
+        <p class="text-sm leading-7 text-on-surface">
+          Delete this row from <span class="font-bold text-primary-container">${escapeHtml(
+            modal.tableName ?? "the current table"
+          )}</span>?
+        </p>
+        <p class="text-sm leading-7 text-on-surface-variant/65">
+          This action cannot be undone.
+        </p>
+        ${
+          modal.rowLabel
+            ? `
+                <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
+                  ${escapeHtml(modal.rowLabel)}
+                </div>
+              `
+            : ""
+        }
+        ${
+          rowPreview.length
+            ? `
+                <div class="grid grid-cols-1 gap-3 md:grid-cols-2">
+                  ${rowPreview
+                    .map(
+                      (field) => `
+                        <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(field.label)}
+                          </div>
+                          <div
+                            class="mt-2 text-sm text-on-surface"
+                            title="${escapeHtml(field.fullValue ?? field.value ?? "")}"
+                          >
+                            ${escapeHtml(field.value ?? "")}
+                          </div>
+                        </div>
+                      `
+                    )
+                    .join("")}
+                </div>
+              `
+            : ""
+        }
+      </div>
+      ${renderError(modal.error)}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button
+          class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface-variant hover:bg-surface-container-highest"
+          data-action="close-modal"
+          type="button"
+        >
+          Cancel
+        </button>
+        <button
+          class="border border-error/25 bg-error-container/10 px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-error"
+          type="submit"
+        >
+          ${modal.submitting ? "Deleting..." : "Delete Row"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
 export function renderModal(state) {
   const modal = state.modal;
 
@@ -282,6 +408,11 @@ export function renderModal(state) {
       title: "Edit Connection",
       body: renderEditConnectionForm(modal),
     },
+    "delete-row": {
+      eyebrow: "Mutation // Confirm row deletion",
+      title: "Delete Row",
+      body: renderDeleteRowConfirmForm(modal),
+    },
   };
 
   const config = contentByKind[modal.kind];

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

@@ -23,16 +23,23 @@ export function renderRowEditorPanel({
   disabledMessage = "",
   saveError = null,
   saving = false,
+  deleting = false,
   reloadAction = "",
-  submitLabel = "Save Row",
+  submitLabel = "Save",
+  deleteAction = "",
+  deleteRowIndex = null,
+  deleteLabel = "Delete Row",
+  deleteEnabled = false,
   emptyEditableMessage = "This row has no editable scalar columns.",
 }) {
   const canSubmit = !disabledMessage && editableFields.length > 0;
+  const canDelete = !disabledMessage && deleteEnabled;
+  const formId = `${formName}-panel-form`;
 
   return `
     <section class="flex h-full min-h-0 flex-col bg-surface-low">
       <header class="border-b border-outline-variant/10 bg-surface-container px-6 py-5">
-        <div class="flex items-start justify-between gap-4">
+        <div class="space-y-4">
           <div>
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
@@ -50,13 +57,58 @@ export function renderRowEditorPanel({
                 : ""
             }
           </div>
-          <button
-            class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
-            data-action="${escapeHtml(closeAction)}"
-            type="button"
-          >
-            Close
-          </button>
+          <div class="flex flex-wrap items-center justify-end gap-2">
+            ${
+              reloadAction
+                ? `
+                    <button
+                      class="border border-outline-variant/20 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface hover:bg-surface-container-highest"
+                      data-action="${escapeHtml(reloadAction)}"
+                      type="button"
+                    >
+                      Reload
+                    </button>
+                  `
+                : ""
+            }
+            ${
+              canSubmit
+                ? `
+                    <button
+                      class="bg-primary-container px-5 py-3 text-[10px] font-black uppercase tracking-[0.16em] text-on-primary disabled:cursor-default disabled:opacity-40"
+                      form="${escapeHtml(formId)}"
+                      type="submit"
+                      ${saving || deleting ? "disabled" : ""}
+                    >
+                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
+                    </button>
+                  `
+                : ""
+            }
+            ${
+              canDelete
+                ? `
+                    <button
+                      class="border border-error/25 bg-error-container/10 px-4 py-3 text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-colors hover:bg-error-container/20 disabled:cursor-default disabled:opacity-40"
+                      data-action="${escapeHtml(deleteAction)}"
+                      data-row-index="${escapeHtml(String(deleteRowIndex ?? ""))}"
+                      type="button"
+                      ${saving || deleting ? "disabled" : ""}
+                    >
+                      ${escapeHtml(deleting ? "Deleting..." : deleteLabel)}
+                    </button>
+                  `
+                : ""
+            }
+            <button
+              aria-label="Close panel"
+              class="flex h-11 w-11 items-center justify-center border border-outline-variant/20 text-on-surface hover:bg-surface-container-highest"
+              data-action="${escapeHtml(closeAction)}"
+              type="button"
+            >
+              <span class="material-symbols-outlined text-base">close</span>
+            </button>
+          </div>
         </div>
       </header>
       <div class="custom-scrollbar flex-1 overflow-auto px-6 py-6">
@@ -68,7 +120,7 @@ export function renderRowEditorPanel({
                 </div>
               `
             : `
-                <form class="space-y-6" data-form="${escapeHtml(formName)}">
+                <form class="space-y-6" data-form="${escapeHtml(formName)}" id="${escapeHtml(formId)}">
                   ${hiddenFields
                     .map(
                       (field) => `
@@ -92,7 +144,7 @@ export function renderRowEditorPanel({
                                       ${escapeHtml(field.label ?? field.name)}
                                     </span>
                                     <textarea
-                                      class="min-h-[112px] 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"
+                                      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>
@@ -117,28 +169,6 @@ export function renderRowEditorPanel({
                         `
                       : ""
                   }
-                  <div class="flex items-center justify-end gap-3 border-t border-outline-variant/10 pt-6">
-                    ${
-                      reloadAction
-                        ? `
-                            <button
-                              class="border border-outline-variant/20 px-4 py-3 text-xs font-bold uppercase tracking-[0.18em] text-on-surface hover:bg-surface-container-highest"
-                              data-action="${escapeHtml(reloadAction)}"
-                              type="button"
-                            >
-                              Reload
-                            </button>
-                          `
-                        : ""
-                    }
-                    <button
-                      class="bg-primary-container px-5 py-3 text-xs font-black uppercase tracking-[0.18em] text-on-primary disabled:cursor-default disabled:opacity-40"
-                      type="submit"
-                      ${canSubmit ? "" : "disabled"}
-                    >
-                      ${escapeHtml(saving ? "Saving..." : submitLabel)}
-                    </button>
-                  </div>
                 </form>
               `
         }