@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/components/translation-review-editor.tsx

@@ -1,290 +0,0 @@
-import { useEffect, useRef, useState } from "react";
-import type { ReactNode } from "react";
-
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { cn } from "../lib/cn";
-import { useDayFormatter } from "../lib/day-format";
-import { placeholderTokens, reviewWrite } from "../lib/translation-review";
-import type {
-  TranslationReviewKey,
-  TranslationReviewWrite,
-  TranslationRow,
-  TranslationVerdict,
-} from "../lib/translation-review";
-import { AlertBanner } from "./alert-banner";
-import { Caption, SectionLabel } from "./text";
-import { DEFAULT_TRANSLATION_REVIEW_LABELS } from "./translation-review-labels";
-import type { TranslationReviewLabels } from "./translation-review-labels";
-import { Button } from "./button";
-import { Textarea } from "./textarea";
-import { COMMIT_EXCEPT_BILLING } from "./write-lock";
-
-/** A callback may return a promise: resolve and the editor closes, reject and it stays
- *  open with the error. */
-type MaybePromise = void | Promise<unknown>;
-
-export interface TranslationReviewEditorProps {
-  row: TranslationRow;
-  /** The reference language's own name ("English", "Deutsch") — the app's choice of
-   *  reference, so the app's word for it. */
-  referenceLabel: ReactNode;
-  /** The reviewed language's own name ("Français"). */
-  localeLabel: ReactNode;
-  /** Store a verdict. Left out (or `readOnly`): the editor shows the row and its last
-   *  verdict, with no fields and no actions. */
-  onSave?: (write: TranslationReviewWrite) => MaybePromise;
-  /** Clear the verdict — back to unreviewed. Left out: no reset button. */
-  onClear?: (key: TranslationReviewKey) => MaybePromise;
-  /** The Cancel button — and called after a save or a reset resolves, so the panel
-   *  that opened the editor closes it. */
-  onClose?: () => void;
-  /** Look, do not touch: a locale the viewer may read but not review. */
-  readOnly?: boolean;
-  /**
-   * 0.25: put the cursor in the wording field when the editor opens, at the end of the
-   * text. The panel sets it when a phone card is swiped toward "Needs a change" (keksdose
-   * live #377): that swipe opens the editor to be written in, and a reviewer who has just
-   * said "this is wrong" should not have to find the field first. Not for an editor
-   * opened by a tap — that one may only be opened to read.
-   */
-  focusWording?: boolean;
-  /** How the verdict's date reads. Default (0.52): the `<UiKitProvider formatDate>` when
-   *  the app set one (its date preference; the day sits in a sentence, so no weekday), else
-   *  the kit's `formatDate`, medium, in the provider's locale and `timeZone`. An empty
-   *  answer falls back to the kit's. */
-  formatDate?: (iso: string) => string;
-  /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */
-  formatError?: (error: unknown) => ReactNode;
-  className?: string;
-  labels?: LabelOverride<TranslationReviewLabels>;
-}
-
-/** The wording a verdict was given on, under the line that says it changed. */
-function Then({ label, text }: { label: string; text: string }) {
-  return (
-    <div className="mt-1.5 min-w-0">
-      <span className="text-xs font-medium">{label}</span>
-      <p className="whitespace-pre-line break-words text-secondary">{text}</p>
-    </div>
-  );
-}
-
-/**
- * One string, opened: the reference beside the translation, what changed since the last
- * verdict, what a machine can see is wrong (the placeholders), and the two things a
- * reviewer can say about it — keksdose's and kastlan's `translation-review-editor.tsx`.
- *
- * "Better wording" opens on the CURRENT text rather than empty, because the usual
- * correction is a word or an ending, and retyping a sentence to change one word is how
- * new mistakes get in. It is sent only with "Needs a change" — approving says the text is
- * fine as it stands. A "Needs a change" with neither a note nor a different wording tells
- * whoever fixes it nothing, so it takes one of the two.
- *
- * A MISSING string (kastlan: the locale lacks the key) cannot be approved — there is
- * nothing to approve. Its field starts empty and is the translation to add; the verdict
- * is NEEDS_CHANGE on the empty text, which the export hands a developer as the string to
- * add.
- *
- * Every action waits for its callback: the buttons hold while the promise is out, a
- * resolution closes the editor through `onClose`, and a rejection keeps it open with what
- * was typed and the error under the buttons.
- *
- * Each verdict is a `commit` exempt from billing (`COMMIT_EXCEPT_BILLING`, 0.33): a review
- * is an admin route, which a lapsed plan never locks (docs/billing-harmonization.md
- * §12.13, §12.36); a demo's lock still holds it.
- */
-export function TranslationReviewEditor({
-  row,
-  referenceLabel,
-  localeLabel,
-  onSave,
-  onClear,
-  onClose,
-  readOnly = false,
-  focusWording = false,
-  formatDate: formatDateProp,
-  formatError,
-  className,
-  labels: labelsProp,
-}: TranslationReviewEditorProps) {
-  const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
-  const date = useDayFormatter(formatDateProp);
-  const review = row.review;
-  const missing = row.text === "";
-  const editable = !readOnly && onSave !== undefined;
-  const [suggestion, setSuggestion] = useState(review?.suggestion ?? row.text);
-  const [note, setNote] = useState(review?.note ?? "");
-  const [busy, setBusy] = useState<"approve" | "flag" | "clear" | null>(null);
-  const [failure, setFailure] = useState<ReactNode>(null);
-  const wordingRef = useRef<HTMLTextAreaElement>(null);
-  // On mount only: the prop says how the editor was OPENED, not where focus belongs
-  // for the rest of its life.
-  const focusOnOpen = useRef(focusWording && editable);
-  useEffect(() => {
-    const field = wordingRef.current;
-    if (!focusOnOpen.current || !field) return;
-    field.focus();
-    field.setSelectionRange(field.value.length, field.value.length);
-  }, []);
-
-  const canFlag = note.trim() !== "" || suggestion.trim() !== row.text.trim();
-  const changed = row.status === "changed" ? review : null;
-
-  const run = async (kind: "approve" | "flag" | "clear", action: () => MaybePromise) => {
-    setBusy(kind);
-    setFailure(null);
-    try {
-      await action();
-      onClose?.();
-    } catch (caught) {
-      setFailure(formatError ? formatError(caught) : labels.failed);
-    } finally {
-      setBusy(null);
-    }
-  };
-
-  const save = (verdict: TranslationVerdict) => {
-    if (!onSave) return;
-    const trimmedNote = note.trim() || null;
-    // Approving says the text is right as it stands: there is no wording to suggest.
-    const sent = verdict === "APPROVED" ? null : suggestion.trim() || null;
-    void run(verdict === "APPROVED" ? "approve" : "flag", () => onSave(reviewWrite(row, verdict, trimmedNote, sent)));
-  };
-
-  return (
-    <div className={cn("min-w-0 space-y-3 text-sm", className)}>
-      <code className="block break-all text-xs text-muted">{row.key}</code>
-
-      <div className="grid grid-cols-1 gap-3 md:grid-cols-2">
-        <div className="min-w-0">
-          <SectionLabel as="span" size="xs">
-            {referenceLabel}
-          </SectionLabel>
-          <p className="mt-1 whitespace-pre-line break-words text-secondary">{row.reference}</p>
-        </div>
-        <div className="min-w-0">
-          <SectionLabel as="span" size="xs">
-            {localeLabel}
-          </SectionLabel>
-          {missing ? (
-            <p className="mt-1 italic text-muted">{labels.missingText}</p>
-          ) : (
-            <p lang={row.locale} className="mt-1 whitespace-pre-line break-words">
-              {row.text}
-            </p>
-          )}
-        </div>
-      </div>
-
-      {changed && (
-        <AlertBanner tone="warning" variant="inline" size="sm" block live={false}>
-          <div className="min-w-0">
-            <p>{labels.changedSince}</p>
-            {changed.text !== row.text && <Then label={labels.reviewedWording} text={changed.text || "—"} />}
-            {changed.referenceText != null && changed.referenceText !== row.reference && (
-              <Then label={labels.reviewedReference} text={changed.referenceText} />
-            )}
-          </div>
-        </AlertBanner>
-      )}
-
-      {row.placeholderMismatch && (
-        <AlertBanner tone="danger" variant="inline" size="sm" block live={false}>
-          <span className="min-w-0 break-words">
-            {labels.placeholderMismatch(
-              placeholderTokens(row.reference).join(" ") || "—",
-              placeholderTokens(row.text).join(" ") || "—",
-            )}
-          </span>
-        </AlertBanner>
-      )}
-
-      {review && (
-        <Caption>
-          {(review.verdict === "APPROVED" ? labels.lastApproved : labels.lastFlagged)(
-            review.reviewerName ?? labels.erasedReviewer,
-            date(review.reviewedAt),
-          )}
-        </Caption>
-      )}
-
-      {/* Read-only: what the reviewer said, as text — the fields are for saying it. */}
-      {!editable && review?.verdict === "NEEDS_CHANGE" && (review.suggestion || review.note) && (
-        <div className="space-y-2">
-          {review.suggestion && (
-            <Then label={missing ? labels.translation : labels.suggestion} text={review.suggestion} />
-          )}
-          {review.note && <Then label={labels.note} text={review.note} />}
-        </div>
-      )}
-
-      {editable && (
-        <>
-          <Textarea
-            ref={wordingRef}
-            // The panel's "Needs a change" swipe on an already open row finds it here (#416).
-            data-review-wording=""
-            label={missing ? labels.translation : labels.suggestion}
-            lang={row.locale}
-            rows={Math.min(8, Math.max(2, Math.ceil(Math.max(row.text.length, row.reference.length) / 80)))}
-            value={suggestion}
-            disabled={busy !== null}
-            onChange={(e) => setSuggestion(e.target.value)}
-          />
-          <Textarea
-            label={labels.note}
-            rows={2}
-            value={note}
-            placeholder={labels.notePlaceholder}
-            disabled={busy !== null}
-            onChange={(e) => setNote(e.target.value)}
-          />
-          <div className="flex flex-wrap gap-2">
-            {!missing && (
-              <Button
-                variant="default"
-                commit={COMMIT_EXCEPT_BILLING}
-                pending={busy === "approve"}
-                disabled={busy !== null}
-                onClick={() => save("APPROVED")}
-              >
-                {labels.approve}
-              </Button>
-            )}
-            <Button
-              variant={missing ? "default" : "danger"}
-              commit={COMMIT_EXCEPT_BILLING}
-              pending={busy === "flag"}
-              disabled={busy !== null || !canFlag}
-              onClick={() => save("NEEDS_CHANGE")}
-            >
-              {missing ? labels.suggest : labels.flag}
-            </Button>
-            {review && onClear && (
-              <Button
-                variant="ghost"
-                commit={COMMIT_EXCEPT_BILLING}
-                pending={busy === "clear"}
-                disabled={busy !== null}
-                onClick={() => void run("clear", () => onClear({ locale: row.locale, key: row.key }))}
-              >
-                {labels.reset}
-              </Button>
-            )}
-            {onClose && (
-              <Button variant="ghost" disabled={busy !== null} onClick={onClose}>
-                {labels.cancel}
-              </Button>
-            )}
-          </div>
-        </>
-      )}
-
-      {failure && (
-        <AlertBanner tone="danger" size="sm" role="alert">
-          {failure}
-        </AlertBanner>
-      )}
-    </div>
-  );
-}

