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

@@ -0,0 +1,143 @@
+import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
+import { applyTeam } from "@/actions/applications";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { auth } from "@/lib/auth";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+export const dynamic = "force-dynamic";
+
+// Canonical Habbo badge image CDN (same base used by the profile page).
+const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
+
+export default async function ApplyTeamPage() {
+	const session = await auth();
+	if (!session?.user?.id) redirect("/login");
+
+	const t = await getTranslations("pages.applyTeam");
+
+	const userId = Number(session.user.id);
+	const hotelName = (await siteSettings.get("hotel_name", "Atom")) ?? "Atom";
+
+	// ── Teams open for application ──────────────────────────────
+	// The Prisma slice exposes teams directly (no separate team-position table
+	// with position_kind), so the team application concept lists website_teams.
+	// Hidden ranks are excluded from the public apply page.
+	const teams = await prisma.websiteTeams
+		.findMany({
+			where: { hiddenRank: false },
+			orderBy: { rankName: "asc" },
+		})
+		.catch(() => []);
+
+	// Teams this user has already applied to. Team applications reuse the staff
+	// applications table with rank_id carrying the team id (the team flag).
+	const myApps = await prisma.websiteStaffApplications
+		.findMany({ where: { userId }, select: { rankId: true } })
+		.catch(() => []);
+	const appliedTeamIds = new Set(myApps.map((a) => a.rankId));
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard
+				icon="🤝"
+				title={t("title", { hotel: hotelName })}
+				subtitle={t("subtitle")}
+			/>
+
+			{teams.length === 0 ? (
+				<ContentCard icon="🤝" title={t("noPositionsTitle")}>
+					<EmptyState icon="🤝">{t("noPositionsBody")}</EmptyState>
+				</ContentCard>
+			) : (
+				<div className="card-grid sm-2">
+					{teams.map((team) => {
+						const teamId = Number(team.id);
+						const alreadyApplied = appliedTeamIds.has(teamId);
+						return (
+							<article key={String(team.id)} className="content-card">
+								<div className="content-card-head">
+									{team.badge ? (
+										/* eslint-disable-next-line @next/next/no-img-element */
+										<img
+											src={`${BADGE_IMG_BASE}/${team.badge}.gif`}
+											alt={team.rankName}
+											width={40}
+											height={40}
+										/>
+									) : (
+										<span className="content-card-icon" aria-hidden>
+											🤝
+										</span>
+									)}
+									<div className="content-card-head-text">
+										<p
+											className="content-card-title"
+											style={{ color: team.staffColor || undefined }}
+										>
+											{team.rankName}
+										</p>
+										{team.jobDescription ? (
+											<p className="content-card-subtitle">
+												{team.jobDescription}
+											</p>
+										) : null}
+									</div>
+								</div>
+
+								<div className="content-card-body">
+									{alreadyApplied ? (
+										<button
+											type="button"
+											className="btn btn-danger"
+											disabled
+											style={{ width: "100%" }}
+										>
+											{t("pending")}
+										</button>
+									) : (
+										<form action={applyTeam}>
+											{/* The team id is the application's rank flag; the applicant
+                          is re-read from the session inside the action. */}
+											<input
+												type="hidden"
+												name="teamId"
+												value={String(team.id)}
+											/>
+											<label htmlFor={`content-${team.id}`} className="muted">
+												{t("aboutYou")}
+											</label>
+											<textarea
+												id={`content-${team.id}`}
+												name="content"
+												required
+												minLength={10}
+												rows={5}
+												placeholder={t("aboutPlaceholder", {
+													rank: team.rankName,
+												})}
+												style={{
+													width: "100%",
+													margin: "0.4rem 0 0.75rem",
+													resize: "vertical",
+												}}
+											/>
+											<button
+												type="submit"
+												className="btn btn-primary"
+												style={{ width: "100%" }}
+											>
+												{t("applyFor", { rank: team.rankName })}
+											</button>
+										</form>
+									)}
+								</div>
+							</article>
+						);
+					})}
+				</div>
+			)}
+		</main>
+	);
+}