From 11004626c7fbd2c97f40785eeb1245daae608130 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Wed, 22 Jul 2026 18:56:46 +0200
Subject: [PATCH] Add newest registered users section to index, register, login
 pages

---
 src/app/(site)/login/page.tsx    | 54 +++++++++++++++++++++++++++++-
 src/app/(site)/page.tsx          | 57 +++++++++++++++++++++++++++++---
 src/app/(site)/register/page.tsx | 54 +++++++++++++++++++++++++++++-
 src/messages/en.json             |  1 +
 4 files changed, 159 insertions(+), 7 deletions(-)

diff --git a/src/app/(site)/login/page.tsx b/src/app/(site)/login/page.tsx
index cd7c44e7..8eb00192 100644
--- a/src/app/(site)/login/page.tsx
+++ b/src/app/(site)/login/page.tsx
@@ -24,7 +24,7 @@ export default async function LoginPage() {
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
 
-	const [online, recentUsers] = await Promise.all([
+	const [online, recentUsers, latestUsers] = await Promise.all([
 		cached("online_count", 10_000, () =>
 			prisma.user.count({ where: { online: "1" } }),
 		).catch(() => 0),
@@ -35,6 +35,13 @@ export default async function LoginPage() {
 				take: 8,
 			})
 			.catch(() => []),
+		prisma.user
+			.findMany({
+				orderBy: { accountCreated: "desc" },
+				select: { username: true, look: true },
+				take: 8,
+			})
+			.catch(() => []),
 	]);
 
 	return (
@@ -139,6 +146,51 @@ export default async function LoginPage() {
 					</div>
 				)}
 
+				{latestUsers.length > 0 && (
+					<div
+						className="rounded-2xl border p-4"
+						style={{
+							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+							backdropFilter: "blur(8px)",
+							WebkitBackdropFilter: "blur(8px)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						}}
+					>
+						<h3
+							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							✨ Newest citizens
+						</h3>
+						<div className="grid grid-cols-4 gap-1.5">
+							{latestUsers.map((u) => (
+								<div
+									key={u.username}
+									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+									style={{
+										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									}}
+								>
+									<Image
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
+										alt=""
+										width={26}
+										height={32}
+										className="rounded-md"
+										unoptimized
+									/>
+									<span
+										className="text-[8px] font-bold truncate w-full text-center leading-tight"
+										style={{ color: "var(--color-text-readable)" }}
+									>
+										{u.username}
+									</span>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+
 				<p className="text-xs text-center" style={{ color: "var(--color-text-muted)" }}>
 					{t("noAccount") ?? "No account?"}{" "}
 					<Link
diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index d1fab982..d80ff639 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -22,7 +22,7 @@ async function getHotelData() {
 	]);
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 
-	const [online, users, rooms, articles, recentUsers, recentPhotos] =
+	const [online, users, rooms, articles, recentUsers, recentPhotos, latestUsers] =
 		await Promise.all([
 			cached("online_count", 10_000, () =>
 				prisma.user.count({ where: { online: "1" } }),
@@ -42,6 +42,13 @@ async function getHotelData() {
 			prisma.cameraWeb
 				.findMany({ orderBy: { timestamp: "desc" }, take: 4 })
 				.catch(() => []),
+			prisma.user
+				.findMany({
+					orderBy: { accountCreated: "desc" },
+					select: { username: true, look: true },
+					take: 8,
+				})
+				.catch(() => []),
 		]);
 
 	return {
@@ -53,6 +60,7 @@ async function getHotelData() {
 		articles,
 		recentUsers,
 		recentPhotos,
+		latestUsers,
 	};
 }
 
@@ -71,6 +79,7 @@ export default async function Home() {
 		articles,
 		recentUsers,
 		recentPhotos,
+		latestUsers,
 	} = await getHotelData();
 
 	return (
@@ -230,7 +239,45 @@ export default async function Home() {
 				))}
 			</div>
 
-			{/* ── 4. News ── */}
+			{/* ── 4. Newest citizens ── */}
+			{latestUsers.length > 0 && (
+				<div>
+					<h2 className="text-xl font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
+						{tp("latestUsers", { count: users.toLocaleString() })}
+					</h2>
+					<div className="grid grid-cols-4 sm:grid-cols-8 gap-3">
+						{latestUsers.map((u) => (
+							<div
+								key={u.username}
+								className="flex flex-col items-center gap-1.5 p-3 rounded-2xl border transition-all duration-200 hover:-translate-y-1 hover:shadow-lg"
+								style={{
+									background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+									backdropFilter: "blur(8px)",
+									WebkitBackdropFilter: "blur(8px)",
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+								}}
+							>
+								<div className="relative">
+									<div className="absolute -inset-2 rounded-full opacity-[0.1] blur-[12px]" style={{ background: "var(--color-primary)" }} />
+									<Image
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "m" })}
+										alt={u.username}
+										width={40}
+										height={50}
+										className="rounded-lg relative"
+										unoptimized
+									/>
+								</div>
+								<span className="text-[10px] font-bold truncate max-w-[64px] text-center leading-tight" style={{ color: "var(--color-text-readable)" }}>
+									{u.username}
+								</span>
+							</div>
+						))}
+					</div>
+				</div>
+			)}
+
+			{/* ── 5. News ── */}
 			<div className="space-y-4">
 				<div className="flex items-center justify-between">
 					<h2 className="text-xl font-black tracking-tight" style={{ color: "var(--color-text-readable)" }}>
@@ -278,7 +325,7 @@ export default async function Home() {
 				)}
 			</div>
 
-			{/* ── 5. Online users row ── */}
+			{/* ── 6. Online users row ── */}
 			{recentUsers.length > 0 && (
 				<div className="text-center">
 					<h3 className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center justify-center gap-2" style={{ color: "var(--color-text-muted)" }}>
@@ -309,7 +356,7 @@ export default async function Home() {
 				</div>
 			)}
 
-			{/* ── 6. Bottom CTA ── */}
+			{/* ── 7. Bottom CTA ── */}
 			<div
 				className="relative overflow-hidden rounded-2xl border text-center px-6 py-10"
 				style={{
@@ -337,7 +384,7 @@ export default async function Home() {
 				</Link>
 			</div>
 
-			{/* ── 7. Recent photos (compact) ── */}
+			{/* ── 8. Recent photos (compact) ── */}
 			{recentPhotos.length > 0 && (
 				<div className="text-center">
 					<h3 className="text-xs font-bold uppercase tracking-widest mb-3" style={{ color: "var(--color-text-muted)" }}>
diff --git a/src/app/(site)/register/page.tsx b/src/app/(site)/register/page.tsx
index 0e42bd2c..cd0d05cf 100644
--- a/src/app/(site)/register/page.tsx
+++ b/src/app/(site)/register/page.tsx
@@ -24,7 +24,7 @@ export default async function RegisterPage() {
 	const imager = imagerRaw ?? "https://www.habbo.com/habbo-imaging/avatarimage";
 	const nonce = (await headers()).get("x-nonce") ?? undefined;
 
-	const [online, recentUsers] = await Promise.all([
+	const [online, recentUsers, latestUsers] = await Promise.all([
 		cached("online_count", 10_000, () =>
 			prisma.user.count({ where: { online: "1" } }),
 		).catch(() => 0),
@@ -35,6 +35,13 @@ export default async function RegisterPage() {
 				take: 8,
 			})
 			.catch(() => []),
+		prisma.user
+			.findMany({
+				orderBy: { accountCreated: "desc" },
+				select: { username: true, look: true },
+				take: 8,
+			})
+			.catch(() => []),
 	]);
 
 	return (
@@ -134,6 +141,51 @@ export default async function RegisterPage() {
 					</div>
 				)}
 
+				{latestUsers.length > 0 && (
+					<div
+						className="rounded-2xl border p-4"
+						style={{
+							background: "color-mix(in srgb, var(--color-surface) 70%, transparent)",
+							backdropFilter: "blur(8px)",
+							WebkitBackdropFilter: "blur(8px)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+						}}
+					>
+						<h3
+							className="text-xs font-bold uppercase tracking-widest mb-3 flex items-center gap-2"
+							style={{ color: "var(--color-text-muted)" }}
+						>
+							✨ Newest citizens
+						</h3>
+						<div className="grid grid-cols-4 gap-1.5">
+							{latestUsers.map((u) => (
+								<div
+									key={u.username}
+									className="flex flex-col items-center gap-0.5 p-1.5 rounded-lg"
+									style={{
+										background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									}}
+								>
+									<Image
+										src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2, size: "s" })}
+										alt=""
+										width={26}
+										height={32}
+										className="rounded-md"
+										unoptimized
+									/>
+									<span
+										className="text-[8px] font-bold truncate w-full text-center leading-tight"
+										style={{ color: "var(--color-text-readable)" }}
+									>
+										{u.username}
+									</span>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+
 				<p
 					className="text-xs text-center"
 					style={{ color: "var(--color-text-muted)" }}
diff --git a/src/messages/en.json b/src/messages/en.json
index 38c70988..2316df3e 100644
--- a/src/messages/en.json
+++ b/src/messages/en.json
@@ -234,6 +234,7 @@
 			"noArticles": "No articles yet.",
 			"noPhotos": "No photos yet.",
 			"noUsers": "No users online",
+			"latestUsers": "Newest citizens ({count} total)",
 			"latestArticle": "Latest Article",
 			"statsOnline": "Online",
 			"statsCitizens": "Citizens",