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

@@ -0,0 +1,145 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { updateMotto } from "@/actions/user-settings";
+import { ContentCard } 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";
+
+export default async function SettingsPage() {
+	const t = await getTranslations("pages.settings");
+	const session = await auth();
+	if (!session?.user?.id) redirect("/login");
+
+	const id = Number(session.user.id);
+
+	let user: {
+		username: string;
+		motto: string;
+		look: string;
+		mail: string | null;
+	} | null = null;
+	try {
+		user = await prisma.user.findUnique({
+			where: { id },
+			select: { username: true, motto: true, look: true, mail: true },
+		});
+	} catch {
+		user = null;
+	}
+
+	if (!user) redirect("/login");
+
+	let imagerBase = "https://www.habbo.com/habbo-imaging/avatarimage";
+	try {
+		imagerBase =
+			(await siteSettings.get("habbo_imaging_url", imagerBase)) ?? imagerBase;
+	} catch {
+		// fall back to the default imager base
+	}
+
+	const avatar = avatarImageUrl(imagerBase, user.look, { size: "l" });
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard
+				icon="⚙️"
+				title={t("accountSettings")}
+				subtitle={t("accountSettingsSubtitle")}
+			/>
+
+			<ContentCard
+				icon="🙂"
+				title={user.username}
+				subtitle={t("publicProfile")}
+			>
+				<div
+					style={{
+						display: "flex",
+						gap: "1.5rem",
+						alignItems: "center",
+						flexWrap: "wrap",
+					}}
+				>
+					{/* eslint-disable-next-line @next/next/no-img-element */}
+					<img
+						className="avatar"
+						src={avatar}
+						alt={`${user.username} avatar`}
+						width={100}
+						height={150}
+					/>
+					<div style={{ minWidth: 0 }}>
+						<p style={{ margin: "0 0 0.5rem", fontSize: "1.05rem" }}>
+							{user.motto || <span className="muted">{t("noMotto")}</span>}
+						</p>
+						<p className="muted" style={{ margin: 0 }}>
+							{user.mail || t("noEmail")}
+						</p>
+					</div>
+				</div>
+			</ContentCard>
+
+			<ContentCard
+				icon="✏️"
+				title={t("changeMotto")}
+				subtitle={t("changeMottoSubtitle")}
+			>
+				<form
+					action={updateMotto}
+					style={{
+						display: "flex",
+						flexDirection: "column",
+						gap: "0.75rem",
+						maxWidth: 520,
+					}}
+				>
+					<input
+						name="motto"
+						defaultValue={user.motto}
+						maxLength={127}
+						placeholder={t("mottoPlaceholder")}
+						aria-label="Motto"
+					/>
+					<div>
+						<button type="submit" className="btn btn-primary">
+							{t("saveMotto")}
+						</button>
+					</div>
+				</form>
+			</ContentCard>
+
+			<div className="card-grid sm-2">
+				<ContentCard
+					icon="🔒"
+					title={t("securityTitle")}
+					subtitle={t("securitySubtitle")}
+				>
+					<p className="muted" style={{ marginTop: 0 }}>
+						{t("securityDescription")}
+					</p>
+					<Link href="/settings/2fa" className="btn btn-outline">
+						{t("twoFactorLink")}
+					</Link>
+				</ContentCard>
+
+				<ContentCard
+					icon="🔗"
+					title={t("connectionsTitle")}
+					subtitle={t("connectionsSubtitle")}
+				>
+					<p className="muted" style={{ marginTop: 0 }}>
+						{t("connectionsDescription")}
+					</p>
+					<Link href="/settings/connections" className="btn btn-outline">
+						{t("manageConnections")}
+					</Link>
+				</ContentCard>
+			</div>
+		</main>
+	);
+}