feat(social): follows, favorites, comments, reactions, collections, public profiles

Follow/unfollow users. Recipe favorites. Threaded comments with emoji reactions. Collections (public/private) with shared member invite. Activity feed. Public profile pages at /u/[username].
2026-07-01 08:10:30 +02:00
parent d9d58fd01a
commit 9d02a69250
23 changed files with 1825 additions and 0 deletions
@@ -0,0 +1,56 @@
+"use client";
+import { useTranslations } from "next-intl";
+import Link from "next/link";
+import { FolderOpen } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { NewCollectionButton } from "@/components/social/new-collection-button";
+
+type Collection = {
+  id: string;
+  name: string;
+  description: string | null;
+  isPublic: boolean;
+  recipeCount: number;
+};
+
+type Props = {
+  collections: Collection[];
+};
+
+export function CollectionsPageContent({ collections }: Props) {
+  const t = useTranslations("collections");
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold tracking-tight">{t("title")}</h1>
+          <p className="text-muted-foreground mt-1">{t("subtitle")}</p>
+        </div>
+        <NewCollectionButton />
+      </div>
+
+      {collections.length === 0 ? (
+        <div className="flex flex-col items-center justify-center h-64 border-2 border-dashed rounded-xl gap-4">
+          <FolderOpen className="h-12 w-12 text-muted-foreground/40" />
+          <p className="text-muted-foreground text-sm">{t("empty")}</p>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
+          {collections.map((col) => (
+            <Link key={col.id} href={`/collections/${col.id}`} className="group rounded-xl border p-4 hover:shadow-sm transition-shadow space-y-2">
+              <div className="flex items-start justify-between gap-2">
+                <h2 className="font-semibold group-hover:text-primary transition-colors line-clamp-1">{col.name}</h2>
+                {col.isPublic && <Badge variant="secondary" className="text-xs shrink-0">{t("public")}</Badge>}
+              </div>
+              {col.description && <p className="text-sm text-muted-foreground line-clamp-2">{col.description}</p>}
+              <p className="text-xs text-muted-foreground">
+                {col.recipeCount !== 1 ? t("recipeCountPlural", { count: col.recipeCount }) : t("recipeCount", { count: col.recipeCount })}
+              </p>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}