feat: add trending/leaderboard for collections

New collection_favorites table lets users star public collections. /collections/explore mirrors the recipe explore page: trending (star count in last 7 days) and recently-added public collections. Linked from the "Discover" button on the collections page. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-09 15:33:40 +02:00
parent cd444d4d23
commit b4b964aafb
11 changed files with 4618 additions and 2 deletions
@@ -0,0 +1,43 @@
+"use client";
+
+import { useState } from "react";
+import { Star } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function CollectionStarButton({
+  collectionId,
+  initialStarred = false,
+  starCount,
+}: {
+  collectionId: string;
+  initialStarred?: boolean;
+  starCount: number;
+}) {
+  const [starred, setStarred] = useState(initialStarred);
+  const [count, setCount] = useState(starCount);
+  const [loading, setLoading] = useState(false);
+
+  async function toggle(e: React.MouseEvent) {
+    e.preventDefault();
+    e.stopPropagation();
+    setLoading(true);
+    try {
+      const res = await fetch(`/api/v1/collections/${collectionId}/favorite`, {
+        method: starred ? "DELETE" : "POST",
+      });
+      if (!res.ok) return;
+      setStarred(!starred);
+      setCount((c) => (starred ? c - 1 : c + 1));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Button variant="ghost" size="sm" onClick={toggle} disabled={loading} className="gap-1.5 px-2">
+      <Star className={cn("h-4 w-4", starred && "fill-yellow-400 text-yellow-400")} />
+      <span className="text-xs tabular-nums">{count}</span>
+    </Button>
+  );
+}