sqlite-hub 0.11.1 → 0.16.0

package/frontend/js/components/sidebar.js

@@ -1,4 +1,4 @@
-import { escapeHtml } from '../utils/format.js';
+import { escapeHtml, formatCompactDateTime, truncateMiddle } from '../utils/format.js';
 import { renderConnectionLogo } from './connectionLogo.js';
 
 const sidebarItems = [
@@ -6,16 +6,16 @@ const sidebarItems = [
     { label: 'Overview', href: '#/overview', key: 'overview', icon: 'dashboard' },
     { label: 'Data', href: '#/data', key: 'data', icon: 'table_rows' },
     { label: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
-    { label: 'SQL Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
+    { label: 'SQL_Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
     { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
-    { label: 'Table Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
+    { label: 'Table_Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
     {
-        label: 'Media Tagging',
+        label: 'MEDIA_TAGGING',
         key: 'mediaTagging',
         icon: 'sell',
         children: [
-            { label: 'Setup', href: '#/media-tagging', key: 'mediaTaggingSetup' },
-            { label: 'Tagging Queue', href: '#/media-tagging/queue', key: 'mediaTaggingQueue' },
+            { label: 'SETUP', href: '#/media-tagging', key: 'mediaTaggingSetup' },
+            { label: 'TAGGING_QUEUE', href: '#/media-tagging/queue', key: 'mediaTaggingQueue' },
         ],
     },
     { label: 'Settings', href: '#/settings', key: 'settings', icon: 'settings' },
@@ -37,9 +37,107 @@ function getActiveSidebarKey(routeName) {
     return routeName;
 }
 
+function getConnectionTimeValue(connection) {
+    const value = connection?.lastOpenedAt ?? connection?.lastModifiedAt ?? 0;
+    const time = new Date(value).getTime();
+    return Number.isFinite(time) ? time : 0;
+}
+
+function getQuickPickConnections(state) {
+    const byId = new Map();
+
+    [state.connections.active, ...(state.connections.recent ?? [])].forEach(connection => {
+        if (!connection?.id || byId.has(connection.id)) {
+            return;
+        }
+
+        byId.set(connection.id, connection);
+    });
+
+    return [...byId.values()]
+        .sort((left, right) => getConnectionTimeValue(right) - getConnectionTimeValue(left))
+        .slice(0, 5);
+}
+
+function renderQuickPickCard(connection, activeConnectionId) {
+    const isActive = connection.id === activeConnectionId;
+    const label = connection.label || 'Untitled database';
+    const path = connection.path || '';
+
+    return `
+      <button
+        class="sidebar-db-picker-card ${isActive ? 'is-active' : ''}"
+        data-action="select-connection"
+        data-connection-id="${escapeHtml(connection.id)}"
+        type="button"
+      >
+        ${renderConnectionLogo(connection, {
+            containerClass: 'sidebar-db-picker-card__mark overflow-hidden',
+            imageClassName: 'h-full w-full object-cover',
+            iconClassName: 'text-[15px]',
+            icon: 'database',
+        })}
+        <span class="sidebar-db-picker-card__body">
+          <span class="sidebar-db-picker-card__label" title="${escapeHtml(label)}">
+            ${escapeHtml(label)}
+          </span>
+          <span class="sidebar-db-picker-card__path" title="${escapeHtml(path)}">
+            ${escapeHtml(path ? truncateMiddle(path, 34) : 'path:n/a')}
+          </span>
+          <span class="sidebar-db-picker-card__meta">
+            ${isActive ? 'ACTIVE' : escapeHtml(formatCompactDateTime(connection.lastOpenedAt))}
+            ${connection.readOnly ? ' // READ_ONLY' : ''}
+          </span>
+        </span>
+      </button>
+    `;
+}
+
+function renderConnectionQuickPicker(state) {
+    const activeConnection = state.connections.active;
+    const quickPicks = getQuickPickConnections(state);
+    const hasQuickPicks = quickPicks.length > 0;
+
+    return `
+      <details class="sidebar-db-picker">
+        <summary class="sidebar-footer-card" title="Switch active database">
+          ${renderConnectionLogo(activeConnection, {
+              containerClass: 'sidebar-footer-mark overflow-hidden bg-primary-container text-on-primary',
+              imageClassName: 'h-full w-full object-cover',
+              iconClassName: 'text-[15px]',
+              icon: 'memory',
+          })}
+          <span class="min-w-0 flex-1">
+            <span class="block truncate text-[10px] font-bold text-on-surface">
+              ${escapeHtml(activeConnection?.label ?? 'NO_ACTIVE_DATABASE')}
+            </span>
+            <span class="block text-[8px] text-on-surface-variant/60">
+              ${activeConnection?.readOnly ? 'READ_ONLY' : activeConnection ? 'READ_WRITE' : 'SELECT_DATABASE'}
+            </span>
+          </span>
+          <span class="material-symbols-outlined sidebar-db-picker__chevron" aria-hidden="true">expand_less</span>
+        </summary>
+        <div class="sidebar-db-picker__panel">
+          <div class="sidebar-db-picker__header">
+            <span>Quick Picks</span>
+            <span>${escapeHtml(String(quickPicks.length))}/5</span>
+          </div>
+          ${
+              hasQuickPicks
+                  ? `<div class="sidebar-db-picker__list">
+                      ${quickPicks
+                          .map(connection => renderQuickPickCard(connection, activeConnection?.id))
+                          .join('')}
+                    </div>`
+                  : `<div class="sidebar-db-picker__empty">No recent databases</div>`
+          }
+        </div>
+      </details>
+    `;
+}
+
 export function renderSidebar(state) {
     const activeKey = getActiveSidebarKey(state.route.name);
-    const activeConnection = state.connections.active;
     const expandedKey = activeKey === 'mediaTagging' ? 'mediaTagging' : null;
 
     return `
@@ -86,22 +184,7 @@ export function renderSidebar(state) {
           .join('')}
     </nav>
     <div class="sidebar-footer">
-      <div class="sidebar-footer-card">
-        ${renderConnectionLogo(activeConnection, {
-            containerClass: 'sidebar-footer-mark overflow-hidden bg-primary-container text-on-primary',
-            imageClassName: 'h-full w-full object-cover',
-            iconClassName: 'text-[15px]',
-            icon: 'memory',
-        })}
-        <div class="min-w-0">
-          <p class="truncate text-[10px] font-bold text-on-surface">
-            ${escapeHtml(activeConnection?.label ?? 'NO_ACTIVE_DATABASE')}
-          </p>
-          <p class="text-[8px] text-on-surface-variant/60">
-            ${activeConnection?.readOnly ? 'READ_ONLY' : 'READ_WRITE'}
-          </p>
-        </div>
-      </div>
+      ${renderConnectionQuickPicker(state)}
     </div>
   `;
 }

package/frontend/js/components/tableDesignerEditor.js

@@ -81,6 +81,54 @@ export function renderTableDesignerReferenceColumnOptions(
   ].join("");
 }
 
+function normalizeConstraintColumnName(name) {
+  return String(name ?? "").trim().toLowerCase();
+}
+
+function constraintIncludesColumn(constraint, columnName) {
+  const normalizedColumn = normalizeConstraintColumnName(columnName);
+
+  if (!normalizedColumn) {
+    return false;
+  }
+
+  return (constraint.columns ?? []).some(
+    (constraintColumn) => normalizeConstraintColumnName(constraintColumn.name) === normalizedColumn
+  );
+}
+
+function countColumnCheckConstraints(column, draft) {
+  if (draft.mode !== "edit") {
+    return 0;
+  }
+
+  return (draft.checkConstraints ?? []).filter((constraint) =>
+    constraintIncludesColumn(constraint, column.name)
+  ).length;
+}
+
+function renderColumnCheckAction(column, draft) {
+  const checkCount = countColumnCheckConstraints(column, draft);
+  const columnName = column.name || "Unnamed column";
+
+  return `
+    <button
+      aria-label="Checks for ${escapeHtml(columnName)}"
+      class="standard-button table-designer-row-check-button"
+      data-action="open-modal"
+      data-column-id="${escapeHtml(column.id)}"
+      data-column-name="${escapeHtml(column.name)}"
+      data-modal="table-designer-constraints"
+      title="Checks for ${escapeHtml(columnName)}"
+      type="button"
+    >
+      <span class="material-symbols-outlined text-base">fact_check</span>
+      <span>Checks</span>
+      ${checkCount ? `<span class="status-badge status-badge--muted">${escapeHtml(String(checkCount))}</span>` : ""}
+    </button>
+  `;
+}
+
 function renderColumnRow(column, draft, catalogTables) {
   const typeOptions = draft.supportedTypes
     .map((type) =>
@@ -162,10 +210,13 @@ function renderColumnRow(column, draft, catalogTables) {
     '" data-field="referencesColumn">',
     referenceColumnOptions,
     "</select>",
+    '<div class="table-designer-row-actions">',
+    renderColumnCheckAction(column, draft),
     '<button class="delete-button" data-action="remove-table-designer-column" data-column-id="',
     columnId,
     '" type="button"><span class="material-symbols-outlined text-base">delete</span><span>Remove</span></button>',
     "</div>",
+    "</div>",
   ].join("");
 }
 
@@ -183,7 +234,7 @@ function renderColumnGrid(draft, catalogTables) {
         <div>Default</div>
         <div>FK Table</div>
         <div>FK Column</div>
-        <div></div>
+        <div>Actions</div>
       </div>
       ${visibleColumns.map((column) => renderColumnRow(column, draft, catalogTables)).join("")}
     </div>
@@ -225,6 +276,10 @@ export function renderTableDesignerFeedback(draft, saveError) {
     title: message,
   }));
   const warningItems = draft?.warnings ?? [];
+  const schemaNotes = warningItems.filter(
+    (item) => item.tone === "muted" && item.code !== "COMPLEX_UNIQUE_CONSTRAINTS_PRESENT"
+  );
+  const alertWarnings = warningItems.filter((item) => item.tone !== "muted");
 
   return [
     saveError
@@ -233,10 +288,11 @@ export function renderTableDesignerFeedback(draft, saveError) {
                 <div class="table-designer-main__error-code">${escapeHtml(saveError.code)}</div>
                 <div class="table-designer-main__error-text">${escapeHtml(saveError.message)}</div>
               </div>
-            `
+    `
       : "",
     renderWarningList(validationItems, "table-designer-banner is-validation", "Validation", "alert"),
-    renderWarningList(warningItems, "table-designer-banner is-warning", "Warnings", "alert"),
+    renderWarningList(alertWarnings, "table-designer-banner is-warning", "Warnings", "alert"),
+    renderWarningList(schemaNotes, "table-designer-banner is-note", "Schema Notes", "muted"),
   ].join("");
 }
 
@@ -305,7 +361,7 @@ export function renderTableDesignerEditor(state) {
           <div class="table-designer-main__subtitle">
             ${escapeHtml(String(visibleColumns.length))} visible column${
               visibleColumns.length === 1 ? "" : "s"
-            } // SQLite-safe operations only
+            } // Table Designer v2 // SQLite-safe operations only
           </div>
         </div>
         <div class="table-designer-main__actions">
@@ -338,13 +394,15 @@ export function renderTableDesignerEditor(state) {
           <div>
             <div class="table-designer-main__section-title">Columns</div>
           </div>
-          <button
-            class="standard-button"
-            data-action="add-table-designer-column"
-            type="button"
-          >
-            + Add Column
-          </button>
+          <div class="table-designer-main__section-actions">
+            <button
+              class="standard-button"
+              data-action="add-table-designer-column"
+              type="button"
+            >
+              + Add Column
+            </button>
+          </div>
         </div>
         ${renderColumnGrid(draft, catalogTables)}
       </section>