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

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

@@ -1,11 +1,20 @@
 import { Link } from "wouter";
 import { Card } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Star, MessageSquare, Wrench, ChevronRight } from "lucide-react";
+import { Star, MessageSquare, Wrench, ChevronRight, Scale } from "lucide-react";
 import { ToolWithStats } from "@workspace/api-client-react";
 import { MiniBarStack } from "@/components/mini-bars";
+import { cn } from "@/lib/utils";
 
-export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density: "cozy" | "compact" }) {
+export function ToolCardWide({
+  tool,
+  density,
+  compare,
+}: {
+  tool: ToolWithStats;
+  density: "cozy" | "compact";
+  compare?: { selected: boolean; onToggle: () => void };
+}) {
   const compact = density === "compact";
   return (
     <Card className="hover-elevate transition-all cursor-pointer hover:border-primary/50">
@@ -62,6 +71,25 @@ export function ToolCardWide({ tool, density }: { tool: ToolWithStats; density:
             <ChevronRight className="w-4 h-4" />
           </div>
           {!compact && <MiniBarStack usefulness={tool.avgUsefulness} usability={tool.avgUsability} />}
+          {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-7 h-7 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>
       </Link>
     </Card>