sqlite-hub 0.1.3

package/js/components/queryEditor.js

@@ -0,0 +1,121 @@
+import { escapeHtml, highlightSql } from "../utils/format.js";
+import { renderActionBar } from "./actionBar.js";
+
+function renderLineNumbers(query) {
+  const lineCount = Math.max(1, String(query || "").split("\n").length);
+
+  return Array.from({ length: lineCount }, (_, index) => index + 1)
+    .map((value) => `<span>${String(value).padStart(2, "0")}</span>`)
+    .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);
+  }
+
+  return '<span class="text-on-surface-variant/35">SELECT name FROM sqlite_master WHERE type = \'table\';</span>';
+}
+
+export function renderQueryEditor({
+  query,
+  title,
+  executing = false,
+  history = [],
+  historyLoading = false,
+}) {
+  const left = `
+    <div class="flex items-center gap-2 bg-surface-container-lowest px-3 py-1">
+      <span class="material-symbols-outlined text-xs text-[#FCE300]">database</span>
+      <span class="text-[10px] font-mono uppercase tracking-widest text-on-surface-variant">${escapeHtml(
+        title
+      )}</span>
+    </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`}
+    </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"
+      type="button"
+    >
+      Clear
+    </button>
+    <button
+      class="bg-primary-container px-6 py-1.5 text-xs font-black uppercase tracking-tighter text-on-primary shadow-[0_0_15px_-5px_rgba(252,227,0,0.4)] transition-all hover:brightness-110"
+      data-action="execute-query"
+      type="button"
+    >
+      ${executing ? "RUNNING..." : "EXECUTE"}
+    </button>
+  `;
+
+  return `
+    <div class="flex h-full flex-col">
+      <div class="bg-surface-container-low px-6 py-3">
+        ${renderActionBar({
+          left,
+          right,
+          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>
+    </div>
+  `;
+}

package/js/components/queryResults.js

@@ -0,0 +1,107 @@
+import { renderDataGrid } from "./dataGrid.js";
+import { escapeHtml, formatCellValue, formatNumber } from "../utils/format.js";
+
+export function renderQueryResultsPane(
+  result,
+  { exporting = false, selectedRowIndex = null, editable = false, editStatusMessage = "" } = {}
+) {
+  if (!result) {
+    return `
+      <div class="flex h-full flex-col items-center justify-center bg-surface-container-lowest text-on-surface-variant/30">
+        <span class="material-symbols-outlined mb-3 text-5xl">database_off</span>
+        <p class="font-mono text-[10px] uppercase tracking-[0.22em]">
+          NO_QUERY_RESULTS_AVAILABLE
+        </p>
+      </div>
+    `;
+  }
+
+  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",
+    cellClassName: "px-4 py-3 align-top text-on-surface",
+    render: (row) => {
+      const value = formatCellValue(row[columnName]);
+      const isNull = value === "NULL";
+      return `<span class="${
+        isNull ? "text-on-surface-variant/40" : "text-on-surface"
+      }">${escapeHtml(value)}</span>`;
+    },
+  }));
+
+  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
+              ? renderDataGrid({
+                  columns,
+                  rows: result.rows ?? [],
+                  tableClass: "min-w-full border-collapse text-left font-mono text-xs",
+                  theadClass: "sticky top-0 z-10 bg-surface-container-highest text-on-surface",
+                  tbodyClass: "divide-y divide-outline-variant/5",
+                  getRowClass: (_, index) =>
+                    `${selectedRowIndex === index ? "bg-surface-bright" : index % 2 === 0 ? "bg-surface-container-low" : "bg-surface-container-lowest"} transition-colors ${
+                      editable ? "cursor-pointer hover:bg-surface-bright" : "hover:bg-surface-bright"
+                    }`,
+                  getRowAttrs: (_, index) =>
+                    editable ? `data-action="select-editor-row" data-row-index="${index}"` : "",
+                })
+            : `
+                <div class="flex h-full flex-col items-center justify-center text-center text-on-surface-variant/35">
+                  <span class="material-symbols-outlined mb-3 text-4xl">rule</span>
+                  <p class="font-mono text-[10px] uppercase tracking-[0.22em]">
+                    STATEMENT_RETURNED_NO_RESULT_SET
+                  </p>
+                </div>
+              `
+        }
+      </div>
+    </div>
+  `;
+}

package/js/components/rowEditorPanel.js

@@ -0,0 +1,164 @@
+import { escapeHtml } from "../utils/format.js";
+
+function renderReadonlyField(label, 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>
+    </div>
+  `;
+}
+
+export function renderRowEditorPanel({
+  title,
+  sectionLabel = "Row Editor",
+  subtitle = "",
+  closeAction,
+  formName,
+  hiddenFields = [],
+  editableFields = [],
+  readonlyFields = [],
+  disabledMessage = "",
+  saveError = null,
+  saving = false,
+  reloadAction = "",
+  submitLabel = "Save Row",
+  emptyEditableMessage = "This row has no editable scalar columns.",
+}) {
+  const canSubmit = !disabledMessage && editableFields.length > 0;
+
+  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>
+            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+              ${escapeHtml(sectionLabel)}
+            </div>
+            <h2 class="mt-2 font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+              ${escapeHtml(title)}
+            </h2>
+            ${
+              subtitle
+                ? `
+                    <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+                      ${escapeHtml(subtitle)}
+                    </div>
+                  `
+                : ""
+            }
+          </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>
+      </header>
+      <div class="custom-scrollbar flex-1 overflow-auto px-6 py-6">
+        ${
+          disabledMessage
+            ? `
+                <div class="border border-error/20 bg-error-container/10 px-4 py-4 text-sm text-on-surface">
+                  ${escapeHtml(disabledMessage)}
+                </div>
+              `
+            : `
+                <form class="space-y-6" data-form="${escapeHtml(formName)}">
+                  ${hiddenFields
+                    .map(
+                      (field) => `
+                        <input
+                          name="${escapeHtml(field.name)}"
+                          type="hidden"
+                          value="${escapeHtml(field.value ?? "")}"
+                        />
+                      `
+                    )
+                    .join("")}
+                  ${
+                    editableFields.length
+                      ? `
+                          <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-[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"
+                                      name="field:${escapeHtml(field.name)}"
+                                    >${escapeHtml(field.value ?? "")}</textarea>
+                                  </label>
+                                `
+                              )
+                              .join("")}
+                          </div>
+                        `
+                      : `<div class="text-sm text-on-surface-variant/55">${escapeHtml(
+                          emptyEditableMessage
+                        )}</div>`
+                  }
+                  ${
+                    saveError
+                      ? `
+                          <div class="border border-error/20 bg-error-container/10 px-4 py-4 text-sm text-on-surface">
+                            <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+                              ${escapeHtml(saveError.code)}
+                            </div>
+                            <div class="mt-2">${escapeHtml(saveError.message)}</div>
+                          </div>
+                        `
+                      : ""
+                  }
+                  <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>
+              `
+        }
+        ${
+          readonlyFields.length
+            ? `
+                <div class="mt-8 space-y-3">
+                  <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+                    Locked Fields
+                  </div>
+                  <div class="space-y-3">
+                    ${readonlyFields
+                      .map((field) => renderReadonlyField(field.label ?? field.name, field.value))
+                      .join("")}
+                  </div>
+                </div>
+              `
+            : ""
+        }
+      </div>
+    </section>
+  `;
+}

package/js/components/sidebar.js

@@ -0,0 +1,57 @@
+import { escapeHtml } from "../utils/format.js";
+
+const sidebarItems = [
+  { label: "Connections", href: "#/connections", key: "connections", icon: "database" },
+  { label: "Overview", href: "#/overview", key: "overview", icon: "dashboard" },
+  { label: "Data", href: "#/data", key: "data", icon: "table_rows" },
+  { label: "SQL Editor", href: "#/editor", key: "editor", icon: "terminal" },
+  { label: "Structure", href: "#/structure", key: "structure", icon: "account_tree" },
+  { label: "Settings", href: "#/settings", key: "settings", icon: "settings" },
+];
+
+function getActiveSidebarKey(routeName) {
+  if (routeName === "landing") {
+    return "connections";
+  }
+
+  if (routeName === "editorResults") {
+    return "editor";
+  }
+
+  return routeName;
+}
+
+export function renderSidebar(state) {
+  const activeKey = getActiveSidebarKey(state.route.name);
+  const activeConnection = state.connections.active;
+
+  return `
+    <nav class="sidebar-links">
+      ${sidebarItems
+        .map(
+          (item) => `
+            <a class="sidebar-link ${item.key === activeKey ? "is-active" : ""}" href="${item.href}">
+              <span class="material-symbols-outlined">${item.icon}</span>
+              <span>${item.label}</span>
+            </a>
+          `
+        )
+        .join("")}
+    </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>
+        <div class="min-w-0">
+          <p class="truncate text-[10px] font-bold text-on-surface">
+            ${escapeHtml(activeConnection?.label ?? "NO_ACTIVE_DATABASE")}
+          </p>
+          <p class="text-[8px] text-on-surface-variant/60">
+            ${activeConnection?.readOnly ? "READ_ONLY" : "READ_WRITE"}
+          </p>
+        </div>
+      </div>
+    </div>
+  `;
+}

package/js/components/statusBar.js

@@ -0,0 +1,39 @@
+import { escapeHtml, formatBytes, formatDateTime } from "../utils/format.js";
+
+export function renderStatusBar(state) {
+  const active = state.connections.active;
+  const overview = state.overview.data;
+  const result = state.editor.result;
+
+  return `
+    <div class="status-bar-shell">
+      <div class="status-bar-primary">
+        <span class="status-bar-text">
+          ${
+            active
+              ? `ACTIVE_DB // ${escapeHtml(active.label)}`
+              : "NO_ACTIVE_DATABASE // CONNECT_SQLITE_FILE"
+          }
+        </span>
+        <div class="status-bar-dot"></div>
+      </div>
+      <div class="status-bar-secondary">
+        <span class="status-bar-link">
+          ${active ? (active.readOnly ? "READ_ONLY" : "READ_WRITE") : "IDLE"}
+        </span>
+        <span class="status-bar-link">
+          ${overview?.sqlite?.journalMode ? escapeHtml(overview.sqlite.journalMode) : "journal:n/a"}
+        </span>
+        <span class="status-bar-link">
+          ${overview?.file?.sizeBytes ? escapeHtml(formatBytes(overview.file.sizeBytes)) : "size:n/a"}
+        </span>
+        <span class="status-bar-link">
+          ${result ? `last query ${escapeHtml(String(result.timingMs ?? 0))}ms` : "no query executed"}
+        </span>
+        <span class="status-bar-link">
+          ${active?.lastOpenedAt ? escapeHtml(formatDateTime(active.lastOpenedAt)) : "waiting"}
+        </span>
+      </div>
+    </div>
+  `;
+}

package/js/components/toast.js

@@ -0,0 +1,39 @@
+import { escapeHtml } from "../utils/format.js";
+
+export function renderToasts(toasts = []) {
+  if (!toasts.length) {
+    return "";
+  }
+
+  return `
+    <div class="pointer-events-none fixed bottom-5 right-5 z-50 flex w-full max-w-sm flex-col gap-3">
+      ${toasts
+        .map(
+          (toast) => `
+            <div
+              class="pointer-events-auto border border-outline-variant/20 bg-surface-container px-4 py-3 shadow-[0_18px_40px_rgba(0,0,0,0.35)] ${
+                toast.tone === "success"
+                  ? "border-primary-container/30"
+                  : toast.tone === "alert"
+                    ? "border-error/30"
+                    : ""
+              }"
+            >
+              <div class="flex items-start justify-between gap-3">
+                <div class="text-sm text-on-surface">${escapeHtml(toast.message)}</div>
+                <button
+                  class="text-on-surface-variant hover:text-primary-container"
+                  data-action="dismiss-toast"
+                  data-toast-id="${escapeHtml(toast.id)}"
+                  type="button"
+                >
+                  <span class="material-symbols-outlined text-base">close</span>
+                </button>
+              </div>
+            </div>
+          `
+        )
+        .join("")}
+    </div>
+  `;
+}

package/js/components/topNav.js

@@ -0,0 +1,27 @@
+export function renderTopNav() {
+  return `
+    <div class="top-nav-shell">
+      <a class="top-nav-brand" href="#/">SQLite Hub</a>
+      <div class="top-nav-actions">
+        <button class="top-nav-icon" data-action="refresh-view" type="button" aria-label="Refresh">
+          <span class="material-symbols-outlined">refresh</span>
+        </button>
+        <button
+          class="top-nav-icon"
+          data-action="open-modal"
+          data-modal="open-connection"
+          type="button"
+          aria-label="Open Database"
+        >
+          <span class="material-symbols-outlined">folder_open</span>
+        </button>
+        <button class="top-nav-icon" data-action="navigate" data-to="/editor" type="button" aria-label="SQL Editor">
+          <span class="material-symbols-outlined">terminal</span>
+        </button>
+        <button class="top-nav-icon" data-action="navigate" data-to="/settings" type="button" aria-label="Settings">
+          <span class="material-symbols-outlined">settings</span>
+        </button>
+      </div>
+    </div>
+  `;
+}

package/js/router.js

@@ -0,0 +1,66 @@
+export function parseHash(hash = window.location.hash) {
+  const normalized = hash.startsWith("#") ? hash.slice(1) : hash;
+  const [pathname = "/"] = normalized.split("?");
+  const cleanPath = pathname || "/";
+  const segments = cleanPath.split("/").filter(Boolean);
+
+  if (segments.length === 0) {
+    return { name: "landing", path: "/", params: {} };
+  }
+
+  switch (segments[0]) {
+    case "connections":
+      return { name: "connections", path: "/connections", params: {} };
+    case "overview":
+      return { name: "overview", path: "/overview", params: {} };
+    case "editor":
+      if (segments[1] === "results") {
+        return { name: "editorResults", path: "/editor/results", params: {} };
+      }
+
+      return { name: "editor", path: "/editor", params: {} };
+    case "data":
+      return {
+        name: "data",
+        path: cleanPath,
+        params: {
+          tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
+        },
+      };
+    case "structure":
+      return { name: "structure", path: "/structure", params: {} };
+    case "settings":
+      return { name: "settings", path: "/settings", params: {} };
+    default:
+      return { name: "notFound", path: cleanPath, params: {} };
+  }
+}
+
+export function createRouter(onRouteChange) {
+  const handleRouteChange = () => {
+    onRouteChange(parseHash(window.location.hash));
+  };
+
+  return {
+    start() {
+      window.addEventListener("hashchange", handleRouteChange);
+
+      if (!window.location.hash) {
+        window.location.hash = "#/";
+        return;
+      }
+
+      handleRouteChange();
+    },
+    navigate(path) {
+      const nextHash = path.startsWith("#") ? path : `#${path}`;
+
+      if (window.location.hash === nextHash) {
+        handleRouteChange();
+        return;
+      }
+
+      window.location.hash = nextHash;
+    },
+  };
+}