feat: add Toaster, notification bell, search, unread badges, last login, recent rooms, hotel alerts, quick room entry, friend requests in top bar

2026-07-26 13:17:51 +02:00
1 parent a906d671fb
commit 3284e5a915
@@ -0,0 +1,173 @@
+import Image from "next/image";
+import Link from "next/link";
+import type { Metadata } from "next";
+import { avatarImageUrl } from "@/lib/format";
+import { prisma } from "@/lib/prisma";
+import { siteSettings } from "@/lib/services/site-settings";
+
+export const metadata: Metadata = { title: "Search" };
+
+type SearchParams = Promise<{ q?: string }>;
+
+export default async function SearchPage({
+	searchParams,
+}: {
+	searchParams: SearchParams;
+}) {
+	const { q } = await searchParams;
+	const query = q?.trim();
+
+	const imager = (await siteSettings.get(
+		"habbo_imaging_url",
+		"https://www.habbo.com/habbo-imaging/avatarimage",
+	)) ?? "";
+
+	if (!query) {
+		return (
+			<div className="rounded-2xl border p-10 text-center" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+				<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
+					Enter a search term to find users.
+				</p>
+			</div>
+		);
+	}
+
+	const users = await prisma.user
+		.findMany({
+			where: {
+				username: { contains: query },
+			},
+			select: {
+				id: true,
+				username: true,
+				look: true,
+				motto: true,
+				online: true,
+				rank: true,
+			},
+			take: 30,
+		})
+		.catch(() => []);
+
+	const rooms = await prisma.rooms
+		.findMany({
+			where: {
+				name: { contains: query },
+				state: "open",
+			},
+			select: {
+				id: true,
+				name: true,
+				ownerName: true,
+				users: true,
+				usersMax: true,
+			},
+			take: 12,
+		})
+		.catch(() => []);
+
+	return (
+		<div className="flex flex-col gap-6">
+			<div className="rounded-2xl border p-4" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+				<form action="/search" method="GET" className="flex gap-2">
+					<input
+						type="text"
+						name="q"
+						defaultValue={query}
+						placeholder="Search users or rooms..."
+						className="flex-1 rounded-xl border-2 px-4 py-2.5 text-sm font-medium"
+						style={{
+							backgroundColor: "var(--color-background)",
+							color: "var(--color-text-readable)",
+							borderColor: "color-mix(in srgb, var(--color-text-muted) 25%, transparent)",
+						}}
+					/>
+					<button
+						type="submit"
+						className="rounded-xl px-6 py-2.5 font-extrabold text-sm transition-all duration-200 hover:scale-[1.02] active:scale-95"
+						style={{
+							background: "var(--color-primary)",
+							color: "var(--color-primary-foreground)",
+						}}
+					>
+						Search
+					</button>
+				</form>
+			</div>
+
+			<p className="text-sm" style={{ color: "var(--color-text-muted)" }}>
+				Results for &quot;{query}&quot; — {users.length} user{users.length !== 1 ? "s" : ""}
+				{rooms.length > 0 && `, ${rooms.length} room${rooms.length !== 1 ? "s" : ""}`}
+			</p>
+
+			{users.length > 0 && (
+				<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+					<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
+						Users
+					</h2>
+					<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
+						{users.map((u) => (
+							<Link
+								key={u.id}
+								href={`/u/${u.username}`}
+								className="flex flex-col items-center gap-1.5 rounded-xl p-3 transition-all duration-200 hover:-translate-y-0.5"
+								style={{ background: "color-mix(in srgb, var(--color-primary) 4%, transparent)" }}
+							>
+								<Image
+									src={avatarImageUrl(imager, u.look, { headOnly: true, direction: 2 })}
+									alt={u.username}
+									width={40}
+									height={48}
+									unoptimized
+									className="rounded-lg"
+								/>
+								<span className="text-xs font-extrabold truncate max-w-full text-center" style={{ color: "var(--color-text-readable)" }}>
+									{u.username}
+								</span>
+								<span className="text-[9px] font-semibold" style={{ color: "var(--color-text-muted)" }}>
+									{u.online === "1" ? "🟢 Online" : "Offline"}
+								</span>
+							</Link>
+						))}
+					</div>
+				</div>
+			)}
+
+			{rooms.length > 0 && (
+				<div className="rounded-2xl border p-5" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+					<h2 className="text-lg font-black tracking-tight mb-4" style={{ color: "var(--color-text-readable)" }}>
+						Rooms
+					</h2>
+					<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
+						{rooms.map((room) => (
+							<Link
+								key={room.id}
+								href={`/room/${room.id}`}
+								className="rounded-xl border p-3 transition-all duration-200 hover:-translate-y-0.5"
+								style={{
+									background: "color-mix(in srgb, var(--color-primary) 4%, transparent)",
+									borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)",
+								}}
+							>
+								<p className="text-sm font-extrabold truncate" style={{ color: "var(--color-text-readable)" }}>
+									{room.name}
+								</p>
+								<p className="text-[10px] font-semibold mt-0.5" style={{ color: "var(--color-text-muted)" }}>
+									{room.ownerName} · {room.users}/{room.usersMax}
+								</p>
+							</Link>
+						))}
+					</div>
+				</div>
+			)}
+
+			{users.length === 0 && rooms.length === 0 && (
+				<div className="rounded-2xl border p-10 text-center" style={{ background: "var(--color-surface)", borderColor: "color-mix(in srgb, var(--color-text-muted) 10%, transparent)" }}>
+					<p className="text-sm font-bold" style={{ color: "var(--color-text-muted)" }}>
+						No users or rooms found for &quot;{query}&quot;.
+					</p>
+				</div>
+			)}
+		</div>
+	);
+}