sqlite-hub 0.4.0 → 0.6.0

package/frontend/js/app.js

@@ -16,32 +16,47 @@ 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,
+  setTableDesignerSearchQuery,
   setDataPage,
   setDataPageSize,
   setDataSearchColumn,
   setDataSearchQuery,
   setCurrentQuery,
   setEditorTab,
+  sortDataTableByColumn,
+  sortEditorResultsByColumn,
+  setQueryHistorySearchInput,
+  setQueryHistoryTab,
   setRoute,
+  saveQueryHistoryNotes,
+  saveQueryHistoryTitle,
+  saveCurrentTableDesignerDraft,
+  queueTableDesignerCsvImport,
+  showToast,
   submitCreateConnection,
   submitDeleteRowConfirmation,
   submitDataRowUpdate,
@@ -50,6 +65,11 @@ import {
   submitImportSql,
   submitOpenConnection,
   subscribe,
+  toggleQueryHistorySavedState,
+  updateCurrentTableDesignerColumnField,
+  updateCurrentTableDesignerField,
+  addCurrentTableDesignerColumn,
+  removeCurrentTableDesignerColumn,
 } from "./store.js";
 import { renderConnectionsView } from "./views/connections.js";
 import { renderDataView } from "./views/data.js";
@@ -58,6 +78,7 @@ 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 { renderTableDesignerView } from "./views/tableDesigner.js";
 import { highlightSql } from "./utils/format.js";
 
 const appRoot = document.querySelector("#app");
@@ -74,6 +95,8 @@ const shellRefs = {
   modal: document.querySelector("#modal-root"),
   toast: document.querySelector("#toast-root"),
 };
+let lastRenderedRoutePath = null;
+let pendingNewTableDesignerAutofocus = false;
 
 function resetStructureGraphForDatabaseChange() {
   resetPersistedStructureGraphState();
@@ -134,6 +157,21 @@ function readFileAsBase64(file) {
   });
 }
 
