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

.prettierrc

@@ -1,9 +0,0 @@
-{
-  "semi": true,
-  "singleQuote": false,
-  "tabWidth": 2,
-  "trailingComma": "all",
-  "printWidth": 110,
-  "arrowParens": "always",
-  "endOfLine": "lf"
-}

biome.json

@@ -7,7 +7,7 @@
 	},
 	"files": {
 		"ignoreUnknown": false,
-		"includes": ["**", "!setup", "!public"]
+		"includes": ["**", "!setup", "!public", "!*.cjs"]
 	},
 	"formatter": {
 		"enabled": true,

e2e/example.spec.ts

@@ -1,16 +1,16 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 
 test("homepage has title", async ({ page }) => {
-  await page.goto("/");
+	await page.goto("/");
-  await expect(page).toHaveTitle(/Magic Hotel|Atom/i);
+	await expect(page).toHaveTitle(/Magic Hotel|Atom/i);
 });
 
 test("register page loads", async ({ page }) => {
-  await page.goto("/register");
+	await page.goto("/register");
-  await expect(page).toHaveTitle(/registreer|register|konto/i);
+	await expect(page).toHaveTitle(/registreer|register|konto/i);
 });
 
 test("login page loads", async ({ page }) => {
-  await page.goto("/login");
+	await page.goto("/login");
-  await expect(page).toHaveTitle(/inloggen|login/i);
+	await expect(page).toHaveTitle(/inloggen|login/i);
 });

eslint.config.mjs

@@ -3,19 +3,19 @@ import unusedImports from "eslint-plugin-unused-imports";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  {
+	{
-    ignores: ["node_modules", ".next", "dist", "build"],
+		ignores: ["node_modules", ".next", "dist", "build"],
-  },
+	},
-  js.configs.recommended,
+	js.configs.recommended,
-  tseslint.configs.recommended,
+	tseslint.configs.recommended,
-  {
+	{
-    files: ["src/**/*.{ts,tsx}", "pages/**/*.{ts,tsx}", "app/**/*.{ts,tsx}"],
+		files: ["src/**/*.{ts,tsx}", "pages/**/*.{ts,tsx}", "app/**/*.{ts,tsx}"],
-    plugins: {
+		plugins: {
-      "unused-imports": unusedImports,
+			"unused-imports": unusedImports,
-    },
+		},
-    rules: {
+		rules: {
-      "unused-imports/no-unused-vars": "error",
+			"unused-imports/no-unused-vars": "error",
-      "no-console": "warn",
+			"no-console": "warn",
-    },
+		},
-  }
+	},
 );

next.config.ts

@@ -1,7 +1,7 @@
-import type { NextConfig } from "next";
-import { withSentryConfig } from "@sentry/nextjs";
-import createNextIntlPlugin from "next-intl/plugin";
 import withBundleAnalyzer from "@next/bundle-analyzer";
