sqlite-hub 0.1.3

package/js/utils/format.js

@@ -0,0 +1,179 @@
+const KEYWORD_PATTERN =
+  /\b(WITH|SELECT|FROM|WHERE|AND|OR|ORDER|BY|ASC|DESC|AS|COUNT|FILTER|JOIN|LEFT|RIGHT|INNER|OUTER|ON|GROUP|LIMIT|OFFSET|AVG|SUM|MIN|MAX|OVER|PARTITION|INSERT|UPDATE|DELETE|CREATE|ALTER|DROP|PRAGMA|VALUES|INTO|SET|BEGIN|COMMIT|ROLLBACK)\b/gi;
+
+const DATE_TIME_FORMATTER = new Intl.DateTimeFormat("en-GB", {
+  dateStyle: "medium",
+  timeStyle: "short",
+});
+
+export function escapeHtml(value = "") {
+  return String(value)
+    .replaceAll("&", "&")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+export function formatNumber(value) {
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric.toLocaleString("en-US") : "0";
+}
+
+export function formatBytes(value) {
+  const bytes = Number(value);
+
+  if (!Number.isFinite(bytes) || bytes < 0) {
+    return "0 B";
+  }
+
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+
+  const units = ["KB", "MB", "GB", "TB"];
+  let size = bytes / 1024;
+  let unitIndex = 0;
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024;
+    unitIndex += 1;
+  }
+
+  return `${size.toFixed(size >= 10 ? 0 : 1)} ${units[unitIndex]}`;
+}
+
+export function formatDateTime(value) {
+  if (!value) {
+    return "N/A";
+  }
+
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? String(value) : DATE_TIME_FORMATTER.format(date);
+}
+
+export function formatRelativeBoolean(value) {
+  return value ? "ENABLED" : "DISABLED";
+}
+
+export function formatIdentifierLabel(value = "") {
+  return String(value || "unknown");
+}
+
+export function truncateMiddle(value = "", maxLength = 56) {
+  const text = String(value);
+
+  if (text.length <= maxLength) {
+    return text;
+  }
+
+  const sliceLength = Math.floor((maxLength - 3) / 2);
+  return `${text.slice(0, sliceLength)}...${text.slice(-sliceLength)}`;
+}
+
+export function highlightSql(query = "") {
+  const lines = String(query).split("\n");
+
+  return lines
+    .map((line) => {
+      if (line.trim().startsWith("--")) {
+        return `<span class="sql-comment">${escapeHtml(line)}</span>`;
+      }
+
+      const parts = [];
+      const tokenPattern = /'[^']*'|\b\d+(?:\.\d+)?\b/g;
+      let cursor = 0;
+      let match;
+
+      while ((match = tokenPattern.exec(line))) {
+        if (match.index > cursor) {
+          parts.push({
+            type: "plain",
+            value: line.slice(cursor, match.index),
+          });
+        }
+
+        parts.push({
+          type: match[0].startsWith("'") ? "string" : "value",
+          value: match[0],
+        });
+
+        cursor = match.index + match[0].length;
+      }
+
+      if (cursor < line.length) {
+        parts.push({
+          type: "plain",
+          value: line.slice(cursor),
+        });
+      }
+
+      return parts
+        .map((part) => {
+          if (part.type === "string") {
+            return `<span class="sql-string">${escapeHtml(part.value)}</span>`;
+          }
+
+          if (part.type === "value") {
+            return `<span class="sql-value">${escapeHtml(part.value)}</span>`;
+          }
+
+          return escapeHtml(part.value).replace(
+            KEYWORD_PATTERN,
+            '<span class="sql-keyword">$1</span>'
+          );
+        })
+        .join("");
+    })
+    .join("<br/>");
+}
+
+export function isBlobPreview(value) {
+  return Boolean(value && typeof value === "object" && value.__type === "blob");
+}
+
+export function formatBlobPreview(value) {
+  if (!isBlobPreview(value)) {
+    return "";
+  }
+
+  return `BLOB • ${formatBytes(value.sizeBytes)} • ${value.hexPreview || "binary"}`;
+}
+
+export function formatCellValue(value) {
+  if (value === null || value === undefined) {
+    return "NULL";
+  }
+
+  if (isBlobPreview(value)) {
+    return formatBlobPreview(value);
+  }
+
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+
+  return String(value);
+}
+
+export function inferStatusTone(value) {
+  const normalized = String(value ?? "").toLowerCase();
+
+  if (["ok", "active", "enabled", "success", "primary", "on"].includes(normalized)) {
+    return "success";
+  }
+
+  if (["warning", "locked", "readonly", "read_only", "alert"].includes(normalized)) {
+    return "alert";
+  }
+
+  if (["critical", "error", "failed"].includes(normalized)) {
+    return "alert";
+  }
+
+  return "muted";
+}

