sqlite-hub 2.0.1 → 2.2.0

package/frontend/js/views/structure.js

@@ -1,4 +1,5 @@
 import { clearInspector, renderDdlSection, renderInspector } from '../components/structureGraph.js';
+import { renderVirtualTableBadge } from '../components/badges.js';
 import { renderDropdownButton } from '../components/dropdownButton.js';
 import { renderGenerateTypesDropdown } from '../components/generateTypesDropdown.js';
 import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
@@ -36,11 +37,14 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
                           '" ',
                           entryAttributes,
                           ' type="button">',
-                          '<div class="font-mono text-xs ',
+                          '<div class="flex min-w-0 items-center gap-2">',
+                          '<div class="min-w-0 flex-1 truncate font-mono text-xs ',
                           isActive ? 'text-primary-container' : 'text-on-surface',
                           '">',
                           escapeHtml(entry.name),
                           '</div>',
+                          renderVirtualTableBadge(entry),
+                          '</div>',
                           metaMarkup,
                           '</button>',
                       ].join('');
@@ -76,6 +80,10 @@ function getFilteredTables(tables, searchQuery) {
     return tables.filter(table => table.name.toLowerCase().includes(normalizedSearch));
 }
 
+function isShadowTable(table) {
+    return Boolean(table?.isShadow);
+}
+
 function renderStructureTableSearch(state) {
     return `
     <label class="table-designer-sidebar__search">
@@ -129,7 +137,10 @@ function renderObjectInspector(detail) {
             <span class="material-symbols-outlined text-[18px]">close</span>
           </button>
         </div>
-        <div class="structure-graph__title">${escapeHtml(detail.name)}</div>
+        <div class="flex min-w-0 flex-wrap items-center gap-2">
+          <div class="structure-graph__title min-w-0">${escapeHtml(detail.name)}</div>
+          ${renderVirtualTableBadge(detail)}
+        </div>
         ${
             detail.tableName
                 ? `
@@ -336,9 +347,10 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading, tabl
 
 export function renderStructureView(state) {
     const structure = state.structure.data;
-    const filteredTables = structure
-        ? getFilteredTables(structure.grouped.tables ?? [], state.structure.tableSearchQuery)
-        : [];
+    const regularTables = (structure?.grouped.tables ?? []).filter(table => !isShadowTable(table));
+    const shadowTables = (structure?.grouped.tables ?? []).filter(isShadowTable);
+    const filteredTables = structure ? getFilteredTables(regularTables, state.structure.tableSearchQuery) : [];
+    const filteredShadowTables = structure ? getFilteredTables(shadowTables, state.structure.tableSearchQuery) : [];
     const detail = state.structure.detail?.name === state.structure.selectedName ? state.structure.detail : null;
     const tablesVisible = state.structure.tablesVisible !== false;
 
@@ -376,6 +388,17 @@ export function renderStructureView(state) {
                                   ? 'tables match the current search.'
                                   : null,
                           })}