+function readFileAsText(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      resolve(String(reader.result ?? ""));
+    };
+    reader.onerror = () => {
+      reject(reader.error ?? new Error("The selected CSV file could not be read."));
+    };
+
+    reader.readAsText(file);
+  });
+}
+
 async function buildConnectionLogoUpload(file) {
   if (!(file instanceof File) || !file.size) {
     return null;
@@ -188,6 +226,8 @@ function resolveView(state) {
       return renderEditorView(state, { isResultsRoute: true });
     case "structure":
       return renderStructureView(state);
+    case "tableDesigner":
+      return renderTableDesignerView(state);
     case "settings":
       return renderSettingsView(state);
     default:
@@ -200,7 +240,11 @@ function captureFocusedInputState() {
 
   if (
     !activeElement ||
-    !(activeElement instanceof HTMLInputElement || activeElement instanceof HTMLTextAreaElement)
+    !(
+      activeElement instanceof HTMLInputElement ||
+      activeElement instanceof HTMLTextAreaElement ||
+      activeElement instanceof HTMLSelectElement
+    )
   ) {
     return null;
   }
@@ -212,6 +256,8 @@ function captureFocusedInputState() {
 
   return {
     bind,
+    field: activeElement.dataset.field ?? null,
+    columnId: activeElement.dataset.columnId ?? null,
     selectionStart: activeElement.selectionStart,
     selectionEnd: activeElement.selectionEnd,
     selectionDirection: activeElement.selectionDirection,
@@ -220,24 +266,61 @@ function captureFocusedInputState() {
   };
 }
 
+function buildFocusedInputSelectors(snapshot) {
+  if (!snapshot?.bind) {
+    return [];
+  }
+
+  const selectors = [];
+  const bindSelector = `[data-bind="${CSS.escape(snapshot.bind)}"]`;
+
+  if (snapshot.columnId && snapshot.field) {
+    selectors.push(
+      `${bindSelector}[data-column-id="${CSS.escape(snapshot.columnId)}"][data-field="${CSS.escape(snapshot.field)}"]`
+    );
+  }
+
+  if (snapshot.field) {
+    selectors.push(`${bindSelector}[data-field="${CSS.escape(snapshot.field)}"]`);
+  }
+
+  if (snapshot.columnId) {
+    selectors.push(`${bindSelector}[data-column-id="${CSS.escape(snapshot.columnId)}"]`);
+  }
+
+  selectors.push(bindSelector);
+  return selectors;
+}
+
 function restoreFocusedInputState(snapshot) {
   if (!snapshot) {
-    return;
+    return false;
   }
 
-  const selector = `[data-bind="${CSS.escape(snapshot.bind)}"]`;
-  const nextElement = document.querySelector(selector);
+  const nextElement = buildFocusedInputSelectors(snapshot)
+    .map((selector) => document.querySelector(selector))
+    .find(
+      (candidate) =>
+        candidate instanceof HTMLInputElement ||
+        candidate instanceof HTMLTextAreaElement ||
+        candidate instanceof HTMLSelectElement
+    );
 
   if (
     !nextElement ||
-    !(nextElement instanceof HTMLInputElement || nextElement instanceof HTMLTextAreaElement)
+    !(
+      nextElement instanceof HTMLInputElement ||
+      nextElement instanceof HTMLTextAreaElement ||
+      nextElement instanceof HTMLSelectElement
+    )
   ) {
-    return;
+    return false;
   }
 
   nextElement.focus({ preventScroll: true });
 
   if (
+    (nextElement instanceof HTMLInputElement || nextElement instanceof HTMLTextAreaElement) &&
     typeof snapshot.selectionStart === "number" &&
     typeof snapshot.selectionEnd === "number"
   ) {
@@ -250,14 +333,97 @@ function restoreFocusedInputState(snapshot) {
 
   nextElement.scrollTop = snapshot.scrollTop;
   nextElement.scrollLeft = snapshot.scrollLeft;
+  return true;
+}
+
+function focusNewTableDesignerNameField() {
+  const input = document.querySelector(
+    '[data-bind="table-designer-field"][data-field="tableName"]'
+  );
+
+  if (!(input instanceof HTMLInputElement)) {
+    return false;
+  }
+
+  input.focus({ preventScroll: true });
+  input.setSelectionRange(input.value.length, input.value.length);
+  return true;
+}
+
+function focusTableDesignerColumnNameField(columnId) {
+  if (!columnId) {
+    return false;
+  }
+
+  const input = document.querySelector(
+    `[data-bind="table-designer-column-field"][data-column-id="${CSS.escape(columnId)}"][data-field="name"]`
+  );
+
+  if (!(input instanceof HTMLInputElement)) {
+    return false;
+  }
+
+  input.focus({ preventScroll: true });
+  input.setSelectionRange(input.value.length, input.value.length);
+  return true;
+}
+
+async function handleTableDesignerCsvImport(fileInput) {
+  if (!(fileInput instanceof HTMLInputElement)) {
+    return;
+  }
+
+  const file = fileInput.files?.[0];
+
+  if (!(file instanceof File)) {
+    return;
+  }
+
+  if (!file.size) {
+    showToast("The selected CSV file is empty.", "alert");
+    fileInput.value = "";
+    return;
+  }
+
+  try {
+    const csvText = await readFileAsText(file);
+    const imported = queueTableDesignerCsvImport(file.name, csvText);
+
+    if (!imported) {
+      return;
+    }
+
+    router.navigate("/table-designer/new");
+    showToast(
+      `Imported ${imported.columnCount} columns and ${imported.importedRowCount} row${
+        imported.importedRowCount === 1 ? "" : "s"
+      } from ${file.name}.`,
+      "success"
+    );
+  } catch (error) {
+    showToast(error?.message || "CSV import failed.", "alert");
+  } finally {
+    fileInput.value = "";
+  }
 }
 
 function renderApp(state) {
   const focusedInput = captureFocusedInputState();
+  const previousRoutePath = lastRenderedRoutePath;
   const { main, panel } = resolveView(state);
-  const isLockedRoute = ["editor", "editorResults", "data", "structure"].includes(
+  const isLockedRoute = ["editor", "editorResults", "data", "structure", "tableDesigner"].includes(
     state.route.name
   );
+  const isEnteringNewTableDesignerRoute =
+    state.route.name === "tableDesigner" &&
+    state.route.params?.isNew &&
+    previousRoutePath !== state.route.path;
+
+  if (isEnteringNewTableDesignerRoute) {
+    pendingNewTableDesignerAutofocus = true;
+  } else if (state.route.name !== "tableDesigner" || !state.route.params?.isNew) {
+    pendingNewTableDesignerAutofocus = false;
+  }
 
   teardownStructureGraph();
   shellRefs.topNav.innerHTML = renderTopNav(state);
@@ -269,7 +435,21 @@ function renderApp(state) {
   shellRefs.modal.innerHTML = renderModal(state);
   shellRefs.toast.innerHTML = renderToasts(state.toasts);
   shellRefs.shell.classList.toggle("panel-open", Boolean(panel));
-  restoreFocusedInputState(focusedInput);
+
+  if (
+    pendingNewTableDesignerAutofocus &&
+    state.route.name === "tableDesigner" &&
+    state.route.params?.isNew &&
+    state.tableDesigner.draft?.mode === "create"
+  ) {
+    if (focusNewTableDesignerNameField()) {
+      pendingNewTableDesignerAutofocus = false;
+    }
+  } else {
+    restoreFocusedInputState(focusedInput);
+  }
+
+  lastRenderedRoutePath = state.route.path;
 
   if (state.route.name === "structure") {
     mountStructureGraph(state).catch((error) => {
@@ -338,6 +518,9 @@ async function handleAction(actionNode) {
     case "create-backup":
       await createActiveConnectionBackup();
       return;
+    case "open-overview-in-finder":
+      await openOverviewInFinder();
+      return;
     case "execute-query": {
       await executeEditorQueryAndNavigate();
       return;
@@ -350,11 +533,57 @@ async function handleAction(actionNode) {
       return;
     case "clear-query":
       clearCurrentQuery();
+      if (getState().route.name === "editorResults") {
+        router.navigate("/editor");
+      }
       return;
     case "clear-results":
       clearEditorResults();
       router.navigate("/editor");
       return;
+    case "select-query-history-item":
+      if (actionNode.dataset.historyId) {
+        await selectQueryHistoryItem(actionNode.dataset.historyId);
+      }
+      return;
+    case "clear-query-history-selection":
+      clearQueryHistorySelection();
+      return;
+    case "set-query-history-tab":
+      if (actionNode.dataset.tab) {
+        await setQueryHistoryTab(actionNode.dataset.tab);
+      }
+      return;
+    case "load-more-query-history":
+      await loadMoreQueryHistory();
+      return;
+    case "open-query-history":
+      if (actionNode.dataset.historyId && openQueryHistoryInEditor(actionNode.dataset.historyId)) {
+        router.navigate("/editor");
+      }
+      return;
+    case "run-query-history":
+      if (actionNode.dataset.historyId) {
+        const success = await runQueryHistoryItem(actionNode.dataset.historyId);
+        router.navigate(success ? "/editor/results" : "/editor");
+      }
+      return;
+    case "toggle-query-history-saved":
+      if (actionNode.dataset.historyId) {
+        await toggleQueryHistorySavedState(
+          actionNode.dataset.historyId,
+          actionNode.dataset.nextValue === "true"
+        );
+      }
+      return;
+    case "delete-query-history":
+      if (
+        actionNode.dataset.historyId &&
+        window.confirm("Delete this query history item and all recorded runs?")
+      ) {
+        await deleteQueryHistoryStateItem(actionNode.dataset.historyId);
+      }
+      return;
     case "set-editor-tab": {
       const tab = actionNode.dataset.tab;
       if (!tab) {
@@ -364,9 +593,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;
@@ -378,6 +604,53 @@ async function handleAction(actionNode) {
         await selectStructureEntry(actionNode.dataset.entryName);
       }
       return;
+    case "add-table-designer-column":
+      {
+        const columnId = addCurrentTableDesignerColumn();
+        if (columnId) {
+          window.requestAnimationFrame(() => {
+            focusTableDesignerColumnNameField(columnId);
+          });
+        }
+      }
+      return;
+    case "remove-table-designer-column":
+      if (actionNode.dataset.columnId) {
+        removeCurrentTableDesignerColumn(actionNode.dataset.columnId);
+      }
+      return;
+    case "save-table-designer": {
+      const savedTableName = await saveCurrentTableDesignerDraft();
+      if (savedTableName) {
+        router.navigate(`/table-designer/${encodeURIComponent(savedTableName)}`);
+      }
+      return;
+    }
+    case "copy-table-designer-sql": {
+      const sqlPreview = getState().tableDesigner.draft?.sqlPreview ?? "";
+      if (!sqlPreview.trim()) {
+        return;
+      }
+
+      try {
+        await navigator.clipboard.writeText(sqlPreview);
+        showToast("SQL preview copied.", "success");
+      } catch (error) {
+        showToast("Clipboard access failed.", "alert");
+      }
+      return;
+    }
+    case "import-table-designer-csv": {
+      const fileInput = document.querySelector('[data-bind="table-designer-import-file"]');
+
+      if (!(fileInput instanceof HTMLInputElement)) {
+        return;
+      }
+
+      fileInput.value = "";
+      fileInput.click();
+      return;
+    }
     case "select-data-row":
       if (actionNode.dataset.rowIndex) {
         selectDataRow(actionNode.dataset.rowIndex);
@@ -399,6 +672,16 @@ async function handleAction(actionNode) {
         await setDataPage(actionNode.dataset.page);
       }
       return;
+    case "sort-data-column":
+      if (actionNode.dataset.columnName) {
+        await sortDataTableByColumn(actionNode.dataset.columnName);
+      }
+      return;
+    case "sort-editor-results-column":
+      if (actionNode.dataset.columnName) {
+        sortEditorResultsByColumn(actionNode.dataset.columnName);
+      }
+      return;
     case "set-data-page-size":
       if (actionNode.dataset.pageSize) {
         await setDataPageSize(actionNode.dataset.pageSize);
@@ -483,6 +766,34 @@ document.addEventListener("input", (event) => {
 
   if (bindNode.dataset.bind === "data-search-query") {
     setDataSearchQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-search") {
+    setTableDesignerSearchQuery(bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-field") {
+    if (bindNode instanceof HTMLInputElement && bindNode.type === "checkbox") {
+      return;
+    }
+
+    updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-column-field") {
+    updateCurrentTableDesignerColumnField(
+      bindNode.dataset.columnId,
+      bindNode.dataset.field,
+      bindNode.value
+    );
+    return;
+  }
+
+  if (bindNode.dataset.bind === "query-history-search") {
+    setQueryHistorySearchInput(bindNode.value);
   }
 });
 
@@ -507,14 +818,41 @@ 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);
     return;
   }
 
-  if (bindNode.dataset.bind === "data-search-column") {
-    setDataSearchColumn(bindNode.value);
+  if (bindNode.dataset.bind === "table-designer-import-file") {
+    void handleTableDesignerCsvImport(bindNode);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-field") {
+    if (bindNode instanceof HTMLInputElement && bindNode.type === "checkbox") {
+      updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.checked);
+      return;
+    }
+
+    updateCurrentTableDesignerField(bindNode.dataset.field, bindNode.value);
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-column-field") {
+    updateCurrentTableDesignerColumnField(
+      bindNode.dataset.columnId,
+      bindNode.dataset.field,
+      bindNode.value
+    );
+    return;
+  }
+
+  if (bindNode.dataset.bind === "table-designer-column-flag") {
+    updateCurrentTableDesignerColumnField(
+      bindNode.dataset.columnId,
+      bindNode.dataset.field,
+      bindNode.checked
+    );
   }
 });
 
@@ -634,6 +972,18 @@ document.addEventListener("submit", async (event) => {
       );
       return;
     }
+    case "save-query-history-title":
+      await saveQueryHistoryTitle(
+        String(formData.get("historyId") ?? ""),
+        String(formData.get("title") ?? "")
+      );
+      return;
+    case "save-query-history-notes":
+      await saveQueryHistoryNotes(
+        String(formData.get("historyId") ?? ""),
+        String(formData.get("notes") ?? "")
+      );
+      return;
     default:
   }
 });

package/frontend/js/components/bottomTabs.js

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

package/frontend/js/components/dataGrid.js

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