feat(aep): carte AEP — push Gitea 2026-04-28

V2-cadrage/H-prompt-session-2-front.md

@@ -0,0 +1,155 @@
+# H — Prompt Session 2 : Front NAV V2
+
+## État d'avancement (mis à jour 2026-04-14)
+
+**Décisions tranchées :**
+- A) Rate limit submit : **Redis** (côté propre)
+- B) Cluster Leaflet : seuil **15 pins** (densité FR)
+- C) Hiérarchie racine/antennes (CNOA/CROA, CAUE…) : **HORS SCOPE S2** → Session 2.5 dédiée (`L-prompt-session-2.5-hierarchie.md`)
+- D) Session 1 : **terminée 2026-04-14** (~96 fiches seed)
+- E) Sécurité API : proxy Nuxt + token `.env` VPS + rate limit IP. GET fiches public, POST modéré.
+
+**Dispatch en cours (séquencement anti-conflits) :**
+- Phase 1 — **Sonnet 1** : étape 2 (carte + sidebar) — EN COURS
+  - Checkpoint Jules : layout mobile + desktop
+- Phase 2 — **Sonnet 2** (étape 3 fiche) + **Sonnet 3** (étape 6 contribuer) en parallèle après checkpoint 1
+  - Prompts : `J-prompt-session-2-fiche.md` et `K-prompt-session-2-contribuer.md`
+  - Checkpoint Jules : 1 fiche seed rendue (typo + espacements)
+- Phase 3 (post-S2) — Session 2.5 hiérarchie : prompt `L-prompt-session-2.5-hierarchie.md`
+
+**Note chemins :** specs sont dans `nav-carte/V2-cadrage/`, pas `0 INBOX/NAV-V2-recherches/` (le prompt original ci-dessous référence le mauvais chemin — corrigé dans J/K/L).
+
+---
+
+> **Session dédiée Claude Code, modèle Opus pilote avec délégation sous-agents Sonnet autorisée.**  
+> Prérequis : Session 1 terminée (schéma NocoDB en place, ~103 fiches importées).  
+> Durée estimée : 6-8h.  
+> Autonomie : 7/10 (checkpoints : validation layout sidebar mobile + rendu Leaflet).
+
+## Mission
+
+Construire la partie front de NAV V2 à partir du code Nuxt V1 existant :
+1. Carte interactive (Leaflet + OSM)
+2. Sidebar filtres (échelle + fonction + territoire)
+3. Page fiche détaillée `/fiche/[id]` + commentaires
+4. Formulaire de soumission (`/contribuer`)
+
+## Fichiers de référence (à LIRE en premier)
+
+Tous dans `C:\Users\jules\Dropbox\ATIS - IPCJRA\0 INBOX\NAV-V2-recherches\` :
+- `G-prompt-dev-final.md` (vision globale V2, étapes 2, 3, 6)
+- `E-spec-frontend.md` (wireframes ASCII, composants, routes, states)
+- `F-spec-pipe-collaboration.md` (§2 schéma DB — pour comprendre les champs affichés)
+- `palette-nav-v2.md` **SOURCE UNIQUE palette CSS** — respecter à la lettre
+
+Journal projet : `1 PROJETS\TECH  - infra VPS, website pro, RAG\nav-carte\JOURNAL-V2.md`  
+Code V1 existant (base de travail) : `1 PROJETS\TECH  - infra VPS, website pro, RAG\nav-carte\`
+
+## Taxonomie finale (ne pas remettre en cause, cf. JOURNAL-V2)
+
+- Échelle : `National` / `Régional` / `Local`
+- Territoire : `Métropole` + 5 DOM-TOM (Guadeloupe, Martinique, Guyane, La Réunion, Mayotte)
+- Fonctions (10) : Juridique, Technique, Économique, Administratif, Chantier, Comptabilité, Développement, Formation, Gestion d'agence, Santé mentale
+
+**UX options vides :** afficher les valeurs d'échelle/territoire sans fiches avec un compteur `(0)` pour inviter à contribuer (cohérent esprit collaboratif).
+
+## Credentials
+
+```
+NocoDB accessible via API publique : https://nav.trans-former.fr/api/proxy/nocodb ? 
+  (à décider — pour l'instant back-end Nuxt fait proxy via token .env)
+Token nav-v2-worker : dans /opt/nav-carte/.env sur VPS
+Base : pipilvsi7dibo80
+Table orgas : m08t7g5v4wch6wb
+Table stats_usage : mbbq7n47ixy19mc
+```
+
+## Étapes
+
+### Étape 2 — Carte + sidebar (3-4h)
+
+- [ ] Installer `@nuxtjs/leaflet` (ou `vue-leaflet/vue-leaflet` selon compat Nuxt 3) + `@headlessui/vue`
+- [ ] Composants à créer :
+  - `NavMap.vue` — carte Leaflet wrapped dans `<ClientOnly>` (SSR)
+  - `NavSidebar.vue` — wrapper filtres
+  - `EchelleFilter.vue` — chips exclusifs 3 valeurs
+  - `FonctionFilter.vue` — chips multi-sélection 10 valeurs
+  - `TerritoireToggle.vue` — toggle Métropole/Outre-mer + sous-onglets DOM-TOM
+- [ ] Filtres encodés dans URL : `?echelle=National&fonctions=Juridique,Technique&territoire=Métropole`
+- [ ] Filtrage **côté client** (< 300 fiches)
+- [ ] Responsive :
+  - Desktop ≥ 1024px : sidebar 320px fixe à gauche
+  - Mobile : drawer (Headless UI Dialog) + bouton flottant "Filtres"
+- [ ] Pins Leaflet customisés :
+  - Pin standard : `--nav-primary` (60% opacité, bleu nuit)
+  - Pin prioritaire (fiche mise en avant) : `--nav-accent` (safran)
+- [ ] Cluster markers si > 50 pins visibles (`leaflet.markercluster`)
+
+### Étape 3 — Page fiche + commentaires (2-3h)
+
+- [ ] Route : `/fiche/[id]` avec SSR
+- [ ] Composants :
+  - `FicheDetail.vue` — affichage complet (nom, description_enrichie si dispo sinon description_user, tags, URL, localisation)
+  - `CommentSection.vue` — liste commentaires approuvés
+  - `CommentForm.vue` — formulaire + submit API
+- [ ] API endpoints à créer/adapter :
+  - `GET /api/fiche/[id]` — proxy NocoDB
+  - `POST /api/comment` — filtre éthique Mistral Nemo sync (timeout 2s, cf. F §3)
+- [ ] Méta SEO dynamiques : `<title>`, description, og:image (carte générée ou logo par défaut)
+- [ ] Bouton retour carte avec restauration filtres (query params préservés)
+
+### Étape 6 — Formulaire soumission (2h)
+
+- [ ] Page `/contribuer` (ou modal `SubmitModal.vue`)
+- [ ] Validation Zod client + serveur
+- [ ] Champs :
+  - nom (required, min 3)
+  - url (optional, regex URL)
+  - description_user (required, 50-500 chars)
+  - echelle (required, enum)
+  - fonctions (required, 1-5 multi)
+  - territoire (required, enum)
+  - localisation_ville (optional)
+  - submitted_by_email (required, format email)
+- [ ] Après submit :
+  - POST NocoDB avec `moderation_status: "pending"`, `ai_processed: false`
+  - Message confirmation (texte exact E §9)
+  - La fiche partira dans le worker IA (cron 5 min) qui tournera en Session 3
+- [ ] Rate limit : 3 submits/IP/jour (fichier JSON ou Redis — Session 2 tranche)
+
+### Checkpoints Jules
+
+1. Après étape 2 : montrer rendu mobile + desktop pour validation layout sidebar
+2. Après étape 3 : une fiche seed rendue → validation typo + espacements
+
+## Délégation (Opus pilote)
+
+- Sonnet 1 : composants carte + sidebar (étape 2)
+- Sonnet 2 : page fiche + commentaires (étape 3)
+- Sonnet 3 : formulaire + validation Zod (étape 6)
+
+Lancer en parallèle si pas de dépendance, regrouper si besoin pour économiser fenêtres.
+
+## Règles
+
+- Mobile-first, testé à chaque étape
+- Accents français partout
+- Pas de Google Fonts (system font stack)
+- Respect strict `palette-nav-v2.md` (tokens CSS reproduits en variables Tailwind ou CSS globales)
+- Commits atomiques par étape
+- Ne pas toucher au worker IA / chatbot / bandeau — réservé Session 3
+
+## Output attendu
+
+- V2 front navigable en local (`npm run dev`)
+- ~103 fiches visibles sur la carte
+- Filtres fonctionnels (URL sync)
+- Page fiche par ID OK
+- Formulaire de soumission écrit dans NocoDB (status pending)
+- Journal mis à jour : `JOURNAL-V2.md` (décisions, points bloquants, TODOs S3)
+
+## Questions à trancher
+
+- Rate limit soumission : fichier JSON simple ou Redis installé sur VPS ?
+- Clustering carte : activation automatique dès 50 pins, ou seuil différent ?
+- Cas CNOA + 13 CROA : tous les CROA au même zoom désaturent la carte. Clustering les absorbera — à vérifier.