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/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/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/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-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);