@eifi1/ui-kit 0.25.1 → 0.26.0

package/src/components/translation-review.tsx

@@ -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;
 }
 
@@ -181,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
@@ -435,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
@@ -546,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
@@ -578,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);
   };
 
   /**
@@ -713,29 +757,22 @@ 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, groupKey?: string): 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"
@@ -745,10 +782,40 @@ export function TranslationReviewPanel({
             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)),
     };
   };
 
@@ -834,7 +901,7 @@ export function TranslationReviewPanel({
           </div>
         </div>
       )}
-      mobileSwipeActions={swipe ? (r) => swipeActions(r, group?.key) : undefined}
+      mobileSwipeActions={binding ? (r) => swipeActions(r, group?.key) : undefined}
       selection={selectionFor(list)}
     />
   );

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,

package/src/lib/translation-review.ts

@@ -512,6 +512,115 @@ export function dropReviews<T extends TranslationReviewKey>(
   return prev.filter((r) => !gone.has(`${r.locale}|${r.key}`));
 }
 
+// ── Swipe bindings ──────────────────────────────────────────────────────────────
+
+/**
+ * What a phone card's swipe can be bound to in `TranslationReviewPanel`'s `swipe`
+ * (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 there — per side, a primary
+ * action at the first threshold and a secondary one at a longer drag — and lists each
+ * surface's ids in its `SWIPE_ACTIONS`; this is the translation list's, in the order a
+ * settings page offers them.
+ *
+ * - `approve` — the string is right as it stands. With the panel's Undo toast.
+ * - `edit` — open the editor with the cursor in the wording: "Needs a change" (or
+ *   "Suggest translation" on a missing string). Writes nothing; the editor does.
+ * - `clear` — take the verdict back: unreviewed again. With the Undo toast, which stores
+ *   the verdict again.
+ *
+ * THERE IS NO SEPARATE "needs a change". The editor has no verdict to preselect: Approve
+ * and "Needs a change" stand side by side in it, and "Needs a change" takes a note or a
+ * different wording — a verdict without either tells whoever fixes the string nothing, so
+ * a swipe never sends one blind (0.25). The one honest thing a "needs a change" swipe can
+ * do is therefore open the editor with the cursor in the wording — which is `edit`, and
+ * `edit` already says "Needs a change" on the card. A second id doing the same would arm
+ * a second threshold that does what the first already did: the duplicate keksdose's
+ * `resolveSwipePlan` drops for exactly that reason.
+ */
+export const TRANSLATION_REVIEW_SWIPE_ACTIONS = ["approve", "edit", "clear"] as const;
+
+/** One of {@link TRANSLATION_REVIEW_SWIPE_ACTIONS}. */
+export type TranslationReviewSwipeAction = (typeof TRANSLATION_REVIEW_SWIPE_ACTIONS)[number];
+
+/**
+ * Which swipe does what on a phone card — `TranslationReviewPanel`'s `swipe`. Each side is
+ * an ordered ladder, exactly as `SwipeableRow` and DataTable's `mobileSwipeActions` model
+ * one: index 0 commits at the first threshold, index 1 at the longer drag (and so on — the
+ * thresholds spread evenly over the card's width). A side left out, or empty, does not
+ * swipe.
+ *
+ * LOGICAL SIDES: `end` is a drag toward the reading end of the line — right in a
+ * left-to-right page, left in a right-to-left one — and `start` the other way, so one
+ * binding holds in both directions. An app whose settings store physical sides (keksdose's
+ * `right`/`left`) hands `right` as `end` for a left-to-right page.
+ */
+export interface TranslationReviewSwipeBinding {
+  /** A drag toward the reading START, nearest threshold first. */
+  start?: readonly TranslationReviewSwipeAction[];
+  /** A drag toward the reading END, nearest threshold first. */
+  end?: readonly TranslationReviewSwipeAction[];
+}
+
+/** What `swipe={true}` means — 0.25's fixed mapping: approve toward the end, open the
+ *  editor ("Needs a change") toward the start. A settings page's "reset" goes back here. */
+export const DEFAULT_TRANSLATION_REVIEW_SWIPE: TranslationReviewSwipeBinding = Object.freeze({
+  start: Object.freeze(["edit"] as const),
+  end: Object.freeze(["approve"] as const),
+});
+
+/** The ladders one row actually offers, from a {@link TranslationReviewSwipeBinding}. */
+export interface TranslationReviewSwipePlan {
+  start: TranslationReviewSwipeAction[];
+  end: TranslationReviewSwipeAction[];
+}
+
+/**
+ * The binding resolved against one row — keksdose's `resolveSwipePlan`, for this list.
+ * An id the row cannot offer DROPS OUT and the ladder closes up behind it, so the second
+ * stage becomes the first rather than the side going dead behind an unreachable first
+ * stage (or arming a threshold that does nothing):
+ *
+ * - `approve`: not on a missing string (nothing to approve) or an approved one (it would
+ *   say it again) — the rows that have no approve button either;
+ * - `clear`: not without `canClear` (the app passed no `onClear`), and not on a row with
+ *   no verdict to take back (unreviewed; missing with no suggestion);
+ * - `edit`: on every row;
+ * - an id named twice on one side: the second time (a longer drag to the same effect);
+ * - an id this version does not know (a binding stored by another version, an app's own
+ *   "none" slot): dropped like one that does not apply.
+ *
+ * Only what the ROW decides. Whether the panel may write at all — `readOnly`, no
+ * `onSave`, a write lock, the row's own write still out — is the panel's, and then no
+ * side swipes.
+ */
+export function translationReviewSwipePlan(
+  binding: TranslationReviewSwipeBinding,
+  row: TranslationRow,
+  { canClear = false }: { canClear?: boolean } = {},
+): TranslationReviewSwipePlan {
+  const offers = (id: TranslationReviewSwipeAction): boolean => {
+    switch (id) {
+      case "approve":
+        return row.text !== "" && row.status !== "approved";
+      case "edit":
+        return true;
+      case "clear":
+        return canClear && row.review !== null;
+      default:
+        return false;
+    }
+  };
+  const side = (ids: readonly TranslationReviewSwipeAction[] | undefined): TranslationReviewSwipeAction[] => {
+    const out: TranslationReviewSwipeAction[] = [];
+    for (const id of ids ?? []) {
+      if (!out.includes(id) && offers(id)) out.push(id);
+    }
+    return out;
+  };
+  return { start: side(binding.start), end: side(binding.end) };
+}
+
 // ── Export ──────────────────────────────────────────────────────────────────────
 
 /**

package/tokens.css

@@ -213,6 +213,9 @@
      journey to the database, this one an ACTION's outcome. Emerald rather than the
      money teal, so a "resolved" chip cannot be misread as an inflow. */
   --success: #047857;             /* emerald-700 */
+  /* Text on a `--success` fill (0.26: a swipe's approve panel) — white here, the
+     darkest emerald in dark mode, where the fill is a pastel and white text failed. */
+  --success-contrast: #ffffff;
   --success-border: #6ee7b7;      /* emerald-300 */
   --success-bg: #d1fae5;          /* emerald-100 */
 }
@@ -237,6 +240,7 @@
   --info-bg: rgba(12, 74, 110, 0.25);
 
   --success: #6ee7b7;             /* emerald-300 */
+  --success-contrast: #022c22;    /* emerald-950 */
   --success-border: rgba(4, 120, 87, 0.6);
   --success-bg: rgba(6, 78, 59, 0.25);
 }