@eifi1/ui-kit 0.51.3 → 0.51.5

package/src/feedback/feedback-comment-thread.tsx

@@ -128,10 +128,7 @@ type Entry = { at: number; order: number; message: FeedbackThreadMessage };
 
 /** The admin's Hide / Unhide as a promise — a sync throw or a `void` return included —
  *  so the click can catch it as Delete's does. */
-const hideComment = async (
-  onHide: NonNullable<FeedbackCommentThreadProps["onHide"]>,
-  comment: FeedbackComment,
-) => {
+const hideComment = async (onHide: NonNullable<FeedbackCommentThreadProps["onHide"]>, comment: FeedbackComment) => {
   await onHide(comment, !comment.hidden);
 };
 
@@ -186,7 +183,10 @@ export function FeedbackCommentThread({
             ? [{ name: attachmentName(reply.attachment_url), url: reply.attachment_url }]
             : undefined,
           badge: (
-            <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-entry-kind="rework">
+            <span
+              className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1"
+              data-feedback-entry-kind="rework"
+            >
               <FeedbackReworkEntryChip />
               {reply.status_to && (
                 <span className="inline-flex items-center gap-1" data-feedback-reply-status={reply.status_to}>
@@ -215,7 +215,10 @@ export function FeedbackCommentThread({
           : undefined,
         staff: true,
         badge: reply.status_to ? (
-          <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-reply-status={reply.status_to}>
+          <span
+            className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1"
+            data-feedback-reply-status={reply.status_to}
+          >
             <span className="sr-only">{replyLabels.statusChanged}</span>
             <span aria-hidden>→</span>
             <FeedbackStatusBadge status={reply.status_to} />

package/src/feedback/feedback-context.tsx

@@ -179,10 +179,7 @@ export function FeedbackContextBox({
   const lead = line.endsWith(submitter) ? line.slice(0, line.length - submitter.length) : null;
   return (
     <div
-      className={cn(
-        "space-y-1 rounded-md border border-subtle bg-surface-2 px-3 py-2 text-xs text-muted",
-        className,
-      )}
+      className={cn("space-y-1 rounded-md border border-subtle bg-surface-2 px-3 py-2 text-xs text-muted", className)}
     >
       <div className="[overflow-wrap:anywhere]">
         {lead === null ? (

package/src/feedback/feedback-dialog.tsx

@@ -251,16 +251,15 @@ export function FeedbackDialog(props: FeedbackDialogProps) {
   const [files, setFiles] = useState<File[]>([]);
   const isMobile = usePhoneLayout();
   const noticeId = useId();
-  const hasNotice = publicNotice !== undefined && publicNotice !== null && publicNotice !== false && publicNotice !== "";
+  const hasNotice =
+    publicNotice !== undefined && publicNotice !== null && publicNotice !== false && publicNotice !== "";
   const labels = useKitLabels("feedbackDialog", DEFAULT_FEEDBACK_DIALOG_LABELS, labelsProp);
   const attachmentText = useKitLabels("feedbackAttachment", DEFAULT_FEEDBACK_ATTACHMENT_LABELS, labelsProp);
   // Under `multiple` the heading is `attachmentList` — a screenshot AND photos — which
   // also names the chip list beneath it: one string, so the two cannot disagree. Its old
   // second name, `feedbackDialog.attachments`, went in 0.34.
   const listHeading =
-    labelsProp?.attachmentList ??
-    attachmentText.attachmentList ??
-    DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentList!;
+    labelsProp?.attachmentList ?? attachmentText.attachmentList ?? DEFAULT_FEEDBACK_ATTACHMENT_LABELS.attachmentList!;
   // The attachment field resolves its own keys from `feedbackAttachment`; it gets the
   // prop's (so a caller's `attachmentAdd` still wins) plus the resolved heading.
   const attachmentLabels =

package/src/feedback/feedback-inbox.tsx

@@ -239,9 +239,7 @@ export function FeedbackStatusTransitions({
               variant === "icon"
                 ? cn(
                     "flex size-7 items-center justify-center rounded",
-                    active
-                      ? cn(meta.activeBg, meta.activeText)
-                      : "text-placeholder hover:text-secondary",
+                    active ? cn(meta.activeBg, meta.activeText) : "text-placeholder hover:text-secondary",
                   )
                 : cn(
                     "inline-flex items-center gap-1.5 rounded-md border px-2 py-1 text-xs font-medium",
@@ -529,9 +527,7 @@ export function FeedbackDetailSection({
   return (
     <div>
       <div className="mb-1 flex items-center justify-between gap-2">
-        <div className="text-xs font-medium uppercase tracking-wide text-muted">
-          {title}
-        </div>
+        <div className="text-xs font-medium uppercase tracking-wide text-muted">{title}</div>
         {action}
       </div>
       {children}
@@ -552,7 +548,5 @@ export function FeedbackDetail({ children, className }: { children: ReactNode; c
  *  carry the entire "this arrived after the answer" reading. */
 export function FeedbackProse({ children, empty }: { children?: string; empty?: ReactNode }) {
   if (!children) return <p className="text-placeholder">{empty ?? "—"}</p>;
-  return (
-    <p className="whitespace-pre-wrap text-secondary">{children}</p>
-  );
+  return <p className="whitespace-pre-wrap text-secondary">{children}</p>;
 }

package/src/feedback/feedback-public-list.tsx

@@ -12,7 +12,13 @@ import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
 import { FILL_HEIGHT_CLASS } from "../shell/fill-height";
 import { EMPTY_FORMATTED_VALUE } from "../lib/format";
-import { FeedbackCategoryBadge, FeedbackDetail, FeedbackDetailSection, FeedbackProse, FeedbackStatusBadge } from "./feedback-inbox";
+import {
+  FeedbackCategoryBadge,
+  FeedbackDetail,
+  FeedbackDetailSection,
+  FeedbackProse,
+  FeedbackStatusBadge,
+} from "./feedback-inbox";
 import { useFeedbackCategoryLabels } from "./feedback-labels";
 import { FeedbackCommentThread, type FeedbackCommentsLabels } from "./feedback-comment-thread";
 import type { FeedbackEntryUploadOptions } from "./feedback-entry-file";

package/src/feedback/feedback-record.ts

@@ -161,11 +161,7 @@ export const DEFAULT_MAX_ATTACHMENTS = 5;
  * A plain array (not frozen) because `accept` takes `string[]`, as
  * `DEFAULT_ATTACHMENT_ACCEPT` does — copy it before changing it.
  */
-export const FEEDBACK_ATTACHMENT_ACCEPT: string[] = [
-  ...DEFAULT_ATTACHMENT_ACCEPT,
-  "application/pdf",
-  "text/plain",
-];
+export const FEEDBACK_ATTACHMENT_ACCEPT: string[] = [...DEFAULT_ATTACHMENT_ACCEPT, "application/pdf", "text/plain"];
 
 /**
  * The categories a person can pick — every one but `CRASH`, in triage order (Bug, Idea,
@@ -305,12 +301,7 @@ export function feedbackAttachmentLine(url: string): string {
  * something foreign — and written anyway it would sit in the body as prose that no
  * reader recognises as a file.
  */
-export function appendRework(
-  body: string,
-  note: string,
-  url?: string | null,
-  now: Date = new Date(),
-): string | null {
+export function appendRework(body: string, note: string, url?: string | null, now: Date = new Date()): string | null {
   const text = note.trim();
   if (!text) return null;
   if (url && !ATTACHMENT_URL.test(url)) {
@@ -339,9 +330,10 @@ export function reworkCount(body: string): number {
  * before server-kit 0.13, whose reworks are still `--- REWORK … ---` blocks). What the
  * Rework chip counts.
  */
-export function feedbackReworkCount(
-  row: { body?: string | null; replies?: readonly Pick<FeedbackReply, "kind">[] | null },
-): number {
+export function feedbackReworkCount(row: {
+  body?: string | null;
+  replies?: readonly Pick<FeedbackReply, "kind">[] | null;
+}): number {
   if (row.replies) {
     const entries = row.replies.filter((reply) => reply.kind === "rework").length;
     // A row migrated by an app that answers `replies` but not yet `kind` keeps its body's

package/src/feedback/feedback-replies.tsx

@@ -102,7 +102,10 @@ export interface FeedbackReplyTimelineProps {
 function EntryStatus({ reply, statusChanged }: { reply: FeedbackReply; statusChanged: string }) {
   if (!reply.status_to) return null;
   return (
-    <span className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1" data-feedback-reply-status={reply.status_to}>
+    <span
+      className="inline-flex min-w-0 max-w-full flex-wrap items-center gap-1"
+      data-feedback-reply-status={reply.status_to}
+    >
       <span className="sr-only">{statusChanged}</span>
       {reply.status_from && reply.status_from !== reply.status_to && (
         <>
@@ -167,7 +170,11 @@ export function FeedbackReplyTimeline({
               </time>
               <EntryStatus reply={reply} statusChanged={labels.statusChanged} />
             </div>
-            <p data-private={priv} dir="auto" className="mt-0.5 whitespace-pre-wrap break-words text-start text-primary">
+            <p
+              data-private={priv}
+              dir="auto"
+              className="mt-0.5 whitespace-pre-wrap break-words text-start text-primary"
+            >
               {reply.body}
             </p>
             {reply.attachment_url && (
@@ -312,9 +319,7 @@ export function FeedbackReplyComposer({
             aria-label={labels.status}
             value={picked}
             disabled={pending || uploading}
-            onChange={(event) =>
-              setPick({ under: suggestedStatus, value: event.target.value as FeedbackStatus | "" })
-            }
+            onChange={(event) => setPick({ under: suggestedStatus, value: event.target.value as FeedbackStatus | "" })}
             data-feedback-reply-status-pick=""
           >
             <option value="">{labels.noChange}</option>

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

@@ -234,8 +234,7 @@ export function feedbackPageUrl(context: FeedbackContext | null | undefined): st
  * keyed by URL, a React key clash keksdose had).
  */
 export function feedbackAttachmentUrls(
-  row: Pick<FeedbackRecord, "screenshot_url" | "attachment_urls" | "body"> &
-    Partial<Pick<FeedbackRecord, "replies">>,
+  row: Pick<FeedbackRecord, "screenshot_url" | "attachment_urls" | "body"> & Partial<Pick<FeedbackRecord, "replies">>,
 ): string[] {
   const urls = [
     ...(row.screenshot_url ? [row.screenshot_url] : []),
@@ -695,9 +694,7 @@ export function FeedbackRowDetail({
         <FeedbackDetailSection title={labels.subject}>
           <p className="flex flex-wrap items-center gap-x-2 gap-y-1 text-sm" data-feedback-subject="">
             <FeedbackCategoryBadge category={row.category} />
-            <span className="min-w-0 font-medium text-primary [overflow-wrap:anywhere]">
-              {row.title}
-            </span>
+            <span className="min-w-0 font-medium text-primary [overflow-wrap:anywhere]">{row.title}</span>
           </p>
         </FeedbackDetailSection>
       )}

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

@@ -37,10 +37,7 @@ export interface FeedbackStatusPatch {
  * 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.
  */
-export type FeedbackStatusMutate = (
-  patch: FeedbackStatusPatch,
-  callbacks: { onSuccess: () => void },
-) => void;
+export type FeedbackStatusMutate = (patch: FeedbackStatusPatch, callbacks: { onSuccess: () => void }) => void;
 
 /** 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). */

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

@@ -107,12 +107,12 @@ export function FeedbackSubmitDialog({
         )
       }
       onCaptureScreenshot={onCaptureScreenshot}
-      publicNotice={
-        publicNotice ? (dialogText.publicNotice ?? DEFAULT_FEEDBACK_DIALOG_LABELS.publicNotice) : undefined
-      }
+      publicNotice={publicNotice ? (dialogText.publicNotice ?? DEFAULT_FEEDBACK_DIALOG_LABELS.publicNotice) : undefined}
       // The context is read off the very values the box below shows (§3.2).
       onSubmit={(data) => onSubmit(data, feedbackContext({ user, attachUrl, url, environment, version }))}
-      contextSlot={<FeedbackContextBox user={user} url={url} attachUrl={attachUrl} onAttachUrlChange={onAttachUrlChange} />}
+      contextSlot={
+        <FeedbackContextBox user={user} url={url} attachUrl={attachUrl} onAttachUrlChange={onAttachUrlChange} />
+      }
     />
   );
 }

package/src/feedback/feedback-table.tsx

@@ -29,7 +29,12 @@ import {
   type FeedbackCategoryLabels,
   type FeedbackStatusLabels,
 } from "./feedback-labels";
-import { FEEDBACK_AWAITING_STATUSES, feedbackReworkCount, type FeedbackContext, type FeedbackRecord } from "./feedback-record";
+import {
+  FEEDBACK_AWAITING_STATUSES,
+  feedbackReworkCount,
+  type FeedbackContext,
+  type FeedbackRecord,
+} from "./feedback-record";
 import type { FeedbackStatusChange } from "./feedback-status-undo";
 import { feedbackPageHref, feedbackPagePath } from "./feedback-row-detail";
 import type { CommitScope } from "../components/write-lock";
@@ -356,8 +361,7 @@ function FeedbackPageLinkCell({ context, openPage }: { context: FeedbackContext
     <>
       {/* 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">{path}</code>
+      <span className="sr-only">{openPage}</span> <code className="min-w-0 truncate text-xs">{path}</code>
       <ExternalLink className="size-3 shrink-0" aria-hidden />
     </>
   );
@@ -453,7 +457,9 @@ function statusRank(status: FeedbackStatus): number {
  * - 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) before Subject would drop below 10rem. Drop the two keys with
+ *   (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
@@ -499,6 +505,9 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       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",
@@ -506,6 +515,8 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       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",
@@ -536,6 +547,11 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       // 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",
@@ -556,9 +572,11 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       // 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)}`,
+        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",
@@ -638,8 +656,10 @@ export function feedbackColumns<T extends FeedbackTableRow>({
 
 /** 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"> {
+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

package/src/feedback/feedback-thread.tsx

@@ -18,10 +18,7 @@ import { FeedbackAttachmentField } from "./feedback-attachment";
 import type { FeedbackAttachmentFieldSingleProps } from "./feedback-attachment";
 import type { FeedbackNoteAttachment } from "./feedback-inbox";
 import type { FeedbackAttachmentLabels } from "./feedback-dialog";
-import {
-  DEFAULT_FEEDBACK_COMPOSER_LABELS,
-  DEFAULT_FEEDBACK_THREAD_LABELS,
-} from "./feedback-thread-labels";
+import { DEFAULT_FEEDBACK_COMPOSER_LABELS, DEFAULT_FEEDBACK_THREAD_LABELS } from "./feedback-thread-labels";
 
 /**
  * The conversation under a report: who said what, when, with what attached — and the
@@ -217,12 +214,7 @@ export function FeedbackThread({
   }
   if (messages.length === 0) {
     return (
-      <EmptyState
-        variant="inline"
-        size="sm"
-        title={empty ?? labels.empty}
-        className={cn("justify-start", className)}
-      />
+      <EmptyState variant="inline" size="sm" title={empty ?? labels.empty} className={cn("justify-start", className)} />
     );
   }
 
@@ -288,9 +280,7 @@ export function FeedbackThread({
             <article
               className={cn(
                 "max-w-[85%] min-w-0 rounded-lg px-3 py-2 text-sm",
-                message.own
-                  ? "rounded-ee-sm bg-brand-soft"
-                  : "rounded-es-sm bg-surface-2",
+                message.own ? "rounded-ee-sm bg-brand-soft" : "rounded-es-sm bg-surface-2",
               )}
             >
               <header className="mb-0.5 flex flex-wrap items-center gap-x-2 gap-y-0.5 text-caption text-muted">
@@ -361,9 +351,7 @@ function DefaultAttachment({
       {/* A file name wraps from Large up, as the attachments of the composer do (text
           size §10.17; round 0.34 T1: the sweep read "export-20…"). */}
       <span className="min-w-0 truncate-until-large">{name}</span>
-      {attachment.size !== undefined && (
-        <span className="shrink-0 text-muted">{size(attachment.size)}</span>
-      )}
+      {attachment.size !== undefined && <span className="shrink-0 text-muted">{size(attachment.size)}</span>}
     </>
   );
   const chip =

package/src/feedback/feedback-vocabulary.ts

@@ -37,15 +37,7 @@ import type { LucideIcon } from "lucide-react";
  *  implementation", and nobody works an OPEN row. `REWORK` joined in 0.40 (§10.2
  *  decisions 2, 4): "sent back, released for work again" — a READY that came back. */
 export type FeedbackStatus =
-  | "OPEN"
-  | "READY"
-  | "REWORK"
-  | "IN_PROGRESS"
-  | "IN_EVALUATION"
-  | "NEEDS_LIVE_TEST"
-  | "POSTPONED"
-  | "DONE"
-  | "WONT_DO";
+  "OPEN" | "READY" | "REWORK" | "IN_PROGRESS" | "IN_EVALUATION" | "NEEDS_LIVE_TEST" | "POSTPONED" | "DONE" | "WONT_DO";
 
 /** What a report is about. `CRASH` is filed by an error boundary and never
  *  chosen, which is exactly why it is loud below and absent from every picker. */
@@ -61,79 +53,77 @@ export type FeedbackCategory = "CRASH" | "BUG" | "IDEA" | "QUESTION" | "OTHER";
  * a restated list cannot be checked for exhaustiveness: an eighth status would
  * break the build here and leave a literal eight long (as READY did in 0.31).
  */
-export const FEEDBACK_STATUS_META: Record<
-  FeedbackStatus,
-  { icon: LucideIcon; activeBg: string; activeText: string }
-> = {
-  OPEN: {
-    icon: Inbox,
-    activeBg: "bg-active",
-    activeText: "text-primary",
-  },
-  // Triaged and released for implementation (feedback contract §8.2, keksdose live
-  // #396): OPEN is "filed, nobody has looked yet", READY is "go". The brand tint at full
-  // strength, so it reads as the go-ahead beside OPEN's neutral fill and
-  // NEEDS_LIVE_TEST's muted brand.
-  READY: {
-    icon: ClipboardCheck,
-    activeBg: "bg-brand-soft",
-    activeText: "text-brand",
-  },
-  // Sent back by its author or an admin and released for work again (0.40, feedback
-  // contract §10.2 decision 4): the Rework button's `RotateCcw`, in the danger tint so the
-  // queue shows reworks apart from new reports. Not IN_PROGRESS's warning tint — that is
-  // where a REWORK row moves next — and WONT_DO, the only other red, sits at the far end
-  // with `Ban`.
-  REWORK: {
-    icon: RotateCcw,
-    activeBg: "bg-danger-soft",
-    activeText: "text-danger",
-  },
-  IN_PROGRESS: {
-    icon: Wrench,
-    activeBg: "bg-warning-soft",
-    activeText: "text-warning",
-  },
-  // Where solved work is parked, waiting on the person who reported it. Its own
-  // colour, because "somebody has to check this" is a state you want to find by
-  // scanning rather than by reading.
-  IN_EVALUATION: {
-    icon: Eye,
-    activeBg: "bg-info-soft",
-    activeText: "text-info",
-  },
-  // Resolved but only checkable on a deployed build — the SOFT brand tint, so it
-  // reads as "waiting on something" rather than as a done or a refusal, and it
-  // follows whatever the consumer's brand is instead of pinning an indigo island
-  // beside it.
-  NEEDS_LIVE_TEST: {
-    icon: CloudUpload,
-    activeBg: "bg-brand-soft",
-    activeText: "text-brand-muted",
-  },
-  // Parked on purpose. Muted, not `--danger`: it is not a refusal.
-  POSTPONED: {
-    icon: PauseCircle,
-    activeBg: "bg-active",
-    activeText: "text-secondary",
-  },
-  // The one status with nowhere to move to: the vocabulary has a brand, an info, a
-  // warning and a danger, and nothing that means "succeeded". Deliberately NOT
-  // borrowed from a family that means something else — `--status-synced` is a
-  // FIELD's trip to the database rather than an outcome, and tokens.css says so in
-  // as many words. Green beside WONT_DO's red is the classic CVD-unsafe pair, which
-  // is why both carry a glyph and neither leans on colour alone.
-  DONE: {
-    icon: CheckCircle2,
-    activeBg: "bg-success-soft",
-    activeText: "text-success",
-  },
-  WONT_DO: {
-    icon: Ban,
-    activeBg: "bg-danger-soft",
-    activeText: "text-danger",
-  },
-};
+export const FEEDBACK_STATUS_META: Record<FeedbackStatus, { icon: LucideIcon; activeBg: string; activeText: string }> =
+  {
+    OPEN: {
+      icon: Inbox,
+      activeBg: "bg-active",
+      activeText: "text-primary",
+    },
+    // Triaged and released for implementation (feedback contract §8.2, keksdose live
+    // #396): OPEN is "filed, nobody has looked yet", READY is "go". The brand tint at full
+    // strength, so it reads as the go-ahead beside OPEN's neutral fill and
+    // NEEDS_LIVE_TEST's muted brand.
+    READY: {
+      icon: ClipboardCheck,
+      activeBg: "bg-brand-soft",
+      activeText: "text-brand",
+    },
+    // Sent back by its author or an admin and released for work again (0.40, feedback
+    // contract §10.2 decision 4): the Rework button's `RotateCcw`, in the danger tint so the
+    // queue shows reworks apart from new reports. Not IN_PROGRESS's warning tint — that is
+    // where a REWORK row moves next — and WONT_DO, the only other red, sits at the far end
+    // with `Ban`.
+    REWORK: {
+      icon: RotateCcw,
+      activeBg: "bg-danger-soft",
+      activeText: "text-danger",
+    },
+    IN_PROGRESS: {
+      icon: Wrench,
+      activeBg: "bg-warning-soft",
+      activeText: "text-warning",
+    },
+    // Where solved work is parked, waiting on the person who reported it. Its own
+    // colour, because "somebody has to check this" is a state you want to find by
+    // scanning rather than by reading.
+    IN_EVALUATION: {
+      icon: Eye,
+      activeBg: "bg-info-soft",
+      activeText: "text-info",
+    },
+    // Resolved but only checkable on a deployed build — the SOFT brand tint, so it
+    // reads as "waiting on something" rather than as a done or a refusal, and it
+    // follows whatever the consumer's brand is instead of pinning an indigo island
+    // beside it.
+    NEEDS_LIVE_TEST: {
+      icon: CloudUpload,
+      activeBg: "bg-brand-soft",
+      activeText: "text-brand-muted",
+    },
+    // Parked on purpose. Muted, not `--danger`: it is not a refusal.
+    POSTPONED: {
+      icon: PauseCircle,
+      activeBg: "bg-active",
+      activeText: "text-secondary",
+    },
+    // The one status with nowhere to move to: the vocabulary has a brand, an info, a
+    // warning and a danger, and nothing that means "succeeded". Deliberately NOT
+    // borrowed from a family that means something else — `--status-synced` is a
+    // FIELD's trip to the database rather than an outcome, and tokens.css says so in
+    // as many words. Green beside WONT_DO's red is the classic CVD-unsafe pair, which
+    // is why both carry a glyph and neither leans on colour alone.
+    DONE: {
+      icon: CheckCircle2,
+      activeBg: "bg-success-soft",
+      activeText: "text-success",
+    },
+    WONT_DO: {
+      icon: Ban,
+      activeBg: "bg-danger-soft",
+      activeText: "text-danger",
+    },
+  };
 
 /** Chain order, then the three off it. The order a picker offers, and the rank a
  *  status column sorts by — so a list sorted by status reads as a queue rather

package/src/feedback/feedback-vote-button.tsx

@@ -74,8 +74,7 @@ export function FeedbackVoteButton({
   // pressed against: a refetch that brings new numbers is the truth.
   const [shown, setShown] = useState<{ base: FeedbackVoteState; state: FeedbackVoteState } | null>(null);
   const busy = useRef(false);
-  const current =
-    shown && shown.base.votes === votes && shown.base.voted === voted ? shown.state : { votes, voted };
+  const current = shown && shown.base.votes === votes && shown.base.voted === voted ? shown.state : { votes, voted };
   const pressed = own || current.voted;
 
   const press = () => {
@@ -85,12 +84,14 @@ export function FeedbackVoteButton({
     const next = !before.voted;
     busy.current = true;
     setShown({ base, state: { votes: Math.max(0, before.votes + (next ? 1 : -1)), voted: next } });
-    onVote(next).then(
-      (answer) => setShown({ base, state: { votes: answer.votes, voted: answer.voted } }),
-      () => setShown({ base, state: before }),
-    ).finally(() => {
-      busy.current = false;
-    });
+    onVote(next)
+      .then(
+        (answer) => setShown({ base, state: { votes: answer.votes, voted: answer.voted } }),
+        () => setShown({ base, state: before }),
+      )
+      .finally(() => {
+        busy.current = false;
+      });
   };
 
   const count = formatNumber(current.votes, { locale });

package/src/hooks/use-anchored-rect.ts

@@ -36,10 +36,7 @@ export function sameRect<R extends { top: number; left: number; width: number; h
  * Measured in a layout effect so the position is ready before paint (no flicker
  * on open).
  */
-export function useAnchoredRect<T extends HTMLElement>(
-  ref: RefObject<T | null>,
-  open: boolean,
-): AnchorRect | null {
+export function useAnchoredRect<T extends HTMLElement>(ref: RefObject<T | null>, open: boolean): AnchorRect | null {
   const [rect, setRect] = useState<AnchorRect | null>(null);
 
   useLayoutEffect(() => {

package/src/hooks/use-document-title.ts

@@ -19,7 +19,9 @@ export function useDocumentTitle(parts: ReadonlyArray<string | null | undefined
   const { format, appName } = useKitDocumentTitle();
   const [page, section, app] = parts.map((p) => (typeof p === "string" && p.trim() !== "" ? p : undefined));
   const any = parts.some((p) => typeof p === "string" && p.trim() !== "");
-  const title = any ? formatDocumentTitle(format ?? DEFAULT_DOCUMENT_TITLE_FORMAT, { page, section, app: app ?? appName }) : null;
+  const title = any
+    ? formatDocumentTitle(format ?? DEFAULT_DOCUMENT_TITLE_FORMAT, { page, section, app: app ?? appName })
+    : null;
   useEffect(() => {
     if (title === null || title === "") return;
     const before = document.title;

package/src/hooks/use-file-drop.ts

@@ -111,9 +111,7 @@ export function useDragTarget<E extends Element = Element>({
   return { dropProps, isOver: over && !disabled };
 }
 
-export function useFileDrop<E extends Element = Element>(
-  options: UseFileDropOptions,
-): UseFileDropReturn<E> {
+export function useFileDrop<E extends Element = Element>(options: UseFileDropOptions): UseFileDropReturn<E> {
   const picker = useFilePicker(options);
   const { dropProps, isOver } = useDragTarget<E>({
     disabled: options.disabled,