156 lines
7.0 KiB
Markdown
156 lines
7.0 KiB
Markdown
# 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.
|