fix: remove lange banner (SiteHeader) for logged-in users; add online counter and Enter button in TopHeader

src/app/(site)/layout.tsx

@@ -3,7 +3,6 @@ import MotionPageWrapper from "@/components/motion-page-wrapper";
 import { Navigation } from "@/components/navigation";
 import RadioPlayerGate from "@/components/public/radio-player-gate";
 import { SiteFooter } from "@/components/site-footer";
-import { SiteHeader } from "@/components/site-header";
 import { TopHeader } from "@/components/top-header";
 import { auth } from "@/lib/auth";
 
@@ -19,7 +18,6 @@ export default async function SiteLayout({ children }: { children: ReactNode })
 			{session?.user?.id ? (
 				<>
 					<TopHeader session={session} />
-					<SiteHeader />
 					<Navigation session={session} />
 				</>
 			) : null}

src/components/top-header.tsx

@@ -1,10 +1,13 @@
 import Image from "next/image";
 import Link from "next/link";
 import type { Session } from "next-auth";
+import { getTranslations } from "next-intl/server";
 import { signOut } from "@/lib/auth";
 import { avatarImageUrl } from "@/lib/format";
+import { cached } from "@/lib/cache";
 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";
 
 function Currency({
@@ -93,10 +96,59 @@ export async function TopHeader({ session }: { session: Session | null }) {
 	const textColor =
 		"var(--color-navbar-text-readable, var(--color-navbar-text, var(--color-text)))";
 
+	const t = await getTranslations("header");
+	const hotelName = await resolveHotelName();
+
+	let online: number;
+	try {
+		online = await cached("online_count", 10_000, () =>
+			prisma.user.count({ where: { online: "1" } }),
+		);
+	} catch {
+		online = 0;
+	}
+
 	return (
 		<div style={{ backgroundColor: "var(--color-navbar)" }}>
 			<div className="max-w-7xl min-h-[44px] sm:min-h-[60px] px-2 sm:px-4 flex items-center justify-between mx-auto">
-				<div className="flex flex-wrap gap-x-2 sm:gap-x-6">
+				<div className="flex flex-wrap items-center gap-x-2 sm:gap-x-6">
+					<div
+						className="flex items-center gap-2 px-3 py-1 rounded-full"
+						style={{
+							background: "rgba(255,255,255,0.08)",
+							border: "1px solid rgba(255,255,255,0.10)",
+						}}
+					>
+						<span className="relative flex h-2 w-2">
+							<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+							<span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+						</span>
+						<span
+							className="text-xs sm:text-sm font-bold tracking-wide"
+							style={{ color: "rgba(255,255,255,0.9)" }}
+						>
+							{t("online", { count: online, hotel: hotelName })}
+						</span>
+					</div>
+					<Link
+						href="/client"
+						className="flex items-center gap-1.5 rounded-xl border py-1.5 px-3 font-extrabold text-xs transition-all duration-200 hover:scale-[1.02] active:scale-95 shadow-lg"
+						style={{
+							background: "var(--color-primary)",
+							color: "var(--color-primary-foreground)",
+							borderColor: "color-mix(in srgb, var(--color-primary) 20%, transparent)",
+							boxShadow: "0 4px 24px color-mix(in srgb, var(--color-primary) 35%, transparent)",
+						}}
+					>
+						<Image
+							src="/assets/images/EnterHubbly.png"
+							alt=""
+							width={14}
+							height={14}
+							unoptimized
+						/>
+						Enter
+					</Link>
 					<Currency icon="nav-credit-icon" amount={credits} label="Credits" />
 					<Currency icon="nav-ducket-icon" amount={duckets} label="Duckets" />
 					<Currency