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/api/articles/[slug]/comment/route.ts

@@ -0,0 +1,58 @@
+// Public REST API — post a comment on an article as the Bearer-authed user.
+//
+// POST /api/articles/:slug/comment — looks up the website_article by slug for
+// its id, then inserts a website_article_comments row owned by the user behind
+// the Authorization: Bearer token. Comment is required, non-empty, max 255
+// chars (matches the VARCHAR(255) column). Fails soft — never returns a 500 for
+// DB issues, just a generic error envelope.
+
+import { apiError, apiJson } from "@/lib/api";
+import { bearerUserId } from "@/lib/api-auth";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(
+  req: Request,
+  { params }: { params: Promise<{ slug: string }> },
+) {
+  const uid = await bearerUserId(req);
+  if (!uid) return apiError("Unauthorized", 401);
+
+  const { slug } = await params;
+
+  const body = (await req.json().catch(() => ({}))) as { comment?: unknown };
+  const comment = typeof body.comment === "string" ? body.comment.trim() : "";
+  if (!comment) {
+    return apiError("Comment is required", 422);
+  }
+  if (comment.length > 255) {
+    return apiError("Comment may not be longer than 255 characters", 422);
+  }
+
+  try {
+    const article = await prisma.websiteArticles.findUnique({
+      where: { slug },
+      select: { id: true },
+    });
+    if (!article) {
+      return apiError("Article not found", 404);
+    }
+
+    const now = new Date();
+    await prisma.websiteArticleComments.create({
+      data: {
+        articleId: article.id,
+        userId: uid,
+        comment,
+        createdAt: now,
+        updatedAt: now,
+      },
+      select: { id: true },
+    });
+
+    return apiJson({ ok: true });
+  } catch {
+    return apiError("Could not post comment", 400);
+  }
+}

src/app/api/me/tokens/route.ts

@@ -0,0 +1,61 @@
+// Public REST API — manage the SIGNED-IN user's personal access tokens.
+//
+// GET    /api/me/tokens       — list the current user's tokens (id, name,
+//                               lastUsedAt). The token hash is NEVER returned.
+// DELETE /api/me/tokens?id=42 — revoke one of the current user's tokens.
+//
+// Auth is the NextAuth web session (auth()), not a Bearer token. Tokens belong
+// to the user via personal_access_tokens.tokenable_id (a BigInt). NOTE: the live
+// table has no expires_at column, so it is never read or written here.
+
+import { apiError, apiJson } from "@/lib/api";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+async function currentUserId(): Promise<number | null> {
+  const session = await auth();
+  const id = session?.user?.id ? Number(session.user.id) : null;
+  return id && !Number.isNaN(id) ? id : null;
+}
+
+export async function GET(_req: Request) {
+  const id = await currentUserId();
+  if (!id) return apiError("Unauthorized", 401);
+
+  try {
+    const tokens = await prisma.personalAccessTokens.findMany({
+      where: { tokenableId: BigInt(id) },
+      select: { id: true, name: true, lastUsedAt: true },
+      orderBy: { id: "desc" },
+    });
+    // Never expose the token hash.
+    return apiJson({ data: tokens });
+  } catch {
+    return apiJson({ data: [] });
+  }
+}
+
+export async function DELETE(req: Request) {
+  const id = await currentUserId();
+  if (!id) return apiError("Unauthorized", 401);
+
+  const tokenId = new URL(req.url).searchParams.get("id");
+  if (!tokenId || !/^\d+$/.test(tokenId)) {
+    return apiError("A valid token id is required", 422);
+  }
+
+  try {
+    // Scope the delete to the owner so users cannot revoke others' tokens.
+    const result = await prisma.personalAccessTokens.deleteMany({
+      where: { id: BigInt(tokenId), tokenableId: BigInt(id) },
+    });
+    if (result.count === 0) {
+      return apiError("Token not found", 404);
+    }
+    return apiJson({ ok: true });
+  } catch {
+    return apiError("Could not revoke token", 400);
+  }
+}

src/app/api/radio/current-dj/route.ts

