refactor: extract duplicate header into shared renderHeader function

src/app/client/page.tsx

@@ -93,24 +93,30 @@ export default function ClientPage() {
     );
   }
 
+  function renderHeader() {
+    return (
+      <header
+        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" 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>
+    );
+  }
+
   if (errorType === "auth") {
     return (
       <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
-        <header
+        {renderHeader()}
-          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" 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")}>
             <div style={{ textAlign: "center", marginTop: "1rem" }}>
@@ -127,21 +133,7 @@ export default function ClientPage() {
   if (errorType === "generic" || !ticket) {
     return (
       <div className="flex min-h-screen flex-col" style={{ backgroundColor: "var(--color-background)" }}>
-        <header
+        {renderHeader()}
-          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" 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)" }}>
             {error ?? t("errors.generic")}