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)/guilds/[id]/forum/new/page.tsx

@@ -0,0 +1,97 @@
+import Link from "next/link";
+import { notFound, redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { postThread } from "@/actions/social";
+import { ContentCard } from "@/components/public/ui";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+
+export const dynamic = "force-dynamic";
+
+export default async function NewThreadPage({
+	params,
+}: {
+	params: Promise<{ id: string }>;
+}) {
+	const t = await getTranslations("pages.guildForumNew");
+	const { id } = await params;
+	const guildId = Number(id);
+	if (!Number.isInteger(guildId) || guildId <= 0) notFound();
+
+	// Auth gate: only logged-in users may open a thread.
+	const session = await auth();
+	if (!session?.user?.id) redirect("/login");
+
+	// Guild header (read-only). A DB hiccup degrades to notFound rather than 500.
+	let guild: { id: number; name: string } | null = null;
+	try {
+		guild = await prisma.guilds.findUnique({
+			where: { id: guildId },
+			select: { id: true, name: true },
+		});
+	} catch {
+		guild = null;
+	}
+
+	if (!guild) notFound();
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<p style={{ margin: 0 }}>
+				<Link href={`/guilds/${guild.id}/forum`}>{t("backToForum")}</Link>
+			</p>
+
+			<ContentCard
+				icon="✍️"
+				title={t("title")}
+				subtitle={t("subtitle", { guild: guild.name || t("unnamedGuild") })}
+			>
+				<form action={postThread}>
+					{/* Guild target drives the write; the author is taken from the session
+              inside the action, never from this form. */}
+					<input type="hidden" name="guildId" value={String(guild.id)} />
+
+					<label htmlFor="thread-subject" className="muted">
+						{t("subjectLabel")}
+					</label>
+					<input
+						id="thread-subject"
+						name="subject"
+						required
+						maxLength={255}
+						placeholder={t("subjectPlaceholder")}
+						style={{ width: "100%", margin: "0.4rem 0 0.9rem" }}
+					/>
+
+					<label htmlFor="thread-message" className="muted">
+						{t("messageLabel")}
+					</label>
+					<textarea
+						id="thread-message"
+						name="message"
+						required
+						rows={8}
+						placeholder={t("messagePlaceholder")}
+						style={{
+							width: "100%",
+							margin: "0.4rem 0 1rem",
+							resize: "vertical",
+						}}
+					/>
+
+					<div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+						<button type="submit" className="btn btn-primary">
+							{t("postThread")}
+						</button>
+						<Link
+							href={`/guilds/${guild.id}/forum`}
+							className="btn btn-outline"
+						>
+							{t("cancel")}
+						</Link>
+					</div>
+				</form>
+			</ContentCard>
+		</main>
+	);
+}

src/app/(site)/guilds/[id]/forum/page.tsx

