sqlite-hub 0.1.3

package/js/app.js

@@ -0,0 +1,520 @@
+import { renderAppShell } from "./components/appShell.js";
+import { renderModal } from "./components/modal.js";
+import { renderSidebar } from "./components/sidebar.js";
+import { renderStatusBar } from "./components/statusBar.js";
+import { renderToasts } from "./components/toast.js";
+import { renderTopNav } from "./components/topNav.js";
+import { createRouter } from "./router.js";
+import {
+  clearCurrentQuery,
+  clearDataRowSelection,
+  clearEditorRowSelection,
+  clearEditorResults,
+  clearSqlHistoryStateAndData,
+  closeModal,
+  dismissToast,
+  executeCurrentQuery,
+  exportCurrentQueryCsv,
+  getState,
+  initializeApp,
+  loadQueryFromHistory,
+  openModal,
+  openEditConnectionModal,
+  refreshCurrentRoute,
+  removeConnection,
+  selectDataRow,
+  selectEditorRow,
+  selectConnection,
+  selectStructureEntry,
+  setDataPage,
+  setDataPageSize,
+  setCurrentQuery,
+  setEditorTab,
+  setRoute,
+  submitCreateConnection,
+  submitDataRowUpdate,
+  submitEditorRowUpdate,
+  submitEditConnection,
+  submitImportSql,
+  submitOpenConnection,
+  subscribe,
+} from "./store.js";
+import { renderConnectionsView } from "./views/connections.js";
+import { renderDataView } from "./views/data.js";
+import { renderEditorView } from "./views/editor.js";
+import { renderLandingView } from "./views/landing.js";
+import { renderOverviewView } from "./views/overview.js";
+import { renderSettingsView } from "./views/settings.js";
+import { renderStructureView } from "./views/structure.js";
+import { highlightSql } from "./utils/format.js";
+
+const appRoot = document.querySelector("#app");
+
+appRoot.innerHTML = renderAppShell();
+
+const shellRefs = {
+  shell: document.querySelector(".app-shell"),
+  topNav: document.querySelector("#top-nav"),
+  sidebar: document.querySelector("#sidebar"),
+  view: document.querySelector("#app-view"),
+  panel: document.querySelector("#app-panel"),
+  statusBar: document.querySelector("#status-bar"),
+  modal: document.querySelector("#modal-root"),
+  toast: document.querySelector("#toast-root"),
+};
+
+function renderQueryHighlightMarkup(query) {
+  if (query) {
+    return highlightSql(query);
+  }
+
+  return '<span class="text-on-surface-variant/35">SELECT name FROM sqlite_master WHERE type = \'table\';</span>';
+}
+
+function syncQueryEditorHighlight(textarea) {
+  if (!(textarea instanceof HTMLTextAreaElement)) {
+    return;
+  }
+
+  const layer = textarea.closest(".query-editor-layer");
+  const highlightNode = layer?.querySelector("[data-query-editor-highlight]");
+
+  if (!(highlightNode instanceof HTMLElement)) {
+    return;
+  }
+
+  highlightNode.innerHTML = renderQueryHighlightMarkup(textarea.value);
+}
+
+function syncQueryEditorScroll(textarea) {
+  if (!(textarea instanceof HTMLTextAreaElement)) {
+    return;
+  }
+
+  const layer = textarea.closest(".query-editor-layer");
+  const highlightNode = layer?.querySelector("[data-query-editor-highlight]");
+
+  if (!(highlightNode instanceof HTMLElement)) {
+    return;
+  }
+
+  highlightNode.style.transform = `translate(${-textarea.scrollLeft}px, ${-textarea.scrollTop}px)`;
+}
+
+function renderNotFoundView() {
+  return {
+    main: `
+      <section class="landing-view machined-grid px-6">
+        <div class="text-center z-10">
+          <p class="font-mono text-[10px] uppercase tracking-[0.3em] text-primary-container/40">
+            ROUTE_LOST // HASH_NOT_RECOGNIZED
+          </p>
+          <h1 class="mt-4 font-headline text-6xl font-black uppercase tracking-tight text-primary-container">
+            404_SIGNAL
+          </h1>
+          <button
+            class="mt-8 bg-primary-container px-6 py-3 font-headline text-sm font-bold uppercase tracking-[0.2em] text-on-primary"
+            data-action="navigate"
+            data-to="/"
+            type="button"
+          >
+            Return_Home
+          </button>
+        </div>
+      </section>
+    `,
+    panel: "",
+  };
+}
+
+function resolveView(state) {
+  switch (state.route.name) {
+    case "landing":
+      return renderLandingView(state);
+    case "connections":
+      return renderConnectionsView(state);
+    case "overview":
+      return renderOverviewView(state);
+    case "data":
+      return renderDataView(state);
+    case "editor":
+      return renderEditorView(state, { isResultsRoute: false });
+    case "editorResults":
+      return renderEditorView(state, { isResultsRoute: true });
+    case "structure":
+      return renderStructureView(state);
+    case "settings":
+      return renderSettingsView(state);
+    default:
+      return renderNotFoundView();
+  }
+}
+
+function captureFocusedInputState() {
+  const activeElement = document.activeElement;
+
+  if (
+    !activeElement ||
+    !(activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)
+  ) {
+    return null;
+  }
+
+  const { bind } = activeElement.dataset;
+  if (!bind) {
+    return null;
+  }
+
+  return {
+    bind,
+    selectionStart: activeElement.selectionStart,
+    selectionEnd: activeElement.selectionEnd,
+    selectionDirection: activeElement.selectionDirection,
+    scrollTop: activeElement.scrollTop,
+    scrollLeft: activeElement.scrollLeft,
+  };
+}
+
+function restoreFocusedInputState(snapshot) {
+  if (!snapshot) {
+    return;
+  }
+
+  const selector = `[data-bind="${CSS.escape(snapshot.bind)}"]`;
+  const nextElement = document.querySelector(selector);
+
+  if (
+    !nextElement ||
+    !(nextElement instanceof HTMLInputElement || nextElement instanceof HTMLTextAreaElement)
+  ) {
+    return;
+  }
+
+  nextElement.focus({ preventScroll: true });
+
+  if (
+    typeof snapshot.selectionStart === "number" &&
+    typeof snapshot.selectionEnd === "number"
+  ) {
+    nextElement.setSelectionRange(
+      snapshot.selectionStart,
+      snapshot.selectionEnd,
+      snapshot.selectionDirection || "none"
+    );
+  }
+
+  nextElement.scrollTop = snapshot.scrollTop;
+  nextElement.scrollLeft = snapshot.scrollLeft;
+}
+
+function renderApp(state) {
+  const focusedInput = captureFocusedInputState();
+  const { main, panel } = resolveView(state);
+  const isLockedRoute = ["editor", "editorResults", "data"].includes(state.route.name);
+
+  shellRefs.topNav.innerHTML = renderTopNav(state);
+  shellRefs.sidebar.innerHTML = renderSidebar(state);
+  shellRefs.statusBar.innerHTML = renderStatusBar(state);
+  shellRefs.view.innerHTML = main;
+  shellRefs.view.classList.toggle("app-main-scroll--locked", isLockedRoute);
+  shellRefs.panel.innerHTML = panel;
+  shellRefs.modal.innerHTML = renderModal(state);
+  shellRefs.toast.innerHTML = renderToasts(state.toasts);
+  shellRefs.shell.classList.toggle("panel-open", Boolean(panel));
+  restoreFocusedInputState(focusedInput);
+}
+
+const router = createRouter((route) => {
+  setRoute(route);
+});
+
+async function handleAction(actionNode) {
+  const { action } = actionNode.dataset;
+
+  switch (action) {
+    case "navigate":
+      router.navigate(actionNode.dataset.to ?? "/");
+      return;
+    case "refresh-view":
+      await refreshCurrentRoute();
+      return;
+    case "open-modal":
+      openModal(actionNode.dataset.modal);
+      return;
+    case "edit-connection":
+      openEditConnectionModal(actionNode.dataset.connectionId);
+      return;
+    case "close-modal":
+      closeModal();
+      return;
+    case "dismiss-toast":
+      dismissToast(actionNode.dataset.toastId);
+      return;
+    case "select-connection": {
+      const next = await selectConnection(actionNode.dataset.connectionId);
+      if (next) {
+        router.navigate("/overview");
+      }
+      return;
+    }
+    case "remove-connection": {
+      const removed = await removeConnection(actionNode.dataset.connectionId);
+      if (removed) {
+        const nextState = getState();
+        if (!nextState.connections.active && nextState.route.name !== "connections") {
+          router.navigate("/connections");
+        } else {
+          await refreshCurrentRoute();
+        }
+      }
+      return;
+    }
+    case "execute-query": {
+      const success = await executeCurrentQuery();
+      router.navigate(success ? "/editor/results" : "/editor");
+      return;
+    }
+    case "clear-query":
+      clearCurrentQuery();
+      return;
+    case "clear-results":
+      clearEditorResults();
+      router.navigate("/editor");
+      return;
+    case "set-editor-tab": {
+      const tab = actionNode.dataset.tab;
+      if (!tab) {
+        return;
+      }
+      setEditorTab(tab);
+      router.navigate(tab === "results" ? "/editor/results" : "/editor");
+      return;
+    }
+    case "clear-sql-history":
+      await clearSqlHistoryStateAndData();
+      return;
+    case "export-query-csv":
+      await exportCurrentQueryCsv();
+      return;
+    case "select-structure-entry":
+      if (actionNode.dataset.entryName) {
+        await selectStructureEntry(actionNode.dataset.entryName);
+      }
+      return;
+    case "select-data-row":
+      if (actionNode.dataset.rowIndex) {
+        selectDataRow(actionNode.dataset.rowIndex);
+      }
+      return;
+    case "select-editor-row":
+      if (actionNode.dataset.rowIndex) {
+        selectEditorRow(actionNode.dataset.rowIndex);
+      }
+      return;
+    case "clear-data-row-selection":
+      clearDataRowSelection();
+      return;
+    case "clear-editor-row-selection":
+      clearEditorRowSelection();
+      return;
+    case "set-data-page":
+      if (actionNode.dataset.page) {
+        await setDataPage(actionNode.dataset.page);
+      }
+      return;
+    case "set-data-page-size":
+      if (actionNode.dataset.pageSize) {
+        await setDataPageSize(actionNode.dataset.pageSize);
+      }
+      return;
+    case "reload-data-route":
+      await refreshCurrentRoute();
+      return;
+    default:
+  }
+}
+
+document.addEventListener("click", (event) => {
+  const actionNode = event.target.closest("[data-action]");
+
+  if (!actionNode) {
+    return;
+  }
+
+  handleAction(actionNode);
+});
+
+document.addEventListener("keydown", (event) => {
+  if (event.key !== "Escape" || event.defaultPrevented) {
+    return;
+  }
+
+  const state = getState();
+
+  if (state.modal) {
+    event.preventDefault();
+    closeModal();
+    return;
+  }
+
+  if (state.route.name === "data" && typeof state.dataBrowser.selectedRowIndex === "number") {
+    event.preventDefault();
+    clearDataRowSelection();
+    return;
+  }
+
+  if (state.route.name === "editorResults" && typeof state.editor.selectedRowIndex === "number") {
+    event.preventDefault();
+    clearEditorRowSelection();
+  }
+});
+
+document.addEventListener("input", (event) => {
+  const bindNode = event.target.closest("[data-bind]");
+
+  if (!bindNode) {
+    return;
+  }
+
+  if (bindNode.dataset.bind === "current-query") {
+    syncQueryEditorHighlight(bindNode);
+    syncQueryEditorScroll(bindNode);
+    setCurrentQuery(bindNode.value);
+  }
+});
+
+document.addEventListener(
+  "scroll",
+  (event) => {
+    const target = event.target;
+
+    if (!(target instanceof HTMLTextAreaElement) || target.dataset.bind !== "current-query") {
+      return;
+    }
+
+    syncQueryEditorScroll(target);
+  },
+  true
+);
+
+document.addEventListener("change", (event) => {
+  const bindNode = event.target.closest("[data-bind]");
+
+  if (!bindNode) {
+    return;
+  }
+
+  if (bindNode.dataset.bind === "history-entry" && bindNode.value) {
+    loadQueryFromHistory(bindNode.value);
+    bindNode.value = "";
+  }
+});
+
+document.addEventListener("submit", async (event) => {
+  const form = event.target.closest("[data-form]");
+
+  if (!form) {
+    return;
+  }
+
+  event.preventDefault();
+  const formData = new FormData(form);
+
+  switch (form.dataset.form) {
+    case "open-connection": {
+      const connection = await submitOpenConnection({
+        path: String(formData.get("path") ?? ""),
+        label: String(formData.get("label") ?? ""),
+        readOnly: formData.get("readOnly") === "on",
+      });
+
+      if (connection) {
+        router.navigate("/overview");
+      }
+      return;
+    }
+    case "create-connection": {
+      const connection = await submitCreateConnection({
+        path: String(formData.get("path") ?? ""),
+        label: String(formData.get("label") ?? ""),
+      });
+
+      if (connection) {
+        router.navigate("/overview");
+      }
+      return;
+    }
+    case "import-sql": {
+      const targetMode = String(formData.get("targetMode") ?? "active");
+      const payload = {
+        sqlFilePath: String(formData.get("sqlFilePath") ?? ""),
+        label: String(formData.get("label") ?? ""),
+      };
+
+      if (targetMode === "recent") {
+        payload.targetConnectionId = String(formData.get("targetConnectionId") ?? "");
+      } else if (targetMode === "create") {
+        payload.createNew = true;
+        payload.targetPath = String(formData.get("targetPath") ?? "");
+      } else if (targetMode === "path") {
+        payload.targetPath = String(formData.get("targetPath") ?? "");
+      }
+
+      const result = await submitImportSql(payload);
+      if (result) {
+        router.navigate("/overview");
+      }
+      return;
+    }
+    case "edit-connection": {
+      await submitEditConnection(String(formData.get("connectionId") ?? ""), {
+        path: String(formData.get("path") ?? ""),
+        label: String(formData.get("label") ?? ""),
+        readOnly: formData.get("readOnly") === "on",
+      });
+
+      return;
+    }
+    case "save-data-row": {
+      const values = {};
+
+      for (const [key, value] of formData.entries()) {
+        if (!key.startsWith("field:")) {
+          continue;
+        }
+
+        values[key.slice("field:".length)] = String(value ?? "");
+      }
+
+      await submitDataRowUpdate(
+        String(formData.get("rowIndex") ?? ""),
+        values
+      );
+      return;
+    }
+    case "save-editor-row": {
+      const values = {};
+
+      for (const [key, value] of formData.entries()) {
+        if (!key.startsWith("field:")) {
+          continue;
+        }
+
+        values[key.slice("field:".length)] = String(value ?? "");
+      }
+
+      await submitEditorRowUpdate(
+        String(formData.get("rowIndex") ?? ""),
+        values
+      );
+      return;
+    }
+    default:
+  }
+});
+
+subscribe(renderApp);
+renderApp(getState());
+initializeApp().then(() => {
+  router.start();
+});

