sqlite-hub 0.12.0 → 0.17.0

package/frontend/js/components/rowEditorPanel.js

@@ -1,4 +1,17 @@
 import { escapeHtml } from "../utils/format.js";
+import {
+  compactPathForDisplay,
+  detectFilePathValue,
+  getPathTypeLabel,
+} from "../utils/filePathPreview.js";
+import {
+  getTimestampPreviewForField,
+  isProtectedKeyColumn,
+} from "../utils/timestampPreview.js";
+import {
+  formatTextCellCharacterCount,
+  getTextCellCharacterCount,
+} from "../utils/textCellStats.js";
 
 const URL_PATTERN = /^https?:\/\/[^\s<>"']+$/i;
 
@@ -87,6 +100,19 @@ function withCheckBadge(badges = [], allowedValues = []) {
   return hasCheckBadge ? badges : [...badges, { label: "CHECK", tone: "check" }];
 }
 
+function withFilePathBadge(badges = [], filePathPreview) {
+  if (!filePathPreview) {
+    return badges;
+  }
+
+  const hasPathBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "PATH";
+  });
+
+  return hasPathBadge ? badges : [...badges, { label: "PATH", tone: "filepath" }];
+}
+
 function renderOpenUrlButton(url) {
   if (!url) {
     return "";
@@ -131,6 +157,9 @@ function renderAllowedValuesSelect(field, allowedValues) {
   return `
     <select
       class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+      data-row-editor-initial-value="${escapeHtml(currentValue)}"
+      data-row-editor-text-source
+      data-row-editor-timestamp-source
       name="field:${escapeHtml(field.name)}"
     >
       ${options}
@@ -138,6 +167,117 @@ function renderAllowedValuesSelect(field, allowedValues) {
   `;
 }
 
+function getFieldColumnName(field = {}) {
+  return String(field.sourceColumn ?? field.name ?? "");
+}
+
+function getFieldRawValue(field = {}) {
+  return field.rawValue === undefined ? field.value : field.rawValue;
+}
+
+function getFieldTimestampPreview(field = {}, tableMeta = {}) {
+  return getTimestampPreviewForField({
+    columnName: getFieldColumnName(field),
+    value: getFieldRawValue(field),
+    tableMeta,
+  });
+}
+
+function renderTimestampPreview(field = {}, tableMeta = {}) {
+  const preview = getFieldTimestampPreview(field, tableMeta);
+
+  if (preview.kind === "protected-key") {
+    return `
+      <div class="text-[11px] text-on-surface-variant/55">
+        Key column - shown as raw value
+      </div>
+    `;
+  }
+
+  return `
+    <div
+      class="text-[11px] text-on-surface-variant/70"
+      data-row-editor-timestamp-preview
+      ${preview.kind === "timestamp" ? "" : "hidden"}
+    >
+      ${
+        preview.kind === "timestamp"
+          ? `Interpretiert als Datum: ${escapeHtml(preview.formatted)}`
+          : ""
+      }
+    </div>
+  `;
+}
+
+function renderTextCharacterCountBadge(value) {
+  const count = getTextCellCharacterCount(value);
+
+  return `
+    <span
+      class="border px-2 py-1 text-[9px] ${getFieldBadgeClassName("char-count")}"
+      data-row-editor-char-count
+      ${count === null ? "hidden" : ""}
+    >
+      ${count === null ? "" : escapeHtml(formatTextCellCharacterCount(count))}
+    </span>
+  `;
+}
+
+function renderFieldBadgesWithCharacterCount(badges = [], value) {
+  const [typeBadge, ...remainingBadges] = badges;
+
+  return [
+    typeBadge ? renderFieldBadge(typeBadge) : "",
+    renderTextCharacterCountBadge(value),
+    ...remainingBadges.map((badge) => renderFieldBadge(badge)),
+  ].join("");
+}
+
+function getFieldFilePathPreview(field = {}, tableMeta = {}) {
+  return detectFilePathValue(getFieldRawValue(field), getFieldColumnName(field), tableMeta);
+}
+
+function renderFilePathPreview(field = {}, tableMeta = {}) {
+  if (isProtectedKeyColumn(getFieldColumnName(field), tableMeta)) {
+    return "";
+  }
+
+  const preview = getFieldFilePathPreview(field, tableMeta);
+
+  return `
+    <div
+      class="border border-outline-variant/10 bg-surface-container px-4 py-4 text-xs text-on-surface"
+      data-row-editor-filepath-preview
+      ${preview ? "" : "hidden"}
+    >
+      <div class="flex items-center gap-2 text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/75">
+        <span class="material-symbols-outlined text-sm">folder</span>
+        Interpretiert als Filepath
+      </div>
+      <div class="mt-3 grid gap-2 font-mono text-[11px] leading-5">
+        <div>
+          <span class="text-on-surface-variant/55">Filename:</span>
+          <span data-row-editor-filepath-filename>${escapeHtml(preview?.fileName ?? "N/A")}</span>
+        </div>
+        <div data-row-editor-filepath-directory-row ${preview?.directory ? "" : "hidden"}>
+          <span class="text-on-surface-variant/55">Directory:</span>
+          <span data-row-editor-filepath-directory title="${escapeHtml(preview?.directory ?? "")}">
+            ${escapeHtml(preview?.directory ? compactPathForDisplay(preview.directory, 72) : "")}
+          </span>
+        </div>
+        <div>
+          <span class="text-on-surface-variant/55">Extension:</span>
+          <span data-row-editor-filepath-extension>${escapeHtml(preview?.extension ?? "N/A")}</span>
+        </div>
+        <div>
+          <span class="text-on-surface-variant/55">Type:</span>
+          <span data-row-editor-filepath-type>${escapeHtml(preview ? getPathTypeLabel(preview.pathType) : "N/A")}</span>
+        </div>
+      </div>
+    </div>
+  `;
+}
+
 function renderJsonViewer(prettyJson, title = "JSON Viewer") {
   return `
     <div class="border border-outline-variant/10 bg-surface-container px-4 py-4">
@@ -151,44 +291,66 @@ function renderJsonViewer(prettyJson, title = "JSON Viewer") {
   `;
 }
 
-function renderReadonlyField(label, value) {
+function renderReadonlyField(field = {}, tableMeta = {}) {
+  const label = field.label ?? field.name;
+  const value = field.value;
+  const rawValue = getFieldRawValue(field);
+  const columnName = getFieldColumnName(field);
+  const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
+  const filePathPreview = getFieldFilePathPreview({ ...field, rawValue }, tableMeta);
   const url = getUrlValue(value);
-  const badges = withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url);
+  const badges = withFilePathBadge(withUrlBadge(Array.isArray(label?.badges) ? label.badges : [], url), filePathPreview);
   const displayLabel = typeof label === "object" ? label.label : label;
   const jsonPreview = getJsonPreview(value);
 
   return `
-    <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3" ${
+    <div
+      class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3"
+      data-row-editor-column-name="${escapeHtml(columnName)}"
+      data-row-editor-field
+      data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
+      ${
       url ? "data-row-editor-url-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>
-        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
+        ${renderFieldBadgesWithCharacterCount(badges, rawValue)}
       </div>
       ${
         jsonPreview
           ? `<div class="mt-2">${renderJsonViewer(jsonPreview)}</div>`
           : `<div class="mt-2 text-sm text-on-surface">${escapeHtml(value)}</div>`
       }
+      ${renderTimestampPreview({ ...field, rawValue }, tableMeta)}
+      ${renderFilePathPreview({ ...field, rawValue }, tableMeta)}
       ${renderOpenUrlButton(url)}
     </div>
   `;
 }
 
-function renderEditableField(field) {
+function renderEditableField(field, tableMeta = {}) {
+  const columnName = getFieldColumnName(field);
+  const protectedKeyColumn = isProtectedKeyColumn(columnName, tableMeta);
   const url = getUrlValue(field.value);
   const allowedValues = getAllowedValues(field);
+  const filePathPreview = getFieldFilePathPreview(field, tableMeta);
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
-  const badges = withUrlBadge(baseBadges, url);
+  const badges = withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview);
   const jsonPreview = getJsonPreview(field.value);
   const inputType = field.inputType === "number" ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
 
   return `
-    <div class="block space-y-2" ${url ? "data-row-editor-url-field" : ""}>
+    <div
+      class="block space-y-2"
+      data-row-editor-column-name="${escapeHtml(columnName)}"
+      data-row-editor-field
+      data-row-editor-protected-key="${protectedKeyColumn ? "true" : "false"}"
+      ${url ? "data-row-editor-url-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>
-        ${badges.map((badge) => renderFieldBadge(badge)).join("")}
+        ${renderFieldBadgesWithCharacterCount(badges, inputType === "number" ? null : field.value ?? "")}
       </span>
       ${
         jsonPreview
@@ -202,6 +364,8 @@ function renderEditableField(field) {
           ? `
               <input
                 class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
+                data-row-editor-timestamp-source
                 name="field:${escapeHtml(field.name)}"
                 step="${escapeHtml(numberStep)}"
                 type="number"
@@ -212,6 +376,9 @@ function renderEditableField(field) {
             ? `
               <input
                 class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+                data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
+                data-row-editor-text-source
+                data-row-editor-timestamp-source
                 name="field:${escapeHtml(field.name)}"
                 data-row-editor-url-input
                 spellcheck="false"
@@ -225,11 +392,16 @@ function renderEditableField(field) {
                 class="w-full border border-outline-variant/20 bg-surface-container-lowest px-4 py-3 text-sm text-on-surface outline-none transition-colors focus:border-primary-container ${
                   jsonPreview ? "min-h-[14rem] font-mono leading-6" : "min-h-[56px]"
                 }"
+                data-row-editor-initial-value="${escapeHtml(field.value ?? "")}"
+                data-row-editor-text-source
+                data-row-editor-timestamp-source
                 name="field:${escapeHtml(field.name)}"
                 spellcheck="false"
               >${escapeHtml(field.value ?? "")}</textarea>
             `
       }
+      ${renderTimestampPreview(field, tableMeta)}
+      ${renderFilePathPreview(field, tableMeta)}
     </div>
   `;
 }
@@ -251,6 +423,14 @@ function getFieldBadgeClassName(tone) {
     return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
   }
 
+  if (tone === "filepath") {
+    return "border-outline-variant/30 bg-surface-container-high text-on-surface";
+  }
+
+  if (tone === "char-count") {
+    return "border-outline-variant/25 bg-surface-container text-on-surface-variant";
+  }
+
   return "border-outline-variant/20 bg-surface-container text-on-surface-variant";
 }
 
@@ -274,11 +454,13 @@ export function renderRowEditorPanel({
   hiddenFields = [],
   editableFields = [],
   readonlyFields = [],
+  tableMeta = {},
   disabledMessage = "",
   saveError = null,
   saving = false,
   deleting = false,
   reloadAction = "",
+  jsonActionsEnabled = false,
   submitLabel = "Save",
   deleteAction = "",
   deleteRowIndex = null,
@@ -297,6 +479,18 @@ export function renderRowEditorPanel({
           '" type="button">Reload</button>',
         ].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("")
+      : "",
     canSubmit
       ? [
           '<button class="standard-button" form="',
@@ -393,7 +587,7 @@ export function renderRowEditorPanel({
                       ? `
                           <div class="space-y-4">
                             ${editableFields
-                              .map((field) => renderEditableField(field))
+                              .map((field) => renderEditableField(field, tableMeta))
                               .join("")}
                           </div>
                         `
@@ -425,7 +619,7 @@ export function renderRowEditorPanel({
                   </div>
                   <div class="space-y-3">
                     ${readonlyFields
-                      .map((field) => renderReadonlyField(field.label ?? field.name, field.value))
+                      .map((field) => renderReadonlyField(field, tableMeta))
                       .join("")}
                   </div>
                 </div>

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 = [
@@ -8,6 +8,7 @@ const sidebarItems = [
     { label: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
     { label: 'SQL_Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
     { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
+    { label: 'Documents', href: '#/documents', key: 'documents', icon: 'description' },
     { label: 'Table_Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
     {
         label: 'MEDIA_TAGGING',
@@ -37,9 +38,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 +185,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>

package/frontend/js/router.js

@@ -21,6 +21,14 @@ export function parseHash(hash = window.location.hash) {
                     historyId: segments[1] ? decodeURIComponent(segments[1]) : null,
                 },
             };
+        case 'documents':
+            return {
+                name: 'documents',
+                path: cleanPath,
+                params: {
+                    documentId: segments[1] ? decodeURIComponent(segments[1]) : null,
+                },
+            };
         case 'editor':
             if (segments[1] === 'results') {
                 return { name: 'editorResults', path: '/editor/results', params: {} };