7.6 KiB
7.6 KiB
M — Prompt Sonnet 1.8 : Mobile UX dédié NAV V2
Lancer APRÈS Sonnet 1.7 (correctif desktop final). Mission : refonte de l'expérience mobile selon spec Jules validée 2026-04-14.
Racine projet
C:\Users\jules\Dropbox\ATIS - IPCJRA\1 PROJETS\TECH - infra VPS, website pro, RAG\nav-carte\
État
Sonnet 1.7 a posé le desktop final (top search + onglets territoire haut + chatbot zone droite + sidebar filtres+fiches). Le mobile actuel = drawer générique. Toi tu refais le mobile selon la spec ci-dessous.
Lis AVANT :
git log --oneline -25JOURNAL-V2.md- Composants :
app.vue,pages/index.vue,NavSidebar.vue,NavMap.vue,FilterDrawer.vue,EchelleFilter.vue,FonctionFilter.vue,TerritoireTabs.vue,TopSearchBar.vue,ChatbotPlaceholder.vue
Spec mobile (< 1024px)
═══════════════════════════════════════════
[Logo NAV] [🔍] [✚ Contribuer] ← top nav, recherche s'étend au tap
═══════════════════════════════════════════
[ Métropole ] [ Outre-mer ] ← onglets territoire (sous top nav)
─────────────────────────────────────
CARTE LEAFLET ← haut, hauteur dynamique
(Métropole ou grille ~40-50% viewport par défaut
Outre-mer adaptée mobile)
─── ⇅ (poignée draggable - bonus) ───
☐ Nat ☐ Rég ☐ Loc ← échelle ultra compact (1 ligne)
[1] Jur ☐ Tech ☐ Eco ☐ Adm … ← fonctions inline, scroll horizontal
───────────────────────────────────
[card fiche 1] ← liste, scroll vertical, max espace
[card fiche 2]
[card fiche 3]
...
┌────┐
│ 💬 │ ← bouton flottant transparent
└────┘ bas-droite, ~56x56px
═══════════════════════════════════════════
A) Top nav mobile
TopSearchBar.vuereste fonctionnel — au tap, s'étend en pleine largeur- "Contribuer" en bouton compact (icône + texte ou icône seule selon largeur)
- Pas de menu hamburger nécessaire (3 éléments suffisent)
B) Onglets territoire mobile
- Identiques au desktop, juste ré-adaptés en largeur
- Placés sous le top nav, au-dessus de la carte
- Compact : barre horizontale full-width
C) Zone carte mobile
- Métropole : carte Leaflet pleine largeur, hauteur ~40-50% viewport
- Outre-mer : grille 5 mini-cartes adaptée mobile (1 colonne empilée OU 2 colonnes selon largeur)
- Si 5 mini-cartes Leaflet trop lourd sur mobile → fallback 1 carte avec sélecteur dropdown du DOM-TOM affiché (note dans journal)
D) Bonus poignée draggable (skip si non-trivial)
- Barre horizontale entre carte et tagging (icône ⇅ ou poignée style iOS bottom sheet)
- Drag vers le haut → réduit la carte à ~25%, étend la liste fiches
- Drag vers le bas → étend la carte à ~70%
- Skip si > 30 min de dev — note dans journal pour Session 3
E) Tagging compact (entre carte et liste)
- Bandeau ultra fin
- Échelle : 3 checkboxes en ligne, taille mini (16-18px), labels courts ("Nat", "Rég", "Loc")
- Fonctions : inline, scroll horizontal (overflow-x: auto), max 1 ligne visible
- Chaque fonction : case + label compact
- Numéro priorité visible quand sélectionnée [1], [2], etc.
- Bouton "tout effacer" mini icône à droite si filtres actifs
F) Liste fiches mobile
- Cards compactes (densité supérieure au desktop)
- Tap sur card → centre la carte sur la fiche + pin highlighted (animation léger zoom)
- Scroll vertical infini (toutes les fiches filtrées)
- Header "N résultats" sticky en haut de la liste
G) Bouton chatbot flottant
- Position fixed bas-droite, ~56x56px
- Fond
--nav-primaryavec opacité ~85% (transparence) - Icône 💬 ou MessageCircle
- Shadow légère
- Tap → ouvre bottom sheet plein écran :
┌─────────────────────────────────────────┐
│ ← Retour 💬 NAV │ ← header sheet
├─────────────────────────────────────────┤
│ │
│ (zone discussion IA) │
│ placeholder pour S3 │
│ │
│ │
├─────────────────────────────────────────┤
│ [Pose ta question…] [➤] │ ← input + bouton envoi (disabled)
└─────────────────────────────────────────┘
- Composant
ChatbotSheet.vue(ou réutiliserChatbotPlaceholder.vueadapté) - Animation slide-up depuis le bas
- Fermeture : tap "← Retour" ou backdrop ou swipe down
- Logique : strictement visuelle, pas d'IA branchée (Session 3)
H) Suppression du drawer "Filtres" actuel
- L'ancien drawer
FilterDrawer.vuen'a plus de raison d'être (filtres sont maintenant inline dans le flow mobile) - Soit : supprimer FilterDrawer + bouton flottant "Filtres" associé
- Soit : transformer en
ChatbotSheet.vueet brancher au bouton 💬
→ Tranche au plus propre.
Règles
- Mobile-first
- Ne touche pas : page fiche détail, formulaire
/contribuer, schéma NocoDB, worker IA - Palette stricte
- Accents français
- Commits atomiques par bloc
- Update
JOURNAL-V2.md
Délégation cascade autorisée
Sous-agents Task pour : recherche pattern bottom sheet Vue, recherche pattern poignée draggable, recherche multi-Leaflet adaptation mobile.
Critère de fin
- Mobile (< 1024px en devtools ou vrai téléphone) :
- Top nav avec recherche fonctionnelle
- Onglets territoire commutent vue carte
- Carte Leaflet en haut, lisible
- Tagging compact échelle + fonctions inline
- Liste fiches scrollable
- Tap card → centre carte
- Bouton chatbot flottant
- Tap chatbot → bottom sheet plein écran
npm run buildclean- Aucune régression desktop (≥ 1024px)
- Commits poussés
- JOURNAL-V2 à jour
Doute / blocage
- Multi-Leaflet 5 instances trop lourd mobile → fallback 1 carte + dropdown sélecteur DOM-TOM
- Poignée draggable non-trivial → skip + note S3
- Bottom sheet animation Vue compliqué → utiliser
<Teleport>+ transition CSS simple - Spec ambiguë → tranche au plus simple, note journal
- Blocage dur → STOP + reporte
Résumé attendu
## S2 Étape 2 — Mobile UX [DONE / BLOCKED]
### Ajustements
- ✓/✗ A) Top nav mobile (recherche)
- ✓/✗ B) Onglets territoire mobile
- ✓/✗ C) Zone carte (Métropole + Outre-mer adapté)
- ✓/✗ D) Poignée draggable (bonus) : fait / skipped
- ✓/✗ E) Tagging compact inline
- ✓/✗ F) Liste fiches + tap → centre carte
- ✓/✗ G) Bouton chatbot flottant + bottom sheet
- ✓/✗ H) Drawer Filtres supprimé/transformé
### Décisions
- Multi-Leaflet mobile : fait / fallback (raison)
- Poignée : fait / skipped (raison)
### À tester
- Devtools mobile (Pixel 7, iPhone 14 Pro)
- Si possible : vrai tel via npm run dev -- --host
### Fichiers / Commits
- ...
Go.