Page d'édition de recette : boutons Enregistrer / Annuler toujours visibles en pied de page #132

New issue

Closed

opened 2026-09-09 13:19:49 +02:00 by kyuno · 1 comment

kyuno commented

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

Owner

Contexte

Origine : ticket #3, puce 5 — « Dans la page d'édition des recettes, faire en sorte que les boutons sauvegarder/annuler soient toujours visibles en pied de page ».

RecipeFormPage (/recettes/nouvelle, /recettes/:id/modifier) est un formulaire long (nom, description, photo, portions, visibilité, régimes, liste d'ingrédients, liste d'étapes). Aujourd'hui :

Un seul bouton, type="submit", dans .recipe-form__actions tout en bas du flux (RecipeFormPage.tsx:349-353).
.recipe-form__actions { margin-top: var(--space-xl); } — aucun position: sticky (recipes.scss:1383-1385).
Aucun bouton Annuler n'existe (ni ici ni dans RecipeImportForm, RecipeImportForm.tsx:502-508).

Sur une recette avec beaucoup d'étapes, il faut scroller jusqu'en bas pour enregistrer, et il n'y a pas de sortie explicite.

Comportement souhaité

Une barre d'actions collante en bas de la zone de contenu, toujours visible pendant le défilement, contenant :

Enregistrer — le submit actuel, mêmes états isSubmitting/!canSubmit.
Annuler — navigate(-1) ou retour vers /recettes/:id (édition) / /recettes (création) ; avec window.confirm si le formulaire est dirty (à trancher).

Fichiers à toucher

apps/web/src/features/recipes/recipes.scss — .recipe-form__actions : position: sticky; bottom: 0; + fond var(--color-surface) + bordure/ombre haute + z-index, layout flex pour 2 boutons. Style du bouton Annuler secondaire (réutiliser le langage .recipe-detail-panel__delete-confirm button:not(...)). Ajuster le padding-bottom de .recipe-form pour que la barre ne masque pas le dernier champ.
RecipeFormPage.tsx — <button type="button"> Annuler dans .recipe-form__actions ; handler handleCancel (+ suivi dirty si retenu). Le hint incompleteIngredientsHint (RecipeFormPage.tsx:345-347) reste au-dessus de la barre.
RecipeImportForm.tsx — même barre pour cohérence (partage .recipe-form / .recipe-form__actions) ; « Annuler » via une nouvelle prop onCancel (le contexte diffère : route ImportRecipePage vs embarqué dans RecipePickerDialog).
Vérifier le rendu dans RecipePickerDialog — une barre sticky dans un <dialog> scrollable doit coller au conteneur, pas au viewport.
i18n : recipes.form.cancel, recipes.form.cancelConfirm.

Découpage proposé

Une PR. Petit chantier, surtout SCSS + un bouton.

Tests (obligatoires, cf. `specs/dev-conventions.md`)

Cypress mode layout (recipe-form.feature / spec dédié) : la barre reste visible après scroll jusqu'aux étapes ; clic Annuler revient à la page précédente sans enregistrer ; clic Enregistrer inchangé. Sur mobile (resize_window) la barre ne recouvre pas le contenu.
Non-régression du parcours création/édition existant.

Documentation à mettre à jour

specs/frontend-architecture.md — mention de la barre d'actions collante du formulaire recette, si la section décrit ce formulaire.

Points restant à trancher en revue

