Skip to content

Construire la bottom sheet de résultats et les cartes de parcours (E-04) #28

Closed

Description

@IlanAMG

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 RouteCard ré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), images expo-image avec 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 avec animationConfigs identique 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 : Badge pour Vérifié, Signature, Premium et Nouveau ; pour la note (« ★ 4,8 »), un composant de base dont le texte est en <Text isDense>. Aucun maxFontSizeMultiplier posé 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.moodDots de tokens.json, par la clé d'ambiance. Le code suit tokens.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.uiIcons de tokens.json, aucune icône choisie en dur (D-025)
  • Durées, courbes et vibrations lues dans mappings.motion de 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 »

Activity

  1. added this to the v0.2 milestone on Sep 21, 2026
  2. added
    type:featureNouvelle fonctionnalité
    status:readySpec complète, prêt à coder
    needs-designQuestion ou maquette à produire en mode DESIGN
    and removed
    status:readySpec complète, prêt à coder
    on Sep 21, 2026
  3. added
    status:readySpec complète, prêt à coder
    and removed
    needs-designQuestion ou maquette à produire en mode DESIGN
    on Sep 22, 2026
  4. PaulThiberville commented on Sep 25, 2026

    @PaulThiberville
    Collaborator

    🔨 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).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

      Milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions