arnaudne/Epicure
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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>
This commit is contained in:
Arnaud
2026-07-19 18:44:08 +02:00
parent 5403a06348
commit e8c687e53a
19 changed files with 6300 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/app/(app)/collections/[id]/page.tsx
+45 -13
View File
@@ -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
+52 -8
View File
@@ -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,
}];
}),
}))}
/>
);
apps/web/app/api/v1/collections/[id]/reorder/route.ts
+44
View File
@@ -0,0 +1,44 @@
import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { db, collections, collectionRecipes, eq, and, inArray } from "@epicure/db";
import { requireSessionOrApiKey } from "@/lib/api-auth";
type Params = { params: Promise<{ id: string }> };
const Schema = z.object({
recipeIds: z.array(z.string()).min(1).max(500),
});
export async function PATCH(req: NextRequest, { params }: Params) {
const { session, response } = await requireSessionOrApiKey(req);
if (response) return response;
const { id } = await params;
const existing = await db.query.collections.findFirst({
where: and(eq(collections.id, id), eq(collections.userId, session!.user.id)),
});
if (!existing) return NextResponse.json({ error: "Not found" }, { status: 404 });
const body = await req.json() as unknown;
const parsed = Schema.safeParse(body);
if (!parsed.success) return NextResponse.json({ error: "Validation error", issues: parsed.error.issues }, { status: 400 });
const current = await db.query.collectionRecipes.findMany({
where: eq(collectionRecipes.collectionId, id),
columns: { recipeId: true },
});
const currentIds = new Set(current.map((r) => r.recipeId));
const requestedIds = parsed.data.recipeIds.filter((rid) => currentIds.has(rid));
if (requestedIds.length === 0) return NextResponse.json({ error: "No matching recipes in this collection" }, { status: 400 });
await db.transaction(async (tx) => {
for (let i = 0; i < requestedIds.length; i++) {
await tx
.update(collectionRecipes)
.set({ position: i })
.where(and(eq(collectionRecipes.collectionId, id), inArray(collectionRecipes.recipeId, [requestedIds[i]!])));
}
});
return NextResponse.json({ ok: true });
}
apps/web/app/api/v1/collections/[id]/route.ts
+49 -4
View File
@@ -1,7 +1,8 @@
import { NextRequest, NextResponse } from "next/server";
import { z } from "zod";
import { db, collections, collectionRecipes, recipes, eq, and, or, ne, inArray } from "@epicure/db";
import { db, collections, collectionRecipes, recipes, ratings, eq, and, or, ne, inArray, isNotNull, sql } from "@epicure/db";
import { requireSessionOrApiKey } from "@/lib/api-auth";
import { deleteObject } from "@/lib/storage";
type Params = { params: Promise<{ id: string }> };
@@ -32,7 +33,9 @@ export async function PUT(req: NextRequest, { params }: Params) {
const body = await req.json() as unknown;
const parsed = z.object({
name: z.string().min(1).max(100).optional(),
description: z.string().max(500).optional(),
description: z.string().max(500).nullable().optional(),
notes: z.string().max(2000).nullable().optional(),
tags: z.array(z.string().min(1).max(50)).max(20).optional(),
isPublic: z.boolean().optional(),
addRecipeId: z.string().optional(),
addRecipeIds: z.array(z.string()).max(200).optional(),
@@ -42,10 +45,12 @@ export async function PUT(req: NextRequest, { params }: Params) {
if (!parsed.success) return NextResponse.json({ error: "Validation error" }, { status: 400 });
const data = parsed.data;
if (data.name || data.description !== undefined || data.isPublic !== undefined) {
if (data.name || data.description !== undefined || data.notes !== undefined || data.tags !== undefined || data.isPublic !== undefined) {
await db.update(collections).set({
...(data.name && { name: data.name }),
...(data.description !== undefined && { description: data.description }),
...(data.notes !== undefined && { notes: data.notes }),
...(data.tags !== undefined && { tags: data.tags }),
...(data.isPublic !== undefined && { isPublic: data.isPublic }),
updatedAt: new Date(),
}).where(eq(collections.id, id));
@@ -61,8 +66,13 @@ export async function PUT(req: NextRequest, { params }: Params) {
columns: { id: true },
});
if (owned.length > 0) {
const [maxPositionRow] = await db
.select({ max: sql<number | null>`max(${collectionRecipes.position})` })
.from(collectionRecipes)
.where(eq(collectionRecipes.collectionId, id));
let nextPosition = (maxPositionRow?.max ?? -1) + 1;
await db.insert(collectionRecipes)
.values(owned.map((r) => ({ collectionId: id, recipeId: r.id })))
.values(owned.map((r) => ({ collectionId: id, recipeId: r.id, position: nextPosition++ })))
.onConflictDoNothing();
}
}
@@ -87,6 +97,41 @@ export async function DELETE(req: NextRequest, { params }: Params) {
});
if (!existing) return NextResponse.json({ error: "Not found" }, { status: 404 });
const deleteRecipes = req.nextUrl.searchParams.get("deleteRecipes") === "true";
if (deleteRecipes) {
// Only recipes this user actually owns — a collection can contain other
// people's (non-private) recipes added via sharing/collab, and those
// must never be deleted just because this user deletes their collection.
const owned = await db.query.collectionRecipes.findMany({
where: eq(collectionRecipes.collectionId, id),
with: { recipe: { columns: { id: true, authorId: true }, with: { photos: true } } },
});
const ownRecipes = owned.flatMap((r) => (r.recipe && r.recipe.authorId === session!.user.id ? [r.recipe] : []));
if (ownRecipes.length > 0) {
const recipeIds = ownRecipes.map((r) => r.id);
const reviewPhotos = await db
.select({ photoKey: ratings.photoKey })
.from(ratings)
.where(and(inArray(ratings.recipeId, recipeIds), isNotNull(ratings.photoKey)));
const storageKeys = [
...ownRecipes.flatMap((r) => r.photos.map((p) => p.storageKey)),
...reviewPhotos.map((r) => r.photoKey).filter((k): k is string => k !== null),
];
await db.delete(recipes).where(inArray(recipes.id, recipeIds));
for (const key of storageKeys) {
try {
await deleteObject(key);
} catch (err) {
console.error(`Failed to delete storage object ${key} while deleting collection ${id}`, err);
}
}
}
}
await db.delete(collections).where(eq(collections.id, id));
return new NextResponse(null, { status: 204 });
}