@@ -0,0 +1,34 @@
+import { apiJson } from "@/lib/api";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+// Current on-air DJ. The DJ is set manually via the radio_current_dj_id setting
+// (Manual DJ user ID). When set, resolve that user's username/look; otherwise
+// there is no DJ on air. Mirrors the AtomCMS radio "on air" widget.
+export const dynamic = "force-dynamic";
+
+export async function GET(_req: Request) {
+  try {
+    const raw = await siteSettings.get("radio_current_dj_id", "");
+    const id = Number(raw);
+
+    // No DJ configured (empty / non-numeric / zero).
+    if (!raw || !Number.isFinite(id) || id <= 0) {
+      return apiJson({ dj: null });
+    }
+
+    const user = await prisma.user.findUnique({
+      where: { id },
+      select: { username: true, look: true },
+    });
+
+    if (!user) {
+      return apiJson({ dj: null });
+    }
+
+    return apiJson({ dj: { username: user.username, look: user.look } });
+  } catch {
+    // DB / settings unavailable — no DJ rather than a 500.
+    return apiJson({ dj: null }, { status: 200 });
+  }
+}

src/app/api/radio/embed-config/route.ts

@@ -0,0 +1,33 @@
+import { apiJson } from "@/lib/api";
+import { prisma } from "@/lib/prisma";
+
+// Minimal radio_* settings an external page needs to embed the player: stream
+// URL, display name, whether the radio is enabled, and autoplay. Returned as a
+// flat { key: value } map. None of these keys are secrets.
+export const dynamic = "force-dynamic";
+
+const EMBED_KEYS = [
+  "radio_enabled",
+  "radio_name",
+  "radio_stream_url",
+  "radio_auto_play",
+];
+
+export async function GET(_req: Request) {
+  try {
+    const rows = await prisma.websiteSetting.findMany({
+      where: { key: { in: EMBED_KEYS } },
+      select: { key: true, value: true },
+    });
+
+    const config: Record<string, string> = {};
+    for (const row of rows) {
+      config[row.key] = row.value;
+    }
+
+    return apiJson(config);
+  } catch {
+    // DB unavailable — serve an empty config rather than a 500.
+    return apiJson({}, { status: 200 });
+  }
+}

src/app/api/radio/points/leaderboard/route.ts

@@ -0,0 +1,48 @@
+import { apiJson } from "@/lib/api";
+import { prisma } from "@/lib/prisma";
+
+// Radio listener-points leaderboard: the top 20 users by total points, summed
+// across radio_listener_points and joined to users for username/look. Public
+// (no auth) — mirrors the AtomCMS radio leaderboard widget.
+export const dynamic = "force-dynamic";
+
+export async function GET(_req: Request) {
+  try {
+    // Sum points per user. Sort/slice in JS so we stay adapter-agnostic about
+    // aggregate ordering, then resolve the top 20 to usernames/looks.
+    const grouped = await prisma.radioListenerPoints.groupBy({
+      by: ["userId"],
+      _sum: { points: true },
+    });
+
+    const ranked = grouped
+      .map((g) => ({ userId: g.userId, points: g._sum.points ?? 0 }))
+      .sort((a, b) => b.points - a.points)
+      .slice(0, 20);
+
+    if (ranked.length === 0) {
+      return apiJson({ data: [] });
+    }
+
+    const userIds = ranked.map((r) => r.userId);
+    const users = await prisma.user.findMany({
+      where: { id: { in: userIds } },
+      select: { id: true, username: true, look: true },
+    });
+    const userById = new Map(users.map((u) => [u.id, u]));
+
+    const data = ranked.map((r) => {
+      const u = userById.get(r.userId);
+      return {
+        username: u?.username ?? null,
+        look: u?.look ?? null,
+        points: r.points,
+      };
+    });
+
+    return apiJson({ data });
+  } catch {
+    // DB unavailable — serve an empty leaderboard rather than a 500.
+    return apiJson({ data: [] }, { status: 200 });
+  }
+}

src/app/api/radio/points/route.ts

@@ -0,0 +1,24 @@
+import { apiJson, apiError } from "@/lib/api";
+import { prisma } from "@/lib/prisma";
+import { bearerUserId } from "@/lib/api-auth";
+
+// The Bearer-authed user's total radio listener points: the sum of all
+// radio_listener_points.points rows for that user_id.
+export const dynamic = "force-dynamic";
+
+export async function GET(req: Request) {
+  const uid = await bearerUserId(req);
+  if (!uid) return apiError("Unauthorized", 401);
+
+  try {
+    const agg = await prisma.radioListenerPoints.aggregate({
+      where: { userId: uid },
+      _sum: { points: true },
+    });
+
+    return apiJson({ points: agg._sum.points ?? 0 });
+  } catch {
+    // DB unavailable — report zero rather than a 500.
+    return apiJson({ points: 0 }, { status: 200 });
+  }
+}

src/app/api/radio/shouts/route.ts

@@ -1,11 +1,15 @@
-import { apiJson } from "@/lib/api";
+import { apiJson, apiError } from "@/lib/api";
 import { prisma } from "@/lib/prisma";
