sqlite-hub 0.4.0 → 0.6.0

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: