From b40293bd0621cf99422a8e8c4f325e8571b935d1 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Sun, 18 Oct 2026 19:38:32 +0200
Subject: [PATCH] feat(home): clean shared top bar with live online counter
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The homepage duplicated the online count and recent-user avatars (hero plus
community sidebar), and the public pages each kept their own chrome. Put one
AuthTopBar at the top of index, login and register — logo + hotel name plus a
live online indicator and the language/clock/theme controls — and drop the
duplicated hero rows.
---
 src/app/(site)/page.tsx                       | 76 +------------------
 src/components/auth/auth-landing.tsx          |  1 +
 src/components/auth/auth-page-frame.tsx       |  5 +-
 src/components/auth/auth-top-bar.tsx          | 44 +++++++++--
 .../shared/public-avatar-contract.test.ts     |  2 +-
 5 files changed, 45 insertions(+), 83 deletions(-)

diff --git a/src/app/(site)/page.tsx b/src/app/(site)/page.tsx
index 95e37da9..277ff43b 100644
--- a/src/app/(site)/page.tsx
+++ b/src/app/(site)/page.tsx
@@ -10,7 +10,6 @@ import { AnimatedCounter } from "@/components/animated-counter";
 import { AuthTopBar } from "@/components/auth/auth-top-bar";
 import { LoginForm } from "@/components/auth/login-form";
 import Link from "@/components/link";
-import { LiveOnlineCounter } from "@/components/live-online-counter";
 import { Reveal } from "@/components/motion-reveal";
 import { PublicLoadError } from "@/components/public/load-error";
 import { UserAvatarThumbnail } from "@/components/shared/user-avatar-thumbnail";
