@eifi1/ui-kit 0.44.0 → 0.46.0

package/src/components/translation-review.tsx

@@ -46,6 +46,7 @@ import type { TranslationReviewLabels } from "./translation-review-labels";
 import { ReviewStatusChip, TranslationProgress } from "./translation-review-parts";
 import { Button } from "./button";
 import { IconButton } from "./icon-button";
+import { DEFAULT_ROW_ACTIONS_LABELS, rowActionsColumn, type RowAction } from "./row-actions";
 import { Select } from "./select";
 import { COMMIT_EXCEPT_BILLING, useWriteLock } from "./write-lock";
 
@@ -194,13 +195,23 @@ export interface TranslationReviewPanelProps {
    * DataTable's swipe sides (`mobileSwipeActions`) on {@link SwipeableRow}: the same
    * gesture, the same feedback, and the same keyboard path — every swipe is also a real
    * button, read out and reachable by Tab, so the gesture is a shortcut and never the only
-   * way. A row has no swipe while the editor under it is open, while its own write is out,
-   * under a {@link WriteLockProvider} lock, in a `readOnly` locale, and toward "Approve"
-   * where there is nothing to approve (a missing string, an approved one). A reviewer
-   * limited to `areas` never sees a row outside them, so never swipes one.
+   * way. A row has no swipe while its own write is out (a swipe's, a button's, or the open
+   * editor's own), under a {@link WriteLockProvider} lock, in a `readOnly` locale, and
+   * toward "Approve" where there is nothing to approve (a missing string, an approved one).
+   * A reviewer limited to `areas` never sees a row outside them, so never swipes one.
    *
-   * Off by default, so no existing page gains a gesture on the bump. Phones only; the
-   * desktop table keeps its approve button.
+   * An OPEN row swipes too, on its top line (keksdose live #416, Marcel: *"The swipe shall
+   * still be possible since it is faster than scrolling down to the buttons"*), as
+   * DataTable's open card does since 0.40: the editor below is outside the gesture, and a
+   * swipe neither toggles it shut nor resets it. A swipe acts on the STORED string, as the
+   * row's buttons do — Approve approves what the locale says, not the editor's draft — and
+   * the editor stays open with whatever was typed in it; "Needs a change" puts the cursor
+   * back at the end of that draft.
+   *
+   * Off by default, so no existing page gains a gesture on the bump. The gesture is the
+   * phone's; on a wide screen the binding is the row's actions column instead (0.46,
+   * keksdose dev#598): Approve where the row can take it, bound or not, then the bound
+   * `edit` and `clear`, each once — under a write lock they stay and say why.
    *
    * 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
@@ -218,8 +229,8 @@ export interface TranslationReviewPanelProps {
    * `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.
+   * no side swipes in a `readOnly` locale, under a write lock, or while the row's write
+   * (or its open editor's) is 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
@@ -482,6 +493,8 @@ export function TranslationReviewPanel({
   // (docs/billing-harmonization.md §12.13, §12.36): the buttons take
   // COMMIT_EXCEPT_BILLING, and the swipes read the lock as they see it.
   const lock = useWriteLock(COMMIT_EXCEPT_BILLING);
+  // The desktop actions column's plain-text name (dev#598), the provider's "Actions".
+  const rowActionLabels = useKitLabels("rowActions", DEFAULT_ROW_ACTIONS_LABELS);
   // The phone layout DataTable switches its layout on, so "a phone" means the same here
   // as in the table, at every text size: `usePhoneLayout()` itself (§10.4; 0.32.1,
   // keksdose's 0.32 report — `!useBreakpoint("md")` could disagree with it at 767.5 px).
@@ -514,6 +527,21 @@ export function TranslationReviewPanel({
   const [failure, setFailure] = useState<ReactNode>(null);
   const busy = queued.length > 0;
   const isQueued = (key: string) => queued.includes(key);
+  // The rows whose open editor has a write of its own out: their swipes stand down until
+  // it is answered, as for a write in the queue (0.46, keksdose live #416).
+  const [editorWrites, setEditorWrites] = useState<ReadonlySet<string>>(() => new Set());
+  const whileEditorWrites = async (rowId: string, write: () => MaybePromise) => {
+    setEditorWrites((prev) => new Set(prev).add(rowId));
+    try {
+      await write();
+    } finally {
+      setEditorWrites((prev) => {
+        const next = new Set(prev);
+        next.delete(rowId);
+        return next;
+      });
+    }
+  };
 
   const rows = useMemo(
     () => (areas ? rowsProp.filter((row) => keyInAreas(row.key, areas, inArea)) : [...rowsProp]),
@@ -650,11 +678,11 @@ export function TranslationReviewPanel({
   /** 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) => {
+  const clearRow = async (row: TranslationRow, origin: TranslationReviewOrigin = "swipe") => {
     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 }));
+    const ok = await run(`row:${row.id}`, () => clear(keys, { origin, toasted: undoOn }));
     if (ok && undoOn) sayDone([row], row.key, true);
   };
 
@@ -662,7 +690,7 @@ export function TranslationReviewPanel({
    *  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 });
+    await whileEditorWrites(row.id, () => onSave?.([write], { origin: "editor", toasted }));
     if (toasted) sayDone([row], row.key);
   };
 
@@ -763,7 +791,51 @@ export function TranslationReviewPanel({
       sortBy: (r) => REVIEW_STATUSES.indexOf(r.status),
     },
   ];
-  if (editable) {
+  if (editable && binding) {
+    // keksdose dev#598 item 2: with a binding, the desktop row offers what the card's
+    // swipes offer — `clear` was reachable only by a swipe. Approve first on every row
+    // that can take it, bound or not (the desktop always had it), then the binding's
+    // actions, end side first, each once. The swipe's words, glyphs and handlers; unlike
+    // the swipe, a locked row keeps its buttons and says why (`commit`), and a row whose
+    // write is out shows it in flight. Hidden on the phone, where the swipes are.
+    columns.push(
+      rowActionsColumn<TranslationRow>({
+        key: "actions",
+        headerText: rowActionLabels.actions,
+        name: (r) => r.key,
+        tooltipSide: "start",
+        actions: (r) =>
+          translationReviewSwipePlan(
+            { end: ["approve", ...(binding.end ?? []), ...(binding.start ?? [])] },
+            r,
+            { canClear: onClear !== undefined },
+          ).end.map((id): RowAction => {
+            const swipe = swipeAction(r, id);
+            // `edit` only opens the editor, whose own Save is the commit.
+            const writes = id !== "edit";
+            return {
+              key: id,
+              // `edit` opens the editor: its own name, apart from the editor's submit
+              // ("Needs a change"), which saves (keksdose B2/S3).
+              label: id === "edit" ? (r.text === "" ? labels.suggestRow : labels.flagRow) : swipe.label,
+              icon: <>{swipe.icon}</>,
+              tone: "muted",
+              commit: writes ? COMMIT_EXCEPT_BILLING : undefined,
+              pending: writes && isQueued(`row:${r.id}`),
+              disabled: busy,
+              onSelect:
+                id === "approve"
+                  ? () => void approve(`row:${r.id}`, [r], "row", r.key)
+                  : id === "clear"
+                    ? () => void clearRow(r, "row")
+                    : // The row's group stays open while its editor is (`keepGroupOpen`).
+                      () => swipeAction(r, id, groups?.find((g) => g.rows.includes(r))?.key).onCommit(),
+            };
+          }),
+        column: { mobileHidden: true },
+      }),
+    );
+  } else if (editable) {
     columns.push({
       key: "approve",
       header: <span className="sr-only">{labels.approve}</span>,
@@ -801,6 +873,7 @@ export function TranslationReviewPanel({
     switch (id) {
       case "approve":
         return {
+          id,
           label: labels.approve,
           icon: <Check className="size-4" aria-hidden />,
           onCommit: () => void approve(`row:${r.id}`, [r], "swipe", r.key),
@@ -810,6 +883,7 @@ export function TranslationReviewPanel({
         };
       case "edit":
         return {
+          id,
           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"
@@ -818,11 +892,19 @@ export function TranslationReviewPanel({
             keepGroupOpen(groupKey);
             setOpenId(r.id);
             setFocusId(r.id);
+            // On a row already open (#416) the editor is mounted and keeps its draft:
+            // the cursor goes to the end of its wording now.
+            if (openId === r.id) {
+              const field = rootRef.current?.querySelector<HTMLTextAreaElement>("[data-review-wording]");
+              field?.focus();
+              field?.setSelectionRange(field.value.length, field.value.length);
+            }
           },
           tone: missing ? "brand" : "danger",
         };
       case "clear":
         return {
+          id,
           label: labels.reset,
           icon: <RotateCcw className="size-4" aria-hidden />,
           onCommit: () => void clearRow(r),
@@ -841,7 +923,7 @@ export function TranslationReviewPanel({
    * locked or absent.
    */
   const swipeActions = (r: TranslationRow, groupKey?: string): MobileSwipeActions | null => {
-    if (!binding || !editable || lock.locked || isQueued(`row:${r.id}`)) return null;
+    if (!binding || !editable || lock.locked || isQueued(`row:${r.id}`) || editorWrites.has(r.id)) return null;
     const plan = translationReviewSwipePlan(binding, r, { canClear: onClear !== undefined });
     if (plan.start.length === 0 && plan.end.length === 0) return null;
     return {
@@ -908,7 +990,11 @@ export function TranslationReviewPanel({
           readOnly={!editable}
           focusWording={focusId === r.id}
           onSave={onSave ? (write) => saveFromEditor(r, write) : undefined}
-          onClear={onClear ? (key) => onClear([key], { origin: "editor", toasted: false }) : undefined}
+          onClear={
+            onClear
+              ? (key) => whileEditorWrites(r.id, () => onClear([key], { origin: "editor", toasted: false }))
+              : undefined
+          }
           onClose={() => {
             setOpenId(null);
             setFocusId(null);
@@ -935,6 +1021,8 @@ export function TranslationReviewPanel({
         </div>
       )}
       mobileSwipeActions={binding ? (r) => swipeActions(r, group?.key) : undefined}
+      // The desktop's buttons for the binding are the panel's own "actions" column.
+      desktopSwipeActions={false}
       selection={selectionFor(list)}
     />
   );

package/src/components/write-lock-labels.ts

@@ -6,4 +6,5 @@ import type { WriteLockLabels } from "./write-lock";
 
 export const DEFAULT_WRITE_LOCK_LABELS: WriteLockLabels = {
   reason: "You can view this but not change it.",
+  offline: "Needs a connection.",
 };

package/src/components/write-lock.tsx

@@ -8,6 +8,8 @@ import { DEFAULT_WRITE_LOCK_LABELS } from "./write-lock-labels";
 export interface WriteLockLabels {
   /** The tooltip of a locked commit when the provider gives no `reason`. */
   reason: string;
+  /** 0.46 (kastlan K4): the reason of {@link useOfflineWriteLock} — "Needs a connection." */
+  offline: string;
 }
 
 // Defined in ./write-lock-labels, which holds no component code (0.34, KS U8).
@@ -15,13 +17,13 @@ export { DEFAULT_WRITE_LOCK_LABELS };
 
 /**
  * What kind of lock a source is (docs/billing-harmonization.md §12.36, ui-kit 0.33).
- * `"demo"` (the read-only demo, `demo.writeLocked`) and `"billing"` (a lapsed plan,
- * `billing.lockReason`) are the kit's; an app names its own — Kurvenschmiede's
+ * `"demo"` (the read-only demo, `demo.writeLocked`), `"billing"` (a lapsed plan,
+ * `billing.lockReason`) and, since 0.46, `"offline"` ({@link OFFLINE_LOCK}) are the kit's; an app names its own — Kurvenschmiede's
  * `"access"` (a curve shared to view) and `"customer"` (an account that owns nothing).
  * A control exempts itself from a kind with {@link CommitScope}; a source without a
  * kind is never exempted.
  */
-export type WriteLockKind = "demo" | "billing" | (string & {});
+export type WriteLockKind = "demo" | "billing" | "offline" | (string & {});
 
 /** One locked source, as the provider holds it: its kind and its one sentence. */
 export interface WriteLockHold {
@@ -50,6 +52,19 @@ export type CommitScope = boolean | { readonly except: readonly WriteLockKind[]
  *  so the call sites read alike. */
 export const COMMIT_EXCEPT_BILLING = { except: ["billing"] } as const;
 
+/**
+ * 0.46 (kastlan K4, docs/local-first-harmonization.md D4): the kind of the lock "this
+ * device has no connection". An action that only the server can do (numbers, money,
+ * mail, people, settings) is locked with "Needs a connection." while offline; a control
+ * that writes to the device's copy and syncs later takes {@link COMMIT_EXCEPT_OFFLINE}.
+ * Feed it with {@link useOfflineWriteLock}.
+ */
+export const OFFLINE_LOCK = "offline" as const;
+
+/** Every lock but the offline one: the scope of a control that works on the device's copy
+ *  (it is still locked for a demo or a lapsed plan). */
+export const COMMIT_EXCEPT_OFFLINE = { except: [OFFLINE_LOCK] } as const;
+
 /**
  * What {@link useWriteLock} returns: whether commits are locked here as a control with
  * the scope asked for sees it, and why.
@@ -218,3 +233,21 @@ export function useCommitReason(commit: CommitScope | undefined, own: ReactNode)
   const lock = writeLockFor(useContext(WriteLockContext), commit);
   return lock.locked ? lock.reason : own;
 }
+
+/**
+ * 0.46 (kastlan K4): the offline lock as one source of `combineWriteLocks` —
+ * `{ locked: offline, kind: "offline", reason: writeLock.offline }` ("Needs a
+ * connection.", seven languages). `offline` is the app's own reading of the connection
+ * (`!navigator.onLine`, or its better guess); the kit does not watch the network here.
+ * List it after the demo's and billing's sources: the server refuses those first.
+ *
+ *     <WriteLockProvider {...combineWriteLocks([demo, billing, useOfflineWriteLock(!online)])}>
+ *     <Button commit={COMMIT_EXCEPT_OFFLINE}>Save handover</Button>
+ */
+export function useOfflineWriteLock(
+  offline: boolean,
+  labels?: LabelOverride<WriteLockLabels>,
+): { locked: boolean; kind: typeof OFFLINE_LOCK; reason: string } {
+  const words = useKitLabels("writeLock", DEFAULT_WRITE_LOCK_LABELS, labels);
+  return { locked: offline, kind: OFFLINE_LOCK, reason: words.offline };
+}

package/src/data-table.ts

@@ -25,6 +25,7 @@ export type {
   DataTableDensity,
   DataTableChrome,
   DataTableRowAction,
+  DataTableDesktopSwipeActions,
 } from "./components/data-table";
 export * from "./components/data-table-cells";
 export { useTableUrlState, readTableUrlState } from "./components/use-table-state";

package/src/feedback/feedback-row-detail.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 import type { MouseEvent, ReactNode } from "react";
-import { Download, ExternalLink, FileText, RotateCcw } from "lucide-react";
+import { Download, FileText, RotateCcw } from "lucide-react";
 import { AuthedImage } from "../components/authed-image";
 import { CopyButton } from "../components/copy-button";
 import { TextLink } from "../components/text-link";
@@ -75,7 +75,7 @@ import { DEFAULT_FEEDBACK_COMMENTS_LABELS } from "./feedback-thread-parts-labels
  * `showSubject={false}` leaves it out), **Description** (the body; the author's
  * Edit while OPEN / READY / IN_PROGRESS), **URL**, **Attachment**, **Replies** (0.38,
  * §9.7: the timeline, the admin's reply composer with its status picker and the nudge,
- * Rework, Open page — on a row without `replies`, a server before 0.38, the frozen
+ * Rework — on a row without `replies`, a server before 0.38, the frozen
  * **Outcome** read-only in its place), **Comments** (0.38: the app's
  * `FeedbackCommentThread`, when passed), **Send for rework** (only while reworking) and
  * **Status** (with the **Visible to others** switch when `onPublicChange` is passed).
@@ -143,7 +143,9 @@ export interface FeedbackDetailLabels {
   outcomePlaceholder: string;
   /** The button that opens section 5 on an answered row. de-CH: "Nacharbeit" */
   rework: string;
-  /** The link to the page the report was filed on. de-CH: "Seite öffnen" */
+  /** The link to the page the report was filed on. de-CH: "Seite öffnen"
+   *  @deprecated 0.46 — the Replies section's "Open page" button is gone (keksdose live #449:
+   *  it repeated the URL section's link); removed in 0.47. Unused, kept for one release. */
   openPage: string;
   /** Section 5's heading. de-CH: "Zur Nacharbeit senden" */
   reworkTitle: string;
@@ -853,27 +855,20 @@ export function FeedbackRowDetail({
               commit={commit}
             />
           )}
-          {((canRework && !reworking) || pageHref) && (
+          {/* No "Open page" button here since 0.46 (keksdose live #449): the URL section
+              above already links the page, with the path on screen. */}
+          {canRework && !reworking && (
             <div className="flex flex-wrap gap-2">
-              {canRework && !reworking && (
-                <Button
-                  type="button"
-                  variant="secondary"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    setReworking(true);
-                  }}
-                >
-                  <RotateCcw className="size-3.5" aria-hidden /> {labels.rework}
-                </Button>
-              )}
-              {pageHref && (
-                // A real href (keksdose dev #451): middle-click and ⌘/Ctrl-click are
-                // the browser's, and only a link has them.
-                <Button href={pageHref} variant="secondary" onClick={(event) => event.stopPropagation()}>
-                  <ExternalLink className="size-3.5" aria-hidden /> {labels.openPage}
-                </Button>
-              )}
+              <Button
+                type="button"
+                variant="secondary"
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setReworking(true);
+                }}
+              >
+                <RotateCcw className="size-3.5" aria-hidden /> {labels.rework}
+              </Button>
             </div>
           )}
         </div>

package/src/feedback/feedback-swipe.tsx

@@ -1,7 +1,7 @@
 import { Ban, Check, ChevronsRight } from "lucide-react";
 import type { SwipeAction } from "../components/swipeable-row";
 import type { MobileSwipeActions } from "../components/data-table";
-import { nextFeedbackStatus, type FeedbackStatus } from "./feedback-vocabulary";
+import { nextFeedbackStatus, visibleFeedbackStatuses, type FeedbackStatus } from "./feedback-vocabulary";
 import type { FeedbackStatusLabels } from "./feedback-labels";
 import type { FeedbackStatusChange, FeedbackStatusRow } from "./feedback-status-undo";
 
@@ -89,9 +89,12 @@ function panel(
   { change, labels }: FeedbackSwipeOptions,
 ): SwipeAction {
   const onCommit = () => change(row, target);
+  // `id`: the binding's own (0.46, dev#598) — DataTable's desktop column tells the
+  // actions apart by it, and `feedbackSwipeOmitShown` reads the target from it.
   switch (id) {
     case "advance":
       return {
+        id,
         onCommit,
         label: labels[target],
         icon: <ChevronsRight className="size-4" aria-hidden />,
@@ -99,6 +102,7 @@ function panel(
       };
     case "done":
       return {
+        id,
         onCommit,
         label: labels.DONE,
         icon: <Check className="size-4" aria-hidden />,
@@ -106,6 +110,7 @@ function panel(
       };
     case "wont_do":
       return {
+        id,
         onCommit,
         label: labels.WONT_DO,
         icon: <Ban className="size-4" aria-hidden />,
@@ -163,3 +168,25 @@ export function feedbackSwipePlan(
   if (start.length === 0 && end.length === 0) return null;
   return { start, end };
 }
+
+/**
+ * For DataTable's `desktopSwipeActions.omit` beside the kit's status cell (0.46, keksdose
+ * dev#598 item 3): `true` for a planned action whose target status the cell already
+ * offers as its own icon — {@link visibleFeedbackStatuses}, the next and the previous step
+ * and the off-chain verdicts — so the desktop column adds only what the cell lacks ("Done"
+ * where DONE is more than one step away). Read from the action's `id` and the row, never
+ * from the translated label; an action without one of {@link FEEDBACK_SWIPE_ACTIONS} as its
+ * id (an app's own) is kept.
+ *
+ * ```tsx
+ * <DataTable
+ *   mobileSwipeActions={(row) => feedbackSwipePlan(binding, row, options)}
+ *   desktopSwipeActions={{ omit: feedbackSwipeOmitShown, name: (row) => row.title }}
+ * />
+ * ```
+ */
+export function feedbackSwipeOmitShown(action: SwipeAction, row: FeedbackStatusRow): boolean {
+  if (action.id === undefined) return false;
+  const target = targetOf(action.id, row.status);
+  return target !== null && visibleFeedbackStatuses(row.status).includes(target);
+}

package/src/i18n/defaults.ts

@@ -100,6 +100,10 @@ import { DEFAULT_ROW_ACTIONS_LABELS } from "../components/row-actions-labels";
 import { DEFAULT_APP_SHELL_MORE_LABELS } from "../shell/app-shell-labels";
 import { DEFAULT_ACCOUNT_STATE_LABELS } from "../components/account-chips-labels";
 import { DEFAULT_ADMIN_AREA_LABELS } from "../admin/admin-area-labels";
+import { DEFAULT_MAIL_TEST_CARD_LABELS } from "../admin/mail-test-card-labels";
+import { DEFAULT_SIGN_OUT_PENDING_DIALOG_LABELS } from "../offline/sign-out-pending-dialog-labels";
+import { DEFAULT_PWA_UPDATE_PROMPT_LABELS } from "../offline/pwa-update-prompt-labels";
+import { DEFAULT_SHARED_COMPUTER_LABELS } from "../offline/shared-computer-labels";
 import { DEFAULT_TOP_BAR_PARTS_LABELS } from "../shell/top-bar-parts-labels";
 import { DEFAULT_SHARE_CARD_LABELS } from "../components/share-card-labels";
 import { DEFAULT_REAUTH_DIALOG_LABELS } from "../components/reauth-dialog-labels";
@@ -262,4 +266,8 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   notifications: DEFAULT_NOTIFICATIONS_LABELS,
   adminArea: DEFAULT_ADMIN_AREA_LABELS,
   topBarParts: DEFAULT_TOP_BAR_PARTS_LABELS,
+  mailTestCard: DEFAULT_MAIL_TEST_CARD_LABELS,
+  signOutPending: DEFAULT_SIGN_OUT_PENDING_DIALOG_LABELS,
+  pwaUpdate: DEFAULT_PWA_UPDATE_PROMPT_LABELS,
+  sharedComputer: DEFAULT_SHARED_COMPUTER_LABELS,
 };