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,100 @@
+"use client";
+
+import { useState } from "react";
+import { Shuffle, Loader2 } from "lucide-react";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { Badge } from "@/components/ui/badge";
+
+type Substitution = {
+  name: string;
+  ratio: string;
+  note: string;
+  flavorImpact: "minimal" | "moderate" | "significant";
+};
+
+const IMPACT_VARIANT = {
+  minimal: "default",
+  moderate: "secondary",
+  significant: "destructive",
+} as const;
+
+export function SubstituteIngredientPopover({
+  ingredient,
+  recipeTitle,
+}: {
+  ingredient: string;
+  recipeTitle: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [substitutions, setSubstitutions] = useState<Substitution[]>([]);
+  const [fetched, setFetched] = useState(false);
+
+  async function fetchSubstitutions() {
+    if (fetched) return;
+    setLoading(true);
+    try {
+      const res = await fetch("/api/v1/ai/substitute", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ingredient, recipeTitle }),
+      });
+      if (!res.ok) return;
+      const data = await res.json() as { substitutions: Substitution[] };
+      setSubstitutions(data.substitutions);
+      setFetched(true);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleOpen(v: boolean) {
+    setOpen(v);
+    if (v && !fetched) fetchSubstitutions();
+  }
+
+  return (
+    <Popover open={open} onOpenChange={handleOpen}>
+      <PopoverTrigger
+        className="h-5 w-5 opacity-0 group-hover:opacity-60 hover:opacity-100 transition-opacity shrink-0 inline-flex items-center justify-center rounded hover:bg-accent"
+        title={`Substitute for ${ingredient}`}
+      >
+        <Shuffle className="h-3 w-3" />
+      </PopoverTrigger>
+      <PopoverContent className="w-80 p-3 space-y-3" align="start">
+        <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">
+          Substitutes for <span className="text-foreground normal-case">{ingredient}</span>
+        </p>
+        {loading && (
+          <div className="flex items-center gap-2 py-2 text-sm text-muted-foreground">
+            <Loader2 className="h-3.5 w-3.5 animate-spin" />
+            Finding substitutes…
+          </div>
+        )}
+        {!loading && substitutions.length > 0 && (
+          <div className="space-y-2.5">
+            {substitutions.map((sub, i) => (
+              <div key={i} className="space-y-0.5">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">{sub.name}</span>
+                  <span className="text-xs text-muted-foreground font-mono">{sub.ratio}</span>
+                  <Badge variant={IMPACT_VARIANT[sub.flavorImpact]} className="text-[10px] px-1.5 py-0 ml-auto">
+                    {sub.flavorImpact}
+                  </Badge>
+                </div>
+                <p className="text-xs text-muted-foreground">{sub.note}</p>
+              </div>
+            ))}
+          </div>
+        )}
+        {!loading && fetched && substitutions.length === 0 && (
+          <p className="text-sm text-muted-foreground py-1">No substitutions found.</p>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}