sqlite-hub 1.1.2 → 1.4.0

package/frontend/js/components/modal.js

@@ -126,7 +126,7 @@ function renderError(error) {
 
     return `
     <div class="border border-error/20 bg-error-container/20 px-4 py-3 text-sm text-error">
-      <div class="font-headline text-xs font-bold uppercase tracking-[0.18em]">${escapeHtml(
+      <div class="font-body text-xs font-bold uppercase tracking-[0.18em]">${escapeHtml(
           error.code || 'Request failed',
       )}</div>
       <div class="mt-1 text-on-surface">${escapeHtml(error.message)}</div>
@@ -449,15 +449,25 @@ function renderDeleteBackupForm(modal) {
     ].join('');
 }
 
-function renderEditBackupNotesForm(modal) {
+function renderEditBackupForm(modal) {
     return `
-    <form class="space-y-5" data-form="edit-backup-notes">
+    <form class="space-y-5" data-form="edit-backup">
       <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
-        <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Backup</div>
-        <div class="mt-2 font-headline text-sm font-black uppercase text-on-surface">
-          ${escapeHtml(modal.backupName ?? 'Backup')}
+        <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Primary Key</div>
+        <div class="mt-2 font-mono text-[10px] uppercase tracking-[0.12em] text-on-surface/80">
+          ${escapeHtml(modal.backupId ?? 'n/a')}
         </div>
       </div>
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Name</span>
+        <input
+          class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest px-3 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+          name="name"
+          placeholder="Backup name"
+          required
+          value="${escapeHtml(modal.backupName ?? 'Backup')}"
+        />
+      </label>
       <label class="block space-y-2">
         <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">Notes</span>
         <textarea
@@ -471,7 +481,7 @@ function renderEditBackupNotesForm(modal) {
         <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
         <button class="signature-button" type="submit" ${modal.submitting ? 'disabled' : ''}>
           <span class="material-symbols-outlined text-sm">save</span>
-          ${modal.submitting ? 'Saving...' : 'Save notes'}
+          ${modal.submitting ? 'Saving...' : 'Save backup'}
         </button>
       </div>
     </form>
@@ -490,7 +500,7 @@ function renderBackupSafetyForm(modal) {
       </p>
       <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
         <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">Safety Backup</div>
-        <div class="mt-2 font-headline text-sm font-black uppercase text-on-surface">${escapeHtml(
+        <div class="mt-2 font-body text-sm font-black uppercase text-on-surface">${escapeHtml(
             modal.backupNameBeforeOperation ?? modal.backupName ?? 'Before operation',
         )}</div>
       </div>
@@ -512,6 +522,180 @@ function renderBackupSafetyForm(modal) {
   `;
 }
 
+function renderTypeGenerationSelect({ label, field, value, options = [] }) {
+    return renderSelectField({
+        label,
+        name: field,
+        value,
+        bind: 'type-generation-field',
+        options,
+    }).replace('<select ', `<select data-type-generation-field="${escapeHtml(field)}" `);
+}
+
+function renderTypeGenerationCheckbox({ label, field, checked }) {
+    return `
+      <label class="standard-checkbox">
+        <input
+          ${checked ? 'checked' : ''}
+          data-bind="type-generation-field"
+          data-type-generation-field="${escapeHtml(field)}"
+          type="checkbox"
+        />
+        <span>${escapeHtml(label)}</span>
+      </label>
+    `;
+}
+
+function renderTypeGenerationCodePreview(code) {
+    const text = String(code ?? '');
+    const normalized = text.includes('\n') || text.includes('\\n')
+        ? text.replace(/\\n/g, '\n')
+        : text
+              .replace(/\{\s*/g, '{\n  ')
+              .replace(/;\s*/g, ';\n  ')
+              .replace(/\s*\}\s*$/g, '\n}');
+
+    return normalized
+        .replace(/\r\n/g, '\n')
+        .split('\n')
+        .map(line => `<span class="block whitespace-pre">${line ? escapeHtml(line) : '&nbsp;'}</span>`)
+        .join('');
+}
+
+export function renderGenerateTypesForm(modal) {
+    const options = modal.options ?? {};
+    const result = modal.result ?? {};
+    const target = modal.target ?? 'typescript';
+    const isAllTables = modal.scope === 'all';
+    const fileCount = result.files?.length ?? modal.tableNames?.length ?? 0;
+    const subjectLabel = isAllTables
+        ? `all ${fileCount || ''} tables`.replace(/\s+/g, ' ').trim()
+        : `the schema of "${modal.tableName ?? ''}"`;
+    const downloadLabel = result.files?.length ? 'Download Files' : 'Download';
+
+    return `
+    <div class="space-y-5">
+      <p class="text-sm leading-6 text-on-surface-variant/70">
+        Generate application types from ${escapeHtml(subjectLabel)}.
+      </p>
+      <div class="grid gap-5 xl:grid-cols-[24rem_minmax(0,1fr)]">
+        <div class="min-w-0 space-y-4">
+          <div class="space-y-4">
+            ${renderTypeGenerationSelect({
+                label: 'Target',
+                field: 'target',
+                value: target,
+                options: [
+                    { value: 'typescript', label: 'TypeScript' },
+                    { value: 'rust', label: 'Rust' },
+                    { value: 'kotlin', label: 'Kotlin' },
+                    { value: 'swift', label: 'Swift' },
+                ],
+            })}
+            ${renderTypeGenerationSelect({
+                label: 'Property naming',
+                field: 'propertyNaming',
+                value: options.propertyNaming ?? 'camel',
+                options: [
+                    { value: 'preserve', label: 'Preserve' },
+                    { value: 'camel', label: 'camelCase' },
+                    { value: 'pascal', label: 'PascalCase' },
+                    { value: 'snake', label: 'snake_case' },
+                ],
+            })}
+            ${renderTypeGenerationSelect({
+                label: 'Nullable handling',
+                field: 'nullableMode',
+                value: options.nullableMode ?? 'native',
+                options: [
+                    { value: 'native', label: 'Native' },
+                    { value: 'optional', label: 'Optional (TypeScript)' },
+                ],
+            })}
+            ${
+                target === 'typescript'
+                    ? renderTypeGenerationSelect({
+                          label: 'JSON type',
+                          field: 'jsonType',
+                          value: options.jsonType ?? 'unknown',
+                          options: [
+                              { value: 'unknown', label: 'unknown' },
+                              { value: 'record', label: 'Record<string, unknown>' },
+                              { value: 'json-value', label: 'JsonValue' },
+                          ],
+                      })
+                    : ''
+            }
+          </div>
+          <div class="grid gap-2">
+            ${renderTypeGenerationCheckbox({
+                label: 'Export declaration',
+                field: 'exportDeclaration',
+                checked: options.exportDeclaration !== false,
+            })}
+            ${renderTypeGenerationCheckbox({
+                label: 'Include default values as comments',
+                field: 'includeDefaultsAsComments',
+                checked: Boolean(options.includeDefaultsAsComments),
+            })}
+            ${renderTypeGenerationCheckbox({
+                label: 'Include generated columns',
+                field: 'includeGeneratedColumns',
+                checked: options.includeGeneratedColumns !== false,
+            })}
+            ${renderTypeGenerationCheckbox({
+                label: 'Include hidden columns',
+                field: 'includeHiddenColumns',
+                checked: Boolean(options.includeHiddenColumns),
+            })}
+          </div>
+        </div>
+        <div class="min-w-0 space-y-3">
+          <div class="flex items-center justify-between gap-3">
+            <div class="font-mono text-[10px] uppercase tracking-[0.18em] text-primary-container">Code Preview</div>
+            <div class="truncate font-mono text-[10px] uppercase tracking-[0.16em] text-on-surface-variant/45">
+              ${escapeHtml(result.fileName ?? '')}
+            </div>
+          </div>
+          ${
+              result.files?.length
+                  ? `<div class="flex flex-wrap gap-2">${result.files
+                        .map(
+                            file =>
+                                `<span class="border border-outline-variant/20 bg-surface-highest px-2 py-1 font-mono text-[10px] uppercase tracking-[0.14em] text-on-surface-variant/70">${escapeHtml(
+                                    file.fileName ?? file.tableName ?? 'types',
+                                )}</span>`,
+                        )
+                        .join('')}</div>`
+                  : ''
+          }
+          <pre class="type-generation-code-preview custom-scrollbar border border-outline-variant/10 bg-surface-container-lowest px-4 py-4 font-mono text-xs leading-6 text-on-surface"><code>${renderTypeGenerationCodePreview(
+              modal.loading ? 'Generating...' : result.code ?? '',
+          )}</code></pre>
+          ${renderError(modal.error)}
+        </div>
+      </div>
+      <div class="flex items-center justify-between gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Cancel</button>
+        <div class="flex items-center gap-2">
+          <button class="standard-button" data-action="copy-generated-types" type="button" ${
+              result.code ? '' : 'disabled'
+          }>
+            <span class="material-symbols-outlined text-sm">content_copy</span>
+            Copy Code
+          </button>
+          <button class="signature-button" data-action="download-generated-types" type="button" ${
+              result.code ? '' : 'disabled'
+          }>
+            <span class="material-symbols-outlined text-sm">download</span>
+            ${escapeHtml(downloadLabel)}
+          </button>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 function renderDeleteRowConfirmForm(modal) {
     const rowPreview = modal.rowPreview ?? [];
     const rowLabelMarkup = modal.rowLabel
@@ -1172,7 +1356,7 @@ function renderTextExportModal(modal, action) {
                       <span class="material-symbols-outlined text-xl">${escapeHtml(option.icon)}</span>
                     </span>
                     <span class="min-w-0">
-                      <span class="block truncate font-headline text-lg font-black uppercase tracking-normal text-primary-container">
+                      <span class="block truncate font-body text-lg font-black uppercase tracking-normal text-primary-container">
                         ${escapeHtml(option.label)}
                       </span>
                       <span class="mt-1 block font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/55">
@@ -1806,16 +1990,21 @@ export function renderModal(state) {
             title: 'Delete Backup',
             body: renderDeleteBackupForm(modal),
         },
-        'edit-backup-notes': {
-            eyebrow: 'Backups // Notes',
-            title: 'Edit Backup Notes',
-            body: renderEditBackupNotesForm(modal),
+        'edit-backup': {
+            eyebrow: 'Backups // Edit',
+            title: 'Edit Backup',
+            body: renderEditBackupForm(modal),
         },
         'backup-safety': {
             eyebrow: 'Backups // Safety check',
             title: 'Create a safety backup?',
             body: renderBackupSafetyForm(modal),
         },
+        'generate-types': {
+            eyebrow: 'Structure // Type generation',
+            title: 'Generate Types',
+            body: renderGenerateTypesForm(modal),
+        },
         'edit-connection': {
             eyebrow: 'Registry // Update saved SQLite target',
             title: 'Edit Connection',
@@ -1906,23 +2095,27 @@ export function renderModal(state) {
 
     return `
     <div class="fixed inset-0 z-50 flex items-center justify-center bg-background/85 px-4 backdrop-blur-sm">
-      <div class="w-full ${
+      <div class="app-modal-shell w-full ${
           modal.kind === 'chart-editor' ||
           modal.kind === 'document-insert-table' ||
           modal.kind === 'document-insert-note' ||
           modal.kind === 'row-update-preview' ||
           modal.kind === 'table-designer-constraints'
               ? 'max-w-3xl'
-              : modal.kind === 'query-export' || modal.kind === 'data-export' || modal.kind === 'backup-safety'
+              : modal.kind === 'generate-types'
+                ? 'max-w-6xl'
+              : modal.kind === 'query-export' ||
+                  modal.kind === 'data-export' ||
+                  modal.kind === 'backup-safety'
                 ? 'max-w-4xl'
                 : 'max-w-xl'
       } border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
-        <div class="flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
+        <div class="shrink-0 flex items-start justify-between gap-4 border-b border-outline-variant/10 bg-surface-container-low px-6 py-5">
           <div>
             <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">
               ${escapeHtml(config.eyebrow)}
             </div>
-            <h2 class="mt-2 font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-2 font-body text-3xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(config.title)}
             </h2>
           </div>
@@ -1934,7 +2127,7 @@ export function renderModal(state) {
             <span class="material-symbols-outlined">close</span>
           </button>
         </div>
-        <div class="space-y-5 px-6 py-6">${config.body}</div>
+        <div class="app-modal-body custom-scrollbar space-y-5 px-6 py-6">${config.body}</div>
       </div>
     </div>
   `;

package/frontend/js/components/pageHeader.js

@@ -16,7 +16,7 @@ export function renderPageHeader({ eyebrow = '', title, subtitle = '', actions =
             `
                 : ''
         }
-        <h1 class="text-5xl font-headline font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(title)}</h1>
+        <h1 class="text-5xl font-body font-bold text-[#FCE300] tracking-tighter uppercase">${escapeHtml(title)}</h1>
         ${
             subtitle
                 ? `<p class="text-xs font-mono text-on-surface/40 mt-1 uppercase tracking-widest">${escapeHtml(

package/frontend/js/components/queryHistoryDetail.js

@@ -100,7 +100,7 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Query Detail
             </span>
             <button
@@ -124,7 +124,7 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Query Detail
             </span>
             <button
@@ -178,7 +178,7 @@ export function renderQueryHistoryDetail({
     '<div class="border-b border-outline-variant/10 px-5 py-4">',
     '<div class="flex items-center justify-between gap-3"><div>',
     '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">Query Detail</div>',
-    '<h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">',
+    '<h2 class="mt-1 font-body text-lg font-black uppercase tracking-tight text-on-surface">',
     escapeHtml(item.displayTitle),
     "</h2></div>",
     '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',

package/frontend/js/components/queryHistoryHeader.js

@@ -11,7 +11,7 @@ export function renderQueryHistoryHeader({
       <div class="flex items-center justify-between gap-3">
         <div class="flex items-center gap-2">
           <span class="material-symbols-outlined text-[18px] text-primary-container">${escapeHtml(icon)}</span>
-          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+          <span class="font-body text-xs font-black uppercase tracking-[0.18em] text-primary-container">
             ${escapeHtml(title)}
           </span>
         </div>

package/frontend/js/components/queryHistoryPanel.js

@@ -114,7 +114,7 @@ export function renderQueryHistoryPanel({
                 ? `
               <div class="flex h-full min-h-[240px] flex-col items-center justify-center px-6 text-center">
                 <span class="material-symbols-outlined text-4xl text-on-surface-variant/25">manage_search</span>
-                <p class="mt-4 font-headline text-lg font-bold uppercase tracking-tight text-on-surface">
+                <p class="mt-4 font-body text-lg font-bold uppercase tracking-tight text-on-surface">
                   No Matching Queries
                 </p>
                 <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/65">

package/frontend/js/components/queryResults.js

@@ -147,7 +147,7 @@ export function renderQueryResultsPane(
               ? renderDataGrid({
                   columns,
                   rows: result.rows ?? [],
-                  tableClass: "min-w-full border-collapse text-left font-mono text-xs",
+                  tableClass: "data-table min-w-full border-collapse text-left font-mono text-xs",
                   theadClass: "sticky top-0 z-10 bg-surface-container-highest text-on-surface",
                   tbodyClass: "divide-y divide-outline-variant/5",
                   getRowClass: (_, index) =>

package/frontend/js/components/rowEditorPanel.js

@@ -1,4 +1,6 @@
 import { escapeHtml } from "../utils/format.js";
+import { renderDropdownButton } from "./dropdownButton.js";
+import { detectEmailValue } from "../utils/emailPreview.js";
 import {
   compactPathForDisplay,
   detectFilePathValue,
@@ -49,6 +51,19 @@ function withUrlBadge(badges = [], url) {
   return hasUrlBadge ? badges : [...badges, { label: "URL", tone: "url" }];
 }
 
+function withEmailBadge(badges = [], email) {
+  if (!email) {
+    return badges;
+  }
+
+  const hasEmailBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "EMAIL";
+  });
+
+  return hasEmailBadge ? badges : [...badges, { label: "EMAIL", tone: "email" }];
+}
+
 function getAllowedValues(field) {
   const seen = new Set();
 
@@ -161,6 +176,14 @@ function getFieldTimestampPreview(field = {}, tableMeta = {}) {
   });
 }
 
+function isNumberInputCompatibleValue(value) {
+  if (value === null || value === undefined || value === "") {
+    return true;
+  }
+
+  return /^[-+]?(?:\d+|\d*\.\d+)(?:e[-+]?\d+)?$/i.test(String(value).trim());
+}
+
 function renderTimestampPreview(field = {}, tableMeta = {}) {
   const preview = getFieldTimestampPreview(field, tableMeta);
 
@@ -277,7 +300,11 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
   const filePathPreview = getFieldFilePathPreview({ ...field, rawValue }, tableMeta);
   const url = getUrlValue(value);
-  const badges = withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview);
+  const email = detectEmailValue(rawValue);
+  const badges = withEmailBadge(
+    withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview),
+    email
+  );
   const displayLabel = typeof label === "object" ? label.label : label;
   const jsonPreview = formatJsonPreview(value);
   const valueState = getRowEditorValueState(rawValue);
@@ -290,7 +317,9 @@ function renderReadonlyField(field = {}, tableMeta = {}) {
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${
       url ? "data-row-editor-url-field" : ""
-    }>
+    }
+      ${email ? "data-row-editor-email-field" : ""}
+    >
       <div class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(displayLabel)}</span>
         ${renderFieldBadgesWithCharacterCount(badges, rawValue)}
@@ -334,12 +363,15 @@ function renderEditableField(field, tableMeta = {}) {
   const columnName = getFieldColumnName(field);
   const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
   const url = getUrlValue(field.value);
+  const email = detectEmailValue(getFieldRawValue(field));
   const allowedValues = getAllowedValues(field);
   const filePathPreview = getFieldFilePathPreview(field, tableMeta);
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
-  const badges = withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview);
+  const badges = withEmailBadge(withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview), email);
   const jsonPreview = formatJsonPreview(field.value);
-  const inputType = field.inputType === "number" ? "number" : "text";
+  const canUseNumberInput =
+    field.inputType === "number" && isNumberInputCompatibleValue(getFieldRawValue(field));
+  const inputType = canUseNumberInput ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
   const valueState = getRowEditorValueState(getFieldRawValue(field));
 
@@ -351,6 +383,7 @@ function renderEditableField(field, tableMeta = {}) {
       data-row-editor-initial-state="${escapeHtml(valueState)}"
       data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
       ${url ? "data-row-editor-url-field" : ""}
+      ${email ? "data-row-editor-email-field" : ""}
     >
       <span class="flex flex-wrap items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-on-surface-variant/55">
         <span>${escapeHtml(field.label ?? field.name)}</span>
@@ -427,6 +460,10 @@ function getFieldBadgeClassName(tone) {
     return "border-primary-container/35 bg-primary-container/15 text-primary-container";
   }
 
+  if (tone === "email") {
+    return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
+  }
+
   if (tone === "check") {
     return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
   }
@@ -488,16 +525,28 @@ export function renderRowEditorPanel({
         ].join("")
       : "",
     jsonActionsEnabled
-      ? [
-          '<button class="standard-button" data-action="copy-row-editor-json" type="button">',
-          '<span class="material-symbols-outlined text-sm">content_copy</span>',
-          "Copy as JSON",
-          "</button>",
-          '<button class="standard-button" data-action="export-row-editor-json" type="button">',
-          '<span class="material-symbols-outlined text-sm">download</span>',
-          "Export as JSON",
-          "</button>",
-        ].join("")
+      ? renderDropdownButton({
+          icon: "download",
+          label: "Export",
+          title: "Export row",
+          items: [
+            {
+              action: "copy-row-editor-json",
+              icon: "content_copy",
+              label: "Copy to clipboard",
+            },
+            {
+              action: "export-row-editor-json",
+              icon: "download",
+              label: "JSON file",
+            },
+            {
+              action: "insert-row-editor-json-into-document",
+              icon: "description",
+              label: "Markdown document",
+            },
+          ],
+        })
       : "",
     canSubmit
       ? [
@@ -538,7 +587,7 @@ export function renderRowEditorPanel({
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
             </div>
-            <h2 class="mt-2 font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-2 font-body text-3xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(title)}
             </h2>
             ${
@@ -608,7 +657,7 @@ export function renderRowEditorPanel({
                     saveError
                       ? `
                           <div class="border border-error/20 bg-error-container/10 px-4 py-4 text-sm text-on-surface">
-                            <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+                            <div class="font-body text-xs font-bold uppercase tracking-[0.18em] text-error">
                               ${escapeHtml(saveError.code)}
                             </div>
                             <div class="mt-2">${escapeHtml(saveError.message)}</div>

package/frontend/js/components/topNav.js

@@ -1,11 +1,8 @@
 export function renderTopNav() {
-  return `
+    return `
     <div class="top-nav-shell">
       <a class="top-nav-brand" href="#/">SQLite Hub</a>
       <div class="top-nav-actions">
-        <button class="top-nav-icon" data-action="refresh-view" type="button" aria-label="Refresh">
-          <span class="material-symbols-outlined">refresh</span>
-        </button>
         <button
           class="top-nav-icon"
           data-action="open-modal"

package/frontend/js/components/workspaceOpenDropdown.js

@@ -0,0 +1,52 @@
+import { renderDropdownButton } from "./dropdownButton.js";
+
+function buildOpenItem({ disabled, icon, label, target, tableName }) {
+  return {
+    action: "navigate",
+    dataAttributes: {
+      to: target,
+    },
+    disabled,
+    icon,
+    label,
+  };
+}
+
+export function renderWorkspaceOpenDropdown({
+  align = "right",
+  destinations = [],
+  disabled = false,
+  tableName = "",
+} = {}) {
+  const safeTableName = String(tableName ?? "").trim();
+  const items = destinations.map((destination) => {
+    if (destination.key === "sql-editor") {
+      return {
+        action: "open-table-in-sql-editor",
+        dataAttributes: {
+          tableName: safeTableName,
+        },
+        disabled: disabled || !safeTableName,
+        icon: "terminal",
+        label: "SQL Editor",
+      };
+    }
+
+    return buildOpenItem({
+      disabled: disabled || !safeTableName,
+      icon: destination.icon,
+      label: destination.label,
+      target: destination.target(safeTableName),
+      tableName: safeTableName,
+    });
+  });
+
+  return renderDropdownButton({
+    align,
+    disabled: disabled || !safeTableName,
+    icon: "open_in_new",
+    items,
+    label: "Open",
+    title: safeTableName ? `Open ${safeTableName}` : "Open table",
+  });
+}