@@ -0,0 +1,177 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { prisma } from "@/lib/prisma";
+
+export const revalidate = 300;
+
+type ThreadRow = {
+	id: number;
+	openerId: number | null;
+	subject: string | null;
+	postsCount: number | null;
+	createdAt: number | null;
+	updatedAt: number | null;
+	pinned: number | null;
+	locked: number | null;
+};
+
+function formatTimestamp(ts: number | null | undefined): string {
+	if (!ts) return "";
+	return new Date(ts * 1000).toISOString().slice(0, 10);
+}
+
+export default async function GuildForumPage({
+	params,
+}: {
+	params: Promise<{ id: string }>;
+}) {
+	const t = await getTranslations("pages.guildForum");
+	const { id } = await params;
+	const guildId = Number(id);
+	if (!Number.isInteger(guildId) || guildId <= 0) notFound();
+
+	// Guild header (read-only). A DB hiccup degrades to notFound rather than 500.
+	let guild: { id: number; name: string; badge: string } | null = null;
+	try {
+		guild = await prisma.guilds.findUnique({
+			where: { id: guildId },
+			select: { id: true, name: true, badge: true },
+		});
+	} catch {
+		guild = null;
+	}
+
+	if (!guild) notFound();
+
+	// Threads for this guild. Pinned first, then most-recently active.
+	let threads: ThreadRow[] = [];
+	try {
+		threads = await prisma.guildsForumsThreads.findMany({
+			where: { guildId: guild.id, state: 0 },
+			orderBy: [{ pinned: "desc" }, { updatedAt: "desc" }, { id: "desc" }],
+			take: 100,
+			select: {
+				id: true,
+				openerId: true,
+				subject: true,
+				postsCount: true,
+				createdAt: true,
+				updatedAt: true,
+				pinned: true,
+				locked: true,
+			},
+		});
+	} catch {
+		threads = [];
+	}
+
+	// Resolve opener usernames in one query (no relation exists in the schema, so
+	// join the users table manually by id). Falls back to the raw author id.
+	const openerIds = Array.from(
+		new Set(threads.map((t) => t.openerId ?? 0).filter((v) => v > 0)),
+	);
+
+	let users: { id: number; username: string }[] = [];
+	try {
+		users = openerIds.length
+			? await prisma.user.findMany({
+					where: { id: { in: openerIds } },
+					select: { id: true, username: true },
+				})
+			: [];
+	} catch {
+		users = [];
+	}
+
+	const usernameById = new Map(users.map((u) => [u.id, u.username]));
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<p style={{ margin: 0 }}>
+				<Link href={`/guilds/${guild.id}`}>{t("backToGuild")}</Link>
+			</p>
+
+			<ContentCard
+				icon="🗣️"
+				title={t("forumTitle", { guild: guild.name || t("unnamedGuild") })}
+				subtitle={`${threads.length} ${threads.length === 1 ? t("threadSingular") : t("threadPlural")}`}
+				action={
+					<Link
+						href={`/guilds/${guild.id}/forum/new`}
+						className="btn btn-primary"
+					>
+						{t("newThread")}
+					</Link>
+				}
+			/>
+
+			<ContentCard padded={threads.length === 0}>
+				{threads.length === 0 ? (
+					<EmptyState icon="🗣️">{t("empty")}</EmptyState>
+				) : (
+					<table>
+						<thead>
+							<tr>
+								<th style={{ padding: "0.6rem 0.75rem" }}>{t("colSubject")}</th>
+								<th style={{ padding: "0.6rem 0.75rem" }}>{t("colAuthor")}</th>
+								<th style={{ padding: "0.6rem 0.75rem" }}>{t("colPosts")}</th>
+								<th style={{ padding: "0.6rem 0.75rem" }}>{t("colDate")}</th>
+							</tr>
+						</thead>
+						<tbody>
+							{threads.map((t2) => {
+								const opener = t2.openerId ?? 0;
+								const username =
+									opener > 0 ? usernameById.get(opener) : undefined;
+								return (
+									<tr key={t2.id}>
+										<td style={{ padding: "0.6rem 0.75rem" }}>
+											<span style={{ fontWeight: 700 }}>
+												{t2.subject?.trim() || t("noSubject")}
+											</span>
+											{t2.pinned ? (
+												<span
+													className="online-badge online"
+													style={{ marginLeft: "0.5rem" }}
+												>
+													📌 {t("pinned")}
+												</span>
+											) : null}
+											{t2.locked ? (
+												<span
+													className="online-badge"
+													style={{ marginLeft: "0.5rem" }}
+												>
+													🔒 {t("locked")}
+												</span>
+											) : null}
+										</td>
+										<td style={{ padding: "0.6rem 0.75rem" }}>
+											{username ? (
+												<Link href={`/u/${username}`}>{username}</Link>
+											) : (
+												<span className="muted">
+													{opener > 0
+														? t("userNumber", { id: opener })
+														: t("unknown")}
+												</span>
+											)}
+										</td>
+										<td style={{ padding: "0.6rem 0.75rem" }}>
+											{t2.postsCount ?? 0}
+										</td>
+										<td className="muted" style={{ padding: "0.6rem 0.75rem" }}>
+											{formatTimestamp(t2.createdAt)}
+										</td>
+									</tr>
+								);
+							})}
+						</tbody>
+					</table>
+				)}
+			</ContentCard>
+		</main>
+	);
+}

src/app/(site)/guilds/[id]/page.tsx

