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>
       )}

apps/web/app/(app)/collections/page.tsx

@@ -1,29 +1,73 @@
 import type { Metadata } from "next";
 import { headers } from "next/headers";
 import { auth } from "@/lib/auth/server";
-import { db, collections, eq, desc } from "@epicure/db";
+import { db, collections, collectionRecipes, eq, and, or, ilike, sql } from "@epicure/db";
 import { CollectionsPageContent } from "@/components/collections/collections-page-content";
+import { getPublicUrl } from "@/lib/storage";
 
 export const metadata: Metadata = {};
 
-export default async function CollectionsPage() {
+export default async function CollectionsPage({
+  searchParams,
+}: {
+  searchParams: Promise<{ q?: string }>;
+}) {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return null;
 
-  const userCollections = await db.query.collections.findMany({
-    where: eq(collections.userId, session.user.id),
-    orderBy: desc(collections.updatedAt),
-    with: { recipes: { limit: 1 } },
-  });
+  const { q } = await searchParams;
+  const query = q?.trim();
+
+  const where = query
+    ? and(eq(collections.userId, session.user.id), or(ilike(collections.name, `%${query}%`), ilike(collections.description, `%${query}%`)))
+    : eq(collections.userId, session.user.id);
+
+  const [userCollections, countRows] = await Promise.all([
+    db.query.collections.findMany({
+      where,
+      orderBy: (t, { desc }) => desc(t.updatedAt),
+      with: {
+        recipes: {
+          limit: 4,
+          orderBy: (t, { asc }) => asc(t.position),
+          with: { recipe: { with: { photos: true } } },
+        },
+      },
+    }),
+    // Separate grouped count — the `with: { recipes: { limit: 4 } }` above is
+    // capped for thumbnail previews, so `.recipes.length` off that relation
+    // would only ever report up to 4, never the real total.
+    db
+      .select({ collectionId: collectionRecipes.collectionId, count: sql<number>`count(*)::int` })
+      .from(collectionRecipes)
+      .innerJoin(collections, eq(collectionRecipes.collectionId, collections.id))
+      .where(eq(collections.userId, session.user.id))
+      .groupBy(collectionRecipes.collectionId),
+  ]);
+
+  const countByCollection = new Map(countRows.map((r) => [r.collectionId, r.count]));
 
   return (
     <CollectionsPageContent
+      query={query ?? ""}
       collections={userCollections.map((col) => ({
         id: col.id,
         name: col.name,
         description: col.description,
+        tags: col.tags,
         isPublic: col.isPublic,
-        recipeCount: col.recipes.length,
+        recipeCount: countByCollection.get(col.id) ?? 0,
+        thumbnails: col.recipes.flatMap((r) => {
+          if (!r.recipe) return [];
+          const cover = r.recipe.photos.find((p) => p.isCover) ?? r.recipe.photos[0];
+          return [{
+            recipeId: r.recipe.id,
+            recipeType: r.recipe.recipeType,
+            coverIcon: r.recipe.coverIcon,
+            coverColor: r.recipe.coverColor,
+            photoUrl: cover ? getPublicUrl(cover.storageKey) : null,
+          }];
+        }),
       }))}
     />
   );