@eifi1/ui-kit 0.24.1 → 0.25.0

package/dist/components/translation-review.js

@@ -1,28 +1,35 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
-import { Check, ListChecks, RotateCcw } from "lucide-react";
+import { useId, useMemo, useRef, useState } from "react";
+import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
+import { useMediaQuery } from "../hooks/use-media-query.js";
 import { useKitLabels, useKitLocale } from "../i18n/kit-labels.js";
 import { cn } from "../lib/cn.js";
 import {
   DEFAULT_TRANSLATION_REVIEW_FILTER,
   REVIEW_STATUSES,
   filterTranslationRows,
+  groupTranslationRows,
   keyInAreas,
+  reviewUndo,
   reviewWrite,
-  summariseRows
+  summariseRows,
+  unreviewedRows
 } from "../lib/translation-review.js";
 import { AlertBanner } from "./alert-banner.js";
 import { BulkActionBar } from "./bulk-action-bar.js";
 import { Checkbox } from "./checkbox.js";
 import { Chip } from "./chip.js";
 import { DataTable } from "./data-table.js";
+import { Disclosure } from "./disclosure.js";
 import { SearchField } from "./search-field.js";
+import { toast } from "./toast.js";
 import { ToggleGroup } from "./toggle-group.js";
 import { TranslationReviewEditor } from "./translation-review-editor.js";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels.js";
 import { ReviewStatusChip, TranslationProgress } from "./translation-review-parts.js";
 import { Button, IconButton, Select } from "./ui.js";
+import { useWriteLock } from "./write-lock.js";
 import {
   REVIEW_STATUS_TONES,
   ReviewStatusChip as ReviewStatusChip2,
@@ -32,6 +39,7 @@ import {
 } from "./translation-review-parts.js";
 import { TranslationReviewEditor as TranslationReviewEditor2 } from "./translation-review-editor.js";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS as DEFAULT_TRANSLATION_REVIEW_LABELS2 } from "./translation-review-labels.js";
+const MD_UP = "(min-width: 768px)";
 function TextCell({ row, labels, clamp }) {
   return row.text === "" ? /* @__PURE__ */ jsx("span", { className: "italic text-[var(--text-muted)]", children: labels.missingText }) : /* @__PURE__ */ jsx("span", { lang: row.locale, className: cn("whitespace-pre-line break-words", clamp && "line-clamp-3"), children: row.text });
 }
