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>
2026-07-19 18:44:08 +02:00
parent 5403a06348
commit e8c687e53a
19 changed files with 6300 additions and 82 deletions
@@ -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>
+    </>
+  );
+}