Feedback categories page; treat 204 responses as success

Feedback → Categories: add, rename, reorder, archive/restore, and delete
unused categories. Feedback rows show the category's current label.

The API helper now accepts 204 No Content, which previously surfaced as a
"No Content" error after archive/delete and quiz attempt resets.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

app/(dashboard)/feedback/categories/page.tsx

@@ -0,0 +1,366 @@
+"use client";
+
+/**
+ * /feedback/categories — the options on the app's /feedback form.
+ *
+ * A category's key (what each submission stores) is fixed when it's created,
+ * so renaming one relabels every past submission too. Archiving takes it off
+ * the form but keeps its label on existing feedback. Only a category nothing
+ * has been filed under can be deleted — production feedback is never left
+ * without a category.
+ *
+ * Anyone who can read feedback can see this page; changing it needs
+ * feedback:categories.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import Link from "next/link";
+import { ArrowDown, ArrowUp, Plus } from "lucide-react";
+import { toast } from "sonner";
+import {
+  AdminError,
+  feedbackCategories,
+  type FeedbackCategory,
+} from "@/lib/api";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Modal } from "@/components/ui/modal";
+import { Clamp } from "@/components/ui/clamp";
+import { Can, useStaff } from "@/components/staff-context";
+import { useConfirm } from "@/components/confirm";
+
+const errMsg = (err: unknown, fallback: string) =>
+  err instanceof AdminError ? err.message : fallback;
+
+export default function FeedbackCategoriesPage() {
+  const [list, setList] = useState<FeedbackCategory[] | null>(null);
+  const [editing, setEditing] = useState<FeedbackCategory | "new" | null>(
+    null,
+  );
+  const [busy, setBusy] = useState(false);
+  const confirm = useConfirm();
+  const { can } = useStaff();
+  const canEdit = can("feedback:categories");
+
+  const refresh = useCallback(
+    () =>
+      feedbackCategories
+        .list()
+        .then(setList)
+        .catch((err) => {
+          toast.error(errMsg(err, "Could not load categories"));
+          setList([]);
+        }),
+    [],
+  );
+
+  useEffect(() => {
+    void refresh();
+  }, [refresh]);
+
+  const active = (list ?? []).filter((c) => !c.archived_at);
+  const archived = (list ?? []).filter((c) => c.archived_at);
+
+  const run = async (fn: () => Promise<unknown>, ok: string) => {
+    setBusy(true);
+    try {
+      await fn();
+      toast.success(ok);
+      await refresh();
+    } catch (err) {
+      toast.error(errMsg(err, "That didn't work"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  const move = (i: number, by: number) => {
+    const j = i + by;
+    if (j < 0 || j >= active.length) return;
+    const keys = active.map((c) => c.key);
+    [keys[i], keys[j]] = [keys[j], keys[i]];
+    void run(() => feedbackCategories.reorder(keys), "Order saved");
+  };
+
+  const setArchived = (c: FeedbackCategory, archived: boolean) =>
+    run(
+      () =>
+        feedbackCategories.update(c.key, {
+          label: c.label,
+          description: c.description,
+          archived,
+        }),
+      archived ? `“${c.label}” archived` : `“${c.label}” restored`,
+    );
+
+  const remove = async (c: FeedbackCategory) => {
+    if (
+      await confirm({
+        title: `Delete “${c.label}”?`,
+        message: "Nothing has been filed under it, so nothing else changes.",
+        confirmLabel: "Delete category",
+        destructive: true,
+      })
+    ) {
+      void run(() => feedbackCategories.remove(c.key), "Category deleted");
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <header className="flex flex-wrap items-start justify-between gap-4">
+        <div className="min-w-0 flex-1 basis-64">
+          <Link
+            href="/feedback"
+            className="text-xs text-muted-foreground hover:text-foreground"
+          >
+            ← Feedback
+          </Link>
+          <h1 className="mt-1 text-xl font-semibold text-foreground">
+            Feedback categories
+          </h1>
+          <p className="mt-1 text-sm text-muted-foreground">
+            The choices on the app&apos;s feedback form, in this order.
+            Renaming a category relabels its past feedback too. Archive one to
+            take it off the form without touching what&apos;s already been sent.
+          </p>
+        </div>
+        <Can perm="feedback:categories">
+          <Button onClick={() => setEditing("new")}>
+            <Plus className="size-4" />
+            New category
+          </Button>
+        </Can>
+      </header>
+
+      {list === null ? (
+        <p className="text-sm text-muted-foreground">Loading…</p>
+      ) : (
+        <>
+          <section className="space-y-2">
+            <h2 className="text-sm font-medium text-foreground">
+              On the form
+            </h2>
+            <ul className="divide-y divide-border rounded-xl border border-border bg-card">
+              {active.map((c, i) => (
+                <li
+                  key={c.key}
+                  className="flex flex-wrap items-start gap-3 px-4 py-3"
+                >
+                  <CategoryText c={c} />
+                  {canEdit && (
+                    <div className="flex shrink-0 flex-wrap items-center gap-1">
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        disabled={busy || i === 0}
+                        onClick={() => move(i, -1)}
+                        aria-label={`Move ${c.label} up`}
+                      >
+                        <ArrowUp className="size-4" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        disabled={busy || i === active.length - 1}
+                        onClick={() => move(i, 1)}
+                        aria-label={`Move ${c.label} down`}
+                      >
+                        <ArrowDown className="size-4" />
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        disabled={busy}
+                        onClick={() => setEditing(c)}
+                      >
+                        Edit
+                      </Button>
+                      <Button
+                        size="sm"
+                        variant="ghost"
+                        // The form must always offer something.
+                        disabled={busy || active.length === 1}
+                        onClick={() => void setArchived(c, true)}
+                      >
+                        Archive
+                      </Button>
+                    </div>
+                  )}
+                </li>
+              ))}
+            </ul>
+          </section>
+
+          {archived.length > 0 && (
+            <section className="space-y-2">
+              <h2 className="text-sm font-medium text-foreground">Archived</h2>
+              <p className="text-xs text-muted-foreground">
+                Not offered on the form. Feedback already filed under them
+                keeps its category.
+              </p>
+              <ul className="divide-y divide-border rounded-xl border border-border bg-card">
+                {archived.map((c) => (
+                  <li
+                    key={c.key}
+                    className="flex flex-wrap items-start gap-3 px-4 py-3 opacity-80"
+                  >
+                    <CategoryText c={c} />
+                    {canEdit && (
+                      <div className="flex shrink-0 flex-wrap items-center gap-1">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          disabled={busy}
+                          onClick={() => setEditing(c)}
+                        >
+                          Edit
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          disabled={busy}
+                          onClick={() => void setArchived(c, false)}
+                        >
+                          Restore
+                        </Button>
+                        {!c.usage_count && (
+                          <Button
+                            size="sm"
+                            variant="ghost"
+                            disabled={busy}
+                            onClick={() => void remove(c)}
+                            className="text-destructive"
+                          >
+                            Delete
+                          </Button>
+                        )}
+                      </div>
+                    )}
+                  </li>
+                ))}
+              </ul>
+            </section>
+          )}
+        </>
+      )}
+
+      <CategoryModal
+        target={editing}
+        onClose={() => setEditing(null)}
+        onSaved={() => {
+          setEditing(null);
+          void refresh();
+        }}
+      />
+    </div>
+  );
+}
+
+function CategoryText({ c }: { c: FeedbackCategory }) {
+  const n = c.usage_count ?? 0;
+  return (
+    <div className="min-w-0 flex-1 basis-48">
+      <Clamp className="text-sm font-medium text-foreground">{c.label}</Clamp>
+      {c.description && (
+        <Clamp lines={2} className="mt-0.5 text-xs text-muted-foreground">
+          {c.description}
+        </Clamp>
+      )}
+      <p className="mt-1 text-xs text-muted-foreground">
+        <span className="font-mono">{c.key}</span> · {n}{" "}
+        {n === 1 ? "submission" : "submissions"}
+      </p>
+    </div>
+  );
+}
+
+function CategoryModal({
+  target,
+  onClose,
+  onSaved,
+}: {
+  target: FeedbackCategory | "new" | null;
+  onClose: () => void;
+  onSaved: () => void;
+}) {
+  const editing = target && target !== "new" ? target : null;
+  // Re-seed the fields whenever a different category (or "new") opens.
+  const seed = editing ? editing.key : target;
+  const [lastSeed, setLastSeed] = useState<typeof seed>(null);
+  const [label, setLabel] = useState("");
+  const [description, setDescription] = useState("");
+  const [busy, setBusy] = useState(false);
+  if (seed !== lastSeed) {
+    setLastSeed(seed);
+    setLabel(editing?.label ?? "");
+    setDescription(editing?.description ?? "");
+  }
+
+  const save = async () => {
+    if (!label.trim()) return;
+    setBusy(true);
+    try {
+      if (editing) {
+        await feedbackCategories.update(editing.key, {
+          label: label.trim(),
+          description: description.trim(),
+          archived: !!editing.archived_at,
+        });
+        toast.success("Category saved");
+      } else {
+        await feedbackCategories.create(label.trim(), description.trim());
+        toast.success("Category added to the form");
+      }
+      onSaved();
+    } catch (err) {
+      toast.error(errMsg(err, "Could not save the category"));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <Modal
+      open={target !== null}
+      onClose={onClose}
+      title={editing ? "Edit category" : "New category"}
+    >
+      <div className="space-y-4">
+        <label className="block space-y-1.5">
+          <span className="text-sm font-medium">Name</span>
+          <Input
+            value={label}
+            onChange={(e) => setLabel(e.target.value)}
+            maxLength={60}
+            placeholder="e.g. Audio & playback"
+          />
+        </label>
+        <label className="block space-y-1.5">
+          <span className="text-sm font-medium">Description</span>
+          <Input
+            value={description}
+            onChange={(e) => setDescription(e.target.value)}
+            maxLength={200}
+            placeholder="Shown under the choice on the form (optional)"
+          />
+        </label>
+        {editing && (editing.usage_count ?? 0) > 0 && (
+          <p className="text-xs text-muted-foreground">
+            {editing.usage_count} past{" "}
+            {editing.usage_count === 1 ? "submission" : "submissions"} will
+            show the new name.
+          </p>
+        )}
+        <div className="flex justify-end gap-2">
+          <Button variant="ghost" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={() => void save()} disabled={busy || !label.trim()}>
+            {busy ? "Saving…" : editing ? "Save" : "Add category"}
+          </Button>
+        </div>
+      </div>
+    </Modal>
+  );
+}

app/(dashboard)/feedback/page.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useCallback, useState } from "react";
+import Link from "next/link";
+import { Tags } from "lucide-react";
 import { Can } from "@/components/staff-context";
 import { toast } from "sonner";
 import { api, AdminError, type AdminFeedback } from "@/lib/api";
@@ -70,21 +72,29 @@ export default function FeedbackPage() {
       total={list.total}
       list={list}
       toolbar={
-        <div className="flex gap-1 rounded-lg border border-border bg-card p-1">
+        <div className="flex flex-wrap items-center gap-2">
-          {STATUSES.map((s) => (
+          <Link href="/feedback/categories">
-            <button
+            <Button variant="outline" size="sm">
-              key={s}
+              <Tags className="size-4" />
-              onClick={() => setStatus(s)}
+              Categories
-              className={cn(
+            </Button>
-                "rounded-md px-3 py-1.5 text-sm capitalize transition-colors",
+          </Link>
-                status === s
+          <div className="flex gap-1 rounded-lg border border-border bg-card p-1">
-                  ? "bg-accent text-accent-foreground font-medium"
+            {STATUSES.map((s) => (
-                  : "text-muted-foreground hover:text-foreground",
+              <button
-              )}
+                key={s}
-            >
+                onClick={() => setStatus(s)}
-              {s}
+                className={cn(
-            </button>
+                  "rounded-md px-3 py-1.5 text-sm capitalize transition-colors",
-          ))}
+                  status === s
+                    ? "bg-accent text-accent-foreground font-medium"
+                    : "text-muted-foreground hover:text-foreground",
+                )}
+              >
+                {s}
+              </button>
+            ))}
+          </div>
         </div>
       }
     >
@@ -122,7 +132,7 @@ export default function FeedbackPage() {
                 </TD>
                 <TD className="max-w-md">
                   <div className="text-xs uppercase tracking-wide text-muted-foreground">
-                    {f.category}
+                    {f.category_label || f.category}
                   </div>
                   <div className="mt-0.5 whitespace-pre-line">{f.message}</div>
                   {f.reply_message ? (
@@ -246,7 +256,7 @@ function ReplyModal({
         {feedback ? (
           <div className="rounded-md bg-muted px-3 py-2 text-sm">
             <div className="text-xs uppercase tracking-wide text-muted-foreground">
-              {feedback.category}
+              {feedback.category_label || feedback.category}
             </div>
             <div className="mt-0.5 whitespace-pre-line">{feedback.message}</div>
           </div>

lib/api.ts

@@ -36,6 +36,9 @@ async function call<T>(
     headers: { "Content-Type": "application/json", ...(init?.headers ?? {}) },
     ...init,
   });
+  // 204 No Content (archive, delete, reset…) is success with no body —
+  // there's no JSON to parse.
+  if (res.status === 204) return { data: undefined as T };
   let body: Envelope<T>;
   try {
     body = (await res.json()) as Envelope<T>;
@@ -191,6 +194,8 @@ export type AdminCollection = {
 export type AdminFeedback = {
   id: string;
   category: string;
+  /** The category's current display name. */
+  category_label?: string;
   message: string;
   contact_email: string | null;
   created_at: string;
