feat: collections overhaul — reorder, search, edit/delete, tags (v0.53.0)

Seven related improvements to collections:

- Drag-and-drop reorder (dnd-kit, same pattern as the shopping list) — new
  collection_recipes.position column (migration 0049, backfilled from
  existing added_at order so nothing jumps around on upgrade).
- Search collections by name/description (server-side, list page) and
  search recipes within a collection (client-side filter, already loaded).
- Edit collection: name/description/tags/private notes via a new dialog;
  new collections.notes + collections.tags columns.
- Delete collection with a choice to also delete its recipes — only ones
  the deleting user actually owns, never recipes shared in by others.
- Collection detail (both owner and public view) now renders the same
  RecipeGridCard used on /recipes, instead of the older, plainer RecipeCard.
- Collection list cards redesigned — photo-collage preview (first 4 recipe
  covers/placeholders), tag badges, cleaner layout.
- Fixed the recipe count shown on a collection card: the query capped the
  `recipes` relation at 1 for thumbnail purposes and then read `.length`
  off that same capped array, so it never showed more than 1. Now a
  proper grouped count query, separate from the thumbnail fetch.

New/changed endpoints documented in OpenAPI: PATCH /collections/{id}/reorder,
DELETE /collections/{id}?deleteRecipes, PUT /collections/{id}'s new
notes/tags fields.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

apps/web/app/(app)/collections/[id]/page.tsx

@@ -2,14 +2,17 @@ import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 import { headers } from "next/headers";
 import Link from "next/link";
-import { Printer, UtensilsCrossed } from "lucide-react";
+import { Printer, UtensilsCrossed, StickyNote } from "lucide-react";
 import { auth } from "@/lib/auth/server";
 import { db, collections, eq, and, or } from "@epicure/db";
-import { RecipeCard } from "@/components/recipe/recipe-card";
+import { RecipeGridCard } from "@/components/recipe/recipe-grid-card";
 import { CollectionRecipesGrid } from "@/components/collections/collection-recipes-grid";
 import { ForkCollectionButton } from "@/components/collections/fork-collection-button";
 import { ShareCollectionButton } from "@/components/collections/share-collection-button";
 import { GenerateMealDialog } from "@/components/collections/generate-meal-dialog";
+import { EditCollectionDialog } from "@/components/collections/edit-collection-dialog";
+import { DeleteCollectionDialog } from "@/components/collections/delete-collection-dialog";
+import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import { ExportMarkdownButton } from "@/components/shared/export-markdown-button";
@@ -32,12 +35,18 @@ export default async function CollectionPage({ params }: Params) {
       eq(collections.id, id),
       or(eq(collections.userId, session.user.id), eq(collections.isPublic, true))
     ),
-    with: { recipes: { with: { recipe: { with: { photos: true } } } } },
+    with: {
+      recipes: {
+        orderBy: (t, { asc }) => asc(t.position),
+        with: { recipe: { with: { photos: true } } },
+      },
+    },
   });
 
   if (!col) notFound();
 
   const isOwner = col.userId === session.user.id;
+  const recipeList = col.recipes.flatMap((r) => (r.recipe ? [r.recipe] : []));
 
   return (
     <div className="space-y-6">
@@ -45,12 +54,25 @@ export default async function CollectionPage({ params }: Params) {
         <div>
           <h1 className="text-3xl font-bold tracking-tight">{col.name}</h1>
           {col.description && <p className="text-muted-foreground mt-1">{col.description}</p>}
+          {col.tags.length > 0 && (
+            <div className="flex flex-wrap gap-1.5 mt-2">
+              {col.tags.map((tag) => (
+                <Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
+              ))}
+            </div>
+          )}
           <p className="text-sm text-muted-foreground mt-1">
-            {col.recipes.length} recipe{col.recipes.length !== 1 ? "s" : ""} · {col.isPublic ? "Public" : "Private"}
+            {recipeList.length} recipe{recipeList.length !== 1 ? "s" : ""} · {col.isPublic ? "Public" : "Private"}
           </p>
+          {isOwner && col.notes && (
+            <div className="mt-2 flex items-start gap-2 rounded-lg border bg-muted/30 px-3 py-2 text-sm text-muted-foreground max-w-2xl">
+              <StickyNote className="h-4 w-4 shrink-0 mt-0.5" />
+              <p className="whitespace-pre-wrap">{col.notes}</p>
+            </div>
+          )}
         </div>
         <div className="flex flex-wrap items-center gap-2">
-          {col.recipes.length > 0 && (
+          {recipeList.length > 0 && (
             <>
               <Link href={`/print/collection/${id}`} target="_blank" className={cn(buttonVariants({ variant: "outline", size: "sm" }))}>
                 <Printer className="h-4 w-4" />
@@ -60,7 +82,7 @@ export default async function CollectionPage({ params }: Params) {
                 markdown={collectionToMarkdown({
                   name: col.name,
                   description: col.description,
-                  recipes: col.recipes.flatMap((r) => (r.recipe ? [r.recipe] : [])),
+                  recipes: recipeList,
                 })}
                 filename={col.name}
               />
@@ -68,23 +90,33 @@ export default async function CollectionPage({ params }: Params) {
           )}
           {isOwner && <GenerateMealDialog collectionId={id} />}
           {isOwner && <ShareCollectionButton collectionId={id} />}
+          {isOwner && (
+            <EditCollectionDialog
+              collectionId={id}
+              initialName={col.name}
+              initialDescription={col.description}
+              initialNotes={col.notes}
+              initialTags={col.tags}
+              initialIsPublic={col.isPublic}
+            />
+          )}
+          {isOwner && <DeleteCollectionDialog collectionId={id} />}
           {!isOwner && col.isPublic && (
             <ForkCollectionButton collectionId={id} />
           )}
         </div>
       </div>
 
-      {col.recipes.length === 0 ? (
+      {recipeList.length === 0 ? (
         <EmptyState icon={UtensilsCrossed} title={m.collections.emptyCollection} compact />
       ) : isOwner ? (
-        <CollectionRecipesGrid
-          collectionId={id}
-          recipes={col.recipes.flatMap((r) => (r.recipe ? [r.recipe] : []))}
-        />
+        <CollectionRecipesGrid collectionId={id} recipes={recipeList} />
       ) : (
         <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
-          {col.recipes.map(({ recipe }) => (
-            recipe && <RecipeCard key={recipe.id} recipe={recipe} />
+          {recipeList.map((recipe) => (
+            <Link key={recipe.id} href={`/recipes/${recipe.id}`}>
+              <RecipeGridCard recipe={recipe} />
+            </Link>
           ))}
         </div>
       )}