@@ -0,0 +1,241 @@
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState, StatBlock } 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;
+
+type GuildView = {
+	id: number;
+	name: string;
+	description: string;
+	badge: string;
+	userId: number;
+	dateCreated: number;
+};
+
+type MemberView = {
+	userId: number;
+	username: string;
+	look: string;
+	motto: string;
+	memberSince: number;
+	isOwner: boolean;
+};
+
+function formatTimestamp(ts: number): string {
+	if (!ts) return "";
+	return new Date(ts * 1000).toISOString().slice(0, 10);
+}
+
+export default async function GuildPage({
+	params,
+}: {
+	params: Promise<{ id: string }>;
+}) {
+	const t = await getTranslations("pages.guild");
+	const { id } = await params;
+	const guildId = Number(id);
+	if (!Number.isInteger(guildId) || guildId <= 0) notFound();
+
+	let guild: GuildView | null = null;
+	try {
+		guild = await prisma.guilds.findUnique({
+			where: { id: guildId },
+			select: {
+				id: true,
+				name: true,
+				description: true,
+				badge: true,
+				userId: true,
+				dateCreated: true,
+			},
+		});
+	} catch {
+		guild = null;
+	}
+
+	if (!guild) notFound();
+
+	// Members come from guilds_members; there is no relation in the schema, so we
+	// join the users table manually by id.
+	let memberRows: { userId: number; memberSince: number }[] = [];
+	try {
+		memberRows = await prisma.guildsMembers.findMany({
+			where: { guildId: guild.id },
+			orderBy: { memberSince: "asc" },
+			take: 200,
+			select: { userId: true, memberSince: true },
+		});
+	} catch {
+		memberRows = [];
+	}
+
+	const memberIds = Array.from(
+		new Set(
+			[guild.userId, ...memberRows.map((m) => m.userId)].filter((v) => v > 0),
+		),
+	);
+
+	let users: { id: number; username: string; look: string; motto: string }[] =
+		[];
+	try {
+		users = memberIds.length
+			? await prisma.user.findMany({
+					where: { id: { in: memberIds } },
+					select: { id: true, username: true, look: true, motto: true },
+				})
+			: [];
+	} catch {
+		users = [];
+	}
+
+	const imagerBase = await siteSettings.get(
+		"habbo_imaging_url",
+		"https://www.habbo.com/habbo-imaging/avatarimage",
+	);
+
+	const usersById = new Map(users.map((u) => [u.id, u]));
+	const sinceById = new Map(memberRows.map((m) => [m.userId, m.memberSince]));
+
+	const guildOwnerUserId = guild.userId;
+
+	const members: MemberView[] = memberIds
+		.map((uid) => {
+			const u = usersById.get(uid);
+			if (!u) return null;
+			return {
+				userId: u.id,
+				username: u.username,
+				look: u.look,
+				motto: u.motto,
+				memberSince: sinceById.get(uid) ?? 0,
+				isOwner: uid === guildOwnerUserId,
+			};
+		})
+		.filter((m): m is MemberView => m !== null)
+		// Owner first, then by join date.
+		.sort((a, b) => {
+			if (a.isOwner !== b.isOwner) return a.isOwner ? -1 : 1;
+			return a.memberSince - b.memberSince;
+		});
+
+	const created = formatTimestamp(guild.dateCreated);
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<p style={{ margin: 0 }}>
+				<Link href="/guilds">{t("allGuilds")}</Link>
+			</p>
+
+			<ContentCard>
+				<div
+					style={{ display: "flex", gap: "1.25rem", alignItems: "flex-start" }}
+				>
+					{guild.badge ? (
+						// eslint-disable-next-line @next/next/no-img-element
+						<img
+							src={`https://habbo-stories-content.s3.amazonaws.com/badge-part-images/${guild.badge}.gif`}
+							alt={`${guild.name} badge`}
+							width={48}
+							height={48}
+							style={{ flex: "0 0 auto" }}
+						/>
+					) : null}
+					<div style={{ minWidth: 0, flex: 1 }}>
+						<h1 style={{ margin: "0 0 0.35rem" }}>
+							{guild.name || t("unnamedGuild")}
+						</h1>
+						<p style={{ margin: 0 }}>
+							{guild.description || (
+								<span className="muted">{t("noDescription")}</span>
+							)}
+						</p>
+					</div>
+				</div>
+
+				<div className="stat-grid" style={{ marginTop: "1.1rem" }}>
+					<StatBlock
+						icon="👥"
+						value={members.length}
+						label={
+							members.length === 1 ? t("memberSingular") : t("memberPlural")
+						}
+					/>
+					{created ? (
+						<StatBlock icon="📅" value={created} label={t("founded")} />
+					) : null}
+					<StatBlock
+						icon="🚪"
+						value={
+							<Link
+								href={`/guilds/${guild.id}/forum`}
+								style={{ textDecoration: "none" }}
+							>
+								{t("forumLink")}
+							</Link>
+						}
+						label={t("discussion")}
+					/>
+				</div>
+			</ContentCard>
+
+			<ContentCard
+				icon="👥"
+				title={t("membersTitle")}
+				subtitle={`${members.length} ${members.length === 1 ? t("memberLowerSingular") : t("memberLowerPlural")}`}
+				padded={members.length === 0}
+			>
+				{members.length === 0 ? (
+					<EmptyState icon="👥">{t("noMembers")}</EmptyState>
+				) : (
+					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+						{members.map((m) => (
+							<div
+								key={m.userId}
+								className="card hover"
+								style={{
+									display: "flex",
+									gap: "0.85rem",
+									alignItems: "center",
+								}}
+							>
+								{/* eslint-disable-next-line @next/next/no-img-element */}
+								<img
+									className="avatar"
+									src={avatarImageUrl(imagerBase ?? "", m.look, { size: "l" })}
+									alt={`${m.username} avatar`}
+									width={50}
+									height={75}
+									style={{ flex: "0 0 auto" }}
+								/>
+								<div style={{ minWidth: 0 }}>
+									<h3 style={{ margin: "0 0 0.2rem", fontSize: "1rem" }}>
+										<Link href={`/u/${m.username}`}>{m.username}</Link>
+									</h3>
+									{m.isOwner ? (
+										<span
+											className="online-badge online"
+											style={{ marginBottom: "0.25rem" }}
+										>
+											👑 {t("owner")}
+										</span>
+									) : null}
+									<p
+										className="muted"
+										style={{ margin: m.isOwner ? "0.25rem 0 0" : 0 }}
+									>
+										{m.motto || t("noMotto")}
+									</p>
+								</div>
+							</div>
+						))}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}

src/app/(site)/guilds/page.tsx

@@ -0,0 +1,84 @@
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { excerpt } from "@/lib/format";
+import { prisma } from "@/lib/prisma";
+
+export const revalidate = 300;
+
+export const metadata = { title: "Guilds" };
+
+type GuildCard = {
+	id: number;
+	name: string;
+	description: string;
+	badge: string;
+};
+
+async function getGuilds(): Promise<GuildCard[]> {
+	try {
+		const guilds = await prisma.guilds.findMany({
+			orderBy: { id: "desc" },
+			take: 40,
+			select: { id: true, name: true, description: true, badge: true },
+		});
+		return guilds;
+	} catch {
+		return [];
+	}
+}
+
+export default async function GuildsPage() {
+	const t = await getTranslations("pages.guilds");
+	const guilds = await getGuilds();
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="🚪" title={t("title")} subtitle={t("subtitle")} />
+
+			<ContentCard padded={guilds.length === 0}>
+				{guilds.length === 0 ? (
+					<EmptyState icon="🚪">{t("empty")}</EmptyState>
+				) : (
+					<div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
+						{guilds.map((g) => (
+							<Link
+								key={g.id}
+								href={`/guilds/${g.id}`}
+								className="card hover"
+								style={{
+									display: "flex",
+									gap: "0.85rem",
+									alignItems: "flex-start",
+									color: "inherit",
+									textDecoration: "none",
+								}}
+							>
+								{g.badge ? (
+									// eslint-disable-next-line @next/next/no-img-element
+									<img
+										src={`https://habbo-stories-content.s3.amazonaws.com/badge-part-images/${g.badge}.gif`}
+										alt={`${g.name} badge`}
+										width={40}
+										height={40}
+										style={{ flex: "0 0 auto" }}
+									/>
+								) : null}
+								<div style={{ minWidth: 0 }}>
+									<h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
+										{g.name || t("unnamedGuild")}
+									</h3>
+									<p className="muted" style={{ margin: 0 }}>
+										{g.description
+											? excerpt(g.description, 120)
+											: t("noDescription")}
+									</p>
+								</div>
+							</Link>
+						))}
+					</div>
+				)}
+			</ContentCard>
+		</main>
+	);
+}