sqlite-hub 0.12.0 → 0.16.0

package/frontend/js/components/modal.js

@@ -1,4 +1,10 @@
-import { escapeHtml, highlightSql, truncateMiddle } from "../utils/format.js";
+import { escapeHtml, formatNumber, highlightSql, truncateMiddle } from "../utils/format.js";
+import {
+  buildCopyColumnPreviewText,
+  getCopyColumnActionLabel,
+  getCopyColumnExportMetadata,
+  isMarkdownTodoCopyColumnMode,
+} from "../utils/copyColumnExport.js";
 import { renderConnectionLogo } from "./connectionLogo.js";
 import {
   analyzeQueryChartResult,
@@ -829,7 +835,21 @@ function renderTextExportModal(modal, action) {
   const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
 
   return `
-    <div class="space-y-5">
+    <div class="space-y-5" data-export-modal>
+      <label class="block space-y-2">
+        <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Filename
+        </span>
+        <input
+          autocomplete="off"
+          class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+          name="filename"
+          spellcheck="false"
+          type="text"
+          value="${escapeHtml(modal.filename ?? "")}"
+          ${disabledAttribute}
+        />
+      </label>
       <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
         ${getExportOptions()
           .map(
@@ -885,6 +905,399 @@ function renderDataExportModal(modal) {
   return renderTextExportModal(modal, "export-data-format");
 }
 
+function getCopyColumnResult(state, modal) {
+  return modal.scope === "charts" ? state.charts.result : state.editor.result;
+}
+
+function renderCopyColumnPreview(modal, state) {
+  const result = getCopyColumnResult(state, modal);
+  const separator = Boolean(modal.lineBreaks) && !isMarkdownTodoCopyColumnMode(modal.copyMode)
+    ? "\n"
+    : String(modal.separator ?? ",");
+  const wrapper = String(modal.wrapper ?? '"');
+  const preview = buildCopyColumnPreviewText({
+    result,
+    columnName: modal.columnName,
+    copyMode: modal.copyMode,
+    separator,
+    wrapper,
+    maxRows: isMarkdownTodoCopyColumnMode(modal.copyMode) ? 10 : 4,
+  });
+
+  if (!preview) {
+    return "";
+  }
+
+  return `
+    <div class="space-y-2">
+      <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Preview
+      </div>
+      <pre class="copy-column-preview custom-scrollbar">${escapeHtml(preview)}</pre>
+    </div>
+  `;
+}
+
+function renderCopyColumnLineBreaksField({ checked = false, disabled = false } = {}) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        Format
+      </span>
+      <span class="standard-checkbox ${disabled ? "is-disabled" : ""}">
+        <input
+          ${checked ? "checked" : ""}
+          ${disabled ? "disabled" : ""}
+          data-bind="copy-column-format-field"
+          data-field="lineBreaks"
+          name="lineBreaks"
+          type="checkbox"
+        />
+        <span>Line breaks</span>
+      </span>
+    </label>
+  `;
+}
+
+function renderCopyColumnFormatField({ label, name, value = "" }) {
+  return `
+    <label class="block space-y-2">
+      <span class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+        ${escapeHtml(label)}
+      </span>
+      <input
+        class="control-input w-full border border-outline-variant/20 bg-surface-container-lowest text-sm text-on-surface outline-none transition-colors focus:border-primary-container"
+        data-bind="copy-column-format-field"
+        data-field="${escapeHtml(name)}"
+        name="${escapeHtml(name)}"
+        type="text"
+        value="${escapeHtml(value)}"
+      />
+    </label>
+  `;
+}
+
+function renderCopyColumnModal(modal, state) {
+  const result = getCopyColumnResult(state, modal);
+  const rows = result?.rows ?? [];
+  const valueCount = modal.copyMode === "first-10" ? Math.min(rows.length, 10) : rows.length;
+  const disabledAttribute = modal.submitting ? 'disabled aria-disabled="true"' : "";
+  const exportMetadata = getCopyColumnExportMetadata(modal.copyMode);
+  const isMarkdownTodo = isMarkdownTodoCopyColumnMode(modal.copyMode);
+  const lineBreaks = isMarkdownTodo || Boolean(modal.lineBreaks);
+  const formatFieldsMarkup = isMarkdownTodo
+    ? renderCopyColumnLineBreaksField({
+        checked: true,
+        disabled: true,
+      })
+    : `
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        ${renderCopyColumnFormatField({
+          label: "Separator",
+          name: "separator",
+          value: modal.separator ?? ",",
+        })}
+        ${renderCopyColumnFormatField({
+          label: "Wrapper",
+          name: "wrapper",
+          value: modal.wrapper ?? '"',
+        })}
+        ${renderCopyColumnLineBreaksField({
+          checked: lineBreaks,
+        })}
+      </div>
+    `;
+
+  return `
+    <form class="space-y-5" data-form="copy-column">
+      <input name="scope" type="hidden" value="${escapeHtml(modal.scope ?? "editor")}" />
+      <input name="columnName" type="hidden" value="${escapeHtml(modal.columnName ?? "")}" />
+      <input name="copyMode" type="hidden" value="${escapeHtml(modal.copyMode ?? "column")}" />
+      <div class="border border-outline-variant/10 bg-surface-container-lowest px-4 py-3">
+        <div class="text-[10px] font-mono uppercase tracking-[0.22em] text-on-surface-variant/60">
+          Column
+        </div>
+        <div class="mt-2 flex min-w-0 items-center justify-between gap-4">
+          <code class="min-w-0 truncate font-mono text-sm text-primary-container" title="${escapeHtml(
+            modal.columnName ?? ""
+          )}">${escapeHtml(modal.columnName ?? "")}</code>
+          <span class="shrink-0 font-mono text-[10px] uppercase tracking-[0.18em] text-on-surface-variant/50">
+            ${escapeHtml(getCopyColumnActionLabel(modal.copyMode))} · ${formatNumber(valueCount)}
+          </span>
+        </div>
+      </div>
+      ${formatFieldsMarkup}
+      ${renderCopyColumnPreview(modal, state)}
+      ${renderError(modal.error)}
+      <div class="flex flex-wrap items-center justify-end gap-3 pt-2">
+        <button
+          class="standard-button"
+          data-action="close-modal"
+          type="button"
+          ${disabledAttribute}
+        >
+          Cancel
+        </button>
+        <button
+          class="standard-button"
+          name="intent"
+          type="submit"
+          value="export"
+          ${disabledAttribute}
+        >
+          ${modal.submitting ? "Working..." : `Export as ${exportMetadata.extension.toUpperCase()}`}
+        </button>
+        <button
+          class="signature-button"
+          name="intent"
+          type="submit"
+          value="copy"
+          ${disabledAttribute}
+        >
+          ${modal.submitting ? "Working..." : "Copy"}
+        </button>
+      </div>
+    </form>
+  `;
+}
+
+function getTableDesignerUniqueConstraintTypeLabel(constraint) {
+  if (constraint.partial) {
+    return "Partial unique index";
+  }
+
+  if ((constraint.columns?.length ?? 0) > 1) {
+    return "Multi-column unique";
+  }
+
+  return "Unique constraint";
+}
+
+function renderTableDesignerUniqueConstraintExpression(constraint) {
+  const expression = String(constraint.expression || constraint.sql || "").trim();
+
+  if (expression) {
+    return expression;
+  }
+
+  const columns = (constraint.columns ?? []).map((column) => column.name).filter(Boolean);
+  return columns.length ? `UNIQUE (${columns.join(", ")})` : "UNIQUE constraint";
+}
+
+function renderTableDesignerCheckConstraintExpression(constraint) {
+  return String(constraint.expression || "").trim() || "CHECK constraint";
+}
+
+function normalizeTableDesignerConstraintColumnName(name) {
+  return String(name ?? "").trim().toLowerCase();
+}
+
+function tableDesignerConstraintIncludesColumn(constraint, columnName) {
+  const normalizedColumn = normalizeTableDesignerConstraintColumnName(columnName);
+
+  if (!normalizedColumn) {
+    return false;
+  }
+
+  return (constraint.columns ?? []).some(
+    (constraintColumn) =>
+      normalizeTableDesignerConstraintColumnName(constraintColumn.name) === normalizedColumn
+  );
+}
+
+function renderTableDesignerUniqueConstraintEditor(constraint) {
+  const columns = (constraint.columns ?? []).map((column) => column.name).filter(Boolean);
+
+  return `
+    <article class="table-designer-constraint-editor">
+      <div class="table-designer-constraint-editor__header">
+        <div class="min-w-0">
+          <div class="table-designer-constraint-editor__type">
+            ${escapeHtml(getTableDesignerUniqueConstraintTypeLabel(constraint))}
+            ${constraint.origin ? ` // origin ${escapeHtml(constraint.origin)}` : ""}
+          </div>
+          <input
+            class="table-designer-field table-designer-constraint-editor__name"
+            data-bind="table-designer-constraint-field"
+            data-constraint-id="${escapeHtml(constraint.id)}"
+            data-constraint-kind="unique"
+            data-field="name"
+            spellcheck="false"
+            type="text"
+            value="${escapeHtml(constraint.name || "UNIQUE constraint")}"
+          />
+        </div>
+        <div class="status-badge status-badge--muted">Rebuild</div>
+      </div>
+      ${
+        columns.length
+          ? `
+            <div class="table-designer-constraint__columns">
+              ${columns.map((column) => `<span>${escapeHtml(column)}</span>`).join("")}
+            </div>
+          `
+          : ""
+      }
+      <textarea
+        class="table-designer-constraint-editor__sql custom-scrollbar"
+        data-bind="table-designer-constraint-field"
+        data-constraint-id="${escapeHtml(constraint.id)}"
+        data-constraint-kind="unique"
+        data-field="expression"
+        spellcheck="false"
+      >${escapeHtml(renderTableDesignerUniqueConstraintExpression(constraint))}</textarea>
+    </article>
+  `;
+}
+
+function renderTableDesignerCheckConstraintEditor(constraint) {
+  const columns = constraint.columns ?? [];
+  const allowedValues = columns.flatMap((column) =>
+    (column.allowedValues ?? []).map((value) => ({
+      columnName: column.name,
+      value,
+    }))
+  );
+
+  return `
+    <article class="table-designer-constraint-editor">
+      <div class="table-designer-constraint-editor__header">
+        <div class="min-w-0">
+          <div class="table-designer-constraint-editor__type">
+            ${columns.length ? escapeHtml(columns.map((column) => column.name).join(", ")) : "Table check"}
+          </div>
+          <input
+            class="table-designer-field table-designer-constraint-editor__name"
+            data-bind="table-designer-constraint-field"
+            data-constraint-id="${escapeHtml(constraint.id)}"
+            data-constraint-kind="check"
+            data-field="name"
+            spellcheck="false"
+            type="text"
+            value="${escapeHtml(constraint.name || "CHECK constraint")}"
+          />
+        </div>
+        <div class="status-badge status-badge--muted">Rebuild</div>
+      </div>
+      ${
+        allowedValues.length
+          ? `
+            <div class="table-designer-constraint__values custom-scrollbar">
+              ${allowedValues
+                .map(
+                  (entry) => `
+                    <span title="${escapeHtml(entry.columnName)}">${escapeHtml(entry.value)}</span>
+                  `
+                )
+                .join("")}
+            </div>
+          `
+          : ""
+      }
+      <textarea
+        class="table-designer-constraint-editor__sql custom-scrollbar"
+        data-bind="table-designer-constraint-field"
+        data-constraint-id="${escapeHtml(constraint.id)}"
+        data-constraint-kind="check"
+        data-field="expression"
+        spellcheck="false"
+      >${escapeHtml(renderTableDesignerCheckConstraintExpression(constraint))}</textarea>
+    </article>
+  `;
+}
+
+function renderTableDesignerConstraintSection({ title, count, emptyText, body }) {
+  return `
+    <section class="table-designer-constraints-modal__section">
+      <div class="table-designer-constraints-modal__section-header">
+        <div class="table-designer-constraints-modal__section-title">${escapeHtml(title)}</div>
+        <div class="status-badge status-badge--muted">${formatNumber(count)}</div>
+      </div>
+      ${
+        count
+          ? `<div class="table-designer-constraints__list">${body}</div>`
+          : `<div class="table-designer-constraints-modal__empty">${escapeHtml(emptyText)}</div>`
+      }
+    </section>
+  `;
+}
+
+function renderTableDesignerConstraintsModal(modal, state) {
+  const draft = state.tableDesigner?.draft;
+
+  if (!draft) {
+    return `
+      <div class="table-designer-constraints-modal__empty">
+        No active table designer draft.
+      </div>
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Close</button>
+      </div>
+    `;
+  }
+
+  const selectedColumn = modal.columnId
+    ? (draft.columns ?? []).find((column) => column.id === modal.columnId)
+    : null;
+  const selectedColumnName = String(modal.columnName ?? selectedColumn?.name ?? "").trim();
+  const hasSelectedColumn = Boolean(modal.columnId || selectedColumnName);
+  const selectedColumnLabel = selectedColumnName || "Unnamed column";
+  const allUniqueConstraints = draft.mode === "edit" ? draft.uniqueConstraints ?? [] : [];
+  const allCheckConstraints = draft.mode === "edit" ? draft.checkConstraints ?? [] : [];
+  const uniqueConstraints = hasSelectedColumn
+    ? allUniqueConstraints.filter((constraint) =>
+        tableDesignerConstraintIncludesColumn(constraint, selectedColumnName)
+      )
+    : allUniqueConstraints;
+  const checkConstraints = hasSelectedColumn
+    ? allCheckConstraints.filter((constraint) =>
+        tableDesignerConstraintIncludesColumn(constraint, selectedColumnName)
+      )
+    : allCheckConstraints;
+  const totalCount = uniqueConstraints.length + checkConstraints.length;
+
+  return `
+    <div class="table-designer-constraints-modal">
+      <div class="table-designer-constraints-modal__summary">
+        <div class="min-w-0">
+          <div class="table-designer-constraints-modal__label">Table</div>
+          <code title="${escapeHtml(draft.tableName ?? "")}">${escapeHtml(draft.tableName ?? "")}</code>
+        </div>
+        ${
+          hasSelectedColumn
+            ? `
+              <div class="min-w-0">
+                <div class="table-designer-constraints-modal__label">Column</div>
+                <code title="${escapeHtml(selectedColumnLabel)}">${escapeHtml(selectedColumnLabel)}</code>
+              </div>
+            `
+            : ""
+        }
+        <div class="status-badge status-badge--primary">V2 · ${formatNumber(totalCount)}</div>
+      </div>
+      ${renderTableDesignerConstraintSection({
+        title: "Check constraints",
+        count: checkConstraints.length,
+        emptyText: hasSelectedColumn
+          ? "No check constraints detected for this column."
+          : "No check constraints detected.",
+        body: checkConstraints.map(renderTableDesignerCheckConstraintEditor).join(""),
+      })}
+      ${renderTableDesignerConstraintSection({
+        title: hasSelectedColumn ? "Related unique constraints" : "Unique constraints",
+        count: uniqueConstraints.length,
+        emptyText: hasSelectedColumn
+          ? "No related multi-column or partial unique constraints detected."
+          : "No multi-column or partial unique constraints detected.",
+        body: uniqueConstraints.map(renderTableDesignerUniqueConstraintEditor).join(""),
+      })}
+      <div class="flex items-center justify-end gap-3 pt-2">
+        <button class="standard-button" data-action="close-modal" type="button">Close</button>
+      </div>
+    </div>
+  `;
+}
+
 function renderCreateMediaTaggingMappingTableForm(modal, state) {
   const mappingExists = hasDefaultMediaTaggingMappingTable(state.mediaTagging.schemaTables ?? []);
   const readOnly = Boolean(state.mediaTagging.connection?.readOnly);
@@ -1076,6 +1489,16 @@ export function renderModal(state) {
       title: "Export Table",
       body: renderDataExportModal(modal),
     },
+    "copy-column": {
+      eyebrow: "Results // Copy or export column values",
+      title: isMarkdownTodoCopyColumnMode(modal.copyMode) ? "Export Markdown Todo" : "Copy column",
+      body: renderCopyColumnModal(modal, state),
+    },
+    "table-designer-constraints": {
+      eyebrow: "Table Designer // Constraints",
+      title: "Checks",
+      body: renderTableDesignerConstraintsModal(modal, state),
+    },
     "create-media-tagging-tag-table": {
       eyebrow: "Media Tagging // Create default tag table",
       title: "Create Tag Table",
@@ -1096,7 +1519,13 @@ 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 ${modal.kind === "chart-editor" || modal.kind === "row-update-preview" ? "max-w-3xl" : "max-w-xl"} border border-outline-variant/20 bg-surface-container shadow-[0_24px_80px_rgba(0,0,0,0.45)]">
+      <div class="w-full ${
+        modal.kind === "chart-editor" ||
+        modal.kind === "row-update-preview" ||
+        modal.kind === "table-designer-constraints"
+          ? "max-w-3xl"
+          : "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>
             <div class="text-[10px] font-mono uppercase tracking-[0.26em] text-primary-container/70">

package/frontend/js/components/queryEditor.js

@@ -69,9 +69,17 @@ export function renderQueryEditor({
       data-next-value="${historyVisible ? "false" : "true"}"
       type="button"
     >
-      <span class="material-symbols-outlined text-sm">${historyVisible ? "visibility_off" : "history"}</span>
+      <span class="material-symbols-outlined text-sm">${historyVisible ? "visibility_off" : "visibility"}</span>
       ${historyVisible ? "Hide History" : "Show History"}
     </button>
+    <button
+      class="${secondaryButtonClass}"
+      data-action="format-current-query"
+      type="button"
+    >
+      <span class="material-symbols-outlined text-sm">format_align_left</span>
+      Format
+    </button>
     <button
       class="${secondaryButtonClass}"
       data-action="clear-query"

package/frontend/js/components/queryResults.js

@@ -9,31 +9,93 @@ function getSortIcon(columnName, sortColumn, sortDirection) {
   return sortDirection === "desc" ? "south" : "north";
 }
 
-function renderSortableHeader(columnName, sortColumn, sortDirection) {
+const COPY_COLUMN_ACTIONS = [
+  { mode: "column", label: "Copy column" },
+  { mode: "column-with-header", label: "Copy column with header" },
+  { mode: "first-10", label: "Copy first 10" },
+  { mode: "markdown-todo", label: "Export as Markdown Todo" },
+];
+
+function renderColumnActionMenu(columnName, resultScope) {
+  return `
+    <details class="query-result-column-menu" data-copy-column-menu>
+      <summary
+        aria-label="Column actions for ${escapeHtml(columnName)}"
+        class="query-result-column-menu__toggle"
+        title="Column actions"
+      >
+        <span class="material-symbols-outlined" aria-hidden="true">more_vert</span>
+      </summary>
+      <div class="query-result-column-menu__panel" role="menu">
+        ${COPY_COLUMN_ACTIONS.map(
+          (item) => `
+            <button
+              class="query-result-column-menu__item"
+              data-action="open-copy-column-modal"
+              data-column-name="${escapeHtml(columnName)}"
+              data-copy-mode="${escapeHtml(item.mode)}"
+              data-result-scope="${escapeHtml(resultScope)}"
+              role="menuitem"
+              type="button"
+            >
+              ${escapeHtml(item.label)}
+            </button>
+          `
+        ).join("")}
+      </div>
+    </details>
+  `;
+}
+
+function renderSortableHeader(columnName, sortColumn, sortDirection, { resultScope, sortAction }) {
   const isActive = columnName === sortColumn;
+  const labelMarkup = `<span class="query-result-column-label truncate" title="${escapeHtml(columnName)}">${escapeHtml(
+    columnName
+  )}</span>`;
 
   return `
-    <button
-      class="flex w-full items-center justify-between gap-2 text-left transition-colors ${
-        isActive ? "text-primary-container" : "text-on-surface-variant hover:text-primary-container"
-      }"
-      data-action="sort-editor-results-column"
+    <div
+      class="query-result-column-header"
       data-column-name="${escapeHtml(columnName)}"
-      type="button"
+      data-result-column-header
+      data-result-scope="${escapeHtml(resultScope)}"
     >
-      <span class="truncate">${escapeHtml(columnName)}</span>
-      <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
-        columnName,
-        sortColumn,
-        sortDirection
-      )}</span>
-    </button>
+      ${
+        sortAction
+          ? `
+            <button
+              class="query-result-column-sort ${
+                isActive ? "text-primary-container" : "text-on-surface-variant hover:text-primary-container"
+              }"
+              data-action="${escapeHtml(sortAction)}"
+              data-column-name="${escapeHtml(columnName)}"
+              type="button"
+            >
+              ${labelMarkup}
+              <span class="material-symbols-outlined text-sm leading-none">${getSortIcon(
+                columnName,
+                sortColumn,
+                sortDirection
+              )}</span>
+            </button>
+          `
+          : `<span class="query-result-column-static text-on-surface-variant">${labelMarkup}</span>`
+      }
+      ${renderColumnActionMenu(columnName, resultScope)}
+    </div>
   `;
 }
 
 export function renderQueryResultsPane(
   result,
-  { selectedRowIndex = null, editable = false, sortColumn = null, sortDirection = null } = {}
+  {
+    selectedRowIndex = null,
+    editable = false,
+    sortColumn = null,
+    sortDirection = null,
+    resultScope = "editor",
+    sortAction = "sort-editor-results-column",
+  } = {}
 ) {
   if (!result) {
     return `
@@ -48,8 +110,8 @@ export function renderQueryResultsPane(
 
   const columns = (result.columns ?? []).map((columnName) => ({
     headerClassName:
-      "border-b-2 border-primary-container px-4 py-3 text-[10px] font-bold uppercase tracking-widest",
-    renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection),
+      "query-result-header-cell border-b-2 border-primary-container px-4 py-3 text-[10px] font-bold uppercase tracking-widest",
+    renderHeader: () => renderSortableHeader(columnName, sortColumn, sortDirection, { resultScope, sortAction }),
     cellClassName: "px-4 py-3 align-top text-on-surface",
     render: (row) => {
       const value = formatCellValue(row[columnName]);