Skip to content

Implémenter les chips rapides et le panneau de filtres complet (E-03) #29

Closed

Description

@IlanAMG

Contexte

Epic : #10
Prérequis : #125, thème NativeWind généré depuis tokens.json et composants de base ; #133, clé de budget high et libellés de budget et de durée dans packages/shared
Maquette : E-02 et E-03 planches 1 et 2 · validées le 2026-09-23
Filtres-et-Recherche · Ecrans · E-01, E-03 · D-001

Comportement attendu

  • Une seule rangée de chips défilantes de 36 px sous la recherche (D-010), état actif visible ; le bouton filtres est intégré à la pilule de recherche, avec le compteur de filtres actifs.
  • Libellés de budget en montants (Gratuit, Jusqu'à 25 €, 25 à 70 €, Plus de 70 €) et de durée en heures (Jusqu'à 2 h 30, 2 h 30 à 5 h, 5 à 12 h, Plus de 12 h), lus dans packages/shared. La clé de budget high (au lieu de premium) et ces libellés y sont posés par Passer la clé de budget premium à high et aligner les libellés de budget et de durée #133. « Premium » est réservé à l'abonnement, « Journée » n'est plus employé.
  • Une icône par valeur de filtre, sauf dans les groupes Budget et Durée.
  • Fermer le panneau sans appliquer restaure les filtres d'avant ouverture.
  • Panneau complet en bottom sheet plein écran : groupes Public, Budget, Durée, Déplacement, Ambiance, Conditions ; bouton « Voir N parcours » alimenté par /routes/search/count avec debounce 300 ms ; « Réinitialiser » ; zéro résultat → « Aucun parcours » et jusqu'à trois filtres à retirer, triés par nombre de parcours regagnés (comptage « tous les filtres sauf un », voir Exposer GET /routes/search et /count : bbox, filtres, tri, clusters #25).
  • Les filtres persistent pour la session (store discovery) et relancent la recherche sur la bbox courante à la validation.
  • Libellés depuis shared, jamais en dur.
  • Événements filters_applied (source), filters_no_results.
  • Mouvement (D-030, Direction-Artistique › Mouvement, mappings.motion) : M-05, sheet modale et voile de 0 à 40 % ; M-08, changements d'état des chips.

Critères d'acceptation

  • Une chip et le panneau modifient le même état (activer une chip se voit dans le panneau)
  • Le compteur reflète exactement le nombre de résultats après validation
  • Tests de rendu des chips et du panneau (RNTL)
  • Comptage indisponible : le bouton s'affiche sans nombre et le comptage est relancé au tap suivant sur une chip ; erreur seulement après 5 s d'attente
  • Hors connexion : les filtres s'appliquent au cache et aucune suggestion « Essayez de retirer » n'est proposée
  • La rangée d'actions du panneau est en flexWrap: 'wrap-reverse', le bouton principal en flexBasis: 220 ; à 150 % de texte, Réinitialiser passe sous le bouton sans troncature
  • Les chips sont plafonnées à maxFontSizeMultiplier={1.3}
  • Compteur de filtres actifs du bouton filtres : composant de base dans apps/mobile/src/ui, texte en <Text isDense> (plafond 1,3, mappings.accessibility.denseComponents) ; il reste rond, 26 px au plus à 150 %
  • Libellés et états VoiceOver conformes au tableau de contrôle de Ecrans › E-03
  • Couleurs, tailles, icônes et pastilles lues dans tokens.json (mappings.placeCategories, mappings.filterIcons, mappings.badges), aucune valeur en dur (D-015)
  • Chips et panneau affichent les libellés de budget et de durée de packages/shared livrés par Passer la clé de budget premium à high et aligner les libellés de budget et de durée #133, aucun libellé en dur ; le palier « Plus de 70 € » envoie budgets[]=high
  • 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)

Notes techniques

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 23, 2026
  4. IlanAMG commented on Sep 25, 2026

    @IlanAMG
    MemberAuthor

    D-050 (https://github.com/Inprogress-Agency/widoo-app/wiki/Design-Changelog) : les 5 ambiances sans famille (Romantique, Insolite, Instagrammable, Détente, Sportif) ont désormais leurs teintes de chip (tokens v19, mood--soft et mood--ink, mappings.moodDots[].chip).

  5. IlanAMG commented on Sep 25, 2026

    @IlanAMG
    MemberAuthor

    D-053 (https://github.com/Inprogress-Agency/widoo-app/wiki/Design-Changelog) : la chip « Gratuit » prend l'icône tag, lue dans filterIcons.budget (tokens v22, synchro dans #134), jamais en dur.

  6. PaulThiberville commented on Sep 28, 2026

    @PaulThiberville
    Collaborator

    🔨 Démarrage — plan :

    • branche issue/29-filters-panel, PR empilée sur chore(shared): renvoyer le budget de la card en somme des coûts #218 (base issue/170-route-budget-sum) ;
    • tokens : teinte de chip par ambiance générée depuis tokens.json (familles pour Culture, Nature, Shopping, Gastronomie ; mood-*-soft/ink pour les cinq autres) ;
    • store discovery : brouillon de filtres du panneau (ouverture, bascule, réinitialisation, fermeture qui restaure, application qui relance la recherche sur la bbox courante), bascule directe des chips rapides ;
    • comptage /routes/search/count avec breakdown=all_but_one, debounce 300 ms, indisponible après 5 s, hors connexion sans suggestion ; suggestions « Essayez de retirer » par groupe (l'API compte groupe par groupe) ;
    • UI : pilule de recherche (champ non fonctionnel, Ajouter la recherche géographique avec proxy de géocodage (E-02) #30) avec bouton filtres et compteur rond, rangée de chips 36 px, panneau en sheet modale M-05, chips M-08 ;
    • hors connexion : filtres appliqués aux résultats en cache sur le téléphone ;
    • filters_applied (chip, panel) et filters_no_results ;
    • tests : store, debounce, et rendu RNTL des chips et du panneau (ajout de jest-expo et @testing-library/react-native, les tests actuels étant en vitest sans rendu).
  7. IlanAMG commented on Oct 13, 2026

    @IlanAMG
    MemberAuthor

    Chef de projet (point du 2026-10-13) : colonne À review → À déployer : ticket fermé par le merge, la colonne n'avait pas suivi. Il passe en Terminés après vérification en staging par Ilan ou Paul.

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