feat: compare (premium), rating-history trend, hover previews

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

@@ -1,11 +1,18 @@
 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 } from "lucide-react";
+import { Star, MessageSquare, Wrench, Scale } from "lucide-react";
 import { Link } from "wouter";
 import { MiniBars } from "@/components/mini-bars";
+import { cn } from "@/lib/utils";
 
-export function ToolCard({ tool }: { tool: ToolWithStats }) {
+export function ToolCard({
+  tool,
+  compare,
+}: {
+  tool: ToolWithStats;
+  compare?: { selected: boolean; onToggle: () => void };
+}) {
   return (
     <Card className="hover-elevate transition-all flex flex-col h-full cursor-pointer hover:border-primary/50">
       <Link href={`/tools/${tool.id}`} className="flex flex-col h-full p-0 m-0">
@@ -63,7 +70,28 @@ export function ToolCard({ tool }: { tool: ToolWithStats }) {
               </div>
             </div>
           </div>
-          <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} />
+          <div className={cn("items-center gap-3", compare ? "flex" : "")}>
+            <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} className={compare ? "flex-1" : undefined} />
+            {compare && (
+              <button
+                type="button"
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  compare.onToggle();
+                }}
+                title={compare.selected ? "Remove from compare" : "Add to compare"}
+                className={cn(
+                  "shrink-0 w-8 h-8 rounded-md border flex items-center justify-center transition-colors",
+                  compare.selected
+                    ? "bg-primary text-primary-foreground border-primary"
+                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                )}
+              >
+                <Scale className="w-4 h-4" />
+              </button>
+            )}
+          </div>
         </CardFooter>
       </Link>
     </Card>