Onboarding : carte de l'étape « Saisir un premier budget » (Budget) #400

New issue

Closed

opened 2026-10-07 23:50:08 +00:00 by maximus · 0 comments

maximus commented

2026-10-07 23:50:08 +00:00

Owner

Milestone planned-2026-10-06-onboarding-parcours-guide, issue 5/6. Phase 2 de l'onboarding (#391) : bandeau de démarrage sur chaque page, et cartes d'étape avec mise en évidence. La spec (spec-decisions-onboarding-parcours-guide.md et spec-plan-onboarding-parcours-guide.md) est locale et ignorée par git : ce corps est auto-suffisant.

La carte de l'étape 6 guide jusqu'à une première saisie dans la grille du budget. La grille s'ouvre repliée et seules les lignes feuilles sont modifiables. La carte met donc en évidence « Tout déplier », puis la cellule du mois courant.

À faire

Fonction pure budgetOnboardingTarget(visibleRows, hasGroups, monthIdx), exportée et testée. Elle rend :
- { kind: "cell", categoryId, monthIdx } pour la cellule du mois courant de la première ligne feuille visible ;
- sinon { kind: "expandAll" } s'il existe des groupes ;
- sinon null.
BudgetTable reçoit onboardingTarget?: boolean et onOnboardingTargetChange?: (kind: "cell" | "expandAll" | null) => void. Il pose data-onboarding-target et data-onboarding-highlight selon la fonction :
- sur le bouton de cellule du mois (BudgetTable.tsx:320-326) ;
- ou sur « Tout déplier » (:404-413).
Une seule cible à la fois. Il remonte le kind par le rappel quand il change. L'état replié vit dans BudgetTable (useCollapsibleGroups, clé budget-grid-expanded), d'où le rappel.
budgetCardModel({ target }) : texte collapsed pour expandAll, texte flat pour une cellule. BudgetPage rend OnboardingStepCard en premier enfant, avant son en-tête. CARD_PAGES reçoit /budget. En édition Gratuite, la page n'est jamais montée (RequireFeature, App.tsx:123-125), donc aucune carte Budget n'apparaît.
CHANGELOG FR et EN (Added).

Textes (FR / EN)

Clé	FR	EN
`onboarding.card.budget.collapsed`	Cliquez {{expand}} pour afficher vos catégories, puis cliquez sur un mois et saisissez un montant. Entrée enregistre ; Tab enregistre et passe au mois suivant.	Click {{expand}} to show your categories, then click a month and enter an amount. Enter saves; Tab saves and moves to the next month.
`onboarding.card.budget.flat`	Cliquez sur un mois et saisissez un montant. Entrée enregistre ; Tab enregistre et passe au mois suivant.	Click a month and enter an amount. Enter saves; Tab saves and moves to the next month.

{{expand}} : reports.collapse.expandAll. Comportement clavier vérifié : Entrée ou la sortie du champ enregistrent (BudgetTable.tsx:101-106), et Tab enregistre puis passe au mois suivant (:123-138).

Fichiers concernés

src/components/budget/BudgetTable.tsx (+ test de budgetOnboardingTarget)
src/pages/BudgetPage.tsx
src/utils/onboardingPath.ts (+ test : budgetCardModel, CARD_PAGES)
src/i18n/locales/fr.json, en.json ; CHANGELOG.md, CHANGELOG.fr.md

Depends on

#399

Critères d'acceptation

budgetOnboardingTarget (tests) : groupes repliés, première feuille visible, sans groupes, aucune ligne.
budgetCardModel : les deux textes.
Profil neuf en édition Base : la carte apparaît sur /budget et met en évidence « Tout déplier », puis la cellule. Un montant saisi coche l'étape en direct ; la carte reste, annonce « Fait. » et passe au mode fin.
Édition Gratuite : jamais de carte Budget, et le parcours se termine à 5/5.
FR et EN ; CHANGELOG FR et EN ; npm run build et npx vitest run verts.

Review caveats

Ne pas déplier la grille à la place de l'utilisateur (D12) : la carte guide, l'état replié mémorisé par profil reste le sien.
Tester la fonction pure plutôt que le rendu de BudgetTable, qui demanderait de simuler le stockage et un hook.

Décisions prises en planification

D12 : « Tout déplier » tant qu'aucune ligne modifiable n'est visible, puis la cellule du mois courant de la première catégorie modifiable.
D13 : une entrée de budget à 0 $ compte, comme aujourd'hui ; compteur inchangé.
D8 : un seul état masqué, la préférence onboarding_checklist_hidden par profil ; masquer le bandeau masque la liste, et le réaffichage depuis Paramètres → Utilisateurs rétablit tout.
Le fournisseur d'onboarding est le seul écrivain des préférences d'onboarding (hidden, étapes passées, initialisation).

Spec source

spec-plan-onboarding-parcours-guide.md (et spec-decisions-onboarding-parcours-guide.md)

