From f4b3339fe4113bcdc5ae160553c6601fa32990c6 Mon Sep 17 00:00:00 2001
From: ordinarthur <arthur.barre@forgeron3.fr>
Date: Wed, 8 Apr 2026 13:36:16 +0200
Subject: [PATCH] feat(ui): redesign /recipes/new from scratch
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The page had 2 stacked headers (its own + MainLayout), was capped at
max-w-md which wasted desktop space, and had cheap-looking dashed amber
borders. Full rewrite with 4 clean states.

State machine: idle -> recording -> review -> processing

IDLE state:
- Brand pill 'Nouvelle recette' with Wand2 icon
- Big H1 with 'ton frigo' in warm-gradient
- Subtitle explaining the chef Antoine
- User preferences rendered as chips (vegan, allergies, max time,
  cuisine) loaded from /users/profile. Each chip is a Badge with
  backdrop-blur, + a 'Modifier' chip linking to /profile. Chips only
  appear if the user actually set preferences.
- Giant centered mic button (112-128px) with:
  - 3 concentric pulsing rings (border-2, staggered 0.6s delays)
  - Gradient from-orange-500 to-amber-500
  - shadow-2xl + orange glow
  - ring-4 ring-white for separation from background
  - Scale 1.04/0.94 on hover/tap
- Keyboard shortcut hint (Space) shown on md+
- Rotating tip card below with Lightbulb icon (4 tips cycling every 4.5s)

RECORDING state:
- Pulsing red dot + 'ENREGISTREMENT' label
- 7xl monospaced tabular timer
- Synthetic 20-bar waveform animating (each bar randomized
  height/duration for organic feel)
- Large red stop button (80px) with Square icon
- Keyboard shortcut hint

REVIEW state:
- Spring-animated green checkmark badge
- H2 'Tout est bon ?' + subtitle
- Audio player card with:
  - Circular play/pause button (brand gradient)
  - 32-bar static waveform (deterministic sin/cos pattern)
  - Trash button
  - Hidden <audio> controlled via id
  - File size in KB
- Two buttons: 'Recommencer' (outline) + 'Créer ma recette' (brand
  gradient, ChefHat icon that rotates -8deg on hover)

PROCESSING state: (kept from previous version, slightly enlarged to
60-72 and using the new gradient halo)

Bonus:
- Space bar shortcut: starts/stops recording when not focused on input
- Remove the duplicate sticky header
- 'Mes recettes' back button + 'Préférences' link in top bar
- max-w-3xl centered layout, works from mobile to desktop
- All imports cleaned up (no more KitchenIllustration, Sheet, Card,
  useMobile, cn, Info, showTips, isRecorderLoading)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/Recipes/RecipeForm.tsx | 979 +++++++++++++---------
 1 file changed, 588 insertions(+), 391 deletions(-)

diff --git a/frontend/src/pages/Recipes/RecipeForm.tsx b/frontend/src/pages/Recipes/RecipeForm.tsx
index 7e0249b..c3c66c6 100644
--- a/frontend/src/pages/Recipes/RecipeForm.tsx
+++ b/frontend/src/pages/Recipes/RecipeForm.tsx
@@ -1,27 +1,54 @@
 "use client"
 
 import type React from "react"
-
-import { useState, useEffect } from "react"
-import { useNavigate } from "react-router-dom"
+import { useState, useEffect, useMemo } from "react"
+import { useNavigate, Link } from "react-router-dom"
 import { recipeService } from "@/api/recipe"
+import userService from "@/api/user"
+import type { User } from "@/api/auth"
 import { Button } from "@/components/ui/button"
-import { Card } from "@/components/ui/card"
-import { Mic, ArrowLeft, Trash2, ChefHat, Info, X, Check } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import {
+  Mic,
+  ArrowLeft,
+  Trash2,
+  ChefHat,
+  X,
+  Check,
+  Play,
+  Pause,
+  Settings2,
+  Lightbulb,
+  Square,
+  Wand2,
+} from "lucide-react"
 import { motion, AnimatePresence } from "framer-motion"
-import { KitchenIllustration } from "@/components/illustrations/KitchenIllustration"
 import { CookingLoader } from "@/components/illustrations/CookingLoader"
 import { useAudioRecorder } from "@/hooks/useAudioRecorder"
