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

Merged

kyuno merged 1 commit from feat/recipe-form-sticky-actions into main

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

kyuno commented

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

Owner

Contexte

Closes #132 (puce 5 de #3).

Le formulaire de recette (/recettes/nouvelle, /recettes/:id/modifier) est long ; jusqu'ici son unique bouton Enregistrer vivait en fin de flux (.recipe-form__actions { margin-top: var(--space-xl) }), et aucun bouton Annuler n'existait.

Changements

recipes.scss — nouveau modificateur .recipe-form__actions--sticky : position: sticky; bottom: 0 contre .app-content (le seul conteneur scrollable, AppLayout.scss), fond opaque + bordure haute, alignement à droite. bottom: 0 ancre la barre à la limite de padding de .app-content (petit décalage assumé, correct sur tous les breakpoints sans surcharge par viewport). Nouveau style .recipe-form__cancel (bouton secondaire, même langage que .recipe-detail-panel__delete-confirm).
RecipeFormPage.tsx — bouton « Annuler » (type="button") + handleCancel → /recettes/:id en édition, /recettes en création. Pas de garde « abandonner ? » : action explicite sur un formulaire sans autosave, cohérent avec le reste de l'app (seule la suppression, irréversible, est confirmée). RecipeImportForm n'est volontairement pas touché (il s'embarque aussi dans RecipePickerDialog qui a déjà son propre pied de page — à traiter à part si besoin).
i18n — recipes.form.cancel.
Cypress (recipe-form.feature) — 3 scénarios : la barre reste ancrée en bas après défilement vers le haut d'un formulaire plus haut que la fenêtre (assertion sur getBoundingClientRect) ; « Annuler » revient au catalogue en création ; « Annuler » revient à la recette en édition.

Vérification locale

pnpm lint ✓ · pnpm build ✓ · cypress run : recipe-form.feature 8/8, régression recipes.feature + recipes.cy.ts + layout.cy.ts 28/28. Mocha non concerné (aucun changement API).

🤖 Generated with Claude Code

## Contexte `Closes #132` (puce 5 de #3). Le formulaire de recette (`/recettes/nouvelle`, `/recettes/:id/modifier`) est long ; jusqu'ici son unique bouton **Enregistrer** vivait en fin de flux (`.recipe-form__actions { margin-top: var(--space-xl) }`), et **aucun bouton Annuler** n'existait. ## Changements - **`recipes.scss`** — nouveau modificateur `.recipe-form__actions--sticky` : `position: sticky; bottom: 0` contre `.app-content` (le seul conteneur scrollable, `AppLayout.scss`), fond opaque + bordure haute, alignement à droite. `bottom: 0` ancre la barre à la limite de padding de `.app-content` (petit décalage assumé, correct sur tous les breakpoints sans surcharge par viewport). Nouveau style `.recipe-form__cancel` (bouton secondaire, même langage que `.recipe-detail-panel__delete-confirm`). - **`RecipeFormPage.tsx`** — bouton « Annuler » (`type="button"`) + `handleCancel` → `/recettes/:id` en édition, `/recettes` en création. Pas de garde « abandonner ? » : action explicite sur un formulaire sans autosave, cohérent avec le reste de l'app (seule la suppression, irréversible, est confirmée). `RecipeImportForm` n'est volontairement pas touché (il s'embarque aussi dans `RecipePickerDialog` qui a déjà son propre pied de page — à traiter à part si besoin). - **i18n** — `recipes.form.cancel`. - **Cypress** (`recipe-form.feature`) — 3 scénarios : la barre reste ancrée en bas après défilement vers le haut d'un formulaire plus haut que la fenêtre (assertion sur `getBoundingClientRect`) ; « Annuler » revient au catalogue en création ; « Annuler » revient à la recette en édition. ## Vérification locale `pnpm lint` ✓ · `pnpm build` ✓ · `cypress run` : `recipe-form.feature` 8/8, régression `recipes.feature` + `recipes.cy.ts` + `layout.cy.ts` 28/28. Mocha non concerné (aucun changement API). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-09 13:42:39 +02:00

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

CI / lint (push) Successful in 56s

Details

CI / build (push) Successful in 1m29s

Details

CI / intent-service-test (push) Successful in 3m53s

Details

CI / e2e (push) Successful in 8m26s

Details

CI / test (push) Successful in 17m27s

Details

CI / build-android (push) Has been skipped

Details

8ae06f10c9

`.recipe-form__actions` gagne un modificateur `--sticky`
(`position: sticky; bottom: 0`) : sur une recette longue (beaucoup
d'ingrédients/étapes) la barre reste visible sans redescendre. Ajoute un
bouton « Annuler » secondaire qui revient à la recette éditée
(`/recettes/:id`) ou au catalogue (`/recettes`) pour une création — sans
garde « abandonner les modifications ? », cohérent avec les autres
annulations de l'app (seule la suppression, irréversible, est confirmée).

Tests Cypress : la barre reste ancrée en bas après défilement vers le haut
d'un formulaire plus haut que la fenêtre ; « Annuler » navigue correctement
en création comme en édition.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>