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 { Languages, 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 { Label } from "@/components/ui/label";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+
+const LANGUAGES = [
+  { code: "French", label: "French" },
+  { code: "Spanish", label: "Spanish" },
+  { code: "German", label: "German" },
+  { code: "Italian", label: "Italian" },
+  { code: "Portuguese", label: "Portuguese" },
+  { code: "English", label: "English" },
+  { code: "Japanese", label: "Japanese" },
+  { code: "Chinese", label: "Chinese" },
+  { code: "Arabic", label: "Arabic" },
+  { code: "Dutch", label: "Dutch" },
+  { code: "Polish", label: "Polish" },
+  { code: "Russian", label: "Russian" },
+];
+
+export function TranslateButton({ recipeId }: { recipeId: string }) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [targetLanguage, setTargetLanguage] = useState("French");
+  const [translating, setTranslating] = useState(false);
+
+  async function handleTranslate() {
+    setTranslating(true);
+    try {
+      const res = await fetch(`/api/v1/ai/translate/${recipeId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ targetLanguage }),
+      });
+
+      if (!res.ok) {
+        const err = await res.json() as { error?: string };
+        toast.error(err.error ?? "Failed to translate recipe");
+        return;
+      }
+
+      const { id } = await res.json() as { id: string };
+      toast.success("Translation saved as new draft recipe");
+      setOpen(false);
+      router.push(`/recipes/${id}/edit`);
+    } finally {
+      setTranslating(false);
+    }
+  }
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={() => setOpen(true)}>
+        <Languages className="h-4 w-4" />
+        Translate
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-md">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Languages className="h-5 w-5 text-primary" />
+              Translate Recipe
+            </DialogTitle>
+            <DialogDescription>
+              AI will translate the title, description, ingredients, and steps. Quantities and units are preserved.
+            </DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label>Target language</Label>
+              <Select value={targetLanguage} onValueChange={(v) => v && setTargetLanguage(v)} disabled={translating}>
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {LANGUAGES.map((l) => (
+                    <SelectItem key={l.code} value={l.code}>{l.label}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {translating && (
+              <p className="text-sm text-muted-foreground">This may take 20–30 seconds…</p>
+            )}
+
+            <div className="flex gap-2 justify-end">
+              <Button variant="outline" onClick={() => setOpen(false)} disabled={translating}>
+                Cancel
+              </Button>
+              <Button onClick={handleTranslate} disabled={translating}>
+                {translating ? (
+                  <>
+                    <Loader2 className="h-4 w-4 animate-spin" />
+                    Translating…
+                  </>
+                ) : (
+                  <>
+                    <Languages className="h-4 w-4" />
+                    Translate
+                  </>
+                )}
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}