@@ -748,3 +753,40 @@ export const quizzes = {
   resetParticipant: (id: string, userId: string) =>
     call<void>(`/admin/quizzes/${id}/participants/${userId}`, { method: "DELETE" }),
 };
+
+// ─── Feedback categories ────────────────────────────────────────────────────
+
+/** One option on the app's /feedback form. `key` is fixed once created. */
+export type FeedbackCategory = {
+  key: string;
+  label: string;
+  description: string;
+  sort_order: number;
+  archived_at?: string | null;
+  /** How much feedback is filed under it. */
+  usage_count?: number;
+};
+
+export const feedbackCategories = {
+  list: () =>
+    call<FeedbackCategory[]>("/admin/feedback/categories").then((r) => r.data),
+  create: (label: string, description: string) =>
+    call<FeedbackCategory>("/admin/feedback/categories", {
+      method: "POST",
+      body: JSON.stringify({ label, description }),
+    }).then((r) => r.data),
+  update: (key: string, v: { label: string; description: string; archived: boolean }) =>
+    call<void>(`/admin/feedback/categories/${encodeURIComponent(key)}`, {
+      method: "PUT",
+      body: JSON.stringify(v),
+    }),
+  remove: (key: string) =>
+    call<void>(`/admin/feedback/categories/${encodeURIComponent(key)}`, {
+      method: "DELETE",
+    }),
+  reorder: (keys: string[]) =>
+    call<void>("/admin/feedback/categories/order", {
+      method: "PUT",
+      body: JSON.stringify({ keys }),
+    }),
+};