Annuler avec formulaire dirty : window.confirm natif, ou retour immédiat sans garde ? Un vrai suivi dirty implique de comparer l'état à sa valeur au chargement.
Barre collante en bas seule, ou aussi une action rapide en haut ? (bas seul = suffisant et demandé.)
Inclure RecipeImportForm dans ce ticket ou le limiter à RecipeFormPage (la puce dit « page d'édition des recettes ») ? (inclure = cohérence visuelle, faible coût.)

🤖 Filed by Claude Code

## Contexte Origine : ticket #3, puce 5 — *« Dans la page d'édition des recettes, faire en sorte que les boutons sauvegarder/annuler soient toujours visibles en pied de page »*. `RecipeFormPage` (`/recettes/nouvelle`, `/recettes/:id/modifier`) est un formulaire long (nom, description, photo, portions, visibilité, régimes, liste d'ingrédients, liste d'étapes). Aujourd'hui : - Un **seul** bouton, `type="submit"`, dans `.recipe-form__actions` tout en bas du flux ([RecipeFormPage.tsx:349-353](apps/web/src/pages/recipes/RecipeFormPage.tsx#L349-L353)). - `.recipe-form__actions { margin-top: var(--space-xl); }` — aucun `position: sticky` ([recipes.scss:1383-1385](apps/web/src/features/recipes/recipes.scss#L1383-L1385)). - **Aucun bouton Annuler** n'existe (ni ici ni dans `RecipeImportForm`, [RecipeImportForm.tsx:502-508](apps/web/src/features/recipes/sources/RecipeImportForm.tsx#L502-L508)). Sur une recette avec beaucoup d'étapes, il faut scroller jusqu'en bas pour enregistrer, et il n'y a pas de sortie explicite. ## Comportement souhaité Une barre d'actions **collante en bas** de la zone de contenu, toujours visible pendant le défilement, contenant : - **Enregistrer** — le `submit` actuel, mêmes états `isSubmitting`/`!canSubmit`. - **Annuler** — `navigate(-1)` ou retour vers `/recettes/:id` (édition) / `/recettes` (création) ; avec `window.confirm` si le formulaire est *dirty* (à trancher). ## Fichiers à toucher - **`apps/web/src/features/recipes/recipes.scss`** — `.recipe-form__actions` : `position: sticky; bottom: 0;` + fond `var(--color-surface)` + bordure/ombre haute + z-index, layout flex pour 2 boutons. Style du bouton Annuler secondaire (réutiliser le langage `.recipe-detail-panel__delete-confirm button:not(...)`). Ajuster le `padding-bottom` de `.recipe-form` pour que la barre ne masque pas le dernier champ. - **`RecipeFormPage.tsx`** — `<button type="button">` Annuler dans `.recipe-form__actions` ; handler `handleCancel` (+ suivi *dirty* si retenu). Le hint `incompleteIngredientsHint` ([RecipeFormPage.tsx:345-347](apps/web/src/pages/recipes/RecipeFormPage.tsx#L345-L347)) reste au-dessus de la barre. - **`RecipeImportForm.tsx`** — même barre pour cohérence (partage `.recipe-form` / `.recipe-form__actions`) ; « Annuler » via une nouvelle prop `onCancel` (le contexte diffère : route `ImportRecipePage` vs embarqué dans `RecipePickerDialog`). - Vérifier le rendu dans `RecipePickerDialog` — une barre sticky dans un `<dialog>` scrollable doit coller au conteneur, pas au viewport. - i18n : `recipes.form.cancel`, `recipes.form.cancelConfirm`. ## Découpage proposé Une PR. Petit chantier, surtout SCSS + un bouton. ## Tests (obligatoires, cf. `specs/dev-conventions.md`) - **Cypress mode layout** (`recipe-form.feature` / spec dédié) : la barre reste visible après scroll jusqu'aux étapes ; clic Annuler revient à la page précédente sans enregistrer ; clic Enregistrer inchangé. Sur mobile (`resize_window`) la barre ne recouvre pas le contenu. - Non-régression du parcours création/édition existant. ## Documentation à mettre à jour - `specs/frontend-architecture.md` — mention de la barre d'actions collante du formulaire recette, si la section décrit ce formulaire. ## Points restant à trancher en revue - Annuler avec formulaire *dirty* : `window.confirm` natif, ou retour immédiat sans garde ? Un vrai suivi *dirty* implique de comparer l'état à sa valeur au chargement. - Barre collante en bas seule, ou aussi une action rapide en haut ? (bas seul = suffisant et demandé.) - Inclure `RecipeImportForm` dans ce ticket ou le limiter à `RecipeFormPage` (la puce dit « page d'édition des recettes ») ? (inclure = cohérence visuelle, faible coût.) --- 🤖 Filed by [Claude Code](https://claude.com/claude-code)

kyuno added the

enhancement

planned

labels 2026-09-09 13:19:49 +02:00

kyuno referenced this issue

2026-09-09 13:20:41 +02:00

Améliorations diverses #3

kyuno added the

High

label 2026-09-09 13:24:07 +02:00

kyuno referenced this issue

2026-09-09 13:42:39 +02:00

feat(recipes): barre Enregistrer/Annuler collée en pied du formulaire (#132) #135

kyuno referenced this issue from a commit

2026-09-09 14:00:25 +02:00

Merge pull request 'feat(recipes): barre Enregistrer/Annuler collée en pied du formulaire (#132)' (#135) from feat/recipe-form-sticky-actions into main

kyuno commented

2026-09-09 20:46:46 +02:00

Author

Owner

Implémenté par la PR #135 (feat/recipe-form-sticky-actions), mergée dans main (c3560ec). .recipe-form__actions--sticky (position: sticky; bottom: 0) + bouton Annuler (handleCancel) dans RecipeFormPage. Vérifié présent sur main.

Implémenté par la PR #135 (`feat/recipe-form-sticky-actions`), mergée dans `main` (`c3560ec`). `.recipe-form__actions--sticky` (`position: sticky; bottom: 0`) + bouton **Annuler** (`handleCancel`) dans `RecipeFormPage`. Vérifié présent sur `main`.

kyuno closed this issue

2026-09-09 20:47:15 +02:00

kyuno referenced this issue

2026-09-09 21:24:52 +02:00

chore(release): prépare la v0.2.3 #142