fix: chat UI

components/layout/site-bottom-nav.tsx

@@ -14,6 +14,10 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Home, MessageCircle, Search, User as UserIcon } from "lucide-react";
+import {
+  NavUnreadBadge,
+  useChatUnread,
+} from "@/components/layout/nav-unread-badge";
 import { useAuth } from "@/components/auth/auth-provider";
 import { cn } from "@/lib/utils";
 
@@ -28,6 +32,9 @@ type Item = {
 export function SiteBottomNav() {
   const pathname = usePathname();
   const { user } = useAuth();
+  // Read here rather than inside the badge so the count can also reach the
+  // link's accessible name — the badge itself is decorative.
+  const chatUnread = useChatUnread();
 
   const items: Item[] = [
     { href: "/", label: "Home", icon: <Home className="size-5" /> },
@@ -113,7 +120,11 @@ export function SiteBottomNav() {
             >
               <Link
                 href={item.href}
-                aria-label={item.label}
+                aria-label={
+                  item.href === "/chats" && chatUnread > 0
+                    ? `${item.label} (${chatUnread} unread)`
+                    : item.label
+                }
                 aria-current={active ? "page" : undefined}
                 className={cn(
                   "w-12 h-12 rounded-md flex flex-col items-center justify-center",
@@ -122,7 +133,11 @@ export function SiteBottomNav() {
                     : "text-muted-foreground hover:text-foreground",
                 )}
               >
-                {item.icon}
+                {item.href === "/chats" ? (
+                  <NavUnreadBadge>{item.icon}</NavUnreadBadge>
+                ) : (
+                  item.icon
+                )}
               </Link>
             </li>
           );