package/src/components/translation-review-labels.ts

@@ -1,181 +0,0 @@
-import type { ReviewStatus } from "../lib/translation-review";
-
-/**
- * The `translationReview` namespace: every word of the translation-review parts
- * (`ReviewStatusChip`, `TranslationProgress`, `TranslationLocaleTabs`,
- * `TranslationExportButton`, `TranslationReviewEditor`, `TranslationReviewPanel`).
- *
- * Its own module, like `data-table-labels.ts`: `kit-labels.tsx` and `defaults.ts` import
- * it, and neither has to load the components to get the words. The English is keksdose's
- * and kastlan's own (`translation_review.*`, `translations:*`), British.
- */
-export interface TranslationReviewLabels {
-  /** The five statuses — the chip, the filter, the progress legend. */
-  statusMissing: string;
-  statusUnreviewed: string;
-  statusChanged: string;
-  statusNeedsChange: string;
-  statusApproved: string;
-  /** Accessible name of the status filter. */
-  statusFilter: string;
-  /** The status filter's first option. */
-  all: string;
-  /** A status filter option with its count: "Unreviewed · 12". */
-  filterCount: (label: string, count: number) => string;
-  /** The source filter's label — shown only when the rows come from several sources
-   *  (kastlan's screen texts and documents). */
-  source: string;
-  allSources: string;
-  /** The namespace filter's label and its "every one" option. */
-  namespace: string;
-  allNamespaces: string;
-  search: string;
-  /** The placeholder filter, with how many rows it would show. */
-  placeholdersOnly: (count: number) => string;
-  /** The chip on a row whose placeholders differ from the reference's. */
-  placeholderChip: string;
-  /** The key column, and the key's caption in the editor. */
-  key: string;
-  statusColumn: string;
-  /** No row matches the filters. */
-  empty: string;
-  /** In place of the text of a string the locale lacks. */
-  missingText: string;
-  /** The progress bar's label. */
-  progress: (approved: number, total: number) => string;
-  /** A locale tab's badge. */
-  localeProgress: (approved: number, total: number) => string;
-  /** Accessible name of the locale tabs. */
-  locales: string;
-  approve: string;
-  /** Send a string back: "Needs a change". */
-  flag: string;
-  /** "Needs a change" for a MISSING string: the suggestion is the translation to add. */
-  suggest: string;
-  /** 0.46 (keksdose B2/S3): the desktop row's button that OPENS the editor to send a
-   *  string back — its own name, apart from the editor's `flag`, which saves. */
-  flagRow: string;
-  /** The same for a MISSING string: opens the editor to add the translation. */
-  suggestRow: string;
-  /** Clear a verdict: back to unreviewed. */
-  reset: string;
-  /** The editor's way out without saving. */
-  cancel: string;
-  approveSelected: string;
-  resetSelected: string;
-  /** Selects every row the filters show — the phone's way into the bulk actions, where
-   *  the table has no checkboxes. */
-  selectShown: string;
-  /** Over the old wording of a row that changed since its verdict. */
-  changedSince: string;
-  reviewedWording: string;
-  reviewedReference: string;
-  /** The placeholders differ: the reference's and the text's, each a list. */
-  placeholderMismatch: (reference: string, text: string) => string;
-  lastApproved: (name: string, date: string) => string;
-  lastFlagged: (name: string, date: string) => string;
-  /** The reviewer's name once the account is gone — what `name` above becomes. */
-  erasedReviewer: string;
-  /** The editor's wording field, opened on the current text. */
-  suggestion: string;
-  /** The same field for a missing string. */
-  translation: string;
-  note: string;
-  notePlaceholder: string;
-  /** The viewer may read this locale but not review it. */
-  readOnly: string;
-  /** The reviewer is limited to some areas — `areas` is their names, joined. */
-  scope: (areas: string) => string;
-  exportCorrections: (count: number) => string;
-  /** A callback rejected and no `formatError` says better. */
-  failed: string;
-  /** 0.25: the Undo toast after an approval (`undo`) — one string, or a batch of them. */
-  approvedToast: (count: number) => string;
-  /** 0.25: a group's header under `groupBy` — how many of its rows nobody has read yet,
-   *  of how many the filters show in it. */
-  groupCount: (unreviewed: number, total: number) => string;
-  /** 0.25: a group's bulk action — approve its unreviewed rows. */
-  approveGroup: (count: number) => string;
-  /** 0.25: asked first when a group's bulk approve is larger than a page — more than the
-   *  reviewer can have had on screen. `group` is the group's name. */
-  confirmGroup: (count: number, group: string) => string;
-  /** The Undo toast after a swipe bound to `clear` took a verdict back (keksdose, live
-   *  #377 rework: the swipes bound in its settings) — one string, or a batch of them.
-   *  The swipe itself is named by {@link reset}. */
-  clearedToast: (count: number) => string;
-}
-
-export const DEFAULT_TRANSLATION_REVIEW_LABELS: TranslationReviewLabels = {
-  statusMissing: "Missing",
-  statusUnreviewed: "Unreviewed",
-  statusChanged: "Changed since review",
-  statusNeedsChange: "Needs a change",
-  statusApproved: "Approved",
-  statusFilter: "Status",
-  all: "All",
-  filterCount: (label, count) => `${label} · ${count}`,
-  source: "Texts",
-  allSources: "All texts",
-  namespace: "Area",
-  allNamespaces: "All areas",
-  search: "Search keys and text",
-  placeholdersOnly: (count) => `Only placeholder problems (${count})`,
-  placeholderChip: "Placeholders",
-  key: "Key",
-  statusColumn: "Status",
-  empty: "No strings match these filters.",
-  missingText: "Missing in this language",
-  progress: (approved, total) => `${approved} of ${total} approved`,
-  localeProgress: (approved, total) => `${approved}/${total}`,
-  locales: "Languages",
-  approve: "Approve",
-  flag: "Needs a change",
-  suggest: "Suggest translation",
-  flagRow: "Flag for a change…",
-  suggestRow: "Add a translation…",
-  reset: "Mark unreviewed",
-  cancel: "Cancel",
-  approveSelected: "Approve selected",
-  resetSelected: "Mark selected unreviewed",
-  selectShown: "Select all shown",
-  changedSince: "This string changed after it was reviewed. Please read it again.",
-  reviewedWording: "Wording when reviewed",
-  reviewedReference: "Reference when reviewed",
-  placeholderMismatch: (reference, text) =>
-    `The placeholders differ from the reference — reference: ${reference}; this text: ${text}. The app fills these in, so they must stay exactly as they are.`,
-  lastApproved: (name, date) => `Approved by ${name} on ${date}`,
-  lastFlagged: (name, date) => `Marked as needing a change by ${name} on ${date}`,
-  erasedReviewer: "a deleted account",
-  suggestion: "Better wording",
-  translation: "Translation",
-  note: "Note (optional)",
-  notePlaceholder: "What is wrong, or what to keep in mind",
-  readOnly: "You can read this language but not review it.",
-  scope: (areas) => `Your review is limited to: ${areas}.`,
-  exportCorrections: (count) => `Export corrections (${count})`,
-  failed: "That did not work. Please try again.",
-  approvedToast: (count) => (count === 1 ? "String approved" : `${count} strings approved`),
-  groupCount: (unreviewed, total) => `${unreviewed} unreviewed / ${total}`,
-  approveGroup: (count) => `Approve unreviewed (${count})`,
-  confirmGroup: (count, group) =>
-    count === 1
-      ? `Approve the unreviewed string in ${group}?`
-      : `Approve all ${count} unreviewed strings in ${group}, including those not on screen?`,
-  clearedToast: (count) => (count === 1 ? "String marked unreviewed" : `${count} strings marked unreviewed`),
-};
-
-/** A status's word, from the namespace's five. */
-export function reviewStatusLabel(labels: TranslationReviewLabels, status: ReviewStatus): string {
-  switch (status) {
-    case "missing":
-      return labels.statusMissing;
-    case "unreviewed":
-      return labels.statusUnreviewed;
-    case "changed":
-      return labels.statusChanged;
-    case "needs_change":
-      return labels.statusNeedsChange;
-    case "approved":
-      return labels.statusApproved;
-  }
-}