+import { bearerUserId } from "@/lib/api-auth";
 
 // Latest 50 radio shouts with their author's username/look resolved. Mirrors the
 // query behind the public /radio/shouts page (radio_shouts ordered by created_at
 // desc, then joined to users by user_id).
 export const dynamic = "force-dynamic";
 
+// Max shout length (radio_shouts.message is TEXT; cap to keep posts sane).
+const MAX_MESSAGE_LENGTH = 255;
+
 export async function GET(_req: Request) {
   try {
     const shouts = await prisma.radioShouts.findMany({
@@ -42,3 +46,37 @@ export async function GET(_req: Request) {
     return apiJson({ shouts: [] }, { status: 200 });
   }
 }
+
+// Post a new radio shout as the Bearer-authed user into radio_shouts.
+export async function POST(req: Request) {
+  const uid = await bearerUserId(req);
+  if (!uid) return apiError("Unauthorized", 401);
+
+  const body = (await req.json().catch(() => ({}))) as { message?: unknown };
+  const message = typeof body.message === "string" ? body.message.trim() : "";
+
+  if (!message) {
+    return apiError("Message is required", 422);
+  }
+  if (message.length > MAX_MESSAGE_LENGTH) {
+    return apiError(`Message must be at most ${MAX_MESSAGE_LENGTH} characters`, 422);
+  }
+
+  try {
+    const now = new Date();
+    await prisma.radioShouts.create({
+      data: {
+        userId: BigInt(uid),
+        message,
+        createdAt: now,
+        updatedAt: now,
+      },
+      select: { id: true },
+    });
+
+    return apiJson({ ok: true });
+  } catch {
+    // DB write failed — fail soft rather than a 500.
+    return apiError("Could not post shout", 503);
+  }
+}

src/app/api/radio/stream/route.ts

@@ -0,0 +1,66 @@
+import { fetchListeners, fetchNowPlaying } from "@/lib/services/radio";
+
+export const dynamic = "force-dynamic";
+
+/**
+ * Server-Sent Events stream of live radio state (AtomCMS's radio SSE endpoint).
+ * Pushes { nowPlaying, listeners } every ~10s so players/widgets get real-time
+ * updates without polling. Closes cleanly when the client disconnects.
+ */
+export async function GET(req: Request) {
+  const encoder = new TextEncoder();
+
+  const stream = new ReadableStream<Uint8Array>({
+    async start(controller) {
+      let closed = false;
+
+      const send = async () => {
+        if (closed) return;
+        const [nowPlaying, listeners] = await Promise.all([
+          fetchNowPlaying().catch(() => null),
+          fetchListeners().catch(() => null),
+        ]);
+        try {
+          controller.enqueue(encoder.encode(`data: ${JSON.stringify({ nowPlaying, listeners })}\n\n`));
+        } catch {
+          closed = true;
+        }
+      };
+
+      // Initial event immediately, then on an interval.
+      await send();
+      const interval = setInterval(() => void send(), 10_000);
+      // SSE comment as a keep-alive ping between data events.
+      const ping = setInterval(() => {
+        if (!closed) {
+          try {
+            controller.enqueue(encoder.encode(": ping\n\n"));
+          } catch {
+            closed = true;
+          }
+        }
+      }, 25_000);
+
+      const stop = () => {
+        closed = true;
+        clearInterval(interval);
+        clearInterval(ping);
+        try {
+          controller.close();
+        } catch {
+          /* already closed */
+        }
+      };
+      req.signal.addEventListener("abort", stop);
+    },
+  });
+
+  return new Response(stream, {
+    headers: {
+      "content-type": "text/event-stream; charset=utf-8",
+      "cache-control": "no-store, no-transform",
+      connection: "keep-alive",
+      "access-control-allow-origin": "*",
+    },
+  });
+}

src/app/api/tickets/[id]/reply/route.ts

@@ -0,0 +1,65 @@
+// Public REST API — post a reply to a help-center ticket.
+//
+// Bearer-authed. POST inserts a reply ({ content }) authored by the current user
+// into website_help_center_ticket_replies. The target ticket must exist and
+// belong to the authed user. Fail-soft: never a 500.
+
+import { apiError, apiJson } from "@/lib/api";
+import { bearerUserId } from "@/lib/api-auth";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+// POST /api/tickets/:id/reply  body: { content }
+export async function POST(req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const uid = await bearerUserId(req);
+  if (!uid) return apiError("Unauthorized", 401);
+
+  const { id } = await params;
+  if (!/^\d+$/.test(id)) return apiError("Invalid ticket id");
+  const ticketId = BigInt(id);
+
+  const body = (await req.json().catch(() => ({}))) as { content?: unknown };
+  const content = String(body.content ?? "").trim().slice(0, 5000);
+  if (!content) return apiError("Content is required");
+
+  try {
+    // Ownership check — only the ticket owner may reply.
+    const ticket = await prisma.websiteHelpCenterTickets.findUnique({
+      where: { id: ticketId },
+      select: { id: true, userId: true },
+    });
+    if (!ticket || ticket.userId !== uid) return apiError("Ticket not found", 404);
+
+    const now = new Date();
+    const reply = await prisma.websiteHelpCenterTicketReplies.create({
+      data: {
+        ticketId,
+        userId: uid,
+        content,
+        createdAt: now,
+        updatedAt: now,
+      },
+      select: { id: true, userId: true, content: true, createdAt: true },
+    });
+
+    // Touch the parent ticket so its updatedAt reflects the latest activity.
+    prisma.websiteHelpCenterTickets
+      .update({ where: { id: ticketId }, data: { updatedAt: now }, select: { id: true } })
+      .catch(() => {});
+
+    return apiJson(
+      {
+        reply: {
+          id: reply.id,
+          userId: reply.userId,
+          content: reply.content,
+          createdAt: reply.createdAt,
+        },
+      },
+      { status: 201 },
+    );
+  } catch {
+    return apiError("Failed to post reply", 503);
+  }
+}

src/app/api/tickets/[id]/route.ts

@@ -0,0 +1,76 @@
+// Public REST API — a single help-center ticket (with replies).
+//
+// Bearer-authed. GET returns one ticket that MUST belong to the authed user,
+// together with its replies; reply author usernames are resolved in a single
+// users lookup. Fail-soft: never a 500.
+
+import { apiError, apiJson } from "@/lib/api";
+import { bearerUserId } from "@/lib/api-auth";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+// GET /api/tickets/:id
+export async function GET(req: Request, { params }: { params: Promise<{ id: string }> }) {
+  const uid = await bearerUserId(req);
+  if (!uid) return apiError("Unauthorized", 401);
+
+  const { id } = await params;
+  if (!/^\d+$/.test(id)) return apiError("Invalid ticket id");
+  const ticketId = BigInt(id);
+
+  try {
+    const ticket = await prisma.websiteHelpCenterTickets.findUnique({
+      where: { id: ticketId },
+      select: {
+        id: true,
+        userId: true,
+        categoryId: true,
+        title: true,
+        content: true,
+        open: true,
+        createdAt: true,
+      },
+    });
+
+    // Ownership check — return 404 (not 403) so a foreign id is indistinguishable
+    // from a missing one.
+    if (!ticket || ticket.userId !== uid) return apiError("Ticket not found", 404);
+
+    const replies = await prisma.websiteHelpCenterTicketReplies.findMany({
+      where: { ticketId },
+      select: { id: true, userId: true, content: true, createdAt: true },
+      orderBy: { id: "asc" },
+    });
+
+    // Resolve author usernames in one query.
+    const authorIds = [...new Set(replies.map((r) => r.userId))];
+    const authors = authorIds.length
+      ? await prisma.user.findMany({
+          where: { id: { in: authorIds } },
+          select: { id: true, username: true },
+        })
+      : [];
+    const nameById = new Map(authors.map((a) => [a.id, a.username]));
+
+    return apiJson({
+      ticket: {
+        id: ticket.id,
+        categoryId: ticket.categoryId,
+        title: ticket.title,
+        content: ticket.content,
+        open: ticket.open,
+        createdAt: ticket.createdAt,
+        replies: replies.map((r) => ({
+          id: r.id,
+          userId: r.userId,
+          username: nameById.get(r.userId) ?? null,
+          content: r.content,
+          createdAt: r.createdAt,
+        })),
+      },
+    });
+  } catch {
+    return apiError("Failed to load ticket", 503);
+  }
+}

src/app/api/tickets/route.ts

@@ -0,0 +1,91 @@
+// Public REST API — help-center tickets (collection).
+//
+// Bearer-authed. GET lists the authed user's own tickets; POST opens a new one.
+// Backed by website_help_center_tickets (WebsiteHelpCenterTickets). Fail-soft:
+// DB errors return an apiError envelope, never a 500.
+
+import { apiError, apiJson } from "@/lib/api";
+import { bearerUserId } from "@/lib/api-auth";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+// GET /api/tickets — the authed user's tickets (newest first).
+export async function GET(req: Request) {
+  const uid = await bearerUserId(req);
+  if (!uid) return apiError("Unauthorized", 401);
+
+  try {
+    const tickets = await prisma.websiteHelpCenterTickets.findMany({
+      where: { userId: uid },
+      select: { id: true, title: true, open: true, createdAt: true },
+      orderBy: { id: "desc" },
+    });
+
+    return apiJson({
+      tickets: tickets.map((t) => ({
+        id: t.id,
+        title: t.title,
+        open: t.open,
+        createdAt: t.createdAt,
+      })),
+    });
+  } catch {
+    return apiError("Failed to load tickets", 503);
+  }
+}
+
+// POST /api/tickets — open a new ticket ({ title, content, categoryId? }).
+export async function POST(req: Request) {
+  const uid = await bearerUserId(req);
+  if (!uid) return apiError("Unauthorized", 401);
+
+  const body = (await req.json().catch(() => ({}))) as {
+    title?: unknown;
+    content?: unknown;
+    categoryId?: unknown;
+  };
+
+  const title = String(body.title ?? "").trim().slice(0, 255);
+  const content = String(body.content ?? "").trim().slice(0, 5000);
+  if (!title) return apiError("Title is required");
+  if (!content) return apiError("Content is required");
+
+  // categoryId is an optional unsigned BigInt FK — accept a positive numeric
+  // value, otherwise leave it null.
+  let categoryId: bigint | null = null;
+  if (body.categoryId !== undefined && body.categoryId !== null && body.categoryId !== "") {
+    const raw = String(body.categoryId);
+    if (/^\d+$/.test(raw)) categoryId = BigInt(raw);
+  }
+
+  try {
+    const now = new Date();
+    const ticket = await prisma.websiteHelpCenterTickets.create({
+      data: {
+        userId: uid,
+        categoryId,
+        title,
+        content,
+        open: true,
+        createdAt: now,
+        updatedAt: now,
+      },
+      select: { id: true, title: true, open: true, createdAt: true },
+    });
+
+    return apiJson(
+      {
+        ticket: {
+          id: ticket.id,
+          title: ticket.title,
+          open: ticket.open,
+          createdAt: ticket.createdAt,
+        },
+      },
+      { status: 201 },
+    );
+  } catch {
+    return apiError("Failed to create ticket", 503);
+  }
+}

src/app/api/tokens/route.ts

@@ -0,0 +1,35 @@
+// Public REST API — issue a personal access token for the SIGNED-IN user.
+//
+// POST /api/tokens — mints a new Sanctum-style personal_access_token bound to
+// the NextAuth-authenticated user and returns the plaintext ONCE. The plaintext
+// is never stored (only its sha256 hash lives in the DB) so it cannot be shown
+// again. Requires a logged-in web session, not a Bearer token.
+
+import { apiError, apiJson } from "@/lib/api";
+import { issueToken } from "@/lib/api-auth";
+import { auth } from "@/lib/auth";
+
+export const dynamic = "force-dynamic";
+
+export async function POST(req: Request) {
+  const session = await auth();
+  const id = session?.user?.id ? Number(session.user.id) : null;
+  if (!id || Number.isNaN(id)) {
+    return apiError("Unauthorized", 401);
+  }
+
+  const body = (await req.json().catch(() => ({}))) as { name?: unknown };
+  const rawName = typeof body.name === "string" ? body.name.trim() : "";
+  const name = rawName ? rawName.slice(0, 100) : "api";
+
+  try {
+    const token = await issueToken(id, name);
+    if (!token) {
+      return apiError("Could not issue token", 500);
+    }
+    // Plaintext token — shown only once, never recoverable afterwards.
+    return apiJson({ token });
+  } catch {
+    return apiError("Could not issue token", 500);
+  }
+}

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>
+  );
+}

src/app/globals.css

@@ -170,6 +170,21 @@ body {
   background: url("/assets/images/background-dark.jpg") no-repeat fixed right bottom;
 }
 
+.article-body {
+  line-height: 1.7;
+}
+.article-body img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+}
+.article-body p {
+  margin: 0 0 0.85rem;
+}
+.article-body a {
+  text-decoration: underline;
+}
+
 .text-body {
   color: var(--color-text);
 }

