feat(recipes): full recipe CRUD with photos, print, version history

List, detail, new, edit pages. Server-side pagination, dietary tags, difficulty. Photo upload to S3-compatible storage. Version history. Multi-select grid with bulk delete/visibility. Print view. Delete confirmation dialog.
2026-07-01 08:10:11 +02:00
parent fa2d797918
commit 84d6cfeb07
45 changed files with 5300 additions and 0 deletions
@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { Link2, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+type ImportedRecipe = {
+  title: string;
+  ingredients: Array<{ rawName: string; quantity?: string; unit?: string }>;
+  steps: Array<{ instruction: string }>;
+};
+
+export function UrlImportDialog({
+  open,
+  onOpenChange,
+}: {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}) {
+  const router = useRouter();
+  const [url, setUrl] = useState("");
+  const [importing, setImporting] = useState(false);
+
+  async function handleImport() {
+    if (!url.trim()) return;
+    setImporting(true);
+    try {
+      const res = await fetch("/api/v1/ai/import-url", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: url.trim() }),
+      });
+
+      if (!res.ok) {
+        const err = await res.json() as { error?: string };
+        toast.error(err.error ?? "Failed to import recipe");
+        return;
+      }
+
+      const imported = await res.json() as ImportedRecipe;
+
+      const saveRes = await fetch("/api/v1/recipes", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          ...imported,
+          visibility: "private",
+          sourceUrl: url.trim(),
+        }),
+      });
+
+      if (!saveRes.ok) {
+        toast.error("Failed to save imported recipe");
+        return;
+      }
+
+      const saved = await saveRes.json() as { id: string };
+      toast.success("Recipe imported! Review before publishing.");
+      onOpenChange(false);
+      router.push(`/recipes/${saved.id}/edit`);
+    } finally {
+      setImporting(false);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Link2 className="h-5 w-5 text-primary" />
+            Import recipe from URL
+          </DialogTitle>
+          <DialogDescription>
+            Paste a recipe URL and AI will extract the ingredients and instructions.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="import-url">Recipe URL</Label>
+            <Input
+              id="import-url"
+              type="url"
+              value={url}
+              onChange={(e) => setUrl(e.target.value)}
+              placeholder="https://..."
+              disabled={importing}
+              onKeyDown={(e) => e.key === "Enter" && handleImport()}
+            />
+          </div>
+          <div className="flex gap-2 justify-end">
+            <Button variant="outline" onClick={() => onOpenChange(false)} disabled={importing}>
+              Cancel
+            </Button>
+            <Button onClick={handleImport} disabled={!url.trim() || importing}>
+              {importing ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Importing…
+                </>
+              ) : (
+                <>
+                  <Link2 className="h-4 w-4" />
+                  Import
+                </>
+              )}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}