feat(frontend): Bifurcate version history actions into semantic zones

The version ledger row mixed a state-mutating control (Restore) with
read-only actions (Copy link, View) in one flowing flex group, so the
right-aligned cluster shifted horizontally on desktop and broke into
unpredictable line wraps on mobile, eroding spatial memory and inviting
misclicks on the mutating control.

Split each row into two physically isolated, ARIA-labelled interaction
zones: Zone 1 couples the version badge to the conditional Restore so the
state-change action anchors to the state indicator; Zone 2 keeps Copy
link, Copy content, and View in a dedicated flex container whose mutual
order stays invariant across every breakpoint. Add a Copy content action
that lazily fetches a version's bytes, sharing one per-hash promise cache
with View so each version is fetched at most once and concurrent clicks
collapse to a single request. Model the CopyButton source as a
discriminated union (eager value xor lazy load) and derive version state
through a total function, making invalid states unrepresentable.

Extract a memoized VersionHistoryRow so a single toggle no longer
re-renders the unbounded append-only ledger.

Author: MinecraftFuns

frontend/src/SnippetDetail.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useState } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Link, useParams } from "react-router-dom";
 import {
   api,
@@ -239,6 +239,16 @@ function ContentTypeEditor({
   );
 }
 
+/** A version's lifecycle stance within the append-only ledger. The newest
+ *  entry is `current`; everything before it is `historic` and restorable. */
+type VersionState = "current" | "historic";
+
+/** Total function from ledger position to lifecycle state — index 0 is the
+ *  live pointer, the single source of truth for the badge and restore affordance. */
+function determineVersionState(index: number): VersionState {
+  return index === 0 ? "current" : "historic";
+}
+
 /** The version ledger, newest first. Each entry can be previewed and restored;
  *  restoring repoints the snippet and appends a new version. */
 function HistoryList({
@@ -250,39 +260,64 @@ function HistoryList({
   history: HistoryItem[];
   onRestored: () => void;
 }) {
-  const [preview, setPreview] = useState<{ hash: string; content: string } | null>(
-    null,
-  );
+  const [openHash, setOpenHash] = useState<string | null>(null);
   const [busyHash, setBusyHash] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
-  const view = async (hash: string) => {
-    setError(null);
-    if (preview?.hash === hash) {
-      setPreview(null);
-      return;
-    }
-    try {
-      const version = await api.getVersion(id, hash);
-      setPreview({ hash, content: version.content });
-    } catch (err) {
-      setError(messageOf(err));
-    }
-  };
+  // Per-hash content cache keyed by `target_hash`. Caching the *promise* (not
+  // the resolved string) collapses concurrent View + Copy clicks into a single
+  // in-flight request, and living in a ref means a cache fill triggers no
+  // re-render — only the action that awaits it observes the bytes.
+  const contentCache = useRef(new Map<string, Promise<string>>());
 
-  const restore = async (hash: string) => {
-    setError(null);
-    setBusyHash(hash);
-    try {
-      await api.restoreVersion(id, hash);
-      setPreview(null);
-      onRestored();
-    } catch (err) {
-      setError(messageOf(err));
-    } finally {
-      setBusyHash(null);
-    }
-  };
+  const loadVersion = useCallback(
+    (hash: string): Promise<string> => {
+      const cache = contentCache.current;
+      let pending = cache.get(hash);
+      if (!pending) {
+        pending = api.getVersion(id, hash).then((version) => version.content);
+        // Evict on failure so a transient error can be retried.
+        pending.catch(() => cache.delete(hash));
+        cache.set(hash, pending);
+      }
+      return pending;
+    },
+    [id],
+  );
+
+  const toggleView = useCallback(
+    async (hash: string) => {
+      setError(null);
+      if (openHash === hash) {
+        setOpenHash(null);
+        return;
+      }
+      try {
+        await loadVersion(hash);
+        setOpenHash(hash);
+      } catch (err) {
+        setError(messageOf(err));
+      }
+    },
+    [openHash, loadVersion],
+  );
+
+  const restore = useCallback(
+    async (hash: string) => {
+      setError(null);
+      setBusyHash(hash);
+      try {
+        await api.restoreVersion(id, hash);
+        setOpenHash(null);
+        onRestored();
+      } catch (err) {
+        setError(messageOf(err));
+      } finally {
+        setBusyHash(null);
+      }
+    },
+    [id, onRestored],
+  );
 
   return (
     <section className="space-y-3">
@@ -292,76 +327,136 @@ function HistoryList({
       </h2>
       {error && <Banner tone="error">{error}</Banner>}
       <ol className="space-y-2">
-        {history.map((entry, index) => {
-          const isCurrent = index === 0;
-          const isOpen = preview?.hash === entry.target_hash;
-          return (
-            <li
-              key={`${entry.changed_at}-${entry.target_hash}`}
-              className="space-y-3 rounded-lg border border-line bg-surface px-4 py-3 transition-colors hover:border-wisteria/40 md:px-5 md:py-4 lg:px-6"
-            >
-              <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4 lg:gap-6">
-                <div className="min-w-0">
-                  <code className="block truncate font-mono text-xs text-ink-soft">
-                    {entry.target_hash}
-                  </code>
-                  <span className="text-xs text-ink-faint">
-                    by {entry.editor_id} · {formatDate(entry.changed_at)}
-                  </span>
-                </div>
-                <div className="flex shrink-0 flex-wrap items-center gap-2">
-                  <Badge tone={isCurrent ? "wisteria" : "neutral"}>
-                    {isCurrent ? "current" : `v${history.length - index}`}
-                  </Badge>
-                  <CopyButton
-                    value={deliveryUrl(entry.target_hash)}
-                    label="Copy link"
-                    size="sm"
-                  />
-                  <Button
-                    variant="secondary"
-                    size="sm"
-                    onClick={() => void view(entry.target_hash)}
-                  >
-                    {isOpen ? (
-                      <Icons.EyeOff className="h-4 w-4" aria-hidden />
-                    ) : (
-                      <Icons.Eye className="h-4 w-4" aria-hidden />
-                    )}
-                    {isOpen ? "Hide" : "View"}
-                  </Button>
-                  {!isCurrent && (
-                    <Button
-                      variant="secondary"
-                      size="sm"
-                      loading={busyHash === entry.target_hash}
-                      onClick={() => void restore(entry.target_hash)}
-                    >
-                      {busyHash === entry.target_hash ? (
-                        "Restoring…"
-                      ) : (
-                        <>
-                          <Icons.RotateCcw className="h-4 w-4" aria-hidden />
-                          Restore
-                        </>
-                      )}
-                    </Button>
-                  )}
-                </div>
-              </div>
-              {isOpen && (
-                <pre className="overflow-x-auto rounded bg-canvas px-3 py-2 font-mono text-xs text-ink">
-                  {preview.content}
-                </pre>
-              )}
-            </li>
-          );
-        })}
+        {history.map((entry, index) => (
+          <VersionHistoryRow
+            key={`${entry.changed_at}-${entry.target_hash}`}
+            entry={entry}
+            state={determineVersionState(index)}
+            label={index === 0 ? "current" : `v${history.length - index}`}
+            isOpen={openHash === entry.target_hash}
+            busy={busyHash === entry.target_hash}
+            loadVersion={loadVersion}
+            onToggleView={toggleView}
+            onRestore={restore}
+          />
+        ))}
       </ol>
     </section>
   );
 }
 
+/** One row of the version ledger. Pure and memoized: the ledger is append-only
+ *  and unbounded, so stable rows keep a single toggle from re-rendering the list.
+ *
+ *  The action surface is split into two physically isolated, ARIA-labelled zones:
+ *  Zone 1 (state & mutation) couples the version badge to the conditional restore
+ *  control; Zone 2 (invariant read-only) keeps Copy link / Copy content / View in
+ *  a fixed mutual order across every breakpoint. */
+const VersionHistoryRow = memo(function VersionHistoryRow({
+  entry,
+  state,
+  label,
+  isOpen,
+  busy,
+  loadVersion,
+  onToggleView,
+  onRestore,
+}: {
+  entry: HistoryItem;
+  state: VersionState;
+  label: string;
+  isOpen: boolean;
+  busy: boolean;
+  loadVersion: (hash: string) => Promise<string>;
+  onToggleView: (hash: string) => void;
+  onRestore: (hash: string) => void;
+}) {
+  const [content, setContent] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+    let active = true;
+    // The promise is already cached by the parent; this only reads it.
+    void loadVersion(entry.target_hash).then((text) => {
+      if (active) {
+        setContent(text);
+      }
+    });
+    return () => {
+      active = false;
+    };
+  }, [isOpen, entry.target_hash, loadVersion]);
+
+  return (
+    <li className="space-y-3 rounded-lg border border-line bg-surface px-4 py-3 transition-colors hover:border-wisteria/40 md:px-5 md:py-4 lg:px-6">
+      <div className="flex flex-wrap items-start justify-between gap-x-4 gap-y-3">
+        {/* Zone 1 — State & Mutation. The restore control sits beside the badge
+            so the state-changing action is anchored to the state indicator. */}
+        <div className="min-w-0 space-y-1.5" role="group" aria-label="version state">
+          <div className="min-w-0">
+            <code className="block truncate font-mono text-xs text-ink-soft">
+              {entry.target_hash}
+            </code>
+            <span className="text-xs text-ink-faint">
+              by {entry.editor_id} · {formatDate(entry.changed_at)}
+            </span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Badge tone={state === "current" ? "wisteria" : "neutral"}>{label}</Badge>
+            {state === "historic" && (
+              <Button
+                variant="secondary"
+                size="sm"
+                loading={busy}
+                onClick={() => onRestore(entry.target_hash)}
+              >
+                {busy ? (
+                  "Restoring…"
+                ) : (
+                  <>
+                    <Icons.RotateCcw className="h-4 w-4" aria-hidden />
+                    Restore
+                  </>
+                )}
+              </Button>
+            )}
+          </div>
+        </div>
+
+        {/* Zone 2 — Invariant Read-Only. A dedicated flex container fixes the
+            mutual order of these actions across all viewport sizes. */}
+        <div
+          className="flex shrink-0 flex-wrap items-center gap-2"
+          role="group"
+          aria-label="snippet actions"
+        >
+          <CopyButton value={deliveryUrl(entry.target_hash)} label="Copy link" size="sm" />
+          <CopyButton
+            load={() => loadVersion(entry.target_hash)}
+            label="Copy content"
+            size="sm"
+          />
+          <Button variant="secondary" size="sm" onClick={() => onToggleView(entry.target_hash)}>
+            {isOpen ? (
+              <Icons.EyeOff className="h-4 w-4" aria-hidden />
+            ) : (
+              <Icons.Eye className="h-4 w-4" aria-hidden />
+            )}
+            {isOpen ? "Hide" : "View"}
+          </Button>
+        </div>
+      </div>
+      {isOpen && content !== null && (
+        <pre className="overflow-x-auto rounded bg-canvas px-3 py-2 font-mono text-xs text-ink">
+          {content}
+        </pre>
+      )}
+    </li>
+  );
+});
+
 function BackLink() {
   return (
     <Link

frontend/src/ui/CopyButton.tsx

@@ -2,33 +2,52 @@ import { useState } from "react";
 import { Button } from "./Button";
 import { Check, Copy } from "./icons";
 
+/** Where a {@link CopyButton} gets its bytes: either an eager string known at
+ *  render time, or a lazy loader resolved on click. The union makes the two
+ *  mutually exclusive — a button is provably one or the other, never both. */
+type CopySource = { value: string } | { load: () => Promise<string> };
+
 /** A button that copies text to the clipboard and confirms briefly with an
- *  icon swap. */
-export function CopyButton({
-    value,
-    label = "Copy",
-    size = "md",
-}: {
-    value: string;
-    label?: string;
-    size?: "sm" | "md";
-}) {
+ *  icon swap. Eager sources copy instantly; lazy sources fetch on click,
+ *  showing a spinner while the loader is in flight. */
+export function CopyButton(
+    props: CopySource & {
+        label?: string;
+        size?: "sm" | "md";
+    },
+) {
+    const { label = "Copy", size = "md" } = props;
     const [copied, setCopied] = useState(false);
+    const [loading, setLoading] = useState(false);
 
     const copy = async () => {
+        // A load already in flight; ignore re-clicks until it settles.
+        if (loading) {
+            return;
+        }
         try {
-            await navigator.clipboard.writeText(value);
+            let text: string;
+            if ("value" in props) {
+                text = props.value;
+            } else {
+                setLoading(true);
+                text = await props.load();
+            }
+            await navigator.clipboard.writeText(text);
             setCopied(true);
             setTimeout(() => setCopied(false), 1500);
         } catch {
             setCopied(false);
+        } finally {
+            setLoading(false);
         }
     };
 
     return (
         <Button
             variant="secondary"
             size={size}
+            loading={loading}
             onClick={() => void copy()}
             type="button"
         >