feat: watchlist (premium), mobile bottom nav

artifacts/toolrate/src/components/layout.tsx

@@ -1,5 +1,5 @@
 import { Link, useLocation } from "wouter";
-import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck, AlertTriangle, Trash2 } from "lucide-react";
+import { LayoutDashboard, Wrench, PlusCircle, BarChart3, LogIn, LogOut, User, ShieldCheck, AlertTriangle, Trash2, Bookmark } from "lucide-react";
 import { useAuth } from "@/hooks/use-auth";
 import { useGetVersion, getGetVersionQueryKey } from "@workspace/api-client-react";
 import { Button } from "@/components/ui/button";
@@ -19,6 +19,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
     { href: "/tools", label: "Browse Tools", icon: Wrench },
     { href: "/tools/new", label: "Add Tool", icon: PlusCircle },
     { href: "/analytics", label: "Analytics", icon: BarChart3 },
+    ...(hasFeature("watchlist") ? [{ href: "/watchlist", label: "Watchlist", icon: Bookmark }] : []),
     ...(hasFeature("trash") ? [{ href: "/trash", label: "Trash", icon: Trash2 }] : []),
     ...(isAdmin ? [{ href: "/admin", label: "Admin", icon: ShieldCheck }] : []),
     ...(isAdmin ? [{ href: "/admin/redundancy", label: "Redundancy", icon: AlertTriangle }] : []),
@@ -28,6 +29,14 @@ export function Layout({ children }: { children: React.ReactNode }) {
     (link) => location === link.href || (link.href !== "/" && location.startsWith(link.href)),
   );
 
+  const mobileLinks = [
+    { href: "/", label: "Home", icon: LayoutDashboard },
+    { href: "/tools", label: "Tools", icon: Wrench },
+    ...(hasFeature("watchlist") ? [{ href: "/watchlist", label: "Watchlist", icon: Bookmark }] : []),
+    ...(hasFeature("trash") ? [{ href: "/trash", label: "Trash", icon: Trash2 }] : []),
+    { href: "/analytics", label: "Analytics", icon: BarChart3 },
+  ].slice(0, 5);
+
   return (
     <div className="flex min-h-screen bg-background text-foreground">
       <CommandPalette />
@@ -149,10 +158,29 @@ export function Layout({ children }: { children: React.ReactNode }) {
             )}
           </div>
         </header>
-        <div className="flex-1 p-6 md:p-8 overflow-auto">
+        <div className="flex-1 p-6 md:p-8 overflow-auto pb-24 md:pb-8">
           {children}
         </div>
       </main>
+
+      <nav className="md:hidden fixed bottom-0 inset-x-0 z-40 border-t bg-card/95 backdrop-blur flex">
+        {mobileLinks.map((link) => {
+          const isActive = location === link.href || (link.href !== "/" && location.startsWith(link.href));
+          const Icon = link.icon;
+          return (
+            <Link
+              key={link.href}
+              href={link.href}
+              className={`flex-1 flex flex-col items-center gap-0.5 py-2.5 text-[10px] font-medium transition-colors ${
+                isActive ? "text-primary" : "text-muted-foreground hover:text-foreground"
+              }`}
+            >
+              <Icon className="w-5 h-5" />
+              {link.label}
+            </Link>
+          );
+        })}
+      </nav>
     </div>
   );
 }