ui enhancements

components/site-bottom-nav.tsx

@@ -3,7 +3,7 @@
 /**
  * SiteBottomNav — mobile-only bottom tab bar.
  *
- * Four items: Home (Feed) · Knowledgebase · Search · Account.
+ * Four items: Home · Search · Kautilya · Account.
  * Mirrors the Instagram pattern — fixed to the viewport bottom, full
  * width, equal-width tabs, the active tab uses the primary color.
  *
@@ -14,11 +14,13 @@ import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { Home, Search, User as UserIcon } from "lucide-react";
 import { useAuth } from "@/components/auth/auth-provider";
+import { KautilyaIcon } from "@/components/selection-toolbar/shared";
 import { cn } from "@/lib/utils";
 
 type Item = {
-  href: string;
+  /** Tab label, used for the aria-label. Bottom nav is icon-only. */
   label: string;
+  href: string;
   icon: React.ReactNode;
   matchPrefixes?: string[];
 };
@@ -48,6 +50,11 @@ export function SiteBottomNav() {
         "/disciples",
       ],
     },
+    {
+      href: "/chat",
+      label: "Kautilya",
+      icon: <KautilyaIcon className="size-5" />,
+    },
     {
       href: user ? "/u/me" : "/login",
       label: user ? "You" : "Sign in",
@@ -79,7 +86,7 @@ export function SiteBottomNav() {
         {items.map((item) => {
           const active = isActive(item);
           return (
-            <li key={item.href} className="flex-1">
+            <li key={item.label} className="flex-1">
               <Link
                 href={item.href}
                 aria-label={item.label}
@@ -92,9 +99,6 @@ export function SiteBottomNav() {
                 )}
               >
                 {item.icon}
-                <span className="text-[0.65rem] font-medium">
-                  {item.label}
-                </span>
               </Link>
             </li>
           );