jules/nav-carte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
6f7d2450dec240eabb375bfa970b4a1bff62727e
nav-carte/V2-cadrage/H-prompt-session-2-front.md
Jules Neny 21c44d8193 feat(aep): carte AEP — push Gitea 2026-04-28
2026-04-28 14:00:05 +02:00

7.0 KiB
Raw Blame History

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.
Reference in New Issue View Git Blame Copy Permalink