@eifi1/ui-kit 0.25.0 → 0.26.0

package/src/components/translation-review.tsx

@@ -1,4 +1,4 @@
-import { useId, useMemo, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
 import type { ReactNode } from "react";
 import { Check, ListChecks, PencilLine, RotateCcw } from "lucide-react";
 
@@ -7,6 +7,7 @@ import { useKitLabels, useKitLocale } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import {
   DEFAULT_TRANSLATION_REVIEW_FILTER,
+  DEFAULT_TRANSLATION_REVIEW_SWIPE,
   REVIEW_STATUSES,
   filterTranslationRows,
   groupTranslationRows,
@@ -14,12 +15,15 @@ import {
   reviewUndo,
   reviewWrite,
   summariseRows,
+  translationReviewSwipePlan,
   unreviewedRows,
 } from "../lib/translation-review";
 import type {
   ReviewStatus,
   TranslationReviewFilter,
   TranslationReviewKey,
+  TranslationReviewSwipeAction,
+  TranslationReviewSwipeBinding,
   TranslationReviewWrite,
   TranslationRow,
   TranslationRowGroup,
@@ -33,6 +37,7 @@ import type { DataTableColumn, DataTableProps, MobileSwipeActions, SortState } f
 import { Disclosure } from "./disclosure";
 import { SearchField } from "./search-field";
 import { toast } from "./toast";
+import type { SwipeAction } from "./swipeable-row";
 import { ToggleGroup } from "./toggle-group";
 import { TranslationReviewEditor } from "./translation-review-editor";
 import { DEFAULT_TRANSLATION_REVIEW_LABELS, reviewStatusLabel } from "./translation-review-labels";
@@ -101,7 +106,8 @@ export interface TranslationReviewSaveInfo {
   /** The open editor, a row's approve button, a swipe on a phone card, a group's
    *  "Approve unreviewed", the selection's bulk bar, or an Undo pressed on the toast. */
   origin: TranslationReviewOrigin;
-  /** The panel shows its own toast for this write (an approval's Undo toast). */
+  /** The panel shows its own toast for this write (an approval's Undo toast, or a
+   *  swiped `clear`'s). */
   toasted: boolean;
 }
 
@@ -142,6 +148,11 @@ export interface TranslationReviewPanelProps {
   /**
    * Controlled filters — for an app that keeps them in the URL (keksdose's `?status=`,
    * `?ns=`, `?q=`). Whatever is left out is the panel's own. Pair with `onFilterChange`.
+   *
+   * A field passed here is the app's, and the control shows what the app says: one the app
+   * passes but does not write back from `onFilterChange` is a control that does nothing.
+   * A development build warns about that once per field (0.25.1, Kurvenschmiede); a field
+   * left out entirely is fine — the panel keeps it.
    */
   filter?: Partial<TranslationReviewFilter>;
   /** Every filter, on every change — write them in ONE update: `useSearchParamsState`'s
@@ -176,8 +187,31 @@ export interface TranslationReviewPanelProps {
    *
    * Off by default, so no existing page gains a gesture on the bump. Phones only; the
    * desktop table keeps its approve button.
+   *
+   * A BINDING instead of `true` (keksdose — Marcel's live #377 rework, 2026-10-03: *"Add
+   * the swipe options to be shown also to the settings /settings#interaction area where
+   * the other swipe options are defined"*): keksdose lets the user bind every list's
+   * swipes in Settings → Interaction, per side a primary action at the first threshold and
+   * a secondary one at a longer drag, and a fixed mapping is one its settings cannot
+   * reach. So each logical side takes an ordered ladder of
+   * {@link TranslationReviewSwipeAction}s — index 0 at the first threshold, index 1 at the
+   * longer drag, as {@link SwipeableRow} stages them:
+   *
+   *     swipe={{ end: ["approve", "clear"], start: ["edit"] }}
+   *
+   * `approve` (with Undo), `edit` (the editor, cursor in the wording — "Needs a change"),
+   * `clear` (the verdict taken back, with Undo, which stores it again; only with
+   * `onClear`). An action a row cannot offer drops out and the ladder closes up behind it
+   * ({@link translationReviewSwipePlan}): `approve` on an approved or missing string,
+   * `clear` on a row with no verdict. Every rule above still holds for every binding —
+   * no side swipes in a `readOnly` locale, under a write lock, with the editor open or
+   * the row's write out.
+   *
+   * `true` is {@link DEFAULT_TRANSLATION_REVIEW_SWIPE} — `{ end: ["approve"], start:
+   * ["edit"] }`, 0.25's mapping exactly — and `false` or nothing is no swipe. A binding
+   * turns the Undo toast on by default, as `true` does.
    */
-  swipe?: boolean;
+  swipe?: boolean | TranslationReviewSwipeBinding;
   /**
    * Answer every approval with the kit's Undo toast (`toast.undo`): a row's button, a
    * swipe, the editor's Approve, a group's and the selection's bulk approve. Undo stores
@@ -213,11 +247,42 @@ export interface TranslationReviewPanelProps {
    * rows, and paging one area does not move another — rather than one pager cutting
    * through the headers. `storageKey` keeps persisting the ungrouped table only.
    *
-   * Groups fold (each on its own, remembered while the panel lives). On a phone they
-   * start folded when there are several — the headers are then the area list, and the
-   * reviewer opens the one to work through; on a wide screen they start open.
+   * Groups fold (each on its own, remembered while the panel lives), and a folded group's
+   * rows are not rendered at all — only its header. Which groups start open is
+   * {@link defaultGroupsOpen}: by default, on a phone they start folded when there are
+   * several — the headers are then the area list, and the reviewer opens the one to work
+   * through — and on a wide screen they start open while that is cheap (see there).
    */
   groupBy?: TranslationReviewGroupBy;
+  /**
+   * Which groups start open under {@link groupBy} (0.25.1). A group the reviewer opens or
+   * folds keeps that; this is what every other group follows.
+   *
+   * - `"auto"` (default): on a phone, open when there is one group and folded when there
+   *   are several, as in 0.25.0. On a wide screen, open while opening every group renders
+   *   at most 100 rows (each group shows up to `pageSize` of them; the budget is one page
+   *   where `pageSize` is larger) — and folded above that, the headers then being the area
+   *   list, as on a phone.
+   * - `true`: every group starts open, on a phone too.
+   * - `false`: every group starts folded, on a wide screen too.
+   *
+   * WHY A BUDGET OF ROWS (keksdose, measured on 0.25.0): a wide screen opened EVERY group.
+   * keksdose's /translations has 122 areas and ~4700 strings — 122 tables and 2053 rows at
+   * once, ~46 000 elements, 5.2 s before the panel appeared and 2.5 s for a filter click
+   * to paint, against 50 rows and 0.34 s ungrouped; its page test went from 4 s to 146 s.
+   * kastlan (~31 areas, ~1300 rows open) and Kurvenschmiede (28, ~700) had the same page.
+   * What costs is the rows on screen, so the rule counts them rather than the groups:
+   * 100 rows is two of the panel's default pages — any one or two areas still open as
+   * before, however long, and so do a dozen small ones, or a search whose hits fall in
+   * many areas — while a whole catalogue starts as its list of areas: keksdose's shape
+   * in jsdom, 122 headers and ~2100 elements instead of ~44 000 (the ungrouped panel has
+   * ~1200). The rule follows the filters: narrow them and the groups open.
+   *
+   * A boolean rather than a controlled open state: the panel already keeps each group's
+   * own state, and an app that only wants "all open" or "all folded" should not have to
+   * keep a record of 122 flags to say it.
+   */
+  defaultGroupsOpen?: boolean | "auto";
   /** A group's name. Default: `sourceLabels` for `groupBy="source"`, else the key. */
   groupLabel?: (group: string) => string;
   /** The level of the group headings. Default `h2`: the panel is a page's body, under
@@ -231,6 +296,108 @@ export interface TranslationReviewPanelProps {
  *  means the same here as in the table. */
 const MD_UP = "(min-width: 768px)";
 
+/**
+ * How many rows the groups may render at once on a wide screen before they start folded
+ * ({@link TranslationReviewPanelProps.defaultGroupsOpen}): two of the default 50-row pages.
+ * A row costs about twenty elements in either layout, so this is the cost of two pages of
+ * the ungrouped table — not of 2053 rows in 122 tables.
+ */
+const GROUPS_OPEN_ROW_BUDGET = 100;
+
+/**
+ * Would opening every group stay within the budget? Each group renders up to `pageSize`
+ * rows (it pages on its own); the budget is never less than one page, so a single group —
+ * which renders at most one — always starts open, as on a phone.
+ */
+function groupsFitOpen(groups: readonly TranslationRowGroup[], pageSize: number): boolean {
+  const budget = Math.max(GROUPS_OPEN_ROW_BUDGET, pageSize);
+  let rendered = 0;
+  for (const group of groups) {
+    rendered += Math.min(group.rows.length, pageSize);
+    if (rendered > budget) return false;
+  }
+  return true;
+}
+
+/**
+ * The kit's dev switch, as NumberInput's money guard and `lib/logger.ts` read it: a
+ * development build — the consumer's bundler makes `import.meta.env.DEV` false in a
+ * production one, and the branch is dead code there — and never under vitest, where every
+ * consumer suite would print it; a test opts in with `vi.stubEnv("VITEST", "")`. Read per
+ * call, and optional-chained: `import.meta.env` is a Vite injection, absent under Node.
+ */
+function devWarnings(): boolean {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+
+type FilterField = keyof TranslationReviewFilter;
+
+/** How long after the last filter change the app's `filter` is looked at again: well past
+ *  a router's transition, so a URL that is still being written is not mistaken for one
+ *  that never will be. */
+const FILTER_ECHO_MS = 1500;
+
+/**
+ * The development warning for a controlled filter that does not follow (Kurvenschmiede,
+ * 0.25.1). A field the app passes in `filter` is the app's: the panel shows the app's
+ * value, whatever the reviewer picked. An app that passes a field but does not write the
+ * reported value back — its `onFilterChange` hands on only some fields, `filter` is built
+ * as `{ ...DEFAULT_TRANSLATION_REVIEW_FILTER, ...fromTheUrl }`, a URL parser rejects what
+ * its serialiser wrote, or there is no `onFilterChange` at all — has a control that
+ * silently does nothing: the box unticks itself, the select jumps back.
+ *
+ * So, after the panel reports a change of a field the app controls, it looks at the
+ * app's `filter` again once the change has had time to land ({@link FILTER_ECHO_MS}, read
+ * from the last COMMITTED props, so a router transition still rendering does not count),
+ * and warns — once per field — when that field still holds the value it had before.
+ *
+ * Quiet by construction for an app that passes no `filter`, and for a field the app LEAVES
+ * OUT: that field is the panel's own and works (keksdose keeps the placeholder switch so,
+ * on purpose). Quiet too when the app moved the field somewhere else itself. Development
+ * builds only (see {@link devWarnings}): in production and under vitest nothing is
+ * recorded and no timer is set.
+ */
+function useFilterEchoCheck(filterProp: Partial<TranslationReviewFilter> | undefined) {
+  const committed = useRef(filterProp);
+  useEffect(() => {
+    committed.current = filterProp;
+  });
+  // Per field: what the app's filter said when the reviewer first changed it, and what
+  // the panel reported last.
+  const pending = useRef(new Map<FilterField, { from: unknown; to: unknown }>());
+  const warned = useRef(new Set<FilterField>());
+  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+  useEffect(() => () => clearTimeout(timer.current), []);
+
+  return (next: TranslationReviewFilter) => {
+    if (filterProp === undefined || !devWarnings()) return;
+    for (const field of Object.keys(next) as FilterField[]) {
+      const from = filterProp[field];
+      if (from === undefined || warned.current.has(field)) continue;
+      const seen = pending.current.get(field);
+      if (seen) seen.to = next[field];
+      else if (next[field] !== from) pending.current.set(field, { from, to: next[field] });
+    }
+    if (pending.current.size === 0) return;
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      const now = committed.current;
+      for (const [field, { from, to }] of pending.current) {
+        if (to === from || now?.[field] !== from || warned.current.has(field)) continue;
+        warned.current.add(field);
+        console.warn(
+          `[ui-kit] TranslationReviewPanel: the "${field}" filter was changed to ${JSON.stringify(to)}, but the ` +
+            `\`filter\` prop still says ${JSON.stringify(from)}, so the control does nothing. A field passed in ` +
+            `\`filter\` is the app's: write back every field \`onFilterChange\` reports, in one update ` +
+            `(useSearchParamsState's setter takes the object as it is), or leave the field out of \`filter\` and ` +
+            `the panel keeps it. (Development builds only; once per field.)`,
+        );
+      }
+      pending.current.clear();
+    }, FILTER_ECHO_MS);
+  };
+}
+
 /** The row's text — or, for a missing string, the line that says so. */
 function TextCell({ row, labels, clamp }: { row: TranslationRow; labels: TranslationReviewLabels; clamp?: boolean }) {
   return row.text === "" ? (
@@ -286,6 +453,7 @@ export function TranslationReviewPanel({
   groupBy,
   groupLabel,
   groupHeadingAs = "h2",
+  defaultGroupsOpen = "auto",
   className,
   labels: labelsProp,
 }: TranslationReviewPanelProps) {
@@ -296,7 +464,9 @@ export function TranslationReviewPanel({
   const baseId = useId();
   const rootRef = useRef<HTMLDivElement>(null);
   const editable = !readOnly && onSave !== undefined;
-  const undoOn = undoProp ?? (swipe || groupBy !== undefined);
+  const binding: TranslationReviewSwipeBinding | null =
+    swipe === true ? DEFAULT_TRANSLATION_REVIEW_SWIPE : swipe || null;
+  const undoOn = undoProp ?? (binding !== null || groupBy !== undefined);
 
   const [ownFilter, setOwnFilter] = useState<TranslationReviewFilter>(DEFAULT_TRANSLATION_REVIEW_FILTER);
   // The app's fields over the panel's own; a field the app leaves `undefined` is the
@@ -305,6 +475,7 @@ export function TranslationReviewPanel({
   for (const [name, value] of Object.entries(filterProp ?? {})) {
     if (value !== undefined) Object.assign(filter, { [name]: value });
   }
+  const echoFilter = useFilterEchoCheck(filterProp);
   const [openId, setOpenId] = useState<string | null>(null);
   // The row whose editor a swipe opened, to be written in: its wording field takes focus.
   const [focusId, setFocusId] = useState<string | null>(null);
@@ -352,11 +523,21 @@ export function TranslationReviewPanel({
   }, [visible, groupBy]);
   const groupName = (key: string) =>
     groupLabel?.(key) ?? (groupBy === "source" ? sourceLabels?.[key] : undefined) ?? (key || "—");
-  // Only what the reviewer chose; a group nobody has touched follows the default.
+  // Only what the reviewer chose; a group nobody has touched follows the default, which
+  // follows the filters (see `defaultGroupsOpen`).
   const [groupOpen, setGroupOpen] = useState<Readonly<Record<string, boolean>>>({});
-  const groupOpenByDefault = !(phone && (groups?.length ?? 0) > 1);
+  const groupOpenByDefault =
+    defaultGroupsOpen !== "auto"
+      ? defaultGroupsOpen
+      : groups !== null && (phone ? groups.length <= 1 : groupsFitOpen(groups, pageSize));
   const isGroupOpen = (key: string) => groupOpen[key] ?? groupOpenByDefault;
   const setGroupOpenFor = (key: string, open: boolean) => setGroupOpen((prev) => ({ ...prev, [key]: open }));
+  /** A group the reviewer works in — an editor opened in it — stays open when the default
+   *  turns (a search cleared, the rows grown past the budget): folding it would drop the
+   *  editor and whatever was typed in it. */
+  const keepGroupOpen = (key: string | undefined) => {
+    if (key !== undefined) setGroupOpen((prev) => (key in prev ? prev : { ...prev, [key]: true }));
+  };
   // The group whose large batch is waiting for a yes — and, until its confirm button
   // has mounted and taken focus, the group that asked.
   const [confirming, setConfirming] = useState<string | null>(null);
@@ -368,6 +549,7 @@ export function TranslationReviewPanel({
     const next = { ...filter, ...patch };
     setOwnFilter(next);
     onFilterChange?.(next);
+    echoFilter(next);
     // A selection the new filter hides would be acted on unseen.
     setSelected(new Set());
   };
@@ -395,10 +577,12 @@ export function TranslationReviewPanel({
   };
 
   /** "String approved — Undo", once `targets` (as they were BEFORE the write) are
-   *  approved. Undo goes through the same queue as every write. */
-  const sayApproved = (targets: readonly TranslationRow[], description?: ReactNode) => {
+   *  approved — or, after a swiped `clear`, "String marked unreviewed — Undo". Either way
+   *  Undo puts back what the rows said before ({@link reviewUndo}), through the same queue
+   *  as every write. */
+  const sayDone = (targets: readonly TranslationRow[], description?: ReactNode, cleared = false) => {
     const back = reviewUndo(targets);
-    const message = labels.approvedToast(targets.length);
+    const message = (cleared ? labels.clearedToast : labels.approvedToast)(targets.length);
     const save = onSave;
     const clear = onClear;
     // Taking back the approval of a row that had no verdict is a clear: without
@@ -427,16 +611,27 @@ export function TranslationReviewPanel({
     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);
+    if (ok && undoOn) sayDone(targets, description);
     return ok;
   };
 
+  /** A swipe bound to `clear`: the row's verdict taken back, answered like an approval —
+   *  the Undo toast stores the verdict again. Under the row's own key, so it queues behind
+   *  (and never overlaps) an approval of the same row. */
+  const clearRow = async (row: TranslationRow) => {
+    if (!onClear || row.review === null) return;
+    const clear = onClear;
+    const keys = [{ locale: row.locale, key: row.key }];
+    const ok = await run(`row:${row.id}`, () => clear(keys, { origin: "swipe", toasted: undoOn }));
+    if (ok && undoOn) sayDone([row], row.key, true);
+  };
+
   /** The editor's own save: it waits, closes and shows its errors itself, so it does
    *  not go through the queue — but an approval there is answered like any other. */
   const saveFromEditor = async (row: TranslationRow, write: TranslationReviewWrite) => {
     const toasted = undoOn && write.verdict === "APPROVED";
     await onSave?.([write], { origin: "editor", toasted });
-    if (toasted) sayApproved([row], row.key);
+    if (toasted) sayDone([row], row.key);
   };
 
   /**
@@ -562,41 +757,65 @@ export function TranslationReviewPanel({
     });
   }
 
-  /**
-   * A phone card's swipes: Approve toward the end, "Needs a change" toward the start.
-   * None where the row must not be acted on — the same conditions under which its
-   * buttons are locked or absent.
-   */
-  const swipeActions = (r: TranslationRow): MobileSwipeActions | null => {
-    if (!editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+  /** One bound swipe action on one row, as {@link SwipeableRow} draws and commits it. */
+  const swipeAction = (r: TranslationRow, id: TranslationReviewSwipeAction, groupKey?: string): SwipeAction => {
     const missing = r.text === "";
-    return {
-      end:
-        missing || r.status === "approved"
-          ? []
-          : [
-              {
-                label: labels.approve,
-                icon: <Check className="size-4" aria-hidden />,
-                onCommit: () => void approve(`row:${r.id}`, [r], "swipe", r.key),
-                className: "bg-[var(--success)]",
-                armedClassName: "bg-[var(--success)]",
-              },
-            ],
-      start: [
-        {
+    switch (id) {
+      case "approve":
+        return {
+          label: labels.approve,
+          icon: <Check className="size-4" aria-hidden />,
+          onCommit: () => void approve(`row:${r.id}`, [r], "swipe", r.key),
+          // Text on the fill in its own contrast colour: the fills are pastels in dark
+          // mode, where SwipeableRow's default white text was unreadable (0.26).
+          className: "bg-[var(--success)] text-[var(--success-contrast)]",
+          armedClassName: "bg-[var(--success)] text-[var(--success-contrast)]",
+        };
+      case "edit":
+        return {
           label: missing ? labels.suggest : labels.flag,
           icon: <PencilLine className="size-4" aria-hidden />,
           // Opens the editor rather than sending the string back: "needs a change"
           // with neither a note nor a better wording tells nobody anything.
           onCommit: () => {
+            keepGroupOpen(groupKey);
             setOpenId(r.id);
             setFocusId(r.id);
           },
-          className: missing ? "bg-[var(--brand)]" : "bg-[var(--danger)]",
-          armedClassName: missing ? "bg-[var(--brand-hover)]" : "bg-[var(--danger-hover)]",
-        },
-      ],
+          className: missing
+            ? "bg-[var(--brand)] text-[var(--brand-contrast)]"
+            : "bg-[var(--danger)] text-[var(--danger-contrast)]",
+          armedClassName: missing
+            ? "bg-[var(--brand-hover)] text-[var(--brand-contrast)]"
+            : "bg-[var(--danger-hover)] text-[var(--danger-contrast)]",
+        };
+      case "clear":
+        return {
+          label: labels.reset,
+          icon: <RotateCcw className="size-4" aria-hidden />,
+          onCommit: () => void clearRow(r),
+          // A step back, not a verdict: neither the approval's green nor the send-back's red.
+          // The surface colour as text: white on the grey in light mode, the dark page on
+          // the light grey in dark mode.
+          className: "bg-[var(--text-muted)] text-[var(--bg-surface)]",
+          armedClassName: "bg-[var(--text-secondary)] text-[var(--bg-surface)]",
+        };
+    }
+  };
+
+  /**
+   * A phone card's swipes: the binding ({@link TranslationReviewPanelProps.swipe}) resolved
+   * against the row, each side's ladder closed up over what the row cannot offer. None
+   * where the row must not be acted on — the same conditions under which its buttons are
+   * locked or absent.
+   */
+  const swipeActions = (r: TranslationRow, groupKey?: string): MobileSwipeActions | null => {
+    if (!binding || !editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+    const plan = translationReviewSwipePlan(binding, r, { canClear: onClear !== undefined });
+    if (plan.start.length === 0 && plan.end.length === 0) return null;
+    return {
+      start: plan.start.map((id) => swipeAction(r, id, groupKey)),
+      end: plan.end.map((id) => swipeAction(r, id, groupKey)),
     };
   };
 
@@ -622,7 +841,7 @@ export function TranslationReviewPanel({
     };
   };
 
-  const table = (list: TranslationRow[], group?: { name: string }) => (
+  const table = (list: TranslationRow[], group?: { key: string; name: string }) => (
     <DataTable<TranslationRow>
       rows={list}
       rowKey={(r) => r.id}
@@ -643,6 +862,7 @@ export function TranslationReviewPanel({
         : { storageKey })}
       isExpanded={(r) => r.id === openId}
       onRowClick={(r) => {
+        if (openId !== r.id) keepGroupOpen(group?.key);
         setFocusId(null);
         setOpenId((open) => (open === r.id ? null : r.id));
       }}
@@ -681,7 +901,7 @@ export function TranslationReviewPanel({
           </div>
         </div>
       )}
-      mobileSwipeActions={swipe ? swipeActions : undefined}
+      mobileSwipeActions={binding ? (r) => swipeActions(r, group?.key) : undefined}
       selection={selectionFor(list)}
     />
   );
@@ -692,6 +912,13 @@ export function TranslationReviewPanel({
     const questionId = `${baseId}-confirm-${index}`;
     const targets = editable ? unreviewedRows(g.rows) : [];
     const key = `group:${g.key}`;
+    const open = isGroupOpen(g.key);
+    // A folded group renders its header and nothing else. Its body is handed over only
+    // while it is open, or when the REVIEWER folded it — so the fold animates over the
+    // rows it hides. A group folded by the default gets none: when the default turns (a
+    // search cleared over 122 areas), the groups that close would otherwise render their
+    // grown tables for the length of the fold.
+    const body = open || groupOpen[g.key] === false;
     return (
       <Disclosure
         key={g.key}
@@ -699,10 +926,10 @@ export function TranslationReviewPanel({
         headingAs={groupHeadingAs}
         title={<span id={titleId}>{name}</span>}
         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));
+        open={open}
+        onOpenChange={(next) => {
+          setGroupOpenFor(g.key, next);
+          if (!next) setConfirming((c) => (c === g.key ? null : c));
         }}
         trailing={
           targets.length > 0 ? (
@@ -723,7 +950,7 @@ export function TranslationReviewPanel({
         }
         bodyClassName="space-y-0 px-0 pb-0 border-t border-[var(--border)]"
       >
-        {confirming === g.key && targets.length > 0 && (
+        {body && confirming === g.key && targets.length > 0 && (
           <div className="border-b border-[var(--border)] p-3">
             <AlertBanner tone="warning" size="sm">
               <div className="min-w-0 space-y-2">
@@ -764,7 +991,7 @@ export function TranslationReviewPanel({
             </AlertBanner>
           </div>
         )}
-        {table(g.rows, { name })}
+        {body && table(g.rows, { key: g.key, name })}
       </Disclosure>
     );
   };

package/src/hooks/use-search-param-state.ts

@@ -136,9 +136,24 @@ const queuedByLocation = new WeakMap<Location, QueuedQuery>();
  */
 type DataRouterProbe = { router?: { state?: { navigation?: { state?: string } } } } | null;
 const NO_DATA_ROUTER = createContext<DataRouterProbe>(null);
-const DataRouterContext: Context<DataRouterProbe> =
-  (ReactRouter as unknown as { UNSAFE_DataRouterContext?: Context<DataRouterProbe> }).UNSAFE_DataRouterContext ??
-  NO_DATA_ROUTER;
+const DataRouterContext: Context<DataRouterProbe> = readDataRouterContext();
+
+/**
+ * A static member read (so a bundler still tree-shakes the namespace), inside a `try`:
+ * a test's `vi.mock("react-router", () => ({ … }))` without the original module throws
+ * on ANY export it does not define, and it threw here at import (keksdose, 0.25.0) —
+ * the hook then runs without the refinement, as on a router without the context.
+ */
+function readDataRouterContext(): Context<DataRouterProbe> {
+  try {
+    return (
+      (ReactRouter as unknown as { UNSAFE_DataRouterContext?: Context<DataRouterProbe> }).UNSAFE_DataRouterContext ??
+      NO_DATA_ROUTER
+    );
+  } catch {
+    return NO_DATA_ROUTER;
+  }
+}
 
 /**
  * One write: `change` edits the queued query in place and says whether a param it
@@ -295,7 +310,7 @@ export type SearchParamsUpdate<V> = Partial<V> | ((prev: V) => Partial<V>);
  * The value object keeps its identity while its params do not change, so it can sit in
  * a dependency array. Requires a react-router Router.
  */
-export function useSearchParamsState<V extends Record<string, unknown>>(
+export function useSearchParamsState<V extends object>(
   fields: SearchParamFields<V>,
 ): [V, (next: SearchParamsUpdate<V>) => void] {
   const [params, write] = useQueryWriter();

package/src/i18n/german.ts

@@ -790,6 +790,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       exportCorrections: (count) => `Korrekturen exportieren (${n(count)})`,
       failed: "Das hat nicht geklappt. Bitte erneut versuchen.",
       approvedToast: (count) => (count === 1 ? "Text bestätigt" : `${n(count)} Texte bestätigt`),
+      clearedToast: (count) => (count === 1 ? "Text als ungeprüft markiert" : `${n(count)} Texte als ungeprüft markiert`),
       groupCount: (unreviewed, total) => `${n(unreviewed)} ungeprüft / ${n(total)}`,
       approveGroup: (count) => `Ungeprüfte bestätigen (${n(count)})`,
       // The group's name quoted, as `columnMapper.roleOf`'s column: it is often a key

package/src/i18n/locales/en.ts

@@ -127,6 +127,7 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
       localeProgress: (approved, total) => `${n(approved)}/${n(total)}`,
       exportCorrections: (count) => `Export corrections (${n(count)})`,
       approvedToast: (count) => (count === 1 ? "String approved" : `${n(count)} strings approved`),
+      clearedToast: (count) => (count === 1 ? "String marked unreviewed" : `${n(count)} strings marked unreviewed`),
       groupCount: (unreviewed, total) => `${n(unreviewed)} unreviewed / ${n(total)}`,
       approveGroup: (count) => `Approve unreviewed (${n(count)})`,
       confirmGroup: (count, group) =>

package/src/i18n/locales/es.ts

@@ -770,6 +770,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       exportCorrections: (count) => `Exportar correcciones (${n(count)})`,
       failed: "No ha funcionado. Inténtelo de nuevo.",
       approvedToast: (count) => (count === 1 ? "Texto aprobado" : `${n(count)} textos aprobados`),
+      clearedToast: (count) => (count === 1 ? "Texto marcado como sin revisar" : `${n(count)} textos marcados como sin revisar`),
       // "sin revisar" does not agree with the count, so one form serves both.
       groupCount: (unreviewed, total) => `${n(unreviewed)} sin revisar / ${n(total)}`,
       approveGroup: (count) => `Aprobar los sin revisar (${n(count)})`,

package/src/i18n/locales/fr.ts

@@ -787,6 +787,7 @@ export function uiKitLabelsFr(numberLocale = "fr-FR"): UiKitLabels {
       exportCorrections: (count) => `Exporter les corrections (${n(count)})`,
       failed: "Cela n’a pas fonctionné. Veuillez réessayer.",
       approvedToast: (count) => (count < 2 ? "Texte approuvé" : `${n(count)} textes approuvés`),
+      clearedToast: (count) => (count < 2 ? "Texte marqué comme non relu" : `${n(count)} textes marqués comme non relus`),
       groupCount: (unreviewed, total) =>
         `${n(unreviewed)} non ${plural(unreviewed, "relu", "relus")} / ${n(total)}`,
       approveGroup: (count) => `Approuver les non relus (${n(count)})`,

package/src/i18n/locales/hu.ts

@@ -774,6 +774,7 @@ export function uiKitLabelsHu(numberLocale = "hu-HU"): UiKitLabels {
       failed: "Ez nem sikerült. Kérjük, próbálja újra.",
       // No plural after a numeral (convention 2).
       approvedToast: (count) => (count === 1 ? "Szöveg jóváhagyva" : `${n(count)} szöveg jóváhagyva`),
+      clearedToast: (count) => (count === 1 ? "Szöveg ellenőrizetlenként megjelölve" : `${n(count)} szöveg ellenőrizetlenként megjelölve`),
       groupCount: (unreviewed, total) => `${n(unreviewed)} ellenőrizetlen / ${n(total)}`,
       approveGroup: (count) => `Ellenőrizetlenek jóváhagyása (${n(count)})`,
       // Opens with the quoted name, as `filePicker`'s refusals: no case ending ("-ban/-ben")

package/src/i18n/locales/it.ts

@@ -774,6 +774,7 @@ export function uiKitLabelsIt(numberLocale = "it-IT"): UiKitLabels {
       exportCorrections: (count) => `Esporta le correzioni (${n(count)})`,
       failed: "Non ha funzionato. Riprovi.",
       approvedToast: (count) => (count === 1 ? "Testo approvato" : `${n(count)} testi approvati`),
+      clearedToast: (count) => (count === 1 ? "Testo segnato come non rivisto" : `${n(count)} testi segnati come non rivisti`),
       groupCount: (unreviewed, total) =>
         `${n(unreviewed)} ${plural(unreviewed, "non rivisto", "non rivisti")} / ${n(total)}`,
       approveGroup: (count) => `Approva i non rivisti (${n(count)})`,

package/src/i18n/locales/zh.ts

@@ -749,6 +749,7 @@ export function uiKitLabelsZh(numberLocale = "zh-CN"): UiKitLabels {
       exportCorrections: (count) => `导出更正（${n(count)}）`,
       failed: "操作未成功，请重试。",
       approvedToast: (count) => (count === 1 ? "文本已通过" : `已通过 ${n(count)} 条文本`),
+      clearedToast: (count) => (count === 1 ? "文本已标记为未审校" : `已将 ${n(count)} 条文本标记为未审校`),
       groupCount: (unreviewed, total) => `未审校 ${n(unreviewed)} / ${n(total)}`,
       approveGroup: (count) => `通过未审校项（${n(count)}）`,
       confirmGroup: (count, group) =>

package/src/i18n/review.ts

@@ -194,6 +194,7 @@ export const KIT_LABEL_SAMPLES: Readonly<Record<string, readonly (readonly unkno
   "translationReview.scope": [["{{areas}}"]],
   "translationReview.exportCorrections": [[0], [1], [3]],
   "translationReview.approvedToast": one,
+  "translationReview.clearedToast": one,
   "translationReview.groupCount": [
     [1, 12],
     [3, 12],

package/src/index.ts

@@ -395,6 +395,10 @@ export {
   groupTranslationRows,
   unreviewedRows,
   reviewUndo,
+  // 0.26: swipe bindings for an app's Settings → Interaction (keksdose #377 rework).
+  TRANSLATION_REVIEW_SWIPE_ACTIONS,
+  DEFAULT_TRANSLATION_REVIEW_SWIPE,
+  translationReviewSwipePlan,
 } from "./lib/translation-review";
 export type {
   TranslationVerdict,
@@ -411,6 +415,8 @@ export type {
   TranslationCorrection,
   TranslationRowGroup,
   TranslationReviewUndo,
+  TranslationReviewSwipeAction,
+  TranslationReviewSwipeBinding,
 } from "./lib/translation-review";
 export {
   TranslationReviewPanel,