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,155 @@
+"use client";
+
+import { useState } from "react";
+import { Wine, Sparkles, Loader2, Coffee, Beer, GlassWater, Leaf } from "lucide-react";
+import { FakeProgressBar } from "@/components/ui/fake-progress-bar";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+
+type Drink = {
+  name: string;
+  type: "wine" | "beer" | "cocktail" | "spirit" | "non-alcoholic" | "hot";
+  alcoholic: boolean;
+  description: string;
+  examples: string[];
+  whyItPairs: string;
+  servingTip?: string;
+};
+
+const TYPE_ICON: Record<Drink["type"], React.ElementType> = {
+  wine: Wine,
+  beer: Beer,
+  cocktail: Wine,
+  spirit: Wine,
+  "non-alcoholic": GlassWater,
+  hot: Coffee,
+};
+
+const TYPE_LABEL: Record<Drink["type"], string> = {
+  wine: "Wine",
+  beer: "Beer",
+  cocktail: "Cocktail",
+  spirit: "Spirit",
+  "non-alcoholic": "Sans alcool",
+  hot: "Chaud",
+};
+
+export function DrinkPairingButton({ recipeId }: { recipeId: string }) {
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [drinks, setDrinks] = useState<Drink[]>([]);
+
+  async function suggest() {
+    setLoading(true);
+    setDrinks([]);
+    try {
+      const res = await fetch(`/api/v1/ai/drinks/${recipeId}`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ count: 4 }),
+      });
+      if (!res.ok) {
+        toast.error("Failed to suggest drinks");
+        return;
+      }
+      const data = await res.json() as { drinks: Drink[] };
+      setDrinks(data.drinks);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleOpen() {
+    setOpen(true);
+    if (drinks.length === 0) suggest();
+  }
+
+  return (
+    <>
+      <Button variant="outline" size="sm" onClick={handleOpen}>
+        <Wine className="h-4 w-4" />
+        Drinks
+      </Button>
+
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="flex items-center gap-2">
+              <Wine className="h-5 w-5 text-primary" />
+              Drink pairings
+            </DialogTitle>
+            <DialogDescription>
+              AI-suggested drinks that complement this recipe.
+            </DialogDescription>
+          </DialogHeader>
+
+          {loading ? (
+            <div className="py-6 space-y-3">
+              <FakeProgressBar active={loading} durationMs={8000} label="Finding perfect pairings…" />
+            </div>
+          ) : drinks.length === 0 ? (
+            <div className="flex flex-col items-center gap-4 py-8">
+              <Button onClick={suggest} size="lg">
+                <Sparkles className="h-4 w-4" />
+                Suggest drinks
+              </Button>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {drinks.map((drink, i) => {
+                const Icon = TYPE_ICON[drink.type];
+                return (
+                  <div key={i} className="rounded-lg border p-4">
+                    <div className="flex items-start gap-3">
+                      <div className="mt-0.5 shrink-0 h-8 w-8 rounded-full bg-muted flex items-center justify-center">
+                        <Icon className="h-4 w-4 text-muted-foreground" />
+                      </div>
+                      <div className="flex-1 min-w-0 space-y-1.5">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="font-semibold">{drink.name}</span>
+                          <Badge variant="outline" className="text-xs">{TYPE_LABEL[drink.type]}</Badge>
+                          {!drink.alcoholic && (
+                            <Badge variant="secondary" className="text-xs flex items-center gap-1">
+                              <Leaf className="h-2.5 w-2.5" />
+                              Sans alcool
+                            </Badge>
+                          )}
+                        </div>
+                        <p className="text-sm text-muted-foreground">{drink.description}</p>
+                        {drink.examples.length > 0 && (
+                          <p className="text-xs text-muted-foreground">
+                            <span className="font-medium">e.g. </span>
+                            {drink.examples.join(" · ")}
+                          </p>
+                        )}
+                        <p className="text-xs text-muted-foreground italic">&ldquo;{drink.whyItPairs}&rdquo;</p>
+                        {drink.servingTip && (
+                          <p className="text-xs text-muted-foreground border-l-2 border-muted pl-2">{drink.servingTip}</p>
+                        )}
+                      </div>
+                    </div>
+                    {i < drinks.length - 1 && <Separator className="mt-3" />}
+                  </div>
+                );
+              })}
+
+              <Button variant="outline" className="w-full" onClick={suggest} disabled={loading}>
+                <Sparkles className="h-4 w-4" />
+                Regenerate
+              </Button>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}