Optimize client page: combine fetch calls, extract ToolbarBtn component, reduce duplicated inline styles

src/app/client/page.tsx

@@ -1,10 +1,25 @@
 "use client";
 
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState, type ReactNode } from "react";
 import Link from "next/link";
 import { useTranslations } from "next-intl";
 import { ContentCard, SkeletonCard } from "@/components/public/ui";
 
+function ToolbarBtn({ onClick, title, children, href }: {
+  onClick?: () => void; title: string; children: ReactNode; href?: string;
+}) {
+  const cls = "w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0";
+  const style = {
+    borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
+    background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
+    color: "var(--button-text-color, #1a1a2e)",
+  } as const;
+  if (href) {
+    return <Link href={href} className={cls} style={style} title={title}>{children}</Link>;
+  }
+  return <button onClick={onClick} className={cls} style={style} title={title} type="button">{children}</button>;
+}
+
 export default function ClientPage() {
   const t = useTranslations("pages.client");
   const [ticket, setTicket] = useState<string | null>(null);
@@ -21,16 +36,19 @@ export default function ClientPage() {
     if (fetchedRef.current) return;
     fetchedRef.current = true;
 
-    async function fetchTicket() {
+    async function init() {
       try {
-        const res = await fetch("/api/client/sso");
+        const [ssoRes] = await Promise.all([
-        if (res.status === 401) {
+          fetch("/api/client/sso"),
+          fetch("/api/online/count").then(r => r.ok ? r.json() : { count: 0 }).then(d => setOnlineCount(d.count)).catch(() => {}),
+        ]);
+        if (ssoRes.status === 401) {
           setErrorType("auth");
           setError(t("errors.unauthorized"));
           return;
         }
-        if (!res.ok) throw new Error("SSO fetch failed");
+        if (!ssoRes.ok) throw new Error("SSO fetch failed");
-        const data = await res.json();
+        const data = await ssoRes.json();
         setTicket(data.ticket);
         setHotelName(data.hotelName);
         if (data.clientUrl) setClientUrl(data.clientUrl);
@@ -41,25 +59,16 @@ export default function ClientPage() {
         setLoading(false);
       }
     }
-    fetchTicket();
+    init();
-  }, [t]);
 
-  useEffect(() => {
+    const interval = setInterval(async () => {
-    async function fetchOnline() {
       try {
         const res = await fetch("/api/online/count");
-        if (res.ok) {
+        if (res.ok) setOnlineCount((await res.json()).count ?? 0);
-          const data = await res.json();
+      } catch {}
-          setOnlineCount(data.count ?? 0);
+    }, 15000);
-        }
-      } catch {
-        // ignore
-      }
-    }
-    fetchOnline();
-    const interval = setInterval(fetchOnline, 15000);
     return () => clearInterval(interval);
-  }, []);
+  }, [t]);
 
   const toggleFullscreen = useCallback(() => {
     if (!document.fullscreenElement) {
@@ -150,58 +159,24 @@ export default function ClientPage() {
     <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 */}
+        <ToolbarBtn href="/" title="Home">
-        <Link
-          href="/"
-          className="w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
-          style={{
-            borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
-            background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
-            color: "var(--button-text-color, #1a1a2e)",
-          }}
-          title="Home"
-        >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
             <polyline points="9 22 9 12 15 12 15 22" />
           </svg>
-        </Link>
+        </ToolbarBtn>
-
+        <ToolbarBtn onClick={() => window.location.reload()} title="Reload">
-        {/* Reload Button */}
-        <button
-          onClick={() => window.location.reload()}
-          className="w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
-          style={{
-            borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
-            background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
-            color: "var(--button-text-color, #1a1a2e)",
-          }}
-          title="Reload"
-        >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <polyline points="23 4 23 10 17 10" />
             <polyline points="1 20 1 14 7 14" />
             <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15" />
           </svg>
-        </button>
+        </ToolbarBtn>
-
+        <ToolbarBtn onClick={toggleFullscreen} title="Fullscreen">
-        {/* Fullscreen Button */}
-        <button
-          onClick={toggleFullscreen}
-          className="w-10 h-10 rounded-lg border-2 cursor-pointer flex items-center justify-center shadow-lg transition-all duration-200 hover:-translate-y-0.5 hover:shadow-xl active:translate-y-0"
-          style={{
-            borderColor: "color-mix(in srgb, var(--color-primary, #eeb425) 75%, black)",
-            background: "linear-gradient(135deg, var(--color-primary, #eeb425) 0%, color-mix(in srgb, var(--color-primary, #eeb425) 80%, black) 100%)",
-            color: "var(--button-text-color, #1a1a2e)",
-          }}
-          title="Fullscreen"
-        >
           <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
             <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" />
           </svg>
-        </button>
+        </ToolbarBtn>
-
-        {/* Online Count Button */}
         <div
           className="h-10 px-3 rounded-lg border-2 flex items-center justify-center gap-1.5 shadow-lg select-none"
           style={{