reviewzy 0.2.0 → 0.4.0

package/src/dashboard/static/dashboard.js

@@ -1,76 +1,100 @@
-// reviewzy dashboard behaviors. Load after htmx.min.js.
+// reviewzy dashboard behaviors. Loads as a module after htmx.min.js.
+// The sidebar's rail and drawer, the selects, the tabs, the theme toggle, the toasts and the
+// table header label boxes come from ui.js; initTables, initTabs and initDismiss are re-run
+// after every htmx swap so a freshly rendered table head gets its boxes and its selection state
+// machine, the OOB tab strip gets its ink, and a banner the swap replaced out of band gets its
+// dismiss control back.
+import { initDismiss, initScrollFade, initTables, initTabs, initViewportWidth, showToast } from "./ui.js";
+
 (() => {
   "use strict";
 
-  // --- Navbar ink (cloudy-ui navbar component) ---
-  // Positions the sliding underline under the active link; re-positions on resize without animating.
-  const navbarNav = document.getElementById("navbar-nav");
-  const navbarInk = document.getElementById("navbar-ink");
+  // The shell is a sidebar shell, so the full-bleed sticky bar measures the page column, not the
+  // viewport: --vp-w on the column keeps the stuck bar inside the page beside the sidebar.
+  initViewportWidth(document.querySelector("main.page") ?? undefined);
+
+  // --- Error toasts ---
+  // A failed htmx round (HTTP error or network error) raises a transient toast carrying the
+  // failure and a Retry button. The toast dies on its own timer; the durable way out is the
+  // control the failed request came from, which the failure never removes: the filters form
+  // re-renders the list, and the style guide form keeps the typed values.
+  function wireRetry(toast, retry) {
+    const body = toast.querySelector(".toast-body");
+    if (!body) return;
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "btn btn-secondary btn-sm";
+    button.textContent = "Retry";
+    button.addEventListener("click", retry);
+    body.appendChild(button);
+  }
 
-  function positionNavbarInk() {
-    if (!navbarNav || !navbarInk) return;
-    const active = navbarNav.querySelector(".navbar-link.active");
-    if (!active) {
-      navbarInk.style.opacity = "0";
-      return;
-    }
-    const navRect = navbarNav.getBoundingClientRect();
-    const linkRect = active.getBoundingClientRect();
-    navbarInk.style.left = `${linkRect.left - navRect.left}px`;
-    navbarInk.style.width = `${linkRect.width}px`;
-    navbarInk.style.opacity = "1";
+  function raiseErrorToast(title, message, retry) {
+    const toast = showToast("danger", title, message);
+    if (toast) wireRetry(toast, retry);
   }
 
-  window.addEventListener("resize", () => {
-    navbarInk.style.transition = "none";
-    positionNavbarInk();
-    requestAnimationFrame(() => {
-      navbarInk.style.transition = "";
-    });
-  });
-  requestAnimationFrame(positionNavbarInk);
-
-  // --- Filter errors ---
-  // A failed filter request (HTTP error or network error) replaces the list with the error box
-  // from the page's #error-box template; the retry button re-submits the filter form.
-  const form = document.getElementById("filters");
-  const list = document.getElementById("entries-list");
-  const errorTemplate = document.getElementById("error-box");
-
-  function showFilterError() {
-    if (!form || !list || !errorTemplate) return;
-    const box = errorTemplate.content.cloneNode(true);
-    const retry = box.querySelector("[data-retry]");
-    if (retry) {
-      retry.addEventListener("click", () => {
-        // htmx listens for submit directly on the form it processed, so a native requestSubmit
-        // reaches it; the reload fallback covers the case where htmx did not load.
-        if (typeof form.requestSubmit === "function") {
-          form.requestSubmit();
-        } else {
-          window.location.reload();
-        }
-      });
+  // htmx listens for submit directly on the form it processed, so a native requestSubmit
+  // reaches it; the reload fallback covers the case where htmx did not load.
+  function submitForm(form) {
+    if (form && typeof form.requestSubmit === "function") {
+      form.requestSubmit();
+    } else {
+      window.location.reload();
     }
-    list.replaceChildren(box);
   }
 
-  if (form) {
-    form.addEventListener("htmx:responseError", showFilterError);
-    form.addEventListener("htmx:sendError", showFilterError);
+  const filtersForm = document.getElementById("filters");
+  if (filtersForm) {
+    const retryFilters = () => submitForm(document.getElementById("filters"));
+    const raiseFilterError = () => raiseErrorToast("The list could not be loaded", "The filter request failed. Try it again.", retryFilters);
+    filtersForm.addEventListener("htmx:responseError", raiseFilterError);
+    filtersForm.addEventListener("htmx:sendError", raiseFilterError);
+  }
+
+  // Delegated on document: a successful swap replaces the style guide form, so listeners bound
+  // to it would die. The event target names the form the failure came from.
+  document.addEventListener("htmx:responseError", (event) => {
+    if (!(event.target instanceof Element) || event.target.id !== "style-guide-form") return;
+    raiseErrorToast("The guide could not be saved", "The save request failed. Try it again.", () => submitForm(document.getElementById("style-guide-form")));
+  });
+  document.addEventListener("htmx:sendError", (event) => {
+    if (!(event.target instanceof Element) || event.target.id !== "style-guide-form") return;
+    raiseErrorToast("The guide could not be saved", "The save request failed. Try it again.", () => submitForm(document.getElementById("style-guide-form")));
+  });
+
+  // The editor's and the list's own failures (save, reject, notes, images, row and batch actions):
+  // htmx swaps nothing on an error, so without a toast the click reads as ignored. Retry re-fires
+  // the control that failed; the title names which surface failed.
+  for (const type of ["htmx:responseError", "htmx:sendError"]) {
+    document.addEventListener(type, (event) => {
+      const el = event.target instanceof Element ? event.target : null;
+      if (!el) return;
+      // A failed live diff is a preview miss, not a failed save: leave the marks and stay quiet.
+      if (el.id === "editor-text") return;
+      const inEditor = el.closest("#editor-view") !== null;
+      const inList = el.closest("#batch-form") !== null;
+      if (!inEditor && !inList) return;
+      const form = el.closest("form");
+      raiseErrorToast(
+        inEditor ? "The change was not saved" : "The action did not finish",
+        "The request failed. Try it again.",
+        () => {
+          if (el instanceof HTMLButtonElement) el.click();
+          else if (form) submitForm(form);
+        },
+      );
+    });
   }
 
   // --- Filter auto-submit ---
-  // The Apply button is gone: changing a select or typing in the search fires the filter request
-  // itself. requestSubmit() reaches htmx's submit listener on the form; the debounce collapses a
-  // burst of keystrokes into one request. Only the change and input events below trigger a submit,
-  // and both fire on user action alone, so a programmatic value reset (which sets .value directly
-  // and emits no event) never re-fires.
+  // Changing a select or typing in the search fires the filter request itself. requestSubmit()
+  // reaches htmx's submit listener on the form; the debounce collapses a burst of keystrokes
+  // into one request. Only the change and input events below trigger a submit, and both fire on
+  // user action alone, so a programmatic value reset (which sets .value directly and emits no
+  // event) never re-fires.
   function submitFilters() {
-    const target = document.getElementById("filters");
-    if (target && typeof target.requestSubmit === "function") {
-      target.requestSubmit();
-    }
+    submitForm(document.getElementById("filters"));
   }
 
   let searchTimer;
@@ -79,59 +103,228 @@
     searchTimer = setTimeout(submitFilters, 300);
   }
 
-  if (form) {
-    const statusSelect = document.getElementById("status");
-    const projectSelect = document.getElementById("project");
+  // The hidden inputs ship disabled so a no-JS submit reads the noscript native selects instead
+  // of a stale hidden value; with the widgets live they carry the picked value.
+  for (const field of document.querySelectorAll('#filters input[data-filter-field]')) {
+    field.disabled = false;
+  }
+
+  // With the widget path live, the hidden status field is the only status the form sends. A submit
+  // button's own name would ride along otherwise, and on a submit with no submitter (requestSubmit,
+  // or a native fallback when htmx did not load) the form's default button adds `status=""` ahead
+  // of the hidden value, which hono reads first. No-JS keeps the names for its native path.
+  for (const button of document.querySelectorAll('#filters button[type="submit"]')) {
+    button.removeAttribute("name");
+  }
+
+  // ui.js's select controller commits the picked option onto the root before the change event;
+  // the option's own data-value holds what the form submits.
+  for (const root of document.querySelectorAll('#filters .select[data-filter]')) {
+    root.addEventListener("change", () => {
+      const field = root.dataset.filter ?? "";
+      const picked = root.querySelector('.menu-item[aria-selected="true"]');
+      const hidden = document.querySelector(`#filters input[data-filter-field="${field}"]`);
+      if (hidden && picked) {
+        hidden.value = picked.getAttribute("data-value") ?? "";
+        submitFilters();
+      }
+    });
+  }
+
+  if (filtersForm) {
     const searchInput = document.getElementById("q");
-    statusSelect?.addEventListener("change", submitFilters);
-    projectSelect?.addEventListener("change", submitFilters);
     searchInput?.addEventListener("input", scheduleSearchSubmit);
+    // Enter in the search field would submit through the first tab button (Open) and silently
+    // drop the chosen status; the debounced path already carries it from the hidden field, so
+    // Enter takes that path too.
+    searchInput?.addEventListener("keydown", (event) => {
+      if (event.key !== "Enter") return;
+      // An IME confirms a composition with Enter; that key belongs to the composition.
+      if (event.isComposing || event.keyCode === 229) return;
+      event.preventDefault();
+      clearTimeout(searchTimer);
+      submitFilters();
+    });
   }
 
-  // --- Style guide save errors ---
-  // A failed save (HTTP error or network error) puts the error box from the page's
-  // #style-guide-error-box template above the form; the retry button re-submits the save form.
-  // Delegated on document: a successful swap replaces the form element, so listeners bound to it
-  // would die.
-  const styleGuideErrorTemplate = document.getElementById("style-guide-error-box");
+  // A status tab submits the form itself: the button carries the new value, the hidden field
+  // mirrors it so every other submit path (the search debounce, the project select) keeps it, and
+  // the enhanced path prevents the native submit whose name would duplicate it. Without JS the
+  // buttons keep their names and the native path carries the status.
+  let restoreStatusTabFocus = false;
+  document.addEventListener("click", (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    const tab = target ? target.closest("#filters .tab") : null;
+    if (!tab) return;
+    event.preventDefault();
+    const hidden = document.querySelector('#filters input[data-filter-field="status"]');
+    if (hidden) hidden.value = tab.value;
+    restoreStatusTabFocus = true;
+    submitFilters();
+  });
 
-  function showStyleGuideError(event) {
-    if (!(event.target instanceof Element) || event.target.id !== "style-guide-form") return;
-    const region = document.getElementById("style-guide-region");
-    if (!region || !styleGuideErrorTemplate) return;
-    // The box goes above the form, never replacing it: the retry re-submits the very form the
-    // failed request came from, and a replacement would leave nothing to re-submit. A success or
-    // refusal swap replaces the whole region and takes the box with it; a repeated error drops
-    // the previous box first so the notices cannot stack.
-    region.querySelector("[data-style-guide-error]")?.remove();
-    const box = styleGuideErrorTemplate.content.cloneNode(true);
-    box.querySelector(".callout")?.setAttribute("data-style-guide-error", "");
-    const retry = box.querySelector("[data-retry]");
-    if (retry) {
-      retry.addEventListener("click", () => {
-        // htmx listens for submit directly on the form it processed, so a native requestSubmit
-        // reaches it; the reload fallback covers the case where htmx did not load.
-        const target = document.getElementById("style-guide-form");
-        if (target && typeof target.requestSubmit === "function") {
-          target.requestSubmit();
-        } else {
-          window.location.reload();
-        }
-      });
+  // --- Swap focus and announcements ---
+  // An htmx swap replaces the node the user acted on, so focus falls to <body>; the tab strip's
+  // out-of-band replacement does the same on the page's primary control. Put focus back where
+  // the keyboard user left it, and announce the outcome through a persistent live region (an
+  // out-of-band banner arrives already populated, which a live region does not reliably read).
+  let editorFocusAfterSwap = null;
+  let listActionFocus = false;
+  let listActionRowHref = null;
+  document.addEventListener("htmx:beforeRequest", (event) => {
+    const el = event.target instanceof Element ? event.target : null;
+    if (!el) return;
+    // A row action or the batch submit is replaced by the list swap; the row the user acted on
+    // (or the outcome banner) is where their focus belongs afterwards.
+    if (el.closest("#batch-form")) {
+      listActionFocus = true;
+      listActionRowHref = el.closest("tr")?.querySelector('a[href^="/entries/"]')?.getAttribute("href") ?? null;
     }
-    region.prepend(box);
+    // The live diff is the textarea's own request: it swaps the current-text card, and focus and
+    // announcements stay exactly where the typist left them.
+    if (el.id === "editor-text") return;
+    if (!el.closest("#editor-view")) return;
+    // Any real editor action aborts a pending preview, or its late response would overwrite the
+    // freshly saved marks with ones computed from older text.
+    if (typeof htmx !== "undefined") {
+      const pending = document.getElementById("editor-text");
+      if (pending) htmx.trigger(pending, "htmx:abort");
+    }
+    if (el.id === "editor-form") editorFocusAfterSwap = "save";
+    else if (el.id === "notes-form") editorFocusAfterSwap = "notes";
+    else if (el.closest("#image-upload") !== null || el.closest('form[action*="/images"]') !== null) editorFocusAfterSwap = "image";
+    else editorFocusAfterSwap = "transition";
+  });
+
+  function announceListOutcome() {
+    const live = document.getElementById("list-live");
+    if (!live) return;
+    const banner = document.querySelector("#page-banner .banner");
+    const meta = document.querySelector("#list-meta .pagination-count");
+    const message = [banner?.textContent?.trim(), meta?.textContent?.trim()].filter(Boolean).join(". ");
+    if (message !== "" && message !== live.textContent) live.textContent = message;
   }
 
-  document.addEventListener("htmx:responseError", showStyleGuideError);
-  document.addEventListener("htmx:sendError", showStyleGuideError);
+  function announceEditorOutcome(action) {
+    const live = document.getElementById("editor-live");
+    if (!live) return;
+    // Only a refusal speaks to the outcome; the read-only state callout is a standing fact.
+    const refusal = document.querySelector("#editor-view .callout-danger");
+    if (refusal) {
+      const title = refusal.querySelector(".callout-title")?.textContent?.trim();
+      const body = refusal.querySelector(".callout-body")?.textContent?.trim();
+      live.textContent = [title, body].filter(Boolean).join(". ");
+      return;
+    }
+    if (action === "notes") {
+      live.textContent = "Notes saved.";
+      return;
+    }
+    if (action === "image") {
+      live.textContent = "Image updated.";
+      return;
+    }
+    const status = document.querySelector("#entry-status .tag")?.textContent?.trim();
+    if (status) live.textContent = `Entry is now ${status}.`;
+  }
+
+  // Keep the current tab inside its scroller on a deep link or after an out-of-band swap.
+  function revealActiveTab() {
+    for (const wrap of document.querySelectorAll(".status-scroll, .style-guide-projects")) {
+      const active = wrap.querySelector(".tab.active");
+      if (!active) continue;
+      const box = wrap.getBoundingClientRect();
+      const tab = active.getBoundingClientRect();
+      if (tab.left < box.left || tab.right > box.right) {
+        wrap.scrollLeft += tab.left - box.left - (box.width - tab.width) / 2;
+      }
+    }
+  }
+
+  // The live diff re-renders the current-text card on every pause; keep the reader's place in it.
+  let currentPaneScroll = 0;
+  document.addEventListener("htmx:beforeSwap", (event) => {
+    const target = event.target instanceof Element ? event.target : null;
+    if (target?.id !== "current-text") return;
+    currentPaneScroll = target.querySelector(".editor-pane")?.scrollTop ?? 0;
+  });
+
+  document.addEventListener("htmx:afterSwap", (event) => {
+    // The live diff swaps only the current-text card; editor focus and announcements belong to the
+    // view and region swaps, so a preview must not consume a pending round's flag.
+    const swapTarget = event.target instanceof Element ? event.target : null;
+    const editorSwap = swapTarget !== null && (swapTarget.id === "editor-view" || swapTarget.id === "editor-region");
+    if (swapTarget?.id === "current-text") {
+      const pane = document.querySelector("#current-text .editor-pane");
+      if (pane) pane.scrollTop = currentPaneScroll;
+    }
+    if (restoreStatusTabFocus) {
+      restoreStatusTabFocus = false;
+      const active = document.querySelector("#status-tabs .tab.active") ?? document.querySelector("#status-tabs .tab");
+      active?.focus();
+    }
+    if (listActionFocus) {
+      listActionFocus = false;
+      const rowLink = listActionRowHref === null ? null : document.querySelector(`#entries-list a[href="${listActionRowHref}"]`);
+      listActionRowHref = null;
+      const banner = document.querySelector("#page-banner .banner");
+      const firstLink = document.querySelector("#entries-list .entry-link");
+      (rowLink ?? banner ?? firstLink)?.focus();
+    }
+    if (editorFocusAfterSwap !== null && editorSwap) {
+      const refused = document.querySelector("#editor-view .callout-danger") !== null;
+      const target =
+        editorFocusAfterSwap === "save"
+          ? refused
+            ? // A refusal names a fix in the text the user must edit; the caret goes back there.
+              document.querySelector("#editor-text")
+            : document.querySelector('#editor-form button[type="submit"]')
+          : editorFocusAfterSwap === "notes"
+            ? document.querySelector('#notes-form button[type="submit"]')
+            : editorFocusAfterSwap === "image"
+              ? document.querySelector("#image-upload button")
+              : document.querySelector("#editor-region");
+      target?.focus();
+      const action = editorFocusAfterSwap;
+      editorFocusAfterSwap = null;
+      announceEditorOutcome(action);
+    }
+    announceListOutcome();
+    revealActiveTab();
+  });
+
+  // A failed round swaps nothing, so a focus flag set for it must not steer the next, unrelated
+  // swap's focus.
+  for (const type of ["htmx:responseError", "htmx:sendError"]) {
+    document.addEventListener(type, () => {
+      restoreStatusTabFocus = false;
+      listActionFocus = false;
+      listActionRowHref = null;
+      editorFocusAfterSwap = null;
+    });
+  }
+
+  // --- Textareas ---
+  // Every data-autosize field grows to its content, capped at 60% of the viewport so the actions
+  // below a long text never leave the screen; only a genuinely long box scrolls. The page's CSS
+  // sets the resting min-height per field and the autosizer's inline height rides over it.
+  function autosizeTextareas() {
+    const cap = Math.round(window.innerHeight * 0.6);
+    for (const textarea of document.querySelectorAll("textarea[data-autosize]")) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${Math.min(textarea.scrollHeight + 2, cap)}px`;
+      textarea.style.overflowY = textarea.scrollHeight + 2 > cap ? "auto" : "hidden";
+    }
+  }
 
   // --- Editor live metrics ---
-  // The constraint panel lives outside the htmx swap region, so the char count and the placeholder
-  // checklist track the textarea as the user types. This is a convenience preview only: the server
-  // store layer owns the refusal, and the panel re-syncs on any swap.
+  // The constraint row lives inside the htmx swap region now, so it re-renders with the swap;
+  // between swaps the char count and the placeholder checklist track the textarea as the user
+  // types. This is a convenience preview only: the server store layer owns the refusal.
   function refreshEditorMetrics() {
     const textarea = document.getElementById("editor-text");
     if (!textarea) return;
+    autosizeTextareas();
     const announcements = [];
 
     const charCount = document.getElementById("char-count");
@@ -160,7 +353,9 @@
         state.textContent = present ? "Present" : "Missing";
         state.classList.toggle("is-present", present);
         if (present !== wasPresent) {
-          announcements.push(`Placeholder {${placeholder}} ${present ? "present" : "missing"}`);
+          // The filed token may already carry its braces; the announcement shows one pair.
+          const bare = placeholder.replace(/^\{+|\}+$/g, "");
+          announcements.push(`Placeholder {${bare}} ${present ? "present" : "missing"}`);
         }
       }
     }
@@ -173,21 +368,28 @@
   }
 
   document.addEventListener("input", (event) => {
-    if (event.target instanceof HTMLTextAreaElement && event.target.id === "editor-text") {
+    const target = event.target;
+    if (!(target instanceof HTMLTextAreaElement)) return;
+    if (target.id === "editor-text") {
       refreshEditorMetrics();
+    } else if (target.matches("textarea[data-autosize]")) {
+      autosizeTextareas();
     }
   });
 
   // A save swaps the editor region in; the textarea survives via hx-preserve, so one pass after
-  // the swap keeps the panel in sync with the value the server kept.
+  // the swap keeps the panel and every autosized box in sync with what the server kept.
   document.addEventListener("htmx:afterSwap", refreshEditorMetrics);
+  document.addEventListener("htmx:afterSwap", autosizeTextareas);
+  // The cap is a share of the current viewport, so a resize or rotation re-derives it.
+  addEventListener("resize", autosizeTextareas);
 
   // "Use" on a revision loads its text into the editor and re-syncs the panel, ready to save.
   document.addEventListener("click", (event) => {
     const target = event.target instanceof Element ? event.target : null;
     const useButton = target ? target.closest("[data-use-revision]") : null;
     if (!useButton) return;
-    const textNode = useButton.closest(".revision")?.querySelector(".revision-text");
+    const textNode = useButton.closest(".timeline-item")?.querySelector(".timeline-body");
     const textarea = document.getElementById("editor-text");
     if (!textNode || !textarea) return;
     textarea.value = textNode.textContent ?? "";
@@ -195,116 +397,36 @@
     textarea.focus();
   });
 
-  // --- Batch select-all and live selection count ---
-  // The list region is swapped wholesale on every filter and action round, so no listener bound to
-  // a checkbox or the button survives a swap: change events are delegated on document, and one pass
-  // after each swap recomputes the select-all states and the approve button's count. All of it is
-  // progressive enhancement — without JS the approve button keeps its static label, stays enabled,
-  // and the native form still submits the checked rows.
-  const DRAFT_SELECTOR = 'input[type="checkbox"][name="id"]';
-  const SELECT_ALL_SELECTOR = 'input[type="checkbox"].select-all';
-
-  function selectionCount() {
-    return document.querySelectorAll(`#batch-form ${DRAFT_SELECTOR}:checked`).length;
-  }
-
+  // --- Batch selection count ---
+  // The boxes and the select-all state machine belong to ui.js's initTables (re-run after every
+  // swap); this page only renders the count onto the approve button. It ships enabled so the no-JS
+  // form can fire it; the boot call below disables it at first paint and each selection event
+  // re-syncs it, so an empty selection reads as dead with JS.
   function updateApproveButton() {
     const button = document.querySelector('#batch-form .batch-bar button[type="submit"]');
     if (!button) return;
-    const count = selectionCount();
+    const count = document.querySelectorAll('#batch-form input[type="checkbox"][name="id"]:checked').length;
     button.textContent = count === 0 ? "Approve selected" : `Approve ${count}`;
     button.disabled = count === 0;
   }
 
-  function updateSelectAll(selectAll) {
-    const batch = selectAll.closest(".batch");
-    if (!batch) return;
-    const drafts = batch.querySelectorAll(DRAFT_SELECTOR);
-    const checked = batch.querySelectorAll(`${DRAFT_SELECTOR}:checked`).length;
-    selectAll.checked = drafts.length > 0 && checked === drafts.length;
-    selectAll.indeterminate = checked > 0 && checked < drafts.length;
-  }
-
-  function refreshSelection() {
-    for (const selectAll of document.querySelectorAll(SELECT_ALL_SELECTOR)) {
-      updateSelectAll(selectAll);
-    }
-    updateApproveButton();
-  }
-
-  document.addEventListener("change", (event) => {
-    const target = event.target instanceof Element ? event.target : null;
-    if (!target) return;
-    if (target.matches(SELECT_ALL_SELECTOR)) {
-      const batch = target.closest(".batch");
-      if (batch) {
-        for (const draft of batch.querySelectorAll(DRAFT_SELECTOR)) {
-          draft.checked = target.checked;
-        }
-      }
-    }
-    refreshSelection();
-  });
-
-  document.addEventListener("htmx:afterSwap", refreshSelection);
-
-  // --- Collapsible project sections and batches ---
-  // The server renders every section and batch open; JS collapses the ones this viewer collapsed
-  // before, from localStorage, and persists each toggle. Re-applied after every swap because a
-  // filter or action round replaces the whole list region. Without JS the toggles stay inert and
-  // everything stays open.
-  const COLLAPSE_STORAGE = "reviewzy.list-collapsed";
-
-  function readCollapsed() {
-    try {
-      const raw = localStorage.getItem(COLLAPSE_STORAGE);
-      const parsed = raw ? JSON.parse(raw) : {};
-      // A parsed array is not a key map: property sets on it would survive only until the next
-      // JSON.stringify, which drops them, so persistence would silently stop.
-      return typeof parsed === "object" && parsed !== null && !Array.isArray(parsed) ? parsed : {};
-    } catch {
-      return {};
-    }
-  }
-
-  function persistCollapsed(key, collapsed) {
-    const map = readCollapsed();
-    if (collapsed) {
-      map[key] = true;
-    } else {
-      delete map[key];
-    }
-    try {
-      localStorage.setItem(COLLAPSE_STORAGE, JSON.stringify(map));
-    } catch {
-      // Storage can be unavailable (private windows); the toggle still works for the page.
-    }
-  }
-
-  function applyCollapseState() {
-    const collapsed = readCollapsed();
-    for (const toggle of document.querySelectorAll("[data-collapse-toggle]")) {
-      const key = toggle.dataset.collapseKey ?? "";
-      const target = document.getElementById(toggle.dataset.collapseTarget ?? "");
-      if (!target) continue;
-      const hidden = collapsed[key] === true;
-      target.hidden = hidden;
-      toggle.setAttribute("aria-expanded", String(!hidden));
-    }
-  }
-
-  document.addEventListener("click", (event) => {
-    const target = event.target instanceof Element ? event.target : null;
-    const toggle = target ? target.closest("[data-collapse-toggle]") : null;
-    if (!toggle) return;
-    const el = document.getElementById(toggle.dataset.collapseTarget ?? "");
-    if (!el) return;
-    const hide = !el.hidden;
-    el.hidden = hide;
-    toggle.setAttribute("aria-expanded", String(!hide));
-    persistCollapsed(toggle.dataset.collapseKey ?? "", hide);
-  });
-
-  applyCollapseState();
-  document.addEventListener("htmx:afterSwap", applyCollapseState);
+  document.addEventListener("table:selection", updateApproveButton);
+  document.addEventListener("htmx:afterSwap", updateApproveButton);
+
+  document.addEventListener("htmx:afterSwap", initTables);
+  // The OOB swap replaces the status tab strip: the fresh row needs its ink placed.
+  document.addEventListener("htmx:afterSwap", initTabs);
+  // A swapped list brings fresh table wraps and textareas; the cue controller skips the ones it
+  // has already dressed.
+  document.addEventListener("htmx:afterSwap", initScrollFade);
+  // The list fragment replaces the page banner out of band; a banner the swap brought in needs
+  // its dismiss control wired, since ui.js's one sweep ran at boot.
+  document.addEventListener("htmx:afterSwap", initDismiss);
+
+  // First paint: the boxes take their content's height, the metrics row reads the prefill, and
+  // the batch button reflects the (empty) selection before the viewer touches anything.
+  autosizeTextareas();
+  refreshEditorMetrics();
+  updateApproveButton();
+  revealActiveTab();
 })();