@eifi1/ui-kit 0.54.0 → 0.56.0

package/src/feedback/feedback-status-undo.ts

@@ -1,109 +0,0 @@
-import { useCallback } from "react";
-import { toast } from "../components/toast";
-import type { FeedbackStatus } from "./feedback-vocabulary";
-import {
-  useFeedbackStatusLabels,
-  useFeedbackToastLabels,
-  type FeedbackStatusLabels,
-  type FeedbackToastLabels,
-} from "./feedback-labels";
-import type { FeedbackRecord } from "./feedback-record";
-import type { LabelOverride } from "../i18n/kit-labels";
-import { runMutation } from "./feedback-mutation";
-
-/**
- * A status change that can be taken back — §4.5 of the feedback contract, lifted from
- * keksdose's `changeStatusUndoably` (`frontend/src/features/feedback/feedback-page.tsx`,
- * dev #587: *"Just clicked somewhere and a feedback row disappeared without knowing what
- * I set as new status."*).
- *
- * An inbox is usually filtered by status, so a row whose new status falls outside the
- * filter leaves the table the moment the change lands, with nothing on screen saying what
- * it became. The toast says it, names the report, and offers the old status back for 8 s
- * (the window keksdose's transactions Undo uses, feedback #184). Undo PATCHes the old
- * status and confirms that too. kastlan and Kurvenschmiede had no Undo at all.
- */
-
-/** The one PATCH a status change is: `PATCH /feedback/{id}` with `{ status }`. */
-export interface FeedbackStatusPatch {
-  id: number;
-  status: FeedbackStatus;
-}
-
-/**
- * The page's status mutation (0.52): **TanStack Query's `mutateAsync`** — pass
- * `update.mutateAsync`. The toast comes when the promise resolves, which it does for every
- * call (refactor audit 2026-10-30, FLW-3). A hand-written one returns a promise that
- * resolves once the PATCH has landed and rejects when it failed.
- *
- * Failure is the mutation's own business: its `onError` toasts the server's `detail`,
- * else `feedbackToast.updateFailed` (§4.4) — this hook adds no second error toast, and
- * catches the rejection.
- */
-export type FeedbackStatusMutateAsync = (patch: FeedbackStatusPatch) => Promise<unknown>;
-
-/** What the change needs to know about the row: which one, what it is called in the
- *  toast, and where it stood (the status Undo goes back to). */
-export type FeedbackStatusRow = Pick<FeedbackRecord, "id" | "title" | "status">;
-
-/** Set `row` to `status`, with the Undo toast. A no-op when it is already there. */
-export type FeedbackStatusChange = (row: FeedbackStatusRow, status: FeedbackStatus) => void;
-
-export interface FeedbackStatusUndoOptions {
-  /** Over the `feedbackToast` namespace (the toast's words). */
-  labels?: LabelOverride<FeedbackToastLabels>;
-  /** Over the `feedbackStatus` namespace (the status names inside them). */
-  statusLabels?: Partial<FeedbackStatusLabels>;
-}
-
-/** How long the Undo stays reachable: 8 s, keksdose's window (feedback #184). */
-export const FEEDBACK_UNDO_DURATION = 8000;
-
-/**
- * The undoable status change — for the table's status cell, the row detail's pills and
- * the phone swipes alike (§4.5, §7.10: swipes included, Marcel 2026-10-04 — keksdose's
- * swipe commits go through its `changeStatusUndoably` too). Wire every one of them
- * through the function this returns:
- *
- * ```tsx
- * const update = useMutation({ mutationFn: api.updateFeedback, onError: … });
- * const changeStatus = useFeedbackStatusUndo(update.mutateAsync);
- * <FeedbackStatusTransitions … onPick={(status) => changeStatus(row, status)} />
- * ```
- *
- * Give it the PAGE's mutation, not one a row owns: a row the new status filters out
- * unmounts before the PATCH answers.
- *
- * The flow: PATCH `{ id, status }` → once it has landed a success toast
- * `statusChanged(newName, title)` with the action `statusUndo`, 8 s → Undo PATCHes
- * `{ id, status: previous }` → once that has landed `statusRestored(previousName, title)`.
- * Each change waits for its OWN answer, so two changes in flight each get their toast.
- *
- * `update.mutate`, the callback form, went in 0.53 (deprecated in 0.52): with it a second
- * change before the first answered lost the first one's Undo.
- */
-export function useFeedbackStatusUndo(
-  mutate: FeedbackStatusMutateAsync,
-  { labels, statusLabels }: FeedbackStatusUndoOptions = {},
-): FeedbackStatusChange {
-  const words = useFeedbackToastLabels(labels);
-  const names = useFeedbackStatusLabels(statusLabels);
-  return useCallback<FeedbackStatusChange>(
-    (row, status) => {
-      const { id, title, status: previous } = row;
-      if (status === previous) return;
-      const nameOf = (value: FeedbackStatus) => names[value] ?? value;
-      runMutation(mutate, { id, status }, () => {
-        toast.undo(words.statusChanged(nameOf(status), title), {
-          label: words.statusUndo,
-          duration: FEEDBACK_UNDO_DURATION,
-          onUndo: () =>
-            runMutation(mutate, { id, status: previous }, () => {
-              toast.success(words.statusRestored(nameOf(previous), title));
-            }),
-        });
-      });
-    },
-    [mutate, words, names],
-  );
-}