package/js/components/actionBar.js

@@ -0,0 +1,8 @@
+export function renderActionBar({ left = "", right = "", className = "" }) {
+  return `
+    <div class="flex items-center justify-between gap-4 ${className}">
+      <div class="flex items-center gap-4">${left}</div>
+      <div class="flex items-center gap-3">${right}</div>
+    </div>
+  `;
+}

package/js/components/appShell.js

@@ -0,0 +1,17 @@
+export function renderAppShell() {
+  return `
+    <div class="app-shell">
+      <header id="top-nav" class="app-top-nav bg-[#131313]"></header>
+      <div class="app-body">
+        <aside id="sidebar" class="app-sidebar sidebar-shell"></aside>
+        <main class="app-main">
+          <div id="app-view" class="app-main-scroll app-view custom-scrollbar"></div>
+        </main>
+        <aside id="app-panel" class="app-right-panel"></aside>
+      </div>
+      <footer id="status-bar" class="app-status-bar"></footer>
+    </div>
+    <div id="modal-root"></div>
+    <div id="toast-root"></div>
+  `;
+}

package/js/components/badges.js

@@ -0,0 +1,5 @@
+import { escapeHtml } from "../utils/format.js";
+
+export function renderStatusBadge(label, tone = "muted") {
+  return `<span class="status-badge status-badge--${tone}">${escapeHtml(label)}</span>`;
+}