+                          ${
+                              shadowTables.length
+                                  ? renderEntryGroup('Shadow Tables', filteredShadowTables, state.structure.selectedName, {
+                                        compact: true,
+                                        showMeta: false,
+                                        emptyMessage: state.structure.tableSearchQuery
+                                            ? 'shadow tables match the current search.'
+                                            : null,
+                                    })
+                                  : ''
+                          }
                           ${renderEntryGroup('Views', structure.grouped.views, state.structure.selectedName)}
                           ${renderEntryGroup('Indexes', structure.grouped.indexes, state.structure.selectedName, {
                               compact: true,

package/frontend/js/views/tableAdvisor.js

@@ -5,6 +5,7 @@ import {
     highlightSql,
     truncateMiddle,
 } from '../utils/format.js';
+import { renderVirtualTableBadge } from '../components/badges.js';
 import { renderWorkspaceOpenDropdown } from '../components/workspaceOpenDropdown.js';
 
 const CATEGORY_LABELS = {
@@ -73,7 +74,8 @@ function renderRiskBadge(risk = 'low') {
 }
 
 function renderTableList(state) {
-    const { tables = [], selectedTableName } = state.tableAdvisor;
+    const { selectedTableName } = state.tableAdvisor;
+    const tables = (state.tableAdvisor.tables ?? []).filter(table => !table?.isShadow);
 
     if (state.tableAdvisor.loading && !tables.length) {
         return `
@@ -107,8 +109,11 @@ function renderTableList(state) {
                     href="#/table-advisor/${encodeURIComponent(table.name)}"
                     title="${escapeHtml(table.name)}"
                   >
-                    <div class="table-designer-sidebar__item-name ${isActive ? 'is-active' : ''}">
-                      ${escapeHtml(table.name)}
+                    <div class="flex min-w-0 items-center gap-2">
+                      <div class="table-designer-sidebar__item-name min-w-0 flex-1 ${isActive ? 'is-active' : ''}">
+                        ${escapeHtml(table.name)}
+                      </div>
+                      ${renderVirtualTableBadge(table)}
                     </div>
                     <div class="table-designer-sidebar__item-meta">
                       ${escapeHtml(formatNumber(table.columnCount ?? 0))} columns
@@ -128,9 +133,12 @@ function renderSummary(result = {}) {
       <div class="grid grid-cols-1 gap-3 md:grid-cols-4">
         <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
           <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Table</div>
-          <div class="mt-2 min-w-0 truncate text-lg font-black text-on-surface" title="${escapeHtml(
-              result.tableName ?? '',
-          )}">${escapeHtml(result.tableName ?? 'Unknown')}</div>
+          <div class="mt-2 flex min-w-0 items-center gap-2">
+            <div class="min-w-0 truncate text-lg font-black text-on-surface" title="${escapeHtml(
+                result.tableName ?? '',
+            )}">${escapeHtml(result.tableName ?? 'Unknown')}</div>
+            ${renderVirtualTableBadge(result)}
+          </div>
         </div>
         <div class="border border-outline-variant/10 bg-surface-container-low px-4 py-3">
           <div class="font-mono text-[10px] uppercase tracking-[0.2em] text-on-surface-variant/55">Score</div>

package/frontend/js/views/tableDesigner.js

@@ -1,6 +1,8 @@
 import { renderTableDesignerEditor } from "../components/tableDesignerEditor.js";
+import { renderTableDesignerConstraintsDrawer } from "../components/tableDesignerConstraintsDrawer.js";
 import { renderTableDesignerSidebar } from "../components/tableDesignerSidebar.js";
 import { renderTableDesignerSqlPreview } from "../components/tableDesignerSqlPreview.js";
+import { renderDropdownButton } from "../components/dropdownButton.js";
 import { renderWorkspaceOpenDropdown } from "../components/workspaceOpenDropdown.js";
 import { escapeHtml } from "../utils/format.js";
 
@@ -17,6 +19,44 @@ function renderRouteError(error) {
   `;
 }
 
+function renderImportDropdown() {
+  return renderDropdownButton({
+    align: "right",
+    icon: "upload_file",
+    label: "Import",
+    title: "Import data",
+    items: [
+      {
+        action: "import-table-designer-data",
+        dataAttributes: {
+          importFormat: "csv",
+          importAccept: ".csv,text/csv",
+        },
+        icon: "table_chart",
+        label: "CSV",
+      },
+      {
+        action: "import-table-designer-data",
+        dataAttributes: {
+          importFormat: "tsv",
+          importAccept: ".tsv,text/tab-separated-values",
+        },
+        icon: "table_rows",
+        label: "TSV",
+      },
+      {
+        action: "import-table-designer-data",
+        dataAttributes: {
+          importFormat: "json",
+          importAccept: ".json,application/json",
+        },
+        icon: "data_object",
+        label: "JSON",
+      },
+    ],
+  });
+}
+
 function renderWorkspaceToolbar(state) {
   const tablesVisible = state.tableDesigner.tablesVisible !== false;
   const tableName = state.tableDesigner.selectedTableName ?? state.tableDesigner.draft?.tableName ?? "";
@@ -62,17 +102,12 @@ function renderWorkspaceToolbar(state) {
             },
           ],
         })}
-        <button
-          class="standard-button"
-          data-action="import-table-designer-csv"
-          type="button"
-        >
-          Import CSV
-        </button>
+        ${renderImportDropdown()}
         <input
-          accept=".csv,text/csv"
+          accept=".csv,text/csv,.tsv,text/tab-separated-values,.json,application/json"
           class="table-designer-workspace__file-input"
           data-bind="table-designer-import-file"
+          data-import-format="csv"
           type="file"
         />
         <button
@@ -110,6 +145,6 @@ export function renderTableDesignerView(state) {
         </div>
       </section>
     `,
-    panel: "",
+    panel: renderTableDesignerConstraintsDrawer(state),
   };
 }

package/frontend/styles/base.css

@@ -70,6 +70,15 @@ textarea:disabled {
     padding: 0 var(--control-padding-inline);
 }
 
+.control-input:focus,
+.control-input:focus-visible,
+.control-select:focus,
+.control-select:focus-visible {
+    border-color: var(--color-primary-container);
+    box-shadow: none;
+    outline: none;
+}
+
 input.control-input--ghost {
     appearance: none;
     background: transparent;