@eifi1/ui-kit 0.17.0 → 0.19.0

package/src/components/toast.tsx

@@ -135,9 +135,33 @@ type Kind = "default" | "success" | "error" | "warning" | "info" | "loading";
 
 const privately = (node: ReactNode) => <span data-private="">{node}</span>;
 
+/**
+ * The toast's id, written onto its `<li>` as a class — the one per-toast attribute
+ * sonner passes through untouched besides `testId`, which is the app's (sonner keeps the
+ * id in React state only). `<Toaster dismissOnMiddleClick>` reads it back to dismiss
+ * the toast under the pointer, close button or not. The type is kept (`s`/`n`) because
+ * sonner matches ids with `===`, and the value is URI-encoded so any string id is one
+ * whitespace-free class token.
+ */
+const ID_CLASS = "kit-toast-id-";
+const idClass = (id: ToastId) =>
+  `${ID_CLASS}${typeof id === "number" ? "n" : "s"}-${encodeURIComponent(String(id))}`;
+
+/** The id {@link idClass} stamped on a toast element, or null for a toast the kit did
+ *  not make (an app still calling sonner directly). */
+function readToastId(el: Element): ToastId | null {
+  for (const token of el.classList) {
+    if (!token.startsWith(ID_CLASS)) continue;
+    const kind = token.charAt(ID_CLASS.length);
+    const raw = decodeURIComponent(token.slice(ID_CLASS.length + 2));
+    return kind === "n" ? Number(raw) : raw;
+  }
+  return null;
+}
+
 function toSonnerData(opts: ToastOptions | undefined, id: ToastId): SonnerData {
-  const { redact, description, duration, action, ...rest } = opts ?? {};
-  const data: SonnerData = { ...rest, id };
+  const { redact, description, duration, action, className, ...rest } = opts ?? {};
+  const data: SonnerData = { ...rest, id, className: className ? `${idClass(id)} ${className}` : idClass(id) };
   if (description !== undefined) data.description = redact ? privately(description) : description;
   if (action) data.action = action;
   const resolved = duration ?? (action ? TOAST_ACTION_DURATION : undefined);
@@ -312,6 +336,15 @@ export interface ToasterProps {
   hotkey?: string[];
   gap?: number;
   dir?: "ltr" | "rtl" | "auto";
+  /**
+   * A middle click on a toast dismisses it (0.18.0) — the gesture that closes a tab,
+   * which is what keksdose's users reached for (dev #583). By id, so it works on a
+   * toast with `closeButton: false` too; it counts as the user closing it, so
+   * `onDismiss` runs. Not on a link or a button inside the toast — a middle click on a
+   * link still opens it in a new tab — and not on a `dismissible: false` toast.
+   * Default true.
+   */
+  dismissOnMiddleClick?: boolean;
   className?: string;
   style?: CSSProperties;
 }
@@ -385,6 +418,7 @@ export function Toaster({
   swipeDirections = ALL_DIRECTIONS,
   offset,
   mobileOffset,
+  dismissOnMiddleClick = true,
   className,
   style,
   ...rest
@@ -409,6 +443,42 @@ export function Toaster({
     };
   }, [labels]);
 
+  useEffect(() => {
+    if (!dismissOnMiddleClick || !mod) return;
+    // On the document rather than the toaster: sonner owns the `<ol>`, and a listener
+    // there would have to be re-attached whenever it remounts it.
+    const toastUnder = (e: globalThis.MouseEvent) => {
+      if (e.button !== 1 || !(e.target instanceof Element)) return null;
+      const li = e.target.closest<HTMLElement>("[data-sonner-toast]");
+      if (!li || li.dataset.dismissible === "false") return null;
+      // A link keeps its middle click (open in a new tab); a button or a field inside
+      // the toast is the app's, not a background to click.
+      const control = e.target.closest("a[href], button, input, select, textarea, [role='button'], [role='link']");
+      if (control && li.contains(control)) return null;
+      return li;
+    };
+    // `mousedown`: the middle button starts autoscroll (Windows) before any click.
+    const onDown = (e: globalThis.MouseEvent) => {
+      if (toastUnder(e)) e.preventDefault();
+    };
+    const onAux = (e: globalThis.MouseEvent) => {
+      const li = toastUnder(e);
+      if (!li) return;
+      // No paste of the primary selection on Linux, no other handler's idea of it.
+      e.preventDefault();
+      const id = readToastId(li);
+      if (id !== null) mod.toast.dismiss(id);
+      // A toast made by sonner directly carries no id: its close button, if any.
+      else li.querySelector<HTMLButtonElement>("[data-close-button]")?.click();
+    };
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("auxclick", onAux);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("auxclick", onAux);
+    };
+  }, [dismissOnMiddleClick, mod]);
+
   const documentTheme = useSyncExternalStore(subscribeDocumentTheme, readDocumentTheme, () => "light" as const);
   const phone = useMediaQuery(PHONE_QUERY, false);
   const resolved: ToastPosition = position ?? (phone ? "bottom-center" : "top-center");

package/src/components/toggle-group.tsx

@@ -340,8 +340,11 @@ export function ToggleGroup<T extends string>(props: ToggleGroupProps<T>): React
                 ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]"
                 : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]",
               // No hover fill on a group that cannot be changed — a segment that
