[Liste de courses] État « acheté » cochable sur les articles #109

New issue

Closed

opened 2026-09-08 00:49:13 +02:00 by kyuno · 0 comments

kyuno commented

2026-09-08 00:49:13 +02:00

Owner

Résumé

Permettre de cocher un article de la liste de courses comme « acheté » (utile en magasin, notamment au doigt sur mobile). C'est une évolution, pas un correctif : la page est aujourd'hui volontairement en lecture seule.

Contexte (trouvé en auditant le code, pas supposé)

apps/web/src/pages/shopping-list/ShoppingListPage.tsx — aucune case à cocher, aucun handler. Chaque ligne est un <li className="shopping-list__item"> avec 3 <span> (icône / nom / quantité), zéro onClick/onTouch*/role/tabIndex.
Choix de design explicite et documenté à 3 endroits : JSDoc de ShoppingListPage.tsx (lignes 21–30, « Deliberately simple by design — a read-only list »), specs/frontend-architecture.md §Liste de courses, et le commit 7d1a69c (PR #90) qui a spécifiquement ré-audité ce point et conclu « la page n'a pas de case à cocher, c'est volontaire ».
apps/web/src/api/client.ts : seule méthode liste de courses = getShoppingListForWeek(date) (GET /shopping-list?date=…). Aucun endpoint de mutation.
Source de vérité actuelle = le planning lui-même, pas une todo-list séparée à garder synchro.

Contenu attendu

Décision de design à acter : ajouter un état « acheté » par article. À cadrer :

Persistance : localStorage par semaine (motif CookingProgressStore / apps/web/src/pages/cooking-session/cooking-progress.ts, clé batchcooking:cookingProgress:<weekStart>) vs. état serveur (nouveau champ / table + endpoint). Le localStorage par semaine est cohérent avec l'existant et évite un aller-retour back.
Clé d'article : ingredient.id + unit.id (déjà la key de la ligne).
Réinitialisation : au changement de semaine / regénération de la liste.
UI : réutiliser CheckboxOption (apps/web/src/components/ui/Checkbox.tsx), style « barré » quand coché ; cible tactile ≥ 44 px sous le breakpoint phone.

Mettre à jour la JSDoc de ShoppingListPage.tsx et specs/frontend-architecture.md (le « lecture seule volontaire » n'est plus vrai).

Couverture : composant (CheckboxOption déjà couvert) + e2e Gherkin « cocher un article » dans shopping-list.feature + spec layout pour la cible tactile.

Dépendances

Revient sur la décision de #90 (liste volontairement en lecture seule).

## Résumé Permettre de cocher un article de la liste de courses comme « acheté » (utile en magasin, notamment au doigt sur mobile). **C'est une évolution, pas un correctif** : la page est aujourd'hui volontairement en lecture seule. ## Contexte (trouvé en auditant le code, pas supposé) - `apps/web/src/pages/shopping-list/ShoppingListPage.tsx` — **aucune case à cocher, aucun handler**. Chaque ligne est un `<li className="shopping-list__item">` avec 3 `<span>` (icône / nom / quantité), zéro `onClick`/`onTouch*`/`role`/`tabIndex`. - Choix de design explicite et documenté à 3 endroits : JSDoc de `ShoppingListPage.tsx` (lignes 21–30, « Deliberately simple by design — a read-only list »), `specs/frontend-architecture.md` §Liste de courses, et le commit `7d1a69c` (PR #90) qui a spécifiquement ré-audité ce point et conclu « la page n'a pas de case à cocher, c'est volontaire ». - `apps/web/src/api/client.ts` : seule méthode liste de courses = `getShoppingListForWeek(date)` (`GET /shopping-list?date=…`). Aucun endpoint de mutation. - Source de vérité actuelle = le planning lui-même, pas une todo-list séparée à garder synchro. ## Contenu attendu Décision de design à acter : ajouter un état « acheté » **par article**. À cadrer : - **Persistance** : `localStorage` par semaine (motif `CookingProgressStore` / `apps/web/src/pages/cooking-session/cooking-progress.ts`, clé `batchcooking:cookingProgress:<weekStart>`) vs. état serveur (nouveau champ / table + endpoint). Le `localStorage` par semaine est cohérent avec l'existant et évite un aller-retour back. - **Clé d'article** : `ingredient.id` + `unit.id` (déjà la `key` de la ligne). - **Réinitialisation** : au changement de semaine / regénération de la liste. - **UI** : réutiliser `CheckboxOption` (`apps/web/src/components/ui/Checkbox.tsx`), style « barré » quand coché ; cible tactile ≥ 44 px sous le breakpoint phone. Mettre à jour la JSDoc de `ShoppingListPage.tsx` et `specs/frontend-architecture.md` (le « lecture seule volontaire » n'est plus vrai). Couverture : composant (`CheckboxOption` déjà couvert) + e2e Gherkin « cocher un article » dans `shopping-list.feature` + spec layout pour la cible tactile. ## Dépendances Revient sur la décision de #90 (liste volontairement en lecture seule).