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

2026-08-02 12:48:02 +02:00
parent 0c27982098
commit c77610786b
18 changed files with 911 additions and 13 deletions
@@ -0,0 +1,69 @@
+import { X, Scale, Lock } from "lucide-react";
+import type { ToolWithStats } from "@workspace/api-client-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+export function CompareBar({
+  tools,
+  onRemove,
+  onClear,
+  canCompare,
+  onCompare,
+  onUpgrade,
+}: {
+  tools: ToolWithStats[];
+  onRemove: (id: number) => void;
+  onClear: () => void;
+  canCompare: boolean;
+  onCompare: () => void;
+  onUpgrade: () => void;
+}) {
+  if (tools.length === 0) return null;
+  return (
+    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-50 w-[min(96vw,42rem)]">
+      <div className="rounded-xl border bg-popover/95 backdrop-blur shadow-lg p-3">
+        <div className="flex items-center gap-2">
+          <Scale className="w-4 h-4 text-muted-foreground shrink-0" />
+          <div className="flex items-center gap-1.5 flex-1 min-w-0 overflow-x-auto">
+            {tools.map((t) => (
+              <span
+                key={t.id}
+                className={cn(
+                  "inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs whitespace-nowrap",
+                  "bg-primary/5 border-primary/20",
+                )}
+              >
+                <span className="max-w-[8rem] truncate">{t.name}</span>
+                <button
+                  type="button"
+                  onClick={() => onRemove(t.id)}
+                  className="text-muted-foreground hover:text-foreground"
+                  aria-label={`Remove ${t.name}`}
+                >
+                  <X className="w-3 h-3" />
+                </button>
+              </span>
+            ))}
+            <button
+              type="button"
+              onClick={onClear}
+              className="text-xs text-muted-foreground hover:text-foreground whitespace-nowrap px-1"
+            >
+              Clear
+            </button>
+          </div>
+          {canCompare ? (
+            <Button size="sm" onClick={onCompare} disabled={tools.length < 2}>
+              Compare ({tools.length})
+            </Button>
+          ) : (
+            <Button size="sm" variant="outline" onClick={onUpgrade} title="Compare is a Premium feature">
+              <Lock className="w-3.5 h-3.5 mr-1.5" />
+              Compare
+            </Button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -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>
@@ -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>
@@ -0,0 +1,54 @@
+import { Link } from "wouter";
+import type { ToolWithStats } from "@workspace/api-client-react";
+
+import { Badge } from "@/components/ui/badge";
+import { RatingStars } from "@/components/rating-stars";
+import { MiniBars } from "@/components/mini-bars";
+
+export function ToolPreviewCard({ tool }: { tool: ToolWithStats }) {
+  return (
+    <div className="space-y-3">
+      <div>
+        <div className="flex items-start justify-between gap-2">
+          <div className="min-w-0">
+            <div className="font-semibold leading-tight truncate">{tool.name}</div>
+            <div className="text-xs text-muted-foreground">{tool.category}</div>
+          </div>
+          <RatingStars value={tool.avgCombined ?? 0} size="sm" />
+        </div>
+      </div>
+
+      <p className="text-xs text-muted-foreground line-clamp-3">{tool.description}</p>
+
+      <div className="space-y-1.5">
+        <div className="flex items-center justify-between text-xs">
+          <span className="text-muted-foreground">{tool.ratingCount} review{tool.ratingCount === 1 ? "" : "s"}</span>
+          <span className="font-semibold tabular-nums">
+            {tool.avgCombined != null ? tool.avgCombined.toFixed(1) : "–"}/5
+          </span>
+        </div>
+        <MiniBars usefulness={tool.avgUsefulness} usability={tool.avgUsability} />
+      </div>
+
+      {tool.tags && tool.tags.length > 0 && (
+        <div className="flex flex-wrap gap-1">
+          {tool.tags.slice(0, 4).map((tag) => (
+            <Badge key={tag} variant="secondary" className="text-[10px]">
+              {tag}
+            </Badge>
+          ))}
+          {tool.tags.length > 4 && (
+            <span className="text-[10px] text-muted-foreground">+{tool.tags.length - 4}</span>
+          )}
+        </div>
+      )}
+
+      <Link
+        href={`/tools/${tool.id}`}
+        className="block w-full rounded-md border border-primary/40 bg-primary/5 px-3 py-1.5 text-center text-xs font-medium text-primary hover:bg-primary/10"
+      >
+        View details
+      </Link>
+    </div>
+  );
+}
@@ -1,6 +1,6 @@
 import { Link } from "wouter";
 import { Badge } from "@/components/ui/badge";
-import { Star, MessageSquare, Wrench } from "lucide-react";
+import { Star, MessageSquare, Wrench, Scale } from "lucide-react";
 import { ToolWithStats } from "@workspace/api-client-react";
 import { cn } from "@/lib/utils";
 import { MiniBarStack } from "@/components/mini-bars";
@@ -12,10 +12,12 @@ export function ToolRow({
  tool,
  density,
  className,
+  compare,
 }: {
  tool: ToolWithStats;
  density: "cozy" | "compact";
  className?: string;
+  compare?: { selected: boolean; onToggle: () => void };
 }) {
  const compact = density === "compact";
  return (
@@ -28,6 +30,25 @@ export function ToolRow({
      )}
    >
      <div className="flex items-center gap-3 min-w-0">
+        {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-6 h-6 rounded 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-3.5 h-3.5" />
+          </button>
+        )}
        <div className="shrink-0 w-8 h-8 rounded-md border bg-muted flex items-center justify-center overflow-hidden">
          {tool.iconUrl ? (
            <img