-              // lights up under the pointer is an offer, and there is none here.
-              disabled && "cursor-not-allowed hover:bg-transparent dark:hover:bg-transparent",
+              // lights up under the pointer is an offer, and there is none here. Not on
+              // the chosen segment: its fill IS its state, and its inverse text would
+              // vanish on a transparent hover.
+              disabled && "cursor-not-allowed",
+              disabled && !active && "hover:bg-transparent dark:hover:bg-transparent",
               optionClassName,
               opt.className,
             )}

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

@@ -0,0 +1,261 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+import { useKitLabels } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { useKitFormat } from "../lib/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, Textarea } from "./ui";
+
+/** 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;
+  /** How the verdict's date reads. Default: the kit's `formatDate`, medium, in the
+   *  provider's locale. */
+  formatDate?: (iso: string) => string;
+  /** Turns a rejection into words. Default {@link TranslationReviewLabels.failed}. */
+  formatError?: (error: unknown) => ReactNode;
+  className?: string;
+  labels?: Partial<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-[var(--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.
+ */
+export function TranslationReviewEditor({
+  row,
+  referenceLabel,
+  localeLabel,
+  onSave,
+  onClear,
+  onClose,
+  readOnly = false,
+  formatDate: formatDateProp,
+  formatError,
+  className,
+  labels: labelsProp,
+}: TranslationReviewEditorProps) {
+  const labels = useKitLabels("translationReview", DEFAULT_TRANSLATION_REVIEW_LABELS, labelsProp);
+  const { formatDate } = useKitFormat();
+  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 canFlag = note.trim() !== "" || suggestion.trim() !== row.text.trim();
+  const changed = row.status === "changed" ? review : null;
+  const date = (iso: string) => (formatDateProp ? formatDateProp(iso) : formatDate(iso, "medium"));
+
+  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-[var(--text-muted)]">{row.key}</code>
+
+      <div className="grid 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-[var(--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-[var(--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
+            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="primary"
+                commit
+                pending={busy === "approve"}
+                disabled={busy !== null}
+                onClick={() => save("APPROVED")}
+              >
+                {labels.approve}
+              </Button>
+            )}
+            <Button
+              variant={missing ? "primary" : "danger"}
+              commit
+              pending={busy === "flag"}
+              disabled={busy !== null || !canFlag}
+              onClick={() => save("NEEDS_CHANGE")}
+            >
+              {missing ? labels.suggest : labels.flag}
+            </Button>
+            {review && onClear && (
+              <Button
+                variant="ghost"
+                commit
+                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

@@ -0,0 +1,152 @@
+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;
+  /** 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;
+}
+
+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",
+  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.",
+};
+
+/** 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;
+  }
+}