feat(home): clean shared top bar with live online counter

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