@eifi1/ui-kit 0.54.0 → 0.55.0

package/src/feedback/feedback-table.tsx

@@ -1,912 +0,0 @@
-import { useCallback, useMemo } from "react";
-import type { MouseEvent, ReactElement, ReactNode } from "react";
-import { ExternalLink, ThumbsUp } from "lucide-react";
-import { cn } from "../lib/cn";
-import { useDayFormatter } from "../lib/day-format";
-import { EMPTY_FORMATTED_VALUE } from "../lib/format";
-import { useKitLabels, useKitLink, type LabelOverride } from "../i18n/kit-labels";
-import type { KitLinkProps } from "../i18n/kit-labels";
-import type { PathPattern } from "../landing/routing";
-import { Chip } from "../components/chip";
-import { CopyButton } from "../components/copy-button";
-import { Tooltip } from "../components/tooltip";
-import { FloatingAction, FloatingActionGroup } from "../components/floating-panel";
-import type { FloatingCorner } from "../components/floating-panel";
-import { pickLinkRenderer } from "../components/text-link";
-import type { DataTableColumn } from "../components/data-table";
-import {
-  FEEDBACK_CATEGORY_ORDER,
-  FEEDBACK_STATUS_META,
-  FEEDBACK_STATUS_ORDER,
-  FeedbackCategoryBadge,
-  FeedbackStatusBadge,
-  FeedbackStatusTransitions,
-  feedbackCategoryRank,
-  visibleFeedbackStatuses,
-  type FeedbackStatus,
-} from "./feedback-inbox";
-import {
-  useFeedbackCategoryLabels,
-  useFeedbackStatusLabels,
-  type FeedbackCategoryLabels,
-  type FeedbackStatusLabels,
-} from "./feedback-labels";
-import {
-  FEEDBACK_AWAITING_STATUSES,
-  feedbackReworkCount,
-  type FeedbackContext,
-  type FeedbackRecord,
-} from "./feedback-record";
-import type { FeedbackStatusChange } from "./feedback-status-undo";
-import { feedbackPagePath, useFeedbackDetailLabels } from "./feedback-row-detail";
-import { feedbackPage, feedbackPageLinkTarget } from "./feedback-page-link";
-import type { CommitScope } from "../components/write-lock";
-import { DEFAULT_FEEDBACK_PAGE_LABELS } from "./feedback-table-labels";
-import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "./feedback-public-labels";
-
-/**
- * The two feedback pages' TABLE — `/feedback` (the admin inbox) and `/my-feedback` (the
- * user's own) — as the kit's parts: §4.3 of the feedback contract
- * (docs/feedback-harmonization.md), lifted from keksdose
- * `frontend/src/features/feedback/feedback-page.tsx` (columns :711–963, the phone card
- * :1038–1065, the awaiting toggle :689–709 and :1086–1101).
- *
- * Until 0.27 each app wrote this table itself, and the three had drifted exactly where a
- * table drifts: kastlan's showed five statuses and no environment, Kurvenschmiede's one
- * page served both audiences, and keksdose's — the canon, argued over a year of feedback
- * items — had a latent bug of its own: its subject cell carries the environment and
- * rework chips "so a second attempt is marked on every surface at once" (:760), but the
- * phone card is a `mobileCard`, and `DataTable` never renders the `mobilePrimary` cell
- * when `mobileCard` is set (data-table-mobile.tsx, `cardInner`). Its phone cards showed neither
- * chip. {@link FeedbackMobileCard} draws both itself, from the same
- * {@link FeedbackSubject} the column uses, so the two surfaces cannot part again.
- *
- * What stays the app's: the rows (its API client), who is an admin, the routes and the
- * `/feedback` → `/my-feedback` redirect, the `?row=` deep link and the row detail. What
- * is here: the nine columns ({@link feedbackColumns} / {@link useFeedbackColumns}), the
- * phone card and its day headers ({@link FeedbackMobileCard},
- * {@link feedbackMobileGroupBy}), the phone's "Only what is waiting for you" toggle
- * ({@link FeedbackAwaitingToggle}), the empty state ({@link FeedbackEmptyState}) and the
- * `feedbackPage` words. The swipes are `feedbackSwipePlan` (feedback-swipe.tsx), passed
- * by the app because whether the page may write is the app's call.
- */
-
-/* ── Labels ─────────────────────────────────────────────────────────────────── */
-
-/**
- * `feedbackPage` — the words of the two feedback pages (§4.3). The English is keksdose's
- * `en.json` (`feedback.*`, `common.none`); the de-CH canon is noted on each key (keksdose
- * `de-CH.json`, ss never ß).
- */
-export interface FeedbackPageLabels {
-  /** The admin inbox's page title, `/feedback` — the menu's "Feedback inbox" (0.40,
-   *  §10.2 decision 11; "Feedback" before). de-CH: "Feedback-Eingang" */
-  title: string;
-  /** The user's own list, `/my-feedback`. de-CH: "Mein Feedback" */
-  myTitle: string;
-  /** Column 1, the id. de-CH: "#" */
-  columnId: string;
-  /** Column 2, when it was filed. de-CH: "Datum" */
-  columnDate: string;
-  /** Column 3. de-CH: "Kategorie" */
-  columnCategory: string;
-  /** Column 4, the title with its chips. de-CH: "Betreff" */
-  columnSubject: string;
-  /** Column 5, who filed it. de-CH: "Nutzer" */
-  columnUser: string;
-  /** Column 6. de-CH: "E-Mail" */
-  columnEmail: string;
-  /** Column 7, the page it was filed from. de-CH: "URL" */
-  columnUrl: string;
-  /** Column 8. de-CH: "Status" */
-  columnStatus: string;
-  /** Column 9, when it was settled. de-CH: "Erledigt am" */
-  columnResolved: string;
-  /** What the URL cell's link does, said before the path to a screen reader.
-   *  de-CH: "Seite öffnen" */
-  openPage: string;
-  /** The table with nothing to show, on both pages (§7.13) — keksdose's `common.none`.
-   *  de-CH: "Keine" */
-  empty: string;
-  /** The submitter of a report whose account was erased (`user_id: null`, keksdose live
-   *  #275). de-CH: "<gelöschter Nutzer>" */
-  deletedUser: string;
-  /** The submitter when neither a name nor an email is known — `id` is `user_id`.
-   *  de-CH: "Nutzer #{{id}}" */
-  userFallback: (id: number) => string;
-  /** The chip for a report filed from a copy of the app that is not production —
-   *  `environment` is `context.environment` as filed ("dev", "local", or the app's own
-   *  word). Upper-cased like the top bar's environment badge, so the marker the tester saw
-   *  is the marker triage sees. Guarded: a context is untyped JSON, so a value that is no
-   *  string (an app calling it with `context.environment` as stored) is printed, never
-   *  thrown on. de-CH: the same. */
-  environment: (environment: string) => string;
-  /** The chip for a report sent back for rework — `count` ≥ 1 is how many times
-   *  (`reworkCount`, keksdose live #331). de-CH: "Nacharbeit" / "Nacharbeit ×{{count}}" */
-  reworkChip: (count: number) => string;
-  /** The phone toggle narrowing the inbox to IN_EVALUATION + NEEDS_LIVE_TEST.
-   *  de-CH: "Nur was auf Sie wartet" */
-  awaitingFilter: string;
-  /** The name of the phone's floating group that holds it. de-CH: "Feedback-Aktionen" */
-  phoneActions: string;
-}
-
-// Defined in ./feedback-table-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_FEEDBACK_PAGE_LABELS };
-
-/** `feedbackPage` resolved: English, then `<UiKitProvider labels>`, then `labels`. The
- *  page's title comes from here too: `mine ? labels.myTitle : labels.title`. */
-export function useFeedbackPageLabels(labels?: LabelOverride<FeedbackPageLabels>): FeedbackPageLabels {
-  return useKitLabels("feedbackPage", DEFAULT_FEEDBACK_PAGE_LABELS, labels);
-}
-
-/* ── Reading a row ──────────────────────────────────────────────────────────── */
-
-/** What the table reads off a report — {@link FeedbackRecord}'s fields, so an app's own
- *  row type with more of them passes as it is. */
-export type FeedbackTableRow = Pick<
-  FeedbackRecord,
-  | "id"
-  | "user_id"
-  | "user_email"
-  | "title"
-  | "body"
-  | "category"
-  | "status"
-  | "context"
-  | "resolved_at"
-  | "created_at"
-  | "votes"
->;
-
-/** A context value as a trimmed string, or `""` — every key is optional on read (§3.2)
- *  and an app's own context type may say `unknown`. */
-function text(value: unknown): string {
-  return typeof value === "string" ? value.trim() : "";
-}
-
-/**
- * The environment a report was filed from when it is NOT production, as filed — or
- * `null` (keksdose `environmentLabel`, :142). Production is silent, as the top bar's
- * badge is: the marker earns attention by being rare. A missing value is production too —
- * every row filed before a test copy existed, and crash rows filed before the crash
- * payload carried `environment` (§3.2, §3.6). An unknown value is shown rather than swallowed: an environment
- * nobody recognises is exactly when triage needs to see one.
- */
-export function feedbackEnvironment(context: FeedbackContext | null | undefined): string | null {
-  const env = text(context?.environment);
-  return !env || env.toLowerCase() === "prod" ? null : env;
-}
-
-/**
- * Who filed a report, as one string (keksdose `submitterLabel`, :163): the display name,
- * else the email, else `userFallback(user_id)`. An erased account (`user_id: null`) is
- * `deletedUser` FIRST, ahead of the context: the server scrubs the name with the account,
- * but a row that somehow kept one must still not go on naming somebody who asked to be
- * forgotten. The joined `user_email` (admin list) is preferred to the context snapshot.
- */
-export function feedbackSubmitter(
-  row: Pick<FeedbackRecord, "user_id" | "user_email" | "context">,
-  labels: Pick<FeedbackPageLabels, "deletedUser" | "userFallback">,
-): string {
-  if (row.user_id == null) return labels.deletedUser;
-  return (
-    text(row.context?.user_display_name) ||
-    text(row.user_email) ||
-    text(row.context?.user_email) ||
-    labels.userFallback(row.user_id)
-  );
-}
-
-/**
- * The submitter's email (keksdose `submitterEmail`, :175): the joined `user_email` —
- * authoritative, the display name is self-chosen (feedback #108) — else the context
- * snapshot, which is what `/my-feedback` has (`GET /feedback/my` sends no join). `""`
- * for an erased account, for the reason {@link feedbackSubmitter} gives.
- */
-export function feedbackSubmitterEmail(row: Pick<FeedbackRecord, "user_id" | "user_email" | "context">): string {
-  if (row.user_id == null) return "";
-  return text(row.user_email) || text(row.context?.user_email);
-}
-
-/** Whether a status is one the phone's awaiting toggle keeps — `FEEDBACK_AWAITING_STATUSES`,
- *  the two that wait on the person triaging. `rows.filter((r) => isFeedbackAwaiting(r.status))`. */
-export function isFeedbackAwaiting(status: FeedbackStatus): boolean {
-  return FEEDBACK_AWAITING_STATUSES.includes(status);
-}
-
-/* ── Dates ──────────────────────────────────────────────────────────────────── */
-
-/**
- * How the pages write a date: an ISO timestamp in, one string out. keksdose passes its
- * `useDateCell()` (the app's date-format preference, weekday and all — dev#546), which
- * fits as it is.
- *
- * ONE function for the date column, the resolved column, the phone card and the phone's
- * day headers, so the four cannot disagree (keksdose dev#546 round 3: the header is a
- * string and must say what the card says).
- */
-export type FeedbackRenderDate = (iso: string) => string;
-
-/** The kit's own date, weekday included: "Sun, 4 Oct 2026" / "So., 4. Okt. 2026". A date
- *  in a column carries its weekday (keksdose's rule, date-cell.tsx). */
-const FEEDBACK_DATE_STYLE: Intl.DateTimeFormatOptions = {
-  weekday: "short",
-  day: "numeric",
-  month: "short",
-  year: "numeric",
-};
-
-/**
- * `renderDate` when the app gave one (and it answers), else the kit's: the
- * `<UiKitProvider formatDate>` when the app set one (called with the calendar day and
- * `weekday: true`, as `DateMark` calls it), else `Intl` in the provider's locale and
- * (0.52) time zone, with the weekday. An unparseable value is passed through rather than
- * hidden. The kit's one day ladder since 0.52 (refactor audit 2026-10-30, DUP-2), which
- * every date a kit component prints goes down.
- */
-export function useFeedbackRenderDate(renderDate?: FeedbackRenderDate, locale?: string): FeedbackRenderDate {
-  const day = useDayFormatter<string>(renderDate, locale);
-  return useCallback<FeedbackRenderDate>((iso) => day(iso, { weekday: true, style: FEEDBACK_DATE_STYLE }), [day]);
-}
-
-/** A date in a cell: `<time>`, nowrap, tabular figures; "—" when there is none. */
-function FeedbackDate({ value, renderDate }: { value: string | null | undefined; renderDate: FeedbackRenderDate }) {
-  if (!value) return <span className="text-placeholder">{EMPTY_FORMATTED_VALUE}</span>;
-  return (
-    <time dateTime={value} className="whitespace-nowrap tabular-nums text-muted">
-      {renderDate(value)}
-    </time>
-  );
-}
-
-/** An instant for sorting; a value that does not parse sorts with the empty ones. */
-function instant(value: string | null | undefined): number | null {
-  const ms = value ? Date.parse(value) : NaN;
-  return Number.isNaN(ms) ? null : ms;
-}
-
-/* ── The subject: title + environment chip + rework chip ───────────────────── */
-
-export interface FeedbackSubjectProps {
-  /** `replies` (0.40): the chip counts the rework entries, else the body's blocks —
-   *  {@link feedbackReworkCount}. */
-  row: Pick<FeedbackRecord, "title" | "body" | "context"> & Partial<Pick<FeedbackRecord, "replies">>;
-  /**
-   * `false` (default): one line — the title truncates and the chips stay whole, as a
-   * table cell wants. `true`: the title wraps and the chips flow after its last word, as
-   * the phone card wants (a phone shows the whole title or nothing useful).
-   */
-  wrap?: boolean;
-  /** Over the `feedbackPage` namespace. */
-  labels?: LabelOverride<FeedbackPageLabels>;
-  className?: string;
-}
-
-/**
- * A report's title with its two chips (§4.3, column 4): the environment when it is not
- * production (keksdose's amber outline, the top bar's environment badge — the marker the
- * tester saw is the marker triage sees) and **Rework** / **Rework ×n** when the author has
- * sent it back (keksdose live #331: *"have a new category for items in rework"*, as a fact
- * derived from the body rather than a seventh status).
- *
- * No tooltip on either chip (keksdose dev#523): each already says what it means.
- */
-export function FeedbackSubject({ row, wrap = false, labels: labelsProp, className }: FeedbackSubjectProps) {
-  const labels = useFeedbackPageLabels(labelsProp);
-  const env = feedbackEnvironment(row.context);
-  const rounds = feedbackReworkCount(row);
-  const chipClass = wrap ? "ms-1.5 align-middle" : "shrink-0";
-  const chips = (
-    <>
-      {env && (
-        <Chip size="sm" variant="outline" shape="square" tone="warning" caps className={chipClass} data-feedback-env="">
-          {labels.environment(env)}
-        </Chip>
-      )}
-      {rounds > 0 && (
-        <Chip size="sm" tone="warning" caps className={chipClass} data-feedback-rework={rounds}>
-          {labels.reworkChip(rounds)}
-        </Chip>
-      )}
-    </>
-  );
-  if (wrap) {
-    return (
-      <span className={cn("min-w-0 font-medium [overflow-wrap:anywhere]", className)}>
-        {row.title}
-        {chips}
-      </span>
-    );
-  }
-  return (
-    <span className={cn("inline-flex min-w-0 max-w-full items-center gap-1.5 large:items-start", className)}>
-      {/* One line at Normal; from Large up the title wraps rather than losing its end (text
-          size §10.17 — the release sweep's first CI run found it cut on the showcase). */}
-      <span className="min-w-0 truncate-until-large font-medium">{row.title}</span>
-      {chips}
-    </span>
-  );
-}
-
-/* ── The URL cell ───────────────────────────────────────────────────────────── */
-
-/**
- * The page a report was filed from, as a link — the cell keksdose's column 7 draws
- * (:850): the path as text and as the `href`, read from `context.url` else
- * `context.route` by the row detail's own reader (`feedbackPage`, feedback-page-link.ts),
- * so the column and the detail link the same page the same way. A real link through the
- * `<UiKitProvider linkComponent>` (the app's router, so it does not reload the app;
- * keksdose's plain `<a>` did), and its click stops at the cell so the row does not open
- * as well.
- *
- * Its name is the path, as on screen, with "Open page" said before it — keksdose's
- * `aria-label="Open page"` replaced the path, so a screen reader heard forty identical
- * links down the column.
- *
- * The PATH alone (0.52 code review, feedback-page-link.ts): the query is the reporter's to
- * write, and `/login?next=%2Fjoin%3Ftoken%3D…` forwarded the admin's click to an
- * invitation. A one-shot route — `/join`, `/register`, `/verify-email`, `/reset-password`
- * and the app's `pageLinkExclude` — is the path as text with Copy, never a link (0.52,
- * refactor audit 2026-10-30, FLW-7): those routes act on load.
- */
-function FeedbackPageLinkCell({
-  context,
-  openPage,
-  exclude,
-}: {
-  context: FeedbackContext | null;
-  openPage: string;
-  exclude: readonly PathPattern[] | undefined;
-}) {
-  const kitLink = useKitLink();
-  const page = feedbackPage(context);
-  if (!page) return <span className="text-placeholder">{EMPTY_FORMATTED_VALUE}</span>;
-  const href = feedbackPageLinkTarget(page, exclude);
-  if (!href) return <FeedbackPageText path={page.path} url={page.url} />;
-  const className =
-    "inline-flex min-w-0 max-w-full items-center gap-1 text-secondary hover:text-primary hover:underline";
-  const children = (
-    <>
-      {/* The space outside the hidden span: a flex container drops it from the layout,
-          and the accessible name keeps it ("Open page /accounts"). */}
-      <span className="sr-only">{openPage}</span> <code className="min-w-0 truncate text-xs">{page.path}</code>
-      <ExternalLink className="size-3 shrink-0" aria-hidden />
-    </>
-  );
-  const onClick = (event: MouseEvent<HTMLAnchorElement>) => event.stopPropagation();
-  const render = pickLinkRenderer<KitLinkProps>(undefined, kitLink, href);
-  return render ? (
-    <RenderedLink render={render} href={href} className={className} onClick={onClick}>
-      {children}
-    </RenderedLink>
-  ) : (
-    <a href={href} className={className} onClick={onClick}>
-      {children}
-    </a>
-  );
-}
-
-/** A one-shot page in the URL column: its path to read, and Copy. A component of its own
- *  so only such a row resolves the `feedbackDetail` words — every cell of a 270-row inbox
- *  did, for a button only a one-shot row shows (0.52 code review, efficiency). */
-function FeedbackPageText({ path, url }: { path: string; url: string }) {
-  const { copyUrl } = useFeedbackDetailLabels();
-  return (
-    <span className="inline-flex min-w-0 max-w-full items-center gap-1 text-secondary" data-feedback-page-unlinked="">
-      <code className="min-w-0 truncate text-xs">{path}</code>
-      <CopyButton size="xs" className="shrink-0" text={url} label={copyUrl} stopPropagation />
-    </span>
-  );
-}
-
-/** The provider's link, drawn by a component declared once (as FloatingAction's). */
-function RenderedLink({ render, ...props }: KitLinkProps & { render: (props: KitLinkProps) => ReactElement }) {
-  return render(props);
-}
-
-/* ── The columns ────────────────────────────────────────────────────────────── */
-
-/** What {@link feedbackColumns} takes — every word already resolved (see
- *  {@link useFeedbackColumns}, which resolves them from the provider). */
-export interface FeedbackColumnsOptions {
-  /** `/my-feedback`. The same nine columns (one page component, §4.3), but the status
-   *  cell is read-only there whatever `canEdit` says — "no status or outcome editing
-   *  there (also for an admin)". */
-  mine?: boolean;
-  /** The admin on `/feedback` — the status cell offers its steps. Otherwise it shows them
-   *  read-only. */
-  canEdit: boolean;
-  /** The undoable status change, `useFeedbackStatusUndo(update.mutateAsync)` (§4.5) —
-   *  the same one the row detail and the swipes use. */
-  onStatus: FeedbackStatusChange;
-  /** See {@link FeedbackRenderDate}. */
-  renderDate: FeedbackRenderDate;
-  /** The status buttons SAVE when pressed: pass `true` to put them under the page's
-   *  `WriteLockProvider` (FeedbackStatusTransitions' `commit`). Off by default — a
-   *  feedback inbox is rarely what an app's lock is about. */
-  commit?: CommitScope;
-  labels: FeedbackPageLabels;
-  statusLabels: FeedbackStatusLabels;
-  categoryLabels: FeedbackCategoryLabels;
-  /** 0.38 (§9.6): a sortable **Votes** column before Status — `row.votes`, a missing
-   *  one as 0 — hidden on the phone (the card's chip, {@link FeedbackMobileCardProps.votes},
-   *  carries it there). Off by default. */
-  votes?: boolean;
-  /** The Votes header — `feedbackPublic.columnVotes`, so the inbox and the public list
-   *  say the same ({@link useFeedbackColumns} reads it). Default "Votes". */
-  votesHeader?: string;
-  /**
-   * 0.52 (FLW-7): the app's one-shot routes, ON TOP of the kit's — `/join`, `/register`,
-   * `/verify-email`, `/reset-password` (a string is that path and everything under it, a
-   * RegExp is tested on the path, as `useLastVisitedPage`'s `exclude`). The URL cell
-   * shows such a page as text with Copy, never as a link; any other page links its path
-   * alone. Keep it stable (module scope): it is a dependency of {@link useFeedbackColumns}'
-   * memo.
-   */
-  pageLinkExclude?: readonly PathPattern[];
-}
-
-/** The vote count, a quiet chip with the thumb (§9.6) — the Votes cell and the card's. */
-function FeedbackVoteCount({ votes, className }: { votes: number | undefined; className?: string }) {
-  return (
-    <Chip size="sm" className={className} data-feedback-vote-count={votes ?? 0}>
-      <ThumbsUp className="size-3" aria-hidden />
-      <span className="tabular-nums">{votes ?? 0}</span>
-    </Chip>
-  );
-}
-
-/** A status's place in the chain, unknown ones last (as `feedbackCategoryRank`). */
-function statusRank(status: FeedbackStatus): number {
-  const at = FEEDBACK_STATUS_ORDER.indexOf(status);
-  return at === -1 ? FEEDBACK_STATUS_ORDER.length : at;
-}
-
-/**
- * The nine columns of §4.3, in the contract's order, for `DataTable` — keksdose's
- * (:711–963) with the contract's changes:
- *
- * | # | key | cell | filter | phone |
- * |---|---|---|---|---|
- * | 1 | `id` | id, mono | number | hidden |
- * | 2 | `date` | `created_at`, weekday ({@link FeedbackRenderDate}) | date | |
- * | 3 | `category` | `FeedbackCategoryBadge`, sorted CRASH first | select, all five | |
- * | 4 | `title` | {@link FeedbackSubject} | text: title + environment | card heading |
- * | 5 | `user` | {@link feedbackSubmitter} | text: name + email, or "deleted user" | |
- * | 6 | `email` | {@link feedbackSubmitterEmail} | text | hidden |
- * | 7 | `url` | the page, a link (`noRowLink`) | text: path | hidden |
- * | 8 | `status` | `FeedbackStatusTransitions variant="icon"`, `visibleFeedbackStatuses` | select, chain order | |
- * | 9 | `resolved` | `resolved_at` | date | hidden |
- *
- * - Both select filters list the WHOLE vocabulary in its own order, translated —
- *   without `options` the popover lists the bare enum values found in the rows
- *   (keksdose feedback #160), and kastlan's first CRASH row would otherwise appear in a
- *   filter that never offered it.
- * - The status column owns the status filter, and only it (keksdose live #330's revert:
- *   the phone's filter sheet already exposes every column filter).
- * - Fitted to the table's width (0.48, keksdose live #451): Subject `grow`s and
- *   ellipsises, and a narrow table leaves out URL, then Email, then Resolved
- *   (`fitPriority` 1–3) — the open report repeats all three — then Votes and Category
- *   (4, 5), then User, Date and # (6–8, 0.51.4) before Subject would drop below 8rem
- *   (`growMin`, 0.51.4; the table's default floor is 10).
- *   Drop the two keys with
- *   `{ ...col, grow: undefined, fitPriority: undefined }` for the 0.47 layout.
- * - `/my-feedback` shows the same nine: the Email cell's context fallback exists for it
- *   (the admin list's join is absent there, §3.1), and its phone card drops the submitter
- *   instead ({@link FeedbackMobileCardProps.showSubmitter}).
- *
- * Pure: hand it resolved words, or use {@link useFeedbackColumns}. Keys are stable, so
- * an app may drop or add a column (`columns.filter((c) => c.key !== "email")`).
- */
-export function feedbackColumns<T extends FeedbackTableRow>({
-  mine = false,
-  canEdit,
-  onStatus,
-  renderDate,
-  commit,
-  labels,
-  statusLabels,
-  categoryLabels,
-  votes = false,
-  votesHeader = DEFAULT_FEEDBACK_PUBLIC_LABELS.columnVotes,
-  pageLinkExclude,
-}: FeedbackColumnsOptions): DataTableColumn<T>[] {
-  const editable = canEdit && !mine;
-  const votesColumn: DataTableColumn<T>[] = votes
-    ? [
-        {
-          key: "votes",
-          header: votesHeader,
-          className: "whitespace-nowrap",
-          cell: (row) => <FeedbackVoteCount votes={row.votes ?? undefined} />,
-          sortBy: (row) => row.votes ?? 0,
-          filter: { type: "number", getValue: (row) => row.votes ?? 0 },
-          mobileHidden: true,
-          // Fourth to go (Kurvenschmiede S1, 0.48): with only the first three, Subject was
-          // crushed to 24px at 1100px. Still reachable from the Columns panel.
-          fitPriority: 4,
-        },
-      ]
-    : [];
-  return [
-    {
-      key: "id",
-      header: labels.columnId,
-      cell: (row) => <span className="font-mono text-xs text-muted">{row.id}</span>,
-      sortBy: (row) => row.id,
-      filter: { type: "number", getValue: (row) => row.id },
-      mobileHidden: true,
-      // The very last to go (0.51.4, Kurvenschmiede): replies and the feedback loop name a
-      // report by its number, so it stays while anything else can give way.
-      fitPriority: 8,
-    },
-    {
-      key: "date",
-      header: labels.columnDate,
-      cell: (row) => <FeedbackDate value={row.created_at} renderDate={renderDate} />,
-      sortBy: (row) => instant(row.created_at),
-      filter: { type: "date", getValue: (row) => row.created_at },
-      // Seventh to go (0.51.4): the open report shows it.
-      fitPriority: 7,
-    },
-    {
-      key: "category",
-      header: labels.columnCategory,
-      cell: (row) => <FeedbackCategoryBadge category={row.category} label={categoryLabels[row.category]} />,
-      sortBy: (row) => feedbackCategoryRank(row.category),
-      filter: {
-        type: "select",
-        getValue: (row) => row.category,
-        options: FEEDBACK_CATEGORY_ORDER.map((value) => ({ value, label: categoryLabels[value] })),
-      },
-      // Last to go (Kurvenschmiede S1, 0.48), before Subject would drop below 10rem:
-      // the open report's Subject section repeats the badge.
-      fitPriority: 5,
-    },
-    {
-      key: "title",
-      header: labels.columnSubject,
-      cell: (row) => <FeedbackSubject row={row} labels={labels} />,
-      sortBy: (row) => row.title,
-      // Searchable by the environment too, so "dev" narrows to the test copy's reports —
-      // a chip you can see but not filter by makes you read every row (keksdose :804).
-      filterBy: (row) => {
-        const env = feedbackEnvironment(row.context);
-        return env ? `${row.title} ${labels.environment(env)}` : row.title;
-      },
-      mobilePrimary: true,
-      // The rest of the row, one line and an ellipsis (0.48, keksdose live #451: one long
-      // crash title pushed Status and the row actions off the edge).
-      grow: true,
-      // 8rem, not the table's 10 (0.51.4, Kurvenschmiede): at 768px beside a sidebar only
-      // Subject, Status (a fixed 13.5rem) and the row actions are left, and they were up
-      // to 20px too wide (Hungarian). A subject's first words carry it; the open report
-      // has the rest.
-      growMin: 8,
-    },
-    {
-      key: "user",
-      header: labels.columnUser,
-      // At most 12rem, one line and an ellipsis, the whole value in the kit's Tooltip (0.48 build
-      // review 2, keksdose N2): beside the grow Subject every other cell keeps one line, so
-      // an email standing in for a missing name widened the column and cost Votes and
-      // Category their room first. The open report shows both in full.
-      cell: (row) => {
-        const who = feedbackSubmitter(row, labels);
-        return (
-          <Tooltip label={who} portal lazy>
-            <span className="block max-w-[12rem] truncate-until-large text-secondary">{who}</span>
-          </Tooltip>
-        );
-      },
-      sortBy: (row) => feedbackSubmitter(row, labels),
-      // Name AND email, so either finds the person; the erased ones by the placeholder
-      // (their context holds no name any more).
-      filterBy: (row) =>
-        row.user_id == null ? labels.deletedUser : `${feedbackSubmitter(row, labels)} ${feedbackSubmitterEmail(row)}`,
-      // Sixth to go (0.51.4, Kurvenschmiede): with only 1–5, Subject reached its floor while
-      // #, Date and User were still drawn, and the inbox scrolled sideways from 768 to
-      // ~1115px beside an open sidebar. The open report names the submitter.
-      fitPriority: 6,
-    },
-    {
-      key: "email",
-      header: labels.columnEmail,
-      // One line, like the URL beside it: keksdose's `break-all` let the browser squeeze
-      // the column to its header and broke every address in two ("user@exam / ple.test"),
-      // which made every row taller. Unbroken, a resized (pinned) column ellipsises it.
-      className: "whitespace-nowrap",
-      cell: (row) => {
-        const email = feedbackSubmitterEmail(row);
-        return email ? (
-          <span className="text-secondary">{email}</span>
-        ) : (
-          <span className="text-placeholder">{EMPTY_FORMATTED_VALUE}</span>
-        );
-      },
-      sortBy: feedbackSubmitterEmail,
-      filterBy: feedbackSubmitterEmail,
-      mobileHidden: true,
-      // Second to go when the table is narrow: the open report shows the submitter.
-      fitPriority: 2,
-    },
-    {
-      key: "url",
-      header: labels.columnUrl,
-      // A cell only ellipsises what it is told not to wrap (keksdose live #348: the path
-      // clipped mid-character "behind the next column").
-      className: "whitespace-nowrap",
-      // The cell IS a link, so the row's own permalink must never wrap it (keksdose
-      // feedback #451: <a> in <a>, and "open the page" silently did nothing).
-      noRowLink: true,
-      cell: (row) => (
-        <FeedbackPageLinkCell context={row.context} openPage={labels.openPage} exclude={pageLinkExclude} />
-      ),
-      sortBy: (row) => feedbackPagePath(row.context) ?? "",
-      filterBy: (row) => feedbackPagePath(row.context) ?? "",
-      mobileHidden: true,
-      // First to go when the table is narrow (0.48): the open report repeats the page.
-      fitPriority: 1,
-    },
-    ...votesColumn,
-    {
-      key: "status",
-      header: labels.columnStatus,
-      // A KNOWN width: at most six 28px icon buttons (from IN_PROGRESS or IN_EVALUATION:
-      // one step either way and the three off the chain) — keksdose live #348 sized it
-      // for five and the sixth pushed the column wider.
-      className: "w-[13.5rem] whitespace-nowrap",
-      cell: (row) => (
-        <FeedbackStatusTransitions
-          status={row.status}
-          statuses={visibleFeedbackStatuses(row.status)}
-          canEdit={editable}
-          commit={commit}
-          onPick={(status) => onStatus(row, status)}
-          variant="icon"
-          label={(status) => statusLabels[status]}
-        />
-      ),
-      sortBy: (row) => statusRank(row.status),
-      filter: {
-        type: "select",
-        getValue: (row) => row.status,
-        options: FEEDBACK_STATUS_ORDER.map((value) => ({ value, label: statusLabels[value] })),
-      },
-    },
-    {
-      key: "resolved",
-      header: labels.columnResolved,
-      cell: (row) => <FeedbackDate value={row.resolved_at} renderDate={renderDate} />,
-      sortBy: (row) => instant(row.resolved_at),
-      filter: { type: "date", getValue: (row) => row.resolved_at },
-      mobileHidden: true,
-      // Third to go (0.48).
-      fitPriority: 3,
-    },
-  ];
-}
-
-/** What {@link useFeedbackColumns} takes: {@link FeedbackColumnsOptions} with the words
- *  read from the provider, and `renderDate` optional. */
-export interface UseFeedbackColumnsOptions extends Omit<
-  FeedbackColumnsOptions,
-  "renderDate" | "labels" | "statusLabels" | "categoryLabels" | "votesHeader"
-> {
-  /** Default: the kit's date with the weekday ({@link useFeedbackRenderDate}). */
-  renderDate?: FeedbackRenderDate;
-  /** Over the `feedbackPage` namespace. Keep it stable (module scope or memoised): it is
-   *  a dependency of the memo. */
-  labels?: LabelOverride<FeedbackPageLabels>;
-}
-
-/**
- * {@link feedbackColumns} with the `feedbackPage`, `feedbackStatus` and
- * `feedbackCategory` words from the provider, memoised on what it reads — pass
- * `update.mutateAsync` through `useFeedbackStatusUndo` (stable) rather than a fresh function
- * per render, or every row's columns are rebuilt on each render (keksdose :667).
- */
-export function useFeedbackColumns<T extends FeedbackTableRow>({
-  mine,
-  canEdit,
-  onStatus,
-  renderDate: renderDateProp,
-  commit,
-  votes,
-  pageLinkExclude,
-  labels: labelsProp,
-}: UseFeedbackColumnsOptions): DataTableColumn<T>[] {
-  const labels = useFeedbackPageLabels(labelsProp);
-  const statusLabels = useFeedbackStatusLabels();
-  const categoryLabels = useFeedbackCategoryLabels();
-  const votesHeader = useKitLabels("feedbackPublic", DEFAULT_FEEDBACK_PUBLIC_LABELS).columnVotes;
-  const renderDate = useFeedbackRenderDate(renderDateProp);
-  return useMemo(
-    () =>
-      feedbackColumns<T>({
-        mine,
-        canEdit,
-        onStatus,
-        renderDate,
-        commit,
-        labels,
-        statusLabels,
-        categoryLabels,
-        votes,
-        votesHeader,
-        pageLinkExclude,
-      }),
-    [
-      mine,
-      canEdit,
-      onStatus,
-      renderDate,
-      commit,
-      labels,
-      statusLabels,
-      categoryLabels,
-      votes,
-      votesHeader,
-      pageLinkExclude,
-    ],
-  );
-}
-
-/* ── The phone ──────────────────────────────────────────────────────────────── */
-
-/**
- * The phone list's day headers (keksdose feedback #325: the list "grouped by date, like
- * the transactions list"): `DataTable mobileGroupBy={feedbackMobileGroupBy(renderDate)}`.
- *
- * The key IS the header — the same string the card's date says. DataTable groups runs of
- * equal keys, so the rows must come newest first, as `GET /feedback` and
- * `GET /feedback/my` send them (§3.3).
- */
-export function feedbackMobileGroupBy(
-  renderDate: FeedbackRenderDate,
-): (row: Pick<FeedbackRecord, "created_at">) => string {
-  return (row) => renderDate(row.created_at);
-}
-
-export interface FeedbackMobileCardProps {
-  row: FeedbackTableRow;
-  /** Add the submitter after the date — the admin inbox (`canEdit`). On `/my-feedback`
-   *  every row is the viewer's own and the name would repeat down the list. */
-  showSubmitter?: boolean;
-  /** See {@link FeedbackRenderDate}; the same function as the columns' and the day
-   *  headers'. Default: the kit's ({@link useFeedbackRenderDate}). */
-  renderDate?: FeedbackRenderDate;
-  /** 0.38: the vote count as a chip beside the category — with `useFeedbackColumns`'
-   *  `votes`, whose column the phone hides. */
-  votes?: boolean;
-  /** Over the `feedbackPage` namespace. */
-  labels?: LabelOverride<FeedbackPageLabels>;
-}
-
-/**
- * One report as a phone card (§4.3; keksdose :1042, feedback #325 rework: *"compact card
- * instead of a wasteful label/value row per field"*): the title with its environment and
- * rework chips and the status badge on one line, then the compact category badge, the
- * date and (admin) the submitter beneath.
- *
- * `DataTable mobileCard={(row) => <FeedbackMobileCard row={row} … />}`. It draws the
- * chips itself: with a `mobileCard`, DataTable never renders the `mobilePrimary` cell,
- * which is how keksdose's cards lost them.
- */
-export function FeedbackMobileCard({
-  row,
-  showSubmitter = false,
-  renderDate: renderDateProp,
-  votes = false,
-  labels: labelsProp,
-}: FeedbackMobileCardProps) {
-  const labels = useFeedbackPageLabels(labelsProp);
-  const renderDate = useFeedbackRenderDate(renderDateProp);
-  return (
-    <div className="min-w-0 space-y-1">
-      <div className="flex items-start justify-between gap-2">
-        <FeedbackSubject row={row} wrap labels={labels} className="flex-1" />
-        {/* The pill the desktop status column draws, so a status is the same colour and
-            glyph on both layouts. */}
-        <FeedbackStatusBadge status={row.status} className="shrink-0" />
-      </div>
-      <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted">
-        <FeedbackCategoryBadge category={row.category} compact />
-        {votes && <FeedbackVoteCount votes={row.votes ?? undefined} />}
-        <FeedbackDate value={row.created_at} renderDate={renderDate} />
-        {showSubmitter && (
-          // The short id form: "#7" says enough on a card that has room for little.
-          <span className="min-w-0 truncate">
-            · {feedbackSubmitter(row, { deletedUser: labels.deletedUser, userFallback: (id) => `#${id}` })}
-          </span>
-        )}
-      </div>
-    </div>
-  );
-}
-
-export interface FeedbackAwaitingToggleProps {
-  /** Narrowed to what waits on the triager. Page state, not the URL (keksdose :699): a
-   *  thumb gesture on one screen, not a view worth linking to. */
-  pressed: boolean;
-  onPressedChange: (pressed: boolean) => void;
-  /** Further `FloatingAction`s, after the toggle — the group is what makes them free. */
-  children?: ReactNode;
-  /** Default `bottom-end`, the register's corner. */
-  corner?: FloatingCorner;
-  /** Over the group's default distance from the bottom. */
-  offset?: string;
-  /** On the group. It is `md:hidden` already: the desktop has the status column's
-   *  filter, the same question asked where there is room for it. */
-  className?: string;
-  /** Over the `feedbackPage` namespace. */
-  labels?: LabelOverride<FeedbackPageLabels>;
-}
-
-/**
- * The phone inbox's one filter button — **"Only what is waiting for you"** (§4.3;
- * keksdose live #330 rework: *"a button that toggles the evaluation items (in evaluation,
- * test when live) as toggle button similar to the show/hide upcoming/scheduled for the tx
- * page"*).
- *
- * It narrows TO `FEEDBACK_AWAITING_STATUSES` rather than hiding them: after a loop run
- * those ARE the queue — the rows handed back for a verdict — and everything else is
- * history. A `FloatingActionGroup` with one member anyway, in the register's corner and
- * shape (keksdose feedback #58), so a second action costs nothing; the glyph is
- * IN_EVALUATION's own, so the button reads in the vocabulary of the badges it filters on.
- *
- * Admin inbox only: on `/my-feedback` the author is not waiting on their own verdict.
- * The filtering is the page's — `rows.filter((r) => isFeedbackAwaiting(r.status))` —
- * so the table's own filters, sort and URL stay untouched.
- */
-export function FeedbackAwaitingToggle({
-  pressed,
-  onPressedChange,
-  children,
-  corner,
-  offset,
-  className,
-  labels: labelsProp,
-}: FeedbackAwaitingToggleProps) {
-  const labels = useFeedbackPageLabels(labelsProp);
-  const Icon = FEEDBACK_STATUS_META.IN_EVALUATION.icon;
-  return (
-    <FloatingActionGroup
-      aria-label={labels.phoneActions}
-      corner={corner}
-      offset={offset}
-      className={cn("md:hidden", className)}
-    >
-      <FloatingAction
-        label={labels.awaitingFilter}
-        icon={<Icon aria-hidden />}
-        pressed={pressed}
-        onClick={() => onPressedChange(!pressed)}
-      />
-      {children}
-    </FloatingActionGroup>
-  );
-}
-
-/* ── Empty ──────────────────────────────────────────────────────────────────── */
-
-export interface FeedbackEmptyStateProps {
-  /** Over the `feedbackPage` namespace. */
-  labels?: LabelOverride<FeedbackPageLabels>;
-}
-
-/**
- * The table with nothing to show (§7.13): the one word **None** / **Keine**, on both
- * pages — keksdose's `empty={t("common.none")}` (`feedback-page.tsx:982`). No hint
- * beneath it: where reports are sent from is the feedback menu's business, and the inbox
- * needs no sentence to say it is empty.
- *
- * For `DataTable empty`, which sits in a centred, muted cell — so no box of its own.
- * keksdose passes it unconditionally, so a filter (or the awaiting toggle) that leaves
- * nothing says "None" too: `empty={<FeedbackEmptyState />}`.
- */
-export function FeedbackEmptyState({ labels: labelsProp }: FeedbackEmptyStateProps) {
-  const labels = useFeedbackPageLabels(labelsProp);
-  return <span data-feedback-empty="">{labels.empty}</span>;
-}