feat : finallt smart

components/admin/admin-header.tsx

@@ -11,13 +11,11 @@ import {
   ClipboardListIcon,
   MessagesSquareIcon,
   LogOutIcon,
-  MenuIcon,
   PlusIcon,
   SwordsIcon,
 } from "lucide-react";
 
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { authClient } from "@/lib/auth/client";
 import { unsubscribeCommissionPush } from "@/components/commission/push-client";
 import { CommissionPushEntryPrompt } from "@/components/commission/push-entry-prompt";
@@ -25,15 +23,6 @@ import { CommissionPushEntryPrompt } from "@/components/commission/push-entry-pr
 export function AdminHeader() {
   const pathname = usePathname();
   const router = useRouter();
-  const mobileLinks = [
-    { href: "/admin/commission", label: "Commission", icon: MessagesSquareIcon, active: pathname.startsWith("/admin/commission") },
-    { href: "/admin/stygian", label: "Stygian", icon: SwordsIcon, active: pathname === "/admin/stygian" },
-    { href: "/admin/activity", label: "Activity", icon: ClipboardListIcon, active: pathname === "/admin/activity" },
-    { href: "/admin/glossary", label: "Glossary", icon: BookOpenIcon, active: pathname === "/admin/glossary" },
-    { href: "/admin", label: "Dashboard", icon: LayoutDashboardIcon, active: pathname === "/admin" },
-    { href: "/admin/create", label: "New Guide", icon: PlusIcon, active: pathname === "/admin/create" },
-    { href: "/admin/image/overview", label: "Image Generator", icon: ImageIcon, active: pathname.startsWith("/admin/image") },
-  ];
   const signOut = async () => {
     await unsubscribeCommissionPush().catch(() => undefined);
     await authClient.signOut({
@@ -56,57 +45,62 @@ export function AdminHeader() {
           className="mr-auto flex min-h-11 shrink-0 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
-          <span className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
+          <span className="hidden lg:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
         </Link>
-        <nav aria-label="Admin navigation" className="hidden items-center gap-1 xl:flex">
+        <nav aria-label="Admin navigation" className="flex min-w-0 flex-1 items-center gap-1 overflow-x-auto">
           <Button variant={pathname.startsWith("/admin/commission") ? "secondary" : "ghost"}
-            size="sm" nativeButton={false} render={<Link href="/admin/commission" />}>
+            size="sm" nativeButton={false} render={<Link href="/admin/commission" />} aria-label="Commission">
-            <MessagesSquareIcon data-icon="inline-start" /><span className="hidden sm:inline">Commission</span>
+            <MessagesSquareIcon data-icon="inline-start" /><span className="hidden xl:inline">Commission</span>
           </Button>
           <Button
             variant={pathname === "/admin/stygian" ? "secondary" : "ghost"}
             size="sm"
             nativeButton={false}
             render={<Link href="/admin/stygian" />}
+            aria-label="Stygian"
           >
             <SwordsIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Stygian</span>
+            <span className="hidden xl:inline">Stygian</span>
           </Button>
           <Button
             variant={pathname === "/admin/activity" ? "secondary" : "ghost"}
             size="sm"
             nativeButton={false}
             render={<Link href="/admin/activity" />}
+            aria-label="Activity"
           >
             <ClipboardListIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Activity</span>
+            <span className="hidden xl:inline">Activity</span>
           </Button>
           <Button
             variant={pathname === "/admin/glossary" ? "secondary" : "ghost"}
             size="sm"
             nativeButton={false}
             render={<Link href="/admin/glossary" />}
+            aria-label="Glossary"
           >
             <BookOpenIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Glossary</span>
+            <span className="hidden xl:inline">Glossary</span>
           </Button>
           <Button
             variant={pathname === "/admin" ? "secondary" : "ghost"}
             size="sm"
             nativeButton={false}
             render={<Link href="/admin" />}
+            aria-label="Dashboard"
           >
             <LayoutDashboardIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Dashboard</span>
+            <span className="hidden xl:inline">Dashboard</span>
           </Button>
           <Button
             variant={pathname === "/admin/create" ? "secondary" : "ghost"}
             size="sm"
             nativeButton={false}
             render={<Link href="/admin/create" />}
+            aria-label="New Guide"
           >
             <PlusIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">New Guide</span>
+            <span className="hidden xl:inline">New Guide</span>
           </Button>
           <Button
             variant={
@@ -115,9 +109,10 @@ export function AdminHeader() {
             size="sm"
             nativeButton={false}
             render={<Link href="/admin/image/overview" />}
+            aria-label="Image Generator"
           >
             <ImageIcon data-icon="inline-start" />
-            <span className="hidden sm:inline">Image Generator</span>
+            <span className="hidden xl:inline">Image Generator</span>
           </Button>
           <Button
             variant="ghost"
@@ -137,30 +132,6 @@ export function AdminHeader() {
             <LogOutIcon />
           </Button>
         </nav>
-        <Sheet>
-          <SheetTrigger render={<Button variant="ghost" size="icon" className="xl:hidden" aria-label="เปิดเมนู" />}>
-            <MenuIcon />
-          </SheetTrigger>
-          <SheetContent side="right">
-            <SheetHeader><SheetTitle>เมนูแอดมิน</SheetTitle></SheetHeader>
-            <nav aria-label="Admin mobile navigation" className="flex flex-col gap-1 overflow-y-auto px-3 pb-4">
-              {mobileLinks.map(({ href, label, icon: Icon, active }) => (
-                <SheetClose
-                  key={href}
-                  render={<Link href={href} className={buttonVariants({ variant: active ? "secondary" : "ghost", className: "h-11 w-full justify-start" })} />}
-                >
-                  <Icon data-icon="inline-start" />{label}
-                </SheetClose>
-              ))}
-              <SheetClose render={<Link href="/" target="_blank" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
-                <ExternalLinkIcon data-icon="inline-start" />เปิดหน้าเว็บไซต์
-              </SheetClose>
-              <Button variant="ghost" className="h-11 w-full justify-start" onClick={signOut}>
-                <LogOutIcon data-icon="inline-start" />ออกจากระบบ
-              </Button>
-            </nav>
-          </SheetContent>
-        </Sheet>
       </div>
     </header>
     </>

components/public/site-header.tsx

@@ -1,28 +1,20 @@
 import Image from "next/image";
 import Link from "next/link";
 import { Suspense } from "react";
-import { MenuIcon } from "lucide-react";
+import { PencilIcon } from "lucide-react";
 
-import { Button, buttonVariants } from "@/components/ui/button";
+import { Button } from "@/components/ui/button";
-import { Sheet, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
 import { VisitorPresence } from "@/components/public/visitor-presence";
 import { getAdminSession } from "@/lib/auth/server";
 
-async function AdminEditLink({ editHref, mobile = false }: { editHref: string; mobile?: boolean }) {
+async function AdminEditLink({ editHref }: { editHref: string }) {
   const isAdmin = Boolean(await getAdminSession());
 
   return isAdmin ? (
-    mobile ? (
+    <Button variant="ghost" size="sm" nativeButton={false} render={<Link href={editHref} />} aria-label="ไปหน้าแก้ไข">
-      <SheetClose
+      <PencilIcon data-icon="inline-start" className="lg:hidden" />
-        render={<Link href={editHref} className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}
+      <span className="hidden lg:inline">ไปหน้าแก้ไข</span>
-      >
+    </Button>
-        ไปหน้าแก้ไข
-      </SheetClose>
-    ) : (
-      <Button variant="ghost" size="sm" nativeButton={false} render={<Link href={editHref} />}>
-        ไปหน้าแก้ไข
-      </Button>
-    )
   ) : null;
 }
 
@@ -36,48 +28,30 @@ export function SiteHeader({ editHref = "/admin", guideId }: { editHref?: string
           className="mr-auto flex min-h-11 shrink-0 items-center gap-3 rounded-lg font-heading font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
         >
           <Image src="/icon.png" alt="" width={36} height={36} className="size-9 object-contain" />
-          <span className="hidden sm:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
+          <span className="hidden lg:inline">ไกด์เกนชินไม่ใช่เกมมือถือ</span>
         </Link>
-        <nav aria-label="Public navigation" className="hidden items-center gap-1 lg:flex">
+        <nav aria-label="Public navigation" className="flex min-w-0 items-center gap-1 overflow-x-auto lg:overflow-visible">
-          <Button variant="ghost" size="sm" nativeButton={false} render={<Link href="/commission" />}>
+          <Button variant="ghost" size="sm" nativeButton={false} render={<Link href="/commission" />} aria-label="Commission">
             <Image src="/icon/commission.webp" alt="" width={24} height={24} className="size-6 object-contain" />
-            Commission
+            <span className="hidden lg:inline">Commission</span>
           </Button>
           <Button
             variant="ghost"
             size="sm"
             nativeButton={false}
             render={<Link href="/stygian" />}
+            aria-label="Stygian Guide"
           >
             <Image src="/icon/stygian.webp" alt="" width={24} height={24} className="size-6 object-contain" />
-            Stygian Guide
+            <span className="hidden lg:inline">Stygian Guide</span>
           </Button>
           <Suspense fallback={null}>
             <AdminEditLink editHref={editHref} />
           </Suspense>
         </nav>
-        <VisitorPresence guideId={guideId} />
+        <div className="hidden lg:block">
-        <Sheet>
+          <VisitorPresence guideId={guideId} />
-          <SheetTrigger render={<Button variant="ghost" size="icon" className="lg:hidden" aria-label="เปิดเมนู" />}>
+        </div>
-            <MenuIcon />
-          </SheetTrigger>
-          <SheetContent side="right">
-            <SheetHeader><SheetTitle>เมนู</SheetTitle></SheetHeader>
-            <nav aria-label="Public mobile navigation" className="flex flex-col gap-1 px-3">
-              <SheetClose render={<Link href="/commission" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
-                <Image src="/icon/commission.webp" alt="" width={24} height={24} className="size-6 object-contain" />
-                Commission
-              </SheetClose>
-              <SheetClose render={<Link href="/stygian" className={buttonVariants({ variant: "ghost", className: "h-11 w-full justify-start" })} />}>
-                <Image src="/icon/stygian.webp" alt="" width={24} height={24} className="size-6 object-contain" />
-                Stygian Guide
-              </SheetClose>
-              <Suspense fallback={null}>
-                <AdminEditLink editHref={editHref} mobile />
-              </Suspense>
-            </nav>
-          </SheetContent>
-        </Sheet>
       </div>
     </header>
   );

components/public/visitor-presence.tsx

@@ -11,22 +11,19 @@ export function VisitorPresence({ guideId }: { guideId?: string }) {
     <div className="flex items-center gap-1" aria-live="polite">
       <Badge
         variant="secondary"
-        className="tabular-nums"
+        className=" tabular-nums"
         title="ผู้เข้าชมทั้งหมดที่กำลังออนไลน์"
-        aria-label={`ผู้เข้าชมทั้งหมดที่กำลังออนไลน์ ${counts?.global ?? "-"}`}
       >
         <UsersIcon data-icon="inline-start" />
-        <span className="hidden sm:inline">ทั้งหมด</span> {counts?.global ?? "-"}
+        ทั้งหมด {counts?.global ?? "-"}
       </Badge>
       {guideId ? (
         <Badge
           variant="outline"
-          className="tabular-nums"
+          className=" tabular-nums"
           title="ผู้เข้าชม Guide นี้ที่กำลังออนไลน์"
-          aria-label={`ผู้เข้าชม Guide นี้ที่กำลังออนไลน์ ${counts?.guide ?? "-"}`}
         >
-          <span className="hidden sm:inline">ไกด์นี้</span>
+          ไกด์นี้ {counts?.guide ?? "-"}
-          <span aria-hidden="true" className="sm:hidden">G</span> {counts?.guide ?? "-"}
         </Badge>
       ) : null}
     </div>