package/src/feedback/feedback-submit-dialog.tsx

@@ -1,131 +0,0 @@
-import { toast } from "../components/toast";
-import { captureAppScreenshot } from "./feedback-capture";
-import { FeedbackContextBox, feedbackContext, type FeedbackSubmitter } from "./feedback-context";
-import { FeedbackDialog, type FeedbackMultipleSubmission } from "./feedback-dialog";
-import { DEFAULT_FEEDBACK_DIALOG_LABELS } from "./feedback-dialog-labels";
-import { useKitLabels } from "../i18n/kit-labels";
-import { useFeedbackCategoryLabels, useFeedbackToastLabels } from "./feedback-labels";
-import {
-  DEFAULT_MAX_ATTACHMENTS,
-  FEEDBACK_ATTACHMENT_ACCEPT,
-  FEEDBACK_PICKABLE_CATEGORIES,
-  type FeedbackContext,
-  type FeedbackEnvironment,
-} from "./feedback-record";
-import type { FeedbackSubmitOpenOptions } from "./feedback-submit";
-import type { FeedbackCategory } from "./feedback-vocabulary";
-
-/**
- * The open half of `useFeedbackSubmit`: the dialog it draws, with the context box and
- * everything that only exists while somebody is filing a report.
- *
- * A module of its own so it can load LATE (0.34, MOD-1 of the refactor audit 2026-10).
- * Every app mounts the hook in its top bar; this — the attachment field, the modal, the
- * context box, the capture — was ~11 kB gzip of each app's entry chunk, for a dialog most
- * sessions never open. feedback-submit.tsx reaches it only through a literal relative
- * `import()`, so the library build keeps it a module of its own (`bundle: false`) and an
- * app's bundler makes it a chunk of its own.
- *
- * Internal, and not in the barrel: nothing but that `import()` should reach it. The hook
- * keeps the state — open, category, the URL and whether it goes along, the send in
- * flight — and this draws it.
- */
-
-/** What `useFeedbackSubmit` hands its lazily loaded dialog. */
-export interface FeedbackSubmitDialogProps {
-  onClose: () => void;
-  category: FeedbackCategory;
-  onCategoryChange: (category: FeedbackCategory) => void;
-  submitting: boolean;
-  /** The form, and the `context` built from the same values the box showed. */
-  onSubmit: (data: FeedbackMultipleSubmission<FeedbackCategory>, context: FeedbackContext) => void | Promise<void>;
-  user?: FeedbackSubmitter | null;
-  /** `location.href` when the dialog opened. */
-  url: string;
-  attachUrl: boolean;
-  onAttachUrlChange: (attachUrl: boolean) => void;
-  environment?: FeedbackEnvironment | (string & {});
-  version?: string;
-  /** `UseFeedbackSubmitOptions.capture`, as the app passed it. */
-  capture?: false | (() => Promise<File | null>);
-  /** `UseFeedbackSubmitOptions.publicNotice` (0.38): the line under the body. */
-  publicNotice?: boolean;
-  /** `open(category, options)`'s, taken when it opened (keksdose live #481): the box
-   *  shows the diagnostics and the report carries them; the title and body prefill. */
-  opened?: FeedbackSubmitOpenOptions;
-}
-
-/** `FeedbackDialog` as `useFeedbackSubmit` settles it — see the hook for what it settles. */
-export function FeedbackSubmitDialog({
-  onClose,
-  category,
-  onCategoryChange,
-  submitting,
-  onSubmit,
-  user,
-  url,
-  attachUrl,
-  onAttachUrlChange,
-  environment,
-  version,
-  capture,
-  publicNotice = false,
-  opened: { diagnostics, title, body } = {},
-}: FeedbackSubmitDialogProps) {
-  const toastText = useFeedbackToastLabels();
-  const dialogText = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS);
-  const categoryLabels = useFeedbackCategoryLabels();
-
-  const onCaptureScreenshot =
-    capture === false
-      ? undefined
-      : async () => {
-          try {
-            return await (capture ?? (() => captureAppScreenshot()))();
-          } catch {
-            toast.error(toastText.captureFailed);
-            return null;
-          }
-        };
-
-  return (
-    <FeedbackDialog
-      open
-      onClose={onClose}
-      categories={FEEDBACK_PICKABLE_CATEGORIES.map((value) => ({ value, label: categoryLabels[value] }))}
-      category={category}
-      onCategoryChange={onCategoryChange}
-      submitting={submitting}
-      attachments="multiple"
-      maxAttachments={DEFAULT_MAX_ATTACHMENTS}
-      requireBody={false}
-      attachmentAccept={FEEDBACK_ATTACHMENT_ACCEPT}
-      onAttachmentError={(kind, info) =>
-        toast.error(
-          kind === "type"
-            ? toastText.attachmentUnsupported
-            : kind === "size"
-              ? toastText.attachmentTooLarge
-              : // More files at once than there was room for: the surplus was dropped, the
-                // rest kept. The count is how many fit, as keksdose says it.
-                toastText.attachmentTooMany(info.max ?? DEFAULT_MAX_ATTACHMENTS),
-        )
-      }
-      onCaptureScreenshot={onCaptureScreenshot}
-      publicNotice={publicNotice ? (dialogText.publicNotice ?? DEFAULT_FEEDBACK_DIALOG_LABELS.publicNotice) : undefined}
-      defaultTitle={title}
-      defaultBody={body}
-      // The context is read off the very values the box below shows (§3.2).
-      onSubmit={(data) => onSubmit(data, feedbackContext({ user, attachUrl, url, environment, version, diagnostics }))}
-      contextSlot={
-        <FeedbackContextBox
-          user={user}
-          url={url}
-          attachUrl={attachUrl}
-          onAttachUrlChange={onAttachUrlChange}
-          diagnostics={diagnostics}
-        />
-      }
-    />
-  );
-}

