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)/rankings/page.tsx

@@ -0,0 +1,100 @@
+import Image from "next/image";
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import {
+	ContentCard,
+	EmptyState,
+	OnlineBadge,
+	RankBadge,
+} from "@/components/public/ui";
+import { avatarImageUrl } from "@/lib/format";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+export const revalidate = 300;
+
+export const metadata = { title: "Rankings" };
+
+type TopUser = {
+	username: string;
+	look: string;
+	credits: number;
+	rank: number;
+	online: string;
+};
+
+export default async function RankingsPage() {
+	const t = await getTranslations("pages.rankings");
+	let users: TopUser[] = [];
+	try {
+		users = await prisma.user.findMany({
+			select: {
+				username: true,
+				look: true,
+				credits: true,
+				rank: true,
+				online: true,
+			},
+			orderBy: { credits: "desc" },
+			take: 12,
+		});
+	} catch {
+		users = [];
+	}
+
+	const imagerBase = await siteSettings.get(
+		"habbo_imaging_url",
+		"https://www.habbo.com/habbo-imaging/avatarimage",
+	);
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="🏆" title={t("title")} subtitle={t("subtitle")} />
+
+			<ContentCard padded={users.length === 0}>
+				{users.length === 0 ? (
+					<EmptyState icon="🏆">{t("emptyState")}</EmptyState>
+				) : (
+					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+						{users.map((u, i) => {
+							const avatar = avatarImageUrl(imagerBase ?? "", u.look, {
+								size: "m",
+							});
+							return (
+								<div
+									key={u.username}
+									className="card hover"
+									style={{
+										display: "flex",
+										gap: "0.9rem",
+										alignItems: "center",
+									}}
+								>
+									<RankBadge position={i + 1} />
+									<Image
+										className="avatar"
+										src={avatar}
+										alt={`${u.username} avatar`}
+										width={50}
+										height={90}
+										unoptimized
+									/>
+									<div style={{ minWidth: 0, flex: 1 }}>
+										<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
+											<Link href={`/u/${u.username}`}>{u.username}</Link>
+										</h3>
+										<p className="currency" style={{ margin: "0 0 0.3rem" }}>
+											<span className="coin credits">c</span>
+											{u.credits.toLocaleString()}
+										</p>
+										<OnlineBadge online={u.online === "1"} />
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}