@drawnagency/primitives 0.1.94 → 0.1.96

package/src/components/shared/HistoryChangesModal.tsx

@@ -0,0 +1,256 @@
+import { useEffect, useState } from "react";
+import { EditorModal } from "../shell/EditorModal";
+import { Button } from "./Button";
+
+export interface ChangedSection {
+  id: string;
+  /** The section's heading, or null when it has none / wasn't resolved. */
+  title: string | null;
+  type: string;
+  page: string | null;
+}
+
+/** "icon_list" → "Icon list". */
+function humanizeType(type: string) {
+  const spaced = type.replace(/[-_]/g, " ");
+  return spaced.charAt(0).toUpperCase() + spaced.slice(1);
+}
+
+/**
+ * Section ids are UUIDs, and plenty of section types (media, spacer) have no
+ * heading to show. Fall back to the type name alone — the page shown alongside
+ * it carries enough context, and an id fragment reads as noise. Two headless
+ * sections of the same type on one page will look alike; that's accepted.
+ */
+function displayName(s: ChangedSection) {
+  return s.title ?? humanizeType(s.type);
+}
+
+export interface ChangeSummary {
+  edited: ChangedSection[];
+  added: ChangedSection[];
+  removed: ChangedSection[];
+  structure: string[];
+  /** Too many sections changed to resolve real titles — ids shown instead. */
+  truncated: boolean;
+}
+
+interface HistoryChangesModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  /** Node label, e.g. "Friday · Jul 24" or "Edit at 4:47 PM". */
+  title: string;
+  base: string | null;
+  head: string;
+  commitCount: number;
+  onBrowse: () => void;
+  onRestore: () => void;
+  /**
+   * True when the editor holds unsaved local changes. Restoring discards them,
+   * and unlike published content they are NOT recoverable from history — so the
+   * confirmation has to say so rather than reassure.
+   */
+  hasUnsavedChanges?: boolean;
+  /** Disables the restore controls while a restore is in flight. */
+  isRestoring?: boolean;
+  /** Set when a dispatched restore came back failed. */
+  restoreError?: string | null;
+}
+
+// Commit ranges are immutable, so a fetched summary stays valid for the session.
+const cache = new Map<string, ChangeSummary>();
+
+/**
+ * Bump whenever the response shape or the meaning of a field changes.
+ *
+ * The endpoint sends `immutable` with a one-year max-age — correct for the
+ * *content* of a commit range, which genuinely never changes, but it means a
+ * browser that cached an older shape would keep serving it and no reload could
+ * dislodge it. Versioning the URL makes a shape change a different cache entry.
+ * v2: `title` became nullable (was the section id, which is a UUID).
+ */
+const API_VERSION = 2;
+
+function queryFor(head: string, base: string | null) {
+  const q = new URLSearchParams({ v: String(API_VERSION), head });
+  if (base) q.set("base", base);
+  return `/api/history/changes?${q.toString()}`;
+}
+
+function Group({ label, items, sign }: { label: string; items: ChangedSection[]; sign: string }) {
+  if (items.length === 0) return null;
+  return (
+    <>
+      <p className="mb-1.5 text-[10px] font-medium tracking-wider text-base-contrast-light uppercase">
+        {label} ({items.length})
+      </p>
+      <ul className="mb-4 list-none p-0">
+        {items.map((s) => (
+          <li
+            key={s.id}
+            className="flex items-baseline gap-2 border-b border-base-200 py-1 last:border-b-0"
+          >
+            <span aria-hidden="true" className="w-3 shrink-0 text-center text-xs font-bold text-base-contrast-light">
+              {sign}
+            </span>
+            <span className="text-sm text-base-contrast">{displayName(s)}</span>
+            {s.page && <span className="text-xs text-base-contrast-light">· {s.page}</span>}
+            <span className="ml-auto shrink-0 pl-2 text-xs text-base-contrast-light">{s.type}</span>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+export function HistoryChangesModal({
+  isOpen, onClose, title, base, head, commitCount, onBrowse, onRestore,
+  hasUnsavedChanges = false, isRestoring = false, restoreError = null,
+}: HistoryChangesModalProps) {
+  const [summary, setSummary] = useState<ChangeSummary | null>(null);
+  const [error, setError] = useState(false);
+  const [confirmingRestore, setConfirmingRestore] = useState(false);
+
+  // Reopening on a different range must not inherit the previous confirm state.
+  useEffect(() => {
+    if (!isOpen) setConfirmingRestore(false);
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isOpen) return;
+    const url = queryFor(head, base);
+    const hit = cache.get(url);
+    if (hit) {
+      setSummary(hit);
+      setError(false);
+      return;
+    }
+    let live = true;
+    setSummary(null);
+    setError(false);
+    (async () => {
+      try {
+        const res = await fetch(url);
+        if (!res.ok) throw new Error(String(res.status));
+        const data = (await res.json()) as ChangeSummary;
+        cache.set(url, data);
+        if (live) setSummary(data);
+      } catch {
+        if (live) setError(true);
+      }
+    })();
+    return () => { live = false; };
+  }, [isOpen, head, base]);
+
+  const total = summary
+    ? summary.edited.length + summary.added.length + summary.removed.length
+    : 0;
+
+  return (
+    // `tabbed` locks the dialog to one height so it doesn't jump when the
+    // summary arrives, and gives an overflow-hidden flex column — which is what
+    // lets the body scroll under a pinned footer. `noPadding` because the
+    // scrolling region owns its own padding.
+    <EditorModal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={confirmingRestore ? "Restore this version?" : title}
+      size="standard"
+      tabbed
+      noPadding
+    >
+      <div className="flex min-h-0 flex-1 flex-col">
+        <div className="flex-1 overflow-y-auto px-6 py-4">
+          {confirmingRestore ? (
+            <>
+              <p className="text-sm text-base-contrast-light">
+                This will publish the content from this version as a new update.
+                Your currently published content stays available in the history.
+              </p>
+              {restoreError && (
+                <p role="alert" className="mt-3 text-sm font-medium text-red-600">
+                  {restoreError} Nothing was published — you can try again.
+                </p>
+              )}
+              {hasUnsavedChanges && (
+                <p className="mt-3 text-sm font-medium text-red-600">
+                  You have unsaved changes. Restoring discards them, and unlike
+                  published content they cannot be recovered from history.
+                </p>
+              )}
+            </>
+          ) : (
+            <>
+              {error && (
+                <p className="py-6 text-center text-sm text-base-contrast-light">
+                  Couldn&rsquo;t load the change summary.
+                </p>
+              )}
+
+              {!error && !summary && (
+                <p className="py-6 text-center text-sm text-base-contrast-light">
+                  Loading changes&hellip;
+                </p>
+              )}
+
+              {summary && (
+                <>
+                  <p className="mb-4 text-xs text-base-contrast-light">
+                    {commitCount === 1 ? "Single edit" : `${commitCount} edits`}
+                    {" · "}
+                    {total} section{total === 1 ? "" : "s"} affected
+                  </p>
+
+                  <Group label="Edited" items={summary.edited} sign="~" />
+                  <Group label="Added" items={summary.added} sign="+" />
+                  <Group label="Removed" items={summary.removed} sign="−" />
+
+                  {summary.structure.length > 0 && (
+                    <>
+                      <p className="mb-1.5 text-[10px] font-medium tracking-wider text-base-contrast-light uppercase">
+                        Page structure
+                      </p>
+                      <ul className="mb-4 list-none p-0">
+                        {summary.structure.map((s) => (
+                          <li key={s} className="py-1 text-sm text-base-contrast">{s}</li>
+                        ))}
+                      </ul>
+                    </>
+                  )}
+
+                  {summary.truncated && (
+                    <p className="mb-4 text-xs text-base-contrast-light">
+                      Too many sections changed to resolve names &mdash; showing section
+                      types instead.
+                    </p>
+                  )}
+                </>
+              )}
+            </>
+          )}
+        </div>
+
+        <div className="flex shrink-0 justify-end gap-2 border-t border-base-200 px-6 py-3">
+          {confirmingRestore ? (
+            <>
+              <Button variant="secondary" size="sm" disabled={isRestoring}
+                onClick={() => setConfirmingRestore(false)}>
+                Cancel
+              </Button>
+              <Button variant="destructive" size="sm" disabled={isRestoring} onClick={onRestore}>
+                {isRestoring ? "Restoring…" : "Restore"}
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="destructive" size="sm" onClick={() => setConfirmingRestore(true)}>
+                Restore&hellip;
+              </Button>
+              <Button size="sm" onClick={onBrowse}>Browse this version</Button>
+            </>
+          )}
+        </div>
+      </div>
+    </EditorModal>
+  );
+}

package/src/components/shared/HistoryPopover.tsx

@@ -1,104 +1,283 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useMemo, lazy, Suspense } from "react";
 import { cn } from "../../lib/cn";
-import { formatDateTime } from "../../lib/timestamp";
-import { Button } from "./Button";
-
-interface CommitItem {
-  sha: string;
-  date: string;
-  message: string;
-}
+import { historyRestoreEvent, historyRestoreFailedEvent } from "../../lib/events";
+import {
+  buildHistoryTree, maxNodeCount,
+  type HistoryCommit, type HistoryGroup, type HistoryNode,
+} from "../../lib/history-buckets";
+// Lazy: Navigation is a client:load island on VIEWER pages too, and this pulls
+// in EditorModal. The modal only renders behind the edit-mode gate, so those
+// bytes shouldn't sit in every viewer's bundle.
+const HistoryChangesModal = lazy(() =>
+  import("./HistoryChangesModal").then((m) => ({ default: m.HistoryChangesModal })));
 
 interface HistoryPopoverProps {
   onSelectCommit: (sha: string, date: string) => void;
+  /** Editor holds unsaved local changes; restoring would discard them. */
+  hasUnsavedChanges?: boolean;
 }
 
-export function HistoryPopover({ onSelectCommit }: HistoryPopoverProps) {
-  const [commits, setCommits] = useState<CommitItem[]>([]);
+const PER_PAGE = 100;
+const MAX_PAGES = 10; // 1000-commit cap
+
+/** One entry per zoom level. The root level has no node. */
+interface Frame {
+  label: string;
+  node: HistoryNode | null;
+}
+
+const Chevron = () => (
+  <svg width="9" height="9" viewBox="0 0 10 10" fill="none" stroke="currentColor"
+       strokeWidth="1.7" aria-hidden="true">
+    <path d="M3.5 1.5L7 5l-3.5 3.5" />
+  </svg>
+);
+
+const BackArrow = () => (
+  <svg width="11" height="11" viewBox="0 0 10 10" fill="none" stroke="currentColor"
+       strokeWidth="1.7" aria-hidden="true">
+    <path d="M6.5 1.5L3 5l3.5 3.5" />
+  </svg>
+);
+
+/** Browse-to-this-version: a pointer cursor — "go look at the site as it was". */
+const BrowseCursor = () => (
+  <svg width="13" height="13" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+    <path d="M3.6 1.9a.4.4 0 0 1 .66-.3l8 6.7a.4.4 0 0 1-.23.71l-3.4.2 1.94 3.5a.4.4 0 0 1-.17.54l-1.4.75a.4.4 0 0 1-.54-.18l-1.9-3.55-2.3 2.2a.4.4 0 0 1-.68-.29z" />
+  </svg>
+);
+
+function Volume({ count, max }: { count: number; max: number }) {
+  // sqrt so a 200-commit year doesn't flatten every other bar to nothing.
+  const pct = count > 0 ? Math.round(Math.min(1, Math.sqrt(count / max)) * 100) : 0;
+  return (
+    <span className="flex items-center gap-1.5" aria-hidden="true">
+      <span className="block h-[3px] w-9 rounded-sm bg-base-accent">
+        <span className="block h-[3px] rounded-sm bg-primary" style={{ width: `${pct}%` }} />
+      </span>
+      <span className="min-w-[20px] text-right text-[10.5px] tabular-nums text-base-contrast-light">
+        {count}
+      </span>
+    </span>
+  );
+}
+
+export function HistoryPopover({ onSelectCommit, hasUnsavedChanges = false }: HistoryPopoverProps) {
+  const [commits, setCommits] = useState<HistoryCommit[]>([]);
   const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const [stack, setStack] = useState<Frame[]>([{ label: "History", node: null }]);
+  const [info, setInfo] = useState<HistoryNode | null>(null);
+  // Restore ends by reloading the page, so this only has to hold long enough to
+  // block a second dispatch during the load + save window.
+  const [restoring, setRestoring] = useState(false);
+  const [restoreError, setRestoreError] = useState<string | null>(null);
 
-  const fetchPage = useCallback(async (pageNum: number) => {
-    const isFirst = pageNum === 1;
-    if (isFirst) setLoading(true);
-    else setLoadingMore(true);
-
-    try {
-      const res = await fetch(`/api/history?page=${pageNum}&per_page=20`);
-      if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
-      const data = await res.json();
-      const items = data.items as CommitItem[];
-      setCommits((prev) => isFirst ? items : [...prev, ...items]);
-      setHasMore(items.length === 20);
-      setPage(pageNum);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Failed to load history");
-    } finally {
-      setLoading(false);
-      setLoadingMore(false);
-    }
-  }, []);
+  // A successful restore reloads, so only failures ever come back.
+  useEffect(() => historyRestoreFailedEvent.listen(({ message }) => {
+    setRestoring(false);
+    setRestoreError(message);
+  }), []);
 
   useEffect(() => {
-    fetchPage(1);
-  }, [fetchPage]);
+    let live = true;
+    (async () => {
+      const all: HistoryCommit[] = [];
+      try {
+        for (let page = 1; page <= MAX_PAGES; page++) {
+          const res = await fetch(`/api/history?page=${page}&per_page=${PER_PAGE}`);
+          if (!res.ok) throw new Error(`Failed to load history: ${res.status}`);
+          const data = (await res.json()) as { items: HistoryCommit[] };
+          all.push(...data.items);
+          if (data.items.length < PER_PAGE) break;
+        }
+        if (live) setCommits(all);
+      } catch (err) {
+        if (live) setError(err instanceof Error ? err.message : "Failed to load history");
+      } finally {
+        if (live) setLoading(false);
+      }
+    })();
+    return () => { live = false; };
+  }, []);
+
+  const groups = useMemo(() => buildHistoryTree(commits, new Date()), [commits]);
+  const max = useMemo(() => maxNodeCount(groups), [groups]);
+
+  const dateOf = useCallback(
+    (sha: string | null) => commits.find((c) => c.sha === sha)?.date ?? "",
+    [commits],
+  );
+
+  const browse = useCallback((node: HistoryNode) => {
+    if (!node.newestSha) return;
+    onSelectCommit(node.newestSha, dateOf(node.newestSha));
+  }, [onSelectCommit, dateOf]);
+
+  const zoomTo = useCallback((depth: number) => {
+    setStack((s) => s.slice(0, depth + 1));
+  }, []);
+
+  const current = stack[stack.length - 1];
+  const atRoot = stack.length === 1;
 
   if (loading) {
-    return (
-      <div className="p-4 text-center text-xs text-base-contrast-light">
-        Loading history...
-      </div>
-    );
+    return <div className="p-4 text-center text-xs text-base-contrast-light">Loading history…</div>;
   }
-
   if (error) {
-    return (
-      <div className="p-4 text-center text-xs text-red-600">
-        {error}
-      </div>
-    );
+    return <div className="p-4 text-center text-xs text-red-600">{error}</div>;
   }
-
   if (commits.length === 0) {
-    return (
-      <div className="p-4 text-center text-xs text-base-contrast-light">
-        No history found
-      </div>
-    );
+    return <div className="p-4 text-center text-xs text-base-contrast-light">No history found</div>;
   }
 
-  return (
-    <div className="max-h-64 overflow-y-auto">
-      <ul className="py-1">
-        {commits.map((commit) => (
-          <li key={commit.sha}>
+  // Empty buckets are omitted by buildHistoryTree, so every node here has edits.
+  const row = (node: HistoryNode) => {
+    const expandable = node.children.length > 0;
+    const full = node.sublabel ? `${node.label} ${node.sublabel}` : node.label;
+    return (
+      <li key={node.id} className="group flex items-center pr-1.5 hover:bg-base-accent">
+        <span className="flex w-6 shrink-0 items-center justify-center self-stretch">
+          {expandable ? (
             <button
-              onClick={() => onSelectCommit(commit.sha, commit.date)}
-              className={cn(
-                "w-full cursor-pointer px-4 py-2 text-left text-xs transition-colors",
-                "hover:bg-base-accent text-base-contrast-light hover:text-base-contrast",
-              )}
+              type="button"
+              aria-label={`Open ${node.label}`}
+              onClick={() => setStack((s) => [...s, { label: node.label, node }])}
+              className="flex h-[22px] w-5 cursor-pointer items-center justify-center rounded text-base-contrast-light hover:bg-base-accent hover:text-primary"
             >
-              {formatDateTime(commit.date)}
+              <Chevron />
             </button>
-          </li>
-        ))}
-      </ul>
-      {hasMore && (
-        <div className="border-t border-base-200 p-2 text-center">
-          <Button
-            variant="ghost"
-            size="sm"
-            onClick={() => fetchPage(page + 1)}
-            disabled={loadingMore}
+          ) : (
+            <span aria-hidden="true" className="text-[9px] text-base-contrast-light">·</span>
+          )}
+        </span>
+
+        {/* Primary action is "what changed here?" — the summary is what an editor
+            is usually after; browsing is the deliberate second step. The edit
+            count rides in the label because the volume bar is decorative and
+            hidden from screen readers. */}
+        <button
+          type="button"
+          aria-label={`${full} — ${node.count} edit${node.count === 1 ? "" : "s"} — what changed`}
+          onClick={() => setInfo(node)}
+          className="min-w-0 flex-1 cursor-pointer truncate py-1.5 text-left text-xs text-base-contrast"
+        >
+          {node.label}
+          {node.sublabel && (
+            <span className="ml-1.5 text-[11px] text-base-contrast-light">{node.sublabel}</span>
+          )}
+        </button>
+
+        <Volume count={node.count} max={max} />
+
+        {node.newestSha && (
+          <button
+            type="button"
+            aria-label={`Browse ${full}`}
+            onClick={() => browse(node)}
+            // focus-visible as well as group-hover: keyboard users never trigger
+            // a hover, so without it this control is invisible to them.
+            className="ml-1.5 flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-base-contrast-light opacity-50 hover:bg-base-accent hover:text-primary focus-visible:opacity-100 group-hover:opacity-100"
           >
-            {loadingMore ? "Loading..." : "Load more"}
-          </Button>
+            <BrowseCursor />
+          </button>
+        )}
+      </li>
+    );
+  };
+
+  return (
+    <div className="flex h-full flex-col overflow-hidden">
+      {!atRoot && current.node && (
+        <div className="sticky top-0 z-10 flex items-center gap-1.5 border-b border-base-200 bg-base-accent/40 px-1.5 py-1.5">
+          <button
+            type="button"
+            aria-label="Back"
+            onClick={() => zoomTo(stack.length - 2)}
+            className="flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center rounded text-base-contrast-light hover:bg-base-accent hover:text-base-contrast"
+          >
+            <BackArrow />
+          </button>
+
+          <nav
+            aria-label="History trail"
+            className="flex min-w-0 flex-1 items-center gap-1 overflow-hidden text-[11.5px] whitespace-nowrap"
+          >
+            {stack.map((f, i) =>
+              i === stack.length - 1 ? (
+                <span key={`${f.label}-${i}`} className="truncate font-semibold text-base-contrast">
+                  {f.label}
+                </span>
+              ) : (
+                <span key={`${f.label}-${i}`} className="flex shrink-0 items-center gap-1">
+                  <button
+                    type="button"
+                    onClick={() => zoomTo(i)}
+                    className="cursor-pointer rounded px-0.5 text-primary hover:bg-base-accent"
+                  >
+                    {f.label}
+                  </button>
+                  <span aria-hidden="true" className="text-base-contrast-light">›</span>
+                </span>
+              ),
+            )}
+          </nav>
+
+          {/* Volume only. Acting on the level you're inside means going back a
+              step and using its row — the bar stays a "where am I", not a
+              second set of controls competing with the rows below it. */}
+          <span className="shrink-0">
+            <Volume count={current.node.count} max={max} />
+          </span>
         </div>
       )}
+
+      <div className="flex-1 overflow-y-auto py-1">
+        {atRoot ? (
+          groups.map((g: HistoryGroup) => (
+            <section key={g.id} role="group" aria-label={g.label}>
+              <h3 className="px-3 pt-2.5 pb-1 text-[9.5px] font-medium tracking-[0.07em] text-base-contrast-light uppercase">
+                {g.label}
+              </h3>
+              {g.nodes.length === 0 ? (
+                <p className="px-3 pb-1 text-[11px] text-base-contrast-light">No edits</p>
+              ) : (
+                <ul className="list-none p-0">{g.nodes.map(row)}</ul>
+              )}
+            </section>
+          ))
+        ) : (
+          <ul className="list-none p-0">{(current.node?.children ?? []).map(row)}</ul>
+        )}
+      </div>
+
+      {info && (
+        <Suspense fallback={null}>
+          <HistoryChangesModal
+            isOpen
+            onClose={() => { setInfo(null); setRestoreError(null); }}
+            title={info.sublabel ? `${info.label} · ${info.sublabel}` : info.label}
+            base={info.baseSha}
+            head={info.newestSha ?? ""}
+            commitCount={info.count}
+            hasUnsavedChanges={hasUnsavedChanges}
+            isRestoring={restoring}
+            restoreError={restoreError}
+            onBrowse={() => { browse(info); setInfo(null); }}
+            onRestore={() => {
+              // Block a second dispatch while the first is still loading and
+              // saving — that would be two racing writes to the same content.
+              if (restoring || !info.newestSha) return;
+              setRestoreError(null);
+              setRestoring(true);
+              historyRestoreEvent.dispatch({
+                sha: info.newestSha,
+                date: dateOf(info.newestSha),
+              });
+            }}
+          />
+        </Suspense>
+      )}
     </div>
   );
 }