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/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"