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,156 @@
+"use client";
+
+import { useState } from "react";
+import { Minus, Plus, Sparkles, X } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { scaleQuantity } from "@/lib/fractions";
+import { SubstituteIngredientPopover } from "@/components/recipe/substitute-ingredient-popover";
+
+type Ingredient = {
+  id: string;
+  rawName: string;
+  quantity: string | null;
+  unit: string | null;
+  note: string | null;
+  order: number;
+};
+
+export type ScaledIngredient = {
+  rawName: string;
+  quantity: string;
+  unit: string | null;
+  note?: string;
+};
+
+export function ServingScaler({
+  baseServings,
+  ingredients,
+  recipeTitle,
+  recipeId,
+  onAiScale,
+}: {
+  baseServings: number;
+  ingredients: Ingredient[];
+  recipeTitle?: string;
+  recipeId?: string;
+  onAiScale?: (ingredients: ScaledIngredient[] | null) => void;
+}) {
+  const [servings, setServings] = useState(baseServings);
+  const [aiScaledIngredients, setAiScaledIngredients] = useState<ScaledIngredient[] | null>(null);
+  const [aiScaling, setAiScaling] = useState(false);
+  const min = 1;
+  const max = 100;
+
+  async function handleAiScale() {
+    if (!recipeId) return;
+    setAiScaling(true);
+    try {
+      const res = await fetch("/api/v1/ai/scale", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ recipeId, targetServings: servings }),
+      });
+      if (!res.ok) return;
+      const data = await res.json() as { ingredients: ScaledIngredient[] };
+      setAiScaledIngredients(data.ingredients);
+      onAiScale?.(data.ingredients);
+    } finally {
+      setAiScaling(false);
+    }
+  }
+
+  function dismissAiScale() {
+    setAiScaledIngredients(null);
+    onAiScale?.(null);
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3 flex-wrap">
+        <span className="text-sm font-medium text-muted-foreground">Servings</span>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => setServings((s) => Math.max(min, s - 1))}
+            disabled={servings <= min}
+          >
+            <Minus className="h-3 w-3" />
+          </Button>
+          <span className="w-8 text-center font-semibold tabular-nums">{servings}</span>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 w-7 p-0"
+            onClick={() => setServings((s) => Math.min(max, s + 1))}
+            disabled={servings >= max}
+          >
+            <Plus className="h-3 w-3" />
+          </Button>
+        </div>
+        {servings !== baseServings && (
+          <button
+            className="text-xs text-muted-foreground hover:text-foreground underline"
+            onClick={() => setServings(baseServings)}
+          >
+            reset
+          </button>
+        )}
+        {recipeId && servings !== baseServings && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 gap-1 text-xs"
+            onClick={handleAiScale}
+            disabled={aiScaling}
+          >
+            <Sparkles className="h-3 w-3" />
+            {aiScaling ? "Scaling…" : "AI Scale"}
+          </Button>
+        )}
+      </div>
+
+      {aiScaledIngredients && (
+        <div className="flex items-center gap-2 text-xs text-muted-foreground">
+          <Sparkles className="h-3 w-3 shrink-0" />
+          <span>AI-scaled quantities shown below</span>
+          <button
+            className="ml-auto hover:text-foreground"
+            onClick={dismissAiScale}
+            aria-label="Dismiss AI scaling"
+          >
+            <X className="h-3 w-3" />
+          </button>
+        </div>
+      )}
+
+      <ul className="space-y-2">
+        {ingredients
+          .sort((a, b) => a.order - b.order)
+          .map((ing) => {
+            const aiIng = aiScaledIngredients?.find((s) => s.rawName === ing.rawName);
+            const scaled = scaleQuantity(ing.quantity, baseServings, servings);
+            return (
+              <li key={ing.id} className="flex gap-2 text-sm group">
+                <span className="font-medium tabular-nums min-w-[3rem] text-right">
+                  {aiIng
+                    ? `${aiIng.quantity}${aiIng.unit ? ` ${aiIng.unit}` : ""}`
+                    : scaled
+                      ? `${scaled}${ing.unit ? ` ${ing.unit}` : ""}`
+                      : ing.unit ?? ""}
+                </span>
+                <span className="flex items-center gap-1">
+                  {ing.rawName}
+                  {(aiIng?.note ?? ing.note) && (
+                    <span className="text-muted-foreground">, {aiIng?.note ?? ing.note}</span>
+                  )}
+                  {recipeTitle && <SubstituteIngredientPopover ingredient={ing.rawName} recipeTitle={recipeTitle} />}
+                </span>
+              </li>
+            );
+          })}
+      </ul>
+    </div>
+  );
+}