src/app/layout.tsx

@@ -32,14 +32,16 @@ export default async function RootLayout({ children }: { children: ReactNode })
   await enforceSiteAccess();
   const locale = await getLocale();
   const messages = await getMessages();
+  // "Dusk" / dark-by-default: the site starts dark unless the visitor has picked
+  // light. The saved choice always wins over the default.
+  const defaultDark = await siteSettings.getBool("default_dark", false);
   return (
     <html lang={locale} className={`app ${nunito.variable}`}>
       <head>
-        {/* Apply the saved theme before first paint to avoid a light→dark flash. */}
+        {/* Apply the saved/default theme before first paint to avoid a flash. */}
         <script
           dangerouslySetInnerHTML={{
-            __html:
-              "try{if(localStorage.getItem('theme')==='dark')document.documentElement.classList.add('dark');}catch(e){}",
+            __html: `try{var s=localStorage.getItem('theme');if(s==='dark'||(!s&&${defaultDark}))document.documentElement.classList.add('dark');}catch(e){}`,
           }}
         />
       </head>

src/app/me/CopyReferralButton.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * Copies the user's referral link to the clipboard. Mirrors AtomCMS's
+ * copyCode() helper on the /me page, but resolves the link to an absolute URL
+ * (the server only knows a relative path, so we prepend the current origin).
+ */
+export default function CopyReferralButton({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+
+  async function copy() {
+    const absolute =
+      typeof window !== "undefined" && value.startsWith("/")
+        ? `${window.location.origin}${value}`
+        : value;
+    try {
+      await navigator.clipboard.writeText(absolute);
+    } catch {
+      // Older browsers / insecure contexts: fall back to a hidden textarea.
+      const ta = document.createElement("textarea");
+      ta.value = absolute;
+      ta.style.position = "fixed";
+      ta.style.opacity = "0";
+      document.body.appendChild(ta);
+      ta.select();
+      try {
+        document.execCommand("copy");
+      } catch {
+        /* give up silently */
+      }
+      document.body.removeChild(ta);
+    }
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }
+
+  return (
+    <button type="button" className="btn btn-secondary" onClick={copy}>
+      {copied ? "Copied!" : "Copy link"}
+    </button>
+  );
+}

src/app/me/page.tsx

@@ -0,0 +1,299 @@
+import type { CSSProperties } from "react";
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import CopyReferralButton from "./CopyReferralButton";
+import { ContentCard, EmptyState, OnlineBadge, StatBlock } from "@/components/public/ui";
+import { auth } from "@/lib/auth";
+import { avatarImageUrl } from "@/lib/format";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+import { claimReferral } from "@/actions/referral";
+
+export const dynamic = "force-dynamic";
+
+export const metadata = { title: "My dashboard" };
+
+type SearchParams = Promise<{ claimed?: string; error?: string }>;
+
+/** Inline-styled feedback banner using the theme's CSS variables. */
+function feedbackStyle(tone: "success" | "error" | "warning"): CSSProperties {
+  const accent =
+    tone === "error"
+      ? "var(--color-danger)"
+      : tone === "warning"
+        ? "var(--color-accent)"
+        : "var(--color-primary)";
+  return {
+    margin: 0,
+    padding: "0.85rem 1rem",
+    borderRadius: "var(--radius-md)",
+    border: `1px solid ${accent}`,
+    color: "var(--color-text)",
+    fontSize: "0.9rem",
+    fontWeight: 600,
+    background: "var(--color-surface)",
+    borderLeft: `4px solid ${accent}`,
+  };
+}
+
+const ERROR_MESSAGES: Record<string, string> = {
+  not_enough: "You do not have enough referrals to claim your reward yet.",
+  no_referrals: "You haven't referred anyone yet — share your link to get started.",
+  bad_config:
+    "The referral reward is not configured correctly. Please contact a staff member.",
+  error: "Something went wrong while claiming your reward. Please try again.",
+};
+
+export default async function MePage({ searchParams }: { searchParams: SearchParams }) {
+  const session = await auth();
+  if (!session?.user?.id) redirect("/login");
+
+  const userId = Number(session.user.id);
+  if (!Number.isFinite(userId) || userId <= 0) redirect("/login");
+
+  const { claimed, error } = await searchParams;
+
+  let content;
+  try {
+    // --- Account + reward config -----------------------------------------
+    const [user, imagerBase, neededRaw, amountRaw, currencyRaw] = await Promise.all([
+      prisma.user.findUnique({
+        where: { id: userId },
+        select: {
+          id: true,
+          username: true,
+          look: true,
+          motto: true,
+          rank: true,
+          credits: true,
+          accountCreated: true,
+        },
+      }),
+      siteSettings.get("habbo_imaging_url", "https://www.habbo.com/habbo-imaging/avatarimage"),
+      prisma.websiteSetting
+        .findUnique({ where: { key: "referrals_needed" }, select: { value: true } })
+        .catch(() => null),
+      prisma.websiteSetting
+        .findUnique({ where: { key: "referral_reward_amount" }, select: { value: true } })
+        .catch(() => null),
+      prisma.websiteSetting
+        .findFirst({
+          where: { key: { in: ["referral_reward_currency_type", "referral_reward_currency"] } },
+          select: { value: true },
+        })
+        .catch(() => null),
+    ]);
+
+    // The session was already validated above; a missing row here is an
+    // exceptional state, so surface the error card rather than redirect from
+    // inside the try (a redirect() throw would be swallowed by the catch).
+    if (!user) throw new Error("user-not-found");
+
+    const needed = Number.parseInt(neededRaw?.value ?? "5", 10) || 5;
+    const rewardAmount = Number.parseInt(amountRaw?.value ?? "30", 10) || 0;
+    const rewardCurrency = (currencyRaw?.value ?? "diamonds").trim().toLowerCase();
+
+    // --- Referral tally ---------------------------------------------------
+    const referrals = await prisma.userReferrals
+      .findFirst({
+        where: { userId },
+        select: { referralsTotal: true },
+        orderBy: { id: "desc" },
+      })
+      .catch(() => null);
+    const referralTotal = referrals ? Number(referrals.referralsTotal) : 0;
+    const canClaim = referralTotal >= needed;
+    const remaining = Math.max(0, needed - referralTotal);
+
+    // --- Online friends ---------------------------------------------------
+    // Friendships are bidirectional and stored once: the user can be either
+    // user_one_id or user_two_id; the OTHER column is the friend.
+    const friendships = await prisma.messengerFriendships
+      .findMany({
+        where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
+        select: { userOneId: true, userTwoId: true },
+      })
+      .catch(() => []);
+
+    const friendIds = Array.from(
+      new Set(
+        friendships
+          .map((f) => (f.userOneId === userId ? f.userTwoId : f.userOneId))
+          .filter((id) => id && id !== userId),
+      ),
+    );
+
+    const friends = friendIds.length
+      ? await prisma.user
+          .findMany({
+            where: { id: { in: friendIds } },
+            select: { id: true, username: true, look: true, motto: true, online: true },
+          })
+          .catch(() => [])
+      : [];
+
+    const onlineFriends = friends.filter((f) => f.online === "1");
+
+    const registered = new Date(user.accountCreated * 1000).toISOString().slice(0, 10);
+    const referralLink = `/register?ref=${encodeURIComponent(user.username)}`;
+
+    content = (
+      <>
+        {/* Feedback banners --------------------------------------------- */}
+        {claimed ? (
+          <div role="status" style={feedbackStyle("success")}>
+            Woah! You have successfully claimed your reward — keep up the good work!
+          </div>
+        ) : null}
+        {error ? (
+          <div role="alert" style={feedbackStyle("error")}>
+            {ERROR_MESSAGES[error] ?? ERROR_MESSAGES.error}
+          </div>
+        ) : null}
+
+        {/* Header card -------------------------------------------------- */}
+        <ContentCard
+          icon="🏠"
+          title={user.username}
+          subtitle={user.motto || "Welcome back!"}
+        />
+
+        {/* Stat tiles --------------------------------------------------- */}
+        <div className="card-grid sm-2 lg-3">
+          <StatBlock icon="💰" value={user.credits.toLocaleString()} label="Credits" />
+          <StatBlock icon="🎖️" value={`Rank ${user.rank}`} label="Hotel rank" />
+          <StatBlock icon="📅" value={registered} label="Registered" />
+        </div>
+
+        {/* Online friends ----------------------------------------------- */}
+        <ContentCard
+          icon="🟢"
+          title="Online friends"
+          subtitle={
+            onlineFriends.length === 0
+              ? "None of your friends are online right now"
+              : `${onlineFriends.length} of your ${friends.length} friends online`
+          }
+          action={<Link href="/friends">View all</Link>}
+          padded={onlineFriends.length === 0}
+        >
+          {onlineFriends.length === 0 ? (
+            <EmptyState icon="💤">
+              No friends online right now. Check back later!
+            </EmptyState>
+          ) : (
+            <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+              {onlineFriends.map((friend) => {
+                const avatar = avatarImageUrl(imagerBase ?? "", friend.look, {
+                  size: "s",
+                  headOnly: true,
+                });
+                return (
+                  <div
+                    key={friend.id}
+                    className="card hover"
+                    style={{ display: "flex", gap: "0.85rem", alignItems: "center" }}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      className="avatar"
+                      src={avatar}
+                      alt={`${friend.username} avatar`}
+                      width={50}
+                      height={50}
+                    />
+                    <div style={{ minWidth: 0, flex: 1 }}>
+                      <h3 style={{ margin: "0 0 0.3rem", fontSize: "1rem" }}>
+                        <Link href={`/u/${friend.username}`}>{friend.username}</Link>
+                      </h3>
+                      <p
+                        className="muted"
+                        style={{
+                          margin: "0 0 0.4rem",
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {friend.motto || "No motto"}
+                      </p>
+                      <OnlineBadge online />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </ContentCard>
+
+        {/* Referral card ------------------------------------------------ */}
+        <ContentCard
+          icon="🤝"
+          title={`Refer a friend (${referralTotal}/${needed})`}
+          subtitle="Refer new users and earn in-game rewards"
+        >
+          <div style={{ display: "grid", gap: "1rem" }}>
+            <p style={{ margin: 0 }}>
+              {rewardAmount > 0
+                ? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!`
+                : `Invite ${needed} users through your referral link to claim a reward!`}
+            </p>
+
+            <div role="note" style={feedbackStyle("warning")}>
+              ⚠️ Boosting referrals by making your own accounts will lead to
+              removal of all progress, currency, inventory and a potential ban.
+            </div>
+
+            <div>
+              <label
+                htmlFor="referral-link"
+                className="muted"
+                style={{ display: "block", marginBottom: "0.35rem", fontSize: "0.85rem" }}
+              >
+                Your referral link
+              </label>
+              <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
+                <input
+                  id="referral-link"
+                  type="text"
+                  readOnly
+                  defaultValue={referralLink}
+                  className="input"
+                  style={{ flex: "1 1 240px", minWidth: 0 }}
+                />
+                <CopyReferralButton value={referralLink} />
+              </div>
+            </div>
+
+            {canClaim ? (
+              <form action={claimReferral}>
+                <button type="submit" className="btn btn-primary" style={{ width: "100%" }}>
+                  Claim your referral reward!
+                </button>
+              </form>
+            ) : (
+              <button
+                type="button"
+                disabled
+                className="btn"
+                style={{ width: "100%", opacity: 0.6, cursor: "not-allowed" }}
+              >
+                {`Refer ${remaining} more ${remaining === 1 ? "user" : "users"} to unlock your reward`}
+              </button>
+            )}
+          </div>
+        </ContentCard>
+      </>
+    );
+  } catch {
+    content = (
+      <ContentCard icon="⚠️" title="My dashboard">
+        <EmptyState icon="⚠️">
+          We couldn&apos;t load your dashboard right now. Please try again shortly.
+        </EmptyState>
+      </ContentCard>
+    );
+  }
+
+  return <main style={{ display: "grid", gap: "1.5rem" }}>{content}</main>;
+}

src/app/news/[slug]/page.tsx

@@ -5,6 +5,7 @@ import { notFound } from "next/navigation";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { excerpt } from "@/lib/format";
+import { sanitize } from "@/lib/sanitize";
 import { prisma } from "@/lib/prisma";
 import { postComment } from "@/actions/article-comments";
 import { toggleReaction } from "@/actions/article-reactions";
@@ -123,7 +124,9 @@ export default async function ArticlePage({
             style={{ width: "100%", borderRadius: 10, margin: "0 0 1rem" }}
           />
         ) : null}
-        <div style={{ whiteSpace: "pre-wrap" }}>{article.fullStory}</div>
+        {/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
+        {/* biome-ignore lint/security/noDangerouslySetInnerHtml: sanitised article body */}
+        <div className="article-body" dangerouslySetInnerHTML={{ __html: sanitize(article.fullStory) }} />
       </ContentCard>
 
       {/* ── Reactions ─────────────────────────────────────────── */}

src/app/page.tsx

@@ -3,6 +3,7 @@ import Link from "next/link";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
+import { sanitize } from "@/lib/sanitize";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export const dynamic = "force-dynamic";
@@ -93,9 +94,9 @@ export default async function HomePage() {
 
       {boxes.map((b) => (
         <ContentCard key={String(b.id)} icon={b.icon ?? "📌"} title={b.title}>
-          {/* Content is authored by staff in housekeeping (trusted HTML). */}
-          {/* biome-ignore lint/security/noDangerouslySetInnerHtml: staff-authored writeable box */}
-          <div dangerouslySetInnerHTML={{ __html: b.content }} />
+          {/* Staff-authored HTML, sanitised server-side before injection. */}
+          {/* biome-ignore lint/security/noDangerouslySetInnerHtml: sanitised writeable box */}
+          <div dangerouslySetInnerHTML={{ __html: sanitize(b.content) }} />
         </ContentCard>
       ))}
     </main>