Improvements: remove dead config, fix ESM, add URL validation, unify types, add missing logging

- Remove .prettierrc (dead config, Biome replaces Prettier)
- Rename lighthouserc.json to lighthouserc.cjs with module.exports for ESM compat
- Add logger.warn to empty catch blocks in auth, register, site-settings, prisma-cache, redis, security, rate-limit
- Unify ActionResult type: action-helper.ts uses 'ok' consistent with safe-action-shared.ts
- Add noUnusedLocals + noUnusedParameters to tsconfig + fix 25 pre-existing unused vars
- Replace barrel export src/types/index.ts with direct @/types/common imports
- Make trustHost conditional (development only) in auth.ts
- Add pre-flight URL validation to update-Nitrov3.sh to catch image.library.url misconfigurations
- Improve NITRO_IMAGE_LIBRARY_URL content validation in pre-flight & post-compute checks

src/app/(site)/apply/staff/page.tsx

@@ -4,9 +4,9 @@ import type { CSSProperties } from "react";
 import { applyStaff } from "@/actions/applications";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
 import { formatDate } from "@/lib/format-date";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
@@ -145,7 +145,13 @@ export default async function ApplyStaffPage({
 								<div className="content-card-body">
 									<p style={{ margin: "0 0 0.5rem" }}>{position.description}</p>
 									<p className="muted" style={{ margin: "0 0 0.75rem" }}>
-										{t("deadline", { date: formatDate(position.applyTo, "datetime", t("noDeadline")) })}
+										{t("deadline", {
+											date: formatDate(
+												position.applyTo,
+												"datetime",
+												t("noDeadline"),
+											),
+										})}
 									</p>
 
 									{alreadyApplied ? (

src/app/(site)/apply/team/page.tsx

@@ -4,8 +4,8 @@ import type { CSSProperties } from "react";
 import { applyTeam } from "@/actions/applications";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
-import { prisma } from "@/lib/prisma";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 

src/app/(site)/events/[slugOrId]/page.tsx

@@ -42,7 +42,10 @@ export default async function EventDetailPage({
 		})
 		.catch(() => null);
 
-	if (!event || (event.status !== "published" && event.status !== "completed")) {
+	if (
+		!event ||
+		(event.status !== "published" && event.status !== "completed")
+	) {
 		notFound();
 	}
 
@@ -70,8 +73,7 @@ export default async function EventDetailPage({
 	const winnerName = new Map(winners.map((u) => [u.id, u.username]));
 
 	const isFull =
-		event.maxPlayers != null &&
-		event._count.registrations >= event.maxPlayers;
+		event.maxPlayers != null && event._count.registrations >= event.maxPlayers;
 	const hasEnded =
 		event.status === "completed" ||
 		(event.endsAt != null && event.endsAt.getTime() < Date.now());
@@ -157,7 +159,11 @@ export default async function EventDetailPage({
 				</div>
 			</ContentCard>
 
-			<ContentCard icon="✍️" title={t("registerTitle")} subtitle={t("registerSubtitle")}>
+			<ContentCard
+				icon="✍️"
+				title={t("registerTitle")}
+				subtitle={t("registerSubtitle")}
+			>
 				{session?.user && canRegister ? (
 					<EventRegisterButton eventId={event.id} />
 				) : (

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

@@ -112,7 +112,13 @@ export default async function EventsPage() {
 										>
 											{formatDate(event.startsAt, "datetime", "")}
 										</p>
-										<p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
+										<p
+											style={{
+												margin: 0,
+												fontSize: "0.88rem",
+												lineHeight: 1.5,
+											}}
+										>
 											{excerpt(event.description, 120)}
 										</p>
 										<p

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

@@ -4,8 +4,8 @@ import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
 import { replyToThread } from "@/actions/social";
 import { ContentCard, EmptyState } from "@/components/public/ui";
-import { formatDate } from "@/lib/format-date";
 import { auth } from "@/lib/auth";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 60;
@@ -216,7 +216,9 @@ export default async function GuildForumThreadPage({
 											)}
 										</span>
 										<span className="muted" style={{ fontSize: "0.85rem" }}>
-											{formatDate(post.createdAt ? new Date(post.createdAt * 1000) : null)}
+											{formatDate(
+												post.createdAt ? new Date(post.createdAt * 1000) : null,
+											)}
 										</span>
 									</div>
 									<p
@@ -236,7 +238,11 @@ export default async function GuildForumThreadPage({
 			</ContentCard>
 
 			{canReply ? (
-				<ContentCard icon="✍️" title={t("replyTitle")} subtitle={t("replySubtitle")}>
+				<ContentCard
+					icon="✍️"
+					title={t("replyTitle")}
+					subtitle={t("replySubtitle")}
+				>
 					<form action={replyToThread}>
 						<input type="hidden" name="guildId" value={String(guild.id)} />
 						<input type="hidden" name="threadId" value={String(thread.id)} />
@@ -262,8 +268,7 @@ export default async function GuildForumThreadPage({
 				</p>
 			) : (
 				<p className="muted" style={{ margin: 0 }}>
-					{t("loginToReply")}{" "}
-					<Link href="/login">{t("loginLink")}</Link>
+					{t("loginToReply")} <Link href="/login">{t("loginLink")}</Link>
 				</p>
 			)}
 		</main>

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

@@ -2,8 +2,8 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
-import { formatDate } from "@/lib/format-date";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;
@@ -190,7 +190,10 @@ export default async function GuildForumPage({
 											{t2.postsCount ?? 0}
 										</td>
 										<td className="muted" style={{ padding: "0.6rem 0.75rem" }}>
-											{formatDate(t2.createdAt ? new Date(t2.createdAt * 1000) : null, "date")}
+											{formatDate(
+												t2.createdAt ? new Date(t2.createdAt * 1000) : null,
+												"date",
+											)}
 										</td>
 									</tr>
 								);

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

@@ -3,8 +3,8 @@ 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 { formatDate } from "@/lib/format-date";
+import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export const revalidate = 300;

src/app/(site)/help/[category]/page.tsx

@@ -2,10 +2,10 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
-import { prisma } from "@/lib/prisma";
-import { sanitize } from "@/lib/sanitize";
 import { SanitizedHtml } from "@/components/shared/sanitized-html";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
+import { sanitize } from "@/lib/sanitize";
 
 export const revalidate = 300;
 
@@ -118,8 +118,8 @@ export default async function HelpCategoryPage({
 					/>
 				) : null}
 
-		{/* content is author-supplied HTML — sanitised server-side. */}
-		<SanitizedHtml html={sanitize(content)} style={{ lineHeight: 1.7 }} />
+				{/* content is author-supplied HTML — sanitised server-side. */}
+				<SanitizedHtml html={sanitize(content)} style={{ lineHeight: 1.7 }} />
 
 				{hasButton ? (
 					<div style={{ clear: "both", marginTop: "1rem" }}>

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

@@ -99,9 +99,7 @@ export default async function HelpTicketDetailPage({
 		replies = [];
 	}
 
-	const authorIds = [
-		...new Set([userId, ...replies.map((r) => r.userId)]),
-	];
+	const authorIds = [...new Set([userId, ...replies.map((r) => r.userId)])];
 	let users: { id: number; username: string }[] = [];
 	try {
 		users = await prisma.user.findMany({
@@ -174,7 +172,11 @@ export default async function HelpTicketDetailPage({
 				<Link href="/help/tickets">{t("backToList")}</Link>
 			</p>
 
-			<ContentCard icon="🎫" title={ticket.title} subtitle={t("ticketId", { id: String(ticket.id) })}>
+			<ContentCard
+				icon="🎫"
+				title={ticket.title}
+				subtitle={t("ticketId", { id: String(ticket.id) })}
+			>
 				<span className={`online-badge${ticket.open ? " online" : ""}`}>
 					<span className="online-dot" aria-hidden />
 					{ticket.open ? t("statusOpen") : t("statusClosed")}
@@ -220,7 +222,9 @@ export default async function HelpTicketDetailPage({
 									}}
 								>
 									<span style={{ fontWeight: 700 }}>
-										{index === 0 ? t("you") : username ? (
+										{index === 0 ? (
+											t("you")
+										) : username ? (
 											<Link href={`/u/${username}`}>{username}</Link>
 										) : (
 											<span className="muted">

src/app/(site)/layout.tsx

@@ -11,7 +11,11 @@ import { auth } from "@/lib/auth";
  * Public site chrome. Route group `(site)` keeps this off `/admin` and `/client`,
  * so housekeeping is never constrained by the public max-w-7xl grid.
  */
-export default async function SiteLayout({ children }: { children: ReactNode }) {
+export default async function SiteLayout({
+	children,
+}: {
+	children: ReactNode;
+}) {
 	const session = await auth();
 
 	return (

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

@@ -3,21 +3,21 @@ import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { LoginForm } from "@/components/auth/login-form";
-import { cached } from "@/lib/cache";
-import { avatarImageUrl } from "@/lib/format";
-import { prisma } from "@/lib/prisma";
-import { captchaConfig } from "@/lib/services/captcha";
-import { resolveHotelName } from "@/lib/hotel-name";
-import { siteSettings } from "@/lib/services/site-settings";
-import { ThemeSwitcher } from "@/components/theme-switcher";
+import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
-import { Clock } from "@/components/clock";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { cached } from "@/lib/cache";
+import { avatarImageUrl } from "@/lib/format";
+import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
+import { captchaConfig } from "@/lib/services/captcha";
+import { siteSettings } from "@/lib/services/site-settings";
 
 export default async function LoginPage() {
 	const t = await getTranslations("pages.login");
 	const th = await getTranslations("header");
-	const [hotelName, imagerRaw, cfg, discordUrl, logo] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
@@ -54,229 +54,347 @@ export default async function LoginPage() {
 		<div className="flex flex-col gap-10 pb-14">
 			{/* ── Top Bar ── */}
 			<Reveal>
-				<div className="relative flex items-center justify-between rounded-xl border px-5 py-3" style={{
-					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
-					backdropFilter: "blur(14px)",
-					WebkitBackdropFilter: "blur(14px)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-				}}>
+				<div
+					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
+					style={{
+						background:
+							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
+						backdropFilter: "blur(14px)",
+						WebkitBackdropFilter: "blur(14px)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				>
 					<div className="flex items-center gap-3">
 						{logo ? (
-							<Image src={logo} alt={hotelName} width={100} height={28} className="shrink-0 object-contain" unoptimized style={{ maxHeight: 28, width: "auto", height: "auto" }} />
+							<Image
+								src={logo}
+								alt={hotelName}
+								width={100}
+								height={28}
+								className="shrink-0 object-contain"
+								unoptimized
+								style={{ maxHeight: 28, width: "auto", height: "auto" }}
+							/>
 						) : (
-							<Image src="/assets/images/icons/lighthouse.png" alt={hotelName} width={28} height={28} className="shrink-0" unoptimized />
+							<Image
+								src="/assets/images/icons/lighthouse.png"
+								alt={hotelName}
+								width={28}
+								height={28}
+								className="shrink-0"
+								unoptimized
+							/>
 						)}
-						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
+						<span
+							className="text-sm font-extrabold uppercase tracking-wide"
+							style={{ color: "var(--color-text-readable)" }}
+						>
 							{hotelName}
 						</span>
 					</div>
-					<div className="flex items-center gap-1.5 rounded-lg px-2 py-1" style={{
-						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
-					}}>
-
+					<div
+						className="flex items-center gap-1.5 rounded-lg px-2 py-1"
+						style={{
+							background:
+								"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+						}}
+					>
 						<LanguageSwitcher />
-						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<Clock />
-						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<ThemeSwitcher />
 					</div>
 				</div>
 			</Reveal>
 			<Reveal>
-			<div className="flex flex-col lg:flex-row gap-10 stagger-children">
-			{/* Left panel */}
-			<div className="lg:w-80 shrink-0 space-y-4">
-				<div
-					className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
-					style={{
-						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-						background: `url(/assets/images/background.png) center/cover no-repeat`,
-					}}
-				>
-					<div
-						className="absolute inset-0"
-						style={{
-							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
-						}}
-					/>
-					<div className="relative">
-						<Image
-							src="/assets/images/FrankwithBag.gif"
-							alt="Frank"
-							width={130}
-							height={170}
-							className="object-contain mx-auto drop-shadow-xl animate-float"
-							unoptimized
-							priority
-						/>
+				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
+					{/* Left panel */}
+					<div className="lg:w-80 shrink-0 space-y-4">
 						<div
-							className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border backdrop-blur-sm"
+							className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
 							style={{
-								borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-								background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
-								color: "var(--color-primary-readable, var(--color-primary))",
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+								background: `url(/assets/images/background.png) center/cover no-repeat`,
 							}}
 						>
-							<span className="relative flex h-2 w-2">
-								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
-								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
-							</span>
-							{th("online", { count: online, hotel: "" }).trim()}
+							<div
+								className="absolute inset-0"
+								style={{
+									background:
+										"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
+								}}
+							/>
+							<div className="relative">
+								<Image
+									src="/assets/images/FrankwithBag.gif"
+									alt="Frank"
+									width={130}
+									height={170}
+									className="object-contain mx-auto drop-shadow-xl animate-float"
+									unoptimized
+									priority
+								/>
+								<div
+									className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border backdrop-blur-sm"
+									style={{
+										borderColor:
+											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+										background:
+											"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+										color:
+											"var(--color-primary-readable, var(--color-primary))",
+									}}
+								>
+									<span className="relative flex h-2 w-2">
+										<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+										<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+									</span>
+									{th("online", { count: online, hotel: "" }).trim()}
+								</div>
+								<h1
+									className="text-xl font-black"
+									style={{
+										color: "var(--color-text-readable)",
+										fontFamily: "var(--font-nunito)",
+									}}
+								>
+									{t("welcomeBack")}
+								</h1>
+								<p
+									className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{t("welcomeBackSub", { hotelName })}
+								</p>
+							</div>
 						</div>
-						<h1
-							className="text-xl font-black"
-							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
-						>
-							{t("welcomeBack")}
-						</h1>
+
+						{recentUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+								}}
+							>
+								<div
+									className="flex items-center gap-2.5 px-4 py-3"
+									style={{
+										background:
+											"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+									}}
+								>
+									<Image
+										src="/assets/images/icons/navigation/goody.png"
+										alt=""
+										width={18}
+										height={18}
+										unoptimized
+									/>
+									<h3
+										className="text-sm font-bold text-white"
+										style={{ fontFamily: "var(--font-nunito)" }}
+									>
+										{th("online", { count: online, hotel: "" }).trim()}
+									</h3>
+								</div>
+								<div
+									className="p-4"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
+									}}
+								>
+									<div className="grid grid-cols-4 gap-1.5">
+										{recentUsers.map((u) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
+													alt=""
+													width={26}
+													height={32}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[8px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
+
+						{latestUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+								}}
+							>
+								<div
+									className="flex items-center gap-2.5 px-4 py-3"
+									style={{
+										background:
+											"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+									}}
+								>
+									<Image
+										src="/assets/images/icons/friends.png"
+										alt=""
+										width={18}
+										height={18}
+										unoptimized
+									/>
+									<h3
+										className="text-sm font-bold text-white"
+										style={{ fontFamily: "var(--font-nunito)" }}
+									>
+										Newest citizens
+									</h3>
+								</div>
+								<div
+									className="p-4"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
+									}}
+								>
+									<div className="grid grid-cols-4 gap-1.5">
+										{latestUsers.map((u) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
+													alt=""
+													width={26}
+													height={32}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[8px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
+
 						<p
-							className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+							className="text-xs text-center"
 							style={{ color: "var(--color-text-muted)" }}
 						>
-							{t("welcomeBackSub", { hotelName })}
+							{t("noAccount") ?? "No account?"}{" "}
+							<Link
+								href="/register"
+								className="font-extrabold hover:underline"
+								style={{
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							>
+								{t("createOne") ?? "Create one"}
+							</Link>
 						</p>
 					</div>
+
+					{/* Right: form */}
+					<div className="flex-1">
+						<div
+							className="overflow-hidden rounded-xl border"
+							style={{
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						>
+							<div
+								className="flex items-center gap-2.5 px-4 py-3"
+								style={{
+									background:
+										"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+								}}
+							>
+								<Image
+									src="/assets/images/icons/navigation/me.png"
+									alt=""
+									width={18}
+									height={18}
+									unoptimized
+								/>
+								<h2
+									className="text-sm font-bold text-white"
+									style={{ fontFamily: "var(--font-nunito)" }}
+								>
+									{t("title")}
+								</h2>
+							</div>
+							<div
+								className="p-6"
+								style={{ backgroundColor: "var(--color-surface)" }}
+							>
+								<p
+									className="text-sm mb-6"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{t("subtitle")}
+								</p>
+								<LoginForm
+									captcha={{
+										provider: cfg.provider,
+										siteKey: cfg.siteKey || undefined,
+										field: cfg.field || undefined,
+									}}
+									nonce={nonce}
+								/>
+							</div>
+						</div>
+					</div>
 				</div>
-
-				{recentUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
-					>
-						<div
-							className="flex items-center gap-2.5 px-4 py-3"
-							style={{
-								background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
-							}}
-						>
-							<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
-								{th("online", { count: online, hotel: "" }).trim()}
-							</h3>
-						</div>
-						<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
-						<div className="grid grid-cols-4 gap-1.5">
-							{recentUsers.map((u) => (
-								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-									style={{
-										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-									}}
-								>
-									<Image
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
-										alt=""
-										width={26}
-										height={32}
-										className="rounded-md"
-										unoptimized
-									/>
-									<span
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
-						</div>
-					</div>
-				)}
-
-				{latestUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
-					>
-						<div
-							className="flex items-center gap-2.5 px-4 py-3"
-							style={{
-								background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
-							}}
-						>
-							<Image src="/assets/images/icons/friends.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
-								Newest citizens
-							</h3>
-						</div>
-						<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
-						<div className="grid grid-cols-4 gap-1.5">
-							{latestUsers.map((u) => (
-								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-									style={{
-										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-									}}
-								>
-									<Image
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
-										alt=""
-										width={26}
-										height={32}
-										className="rounded-md"
-										unoptimized
-									/>
-									<span
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
-						</div>
-					</div>
-				)}
-
-				<p className="text-xs text-center" style={{ color: "var(--color-text-muted)" }}>
-					{t("noAccount") ?? "No account?"}{" "}
-					<Link
-						href="/register"
-						className="font-extrabold hover:underline"
-						style={{ color: "var(--color-primary-readable, var(--color-primary))" }}
-					>
-						{t("createOne") ?? "Create one"}
-					</Link>
-				</p>
-			</div>
-
-			{/* Right: form */}
-			<div className="flex-1">
-				<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-						}}
-					>
-						<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
-							{t("title")}
-						</h2>
-					</div>
-					<div className="p-6" style={{ backgroundColor: "var(--color-surface)" }}>
-					<p
-						className="text-sm mb-6"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{t("subtitle")}
-					</p>
-				<LoginForm
-					captcha={{
-						provider: cfg.provider,
-						siteKey: cfg.siteKey || undefined,
-						field: cfg.field || undefined,
-					}}
-					nonce={nonce}
-				/>
-			</div>
-			</div>
-			</div>
-		</div>
 			</Reveal>
 		</div>
 	);

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

@@ -1,6 +1,6 @@
 import { getTranslations } from "next-intl/server";
-import { formatDate } from "@/lib/format-date";
 import { ContentCard, EmptyState, StatBlock } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;
@@ -124,7 +124,10 @@ export default async function MarketplacePage() {
 										<td style={{ fontWeight: 700 }}>
 											{o.price.toLocaleString()} cr
 										</td>
-										<td className="muted" title={formatDate(new Date(o.timestamp * 1000))}>
+										<td
+											className="muted"
+											title={formatDate(new Date(o.timestamp * 1000))}
+										>
 											{listedAgo(o.timestamp, t)}
 										</td>
 									</tr>

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

@@ -3,7 +3,7 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import type { CSSProperties, ReactNode } from "react";
 import { claimReferral } from "@/actions/referral";
-import { ContentCard, EmptyState, OnlineBadge } from "@/components/public/ui";
+
 import { Reveal } from "@/components/motion-reveal";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
@@ -71,89 +71,105 @@ export default async function MePage({
 	try {
 		const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
 
-		const [user, imagerBase, hotelName, neededRaw, amountRaw, currencyRaw, alertRaw, recentRooms, badges, lastWebLogin, userSettings, friendCount, unreadCount] =
-			await Promise.all([
-				prisma.user.findUnique({
-					where: { id: userId },
+		const [
+			user,
+			imagerBase,
+			hotelName,
+			neededRaw,
+			amountRaw,
+			currencyRaw,
+			alertRaw,
+			recentRooms,
+			badges,
+			lastWebLogin,
+			userSettings,
+			friendCount,
+			unreadCount,
+		] = await Promise.all([
+			prisma.user.findUnique({
+				where: { id: userId },
+				select: {
+					id: true,
+					username: true,
+					look: true,
+					motto: true,
+					rank: true,
+					credits: true,
+					accountCreated: true,
+					lastLogin: true,
+					lastOnline: true,
+				},
+			}),
+			siteSettings.get(
+				"habbo_imaging_url",
+				"https://www.habbo.com/habbo-imaging/avatarimage",
+			),
+			resolveHotelName(),
+			prisma.websiteSetting
+				.findUnique({
+					where: { key: "referrals_needed" },
+					select: { value: true },
+				})
+				.catch(() => null),
+			prisma.websiteSetting
+				.findUnique({
+					where: { key: "referral_reward_amount" },
+					select: { value: true },
+				})
+				.catch(() => null),
+			prisma.websiteSetting
+				.findFirst({
+					where: {
+						key: {
+							in: ["referral_reward_currency_type", "referral_reward_currency"],
+						},
+					},
+					select: { value: true },
+				})
+				.catch(() => null),
+			siteSettings.get("hotel_alert_banner", ""),
+			prisma.rooms
+				.findMany({
+					orderBy: { id: "desc" },
 					select: {
 						id: true,
-						username: true,
-						look: true,
-						motto: true,
-						rank: true,
-						credits: true,
-						accountCreated: true,
-						lastLogin: true,
-						lastOnline: true,
+						name: true,
+						ownerName: true,
+						users: true,
+						usersMax: true,
 					},
-				}),
-				siteSettings.get(
-					"habbo_imaging_url",
-					"https://www.habbo.com/habbo-imaging/avatarimage",
-				),
-				resolveHotelName(),
-				prisma.websiteSetting
-					.findUnique({
-						where: { key: "referrals_needed" },
-						select: { value: true },
-					})
-					.catch(() => null),
-				prisma.websiteSetting
-					.findUnique({
-						where: { key: "referral_reward_amount" },
-						select: { value: true },
-					})
-					.catch(() => null),
-				prisma.websiteSetting
-					.findFirst({
-						where: {
-							key: {
-								in: [
-									"referral_reward_currency_type",
-									"referral_reward_currency",
-								],
-							},
-						},
-						select: { value: true },
-					})
-					.catch(() => null),
-				siteSettings.get("hotel_alert_banner", ""),
-				prisma.rooms
-					.findMany({
-						orderBy: { id: "desc" },
-						select: { id: true, name: true, ownerName: true, users: true, usersMax: true },
-						take: 6,
-					})
-					.catch(() => []),
-				prisma.usersBadges
-					.findMany({
-						where: { userId, slotId: { gt: 0 } },
-						orderBy: { slotId: "asc" },
-						select: { badgeCode: true, slotId: true },
-					})
-					.catch(() => []),
-				prisma.websiteLoginLogs
-					.findFirst({
-						where: { userId },
-						orderBy: { id: "desc" },
-						select: { createdAt: true },
-					})
-					.catch(() => null),
-				prisma.usersSettings
-					.findUnique({
-						where: { userId },
-						select: { achievementScore: true, respectsReceived: true },
-					})
-					.catch(() => null),
-				prisma.messengerFriendships
-					.count({
-						where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
-					})
-					.catch(() => 0),
-				prisma.messengerOffline
-					.count({ where: { userId } })
-					.catch(() => 0),
-			]);
+					take: 6,
+				})
+				.catch(() => []),
+			prisma.usersBadges
+				.findMany({
+					where: { userId, slotId: { gt: 0 } },
+					orderBy: { slotId: "asc" },
+					select: { badgeCode: true, slotId: true },
+				})
+				.catch(() => []),
+			prisma.websiteLoginLogs
+				.findFirst({
+					where: { userId },
+					orderBy: { id: "desc" },
+					select: { createdAt: true },
+				})
+				.catch(() => null),
+			prisma.usersSettings
+				.findUnique({
+					where: { userId },
+					select: { achievementScore: true, respectsReceived: true },
+				})
+				.catch(() => null),
+			prisma.messengerFriendships
+				.count({
+					where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
+				})
+				.catch(() => 0),
+			prisma.messengerOffline.count({ where: { userId } }).catch(() => 0),
+		]);
+
+		void lastWebLogin;
 
 		if (!user) throw new Error("user-not-found");
 
@@ -212,23 +228,23 @@ export default async function MePage({
 		const lastLoginDate = user.lastLogin
 			? new Date(user.lastLogin * 1000).toISOString().slice(0, 10)
 			: "Never";
-		const lastWebLoginDate = lastWebLogin?.createdAt
-			? new Date(lastWebLogin.createdAt).toISOString().slice(0, 10)
-			: null;
 		const lastOnlineDate = user.lastOnline
 			? new Date(user.lastOnline * 1000).toISOString().slice(0, 10)
 			: "Never";
 		const referralLink = `/register?ref=${encodeURIComponent(user.username)}`;
 
-		const imager = imagerBase ?? "https://www.habbo.com/habbo-imaging/avatarimage";
-		const avatarFull = avatarImageUrl(imager, user.look, { size: "l", direction: 2 });
-		const avatarHead = avatarImageUrl(imager, user.look, { headOnly: true, direction: 2, size: "s" });
-
+		const imager =
+			imagerBase ?? "https://www.habbo.com/habbo-imaging/avatarimage";
+		const avatarFull = avatarImageUrl(imager, user.look, {
+			size: "l",
+			direction: 2,
+		});
 		content = (
 			<div className="flex flex-col gap-8 pb-8">
 				{claimed ? (
 					<div role="status" style={feedbackStyle("success")}>
-						Woah! You have successfully claimed your reward — keep up the good work!
+						Woah! You have successfully claimed your reward — keep up the good
+						work!
 					</div>
 				) : null}
 				{error ? (
@@ -242,24 +258,47 @@ export default async function MePage({
 						className="relative overflow-hidden rounded-2xl border p-6 flex items-start gap-6"
 						style={{
 							background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)), var(--color-surface))`,
-							borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 20%, transparent)",
 						}}
 					>
-						<div className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10" style={{ background: "var(--color-primary)" }} />
+						<div
+							className="absolute -top-10 -right-10 w-40 h-40 rounded-full opacity-10"
+							style={{ background: "var(--color-primary)" }}
+						/>
 						<div className="relative shrink-0 flex flex-col items-center gap-3">
-							<div className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]" style={{ background: "var(--color-primary)" }} />
-							<Image src={avatarFull} alt="" width={120} height={160} className="object-contain drop-shadow-xl relative" unoptimized priority />
+							<div
+								className="absolute -inset-3 rounded-full opacity-[0.15] blur-[40px]"
+								style={{ background: "var(--color-primary)" }}
+							/>
+							<Image
+								src={avatarFull}
+								alt=""
+								width={120}
+								height={160}
+								className="object-contain drop-shadow-xl relative"
+								unoptimized
+								priority
+							/>
 							<Link
 								href="/client"
 								className="btn-shine flex items-center justify-center gap-1.5 rounded-xl border py-2 px-4 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
 								style={{
 									background: "var(--color-primary)",
 									color: "var(--color-primary-foreground)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+									boxShadow:
+										"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 								}}
 							>
-								<Image src="/assets/images/EnterHubbly.png" alt="" width={16} height={16} unoptimized />
+								<Image
+									src="/assets/images/EnterHubbly.png"
+									alt=""
+									width={16}
+									height={16}
+									unoptimized
+								/>
 								Enter {hotelName}
 							</Link>
 						</div>
@@ -267,25 +306,39 @@ export default async function MePage({
 							<div
 								className="inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-bold uppercase tracking-wider mb-3 border"
 								style={{
-									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
-									background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									background:
+										"color-mix(in srgb, var(--color-primary) 10%, transparent)",
 									color: "var(--color-primary-readable, var(--color-primary))",
 								}}
 							>
 								Rank {user.rank}
 							</div>
-							<h1 className="text-2xl md:text-3xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
+							<h1
+								className="text-2xl md:text-3xl font-black tracking-tight"
+								style={{ color: "var(--color-text-readable)" }}
+							>
 								{user.username}
 							</h1>
-							<p className="text-sm mt-1" style={{ color: "var(--color-text-muted)" }}>
+							<p
+								className="text-sm mt-1"
+								style={{ color: "var(--color-text-muted)" }}
+							>
 								{user.motto || "No motto"}
 							</p>
 							<div className="flex flex-wrap gap-x-6 gap-y-1 mt-4 text-xs">
 								<span style={{ color: "var(--color-text-muted)" }}>
-									Registered: <strong style={{ color: "var(--color-text-readable)" }}>{registered}</strong>
+									Registered:{" "}
+									<strong style={{ color: "var(--color-text-readable)" }}>
+										{registered}
+									</strong>
 								</span>
 								<span style={{ color: "var(--color-text-muted)" }}>
-									Last online: <strong style={{ color: "var(--color-text-readable)" }}>{lastOnlineDate}</strong>
+									Last online:{" "}
+									<strong style={{ color: "var(--color-text-readable)" }}>
+										{lastOnlineDate}
+									</strong>
 								</span>
 							</div>
 						</div>
@@ -294,8 +347,21 @@ export default async function MePage({
 
 				{alertRaw ? (
 					<Reveal delay={0.05}>
-						<div className="rounded-2xl border px-6 py-4 text-center" style={{ background: "color-mix(in srgb, var(--color-accent) 12%, transparent)", borderColor: "color-mix(in srgb, var(--color-accent) 25%, transparent)" }}>
-							<p className="text-sm font-bold" style={{ color: "var(--color-accent)" }}>{alertRaw}</p>
+						<div
+							className="rounded-2xl border px-6 py-4 text-center"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-accent) 12%, transparent)",
+								borderColor:
+									"color-mix(in srgb, var(--color-accent) 25%, transparent)",
+							}}
+						>
+							<p
+								className="text-sm font-bold"
+								style={{ color: "var(--color-accent)" }}
+							>
+								{alertRaw}
+							</p>
 						</div>
 					</Reveal>
 				) : null}
@@ -305,8 +371,14 @@ export default async function MePage({
 						{[
 							{ value: user.credits.toLocaleString(), label: "Credits" },
 							{ value: `Rank ${user.rank}`, label: "Hotel rank" },
-							{ value: (userSettings?.achievementScore ?? 0).toLocaleString(), label: "Achievement score" },
-							{ value: (userSettings?.respectsReceived ?? 0).toLocaleString(), label: "Respects" },
+							{
+								value: (userSettings?.achievementScore ?? 0).toLocaleString(),
+								label: "Achievement score",
+							},
+							{
+								value: (userSettings?.respectsReceived ?? 0).toLocaleString(),
+								label: "Respects",
+							},
 							{ value: friendCount.toLocaleString(), label: "Friends" },
 							{ value: lastLoginDate, label: "Last login" },
 						].map((s) => (
@@ -315,13 +387,20 @@ export default async function MePage({
 								className="relative rounded-2xl border p-5 text-center transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
 								style={{
 									background: "var(--color-surface)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 								}}
 							>
-								<div className="text-xl md:text-2xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
+								<div
+									className="text-xl md:text-2xl font-black tracking-tight mb-0.5"
+									style={{ color: "var(--color-primary)" }}
+								>
 									{s.value}
 								</div>
-								<div className="text-[11px] font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
+								<div
+									className="text-[11px] font-bold uppercase tracking-widest"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{s.label}
 								</div>
 							</div>
@@ -330,19 +409,47 @@ export default async function MePage({
 				</Reveal>
 
 				<Reveal delay={0.15}>
-					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+					<div
+						className="rounded-2xl border p-5"
+						style={{
+							background: "var(--color-surface)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+						}}
+					>
 						<div className="flex items-center justify-between mb-4">
 							<div>
-								<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Online friends</h2>
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-									{onlineFriends.length === 0 ? "None of your friends are online right now" : `${onlineFriends.length} of your ${friends.length} friends online`}
+								<h2
+									className="text-lg font-black tracking-tight"
+									style={{ color: "var(--color-text-readable)" }}
+								>
+									Online friends
+								</h2>
+								<p
+									className="text-xs mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{onlineFriends.length === 0
+										? "None of your friends are online right now"
+										: `${onlineFriends.length} of your ${friends.length} friends online`}
 								</p>
 							</div>
-							<Link href="/friends" className="text-xs font-bold hover:underline shrink-0" style={{ color: "var(--color-primary)" }}>View all</Link>
+							<Link
+								href="/friends"
+								className="text-xs font-bold hover:underline shrink-0"
+								style={{ color: "var(--color-primary)" }}
+							>
+								View all
+							</Link>
 						</div>
 						{onlineFriends.length === 0 ? (
 							<div className="text-center py-6">
-								<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>No friends online right now. Check back later!</p>
+								<p
+									className="text-sm"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									No friends online right now. Check back later!
+								</p>
 							</div>
 						) : (
 							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
@@ -351,14 +458,45 @@ export default async function MePage({
 										key={friend.id}
 										href={`/u/${friend.username}`}
 										className="flex items-center gap-3 p-3 rounded-xl transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
-										style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)", textDecoration: "none" }}
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											textDecoration: "none",
+										}}
 									>
-										<Image src={avatarImageUrl(imager, friend.look, { size: "s", headOnly: true })} alt="" width={40} height={50} className="rounded-lg shrink-0" unoptimized />
+										<Image
+											src={avatarImageUrl(imager, friend.look, {
+												size: "s",
+												headOnly: true,
+											})}
+											alt=""
+											width={40}
+											height={50}
+											className="rounded-lg shrink-0"
+											unoptimized
+										/>
 										<div className="min-w-0">
-											<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>{friend.username}</p>
-											<p className="text-[10px] font-semibold truncate mt-0.5" style={{ color: "var(--color-text-muted)" }}>{friend.motto || "No motto"}</p>
-											<span className="inline-flex items-center gap-1 text-[10px] font-bold mt-1" style={{ color: "var(--color-success)" }}>
-												<span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--color-success)" }} /> Online
+											<p
+												className="text-sm font-extrabold truncate"
+												style={{ color: "var(--color-text-readable)" }}
+											>
+												{friend.username}
+											</p>
+											<p
+												className="text-[10px] font-semibold truncate mt-0.5"
+												style={{ color: "var(--color-text-muted)" }}
+											>
+												{friend.motto || "No motto"}
+											</p>
+											<span
+												className="inline-flex items-center gap-1 text-[10px] font-bold mt-1"
+												style={{ color: "var(--color-success)" }}
+											>
+												<span
+													className="w-1.5 h-1.5 rounded-full"
+													style={{ background: "var(--color-success)" }}
+												/>{" "}
+												Online
 											</span>
 										</div>
 									</Link>
@@ -369,41 +507,92 @@ export default async function MePage({
 				</Reveal>
 
 				<Reveal delay={0.2}>
-					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+					<div
+						className="rounded-2xl border p-5"
+						style={{
+							background: "var(--color-surface)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+						}}
+					>
 						<div className="mb-4">
-							<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Refer a friend ({referralTotal}/{needed})</h2>
-							<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Refer new users and earn in-game rewards</p>
+							<h2
+								className="text-lg font-black tracking-tight"
+								style={{ color: "var(--color-text-readable)" }}
+							>
+								Refer a friend ({referralTotal}/{needed})
+							</h2>
+							<p
+								className="text-xs mt-0.5"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								Refer new users and earn in-game rewards
+							</p>
 						</div>
 						<div className="flex flex-col gap-4">
-							<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+							<p
+								className="text-sm"
+								style={{ color: "var(--color-text-muted)" }}
+							>
 								{rewardAmount > 0
 									? `For every ${needed} users who register through your referral link you can claim a reward of ${rewardAmount.toLocaleString()} ${rewardCurrency}!`
 									: `Invite ${needed} users through your referral link to claim a reward!`}
 							</p>
 							<div role="note" style={feedbackStyle("warning")}>
-								Boosting referrals by making your own accounts will lead to removal of all progress, currency, inventory and a potential ban.
+								Boosting referrals by making your own accounts will lead to
+								removal of all progress, currency, inventory and a potential
+								ban.
 							</div>
 							<div>
-								<label htmlFor="referral-link" className="text-xs font-bold mb-1.5 block" style={{ color: "var(--color-text-muted)" }}>Your referral link</label>
+								<label
+									htmlFor="referral-link"
+									className="text-xs font-bold mb-1.5 block"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									Your referral link
+								</label>
 								<div className="flex gap-2 flex-wrap">
-									<input id="referral-link" type="text" readOnly defaultValue={referralLink}
+									<input
+										id="referral-link"
+										type="text"
+										readOnly
+										defaultValue={referralLink}
 										className="input-glow flex-1 min-w-0 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
-										style={{ backgroundColor: "var(--color-background)", color: "var(--color-text-readable, var(--color-text))", borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)" }}
+										style={{
+											backgroundColor: "var(--color-background)",
+											color: "var(--color-text-readable, var(--color-text))",
+											borderColor:
+												"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+										}}
 									/>
 									<CopyReferralButton value={referralLink} />
 								</div>
 							</div>
 							{canClaim ? (
 								<form action={claimReferral}>
-									<button type="submit" className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
-										style={{ background: "var(--color-primary)", color: "var(--color-primary-foreground)", boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)" }}
+									<button
+										type="submit"
+										className="btn-shine w-full rounded-xl font-extrabold text-sm py-3.5 transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+										style={{
+											background: "var(--color-primary)",
+											color: "var(--color-primary-foreground)",
+											boxShadow:
+												"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+										}}
 									>
 										Claim your referral reward!
 									</button>
 								</form>
 							) : (
-								<button type="button" disabled className="w-full rounded-xl font-extrabold text-sm py-3.5 opacity-60 cursor-not-allowed"
-									style={{ background: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)", color: "var(--color-text-muted)" }}
+								<button
+									type="button"
+									disabled
+									className="w-full rounded-xl font-extrabold text-sm py-3.5 opacity-60 cursor-not-allowed"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-text-muted) 15%, transparent)",
+										color: "var(--color-text-muted)",
+									}}
 								>
 									{`Refer ${remaining} more ${remaining === 1 ? "user" : "users"} to unlock your reward`}
 								</button>
@@ -414,22 +603,62 @@ export default async function MePage({
 
 				{recentRooms.length > 0 && (
 					<Reveal delay={0.25}>
-						<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+						<div
+							className="rounded-2xl border p-5"
+							style={{
+								background: "var(--color-surface)",
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							}}
+						>
 							<div className="flex items-center justify-between mb-4">
 								<div>
-									<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Recent rooms</h2>
-									<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Newest rooms in the hotel</p>
+									<h2
+										className="text-lg font-black tracking-tight"
+										style={{ color: "var(--color-text-readable)" }}
+									>
+										Recent rooms
+									</h2>
+									<p
+										className="text-xs mt-0.5"
+										style={{ color: "var(--color-text-muted)" }}
+									>
+										Newest rooms in the hotel
+									</p>
 								</div>
-								<Link href="/community" className="text-xs font-bold hover:underline shrink-0" style={{ color: "var(--color-primary)" }}>View all</Link>
+								<Link
+									href="/community"
+									className="text-xs font-bold hover:underline shrink-0"
+									style={{ color: "var(--color-primary)" }}
+								>
+									View all
+								</Link>
 							</div>
 							<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
 								{recentRooms.map((room) => (
-									<Link key={room.id} href={`/room/${room.id}`}
+									<Link
+										key={room.id}
+										href={`/room/${room.id}`}
 										className="block rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
-										style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)", borderColor: "color-mix(in srgb, var(--color-primary) 10%, transparent)" }}
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											borderColor:
+												"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+										}}
 									>
-										<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>{room.name}</p>
-										<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>{room.ownerName} &middot; {room.users}/{room.usersMax}</p>
+										<p
+											className="text-sm font-extrabold truncate"
+											style={{ color: "var(--color-text-readable)" }}
+										>
+											{room.name}
+										</p>
+										<p
+											className="text-[10px] font-semibold mt-0.5"
+											style={{ color: "var(--color-text-muted)" }}
+										>
+											{room.ownerName} &middot; {room.users}/{room.usersMax}
+										</p>
 									</Link>
 								))}
 							</div>
@@ -439,14 +668,39 @@ export default async function MePage({
 
 				{badges.length > 0 && (
 					<Reveal delay={0.3}>
-						<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
+						<div
+							className="rounded-2xl border p-5"
+							style={{
+								background: "var(--color-surface)",
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							}}
+						>
 							<div className="mb-4">
-								<h2 className="text-lg font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>Badges</h2>
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped</p>
+								<h2
+									className="text-lg font-black tracking-tight"
+									style={{ color: "var(--color-text-readable)" }}
+								>
+									Badges
+								</h2>
+								<p
+									className="text-xs mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped
+								</p>
 							</div>
 							<div className="flex flex-wrap gap-2">
 								{badges.map((badge) => (
-									<Image key={badge.badgeCode} src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`} alt={badge.badgeCode} width={40} height={40} className="rounded-md transition-transform hover:scale-110" unoptimized />
+									<Image
+										key={badge.badgeCode}
+										src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`}
+										alt={badge.badgeCode}
+										width={40}
+										height={40}
+										className="rounded-md transition-transform hover:scale-110"
+										unoptimized
+									/>
 								))}
 							</div>
 						</div>
@@ -454,8 +708,20 @@ export default async function MePage({
 				)}
 
 				<Reveal delay={0.35}>
-					<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-primary) 12%, transparent)" }}>
-						<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>Quick links</h2>
+					<div
+						className="rounded-2xl border p-5"
+						style={{
+							background: "var(--color-surface)",
+							borderColor:
+								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+						}}
+					>
+						<h2
+							className="text-lg font-black tracking-tight mb-4"
+							style={{ color: "var(--color-text-readable)" }}
+						>
+							Quick links
+						</h2>
 						<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
 							{[
 								{ href: "/messages", label: "Messages", badge: unreadCount },
@@ -463,13 +729,27 @@ export default async function MePage({
 								{ href: "/settings", label: "Settings", badge: 0 },
 								{ href: "/shop", label: "Shop", badge: 0 },
 							].map((link) => (
-								<Link key={link.href} href={link.href}
+								<Link
+									key={link.href}
+									href={link.href}
 									className="relative flex items-center justify-center rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5 hover:shadow-md"
-									style={{ background: "color-mix(in srgb, var(--color-primary) 6%, transparent)", borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)", color: "var(--color-text-readable)" }}
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 6%, transparent)",
+										borderColor:
+											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+										color: "var(--color-text-readable)",
+									}}
 								>
 									{link.label}
 									{link.badge > 0 && (
-										<span className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none" style={{ background: "var(--color-danger)", color: "white" }}>
+										<span
+											className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none"
+											style={{
+												background: "var(--color-danger)",
+												color: "white",
+											}}
+										>
 											{link.badge > 99 ? "99+" : link.badge}
 										</span>
 									)}
@@ -486,11 +766,16 @@ export default async function MePage({
 				className="rounded-2xl border p-6 text-center"
 				style={{
 					background: "var(--color-surface)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					borderColor:
+						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 				}}
 			>
-				<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
-					We couldn&apos;t load your dashboard right now. Please try again shortly.
+				<p
+					className="text-sm font-bold"
+					style={{ color: "var(--color-text-muted)" }}
+				>
+					We couldn&apos;t load your dashboard right now. Please try again
+					shortly.
 				</p>
 			</div>
 		);

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

@@ -10,8 +10,8 @@ import {
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
-import { prisma } from "@/lib/prisma";
 import { formatDate } from "@/lib/format-date";
+import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 
 export const dynamic = "force-dynamic";

src/app/(site)/news/[slug]/page.tsx

@@ -16,7 +16,11 @@ import { sanitize } from "@/lib/sanitize";
 
 export const revalidate = 60;
 
-type SearchParams = Promise<{ comment?: string; reaction?: string; error?: string }>;
+type SearchParams = Promise<{
+	comment?: string;
+	reaction?: string;
+	error?: string;
+}>;
 
 function feedbackStyle(tone: "success" | "error"): CSSProperties {
 	const accent =
@@ -78,7 +82,6 @@ const REACTIONS: { key: string; emoji: string }[] = [
 	{ key: "wow", emoji: "😮" },
 ];
 
-
 export default async function ArticlePage({
 	params,
 	searchParams,
@@ -204,9 +207,7 @@ export default async function ArticlePage({
 				icon="📰"
 				title={article.title}
 				subtitle={
-					article.createdAt
-						? formatDate(article.createdAt, "date")
-						: undefined
+					article.createdAt ? formatDate(article.createdAt, "date") : undefined
 				}
 				action={
 					<Link className="btn btn-outline" href="/news">
@@ -222,8 +223,11 @@ export default async function ArticlePage({
 						style={{ width: "100%", borderRadius: 10, margin: "0 0 1rem" }}
 					/>
 				) : null}
-			{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
-			<SanitizedHtml html={sanitize(article.fullStory)} className="article-body" />
+				{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
+				<SanitizedHtml
+					html={sanitize(article.fullStory)}
+					className="article-body"
+				/>
 			</ContentCard>
 
 			{/* ── Reactions ─────────────────────────────────────────── */}

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

@@ -1,16 +1,15 @@
 import Image from "next/image";
-import { formatDate } from "@/lib/format-date";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { excerpt } from "@/lib/format";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;
 
 export const metadata = { title: "News" };
 
-
 export default async function NewsPage() {
 	const t = await getTranslations("pages.news");
 

src/app/(site)/page.tsx

@@ -1,24 +1,24 @@
+import { headers } from "next/headers";
 import Image from "next/image";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import { headers } from "next/headers";
 import { getTranslations } from "next-intl/server";
+import { AmbientOrbs } from "@/components/ambient-orbs";
+import { AnimatedCounter } from "@/components/animated-counter";
+import { HomeLoginForm } from "@/components/auth/home-login-form";
+import { Clock } from "@/components/clock";
+import { LanguageSwitcher } from "@/components/language-switcher";
+import { Reveal } from "@/components/motion-reveal";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { TypewriterText } from "@/components/typewriter-text";
+import { auth } from "@/lib/auth";
 import { cached } from "@/lib/cache";
 import { avatarImageUrl } from "@/lib/format";
 import { formatDate } from "@/lib/format-date";
-import { prisma } from "@/lib/prisma";
 import { resolveHotelName } from "@/lib/hotel-name";
-import { siteSettings } from "@/lib/services/site-settings";
+import { prisma } from "@/lib/prisma";
 import { captchaConfig } from "@/lib/services/captcha";
-import { auth } from "@/lib/auth";
-import { ThemeSwitcher } from "@/components/theme-switcher";
-import { LanguageSwitcher } from "@/components/language-switcher";
-import { HomeLoginForm } from "@/components/auth/home-login-form";
-import { Reveal } from "@/components/motion-reveal";
-import { Clock } from "@/components/clock";
-import { TypewriterText } from "@/components/typewriter-text";
-import { AnimatedCounter } from "@/components/animated-counter";
-import { AmbientOrbs } from "@/components/ambient-orbs";
+import { siteSettings } from "@/lib/services/site-settings";
 
 export const revalidate = 120;
 
@@ -33,38 +33,54 @@ async function getHotelData() {
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 
-	const [online, users, rooms, articles, recentUsers, recentPhotos, latestUsers] =
-		await Promise.all([
-			cached("online_count", 10_000, () =>
-				prisma.user.count({ where: { online: "1" } }),
-			).catch(() => 0),
-			cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0),
-			cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0),
-			prisma.websiteArticles
-				.findMany({ orderBy: { createdAt: "desc" }, take: 5 })
-				.catch(() => []),
-			prisma.user
-				.findMany({
-					where: { online: "1" },
-					select: { username: true, look: true },
-					take: 30,
-				})
-				.catch(() => []),
-			prisma.cameraWeb
-				.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
-				.catch(() => []),
-			prisma.user
-				.findMany({
-					orderBy: { accountCreated: "desc" },
-					select: { username: true, look: true },
-					take: 8,
-				})
-				.catch(() => []),
-		]);
+	const [
+		online,
+		users,
+		rooms,
+		articles,
+		recentUsers,
+		recentPhotos,
+		latestUsers,
+	] = await Promise.all([
+		cached("online_count", 10_000, () =>
+			prisma.user.count({ where: { online: "1" } }),
+		).catch(() => 0),
+		cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0),
+		cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0),
+		prisma.websiteArticles
+			.findMany({ orderBy: { createdAt: "desc" }, take: 5 })
+			.catch(() => []),
+		prisma.user
+			.findMany({
+				where: { online: "1" },
+				select: { username: true, look: true },
+				take: 30,
+			})
+			.catch(() => []),
+		prisma.cameraWeb
+			.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
+			.catch(() => []),
+		prisma.user
+			.findMany({
+				orderBy: { accountCreated: "desc" },
+				select: { username: true, look: true },
+				take: 8,
+			})
+			.catch(() => []),
+	]);
 
-	const discordUrl = await siteSettings.get("radio_social_discord", "");
-
-	return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl, logo };
+	return {
+		hotelName,
+		imager,
+		online,
+		users,
+		rooms,
+		articles,
+		recentUsers,
+		recentPhotos,
+		latestUsers,
+		logo,
+	};
 }
 
 export default async function Home() {
@@ -73,40 +89,88 @@ export default async function Home() {
 
 	const tp = await getTranslations("pages.home");
 	const th = await getTranslations("header");
-	const { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl, logo } = await getHotelData();
+	const {
+		hotelName,
+		imager,
+		online,
+		users,
+		rooms,
+		articles,
+		recentUsers,
+		recentPhotos,
+		latestUsers,
+		logo,
+	} = await getHotelData();
 
 	const captcha = await captchaConfig();
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
 
 	return (
 		<div className="flex flex-col gap-10 pb-14">
-
 			{/* ── Top Bar ── */}
 			<Reveal>
-				<div className="relative flex items-center justify-between rounded-xl border px-5 py-3" style={{
-					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
-					backdropFilter: "blur(14px)",
-					WebkitBackdropFilter: "blur(14px)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-				}}>
+				<div
+					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
+					style={{
+						background:
+							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
+						backdropFilter: "blur(14px)",
+						WebkitBackdropFilter: "blur(14px)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				>
 					<div className="flex items-center gap-3">
 						{logo ? (
-							<Image src={logo} alt={hotelName} width={100} height={28} className="shrink-0 object-contain" unoptimized style={{ maxHeight: 28, width: "auto", height: "auto" }} />
+							<Image
+								src={logo}
+								alt={hotelName}
+								width={100}
+								height={28}
+								className="shrink-0 object-contain"
+								unoptimized
+								style={{ maxHeight: 28, width: "auto", height: "auto" }}
+							/>
 						) : (
-							<Image src="/assets/images/icons/lighthouse.png" alt={hotelName} width={28} height={28} className="shrink-0" unoptimized />
+							<Image
+								src="/assets/images/icons/lighthouse.png"
+								alt={hotelName}
+								width={28}
+								height={28}
+								className="shrink-0"
+								unoptimized
+							/>
 						)}
-						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
+						<span
+							className="text-sm font-extrabold uppercase tracking-wide"
+							style={{ color: "var(--color-text-readable)" }}
+						>
 							{hotelName}
 						</span>
 					</div>
-					<div className="flex items-center gap-1.5 rounded-lg px-2 py-1" style={{
-						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
-					}}>
-
+					<div
+						className="flex items-center gap-1.5 rounded-lg px-2 py-1"
+						style={{
+							background:
+								"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+						}}
+					>
 						<LanguageSwitcher />
-						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<Clock />
-						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<ThemeSwitcher />
 					</div>
 				</div>
@@ -119,23 +183,30 @@ export default async function Home() {
 					style={{
 						background: `url(/assets/images/next_header.jpg) center/cover no-repeat`,
 						backgroundPosition: "center 20%",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
 					<div
 						className="absolute inset-0"
 						style={{
-							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 90%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 50%, color-mix(in srgb, var(--color-surface) 10%, transparent) 100%)",
+							background:
+								"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 90%, transparent) 0%, color-mix(in srgb, var(--color-surface) 35%, transparent) 50%, color-mix(in srgb, var(--color-surface) 10%, transparent) 100%)",
 						}}
 					/>
 					<AmbientOrbs />
-					<div className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14" style={{ zIndex: 2 }}>
+					<div
+						className="relative flex flex-col md:flex-row items-center gap-8 px-6 py-10 md:px-10 md:py-14"
+						style={{ zIndex: 2 }}
+					>
 						<div className="flex-1 text-center md:text-left">
 							<div
 								className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full text-xs font-bold uppercase tracking-widest mb-5 border backdrop-blur-sm"
 								style={{
-									background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+									background:
+										"color-mix(in srgb, var(--color-primary) 12%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 20%, transparent)",
 									color: "var(--color-primary-readable, var(--color-primary))",
 								}}
 							>
@@ -147,7 +218,10 @@ export default async function Home() {
 							</div>
 							<h1
 								className="text-4xl md:text-5xl lg:text-6xl font-black leading-[1.05] tracking-tight mb-3"
-								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
+								style={{
+									color: "var(--color-text-readable)",
+									fontFamily: "var(--font-nunito)",
+								}}
 							>
 								<TypewriterText text={tp("welcome", { hotelName })} />
 							</h1>
@@ -164,19 +238,28 @@ export default async function Home() {
 									style={{
 										background: "var(--color-primary)",
 										color: "var(--color-primary-foreground)",
-										boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+										boxShadow:
+											"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 									}}
 								>
-									<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+									<Image
+										src="/assets/images/EnterHubbly.png"
+										alt=""
+										width={20}
+										height={20}
+										unoptimized
+									/>
 									{tp("register")}
 								</Link>
 								<Link
 									href="/login"
 									className="inline-flex items-center gap-2 font-bold text-sm px-7 py-3.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
 									style={{
-										borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+										borderColor:
+											"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
 										color: "var(--color-text-readable)",
-										background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+										background:
+											"color-mix(in srgb, var(--color-surface) 50%, transparent)",
 									}}
 								>
 									{th("login")}
@@ -206,18 +289,32 @@ export default async function Home() {
 			<Reveal>
 				<div className="grid grid-cols-3 gap-4 stagger-children">
 					{[
-						{ value: online, label: tp("statsOnline"), icon: "/assets/images/icons/online-friends.png" },
-						{ value: users, label: tp("statsCitizens"), icon: "/assets/images/icons/friends.png" },
-						{ value: rooms, label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
+						{
+							value: online,
+							label: tp("statsOnline"),
+							icon: "/assets/images/icons/online-friends.png",
+						},
+						{
+							value: users,
+							label: tp("statsCitizens"),
+							icon: "/assets/images/icons/friends.png",
+						},
+						{
+							value: rooms,
+							label: tp("statsRooms"),
+							icon: "/assets/images/icons/catalog.png",
+						},
 					].map((s) => (
 						<div
 							key={s.label}
 							className="relative overflow-hidden rounded-xl border p-5 text-center transition-all duration-300 hover:-translate-y-1 hover:shadow-xl card-premium"
 							style={{
-								background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+								background:
+									"color-mix(in srgb, var(--color-surface) 70%, transparent)",
 								backdropFilter: "blur(8px)",
 								WebkitBackdropFilter: "blur(8px)",
-								borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 							}}
 						>
 							<div
@@ -227,14 +324,29 @@ export default async function Home() {
 							<div className="relative">
 								<div
 									className="w-10 h-10 rounded-xl flex items-center justify-center mx-auto mb-2.5 animate-pulse-glow"
-									style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+									}}
 								>
-									<Image src={s.icon} alt="" width={24} height={24} unoptimized />
+									<Image
+										src={s.icon}
+										alt=""
+										width={24}
+										height={24}
+										unoptimized
+									/>
 								</div>
-								<div className="text-3xl md:text-4xl font-black tracking-tight mb-0.5" style={{ color: "var(--color-primary)" }}>
+								<div
+									className="text-3xl md:text-4xl font-black tracking-tight mb-0.5"
+									style={{ color: "var(--color-primary)" }}
+								>
 									<AnimatedCounter value={s.value} />
 								</div>
-								<div className="text-xs font-bold uppercase tracking-widest" style={{ color: "var(--color-text-muted)" }}>
+								<div
+									className="text-xs font-bold uppercase tracking-widest"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{s.label}
 								</div>
 							</div>
@@ -245,59 +357,122 @@ export default async function Home() {
 
 			{/* ── Login + News ── */}
 			<div className="flex flex-col gap-4 md:flex-row">
-
 				{/* Left: Login & Register */}
 				<Reveal className="flex w-full flex-col gap-4 md:w-1/3 md:flex-shrink-0">
 					<div
 						className="overflow-hidden rounded-xl border"
 						style={{
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 						}}
 					>
 						<div
 							className="flex items-center gap-2.5 px-4 py-3"
 							style={{
-								background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+								background:
+									"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
 							}}
 						>
-							<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-							<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+							<Image
+								src="/assets/images/icons/navigation/me.png"
+								alt=""
+								width={18}
+								height={18}
+								unoptimized
+							/>
+							<h2
+								className="text-sm font-bold text-white"
+								style={{ fontFamily: "var(--font-nunito)" }}
+							>
 								Login
 							</h2>
 						</div>
-						<div className="p-3" style={{ backgroundColor: "var(--color-surface)" }}>
-							<HomeLoginForm captcha={{ provider: captcha.provider, siteKey: captcha.siteKey || undefined, field: captcha.field || undefined }} nonce={nonce} />
+						<div
+							className="p-3"
+							style={{ backgroundColor: "var(--color-surface)" }}
+						>
+							<HomeLoginForm
+								captcha={{
+									provider: captcha.provider,
+									siteKey: captcha.siteKey || undefined,
+									field: captcha.field || undefined,
+								}}
+								nonce={nonce}
+							/>
 						</div>
 					</div>
 
 					<Link href="/register" className="relative block group">
-						<div className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
-							<Image src="/assets/images/EnterHubbly.png" alt="Register" width={300} height={100} className="block w-full" unoptimized />
+						<div
+							className="overflow-hidden rounded-xl border transition-all duration-200 group-hover:shadow-lg"
+							style={{
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						>
+							<Image
+								src="/assets/images/EnterHubbly.png"
+								alt="Register"
+								width={300}
+								height={100}
+								className="block w-full"
+								unoptimized
+							/>
 						</div>
-						<span className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white" style={{ marginLeft: "18px", fontFamily: "var(--font-nunito)", textShadow: "0 2px 8px rgba(0,0,0,0.6)" }}>
+						<span
+							className="pointer-events-none absolute inset-0 flex items-center text-2xl md:text-3xl font-extrabold text-white"
+							style={{
+								marginLeft: "18px",
+								fontFamily: "var(--font-nunito)",
+								textShadow: "0 2px 8px rgba(0,0,0,0.6)",
+							}}
+						>
 							{tp("register")}
 						</span>
 					</Link>
 
 					{latestUsers.length > 0 && (
-						<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+						<div
+							className="overflow-hidden rounded-xl border"
+							style={{
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+								backgroundColor: "var(--color-surface)",
+							}}
+						>
 							<div
 								className="flex items-center gap-2.5 px-4 py-3"
 								style={{
-									background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+									background:
+										"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
 								}}
 							>
-								<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+								<Image
+									src="/assets/images/icons/navigation/goody.png"
+									alt=""
+									width={18}
+									height={18}
+									unoptimized
+								/>
+								<h2
+									className="text-sm font-bold text-white"
+									style={{ fontFamily: "var(--font-nunito)" }}
+								>
 									{tp("latestUsers", { count: users.toLocaleString() })}
 								</h2>
 							</div>
 							<div className="grid grid-cols-4 gap-2 p-3">
 								{latestUsers.map((u) => (
-									<div key={u.username} className="flex flex-col items-center gap-1">
+									<div
+										key={u.username}
+										className="flex flex-col items-center gap-1"
+									>
 										<div className="relative overflow-visible">
 											<Image
-												src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 3 })}
+												src={avatarImageUrl(imager, u.look, {
+													headOnly: true,
+													direction: 3,
+												})}
 												alt={u.username}
 												width={64}
 												height={78}
@@ -305,7 +480,10 @@ export default async function Home() {
 												unoptimized
 											/>
 										</div>
-										<span className="text-[11px] font-bold truncate max-w-[64px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
+										<span
+											className="text-[11px] font-bold truncate max-w-[64px] text-center leading-tight"
+											style={{ color: "var(--color-text-readable)" }}
+										>
 											{u.username}
 										</span>
 									</div>
@@ -317,20 +495,40 @@ export default async function Home() {
 
 				{/* Right: News */}
 				<Reveal delay={0.15} className="flex w-full flex-col gap-4 md:w-2/3">
-					<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+					<div
+						className="overflow-hidden rounded-xl border"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							backgroundColor: "var(--color-surface)",
+						}}
+					>
 						<div
 							className="flex items-center justify-between px-4 py-3"
 							style={{
-								background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+								background:
+									"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
 							}}
 						>
 							<div className="flex items-center gap-2.5">
-								<Image src="/assets/images/icons/article.gif" alt="" width={18} height={18} unoptimized />
-								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+								<Image
+									src="/assets/images/icons/article.gif"
+									alt=""
+									width={18}
+									height={18}
+									unoptimized
+								/>
+								<h2
+									className="text-sm font-bold text-white"
+									style={{ fontFamily: "var(--font-nunito)" }}
+								>
 									{tp("latestNews")}
 								</h2>
 							</div>
-							<Link href="/news" className="text-xs font-bold text-white/80 hover:text-white hover:underline">
+							<Link
+								href="/news"
+								className="text-xs font-bold text-white/80 hover:text-white hover:underline"
+							>
 								{tp("allNews")}
 							</Link>
 						</div>
@@ -345,7 +543,8 @@ export default async function Home() {
 											style={{
 												height: "200px",
 												backgroundColor: "var(--color-background)",
-												border: "1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+												border:
+													"1px solid color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 											}}
 										>
 											<div className="relative h-full w-full overflow-hidden rounded-lg">
@@ -356,22 +555,26 @@ export default async function Home() {
 													className="rounded-lg object-cover transition-all duration-300 group-hover:scale-105"
 													unoptimized
 												/>
-												<div
-													className="absolute top-2.5 right-2.5 w-8 h-8 rounded-full flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300 opacity-0 group-hover:opacity-100 translate-x-1 group-hover:translate-x-0"
-												>
-													<span className="text-white text-sm font-bold">→</span>
+												<div className="absolute top-2.5 right-2.5 w-8 h-8 rounded-full flex items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-300 opacity-0 group-hover:opacity-100 translate-x-1 group-hover:translate-x-0">
+													<span className="text-white text-sm font-bold">
+														→
+													</span>
 												</div>
 												<div
 													className="absolute left-0 w-full p-2.5"
 													style={{
 														bottom: 0,
-														background: "linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)",
+														background:
+															"linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%)",
 													}}
 												>
 													<h3 className="truncate text-base font-bold text-white text-shadow-sm">
 														{a.title}
 													</h3>
-													<p className="text-[11px] font-semibold mt-0.5 opacity-80" style={{ color: "var(--color-text-muted)" }}>
+													<p
+														className="text-[11px] font-semibold mt-0.5 opacity-80"
+														style={{ color: "var(--color-text-muted)" }}
+													>
 														{formatDate(a.createdAt, "date", "")}
 													</p>
 												</div>
@@ -380,7 +583,10 @@ export default async function Home() {
 									))}
 								</div>
 							) : (
-								<p className="py-8 text-center text-sm" style={{ color: "var(--color-text-muted)" }}>
+								<p
+									className="py-8 text-center text-sm"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{tp("noArticles")}
 								</p>
 							)}
@@ -392,20 +598,40 @@ export default async function Home() {
 			{/* ── Online users ── */}
 			{recentUsers.length > 0 && (
 				<Reveal>
-					<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+					<div
+						className="overflow-hidden rounded-xl border"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							backgroundColor: "var(--color-surface)",
+						}}
+					>
 						<div
 							className="flex items-center justify-between px-4 py-3"
 							style={{
-								background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+								background:
+									"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
 							}}
 						>
 							<div className="flex items-center gap-2.5">
-								<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-								<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+								<Image
+									src="/assets/images/icons/navigation/goody.png"
+									alt=""
+									width={18}
+									height={18}
+									unoptimized
+								/>
+								<h3
+									className="text-sm font-bold text-white"
+									style={{ fontFamily: "var(--font-nunito)" }}
+								>
 									{tp("recentUsers")}
 								</h3>
 							</div>
-							<Link href="/community" className="text-xs font-bold text-white/80 hover:text-white hover:underline">
+							<Link
+								href="/community"
+								className="text-xs font-bold text-white/80 hover:text-white hover:underline"
+							>
 								{tp("allUsers")}
 							</Link>
 						</div>
@@ -415,17 +641,27 @@ export default async function Home() {
 									<div
 										key={u.username}
 										className="flex flex-col items-center gap-0.5 px-2 py-1.5 rounded-lg transition-all duration-200 hover:scale-110 hover:shadow-md"
-										style={{ background: "color-mix(in srgb, var(--color-primary) 5%, transparent)" }}
+										style={{
+											background:
+												"color-mix(in srgb, var(--color-primary) 5%, transparent)",
+										}}
 									>
 										<Image
-											src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
+											src={avatarImageUrl(imager, u.look, {
+												headOnly: true,
+												direction: 2,
+												size: "s",
+											})}
 											alt={u.username}
 											width={30}
 											height={36}
 											className="rounded-md"
 											unoptimized
 										/>
-										<span className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
+										<span
+											className="text-[9px] font-bold truncate max-w-[50px] text-center leading-tight"
+											style={{ color: "var(--color-text-readable)" }}
+										>
 											{u.username}
 										</span>
 									</div>
@@ -442,13 +678,23 @@ export default async function Home() {
 					className="relative overflow-hidden rounded-xl border text-center px-6 py-10"
 					style={{
 						background: `linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), color-mix(in srgb, var(--color-surface) 70%, transparent))`,
-						borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-primary) 15%, transparent)",
 					}}
 				>
-					<h2 className="text-2xl md:text-3xl font-black tracking-tight mb-2" style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}>
+					<h2
+						className="text-2xl md:text-3xl font-black tracking-tight mb-2"
+						style={{
+							color: "var(--color-text-readable)",
+							fontFamily: "var(--font-nunito)",
+						}}
+					>
 						{tp("joinNow", { hotelName })}
 					</h2>
-					<p className="text-sm mb-6 max-w-sm mx-auto" style={{ color: "var(--color-text-muted)" }}>
+					<p
+						className="text-sm mb-6 max-w-sm mx-auto"
+						style={{ color: "var(--color-text-muted)" }}
+					>
 						{tp("welcomeBody")}
 					</p>
 					<Link
@@ -457,10 +703,17 @@ export default async function Home() {
 						style={{
 							background: "var(--color-primary)",
 							color: "var(--color-primary-foreground)",
-							boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+							boxShadow:
+								"0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
 						}}
 					>
-						<Image src="/assets/images/EnterHubbly.png" alt="" width={20} height={20} unoptimized />
+						<Image
+							src="/assets/images/EnterHubbly.png"
+							alt=""
+							width={20}
+							height={20}
+							unoptimized
+						/>
 						{tp("register")}
 					</Link>
 				</div>
@@ -469,22 +722,47 @@ export default async function Home() {
 			{/* ── Recent photos ── */}
 			{recentPhotos.length > 0 && (
 				<Reveal>
-					<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)", backgroundColor: "var(--color-surface)" }}>
+					<div
+						className="overflow-hidden rounded-xl border"
+						style={{
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							backgroundColor: "var(--color-surface)",
+						}}
+					>
 						<div
 							className="flex items-center gap-2.5 px-4 py-3"
 							style={{
-								background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+								background:
+									"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
 							}}
 						>
-							<Image src="/assets/images/icons/camera.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+							<Image
+								src="/assets/images/icons/camera.png"
+								alt=""
+								width={18}
+								height={18}
+								unoptimized
+							/>
+							<h3
+								className="text-sm font-bold text-white"
+								style={{ fontFamily: "var(--font-nunito)" }}
+							>
 								{tp("recentPhotos")}
 							</h3>
 						</div>
 						<div className="p-4">
 							<div className="grid grid-cols-4 gap-2 max-w-sm mx-auto">
 								{recentPhotos.slice(0, 4).map((p) => (
-									<Link key={p.id} href="/photos" className="block rounded-lg overflow-hidden aspect-square border transition-all duration-200 hover:shadow-md" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)" }}>
+									<Link
+										key={p.id}
+										href="/photos"
+										className="block rounded-lg overflow-hidden aspect-square border transition-all duration-200 hover:shadow-md"
+										style={{
+											borderColor:
+												"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+										}}
+									>
 										<Image
 											src={p.url}
 											alt=""

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

@@ -3,8 +3,8 @@ import {
 	type LightboxPhoto,
 	PhotoLightbox,
 } from "@/components/public/photo-lightbox";
-import { formatDate } from "@/lib/format-date";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;

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

@@ -36,7 +36,11 @@ export default async function PollDetailPage({
 	}
 
 	const now = Date.now();
-	if (poll.startsAt && poll.startsAt.getTime() > now && poll.status === "active") {
+	if (
+		poll.startsAt &&
+		poll.startsAt.getTime() > now &&
+		poll.status === "active"
+	) {
 		// Not started yet — treat as unavailable for guests
 		notFound();
 	}
@@ -101,7 +105,11 @@ export default async function PollDetailPage({
 
 			{isOpen && !hasVoted ? (
 				session?.user ? (
-					<ContentCard icon="🗳️" title={t("voteTitle")} subtitle={t("voteSubtitle")}>
+					<ContentCard
+						icon="🗳️"
+						title={t("voteTitle")}
+						subtitle={t("voteSubtitle")}
+					>
 						<PollVoteForm
 							pollId={poll.id}
 							questions={poll.questions.map((q) => ({
@@ -156,7 +164,10 @@ export default async function PollDetailPage({
 							const counts = new Map<string, number>();
 							for (const opt of options) counts.set(opt, 0);
 							for (const vote of votes) {
-								for (const part of vote.split("\n").map((a) => a.trim()).filter(Boolean)) {
+								for (const part of vote
+									.split("\n")
+									.map((a) => a.trim())
+									.filter(Boolean)) {
 									counts.set(part, (counts.get(part) ?? 0) + 1);
 								}
 							}

src/app/(site)/polls/[id]/poll-vote-form.tsx

@@ -99,10 +99,16 @@ export function PollVoteForm({
 								value={answers[q.id] ?? ""}
 								onChange={(e) => setSingle(q.id, e.target.value)}
 								placeholder={t("textPlaceholder")}
-								style={{ width: "100%", marginTop: "0.35rem", resize: "vertical" }}
+								style={{
+									width: "100%",
+									marginTop: "0.35rem",
+									resize: "vertical",
+								}}
 							/>
 						) : q.type === "multiple" ? (
-							<div style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}>
+							<div
+								style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}
+							>
 								{options.map((opt) => (
 									<label
 										key={opt}
@@ -123,7 +129,9 @@ export function PollVoteForm({
 								))}
 							</div>
 						) : (
-							<div style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}>
+							<div
+								style={{ display: "grid", gap: "0.4rem", marginTop: "0.35rem" }}
+							>
 								{options.map((opt) => (
 									<label
 										key={opt}

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

@@ -64,7 +64,13 @@ export default async function PollsPage() {
 										{poll.title}
 									</h3>
 									{poll.description ? (
-										<p style={{ margin: 0, fontSize: "0.88rem", lineHeight: 1.5 }}>
+										<p
+											style={{
+												margin: 0,
+												fontSize: "0.88rem",
+												lineHeight: 1.5,
+											}}
+										>
 											{excerpt(poll.description, 120)}
 										</p>
 									) : null}

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

@@ -1,13 +1,12 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;
 
-
 export default async function RadioContestDetailPage({
 	params,
 }: {
@@ -61,9 +60,13 @@ export default async function RadioContestDetailPage({
 						<tr>
 							<th>Period</th>
 							<td>
-								{contest.startDate ? formatDate(contest.startDate, "datetime-seconds", "") : "—"}
+								{contest.startDate
+									? formatDate(contest.startDate, "datetime-seconds", "")
+									: "—"}
 								{" — "}
-								{contest.endDate ? formatDate(contest.endDate, "datetime-seconds", "") : "ongoing"}
+								{contest.endDate
+									? formatDate(contest.endDate, "datetime-seconds", "")
+									: "ongoing"}
 							</td>
 						</tr>
 						<tr>

src/app/(site)/radio/contests/page.tsx

@@ -1,12 +1,11 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;
 
-
 export default async function RadioContestsPage() {
 	const t = await getTranslations("pages.radioContests");
 

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

@@ -1,13 +1,12 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { notFound } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { ContentCard } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;
 
-
 export default async function RadioGiveawayDetailPage({
 	params,
 }: {
@@ -66,9 +65,13 @@ export default async function RadioGiveawayDetailPage({
 						<tr>
 							<th>Period</th>
 							<td>
-								{giveaway.startDate ? formatDate(giveaway.startDate, "datetime-seconds", "") : "—"}
+								{giveaway.startDate
+									? formatDate(giveaway.startDate, "datetime-seconds", "")
+									: "—"}
 								{" — "}
-								{giveaway.endDate ? formatDate(giveaway.endDate, "datetime-seconds", "") : "ongoing"}
+								{giveaway.endDate
+									? formatDate(giveaway.endDate, "datetime-seconds", "")
+									: "ongoing"}
 							</td>
 						</tr>
 						<tr>

src/app/(site)/radio/giveaways/page.tsx

@@ -1,12 +1,11 @@
 import Link from "next/link";
-import { formatDate } from "@/lib/format-date";
 import { getTranslations } from "next-intl/server";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const revalidate = 300;
 
-
 export default async function RadioGiveawaysPage() {
 	const t = await getTranslations("pages.radioGiveaways");
 

src/app/(site)/radio/requests/page.tsx

@@ -1,9 +1,9 @@
 import { getTranslations } from "next-intl/server";
 import type { CSSProperties } from "react";
-import { formatDate } from "@/lib/format-date";
 import { submitRequest } from "@/actions/radio-requests";
 import { ContentCard, EmptyState } from "@/components/public/ui";
 import { auth } from "@/lib/auth";
+import { formatDate } from "@/lib/format-date";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -179,7 +179,9 @@ export default async function RadioRequestsPage({
 											)}
 										</td>
 										<td className="muted">
-											{r.submittedAt ? formatDate(r.submittedAt, "datetime", "") : "—"}
+											{r.submittedAt
+												? formatDate(r.submittedAt, "datetime", "")
+												: "—"}
 										</td>
 										<td>{status}</td>
 									</tr>

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

@@ -3,21 +3,21 @@ import Image from "next/image";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { RegisterForm } from "@/components/auth/register-form";
-import { cached } from "@/lib/cache";
-import { avatarImageUrl } from "@/lib/format";
-import { prisma } from "@/lib/prisma";
-import { captchaConfig } from "@/lib/services/captcha";
-import { resolveHotelName } from "@/lib/hotel-name";
-import { siteSettings } from "@/lib/services/site-settings";
-import { ThemeSwitcher } from "@/components/theme-switcher";
+import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
 import { Reveal } from "@/components/motion-reveal";
-import { Clock } from "@/components/clock";
+import { ThemeSwitcher } from "@/components/theme-switcher";
+import { cached } from "@/lib/cache";
+import { avatarImageUrl } from "@/lib/format";
+import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
+import { captchaConfig } from "@/lib/services/captcha";
+import { siteSettings } from "@/lib/services/site-settings";
 
 export default async function RegisterPage() {
 	const th = await getTranslations("header");
 	const tpr = await getTranslations("pages.register");
-	const [hotelName, imagerRaw, cfg, discordUrl, logo] = await Promise.all([
+	const [hotelName, imagerRaw, cfg, logo] = await Promise.all([
 		resolveHotelName(),
 		siteSettings.get(
 			"habbo_imaging_url",
@@ -54,238 +54,343 @@ export default async function RegisterPage() {
 		<div className="flex flex-col gap-10 pb-14">
 			{/* ── Top Bar ── */}
 			<Reveal>
-				<div className="relative flex items-center justify-between rounded-xl border px-5 py-3" style={{
-					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
-					backdropFilter: "blur(14px)",
-					WebkitBackdropFilter: "blur(14px)",
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
-				}}>
+				<div
+					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
+					style={{
+						background:
+							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
+						backdropFilter: "blur(14px)",
+						WebkitBackdropFilter: "blur(14px)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+					}}
+				>
 					<div className="flex items-center gap-3">
 						{logo ? (
-							<Image src={logo} alt={hotelName} width={100} height={28} className="shrink-0 object-contain" unoptimized style={{ maxHeight: 28, width: "auto", height: "auto" }} />
+							<Image
+								src={logo}
+								alt={hotelName}
+								width={100}
+								height={28}
+								className="shrink-0 object-contain"
+								unoptimized
+								style={{ maxHeight: 28, width: "auto", height: "auto" }}
+							/>
 						) : (
-							<Image src="/assets/images/icons/lighthouse.png" alt={hotelName} width={28} height={28} className="shrink-0" unoptimized />
+							<Image
+								src="/assets/images/icons/lighthouse.png"
+								alt={hotelName}
+								width={28}
+								height={28}
+								className="shrink-0"
+								unoptimized
+							/>
 						)}
-						<span className="text-sm font-extrabold uppercase tracking-wide" style={{ color: "var(--color-text-readable)" }}>
+						<span
+							className="text-sm font-extrabold uppercase tracking-wide"
+							style={{ color: "var(--color-text-readable)" }}
+						>
 							{hotelName}
 						</span>
 					</div>
-					<div className="flex items-center gap-1.5 rounded-lg px-2 py-1" style={{
-						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
-					}}>
-
+					<div
+						className="flex items-center gap-1.5 rounded-lg px-2 py-1"
+						style={{
+							background:
+								"color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+						}}
+					>
 						<LanguageSwitcher />
-						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<Clock />
-						<div className="w-px h-5" style={{ background: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+						<div
+							className="w-px h-5"
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+							}}
+						/>
 						<ThemeSwitcher />
 					</div>
 				</div>
 			</Reveal>
 			<Reveal>
-			<div className="flex flex-col lg:flex-row gap-10 stagger-children">
-			{/* Left panel */}
-			<div className="lg:w-80 shrink-0 space-y-4">
-				<div
-					className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
-					style={{
-						borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-						background: `url(/assets/images/background.png) center/cover no-repeat`,
-					}}
-				>
-					<div
-						className="absolute inset-0"
-						style={{
-							background: "linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
-						}}
-					/>
-					<div className="relative">
-					<Image
-						src="/assets/images/FrankwithBag.gif"
-						alt="Frank"
-						width={130}
-						height={170}
-						className="object-contain mx-auto drop-shadow-xl animate-float"
-						unoptimized
-						priority
-					/>
-					<div
-						className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
-						style={{
-							borderColor:
-								"color-mix(in srgb, var(--color-primary) 18%, transparent)",
-							background:
-								"color-mix(in srgb, var(--color-primary) 10%, transparent)",
-							color: "var(--color-primary-readable, var(--color-primary))",
-						}}
-					>
-						<span className="w-2 h-2 rounded-full bg-green-500" />
-						{tpr("usersOnline", { count: online })}
-					</div>
-					<h1
-						className="text-xl font-black"
-						style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
-					>
-						{tpr("title")} — {hotelName}
-					</h1>
-					<p
-						className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{th("tagline")}
-					</p>
-				</div>
-			</div>
-
-				{recentUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
-					>
+				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
+					{/* Left panel */}
+					<div className="lg:w-80 shrink-0 space-y-4">
 						<div
-							className="flex items-center gap-2.5 px-4 py-3"
+							className="relative overflow-hidden rounded-2xl border p-6 text-center card-premium"
 							style={{
-								background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+								borderColor:
+									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
+								background: `url(/assets/images/background.png) center/cover no-repeat`,
 							}}
 						>
-							<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
-								{tpr("whoIsOnline")}
-							</h3>
-						</div>
-						<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
-						<div className="grid grid-cols-4 gap-1.5">
-							{recentUsers.map((u) => (
+							<div
+								className="absolute inset-0"
+								style={{
+									background:
+										"linear-gradient(135deg, color-mix(in srgb, var(--color-surface) 85%, transparent) 0%, color-mix(in srgb, var(--color-surface) 40%, transparent) 100%)",
+								}}
+							/>
+							<div className="relative">
+								<Image
+									src="/assets/images/FrankwithBag.gif"
+									alt="Frank"
+									width={130}
+									height={170}
+									className="object-contain mx-auto drop-shadow-xl animate-float"
+									unoptimized
+									priority
+								/>
 								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+									className="inline-flex items-center gap-2 px-3.5 py-1 rounded-full text-xs font-bold uppercase tracking-wider mt-4 mb-3 border"
+									style={{
+										borderColor:
+											"color-mix(in srgb, var(--color-primary) 18%, transparent)",
+										background:
+											"color-mix(in srgb, var(--color-primary) 10%, transparent)",
+										color:
+											"var(--color-primary-readable, var(--color-primary))",
+									}}
+								>
+									<span className="w-2 h-2 rounded-full bg-green-500" />
+									{tpr("usersOnline", { count: online })}
+								</div>
+								<h1
+									className="text-xl font-black"
+									style={{
+										color: "var(--color-text-readable)",
+										fontFamily: "var(--font-nunito)",
+									}}
+								>
+									{tpr("title")} — {hotelName}
+								</h1>
+								<p
+									className="text-xs mt-1 mx-auto max-w-[200px] leading-relaxed"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{th("tagline")}
+								</p>
+							</div>
+						</div>
+
+						{recentUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+								}}
+							>
+								<div
+									className="flex items-center gap-2.5 px-4 py-3"
 									style={{
 										background:
-											"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+											"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
 									}}
 								>
 									<Image
-										src={avatarImageUrl(imager, u.look, {
-											headOnly: true,
-											direction: 2,
-											size: "s",
-										})}
+										src="/assets/images/icons/navigation/goody.png"
 										alt=""
-										width={26}
-										height={32}
-										className="rounded-md"
+										width={18}
+										height={18}
 										unoptimized
 									/>
-									<span
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
+									<h3
+										className="text-sm font-bold text-white"
+										style={{ fontFamily: "var(--font-nunito)" }}
 									>
-										{u.username}
-									</span>
+										{tpr("whoIsOnline")}
+									</h3>
 								</div>
-							))}
-						</div>
-						</div>
-					</div>
-				)}
+								<div
+									className="p-4"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
+									}}
+								>
+									<div className="grid grid-cols-4 gap-1.5">
+										{recentUsers.map((u) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+														size: "s",
+													})}
+													alt=""
+													width={26}
+													height={32}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[8px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
 
-				{latestUsers.length > 0 && (
-					<div
-						className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
-					>
+						{latestUsers.length > 0 && (
+							<div
+								className="overflow-hidden rounded-xl border"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+								}}
+							>
+								<div
+									className="flex items-center gap-2.5 px-4 py-3"
+									style={{
+										background:
+											"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+									}}
+								>
+									<Image
+										src="/assets/images/icons/friends.png"
+										alt=""
+										width={18}
+										height={18}
+										unoptimized
+									/>
+									<h3
+										className="text-sm font-bold text-white"
+										style={{ fontFamily: "var(--font-nunito)" }}
+									>
+										Newest citizens
+									</h3>
+								</div>
+								<div
+									className="p-4"
+									style={{
+										background:
+											"color-mix(in srgb, var(--color-surface) 70%, transparent)",
+									}}
+								>
+									<div className="grid grid-cols-4 gap-1.5">
+										{latestUsers.map((u) => (
+											<div
+												key={u.username}
+												className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+												style={{
+													background:
+														"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+												}}
+											>
+												<Image
+													src={avatarImageUrl(imager, u.look, {
+														headOnly: true,
+														direction: 2,
+													})}
+													alt=""
+													width={52}
+													height={64}
+													className="rounded-md"
+													unoptimized
+												/>
+												<span
+													className="text-[10px] font-bold truncate w-full text-center leading-tight"
+													style={{ color: "var(--color-text-readable)" }}
+												>
+													{u.username}
+												</span>
+											</div>
+										))}
+									</div>
+								</div>
+							</div>
+						)}
+
+						<p
+							className="text-xs text-center"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							{tpr("alreadyHaveAccountPre")}{" "}
+							<Link
+								href="/login"
+								className="font-extrabold hover:underline"
+								style={{
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							>
+								{tpr("alreadyHaveAccountLink")}
+							</Link>
+						</p>
+					</div>
+
+					{/* Right: form */}
+					<div className="flex-1">
 						<div
-							className="flex items-center gap-2.5 px-4 py-3"
+							className="overflow-hidden rounded-xl border"
 							style={{
-								background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 							}}
 						>
-							<Image src="/assets/images/icons/friends.png" alt="" width={18} height={18} unoptimized />
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
-								Newest citizens
-							</h3>
-						</div>
-						<div className="p-4" style={{ background: "color-mix(in srgb, var(--color-surface) 70%, transparent)" }}>
-						<div className="grid grid-cols-4 gap-1.5">
-							{latestUsers.map((u) => (
-								<div
-									key={u.username}
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
-									style={{
-										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-									}}
+							<div
+								className="flex items-center gap-2.5 px-4 py-3"
+								style={{
+									background:
+										"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+								}}
+							>
+								<Image
+									src="/assets/images/icons/navigation/me.png"
+									alt=""
+									width={18}
+									height={18}
+									unoptimized
+								/>
+								<h2
+									className="text-sm font-bold text-white"
+									style={{ fontFamily: "var(--font-nunito)" }}
 								>
-									<Image
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2 })}
-										alt=""
-										width={52}
-										height={64}
-										className="rounded-md"
-										unoptimized
-									/>
-									<span
-										className="text-[10px] font-bold truncate w-full text-center leading-tight"
-										style={{ color: "var(--color-text-readable)" }}
-									>
-										{u.username}
-									</span>
-								</div>
-							))}
-						</div>
+									{tpr("title")}
+								</h2>
+							</div>
+							<div
+								className="p-6"
+								style={{ backgroundColor: "var(--color-surface)" }}
+							>
+								<p
+									className="text-sm mb-6"
+									style={{ color: "var(--color-text-muted)" }}
+								>
+									{tpr("subtitle")}
+								</p>
+								<RegisterForm
+									hotelName={hotelName}
+									captcha={{
+										provider: cfg.provider,
+										siteKey: cfg.siteKey || undefined,
+									}}
+									nonce={nonce}
+								/>
+							</div>
 						</div>
 					</div>
-				)}
-
-				<p
-					className="text-xs text-center"
-					style={{ color: "var(--color-text-muted)" }}
-				>
-					{tpr("alreadyHaveAccountPre")}{" "}
-					<Link
-						href="/login"
-						className="font-extrabold hover:underline"
-						style={{
-							color: "var(--color-primary-readable, var(--color-primary))",
-						}}
-					>
-						{tpr("alreadyHaveAccountLink")}
-					</Link>
-				</p>
-			</div>
-
-			{/* Right: form */}
-			<div className="flex-1">
-				<div className="overflow-hidden rounded-xl border" style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}>
-					<div
-						className="flex items-center gap-2.5 px-4 py-3"
-						style={{
-							background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-						}}
-					>
-						<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
-							{tpr("title")}
-						</h2>
-					</div>
-					<div className="p-6" style={{ backgroundColor: "var(--color-surface)" }}>
-					<p
-						className="text-sm mb-6"
-						style={{ color: "var(--color-text-muted)" }}
-					>
-						{tpr("subtitle")}
-					</p>
-				<RegisterForm
-					hotelName={hotelName}
-					captcha={{
-						provider: cfg.provider,
-						siteKey: cfg.siteKey || undefined,
-					}}
-					nonce={nonce}
-				/>
-			</div>
-			</div>
-			</div>
-		</div>
+				</div>
 			</Reveal>
 		</div>
 	);

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

@@ -1,6 +1,6 @@
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
-import type { Metadata } from "next";
 import { avatarImageUrl } from "@/lib/format";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
@@ -17,15 +17,26 @@ export default async function SearchPage({
 	const { q } = await searchParams;
 	const query = q?.trim();
 
-	const imager = (await siteSettings.get(
-		"habbo_imaging_url",
-		"https://www.habbo.com/habbo-imaging/avatarimage",
-	)) ?? "";
+	const imager =
+		(await siteSettings.get(
+			"habbo_imaging_url",
+			"https://www.habbo.com/habbo-imaging/avatarimage",
+		)) ?? "";
 
 	if (!query) {
 		return (
-			<div className="rounded-2xl border p-10 text-center" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
-				<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
+			<div
+				className="rounded-2xl border p-10 text-center"
+				style={{
+					background: "var(--color-surface)",
+					borderColor:
+						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+				}}
+			>
+				<p
+					className="text-sm font-bold"
+					style={{ color: "var(--color-text-muted)" }}
+				>
 					Enter a search term to find users.
 				</p>
 			</div>
@@ -68,7 +79,14 @@ export default async function SearchPage({
 
 	return (
 		<div className="flex flex-col gap-6">
-			<div className="rounded-2xl border p-4" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+			<div
+				className="rounded-2xl border p-4"
+				style={{
+					background: "var(--color-surface)",
+					borderColor:
+						"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+				}}
+			>
 				<form action="/search" method="GET" className="flex gap-2">
 					<input
 						type="text"
@@ -79,7 +97,8 @@ export default async function SearchPage({
 						style={{
 							backgroundColor: "var(--color-background)",
 							color: "var(--color-text-readable)",
-							borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+							borderColor:
+								"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 						}}
 					/>
 					<button
@@ -96,13 +115,25 @@ export default async function SearchPage({
 			</div>
 
 			<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
-				Results for &quot;{query}&quot; — {users.length} user{users.length !== 1 ? "s" : ""}
-				{rooms.length > 0 && `, ${rooms.length} room${rooms.length !== 1 ? "s" : ""}`}
+				Results for &quot;{query}&quot; — {users.length} user
+				{users.length !== 1 ? "s" : ""}
+				{rooms.length > 0 &&
+					`, ${rooms.length} room${rooms.length !== 1 ? "s" : ""}`}
 			</p>
 
 			{users.length > 0 && (
-				<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
-					<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
+				<div
+					className="rounded-2xl border p-5"
+					style={{
+						background: "var(--color-surface)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					}}
+				>
+					<h2
+						className="text-lg font-black tracking-tight mb-4"
+						style={{ color: "var(--color-text-readable)" }}
+					>
 						Users
 					</h2>
 					<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
@@ -111,20 +142,32 @@ export default async function SearchPage({
 								key={u.id}
 								href={`/u/${u.username}`}
 								className="flex flex-col items-center gap-1.5 rounded-xl p-3 transition-all duration-200 hover:-translate-y-0.5"
-								style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
+								style={{
+									background:
+										"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+								}}
 							>
 								<Image
-									src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2 })}
+									src={avatarImageUrl(imager, u.look, {
+										headOnly: true,
+										direction: 2,
+									})}
 									alt={u.username}
 									width={40}
 									height={48}
 									unoptimized
 									className="rounded-lg"
 								/>
-								<span className="text-xs font-extrabold truncate max-w-full text-center" style={{ color: "var(--color-text-readable)" }}>
+								<span
+									className="text-xs font-extrabold truncate max-w-full text-center"
+									style={{ color: "var(--color-text-readable)" }}
+								>
 									{u.username}
 								</span>
-								<span className="text-[9px] font-semibold" style={{ color: "var(--color-text-muted)" }}>
+								<span
+									className="text-[9px] font-semibold"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{u.online === "1" ? "🟢 Online" : "Offline"}
 								</span>
 							</Link>
@@ -134,8 +177,18 @@ export default async function SearchPage({
 			)}
 
 			{rooms.length > 0 && (
-				<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
-					<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
+				<div
+					className="rounded-2xl border p-5"
+					style={{
+						background: "var(--color-surface)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					}}
+				>
+					<h2
+						className="text-lg font-black tracking-tight mb-4"
+						style={{ color: "var(--color-text-readable)" }}
+					>
 						Rooms
 					</h2>
 					<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
@@ -145,14 +198,22 @@ export default async function SearchPage({
 								href={`/room/${room.id}`}
 								className="rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5"
 								style={{
-									background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
-									borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+									background:
+										"color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
 								}}
 							>
-								<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>
+								<p
+									className="text-sm font-extrabold truncate"
+									style={{ color: "var(--color-text-readable)" }}
+								>
 									{room.name}
 								</p>
-								<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+								<p
+									className="text-[10px] font-semibold mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									{room.ownerName} · {room.users}/{room.usersMax}
 								</p>
 							</Link>
@@ -162,8 +223,18 @@ export default async function SearchPage({
 			)}
 
 			{users.length === 0 && rooms.length === 0 && (
-				<div className="rounded-2xl border p-10 text-center" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
-					<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
+				<div
+					className="rounded-2xl border p-10 text-center"
+					style={{
+						background: "var(--color-surface)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+					}}
+				>
+					<p
+						className="text-sm font-bold"
+						style={{ color: "var(--color-text-muted)" }}
+					>
 						No users or rooms found for &quot;{query}&quot;.
 					</p>
 				</div>

src/app/(site)/settings/2fa/page.tsx

@@ -11,8 +11,8 @@ import { env } from "@/env";
 import { auth } from "@/lib/auth";
 import { LaravelEncrypter } from "@/lib/auth/laravel-encrypter";
 import { totpKeyUri } from "@/lib/auth/totp";
-import { prisma } from "@/lib/prisma";
 import { resolveHotelName } from "@/lib/hotel-name";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 

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

@@ -52,26 +52,43 @@ export default async function SettingsPage() {
 				<div
 					className="relative overflow-hidden rounded-xl border px-5 py-4"
 					style={{
-						background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+						background:
+							"color-mix(in srgb, var(--color-surface) 60%, transparent)",
 						backdropFilter: "blur(14px)",
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
 					}}
 				>
 					<div className="flex items-center gap-3">
 						<div
 							className="w-10 h-10 rounded-xl flex items-center justify-center"
-							style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+							style={{
+								background:
+									"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+							}}
 						>
-							<Image src="/assets/images/icons/navigation/me.png" alt="" width={22} height={22} unoptimized />
+							<Image
+								src="/assets/images/icons/navigation/me.png"
+								alt=""
+								width={22}
+								height={22}
+								unoptimized
+							/>
 						</div>
 						<div>
 							<h1
 								className="text-lg font-black tracking-tight"
-								style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
+								style={{
+									color: "var(--color-text-readable)",
+									fontFamily: "var(--font-nunito)",
+								}}
 							>
 								{t("accountSettings")}
 							</h1>
-							<p className="text-xs" style={{ color: "var(--color-text-muted)" }}>
+							<p
+								className="text-xs"
+								style={{ color: "var(--color-text-muted)" }}
+							>
 								{t("accountSettingsSubtitle")}
 							</p>
 						</div>
@@ -84,17 +101,28 @@ export default async function SettingsPage() {
 				<div
 					className="overflow-hidden rounded-xl border card-premium"
 					style={{
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					}}
 				>
 					<div
 						className="flex items-center gap-2.5 px-4 py-3"
 						style={{
-							background: "linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
+							background:
+								"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
 						}}
 					>
-						<Image src="/assets/images/icons/navigation/me.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+						<Image
+							src="/assets/images/icons/navigation/me.png"
+							alt=""
+							width={18}
+							height={18}
+							unoptimized
+						/>
+						<h2
+							className="text-sm font-bold text-white"
+							style={{ fontFamily: "var(--font-nunito)" }}
+						>
 							{t("publicProfile")}
 						</h2>
 					</div>
@@ -103,7 +131,13 @@ export default async function SettingsPage() {
 						style={{ backgroundColor: "var(--color-surface)" }}
 					>
 						<div className="shrink-0">
-							<div className="rounded-xl overflow-hidden border" style={{ borderColor: "color-mix(in srgb, var(--color-primary) 15%, transparent)" }}>
+							<div
+								className="rounded-xl overflow-hidden border"
+								style={{
+									borderColor:
+										"color-mix(in srgb, var(--color-primary) 15%, transparent)",
+								}}
+							>
 								<Image
 									src={avatar}
 									alt={`${user.username} avatar`}
@@ -115,13 +149,29 @@ export default async function SettingsPage() {
 							</div>
 						</div>
 						<div className="min-w-0 flex-1">
-							<h3 className="text-base font-extrabold" style={{ color: "var(--color-text-readable)" }}>
+							<h3
+								className="text-base font-extrabold"
+								style={{ color: "var(--color-text-readable)" }}
+							>
 								{user.username}
 							</h3>
-							<p className="text-sm mt-0.5" style={{ color: "var(--color-text-muted)" }}>
-								{user.motto || <span style={{ fontStyle: "italic", opacity: 0.5 }}>{t("noMotto")}</span>}
+							<p
+								className="text-sm mt-0.5"
+								style={{ color: "var(--color-text-muted)" }}
+							>
+								{user.motto || (
+									<span style={{ fontStyle: "italic", opacity: 0.5 }}>
+										{t("noMotto")}
+									</span>
+								)}
 							</p>
-							<p className="text-xs mt-1.5 font-medium" style={{ color: "color-mix(in srgb, var(--color-text-muted) 70%, transparent)" }}>
+							<p
+								className="text-xs mt-1.5 font-medium"
+								style={{
+									color:
+										"color-mix(in srgb, var(--color-text-muted) 70%, transparent)",
+								}}
+							>
 								{user.mail || t("noEmail")}
 							</p>
 						</div>
@@ -134,17 +184,28 @@ export default async function SettingsPage() {
 				<div
 					className="overflow-hidden rounded-xl border"
 					style={{
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					}}
 				>
 					<div
 						className="flex items-center gap-2.5 px-4 py-3"
 						style={{
-							background: "linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
+							background:
+								"linear-gradient(140deg, #5a2d82 0%, #6b3a9e 20%, #7d47b8 40%, #8f54d0 60%, #7d47b8 75%, #6b3a9e 90%, #5a2d82 100%)",
 						}}
 					>
-						<Image src="/assets/images/icons/star.gif" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+						<Image
+							src="/assets/images/icons/star.gif"
+							alt=""
+							width={18}
+							height={18}
+							unoptimized
+						/>
+						<h2
+							className="text-sm font-bold text-white"
+							style={{ fontFamily: "var(--font-nunito)" }}
+						>
 							{t("changeMotto")}
 						</h2>
 					</div>
@@ -152,7 +213,10 @@ export default async function SettingsPage() {
 						className="p-5"
 						style={{ backgroundColor: "var(--color-surface)" }}
 					>
-						<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
+						<p
+							className="text-xs mb-4"
+							style={{ color: "var(--color-text-muted)" }}
+						>
 							{t("changeMottoSubtitle")}
 						</p>
 						<form
@@ -170,7 +234,8 @@ export default async function SettingsPage() {
 								style={{
 									backgroundColor: "var(--color-background)",
 									color: "var(--color-text-readable)",
-									borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+									borderColor:
+										"color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
 								}}
 							/>
 							<div>
@@ -180,7 +245,8 @@ export default async function SettingsPage() {
 									style={{
 										background: "var(--color-primary)",
 										color: "var(--color-primary-foreground)",
-										boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+										boxShadow:
+											"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
 									}}
 								>
 									{t("saveMotto")}
@@ -196,17 +262,28 @@ export default async function SettingsPage() {
 				<div
 					className="overflow-hidden rounded-xl border"
 					style={{
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					}}
 				>
 					<div
 						className="flex items-center gap-2.5 px-4 py-3"
 						style={{
-							background: "linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
+							background:
+								"linear-gradient(140deg, #0A1F0A 0%, #0F2D0F 20%, #153C15 40%, #1B4A1B 60%, #205820 75%, #1A4A1A 90%, #143814 100%)",
 						}}
 					>
-						<Image src="/assets/images/icons/navigation/goody.png" alt="" width={18} height={18} unoptimized />
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+						<Image
+							src="/assets/images/icons/navigation/goody.png"
+							alt=""
+							width={18}
+							height={18}
+							unoptimized
+						/>
+						<h2
+							className="text-sm font-bold text-white"
+							style={{ fontFamily: "var(--font-nunito)" }}
+						>
 							{t("securityTitle")}
 						</h2>
 					</div>
@@ -214,16 +291,21 @@ export default async function SettingsPage() {
 						className="p-5"
 						style={{ backgroundColor: "var(--color-surface)" }}
 					>
-						<p className="text-xs mb-4" style={{ color: "var(--color-text-muted)" }}>
+						<p
+							className="text-xs mb-4"
+							style={{ color: "var(--color-text-muted)" }}
+						>
 							{t("securityDescription")}
 						</p>
 						<Link
 							href="/settings/2fa"
 							className="inline-flex items-center gap-2 font-bold text-sm px-5 py-2.5 rounded-xl border-2 transition-all duration-200 hover:scale-[1.03] active:scale-95 backdrop-blur-sm"
 							style={{
-								borderColor: "color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+								borderColor:
+									"color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
 								color: "var(--color-text-readable)",
-								background: "color-mix(in srgb, var(--color-surface) 50%, transparent)",
+								background:
+									"color-mix(in srgb, var(--color-surface) 50%, transparent)",
 							}}
 						>
 							{t("twoFactorLink")}
@@ -238,7 +320,8 @@ export default async function SettingsPage() {
 					href="/settings/sessions"
 					className="block overflow-hidden rounded-xl border transition-all duration-200 hover:shadow-lg hover:-translate-y-0.5"
 					style={{
-						borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+						borderColor:
+							"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					}}
 				>
 					<div
@@ -248,20 +331,38 @@ export default async function SettingsPage() {
 						<div className="flex items-center gap-3">
 							<div
 								className="w-10 h-10 rounded-xl flex items-center justify-center"
-								style={{ background: "color-mix(in srgb, var(--color-primary) 14%, transparent)" }}
+								style={{
+									background:
+										"color-mix(in srgb, var(--color-primary) 14%, transparent)",
+								}}
 							>
-								<Image src="/assets/images/icons/navigation/community.png" alt="" width={20} height={20} unoptimized />
+								<Image
+									src="/assets/images/icons/navigation/community.png"
+									alt=""
+									width={20}
+									height={20}
+									unoptimized
+								/>
 							</div>
 							<div>
-								<span className="text-sm font-extrabold" style={{ color: "var(--color-text-readable)" }}>
+								<span
+									className="text-sm font-extrabold"
+									style={{ color: "var(--color-text-readable)" }}
+								>
 									Session Management
 								</span>
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+								<p
+									className="text-xs mt-0.5"
+									style={{ color: "var(--color-text-muted)" }}
+								>
 									View active sessions and sign out everywhere
 								</p>
 							</div>
 						</div>
-						<span className="text-lg font-bold" style={{ color: "var(--color-text-muted)" }}>
+						<span
+							className="text-lg font-bold"
+							style={{ color: "var(--color-text-muted)" }}
+						>
 							→
 						</span>
 					</div>

src/app/(site)/settings/sessions/page.tsx

@@ -86,11 +86,7 @@ export default async function SessionsPage({
 				</p>
 			) : null}
 
-			<ContentCard
-				icon="🔐"
-				title={t("title")}
-				subtitle={t("subtitle")}
-			/>
+			<ContentCard icon="🔐" title={t("title")} subtitle={t("subtitle")} />
 
 			<ContentCard
 				icon="🚪"
@@ -104,7 +100,11 @@ export default async function SessionsPage({
 				</form>
 			</ContentCard>
 
-			<ContentCard icon="✅" title={t("recentTitle")} padded={logins.length === 0}>
+			<ContentCard
+				icon="✅"
+				title={t("recentTitle")}
+				padded={logins.length === 0}
+			>
 				{logins.length === 0 ? (
 					<EmptyState icon="🔐">{t("recentEmpty")}</EmptyState>
 				) : (
@@ -148,7 +148,11 @@ export default async function SessionsPage({
 							{failed.map((f) => (
 								<tr key={f.id}>
 									<td className="muted" style={{ whiteSpace: "nowrap" }}>
-									{formatDate(typeof f.attempted_at === "string" ? new Date(f.attempted_at) : f.attempted_at)}
+										{formatDate(
+											typeof f.attempted_at === "string"
+												? new Date(f.attempted_at)
+												: f.attempted_at,
+										)}
 									</td>
 									<td className="muted">{f.ip_address}</td>
 								</tr>

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

@@ -79,7 +79,12 @@ const ARTICLE_SELECT = {
 export default async function ShopPage({
 	searchParams,
 }: {
-	searchParams: Promise<{ category?: string; bought?: string; error?: string; package?: string }>;
+	searchParams: Promise<{
+		category?: string;
+		bought?: string;
+		error?: string;
+		package?: string;
+	}>;
 }) {
 	const t = await getTranslations("pages.shop");
 	const sp = await searchParams;
@@ -185,8 +190,7 @@ export default async function ShopPage({
 				}
 			>
 				<p className="muted" style={{ margin: "0 0 0.75rem" }}>
-					{t("creditsHint")}{" "}
-					<Link href="/shop/topup">{t("topUpLink")}</Link>
+					{t("creditsHint")} <Link href="/shop/topup">{t("topUpLink")}</Link>
 				</p>
 				{categories.length > 0 ? (
 					<div
@@ -319,8 +323,16 @@ export default async function ShopPage({
 									</span>
 									{isLoggedIn ? (
 										<form action={buyShopArticle} style={{ margin: 0 }}>
-											<input type="hidden" name="articleId" value={String(a.id)} />
-											<input type="hidden" name="categoryId" value={categoryId} />
+											<input
+												type="hidden"
+												name="articleId"
+												value={String(a.id)}
+											/>
+											<input
+												type="hidden"
+												name="categoryId"
+												value={categoryId}
+											/>
 											<button type="submit" className="btn btn-primary">
 												{t("buy")}
 											</button>

src/app/(site)/u/[username]/page.tsx

@@ -67,8 +67,6 @@ const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
 const CURRENCY_DUCKETS = 0;
 const CURRENCY_DIAMONDS = 5;
 
-
-
 export default async function ProfilePage({
 	params,
 	searchParams,

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

@@ -1,4 +1,4 @@
-import { CheckCircle2, Clock, Link2, MailX } from "lucide-react";
+import { CheckCircle2, Clock, MailX } from "lucide-react";
 import Link from "next/link";
 import { getTranslations } from "next-intl/server";
 import { isValidVerificationToken } from "@/actions/email-verify";
@@ -22,8 +22,10 @@ function StatusCard({
 	color: string;
 }) {
 	const gradientMap: Record<string, string> = {
-		green: "linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
-		yellow: "linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
+		green:
+			"linear-gradient(140deg, #0A2F1A 0%, #0F3D22 20%, #154C2A 40%, #1B5A32 60%, #20683A 75%, #1A5A30 90%, #144826 100%)",
+		yellow:
+			"linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
 		red: "linear-gradient(140deg, #3A0F0A 0%, #4A1A0F 20%, #5A2515 40%, #6A301B 60%, #7A3B20 75%, #6A301A 90%, #5A2514 100%)",
 		blue: "linear-gradient(140deg, #0A1A3A 0%, #0F254A 20%, #15305A 40%, #1B3B6A 60%, #20467A 75%, #1A3B6A 90%, #14305A 100%)",
 	};
@@ -33,7 +35,8 @@ function StatusCard({
 			<div
 				className="w-full max-w-md overflow-hidden rounded-xl border"
 				style={{
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
+					borderColor:
+						"color-mix(in srgb, var(--color-text-muted) 12%, transparent)",
 					backgroundColor: "var(--color-surface)",
 				}}
 			>
@@ -48,12 +51,16 @@ function StatusCard({
 					<div
 						className="flex h-16 w-16 items-center justify-center rounded-full"
 						style={{
-							background: "color-mix(in srgb, var(--color-primary) 12%, transparent)",
+							background:
+								"color-mix(in srgb, var(--color-primary) 12%, transparent)",
 						}}
 					>
 						{icon}
 					</div>
-					<p className="text-sm font-semibold" style={{ color: "var(--color-text-muted)" }}>
+					<p
+						className="text-sm font-semibold"
+						style={{ color: "var(--color-text-muted)" }}
+					>
 						{subtitle}
 					</p>
 					{children}
@@ -107,7 +114,8 @@ export default async function VerifyPage({
 	const linkStyle = {
 		background: "var(--color-primary)",
 		color: "var(--color-primary-foreground)",
-		boxShadow: "0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
+		boxShadow:
+			"0 4px 20px color-mix(in srgb, var(--color-primary) 30%, transparent)",
 	};
 
 	return (
@@ -167,11 +175,14 @@ export default async function VerifyPage({
 					<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
 						{t("invalidBody")}
 					</p>
-					<Link href="/login" className={`${linkClass} !shadow-none`}
+					<Link
+						href="/login"
+						className={`${linkClass} !shadow-none`}
 						style={{
 							background: "transparent",
 							color: "var(--color-text-readable)",
-							border: "2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
+							border:
+								"2px solid color-mix(in srgb, var(--color-text-muted) 20%, transparent)",
 						}}
 					>
 						{t("backToLogin")}
@@ -180,4 +191,4 @@ export default async function VerifyPage({
 			)}
 		</>
 	);
-}
+}

src/app/admin/achievements/page.tsx

@@ -1,8 +1,8 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 type Achievement = {
 	name: string;

src/app/admin/ads/[id]/page.tsx

@@ -4,8 +4,8 @@ import { notFound, redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { updateAd } from "@/actions/admin-ads";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 import { EditAdDeleteButton } from "../ads-table";
 
 export const dynamic = "force-dynamic";

src/app/admin/ads/ads-table.tsx

@@ -4,8 +4,8 @@ import { Trash2 } from "lucide-react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { deleteAd } from "@/actions/admin-ads";
-import { Button } from "@/components/ui/button";
 import { useConfirmDialog } from "@/components/admin/confirm-dialog";
+import { Button } from "@/components/ui/button";
 import { useServerAction } from "@/hooks/use-server-action";
 
 export type AdRow = {

src/app/admin/ads/page.tsx

@@ -1,11 +1,11 @@
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
 import { formatDate } from "@/lib/format-date";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 import { AdsTable } from "./ads-table";
 
 export const dynamic = "force-dynamic";
@@ -27,17 +27,13 @@ export default async function AdminAds() {
 		ads = [];
 	}
 
-	const latest = ads[0]?.createdAt
-		? formatDate(ads[0].createdAt, "date")
-		: "—";
+	const latest = ads[0]?.createdAt ? formatDate(ads[0].createdAt, "date") : "—";
 
 	return (
 		<main>
 			<div className="flex justify-end mb-6">
 				<Button variant="default" asChild>
-					<Link href="/admin/ads/new">
-						+ {t("newAd")}
-					</Link>
+					<Link href="/admin/ads/new">+ {t("newAd")}</Link>
 				</Button>
 			</div>
 
@@ -60,9 +56,7 @@ export default async function AdminAds() {
 						ads={ads.map((ad) => ({
 							id: String(ad.id),
 							image: ad.image,
-							createdAt: ad.createdAt
-								? formatDate(ad.createdAt, "date")
-								: null,
+							createdAt: ad.createdAt ? formatDate(ad.createdAt, "date") : null,
 						}))}
 					/>
 				)}

src/app/admin/alerts/page.tsx

@@ -1,11 +1,11 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { sendHotelAlert } from "@/actions/admin-alerts";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
 import { formatDate } from "@/lib/format-date";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 const CRITICAL = new Set(["critical", "error", "danger"]);
 const WARNING = new Set(["warning", "warn"]);

src/app/admin/applications/page.tsx

@@ -1,12 +1,12 @@
-import { formatDate } from "@/lib/format-date";
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { dismissApplication } from "@/actions/admin-applications";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
+import { formatDate } from "@/lib/format-date";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
@@ -18,7 +18,6 @@ type ApplicationRow = {
 	createdAt: Date | null;
 };
 
-
 export default async function AdminApplications() {
 	const { session, permissions } = await getAdminContext();
 	if (!canAccess(permissions, PERMS.USERS_VIEW, session.user.rank)) {

src/app/admin/articles/page.tsx

@@ -1,11 +1,11 @@
 import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
+import { ArticleCard } from "@/components/admin/article-card";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
-import { ArticleCard } from "@/components/admin/article-card";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -38,7 +38,9 @@ export default async function AdminArticles({
 		.catch(() => []);
 
 	const authorMap = new Map<number, string>();
-	const authorIds = articles.map((a) => a.userId).filter((id): id is number => Boolean(id));
+	const authorIds = articles
+		.map((a) => a.userId)
+		.filter((id): id is number => Boolean(id));
 	if (authorIds.length > 0) {
 		const authors = await prisma.user
 			.findMany({
@@ -57,9 +59,7 @@ export default async function AdminArticles({
 		<main>
 			<div className="flex justify-end mb-6">
 				<Button variant="default" asChild>
-					<Link href="/admin/articles/new">
-						{t("newArticle")}
-					</Link>
+					<Link href="/admin/articles/new">{t("newArticle")}</Link>
 				</Button>
 			</div>
 

src/app/admin/badges/page.tsx

@@ -1,10 +1,10 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { uploadBadge } from "@/actions/admin-badge-upload";
 import { giveBadge } from "@/actions/admin-badges";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 

src/app/admin/bans/page.tsx

@@ -4,8 +4,8 @@ import { createBan, liftBan } from "@/actions/admin-bans";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
 import { activeBanWhere, unixNow } from "@/lib/bans";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";

src/app/admin/calendar/[id]/page.tsx

@@ -2,8 +2,8 @@ import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { formatDate } from "@/lib/format-date";
-import { prisma } from "@/lib/prisma";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
@@ -115,7 +115,10 @@ export default async function AdminCalendarCampaign({
 						{t("detail.campaignMeta", {
 							id: campaign.id,
 							days: campaign.totalDays,
-							date: formatDate(new Date(campaign.startTimestamp * 1000), "date"),
+							date: formatDate(
+								new Date(campaign.startTimestamp * 1000),
+								"date",
+							),
 						})}
 						{disabled
 							? ` · ${t("detail.disabled")}`

src/app/admin/calendar/page.tsx

@@ -2,8 +2,8 @@ import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -118,7 +118,12 @@ export default async function AdminCalendar() {
 										})}
 									</p>
 									<p className="text-xs theme-text-muted dark:theme-text-muted mt-1">
-										{t("startsAt", { date: formatDate(new Date(c.startTimestamp * 1000), "date") })}
+										{t("startsAt", {
+											date: formatDate(
+												new Date(c.startTimestamp * 1000),
+												"date",
+											),
+										})}
 										{c.lockExpired === "1" ? ` · ${t("locksExpired")}` : ""}
 									</p>
 								</div>

src/app/admin/catalog/[id]/catalog-page-form.tsx

@@ -18,8 +18,8 @@ import { deleteCatalogPage, updateCatalogPage } from "@/actions/catalog";
 import { CatalogImagePicker } from "@/components/admin/catalog/catalog-image-picker";
 import { IconPicker } from "@/components/admin/catalog/icon-picker";
 import { ImagePreview } from "@/components/admin/catalog-manager/image-preview";
-import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { CatalogIcon, LAYOUT_COLORS } from "@/components/admin/catalog-tree";
+import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -167,343 +167,356 @@ export function CatalogPageForm({
 		<>
 			{confirmDialog}
 			<form ref={formRef} onSubmit={handleSubmit}>
-			<div className="grid gap-4 lg:grid-cols-3">
-				{/* ── Left column (2/3): tabs ─────────────────────────── */}
-				<div className="lg:col-span-2 space-y-4">
-					<Card>
-						<CardContent className="pt-4">
-							<Tabs defaultValue="general">
-								<TabsList className="mb-4">
-									<TabsTrigger value="general" className="gap-2">
-										<Settings className="h-4 w-4" />
-										General
-									</TabsTrigger>
-									<TabsTrigger value="texts" className="gap-2">
-										<FileText className="h-4 w-4" />
-										Texts
-									</TabsTrigger>
-									<TabsTrigger value="appearance" className="gap-2">
-										<Palette className="h-4 w-4" />
-										Appearance
-									</TabsTrigger>
-								</TabsList>
-
-								{/* ── General ──────────────────────────────────── */}
-								<TabsContent value="general" className="space-y-4">
-									<div className="grid gap-4 sm:grid-cols-2">
-										<div className="space-y-2">
-											<Label htmlFor="caption">Caption</Label>
-											<Input
-												id="caption"
-												value={form.caption}
-												onChange={(e) => update("caption", e.target.value)}
-												disabled={!canEdit}
-											/>
-										</div>
-										<div className="space-y-2">
-											<Label>Parent Page</Label>
-											<ParentCombobox
-												value={form.parentId}
-												onChange={(id) => update("parentId", id)}
-												pages={allPages}
-												currentPageId={catalogPage.id}
-												disabled={!canEdit}
-											/>
-										</div>
-									</div>
-
-									<div className="space-y-2">
-										<Label>Layout</Label>
-										<LayoutSelect
-											value={form.pageLayout}
-											onChange={(v) => update("pageLayout", v)}
-											disabled={!canEdit}
-										/>
-										<p className="text-xs text-muted-foreground">
-											{LAYOUT_DESCRIPTIONS[form.pageLayout as CatalogLayout] ??
-												"Custom layout"}
-										</p>
-									</div>
-
-									<div className="grid gap-4 sm:grid-cols-2">
-										<div className="space-y-2">
-											<Label htmlFor="orderNum">Order</Label>
-											<Input
-												id="orderNum"
-												type="number"
-												value={form.orderNum}
-												onChange={(e) =>
-													update("orderNum", parseInt(e.target.value, 10) || 0)
-												}
-												disabled={!canEdit}
-											/>
-										</div>
-										<div className="space-y-2">
-											<Label htmlFor="minRank">Min Rank</Label>
-											<Input
-												id="minRank"
-												type="number"
-												min={1}
-												max={100}
-												value={form.minRank}
-												onChange={(e) =>
-													update("minRank", parseInt(e.target.value, 10) || 1)
-												}
-												disabled={!canEdit}
-											/>
-										</div>
-									</div>
-								</TabsContent>
-
-								{/* ── Texts ────────────────────────────────────── */}
-								<TabsContent value="texts" className="space-y-4">
-									<div className="space-y-1.5">
-										<Label>Headline</Label>
-										<CatalogImagePicker
-											value={form.pageHeadline}
-											onChange={(v) => update("pageHeadline", v)}
-											type="header"
-											label="Headline image"
-											disabled={!canEdit}
-										/>
-										<ImagePreview value={form.pageHeadline} height={50} />
-									</div>
-									<div className="space-y-1.5">
-										<Label>Teaser</Label>
-										<CatalogImagePicker
-											value={form.pageTeaser}
-											onChange={(v) => update("pageTeaser", v)}
-											type="teaser"
-											label="Teaser image"
-											disabled={!canEdit}
-										/>
-										<ImagePreview value={form.pageTeaser} height={50} />
-									</div>
-									<div className="grid gap-4 sm:grid-cols-2">
-										<TextareaField
-											id="pageText1"
-											label="Text 1"
-											value={form.pageText1}
-											onChange={(v) => update("pageText1", v)}
-											disabled={!canEdit}
-											rows={4}
-											max={5000}
-										/>
-										<TextareaField
-											id="pageText2"
-											label="Text 2"
-											value={form.pageText2}
-											onChange={(v) => update("pageText2", v)}
-											disabled={!canEdit}
-											rows={4}
-											max={5000}
-										/>
-									</div>
-									<div className="grid gap-4 sm:grid-cols-2">
-										<TextareaField
-											id="pageTextDetails"
-											label="Details"
-											value={form.pageTextDetails}
-											onChange={(v) => update("pageTextDetails", v)}
-											disabled={!canEdit}
-											rows={3}
-											max={5000}
-										/>
-										<TextareaField
-											id="pageTextTeaser"
-											label="Text Teaser"
-											value={form.pageTextTeaser}
-											onChange={(v) => update("pageTextTeaser", v)}
-											disabled={!canEdit}
-											rows={3}
-											max={5000}
-										/>
-									</div>
-									<TextareaField
-										id="pageSpecial"
-										label="Special"
-										value={form.pageSpecial}
-										onChange={(v) => update("pageSpecial", v)}
-										disabled={!canEdit}
-										rows={2}
-										max={2048}
-									/>
-								</TabsContent>
-
-								{/* ── Appearance ───────────────────────────────── */}
-								<TabsContent value="appearance" className="space-y-4">
-									<div className="space-y-2">
-										<Label>Icon</Label>
-										<div className="flex items-center gap-3">
-											<IconPicker
-												value={form.iconImage}
-												onChange={(id) => update("iconImage", id)}
-												disabled={!canEdit}
-											/>
-											<p className="text-xs text-muted-foreground">
-												Icon shown in the catalog tree navigation.
-											</p>
-										</div>
-									</div>
-									<div className="space-y-2">
-										<Label htmlFor="iconColor">Icon Color</Label>
-										<div className="flex items-center gap-2">
-											<Input
-												id="iconColor"
-												type="number"
-												min={0}
-												className="w-32"
-												value={form.iconColor}
-												onChange={(e) =>
-													update("iconColor", parseInt(e.target.value, 10) || 0)
-												}
-												disabled={!canEdit}
-											/>
-											<p className="text-xs text-muted-foreground">
-												Legacy tint value. Leave at default unless you need to
-												match a specific theme.
-											</p>
-										</div>
-									</div>
-								</TabsContent>
-							</Tabs>
-						</CardContent>
-					</Card>
-
-					{/* Child pages list */}
-					{childPages.length > 0 && (
+				<div className="grid gap-4 lg:grid-cols-3">
+					{/* ── Left column (2/3): tabs ─────────────────────────── */}
+					<div className="lg:col-span-2 space-y-4">
 						<Card>
-							<CardHeader className="pb-3">
-								<CardTitle className="text-base flex items-center gap-2">
-									<FolderTree className="h-4 w-4" />
-									Child Pages ({childPages.length})
-								</CardTitle>
-							</CardHeader>
-							<CardContent>
-								<div className="space-y-1">
-									{childPages.map((child) => (
-										<Link
-											key={child.id}
-											href={`/admin/catalog/${child.id}`}
-											className="flex items-center justify-between rounded-md px-3 py-2 hover:bg-accent text-sm"
-										>
-											<span>
-												{child.caption}
-												<span className="ml-2 text-muted-foreground font-mono text-xs">
-													#{child.id}
-												</span>
-											</span>
-											<Badge
-												variant={child.enabled === "1" ? "default" : "outline"}
-											>
-												{child.enabled === "1" ? "Enabled" : "Disabled"}
-											</Badge>
-										</Link>
-									))}
-								</div>
+							<CardContent className="pt-4">
+								<Tabs defaultValue="general">
+									<TabsList className="mb-4">
+										<TabsTrigger value="general" className="gap-2">
+											<Settings className="h-4 w-4" />
+											General
+										</TabsTrigger>
+										<TabsTrigger value="texts" className="gap-2">
+											<FileText className="h-4 w-4" />
+											Texts
+										</TabsTrigger>
+										<TabsTrigger value="appearance" className="gap-2">
+											<Palette className="h-4 w-4" />
+											Appearance
+										</TabsTrigger>
+									</TabsList>
+
+									{/* ── General ──────────────────────────────────── */}
+									<TabsContent value="general" className="space-y-4">
+										<div className="grid gap-4 sm:grid-cols-2">
+											<div className="space-y-2">
+												<Label htmlFor="caption">Caption</Label>
+												<Input
+													id="caption"
+													value={form.caption}
+													onChange={(e) => update("caption", e.target.value)}
+													disabled={!canEdit}
+												/>
+											</div>
+											<div className="space-y-2">
+												<Label>Parent Page</Label>
+												<ParentCombobox
+													value={form.parentId}
+													onChange={(id) => update("parentId", id)}
+													pages={allPages}
+													currentPageId={catalogPage.id}
+													disabled={!canEdit}
+												/>
+											</div>
+										</div>
+
+										<div className="space-y-2">
+											<Label>Layout</Label>
+											<LayoutSelect
+												value={form.pageLayout}
+												onChange={(v) => update("pageLayout", v)}
+												disabled={!canEdit}
+											/>
+											<p className="text-xs text-muted-foreground">
+												{LAYOUT_DESCRIPTIONS[
+													form.pageLayout as CatalogLayout
+												] ?? "Custom layout"}
+											</p>
+										</div>
+
+										<div className="grid gap-4 sm:grid-cols-2">
+											<div className="space-y-2">
+												<Label htmlFor="orderNum">Order</Label>
+												<Input
+													id="orderNum"
+													type="number"
+													value={form.orderNum}
+													onChange={(e) =>
+														update(
+															"orderNum",
+															parseInt(e.target.value, 10) || 0,
+														)
+													}
+													disabled={!canEdit}
+												/>
+											</div>
+											<div className="space-y-2">
+												<Label htmlFor="minRank">Min Rank</Label>
+												<Input
+													id="minRank"
+													type="number"
+													min={1}
+													max={100}
+													value={form.minRank}
+													onChange={(e) =>
+														update("minRank", parseInt(e.target.value, 10) || 1)
+													}
+													disabled={!canEdit}
+												/>
+											</div>
+										</div>
+									</TabsContent>
+
+									{/* ── Texts ────────────────────────────────────── */}
+									<TabsContent value="texts" className="space-y-4">
+										<div className="space-y-1.5">
+											<Label>Headline</Label>
+											<CatalogImagePicker
+												value={form.pageHeadline}
+												onChange={(v) => update("pageHeadline", v)}
+												type="header"
+												label="Headline image"
+												disabled={!canEdit}
+											/>
+											<ImagePreview value={form.pageHeadline} height={50} />
+										</div>
+										<div className="space-y-1.5">
+											<Label>Teaser</Label>
+											<CatalogImagePicker
+												value={form.pageTeaser}
+												onChange={(v) => update("pageTeaser", v)}
+												type="teaser"
+												label="Teaser image"
+												disabled={!canEdit}
+											/>
+											<ImagePreview value={form.pageTeaser} height={50} />
+										</div>
+										<div className="grid gap-4 sm:grid-cols-2">
+											<TextareaField
+												id="pageText1"
+												label="Text 1"
+												value={form.pageText1}
+												onChange={(v) => update("pageText1", v)}
+												disabled={!canEdit}
+												rows={4}
+												max={5000}
+											/>
+											<TextareaField
+												id="pageText2"
+												label="Text 2"
+												value={form.pageText2}
+												onChange={(v) => update("pageText2", v)}
+												disabled={!canEdit}
+												rows={4}
+												max={5000}
+											/>
+										</div>
+										<div className="grid gap-4 sm:grid-cols-2">
+											<TextareaField
+												id="pageTextDetails"
+												label="Details"
+												value={form.pageTextDetails}
+												onChange={(v) => update("pageTextDetails", v)}
+												disabled={!canEdit}
+												rows={3}
+												max={5000}
+											/>
+											<TextareaField
+												id="pageTextTeaser"
+												label="Text Teaser"
+												value={form.pageTextTeaser}
+												onChange={(v) => update("pageTextTeaser", v)}
+												disabled={!canEdit}
+												rows={3}
+												max={5000}
+											/>
+										</div>
+										<TextareaField
+											id="pageSpecial"
+											label="Special"
+											value={form.pageSpecial}
+											onChange={(v) => update("pageSpecial", v)}
+											disabled={!canEdit}
+											rows={2}
+											max={2048}
+										/>
+									</TabsContent>
+
+									{/* ── Appearance ───────────────────────────────── */}
+									<TabsContent value="appearance" className="space-y-4">
+										<div className="space-y-2">
+											<Label>Icon</Label>
+											<div className="flex items-center gap-3">
+												<IconPicker
+													value={form.iconImage}
+													onChange={(id) => update("iconImage", id)}
+													disabled={!canEdit}
+												/>
+												<p className="text-xs text-muted-foreground">
+													Icon shown in the catalog tree navigation.
+												</p>
+											</div>
+										</div>
+										<div className="space-y-2">
+											<Label htmlFor="iconColor">Icon Color</Label>
+											<div className="flex items-center gap-2">
+												<Input
+													id="iconColor"
+													type="number"
+													min={0}
+													className="w-32"
+													value={form.iconColor}
+													onChange={(e) =>
+														update(
+															"iconColor",
+															parseInt(e.target.value, 10) || 0,
+														)
+													}
+													disabled={!canEdit}
+												/>
+												<p className="text-xs text-muted-foreground">
+													Legacy tint value. Leave at default unless you need to
+													match a specific theme.
+												</p>
+											</div>
+										</div>
+									</TabsContent>
+								</Tabs>
 							</CardContent>
 						</Card>
-					)}
+
+						{/* Child pages list */}
+						{childPages.length > 0 && (
+							<Card>
+								<CardHeader className="pb-3">
+									<CardTitle className="text-base flex items-center gap-2">
+										<FolderTree className="h-4 w-4" />
+										Child Pages ({childPages.length})
+									</CardTitle>
+								</CardHeader>
+								<CardContent>
+									<div className="space-y-1">
+										{childPages.map((child) => (
+											<Link
+												key={child.id}
+												href={`/admin/catalog/${child.id}`}
+												className="flex items-center justify-between rounded-md px-3 py-2 hover:bg-accent text-sm"
+											>
+												<span>
+													{child.caption}
+													<span className="ml-2 text-muted-foreground font-mono text-xs">
+														#{child.id}
+													</span>
+												</span>
+												<Badge
+													variant={
+														child.enabled === "1" ? "default" : "outline"
+													}
+												>
+													{child.enabled === "1" ? "Enabled" : "Disabled"}
+												</Badge>
+											</Link>
+										))}
+									</div>
+								</CardContent>
+							</Card>
+						)}
+					</div>
+
+					{/* ── Right column (1/3): status sticky ────────────────── */}
+					<div className="lg:col-span-1">
+						<Card className="lg:sticky lg:top-4">
+							<CardHeader className="pb-3">
+								<CardTitle className="text-base">Status & Preview</CardTitle>
+							</CardHeader>
+							<CardContent className="space-y-4">
+								{/* Preview */}
+								<div className="flex items-center gap-3 rounded-md border bg-muted/30 p-3">
+									<div className="flex h-12 w-12 items-center justify-center rounded bg-background shrink-0">
+										<CatalogIcon iconImage={form.iconImage} size={36} />
+									</div>
+									<div className="min-w-0">
+										<p className="truncate text-sm font-medium">
+											{form.caption || "Untitled"}
+										</p>
+										<Badge
+											className={cn(
+												"mt-1 h-5 px-1.5 text-[10px] font-mono border-0",
+												layoutColorClass,
+											)}
+										>
+											{form.pageLayout}
+										</Badge>
+									</div>
+								</div>
+
+								{/* Toggles */}
+								<div className="space-y-3">
+									<ToggleRow
+										id="tg-enabled"
+										label="Enabled"
+										description="Active in the catalog"
+										checked={form.enabled === "1"}
+										onChange={(v) => update("enabled", v ? "1" : "0")}
+										disabled={!canEdit}
+									/>
+									<ToggleRow
+										id="tg-visible"
+										label="Visible"
+										description="Shown in navigation"
+										checked={form.visible === "1"}
+										onChange={(v) => update("visible", v ? "1" : "0")}
+										disabled={!canEdit}
+									/>
+									<ToggleRow
+										id="tg-club"
+										label="Club Only"
+										description="Requires HC subscription"
+										checked={form.clubOnly === "1"}
+										onChange={(v) => update("clubOnly", v ? "1" : "0")}
+										disabled={!canEdit}
+									/>
+								</div>
+
+								{/* Stats */}
+								<div className="flex items-center gap-4 border-t pt-3 text-xs text-muted-foreground">
+									<span className="flex items-center gap-1">
+										<FolderTree className="h-3.5 w-3.5" />
+										{childPages.length} sub
+									</span>
+									<span className="flex items-center gap-1">
+										<Package className="h-3.5 w-3.5" />#{catalogPage.id}
+									</span>
+								</div>
+
+								{/* Actions */}
+								{canEdit && (
+									<div className="space-y-2 border-t pt-3">
+										<Button
+											type="submit"
+											disabled={isPending}
+											className="w-full"
+										>
+											{isPending ? (
+												<Loader2 className="mr-2 h-4 w-4 animate-spin" />
+											) : (
+												<Save className="mr-2 h-4 w-4" />
+											)}
+											Save & Sync
+										</Button>
+										<Button
+											type="button"
+											variant="destructive"
+											onClick={handleDelete}
+											disabled={isPending}
+											className="w-full"
+										>
+											<Trash2 className="mr-2 h-4 w-4" />
+											Delete Page
+										</Button>
+										<p className="text-center text-[10px] text-muted-foreground">
+											Press <kbd className="rounded border px-1">Ctrl+S</kbd> to
+											save
+										</p>
+									</div>
+								)}
+							</CardContent>
+						</Card>
+					</div>
 				</div>
-
-				{/* ── Right column (1/3): status sticky ────────────────── */}
-				<div className="lg:col-span-1">
-					<Card className="lg:sticky lg:top-4">
-						<CardHeader className="pb-3">
-							<CardTitle className="text-base">Status & Preview</CardTitle>
-						</CardHeader>
-						<CardContent className="space-y-4">
-							{/* Preview */}
-							<div className="flex items-center gap-3 rounded-md border bg-muted/30 p-3">
-								<div className="flex h-12 w-12 items-center justify-center rounded bg-background shrink-0">
-									<CatalogIcon iconImage={form.iconImage} size={36} />
-								</div>
-								<div className="min-w-0">
-									<p className="truncate text-sm font-medium">
-										{form.caption || "Untitled"}
-									</p>
-									<Badge
-										className={cn(
-											"mt-1 h-5 px-1.5 text-[10px] font-mono border-0",
-											layoutColorClass,
-										)}
-									>
-										{form.pageLayout}
-									</Badge>
-								</div>
-							</div>
-
-							{/* Toggles */}
-							<div className="space-y-3">
-								<ToggleRow
-									id="tg-enabled"
-									label="Enabled"
-									description="Active in the catalog"
-									checked={form.enabled === "1"}
-									onChange={(v) => update("enabled", v ? "1" : "0")}
-									disabled={!canEdit}
-								/>
-								<ToggleRow
-									id="tg-visible"
-									label="Visible"
-									description="Shown in navigation"
-									checked={form.visible === "1"}
-									onChange={(v) => update("visible", v ? "1" : "0")}
-									disabled={!canEdit}
-								/>
-								<ToggleRow
-									id="tg-club"
-									label="Club Only"
-									description="Requires HC subscription"
-									checked={form.clubOnly === "1"}
-									onChange={(v) => update("clubOnly", v ? "1" : "0")}
-									disabled={!canEdit}
-								/>
-							</div>
-
-							{/* Stats */}
-							<div className="flex items-center gap-4 border-t pt-3 text-xs text-muted-foreground">
-								<span className="flex items-center gap-1">
-									<FolderTree className="h-3.5 w-3.5" />
-									{childPages.length} sub
-								</span>
-								<span className="flex items-center gap-1">
-									<Package className="h-3.5 w-3.5" />#{catalogPage.id}
-								</span>
-							</div>
-
-							{/* Actions */}
-							{canEdit && (
-								<div className="space-y-2 border-t pt-3">
-									<Button type="submit" disabled={isPending} className="w-full">
-										{isPending ? (
-											<Loader2 className="mr-2 h-4 w-4 animate-spin" />
-										) : (
-											<Save className="mr-2 h-4 w-4" />
-										)}
-										Save & Sync
-									</Button>
-									<Button
-										type="button"
-										variant="destructive"
-										onClick={handleDelete}
-										disabled={isPending}
-										className="w-full"
-									>
-										<Trash2 className="mr-2 h-4 w-4" />
-										Delete Page
-									</Button>
-									<p className="text-center text-[10px] text-muted-foreground">
-										Press <kbd className="rounded border px-1">Ctrl+S</kbd> to
-										save
-									</p>
-								</div>
-							)}
-						</CardContent>
-					</Card>
-				</div>
-			</div>
-		</form>
+			</form>
 		</>
 	);
 }
@@ -543,44 +556,6 @@ function ToggleRow({
 	);
 }
 
-// ── Text field with counter ────────────────────────────────────
-
-function _TextField({
-	id,
-	label,
-	value,
-	onChange,
-	disabled,
-	max,
-}: {
-	id: string;
-	label: string;
-	value: string;
-	onChange: (v: string) => void;
-	disabled?: boolean;
-	max?: number;
-}) {
-	return (
-		<div className="space-y-2">
-			<div className="flex items-center justify-between">
-				<Label htmlFor={id}>{label}</Label>
-				{max && (
-					<span className="text-[10px] tabular-nums text-muted-foreground">
-						{value.length}/{max}
-					</span>
-				)}
-			</div>
-			<Input
-				id={id}
-				value={value}
-				onChange={(e) => onChange(e.target.value)}
-				disabled={disabled}
-				maxLength={max}
-			/>
-		</div>
-	);
-}
-
 function TextareaField({
 	id,
 	label,

src/app/admin/catalog/[id]/catalog-translate-tab.tsx

@@ -35,12 +35,12 @@ import {
 	TooltipProvider,
 	TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { useServerAction } from "@/hooks/use-server-action";
 import {
 	habboGamedataHotelLabel,
 	habboGamedataHotelShort,
 	normalizeHabboGamedataHotel,
 } from "@/lib/habbo-gamedata-hotel";
-import { useServerAction } from "@/hooks/use-server-action";
 import { FurniIcon } from "./catalog-items-table";
 
 interface BaseItemForTranslation {

src/app/admin/catalog/builder-club/bc-manager.tsx

@@ -18,6 +18,7 @@ import {
 	updateBcItem,
 	updateBcPage,
 } from "@/actions/catalog-bc";
+import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -41,7 +42,6 @@ import {
 } from "@/components/ui/table";
 import { Textarea } from "@/components/ui/textarea";
 import { useServerAction } from "@/hooks/use-server-action";
-import { useConfirmDialog } from "@/components/admin/confirm-dialog";
 
 // ── Types ────────────────────────────────────────────────────────────
 

src/app/admin/catalog/catalog-table.tsx

@@ -8,7 +8,7 @@ import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { useServerAction } from "@/hooks/use-server-action";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 interface CatalogPageRow {
 	id: number;

src/app/admin/commandocentrum/commandocentrum-controls.tsx

@@ -190,11 +190,10 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="destructive" className="w-full"
+								variant="destructive"
+								className="w-full"
 								disabled={
-									isPending ||
-									!disconnect.userId ||
-									!disconnect.username.trim()
+									isPending || !disconnect.userId || !disconnect.username.trim()
 								}
 								onClick={() =>
 									run(
@@ -249,10 +248,9 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
-								disabled={
-									isPending || !alert.userId || !alert.message.trim()
-								}
+								variant="default"
+								className="w-full"
+								disabled={isPending || !alert.userId || !alert.message.trim()}
 								onClick={() =>
 									run(
 										() =>
@@ -305,7 +303,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !forward.userId || !forward.roomId}
 								onClick={() =>
 									run(
@@ -317,8 +316,7 @@ export function CommandocentrumControls() {
 										{
 											successMessage: "User forwarded.",
 											errorMessage: RCON_ERROR,
-											onSuccess: () =>
-												setForward({ userId: "", roomId: "" }),
+											onSuccess: () => setForward({ userId: "", roomId: "" }),
 										},
 									)
 								}
@@ -362,7 +360,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !credits.userId || !credits.credits}
 								onClick={() =>
 									run(
@@ -374,8 +373,7 @@ export function CommandocentrumControls() {
 										{
 											successMessage: "Credits sent.",
 											errorMessage: RCON_ERROR,
-											onSuccess: () =>
-												setCredits({ userId: "", credits: "" }),
+											onSuccess: () => setCredits({ userId: "", credits: "" }),
 										},
 									)
 								}
@@ -417,7 +415,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !duckets.userId || !duckets.amount}
 								onClick={() =>
 									run(
@@ -429,8 +428,7 @@ export function CommandocentrumControls() {
 										{
 											successMessage: "Duckets sent.",
 											errorMessage: RCON_ERROR,
-											onSuccess: () =>
-												setDuckets({ userId: "", amount: "" }),
+											onSuccess: () => setDuckets({ userId: "", amount: "" }),
 										},
 									)
 								}
@@ -472,7 +470,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !diamonds.userId || !diamonds.amount}
 								onClick={() =>
 									run(
@@ -484,8 +483,7 @@ export function CommandocentrumControls() {
 										{
 											successMessage: "Diamonds sent.",
 											errorMessage: RCON_ERROR,
-											onSuccess: () =>
-												setDiamonds({ userId: "", amount: "" }),
+											onSuccess: () => setDiamonds({ userId: "", amount: "" }),
 										},
 									)
 								}
@@ -529,7 +527,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !badge.userId || !badge.badge.trim()}
 								onClick={() =>
 									run(
@@ -583,7 +582,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !motto.userId || !motto.motto.trim()}
 								onClick={() =>
 									run(
@@ -595,8 +595,7 @@ export function CommandocentrumControls() {
 										{
 											successMessage: "Motto updated.",
 											errorMessage: RCON_ERROR,
-											onSuccess: () =>
-												setMottoForm({ userId: "", motto: "" }),
+											onSuccess: () => setMottoForm({ userId: "", motto: "" }),
 										},
 									)
 								}
@@ -639,7 +638,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !rank.userId || rank.rank === ""}
 								onClick={() =>
 									run(
@@ -695,7 +695,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={
 									isPending || !command.userId || !command.command.trim()
 								}
@@ -709,8 +710,7 @@ export function CommandocentrumControls() {
 										{
 											successMessage: "Command executed.",
 											errorMessage: RCON_ERROR,
-											onSuccess: () =>
-												setCommand({ userId: "", command: "" }),
+											onSuccess: () => setCommand({ userId: "", command: "" }),
 										},
 									)
 								}
@@ -763,7 +763,8 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
+								className="w-full"
 								disabled={isPending || !gift.userId || !gift.itemId}
 								onClick={() =>
 									run(

src/app/admin/commandocentrum/page.tsx

@@ -7,9 +7,9 @@ import {
 	OnlineUsersWidget,
 	StatusCard,
 } from "@/components/admin/dashboard";
+import { formatDate } from "@/lib/format-date";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
-import { formatDate } from "@/lib/format-date";
 import { rcon } from "@/lib/services/rcon";
 import { siteSettings } from "@/lib/services/site-settings";
 import { CommandocentrumControls } from "./commandocentrum-controls";
@@ -268,7 +268,10 @@ export default async function CommandoCentrum() {
 									return (
 										<tr key={e.id}>
 											<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">
-												{formatDate(e.timestamp ? new Date(e.timestamp * 1000) : null, "datetime-seconds")}
+												{formatDate(
+													e.timestamp ? new Date(e.timestamp * 1000) : null,
+													"datetime-seconds",
+												)}
 											</td>
 											<td>{e.type}</td>
 											<td className="text-sm theme-text-muted dark:theme-text-muted whitespace-nowrap">

src/app/admin/devops/errors/page.tsx

@@ -1,5 +1,5 @@
-import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { Card, CardContent } from "@/components/ui/card";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";

src/app/admin/devops/page.tsx

@@ -1,6 +1,6 @@
 import { AlertTriangle, Database, HeartPulse, Server } from "lucide-react";
-import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";

src/app/admin/email-templates/page.tsx

@@ -1,3 +1,4 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import {
 	createEmailTemplate,
@@ -5,9 +6,8 @@ import {
 	updateEmailTemplate,
 } from "@/actions/admin-email-templates";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export default async function AdminEmailTemplates() {
 	const { session, permissions } = await getAdminContext();

src/app/admin/error.tsx

@@ -41,10 +41,16 @@ export default function AdminErrorPage({
 				{t("code")}
 			</p>
 			<h1 className="text-xl font-extrabold mb-2">{t("title")}</h1>
-			<p className="text-sm mb-1" style={{ color: "var(--admin-muted, #6b7280)" }}>
+			<p
+				className="text-sm mb-1"
+				style={{ color: "var(--admin-muted, #6b7280)" }}
+			>
 				{t("subtitle")}
 			</p>
-			<p className="text-sm mb-6" style={{ color: "var(--admin-muted, #6b7280)" }}>
+			<p
+				className="text-sm mb-6"
+				style={{ color: "var(--admin-muted, #6b7280)" }}
+			>
 				{t("body")}
 			</p>
 			<div className="flex flex-wrap gap-3 justify-center">

src/app/admin/events/[id]/page.tsx

@@ -1,6 +1,6 @@
 import { CalendarDays, Gift, Trophy, Users } from "lucide-react";
-import { getTranslations } from "next-intl/server";
 import { notFound, redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -118,7 +118,9 @@ export default async function EventDetailPage({
 				</Card>
 				<Card>
 					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">{t("statPrizes")}</CardTitle>
+						<CardTitle className="text-sm font-medium">
+							{t("statPrizes")}
+						</CardTitle>
 						<Gift className="h-4 w-4 text-muted-foreground" />
 					</CardHeader>
 					<CardContent>
@@ -138,7 +140,9 @@ export default async function EventDetailPage({
 				</Card>
 				<Card>
 					<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-						<CardTitle className="text-sm font-medium">{t("statTime")}</CardTitle>
+						<CardTitle className="text-sm font-medium">
+							{t("statTime")}
+						</CardTitle>
 						<CalendarDays className="h-4 w-4 text-muted-foreground" />
 					</CardHeader>
 					<CardContent>
@@ -189,7 +193,8 @@ export default async function EventDetailPage({
 				eventId={event.id}
 				winners={event.winners.map((w) => ({
 					...w,
-					username: userMap.get(w.userId) ?? t("userFallback", { id: w.userId }),
+					username:
+						userMap.get(w.userId) ?? t("userFallback", { id: w.userId }),
 				}))}
 			/>
 
@@ -197,7 +202,8 @@ export default async function EventDetailPage({
 			<EventRegistrations
 				registrations={event.registrations.map((r) => ({
 					...r,
-					username: userMap.get(r.userId) ?? t("userFallback", { id: r.userId }),
+					username:
+						userMap.get(r.userId) ?? t("userFallback", { id: r.userId }),
 				}))}
 			/>
 		</div>

src/app/admin/events/create/page.tsx

@@ -1,5 +1,5 @@
-import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { EventForm } from "../event-form";

src/app/admin/events/events-table.tsx

@@ -9,7 +9,7 @@ import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { useServerAction } from "@/hooks/use-server-action";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 interface EventRow {
 	id: number;

src/app/admin/events/page.tsx

@@ -48,9 +48,7 @@ export default async function EventsPage({
 		<div className="space-y-6">
 			<div className="flex justify-end">
 				<Button variant="default" asChild>
-					<Link href="/admin/events/create">
-						{t("newEvent")}
-					</Link>
+					<Link href="/admin/events/create">{t("newEvent")}</Link>
 				</Button>
 			</div>
 

src/app/admin/favicon/favicon-form.tsx

@@ -4,8 +4,8 @@ import Image from "next/image";
 import { useTranslations } from "next-intl";
 import { useRef, useState } from "react";
 import { deleteFavicon, saveFavicon } from "@/actions/save-favicon";
-import { Button } from "@/components/ui/button";
 import { useConfirmDialog } from "@/components/admin/confirm-dialog";
+import { Button } from "@/components/ui/button";
 import { FaviconGenerator } from "./favicon-generator";
 
 export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
@@ -82,7 +82,10 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
 				</h3>
 				{preview && (
 					<div className="mb-6">
-						<label htmlFor="favicon-current" className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
+						<label
+							htmlFor="favicon-current"
+							className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
+						>
 							{t("current")}
 						</label>
 						<div className="flex items-center gap-4">
@@ -117,11 +120,7 @@ export function FaviconForm({ currentUrl }: { currentUrl: string | null }) {
 					</div>
 
 					<div className="flex gap-2">
-						<Button
-							type="submit"
-							disabled={uploading}
-							variant="default"
-						>
+						<Button type="submit" disabled={uploading} variant="default">
 							{uploading ? t("uploading") : t("upload")}
 						</Button>
 						{preview && (

src/app/admin/favicon/favicon-generator.tsx

@@ -105,7 +105,10 @@ export function FaviconGenerator({ onSave }: Props) {
 
 			<div className="space-y-4">
 				<div>
-					<label htmlFor="favicon-text" className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
+					<label
+						htmlFor="favicon-text"
+						className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
+					>
 						{t("text")}
 					</label>
 					<input
@@ -120,7 +123,10 @@ export function FaviconGenerator({ onSave }: Props) {
 				</div>
 
 				<div>
-					<label htmlFor="favicon-bgColor" className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
+					<label
+						htmlFor="favicon-bgColor"
+						className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
+					>
 						{t("bgColor")}
 					</label>
 					<div className="flex items-center gap-2 mb-2">
@@ -153,7 +159,10 @@ export function FaviconGenerator({ onSave }: Props) {
 				</div>
 
 				<div>
-					<label htmlFor="favicon-textColor" className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2">
+					<label
+						htmlFor="favicon-textColor"
+						className="block text-xs font-bold text-[var(--admin-text-muted)] uppercase tracking-wider mb-2"
+					>
 						{t("textColor")}
 					</label>
 					<div className="flex items-center gap-2">

src/app/admin/favicon/page.tsx

@@ -1,7 +1,7 @@
-import { prisma } from "@/lib/prisma";
-import { FaviconForm } from "./favicon-form";
 import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
+import { FaviconForm } from "./favicon-form";
 
 export default async function AdminFaviconPage() {
 	const { session, permissions } = await getAdminContext();

src/app/admin/guilds/[id]/page.tsx

@@ -3,8 +3,8 @@ import { notFound, redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { disbandGuild } from "@/actions/admin-guilds";
 import { Button } from "@/components/ui/button";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -95,15 +95,10 @@ export default async function AdminGuildDetailPage({
 				</div>
 				<div className="flex flex-wrap gap-2">
 					<Button variant="ghost" size="sm" asChild>
-						<Link href="/admin/guilds">
-							{t("back")}
-						</Link>
+						<Link href="/admin/guilds">{t("back")}</Link>
 					</Button>
 					<Button variant="ghost" size="sm" asChild>
-						<Link
-							href={`/guilds/${guild.id}`}
-							target="_blank"
-						>
+						<Link href={`/guilds/${guild.id}`} target="_blank">
 							{t("viewPublic")}
 						</Link>
 					</Button>
@@ -193,7 +188,9 @@ export default async function AdminGuildDetailPage({
 											</Link>
 										</td>
 										<td className="muted">{m.levelId}</td>
-										<td className="muted">{formatDate(new Date(m.memberSince * 1000))}</td>
+										<td className="muted">
+											{formatDate(new Date(m.memberSince * 1000))}
+										</td>
 									</tr>
 								))}
 							</tbody>

src/app/admin/guilds/page.tsx

@@ -5,8 +5,8 @@ import { AdminSimplePager } from "@/components/admin/admin-simple-pager";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
 import { calcPagination, parseListParams } from "@/lib/admin-helpers";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -184,7 +184,9 @@ export default async function AdminGuildsPage({
 											</Link>
 										</td>
 										<td>{membersByGuild.get(g.id) ?? 0}</td>
-										<td className="muted">{formatDate(new Date(g.dateCreated * 1000), "date")}</td>
+										<td className="muted">
+											{formatDate(new Date(g.dateCreated * 1000), "date")}
+										</td>
 									</tr>
 								))}
 							</tbody>

src/app/admin/help-questions/[id]/page.tsx

@@ -3,8 +3,8 @@ import Link from "next/link";
 import { notFound, redirect } from "next/navigation";
 import { deleteHelpQuestion, updateHelpQuestion } from "@/actions/admin-help";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 

src/app/admin/help-questions/new/page.tsx

@@ -1,8 +1,8 @@
 import { HelpCircle } from "lucide-react";
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { createHelpQuestion } from "@/actions/admin-help";
 import { Button } from "@/components/ui/button";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function NewHelpQuestion({

src/app/admin/help-questions/page.tsx

@@ -1,10 +1,10 @@
 import Link from "next/link";
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
@@ -34,9 +34,7 @@ export default async function AdminHelpQuestions() {
 		<main>
 			<div className="flex justify-end mb-6">
 				<Button variant="default" asChild>
-					<Link href="/admin/help-questions/new">
-						+ {t("newEntry")}
-					</Link>
+					<Link href="/admin/help-questions/new">+ {t("newEntry")}</Link>
 				</Button>
 			</div>
 

src/app/admin/help-tickets/[id]/admin-help-ticket-detail.tsx

@@ -78,17 +78,15 @@ export function AdminHelpTicketDetail({
 	}
 
 	function handleClose() {
-		run(
-			() => closeHelpCenterTicket({ ticketId: ticket.id }),
-			{ successMessage: t("success.closed") },
-		);
+		run(() => closeHelpCenterTicket({ ticketId: ticket.id }), {
+			successMessage: t("success.closed"),
+		});
 	}
 
 	function handleReopen() {
-		run(
-			() => reopenHelpCenterTicket({ ticketId: ticket.id }),
-			{ successMessage: t("success.reopened") },
-		);
+		run(() => reopenHelpCenterTicket({ ticketId: ticket.id }), {
+			successMessage: t("success.reopened"),
+		});
 	}
 
 	return (

src/app/admin/help-tickets/[id]/page.tsx

@@ -98,8 +98,7 @@ export default async function AdminHelpTicketDetailPage({
 		}),
 	];
 
-	const creator =
-		openerId != null ? userById.get(openerId) : undefined;
+	const creator = openerId != null ? userById.get(openerId) : undefined;
 
 	const canEdit = canAccess(permissions, PERMS.TICKETS_EDIT, session.user.rank);
 

src/app/admin/help-tickets/help-tickets-table.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 export interface HelpTicketRow {
 	id: string;

src/app/admin/help-tickets/page.tsx

@@ -1,15 +1,12 @@
 import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
-import type { Prisma } from "@/generated/prisma/client";
 import { StatusCard } from "@/components/admin/dashboard";
+import type { Prisma } from "@/generated/prisma/client";
 import { calcPagination, parseListParams } from "@/lib/admin-helpers";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
-import {
-	HelpTicketsTable,
-	type HelpTicketRow,
-} from "./help-tickets-table";
+import { type HelpTicketRow, HelpTicketsTable } from "./help-tickets-table";
 
 export const dynamic = "force-dynamic";
 
@@ -116,7 +113,9 @@ export default async function AdminHelpTicketsPage({
 	const ticketIds = tickets.map((ticket) => ticket.id);
 	const userIds = [
 		...new Set(
-			tickets.map((ticket) => ticket.userId).filter((id): id is number => id != null),
+			tickets
+				.map((ticket) => ticket.userId)
+				.filter((id): id is number => id != null),
 		),
 	];
 

src/app/admin/housekeeping/client.tsx

@@ -3,8 +3,8 @@
 import { useRouter } from "next/navigation";
 import { useLocale, useTranslations } from "next-intl";
 import { useCallback, useMemo, useState } from "react";
-import { Button } from "@/components/ui/button";
 import { exportPermissions } from "@/actions/admin-housekeeping";
+import { Button } from "@/components/ui/button";
 
 /* ────────── Export Section ────────── */
 

src/app/admin/import/clone/import-clone-client.tsx

@@ -18,9 +18,9 @@ import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
 import { adminFetch } from "@/lib/admin-fetch";
 import { runSseImport } from "@/lib/sse-client";
+import { cn } from "@/lib/utils";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 

src/app/admin/import/clothing/import-clothing-client.tsx

@@ -16,10 +16,10 @@ import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
-import { getAvatarUrl } from "@/lib/imager";
 import { adminFetch } from "@/lib/admin-fetch";
+import { getAvatarUrl } from "@/lib/imager";
 import { runSseImport } from "@/lib/sse-client";
+import { cn } from "@/lib/utils";
 
 // ── Shared types ─────────────────────────────────────────────────────────────
 

src/app/admin/import/effects/import-effects-client.tsx

@@ -18,8 +18,8 @@ import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
 import { adminFetch } from "@/lib/admin-fetch";
+import { cn } from "@/lib/utils";
 
 interface EffectItem {
 	id: string;

src/app/admin/import/furni/import-furni-client.tsx

@@ -388,6 +388,7 @@ export function ImportFurniClient() {
 		setPage(1);
 		fetchItems(searchTerm, 1, statusFilter);
 	}
+	void _doSearch;
 
 	function goPage(p: number) {
 		setPage(p);

src/app/admin/import/furni/nitro-editor-dialog.tsx

@@ -245,9 +245,11 @@ export function NitroEditorDialog({
 	};
 
 	const toggleDirection = (dir: number) => {
-		const current = getNested(metadata, "logic.model.directions", [
-			0,
-		]) as number[];
+		const current = getNested(
+			metadata,
+			"logic.model.directions",
+			[0],
+		) as number[];
 		const next = current.includes(dir)
 			? current.filter((d: number) => d !== dir)
 			: [...current, dir].sort((a: number, b: number) => a - b);
@@ -568,9 +570,7 @@ export function NitroEditorDialog({
 										<Input
 											id="logic-type"
 											value={metadata.logicType || ""}
-											onChange={(e) =>
-												patchMeta("logicType", e.target.value)
-											}
+											onChange={(e) => patchMeta("logicType", e.target.value)}
 											className="mt-1 font-mono text-sm"
 										/>
 									</div>

src/app/admin/import/pets/import-pets-client.tsx

@@ -16,9 +16,9 @@ import { toast } from "sonner";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { cn } from "@/lib/utils";
 import { adminFetch } from "@/lib/admin-fetch";
 import { readSseStream } from "@/lib/sse-client";
+import { cn } from "@/lib/utils";
 
 interface PetItem {
 	lib: string;

src/app/admin/import/sync/page.tsx

@@ -11,14 +11,12 @@ export default async function SyncAllPage() {
 	return (
 		<div className="space-y-6">
 			<div>
-				<h1 className="text-2xl font-bold tracking-tight">
-					Sync All Sources
-				</h1>
+				<h1 className="text-2xl font-bold tracking-tight">Sync All Sources</h1>
 				<p className="text-muted-foreground mt-1">
-					Scan all configured clone sources and automatically import
-					any furniture that is not yet present in your hotel. Missing
-					.nitro files, icons, database entries, catalog items, and
-					FurnitureData.json will be added automatically.
+					Scan all configured clone sources and automatically import any
+					furniture that is not yet present in your hotel. Missing .nitro files,
+					icons, database entries, catalog items, and FurnitureData.json will be
+					added automatically.
 				</p>
 			</div>
 			<SyncAllClient />

src/app/admin/ip/page.tsx

@@ -1,5 +1,5 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
-import { formatDate } from "@/lib/format-date";
 import {
 	addBlacklist,
 	addWhitelist,
@@ -8,9 +8,9 @@ import {
 } from "@/actions/admin-ip";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
+import { formatDate } from "@/lib/format-date";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 
@@ -21,7 +21,6 @@ type IpRow = {
 	createdAt: Date | null;
 };
 
-
 export default async function AdminIp() {
 	const { session, permissions } = await getAdminContext();
 	if (!canAccess(permissions, PERMS.SETTINGS_VIEW, session.user.rank)) {

src/app/admin/logs/audit/audit-table.tsx

@@ -5,7 +5,7 @@ import { useState } from "react";
 import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 interface AuditRow {
 	id: number;
@@ -20,7 +20,8 @@ interface AuditRow {
 function DiffCell({ diff }: { diff: string | null }) {
 	const t = useTranslations("pages.admin.logs");
 	const [open, setOpen] = useState(false);
-	if (!diff) return <span className="text-muted-foreground">{t("emptyValue")}</span>;
+	if (!diff)
+		return <span className="text-muted-foreground">{t("emptyValue")}</span>;
 
 	let parsed: Record<string, { from: unknown; to: unknown }>;
 	try {

src/app/admin/logs/chat/chat-table.tsx

@@ -3,7 +3,7 @@
 import { useTranslations } from "next-intl";
 import { DataTable } from "@/components/admin/data-table";
 import { formatDate } from "@/lib/format-date";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 interface ChatLogRow {
 	id: number;
@@ -34,7 +34,9 @@ export function ChatTable({ data }: ChatTableProps) {
 			key: "timestamp",
 			label: t("colTime"),
 			sortable: true,
-			render: (value) => <span>{formatDate(new Date(Number(value) * 1000))}</span>,
+			render: (value) => (
+				<span>{formatDate(new Date(Number(value) * 1000))}</span>
+			),
 		},
 		{ key: "roomId", label: t("chat.colRoomId"), sortable: true },
 	];

src/app/admin/logs/commands/commands-table.tsx

@@ -3,7 +3,7 @@
 import { useTranslations } from "next-intl";
 import { DataTable } from "@/components/admin/data-table";
 import { formatDate } from "@/lib/format-date";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 interface CommandLogRow {
 	id: number;
@@ -37,7 +37,9 @@ export function CommandsTable({ data }: CommandsTableProps) {
 			key: "timestamp",
 			label: t("colTime"),
 			sortable: true,
-			render: (value) => <span>{formatDate(new Date(Number(value) * 1000))}</span>,
+			render: (value) => (
+				<span>{formatDate(new Date(Number(value) * 1000))}</span>
+			),
 		},
 	];
 

src/app/admin/logs/page.tsx

@@ -1,10 +1,10 @@
-import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
 import { buildStaffActivityWhere } from "@/lib/admin/log-filters";
 import { calcPagination, parseListParams } from "@/lib/admin-helpers";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { StaffActivitiesTable } from "./staff-activities-table";
 

src/app/admin/logs/staff-activities-table.tsx

@@ -3,7 +3,7 @@
 import { useTranslations } from "next-intl";
 import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 export interface StaffActivityRow {
 	id: number;

src/app/admin/logs/trades/trades-table.tsx

@@ -4,7 +4,7 @@ import { useTranslations } from "next-intl";
 import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
 import { formatDate } from "@/lib/format-date";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 interface TradeLogRow {
 	id: number;
@@ -46,7 +46,9 @@ export function TradesTable({ data }: TradesTableProps) {
 			key: "timestamp",
 			label: t("colTime"),
 			sortable: true,
-			render: (value) => <span>{formatDate(new Date(Number(value) * 1000))}</span>,
+			render: (value) => (
+				<span>{formatDate(new Date(Number(value) * 1000))}</span>
+			),
 		},
 	];
 

src/app/admin/maintenance/page.tsx

@@ -1,10 +1,10 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { saveMaintenance } from "@/actions/admin-maintenance";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 

src/app/admin/marketplace/page.tsx

@@ -6,8 +6,8 @@ import { AdminSimplePager } from "@/components/admin/admin-simple-pager";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
 import { calcPagination, parseListParams } from "@/lib/admin-helpers";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
@@ -91,9 +91,7 @@ export default async function AdminMarketplacePage({
 					size="sm"
 					asChild
 				>
-					<Link href="/admin/marketplace?filter=sold">
-						{t("filterSold")}
-					</Link>
+					<Link href="/admin/marketplace?filter=sold">{t("filterSold")}</Link>
 				</Button>
 			</div>
 
@@ -138,19 +136,23 @@ export default async function AdminMarketplacePage({
 											</Link>
 										</td>
 										<td>{row.price}</td>
-										<td className="muted">{formatDate(new Date(row.timestamp * 1000))}</td>
+										<td className="muted">
+											{formatDate(new Date(row.timestamp * 1000))}
+										</td>
 										{filter === "sold" ? (
-											<td className="muted">{formatDate(row.soldTimestamp ? new Date(row.soldTimestamp * 1000) : null)}</td>
+											<td className="muted">
+												{formatDate(
+													row.soldTimestamp
+														? new Date(row.soldTimestamp * 1000)
+														: null,
+												)}
+											</td>
 										) : null}
 										{canEdit && filter === "active" ? (
 											<td>
 												<form action={cancelMarketplaceListing}>
 													<input type="hidden" name="id" value={row.id} />
-													<Button
-														type="submit"
-														variant="ghost"
-														size="sm"
-													>
+													<Button type="submit" variant="ghost" size="sm">
 														{t("cancel")}
 													</Button>
 												</form>

src/app/admin/media/page.tsx

@@ -1,5 +1,5 @@
-import { AdminMediaGrid } from "@/components/admin/media-grid";
 import { redirect } from "next/navigation";
+import { AdminMediaGrid } from "@/components/admin/media-grid";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 
 export default async function AdminMediaPage() {

src/app/admin/moderation/cfh/[id]/cfh-detail.tsx

@@ -72,7 +72,6 @@ export function CfhDetail({
 	moderator,
 	banHistory,
 	canEdit,
-	// biome-ignore lint/correctness/noUnusedFunctionParameters: part of the public component API
 	currentUserId,
 	listHref = "/admin/moderation/cfh",
 	userLinkMode = "admin",
@@ -96,6 +95,7 @@ export function CfhDetail({
 	listHref?: string;
 	userLinkMode?: "admin" | "public";
 }) {
+	void currentUserId;
 	const { run, isPending } = useServerAction();
 	const [alertMsg, setAlertMsg] = useState("");
 	const [muteDuration, setMuteDuration] = useState(10);

src/app/admin/moderation/cfh/cfh-table.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 export interface CfhRow {
 	id: number;

src/app/admin/moderation/cfh/page.tsx

@@ -2,10 +2,10 @@ import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import type { Prisma } from "@/generated/prisma/client";
 import { calcPagination, parseListParams } from "@/lib/admin-helpers";
-import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { formatDate } from "@/lib/format-date";
+import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
-import { CfhTable, type CfhRow } from "./cfh-table";
+import { type CfhRow, CfhTable } from "./cfh-table";
 
 export const dynamic = "force-dynamic";
 
@@ -64,19 +64,21 @@ export default async function CfhListPage({
 	const where: Prisma.SupportTicketsWhereInput =
 		conditions.length === 0
 			? {}
-		: conditions.length === 1
-			? conditions[0]
-			: { AND: conditions };
+			: conditions.length === 1
+				? conditions[0]
+				: { AND: conditions };
 
-	const SORT_MAP: Record<string, Prisma.SupportTicketsOrderByWithRelationInput> =
-		{
-			id: { id: "desc" },
-			issue: { issue: "asc" },
-			sender: { senderId: "asc" },
-			reported: { reportedId: "asc" },
-			mod: { modId: "asc" },
-			state: { state: "asc" },
-		};
+	const SORT_MAP: Record<
+		string,
+		Prisma.SupportTicketsOrderByWithRelationInput
+	> = {
+		id: { id: "desc" },
+		issue: { issue: "asc" },
+		sender: { senderId: "asc" },
+		reported: { reportedId: "asc" },
+		mod: { modId: "asc" },
+		state: { state: "asc" },
+	};
 
 	const baseOrder = SORT_MAP[parsed.sort ?? "id"] ?? { id: "desc" };
 	const orderField = Object.keys(baseOrder)[0] as keyof typeof baseOrder;

src/app/admin/navigation/page.tsx

@@ -1,8 +1,8 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { StatusCard } from "@/components/admin/dashboard";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 // navigator_flatcats — emulator-owned flat (private-room) categories shown in the
 // navigator. The Prisma delegate exists because the table has a primary key.

src/app/admin/online/online-table.tsx

@@ -7,7 +7,7 @@ import { DataTable } from "@/components/admin/data-table";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { getAvatarUrl } from "@/lib/imager";
-import type { DataTableColumn, PaginatedResult } from "@/types";
+import type { DataTableColumn, PaginatedResult } from "@/types/common";
 
 interface OnlineUserRow {
 	id: number;

src/app/admin/permissions/[id]/page.tsx

@@ -12,9 +12,7 @@ export default async function RankEditPage({
 }) {
 	const { id: rawId } = await params;
 	const { session, permissions } = await getAdminContext();
-	if (
-		!canAccess(permissions, PERMS.PERMISSIONS_MANAGE, session.user.rank)
-	) {
+	if (!canAccess(permissions, PERMS.PERMISSIONS_MANAGE, session.user.rank)) {
 		redirect("/admin");
 	}
 

src/app/admin/permissions/[id]/rank-edit-client.tsx

@@ -251,6 +251,7 @@ export function RankEditClient({
 		if (permSearch && filtered.length === 0) return null;
 		const on = filtered.filter((k) => (perms[k] ?? "0") !== "0").length;
 		const _allOn = on === filtered.length;
+		void _allOn;
 		const open = !collapsed.has(sectionKey);
 
 		return (

src/app/admin/permissions/permissions-list.tsx

@@ -107,8 +107,8 @@ export function PermissionsList({
 					className="rounded-lg border border-[var(--admin-warning-border)] bg-[var(--admin-warning-subtle)] px-4 py-3 text-sm"
 					role="status"
 				>
-					You were sent here from the permission archive. Edit rank access
-					below — this is the live control panel.
+					You were sent here from the permission archive. Edit rank access below
+					— this is the live control panel.
 				</div>
 			) : null}
 			<div

src/app/admin/photos/page.tsx

@@ -1,10 +1,10 @@
+import { redirect } from "next/navigation";
 import { getTranslations } from "next-intl/server";
 import { deletePhoto } from "@/actions/admin-photos";
 import { StatusCard } from "@/components/admin/dashboard";
 import { Button } from "@/components/ui/button";
-import { prisma } from "@/lib/prisma";
-import { redirect } from "next/navigation";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
+import { prisma } from "@/lib/prisma";
 
 export const dynamic = "force-dynamic";
 

src/app/admin/polls/[id]/page.tsx

@@ -1,5 +1,5 @@
-import { getTranslations } from "next-intl/server";
 import { notFound, redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { AdminBreadcrumb } from "@/components/admin/admin-breadcrumb";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

src/app/admin/polls/create/page.tsx

@@ -1,5 +1,5 @@
-import { getTranslations } from "next-intl/server";
 import { redirect } from "next/navigation";
+import { getTranslations } from "next-intl/server";
 import { canAccess, getAdminContext, PERMS } from "@/lib/permissions";
 import { PollForm } from "../poll-form";