package/js/components/bottomTabs.js

@@ -0,0 +1,37 @@
+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 },
+  ];
+
+  return `
+    <div class="flex items-center justify-between border-b border-outline-variant/5 bg-surface-container-low/50 px-4 h-10">
+      <div class="flex items-center gap-6">
+        ${tabs
+          .map(
+            (tab) => `
+              <button
+                class="bottom-tab ${activeTab === tab.key ? "is-active" : ""}"
+                data-action="set-editor-tab"
+                data-tab="${tab.key}"
+                type="button"
+              >
+                ${tab.label}
+                <span class="ml-2 text-[9px] opacity-50">${escapeHtml(String(tab.meta))}</span>
+              </button>
+            `
+          )
+          .join("")}
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="material-symbols-outlined text-xs text-on-surface-variant/30">database</span>
+        <span class="text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/45">
+          sqlite
+        </span>
+      </div>
+    </div>
+  `;
+}

package/js/components/connectionCard.js

@@ -0,0 +1,106 @@
+import {
+  escapeHtml,
+  formatBytes,
+  formatDateTime,
+  truncateMiddle,
+} from "../utils/format.js";
+import { renderStatusBadge } from "./badges.js";
+
+export function renderConnectionCard(connection, activeConnectionId) {
+  const isActive = activeConnectionId
+    ? connection.id === activeConnectionId
+    : Boolean(connection.isActive);
+  const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
+  const primaryActionLabel = isActive ? "Open Overview" : "Set Active";
+
+  return `
+    <article
+      class="connection-card clipped-corner ${isActive ? "is-active" : ""}"
+      style="--clip-path: ${clipPath};"
+    >
+      <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 ${
+              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>
+          <div class="flex items-center gap-2">
+            ${renderStatusBadge(isActive ? "ACTIVE" : "RECENT", isActive ? "primary" : "muted")}
+            ${connection.readOnly ? renderStatusBadge("READ_ONLY", "alert") : ""}
+          </div>
+        </div>
+        <h3 class="mb-1 font-headline text-xl font-bold uppercase ${
+          isActive ? "text-[#FCE300]" : "text-on-surface"
+        }">
+          ${escapeHtml(connection.label)}
+        </h3>
+        <p
+          class="block overflow-hidden text-ellipsis whitespace-nowrap font-mono text-[10px] text-outline-variant"
+          title="${escapeHtml(connection.path)}"
+        >
+          ${escapeHtml(truncateMiddle(connection.path, 68))}
+        </p>
+        <div class="mt-8 grid grid-cols-2 gap-4">
+          <div>
+            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Allocation</div>
+            <div class="text-xs font-bold text-on-surface">${escapeHtml(
+              formatBytes(connection.sizeBytes)
+            )}</div>
+          </div>
+          <div>
+            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Modified</div>
+            <div class="text-xs font-bold text-on-surface">${escapeHtml(
+              formatDateTime(connection.lastModifiedAt)
+            )}</div>
+          </div>
+          <div>
+            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Last Opened</div>
+            <div class="text-xs font-bold text-on-surface">${escapeHtml(
+              formatDateTime(connection.lastOpenedAt)
+            )}</div>
+          </div>
+          <div>
+            <div class="mb-1 text-[9px] font-mono uppercase text-outline-variant">Mode</div>
+            <div class="text-xs font-bold text-on-surface">${connection.readOnly ? "Read only" : "Read / Write"}</div>
+          </div>
+        </div>
+      </div>
+      <div class="border-t border-outline-variant/10 bg-surface-container-low px-4 py-3">
+        <div class="grid grid-cols-[minmax(0,1fr)_5.1rem_5.8rem] gap-2">
+          <button
+            class="clipped-corner min-w-0 bg-primary-container px-3 py-2.5 text-[10px] font-black uppercase tracking-[0.18em] text-on-primary shadow-[0_0_18px_-10px_rgba(252,227,0,0.7)] transition-[filter,box-shadow] hover:brightness-105"
+            data-action="select-connection"
+            data-connection-id="${escapeHtml(connection.id)}"
+            style="--clip-path: ${clipPath};"
+            type="button"
+            title="${primaryActionLabel}"
+          >
+            ${primaryActionLabel}
+          </button>
+          <button
+            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            data-action="edit-connection"
+            data-connection-id="${escapeHtml(connection.id)}"
+            type="button"
+          >
+            Edit
+          </button>
+          <button
+            class="border border-outline-variant/20 bg-surface-container px-3 py-2.5 text-[10px] font-bold uppercase tracking-[0.18em] text-on-surface-variant transition-colors hover:bg-surface-container-highest"
+            data-action="remove-connection"
+            data-connection-id="${escapeHtml(connection.id)}"
+            type="button"
+          >
+            Remove
+          </button>
+        </div>
+      </div>
+    </article>
+  `;
+}