-import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"
-import { cn } from "@/lib/utils"
-import { useMobile } from "@/hooks/useMobile"
+
+type PageState = "idle" | "recording" | "review" | "processing"
+
+// Messages d'état pendant la génération
+const stepLabels: Record<string, string> = {
+  saving_audio: "Envoi de ton enregistrement…",
+  transcribing: "Je t'écoute attentivement…",
+  generating_recipe: "Antoine invente ta recette…",
+  generating_image: "Préparation de la photo du plat…",
+  finalizing: "Derniers préparatifs…",
+}
+
+// Astuces affichées en rotation sur la page d'accueil
+const tips = [
+  "Parle naturellement, comme à un ami. Pas besoin d'être exhaustif.",
+  "Précise les quantités quand tu les connais (\"environ 200g de riz\").",
+  "Mentionne les herbes et épices que tu as — ça change tout.",
+  "Tu peux ajouter une envie : \"quelque chose de rapide\" ou \"plutôt épicé\".",
+]
 
 export default function RecipeForm() {
   const navigate = useNavigate()
-  const isMobile = useMobile()
 
   const {
-    isLoading: isRecorderLoading,
     isRecording,
     currentRecording,
     startRecording,
@@ -29,11 +56,12 @@ export default function RecipeForm() {
   } = useAudioRecorder()
 
   const [audioFile, setAudioFile] = useState<File | null>(null)
-  const [recordingStatus, setRecordingStatus] = useState<"idle" | "recording" | "processing">("idle")
-  const [loading, setLoading] = useState(false)
+  const [pageState, setPageState] = useState<PageState>("idle")
   const [error, setError] = useState("")
   const [recordingTime, setRecordingTime] = useState(0)
-  const [showTips, setShowTips] = useState(false)
+  const [user, setUser] = useState<User | null>(null)
+  const [tipIndex, setTipIndex] = useState(0)
+  const [isPlaying, setIsPlaying] = useState(false)
 
   // Live streaming state
   const [progressStep, setProgressStep] = useState<string>("")
@@ -42,74 +70,92 @@ export default function RecipeForm() {
   const [liveDescription, setLiveDescription] = useState("")
   const [liveImageUrl, setLiveImageUrl] = useState<string | null>(null)
 
-  // Update audioFile when recording is available
+  // --- Effects ---
+
+  // Charge les préférences utilisateur pour les afficher en chips
   useEffect(() => {
-    if (currentRecording) {
-      fetch(currentRecording)
-        .then((res) => res.blob())
-        .then((blob) => {
-          const file = new File([blob], "recording.mp3", { type: "audio/mp3" })
-          setAudioFile(file)
-          setRecordingStatus("idle")
-          setError("")
-        })
-    }
+    userService.getCurrentUser().then(setUser).catch(() => {/* ignore */})
+  }, [])
+
+  // Rotation des astuces
+  useEffect(() => {
+    if (pageState !== "idle") return
+    const id = setInterval(() => setTipIndex((i) => (i + 1) % tips.length), 4500)
+    return () => clearInterval(id)
+  }, [pageState])
+
+  // Convertit l'enregistrement en File
+  useEffect(() => {
+    if (!currentRecording) return
+    fetch(currentRecording)
+      .then((res) => res.blob())
+      .then((blob) => {
+        const file = new File([blob], "recording.mp3", { type: "audio/mp3" })
+        setAudioFile(file)
+        setPageState("review")
+        setError("")
+      })
   }, [currentRecording])
 
-  // Recording timer
+  // Timer
   useEffect(() => {
-    let interval: NodeJS.Timeout | null = null
-    if (isRecording) {
-      interval = setInterval(() => {
-        setRecordingTime((prev) => prev + 1)
-      }, 1000)
-    } else {
+    if (!isRecording) {
       setRecordingTime(0)
+      return
     }
-    return () => {
-      if (interval) clearInterval(interval)
-    }
+    const id = setInterval(() => setRecordingTime((t) => t + 1), 1000)
+    return () => clearInterval(id)
   }, [isRecording])
 
-  // Handle recording start
+  // Raccourci clavier : espace pour démarrer/arrêter (quand pas dans un input)
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.code !== "Space") return
+      const target = e.target as HTMLElement
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return
+      if (pageState === "idle") {
+        e.preventDefault()
+        handleStartRecording()
+      } else if (pageState === "recording") {
+        e.preventDefault()
+        handleStopRecording()
+      }
+    }
+    window.addEventListener("keydown", onKey)
+    return () => window.removeEventListener("keydown", onKey)
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pageState])
+
+  // --- Handlers ---
+
   const handleStartRecording = async () => {
     try {
       await startRecording()
-      setRecordingStatus("recording")
-    } catch (err) {
-      console.error("Erreur lors de l'accès au microphone:", err)
+      setPageState("recording")
+      setError("")
+    } catch {
       setError("Impossible d'accéder au microphone. Vérifiez les permissions.")
     }
   }
 
-  // Handle recording stop
   const handleStopRecording = async () => {
-    if (isRecording) {
-      await stopRecording()
-      setRecordingStatus("processing")
-      // Processing will be updated to "idle" when the audioFile is set
-    }
+    if (!isRecording) return
+    await stopRecording()
+    // Le useEffect sur currentRecording bascule vers 'review'
   }
 
-  // Fonction pour réinitialiser l'enregistrement
   const handleResetRecording = () => {
     setAudioFile(null)
-    setRecordingStatus("idle")
+    setPageState("idle")
     setError("")
+    setIsPlaying(false)
   }
 
-  // Soumettre le formulaire — utilise le streaming SSE
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
+  const handleSubmit = async () => {
+    if (!audioFile) return
 
-    if (!audioFile) {
-      setError("Veuillez fournir un enregistrement audio des ingrédients")
-      return
-    }
-
-    setLoading(true)
+    setPageState("processing")
     setError("")
-    setRecordingStatus("processing")
     setProgressStep("")
     setLiveTranscription("")
     setLiveTitle("")
@@ -141,380 +187,531 @@ export default function RecipeForm() {
             break
           case "error":
             throw new Error(event.message)
-          case "done":
-            break
         }
       }
 
       if (savedId) {
-        // Petit délai pour que l'utilisateur voie l'image finale avant de partir
         setTimeout(() => navigate(`/recipes/${savedId}`), 800)
       }
     } catch (err) {
-      console.error("Erreur lors de la création de la recette:", err)
-      setError(err instanceof Error ? err.message : "Une erreur est survenue lors de la création de la recette")
-      setRecordingStatus("idle")
-      setLoading(false)
+      setError(err instanceof Error ? err.message : "Une erreur est survenue")
+      setPageState("review")
     }
   }
 
