# 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.