# Panier Recettes Application React mobile-first en français pour rechercher des produits, ajouter automatiquement les ingrédients de recettes à une liste de courses cochable, et créer ses propres recettes avec assistance GenMB. ## Masterplan - Centraliser la préparation des courses : ajout manuel depuis l’accueil, ajout groupé depuis recettes, gestion en magasin via liste cochable. - Servir les utilisateurs sans compte : persistance locale invitée, puis bascule vers un scope utilisateur GenMB à la connexion. - Enrichir l’expérience avec GenMB sans dépendance dure : auth, recherche, DB, produits et IA texte sont optionnels et doivent échouer silencieusement côté rendu initial. - Adapter les suggestions au mode alimentaire global : standard, végétarien, vegan, sans gluten, éco-budget. - Rester rapide et utilisable sur mobile : navigation basse, gros boutons, feedback toast, interface française. ## Tech Stack & Architecture - **Application statique sans build step** : `index.html` charge Tailwind CDN, `styles/main.css`, les SDK GenMB injectés, puis `src/main.js` en `type="module"`. - **React 19.2 via ESM CDN** : imports depuis `https://esm.sh`. Il n’y a pas de `package.json`, bundler, transpilation ou JSX natif. - **HTM au lieu de JSX** : `src/jsx.js` exporte `html = htm.bind(createElement)`. Tous les composants rendent avec ``html`...` ``. Ne pas introduire de JSX sans ajouter une toolchain. - **Routing** : `src/App.js` utilise `HashRouter` de `react-router-dom@7.13.0`. - `/` → `src/pages/Home.js` - `/recettes` → `src/pages/Recipes.js` - `/liste` → `src/pages/ShoppingList.js` - `/creer` → `src/pages/CreateRecipe.js` - `/profil` → `src/pages/Profile.js` - `*` → `src/pages/NotFound.js` - **Montage** : `src/main.js` rend `` dans `#root`. - **Layout global** : `src/pages/Layout.js` rend `Header`, ``, `BottomNav`. `Header` porte la navigation desktop, auth, thème et mode alimentaire ; `BottomNav` est mobile-only (`md:hidden`). - **State management** : `src/store/useGroceryStore.js` centralise liste de courses, recettes, favoris, mode alimentaire et persistance profilée. Les mutations métier doivent passer par ce store, pas par un état local de page. - **Providers** : `src/mainProviders.js` - `ThemeProvider` persiste `panier-recettes-theme` et applique `.dark` sur ``. - `ToastProvider` expose `useToast()` ; auto-dismiss après `4200ms`. - **Données offline** : `src/data/catalog.js` fournit `productCatalog`, recettes initiales et helpers. C’est le fallback principal quand GenMB Search/Products/DB est indisponible. - **UI** : Tailwind utilities + variables CSS HSL dans `styles/main.css`, icônes `lucide-react`. ### Intégrations GenMB Les SDK sont injectés dans `index.html` sous `window.genmb`. Tout usage doit rester défensif : ```js if (!window.genmb?.search) return; ``` Le rendu initial ne doit jamais dépendre d’un service GenMB. - **Auth** : utilisée dans `src/App.js`, `src/components/Header.js`, `src/pages/Profile.js`. - Méthodes attendues : `ready`, `getUser`, `onAuthStateChange`, `signIn`, `sendMagicLink`, `signInWithPassword`, `signUp`, `verifySignUp`, `requestPasswordReset`, `confirmPasswordReset`, `signOut`. - `src/App.js` appelle `loadProfileData(user.id)` après `auth.ready()` ; sinon `loadProfileData('guest')`. - Les changements auth rechargent le scope de données via `onAuthStateChange`, ignorés avant la fin du `ready()` initial. - **Search** : `SearchIndexer` dans `src/App.js` indexe `productCatalog` et les recettes courantes avec `window.genmb.search.index(...)`. Les erreurs sont silencieuses. - **Relational DB** : `DatabaseRecipeSync` dans `src/App.js` lit `window.genmb.db.recipes.list({ sort: 'createdAt:desc', limit: 25 })`, normalise via `normalizeDbRecipe(record)`, puis `mergeRecipes`. - **Products** : utilisé par la recherche produit, notamment dans `src/pages/Home.js`, avec fallback catalogue local. - **Text AI** : utilisé dans `src/pages/CreateRecipe.js` pour assister/générer une recette. Les helpers exportés `repairTruncatedJson()` et `robustJsonParse()` protègent contre les réponses IA tronquées, entourées de Markdown ou JSON imparfait. ## File Structure ```txt index.html # Shell HTML, Tailwind CDN, styles, SDK GenMB injectés, charge src/main.js styles/main.css # Variables HSL light/dark, ombres, safe-area mobile, styles globaux src/main.js # Point d’entrée React, monte Providers + App src/jsx.js # Binding HTM ; source unique pour html`...` src/mainProviders.js # ThemeProvider, ToastProvider, hooks useTheme/useToast src/App.js # Router, chargement profil auth, indexation Search, sync recettes DB GenMB src/data/catalog.js # Catalogue produits offline, recettes initiales, helpers locaux src/store/useGroceryStore.js # Store applicatif : recettes, liste courses, favoris, dietMode, persistance par profil src/components/Button.js # Bouton partagé avec variants primary/secondary/outline/destructive + loading src/components/Header.js # Header sticky, navigation desktop, auth display, thème, menu mode alimentaire src/components/BottomNav.js # Navigation basse mobile 5 onglets src/pages/Layout.js # Structure Header + Outlet + BottomNav src/pages/Home.js # Accueil/recherche produits, ajout rapide à la liste src/pages/Recipes.js # Catalogue recettes, filtres/favoris, ajout ingrédients à la liste src/pages/ShoppingList.js # Liste cochable, édition/suppression/état acheté src/pages/CreateRecipe.js # Formulaire création recette + assistance IA + publication éventuelle DB src/pages/Profile.js # Connexion/inscription/récupération auth GenMB, profil et données utilisateur src/pages/NotFound.js # 404 thématisée “allée introuvable” CLAUDE.md # Documentation projet existante à maintenir avec ce contenu ``` ## Key Features ### Recherche et ajout de produits - L’accueil permet de chercher des produits dans le catalogue local et, si disponible, via GenMB Products/Search. - Les résultats doivent rester utiles hors ligne/SDK indisponible grâce à `productCatalog`. - Un produit ajouté devient un item de liste avec au minimum : - `id` - `name` - `quantity` - `unit` - `category` - `checked` - métadonnées optionnelles : image, productId, notes, recipeId. ### Recettes prêtes à ajouter - `Recipes.js` affiche les recettes initiales de `src/data/catalog.js` + recettes utilisateur + recettes communautaires GenMB fusionnées. - L’action “ajouter la recette” ajoute tous les ingrédients à la liste de courses. - Les recettes peuvent être favorites ; les favoris doivent rester dans `useGroceryStore.js`. - Une recette normalisée suit cette forme : ```js { id, name, description, servings, time, difficulty, image, sourceName, sourceUrl, ingredients: [{ name, quantity, unit?, category? }], instructions: [string] } ``` ### Création de recette personnalisée - `src/pages/CreateRecipe.js` gère un formulaire manuel avec ingrédients dynamiques. - `emptyIngredient()` initialise `{ name: '', quantity: '', category: 'Épicerie' }`. - `coverPresets` fournit les images de couverture rapides. - L’IA texte GenMB peut proposer une recette ; parser la réponse uniquement via `robustJsonParse()` pour éviter les crashes sur JSON tronqué ou Markdown. - Si la DB GenMB est disponible, la recette peut être publiée/synchronisée ; sinon elle reste locale. ### Liste de courses - `ShoppingList.js` affiche les items groupables par catégories, cochables en magasin. - Cocher un produit signifie acheté, sans suppression automatique. - Les actions destructives doivent passer par le store et donner un feedback toast. - La liste doit être confortable sur mobile : grandes cibles tactiles, contraste clair, `safe-bottom` pour éviter la bottom nav. ### Profil et authentification - `Profile.js` expose Google, magic link, email/password, inscription OTP, reset password selon les méthodes GenMB disponibles. - Sans utilisateur connecté, l’app utilise le scope `guest`. - À la connexion/déconnexion, `src/App.js` recharge les données du profil via `loadProfileData`. - Ne jamais supposer que `window.genmb.auth` existe. ### Tables GenMB connues Tables disponibles côté relational DB : `products`, `productImages`, `categories`, `productCategories`, `stores`, `productPrices`, `recipes`, `recipeCategories`, `recipeIngredients`, `recipeSteps`, `shoppingLists`, `shoppingListItems`, `favoriteRecipes`, `favoriteProducts`, `searchLogs`, `appSettings`. Actuellement, le code consomme surtout : - `recipes.list({ sort: 'createdAt:desc', limit: 25 })` dans `DatabaseRecipeSync`. - Auth session/user dans `App`, `Header`, `Profile`. - Search index dans `SearchIndexer`. - Products/Search/AI selon disponibilité dans les pages. ## Design Guidelines - **Langue** : interface en français, ton chaleureux autour des courses/cuisine. - **Style** : mobile-first, cartes arrondies, ombres douces, header sticky translucide, bottom nav fixe sur mobile. - **Couleurs** : utiliser exclusivement les variables HSL de `styles/main.css` via Tailwind arbitraire : - `hsl(var(--background))`, `--foreground`, `--card`, `--popover` - `--primary`, `--secondary`, `--muted`, `--border`, `--ring` - `--destructive`, `--success` - **Thème sombre** : contrôlé par `.dark` sur `` ; ne pas coder des couleurs hardcodées incompatibles. - **Typographie** : classes Tailwind standard, titres `font-semibold tracking-tight`, textes secondaires `text-[hsl(var(--muted-foreground))]`. - **Accessibilité** : - boutons minimum `min-h-12` pour tactile. - focus visible avec `ring-[hsl(var(--ring))]`. - toasts avec `aria-live`. - navigation avec labels explicites. - **Responsive** : - desktop : nav dans `Header`. - mobile : `BottomNav` 5 onglets, contenu avec marge/safe area via classes CSS de `styles/main.css`. ## App Flow 1. **Ouverture** - `src/main.js` monte l’app. - `App` lance `auth.ready()` si disponible. - Le store charge `guest` ou `user.id`. - `SearchIndexer` indexe produits/recettes si Search est disponible. - `DatabaseRecipeSync` fusionne jusqu’à 25 recettes communautaires si DB disponible. 2. **Ajouter un produit** - Aller sur `/`. - Rechercher un produit. - Ajouter à la liste. - Toast de confirmation. - Voir/modifier/cocher dans `/liste`. 3. **Ajouter une recette** - Aller sur `/recettes`. - Parcourir/favoriser une recette. - Ajouter la recette : ses ingrédients deviennent des items de courses. - Les doublons doivent être gérés dans le store si une logique de fusion existe ; ne pas dupliquer cette logique dans la page. 4. **Créer une recette** - Aller sur `/creer`. - Saisir nom, image, ingrédients, instructions ou demander l’assistance IA. - Parser les réponses IA avec `robustJsonParse()`. - Sauvegarder via le store, puis naviguer vers les recettes/la liste selon comportement existant. 5. **Se connecter** - Aller sur `/profil`. - Utiliser une méthode GenMB. - Après changement auth, `App` recharge le scope utilisateur. - Edge case important : `onAuthStateChange` peut émettre avant `ready()` ; le code ignore ces transitions jusqu’à initialisation. 6. **Changer mode alimentaire** - Depuis `Header`, choisir standard/végétarien/vegan/sans gluten/éco-budget. - `setDietMode` persiste dans le store. - Toast explicite. - Les suggestions IA et filtres doivent lire `dietMode` depuis `useGroceryStore`. ## Conventions - **Modules ESM CDN uniquement** : importer React, Router, Lucide depuis `https://esm.sh` comme les fichiers existants. - **Pas de JSX** : utiliser : ```js import { html } from '../jsx.js'; export function Example() { return html`

