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>
   );
 }

artifacts/toolrate/src/components/tool-card.tsx

@@ -1,7 +1,7 @@
 import { ToolWithStats } from "@workspace/api-client-react";
 import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Star, MessageSquare, Wrench, Scale } from "lucide-react";
+import { Star, MessageSquare, Wrench, Scale, Bookmark } from "lucide-react";
 import { Link } from "wouter";
 import { MiniBars } from "@/components/mini-bars";
 import { cn } from "@/lib/utils";
@@ -9,9 +9,11 @@ import { cn } from "@/lib/utils";
 export function ToolCard({
   tool,
   compare,
+  watchlist,
 }: {
   tool: ToolWithStats;
   compare?: { selected: boolean; onToggle: () => void };
+  watchlist?: { watched: boolean; onToggle: () => void };
 }) {
   return (
     <Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50">
@@ -70,8 +72,27 @@ export function ToolCard({
               </div>
             </div>
           </div>
-          <div className={cn("items-center gap-3", compare ? "flex" : "")}>
-            <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} className={compare ? "flex-1" : undefined} />
+          <div className={cn("items-center gap-3", (compare || watchlist) ? "flex" : "")}>
+            <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} className={(compare || watchlist) ? "flex-1" : undefined} />
+            {watchlist && (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  watchlist.onToggle();
+                }}
+                title={watchlist.watched ? "Remove from watchlist" : "Add to watchlist"}
+                className={cn(
+                  "shrink-0 w-8 h-8 rounded-md border flex items-center justify-center transition-colors",
+                  watchlist.watched
+                    ? "bg-primary text-primary-foreground border-primary"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )}
+              >
+                <Bookmark className={cn("w-4 h-4", watchlist.watched && "fill-current")} />
+              </button>
+            )}
             {compare && (
               <button
                 type="button"