180 lines
7.6 KiB
Markdown
180 lines
7.6 KiB
Markdown
# 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 -25`
|
|
- `JOURNAL-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.vue` reste 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-primary` avec 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éutiliser `ChatbotPlaceholder.vue` adapté)
|
|
- 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.vue` n'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.vue` et 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 build` clean
|
|
- 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.
|