Repository navigation
Construire la bottom sheet de résultats et les cartes de parcours (E-04) #28
Copy link
Copy link
Closed
Labels
area:mobileapps/mobileapps/mobileprio:P0BloquantBloquantstatus:readySpec complète, prêt à coderSpec complète, prêt à codertype:featureNouvelle fonctionnalitéNouvelle fonctionnalité
Milestone
Description
Contexte
Epic : #8
Prérequis : #125, thème NativeWind généré depuis tokens.json et composants de base
Maquette : E-04 planche 1 · validée le 2026-09-22
La planche 1 fige la sheet à trois crans, la sélection carte ↔ sheet et la card. Le tri n'est plus dans l'en-tête de la sheet mais dans « Voir tout » (#62).
Ecrans · E-04 · D-001
Comportement attendu
- Composant
RouteCardréutilisable (sheet et « Voir tout ») avec note moyenne, pastille Signature bleue et pastille Premium à côté de la note (D-014). @gorhom/bottom-sheetà trois crans (poignée, mi-hauteur, plein) ; en-tête « À proximité · N parcours · Zone » (le tri est dans « Voir tout », Construire la liste complète « Voir tout » d'une section de la sheet (E-04) #62).- Carte de résultat : photo, chip d'ambiance principale, titre, quartier, ligne durée · budget · distance (si position) · étapes, badge Vérifié / À vérifier, bouton favori (désactivé jusqu'à v0.3, affiche la feuille de connexion plus tard).
- Interaction : marqueur sélectionné → carte surlignée et sheet au premier cran ; défilement de la liste → carte recentrée doucement sur l'élément visible.
- Liste virtualisée (
FlashList), imagesexpo-imageavec placeholder. - Événements
result_card_viewed,route_opened(navigation vers une fiche vide en attendant v0.3). - Mouvement (D-030, Direction-Artistique › Mouvement,
mappings.motion) : M-04, sheet à crans avecanimationConfigsidentique sur iOS et Android et vibration de cran ; M-01, card vers fiche avec Construire la fiche parcours (E-05) #37. La card qui s'agrandit en fiche (M-01) se code à la main : les transitions partagées de Reanimated sont expérimentales. Repli accepté : la fiche monte du bas (M-02). - Budget (D-032, Orchestration) : « ≈ 25 € par pers. », jamais « env. » ; somme des coûts arrondie à 5 €, « ≈ 5 € » pour un petit montant, « Gratuit » si elle est nulle ; plus de fourchette. Lecteur d'écran : « environ 25 euros par personne ».
Critères d'acceptation
- Les trois crans fonctionnent au geste et au tap sur la poignée
- Sélection croisée marqueur ↔ carte vérifiée dans les deux sens
- 60 fps au défilement de 50 cartes sur appareil réel
- États couverts et conformes à Ecrans › E-04 : chargement, vide, erreur, sans position
- Hors connexion : le cache persisté est affiché avec « Résultats du … » horodaté ; sans cache, « Pas de connexion » et un bouton Réessayer
- Accessibilité (Direction-Artistique) : texte système à 150 % sans troncature des textes essentiels, contrastes AA texte et 3:1 composants, libellés VoiceOver sur tous les contrôles
- Pastilles sur la photo de la card plafonnées à 1,3 dans leur composant de base de
apps/mobile/src/ui:Badgepour Vérifié, Signature, Premium et Nouveau ; pour la note (« ★ 4,8 »), un composant de base dont le texte est en<Text isDense>. AucunmaxFontSizeMultiplierposé dans l'écran - Tap sur un parcours Premium sans abonnement conforme à Ecrans › E-04 (maquette « tap-premium ») : carte recadrée sans tracé ni étapes, départ en pastille encre à couronne dorée, tooltip « Parcours Premium » et « N étapes en X h » sans nom d'étape ; « Voir plus » et « Voir le parcours » ouvrent la fiche verrouillée ; lecteur d'écran « {titre}, parcours Premium, N étapes en X heures »
- Pastille Signature bleue (bleu encre #3A4FA8 sur bleu pâle #E4ECFA) et pastille Premium à côté de la note, sur les cards comme dans le résumé
- Couleurs, tailles, icônes et pastilles lues dans tokens.json (
mappings.placeCategories,mappings.filterIcons,mappings.badges), aucune valeur en dur (D-015) - Point d'ambiance lu dans
mappings.moodDotsde tokens.json, par la clé d'ambiance. Le code suittokens.json, pas les maquettes, qui gardent l'ancien vert du point Nature jusqu'au prochain réexport (D-016) - Pastille « Nouveau » à la place de la note tant que le parcours n'a aucun avis, et sceau certifié après le prénom sur la ligne créateur (D-023)
- Icônes d'interface lues par leur nom dans
mappings.uiIconsde tokens.json, aucune icône choisie en dur (D-025) - Durées, courbes et vibrations lues dans
mappings.motionde tokens.json, aucune valeur en dur ; « Réduire les animations » respecté (D-030) - La card s'agrandit en fiche sans transition partagée de Reanimated ; repli accepté, la fiche qui monte du bas
- Budget affiché « ≈ 25 € par pers. », « ≈ 5 € » pour un petit montant ou « Gratuit » quand la somme est nulle, sans fourchette, et lu « environ 25 euros par personne »
Reactions are currently unavailable
Metadata
Metadata
Assignees
Labels
area:mobileapps/mobileapps/mobileprio:P0BloquantBloquantstatus:readySpec complète, prêt à coderSpec complète, prêt à codertype:featureNouvelle fonctionnalitéNouvelle fonctionnalité
Activity
PaulThiberville commentedon Sep 25, 2026
🔨 Implémenté dans #152 (empilée sur #146). Sheet à trois crans,
RouteCard, sélection croisée, états et hors connexion vérifiés sur simulateur iOS. Restent ouverts : 60 fps sur appareil réel, vérification Android (émulateur occupé), sceau certifié (donnée absente de la card, signalé sur l'Inbox #4).