Milestone `planned-2026-10-06-onboarding-parcours-guide`, issue 5/6. Phase 2 de l'onboarding (#391) : bandeau de démarrage sur chaque page, et cartes d'étape avec mise en évidence. La spec (`spec-decisions-onboarding-parcours-guide.md` et `spec-plan-onboarding-parcours-guide.md`) est locale et ignorée par git : ce corps est auto-suffisant. La carte de l'étape 6 guide jusqu'à une première saisie dans la grille du budget. La grille s'ouvre repliée et seules les lignes feuilles sont modifiables. La carte met donc en évidence « Tout déplier », puis la cellule du mois courant. ## À faire 1. **Fonction pure `budgetOnboardingTarget(visibleRows, hasGroups, monthIdx)`**, exportée et testée. Elle rend : - `{ kind: "cell", categoryId, monthIdx }` pour la cellule du mois courant de la première ligne **feuille visible** ; - sinon `{ kind: "expandAll" }` s'il existe des groupes ; - sinon `null`. 2. **`BudgetTable`** reçoit `onboardingTarget?: boolean` et `onOnboardingTargetChange?: (kind: "cell" | "expandAll" | null) => void`. Il pose `data-onboarding-target` et `data-onboarding-highlight` selon la fonction : - sur le bouton de cellule du mois (`BudgetTable.tsx:320-326`) ; - ou sur « Tout déplier » (`:404-413`). Une seule cible à la fois. Il remonte le `kind` par le rappel quand il change. L'état replié vit dans `BudgetTable` (`useCollapsibleGroups`, clé `budget-grid-expanded`), d'où le rappel. 3. **`budgetCardModel({ target })`** : texte `collapsed` pour `expandAll`, texte `flat` pour une cellule. `BudgetPage` rend `OnboardingStepCard` en premier enfant, avant son en-tête. `CARD_PAGES` reçoit `/budget`. En édition Gratuite, la page n'est jamais montée (`RequireFeature`, `App.tsx:123-125`), donc aucune carte Budget n'apparaît. 4. **CHANGELOG** FR et EN (Added). ## Textes (FR / EN) | Clé | FR | EN | |---|---|---| | `onboarding.card.budget.collapsed` | Cliquez {{expand}} pour afficher vos catégories, puis cliquez sur un mois et saisissez un montant. Entrée enregistre ; Tab enregistre et passe au mois suivant. | Click {{expand}} to show your categories, then click a month and enter an amount. Enter saves; Tab saves and moves to the next month. | | `onboarding.card.budget.flat` | Cliquez sur un mois et saisissez un montant. Entrée enregistre ; Tab enregistre et passe au mois suivant. | Click a month and enter an amount. Enter saves; Tab saves and moves to the next month. | `{{expand}}` : `reports.collapse.expandAll`. Comportement clavier vérifié : Entrée ou la sortie du champ enregistrent (`BudgetTable.tsx:101-106`), et Tab enregistre puis passe au mois suivant (`:123-138`). ## Fichiers concernés - src/components/budget/BudgetTable.tsx (+ test de `budgetOnboardingTarget`) - src/pages/BudgetPage.tsx - src/utils/onboardingPath.ts (+ test : `budgetCardModel`, `CARD_PAGES`) - src/i18n/locales/fr.json, en.json ; CHANGELOG.md, CHANGELOG.fr.md ## Depends on - #399 ## Critères d'acceptation - [ ] `budgetOnboardingTarget` (tests) : groupes repliés, première feuille visible, sans groupes, aucune ligne. - [ ] `budgetCardModel` : les deux textes. - [ ] Profil neuf en édition Base : la carte apparaît sur /budget et met en évidence « Tout déplier », puis la cellule. Un montant saisi coche l'étape en direct ; la carte reste, annonce « Fait. » et passe au mode fin. - [ ] Édition Gratuite : jamais de carte Budget, et le parcours se termine à 5/5. - [ ] FR et EN ; CHANGELOG FR et EN ; `npm run build` et `npx vitest run` verts. ## Review caveats - Ne pas déplier la grille à la place de l'utilisateur (D12) : la carte guide, l'état replié mémorisé par profil reste le sien. - Tester la fonction pure plutôt que le rendu de `BudgetTable`, qui demanderait de simuler le stockage et un hook. ## Décisions prises en planification - D12 : « Tout déplier » tant qu'aucune ligne modifiable n'est visible, puis la cellule du mois courant de la première catégorie modifiable. - D13 : une entrée de budget à 0 $ compte, comme aujourd'hui ; compteur inchangé. - D8 : un seul état masqué, la préférence `onboarding_checklist_hidden` par profil ; masquer le bandeau masque la liste, et le réaffichage depuis Paramètres → Utilisateurs rétablit tout. - Le fournisseur d'onboarding est le seul écrivain des préférences d'onboarding (`hidden`, étapes passées, initialisation). ## Spec source spec-plan-onboarding-parcours-guide.md (et spec-decisions-onboarding-parcours-guide.md)