@@ -53,21 +61,37 @@ function TranslationReviewPanel({
   storageKey,
   formatDate,
   formatError,
+  swipe = false,
+  undo: undoProp,
+  groupBy,
+  groupLabel,
+  groupHeadingAs = "h2",
   className,
   labels: labelsProp
 }) {
   const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
   const locale = useKitLocale();
+  const lock = useWriteLock();
+  const phone = !useMediaQuery(MD_UP, true);
+  const baseId = useId();
+  const rootRef = useRef(null);
   const editable = !readOnly && onSave !== void 0;
+  const undoOn = undoProp ?? (swipe || groupBy !== void 0);
   const [ownFilter, setOwnFilter] = useState(DEFAULT_TRANSLATION_REVIEW_FILTER);
   const filter = { ...ownFilter };
   for (const [name, value] of Object.entries(filterProp ?? {})) {
     if (value !== void 0) Object.assign(filter, { [name]: value });
   }
   const [openId, setOpenId] = useState(null);
+  const [focusId, setFocusId] = useState(null);
   const [selected, setSelected] = useState(() => /* @__PURE__ */ new Set());
-  const [busy, setBusy] = useState(null);
+  const [queued, setQueued] = useState([]);
+  const claimed = useRef(/* @__PURE__ */ new Set());
+  const tail = useRef(Promise.resolve());
+  const undoCount = useRef(0);
   const [failure, setFailure] = useState(null);
+  const busy = queued.length > 0;
+  const isQueued = (key) => queued.includes(key);
   const rows = useMemo(
     () => areas ? rowsProp.filter((row) => keyInAreas(row.key, areas, inArea)) : [...rowsProp],
     [rowsProp, areas, inArea]
@@ -86,39 +110,113 @@ function TranslationReviewPanel({
     () => filterTranslationRows(rows, { status, source, namespace, query, placeholdersOnly }),
     [rows, status, source, namespace, query, placeholdersOnly]
   );
+  const groups = useMemo(() => {
+    if (groupBy === void 0) return null;
+    const of = groupBy === "namespace" ? (r) => r.namespace : groupBy === "source" ? (r) => r.source : groupBy;
+    return groupTranslationRows(visible, of);
+  }, [visible, groupBy]);
+  const groupName = (key) => groupLabel?.(key) ?? (groupBy === "source" ? sourceLabels?.[key] : void 0) ?? (key || "\u2014");
+  const [groupOpen, setGroupOpen] = useState({});
+  const groupOpenByDefault = !(phone && (groups?.length ?? 0) > 1);
+  const isGroupOpen = (key) => groupOpen[key] ?? groupOpenByDefault;
+  const setGroupOpenFor = (key, open) => setGroupOpen((prev) => ({ ...prev, [key]: open }));
+  const [confirming, setConfirming] = useState(null);
+  const confirmFocus = useRef(null);
+  const [groupSorts, setGroupSorts] = useState([]);
   const setFilter = (patch) => {
     const next = { ...filter, ...patch };
     setOwnFilter(next);
     onFilterChange?.(next);
     setSelected(/* @__PURE__ */ new Set());
   };
-  const run = async (key, action) => {
-    setBusy(key);
-    setFailure(null);
-    try {
-      await action();
-      return true;
-    } catch (caught) {
-      setFailure(formatError ? formatError(caught) : labels.failed);
-      return false;
-    } finally {
-      setBusy(null);
+  const run = (key, action) => {
+    if (claimed.current.has(key)) return Promise.resolve(false);
+    claimed.current.add(key);
+    setQueued((q) => [...q, key]);
+    const step = tail.current.then(async () => {
+      setFailure(null);
+      try {
+        await action();
+        return true;
+      } catch (caught) {
+        setFailure(formatError ? formatError(caught) : labels.failed);
+        return false;
+      } finally {
+        claimed.current.delete(key);
+        setQueued((q) => q.filter((k) => k !== key));
+      }
+    });
+    tail.current = step;
+    return step;
+  };
+  const sayApproved = (targets, description) => {
+    const back = reviewUndo(targets);
+    const message = labels.approvedToast(targets.length);
+    const save = onSave;
+    const clear = onClear;
+    if (!save || back.clears.length > 0 && !clear) {
+      toast.success(message, { description });
+      return;
+    }
+    const key = `undo:${++undoCount.current}`;
+    toast.undo(message, {
+      description,
+      onUndo: () => void run(key, async () => {
+        if (back.writes.length > 0) await save(back.writes, { origin: "undo", toasted: false });
+        if (back.clears.length > 0) await clear?.(back.clears, { origin: "undo", toasted: false });
+      })
+    });
+  };
+  const approve = async (key, targets, origin, description) => {
+    if (!onSave || targets.length === 0) return false;
+    const save = onSave;
+    const ok = await run(key, () => save(targets.map((r) => reviewWrite(r, "APPROVED")), { origin, toasted: undoOn }));
+    if (ok && undoOn) sayApproved(targets, description);
+    return ok;
+  };
+  const saveFromEditor = async (row, write) => {
+    const toasted = undoOn && write.verdict === "APPROVED";
+    await onSave?.([write], { origin: "editor", toasted });
+    if (toasted) sayApproved([row], row.key);
+  };
+  const keepFocusAt = (groupKey) => {
+    const check = () => {
+      const root = rootRef.current;
+      const active = document.activeElement;
+      if (!root || active && active !== document.body && active.isConnected) return;
+      const sections = [...root.querySelectorAll("[data-review-group]")];
+      const section = sections.find((el) => el.dataset.reviewGroup === groupKey) ?? sections[0];
+      section?.querySelector("[data-disclosure-trigger]")?.focus();
+    };
+    requestAnimationFrame(() => requestAnimationFrame(check));
+  };
+  const approveGroup = async (group, confirmed) => {
+    const targets = unreviewedRows(group.rows);
+    if (targets.length === 0) return;
+    if (!confirmed && targets.length > pageSize) {
+      setGroupOpenFor(group.key, true);
+      setConfirming(group.key);
+      confirmFocus.current = group.key;
+      return;
     }
+    const ok = await approve(`group:${group.key}`, targets, "group", groupName(group.key));
+    if (ok) setConfirming((key) => key === group.key ? null : key);
+    keepFocusAt(group.key);
   };
   const visibleIds = new Set(visible.map((r) => r.id));
   const selectedRows = visible.filter((r) => selected.has(r.id));
-  const allSelected = visible.length > 0 && selectedRows.length === visible.length;
+  const shownRows = groups ? groups.filter((g) => isGroupOpen(g.key)).flatMap((g) => g.rows) : visible;
+  const allShownSelected = shownRows.length > 0 && shownRows.every((r) => selected.has(r.id));
   const toApprove = selectedRows.filter((r) => r.text !== "" && r.status !== "approved");
   const toReset = selectedRows.filter((r) => r.review !== null);
   const approveSelected = async () => {
-    if (!onSave || toApprove.length === 0) return;
-    if (await run("bulk-approve", () => onSave(toApprove.map((r) => reviewWrite(r, "APPROVED"))))) {
-      setSelected(/* @__PURE__ */ new Set());
-    }
+    if (await approve("bulk-approve", toApprove, "selection")) setSelected(/* @__PURE__ */ new Set());
   };
   const resetSelected = async () => {
     if (!onClear || toReset.length === 0) return;
-    if (await run("bulk-reset", () => onClear(toReset.map((r) => ({ locale: r.locale, key: r.key }))))) {
+    const clear = onClear;
+    const keys = toReset.map((r) => ({ locale: r.locale, key: r.key }));
+    if (await run("bulk-reset", () => clear(keys, { origin: "selection", toasted: false }))) {
       setSelected(/* @__PURE__ */ new Set());
     }
   };
@@ -155,8 +253,7 @@ function TranslationReviewPanel({
       sortBy: (r) => REVIEW_STATUSES.indexOf(r.status)
     }
   ];
-  if (editable && onSave) {
-    const save = onSave;
+  if (editable) {
     columns.push({
       key: "approve",
       header: /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.approve }),
@@ -168,18 +265,201 @@ function TranslationReviewPanel({
           tone: "muted",
           commit: true,
           label: labels.approve,
-          pending: busy === `row:${r.id}`,
-          disabled: busy !== null,
+          pending: isQueued(`row:${r.id}`),
+          disabled: busy,
           onClick: (event) => {
             event.stopPropagation();
-            void run(`row:${r.id}`, () => save([reviewWrite(r, "APPROVED")]));
+            void approve(`row:${r.id}`, [r], "row", r.key);
           },
           children: /* @__PURE__ */ jsx(Check, {})
         }
       )
     });
   }
-  return /* @__PURE__ */ jsxs("div", { className: cn("min-w-0 space-y-4", className), children: [
+  const swipeActions = (r) => {
+    if (!editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+    const missing = r.text === "";
+    return {
+      end: missing || r.status === "approved" ? [] : [
+        {
+          label: labels.approve,
+          icon: /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": true }),
+          onCommit: () => void approve(`row:${r.id}`, [r], "swipe", r.key),
+          className: "bg-[var(--success)]",
+          armedClassName: "bg-[var(--success)]"
+        }
+      ],
+      start: [
+        {
+          label: missing ? labels.suggest : labels.flag,
+          icon: /* @__PURE__ */ jsx(PencilLine, { className: "size-4", "aria-hidden": true }),
+          // Opens the editor rather than sending the string back: "needs a change"
+          // with neither a note nor a better wording tells nobody anything.
+          onCommit: () => {
+            setOpenId(r.id);
+            setFocusId(r.id);
+          },
+          className: missing ? "bg-[var(--brand)]" : "bg-[var(--danger)]",
+          armedClassName: missing ? "bg-[var(--brand-hover)]" : "bg-[var(--danger-hover)]"
+        }
+      ]
+    };
+  };
+  const toggleIn = (prev, many, checked) => {
+    const next = new Set([...prev].filter((id) => visibleIds.has(id)));
+    for (const r of many) {
+      if (checked) next.add(r.id);
+      else next.delete(r.id);
+    }
+    return next;
+  };
+  const selectionFor = (list) => {
+    if (!editable) return void 0;
+    const picked = list.filter((r) => selected.has(r.id)).length;
+    return {
+      isSelected: (r) => selected.has(r.id),
+      onToggle: (r, checked) => setSelected((prev) => toggleIn(prev, [r], checked)),
+      onToggleMany: (many, checked) => setSelected((prev) => toggleIn(prev, many, checked)),
+      allSelected: list.length > 0 && picked === list.length,
+      someSelected: picked > 0 && picked < list.length,
+      onToggleAll: (checked) => setSelected((prev) => toggleIn(prev, list, checked))
+    };
+  };
+  const table = (list, group) => /* @__PURE__ */ jsx(
+    DataTable,
+    {
+      rows: list,
+      rowKey: (r) => r.id,
+      columns,
+      empty: labels.empty,
+      defaultPageSize: pageSize,
+      ...group ? {
+        // Inside the group's own card: no frame in a frame, no column rail per group,
+        // no scroller per group, and the group's name as the table's.
+        frame: false,
+        chrome: "minimal",
+        maxBodyHeight: "none",
+        sorts: groupSorts,
+        onSortsChange: setGroupSorts,
+        labels: { table: group.name }
+      } : { storageKey },
+      isExpanded: (r) => r.id === openId,
+      onRowClick: (r) => {
+        setFocusId(null);
+        setOpenId((open) => open === r.id ? null : r.id);
+      },
+      expandedRow: (r) => /* @__PURE__ */ jsx(
+        TranslationReviewEditor,
+        {
+          row: r,
+          referenceLabel,
+          localeLabel,
+          readOnly: !editable,
+          focusWording: focusId === r.id,
+          onSave: onSave ? (write) => saveFromEditor(r, write) : void 0,
+          onClear: onClear ? (key) => onClear([key], { origin: "editor", toasted: false }) : void 0,
+          onClose: () => {
+            setOpenId(null);
+            setFocusId(null);
+          },
+          formatDate,
+          formatError,
+          labels: labelsProp
+        },
+        r.id
+      ),
+      mobileCard: (r) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
+        /* @__PURE__ */ jsx("code", { className: "block break-all text-xs text-[var(--text-muted)]", children: r.key }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(TextCell, { row: r, labels, clamp: true }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
+          /* @__PURE__ */ jsx(ReviewStatusChip, { status: r.status, labels: labelsProp }),
+          r.placeholderMismatch && /* @__PURE__ */ jsx(Chip, { size: "sm", tone: "danger", variant: "outline", children: labels.placeholderChip })
+        ] })
+      ] }),
+      mobileSwipeActions: swipe ? swipeActions : void 0,
+      selection: selectionFor(list)
+    }
+  );
+  const groupSection = (g, index) => {
+    const name = groupName(g.key);
+    const titleId = `${baseId}-group-${index}`;
+    const questionId = `${baseId}-confirm-${index}`;
+    const targets = editable ? unreviewedRows(g.rows) : [];
+    const key = `group:${g.key}`;
+    return /* @__PURE__ */ jsxs(
+      Disclosure,
+      {
+        "data-review-group": g.key,
+        headingAs: groupHeadingAs,
+        title: /* @__PURE__ */ jsx("span", { id: titleId, children: name }),
+        hint: labels.groupCount(g.summary.unreviewed, g.summary.total),
+        open: isGroupOpen(g.key),
+        onOpenChange: (open) => {
+          setGroupOpenFor(g.key, open);
+          if (!open) setConfirming((c) => c === g.key ? null : c);
+        },
+        trailing: targets.length > 0 ? /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            commit: true,
+            "aria-describedby": titleId,
+            pending: isQueued(key) && confirming !== g.key,
+            disabled: busy,
+            onClick: () => void approveGroup(g, false),
+            children: [
+              /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": true }),
+              labels.approveGroup(targets.length)
+            ]
+          }
+        ) : void 0,
+        bodyClassName: "space-y-0 px-0 pb-0 border-t border-[var(--border)]",
+        children: [
+          confirming === g.key && targets.length > 0 && /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] p-3", children: /* @__PURE__ */ jsx(AlertBanner, { tone: "warning", size: "sm", children: /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
+            /* @__PURE__ */ jsx("p", { id: questionId, children: labels.confirmGroup(targets.length, name) }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  ref: (el) => {
+                    if (el && confirmFocus.current === g.key) {
+                      confirmFocus.current = null;
+                      el.focus();
+                    }
+                  },
+                  variant: "primary",
+                  size: "sm",
+                  commit: true,
+                  "aria-describedby": questionId,
+                  pending: isQueued(key),
+                  disabled: busy,
+                  onClick: () => void approveGroup(g, true),
+                  children: labels.approveGroup(targets.length)
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  disabled: isQueued(key),
+                  onClick: () => {
+                    setConfirming(null);
+                    keepFocusAt(g.key);
+                  },
+                  children: labels.cancel
+                }
+              )
+            ] })
+          ] }) }) }),
+          table(g.rows, { name })
+        ]
+      },
+      g.key
+    );
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: rootRef, className: cn("min-w-0 space-y-4", className), children: [
     scopeText && /* @__PURE__ */ jsx(AlertBanner, { tone: "info", variant: "inline", size: "sm", block: true, live: false, children: labels.scope(scopeText) }),
     readOnly && /* @__PURE__ */ jsx(AlertBanner, { tone: "info", variant: "inline", size: "sm", block: true, live: false, children: labels.readOnly }),
     progress && /* @__PURE__ */ jsx(TranslationProgress, { summary, labels: labelsProp }),
@@ -224,15 +504,15 @@ function TranslationReviewPanel({
         }
       )
     ] }),
