sqlite-hub 0.11.1 → 0.16.0

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]);

package/frontend/js/components/rowEditorPanel.js

@@ -1,4 +1,19 @@
 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;
 
 function getJsonPreview(value) {
   if (value === null || value === undefined) {
@@ -28,6 +43,241 @@ function getJsonPreview(value) {
   }
 }
 
+function getUrlValue(value) {
+  const text = String(value ?? "").trim();
+
+  if (!URL_PATTERN.test(text)) {
+    return null;
+  }
+
+  try {
+    const url = new URL(text);
+
+    return ["http:", "https:"].includes(url.protocol) ? url.href : null;
+  } catch (error) {
+    return null;
+  }
+}
+
+function withUrlBadge(badges = [], url) {
+  if (!url) {
+    return badges;
+  }
+
+  const hasUrlBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "URL";
+  });
+
+  return hasUrlBadge ? badges : [...badges, { label: "URL", tone: "url" }];
+}
+
+function getAllowedValues(field) {
+  const seen = new Set();
+
+  return (Array.isArray(field.allowedValues) ? field.allowedValues : [])
+    .map((value) => String(value))
+    .filter((value) => {
+      if (seen.has(value)) {
+        return false;
+      }
+
+      seen.add(value);
+      return true;
+    });
+}
+
+function withCheckBadge(badges = [], allowedValues = []) {
+  if (!allowedValues.length) {
+    return badges;
+  }
+
+  const hasCheckBadge = badges.some((badge) => {
+    const label = typeof badge === "object" ? badge.label : badge;
+    return String(label ?? "").toUpperCase() === "CHECK";
+  });
+
+  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 "";
+  }
+
+  return `
+    <div class="mt-2">
+      <button
+        class="standard-button"
+        data-action="open-row-editor-url"
+        data-url="${escapeHtml(url)}"
+        type="button"
+      >
+        <span class="material-symbols-outlined text-sm">open_in_new</span>
+        Open in tab
+      </button>
+    </div>
+  `;
+}
+
+function renderAllowedValuesSelect(field, allowedValues) {
+  const currentValue = String(field.value ?? "");
+  const hasCurrentAllowedValue = allowedValues.includes(currentValue);
+  const shouldRenderEmptyOption = field.notNull !== true;
+  const shouldRenderCurrentOption =
+    currentValue !== "" && !hasCurrentAllowedValue;
+  const options = [
+    shouldRenderEmptyOption
+      ? `<option value="" ${currentValue === "" ? "selected" : ""}>NULL / empty</option>`
+      : "",
+    shouldRenderCurrentOption
+      ? `<option value="${escapeHtml(currentValue)}" selected>${escapeHtml(currentValue)}</option>`
+      : "",
+    ...allowedValues.map(
+      (value) =>
+        `<option value="${escapeHtml(value)}" ${
+          value === currentValue ? "selected" : ""
+        }>${escapeHtml(value)}</option>`
+    ),
+  ].join("");
+
+  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}
+    </select>
+  `;
+}
+
+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">
@@ -41,37 +291,66 @@ function renderJsonViewer(prettyJson, title = "JSON Viewer") {
   `;
 }
 
-function renderReadonlyField(label, value) {
-  const badges = Array.isArray(label?.badges) ? label.badges : [];
+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 = 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) {
-  const badges = Array.isArray(field.badges) ? field.badges : [];
+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 = 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 `
-    <label class="block space-y-2">
+    <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
@@ -79,27 +358,51 @@ function renderEditableField(field) {
           : ""
       }
       ${
-        inputType === "number" && !jsonPreview
+        allowedValues.length && !jsonPreview
+          ? renderAllowedValuesSelect(field, allowedValues)
+          : inputType === "number" && !jsonPreview
           ? `
               <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"
                 value="${escapeHtml(field.value ?? "")}"
               />
             `
+          : url && !jsonPreview
+            ? `
+              <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"
+                type="text"
+                value="${escapeHtml(field.value ?? "")}"
+              />
+              ${renderOpenUrlButton(url)}
+            `
           : `
               <textarea
                 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>
             `
       }
-    </label>
+      ${renderTimestampPreview(field, tableMeta)}
+      ${renderFilePathPreview(field, tableMeta)}
+    </div>
   `;
 }
 
@@ -112,6 +415,22 @@ function getFieldBadgeClassName(tone) {
     return "border-tertiary-fixed-dim/35 bg-tertiary-fixed-dim/15 text-tertiary-fixed-dim";
   }
 
+  if (tone === "url") {
+    return "border-primary-container/35 bg-primary-container/15 text-primary-container";
+  }
+
+  if (tone === "check") {
+    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";
 }
 
@@ -135,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,
@@ -158,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="',
@@ -254,7 +587,7 @@ export function renderRowEditorPanel({
                       ? `
                           <div class="space-y-4">
                             ${editableFields
-                              .map((field) => renderEditableField(field))
+                              .map((field) => renderEditableField(field, tableMeta))
                               .join("")}
                           </div>
                         `
@@ -286,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>