package/js/views/connections.js

@@ -0,0 +1,133 @@
+import { renderConnectionCard } from "../components/connectionCard.js";
+import { renderPageHeader } from "../components/pageHeader.js";
+import { escapeHtml } from "../utils/format.js";
+
+function renderConnectionsActionButton({
+  label,
+  icon,
+  modal,
+  tone = "secondary",
+  className = "",
+}) {
+  const clipPath = "polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%)";
+  const toneClassName =
+    tone === "primary"
+      ? "clipped-corner border border-primary-container bg-primary-container text-on-primary shadow-[0_0_18px_-10px_rgba(252,227,0,0.65)] hover:bg-primary-fixed"
+      : "clipped-corner border border-outline-variant/20 bg-surface-container-highest text-primary-container shadow-[inset_2px_0_0_0_rgba(252,227,0,0.95)] hover:bg-surface-bright";
+  const iconClassName =
+    tone === "primary"
+      ? "text-base text-on-primary"
+      : "text-base text-primary-container/90";
+  const clipStyle = `style="--clip-path: ${clipPath};"`;
+
+  return `
+    <button
+      class="flex h-11 items-center justify-between gap-6 px-5 font-headline text-xs font-bold uppercase tracking-[0.18em] transition-colors ${toneClassName} ${className}"
+      data-action="open-modal"
+      data-modal="${modal}"
+      ${clipStyle}
+      type="button"
+    >
+      <span>${label}</span>
+      <span class="material-symbols-outlined ${iconClassName}">${icon}</span>
+    </button>
+  `;
+}
+
+function renderConnectionsBody(state) {
+  if (state.connections.loading && !state.connections.recent.length) {
+    return `
+      <div class="flex min-h-[280px] items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+        <div class="text-center text-on-surface-variant/40">
+          <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
+          <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_CONNECTIONS</p>
+        </div>
+      </div>
+    `;
+  }
+
+  if (state.connections.error) {
+    return `
+      <div class="border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+        <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+          ${escapeHtml(state.connections.error.code)}
+        </div>
+        <div class="mt-2">${escapeHtml(state.connections.error.message)}</div>
+      </div>
+    `;
+  }
+
+  if (!state.connections.recent.length) {
+    return `
+      <div class="border border-dashed border-outline-variant/20 bg-surface-container-low px-8 py-10 text-center">
+        <span class="material-symbols-outlined mb-3 text-5xl text-on-surface-variant/25">database_off</span>
+        <p class="font-headline text-xl font-black uppercase tracking-tight text-primary-container">
+          No Recorded SQLite Connections
+        </p>
+        <p class="mx-auto mt-3 max-w-xl text-sm leading-7 text-on-surface-variant/65">
+          Open an existing SQLite database or create a new one to add your first connection.
+        </p>
+        <div class="mt-6 flex flex-wrap items-center justify-center gap-3">
+          ${renderConnectionsActionButton({
+            label: "Open Database",
+            icon: "folder_open",
+            modal: "open-connection",
+            tone: "primary",
+            className: "min-w-[17rem] px-8 py-6 text-sm",
+          })}
+          ${renderConnectionsActionButton({
+            label: "Create Database",
+            icon: "note_add",
+            modal: "create-connection",
+            className: "min-w-[17rem] px-8 py-6 text-sm",
+          })}
+        </div>
+      </div>
+    `;
+  }
+
+  return `
+    <div class="grid grid-cols-1 gap-6 md:grid-cols-2 xl:grid-cols-3">
+      ${state.connections.recent
+        .map((connection) =>
+          renderConnectionCard(connection, state.connections.active?.id)
+        )
+        .join("")}
+    </div>
+  `;
+}
+
+export function renderConnectionsView(state) {
+  const actions = `
+    ${renderConnectionsActionButton({
+      label: "Open Database",
+      icon: "folder_open",
+      modal: "open-connection",
+      tone: "primary",
+      className: "min-w-[13rem]",
+    })}
+    ${renderConnectionsActionButton({
+      label: "Create Database",
+      icon: "note_add",
+      modal: "create-connection",
+      className: "min-w-[13rem]",
+    })}
+  `;
+
+  return {
+    main: `
+      <section class="view-surface relative min-h-full overflow-hidden">
+        <div class="data-grid-texture pointer-events-none absolute inset-0"></div>
+        <div class="view-frame relative z-10">
+          ${renderPageHeader({
+            title: "Connections",
+            subtitle: `Registry // Recent_Targets: ${String(state.connections.recent.length).padStart(2, "0")}`,
+            actions,
+          })}
+          ${renderConnectionsBody(state)}
+        </div>
+      </section>
+    `,
+    panel: "",
+  };
+}