feat(client): polished toolbar, live online count via SSE

- Redesign in-game client toolbar with refined glass styling and buttons
- Live online count + emulator status streamed over SSE multicast
- Who's-online tooltip throttled to reduce repeated requests
- Fix show button so it always returns the hidden toolbar
- Use theme CSS variables instead of hardcoded colors
- Add toolbar translations across all 25 locales

src/app/client/client-view.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { LogOut } from "lucide-react";
+import { useTranslations } from "next-intl";
 import {
 	type ReactNode,
 	useCallback,
@@ -12,45 +13,78 @@ import {
 import { signOutAndRevokeTicket } from "@/actions/sessions";
 import Link from "@/components/link";
 import { buildClientLoginUrl } from "@/lib/client-url";
+import { useEventSource } from "@/lib/use-event-source";
 
 function ToolbarBtn({
 	onClick,
-	title,
+	label,
 	children,
 	href,
 }: {
 	onClick?: () => void;
-	title: string;
+	label: string;
 	children: ReactNode;
 	href?: string;
 }) {
+	// Custom floating tooltip: appears on hover/focus regardless of where the
+	// element is on screen. Kept in one component for a consistent look across
+	// the bar (replaces the browser's slow, untitled `title` bubbles).
+	const [tip, setTip] = useState(false);
 	const cls =
-		"w-7 h-7 sm:w-8 sm:h-8 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
+		"group relative w-8 h-8 sm:w-9 sm:h-9 rounded-xl cursor-pointer flex items-center justify-center transition-all duration-200 hover:-translate-y-0.5 hover:brightness-110 active:translate-y-0 active:scale-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-primary";
 	const style = {
-		borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
+		border:
+			"1px solid color-mix(in srgb, var(--color-primary, #eeb425) 85%, white)",
 		background:
-			"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
+			"linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #eeb425) 92%, white), var(--color-primary, #eeb425) 55%, color-mix(in srgb, var(--color-primary, #eeb425) 60%, black))",
 		color:
 			"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
+		boxShadow:
+			"0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.12)",
 	} as const;
-	if (href) {
-		return (
-			<Link href={href} className={cls} style={style} title={title}>
-				{children}
-			</Link>
-		);
-	}
-	return (
+
+	const trigger = href ? (
+		<Link
+			href={href}
+			className={cls}
+			style={style}
+			aria-label={label}
+			onMouseEnter={() => setTip(true)}
+			onMouseLeave={() => setTip(false)}
+			onFocus={() => setTip(true)}
+			onBlur={() => setTip(false)}
+		>
+			{children}
+		</Link>
+	) : (
 		<button
 			onClick={onClick}
 			className={cls}
 			style={style}
-			title={title}
 			type="button"
+			aria-label={label}
+			onMouseEnter={() => setTip(true)}
+			onMouseLeave={() => setTip(false)}
+			onFocus={() => setTip(true)}
+			onBlur={() => setTip(false)}
 		>
 			{children}
 		</button>
 	);
+
+	return (
+		<span className="relative inline-flex">
+			{trigger}
+			{tip && (
+				<span
+					role="tooltip"
+					className="absolute left-1/2 -translate-x-1/2 -top-8 whitespace-nowrap rounded-md bg-foreground backdrop-blur px-2 py-1 text-[10px] font-bold text-background shadow-lg pointer-events-none"
+				>
+					{label}
+				</span>
+			)}
+		</span>
+	);
 }
 
 export function ClientView({
@@ -64,17 +98,47 @@ export function ClientView({
 	hotelName: string;
 	initialOnline: number;
 }) {
-	const [_isFullscreen, setIsFullscreen] = useState(false);
+	const tToolbar = useTranslations("toolbar");
+	const [isFullscreen, setIsFullscreen] = useState(false);
 	const [onlineCount, setOnlineCount] = useState(initialOnline);
+	const [emulatorOk, setEmulatorOk] = useState<boolean | null>(null);
+	const [onlineUsers, setOnlineUsers] = useState<string[]>([]);
+	const [showOnlineUsers, setShowOnlineUsers] = useState(false);
+	const [barHidden, setBarHidden] = useState(false);
 
+	// Real-time online count + emulator status via SSE multicast (replaces the
+	// legacy 15s polling).
+	const { data: onlineStream } = useEventSource<{
+		count: number;
+		emulator: boolean;
+	}>("/api/online/count/stream", { enabled: true });
 	useEffect(() => {
-		const interval = setInterval(async () => {
-			try {
-				const res = await fetch("/api/online/count");
-				if (res.ok) setOnlineCount((await res.json()).count ?? 0);
-			} catch {}
-		}, 15000);
-		return () => clearInterval(interval);
+		if (!onlineStream) return;
+		if (typeof onlineStream.count === "number")
+			setOnlineCount(onlineStream.count);
+		if (typeof onlineStream.emulator === "boolean")
+			setEmulatorOk(onlineStream.emulator);
+	}, [onlineStream]);
+
+	// "Who's online" list, fetched sparingly (server-side cached 10s). Only a
+	// fresh fetch is issued when hovered and the last fetch is stale — hovering
+	// repeatedly must not spam the endpoint.
+	const onlineUsersRef = useRef<number>(0);
+	const refreshOnlineUsers = useCallback(() => {
+		const now = Date.now();
+		if (now - onlineUsersRef.current < 30_000) return;
+		onlineUsersRef.current = now;
+		fetch("/api/online", { cache: "no-store" })
+			.then((r) => (r.ok ? r.json() : null))
+			.then((data) => {
+				const usernames = Array.isArray(data?.users)
+					? data.users
+							.map((u: { username?: string }) => u.username)
+							.filter((n: unknown): n is string => typeof n === "string")
+					: [];
+				setOnlineUsers(usernames);
+			})
+			.catch(() => setOnlineUsers([]));
 	}, []);
 
 	const toggleFullscreen = useCallback(() => {
@@ -163,16 +227,18 @@ export function ClientView({
 
 	const handleMouseDown = useCallback(
 		(e: React.MouseEvent) => {
-			if ((e.target as HTMLElement).closest("button, a")) return;
-			startDrag(e.clientX, e.clientY);
+			if ((e.target as HTMLElement).closest(".toolbar-grip")) {
+				startDrag(e.clientX, e.clientY);
+			}
 		},
 		[startDrag],
 	);
 
 	const handleTouchStart = useCallback(
 		(e: React.TouchEvent) => {
-			if ((e.target as HTMLElement).closest("button, a")) return;
-			startDrag(e.touches[0].clientX, e.touches[0].clientY);
+			if ((e.target as HTMLElement).closest(".toolbar-grip")) {
+				startDrag(e.touches[0].clientX, e.touches[0].clientY);
+			}
 		},
 		[startDrag],
 	);
@@ -225,22 +291,24 @@ export function ClientView({
 	return (
 		<>
 			{pos ? (
-				// biome-ignore lint/a11y/noStaticElementInteractions: draggable toolbar with explicit mouse/touch handlers
 				<div
 					ref={toolbarRef}
-					className={`fixed z-[9999] backdrop-blur-xl bg-foreground/30 rounded-xl border border-white/10 shadow-2xl px-1.5 py-1 select-none ${dragging ? "cursor-grabbing" : "cursor-grab"}`}
+					className="fixed z-[9999] rounded-2xl shadow-2xl px-1.5 py-1.5 select-none backdrop-blur-2xl"
 					style={{
 						top: pos.top,
 						left: pos.left,
 						transition: snapTween
 							? "top 0.18s ease-out, left 0.18s ease-out"
 							: undefined,
+						background:
+							"linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04))",
+						border: "1px solid rgba(255,255,255,0.14)",
+						boxShadow:
+							"0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.12), inset 0 0 24px rgba(255,255,255,0.04)",
 					}}
-					onMouseDown={handleMouseDown}
-					onTouchStart={handleTouchStart}
 				>
-					<div className="flex items-center gap-1 sm:gap-2">
-						<ToolbarBtn href="/" title="Home">
+					<div className="flex items-center gap-1 sm:gap-1.5">
+						<ToolbarBtn href="/" label={tToolbar("home")}>
 							<svg
 								width="14"
 								height="14"
@@ -251,60 +319,16 @@ export function ClientView({
 								strokeLinecap="round"
 								strokeLinejoin="round"
 								role="img"
-								aria-label="Home"
+								aria-label={tToolbar("home")}
 							>
-								<title>Home</title>
+								<title>{tToolbar("home")}</title>
 								<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
 								<polyline points="9 22 9 12 15 12 15 22" />
 							</svg>
 						</ToolbarBtn>
-						<ToolbarBtn onClick={() => window.location.reload()} title="Reload">
-							<svg
-								width="14"
-								height="14"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								role="img"
-								aria-label="Reload"
-							>
-								<title>Reload</title>
-								<polyline points="23 4 23 10 17 10" />
-								<polyline points="1 20 1 14 7 14" />
-								<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
-							</svg>
-						</ToolbarBtn>
-						<ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
-							<svg
-								width="14"
-								height="14"
-								viewBox="0 0 24 24"
-								fill="none"
-								stroke="currentColor"
-								strokeWidth="2"
-								strokeLinecap="round"
-								strokeLinejoin="round"
-								role="img"
-								aria-label="Fullscreen"
-							>
-								<title>Fullscreen</title>
-								<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
-							</svg>
-						</ToolbarBtn>
-						<div
-							className="h-7 sm:h-8 px-1.5 sm:px-2 rounded-lg border-2 flex items-center justify-center gap-1 shadow-lg select-none"
-							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
-								background:
-									"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
-								color:
-									"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
-							}}
-							title="Online users"
+						<ToolbarBtn
+							onClick={() => window.location.reload()}
+							label={tToolbar("reload")}
 						>
 							<svg
 								width="14"
@@ -316,27 +340,143 @@ export function ClientView({
 								strokeLinecap="round"
 								strokeLinejoin="round"
 								role="img"
-								aria-label="Online users"
+								aria-label={tToolbar("reload")}
 							>
-								<title>Online users</title>
+								<title>{tToolbar("reload")}</title>
+								<polyline points="23 4 23 10 17 10" />
+								<polyline points="1 20 1 14 7 14" />
+								<path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
+							</svg>
+						</ToolbarBtn>
+						<ToolbarBtn
+							onClick={toggleFullscreen}
+							label={
+								isFullscreen
+									? tToolbar("fullscreenExit")
+									: tToolbar("fullscreen")
+							}
+						>
+							{isFullscreen ? (
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									role="img"
+									aria-label={tToolbar("fullscreenExit")}
+								>
+									<title>{tToolbar("fullscreenExit")}</title>
+									<path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" />
+								</svg>
+							) : (
+								<svg
+									width="14"
+									height="14"
+									viewBox="0 0 24 24"
+									fill="none"
+									stroke="currentColor"
+									strokeWidth="2"
+									strokeLinecap="round"
+									strokeLinejoin="round"
+									role="img"
+									aria-label={tToolbar("fullscreen")}
+								>
+									<title>{tToolbar("fullscreen")}</title>
+									<path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
+								</svg>
+							)}
+						</ToolbarBtn>
+						<div
+							className="h-8 sm:h-9 rounded-xl flex items-center justify-center px-2"
+							style={{
+								border:
+									"1px solid color-mix(in srgb, var(--color-primary, #eeb425) 50%, transparent)",
+								background:
+									"color-mix(in srgb, var(--color-primary, #eeb425) 14%, rgba(255,255,255,0.05))",
+								boxShadow: "inset 0 1px 0 rgba(255,255,255,0.20)",
+							}}
+							role="status"
+							title={
+								emulatorOk === false
+									? tToolbar("emulatorOffline")
+									: tToolbar("emulatorOnline")
+							}
+						>
+							<span className="relative flex h-2.5 w-2.5">
+								{emulatorOk === false ? (
+									<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-destructive ring-2 ring-destructive/30 shadow-[0_0_8px_rgba(239,68,68,0.8)]" />
+								) : (
+									<span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-success ring-2 ring-success/30 shadow-[0_0_8px_rgba(52,211,153,0.8)]" />
+								)}
+							</span>
+						</div>
+						<div
+							className="relative h-8 sm:h-9 px-2 sm:px-2.5 rounded-xl flex items-center justify-center gap-1.5 select-none cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:brightness-110 active:translate-y-0"
+							style={{
+								border:
+									"1px solid color-mix(in srgb, var(--color-primary, #eeb425) 85%, white)",
+								background:
+									"linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #eeb425) 92%, white), var(--color-primary, #eeb425) 55%, color-mix(in srgb, var(--color-primary, #eeb425) 60%, black))",
+								color:
+									"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
+								boxShadow:
+									"0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.12)",
+							}}
+							role="status"
+							aria-label={tToolbar("onlineUsers")}
+							onMouseEnter={() => {
+								setShowOnlineUsers(true);
+								refreshOnlineUsers();
+							}}
+							onMouseLeave={() => setShowOnlineUsers(false)}
+						>
+							<span className="relative flex h-2 w-2">
+								<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-background/80 opacity-75" />
+								<span className="relative inline-flex rounded-full h-2 w-2 bg-background shadow-[0_0_8px_rgba(255,255,255,0.9)]" />
+							</span>
+							<svg
+								width="14"
+								height="14"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								role="img"
+								aria-label={tToolbar("onlineUsers")}
+							>
+								<title>{tToolbar("onlineUsers")}</title>
 								<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
 								<circle cx="12" cy="7" r="4" />
 							</svg>
 							<span className="text-[10px] sm:text-xs font-bold">
 								{onlineCount}
 							</span>
+							{showOnlineUsers && onlineUsers.length > 0 && (
+								<span className="absolute left-1/2 -translate-x-1/2 -top-10 max-w-[200px] rounded-md bg-foreground backdrop-blur px-2 py-1 text-[10px] font-bold text-background shadow-lg pointer-events-none whitespace-normal text-center">
+									{onlineUsers.slice(0, 8).join(", ")}
+									{onlineUsers.length > 8
+										? ` +${onlineUsers.length - 8} more`
+										: ""}
+								</span>
+							)}
 						</div>
+						{/* biome-ignore lint/a11y/noStaticElementInteractions: grip handle explicitly initiates a drag (mouse+touch) and is not a button */}
 						<div
-							className="h-7 sm:h-8 px-1 rounded-lg border-2 flex items-center justify-center shadow-lg opacity-50"
+							className="toolbar-grip h-8 sm:h-9 px-1.5 rounded-xl flex items-center justify-center cursor-grab active:cursor-grabbing touch-none opacity-60 hover:opacity-100 transition-opacity duration-200"
 							style={{
-								borderColor:
-									"color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
-								background:
-									"linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
-								color:
-									"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
+								border: "1px solid rgba(255,255,255,0.18)",
+								background: "rgba(255,255,255,0.06)",
+								color: "rgba(255,255,255,0.85)",
 							}}
-							title="Drag to move"
+							title={tToolbar("dragToMove")}
+							onMouseDown={handleMouseDown}
+							onTouchStart={handleTouchStart}
 						>
 							<svg
 								width="12"
@@ -348,9 +488,9 @@ export function ClientView({
 								strokeLinecap="round"
 								strokeLinejoin="round"
 								role="img"
-								aria-label="Drag"
+								aria-label={tToolbar("dragToMove")}
 							>
-								<title>Drag</title>
+								<title>{tToolbar("dragToMove")}</title>
 								<circle cx="9" cy="5" r="1" />
 								<circle cx="15" cy="5" r="1" />
 								<circle cx="9" cy="12" r="1" />
@@ -361,14 +501,75 @@ export function ClientView({
 						</div>
 						<ToolbarBtn
 							onClick={() => void signOutAndRevokeTicket()}
-							title="Logout"
+							label={tToolbar("logout")}
 						>
 							<LogOut size={14} />
 						</ToolbarBtn>
+						<ToolbarBtn
+							onClick={() => setBarHidden(true)}
+							label={tToolbar("hide")}
+						>
+							<svg
+								width="14"
+								height="14"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								strokeWidth="2"
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								role="img"
+								aria-label={tToolbar("hide")}
+							>
+								<title>{tToolbar("hide")}</title>
+								<path d="M9 18l6-6-6-6" />
+							</svg>
+						</ToolbarBtn>
 					</div>
 				</div>
 			) : null}
 
+			{barHidden && pos ? (
+				<button
+					type="button"
+					onPointerDown={(e) => {
+						e.preventDefault();
+						setBarHidden(false);
+					}}
+					className="fixed z-[9999] h-8 rounded-xl flex items-center justify-center px-2 cursor-pointer transition-all duration-200 opacity-80 hover:opacity-100 hover:-translate-y-0.5 active:translate-y-0 active:scale-90"
+					style={{
+						top: pos.top,
+						left: pos.left,
+						border:
+							"1px solid color-mix(in srgb, var(--color-primary, #eeb425) 85%, white)",
+						background:
+							"linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #eeb425) 92%, white), var(--color-primary, #eeb425) 55%, color-mix(in srgb, var(--color-primary, #eeb425) 60%, black))",
+						color:
+							"var(--button-text-color-readable, var(--button-text-color, #1a1a2e))",
+						boxShadow:
+							"0 2px 8px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 4px rgba(0,0,0,0.12)",
+					}}
+					aria-label={tToolbar("show")}
+					title={tToolbar("show")}
+				>
+					<svg
+						width="12"
+						height="12"
+						viewBox="0 0 24 24"
+						fill="none"
+						stroke="currentColor"
+						strokeWidth="2.5"
+						strokeLinecap="round"
+						strokeLinejoin="round"
+						role="img"
+						aria-label={tToolbar("show")}
+					>
+						<title>{tToolbar("show")}</title>
+						<path d="M15 18l-6-6 6-6" />
+					</svg>
+				</button>
+			) : null}
+
 			<div
 				className="relative w-screen h-screen overflow-hidden"
 				style={{ backgroundColor: "var(--color-background)" }}