feat: watchlist (premium), mobile bottom nav

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"