@@ -402,9 +401,9 @@ async function Home() {
 
 	return (
 		<div className="flex w-full flex-col gap-14 pb-16 pt-2 md:gap-20 md:pb-24">
-			{/* ── Top bar ── */}
+			{/* ── Top bar: logo + live online + language/clock/theme ── */}
 			<div className="mx-auto w-full max-w-7xl">
-				<AuthTopBar hotelName={hotelName} logo={logo} />
+				<AuthTopBar hotelName={hotelName} logo={logo} online={online} />
 			</div>
 			{/* ── Cinematic hero ── */}
 			<Reveal className="-mx-3 sm:-mx-4 md:-mx-6">
@@ -454,46 +453,6 @@ async function Home() {
 						style={{ opacity: 0.5, zIndex: 1 }}
 					/>
 					<div className="relative z-10 mx-auto flex min-h-[540px] w-full max-w-6xl flex-col items-center justify-center px-4 py-24 text-center sm:min-h-[580px] lg:min-h-[640px]">
-						<span
-							className="glass-chip gap-2.5 px-4 py-2"
-							style={{
-								fontWeight: 800,
-								letterSpacing: "0.14em",
-								textTransform: "uppercase",
-							}}
-						>
-							<span className="relative flex h-2 w-2">
-								<span
-									className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-70"
-									style={{ background: "var(--color-primary)" }}
-								/>
-								<span
-									className="relative inline-flex h-2 w-2 rounded-full"
-									style={{ background: "var(--color-primary)" }}
-								/>
-							</span>
-							<span
-								className="text-[10px] font-black sm:text-xs"
-								style={{ color: "var(--color-text-readable)" }}
-							>
-								{tp("onlineNow")}
-							</span>
-							{online === null ? (
-								<span className="text-xs">{te("unavailable")}</span>
-							) : (
-								<span
-									className="text-sm sm:text-base"
-									style={{
-										color:
-											"var(--color-primary-readable, var(--color-primary))",
-										fontWeight: 900,
-									}}
-								>
-									<LiveOnlineCounter initial={online} />
-								</span>
-							)}
-						</span>
-
 						<h1
 							className="mt-7 sm:mt-8"
 							style={{ fontFamily: "var(--font-nunito)" }}
@@ -516,37 +475,6 @@ async function Home() {
 							{tp("welcomeBody")}
 						</p>
 
-						{recentUsers !== null && recentUsers.length > 0 && (
-							<div
-								className="animate-fade-in-up mt-7 inline-flex items-center gap-3 rounded-full border px-3 py-1.5"
-								style={{
-									background: "rgba(255,255,255,0.08)",
-									borderColor: "rgba(255,255,255,0.22)",
-									backdropFilter: "blur(12px)",
-									WebkitBackdropFilter: "blur(12px)",
-									animationDelay: "0.08s",
-								}}
-							>
-								<div className="flex -space-x-2.5">
-									{recentUsers.slice(0, 4).map((u) => (
-										<UserAvatarThumbnail
-											key={u.username}
-											figure={u.look}
-											alt={u.username}
-											options={{ direction: 2 }}
-											className="h-9 w-9 rounded-full ring-2 ring-white/70 shadow-lg"
-										/>
-									))}
-								</div>
-								<span
-									className="pr-1 text-[10px] font-extrabold uppercase tracking-[0.22em]"
-									style={{ color: "rgba(255,255,255,0.75)" }}
-								>
-									{tp("recentUsers")}
-								</span>
-							</div>
-						)}
-
 						<div
 							className="animate-fade-in-up mt-9 flex flex-wrap items-center justify-center gap-3"
 							style={{ animationDelay: "0.2s" }}
diff --git a/src/components/auth/auth-landing.tsx b/src/components/auth/auth-landing.tsx
index e7624099..639ed6cf 100644
--- a/src/components/auth/auth-landing.tsx
+++ b/src/components/auth/auth-landing.tsx
@@ -103,6 +103,7 @@ export function AuthLandingView({ data, copy, form }: AuthLandingViewProps) {
 		<AuthPageFrame
 			hotelName={data.hotelName}
 			logo={data.logo}
+			online={data.online}
 			title={copy.title}
 			subtitle={copy.subtitle}
 			notice={copy.notice}
diff --git a/src/components/auth/auth-page-frame.tsx b/src/components/auth/auth-page-frame.tsx
index ca43a01c..9471ffb2 100644
--- a/src/components/auth/auth-page-frame.tsx
+++ b/src/components/auth/auth-page-frame.tsx
@@ -128,6 +128,8 @@ function AvatarGrid({
 interface AuthPageFrameProps {
 	hotelName: string;
 	logo?: string | null;
+	/** Live online count shown in the top bar; omit to hide it. */
+	online?: number;
 	/** Title of the form card on the right. */
 	title: string;
 	/** One-line intro above the form. */
@@ -148,6 +150,7 @@ interface AuthPageFrameProps {
 export function AuthPageFrame({
 	hotelName,
 	logo,
+	online,
 	title,
 	subtitle,
 	notice,
@@ -158,7 +161,7 @@ export function AuthPageFrame({
 		<div className="mx-auto w-full max-w-6xl flex flex-col gap-8 pb-16">
 			<div className="relative">
 				<AuthAurora />
-				<AuthTopBar hotelName={hotelName} logo={logo} />
+				<AuthTopBar hotelName={hotelName} logo={logo} online={online} />
 			</div>
 
 			<Reveal>
diff --git a/src/components/auth/auth-top-bar.tsx b/src/components/auth/auth-top-bar.tsx
index 5ef15c12..511d721e 100644
--- a/src/components/auth/auth-top-bar.tsx
+++ b/src/components/auth/auth-top-bar.tsx
@@ -1,29 +1,33 @@
 import Image from "next/image";
 import { Clock } from "@/components/clock";
 import { LanguageSwitcher } from "@/components/language-switcher";
+import { LiveOnlineCounter } from "@/components/live-online-counter";
 import { Reveal } from "@/components/motion-reveal";
 import { ThemeSwitcher } from "@/components/theme-switcher";
 import { ICON_LIGHTHOUSE } from "@/lib/site-icons";
 
 /**
- * Shared frosted-glass top bar for the public auth pages (login, register,
- * etc.). Shows the hotel logo + name on the left and language / clock / theme
- * controls on the right. Defaults mirror the homepage top bar so auth pages
- * share one consistent look.
+ * Shared frosted-glass top bar for the public pages (index, login, register).
+ * Shows the hotel logo + name on the left and the live online count, language /
+ * clock / theme controls on the right. One component so every public page keeps
+ * the exact same chrome instead of duplicating it.
  */
 export function AuthTopBar({
 	hotelName,
 	logo,
+	online,
 	showHotelName = true,
 }: {
 	hotelName: string;
 	logo?: string | null;
+	/** Live online count; omit (or pass null) to hide the indicator. */
+	online?: number | null;
 	showHotelName?: boolean;
 }) {
 	return (
 		<Reveal>
 			<div
-				className="relative flex items-center justify-between rounded-full border px-3 py-2.5 sm:px-5"
+				className="relative flex items-center justify-between gap-3 rounded-full border px-3 py-2.5 sm:px-5"
 				style={{
 					background:
 						"linear-gradient(90deg, color-mix(in srgb, var(--color-surface) 62%, transparent), color-mix(in srgb, var(--color-primary) 7%, transparent))",
@@ -35,7 +39,7 @@ export function AuthTopBar({
 						"0 1px 3px rgba(0,0,0,0.04), 0 0 0 0.5px color-mix(in srgb, var(--color-text-muted) 6%, transparent)",
 				}}
 			>
-				<div className="flex items-center gap-2 sm:gap-3">
+				<div className="flex min-w-0 items-center gap-2 sm:gap-3">
 					{logo ? (
 						<Image
 							src={logo}
@@ -69,7 +73,7 @@ export function AuthTopBar({
 					)}
 					{showHotelName ? (
 						<span
-							className="hidden text-sm font-extrabold uppercase tracking-wide sm:inline"
+							className="hidden truncate text-sm font-extrabold uppercase tracking-wide sm:inline"
 							style={{ color: "var(--color-text-readable)" }}
 						>
 							{hotelName}
@@ -83,6 +87,32 @@ export function AuthTopBar({
 							"color-mix(in srgb, var(--color-text-muted) 5%, transparent)",
 					}}
 				>
+					{typeof online === "number" && (
+						<span
+							className="flex items-center gap-1.5 px-1"
+							title={hotelName}
+							style={{ color: "var(--color-text-readable)" }}
+						>
+							<span className="relative flex h-2 w-2 shrink-0">
+								<span
+									className="absolute inline-flex h-full w-full animate-ping rounded-full opacity-70"
+									style={{ background: "var(--color-primary)" }}
+								/>
+								<span
+									className="relative inline-flex h-2 w-2 rounded-full"
+									style={{ background: "var(--color-primary)" }}
+								/>
+							</span>
+							<span
+								className="text-xs font-black tabular-nums"
+								style={{
+									color: "var(--color-primary-readable, var(--color-primary))",
+								}}
+							>
+								<LiveOnlineCounter initial={online} />
+							</span>
+						</span>
+					)}
 					<LanguageSwitcher />
 					<div
 						className="hidden sm:block w-px h-5"
diff --git a/src/components/shared/public-avatar-contract.test.ts b/src/components/shared/public-avatar-contract.test.ts
index 56857f60..bfd149ef 100644
--- a/src/components/shared/public-avatar-contract.test.ts
+++ b/src/components/shared/public-avatar-contract.test.ts
@@ -11,7 +11,7 @@ const compactCallSites = new Map<string, number>([
 	["src/app/(site)/leaderboard/page.tsx", 1],
 	["src/app/(site)/me/page.tsx", 1],
 	["src/app/(site)/messages/page.tsx", 2],
-	["src/app/(site)/page.tsx", 2],
+	["src/app/(site)/page.tsx", 1],
 	["src/app/(site)/radio/leaderboard/page.tsx", 1],
 	["src/app/(site)/radio/shouts/page.tsx", 1],
 	["src/app/(site)/rankings/page.tsx", 1],