+import { withSentryConfig } from "@sentry/nextjs";
+import type { NextConfig } from "next";
+import createNextIntlPlugin from "next-intl/plugin";
 
 const securityHeaders = [
 	{ key: "X-DNS-Prefetch-Control", value: "on" },
@@ -79,17 +79,19 @@ const withBA = withBundleAnalyzer({
 	enabled: process.env.ANALYZE === "true",
 });
 
-export default withBA(withSentryConfig(config, {
+export default withBA(
-	org: process.env.SENTRY_ORG,
+	withSentryConfig(config, {
-	project: process.env.SENTRY_PROJECT,
+		org: process.env.SENTRY_ORG,
-	authToken: sentryAuthToken,
+		project: process.env.SENTRY_PROJECT,
-	silent: !process.env.CI,
+		authToken: sentryAuthToken,
-	widenClientFileUpload: true,
+		silent: !process.env.CI,
-	sourcemaps: {
+		widenClientFileUpload: true,
-		disable: !sentryAuthToken,
+		sourcemaps: {
-	},
+			disable: !sentryAuthToken,
-	release: {
+		},
-		create: Boolean(sentryAuthToken),
+		release: {
-	},
+			create: Boolean(sentryAuthToken),
-	telemetry: false,
+		},
-}));
+		telemetry: false,
+	}),
+);

playwright.config.ts

@@ -1,33 +1,33 @@
 import { defineConfig, devices } from "@playwright/test";
 
 export default defineConfig({
-  testDir: "./e2e",
+	testDir: "./e2e",
-  fullyParallel: true,
+	fullyParallel: true,
-  forbidOnly: !!process.env.CI,
+	forbidOnly: !!process.env.CI,
-  retries: process.env.CI ? 2 : 0,
+	retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+	workers: process.env.CI ? 1 : undefined,
-  reporter: "html",
+	reporter: "html",
-  use: {
+	use: {
-    baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
+		baseURL: process.env.NEXT_PUBLIC_APP_URL || "http://localhost:3000",
-    trace: "on-first-retry",
+		trace: "on-first-retry",
-  },
+	},
-  projects: [
+	projects: [
-    {
+		{
-      name: "chromium",
+			name: "chromium",
-      use: { ...devices["Desktop Chrome"] },
+			use: { ...devices["Desktop Chrome"] },
-    },
+		},
-    {
+		{
-      name: "firefox",
+			name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
+			use: { ...devices["Desktop Firefox"] },
-    },
+		},
-    {
+		{
-      name: "webkit",
+			name: "webkit",
-      use: { ...devices["Desktop Safari"] },
+			use: { ...devices["Desktop Safari"] },
-    },
+		},
-  ],
+	],
-  webServer: {
+	webServer: {
-    command: "pnpm dev",
+		command: "pnpm dev",
-    url: "http://localhost:3000",
+		url: "http://localhost:3000",
-    reuseExistingServer: !process.env.CI,
+		reuseExistingServer: !process.env.CI,
-  },
+	},
 });

scripts/apply-migrations.ts

@@ -29,6 +29,7 @@ async function openConnection() {
 	const mysql = await import("mysql2/promise");
 	return mysql.createConnection(url);
 }
+void openConnection;
 
 async function createTrackingTable(
 	conn: import("mysql2/promise").Connection,

src/actions/admin-ads.ts

@@ -5,11 +5,11 @@ import { redirect } from "next/navigation";
 import { z } from "zod";
 import { requirePermission } from "@/lib/admin/guard";
 import { formPositiveBigInt } from "@/lib/form-data";
+import { logger } from "@/lib/logger";
 import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { adminAction } from "@/lib/safe-action";
 import { ActionError, actionOk } from "@/lib/safe-action-shared";
-import { logger } from "@/lib/logger";
 import { logStaffActivity } from "@/lib/services/staff-activity";
 
 // CRUD for website advertisements (website_ads). Emulator does not own this

src/actions/admin-applications.ts

@@ -2,8 +2,8 @@
 
 import { revalidatePath } from "next/cache";
 import { requirePermission } from "@/lib/admin/guard";
-import { PERMS } from "@/lib/permissions";
 import { formPositiveBigInt } from "@/lib/form-data";
+import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export async function dismissApplication(formData: FormData): Promise<void> {

src/actions/admin-articles.ts

@@ -3,8 +3,8 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { requirePermission } from "@/lib/admin/guard";
-import { PERMS } from "@/lib/permissions";
 import { slugify } from "@/lib/format";
+import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 async function uniqueSlug(title: string): Promise<string> {
@@ -74,9 +74,7 @@ export async function updateArticle(formData: FormData): Promise<void> {
 					.normalize("NFC")
 					.trim()
 					.slice(0, 255),
-				...(rawSlug
+				...(rawSlug ? { slug: await uniqueSlug(rawSlug) } : {}),
-					? { slug: await uniqueSlug(rawSlug) }
-					: {}),
 				shortStory: String(formData.get("shortStory") ?? "")
 					.normalize("NFC")
 					.trim()

src/actions/admin-email-templates.ts

@@ -2,8 +2,8 @@
 
 import { revalidatePath } from "next/cache";
 import { requirePermission } from "@/lib/admin/guard";
-import { PERMS } from "@/lib/permissions";
 import { formPositiveBigInt } from "@/lib/form-data";
+import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export async function createEmailTemplate(formData: FormData): Promise<void> {

src/actions/admin-help.ts

@@ -3,9 +3,9 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { requirePermission } from "@/lib/admin/guard";
-import { PERMS } from "@/lib/permissions";
 import { formPositiveBigInt } from "@/lib/form-data";
 import { canonicalize, sanitizeField } from "@/lib/foundation/security";
+import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { logStaffActivity } from "@/lib/services/staff-activity";
 
@@ -26,8 +26,10 @@ export async function createHelpQuestion(formData: FormData): Promise<void> {
 	const imageUrl = sanitizeField(formData.get("imageUrl"));
 	const buttonText = sanitizeField(formData.get("buttonText"));
 	const buttonUrl = sanitizeField(formData.get("buttonUrl"));
-	const buttonColor = sanitizeField(formData.get("buttonColor"), 16) || "#eeb425";
+	const buttonColor =
-	const buttonBorderColor = sanitizeField(formData.get("buttonBorderColor"), 16) || "#facc15";
+		sanitizeField(formData.get("buttonColor"), 16) || "#eeb425";
+	const buttonBorderColor =
+		sanitizeField(formData.get("buttonBorderColor"), 16) || "#facc15";
 
 	try {
 		const entry = await prisma.websiteHelpCenterCategories.create({
@@ -73,8 +75,10 @@ export async function updateHelpQuestion(formData: FormData): Promise<void> {
 	const imageUrl = sanitizeField(formData.get("imageUrl"));
 	const buttonText = sanitizeField(formData.get("buttonText"));
 	const buttonUrl = sanitizeField(formData.get("buttonUrl"));
-	const buttonColor = sanitizeField(formData.get("buttonColor"), 16) || "#eeb425";
+	const buttonColor =
-	const buttonBorderColor = sanitizeField(formData.get("buttonBorderColor"), 16) || "#facc15";
+		sanitizeField(formData.get("buttonColor"), 16) || "#eeb425";
+	const buttonBorderColor =
+		sanitizeField(formData.get("buttonBorderColor"), 16) || "#facc15";
 
 	try {
 		await prisma.websiteHelpCenterCategories.update({

src/actions/admin-media.ts

@@ -4,8 +4,8 @@ import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { revalidatePath } from "next/cache";
 import { requirePermission } from "@/lib/admin/guard";
-import { PERMS } from "@/lib/permissions";
 import { MEDIA_ROOT, resolveMediaPath } from "@/lib/media-storage";
+import { PERMS } from "@/lib/permissions";
 
 const MAX_SIZE = 5 * 1024 * 1024; // 5MB
 const ALLOWED = ["image/png", "image/jpeg", "image/gif", "image/webp"];
@@ -19,7 +19,10 @@ export async function uploadMedia(
 	if (file.size > MAX_SIZE)
 		return { ok: false, error: "File too large (max 5MB)" };
 	if (!ALLOWED.includes(file.type))
-		return { ok: false, error: "Invalid file type. Allowed: PNG, JPEG, GIF, WebP" };
+		return {
+			ok: false,
+			error: "Invalid file type. Allowed: PNG, JPEG, GIF, WebP",
+		};
 
 	const baseDir = MEDIA_ROOT;
 	// eslint-disable-next-line security/detect-non-literal-fs-filename

src/actions/admin-rare-values.ts

@@ -2,8 +2,8 @@
 
 import { revalidatePath } from "next/cache";
 import { requirePermission } from "@/lib/admin/guard";
-import { PERMS } from "@/lib/permissions";
 import { formPositiveBigInt } from "@/lib/form-data";
+import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 
 export async function createCategory(formData: FormData): Promise<void> {

src/actions/admin-settings.ts

@@ -11,8 +11,8 @@ import {
 } from "@/lib/habbo-gamedata-hotel";
 import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
-import { clearBadgeCache } from "@/lib/services/habboassets";
 import { clearHabboItCache } from "@/lib/services/habbo-furnidata-cache";
+import { clearBadgeCache } from "@/lib/services/habboassets";
 import { siteSettings } from "@/lib/services/site-settings";
 
 const managedKeySet = new Set(MANAGED_SETTING_KEYS);

src/actions/admin-shop.ts

@@ -3,8 +3,8 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { requirePermission } from "@/lib/admin/guard";
-import { PERMS } from "@/lib/permissions";
 import { formPositiveBigInt } from "@/lib/form-data";
+import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { logServerError } from "@/lib/server-log";
 import { logStaffActivity } from "@/lib/services/staff-activity";

src/actions/admin-theme.ts

@@ -7,6 +7,7 @@ import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
 import { logStaffActivity } from "@/lib/services/staff-activity";
+import { ensureReadableThemeColors } from "@/lib/theme-contrast";
 import {
 	deleteCustomThemeStore,
 	getCustomTheme,
@@ -15,7 +16,6 @@ import {
 } from "@/lib/theme-custom-store";
 import { FONTS, PRESETS, THEME_COLOR_KEYS } from "@/lib/theme-presets";
 import { presetSettings, settingKey } from "@/lib/theme-settings";
-import { ensureReadableThemeColors } from "@/lib/theme-contrast";
 
 // Only hex/keyword colour values are accepted (matches ThemeVars' sanitiser).
 const COLOR_RE = /^[#a-zA-Z0-9(),.\s%-]+$/;
@@ -46,7 +46,10 @@ export async function saveTheme(formData: FormData): Promise<void> {
 			}
 			const fixed = ensureReadableThemeColors(bag);
 			for (const [key, value] of Object.entries(fixed)) {
-				await writeSetting(settingKey(key as (typeof THEME_COLOR_KEYS)[number], mode), value);
+				await writeSetting(
+					settingKey(key as (typeof THEME_COLOR_KEYS)[number], mode),
+					value,
+				);
 			}
 		}
 		const ADMIN_KEYS = [

src/actions/admin-vouchers.ts

@@ -1,14 +1,14 @@
 "use server";
 
 import { revalidatePath } from "next/cache";
-import { positiveBigInt } from "@/lib/api";
 import { requirePermission } from "@/lib/admin/guard";
+import { positiveBigInt } from "@/lib/api";
 import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import {
+	type ActionResult,
 	actionError,
 	actionOk,
-	type ActionResult,
 } from "@/lib/safe-action-shared";
 import { logServerError } from "@/lib/server-log";
 

src/actions/admin-wordfilter.ts

@@ -5,9 +5,9 @@ import { requirePermission } from "@/lib/admin/guard";
 import { PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import {
+	type ActionResult,
 	actionError,
 	actionOk,
-	type ActionResult,
 } from "@/lib/safe-action-shared";
 import { reloadWordFilter } from "@/lib/services/moderation";
 import { rcon } from "@/lib/services/rcon";
@@ -33,9 +33,7 @@ export async function addWord(input: {
 	}
 }
 
-export async function deleteWord(input: {
+export async function deleteWord(input: { id: string }): Promise<ActionResult> {
-	id: string;
-}): Promise<ActionResult> {
 	await requirePermission(PERMS.WORDFILTER_EDIT);
 	const raw = String(input.id ?? "").normalize("NFC");
 	if (!raw) return actionError("Missing word id");

src/actions/draw-badge.ts

@@ -64,63 +64,65 @@ export async function buyBadge(formData: FormData): Promise<void> {
 		if (!(await rateLimit(`draw-badge-buy:${userId}`, 5, 60_000)).ok) {
 			outcome = "ratelimit";
 		} else {
-		const badge = await prisma.websiteDrawbadges.findUnique({
+			const badge = await prisma.websiteDrawbadges.findUnique({
-			where: { id: BigInt(rawId) },
+				where: { id: BigInt(rawId) },
-			select: { id: true, badgePath: true, published: true },
+				select: { id: true, badgePath: true, published: true },
-		});
+			});
 
-		if (!badge?.published) {
+			if (!badge?.published) {
-			outcome = "invalid";
-		} else {
-			const code = badgeCodeFromPath(badge.badgePath);
-			if (code.length === 0) {
 				outcome = "invalid";
 			} else {
-				const price = await resolvePrice();
+				const code = badgeCodeFromPath(badge.badgePath);
-
+				if (code.length === 0) {
-				// Re-read the buyer's live credit balance and verify it covers the cost.
+					outcome = "invalid";
-				const buyer = await prisma.user.findUnique({
-					where: { id: userId },
-					select: { credits: true },
-				});
-				if (!buyer || buyer.credits < price) {
-					outcome = "credits";
 				} else {
-					// Atomically deduct credits and persist the badge so a failure
+					const price = await resolvePrice();
-					// between the two operations cannot orphan the user.
-					if (price > 0) {
-						await prisma.$transaction(async (tx: Prisma.TransactionClient) => {
-							await tx.user.update({
-								where: { id: userId },
-								data: { credits: { decrement: price } },
-							});
 
-							const existing = await tx.usersBadges.findFirst({
+					// Re-read the buyer's live credit balance and verify it covers the cost.
-								where: { userId, badgeCode: code },
+					const buyer = await prisma.user.findUnique({
-								select: { id: true },
+						where: { id: userId },
-							});
+						select: { credits: true },
-							if (!existing) {
+					});
-								const max = await tx.usersBadges.aggregate({
+					if (!buyer || buyer.credits < price) {
-									where: { userId },
+						outcome = "credits";
-									_max: { slotId: true },
+					} else {
-								});
+						// Atomically deduct credits and persist the badge so a failure
-								const slotId = (max._max.slotId ?? 0) + 1;
+						// between the two operations cannot orphan the user.
-								await tx.usersBadges.create({
+						if (price > 0) {
-									data: { userId, slotId, badgeCode: code },
+							await prisma.$transaction(
-								});
+								async (tx: Prisma.TransactionClient) => {
-							}
+									await tx.user.update({
-						});
+										where: { id: userId },
+										data: { credits: { decrement: price } },
+									});
+
+									const existing = await tx.usersBadges.findFirst({
+										where: { userId, badgeCode: code },
+										select: { id: true },
+									});
+									if (!existing) {
+										const max = await tx.usersBadges.aggregate({
+											where: { userId },
+											_max: { slotId: true },
+										});
+										const slotId = (max._max.slotId ?? 0) + 1;
+										await tx.usersBadges.create({
+											data: { userId, slotId, badgeCode: code },
+										});
+									}
+								},
+							);
+						}
+
+						// Grant the badge live so it appears immediately for online users.
+						await rcon.giveBadge(userId, code).catch(() => {});
+
+						outcome = "bought";
+						boughtCode = code;
 					}
-
-					// Grant the badge live so it appears immediately for online users.
-					await rcon.giveBadge(userId, code).catch(() => {});
-
-					outcome = "bought";
-					boughtCode = code;
 				}
 			}
 		}
-		}
 	} catch {
 		outcome = "fail";
 	}

src/actions/email-verify.test.ts

@@ -53,9 +53,9 @@ describe("email verification tokens", () => {
 
 	it("rejects legacy forever-valid digests", async () => {
 		const legacy = "a".repeat(64);
-		expect(
+		expect(await isValidVerificationToken("[email protected]", legacy)).toBe(
-			await isValidVerificationToken("[email protected]", legacy),
+			false,
-		).toBe(false);
+		);
 	});
 
 	it("rejects expired tokens", async () => {
@@ -69,18 +69,19 @@ describe("email verification tokens", () => {
 	});
 
 	it("sends mail with a verify link", async () => {
-		mockGetTranslations.mockResolvedValue(
+		mockGetTranslations.mockResolvedValue(((
-			((key: string, values?: { hotel?: string }) => {
+			key: string,
-				const map: Record<string, string> = {
+			values?: { hotel?: string },
-					subject: `Verify your email · ${values?.hotel}`,
+		) => {
-					heading: "Verify your email",
+			const map: Record<string, string> = {
-					body: `Welcome to ${values?.hotel}!`,
+				subject: `Verify your email · ${values?.hotel}`,
-					button: "Verify email",
+				heading: "Verify your email",
-					fallback: "Paste this link:",
+				body: `Welcome to ${values?.hotel}!`,
-				};
+				button: "Verify email",
-				return map[key] ?? key;
+				fallback: "Paste this link:",
-			}) as never,
+			};
-		);
+			return map[key] ?? key;
+		}) as never);
 
 		await sendVerification("[email protected]");
 		expect(mockSendMail).toHaveBeenCalledWith(

src/actions/help-tickets.ts

@@ -3,10 +3,10 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { z } from "zod";
+import { positiveBigInt } from "@/lib/api";
 import { auth } from "@/lib/auth";
 import { prisma } from "@/lib/prisma";
 import { clientIp, rateLimit } from "@/lib/rate-limit";
-import { positiveBigInt } from "@/lib/api";
 import { moderateOrThrow } from "@/lib/services/moderation";
 import { createOwnedTicketReply } from "@/lib/services/ticket-replies";
 

src/actions/messenger.ts

@@ -3,8 +3,8 @@
 import { revalidatePath } from "next/cache";
 import { redirect } from "next/navigation";
 import { auth } from "@/lib/auth";
-import { clientIp, rateLimit } from "@/lib/rate-limit";
 import { prisma } from "@/lib/prisma";
+import { clientIp, rateLimit } from "@/lib/rate-limit";
 
 type FriendOutcome =
 	| "accepted"
@@ -71,68 +71,72 @@ export async function acceptFriend(formData: FormData): Promise<void> {
 		if (!(await rateLimit(`friend-accept:${meId}`, 10, 60_000)).ok) {
 			outcome = "ratelimit";
 		} else {
-		const requestId = Number(formData.get("requestId"));
+			const requestId = Number(formData.get("requestId"));
-		if (!Number.isInteger(requestId) || requestId <= 0) {
+			if (!Number.isInteger(requestId) || requestId <= 0) {
-			outcome = "invalid";
+				outcome = "invalid";
-		} else {
-			// The request must exist AND be addressed to the session user.
-			const request = await prisma.messengerFriendrequests.findUnique({
-				where: { id: requestId },
-				select: { id: true, userFromId: true, userToId: true },
-			});
-			if (!request) {
-				outcome = "not_found";
-			} else if (request.userToId !== meId) {
-				outcome = "unauthorized";
 			} else {
-				const friendId = request.userFromId;
+				// The request must exist AND be addressed to the session user.
-				if (!Number.isInteger(friendId) || friendId <= 0 || friendId === meId) {
+				const request = await prisma.messengerFriendrequests.findUnique({
-					// Malformed/self request — clear it and treat as not found.
+					where: { id: requestId },
-					await prisma.messengerFriendrequests.delete({
+					select: { id: true, userFromId: true, userToId: true },
-						where: { id: requestId },
+				});
-					});
+				if (!request) {
 					outcome = "not_found";
+				} else if (request.userToId !== meId) {
+					outcome = "unauthorized";
 				} else {
-					const friendsSince = Math.floor(Date.now() / 1000);
+					const friendId = request.userFromId;
-
+					if (
-					await prisma.$transaction(async (tx) => {
+						!Number.isInteger(friendId) ||
-						// Don't double-insert if a friendship already exists in either direction.
+						friendId <= 0 ||
-						const existing = await tx.messengerFriendships.findFirst({
+						friendId === meId
-							where: {
+					) {
-								OR: [
+						// Malformed/self request — clear it and treat as not found.
-									{ userOneId: meId, userTwoId: friendId },
+						await prisma.messengerFriendrequests.delete({
-									{ userOneId: friendId, userTwoId: meId },
+							where: { id: requestId },
-								],
-							},
-							select: { id: true },
 						});
+						outcome = "not_found";
+					} else {
+						const friendsSince = Math.floor(Date.now() / 1000);
 
-						if (!existing) {
+						await prisma.$transaction(async (tx) => {
-							await tx.messengerFriendships.createMany({
+							// Don't double-insert if a friendship already exists in either direction.
-								data: [
+							const existing = await tx.messengerFriendships.findFirst({
-									{ userOneId: meId, userTwoId: friendId, friendsSince },
+								where: {
-									{ userOneId: friendId, userTwoId: meId, friendsSince },
+									OR: [
-								],
+										{ userOneId: meId, userTwoId: friendId },
+										{ userOneId: friendId, userTwoId: meId },
+									],
+								},
+								select: { id: true },
 							});
-						}
 
-						// Clear this request and any reverse pending request between the pair.
+							if (!existing) {
-						await tx.messengerFriendrequests.deleteMany({
+								await tx.messengerFriendships.createMany({
-							where: {
+									data: [
-								OR: [
+										{ userOneId: meId, userTwoId: friendId, friendsSince },
-									{ id: requestId },
+										{ userOneId: friendId, userTwoId: meId, friendsSince },
-									{ userFromId: meId, userToId: friendId },
+									],
-									{ userFromId: friendId, userToId: meId },
+								});
-								],
+							}
-							},
+
+							// Clear this request and any reverse pending request between the pair.
+							await tx.messengerFriendrequests.deleteMany({
+								where: {
+									OR: [
+										{ id: requestId },
+										{ userFromId: meId, userToId: friendId },
+										{ userFromId: friendId, userToId: meId },
+									],
+								},
+							});
 						});
-					});
 
-					outcome = "accepted";
+						outcome = "accepted";
+					}
 				}
 			}
 		}
-		}
 	} catch (e) {
 		// redirect() throws a NEXT_REDIRECT control-flow signal — re-throw it.
 		if (
@@ -172,26 +176,26 @@ export async function declineFriendRequest(formData: FormData): Promise<void> {
 		if (!(await rateLimit(`friend-decline:${meId}`, 10, 60_000)).ok) {
 			outcome = "ratelimit";
 		} else {
-		const requestId = Number(formData.get("requestId"));
+			const requestId = Number(formData.get("requestId"));
-		if (!Number.isInteger(requestId) || requestId <= 0) {
+			if (!Number.isInteger(requestId) || requestId <= 0) {
-			outcome = "invalid";
+				outcome = "invalid";
-		} else {
-			const request = await prisma.messengerFriendrequests.findUnique({
-				where: { id: requestId },
-				select: { id: true, userToId: true },
-			});
-			if (!request) {
-				outcome = "not_found";
-			} else if (request.userToId !== meId) {
-				outcome = "unauthorized";
 			} else {
-				await prisma.messengerFriendrequests.delete({
+				const request = await prisma.messengerFriendrequests.findUnique({
 					where: { id: requestId },
+					select: { id: true, userToId: true },
 				});
-				outcome = "declined";
+				if (!request) {
+					outcome = "not_found";
+				} else if (request.userToId !== meId) {
+					outcome = "unauthorized";
+				} else {
+					await prisma.messengerFriendrequests.delete({
+						where: { id: requestId },
+					});
+					outcome = "declined";
+				}
 			}
 		}
-		}
 	} catch (e) {
 		if (
 			e &&
@@ -231,34 +235,34 @@ export async function removeFriendship(formData: FormData): Promise<void> {
 		if (!(await rateLimit(`friend-remove:${meId}`, 10, 60_000)).ok) {
 			outcome = "ratelimit";
 		} else {
-		const friendId = Number(formData.get("friendId"));
+			const friendId = Number(formData.get("friendId"));
-		if (!Number.isInteger(friendId) || friendId <= 0 || friendId === meId) {
+			if (!Number.isInteger(friendId) || friendId <= 0 || friendId === meId) {
-			outcome = "invalid";
+				outcome = "invalid";
-		} else {
+			} else {
-			const deleted = await prisma.$transaction(async (tx) => {
+				const deleted = await prisma.$transaction(async (tx) => {
-				const result = await tx.messengerFriendships.deleteMany({
+					const result = await tx.messengerFriendships.deleteMany({
-					where: {
+						where: {
-						OR: [
+							OR: [
-							{ userOneId: meId, userTwoId: friendId },
+								{ userOneId: meId, userTwoId: friendId },
-							{ userOneId: friendId, userTwoId: meId },
+								{ userOneId: friendId, userTwoId: meId },
-						],
+							],
-					},
+						},
+					});
+
+					await tx.messengerFriendrequests.deleteMany({
+						where: {
+							OR: [
+								{ userFromId: meId, userToId: friendId },
+								{ userFromId: friendId, userToId: meId },
+							],
+						},
+					});
+
+					return result.count;
 				});
 
-				await tx.messengerFriendrequests.deleteMany({
+				outcome = deleted > 0 ? "removed" : "not_found";
-					where: {
+			}
-						OR: [
-							{ userFromId: meId, userToId: friendId },
-							{ userFromId: friendId, userToId: meId },
-						],
-					},
-				});
-
-				return result.count;
-			});
-
-			outcome = deleted > 0 ? "removed" : "not_found";
-		}
 		}
 	} catch (e) {
 		if (

src/actions/radio-apply.ts

@@ -12,11 +12,7 @@ const NAME_MAX = 255;
 const TEXT_MAX = 5000;
 const STYLE_MAX = 5000;
 
-type ApplyOutcome =
+type ApplyOutcome = "submitted" | "invalid" | "ratelimit" | "error";
-	| "submitted"
-	| "invalid"
-	| "ratelimit"
-	| "error";
 
 function applyRedirect(outcome: ApplyOutcome): never {
 	if (outcome === "submitted") redirect("/radio/apply?submitted=1");

src/actions/radio-requests.ts

@@ -9,12 +9,7 @@ import { clientIp, rateLimit } from "@/lib/rate-limit";
 const SONG_MAX = 255;
 const ARTIST_MAX = 255;
 
-type RequestOutcome =
+type RequestOutcome = "posted" | "empty" | "invalid" | "ratelimit" | "error";
-	| "posted"
-	| "empty"
-	| "invalid"
-	| "ratelimit"
-	| "error";
 
 function requestsRedirect(outcome: RequestOutcome): never {
 	if (outcome === "posted") redirect("/radio/requests?posted=1");

src/actions/radio-shouts.ts

@@ -12,12 +12,7 @@ const shoutSchema = z.object({
 	message: z.string().min(1, "Message is required").max(255),
 });
 
-type ShoutOutcome =
+type ShoutOutcome = "posted" | "invalid" | "moderated" | "ratelimit" | "error";
-	| "posted"
-	| "invalid"
-	| "moderated"
-	| "ratelimit"
-	| "error";
 
 function shoutsRedirect(outcome: ShoutOutcome): never {
 	if (outcome === "posted") redirect("/radio/shouts?posted=1");

src/actions/register.ts

@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { z } from "zod";
 import { sendVerification } from "@/actions/email-verify";
 import { hashPassword } from "@/lib/auth/password";
+import { logger } from "@/lib/logger";
 import { prisma } from "@/lib/prisma";
 import { clientIp, rateLimit } from "@/lib/rate-limit";
 import { captchaConfig, verifyCaptcha } from "@/lib/services/captcha";
@@ -100,6 +101,7 @@ export async function register(
 		});
 		if (existing) return "That username is already taken";
 	} catch {
+		logger.warn("Username uniqueness check failed during registration");
 		return "Registration is temporarily unavailable";
 	}
 
@@ -122,10 +124,11 @@ export async function register(
 			try {
 				await sendVerification(mail);
 			} catch {
-				// No-op: account is created; user can request a new link later.
+				logger.warn("Failed to send verification email after registration");
 			}
 		}
 	} catch {
+		logger.warn("Account creation failed");
 		return "Could not create the account (is the username unique?)";
 	}
 

src/actions/save-favicon.ts

@@ -3,9 +3,9 @@
 import { mkdir, unlink, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { revalidatePath } from "next/cache";
+import { resolveMediaPath } from "@/lib/media-storage";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
-import { resolveMediaPath } from "@/lib/media-storage";
 
 const FAVICON_DIR = resolveMediaPath("favicon");
 const MAX_SIZE = 2 * 1024 * 1024; // 2MB

src/actions/save-logo.ts

@@ -3,9 +3,9 @@
 import { mkdir, writeFile } from "node:fs/promises";
 import path from "node:path";
 import { revalidatePath } from "next/cache";
+import { resolveMediaPath } from "@/lib/media-storage";
 import { prisma } from "@/lib/prisma";
 import { siteSettings } from "@/lib/services/site-settings";
-import { resolveMediaPath } from "@/lib/media-storage";
 
 const MEDIA_DIR = resolveMediaPath("logo");
 

src/actions/sessions.ts

@@ -37,10 +37,13 @@ export async function signOutEverywhere(): Promise<void> {
 			where: personalTokenScope(userId),
 		});
 	} catch (err) {
-		logger.warn("Failed to revoke personal access tokens during sign-out-everywhere", {
+		logger.warn(
-			userId,
+			"Failed to revoke personal access tokens during sign-out-everywhere",
-			error: err instanceof Error ? err.message : "Unknown",
+			{
-		});
+				userId,
+				error: err instanceof Error ? err.message : "Unknown",
+			},
+		);
 	}
 
 	await signOut({ redirectTo: "/login?signedOutAll=1" });

src/actions/shop.ts

@@ -28,12 +28,7 @@ function parseBadgeCodes(raw: string | null | undefined): string[] {
 		.filter((s) => s.length > 0 && s.length <= 32);
 }
 
-type BuyOutcome =
+type BuyOutcome = "bought" | "invalid" | "credits" | "ratelimit" | "error";
-	| "bought"
-	| "invalid"
-	| "credits"
-	| "ratelimit"
-	| "error";
 
 function shopRedirect(
 	categoryId: string,

src/actions/social.ts

@@ -22,12 +22,7 @@ type FriendRequestOutcome =
 	| "ratelimit"
 	| "error";
 
-type ThreadOutcome =
+type ThreadOutcome = "posted" | "invalid" | "not_found" | "ratelimit" | "error";
-	| "posted"
-	| "invalid"
-	| "not_found"
-	| "ratelimit"
-	| "error";
 
 type ReplyOutcome =
 	| "replied"

src/actions/users.ts

@@ -388,6 +388,7 @@ export const muteUser = adminAction(
 	{ permission: PERMS.USERS_EDIT, schema: muteSchema },
 	async (ctx) => {
 		const _target = await guardRank(ctx.data.userId, ctx.session.user.rank);
+		void _target;
 		const success = await rcon.muteUser(ctx.data.userId, ctx.data.duration);
 		if (!success)
 			throw new ActionError("Failed to mute. Is the emulator running?");
@@ -440,6 +441,7 @@ export const sendCredits = adminAction(
 	{ permission: PERMS.USERS_EDIT, schema: sendCreditsSchema },
 	async (ctx) => {
 		const _target = await guardRank(ctx.data.userId, ctx.session.user.rank);
+		void _target;
 		const success = await rcon.giveCredits(ctx.data.userId, ctx.data.amount);
 		if (!success)
 			throw new ActionError("Failed to send credits. Is the emulator running?");

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.maxPlayers != null && event._count.registrations >= event.maxPlayers;
-		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")}{" "}
+					{t("loginToReply")} <Link href="/login">{t("loginLink")}</Link>
-					<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. */}
+				{/* content is author-supplied HTML — sanitised server-side. */}
-		<SanitizedHtml html={sanitize(content)} style={{ lineHeight: 1.7 }} />
+				<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 = [
+	const authorIds = [...new Set([userId, ...replies.map((r) => r.userId)])];
-		...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 { Clock } from "@/components/clock";
-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 { 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={{
+				<div
-					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
-					backdropFilter: "blur(14px)",
+					style={{
-					WebkitBackdropFilter: "blur(14px)",
+						background:
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+							"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={{
+					<div
-						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+						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">
+				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
-			{/* Left panel */}
+					{/* Left panel */}
-			<div className="lg:w-80 shrink-0 space-y-4">
+					<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 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)",
+								borderColor:
-								background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
+									"color-mix(in srgb, var(--color-primary) 20%, transparent)",
-								color: "var(--color-primary-readable, var(--color-primary))",
+								background: `url(/assets/images/background.png) center/cover no-repeat`,
 							}}
 						>
-							<span className="relative flex h-2 w-2">
+							<div
-								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+								className="absolute inset-0"
-								<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+								style={{
-							</span>
+									background:
-							{th("online", { count: online, hotel: "" }).trim()}
+										"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"
+						{recentUsers.length > 0 && (
-							style={{ color: "var(--color-text-readable)", fontFamily: "var(--font-nunito)" }}
+							<div
-						>
+								className="overflow-hidden rounded-xl border"
-							{t("welcomeBack")}
+								style={{
-						</h1>
+									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] =
+		const [
-			await Promise.all([
+			user,
-				prisma.user.findUnique({
+			imagerBase,
-					where: { id: userId },
+			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,
+						name: true,
-						look: true,
+						ownerName: true,
-						motto: true,
+						users: true,
-						rank: true,
+						usersMax: true,
-						credits: true,
-						accountCreated: true,
-						lastLogin: true,
-						lastOnline: true,
 					},
-				}),
+					take: 6,
-				siteSettings.get(
+				})
-					"habbo_imaging_url",
+				.catch(() => []),
-					"https://www.habbo.com/habbo-imaging/avatarimage",
+			prisma.usersBadges
-				),
+				.findMany({
-				resolveHotelName(),
+					where: { userId, slotId: { gt: 0 } },
-				prisma.websiteSetting
+					orderBy: { slotId: "asc" },
-					.findUnique({
+					select: { badgeCode: true, slotId: true },
-						where: { key: "referrals_needed" },
+				})
-						select: { value: true },
+				.catch(() => []),
-					})
+			prisma.websiteLoginLogs
-					.catch(() => null),
+				.findFirst({
-				prisma.websiteSetting
+					where: { userId },
-					.findUnique({
+					orderBy: { id: "desc" },
-						where: { key: "referral_reward_amount" },
+					select: { createdAt: true },
-						select: { value: true },
+				})
-					})
+				.catch(() => null),
-					.catch(() => null),
+			prisma.usersSettings
-				prisma.websiteSetting
+				.findUnique({
-					.findFirst({
+					where: { userId },
-						where: {
+					select: { achievementScore: true, respectsReceived: true },
-							key: {
+				})
-								in: [
+				.catch(() => null),
-									"referral_reward_currency_type",
+			prisma.messengerFriendships
-									"referral_reward_currency",
+				.count({
-								],
+					where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
-							},
+				})
-						},
+				.catch(() => 0),
-						select: { value: true },
+			prisma.messengerOffline.count({ where: { userId } }).catch(() => 0),
-					})
+		]);
-					.catch(() => null),
+
-				siteSettings.get("hotel_alert_banner", ""),
+		void lastWebLogin;
-				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),
-			]);
 
 		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 imager =
-		const avatarFull = avatarImageUrl(imager, user.look, { size: "l", direction: 2 });
+			imagerBase ?? "https://www.habbo.com/habbo-imaging/avatarimage";
-		const avatarHead = avatarImageUrl(imager, user.look, { headOnly: true, direction: 2, size: "s" });
+		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)" }} />
+							<div
-							<Image src={avatarFull} alt="" width={120} height={160} className="object-contain drop-shadow-xl relative" unoptimized priority />
+								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)",
+									borderColor:
-									boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+										"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)",
+									borderColor:
-									background: "color-mix(in srgb, var(--color-primary) 10%, transparent)",
+										"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)" }}>
+						<div
-							<p className="text-sm font-bold" style={{ color: "var(--color-accent)" }}>{alertRaw}</p>
+							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>
+								<h2
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+									className="text-lg font-black tracking-tight"
-									{onlineFriends.length === 0 ? "None of your friends are online right now" : `${onlineFriends.length} of your ${friends.length} friends online`}
+									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
-											<p className="text-[10px] font-semibold truncate mt-0.5" style={{ color: "var(--color-text-muted)" }}>{friend.motto || "No motto"}</p>
+												className="text-sm font-extrabold truncate"
-											<span className="inline-flex items-center gap-1 text-[10px] font-bold mt-1" style={{ color: "var(--color-success)" }}>
+												style={{ color: "var(--color-text-readable)" }}
-												<span className="w-1.5 h-1.5 rounded-full" style={{ background: "var(--color-success)" }} /> Online
+											>
+												{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>
+							<h2
-							<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Refer new users and earn in-game rewards</p>
+								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"
+									<button
-										style={{ background: "var(--color-primary)", color: "var(--color-primary-foreground)", boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)" }}
+										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"
+								<button
-									style={{ background: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)", color: "var(--color-text-muted)" }}
+									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>
+									<h2
-									<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>Newest rooms in the hotel</p>
+										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
-										<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>{room.ownerName} &middot; {room.users}/{room.usersMax}</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>
+								<h2
-								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped</p>
+									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)" }}>
+					<div
-						<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>Quick links</h2>
+						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)" }}>
+				<p
-					We couldn&apos;t load your dashboard right now. Please try again shortly.
+					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
+					article.createdAt ? formatDate(article.createdAt, "date") : undefined
-						? 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. */}
+				{/* Article body is rich HTML (atom uses TinyMCE) — sanitised server-side. */}
-			<SanitizedHtml html={sanitize(article.fullStory)} className="article-body" />
+				<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 { siteSettings } from "@/lib/services/site-settings";
-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";
 
 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] =
+	const [
-		await Promise.all([
+		online,
-			cached("online_count", 10_000, () =>
+		users,
-				prisma.user.count({ where: { online: "1" } }),
+		rooms,
-			).catch(() => 0),
+		articles,
-			cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0),
+		recentUsers,
-			cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0),
+		recentPhotos,
-			prisma.websiteArticles
+		latestUsers,
-				.findMany({ orderBy: { createdAt: "desc" }, take: 5 })
+	] = await Promise.all([
-				.catch(() => []),
+		cached("online_count", 10_000, () =>
-			prisma.user
+			prisma.user.count({ where: { online: "1" } }),
-				.findMany({
+		).catch(() => 0),
-					where: { online: "1" },
+		cached("total_users", 30_000, () => prisma.user.count()).catch(() => 0),
-					select: { username: true, look: true },
+		cached("total_rooms", 30_000, () => prisma.rooms.count()).catch(() => 0),
-					take: 30,
+		prisma.websiteArticles
-				})
+			.findMany({ orderBy: { createdAt: "desc" }, take: 5 })
-				.catch(() => []),
+			.catch(() => []),
-			prisma.cameraWeb
+		prisma.user
-				.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
+			.findMany({
-				.catch(() => []),
+				where: { online: "1" },
-			prisma.user
+				select: { username: true, look: true },
-				.findMany({
+				take: 30,
-					orderBy: { accountCreated: "desc" },
+			})
-					select: { username: true, look: true },
+			.catch(() => []),
-					take: 8,
+		prisma.cameraWeb
-				})
+			.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
-				.catch(() => []),
+			.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,
-	return { hotelName, imager, online, users, rooms, articles, recentUsers, recentPhotos, latestUsers, discordUrl, logo };
+		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={{
+				<div
-					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
-					backdropFilter: "blur(14px)",
+					style={{
-					WebkitBackdropFilter: "blur(14px)",
+						background:
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+							"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={{
+					<div
-						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+						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)",
+									background:
-									borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+										"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: online,
-						{ value: rooms, label: tp("statsRooms"), icon: "/assets/images/icons/catalog.png" },
+							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 />
+							<Image
-							<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+								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)" }}>
+						<div
-							<HomeLoginForm captcha={{ provider: captcha.provider, siteKey: captcha.siteKey || undefined, field: captcha.field || undefined }} nonce={nonce} />
+							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)" }}>
+						<div
-							<Image src="/assets/images/EnterHubbly.png" alt="Register" width={300} height={100} className="block w-full" unoptimized />
+							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 />
+								<Image
-								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+									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 />
+								<Image
-								<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+									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
+												<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">
-													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 className="text-white text-sm font-bold">→</span>
+													</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 />
+								<Image
-								<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+									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 />
+							<Image
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+								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 { Clock } from "@/components/clock";
-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 { 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={{
+				<div
-					background: "color-mix(in srgb, var(--color-surface) 60%, transparent)",
+					className="relative flex items-center justify-between rounded-xl border px-5 py-3"
-					backdropFilter: "blur(14px)",
+					style={{
-					WebkitBackdropFilter: "blur(14px)",
+						background:
-					borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+							"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={{
+					<div
-						background: "color-mix(in srgb, var(--color-text-muted) 4%, transparent)",
+						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">
+				<div className="flex flex-col lg:flex-row gap-10 stagger-children">
-			{/* Left panel */}
+					{/* Left panel */}
-			<div className="lg:w-80 shrink-0 space-y-4">
+					<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 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 />
+							<div
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+								className="absolute inset-0"
-								{tpr("whoIsOnline")}
+								style={{
-							</h3>
+									background:
-						</div>
+										"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="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="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="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"
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+									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, {
+										src="/assets/images/icons/navigation/goody.png"
-											headOnly: true,
-											direction: 2,
-											size: "s",
-										})}
 										alt=""
-										width={26}
+										width={18}
-										height={32}
+										height={18}
-										className="rounded-md"
 										unoptimized
 									/>
-									<span
+									<h3
-										className="text-[8px] font-bold truncate w-full text-center leading-tight"
+										className="text-sm font-bold text-white"
-										style={{ color: "var(--color-text-readable)" }}
+										style={{ fontFamily: "var(--font-nunito)" }}
 									>
-										{u.username}
+										{tpr("whoIsOnline")}
-									</span>
+									</h3>
 								</div>
-							))}
+								<div
-						</div>
+									className="p-4"
-						</div>
+									style={{
-					</div>
+										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 && (
+						{latestUsers.length > 0 && (
-					<div
+							<div
-						className="overflow-hidden rounded-xl border"
+								className="overflow-hidden rounded-xl border"
-						style={{ borderColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }}
+								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 />
+							<div
-							<h3 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+								className="flex items-center gap-2.5 px-4 py-3"
-								Newest citizens
+								style={{
-							</h3>
+									background:
-						</div>
+										"linear-gradient(140deg, #1a3a5c 0%, #1e4a6e 20%, #2a5a80 40%, #3a6a90 60%, #4a7aa0 75%, #3a6a90 90%, #2a5a80 100%)",
-						<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) => (
+								<Image
-								<div
+									src="/assets/images/icons/navigation/me.png"
-									key={u.username}
+									alt=""
-									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+									width={18}
-									style={{
+									height={18}
-										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									unoptimized
-									}}
+								/>
+								<h2
+									className="text-sm font-bold text-white"
+									style={{ fontFamily: "var(--font-nunito)" }}
 								>
-									<Image
+									{tpr("title")}
-										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2 })}
+								</h2>
-										alt=""
+							</div>
-										width={52}
+							<div
-										height={64}
+								className="p-6"
-										className="rounded-md"
+								style={{ backgroundColor: "var(--color-surface)" }}
-										unoptimized
+							>
-									/>
+								<p
-									<span
+									className="text-sm mb-6"
-										className="text-[10px] font-bold truncate w-full text-center leading-tight"
+									style={{ color: "var(--color-text-muted)" }}
-										style={{ color: "var(--color-text-readable)" }}
+								>
-									>
+									{tpr("subtitle")}
-										{u.username}
+								</p>
-									</span>
+								<RegisterForm
-								</div>
+									hotelName={hotelName}
-							))}
+									captcha={{
-						</div>
+										provider: cfg.provider,
+										siteKey: cfg.siteKey || undefined,
+									}}
+									nonce={nonce}
+								/>
+							</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="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>
 			</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(
+	const imager =
-		"habbo_imaging_url",
+		(await siteSettings.get(
-		"https://www.habbo.com/habbo-imaging/avatarimage",
+			"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)" }}>
+			<div
-				<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
+				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" : ""}
+				Results for &quot;{query}&quot; — {users.length} user
-				{rooms.length > 0 && `, ${rooms.length} room${rooms.length !== 1 ? "s" : ""}`}
+				{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)" }}>
+				<div
-					<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
+					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)" }}>
+				<div
-					<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
+					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)",
+									background:
-									borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+										"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)" }}>
+				<div
-					<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
+					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 />
+						<Image
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+							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)" }}>
+							<p
-								{user.motto || <span style={{ fontStyle: "italic", opacity: 0.5 }}>{t("noMotto")}</span>}
+								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 />
+						<Image
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+							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 />
+						<Image
-						<h2 className="text-sm font-bold text-white" style={{ fontFamily: "var(--font-nunito)" }}>
+							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
+			<ContentCard icon="🔐" title={t("title")} subtitle={t("subtitle")} />
-				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")}{" "}
+					{t("creditsHint")} <Link href="/shop/topup">{t("topUpLink")}</Link>
-					<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
-											<input type="hidden" name="categoryId" value={categoryId} />
+												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%)",
+		green:
-		yellow: "linear-gradient(140deg, #3A2F0A 0%, #4A3D0F 20%, #5A4C15 40%, #6A5A1B 60%, #7A6820 75%, #6A5A1A 90%, #5A4814 100%)",
+			"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
+	const latest = ads[0]?.createdAt ? formatDate(ads[0].createdAt, "date") : "—";
-		? formatDate(ads[0].createdAt, "date")
-		: "—";
 
 	return (
 		<main>
 			<div className="flex justify-end mb-6">
 				<Button variant="default" asChild>
-					<Link href="/admin/ads/new">
+					<Link href="/admin/ads/new">+ {t("newAd")}</Link>
-						+ {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
+							createdAt: ad.createdAt ? formatDate(ad.createdAt, "date") : null,
-								? 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 { formatDate } from "@/lib/format-date";
-import { redirect } from "next/navigation";
 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">
+					<Link href="/admin/articles/new">{t("newArticle")}</Link>
-						{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">
+				<div className="grid gap-4 lg:grid-cols-3">
-				{/* ── Left column (2/3): tabs ─────────────────────────── */}
+					{/* ── Left column (2/3): tabs ─────────────────────────── */}
-				<div className="lg:col-span-2 space-y-4">
+					<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 && (
 						<Card>
-							<CardHeader className="pb-3">
+							<CardContent className="pt-4">
-								<CardTitle className="text-base flex items-center gap-2">
+								<Tabs defaultValue="general">
-									<FolderTree className="h-4 w-4" />
+									<TabsList className="mb-4">
-									Child Pages ({childPages.length})
+										<TabsTrigger value="general" className="gap-2">
-								</CardTitle>
+											<Settings className="h-4 w-4" />
-							</CardHeader>
+											General
-							<CardContent>
+										</TabsTrigger>
-								<div className="space-y-1">
+										<TabsTrigger value="texts" className="gap-2">
-									{childPages.map((child) => (
+											<FileText className="h-4 w-4" />
-										<Link
+											Texts
-											key={child.id}
+										</TabsTrigger>
-											href={`/admin/catalog/${child.id}`}
+										<TabsTrigger value="appearance" className="gap-2">
-											className="flex items-center justify-between rounded-md px-3 py-2 hover:bg-accent text-sm"
+											<Palette className="h-4 w-4" />
-										>
+											Appearance
-											<span>
+										</TabsTrigger>
-												{child.caption}
+									</TabsList>
-												<span className="ml-2 text-muted-foreground font-mono text-xs">
+
-													#{child.id}
+									{/* ── General ──────────────────────────────────── */}
-												</span>
+									<TabsContent value="general" className="space-y-4">
-											</span>
+										<div className="grid gap-4 sm:grid-cols-2">
-											<Badge
+											<div className="space-y-2">
-												variant={child.enabled === "1" ? "default" : "outline"}
+												<Label htmlFor="caption">Caption</Label>
-											>
+												<Input
-												{child.enabled === "1" ? "Enabled" : "Disabled"}
+													id="caption"
-											</Badge>
+													value={form.caption}
-										</Link>
+													onChange={(e) => update("caption", e.target.value)}
-									))}
+													disabled={!canEdit}
-								</div>
+												/>
+											</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>
-
+			</form>
-				{/* ── 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>
 		</>
 	);
 }
@@ -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 ||
+									isPending || !disconnect.userId || !disconnect.username.trim()
-									!disconnect.userId ||
-									!disconnect.username.trim()
 								}
 								onClick={() =>
 									run(
@@ -249,10 +248,9 @@ export function CommandocentrumControls() {
 							/>
 							<Button
 								type="button"
-								variant="default" className="w-full"
+								variant="default"
-								disabled={
+								className="w-full"
-									isPending || !alert.userId || !alert.message.trim()
+								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: () =>
+											onSuccess: () => setForward({ userId: "", roomId: "" }),
-												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: () =>
+											onSuccess: () => setCredits({ userId: "", credits: "" }),
-												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: () =>
+											onSuccess: () => setDuckets({ userId: "", amount: "" }),
-												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: () =>
+											onSuccess: () => setDiamonds({ userId: "", amount: "" }),
-												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: () =>
+											onSuccess: () => setMottoForm({ userId: "", motto: "" }),
-												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: () =>
+											onSuccess: () => setCommand({ userId: "", command: "" }),
-												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">
+					<Link href="/admin/events/create">{t("newEvent")}</Link>
-						{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
+						<Button type="submit" disabled={uploading} variant="default">
-							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">
+						<Link href="/admin/guilds">{t("back")}</Link>
-							{t("back")}
-						</Link>
 					</Button>
 					<Button variant="ghost" size="sm" asChild>
-						<Link
+						<Link href={`/guilds/${guild.id}`} target="_blank">
-							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({