fix: remove debug console.log from root layout

src/app/client/page.tsx

@@ -97,10 +97,19 @@ export default function ClientPage() {
     return (
       <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
         <header
-          className="flex h-14 items-center border-b px-4"
-          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
+          className="flex h-14 items-center justify-between border-b px-6 shrink-0"
+          style={{ backgroundColor: "var(--color-navbar)", borderColor: "var(--color-primary, #eeb425)" }}
         >
-          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
+          <span className="font-bold text-lg" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{hotelName || "Atom"}</span>
+          <div className="flex items-center gap-2">
+            <span className="relative flex h-2.5 w-2.5">
+              <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.5 w-2.5 bg-green-500" />
+            </span>
+            <span className="text-sm font-bold" style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
+              {onlineCount} Online
+            </span>
+          </div>
         </header>
         <main className="flex-1 flex items-center justify-center">
           <ContentCard icon="🔒" title={t("title")} subtitle={t("errors.unauthorized")}>
@@ -119,10 +128,19 @@ export default function ClientPage() {
     return (
       <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
         <header
-          className="flex h-14 items-center border-b px-4"
-          style={{ backgroundColor: "var(--color-navbar)", borderColor: "color-mix(in srgb, var(--color-text-muted) 15%, transparent)" }}
+          className="flex h-14 items-center justify-between border-b px-6 shrink-0"
+          style={{ backgroundColor: "var(--color-navbar)", borderColor: "var(--color-primary, #eeb425)" }}
         >
-          <span className="font-bold text-lg">{hotelName || "Atom"}</span>
+          <span className="font-bold text-lg" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{hotelName || "Atom"}</span>
+          <div className="flex items-center gap-2">
+            <span className="relative flex h-2.5 w-2.5">
+              <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.5 w-2.5 bg-green-500" />
+            </span>
+            <span className="text-sm font-bold" style={{ color: "var(--color-navbar-text, var(--color-text-muted))" }}>
+              {onlineCount} Online
+            </span>
+          </div>
         </header>
         <main className="flex-1 flex items-center justify-center">
           <p className="text-center" style={{ color: "var(--color-text-muted)" }}>
@@ -136,7 +154,7 @@ export default function ClientPage() {
   const clientSrc = getClientSrc();
 
   return (
-    <div className="relative w-screen h-screen overflow-hidden site-bg" style={{ backgroundColor: "var(--color-background)" }}>
+    <div className="relative w-screen h-screen overflow-hidden" style={{ backgroundColor: "var(--color-background)" }}>
       {/* Floating Toolbar */}
       <div className="fixed top-4 left-4 z-50 flex items-center gap-2">
         {/* Home Button */}

src/app/globals.css

@@ -728,20 +728,24 @@ tbody tr:hover {
   background-color: var(--color-dropdown);
   border: 1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent);
   box-shadow: 0 8px 32px color-mix(in srgb, rgb(0 0 0) 20%, transparent);
+  transform-origin: top right;
+  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1),
+              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+  opacity: 0;
+  transform: translateY(-8px) scale(0.95);
+  pointer-events: none;
 }
 
 details[open] > .dropdown-menu {
-  animation: dropdownIn 0.15s ease-out;
+  opacity: 1;
+  transform: translateY(0) scale(1);
+  pointer-events: auto;
 }
 
-@keyframes dropdownIn {
-  from {
+@starting-style {
+  details[open] > .dropdown-menu {
     opacity: 0;
-    transform: translateY(-6px) scale(0.97);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0) scale(1);
+    transform: translateY(-8px) scale(0.95);
   }
 }
 

src/app/layout.tsx

@@ -41,8 +41,6 @@ export default async function RootLayout({ children }: { children: ReactNode })
   const headersList = await headers();
   const pathname = headersList.get("x-pathname") || "";
   const isClient = pathname === "/client" || pathname.startsWith("/client/");
-  console.log(`[RootLayout] pathname: "${pathname}", isClient: ${isClient}`);
-
   return (
     <html lang={locale} className={`app ${nunito.variable}`}>
       <head>

src/components/top-header.tsx

@@ -80,58 +80,57 @@ export async function TopHeader() {
                  </Link>
                </div>
              </details>
-           ) : null}
- 
-           <details className="relative">
-             <summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
-               {/* biome-ignore lint/performance/noImgElement: external imager */}
-               <img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" />
-               <span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
-             </summary>
-             <div
-               className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
-             >
-               <Link href="/me" className="dropdown-item">
-                 My dashboard
-               </Link>
-               <Link href={`/u/${session.user.name}`} className="dropdown-item">
-                 My profile
-               </Link>
-               <Link href="/settings" className="dropdown-item">
-                 User settings
-               </Link>
-               <Link href="/settings/2fa" className="dropdown-item">
-                 Two-factor
-               </Link>
-               <Link href="/settings/sessions" className="dropdown-item">
-                 Login activity
-               </Link>
-               <div className="h-px my-1 mx-3" style={{ backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
-               <form
-                 action={async () => {
-                   "use server";
-                   await signOut({ redirectTo: "/" });
-                 }}
-               >
-                 <button
-                   type="submit"
-                   className="dropdown-item w-full text-center mx-1 rounded-lg"
-                   style={{
-                     backgroundColor: "color-mix(in srgb, var(--button-danger-color) 12%, transparent)",
-                     color: "var(--button-danger-color)",
-                     border: "none",
-                     cursor: "pointer",
-                     width: "calc(100% - 8px)",
-                   }}
-                 >
-                   Logout
-                 </button>
-               </form>
-             </div>
-           </details>
-         </div>
-       </div>
-     </div>
-   );
-}
+            ) : null}
 
+            <details className="relative">
+              <summary className="list-none cursor-pointer flex items-center [&::-webkit-details-marker]:hidden">
+                {/* biome-ignore lint/performance/noImgElement: external imager */}
+                <img className="w-[54px] h-[62px] bg-no-repeat bg-center" src={avatar} alt="" />
+                <span className="-ml-2 font-semibold" style={{ color: "var(--color-navbar-text, var(--color-text))" }}>{session.user.name}</span>
+              </summary>
+              <div
+                className="dropdown-menu absolute right-0 top-full mt-0.5 min-w-[200px] rounded-xl z-50 py-2"
+              >
+                <Link href="/me" className="dropdown-item">
+                  My dashboard
+                </Link>
+                <Link href={`/u/${session.user.name}`} className="dropdown-item">
+                  My profile
+                </Link>
+                <Link href="/settings" className="dropdown-item">
+                  User settings
+                </Link>
+                <Link href="/settings/2fa" className="dropdown-item">
+                  Two-factor
+                </Link>
+                <Link href="/settings/sessions" className="dropdown-item">
+                  Login activity
+                </Link>
+                <div className="h-px my-1 mx-3" style={{ backgroundColor: "color-mix(in srgb, var(--color-text-muted) 12%, transparent)" }} />
+                <form
+                  action={async () => {
+                    "use server";
+                    await signOut({ redirectTo: "/" });
+                  }}
+                >
+                  <button
+                    type="submit"
+                    className="dropdown-item w-full text-center mx-1 rounded-lg"
+                    style={{
+                      backgroundColor: "color-mix(in srgb, var(--button-danger-color) 12%, transparent)",
+                      color: "var(--button-danger-color)",
+                      border: "none",
+                      cursor: "pointer",
+                      width: "calc(100% - 8px)",
+                    }}
+                  >
+                    Logout
+                  </button>
+                </form>
+              </div>
+            </details>
+          </div>
+        </div>
+      </div>
+    );
+}