fix: extract room quick-entry form into Client Component to fix Server Component event handler error

- Move inline form with onSubmit handler from top-header.tsx (Server Component) into new RoomQuickEntry Client Component
- Add badges section to /me page showing equipped badges from users_badges
- Add last website login timestamp from website_login_logs to /me page stats
- Add search bar to top-header for user search
- Add achievement score, respects received, friend count stats to /me page
- Add quick links card to /me page with Messages/Profile/Settings/Shop
- Clean up RoomQuickEntry: use form.elements.namedItem, remove unused ref, add aria-label

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

@@ -69,7 +69,9 @@ export default async function MePage({
 
 	let content: ReactNode;
 	try {
-		const [user, imagerBase, hotelName, neededRaw, amountRaw, currencyRaw, alertRaw, recentRooms] =
+		const BADGE_IMG_BASE = "https://images.habbo.com/c_images/album1584";
+
+		const [user, imagerBase, hotelName, neededRaw, amountRaw, currencyRaw, alertRaw, recentRooms, badges, lastWebLogin, userSettings, friendCount, unreadCount] =
 			await Promise.all([
 				prisma.user.findUnique({
 					where: { id: userId },
@@ -123,6 +125,34 @@ export default async function MePage({
 						take: 6,
 					})
 					.catch(() => []),
+				prisma.usersBadges
+					.findMany({
+						where: { userId, slotId: { gt: 0 } },
+						orderBy: { slotId: "asc" },
+						select: { badgeCode: true, slotId: true },
+					})
+					.catch(() => []),
+				prisma.websiteLoginLogs
+					.findFirst({
+						where: { userId },
+						orderBy: { id: "desc" },
+						select: { createdAt: true },
+					})
+					.catch(() => null),
+				prisma.usersSettings
+					.findUnique({
+						where: { userId },
+						select: { achievementScore: true, respectsReceived: true },
+					})
+					.catch(() => null),
+				prisma.messengerFriendships
+					.count({
+						where: { OR: [{ userOneId: userId }, { userTwoId: userId }] },
+					})
+					.catch(() => 0),
+				prisma.messengerOffline
+					.count({ where: { userId } })
+					.catch(() => 0),
 			]);
 
 		if (!user) throw new Error("user-not-found");
@@ -182,6 +212,9 @@ export default async function MePage({
 		const lastLoginDate = user.lastLogin
 			? new Date(user.lastLogin * 1000).toISOString().slice(0, 10)
 			: "Never";
+		const lastWebLoginDate = lastWebLogin?.createdAt
+			? new Date(lastWebLogin.createdAt).toISOString().slice(0, 10)
+			: null;
 		const lastOnlineDate = user.lastOnline
 			? new Date(user.lastOnline * 1000).toISOString().slice(0, 10)
 			: "Never";
@@ -314,10 +347,13 @@ export default async function MePage({
 
 				{/* ── Stat tiles ── */}
 				<Reveal delay={0.1}>
-				<div className="grid grid-cols-3 gap-4 stagger-children">
+				<div className="grid grid-cols-2 sm:grid-cols-3 gap-4 stagger-children">
 					{[
 						{ value: user.credits.toLocaleString(), label: "Credits" },
 						{ value: `Rank ${user.rank}`, label: "Hotel rank" },
+						{ value: (userSettings?.achievementScore ?? 0).toLocaleString(), label: "Achievement score" },
+						{ value: (userSettings?.respectsReceived ?? 0).toLocaleString(), label: "Respects received" },
+						{ value: friendCount.toLocaleString(), label: "Friends" },
 						{ value: lastLoginDate, label: "Last login" },
 					].map((s) => (
 						<div
@@ -578,6 +614,116 @@ export default async function MePage({
 						</div>
 					</Reveal>
 				)}
+
+				{badges.length > 0 && (
+					<Reveal delay={0.3}>
+						<div
+							className="rounded-2xl border p-5"
+							style={{
+								background: "var(--color-surface)",
+								borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+							}}
+						>
+							<div className="mb-4">
+								<h2
+									className="text-lg font-black tracking-tight"
+									style={{ color: "var(--color-text-readable)" }}
+								>
+									Badges
+								</h2>
+								<p className="text-xs mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+									{badges.length} badge{badges.length !== 1 ? "s" : ""} equipped
+								</p>
+							</div>
+							<div className="flex flex-wrap gap-2">
+								{badges.map((badge) => (
+									<Image
+										key={badge.badgeCode}
+										src={`${BADGE_IMG_BASE}/${badge.badgeCode}.gif`}
+										alt={badge.badgeCode}
+										width={40}
+										height={40}
+										className="rounded-md"
+										unoptimized
+									/>
+								))}
+							</div>
+						</div>
+					</Reveal>
+				)}
+
+				<Reveal delay={0.35}>
+					<div
+						className="rounded-2xl border p-5"
+						style={{
+							background: "var(--color-surface)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+						}}
+					>
+						<div className="mb-4">
+							<h2
+								className="text-lg font-black tracking-tight"
+								style={{ color: "var(--color-text-readable)" }}
+							>
+								Quick links
+							</h2>
+						</div>
+						<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+							<Link
+								href="/messages"
+								className="relative flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
+								style={{
+									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
+									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									color: "var(--color-text-readable)",
+								}}
+							>
+								Messages
+								{unreadCount > 0 && (
+									<span
+										className="absolute -top-1.5 -right-1.5 flex min-w-[18px] h-[18px] items-center justify-center rounded-full px-1 text-[10px] font-bold leading-none"
+										style={{ background: "var(--color-danger)", color: "white" }}
+									>
+										{unreadCount > 99 ? "99+" : unreadCount}
+									</span>
+								)}
+							</Link>
+							<Link
+								href={`/u/${user.username}`}
+								className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
+								style={{
+									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
+									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									color: "var(--color-text-readable)",
+								}}
+							>
+								My profile
+							</Link>
+							<Link
+								href="/settings"
+								className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
+								style={{
+									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
+									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									color: "var(--color-text-readable)",
+								}}
+							>
+								Settings
+							</Link>
+							<Link
+								href="/shop"
+								className="flex items-center justify-center gap-2 rounded-xl border p-3 text-sm font-bold transition-all hover:-translate-y-0.5"
+								style={{
+									background: "color-mix(in srgb, var(--color-primary) 6%, transparent)",
+									borderColor: "color-mix(in srgb, var(--color-primary) 18%, transparent)",
+									color: "var(--color-text-readable)",
+								}}
+							>
+								Shop
+							</Link>
+						</div>
+					</div>
+				</Reveal>
 			</div>
 		);
 	} catch {

src/components/room-quick-entry.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+export function RoomQuickEntry() {
+	return (
+		<form
+			action="/client"
+			method="GET"
+			className="hidden sm:flex items-center gap-1"
+			onSubmit={(e) => {
+				const form = e.currentTarget;
+				const input = form.elements.namedItem("roomId") as HTMLInputElement | null;
+				if (input?.value) {
+					form.action = `/room/${input.value}`;
+				}
+			}}
+		>
+			<input
+				type="number"
+				name="roomId"
+				placeholder="Room ID"
+				aria-label="Room ID"
+				min={1}
+				className="w-20 rounded-lg border px-2 py-1 text-xs font-medium"
+				style={{
+					background: "var(--color-background)",
+					color: "var(--color-text-readable)",
+					borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+				}}
+			/>
+			<button
+				type="submit"
+				className="rounded-lg px-2 py-1 text-xs font-bold transition-colors"
+				style={{
+					background: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+					color: "var(--color-primary-readable, var(--color-primary))",
+				}}
+			>
+				Go
+			</button>
+		</form>
+	);
+}

src/components/top-header.tsx

@@ -9,6 +9,7 @@ import { canAccess, getApiAdminContext, PERMS } from "@/lib/permissions";
 import { prisma } from "@/lib/prisma";
 import { resolveHotelName } from "@/lib/hotel-name";
 import { siteSettings } from "@/lib/services/site-settings";
+import { RoomQuickEntry } from "@/components/room-quick-entry";
 
 function Currency({
 	icon,
@@ -174,39 +175,7 @@ export async function TopHeader({ session }: { session: Session | null }) {
 						Enter
 					</Link>
 
-					<form
+					<RoomQuickEntry />
-						action={`/client`}
-						method="GET"
-						className="hidden sm:flex items-center gap-1"
-						onSubmit={(e) => {
-							const input = (e.target as HTMLFormElement).querySelector("input");
-							if (input?.value) {
-								e.currentTarget.action = `/room/${input.value}`;
-							}
-						}}
-					>
-						<input
-							type="number"
-							name="roomId"
-							placeholder="Room ID"
-							className="w-20 rounded-lg border px-2 py-1 text-xs font-medium"
-							style={{
-								background: "var(--color-background)",
-								color: "var(--color-text-readable)",
-								borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
-							}}
-						/>
-						<button
-							type="submit"
-							className="rounded-lg px-2 py-1 text-xs font-bold transition-colors"
-							style={{
-								background: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
-								color: "var(--color-primary-readable, var(--color-primary))",
-							}}
-						>
-							Go
-						</button>
-					</form>
 
 					<Currency icon="nav-credit-icon" amount={credits} label="Credits" />
 					<Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
@@ -218,6 +187,23 @@ export async function TopHeader({ session }: { session: Session | null }) {
 				</div>
 
 				<div className="flex items-center gap-x-1 sm:gap-x-3">
+					<form
+						action="/search"
+						method="GET"
+						className="hidden sm:flex items-center gap-1"
+					>
+						<input
+							type="text"
+							name="q"
+							placeholder="Search users..."
+							className="w-24 rounded-lg border px-2 py-1 text-xs font-medium transition-all focus:w-32"
+							style={{
+								background: "var(--color-background)",
+								color: "var(--color-text-readable)",
+								borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+							}}
+						/>
+					</form>
 					<Link
 						href="/messages"
 						className="relative flex items-center gap-1 rounded-lg px-2 py-1.5 transition-colors hover:bg-white/10"