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.

package.json

@@ -30,6 +30,7 @@
     "otplib": "^12.0.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "sanitize-html": "^2.17.5",
     "zod": "^3.24.0"
   },
   "devDependencies": {
@@ -40,6 +41,7 @@
     "@types/nodemailer": "^6.4.0",
     "@types/react": "^19.2.0",
     "@types/react-dom": "^19.2.0",
+    "@types/sanitize-html": "^2.16.1",
     "dotenv": "^16.4.0",
     "postcss": "^8.5.15",
     "prisma": "^7.8.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/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/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>

src/components/navigation.tsx

@@ -79,6 +79,9 @@ export async function Navigation() {
             <Link href="/badges" className="dropdown-item">
               {t("badges")}
             </Link>
+            <Link href="/draw-badge" className="dropdown-item">
+              {t("drawBadge")}
+            </Link>
           </div>
         </details>
 

src/components/top-header.tsx

@@ -93,6 +93,9 @@ export async function TopHeader() {
               className="absolute right-0 mt-1 min-w-[180px] rounded-md shadow-lg z-50 py-1"
               style={{ backgroundColor: "var(--color-dropdown)" }}
             >
+              <Link href="/me" className="dropdown-item">
+                My dashboard
+              </Link>
               <Link href={`/u/${session.user.name}`} className="dropdown-item">
                 My profile
               </Link>

src/lib/api-auth.ts

@@ -0,0 +1,64 @@
+import { createHash, randomBytes } from "node:crypto";
+import { prisma } from "@/lib/prisma";
+
+/**
+ * Bearer-token auth for the public REST API, backed by personal_access_tokens
+ * (the Laravel Sanctum table that already exists in the emulator DB). Tokens are
+ * stored as the sha256 of the plaintext; the client sends the plaintext (or the
+ * Sanctum "{id}|{plaintext}" form) as `Authorization: Bearer …`.
+ *
+ * NOTE: the live amx_test table has NO expires_at column — never read/write it.
+ */
+const TOKENABLE_TYPE = "App\\Models\\User";
+
+function hashToken(raw: string): string {
+  return createHash("sha256").update(raw).digest("hex");
+}
+
+/** Resolve the user id behind a Bearer token, or null. */
+export async function bearerUserId(req: Request): Promise<number | null> {
+  const header = req.headers.get("authorization") ?? "";
+  const m = header.match(/^Bearer\s+(.+)$/i);
+  if (!m) return null;
+  let raw = m[1].trim();
+  const pipe = raw.indexOf("|");
+  if (pipe >= 0) raw = raw.slice(pipe + 1); // Sanctum "{id}|{token}"
+  if (!raw) return null;
+
+  try {
+    const row = await prisma.personalAccessTokens.findFirst({
+      where: { token: hashToken(raw) },
+      select: { id: true, tokenableId: true },
+    });
+    if (!row) return null;
+    // Best-effort last-used stamp (don't fail the request if it errors).
+    prisma.personalAccessTokens
+      .update({ where: { id: row.id }, data: { lastUsedAt: new Date() }, select: { id: true } })
+      .catch(() => {});
+    return Number(row.tokenableId);
+  } catch {
+    return null;
+  }
+}
+
+/** Mint a new token for a user. Returns the plaintext (shown once). */
+export async function issueToken(userId: number, name = "api"): Promise<string | null> {
+  const plaintext = randomBytes(32).toString("hex");
+  try {
+    await prisma.personalAccessTokens.create({
+      data: {
+        tokenableId: BigInt(userId),
+        tokenableType: TOKENABLE_TYPE,
+        name: name.slice(0, 100),
+        token: hashToken(plaintext),
+        abilities: '["*"]',
+        createdAt: new Date(),
+        updatedAt: new Date(),
+      },
+      select: { id: true },
+    });
+    return plaintext;
+  } catch {
+    return null;
+  }
+}

src/lib/sanitize.ts

@@ -0,0 +1,45 @@
+import sanitizeHtml from "sanitize-html";
+
+/**
+ * Server-side HTML sanitiser for user/staff-authored rich content before it is
+ * injected via dangerouslySetInnerHTML — the AtomCMS HTMLPurifier equivalent.
+ * Allows a safe formatting subset (no <script>/<style>/<iframe>, no on* event
+ * handlers, no javascript: URLs); images/links are permitted with safe schemes.
+ */
+const OPTIONS: sanitizeHtml.IOptions = {
+  allowedTags: [
+    "a", "b", "i", "em", "strong", "u", "s", "p", "br", "hr", "span", "div",
+    "ul", "ol", "li", "blockquote", "code", "pre",
+    "h1", "h2", "h3", "h4", "h5", "h6",
+    "img", "figure", "figcaption", "table", "thead", "tbody", "tr", "th", "td",
+  ],
+  allowedAttributes: {
+    a: ["href", "title", "target", "rel"],
+    img: ["src", "alt", "title", "width", "height"],
+    "*": ["style", "class"],
+  },
+  allowedSchemes: ["http", "https", "mailto"],
+  allowedSchemesByTag: { img: ["http", "https", "data"] },
+  // Drop any style declarations that aren't simple, safe properties.
+  allowedStyles: {
+    "*": {
+      color: [/.*/],
+      "background-color": [/.*/],
+      "text-align": [/^left$|^right$|^center$|^justify$/],
+      "font-weight": [/.*/],
+      "font-style": [/.*/],
+      "text-decoration": [/.*/],
+      "font-size": [/.*/],
+      margin: [/.*/],
+      padding: [/.*/],
+    },
+  },
+  transformTags: {
+    a: sanitizeHtml.simpleTransform("a", { rel: "noopener noreferrer nofollow" }),
+  },
+};
+
+export function sanitize(html: string | null | undefined): string {
+  if (!html) return "";
+  return sanitizeHtml(html, OPTIONS);
+}

src/lib/theme-presets.ts

@@ -226,4 +226,18 @@ export const PRESETS: Record<string, Record<string, string>> = {
     button_text_color: "#ffffff",
     border_color: "#16a34a",
   },
+  Dusk: {
+    color_primary: "#e8a33d",
+    color_background: "#1b2230",
+    color_surface: "#232c3d",
+    color_dropdown: "#2b3548",
+    color_navbar: "#232c3d",
+    color_navbar_text: "#dfe5ef",
+    color_text: "#dfe5ef",
+    color_text_muted: "#94a0b5",
+    color_accent: "#5eb0c9",
+    button_primary_color: "#e8a33d",
+    button_text_color: "#1b2230",
+    border_color: "#e8a33d",
+  },
 };

src/messages/en.json

@@ -18,7 +18,8 @@
     "radio": "Radio",
     "friends": "Friends",
     "messages": "Messages",
-    "admin": "Admin"
+    "admin": "Admin",
+    "drawBadge": "Draw badge"
   },
   "header": {
     "online": "{count} {hotel} online",

src/messages/it.json

@@ -18,7 +18,8 @@
     "radio": "Radio",
     "friends": "Amici",
     "messages": "Messaggi",
-    "admin": "Admin"
+    "admin": "Admin",
+    "drawBadge": "Crea distintivo"
   },
   "header": {
     "online": "{count} online su {hotel}",