Decouple admin from public max-w-7xl via (site) route group.

Public chrome and width live only under (site). /admin and /client inherit the root layout alone, so housekeeping width is no longer tied to the public template.

Co-authored-by: Cursor <[email protected]>

src/app/(site)/radio/shouts/page.tsx

@@ -0,0 +1,139 @@
+import { getTranslations } from "next-intl/server";
+import { postShout } from "@/actions/radio-shouts";
+import { ContentCard, EmptyState } 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";
+
+export const dynamic = "force-dynamic";
+
+function formatDate(d: Date | null | undefined): string {
+	return d ? d.toISOString().slice(0, 16).replace("T", " ") : "";
+}
+
+export default async function RadioShoutsPage() {
+	const t = await getTranslations("pages.radioShouts");
+
+	const [shouts, imagerBase, session] = await Promise.all([
+		prisma.radioShouts
+			.findMany({
+				orderBy: { createdAt: "desc" },
+				take: 50,
+			})
+			.catch(() => []),
+		siteSettings.get(
+			"habbo_imaging_url",
+			"https://www.habbo.com/habbo-imaging/avatarimage",
+		),
+		auth(),
+	]);
+
+	const isLoggedIn = Boolean(session?.user?.id);
+
+	// Resolve author usernames/looks. shout.userId is BigInt; User.id is Int.
+	const authorIds = Array.from(new Set(shouts.map((s) => Number(s.userId))));
+	const authors = authorIds.length
+		? await prisma.user
+				.findMany({
+					where: { id: { in: authorIds } },
+					select: { id: true, username: true, look: true },
+				})
+				.catch(() => [])
+		: [];
+	const authorById = new Map(authors.map((a) => [a.id, a]));
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="📣" title={t("title")} subtitle={t("subtitle")} />
+
+			{isLoggedIn ? (
+				<ContentCard
+					icon="✍️"
+					title={t("postTitle")}
+					subtitle={t("postSubtitle")}
+				>
+					{/* The author is taken from the session inside the action, never from
+              this form — no user id is submitted. */}
+					<form action={postShout}>
+						<label htmlFor="shout-message" className="muted">
+							{t("messageLabel")}
+						</label>
+						<textarea
+							id="shout-message"
+							name="message"
+							required
+							maxLength={255}
+							rows={3}
+							placeholder={t("messagePlaceholder")}
+							style={{
+								width: "100%",
+								margin: "0.4rem 0 0.75rem",
+								resize: "vertical",
+							}}
+						/>
+						<button type="submit" className="btn btn-primary">
+							{t("shoutButton")}
+						</button>
+					</form>
+				</ContentCard>
+			) : (
+				<ContentCard padded>
+					<EmptyState icon="🔒">{t("loginToPost")}</EmptyState>
+				</ContentCard>
+			)}
+
+			<ContentCard
+				icon="💬"
+				title={t("latestTitle")}
+				subtitle={t("latestSubtitle")}
+				padded={shouts.length === 0}
+			>
+				{shouts.length === 0 ? (
+					<EmptyState icon="📣">{t("empty")}</EmptyState>
+				) : (
+					<div className="card-grid">
+						{shouts.map((s) => {
+							const author = authorById.get(Number(s.userId));
+							const authorAvatar = author
+								? avatarImageUrl(imagerBase ?? "", author.look, {
+										size: "s",
+										headOnly: true,
+									})
+								: null;
+							return (
+								<div
+									key={String(s.id)}
+									className="card"
+									style={{
+										display: "flex",
+										gap: "0.75rem",
+										alignItems: "flex-start",
+									}}
+								>
+									{authorAvatar ? (
+										/* eslint-disable-next-line @next/next/no-img-element */
+										<img
+											className="avatar"
+											src={authorAvatar}
+											alt={author?.username ?? "author"}
+											width={40}
+											height={40}
+										/>
+									) : null}
+									<div style={{ flex: 1, minWidth: 0 }}>
+										<p style={{ margin: "0 0 0.25rem" }}>
+											<strong>{author?.username ?? `User #${s.userId}`}</strong>{" "}
+											<span className="muted">{formatDate(s.createdAt)}</span>
+										</p>
+										<p style={{ margin: 0 }}>{s.message}</p>
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}