-    editable && visible.length > 0 && // The phone's table has no checkboxes; this is its way into the bulk actions.
+    editable && shownRows.length > 0 && // The phone's table has no checkboxes; this is its way into the bulk actions.
     /* @__PURE__ */ jsxs(
       Button,
       {
         variant: "ghost",
         size: "sm",
         className: "md:hidden",
-        disabled: allSelected,
-        onClick: () => setSelected(new Set(visible.map((r) => r.id))),
+        disabled: allShownSelected,
+        onClick: () => setSelected((prev) => toggleIn(prev, shownRows, true)),
         children: [
           /* @__PURE__ */ jsx(ListChecks, { className: "size-4", "aria-hidden": true }),
           labels.selectShown
@@ -247,8 +527,8 @@ function TranslationReviewPanel({
           variant: "primary",
           size: "sm",
           commit: true,
-          pending: busy === "bulk-approve",
-          disabled: busy !== null || toApprove.length === 0,
+          pending: isQueued("bulk-approve"),
+          disabled: busy || toApprove.length === 0,
           onClick: () => void approveSelected(),
           children: [
             /* @__PURE__ */ jsx(Check, { className: "size-4", "aria-hidden": true }),
@@ -262,8 +542,8 @@ function TranslationReviewPanel({
           variant: "ghost",
           size: "sm",
           commit: true,
-          pending: busy === "bulk-reset",
-          disabled: busy !== null || toReset.length === 0,
+          pending: isQueued("bulk-reset"),
+          disabled: busy || toReset.length === 0,
           onClick: () => void resetSelected(),
           children: [
             /* @__PURE__ */ jsx(RotateCcw, { className: "size-4", "aria-hidden": true }),
@@ -272,63 +552,7 @@ function TranslationReviewPanel({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(
-      DataTable,
-      {
-        rows: visible,
-        rowKey: (r) => r.id,
-        columns,
-        empty: labels.empty,
-        defaultPageSize: pageSize,
-        storageKey,
-        isExpanded: (r) => r.id === openId,
-        onRowClick: (r) => setOpenId((open) => open === r.id ? null : r.id),
-        expandedRow: (r) => /* @__PURE__ */ jsx(
-          TranslationReviewEditor,
-          {
-            row: r,
-            referenceLabel,
-            localeLabel,
-            readOnly: !editable,
-            onSave: onSave ? (write) => onSave([write]) : void 0,
-            onClear: onClear ? (key) => onClear([key]) : void 0,
-            onClose: () => setOpenId(null),
-            formatDate,
-            formatError,
-            labels: labelsProp
-          },
-          r.id
-        ),
-        mobileCard: (r) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [
-          /* @__PURE__ */ jsx("code", { className: "block break-all text-xs text-[var(--text-muted)]", children: r.key }),
-          /* @__PURE__ */ jsx("div", { className: "text-sm text-[var(--text-primary)]", children: /* @__PURE__ */ jsx(TextCell, { row: r, labels, clamp: true }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-1", children: [
-            /* @__PURE__ */ jsx(ReviewStatusChip, { status: r.status, labels: labelsProp }),
-            r.placeholderMismatch && /* @__PURE__ */ jsx(Chip, { size: "sm", tone: "danger", variant: "outline", children: labels.placeholderChip })
-          ] })
-        ] }),
-        selection: editable ? {
-          isSelected: (r) => selected.has(r.id),
-          onToggle: (r, checked) => setSelected((prev) => {
-            const next = new Set([...prev].filter((id) => visibleIds.has(id)));
-            if (checked) next.add(r.id);
-            else next.delete(r.id);
-            return next;
-          }),
-          onToggleMany: (many, checked) => setSelected((prev) => {
-            const next = new Set([...prev].filter((id) => visibleIds.has(id)));
-            for (const r of many) {
-              if (checked) next.add(r.id);
-              else next.delete(r.id);
-            }
-            return next;
-          }),
-          allSelected,
-          someSelected: selectedRows.length > 0 && !allSelected,
-          onToggleAll: (checked) => setSelected(checked ? new Set(visible.map((r) => r.id)) : /* @__PURE__ */ new Set())
-        } : void 0
-      }
-    )
+    groups && groups.length > 0 ? /* @__PURE__ */ jsx("div", { className: "space-y-3", children: groups.map(groupSection) }) : table(visible)
   ] });
 }
 export {