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

@@ -0,0 +1,100 @@
+import Link from "next/link";
+import { getTranslations } from "next-intl/server";
+import { ContentCard, EmptyState } from "@/components/public/ui";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+export const revalidate = 300;
+
+export const metadata = { title: "Rare values" };
+
+type CategoryRow = {
+	id: bigint;
+	name: string;
+	badge: string;
+	priority: number;
+};
+
+export default async function RareValuesPage() {
+	const t = await getTranslations("pages.rares");
+	let categories: CategoryRow[] = [];
+	try {
+		categories = await prisma.websiteRareValueCategories.findMany({
+			orderBy: [{ priority: "asc" }, { name: "asc" }],
+			select: { id: true, name: true, badge: true, priority: true },
+		});
+	} catch {
+		categories = [];
+	}
+
+	// Per-category rare counts (grouped so we avoid N queries).
+	const counts = new Map<string, number>();
+	try {
+		const grouped = await prisma.websiteRareValues.groupBy({
+			by: ["categoryId"],
+			_count: { _all: true },
+		});
+		for (const g of grouped) {
+			counts.set(String(g.categoryId), g._count._all);
+		}
+	} catch {
+		// leave counts empty -> shown as 0
+	}
+
+	const badgesBase = (await siteSettings.get("badges_path", "")) ?? "";
+
+	return (
+		<main style={{ display: "grid", gap: "1.5rem" }}>
+			<ContentCard icon="💎" title={t("title")} subtitle={t("subtitle")} />
+
+			{categories.length === 0 ? (
+				<ContentCard padded={false}>
+					<EmptyState icon="💎">{t("empty")}</EmptyState>
+				</ContentCard>
+			) : (
+				<div className="card-grid sm-2 lg-3">
+					{categories.map((c) => {
+						const id = String(c.id);
+						const count = counts.get(id) ?? 0;
+						const badgeSrc =
+							badgesBase && c.badge ? `${badgesBase}/${c.badge}.gif` : "";
+						return (
+							<Link
+								key={id}
+								href={`/rares/${id}`}
+								className="content-card hover-lift"
+								style={{ color: "inherit", textDecoration: "none" }}
+							>
+								<div className="content-card-head">
+									{badgeSrc ? (
+										// eslint-disable-next-line @next/next/no-img-element
+										<img
+											src={badgeSrc}
+											alt={`${c.name} badge`}
+											width={36}
+											height={36}
+											style={{ flexShrink: 0 }}
+										/>
+									) : (
+										<span className="content-card-icon" aria-hidden>
+											💎
+										</span>
+									)}
+									<div className="content-card-head-text">
+										<p className="content-card-title">{c.name}</p>
+										<p className="content-card-subtitle">
+											{t("rareCount", { count })}
+										</p>
+									</div>
+								</div>
+								<div className="content-card-body">
+									<span className="btn btn-outline">{t("viewRares")}</span>
+								</div>
+							</Link>
+						);
+					})}
+				</div>
+			)}
+		</main>
+	);
+}