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

@@ -0,0 +1,131 @@
+import Link from "next/link";
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState, OnlineBadge } 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 const metadata = { title: "Friends" };
+
+export default async function FriendsPage() {
+	const t = await getTranslations("pages.friends");
+	const session = await auth();
+	if (!session?.user?.id) redirect("/login");
+
+	const userId = Number(session.user.id);
+
+	// Friendships are bidirectional and stored once: the session user can appear
+	// as either user_one_id or user_two_id, with the *other* column being the
+	// friend. Read both directions, then dedupe the friend ids.
+	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, imagerBase] = await Promise.all([
+		friendIds.length
+			? prisma.user
+					.findMany({
+						where: { id: { in: friendIds } },
+						select: {
+							id: true,
+							username: true,
+							look: true,
+							motto: true,
+							online: true,
+						},
+						orderBy: { username: "asc" },
+					})
+					.catch(() => [])
+			: Promise.resolve([]),
+		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={
+					friends.length === 0
+						? t("emptySubtitle")
+						: t("subtitle", { count: friends.length })
+				}
+			/>
+
+			<ContentCard padded={friends.length === 0}>
+				{friends.length === 0 ? (
+					<EmptyState icon="🤝">{t("emptyState")}</EmptyState>
+				) : (
+					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+						{friends.map((friend) => {
+							const avatar = avatarImageUrl(imagerBase ?? "", friend.look, {
+								size: "s",
+								headOnly: true,
+							});
+							const isOnline = friend.online === "1";
+							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 || t("noMotto")}
+										</p>
+										<OnlineBadge online={isOnline} />
+									</div>
+								</div>
+							);
+						})}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}