-  // Libellés des étapes
-  const stepLabels: Record<string, string> = {
-    saving_audio: "Envoi de ton enregistrement…",
-    transcribing: "Je t'écoute attentivement…",
-    generating_recipe: "Antoine invente ta recette…",
-    generating_image: "Préparation de la photo du plat…",
-    finalizing: "Derniers préparatifs…",
-  }
-
-  // Format recording time
   const formatTime = (seconds: number) => {
     const mins = Math.floor(seconds / 60)
     const secs = seconds % 60
     return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`
   }
 
+  // URL audio pour lecture (stable sur la durée du review)
+  const audioUrl = useMemo(
+    () => (audioFile ? URL.createObjectURL(audioFile) : null),
+    [audioFile]
+  )
+
+  // Chips des préférences utilisateur
+  const prefChips = useMemo(() => {
+    if (!user) return []
+    const chips: string[] = []
+    if (user.dietaryPreference && user.dietaryPreference !== "none") {
+      const labels: Record<string, string> = {
+        vegetarian: "Végétarien",
+        vegan: "Végan",
+        pescatarian: "Pescétarien",
+      }
+      chips.push(labels[user.dietaryPreference] ?? user.dietaryPreference)
+    }
+    if (user.allergies && user.allergies.trim()) {
+      chips.push(`Sans ${user.allergies.split(",")[0].trim()}`)
+    }
+    if (user.maxCookingTime) {
+      chips.push(`≤ ${user.maxCookingTime} min`)
+    }
+    if (user.cuisinePreference) {
+      chips.push(`Cuisine ${user.cuisinePreference}`)
+    }
+    return chips
+  }, [user])
+
+  // -------------------------------------------------------------------------
+  // Render
+  // -------------------------------------------------------------------------
+
   return (
-    <div className="min-h-screen flex flex-col bg-gradient-to-b from-amber-50 to-orange-50 dark:from-slate-950 dark:to-slate-900">
-      {/* Header */}
-      <header className="sticky top-0 z-10 backdrop-blur-sm bg-amber-50/80 dark:bg-slate-950/80 border-b border-amber-100 dark:border-slate-800 p-4 flex justify-between items-center">
-        <Button variant="ghost" size="icon" className="rounded-full" onClick={() => navigate("/recipes")}>
-          <ArrowLeft className="h-5 w-5" />
-          <span className="sr-only">Retour</span>
+    <div className="relative min-h-[calc(100vh-4rem)] px-4 py-6 md:py-12 md:px-8">
+      {/* Top bar avec bouton retour */}
+      <div className="max-w-3xl mx-auto mb-8 flex items-center justify-between">
+        <Button
+          variant="ghost"
+          size="sm"
+          className="rounded-full -ml-2 gap-1.5 hover:bg-white/60 dark:hover:bg-slate-800/60"
+          onClick={() => navigate("/recipes")}
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Mes recettes
         </Button>
-        <h1 className="text-lg font-medium">Nouvelle Recette</h1>
-        <Sheet>
-          <SheetTrigger asChild>
-            <Button variant="ghost" size="icon" className="rounded-full">
-              <Info className="h-5 w-5" />
-              <span className="sr-only">Aide</span>
+        {pageState === "idle" && (
+          <Link to="/profile">
+            <Button
+              variant="ghost"
+              size="sm"
+              className="rounded-full gap-1.5 hover:bg-white/60 dark:hover:bg-slate-800/60"
+            >
+              <Settings2 className="h-4 w-4" />
+              Préférences
             </Button>
-          </SheetTrigger>
-          <SheetContent side="bottom" className="rounded-t-xl">
-            <SheetHeader>
-              <SheetTitle>Comment ça marche ?</SheetTitle>
-              <SheetDescription>
-                <ol className="mt-4 space-y-3 list-decimal list-inside text-sm">
-                  <li>Appuyez sur le bouton d'enregistrement</li>
-                  <li>Listez clairement les ingrédients que vous avez à disposition</li>
-                  <li>Terminez l'enregistrement</li>
-                  <li>Notre IA créera une recette adaptée à vos ingrédients</li>
-                </ol>
-              </SheetDescription>
-            </SheetHeader>
-          </SheetContent>
-        </Sheet>
-      </header>
+          </Link>
+        )}
+      </div>
 
-      <main className="flex-1 flex flex-col">
-        {/* Main content */}
-        <div className="flex-1 flex flex-col p-4 max-w-md mx-auto w-full">
-          {/* Illustration */}
-          <AnimatePresence>
-            {!isRecording && !loading && (
-              <motion.div
-                initial={{ opacity: 0, y: 20 }}
-                animate={{ opacity: 1, y: 0 }}
-                exit={{ opacity: 0, y: -20 }}
-                className="flex justify-center mb-6"
+      {/* Erreur */}
+      <AnimatePresence>
+        {error && (
+          <motion.div
+            initial={{ opacity: 0, y: -8 }}
+            animate={{ opacity: 1, y: 0 }}
+            exit={{ opacity: 0, y: -8 }}
+            className="max-w-3xl mx-auto mb-6"
+          >
+            <div className="flex items-start gap-3 rounded-xl bg-red-50 dark:bg-red-950/40 border border-red-200 dark:border-red-900/50 p-4 text-sm text-red-800 dark:text-red-200">
+              <div className="flex-1">{error}</div>
+              <button
+                onClick={() => setError("")}
+                className="text-red-600 hover:text-red-800"
+                aria-label="Fermer"
               >
-                <KitchenIllustration height={120} />
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </AnimatePresence>
+
+      <div className="max-w-3xl mx-auto">
+        <AnimatePresence mode="wait">
+          {/* ================================================================= */}
+          {/* IDLE — accueil de la page */}
+          {/* ================================================================= */}
+          {pageState === "idle" && (
+            <motion.div
+              key="idle"
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.4 }}
+              className="flex flex-col items-center text-center"
+            >
+              {/* Titre */}
+              <motion.div
+                className="mb-2 flex items-center gap-1.5 rounded-full bg-gradient-to-r from-orange-100 to-amber-100 dark:from-orange-900/40 dark:to-amber-900/40 px-3 py-1 text-xs font-medium text-orange-700 dark:text-orange-300 border border-orange-200/60 dark:border-orange-800/40"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                transition={{ delay: 0.1 }}
+              >
+                <Wand2 className="h-3 w-3" />
+                Nouvelle recette
               </motion.div>
-            )}
-          </AnimatePresence>
 
-          {/* Error message */}
-          <AnimatePresence>
-            {error && (
-              <motion.div
-                initial={{ opacity: 0, height: 0 }}
-                animate={{ opacity: 1, height: "auto" }}
-                exit={{ opacity: 0, height: 0 }}
-                className="mb-4"
-              >
-                <div className="rounded-lg bg-red-50 p-3 text-sm text-red-700 dark:bg-red-900/30 dark:text-red-200 flex items-start">
-                  <div className="flex-1">{error}</div>
-                  <Button variant="ghost" size="sm" className="h-6 w-6 p-0 rounded-full" onClick={() => setError("")}>
-                    <X className="h-4 w-4" />
-                  </Button>
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
+              <h1 className="text-3xl md:text-5xl font-bold tracking-tight mt-4 max-w-xl">
+                Qu'est-ce qu'il y a dans{" "}
+                <span className="text-warm-gradient">ton frigo</span> ?
+              </h1>
+              <p className="text-muted-foreground mt-3 max-w-md text-sm md:text-base">
+                Dicte tes ingrédients et le chef Antoine s'occupe du reste. Une recette
+                originale, personnalisée, en moins d'une minute.
+              </p>
 
-          {/* Recording UI */}
-          <AnimatePresence mode="wait">
-            {recordingStatus === "processing" || loading ? (
-              <motion.div
-                key="processing"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="flex-1 flex flex-col items-center justify-center px-4"
-              >
-                {/* Image en cours de génération ou finale */}
-                <div className="relative w-56 h-56 mb-8 flex items-center justify-center">
-                  {/* Halo derrière l'image */}
-                  <div className="absolute inset-0 -z-10 bg-gradient-to-br from-orange-200/50 via-amber-200/30 to-transparent rounded-full blur-3xl animate-pulse" />
-
-                  <AnimatePresence mode="wait">
-                    {liveImageUrl ? (
-                      <motion.img
-                        key="image"
-                        initial={{ opacity: 0, scale: 0.85, filter: "blur(20px)" }}
-                        animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
-                        transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
-                        src={liveImageUrl}
-                        alt={liveTitle || "Recette"}
-                        className="w-56 h-56 object-cover rounded-3xl shadow-2xl shadow-orange-500/20 ring-1 ring-white/40"
-                      />
-                    ) : (
-                      <motion.div
-                        key="loader"
-                        initial={{ opacity: 0 }}
-                        animate={{ opacity: 1 }}
-                        exit={{ opacity: 0 }}
-                      >
-                        <CookingLoader size="lg" />
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
-                </div>
-
-                {/* Titre live (apparaît dès que le stream le révèle) */}
-                <AnimatePresence mode="wait">
-                  {liveTitle ? (
-                    <motion.h2
-                      key="title"
-                      initial={{ opacity: 0, y: 10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      className="text-2xl font-semibold text-center max-w-xs"
+              {/* Chips préférences actives */}
+              {prefChips.length > 0 && (
+                <motion.div
+                  className="mt-5 flex flex-wrap gap-2 justify-center"
+                  initial={{ opacity: 0 }}
+                  animate={{ opacity: 1 }}
+                  transition={{ delay: 0.3 }}
+                >
+                  {prefChips.map((chip) => (
+                    <Badge
+                      key={chip}
+                      variant="secondary"
+                      className="bg-white/70 dark:bg-slate-800/70 backdrop-blur-sm border border-border/60 text-foreground/80 rounded-full px-3"
                     >
-                      {liveTitle}
-                    </motion.h2>
+                      {chip}
+                    </Badge>
+                  ))}
+                  <Link to="/profile">
+                    <Badge
+                      variant="outline"
+                      className="rounded-full px-3 cursor-pointer hover:bg-muted transition-colors"
+                    >
+                      Modifier
+                    </Badge>
+                  </Link>
+                </motion.div>
+              )}
+
+              {/* Gros bouton microphone */}
+              <div className="relative mt-12 mb-6 flex items-center justify-center">
+                {/* Ondes concentriques qui pulsent */}
+                {[0, 1, 2].map((i) => (
+                  <motion.div
+                    key={i}
+                    className="absolute rounded-full border-2 border-orange-300/40 dark:border-orange-700/40"
+                    style={{ width: 140 + i * 40, height: 140 + i * 40 }}
+                    animate={{
+                      scale: [1, 1.15, 1],
+                      opacity: [0.6, 0, 0.6],
+                    }}
+                    transition={{
+                      duration: 2.5,
+                      repeat: Infinity,
+                      delay: i * 0.6,
+                      ease: "easeOut",
+                    }}
+                  />
+                ))}
+
+                {/* Le bouton lui-même */}
+                <motion.button
+                  type="button"
+                  onClick={handleStartRecording}
+                  whileHover={{ scale: 1.04 }}
+                  whileTap={{ scale: 0.94 }}
+                  className="relative z-10 h-28 w-28 md:h-32 md:w-32 rounded-full bg-gradient-to-br from-orange-500 via-orange-500 to-amber-500 text-white shadow-2xl shadow-orange-500/40 ring-4 ring-white/80 dark:ring-slate-900/80 flex items-center justify-center transition-shadow hover:shadow-orange-500/60 focus-visible:outline-none focus-visible:ring-offset-4 focus-visible:ring-orange-500"
+                  aria-label="Commencer l'enregistrement"
+                >
+                  <Mic className="h-12 w-12 md:h-14 md:w-14" strokeWidth={1.8} />
+                </motion.button>
+              </div>
+
+              <p className="text-sm text-muted-foreground">
+                Appuie pour parler
+                <kbd className="ml-2 hidden md:inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground">
+                  Espace
+                </kbd>
+              </p>
+
+              {/* Astuces en rotation */}
+              <motion.div
+                className="mt-12 max-w-md w-full rounded-2xl bg-white/60 dark:bg-slate-900/60 backdrop-blur-sm border border-border/50 p-5"
+                initial={{ opacity: 0, y: 12 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.4 }}
+              >
+                <div className="flex items-start gap-3">
+                  <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/50 text-amber-700 dark:text-amber-300">
+                    <Lightbulb className="h-4 w-4" />
+                  </div>
+                  <div className="flex-1 min-h-[2.5rem]">
+                    <p className="text-xs font-medium text-amber-700 dark:text-amber-300 mb-1">
+                      Astuce du chef
+                    </p>
+                    <AnimatePresence mode="wait">
+                      <motion.p
+                        key={tipIndex}
+                        initial={{ opacity: 0, y: 6 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        exit={{ opacity: 0, y: -6 }}
+                        transition={{ duration: 0.3 }}
+                        className="text-sm text-foreground/80 leading-relaxed"
+                      >
+                        {tips[tipIndex]}
+                      </motion.p>
+                    </AnimatePresence>
+                  </div>
+                </div>
+              </motion.div>
+            </motion.div>
+          )}
+
+          {/* ================================================================= */}
+          {/* RECORDING — en train d'enregistrer */}
+          {/* ================================================================= */}
+          {pageState === "recording" && (
+            <motion.div
+              key="recording"
+              initial={{ opacity: 0, scale: 0.98 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0, scale: 0.98 }}
+              transition={{ duration: 0.3 }}
+              className="flex flex-col items-center text-center pt-8"
+            >
+              <div className="flex items-center gap-2 mb-2">
+                <motion.div
+                  className="h-2.5 w-2.5 rounded-full bg-red-500"
+                  animate={{ opacity: [1, 0.3, 1] }}
+                  transition={{ duration: 1.2, repeat: Infinity }}
+                />
+                <span className="text-sm font-medium text-red-600 dark:text-red-400 uppercase tracking-wider">
+                  Enregistrement
+                </span>
+              </div>
+
+              <div className="text-6xl md:text-7xl font-mono font-bold tabular-nums my-6">
+                {formatTime(recordingTime)}
+              </div>
+
+              {/* Waveform animée (synthétique) */}
+              <div className="flex items-end justify-center gap-1.5 h-20 mb-10 mt-2">
+                {Array.from({ length: 20 }).map((_, i) => (
+                  <motion.div
+                    key={i}
+                    className="w-1.5 rounded-full bg-gradient-to-t from-orange-400 to-amber-400"
+                    animate={{
+                      height: [
+                        `${15 + Math.random() * 20}%`,
+                        `${40 + Math.random() * 60}%`,
+                        `${15 + Math.random() * 20}%`,
+                      ],
+                    }}
+                    transition={{
+                      duration: 0.8 + Math.random() * 0.6,
+                      repeat: Infinity,
+                      ease: "easeInOut",
+                      delay: i * 0.04,
+                    }}
+                  />
+                ))}
+              </div>
+
+              {/* Bouton stop */}
+              <motion.button
+                type="button"
+                onClick={handleStopRecording}
+                whileHover={{ scale: 1.04 }}
+                whileTap={{ scale: 0.94 }}
+                className="h-20 w-20 rounded-full bg-red-500 hover:bg-red-600 text-white shadow-xl shadow-red-500/40 flex items-center justify-center transition-colors ring-4 ring-white/80 dark:ring-slate-900/80 focus-visible:outline-none focus-visible:ring-offset-4 focus-visible:ring-red-500"
+                aria-label="Arrêter l'enregistrement"
+              >
+                <Square className="h-8 w-8 fill-current" />
+              </motion.button>
+
+              <p className="mt-4 text-sm text-muted-foreground">
+                Appuie pour arrêter
+                <kbd className="ml-2 hidden md:inline-flex items-center rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium">
+                  Espace
+                </kbd>
+              </p>
+            </motion.div>
+          )}
+
+          {/* ================================================================= */}
+          {/* REVIEW — écoute + validation */}
+          {/* ================================================================= */}
+          {pageState === "review" && audioFile && audioUrl && (
+            <motion.div
+              key="review"
+              initial={{ opacity: 0, y: 12 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, y: -12 }}
+              transition={{ duration: 0.35 }}
+              className="flex flex-col items-center pt-4"
+            >
+              <motion.div
+                className="flex items-center gap-2 mb-3 text-emerald-600 dark:text-emerald-400"
+                initial={{ scale: 0 }}
+                animate={{ scale: 1 }}
+                transition={{ type: "spring", stiffness: 260, damping: 20 }}
+              >
+                <div className="h-8 w-8 rounded-full bg-emerald-100 dark:bg-emerald-950/60 flex items-center justify-center">
+                  <Check className="h-5 w-5" strokeWidth={3} />
+                </div>
+                <span className="text-sm font-medium">Enregistrement terminé</span>
+              </motion.div>
+
+              <h2 className="text-2xl md:text-3xl font-semibold tracking-tight mb-1">
+                Tout est bon ?
+              </h2>
+              <p className="text-sm text-muted-foreground mb-8 text-center max-w-md">
+                Écoute ton enregistrement avant de lancer la génération.
+              </p>
+
+              {/* Card lecteur audio */}
+              <div className="w-full max-w-md rounded-2xl bg-white/80 dark:bg-slate-900/80 backdrop-blur-sm border border-border/60 p-5 shadow-sm">
+                <div className="flex items-center gap-4">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      const audio = document.getElementById("review-audio") as HTMLAudioElement | null
+                      if (!audio) return
+                      if (isPlaying) {
+                        audio.pause()
+                      } else {
+                        audio.play()
+                      }
+                    }}
+                    className="h-12 w-12 shrink-0 rounded-full bg-gradient-to-br from-orange-500 to-amber-500 text-white shadow-md flex items-center justify-center hover:shadow-lg hover:scale-105 transition-all"
+                    aria-label={isPlaying ? "Mettre en pause" : "Lire"}
+                  >
+                    {isPlaying ? (
+                      <Pause className="h-5 w-5" />
+                    ) : (
+                      <Play className="h-5 w-5 ml-0.5" />
+                    )}
+                  </button>
+
+                  {/* Mini-waveform statique */}
+                  <div className="flex-1 flex items-center justify-between gap-0.5 h-8">
+                    {Array.from({ length: 32 }).map((_, i) => {
+                      const h = 20 + Math.sin(i * 0.7) * 30 + Math.cos(i * 0.3) * 15
+                      return (
+                        <div
+                          key={i}
+                          className="w-1 rounded-full bg-orange-300/60 dark:bg-orange-700/60"
+                          style={{ height: `${Math.max(15, Math.min(100, h))}%` }}
+                        />
+                      )
+                    })}
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={handleResetRecording}
+                    className="h-9 w-9 shrink-0 rounded-full text-muted-foreground hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-950/30 transition-colors flex items-center justify-center"
+                    aria-label="Supprimer l'enregistrement"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+
+                <audio
+                  id="review-audio"
+                  src={audioUrl}
+                  onPlay={() => setIsPlaying(true)}
+                  onPause={() => setIsPlaying(false)}
+                  onEnded={() => setIsPlaying(false)}
+                  className="hidden"
+                />
+
+                <div className="mt-3 text-[11px] text-muted-foreground text-right">
+                  {(audioFile.size / 1024).toFixed(0)} KB
+                </div>
+              </div>
+
+              {/* Actions */}
+              <div className="w-full max-w-md mt-6 flex flex-col sm:flex-row gap-3">
+                <Button
+                  variant="outline"
+                  size="lg"
+                  className="flex-1 rounded-full"
+                  onClick={handleResetRecording}
+                >
+                  Recommencer
+                </Button>
+                <Button
+                  size="lg"
+                  onClick={handleSubmit}
+                  className="flex-1 rounded-full bg-gradient-to-r from-orange-500 to-amber-500 hover:from-orange-600 hover:to-amber-600 text-white shadow-lg shadow-orange-500/25 hover:shadow-orange-500/40 transition-all group"
+                >
+                  <ChefHat className="mr-2 h-5 w-5 transition-transform group-hover:rotate-[-8deg]" />
+                  Créer ma recette
+                </Button>
+              </div>
+            </motion.div>
+          )}
+
+          {/* ================================================================= */}
+          {/* PROCESSING — génération en cours (streaming) */}
+          {/* ================================================================= */}
+          {pageState === "processing" && (
+            <motion.div
+              key="processing"
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              exit={{ opacity: 0 }}
+              className="flex flex-col items-center text-center pt-4"
+            >
+              {/* Image en cours de génération ou finale */}
+              <div className="relative w-60 h-60 md:w-72 md:h-72 mb-8 flex items-center justify-center">
+                {/* Halo derrière l'image */}
+                <div className="absolute inset-0 -z-10 bg-gradient-to-br from-orange-300/50 via-amber-300/40 to-yellow-200/30 rounded-full blur-3xl animate-pulse" />
+
+                <AnimatePresence mode="wait">
+                  {liveImageUrl ? (
+                    <motion.img
+                      key="image"
+                      initial={{ opacity: 0, scale: 0.85, filter: "blur(20px)" }}
+                      animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
+                      transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
+                      src={liveImageUrl}
+                      alt={liveTitle || "Recette"}
+                      className="w-60 h-60 md:w-72 md:h-72 object-cover rounded-3xl shadow-2xl shadow-orange-500/30 ring-1 ring-white/60"
+                    />
                   ) : (
-                    <motion.h2
-                      key="default"
+                    <motion.div
+                      key="loader"
                       initial={{ opacity: 0 }}
                       animate={{ opacity: 1 }}
                       exit={{ opacity: 0 }}
-                      className="text-xl font-medium text-center"
                     >
-                      {stepLabels[progressStep] || "Préparation en cours…"}
-                    </motion.h2>
+                      <CookingLoader size="lg" />
+                    </motion.div>
                   )}
                 </AnimatePresence>
+              </div>
 
-                {/* Description live */}
-                <AnimatePresence>
-                  {liveDescription && (
-                    <motion.p
-                      initial={{ opacity: 0, y: 10 }}
-                      animate={{ opacity: 1, y: 0 }}
-                      className="text-sm text-muted-foreground text-center mt-3 max-w-sm italic"
-                    >
-                      « {liveDescription} »
-                    </motion.p>
-                  )}
-                </AnimatePresence>
-
-                {/* Transcription live (quand pas encore de titre) */}
-                <AnimatePresence>
-                  {liveTranscription && !liveTitle && (
-                    <motion.p
-                      initial={{ opacity: 0 }}
-                      animate={{ opacity: 1 }}
-                      className="text-xs text-muted-foreground text-center mt-4 max-w-xs"
-                    >
-                      <span className="font-medium">Ingrédients détectés : </span>
-                      {liveTranscription}
-                    </motion.p>
-                  )}
-                </AnimatePresence>
-
-                {/* Libellé d'étape quand un titre est déjà affiché */}
-                {liveTitle && progressStep && (
-                  <p className="text-xs text-muted-foreground mt-4 animate-pulse">
-                    {stepLabels[progressStep] || "En cours…"}
-                  </p>
+              {/* Titre live */}
+              <AnimatePresence mode="wait">
+                {liveTitle ? (
+                  <motion.h2
+                    key="title"
+                    initial={{ opacity: 0, y: 12 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="text-2xl md:text-3xl font-semibold text-center max-w-md tracking-tight"
+                  >
+                    {liveTitle}
+                  </motion.h2>
+                ) : (
+                  <motion.h2
+                    key="default"
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    exit={{ opacity: 0 }}
+                    className="text-xl md:text-2xl font-medium text-center text-muted-foreground"
+                  >
+                    {stepLabels[progressStep] || "Préparation en cours…"}
+                  </motion.h2>
                 )}
-              </motion.div>
-            ) : isRecording ? (
-              <motion.div
-                key="recording"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="flex-1 flex flex-col"
-              >
-                <Card className="flex-1 flex flex-col items-center justify-center p-6 border-2 border-red-400 dark:border-red-700 bg-gradient-to-b from-red-50 to-red-100 dark:from-red-950/30 dark:to-red-900/20">
-                  <motion.div
-                    animate={{ scale: [1, 1.1, 1] }}
-                    transition={{ repeat: Number.POSITIVE_INFINITY, duration: 1.5 }}
-                    className="relative"
+              </AnimatePresence>
+
+              {/* Description live */}
+              <AnimatePresence>
+                {liveDescription && (
+                  <motion.p
+                    initial={{ opacity: 0, y: 10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    className="text-sm md:text-base text-muted-foreground text-center mt-4 max-w-md italic"
                   >
-                    <div className="absolute inset-0 bg-red-400/20 dark:bg-red-700/30 rounded-full animate-ping" />
-                    <div className="relative bg-red-500 dark:bg-red-600 text-white p-6 rounded-full">
-                      <Mic className="h-8 w-8" />
-                    </div>
-                  </motion.div>
+                    « {liveDescription} »
+                  </motion.p>
+                )}
+              </AnimatePresence>
 
-                  <div className="mt-8 text-center">
-                    <div className="text-3xl font-mono font-bold text-red-600 dark:text-red-400">
-                      {formatTime(recordingTime)}
-                    </div>
-                    <p className="mt-2 text-sm text-red-700 dark:text-red-300 animate-pulse">
-                      Enregistrement en cours...
-                    </p>
-                  </div>
-
-                  <div className="mt-8 w-full max-w-xs">
-                    <Button variant="destructive" className="w-full" size="lg" onClick={handleStopRecording}>
-                      Arrêter l'enregistrement
-                    </Button>
-                  </div>
-                </Card>
-
-                <div className="mt-4">
-                  <Button variant="outline" className="w-full text-sm" onClick={() => setShowTips(!showTips)}>
-                    {showTips ? "Masquer les conseils" : "Afficher les conseils"}
-                  </Button>
-
-                  <AnimatePresence>
-                    {showTips && (
-                      <motion.div
-                        initial={{ opacity: 0, height: 0 }}
-                        animate={{ opacity: 1, height: "auto" }}
-                        exit={{ opacity: 0, height: 0 }}
-                        className="overflow-hidden"
-                      >
-                        <div className="mt-3 p-3 bg-amber-100/50 dark:bg-amber-900/20 rounded-lg text-sm">
-                          <h3 className="font-medium mb-2">Conseils pour un bon enregistrement :</h3>
-                          <ul className="space-y-2 list-disc list-inside text-muted-foreground">
-                            <li>Parlez clairement et lentement</li>
-                            <li>Listez un ingrédient à la fois</li>
-                            <li>Précisez les quantités si possible</li>
-                            <li>Mentionnez vos préférences culinaires</li>
-                          </ul>
-                        </div>
-                      </motion.div>
-                    )}
-                  </AnimatePresence>
-                </div>
-              </motion.div>
-            ) : audioFile ? (
-              <motion.div
-                key="review"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="flex-1 flex flex-col"
-              >
-                <Card className="flex-1 p-5 border-2 border-green-200 dark:border-green-800 bg-gradient-to-b from-green-50 to-green-100/50 dark:from-green-950/30 dark:to-green-900/20">
-                  <div className="flex items-center justify-between mb-4">
-                    <div className="flex items-center gap-2">
-                      <div className="bg-green-100 dark:bg-green-800 p-2 rounded-full">
-                        <Check className="h-5 w-5 text-green-600 dark:text-green-300" />
-                      </div>
-                      <h3 className="font-medium text-green-700 dark:text-green-300">Enregistrement prêt !</h3>
-                    </div>
-                    <Button
-                      variant="ghost"
-                      size="icon"
-                      className="h-8 w-8 text-red-500 hover:text-red-700 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-full"
-                      onClick={handleResetRecording}
-                    >
-                      <Trash2 className="h-4 w-4" />
-                      <span className="sr-only">Supprimer</span>
-                    </Button>
-                  </div>
-
-                  <div className="bg-white/80 dark:bg-slate-800/50 rounded-lg p-3 mb-4">
-                    <audio controls className="w-full h-10">
-                      <source src={URL.createObjectURL(audioFile)} type={audioFile.type} />
-                      Votre navigateur ne supporte pas la lecture audio.
-                    </audio>
-                    <p className="text-xs text-muted-foreground mt-2">
-                      {audioFile.name} ({(audioFile.size / 1024).toFixed(1)} KB)
-                    </p>
-                  </div>
-
-                  <div className="mt-auto">
-                    <Button className="w-full" size="lg" onClick={handleSubmit}>
-                      <ChefHat className="h-5 w-5 mr-2" />
-                      Créer ma recette
-                    </Button>
-                  </div>
-                </Card>
-
-                <div className="mt-4 text-center">
-                  <Button variant="outline" onClick={handleResetRecording}>
-                    Nouvel enregistrement
-                  </Button>
-                </div>
-              </motion.div>
-            ) : (
-              <motion.div
-                key="start"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: 1 }}
-                exit={{ opacity: 0 }}
-                className="flex-1 flex flex-col"
-              >
-                <div className="text-center mb-6">
-                  <h2 className="text-xl font-medium">Qu'avez-vous dans votre frigo ?</h2>
-                  <p className="text-sm text-muted-foreground mt-2">
-                    Enregistrez les ingrédients que vous avez à disposition
-                  </p>
-                </div>
-
-                <Card
-                  className={cn(
-                    "flex-1 flex flex-col items-center justify-center p-6",
-                    "bg-gradient-to-b from-amber-100/50 to-orange-100/30",
-                    "dark:from-amber-900/20 dark:to-orange-900/10",
-                    "border-2 border-dashed border-amber-200 dark:border-amber-800",
-                  )}
-                >
+              {/* Transcription live (avant le titre) */}
+              <AnimatePresence>
+                {liveTranscription && !liveTitle && (
                   <motion.div
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
-                    className="cursor-pointer"
-                    onClick={handleStartRecording}
+                    initial={{ opacity: 0 }}
+                    animate={{ opacity: 1 }}
+                    className="text-xs text-muted-foreground text-center mt-6 max-w-md px-4 py-2 rounded-full bg-white/60 dark:bg-slate-800/60 backdrop-blur-sm border border-border/40"
                   >
-                    <div className="bg-gradient-to-br from-amber-400 to-orange-500 dark:from-amber-500 dark:to-orange-600 p-6 rounded-full text-white shadow-lg">
-                      <Mic className="h-10 w-10" />
-                    </div>
+                    <span className="font-medium text-foreground/70">J'ai compris : </span>
+                    {liveTranscription}
                   </motion.div>
+                )}
+              </AnimatePresence>
 
-                  <h3 className="mt-6 text-lg font-medium">Appuyez pour commencer</h3>
-                  <p className="text-sm text-muted-foreground text-center mt-2 max-w-xs">
-                    Listez les ingrédients que vous avez à disposition et notre IA créera une recette adaptée
-                  </p>
-
-                  <Button className="mt-8" size="lg" onClick={handleStartRecording}>
-                    Commencer l'enregistrement
-                  </Button>
-                </Card>
-
-                <div className="mt-6 bg-amber-100/50 dark:bg-amber-900/20 rounded-lg p-4">
-                  <h3 className="font-medium mb-2 flex items-center gap-2">
-                    <Info className="h-4 w-4" />
-                    Comment ça marche ?
-                  </h3>
-                  <ol className="space-y-2 list-decimal list-inside text-sm text-muted-foreground">
-                    <li>Enregistrez les ingrédients que vous avez</li>
-                    <li>Notre IA analyse votre enregistrement</li>
-                    <li>Recevez une recette personnalisée</li>
-                    <li>Cuisinez et régalez-vous !</li>
-                  </ol>
-                </div>
-              </motion.div>
-            )}
-          </AnimatePresence>
-        </div>
-      </main>
+              {/* Label étape quand titre déjà présent */}
+              {liveTitle && progressStep && (
+                <p className="text-xs text-muted-foreground mt-6 animate-pulse">
+                  {stepLabels[progressStep] || "En cours…"}
+                </p>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
     </div>
   )
 }
-