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>
This commit is contained in:
Arnaud
@@ -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>
|
||||
)}
|
||||
|
||||
@@ -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,
|
||||
}];
|
||||
}),
|
||||
}))}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -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 });
|
||||
}
|
||||
@@ -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 });
|
||||
}
|
||||
|
||||
@@ -1,11 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useCallback } from "react";
|
||||
import { useState, useCallback, useMemo } from "react";
|
||||
import Link from "next/link";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import { ListChecks, X, FolderInput, FolderMinus, Check } from "lucide-react";
|
||||
import { ListChecks, X, FolderInput, FolderMinus, Check, GripVertical, Search } from "lucide-react";
|
||||
import {
|
||||
DndContext,
|
||||
type DragEndEvent,
|
||||
PointerSensor,
|
||||
useSensor,
|
||||
useSensors,
|
||||
closestCenter,
|
||||
} from "@dnd-kit/core";
|
||||
import {
|
||||
SortableContext,
|
||||
useSortable,
|
||||
verticalListSortingStrategy,
|
||||
arrayMove,
|
||||
} from "@dnd-kit/sortable";
|
||||
import { CSS } from "@dnd-kit/utilities";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { RecipeCard } from "@/components/recipe/recipe-card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { RecipeGridCard, type GridCardRecipe } from "@/components/recipe/recipe-grid-card";
|
||||
import { AddToCollectionDialog } from "@/components/recipe/add-to-collection-dialog";
|
||||
import {
|
||||
AlertDialog,
|
||||
@@ -19,21 +36,69 @@ import {
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Recipe = {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string | null;
|
||||
baseServings: number;
|
||||
prepMins: number | null;
|
||||
cookMins: number | null;
|
||||
difficulty: "easy" | "medium" | "hard" | null;
|
||||
visibility: "private" | "unlisted" | "public" | "followers";
|
||||
updatedAt: Date;
|
||||
photos?: Array<{ storageKey: string; isCover: boolean }>;
|
||||
sourceUrl?: string | null;
|
||||
};
|
||||
function SortableRecipeCard({
|
||||
recipe,
|
||||
selectMode,
|
||||
selected,
|
||||
onToggle,
|
||||
dragDisabled,
|
||||
}: {
|
||||
recipe: GridCardRecipe;
|
||||
selectMode: boolean;
|
||||
selected: boolean;
|
||||
onToggle: () => void;
|
||||
dragDisabled: boolean;
|
||||
}) {
|
||||
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
|
||||
id: recipe.id,
|
||||
disabled: dragDisabled,
|
||||
});
|
||||
|
||||
export function CollectionRecipesGrid({ collectionId, recipes: initialRecipes }: { collectionId: string; recipes: Recipe[] }) {
|
||||
const style = { transform: CSS.Transform.toString(transform), transition };
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={setNodeRef}
|
||||
style={style}
|
||||
className={cn("relative", selectMode && "cursor-pointer", isDragging && "z-10 opacity-70")}
|
||||
onClick={selectMode ? onToggle : undefined}
|
||||
>
|
||||
{selectMode && (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-2 left-2 z-10 h-5 w-5 rounded-full border-2 flex items-center justify-center shadow-sm",
|
||||
selected ? "bg-primary border-primary" : "bg-black/30 border-white/70"
|
||||
)}
|
||||
>
|
||||
{selected && <Check className="h-3 w-3 text-primary-foreground stroke-[3]" />}
|
||||
</div>
|
||||
)}
|
||||
{!selectMode && !dragDisabled && (
|
||||
<button
|
||||
type="button"
|
||||
{...attributes}
|
||||
{...listeners}
|
||||
className="absolute top-2 right-2 z-10 h-6 w-6 rounded-md bg-background/90 border shadow-sm flex items-center justify-center text-muted-foreground cursor-grab active:cursor-grabbing opacity-0 group-hover:opacity-100 hover:text-foreground transition-opacity"
|
||||
onClick={(e) => e.preventDefault()}
|
||||
aria-label="Drag to reorder"
|
||||
>
|
||||
<GripVertical className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
)}
|
||||
<div className={cn("group", selectMode && "pointer-events-none", selectMode && selected && "rounded-xl ring-2 ring-primary")}>
|
||||
{selectMode ? (
|
||||
<RecipeGridCard recipe={recipe} />
|
||||
) : (
|
||||
<Link href={`/recipes/${recipe.id}`}>
|
||||
<RecipeGridCard recipe={recipe} />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CollectionRecipesGrid({ collectionId, recipes: initialRecipes }: { collectionId: string; recipes: GridCardRecipe[] }) {
|
||||
const t = useTranslations("collections");
|
||||
const tCommon = useTranslations("common");
|
||||
const [recipes, setRecipes] = useState(initialRecipes);
|
||||
@@ -42,6 +107,9 @@ export function CollectionRecipesGrid({ collectionId, recipes: initialRecipes }:
|
||||
const [moveOpen, setMoveOpen] = useState(false);
|
||||
const [removeConfirmOpen, setRemoveConfirmOpen] = useState(false);
|
||||
const [busy, setBusy] = useState(false);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 4 } }));
|
||||
|
||||
const toggleSelect = useCallback((id: string) => {
|
||||
setSelected((prev) => {
|
||||
@@ -75,16 +143,57 @@ export function CollectionRecipesGrid({ collectionId, recipes: initialRecipes }:
|
||||
}
|
||||
}
|
||||
|
||||
async function persistOrder(ordered: GridCardRecipe[]) {
|
||||
try {
|
||||
const res = await fetch(`/api/v1/collections/${collectionId}/reorder`, {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ recipeIds: ordered.map((r) => r.id) }),
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
} catch {
|
||||
toast.error(t("reorderFailed"));
|
||||
}
|
||||
}
|
||||
|
||||
function handleDragEnd(event: DragEndEvent) {
|
||||
const { active, over } = event;
|
||||
if (!over || active.id === over.id) return;
|
||||
const oldIndex = recipes.findIndex((r) => r.id === active.id);
|
||||
const newIndex = recipes.findIndex((r) => r.id === over.id);
|
||||
if (oldIndex === -1 || newIndex === -1) return;
|
||||
const reordered = arrayMove(recipes, oldIndex, newIndex);
|
||||
setRecipes(reordered);
|
||||
void persistOrder(reordered);
|
||||
}
|
||||
|
||||
const filtered = useMemo(() => {
|
||||
const q = search.trim().toLowerCase();
|
||||
if (!q) return recipes;
|
||||
return recipes.filter((r) => r.title.toLowerCase().includes(q));
|
||||
}, [recipes, search]);
|
||||
|
||||
const searchActive = search.trim().length > 0;
|
||||
|
||||
if (recipes.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-end">
|
||||
<div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
||||
<div className="relative flex-1 max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(e) => setSearch(e.target.value)}
|
||||
placeholder={t("searchRecipesPlaceholder")}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={selectMode ? exitSelect : () => setSelectMode(true)}
|
||||
className={cn("gap-1.5", selectMode && "text-muted-foreground")}
|
||||
className={cn("gap-1.5 shrink-0", selectMode && "text-muted-foreground")}
|
||||
>
|
||||
{selectMode ? (
|
||||
<><X className="h-4 w-4" />{tCommon("cancel")}</>
|
||||
@@ -94,25 +203,26 @@ export function CollectionRecipesGrid({ collectionId, recipes: initialRecipes }:
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{recipes.map((recipe) => (
|
||||
<div key={recipe.id} className={cn("relative", selectMode && "cursor-pointer")} onClick={selectMode ? () => toggleSelect(recipe.id) : undefined}>
|
||||
{selectMode && (
|
||||
<div
|
||||
className={cn(
|
||||
"absolute top-2 left-2 z-10 h-5 w-5 rounded-full border-2 flex items-center justify-center shadow-sm",
|
||||
selected.has(recipe.id) ? "bg-primary border-primary" : "bg-black/30 border-white/70"
|
||||
)}
|
||||
>
|
||||
{selected.has(recipe.id) && <Check className="h-3 w-3 text-primary-foreground stroke-[3]" />}
|
||||
</div>
|
||||
)}
|
||||
<div className={cn(selectMode && "pointer-events-none", selectMode && selected.has(recipe.id) && "rounded-xl ring-2 ring-primary")}>
|
||||
<RecipeCard recipe={recipe} />
|
||||
{filtered.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground py-8 text-center">{t("noRecipeSearchResults")}</p>
|
||||
) : (
|
||||
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
|
||||
<SortableContext items={filtered.map((r) => r.id)} strategy={verticalListSortingStrategy}>
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
|
||||
{filtered.map((recipe) => (
|
||||
<SortableRecipeCard
|
||||
key={recipe.id}
|
||||
recipe={recipe}
|
||||
selectMode={selectMode}
|
||||
selected={selected.has(recipe.id)}
|
||||
onToggle={() => toggleSelect(recipe.id)}
|
||||
dragDisabled={selectMode || searchActive}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</SortableContext>
|
||||
</DndContext>
|
||||
)}
|
||||
|
||||
{selectMode && selected.size > 0 && (
|
||||
<div className="fixed bottom-4 sm:bottom-8 left-1/2 -translate-x-1/2 z-50 w-[calc(100vw-2rem)] sm:w-auto sm:max-w-none animate-in slide-in-from-bottom-4 duration-200">
|
||||
|
||||
@@ -1,27 +1,86 @@
|
||||
"use client";
|
||||
import { useState, useTransition } from "react";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { useRouter, usePathname } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import { FolderOpen, Flame } from "lucide-react";
|
||||
import Image from "next/image";
|
||||
import { FolderOpen, Flame, Search } from "lucide-react";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { buttonVariants } from "@/components/ui/button";
|
||||
import { NewCollectionButton } from "@/components/social/new-collection-button";
|
||||
import { EmptyState } from "@/components/shared/empty-state";
|
||||
import { RecipeCoverPlaceholder } from "@/components/recipe/recipe-cover-placeholder";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
type Thumbnail = {
|
||||
recipeId: string;
|
||||
recipeType?: "dish" | "drink";
|
||||
coverIcon: string | null;
|
||||
coverColor: string | null;
|
||||
photoUrl: string | null;
|
||||
};
|
||||
|
||||
type Collection = {
|
||||
id: string;
|
||||
name: string;
|
||||
description: string | null;
|
||||
tags: string[];
|
||||
isPublic: boolean;
|
||||
recipeCount: number;
|
||||
thumbnails: Thumbnail[];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
collections: Collection[];
|
||||
query: string;
|
||||
};
|
||||
|
||||
export function CollectionsPageContent({ collections }: Props) {
|
||||
function CollectionThumbCollage({ thumbnails }: { thumbnails: Thumbnail[] }) {
|
||||
if (thumbnails.length === 0) {
|
||||
return (
|
||||
<div className="w-full h-full flex items-center justify-center bg-muted text-muted-foreground">
|
||||
<FolderOpen className="h-8 w-8" strokeWidth={1.5} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-2 grid-rows-2 gap-0.5 w-full h-full">
|
||||
{Array.from({ length: 4 }).map((_, i) => {
|
||||
const thumb = thumbnails[i];
|
||||
return (
|
||||
<div key={i} className="relative overflow-hidden bg-muted">
|
||||
{thumb ? (
|
||||
thumb.photoUrl ? (
|
||||
<Image src={thumb.photoUrl} unoptimized alt="" fill className="object-cover" />
|
||||
) : (
|
||||
<RecipeCoverPlaceholder
|
||||
recipe={{ id: thumb.recipeId, recipeType: thumb.recipeType, coverIcon: thumb.coverIcon, coverColor: thumb.coverColor }}
|
||||
iconClassName="h-5 w-5"
|
||||
/>
|
||||
)
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CollectionsPageContent({ collections, query }: Props) {
|
||||
const t = useTranslations("collections");
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const [search, setSearch] = useState(query);
|
||||
const [, startTransition] = useTransition();
|
||||
|
||||
function handleSearch(value: string) {
|
||||
setSearch(value);
|
||||
const params = new URLSearchParams();
|
||||
if (value.trim()) params.set("q", value.trim());
|
||||
startTransition(() => router.push(`${pathname}?${params.toString()}`));
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
@@ -39,25 +98,51 @@ export function CollectionsPageContent({ collections }: Props) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="relative max-w-sm">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
|
||||
<Input
|
||||
value={search}
|
||||
onChange={(e) => handleSearch(e.target.value)}
|
||||
placeholder={t("searchPlaceholder")}
|
||||
className="pl-9"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{collections.length === 0 ? (
|
||||
<EmptyState
|
||||
icon={FolderOpen}
|
||||
title={t("empty")}
|
||||
description={t("emptyDescription")}
|
||||
actionSlot={<NewCollectionButton />}
|
||||
title={query ? t("noSearchResults") : t("empty")}
|
||||
description={query ? undefined : t("emptyDescription")}
|
||||
actionSlot={!query ? <NewCollectionButton /> : undefined}
|
||||
/>
|
||||
) : (
|
||||
<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>}
|
||||
<Link
|
||||
key={col.id}
|
||||
href={`/collections/${col.id}`}
|
||||
className="group rounded-xl border overflow-hidden hover:shadow-md hover:border-muted-foreground/30 transition-all duration-200"
|
||||
>
|
||||
<div className="aspect-[2/1]">
|
||||
<CollectionThumbCollage thumbnails={col.thumbnails} />
|
||||
</div>
|
||||
<div className="p-4 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>}
|
||||
{col.tags.length > 0 && (
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{col.tags.slice(0, 4).map((tag) => (
|
||||
<Badge key={tag} variant="outline" className="text-xs">{tag}</Badge>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{col.recipeCount !== 1 ? t("recipeCountPlural", { count: col.recipeCount }) : t("recipeCount", { count: col.recipeCount })}
|
||||
</p>
|
||||
</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>
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
|
||||
export function DeleteCollectionDialog({ collectionId }: { collectionId: string }) {
|
||||
const t = useTranslations("collections");
|
||||
const tCommon = useTranslations("common");
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [deleteRecipes, setDeleteRecipes] = useState(false);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
async function handleDelete() {
|
||||
setDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/collections/${collectionId}?deleteRecipes=${deleteRecipes}`, { method: "DELETE" });
|
||||
if (!res.ok) throw new Error();
|
||||
toast.success(t("deleteSuccess"));
|
||||
router.push("/collections");
|
||||
router.refresh();
|
||||
} catch {
|
||||
toast.error(t("deleteFailed"));
|
||||
setDeleting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" className="gap-1.5 text-destructive hover:text-destructive" onClick={() => setOpen(true)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
{tCommon("delete")}
|
||||
</Button>
|
||||
|
||||
<AlertDialog open={open} onOpenChange={setOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>{t("deleteConfirmTitle")}</AlertDialogTitle>
|
||||
<AlertDialogDescription>{t("deleteConfirmDescription")}</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
|
||||
<label className="flex items-start gap-2 text-sm cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={deleteRecipes}
|
||||
onChange={(e) => setDeleteRecipes(e.target.checked)}
|
||||
className="rounded mt-0.5"
|
||||
/>
|
||||
<span>{t("deleteRecipesToo")}</span>
|
||||
</label>
|
||||
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleting}>{tCommon("cancel")}</AlertDialogCancel>
|
||||
<AlertDialogAction
|
||||
onClick={(e) => { e.preventDefault(); void handleDelete(); }}
|
||||
disabled={deleting}
|
||||
className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
|
||||
>
|
||||
{deleting ? t("deleting") : tCommon("delete")}
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
"use client";
|
||||
|
||||
import { useRef, useState, type KeyboardEvent } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useTranslations } from "next-intl";
|
||||
import { toast } from "sonner";
|
||||
import { Pencil, Tag, X } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
|
||||
export function EditCollectionDialog({
|
||||
collectionId,
|
||||
initialName,
|
||||
initialDescription,
|
||||
initialNotes,
|
||||
initialTags,
|
||||
initialIsPublic,
|
||||
}: {
|
||||
collectionId: string;
|
||||
initialName: string;
|
||||
initialDescription: string | null;
|
||||
initialNotes: string | null;
|
||||
initialTags: string[];
|
||||
initialIsPublic: boolean;
|
||||
}) {
|
||||
const t = useTranslations("collections");
|
||||
const tRecipeForm = useTranslations("recipeForm");
|
||||
const tCommon = useTranslations("common");
|
||||
const router = useRouter();
|
||||
const [open, setOpen] = useState(false);
|
||||
const [name, setName] = useState(initialName);
|
||||
const [description, setDescription] = useState(initialDescription ?? "");
|
||||
const [notes, setNotes] = useState(initialNotes ?? "");
|
||||
const [tags, setTags] = useState<string[]>(initialTags);
|
||||
const [tagInput, setTagInput] = useState("");
|
||||
const [isPublic, setIsPublic] = useState(initialIsPublic);
|
||||
const [saving, setSaving] = useState(false);
|
||||
const tagInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
function addTag(raw: string) {
|
||||
const tag = raw.trim().toLowerCase().slice(0, 50);
|
||||
if (!tag || tags.includes(tag) || tags.length >= 20) return;
|
||||
setTags((prev) => [...prev, tag]);
|
||||
setTagInput("");
|
||||
}
|
||||
|
||||
function removeTag(tag: string) {
|
||||
setTags((prev) => prev.filter((tg) => tg !== tag));
|
||||
}
|
||||
|
||||
function handleTagKeyDown(e: KeyboardEvent<HTMLInputElement>) {
|
||||
if (e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
addTag(tagInput);
|
||||
} else if (e.key === "Backspace" && !tagInput && tags.length > 0) {
|
||||
setTags((prev) => prev.slice(0, -1));
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!name.trim()) return;
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await fetch(`/api/v1/collections/${collectionId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
name: name.trim(),
|
||||
description: description.trim() || null,
|
||||
notes: notes.trim() || null,
|
||||
tags,
|
||||
isPublic,
|
||||
}),
|
||||
});
|
||||
if (!res.ok) throw new Error();
|
||||
toast.success(t("editSuccess"));
|
||||
setOpen(false);
|
||||
router.refresh();
|
||||
} catch {
|
||||
toast.error(t("editFailed"));
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" size="sm" className="gap-1.5" onClick={() => setOpen(true)}>
|
||||
<Pencil className="h-4 w-4" />
|
||||
{tCommon("edit")}
|
||||
</Button>
|
||||
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogContent className="max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{t("editTitle")}</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-col-name">{t("nameLabel")}</Label>
|
||||
<Input id="edit-col-name" value={name} onChange={(e) => setName(e.target.value)} placeholder={t("namePlaceholder")} maxLength={100} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-col-desc">{t("descriptionLabel")}</Label>
|
||||
<Textarea id="edit-col-desc" value={description} onChange={(e) => setDescription(e.target.value)} rows={2} placeholder={t("descriptionPlaceholder")} maxLength={500} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="edit-col-notes">{t("notesLabel")}</Label>
|
||||
<Textarea id="edit-col-notes" value={notes} onChange={(e) => setNotes(e.target.value)} rows={3} placeholder={t("notesPlaceholder")} maxLength={2000} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>{t("tagsLabel")}</Label>
|
||||
<div
|
||||
className="flex flex-wrap gap-1.5 min-h-9 rounded-lg border border-input bg-transparent px-2.5 py-1.5 cursor-text focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/50"
|
||||
onClick={() => tagInputRef.current?.focus()}
|
||||
>
|
||||
{tags.map((tag) => (
|
||||
<span key={tag} className="inline-flex items-center gap-1 px-2 py-0.5 rounded-md text-xs bg-muted text-muted-foreground">
|
||||
<Tag className="h-2.5 w-2.5" />
|
||||
{tag}
|
||||
<button type="button" onClick={(e) => { e.stopPropagation(); removeTag(tag); }} className="hover:text-foreground transition-colors" aria-label={tRecipeForm("removeTagAriaLabel", { tag })}>
|
||||
<X className="h-2.5 w-2.5" />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
{tags.length < 20 && (
|
||||
<input
|
||||
ref={tagInputRef}
|
||||
value={tagInput}
|
||||
onChange={(e) => setTagInput(e.target.value)}
|
||||
onKeyDown={handleTagKeyDown}
|
||||
onBlur={() => { if (tagInput.trim()) addTag(tagInput); }}
|
||||
placeholder={tags.length === 0 ? tRecipeForm("tagsPlaceholder") : ""}
|
||||
className="flex-1 min-w-[120px] bg-transparent text-sm outline-none placeholder:text-muted-foreground"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="flex items-center gap-2 text-sm cursor-pointer">
|
||||
<input type="checkbox" checked={isPublic} onChange={(e) => setIsPublic(e.target.checked)} className="rounded" />
|
||||
{t("makePublic")}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setOpen(false)}>{tCommon("cancel")}</Button>
|
||||
<Button onClick={() => { void handleSave(); }} disabled={!name.trim() || saving}>
|
||||
{saving ? t("saving") : tCommon("save")}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
// Mirrors CHANGELOG.md at the repo root — update both together.
|
||||
export const APP_VERSION = "0.52.1";
|
||||
export const APP_VERSION = "0.53.0";
|
||||
|
||||
export type ChangelogEntry = {
|
||||
version: string;
|
||||
@@ -11,6 +11,16 @@ export type ChangelogEntry = {
|
||||
};
|
||||
|
||||
export const CHANGELOG: ChangelogEntry[] = [
|
||||
{
|
||||
version: "0.53.0",
|
||||
date: "2026-07-19 15:20",
|
||||
added: [
|
||||
"Collections got a big upgrade: drag-and-drop reorder recipes, search collections and search within a collection, edit name/description/tags/private notes, delete with a choice to also delete the recipes (only ones you own), and tags/labels on collections themselves.",
|
||||
],
|
||||
fixed: [
|
||||
"Collection cards showed the wrong recipe count (capped at 1) — now a real count. Cards also got a visual refresh (photo collage preview) and collection detail pages now use the same recipe card as the main Recipes page.",
|
||||
],
|
||||
},
|
||||
{
|
||||
version: "0.52.1",
|
||||
date: "2026-07-19 14:10",
|
||||
|
||||
@@ -189,7 +189,7 @@ export function generateOpenApiSpec(): object {
|
||||
}));
|
||||
const CollectionRef = registry.register("Collection", z.object({
|
||||
id: z.string(), userId: z.string(), name: z.string(),
|
||||
description: z.string().nullable(), isPublic: z.boolean(),
|
||||
description: z.string().nullable(), notes: z.string().nullable(), tags: z.array(z.string()), isPublic: z.boolean(),
|
||||
createdAt: z.string().datetime(), updatedAt: z.string().datetime(),
|
||||
recipes: z.array(CollectionRecipeEntryRef),
|
||||
}));
|
||||
@@ -366,17 +366,23 @@ export function generateOpenApiSpec(): object {
|
||||
user: z.object({ name: z.string(), username: z.string().nullable(), avatarUrl: z.string().nullable() }),
|
||||
}));
|
||||
const UpdateCollectionRef = registry.register("UpdateCollection", z.object({
|
||||
name: z.string().min(1).max(100).optional(), description: z.string().max(500).optional(), isPublic: z.boolean().optional(),
|
||||
name: z.string().min(1).max(100).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(),
|
||||
removeRecipeId: z.string().optional(), removeRecipeIds: z.array(z.string()).max(200).optional(),
|
||||
}));
|
||||
const ReorderCollectionRecipesRef = registry.register("ReorderCollectionRecipes", z.object({
|
||||
recipeIds: z.array(z.string()).min(1).max(500).describe("Full ordered list of recipe ids currently in the collection."),
|
||||
}));
|
||||
const InviteMemberRef = registry.register("InviteMember", z.object({
|
||||
email: z.string().email().optional(), userId: z.string().optional(), role: z.enum(["viewer", "editor"]),
|
||||
}));
|
||||
|
||||
registry.registerPath({ method: "get", path: "/api/v1/collections/{id}", summary: "Get a collection (owner only)", security, request: { params: idParam }, responses: { 200: { description: "Collection with recipes", content: { "application/json": { schema: CollectionRef } } }, 404: { description: "Not found", content: { "application/json": { schema: ApiErrorRef } } } } });
|
||||
registry.registerPath({ method: "put", path: "/api/v1/collections/{id}", summary: "Update a collection / add-remove recipes (owner only)", security, request: { params: idParam, body: { content: { "application/json": { schema: UpdateCollectionRef } }, required: true } }, responses: { 200: { description: "Updated", content: { "application/json": { schema: z.object({ updated: z.boolean() }) } } }, 400: { description: "Validation error", content: { "application/json": { schema: ApiErrorRef } } }, 404: { description: "Not found", content: { "application/json": { schema: ApiErrorRef } } } } });
|
||||
registry.registerPath({ method: "delete", path: "/api/v1/collections/{id}", summary: "Delete a collection (owner only)", security, request: { params: idParam }, responses: { 204: { description: "Deleted" }, 404: { description: "Not found", content: { "application/json": { schema: ApiErrorRef } } } } });
|
||||
registry.registerPath({ method: "delete", path: "/api/v1/collections/{id}", summary: "Delete a collection (owner only)", description: "Pass ?deleteRecipes=true to also delete the recipes in it — only ones you own; recipes shared into this collection by others are never touched.", security, request: { params: idParam, query: z.object({ deleteRecipes: z.enum(["true", "false"]).optional() }) }, responses: { 204: { description: "Deleted" }, 404: { description: "Not found", content: { "application/json": { schema: ApiErrorRef } } } } });
|
||||
registry.registerPath({ method: "patch", path: "/api/v1/collections/{id}/reorder", summary: "Reorder the recipes in a collection (owner only)", description: "Pass the full list of recipe ids in the desired order — ids not currently in the collection are ignored.", security, request: { params: idParam, body: { content: { "application/json": { schema: ReorderCollectionRecipesRef } }, required: true } }, responses: { 200: { description: "Reordered", content: { "application/json": { schema: z.object({ ok: z.boolean() }) } } }, 400: { description: "Validation error or no matching recipes", content: { "application/json": { schema: ApiErrorRef } } }, 404: { description: "Not found", content: { "application/json": { schema: ApiErrorRef } } } } });
|
||||
registry.registerPath({ method: "post", path: "/api/v1/collections/{id}/fork", summary: "Fork a public (or your own) collection", security, request: { params: idParam }, responses: { 201: { description: "New collection id", content: { "application/json": { schema: z.object({ id: z.string() }) } } }, 404: { description: "Not found", content: { "application/json": { schema: ApiErrorRef } } } } });
|
||||
registry.registerPath({ method: "post", path: "/api/v1/collections/{id}/favorite", summary: "Favorite a collection", security, request: { params: idParam }, responses: { 200: { description: "Favorited", content: { "application/json": { schema: z.object({ favorited: z.boolean() }) } } }, 404: { description: "Not found", content: { "application/json": { schema: ApiErrorRef } } } } });
|
||||
registry.registerPath({ method: "delete", path: "/api/v1/collections/{id}/favorite", summary: "Unfavorite a collection", security, request: { params: idParam }, responses: { 200: { description: "Unfavorited", content: { "application/json": { schema: z.object({ favorited: z.boolean() }) } } } } });
|
||||
|
||||
@@ -1176,6 +1176,10 @@
|
||||
"empty": "No collections yet",
|
||||
"emptyDescription": "Group your recipes by theme, occasion, or however makes sense to you.",
|
||||
"emptyCollection": "No recipes in this collection yet.",
|
||||
"searchPlaceholder": "Search collections…",
|
||||
"noSearchResults": "No collections match your search",
|
||||
"searchRecipesPlaceholder": "Search recipes in this collection…",
|
||||
"noRecipeSearchResults": "No recipes match your search",
|
||||
"public": "Public",
|
||||
"recipeCount": "{count} recipe",
|
||||
"recipeCountPlural": "{count} recipes",
|
||||
@@ -1209,6 +1213,20 @@
|
||||
"removeFromCollectionFailed": "Failed to remove from collection",
|
||||
"removeFromCollectionConfirmTitle": "{count, plural, one {Remove 1 recipe from this collection?} other {Remove {count} recipes from this collection?}}",
|
||||
"removeFromCollectionConfirmDescription": "The recipe itself won't be deleted, just removed from this collection.",
|
||||
"reorderFailed": "Failed to save the new order",
|
||||
"editTitle": "Edit collection",
|
||||
"editSuccess": "Collection updated",
|
||||
"editFailed": "Failed to update collection",
|
||||
"saving": "Saving…",
|
||||
"notesLabel": "Notes",
|
||||
"notesPlaceholder": "Private notes about this collection — only you see these.",
|
||||
"tagsLabel": "Tags",
|
||||
"deleteSuccess": "Collection deleted",
|
||||
"deleteFailed": "Failed to delete collection",
|
||||
"deleteConfirmTitle": "Delete this collection?",
|
||||
"deleteConfirmDescription": "This removes the collection. Recipes in it stay untouched unless you check the box below.",
|
||||
"deleteRecipesToo": "Also delete the recipes in this collection (only ones you own — nothing shared by others is touched)",
|
||||
"deleting": "Deleting…",
|
||||
"generateMeal": "Generate meal",
|
||||
"generateMealTitle": "Generate a complete meal",
|
||||
"generateMealDescription": "AI generates one recipe per course, all matching the same theme, and adds them to this collection.",
|
||||
|
||||
@@ -1167,6 +1167,10 @@
|
||||
"empty": "Aucune collection pour l'instant",
|
||||
"emptyDescription": "Regroupez vos recettes par thème, occasion, ou comme bon vous semble.",
|
||||
"emptyCollection": "Aucune recette dans cette collection pour l'instant.",
|
||||
"searchPlaceholder": "Rechercher des collections…",
|
||||
"noSearchResults": "Aucune collection ne correspond à votre recherche",
|
||||
"searchRecipesPlaceholder": "Rechercher des recettes dans cette collection…",
|
||||
"noRecipeSearchResults": "Aucune recette ne correspond à votre recherche",
|
||||
"public": "Publique",
|
||||
"recipeCount": "{count} recette",
|
||||
"recipeCountPlural": "{count} recettes",
|
||||
@@ -1200,6 +1204,20 @@
|
||||
"removeFromCollectionFailed": "Échec du retrait de la collection",
|
||||
"removeFromCollectionConfirmTitle": "{count, plural, one {Retirer 1 recette de cette collection ?} other {Retirer {count} recettes de cette collection ?}}",
|
||||
"removeFromCollectionConfirmDescription": "La recette elle-même ne sera pas supprimée, seulement retirée de cette collection.",
|
||||
"reorderFailed": "Échec de l'enregistrement du nouvel ordre",
|
||||
"editTitle": "Modifier la collection",
|
||||
"editSuccess": "Collection mise à jour",
|
||||
"editFailed": "Échec de la mise à jour de la collection",
|
||||
"saving": "Enregistrement…",
|
||||
"notesLabel": "Notes",
|
||||
"notesPlaceholder": "Notes privées sur cette collection — vous seul(e) les voyez.",
|
||||
"tagsLabel": "Tags",
|
||||
"deleteSuccess": "Collection supprimée",
|
||||
"deleteFailed": "Échec de la suppression de la collection",
|
||||
"deleteConfirmTitle": "Supprimer cette collection ?",
|
||||
"deleteConfirmDescription": "Ceci supprime la collection. Les recettes qu'elle contient restent intactes, sauf si vous cochez la case ci-dessous.",
|
||||
"deleteRecipesToo": "Supprimer aussi les recettes de cette collection (seulement celles que vous possédez — rien de partagé par d'autres n'est touché)",
|
||||
"deleting": "Suppression…",
|
||||
"generateMeal": "Générer un repas",
|
||||
"generateMealTitle": "Générer un repas complet",
|
||||
"generateMealDescription": "L'IA génère une recette par plat, toutes selon le même thème, et les ajoute à cette collection.",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@epicure/web",
|
||||
"version": "0.52.1",
|
||||
"version": "0.53.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
|
||||
Reference in New Issue
Block a user