feat(layout): socle UI mobile - nav, feuille et dialogs plein écran #92

Merged

kyuno merged 1 commit from feat/mobile-ui-shell into main

2026-09-07 12:21:28 +02:00

kyuno commented

2026-09-07 12:04:05 +02:00

Owner

Closes #91 — fondation du chantier "UI mobile & tablette".

Ce que ça change

Jusqu'ici, toute adaptation mobile de ce repo était du CSS pur sur le
même DOM (aucun composant ne branchait son JSX selon la largeur ou la
plateforme — vérifié en amont, zéro précédent). Ce ticket introduit le
premier vrai branchement, plus les primitifs que les 8 tickets suivants du
chantier vont réutiliser.

useIsMobileViewport() (apps/web/src/lib/) — point de vérité
unique, basé sur matchMedia, live (réagit à un resize/une rotation).
_breakpoints.scss — $phone/$tablet Sass + mixins
phone/phone-up/tablet-down, remplaçant les nombres magiques
640/1024 répétés en dur dans 6 fichiers. Les deux occurrences de 860px
(landing hero, page admin des tutoriels) sont délibérément laissées
telles quelles — un collapse de grille 2 colonnes sans rapport avec le
breakpoint tablette du catalogue recettes ; les unifier aurait changé un
comportement visuel réel sans raison.
useNativeDialogBehavior — mécanique (showModal/event
close/clic extérieur) extraite de Dialog.tsx, partagée avec le
nouveau BottomSheet.tsx (feuille mobile pleine largeur, même
fondation <dialog> natif que Dialog, juste ancrée en bas).
AppLayout — sur téléphone, la sidebar n'est plus reflow-ée en CSS
en barre horizontale (l'ancien traitement) : elle est remplacée par une
vraie barre d'onglets basse (Planning/Recettes/Liste de courses + Plus).
Le "Plus" ouvre une BottomSheet combinant Paramètres et Compte (deux
dropdowns flottants séparés côté desktop → un seul point d'entrée
mobile, IA plus simple, un seul emplacement d'onglet sur une barre déjà
serrée).
dialog.scss — vrai plein écran (bord à bord, sans arrondi) sous le
breakpoint phone, au lieu d'une marge simplement réduite comme avant.

Vérification

pnpm --filter web exec tsc -b --force + biome check — propres.
pnpm --filter web build — build de prod propre (Sass compile, tous les
@use résolvent).
Suite Cypress e2e complète : 140/140 et composants : 63/63.
layout.cy.ts a été réécrit sur le point précis que ce PR change (le
test de l'ancienne "barre horizontale sous 640px" n'a plus de sens, ce
traitement n'existe plus) — nouvelle couverture : la sidebar n'existe
plus du tout dans le DOM sur téléphone, la barre basse a ses 4 items
avec labels lisibles, le "Plus" ouvre la feuille avec le bon contenu
(Paramètres + salutation + déconnexion), et la fermeture (bouton dédié)
ramène bien à l'état fermé.
Vérifié visuellement dans le Browser pane à 375×812 (landing page,
confirmant qu'aucune régression visuelle n'est venue de la migration des
breakpoints).

🤖 Generated with Claude Code

Closes #91 — fondation du chantier "UI mobile & tablette". ## Ce que ça change Jusqu'ici, **toute** adaptation mobile de ce repo était du CSS pur sur le même DOM (aucun composant ne branchait son JSX selon la largeur ou la plateforme — vérifié en amont, zéro précédent). Ce ticket introduit le premier vrai branchement, plus les primitifs que les 8 tickets suivants du chantier vont réutiliser. - **`useIsMobileViewport()`** (`apps/web/src/lib/`) — point de vérité unique, basé sur `matchMedia`, live (réagit à un resize/une rotation). - **`_breakpoints.scss`** — `$phone`/`$tablet` Sass + mixins `phone`/`phone-up`/`tablet-down`, remplaçant les nombres magiques 640/1024 répétés en dur dans 6 fichiers. Les deux occurrences de 860px (landing hero, page admin des tutoriels) sont **délibérément laissées telles quelles** — un collapse de grille 2 colonnes sans rapport avec le breakpoint tablette du catalogue recettes ; les unifier aurait changé un comportement visuel réel sans raison. - **`useNativeDialogBehavior`** — mécanique (`showModal`/event `close`/clic extérieur) extraite de `Dialog.tsx`, partagée avec le nouveau **`BottomSheet.tsx`** (feuille mobile pleine largeur, même fondation `<dialog>` natif que `Dialog`, juste ancrée en bas). - **`AppLayout`** — sur téléphone, la sidebar n'est plus reflow-ée en CSS en barre horizontale (l'ancien traitement) : elle est remplacée par une vraie barre d'onglets basse (Planning/Recettes/Liste de courses + Plus). Le "Plus" ouvre une `BottomSheet` combinant Paramètres et Compte (deux dropdowns flottants séparés côté desktop → un seul point d'entrée mobile, IA plus simple, un seul emplacement d'onglet sur une barre déjà serrée). - **`dialog.scss`** — vrai plein écran (bord à bord, sans arrondi) sous le breakpoint phone, au lieu d'une marge simplement réduite comme avant. ## Vérification - `pnpm --filter web exec tsc -b --force` + `biome check` — propres. - `pnpm --filter web build` — build de prod propre (Sass compile, tous les `@use` résolvent). - Suite Cypress **e2e complète : 140/140** et **composants : 63/63**. `layout.cy.ts` a été réécrit sur le point précis que ce PR change (le test de l'ancienne "barre horizontale sous 640px" n'a plus de sens, ce traitement n'existe plus) — nouvelle couverture : la sidebar n'existe plus du tout dans le DOM sur téléphone, la barre basse a ses 4 items avec labels lisibles, le "Plus" ouvre la feuille avec le bon contenu (Paramètres + salutation + déconnexion), et la fermeture (bouton dédié) ramène bien à l'état fermé. - Vérifié visuellement dans le Browser pane à 375×812 (landing page, confirmant qu'aucune régression visuelle n'est venue de la migration des breakpoints). 🤖 Generated with [Claude Code](https://claude.com/claude-code)

kyuno added 1 commit 2026-09-07 12:04:06 +02:00

feat(layout): socle UI mobile - nav, feuille et dialogs plein ecran

CI / lint (push) Successful in 51s

Details

CI / build (push) Successful in 2m10s

Details

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

Details

CI / e2e (push) Successful in 8m26s

Details

CI / test (push) Successful in 16m33s

Details

CI / build-android (push) Has been skipped

Details

0fd4928efc

Fondation du chantier UI mobile & tablette (#91) : jusqu'ici, toute
adaptation mobile de ce repo etait du CSS pur sur le meme DOM (aucun
composant ne branchait son JSX selon la largeur/plateforme). Ce ticket
introduit le premier vrai branchement, et les primitifs que les 8
tickets suivants du chantier reutiliseront.

- useIsMobileViewport() (apps/web/src/lib/) : point de verite unique,
  base sur matchMedia, live (reagit a un resize/une rotation).
- _breakpoints.scss : $phone/$tablet Sass + mixins phone/phone-up/
  tablet-down, remplacant les nombres magiques 640/1024 repetes en dur
  dans 6 fichiers (AppLayout, landing, recipes, recipe-picker-dialog,
  planning-page, dialog, tours-page). Les deux occurrences de 860px
  (landing hero, tours-page) sont deliberement laissees telles quelles
  - un collapse de grille 2 colonnes qui n'a rien a voir avec le
  breakpoint tablette du catalogue recettes, les unifier aurait change
  un comportement visuel reel sans raison.
- useNativeDialogBehavior : mecanique (showModal/close event/clic
  exterieur) extraite de Dialog.tsx, partagee avec le nouveau
  BottomSheet.tsx (feuille mobile plein-largeur, meme fondation
  <dialog> natif que Dialog, juste ancree en bas).
- AppLayout : sur telephone, la sidebar n'est plus reflow-ee en CSS en
  barre horizontale (l'ancien traitement) - elle est remplacee par une
  vraie barre d'onglets basse (Planning/Recettes/Liste de courses +
  Plus), le "Plus" ouvrant une BottomSheet combinant Parametres et
  Compte (deux dropdowns flottants separes cote desktop -> un seul
  point d'entree mobile, IA plus simple, un seul emplacement d'onglet).
- dialog.scss : vrai plein-ecran (bord a bord, sans arrondi) sous le
  breakpoint phone au lieu d'une marge simplement reduite.

Verifie en local : pnpm --filter web exec tsc -b --force, biome check,
pnpm --filter web build, suite Cypress e2e complete (140/140) et
composants (63/63) - y compris layout.cy.ts, reecrit pour tester la
nouvelle barre basse (l'ancien test de la barre horizontale n'a plus
de sens, ce traitement n'existe plus).

Closes #91

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