sqlite-hub 0.4.0 → 0.6.0

package/frontend/js/components/queryResults.js

@@ -1,9 +1,39 @@
 import { renderDataGrid } from "./dataGrid.js";
 import { escapeHtml, formatCellValue, formatNumber } from "../utils/format.js";
 
+function getSortIcon(columnName, sortColumn, sortDirection) {
+  if (columnName !== sortColumn) {
+    return "unfold_more";
+  }
+
+  return sortDirection === "desc" ? "south" : "north";
+}
+
+function renderSortableHeader(columnName, sortColumn, sortDirection) {
+  const isActive = columnName === sortColumn;
+
+  return `
+    <button
+      class="flex w-full items-center justify-between gap-2 text-left transition-colors ${
+        isActive ? "text-primary-container" : "text-on-surface-variant hover:text-primary-container"
+      }"
+      data-action="sort-editor-results-column"
+      data-column-name="${escapeHtml(columnName)}"
+      type="button"
+    >
+      <span class="truncate">${escapeHtml(columnName)}</span>
+      <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
+        columnName,
+        sortColumn,
+        sortDirection
+      )}</span>
+    </button>
+  `;
+}
+
 export function renderQueryResultsPane(
   result,
-  { exporting = false, selectedRowIndex = null, editable = false, editStatusMessage = "" } = {}
+  { selectedRowIndex = null, editable = false, sortColumn = null, sortDirection = null } = {}
 ) {
   if (!result) {
     return `
@@ -17,9 +47,9 @@ export function renderQueryResultsPane(
   }
 
   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",
+    renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection),
     cellClassName: "px-4 py-3 align-top text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);
@@ -32,50 +62,6 @@ export function renderQueryResultsPane(
 
   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

package/frontend/js/components/rowEditorPanel.js

@@ -1,16 +1,87 @@
 import { escapeHtml } from "../utils/format.js";
 
+function getJsonPreview(value) {
+  if (value === null || value === undefined) {
+    return null;
+  }
+
+  if (typeof value === "object") {
+    return JSON.stringify(value, null, 2);
+  }
+
+  const text = String(value).trim();
+
+  if (!text || !["{", "["].includes(text[0])) {
+    return null;
+  }
+
+  try {
+    const parsed = JSON.parse(text);
+
+    if (!parsed || typeof parsed !== "object") {
+      return null;
+    }
+
+    return JSON.stringify(parsed, null, 2);
+  } catch (error) {
+    return null;
+  }
+}
+
+function renderJsonViewer(prettyJson, title = "JSON Viewer") {
+  return `
+    <div class="border border-outline-variant/10 bg-surface-container px-4 py-4">
+      <div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/75">
+        ${escapeHtml(title)}
+      </div>
+      <pre class="custom-scrollbar mt-3 max-h-[18rem] overflow-auto whitespace-pre-wrap break-words border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface">${escapeHtml(
+        prettyJson
+      )}</pre>
+    </div>
+  `;
+}
+
 function renderReadonlyField(label, value) {
+  const jsonPreview = getJsonPreview(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>
+      ${
+        jsonPreview
+          ? `<div class="mt-2">${renderJsonViewer(jsonPreview)}</div>`
+          : `<div class="mt-2 text-sm text-on-surface">${escapeHtml(value)}</div>`
+      }
     </div>
   `;
 }
 
+function renderEditableField(field) {
+  const jsonPreview = getJsonPreview(field.value);
+
+  return `
+    <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>
+      ${
+        jsonPreview
+          ? renderJsonViewer(jsonPreview, "JSON Preview")
+          : ""
+      }
+      <textarea
+        class="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 ${
+          jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
+        }"
+        name="field:${escapeHtml(field.name)}"
+        spellcheck="false"
+      >${escapeHtml(field.value ?? "")}</textarea>
+    </label>
+  `;
+}
+
 export function renderRowEditorPanel({
   title,
   sectionLabel = "Row Editor",
@@ -137,19 +208,7 @@ export function renderRowEditorPanel({
                       ? `
                           <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-[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>
-                                `
-                              )
+                              .map((field) => renderEditableField(field))
                               .join("")}
                           </div>
                         `

package/frontend/js/components/sidebar.js

@@ -7,6 +7,7 @@ const sidebarItems = [
   { 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: "Table Designer", href: "#/table-designer", key: "tableDesigner", icon: "table_chart" },
   { label: "Settings", href: "#/settings", key: "settings", icon: "settings" },
 ];
 

package/frontend/js/components/tableDesignerEditor.js

@@ -0,0 +1,356 @@
+import { escapeHtml } from "../utils/format.js";
+
+function renderWarningList(items = [], className, title, tone = "alert") {
+  if (!items.length) {
+    return "";
+  }
+
+  return `
+    <section class="${className}">
+      <div class="table-designer-banner__header">
+        <div class="table-designer-banner__title">${escapeHtml(title)}</div>
+        <div class="status-badge status-badge--${tone}">
+          ${escapeHtml(String(items.length))}
+        </div>
+      </div>
+      <div class="table-designer-banner__list">
+        ${items
+          .map(
+            (item) => `
+              <div class="table-designer-banner__item">
+                <div class="table-designer-banner__item-title">${escapeHtml(
+                  item.title || item
+                )}</div>
+                ${
+                  item.message
+                    ? `<div class="table-designer-banner__item-text">${escapeHtml(item.message)}</div>`
+                    : ""
+                }
+              </div>
+            `
+          )
+          .join("")}
+      </div>
+    </section>
+  `;
+}
+
+function getReferencedColumns(draft, catalogTables, referencesTable) {
+  const normalizedReference = String(referencesTable ?? "").trim().toLowerCase();
+  const normalizedDraftTable = String(draft.tableName ?? "").trim().toLowerCase();
+
+  if (!normalizedReference) {
+    return [];
+  }
+
+  if (normalizedReference === normalizedDraftTable) {
+    return draft.columns
+      .filter((column) => !column.deleted)
+      .map((column) => column.name)
+      .filter(Boolean);
+  }
+
+  return (
+    catalogTables.find((table) => table.name.toLowerCase() === normalizedReference)?.columns ?? []
+  );
+}
+
+function renderColumnRow(column, draft, catalogTables) {
+  const referenceColumns = getReferencedColumns(draft, catalogTables, column.referencesTable);
+
+  return `
+    <div class="table-designer-grid__row">
+      <input
+        class="table-designer-field"
+        data-bind="table-designer-column-field"
+        data-column-id="${escapeHtml(column.id)}"
+        data-field="name"
+        placeholder="column_name"
+        spellcheck="false"
+        type="text"
+        value="${escapeHtml(column.name)}"
+      />
+      <select
+        class="table-designer-field"
+        data-bind="table-designer-column-field"
+        data-column-id="${escapeHtml(column.id)}"
+        data-field="type"
+      >
+        ${draft.supportedTypes
+          .map(
+            (type) => `
+              <option value="${escapeHtml(type)}" ${type === column.type ? "selected" : ""}>
+                ${escapeHtml(type)}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+      <label class="table-designer-check">
+        <input
+          data-bind="table-designer-column-flag"
+          data-column-id="${escapeHtml(column.id)}"
+          data-field="notNull"
+          type="checkbox"
+          ${column.notNull ? "checked" : ""}
+        />
+        <span>Not null</span>
+      </label>
+      <label class="table-designer-check">
+        <input
+          data-bind="table-designer-column-flag"
+          data-column-id="${escapeHtml(column.id)}"
+          data-field="unique"
+          type="checkbox"
+          ${column.unique ? "checked" : ""}
+        />
+        <span>Unique</span>
+      </label>
+      <label class="table-designer-check">
+        <input
+          data-bind="table-designer-column-flag"
+          data-column-id="${escapeHtml(column.id)}"
+          data-field="primaryKey"
+          type="checkbox"
+          ${column.primaryKey ? "checked" : ""}
+        />
+        <span>PK</span>
+      </label>
+      <input
+        class="table-designer-field"
+        data-bind="table-designer-column-field"
+        data-column-id="${escapeHtml(column.id)}"
+        data-field="defaultValue"
+        placeholder="SQL default"
+        spellcheck="false"
+        type="text"
+        value="${escapeHtml(column.defaultValue)}"
+      />
+      <select
+        class="table-designer-field"
+        data-bind="table-designer-column-field"
+        data-column-id="${escapeHtml(column.id)}"
+        data-field="referencesTable"
+      >
+        <option value="">No FK table</option>
+        ${catalogTables
+          .map(
+            (table) => `
+              <option
+                value="${escapeHtml(table.name)}"
+                ${table.name === column.referencesTable ? "selected" : ""}
+              >
+                ${escapeHtml(table.name)}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+      <select
+        class="table-designer-field"
+        data-bind="table-designer-column-field"
+        data-column-id="${escapeHtml(column.id)}"
+        data-field="referencesColumn"
+      >
+        <option value="">No FK column</option>
+        ${referenceColumns
+          .map(
+            (name) => `
+              <option value="${escapeHtml(name)}" ${name === column.referencesColumn ? "selected" : ""}>
+                ${escapeHtml(name)}
+              </option>
+            `
+          )
+          .join("")}
+      </select>
+      <button
+        class="table-designer-delete"
+        data-action="remove-table-designer-column"
+        data-column-id="${escapeHtml(column.id)}"
+        type="button"
+      >
+        <span class="material-symbols-outlined text-base">delete</span>
+      </button>
+    </div>
+  `;
+}
+
+function renderColumnGrid(draft, catalogTables) {
+  const visibleColumns = draft.columns.filter((column) => !column.deleted);
+
+  return `
+    <div class="table-designer-grid custom-scrollbar">
+      <div class="table-designer-grid__header">
+        <div>Name</div>
+        <div>Type</div>
+        <div>Not Null</div>
+        <div>Unique</div>
+        <div>Primary Key</div>
+        <div>Default</div>
+        <div>FK Table</div>
+        <div>FK Column</div>
+        <div></div>
+      </div>
+      ${visibleColumns.map((column) => renderColumnRow(column, draft, catalogTables)).join("")}
+    </div>
+  `;
+}
+
+function renderFillToggle(draft) {
+  if (draft.mode !== "create") {
+    return "";
+  }
+
+  const hasImportedRows = (draft.importedCsvRows?.length ?? 0) > 0;
+
+  return `
+    <label class="table-designer-fill-toggle ${hasImportedRows ? "" : "is-disabled"}">
+      <input
+        data-bind="table-designer-field"
+        data-field="fillImportedRows"
+        type="checkbox"
+        ${draft.fillImportedRows ? "checked" : ""}
+        ${hasImportedRows ? "" : "disabled"}
+      />
+      <span>Fill</span>
+      <span class="table-designer-fill-toggle__meta">
+        ${
+          hasImportedRows
+            ? `${escapeHtml(String(draft.importedCsvRows.length))} imported row${
+                draft.importedCsvRows.length === 1 ? "" : "s"
+              }`
+            : "Available after CSV import"
+        }
+      </span>
+    </label>
+  `;
+}
+
+export function renderTableDesignerEditor(state) {
+  const draft = state.tableDesigner.draft;
+
+  if (state.tableDesigner.loading || state.tableDesigner.detailLoading) {
+    return `
+      <section class="table-designer-main__empty shell-section">
+        <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+        <div class="table-designer-main__empty-title">Loading Schema Draft</div>
+        <div class="table-designer-main__empty-text">
+          Reading the current SQLite schema and preparing the editable draft.
+        </div>
+      </section>
+    `;
+  }
+
+  if (!draft) {
+    return `
+      <section class="table-designer-main__empty shell-section">
+        <div class="table-designer-main__empty-title">No Table Selected</div>
+        <div class="table-designer-main__empty-text">
+          Open an existing table from the left or start a new draft with <strong>+ New Table</strong>.
+        </div>
+      </section>
+    `;
+  }
+
+  const validationItems = (draft.validationErrors ?? []).map((message) => ({
+    title: message,
+  }));
+  const warningItems = draft.warnings ?? [];
+  const catalogTables = state.tableDesigner.tables ?? [];
+  const visibleColumns = draft.columns.filter((column) => !column.deleted);
+  const saveLabel =
+    draft.mode === "create"
+      ? state.tableDesigner.saving
+        ? "Creating..."
+        : "Create Table"
+      : state.tableDesigner.saving
+        ? "Saving..."
+        : "Save Changes";
+
+  return `
+    <section class="table-designer-main shell-section">
+      <header class="table-designer-main__header">
+        <div>
+          <div class="table-designer-main__eyebrow">
+            ${draft.mode === "create" ? "New Table Draft" : "Editing Existing Table"}
+          </div>
+          <div class="table-designer-main__title-row">
+            <input
+              class="table-designer-main__name"
+              data-bind="table-designer-field"
+              data-field="tableName"
+              placeholder="table_name"
+              spellcheck="false"
+              type="text"
+              value="${escapeHtml(draft.tableName)}"
+            />
+            ${
+              draft.mode === "edit"
+                ? `<div class="status-badge status-badge--muted">FROM ${escapeHtml(
+                    draft.originalTableName
+                  )}</div>`
+                : `<div class="status-badge status-badge--primary">CREATE</div>`
+            }
+          </div>
+          <div class="table-designer-main__subtitle">
+            ${escapeHtml(String(visibleColumns.length))} visible column${
+              visibleColumns.length === 1 ? "" : "s"
+            } // SQLite-safe operations only
+          </div>
+        </div>
+        <div class="table-designer-main__actions">
+          ${renderFillToggle(draft)}
+          <button
+            class="table-designer-main__secondary"
+            data-action="refresh-view"
+            type="button"
+          >
+            Reload Schema
+          </button>
+          <button
+            class="table-designer-main__primary ${draft.canSave ? "" : "is-disabled"}"
+            data-action="save-table-designer"
+            ${draft.canSave ? "" : "disabled"}
+            type="button"
+          >
+            ${escapeHtml(saveLabel)}
+          </button>
+        </div>
+      </header>
+
+      ${
+        state.tableDesigner.saveError
+          ? `
+              <div class="table-designer-main__error">
+                <div class="table-designer-main__error-code">${escapeHtml(
+                  state.tableDesigner.saveError.code
+                )}</div>
+                <div class="table-designer-main__error-text">${escapeHtml(
+                  state.tableDesigner.saveError.message
+                )}</div>
+              </div>
+            `
+          : ""
+      }
+
+      ${renderWarningList(validationItems, "table-designer-banner is-validation", "Validation", "alert")}
+      ${renderWarningList(warningItems, "table-designer-banner is-warning", "Warnings", "alert")}
+
+      <section class="table-designer-main__section">
+        <div class="table-designer-main__section-header">
+          <div>
+            <div class="table-designer-main__section-title">Columns</div>
+          </div>
+          <button
+            class="table-designer-main__secondary"
+            data-action="add-table-designer-column"
+            type="button"
+          >
+            + Add Column
+          </button>
+        </div>
+        ${renderColumnGrid(draft, catalogTables)}
+      </section>
+    </section>
+  `;
+}