sqlite-hub 0.5.0 → 0.6.0

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>
+  `;
+}

package/frontend/js/components/tableDesignerSidebar.js

@@ -0,0 +1,126 @@
+import { escapeHtml, formatNumber } from "../utils/format.js";
+
+function getFilteredTables(tables, searchQuery) {
+  const normalizedSearch = String(searchQuery ?? "").trim().toLowerCase();
+
+  if (!normalizedSearch) {
+    return tables;
+  }
+
+  return tables.filter((table) => table.name.toLowerCase().includes(normalizedSearch));
+}
+
+export function renderTableDesignerSidebar(state) {
+  const tables = state.tableDesigner.tables ?? [];
+  const filteredTables = getFilteredTables(tables, state.tableDesigner.searchQuery);
+  const isNewDraft = state.tableDesigner.draft?.mode === "create";
+
+  return `
+    <aside class="table-designer-sidebar">
+      <div class="table-designer-sidebar__header">
+        <div>
+          <div class="table-designer-sidebar__eyebrow">Schema Workspace</div>
+          <div class="table-designer-sidebar__title">Table Designer</div>
+          <div class="table-designer-sidebar__meta">
+            ${escapeHtml(formatNumber(tables.length))} table${tables.length === 1 ? "" : "s"}
+          </div>
+        </div>
+        <div class="table-designer-sidebar__header-actions">
+          <button
+            class="table-designer-sidebar__new-button"
+            data-action="navigate"
+            data-to="/table-designer/new"
+            type="button"
+          >
+            + New Table
+          </button>
+          <button
+            class="table-designer-sidebar__import-button"
+            data-action="import-table-designer-csv"
+            type="button"
+          >
+            Import CSV
+          </button>
+          <input
+            accept=".csv,text/csv"
+            class="table-designer-sidebar__file-input"
+            data-bind="table-designer-import-file"
+            type="file"
+          />
+        </div>
+      </div>
+
+      <label class="table-designer-sidebar__search">
+        <span class="material-symbols-outlined text-sm text-on-surface-variant/55">search</span>
+        <input
+          class="table-designer-sidebar__search-input"
+          data-bind="table-designer-search"
+          placeholder="Search tables..."
+          spellcheck="false"
+          type="search"
+          value="${escapeHtml(state.tableDesigner.searchQuery ?? "")}"
+        />
+      </label>
+
+      <div class="table-designer-sidebar__list custom-scrollbar">
+        ${
+          state.tableDesigner.loading && !tables.length
+            ? `
+                <div class="table-designer-sidebar__empty">
+                  <span class="material-symbols-outlined mb-2 text-3xl">progress_activity</span>
+                  <div>Loading SQLite schema...</div>
+                </div>
+              `
+            : isNewDraft
+              ? `
+                  <button
+                    class="table-designer-sidebar__item is-active"
+                    data-action="navigate"
+                    data-to="/table-designer/new"
+                    type="button"
+                  >
+                    <div class="table-designer-sidebar__item-name">New Table Draft</div>
+                    <div class="table-designer-sidebar__item-meta">unsaved schema</div>
+                  </button>
+                `
+              : ""
+        }
+        ${
+          !filteredTables.length && !state.tableDesigner.loading
+            ? `
+                <div class="table-designer-sidebar__empty">
+                  ${
+                    tables.length
+                      ? "No tables match the current search."
+                      : "No tables found. Create the first table in this database."
+                  }
+                </div>
+              `
+            : filteredTables
+                .map(
+                  (table) => `
+                    <button
+                      class="table-designer-sidebar__item ${
+                        !isNewDraft && table.name === state.tableDesigner.selectedTableName
+                          ? "is-active"
+                          : ""
+                      }"
+                      data-action="navigate"
+                      data-to="/table-designer/${encodeURIComponent(table.name)}"
+                      type="button"
+                    >
+                      <div class="table-designer-sidebar__item-name">${escapeHtml(table.name)}</div>
+                      <div class="table-designer-sidebar__item-meta">
+                        ${escapeHtml(formatNumber(table.columnCount ?? 0))} column${
+                          Number(table.columnCount ?? 0) === 1 ? "" : "s"
+                        }
+                      </div>
+                    </button>
+                  `
+                )
+                .join("")
+        }
+      </div>
+    </aside>
+  `;
+}

package/frontend/js/components/tableDesignerSqlPreview.js

@@ -0,0 +1,40 @@
+import { escapeHtml } from "../utils/format.js";
+
+export function renderTableDesignerSqlPreview(draft) {
+  if (!draft) {
+    return `
+      <section class="table-designer-preview shell-section">
+        <div class="table-designer-preview__header">
+          <div>
+            <div class="table-designer-preview__eyebrow">SQL Preview</div>
+            <div class="table-designer-preview__title">No Draft Selected</div>
+          </div>
+        </div>
+        <div class="table-designer-preview__empty">
+          Select a table or create a new one to inspect the generated SQLite statements.
+        </div>
+      </section>
+    `;
+  }
+
+  return `
+    <section class="table-designer-preview shell-section">
+      <div class="table-designer-preview__header">
+        <div>
+          <div class="table-designer-preview__eyebrow">SQL Preview</div>
+          <div class="table-designer-preview__title">Live SQLite Output</div>
+        </div>
+        <button
+          class="table-designer-preview__copy"
+          data-action="copy-table-designer-sql"
+          type="button"
+        >
+          Copy SQL
+        </button>
+      </div>
+      <pre class="table-designer-preview__body custom-scrollbar">${escapeHtml(
+        draft.sqlPreview || "-- SQL preview unavailable."
+      )}</pre>
+    </section>
+  `;
+}

package/frontend/js/router.js

@@ -29,6 +29,16 @@ export function parseHash(hash = window.location.hash) {
       };
     case "structure":
       return { name: "structure", path: "/structure", params: {} };
+    case "table-designer":
+      return {
+        name: "tableDesigner",
+        path: cleanPath,
+        params: {
+          isNew: segments[1] === "new",
+          tableName:
+            segments[1] && segments[1] !== "new" ? decodeURIComponent(segments[1]) : null,
+        },
+      };
     case "settings":
       return { name: "settings", path: "/settings", params: {} };
     default: