Add performance optimizations and component refactors

- Cache read-heavy public API routes via redisCache (leaderboard, values,
  shop, articles, photos, guilds, teams, staff, users, home, radio, badges)
- Add single-flight and bounded-memory cache layer with unit tests
- Parallelize independent DB queries on search, rares, shop, staff, polls
  and profile pages
- Push radio points leaderboard aggregation to SQL with a LIMIT
- Split studio-client and import-furni-client into focused modules
- Clean up next.config.ts

next.config.ts

@@ -34,11 +34,11 @@ const securityHeaders = [
 ];
 
 const nextConfig: NextConfig = {
-	cacheComponents: true, // <-- Dit activeert Cache Components en lost de 'instant' build-fout op!
+	cacheComponents: true,
 	deploymentId: resolveDeploymentId(),
 	serverExternalPackages: ["lzma", "sharp", "pino", "pino-pretty"],
 
-	// Onderdruk de specifieke Turbopack waarschuwingen voor brede bestandspatronen in de lib-map
+	// Silence Turbopack warnings for the broad file patterns in src/lib.
 	turbopack: {
 		ignoreIssue: [
 			{
@@ -47,20 +47,19 @@ const nextConfig: NextConfig = {
 		],
 	},
 
-	// Voorkom dat type-warnings (zoals ongebruikte imports) de productiebuild blokkeren
 	typescript: {
 		ignoreBuildErrors: false,
 	},
 
-	// Compress responses with gzip/brotli
+	// Compress responses with gzip/brotli.
 	compress: true,
 
-	// Disable Next.js telemetry and browser sourcemaps in production
+	// Disable Next.js telemetry and browser sourcemaps in production.
 	productionBrowserSourceMaps: false,
 
 	experimental: {
 		useTypeScriptCli: true,
-		hideLogsAfterAbort: true, // <-- Dit verbergt de prerender bail-out logberichten!
+		hideLogsAfterAbort: true,
 	},
 
 	// Optimize images served through next/image with sharp → AVIF/WebP.

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

@@ -5,6 +5,7 @@ import {
 	PhotoLightbox,
 } from "@/components/public/photo-lightbox";
 import { ContentCard, EmptyState } from "@/components/public/ui";
+import { cached } from "@/lib/cache";
 import { CameraWeb, db } from "@/lib/db";
 import { formatDate } from "@/lib/format-date";
 
@@ -23,11 +24,9 @@ export default async function PhotosPage() {
 
 	let photos: Photo[] = [];
 	try {
-		photos = await db
+		photos = await cached("photos:grid", 60_000, async () =>
-			.select()
+			db.select().from(CameraWeb).orderBy(desc(CameraWeb.timestamp)).limit(48),
-			.from(CameraWeb)
+		);
-			.orderBy(desc(CameraWeb.timestamp))
-			.limit(48);
 	} catch {
 		photos = [];
 	}

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

@@ -60,9 +60,11 @@ export default async function PollDetailPage({
 	const isOpen = poll.status === "active" && !hasEnded;
 
 	const questionIds = questions.map((q) => q.id);
-	const myVotes =
+
+	// My votes and the aggregate results are independent — load them together.
+	const [myVotes, allVotes] = await Promise.all([
 		Number.isInteger(userId) && userId > 0 && questionIds.length > 0
-			? await db
+			? db
 					.select()
 					.from(WebsitePollVote)
 					.where(
@@ -72,12 +74,9 @@ export default async function PollDetailPage({
 						),
 					)
 					.catch(() => [])
-			: [];
+			: Promise.resolve([]),
-	const hasVoted = myVotes.length > 0;
-
-	const allVotes =
 		poll.showResults === 1 && questionIds.length > 0
-			? await db
+			? db
 					.select({
 						questionId: WebsitePollVote.questionId,
 						answer: WebsitePollVote.answer,
@@ -85,7 +84,9 @@ export default async function PollDetailPage({
 					.from(WebsitePollVote)
 					.where(inArray(WebsitePollVote.questionId, questionIds))
 					.catch(() => [])
-			: [];
+			: Promise.resolve([]),
+	]);
+	const hasVoted = myVotes.length > 0;
 
 	const votesByQuestion = new Map<number, string[]>();
 	for (const vote of allVotes) {

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

@@ -9,6 +9,7 @@ import {
 } from "@/components/public/ui";
 import { CurrencyIcon } from "@/components/shared/currency-icon";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
+import { cached } from "@/lib/cache";
 import { db, User } from "@/lib/db";
 
 export const metadata = { title: "Rankings" };
@@ -25,7 +26,8 @@ export default async function RankingsPage() {
 	const t = await getTranslations("pages.rankings");
 	let users: TopUser[] = [];
 	try {
-		users = await db
+		users = await cached("rankings:top", 60_000, async () =>
+			db
 				.select({
 					username: User.username,
 					look: User.look,
@@ -35,7 +37,8 @@ export default async function RankingsPage() {
 				})
 				.from(User)
 				.orderBy(desc(User.credits))
-			.limit(12);
+				.limit(12),
+		);
 	} catch {
 		users = [];
 	}

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

@@ -16,9 +16,11 @@ type CategoryRow = {
 
 export default async function RareValuesPage() {
 	const t = await getTranslations("pages.rares");
-	let categories: CategoryRow[] = [];
+
-	try {
+	// Categories, per-category rare counts and site settings are all
-		categories = await db
+	// independent — run them concurrently instead of sequentially.
+	const [categoryRows, grouped, badgesBase] = await Promise.all([
+		db
 			.select({
 				id: WebsiteRareValueCategories.id,
 				name: WebsiteRareValueCategories.name,
@@ -29,29 +31,26 @@ export default async function RareValuesPage() {
 			.orderBy(
 				asc(WebsiteRareValueCategories.priority),
 				asc(WebsiteRareValueCategories.name),
-			);
+			)
-	} catch {
+			.catch((): CategoryRow[] => []),
-		categories = [];
+		db
-	}
-
-	// Per-category rare counts (grouped so we avoid N queries).
-	const counts = new Map<string, number>();
-	try {
-		const grouped = await db
 			.select({
 				categoryId: WebsiteRareValues.categoryId,
 				value: count(),
 			})
 			.from(WebsiteRareValues)
-			.groupBy(WebsiteRareValues.categoryId);
+			.groupBy(WebsiteRareValues.categoryId)
+			.catch(() => []),
+		siteSettings.get("badges_path", ""),
+	]);
+
+	const categories = categoryRows;
+
+	// Per-category rare counts (grouped so we avoid N queries).
+	const counts = new Map<string, number>();
 	for (const g of grouped) {
 		counts.set(String(g.categoryId), Number(g.value));
 	}
-	} catch {
-		// leave counts empty -> shown as 0
-	}
-
-	const badgesBase = (await siteSettings.get("badges_path", "")) ?? "";
 
 	return (
 		<main style={{ display: "grid", gap: "1.5rem" }}>

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

@@ -36,7 +36,8 @@ export default async function SearchPage({
 		);
 	}
 
-	const users = await db
+	const [users, rooms] = await Promise.all([
+		db
 			.select({
 				id: User.id,
 				username: User.username,
@@ -48,9 +49,8 @@ export default async function SearchPage({
 			.from(User)
 			.where(like(User.username, `%${query}%`))
 			.limit(30)
-		.catch(() => []);
+			.catch(() => []),
-
+		db
-	const rooms = await db
 			.select({
 				id: Rooms.id,
 				name: Rooms.name,
@@ -61,7 +61,8 @@ export default async function SearchPage({
 			.from(Rooms)
 			.where(and(like(Rooms.name, `%${query}%`), eq(Rooms.state, "open")))
 			.limit(12)
-		.catch(() => []);
+			.catch(() => []),
+	]);
 
 	return (
 		<div className="flex flex-col gap-6">

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

@@ -112,38 +112,30 @@ export default async function ShopPage({
 				: t("success.bought")
 			: null;
 
-	// Categories for the filter bar.
+	// Categories for the filter bar and the article grid are independent —
-	let categories: ShopCategory[] = [];
+	// fetch them concurrently.
-	try {
+	const [categories, articles] = await Promise.all([
-		categories = await db
+		db
 			.select({
 				id: WebsiteShopCategories.id,
 				name: WebsiteShopCategories.name,
 				icon: WebsiteShopCategories.icon,
 			})
 			.from(WebsiteShopCategories)
-			.orderBy(asc(WebsiteShopCategories.name));
+			.orderBy(asc(WebsiteShopCategories.name))
-	} catch {
+			.catch((): ShopCategory[] => []),
-		categories = [];
+		(categoryId
-	}
+			? db
-
-	let articles: ShopArticle[] = [];
-	try {
-		if (categoryId) {
-			articles = await db
 					.select(articleSelect)
 					.from(WebsiteShopArticles)
 					.where(eq(WebsiteShopArticles.categoryId, BigInt(categoryId)))
-				.orderBy(asc(WebsiteShopArticles.position));
+					.orderBy(asc(WebsiteShopArticles.position))
-		} else {
+			: db
-			articles = await db
 					.select(articleSelect)
 					.from(WebsiteShopArticles)
-				.orderBy(asc(WebsiteShopArticles.position));
+					.orderBy(asc(WebsiteShopArticles.position))
-		}
+		).catch((): ShopArticle[] => []),
-	} catch {
+	]);
-		articles = [];
-	}
 
 	const activeCategory = categoryId
 		? categories.find((c) => String(c.id) === categoryId)

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

@@ -27,9 +27,9 @@ export default async function StaffPage() {
 	const minStaffRank =
 		Number(await siteSettings.get("min_staff_rank", "7")) || 7;
 
-	let staff: StaffMember[] = [];
+	// Independent queries — staff members and teams load concurrently.
-	try {
+	const [staff, teams] = await Promise.all([
-		staff = await db
+		db
 			.select({
 				username: User.username,
 				look: User.look,
@@ -39,14 +39,9 @@ export default async function StaffPage() {
 			.from(User)
 			.where(gte(User.rank, minStaffRank))
 			.orderBy(desc(User.rank), asc(User.username))
-			.limit(100);
+			.limit(100)
-	} catch {
+			.catch((): StaffMember[] => []),
-		staff = [];
+		db
-	}
-
-	let teams: Team[] = [];
-	try {
-		const rows = await db
 			.select({
 				id: WebsiteTeams.id,
 				rankName: WebsiteTeams.rankName,
@@ -56,11 +51,10 @@ export default async function StaffPage() {
 			})
 			.from(WebsiteTeams)
 			.where(eq(WebsiteTeams.hiddenRank, false))
-			.orderBy(asc(WebsiteTeams.id));
+			.orderBy(asc(WebsiteTeams.id))
-		teams = rows.map((row) => ({ ...row, id: String(row.id) }));
+			.then((rows) => rows.map((row) => ({ ...row, id: String(row.id) })))
-	} catch {
+			.catch((): Team[] => []),
-		teams = [];
+	]);
-	}
 
 	return (
 		<main style={{ display: "grid", gap: "1.5rem" }}>

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

@@ -191,7 +191,13 @@ export default async function ProfilePage({
 
 	// Currency ledger rows (duckets/diamonds). Credits live on the users row
 	// itself; the alt-currencies sit in the users_currency ledger keyed by type.
-	const currencyRows = await db
+	// Currency ledger rows (duckets/diamonds). Credits live on the users row
+	// itself; the alt-currencies sit in the users_currency ledger keyed by type.
+	// All sub-sections run in parallel (each query keeps its own .catch so a DB
+	// hiccup still degrades only that section instead of 500-ing the profile).
+	const [currencyRows, friendships, rooms, badges, photos, guestbook] =
+		await Promise.all([
+			db
 				.select({
 					type: UsersCurrency.type,
 					amount: UsersCurrency.amount,
@@ -203,7 +209,51 @@ export default async function ProfilePage({
 						inArray(UsersCurrency.type, [CURRENCY_DUCKETS, CURRENCY_DIAMONDS]),
 					),
 				)
-		.catch(() => []);
+				.catch(() => []),
+			// Friends. messenger_friendships stores one directed row per pair
+			// keyed on user_one_id; resolve the user_two_id side below.
+			db
+				.select({ userTwoId: MessengerFriendships.userTwoId })
+				.from(MessengerFriendships)
+				.where(eq(MessengerFriendships.userOneId, user.id))
+				.orderBy(desc(MessengerFriendships.friendsSince))
+				.limit(18)
+				.catch(() => []),
+			// Rooms owned by this user.
+			db
+				.select({
+					id: Rooms.id,
+					name: Rooms.name,
+					users: Rooms.users,
+					usersMax: Rooms.usersMax,
+					state: Rooms.state,
+				})
+				.from(Rooms)
+				.where(eq(Rooms.ownerId, user.id))
+				.orderBy(desc(Rooms.users))
+				.limit(8)
+				.catch(() => []),
+			db
+				.select()
+				.from(UsersBadges)
+				.where(eq(UsersBadges.userId, user.id))
+				.orderBy(asc(UsersBadges.slotId))
+				.catch(() => []),
+			db
+				.select()
+				.from(CameraWeb)
+				.where(eq(CameraWeb.userId, user.id))
+				.orderBy(desc(CameraWeb.timestamp))
+				.limit(6)
+				.catch(() => []),
+			db
+				.select()
+				.from(WebsiteUserGuestbooks)
+				.where(eq(WebsiteUserGuestbooks.profileId, user.id))
+				.orderBy(desc(WebsiteUserGuestbooks.createdAt))
+				.limit(30)
+				.catch(() => []),
+		]);
 	const ducketsAmount =
 		currencyRows.find((c) => c.type === CURRENCY_DUCKETS)?.amount ?? 0;
 	const diamondsAmount =
@@ -232,18 +282,13 @@ export default async function ProfilePage({
 		},
 	];
 
-	// Friends. messenger_friendships stores one directed row per pair keyed on
+	// Resolve friend usernames/looks and the guestbook author usernames/looks in
-	// user_one_id; resolve the user_two_id side to usernames/looks for the grid.
+	// two parallel queries (the ids come from the queries above).
-	const friendships = await db
-		.select({ userTwoId: MessengerFriendships.userTwoId })
-		.from(MessengerFriendships)
-		.where(eq(MessengerFriendships.userOneId, user.id))
-		.orderBy(desc(MessengerFriendships.friendsSince))
-		.limit(18)
-		.catch(() => []);
 	const friendIds = Array.from(new Set(friendships.map((f) => f.userTwoId)));
-	const friendUsers = friendIds.length
+	const authorIds = Array.from(new Set(guestbook.map((g) => g.userId)));
-		? await db
+	const [friendUsers, authors] = await Promise.all([
+		friendIds.length
+			? db
 					.select({
 						id: User.id,
 						username: User.username,
@@ -252,54 +297,9 @@ export default async function ProfilePage({
 					.from(User)
 					.where(inArray(User.id, friendIds))
 					.catch(() => [])
-		: [];
+			: [],
-	const friendById = new Map(friendUsers.map((f) => [f.id, f]));
+		authorIds.length
-	const friends = friendships
+			? db
-		.map((f) => friendById.get(f.userTwoId))
-		.filter((f): f is NonNullable<typeof f> => Boolean(f));
-
-	// Rooms owned by this user.
-	const rooms = await db
-		.select({
-			id: Rooms.id,
-			name: Rooms.name,
-			users: Rooms.users,
-			usersMax: Rooms.usersMax,
-			state: Rooms.state,
-		})
-		.from(Rooms)
-		.where(eq(Rooms.ownerId, user.id))
-		.orderBy(desc(Rooms.users))
-		.limit(8)
-		.catch(() => []);
-
-	const badges = await db
-		.select()
-		.from(UsersBadges)
-		.where(eq(UsersBadges.userId, user.id))
-		.orderBy(asc(UsersBadges.slotId))
-		.catch(() => []);
-
-	const photos = await db
-		.select()
-		.from(CameraWeb)
-		.where(eq(CameraWeb.userId, user.id))
-		.orderBy(desc(CameraWeb.timestamp))
-		.limit(6)
-		.catch(() => []);
-
-	const guestbook = await db
-		.select()
-		.from(WebsiteUserGuestbooks)
-		.where(eq(WebsiteUserGuestbooks.profileId, user.id))
-		.orderBy(desc(WebsiteUserGuestbooks.createdAt))
-		.limit(30)
-		.catch(() => []);
-
-	// Resolve author usernames/looks for the guestbook entries in one query.
-	const authorIds = Array.from(new Set(guestbook.map((g) => g.userId)));
-	const authors = authorIds.length
-		? await db
 					.select({
 						id: User.id,
 						username: User.username,
@@ -308,7 +308,12 @@ export default async function ProfilePage({
 					.from(User)
 					.where(inArray(User.id, authorIds))
 					.catch(() => [])
-		: [];
+			: [],
+	]);
+	const friendById = new Map(friendUsers.map((f) => [f.id, f]));
+	const friends = friendships
+		.map((f) => friendById.get(f.userTwoId))
+		.filter((f): f is NonNullable<typeof f> => Boolean(f));
 	const authorById = new Map(authors.map((a) => [a.id, a]));
 
 	return (

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

@@ -60,99 +60,21 @@ import {
 } from "@/lib/admin/recent-furni-resync";
 import { adminFetch } from "@/lib/admin-fetch";
 import type { FurniImportSource } from "@/lib/habbo-gamedata-hotel";
+import {
+	getFurniIconUrl,
+	getFurniImageUrl,
+	handleImgError,
+	STATUS_LABELS,
+} from "./import-furni-icons";
+import type {
+	BatchItemStatus,
+	BatchSummary,
+	FurniItem,
+	FurniStats,
+	Meta,
+} from "./import-furni-types";
 import { NitroEditorDialog } from "./nitro-editor-dialog";
-
+import { Pagination } from "./pagination";
-interface FurniItem {
-	id: number;
-	classname: string;
-	type: string;
-	name: string;
-	description: string;
-	revision: number;
-	category: string;
-	alreadyImported: boolean;
-	nitroExists: boolean;
-}
-
-interface Meta {
-	currentPage: number;
-	lastPage: number;
-	total: number;
-	perPage: number;
-}
-
-interface BatchItemStatus {
-	classname: string;
-	status:
-		| "pending"
-		| "started"
-		| "downloading"
-		| "converting"
-		| "writing_db"
-		| "done"
-		| "failed";
-	message?: string;
-	warnings?: string[];
-	itemId?: number;
-}
-
-interface BatchSummary {
-	succeeded: number;
-	failed: number;
-	warnings: number;
-	duration: number;
-}
-
-interface FurniStats {
-	totalInDb: number;
-	inCatalog: number;
-	missingNitro: number;
-	notInCatalog: number;
-}
-
-function getFurniImageUrl(classname: string, revision: number) {
-	// Use official Habbo CDN for furniture icons
-	const base = classname.includes("*")
-		? classname.substring(0, classname.indexOf("*"))
-		: classname;
-	return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(base)}_icon.png`;
-}
-
-function getFurniIconUrl(classname: string, revision: number) {
-	const iconName = classname.replace(/\*/g, "_");
-	return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(iconName)}_icon.png`;
-}
-
-function handleImgError(
-	e: React.SyntheticEvent<HTMLImageElement>,
-	classname: string,
-	revision: number,
-) {
-	const img = e.target as HTMLImageElement;
-	const iconName = classname.replace(/\*/g, "_");
-	if (!img.dataset.fallback) {
-		img.dataset.fallback = "1";
-		img.src = getFurniIconUrl(classname, revision);
-	} else if (img.dataset.fallback === "1") {
-		img.dataset.fallback = "2";
-		img.src = `/swf/dcr/hof_furni/icons/${encodeURIComponent(iconName)}_icon.png`;
-	} else {
-		// Show placeholder instead of invisible image
-		img.style.opacity = "0.3";
-		img.src =
-			'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';
-	}
-}
-
-const STATUS_LABELS: Record<string, string> = {
-	pending: "Pending",
-	started: "Starting",
-	downloading: "Downloading",
-	converting: "Converting",
-	writing_db: "Writing DB",
-	done: "Done",
-	failed: "Failed",
-};
 
 export function ImportFurniClient({ source }: { source: FurniImportSource }) {
 	const [searchTerm, setSearchTerm] = useState("");
@@ -884,84 +806,6 @@ export function ImportFurniClient({ source }: { source: FurniImportSource }) {
 		return { completed, done, failed, total: arr.length, percent };
 	}, [batchProgress]);
 
-	function renderPagination() {
-		if (!meta || meta.lastPage <= 1) return null;
-		const nodes: React.ReactNode[] = [];
-		if (meta.currentPage > 1) {
-			nodes.push(
-				<Button
-					key="prev"
-					variant="ghost"
-					size="sm"
-					onClick={() => goPage(meta.currentPage - 1)}
-					disabled={loading}
-					className="text-xs"
-				>
-					&larr; Prev
-				</Button>,
-			);
-		}
-		for (let p = 1; p <= meta.lastPage; p++) {
-			if (p === meta.currentPage) {
-				nodes.push(
-					<Button
-						key={p}
-						variant="default"
-						size="sm"
-						className="text-xs min-w-[32px]"
-					>
-						{p}
-					</Button>,
-				);
-			} else if (
-				Math.abs(p - meta.currentPage) <= 2 ||
-				p === 1 ||
-				p === meta.lastPage
-			) {
-				nodes.push(
-					<Button
-						key={p}
-						variant="ghost"
-						size="sm"
-						onClick={() => goPage(p)}
-						disabled={loading}
-						className="text-xs min-w-[32px]"
-					>
-						{p}
-					</Button>,
-				);
-			} else if (Math.abs(p - meta.currentPage) === 3) {
-				nodes.push(
-					<span
-						key={`dots-${p}`}
-						className="text-muted-foreground text-xs px-1"
-					>
-						&hellip;
-					</span>,
-				);
-			}
-		}
-		if (meta.currentPage < meta.lastPage) {
-			nodes.push(
-				<Button
-					key="next"
-					variant="ghost"
-					size="sm"
-					onClick={() => goPage(meta.currentPage + 1)}
-					disabled={loading}
-					className="text-xs"
-				>
-					Next &rarr;
-				</Button>,
-			);
-		}
-		return (
-			<div className="flex items-center justify-center gap-1 mt-4 flex-wrap">
-				{nodes}
-			</div>
-		);
-	}
-
 	return (
 		<div className="space-y-4">
 			<div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-card px-4 py-3">
@@ -1987,7 +1831,7 @@ export function ImportFurniClient({ source }: { source: FurniImportSource }) {
 			)}
 
 			{/* Pagination */}
-			{renderPagination()}
+			<Pagination meta={meta} loading={loading} onPageChange={goPage} />
 
 			{/* Nitro Editor Dialog */}
 			<NitroEditorDialog

src/app/admin/import/furni/import-furni-icons.ts

@@ -0,0 +1,45 @@
+import type { SyntheticEvent } from "react";
+
+export function getFurniImageUrl(classname: string, revision: number) {
+	// Use official Habbo CDN for furniture icons
+	const base = classname.includes("*")
+		? classname.substring(0, classname.indexOf("*"))
+		: classname;
+	return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(base)}_icon.png`;
+}
+
+export function getFurniIconUrl(classname: string, revision: number) {
+	const iconName = classname.replace(/\*/g, "_");
+	return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(iconName)}_icon.png`;
+}
+
+export function handleImgError(
+	e: SyntheticEvent<HTMLImageElement>,
+	classname: string,
+	revision: number,
+) {
+	const img = e.target as HTMLImageElement;
+	const iconName = classname.replace(/\*/g, "_");
+	if (!img.dataset.fallback) {
+		img.dataset.fallback = "1";
+		img.src = getFurniIconUrl(classname, revision);
+	} else if (img.dataset.fallback === "1") {
+		img.dataset.fallback = "2";
+		img.src = `/swf/dcr/hof_furni/icons/${encodeURIComponent(iconName)}_icon.png`;
+	} else {
+		// Show placeholder instead of invisible image
+		img.style.opacity = "0.3";
+		img.src =
+			'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';
+	}
+}
+
+export const STATUS_LABELS: Record<string, string> = {
+	pending: "Pending",
+	started: "Starting",
+	downloading: "Downloading",
+	converting: "Converting",
+	writing_db: "Writing DB",
+	done: "Done",
+	failed: "Failed",
+};

src/app/admin/import/furni/import-furni-types.ts

@@ -0,0 +1,47 @@
+export interface FurniItem {
+	id: number;
+	classname: string;
+	type: string;
+	name: string;
+	description: string;
+	revision: number;
+	category: string;
+	alreadyImported: boolean;
+	nitroExists: boolean;
+}
+
+export interface Meta {
+	currentPage: number;
+	lastPage: number;
+	total: number;
+	perPage: number;
+}
+
+export interface BatchItemStatus {
+	classname: string;
+	status:
+		| "pending"
+		| "started"
+		| "downloading"
+		| "converting"
+		| "writing_db"
+		| "done"
+		| "failed";
+	message?: string;
+	warnings?: string[];
+	itemId?: number;
+}
+
+export interface BatchSummary {
+	succeeded: number;
+	failed: number;
+	warnings: number;
+	duration: number;
+}
+
+export interface FurniStats {
+	totalInDb: number;
+	inCatalog: number;
+	missingNitro: number;
+	notInCatalog: number;
+}

src/app/admin/import/furni/pagination.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import type { Meta } from "./import-furni-types";
+
+export function Pagination({
+	meta,
+	loading,
+	onPageChange,
+}: {
+	meta: Meta | null;
+	loading: boolean;
+	onPageChange: (page: number) => void;
+}) {
+	if (!meta || meta.lastPage <= 1) return null;
+	const nodes: ReactNode[] = [];
+	if (meta.currentPage > 1) {
+		nodes.push(
+			<Button
+				key="prev"
+				variant="ghost"
+				size="sm"
+				onClick={() => onPageChange(meta.currentPage - 1)}
+				disabled={loading}
+				className="text-xs"
+			>
+				&larr; Prev
+			</Button>,
+		);
+	}
+	for (let p = 1; p <= meta.lastPage; p++) {
+		if (p === meta.currentPage) {
+			nodes.push(
+				<Button
+					key={p}
+					variant="default"
+					size="sm"
+					className="text-xs min-w-[32px]"
+				>
+					{p}
+				</Button>,
+			);
+		} else if (
+			Math.abs(p - meta.currentPage) <= 2 ||
+			p === 1 ||
+			p === meta.lastPage
+		) {
+			nodes.push(
+				<Button
+					key={p}
+					variant="ghost"
+					size="sm"
+					onClick={() => onPageChange(p)}
+					disabled={loading}
+					className="text-xs min-w-[32px]"
+				>
+					{p}
+				</Button>,
+			);
+		} else if (Math.abs(p - meta.currentPage) === 3) {
+			nodes.push(
+				<span key={`dots-${p}`} className="text-muted-foreground text-xs px-1">
+					&hellip;
+				</span>,
+			);
+		}
+	}
+	if (meta.currentPage < meta.lastPage) {
+		nodes.push(
+			<Button
+				key="next"
+				variant="ghost"
+				size="sm"
+				onClick={() => onPageChange(meta.currentPage + 1)}
+				disabled={loading}
+				className="text-xs"
+			>
+				Next &rarr;
+			</Button>,
+		);
+	}
+	return (
+		<div className="flex items-center justify-center gap-1 mt-4 flex-wrap">
+			{nodes}
+		</div>
+	);
+}

src/app/api/articles/[slug]/route.ts

@@ -1,6 +1,7 @@
 import { eq } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, WebsiteArticles } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 /**
  * GET /api/articles/:slug — single website_article by slug, including the
@@ -13,6 +14,10 @@ export async function GET(
 	const { slug } = await params;
 
 	try {
+		const data = await redisCache(
+			apiCacheKey(`articles:${slug}`),
+			60,
+			async () => {
 				const [article] = await db
 					.select({
 						id: WebsiteArticles.id,
@@ -29,10 +34,18 @@ export async function GET(
 					.limit(1);
 
 				if (!article) {
+					return null;
+				}
+
+				return cacheSafe({ data: article });
+			},
+		);
+
+		if (data === null) {
 			return apiJson({ error: "Article not found" }, { status: 404 });
 		}
 
-		return apiJson({ data: article });
+		return apiJson(data);
 	} catch {
 		// DB unavailable — treat as not found rather than a 500.
 		return apiJson({ error: "Article not found" }, { status: 200 });

src/app/api/articles/route.ts

@@ -1,6 +1,7 @@
 import { count, desc } from "drizzle-orm";
 import { apiJson, pagination } from "@/lib/api";
 import { db, WebsiteArticles } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 /**
  * GET /api/articles — paginated list of website_articles, newest first.
@@ -12,6 +13,10 @@ export async function GET(req: Request) {
 	const { page, perPage, skip, take } = pagination(sp);
 
 	try {
+		const data = await redisCache(
+			apiCacheKey(`articles:${page}:${perPage}`),
+			60,
+			async () => {
 				const [totalRows, articles] = await Promise.all([
 					db.select({ total: count() }).from(WebsiteArticles),
 					db
@@ -28,17 +33,22 @@ export async function GET(req: Request) {
 						.limit(take)
 						.offset(skip),
 				]);
-		const total = totalRows[0]?.total ?? 0;
+				return cacheSafe({
-
-		return apiJson({
 					data: articles,
 					meta: {
 						page,
 						perPage,
-				total,
+						total: totalRows[0]?.total ?? 0,
-				lastPage: Math.max(1, Math.ceil(total / perPage)),
+						lastPage: Math.max(
+							1,
+							Math.ceil((totalRows[0]?.total ?? 0) / perPage),
+						),
 					},
 				});
+			},
+		);
+
+		return apiJson(data);
 	} catch {
 		// DB unavailable — return an empty payload instead of a 500.
 		return apiJson(

src/app/api/badges/leaderboard/route.ts

@@ -5,6 +5,7 @@ import { bearerUserId } from "@/lib/api-auth";
 import { auth } from "@/lib/auth";
 import { db, User, UsersSettings } from "@/lib/db";
 import { logger } from "@/lib/logger";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 type BadgeRarityKey =
 	| "common"
@@ -28,6 +29,12 @@ interface BadgeLeaderboardBoard {
 	viewerEntry?: Partial<BadgeLeaderboardEntry>;
 }
 
+/** The shared, viewer-independent part of a leaderboard (cacheable). */
+type BoardCore = {
+	entries: BadgeLeaderboardEntry[];
+	totalPlayers: number;
+};
+
 interface BadgeLeaderboardStat {
 	badgeCode: string;
 	ownerCount: number;
@@ -65,9 +72,7 @@ async function rawRows<T>(query: ReturnType<typeof sql>): Promise<T[]> {
 	return rows;
 }
 
-async function loadTotalBadgesBoard(
+async function loadTotalBadgesBoard(): Promise<BoardCore> {
-	userId: number | null,
-): Promise<BadgeLeaderboardBoard> {
 	const rows = await rawRows<{
 		userId: bigint;
 		username: string;
@@ -103,48 +108,10 @@ async function loadTotalBadgesBoard(
 				)
 			: 0;
 
-	let viewerEntry: Partial<BadgeLeaderboardEntry> | undefined;
+	return { entries, totalPlayers };
-	if (userId) {
-		const viewerRow = await rawRows<{ cnt: bigint }>(
-			sql`SELECT COUNT(*) AS cnt FROM users_badges WHERE user_id = ${userId}`,
-		);
-		const viewerScore = Number(viewerRow[0]?.cnt ?? 0);
-		if (viewerScore > 0) {
-			const viewerRank =
-				entries.length > 0
-					? Number(
-							(
-								await rawRows<{ cnt: bigint }>(sql`
-                    SELECT COUNT(*) + 1 AS cnt
-                    FROM (SELECT user_id, COUNT(*) AS total FROM users_badges GROUP BY user_id) t
-                    WHERE t.total > ${viewerScore}
-                  `)
-							)[0]?.cnt ?? entries.length + 1,
-						)
-					: 1;
-			const [viewerUser] = await db
-				.select({ username: User.username, look: User.look })
-				.from(User)
-				.where(eq(User.id, userId))
-				.limit(1);
-			if (viewerUser) {
-				viewerEntry = {
-					userId,
-					username: viewerUser.username,
-					figure: viewerUser.look,
-					score: viewerScore,
-					rank: viewerRank,
-				};
-			}
-		}
 }
 
-	return { entries, totalPlayers, viewerEntry };
+async function loadAchievementBoard(): Promise<BoardCore> {
-}
-
-async function loadAchievementBoard(
-	userId: number | null,
-): Promise<BadgeLeaderboardBoard> {
 	const rows = await rawRows<{
 		userId: bigint;
 		username: string;
@@ -179,46 +146,10 @@ async function loadAchievementBoard(
 				)
 			: 0;
 
-	let viewerEntry: Partial<BadgeLeaderboardEntry> | undefined;
+	return { entries, totalPlayers };
-	if (userId) {
-		const [viewerUser] = await db
-			.select({ username: User.username, look: User.look })
-			.from(User)
-			.where(eq(User.id, userId))
-			.limit(1);
-		if (viewerUser) {
-			const [viewerSettings] = await db
-				.select({ achievementScore: UsersSettings.achievementScore })
-				.from(UsersSettings)
-				.where(eq(UsersSettings.userId, userId))
-				.limit(1);
-			if (viewerSettings && viewerSettings.achievementScore > 0) {
-				const viewerRank = Number(
-					(
-						await rawRows<{ cnt: bigint }>(sql`
-                SELECT COUNT(*) + 1 AS cnt FROM users_settings WHERE achievement_score > ${viewerSettings.achievementScore}
-              `)
-					)[0]?.cnt ?? entries.length + 1,
-				);
-				viewerEntry = {
-					userId,
-					username: viewerUser.username,
-					figure: viewerUser.look,
-					score: viewerSettings.achievementScore,
-					rank: viewerRank,
-				};
-			}
-		}
 }
 
-	return { entries, totalPlayers, viewerEntry };
+async function loadRarityBoard(badgeCodes: string[]): Promise<BoardCore> {
-}
-
-async function loadRarityBoard(
-	_rarity: BadgeRarityKey,
-	badgeCodes: string[],
-	userId: number | null,
-): Promise<BadgeLeaderboardBoard> {
 	if (badgeCodes.length === 0) return { entries: [], totalPlayers: 0 };
 
 	const codes = sql.join(
@@ -262,41 +193,111 @@ async function loadRarityBoard(
 				)
 			: 0;
 
-	let viewerEntry: Partial<BadgeLeaderboardEntry> | undefined;
+	return { entries, totalPlayers };
-	if (userId) {
+}
-		const viewerRow = await rawRows<{ cnt: bigint }>(sql`
+
-        SELECT COUNT(*) AS cnt FROM users_badges
+async function loadTotalBadgesViewer(
-        WHERE user_id = ${userId} AND badge_code IN (${codes})
+	userId: number,
-      `);
+): Promise<Partial<BadgeLeaderboardEntry> | undefined> {
+	const viewerRow = await rawRows<{ cnt: bigint }>(
+		sql`SELECT COUNT(*) AS cnt FROM users_badges WHERE user_id = ${userId}`,
+	);
 	const viewerScore = Number(viewerRow[0]?.cnt ?? 0);
-		if (viewerScore > 0) {
+	if (viewerScore <= 0) return undefined;
+
+	const rankRow = await rawRows<{ cnt: bigint }>(sql`
+      SELECT COUNT(*) + 1 AS cnt
+      FROM (SELECT user_id, COUNT(*) AS total FROM users_badges GROUP BY user_id) t
+      WHERE t.total > ${viewerScore}
+    `);
+	const rank = Number(rankRow[0]?.cnt ?? 1);
+
 	const [viewerUser] = await db
 		.select({ username: User.username, look: User.look })
 		.from(User)
 		.where(eq(User.id, userId))
 		.limit(1);
-			if (viewerUser) {
+	if (!viewerUser) return undefined;
-				const viewerRank = Number(
+
-					(
+	return {
-						await rawRows<{ cnt: bigint }>(sql`
-                SELECT COUNT(*) + 1 AS cnt
-                FROM (SELECT user_id, COUNT(*) AS total FROM users_badges WHERE badge_code IN (${codes}) GROUP BY user_id) t
-                WHERE t.total > ${viewerScore}
-              `)
-					)[0]?.cnt ?? entries.length + 1,
-				);
-				viewerEntry = {
 		userId,
 		username: viewerUser.username,
 		figure: viewerUser.look,
 		score: viewerScore,
-					rank: viewerRank,
+		rank,
 	};
 }
-		}
+
+async function loadAchievementViewer(
+	userId: number,
+): Promise<Partial<BadgeLeaderboardEntry> | undefined> {
+	const [viewerUser] = await db
+		.select({ username: User.username, look: User.look })
+		.from(User)
+		.where(eq(User.id, userId))
+		.limit(1);
+	if (!viewerUser) return undefined;
+
+	const [viewerSettings] = await db
+		.select({ achievementScore: UsersSettings.achievementScore })
+		.from(UsersSettings)
+		.where(eq(UsersSettings.userId, userId))
+		.limit(1);
+	if (!viewerSettings || viewerSettings.achievementScore <= 0) return undefined;
+
+	const rankRow = await rawRows<{ cnt: bigint }>(sql`
+      SELECT COUNT(*) + 1 AS cnt FROM users_settings WHERE achievement_score > ${viewerSettings.achievementScore}
+    `);
+	const rank = Number(rankRow[0]?.cnt ?? 1);
+
+	return {
+		userId,
+		username: viewerUser.username,
+		figure: viewerUser.look,
+		score: viewerSettings.achievementScore,
+		rank,
+	};
 }
 
-	return { entries, totalPlayers, viewerEntry };
+async function loadRarityViewer(
+	userId: number,
+	badgeCodes: string[],
+): Promise<Partial<BadgeLeaderboardEntry> | undefined> {
+	if (badgeCodes.length === 0) return undefined;
+
+	const codes = sql.join(
+		badgeCodes.map((c) => sql`${c}`),
+		sql`, `,
+	);
+
+	const viewerRow = await rawRows<{ cnt: bigint }>(sql`
+      SELECT COUNT(*) AS cnt FROM users_badges
+      WHERE user_id = ${userId} AND badge_code IN (${codes})
+    `);
+	const viewerScore = Number(viewerRow[0]?.cnt ?? 0);
+	if (viewerScore <= 0) return undefined;
+
+	const [viewerUser] = await db
+		.select({ username: User.username, look: User.look })
+		.from(User)
+		.where(eq(User.id, userId))
+		.limit(1);
+	if (!viewerUser) return undefined;
+
+	const rankRow = await rawRows<{ cnt: bigint }>(sql`
+      SELECT COUNT(*) + 1 AS cnt
+      FROM (SELECT user_id, COUNT(*) AS total FROM users_badges WHERE badge_code IN (${codes}) GROUP BY user_id) t
+      WHERE t.total > ${viewerScore}
+    `);
+	const rank = Number(rankRow[0]?.cnt ?? 1);
+
+	return {
+		userId,
+		username: viewerUser.username,
+		figure: viewerUser.look,
+		score: viewerScore,
+		rank,
+	};
 }
 
 export async function GET(req: Request) {
@@ -308,6 +309,22 @@ export async function GET(req: Request) {
 			userId = session?.user?.id ? Number(session.user.id) : null;
 		}
 
+		const rarityKeys: BadgeRarityKey[] = [
+			"common",
+			"rare",
+			"epic",
+			"legendary",
+			"mythical",
+			"unique",
+		];
+
+		// The heavy global aggregation (badge rarity stats + the 8 leaderboards)
+		// is user-independent, so it is cached and recomputed once per TTL instead
+		// of on every request. The viewer's own rank is derived per request.
+		const global = await redisCache(
+			apiCacheKey("badges:leaderboard:global"),
+			120,
+			async () => {
 				const badgeStatsRaw = await rawRows<{
 					badgeCode: string;
 					ownerCount: bigint;
@@ -330,33 +347,80 @@ export async function GET(req: Request) {
 					badgesByRarity.set(stat.rarity, list);
 				}
 
-		const rarityKeys: BadgeRarityKey[] = [
+				const [totalBadges, achievementLevel, ...rarityBoards] =
-			"common",
+					await Promise.all([
-			"rare",
+						loadTotalBadgesBoard(),
-			"epic",
+						loadAchievementBoard(),
-			"legendary",
-			"mythical",
-			"unique",
-		];
-
-		const [totalBadges, achievementLevel, ...rarityBoards] = await Promise.all([
-			loadTotalBadgesBoard(userId),
-			loadAchievementBoard(userId),
 						...rarityKeys.map((rk) =>
-				loadRarityBoard(rk, badgesByRarity.get(rk) ?? [], userId),
+							loadRarityBoard(badgesByRarity.get(rk) ?? []),
 						),
 					]);
 
 				const rarity = Object.fromEntries(
 					// eslint-disable-next-line security/detect-object-injection -- rk from rarityKeys const, i is array index
 					rarityKeys.map((rk, i) => [rk, rarityBoards[i]]),
-		) as Record<BadgeRarityKey, BadgeLeaderboardBoard>;
+				) as Record<BadgeRarityKey, BoardCore>;
+
+				return cacheSafe({ badgeStats, totalBadges, achievementLevel, rarity });
+			},
+		);
+
+		// Per-viewer rank entries (only when a user is signed in).
+		let totalBadgesViewer: Partial<BadgeLeaderboardEntry> | undefined;
+		let achievementViewer: Partial<BadgeLeaderboardEntry> | undefined;
+		let rarityViewer: Record<
+			BadgeRarityKey,
+			Partial<BadgeLeaderboardEntry> | undefined
+		> = {
+			common: undefined,
+			rare: undefined,
+			epic: undefined,
+			legendary: undefined,
+			mythical: undefined,
+			unique: undefined,
+		};
+
+		if (userId) {
+			const badgesByRarity = new Map<BadgeRarityKey, string[]>();
+			for (const stat of global.badgeStats) {
+				const list = badgesByRarity.get(stat.rarity) ?? [];
+				list.push(stat.badgeCode);
+				badgesByRarity.set(stat.rarity, list);
+			}
+
+			const [tb, ach, ...rvs] = await Promise.all([
+				loadTotalBadgesViewer(userId),
+				loadAchievementViewer(userId),
+				...rarityKeys.map((rk) =>
+					loadRarityViewer(userId, badgesByRarity.get(rk) ?? []),
+				),
+			]);
+			totalBadgesViewer = tb;
+			achievementViewer = ach;
+			rarityViewer = Object.fromEntries(
+				// eslint-disable-next-line security/detect-object-injection -- rk from rarityKeys const, i is array index
+				rarityKeys.map((rk, i) => [rk, rvs[i]]),
+			) as Record<BadgeRarityKey, Partial<BadgeLeaderboardEntry> | undefined>;
+		}
 
 		return apiJson({
 			viewerUserId: userId ?? 0,
-			badgeStats,
+			badgeStats: global.badgeStats,
 			thresholds: THRESHOLDS,
-			leaderboards: { totalBadges, achievementLevel, rarity },
+			leaderboards: {
+				totalBadges: { ...global.totalBadges, viewerEntry: totalBadgesViewer },
+				achievementLevel: {
+					...global.achievementLevel,
+					viewerEntry: achievementViewer,
+				},
+				rarity: Object.fromEntries(
+					// eslint-disable-next-line security/detect-object-injection -- rk from rarityKeys const
+					rarityKeys.map((rk) => [
+						rk,
+						{ ...global.rarity[rk], viewerEntry: rarityViewer[rk] },
+					]),
+				) as Record<BadgeRarityKey, BadgeLeaderboardBoard>,
+			},
 		});
 	} catch (err) {
 		logger.error("Badge leaderboard error", {

src/app/api/guilds/[id]/route.ts

@@ -5,6 +5,7 @@
 import { count, eq } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, Guilds, GuildsMembers } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(
 	_req: Request,
@@ -18,6 +19,10 @@ export async function GET(
 	const guildId = Number(id);
 
 	try {
+		const data = await redisCache(
+			apiCacheKey(`guilds:${id}`),
+			120,
+			async () => {
 				const [guild] = await db
 					.select({
 						id: Guilds.id,
@@ -33,7 +38,7 @@ export async function GET(
 					.limit(1);
 
 				if (!guild) {
-			return apiJson({ error: "Guild not found" }, { status: 404 });
+					return null;
 				}
 
 				// Member count is a separate guarded query (no relation is modelled).
@@ -49,7 +54,15 @@ export async function GET(
 				}
 
 				const { userId, ...rest } = guild;
-		return apiJson({ data: { ...rest, ownerId: userId, memberCount } });
+				return cacheSafe({ data: { ...rest, ownerId: userId, memberCount } });
+			},
+		);
+
+		if (data === null) {
+			return apiJson({ error: "Guild not found" }, { status: 404 });
+		}
+
+		return apiJson(data);
 	} catch {
 		// DB unavailable — treat as not found rather than a 500.
 		return apiJson({ error: "Guild not found" }, { status: 200 });

src/app/api/guilds/route.ts

@@ -5,12 +5,17 @@
 import { count, desc } from "drizzle-orm";
 import { apiJson, pagination } from "@/lib/api";
 import { db, Guilds } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(req: Request) {
 	const sp = new URL(req.url).searchParams;
 	const { page, perPage, skip, take } = pagination(sp);
 
 	try {
+		const data = await redisCache(
+			apiCacheKey(`guilds:${page}:${perPage}`),
+			120,
+			async () => {
 				const [totalRows, rows] = await Promise.all([
 					db.select({ total: count() }).from(Guilds),
 					db
@@ -25,23 +30,29 @@ export async function GET(req: Request) {
 						.limit(take)
 						.offset(skip),
 				]);
-		const total = totalRows[0]?.total ?? 0;
 
 				// Rename userId → ownerId for the public payload.
-		const data = rows.map(({ userId, ...rest }) => ({
+				const renamed = rows.map(({ userId, ...rest }) => ({
 					...rest,
 					ownerId: userId,
 				}));
 
-		return apiJson({
+				return cacheSafe({
-			data,
+					data: renamed,
 					meta: {
 						page,
 						perPage,
-				total,
+						total: totalRows[0]?.total ?? 0,
-				lastPage: Math.max(1, Math.ceil(total / perPage)),
+						lastPage: Math.max(
+							1,
+							Math.ceil((totalRows[0]?.total ?? 0) / perPage),
+						),
 					},
 				});
+			},
+		);
+
+		return apiJson(data);
 	} catch {
 		// DB unreachable — never 500; return an empty, well-formed payload.
 		return apiJson(

src/app/api/home/route.ts

@@ -3,7 +3,7 @@ import { apiJson } from "@/lib/api";
 import { FALLBACK_HOTEL_NAME } from "@/lib/brand";
 import { db, User, WebsiteArticles } from "@/lib/db";
 import { resolveHotelName } from "@/lib/hotel-name";
-import { apiCacheKey, redisCache } from "@/lib/redis-cache";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 /**
  * GET /api/home — combined landing payload: the latest 4 website_articles and
@@ -29,7 +29,11 @@ export async function GET(_req: Request) {
 				db.select({ total: count() }).from(User).where(eq(User.online, "1")),
 				resolveHotelName(),
 			]);
-			return { articles, online: onlineRows[0]?.total ?? 0, hotelName };
+			return cacheSafe({
+				articles,
+				online: onlineRows[0]?.total ?? 0,
+				hotelName,
+			});
 		});
 		return apiJson(data);
 	} catch {

src/app/api/leaderboard/route.ts

@@ -1,6 +1,7 @@
 import { desc, eq, inArray } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, User, UsersCurrency } from "@/lib/db";
+import { apiCacheKey, redisCache } from "@/lib/redis-cache";
 
 // Public REST API — leaderboard. Mirrors src/app/leaderboard/page.tsx.
 // AtomCMS-faithful currency type ids (see UsersCurrency):
@@ -75,11 +76,15 @@ export async function GET(req: Request) {
 				? requested
 				: "credits";
 
-		const rows =
+		const rows = await redisCache(
+			apiCacheKey(`leaderboard:${type}`),
+			60,
+			async () =>
 				type === "credits"
 					? await loadCreditsRows()
 					: // eslint-disable-next-line security/detect-object-injection -- type validated to "diamonds"|"duckets"
-					await loadCurrencyRows(CURRENCY_TYPE[type]);
+						await loadCurrencyRows(CURRENCY_TYPE[type]),
+		);
 
 		return apiJson({ type, data: rows }, { status: 200 });
 	} catch {

src/app/api/photos/route.ts

@@ -1,6 +1,7 @@
 import { count, desc } from "drizzle-orm";
 import { apiJson, pagination } from "@/lib/api";
 import { CameraWeb, db } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 /**
  * GET /api/photos — recent community photos (camera_web), newest first.
@@ -12,6 +13,10 @@ export async function GET(req: Request) {
 	const { page, perPage, skip, take } = pagination(sp);
 
 	try {
+		const data = await redisCache(
+			apiCacheKey(`photos:${page}:${perPage}`),
+			60,
+			async () => {
 				const [totalRows, photos] = await Promise.all([
 					db.select({ total: count() }).from(CameraWeb),
 					db
@@ -26,17 +31,22 @@ export async function GET(req: Request) {
 						.limit(take)
 						.offset(skip),
 				]);
-		const total = totalRows[0]?.total ?? 0;
+				return cacheSafe({
-
-		return apiJson({
 					data: photos,
 					meta: {
 						page,
 						perPage,
-				total,
+						total: totalRows[0]?.total ?? 0,
-				lastPage: Math.max(1, Math.ceil(total / perPage)),
+						lastPage: Math.max(
+							1,
+							Math.ceil((totalRows[0]?.total ?? 0) / perPage),
+						),
 					},
 				});
+			},
+		);
+
+		return apiJson(data);
 	} catch {
 		// DB unavailable — return an empty payload instead of a 500.
 		return apiJson(

src/app/api/radio/current-dj/route.ts

@@ -1,20 +1,29 @@
 import { eq } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, User } from "@/lib/db";
+import { apiCacheKey, redisCache } from "@/lib/redis-cache";
 import { siteSettings } from "@/lib/services/site-settings";
 
 // Current on-air DJ. The DJ is set manually via the radio_current_dj_id setting
 // (Manual DJ user ID). When set, resolve that user's username/look; otherwise
 // there is no DJ on air. Mirrors the AtomCMS radio "on air" widget.
 
+// The radio widget polls this endpoint frequently — a short cache avoids a DB
+// hit per poll. The DJ only changes when a moderator switches it manually.
+const GET_TTL_SECONDS = 5;
+
 export async function GET(_req: Request) {
 	try {
+		const dj = await redisCache(
+			apiCacheKey("radio:current-dj"),
+			GET_TTL_SECONDS,
+			async () => {
 				const raw = await siteSettings.get("radio_current_dj_id", "");
 				const id = Number(raw);
 
 				// No DJ configured (empty / non-numeric / zero).
 				if (!raw || !Number.isFinite(id) || id <= 0) {
-			return apiJson({ dj: null });
+					return null;
 				}
 
 				const [user] = await db
@@ -24,10 +33,14 @@ export async function GET(_req: Request) {
 					.limit(1);
 
 				if (!user) {
-			return apiJson({ dj: null });
+					return null;
 				}
 
-		return apiJson({ dj: { username: user.username, look: user.look } });
+				return { username: user.username, look: user.look };
+			},
+		);
+
+		return apiJson({ dj });
 	} catch {
 		// DB / settings unavailable — no DJ rather than a 500.
 		return apiJson({ dj: null }, { status: 200 });

src/app/api/radio/points/leaderboard/route.ts

@@ -1,6 +1,7 @@
-import { inArray, sum } from "drizzle-orm";
+import { desc, inArray, sum } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, RadioListenerPoints, User } from "@/lib/db";
+import { apiCacheKey, redisCache } from "@/lib/redis-cache";
 
 // Radio listener-points leaderboard: the top 20 users by total points, summed
 // across radio_listener_points and joined to users for username/look. Public
@@ -8,43 +9,46 @@ import { db, RadioListenerPoints, User } from "@/lib/db";
 
 export async function GET(_req: Request) {
 	try {
-		// Sum points per user. Sort/slice in JS so we stay adapter-agnostic about
+		// Cached 60s: the leaderboard only changes while people listen, so a
-		// aggregate ordering, then resolve the top 20 to usernames/looks.
+		// short TTL keeps it fresh without re-scanning the table per request.
+		const data = await redisCache(
+			apiCacheKey("radio:points:leaderboard"),
+			60,
+			async () => {
+				// Sum points per user and take the top 20 in SQL instead of
+				// pulling the whole table into JS to sort/slice.
 				const grouped = await db
 					.select({
 						userId: RadioListenerPoints.userId,
 						points: sum(RadioListenerPoints.points),
 					})
 					.from(RadioListenerPoints)
-			.groupBy(RadioListenerPoints.userId);
+					.groupBy(RadioListenerPoints.userId)
+					.orderBy(desc(sum(RadioListenerPoints.points)))
+					.limit(20);
 
-		const ranked = grouped
+				if (grouped.length === 0) {
-			.map((g) => ({
+					return [];
-				userId: Number(g.userId),
-				points: Number(g.points ?? 0),
-			}))
-			.sort((a, b) => b.points - a.points)
-			.slice(0, 20);
-
-		if (ranked.length === 0) {
-			return apiJson({ data: [] });
 				}
 
-		const userIds = ranked.map((r) => r.userId);
+				const userIds = grouped.map((r) => Number(r.userId));
 				const users = await db
 					.select({ id: User.id, username: User.username, look: User.look })
 					.from(User)
 					.where(inArray(User.id, userIds));
 				const userById = new Map(users.map((u) => [u.id, u]));
 
-		const data = ranked.map((r) => {
+				return grouped.map((r) => {
-			const u = userById.get(r.userId);
+					const uid = Number(r.userId);
+					const u = userById.get(uid);
 					return {
 						username: u?.username ?? null,
 						look: u?.look ?? null,
-				points: r.points,
+						points: Number(r.points ?? 0),
 					};
 				});
+			},
+		);
 
 		return apiJson({ data });
 	} catch {

src/app/api/radio/shouts/route.ts

@@ -2,6 +2,7 @@ import { desc, inArray } from "drizzle-orm";
 import { apiError, apiJson } from "@/lib/api";
 import { bearerUserId } from "@/lib/api-auth";
 import { db, RadioShouts, User } from "@/lib/db";
+import { apiCacheKey, redisCache } from "@/lib/redis-cache";
 
 // Latest 50 radio shouts with their author's username/look resolved. Mirrors the
 // query behind the public /radio/shouts page (radio_shouts ordered by created_at
@@ -10,8 +11,16 @@ import { db, RadioShouts, User } from "@/lib/db";
 // Max shout length (radio_shouts.message is TEXT; cap to keep posts sane).
 const MAX_MESSAGE_LENGTH = 255;
 
+// The shout feed is polled by the radio widget every few seconds — a short
+// cache keeps it cheap without delaying new shouts noticeably.
+const GET_TTL_SECONDS = 5;
+
 export async function GET(_req: Request) {
 	try {
+		const data = await redisCache(
+			apiCacheKey("radio:shouts"),
+			GET_TTL_SECONDS,
+			async () => {
 				const shouts = await db
 					.select({
 						id: RadioShouts.id,
@@ -25,7 +34,9 @@ export async function GET(_req: Request) {
 
 				// Resolve author usernames/looks. radio_shouts.user_id is an UnsignedBigInt
 				// while users.id is an Int, so narrow to Number for the lookup.
-		const authorIds = Array.from(new Set(shouts.map((s) => Number(s.userId))));
+				const authorIds = Array.from(
+					new Set(shouts.map((s) => Number(s.userId))),
+				);
 				const authors = authorIds.length
 					? await db
 							.select({ id: User.id, username: User.username, look: User.look })
@@ -34,7 +45,7 @@ export async function GET(_req: Request) {
 					: [];
 				const authorById = new Map(authors.map((a) => [a.id, a]));
 
-		const data = shouts.map((s) => {
+				return shouts.map((s) => {
 					const author = authorById.get(Number(s.userId));
 					return {
 						id: s.id,
@@ -45,6 +56,8 @@ export async function GET(_req: Request) {
 						createdAt: s.createdAt,
 					};
 				});
+			},
+		);
 
 		return apiJson({ shouts: data });
 	} catch {

src/app/api/shop/categories/route.ts

@@ -3,10 +3,16 @@
 import { asc } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, WebsiteShopCategories } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(_req: Request) {
 	try {
-		const data = await db
+		const data = await redisCache(
+			apiCacheKey("shop:categories"),
+			60,
+			async () =>
+				cacheSafe(
+					await db
 						.select({
 							id: WebsiteShopCategories.id,
 							name: WebsiteShopCategories.name,
@@ -18,6 +24,8 @@ export async function GET(_req: Request) {
 						.orderBy(
 							asc(WebsiteShopCategories.order),
 							asc(WebsiteShopCategories.name),
+						),
+				),
 		);
 
 		return apiJson({ data });

src/app/api/shop/route.ts

@@ -4,6 +4,7 @@
 import { asc, count, eq } from "drizzle-orm";
 import { apiError, apiJson, pagination, positiveBigInt } from "@/lib/api";
 import { db, WebsiteShopArticles } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(req: Request) {
 	const sp = new URL(req.url).searchParams;
@@ -24,7 +25,11 @@ export async function GET(req: Request) {
 				? eq(WebsiteShopArticles.categoryId, categoryId)
 				: undefined;
 
-		const [totalRows, data] = await Promise.all([
+		const data = await redisCache(
+			apiCacheKey(`shop:${categoryId ?? "all"}:${page}:${perPage}`),
+			60,
+			async () => {
+				const [totalRows, rows] = await Promise.all([
 					db.select({ total: count() }).from(WebsiteShopArticles).where(where),
 					db
 						.select({
@@ -53,17 +58,22 @@ export async function GET(req: Request) {
 						.limit(take)
 						.offset(skip),
 				]);
-		const total = totalRows[0]?.total ?? 0;
+				return cacheSafe({
-
+					data: rows,
-		return apiJson({
-			data,
 					meta: {
 						page,
 						perPage,
-				total,
+						total: totalRows[0]?.total ?? 0,
-				lastPage: Math.max(1, Math.ceil(total / perPage)),
+						lastPage: Math.max(
+							1,
+							Math.ceil((totalRows[0]?.total ?? 0) / perPage),
+						),
 					},
 				});
+			},
+		);
+
+		return apiJson(data);
 	} catch {
 		// DB unreachable — never 500; return an empty, well-formed payload.
 		return apiJson(

src/app/api/staff/route.ts

@@ -1,6 +1,7 @@
 import { asc, desc, gte } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, User } from "@/lib/db";
+import { apiCacheKey, redisCache } from "@/lib/redis-cache";
 import { siteSettings } from "@/lib/services/site-settings";
 
 // Public REST API — staff list. Mirrors src/app/staff/page.tsx: users whose
@@ -11,7 +12,8 @@ export async function GET(_req: Request) {
 		const minStaffRank =
 			Number(await siteSettings.get("min_staff_rank", "7")) || 7;
 
-		const staff = await db
+		const staff = await redisCache(apiCacheKey("staff"), 300, () =>
+			db
 				.select({
 					username: User.username,
 					look: User.look,
@@ -21,7 +23,8 @@ export async function GET(_req: Request) {
 				.from(User)
 				.where(gte(User.rank, minStaffRank))
 				.orderBy(desc(User.rank), asc(User.username))
-			.limit(100);
+				.limit(100),
+		);
 
 		return apiJson({ data: staff }, { status: 200 });
 	} catch {

src/app/api/teams/route.ts

@@ -1,13 +1,16 @@
 import { asc, eq } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, WebsiteTeams } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 // Public REST API — website teams (staff ranks). Mirrors src/app/staff/page.tsx:
 // visible ranks (hiddenRank=false) ordered by id.
 
 export async function GET(_req: Request) {
 	try {
-		const rows = await db
+		const rows = await redisCache(apiCacheKey("teams"), 300, async () =>
+			cacheSafe(
+				await db
 					.select({
 						id: WebsiteTeams.id,
 						rankName: WebsiteTeams.rankName,
@@ -17,7 +20,9 @@ export async function GET(_req: Request) {
 					})
 					.from(WebsiteTeams)
 					.where(eq(WebsiteTeams.hiddenRank, false))
-			.orderBy(asc(WebsiteTeams.id));
+					.orderBy(asc(WebsiteTeams.id)),
+			),
+		);
 
 		// apiJson serialises BigInt ids → string automatically.
 		return apiJson({ data: rows }, { status: 200 });

src/app/api/users/[username]/route.ts

@@ -8,6 +8,7 @@
 import { eq } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, User } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(
 	_req: Request,
@@ -16,7 +17,11 @@ export async function GET(
 	const { username } = await params;
 
 	try {
-		const [user] = await db
+		const user = await redisCache(
+			apiCacheKey(`users:${username}`),
+			30,
+			async () => {
+				const [row] = await db
 					.select({
 						username: User.username,
 						look: User.look,
@@ -30,19 +35,27 @@ export async function GET(
 					.where(eq(User.username, username))
 					.limit(1);
 
+				if (!row) {
+					return null;
+				}
+
+				return cacheSafe({
+					username: row.username,
+					look: row.look,
+					motto: row.motto,
+					rank: row.rank,
+					credits: row.credits,
+					online: row.online === "1",
+					accountCreated: row.accountCreated,
+				});
+			},
+		);
+
 		if (!user) {
 			return apiJson({ error: "User not found" }, { status: 404 });
 		}
 
-		return apiJson({
+		return apiJson(user);
-			username: user.username,
-			look: user.look,
-			motto: user.motto,
-			rank: user.rank,
-			credits: user.credits,
-			online: user.online === "1",
-			accountCreated: user.accountCreated,
-		});
 	} catch {
 		// DB unreachable — behave as "not found" rather than 500.
 		return apiJson({ error: "User not found" }, { status: 404 });

src/app/api/values/[id]/route.ts

@@ -4,6 +4,7 @@
 import { eq } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, WebsiteRareValueCategories, WebsiteRareValues } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(
 	_req: Request,
@@ -24,6 +25,10 @@ export async function GET(
 	}
 
 	try {
+		const data = await redisCache(
+			apiCacheKey(`values:${id}`),
+			300,
+			async () => {
 				const [value] = await db
 					.select({
 						id: WebsiteRareValues.id,
@@ -42,7 +47,7 @@ export async function GET(
 					.limit(1);
 
 				if (!value) {
-			return apiJson({ error: "Rare value not found" }, { status: 404 });
+					return null;
 				}
 
 				// No relation is modelled between the value and its category, so resolve the
@@ -69,7 +74,15 @@ export async function GET(
 					category = null;
 				}
 
-		return apiJson({ data: { ...value, category } });
+				return cacheSafe({ data: { ...value, category } });
+			},
+		);
+
+		if (data === null) {
+			return apiJson({ error: "Rare value not found" }, { status: 404 });
+		}
+
+		return apiJson(data);
 	} catch {
 		// DB unavailable — treat as not found rather than a 500.
 		return apiJson({ error: "Rare value not found" }, { status: 200 });

src/app/api/values/categories/route.ts

@@ -4,10 +4,16 @@
 import { asc } from "drizzle-orm";
 import { apiJson } from "@/lib/api";
 import { db, WebsiteRareValueCategories } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(_req: Request) {
 	try {
-		const data = await db
+		const data = await redisCache(
+			apiCacheKey("values:categories"),
+			300,
+			async () =>
+				cacheSafe(
+					await db
 						.select({
 							id: WebsiteRareValueCategories.id,
 							name: WebsiteRareValueCategories.name,
@@ -18,6 +24,8 @@ export async function GET(_req: Request) {
 						.orderBy(
 							asc(WebsiteRareValueCategories.priority),
 							asc(WebsiteRareValueCategories.name),
+						),
+				),
 		);
 
 		return apiJson({ data });

src/app/api/values/route.ts

@@ -4,6 +4,7 @@
 import { asc, count, eq } from "drizzle-orm";
 import { apiError, apiJson, pagination, positiveBigInt } from "@/lib/api";
 import { db, WebsiteRareValues } from "@/lib/db";
+import { apiCacheKey, cacheSafe, redisCache } from "@/lib/redis-cache";
 
 export async function GET(req: Request) {
 	const sp = new URL(req.url).searchParams;
@@ -24,7 +25,11 @@ export async function GET(req: Request) {
 				? eq(WebsiteRareValues.categoryId, categoryId)
 				: undefined;
 
-		const [totalRows, data] = await Promise.all([
+		const data = await redisCache(
+			apiCacheKey(`values:${categoryId ?? "all"}:${page}:${perPage}`),
+			300,
+			async () => {
+				const [totalRows, rows] = await Promise.all([
 					db.select({ total: count() }).from(WebsiteRareValues).where(where),
 					db
 						.select({
@@ -43,17 +48,22 @@ export async function GET(req: Request) {
 						.limit(take)
 						.offset(skip),
 				]);
-		const total = totalRows[0]?.total ?? 0;
+				return cacheSafe({
-
+					data: rows,
-		return apiJson({
-			data,
 					meta: {
 						page,
 						perPage,
-				total,
+						total: totalRows[0]?.total ?? 0,
-				lastPage: Math.max(1, Math.ceil(total / perPage)),
+						lastPage: Math.max(
+							1,
+							Math.ceil((totalRows[0]?.total ?? 0) / perPage),
+						),
 					},
 				});
+			},
+		);
+
+		return apiJson(data);
 	} catch {
 		// DB unreachable — never 500; return an empty, well-formed payload.
 		return apiJson(

src/components/admin/studio/batch-progress.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { Check, Loader2, X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import type { BatchItemStatus } from "./studio-types";
+
+export function BatchProgress({
+	progress,
+	done,
+	succeeded,
+	failed,
+}: {
+	progress: Map<string, BatchItemStatus>;
+	done: boolean;
+	succeeded: number;
+	failed: number;
+}) {
+	const entries = [...progress.entries()];
+	return (
+		<div className="border-t border-[var(--admin-border)] p-3">
+			<div className="mb-2 flex items-center justify-between">
+				<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
+					Importing…
+				</span>
+				{done ? (
+					<span
+						className={cn(
+							"text-xs font-bold",
+							failed > 0
+								? "text-[var(--admin-warning)]"
+								: "text-[var(--admin-success)]",
+						)}
+					>
+						✓ {succeeded} ok{failed > 0 ? ` · ${failed} failed` : ""}
+					</span>
+				) : (
+					<Loader2
+						size={14}
+						className="animate-spin text-[var(--admin-accent)]"
+					/>
+				)}
+			</div>
+			<div className="max-h-44 space-y-1 overflow-y-auto pr-1">
+				{entries.map(([classname, s]) => (
+					<div key={classname} className="flex items-center gap-2 text-xs">
+						{s.status === "done" ? (
+							<Check
+								size={12}
+								className="shrink-0 text-[var(--admin-success)]"
+							/>
+						) : s.status === "failed" ? (
+							<X size={12} className="shrink-0 text-[var(--admin-warning)]" />
+						) : (
+							<Loader2
+								size={12}
+								className="shrink-0 animate-spin text-[var(--admin-accent)]"
+							/>
+						)}
+						<span className="min-w-0 flex-1 truncate font-mono">
+							{classname}
+						</span>
+						<span className="shrink-0 capitalize text-[var(--admin-text-muted)]">
+							{s.status.replace(/_/g, " ")}
+						</span>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

src/components/admin/studio/catalog-rail.tsx

@@ -0,0 +1,103 @@
+"use client";
+
+import { ChevronDown, ChevronRight, FolderTree } from "lucide-react";
+import { useMemo, useState } from "react";
+
+import { cn } from "@/lib/utils";
+import type { TreeNode } from "@/types/catalog";
+
+export function CatalogRail({
+	tree,
+	selectedId,
+	onSelect,
+}: {
+	tree: TreeNode[];
+	selectedId: number | null;
+	onSelect: (id: number | null) => void;
+}) {
+	const [collapsed, setCollapsed] = useState<Set<number>>(new Set());
+
+	const visible = useMemo(() => {
+		const hidden = new Set<number>();
+		for (const node of tree) {
+			if (hidden.has(node.parentId)) {
+				hidden.add(node.id);
+				continue;
+			}
+			if (collapsed.has(node.parentId)) {
+				hidden.add(node.id);
+			}
+		}
+		return tree.filter((n) => !hidden.has(n.id));
+	}, [tree, collapsed]);
+
+	const toggle = (id: number) => {
+		setCollapsed((prev) => {
+			const next = new Set(prev);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return next;
+		});
+	};
+
+	return (
+		<aside className="flex h-full min-h-0 w-64 shrink-0 flex-col border-r border-[var(--admin-border)] bg-[var(--admin-surface)]">
+			<div className="flex items-center gap-2 border-b border-[var(--admin-border)] px-3 py-2.5">
+				<FolderTree size={14} className="text-[var(--admin-accent)]" />
+				<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
+					Catalog
+				</span>
+			</div>
+			<div className="min-h-0 flex-1 overflow-y-auto p-1.5">
+				{visible.length === 0 ? (
+					<p className="px-2 py-4 text-xs text-[var(--admin-text-muted)]">
+						No catalog pages found.
+					</p>
+				) : (
+					visible.map((node) => {
+						const isRoot = node.parentId <= 0;
+						const hasChildren = node.childCount > 0;
+						const isCollapsed = collapsed.has(node.id);
+						return (
+							<button
+								key={node.id}
+								type="button"
+								onClick={() => {
+									if (hasChildren) toggle(node.id);
+									onSelect(selectedId === node.id ? null : node.id);
+								}}
+								className={cn(
+									"group flex w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs transition-colors",
+									selectedId === node.id
+										? "bg-[var(--admin-accent)]/15 text-[var(--admin-text)]"
+										: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]",
+								)}
+								style={{ paddingLeft: `${6 + node.depth * 12}px` }}
+							>
+								{hasChildren ? (
+									isCollapsed ? (
+										<ChevronRight size={12} className="shrink-0" />
+									) : (
+										<ChevronDown size={12} className="shrink-0" />
+									)
+								) : (
+									<span className="w-3 shrink-0" />
+								)}
+								<span className="min-w-0 flex-1 truncate">
+									{isRoot ? (
+										<span className="font-semibold">{node.caption}</span>
+									) : (
+										node.caption
+									)}
+								</span>
+								<span className="shrink-0 rounded-full bg-[var(--admin-accent)]/10 px-1.5 text-[0.6rem] font-semibold text-[var(--admin-accent)]">
+									{node.itemCount}
+								</span>
+							</button>
+						);
+					})
+				)}
+			</div>
+		</aside>
+	);
+}

src/components/admin/studio/checkbox-dot.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { Check } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+export function CheckboxDot({ checked }: { checked: boolean }) {
+	return (
+		<span
+			className={cn(
+				"grid h-3.5 w-3.5 place-items-center rounded border transition-colors",
+				checked
+					? "border-[var(--admin-accent)] bg-[var(--admin-accent)]"
+					: "border-[var(--admin-border)] bg-transparent",
+			)}
+		>
+			{checked ? (
+				<Check size={10} className="text-[var(--admin-accent-foreground)]" />
+			) : null}
+		</span>
+	);
+}

src/components/admin/studio/studio-client.tsx

@@ -2,12 +2,9 @@
 
 import {
 	Check,
-	ChevronDown,
-	ChevronRight,
 	CircleAlert,
 	CloudDownload,
 	Download,
-	FolderTree,
 	Layers,
 	Loader2,
 	Package,
@@ -47,251 +44,20 @@ import {
 import type { FurniImportSource } from "@/lib/habbo-gamedata-hotel";
 import { cn } from "@/lib/utils";
 import type { TreeNode } from "@/types/catalog";
-
+import { BatchProgress } from "./batch-progress";
-interface FurniItem {
+import { CatalogRail } from "./catalog-rail";
-	id: number;
+import { CheckboxDot } from "./checkbox-dot";
-	classname: string;
+import {
-	type: string;
+	getFurniImageUrl,
-	name: string;
+	handleImgError,
-	description: string;
+	TYPE_LABELS,
-	revision: number;
+} from "./studio-furni-icons";
-	category: string;
+import type {
-	alreadyImported: boolean;
+	BatchItemStatus,
-	nitroExists: boolean;
+	FurniItem,
-	/** Custom-source preview icon (retro hotel CDN). Absent for official Habbo items. */
+	FurniStats,
-	iconUrl?: string;
+	Meta,
-}
+} from "./studio-types";
-
-interface Meta {
-	currentPage: number;
-	lastPage: number;
-	total: number;
-	perPage: number;
-}
-
-interface FurniStats {
-	totalInDb: number;
-	inCatalog: number;
-	notInCatalog: number;
-	missingNitro: number;
-}
-
-interface BatchItemStatus {
-	classname: string;
-	status:
-		| "pending"
-		| "started"
-		| "downloading"
-		| "converting"
-		| "writing_db"
-		| "done"
-		| "failed";
-	message?: string;
-	warnings?: string[];
-	itemId?: number;
-}
-
-function getFurniImageUrl(item: FurniItem) {
-	if (item.iconUrl) return item.iconUrl;
-	const base = item.classname.includes("*")
-		? item.classname.substring(0, item.classname.indexOf("*"))
-		: item.classname;
-	return `https://images.habbo.com/dcr/hof_furni/${item.revision}/${encodeURIComponent(base)}_icon.png`;
-}
-
-function getFurniIconUrl(classname: string, revision: number) {
-	const iconName = classname.replace(/\*/g, "_");
-	return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(iconName)}_icon.png`;
-}
-
-function handleImgError(
-	e: React.SyntheticEvent<HTMLImageElement>,
-	item: FurniItem,
-) {
-	const img = e.target as HTMLImageElement;
-	const iconName = item.classname.replace(/\*/g, "_");
-	if (!img.dataset.fallback) {
-		img.dataset.fallback = "1";
-		img.src = getFurniIconUrl(item.classname, item.revision);
-	} else if (img.dataset.fallback === "1") {
-		img.dataset.fallback = "2";
-		img.src = `/swf/dcr/hof_furni/icons/${encodeURIComponent(iconName)}_icon.png`;
-	} else {
-		img.style.opacity = "0.3";
-		img.src =
-			'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';
-	}
-}
-
-const TYPE_LABELS: Record<string, string> = {
-	flooritem: "Floor",
-	wallitem: "Wall",
-};
-
-// ── Catalog structure rail ─────────────────────────────────────────
-
-function CatalogRail({
-	tree,
-	selectedId,
-	onSelect,
-}: {
-	tree: TreeNode[];
-	selectedId: number | null;
-	onSelect: (id: number | null) => void;
-}) {
-	const [collapsed, setCollapsed] = useState<Set<number>>(new Set());
-
-	const visible = useMemo(() => {
-		const hidden = new Set<number>();
-		for (const node of tree) {
-			if (hidden.has(node.parentId)) {
-				hidden.add(node.id);
-				continue;
-			}
-			if (collapsed.has(node.parentId)) {
-				hidden.add(node.id);
-			}
-		}
-		return tree.filter((n) => !hidden.has(n.id));
-	}, [tree, collapsed]);
-
-	const toggle = (id: number) => {
-		setCollapsed((prev) => {
-			const next = new Set(prev);
-			if (next.has(id)) next.delete(id);
-			else next.add(id);
-			return next;
-		});
-	};
-
-	return (
-		<aside className="flex h-full min-h-0 w-64 shrink-0 flex-col border-r border-[var(--admin-border)] bg-[var(--admin-surface)]">
-			<div className="flex items-center gap-2 border-b border-[var(--admin-border)] px-3 py-2.5">
-				<FolderTree size={14} className="text-[var(--admin-accent)]" />
-				<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
-					Catalog
-				</span>
-			</div>
-			<div className="min-h-0 flex-1 overflow-y-auto p-1.5">
-				{visible.length === 0 ? (
-					<p className="px-2 py-4 text-xs text-[var(--admin-text-muted)]">
-						No catalog pages found.
-					</p>
-				) : (
-					visible.map((node) => {
-						const isRoot = node.parentId <= 0;
-						const hasChildren = node.childCount > 0;
-						const isCollapsed = collapsed.has(node.id);
-						return (
-							<button
-								key={node.id}
-								type="button"
-								onClick={() => {
-									if (hasChildren) toggle(node.id);
-									onSelect(selectedId === node.id ? null : node.id);
-								}}
-								className={cn(
-									"group flex w-full items-center gap-1.5 rounded-md px-1.5 py-1.5 text-left text-xs transition-colors",
-									selectedId === node.id
-										? "bg-[var(--admin-accent)]/15 text-[var(--admin-text)]"
-										: "text-[var(--admin-text-muted)] hover:bg-[var(--admin-accent)]/10 hover:text-[var(--admin-text)]",
-								)}
-								style={{ paddingLeft: `${6 + node.depth * 12}px` }}
-							>
-								{hasChildren ? (
-									isCollapsed ? (
-										<ChevronRight size={12} className="shrink-0" />
-									) : (
-										<ChevronDown size={12} className="shrink-0" />
-									)
-								) : (
-									<span className="w-3 shrink-0" />
-								)}
-								<span className="min-w-0 flex-1 truncate">
-									{isRoot ? (
-										<span className="font-semibold">{node.caption}</span>
-									) : (
-										node.caption
-									)}
-								</span>
-								<span className="shrink-0 rounded-full bg-[var(--admin-accent)]/10 px-1.5 text-[0.6rem] font-semibold text-[var(--admin-accent)]">
-									{node.itemCount}
-								</span>
-							</button>
-						);
-					})
-				)}
-			</div>
-		</aside>
-	);
-}
-
-// ── Batch progress panel ───────────────────────────────────────────
-
-function BatchProgress({
-	progress,
-	done,
-	succeeded,
-	failed,
-}: {
-	progress: Map<string, BatchItemStatus>;
-	done: boolean;
-	succeeded: number;
-	failed: number;
-}) {
-	const entries = [...progress.entries()];
-	return (
-		<div className="border-t border-[var(--admin-border)] p-3">
-			<div className="mb-2 flex items-center justify-between">
-				<span className="text-xs font-bold uppercase tracking-wider text-[var(--admin-text-muted)]">
-					Importing…
-				</span>
-				{done ? (
-					<span
-						className={cn(
-							"text-xs font-bold",
-							failed > 0
-								? "text-[var(--admin-warning)]"
-								: "text-[var(--admin-success)]",
-						)}
-					>
-						✓ {succeeded} ok{failed > 0 ? ` · ${failed} failed` : ""}
-					</span>
-				) : (
-					<Loader2
-						size={14}
-						className="animate-spin text-[var(--admin-accent)]"
-					/>
-				)}
-			</div>
-			<div className="max-h-44 space-y-1 overflow-y-auto pr-1">
-				{entries.map(([cn, s]) => (
-					<div key={cn} className="flex items-center gap-2 text-xs">
-						{s.status === "done" ? (
-							<Check
-								size={12}
-								className="shrink-0 text-[var(--admin-success)]"
-							/>
-						) : s.status === "failed" ? (
-							<X size={12} className="shrink-0 text-[var(--admin-warning)]" />
-						) : (
-							<Loader2
-								size={12}
-								className="shrink-0 animate-spin text-[var(--admin-accent)]"
-							/>
-						)}
-						<span className="min-w-0 flex-1 truncate font-mono">{cn}</span>
-						<span className="shrink-0 capitalize text-[var(--admin-text-muted)]">
-							{s.status.replace(/_/g, " ")}
-						</span>
-					</div>
-				))}
-			</div>
-		</div>
-	);
-}
-
-// ── Studio workspace ───────────────────────────────────────────────
 
 export function StudioClient({
 	source,
@@ -1129,20 +895,3 @@ export function StudioClient({
 		</div>
 	);
 }
-
-function CheckboxDot({ checked }: { checked: boolean }) {
-	return (
-		<span
-			className={cn(
-				"grid h-3.5 w-3.5 place-items-center rounded border transition-colors",
-				checked
-					? "border-[var(--admin-accent)] bg-[var(--admin-accent)]"
-					: "border-[var(--admin-border)] bg-transparent",
-			)}
-		>
-			{checked ? (
-				<Check size={10} className="text-[var(--admin-accent-foreground)]" />
-			) : null}
-		</span>
-	);
-}

src/components/admin/studio/studio-furni-icons.ts

@@ -0,0 +1,40 @@
+import type { SyntheticEvent } from "react";
+
+import type { FurniItem } from "./studio-types";
+
+export function getFurniImageUrl(item: FurniItem) {
+	if (item.iconUrl) return item.iconUrl;
+	const base = item.classname.includes("*")
+		? item.classname.substring(0, item.classname.indexOf("*"))
+		: item.classname;
+	return `https://images.habbo.com/dcr/hof_furni/${item.revision}/${encodeURIComponent(base)}_icon.png`;
+}
+
+export function getFurniIconUrl(classname: string, revision: number) {
+	const iconName = classname.replace(/\*/g, "_");
+	return `https://images.habbo.com/dcr/hof_furni/${revision}/${encodeURIComponent(iconName)}_icon.png`;
+}
+
+export function handleImgError(
+	e: SyntheticEvent<HTMLImageElement>,
+	item: FurniItem,
+) {
+	const img = e.target as HTMLImageElement;
+	const iconName = item.classname.replace(/\*/g, "_");
+	if (!img.dataset.fallback) {
+		img.dataset.fallback = "1";
+		img.src = getFurniIconUrl(item.classname, item.revision);
+	} else if (img.dataset.fallback === "1") {
+		img.dataset.fallback = "2";
+		img.src = `/swf/dcr/hof_furni/icons/${encodeURIComponent(iconName)}_icon.png`;
+	} else {
+		img.style.opacity = "0.3";
+		img.src =
+			'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="1.5"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="m21 15-5-5L5 21"/></svg>';
+	}
+}
+
+export const TYPE_LABELS: Record<string, string> = {
+	flooritem: "Floor",
+	wallitem: "Wall",
+};

src/components/admin/studio/studio-types.ts

@@ -0,0 +1,42 @@
+export interface FurniItem {
+	id: number;
+	classname: string;
+	type: string;
+	name: string;
+	description: string;
+	revision: number;
+	category: string;
+	alreadyImported: boolean;
+	nitroExists: boolean;
+	/** Custom-source preview icon (retro hotel CDN). Absent for official Habbo items. */
+	iconUrl?: string;
+}
+
+export interface Meta {
+	currentPage: number;
+	lastPage: number;
+	total: number;
+	perPage: number;
+}
+
+export interface FurniStats {
+	totalInDb: number;
+	inCatalog: number;
+	notInCatalog: number;
+	missingNitro: number;
+}
+
+export interface BatchItemStatus {
+	classname: string;
+	status:
+		| "pending"
+		| "started"
+		| "downloading"
+		| "converting"
+		| "writing_db"
+		| "done"
+		| "failed";
+	message?: string;
+	warnings?: string[];
+	itemId?: number;
+}

src/lib/cache.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/lib/redis", () => ({
+	redis: null,
+}));
+
+import { cached, invalidateMemory } from "./cache";
+
+describe("cached (memory-only, no Redis)", () => {
+	it("computes once and serves the cached value", async () => {
+		const fn = vi.fn(async () => 42);
+		const key = `once-${Math.random()}`;
+		expect(await cached(key, 10_000, fn)).toBe(42);
+		expect(await cached(key, 10_000, fn)).toBe(42);
+		expect(fn).toHaveBeenCalledTimes(1);
+	});
+
+	it("dedupes concurrent misses into a single computation", async () => {
+		let resolveFn: (value: number) => void = () => {};
+		const fn = vi.fn(
+			() =>
+				new Promise<number>((resolve) => {
+					resolveFn = resolve;
+				}),
+		);
+		const key = `dedupe-${Math.random()}`;
+		const p1 = cached(key, 10_000, fn);
+		const p2 = cached(key, 10_000, fn);
+		const p3 = cached(key, 10_000, fn);
+		resolveFn(7);
+		expect(await Promise.all([p1, p2, p3])).toEqual([7, 7, 7]);
+		expect(fn).toHaveBeenCalledTimes(1);
+	});
+
+	it("recomputes after the TTL expires", async () => {
+		let count = 0;
+		const fn = vi.fn(async () => ++count);
+		const key = `ttl-${Math.random()}`;
+		expect(await cached(key, 1, fn)).toBe(1);
+		expect(await cached(key, 1, fn)).toBe(1);
+		await new Promise((r) => setTimeout(r, 10));
+		expect(await cached(key, 1, fn)).toBe(2);
+		expect(fn).toHaveBeenCalledTimes(2);
+	});
+
+	it("invalidates a key so the next read recomputes", async () => {
+		let count = 0;
+		const fn = vi.fn(async () => ++count);
+		const key = `inv-${Math.random()}`;
+		expect(await cached(key, 10_000, fn)).toBe(1);
+		invalidateMemory(key);
+		expect(await cached(key, 10_000, fn)).toBe(2);
+		expect(fn).toHaveBeenCalledTimes(2);
+	});
+
+	it("evicts the oldest entry when the in-memory cache is full", async () => {
+		const fn = vi.fn(async () => 1);
+		for (let i = 0; i < 600; i++) {
+			await cached(`bulk-${i}`, 10_000, fn);
+		}
+		// Key "bulk-0" was evicted (insertion order), so it must recompute.
+		await cached("bulk-0", 10_000, fn);
+		expect(fn).toHaveBeenCalledTimes(601);
+	});
+});

src/lib/cache.ts

@@ -5,9 +5,40 @@ import { redis } from "@/lib/redis";
 type CacheEntry<T> = { data: T; expiresAt: number };
 const memory = new Map<string, CacheEntry<unknown>>();
 
+// Cap the in-process map so dynamic keys (leaderboard currencies, article
+// slugs, …) can never grow it without bound. Oldest entries are evicted.
+const MAX_MEMORY_ENTRIES = 500;
+
+// Single-flight: a key being (re)computed is awaited by concurrent callers
+// instead of each starting its own `fn()` (cache-stampede protection).
+const inFlight = new Map<string, Promise<unknown>>();
+
 /** Drop a key from the in-process cache (used when an upstream value changes). */
 export function invalidateMemory(key: string): void {
 	memory.delete(key);
+	inFlight.delete(key);
+}
+
+function pruneExpired(now: number): void {
+	for (const [key, entry] of memory) {
+		if (entry.expiresAt <= now) memory.delete(key);
+	}
+}
+
+function setMemory<T>(key: string, entry: CacheEntry<T>): void {
+	if (memory.has(key)) {
+		memory.set(key, entry);
+		return;
+	}
+	if (memory.size >= MAX_MEMORY_ENTRIES) {
+		// Drop expired entries first, then evict the oldest (insertion order).
+		pruneExpired(Date.now());
+		if (memory.size >= MAX_MEMORY_ENTRIES) {
+			const oldest = memory.keys().next().value;
+			if (oldest !== undefined) memory.delete(oldest);
+		}
+	}
+	memory.set(key, entry);
 }
 
 /**
@@ -30,13 +61,18 @@ export async function cached<T>(
 		return existing.data as T;
 	}
 
+	// Single-flight: a concurrent request already recomputing this key.
+	const pending = inFlight.get(key);
+	if (pending) return (await pending) as T;
+
+	const compute = (async (): Promise<T> => {
 		// Redis path (shared across instances).
 		if (redis && redis.status !== "end") {
 			try {
 				const cached = await redis.get(key);
 				if (cached !== null && cached !== undefined) {
 					const data = JSON.parse(cached) as T;
-				memory.set(key, { data, expiresAt: Date.now() + ttlMs });
+					setMemory(key, { data, expiresAt: Date.now() + ttlMs });
 					return data;
 				}
 			} catch {
@@ -53,7 +89,13 @@ export async function cached<T>(
 				/* non-critical: memory cache still works */
 			}
 		}
-	memory.set(key, { data, expiresAt: Date.now() + ttlMs });
+		setMemory(key, { data, expiresAt: Date.now() + ttlMs });
 
 		return data;
+	})().finally(() => {
+		inFlight.delete(key);
+	});
+
+	inFlight.set(key, compute);
+	return compute;
 }

src/lib/redis-cache.ts

@@ -20,3 +20,17 @@ export async function redisCache<T>(
 export function apiCacheKey(path: string): string {
 	return `api:${path}`;
 }
+
+/**
+ * Deep-convert a payload to a JSON-cache-safe form: BigInt → string (matching
+ * the apiJson() wire format) and Date → ISO string, since JSON.stringify throws
+ * on BigInt. Use for payloads cached through redisCache() that are serialised
+ * straight to a response and never consumed by page logic.
+ */
+export function cacheSafe<T>(value: T): T {
+	return JSON.parse(
+		JSON.stringify(value, (_k, v) =>
+			typeof v === "bigint" ? v.toString() : v,
+		),
+	) as T;
+}

src/lib/services/site-settings.ts

@@ -29,6 +29,10 @@ const IS_PRERENDER =
 
 class SiteSettings {
 	private cache: { map: Map<string, string>; expiresAt: number } | null = null;
+	// Single-flight: one request (re)loads the map, the rest await it — the
+	// root layout reads settings on every render, so concurrent misses must
+	// not each hammer Redis/DB (cache-stampede protection).
+	private inFlight: Promise<Map<string, string>> | null = null;
 
 	private async loadFromDb(): Promise<Map<string, string>> {
 		try {
@@ -42,13 +46,7 @@ class SiteSettings {
 		}
 	}
 
-	private async load(): Promise<Map<string, string>> {
+	private async loadFromCacheOrDb(): Promise<Map<string, string>> {
-		if (this.cache !== null) {
-			if (IS_PRERENDER || this.cache.expiresAt > Date.now()) {
-				return this.cache.map;
-			}
-		}
-
 		if (redis) {
 			try {
 				const cached = await redis.get(REDIS_CACHE_KEY);
@@ -85,6 +83,22 @@ class SiteSettings {
 		return map;
 	}
 
+	private async load(): Promise<Map<string, string>> {
+		if (this.cache !== null) {
+			if (IS_PRERENDER || this.cache.expiresAt > Date.now()) {
+				return this.cache.map;
+			}
+		}
+
+		if (this.inFlight) return this.inFlight;
+
+		const run = this.loadFromCacheOrDb().finally(() => {
+			this.inFlight = null;
+		});
+		this.inFlight = run;
+		return run;
+	}
+
 	async getAll(): Promise<Map<string, string>> {
 		return await this.load();
 	}
@@ -127,6 +141,7 @@ class SiteSettings {
 
 	async reload(): Promise<void> {
 		this.cache = null;
+		this.inFlight = null;
 		if (redis) {
 			try {
 				await redis.del(REDIS_CACHE_KEY);