package/src/feedback/feedback-submit.tsx

@@ -1,270 +0,0 @@
-import { Suspense, useLayoutEffect, useRef, useState } from "react";
-import type { ReactNode } from "react";
-import { toast } from "../components/toast";
-import { lazyWithFallback } from "../lib/lazy-with-fallback";
-// Types only, gone from the built module: the dialog's modules load with the dialog.
-import type { FeedbackSubmitter } from "./feedback-context";
-import type { FeedbackSubmitDialogProps } from "./feedback-submit-dialog";
-import type { FeedbackMultipleSubmission } from "./feedback-dialog";
-import { useFeedbackToastLabels } from "./feedback-labels";
-import { FEEDBACK_PICKABLE_CATEGORIES, type FeedbackContext, type FeedbackEnvironment } from "./feedback-record";
-import type { FeedbackCategory } from "./feedback-vocabulary";
-
-/**
- * The dialog, loaded when it is first opened rather than with the top bar that mounts the
- * hook (0.34, MOD-1 of the refactor audit 2026-10; see feedback-submit-dialog.tsx). A
- * LITERAL relative `import()`, as the catalogue loaders are (i18n/languages.ts): the
- * library build keeps the module its own (`bundle: false`), and a path an app's bundler
- * can read is a chunk it can split off.
- *
- * A fetch that fails — a tab left open across a deploy, offline — closes the dialog
- * rather than throwing (0.52 code review, tour.tsx): the hook lives in the top bar, above
- * the routes' error boundaries, so the rejected import took the whole shell down. The
- * next open fetches again.
- */
-const LazySubmitDialog = lazyWithFallback(
-  () => import("./feedback-submit-dialog").then((module) => module.FeedbackSubmitDialog),
-  SubmitDialogUnavailable,
-);
-
-function SubmitDialogUnavailable({ onClose }: FeedbackSubmitDialogProps) {
-  useLayoutEffect(onClose, [onClose]);
-  return null;
-}
-
-/**
- * `FeedbackCreate` — the body of `POST /feedback` (keksdose `schemas/feedback.py:25`, §3.4
- * of docs/feedback-harmonization.md), as {@link useFeedbackSubmit} hands it to the app's
- * `create`.
- */
-export interface FeedbackCreatePayload {
-  /** Trimmed; never blank (the dialog will not send a subject of spaces). */
-  title: string;
-  /** `""` when the reporter wrote nothing or only whitespace — the server stores `""`. */
-  body: string;
-  /** Never `CRASH` — the server answers that with a 422 (§3.4). */
-  category: FeedbackCategory;
-  /** §3.2, built by `feedbackContext` from what the context box showed. */
-  context: FeedbackContext;
-  /** The captured screenshot's upload URL, or `null`. */
-  screenshot_url: string | null;
-  /** The picked and pasted files' upload URLs, in the order they were added — `[]` when
-   *  none, as keksdose sends it. At most 5. */
-  attachment_urls: string[];
-}
-
-export interface UseFeedbackSubmitOptions<R = unknown> {
-  /**
-   * `POST /feedback/attachments` for ONE file → its URL (§3.3) — the app's authed client.
-   * Every file goes up BEFORE the report is created, so a row never names a file that did
-   * not arrive (keksdose `use-feedback-dialog.tsx:89`); if any upload rejects, nothing is
-   * created and the failure toast says so.
-   */
-  upload: (file: File) => Promise<string>;
-  /** `POST /feedback` with the payload. Whatever it resolves with reaches `onSubmitted`. */
-  create: (payload: FeedbackCreatePayload) => Promise<R>;
-  /** Who is filing — shown in the context box and sent in `context.user_*`. */
-  user?: FeedbackSubmitter | null;
-  /** `context.environment` — the app's own reading of which copy it is (keksdose
-   *  `deployEnvironment()`). */
-  environment?: FeedbackEnvironment | (string & {});
-  /** `context.version` — the app build (`__APP_VERSION__`). */
-  version?: string;
-  /** The report was filed: after the "Thanks for the feedback!" toast and the close. The
-   *  place to invalidate the app's feedback queries. */
-  onSubmitted?: (result: R) => void;
-  /**
-   * The failure toast's text from what `upload` or `create` rejected with — the app's own
-   * `extractApiErrorMessage(err, fallback)` (keksdose) / `apiErrorMessage` (Kurvenschmiede),
-   * so the server's `detail` wins (§3.7: a 413, a 415, keksdose's demo-session 403). Without
-   * it every failure says `feedbackToast.submitFailed`.
-   */
-  errorMessage?: (error: unknown, fallback: string) => string;
-  /**
-   * The "Capture screenshot" button's capture. Default {@link captureAppScreenshot} of
-   * `#root`; another root is `() => captureAppScreenshot({ rootId: "app" })`. `false`
-   * hides the button — for an app that does not install the optional peer
-   * `modern-screenshot`. A rejection becomes the `captureFailed` toast.
-   */
-  capture?: false | (() => Promise<File | null>);
-  /**
-   * The app's reports are public (0.38, docs/feedback-harmonization.md §9.2 decision 6):
-   * `true` shows **"Other users will see the title and text (never your screenshots or
-   * files)"** (`feedbackDialog.publicNotice`) under the body. keksdose and Kurvenschmiede
-   * pass it — for a viewer who passes the app's `public_viewer` — and kastlan, whose
-   * public parts are off, does not. Default `false`.
-   */
-  publicNotice?: boolean;
-}
-
-/**
- * `open`'s second argument (keksdose live #481: "Report this problem" on a receipt scan
- * that never finished, filed with the scan's bookkeeping). All of it optional, and none of
- * it outlives the opening it was handed to.
- */
-export interface FeedbackSubmitOpenOptions {
-  /**
-   * What the app knows about the thing reported — keksdose's stuck scan: its id, status,
-   * attempts, last error. Taken when the dialog opens (a shallow copy, so what the box
-   * shows is what goes, even if the app's object changes while the reporter types), shown
-   * read-only in the context box, and sent as `context.diagnostics` whatever "Attach
-   * current page URL" says: that box withholds the page, not this. Flat, short values,
-   * never the reported content itself (§3.2); the row detail shows them to the admin and
-   * the author only.
-   */
-  diagnostics?: Readonly<Record<string, unknown>>;
-  /** The subject the form starts with; the reporter can change it. Where the app's reports
-   *  are public (`publicNotice`), other users read it: what only the admin should see goes
-   *  in `diagnostics`. */
-  title?: string;
-  /** The body the form starts with, as `title` is the subject's. */
-  body?: string;
-}
-
-export interface FeedbackSubmit {
-  /**
-   * Open the dialog on `category` — a `FeedbackMenu` row's (§4.2: "default category when
-   * opened from a row: that row's"). Without one, or with `CRASH` (never pickable), it
-   * opens on `OTHER`, the server's own default (§3.4). Each open starts a fresh form,
-   * reads `location.href` for the context box and ticks "Attach current page URL" again.
-   *
-   * `options` (0.54, keksdose live #481) is a screen's own report — `open("BUG", {
-   * diagnostics })` from "Report this problem": the diagnostics shown in the box and sent,
-   * the subject and body prefilled. An open without them starts empty and sends none.
-   */
-  open: (category?: FeedbackCategory, options?: FeedbackSubmitOpenOptions) => void;
-  /** Close it, as Cancel does. */
-  close: () => void;
-  /**
-   * The dialog — render it once, anywhere (it portals). `null` while closed. Since 0.34
-   * its module loads when it is first opened (MOD-1), so it appears a moment after
-   * `open`: a test finds it with `await screen.findBy…`, not `getBy…`.
-   */
-  dialog: ReactNode;
-}
-
-/**
- * The feedback submit dialog, wired (0.27.0, docs/feedback-harmonization.md §4.2): the
- * one call that replaces keksdose's `use-feedback-dialog.tsx`, kastlan's `FeedbackButton`
- * and Kurvenschmiede's `use-feedback-dialog.tsx`.
- *
- * ```tsx
- * const feedback = useFeedbackSubmit({
- *   upload: (file) => feedbackApi.uploadAttachment(file),
- *   create: (payload) => feedbackApi.create(payload),
- *   user, environment: deployEnvironment(), version: __APP_VERSION__,
- *   errorMessage: extractApiErrorMessage,
- *   onSubmitted: () => qc.invalidateQueries({ queryKey: queryKeys.feedback.all }),
- * });
- * <FeedbackMenu onFile={feedback.open} isAdmin={user?.role === "ADMIN"} />
- * {feedback.dialog}
- * ```
- *
- * What it settles, so no app restates it:
- *
- * - `FeedbackDialog` in `attachments="multiple"` with `requireBody={false}` (§7.4): a
- *   subject alone is a report. One captured screenshot in its own slot plus up to 5
- *   picked or pasted files, `FEEDBACK_ATTACHMENT_ACCEPT` (images, PDF, text), 10 MB each.
- * - The pickable categories — Bug, Idea, Question, Other, in the kit's words. `CRASH` is
- *   filed by the error boundary and is never offered (keksdose feedback #160).
- * - The context box, built from the same values as the `context` it sends
- *   ({@link FeedbackContextBox} / `feedbackContext`), the URL read when the dialog OPENS,
- *   and the diagnostics `open` was handed then (0.54, keksdose live #481).
- * - Upload every file, then create (keksdose `use-feedback-dialog.tsx:89`): the
- *   screenshot to `screenshot_url`, the rest to `attachment_urls`, all in parallel.
- * - The toasts, from `feedbackToast`: filed, failed (the server's `detail` through
- *   `errorMessage`), a refused file's type, size or count, a failed capture.
- *
- * What stays the app's: the API client, the user, the environment and version, and what
- * to refresh afterwards. No TanStack in here — `create` is a plain promise, so the hook
- * runs in any app; the app's mutation, if it wants one, lives inside `create`.
- *
- * A failure keeps the dialog open with the draft, as keksdose's did. A dialog closed and
- * opened again while a send is still running is NOT closed by that send's success — the
- * new draft is somebody's next report.
- */
-export function useFeedbackSubmit<R = unknown>(options: UseFeedbackSubmitOptions<R>): FeedbackSubmit {
-  const { upload, create, user, environment, version, onSubmitted, errorMessage, capture, publicNotice } = options;
-  const toastText = useFeedbackToastLabels();
-  const [isOpen, setIsOpen] = useState(false);
-  const [category, setCategory] = useState<FeedbackCategory>("OTHER");
-  const [url, setUrl] = useState("");
-  const [attachUrl, setAttachUrl] = useState(true);
-  const [opened, setOpened] = useState<FeedbackSubmitOpenOptions>({});
-  const [submitting, setSubmitting] = useState(false);
-  // Which opening a send belongs to — see "closed and opened again" above.
-  const opening = useRef(0);
-  const inFlight = useRef(false);
-
-  const open = (next?: FeedbackCategory, given?: FeedbackSubmitOpenOptions) => {
-    opening.current += 1;
-    setCategory(next && FEEDBACK_PICKABLE_CATEGORIES.includes(next) ? next : "OTHER");
-    setUrl(typeof window === "undefined" ? "" : window.location.href);
-    // Fresh every time (Kurvenschmiede use-feedback-dialog.tsx:80): a reporter who left the
-    // page out of one idea is not saying the bug report after it is unrelated too.
-    setAttachUrl(true);
-    // This opening's own, nothing of the last one's; the diagnostics copied now (#481).
-    setOpened({ ...given, diagnostics: given?.diagnostics && { ...given.diagnostics } });
-    setIsOpen(true);
-  };
-  const close = () => setIsOpen(false);
-
-  // `context` comes from the dialog, built off the values its context box shows.
-  const submit = async (data: FeedbackMultipleSubmission<FeedbackCategory>, context: FeedbackContext) => {
-    if (inFlight.current) return;
-    inFlight.current = true;
-    setSubmitting(true);
-    const from = opening.current;
-    let result: R;
-    try {
-      const [screenshot_url, attachment_urls] = await Promise.all([
-        data.screenshot ? upload(data.screenshot) : Promise.resolve(null),
-        Promise.all(data.attachments.map((file) => upload(file))),
-      ]);
-      result = await create({
-        title: data.title.trim(),
-        body: data.body.trim() ? data.body : "",
-        category: data.category,
-        context,
-        screenshot_url,
-        attachment_urls,
-      });
-    } catch (error) {
-      toast.error(errorMessage ? errorMessage(error, toastText.submitFailed) : toastText.submitFailed);
-      return;
-    } finally {
-      inFlight.current = false;
-      setSubmitting(false);
-    }
-    toast.success(toastText.submitted);
-    if (opening.current === from) setIsOpen(false);
-    onSubmitted?.(result);
-  };
-
-  // Nothing is drawn while the dialog's module is on its way — a few milliseconds, once per
-  // page load; a spinner would only flash. A load that fails (a deploy replaced the chunk,
-  // offline) closes the dialog (`SubmitDialogUnavailable`): the hook sits in the top bar,
-  // above the routes' error boundaries, where a thrown chunk error took the shell down.
-  const dialog = isOpen ? (
-    <Suspense fallback={null}>
-      <LazySubmitDialog
-        onClose={close}
-        category={category}
-        onCategoryChange={setCategory}
-        submitting={submitting}
-        onSubmit={submit}
-        user={user}
-        url={url}
-        attachUrl={attachUrl}
-        onAttachUrlChange={setAttachUrl}
-        environment={environment}
-        version={version}
-        capture={capture}
-        publicNotice={publicNotice}
-        opened={opened}
-      />
-    </Suspense>
-  ) : null;
-
-  return { open, close, dialog };
-}