Close the web-feasible 100% gaps: REST write/token API, tickets, draw-badge, /me, sanitisation, dusk, radio SSE

Final parity push (web-tier only):
- REST API write + token auth: POST /api/tokens (issue a personal_access_token
  for the session user), Bearer auth via src/lib/api-auth.ts, POST
  /api/articles/[slug]/comment, GET/DELETE /api/me/tokens, full tickets API
  (/api/tickets +[id] +[id]/reply), radio current-dj/points/points-leaderboard/
  embed-config + POST shouts, and a real-time /api/radio/stream (SSE). 31 public
  API routes total.
- Pages: /draw-badge (buy a custom profile badge → credits + RCON), /me
  dashboard (stats + online friends + referral claim). Wired into the nav.
- HTML sanitisation (sanitize-html) — the HTMLPurifier equivalent — applied to
  writeable boxes + article bodies before dangerouslySetInnerHTML.
- "Dusk" dark theme preset + a default-dark site option honoured by the
  no-flash boot script.

Verified live (prod, amx_test): token issue → Bearer endpoint 200, no-token
401; /api/me/tokens lists it; current-dj/leaderboard JSON; /me + /draw-badge
200; reverted the test user + tokens. tsc 0, vitest 49/49, next build 0.

src/app/draw-badge/page.tsx

@@ -0,0 +1,197 @@
+import { redirect } from "next/navigation";
+import { buyBadge } from "@/actions/draw-badge";
+import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+// Reads the live users + website_drawbadges tables and writes credits/badges on
+// purchase — must never be statically rendered.
+export const dynamic = "force-dynamic";
+
+export const metadata = { title: "Draw a Badge" };
+
+const DEFAULT_PRICE = 50;
+
+type DrawBadge = {
+  id: bigint;
+  badgeUrl: string;
+  badgeName: string;
+  badgeDesc: string;
+};
+
+const BOUGHT_NOTE = (code: string) =>
+  `Badge "${code}" has been added to your inventory. Enjoy!`;
+
+const ERROR_NOTE: Record<string, string> = {
+  invalid: "That badge is no longer available.",
+  credits: "You don't have enough credits to buy this badge.",
+  fail: "Something went wrong. Please try again.",
+};
+
+export default async function DrawBadgePage({
+  searchParams,
+}: {
+  // Next 16: searchParams is a Promise.
+  searchParams: Promise<{ bought?: string; error?: string }>;
+}) {
+  const session = await auth();
+  if (!session?.user?.id) redirect("/login");
+
+  const { bought = "", error = "" } = await searchParams;
+
+  // Resolve the flat purchase price + the buyer's balance + the published
+  // badges, all fail-soft so the page still renders if the DB is unreachable.
+  let price = DEFAULT_PRICE;
+  let credits = 0;
+  let badges: DrawBadge[] = [];
+
+  try {
+    const raw = await siteSettings.get("drawbadge.price", String(DEFAULT_PRICE));
+    const n = Number(raw);
+    if (Number.isFinite(n) && n >= 0) price = Math.floor(n);
+  } catch {
+    price = DEFAULT_PRICE;
+  }
+
+  try {
+    const buyer = await prisma.user.findUnique({
+      where: { id: Number(session.user.id) },
+      select: { credits: true },
+    });
+    credits = buyer?.credits ?? 0;
+  } catch {
+    credits = 0;
+  }
+
+  try {
+    badges = await prisma.websiteDrawbadges.findMany({
+      where: { published: true },
+      select: { id: true, badgeUrl: true, badgeName: true, badgeDesc: true },
+      orderBy: { id: "desc" },
+    });
+  } catch {
+    badges = [];
+  }
+
+  return (
+    <main style={{ display: "grid", gap: "1.5rem" }}>
+      <ContentCard
+        icon="🎨"
+        title="Draw a Badge"
+        subtitle="Buy a community-designed badge and wear it on your profile."
+      >
+        <div className="stat-grid">
+          <StatBlock value={credits.toLocaleString()} label="Your credits" icon="🪙" />
+          <StatBlock value={price.toLocaleString()} label="Price per badge" icon="🏷️" />
+        </div>
+
+        {bought ? (
+          <p
+            role="status"
+            aria-live="polite"
+            style={{
+              margin: "1rem 0 0",
+              fontWeight: 700,
+              color: "var(--color-secondary-hover)",
+            }}
+          >
+            {BOUGHT_NOTE(bought)}
+          </p>
+        ) : null}
+        {error ? (
+          <p
+            role="alert"
+            style={{ margin: "1rem 0 0", fontWeight: 700, color: "var(--color-danger)" }}
+          >
+            {ERROR_NOTE[error] ?? ERROR_NOTE.fail}
+          </p>
+        ) : null}
+      </ContentCard>
+
+      <ContentCard
+        icon="🏅"
+        title="Available badges"
+        subtitle={
+          badges.length > 0 ? `${badges.length} badge(s) available` : undefined
+        }
+        padded={badges.length === 0}
+      >
+        {badges.length === 0 ? (
+          <EmptyState icon="🎨">
+            No badges have been published yet. Check back soon!
+          </EmptyState>
+        ) : (
+          <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+            {badges.map((b) => {
+              const affordable = credits >= price;
+              return (
+                <article key={String(b.id)} className="card hover">
+                  <div
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "0.75rem",
+                      marginBottom: "0.6rem",
+                    }}
+                  >
+                    <div
+                      style={{
+                        width: 56,
+                        height: 56,
+                        borderRadius: "var(--radius-sm)",
+                        display: "grid",
+                        placeItems: "center",
+                        background: "#f8fafc",
+                        border: "2px solid var(--border-color)",
+                        flexShrink: 0,
+                        overflow: "hidden",
+                      }}
+                    >
+                      {b.badgeUrl ? (
+                        // Badge images are arbitrary external URLs stored by the
+                        // draw-badge tool, so a plain <img> is correct here.
+                        // eslint-disable-next-line @next/next/no-img-element
+                        <img
+                          src={b.badgeUrl}
+                          alt=""
+                          width={40}
+                          height={40}
+                          style={{ objectFit: "contain", display: "block" }}
+                        />
+                      ) : null}
+                    </div>
+                    <div style={{ minWidth: 0 }}>
+                      <h3 style={{ margin: 0 }}>{b.badgeName}</h3>
+                      <span className="currency">
+                        <span className="coin credits">cr</span>
+                        {price.toLocaleString()}
+                      </span>
+                    </div>
+                  </div>
+
+                  {b.badgeDesc ? (
+                    <p style={{ margin: "0 0 0.85rem" }}>{b.badgeDesc}</p>
+                  ) : null}
+
+                  <form action={buyBadge}>
+                    <input type="hidden" name="id" value={String(b.id)} />
+                    <button
+                      type="submit"
+                      className="btn btn-primary"
+                      style={{ width: "100%" }}
+                      disabled={!affordable}
+                      aria-disabled={!affordable}
+                    >
+                      {affordable ? "Buy badge" : "Not enough credits"}
+                    </button>
+                  </form>
+                </article>
+              );
+            })}
+          </div>
+        )}
+      </ContentCard>
+    </main>
+  );
+}