...

`; } ``` - **Composants** : exports nommés (`export function Header()`), fichiers en PascalCase pour composants/pages. - **Store first** : toute donnée métier durable va dans `src/store/useGroceryStore.js`. L’état local est réservé aux formulaires, modales, menus et loading UI. - **GenMB defensive first** : vérifier chaque capability avant appel ; erreurs non critiques silencieuses ou toastées uniquement si l’utilisateur a déclenché l’action. - **Persistance** : respecter le scope profilé existant (`guest` vs `user.id`). Ne pas écrire directement dans `localStorage` pour recettes/liste si une action du store existe. - **Styles** : privilégier Tailwind utilities et variables CSS. Réutiliser `Button.js` pour les actions principales. - **Toasts** : utiliser `useToast().addToast({ title, message, type })`; `type: 'error'` uniquement pour erreurs visibles utilisateur. - **Ajouter une page** : 1. Créer `src/pages/NouvellePage.js`. 2. Importer dans `src/App.js` et ajouter une ``. 3. Ajouter le lien dans `Header.js` et, si page principale mobile, dans `BottomNav.js`. 4. Garder le rendu dans `Layout.js` via ``. - **Ajouter une feature recette/liste** : 1. Ajouter l’action et la persistance dans `useGroceryStore.js`. 2. Appeler l’action depuis la page. 3. Ajouter toast + état loading côté UI. 4. Si GenMB est utilisé, prévoir fallback local et ne jamais bloquer le premier rendu. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.