Files
nav-carte/prompt-aep-S5-corrections-post-phase2.md
2026-04-28 14:00:05 +02:00

13 KiB

État d'avancement (session 2026-04-15) — LIVRÉE

  • Fait : 11/11 retours implémentés, 8 commits aep-s5 (8ae4be3 → aca6bc8), site 200 OK
  • Décisions d'exécution :
    • #5 → fallback Resend (pas NocoDB)
    • #7 → Option A (DOM-TOM row horizontale pleine largeur en bas)
    • #2 → vanilla touch events (@vueuse/core absent, 0 dep ajoutée)
  • Retours post-livraison Jules → session suivante S6 :
    • DOM-TOM : à repenser (pile verticale à droite, pas row bas) + bug Réunion disparaît
    • Onglets : style languette dossier, invisibles en mobile
    • Mobile : barre recherche superposée filtres, chatbot à remonter, leaflet credit à gérer
    • Bandeau : pas fluide, label "Soutenir le projet" (pas "transparence IA")
    • Form proposer : bouton envoyer invisible (BUG critique), réduire min caractères
    • Chatbot : vérifier compteur tokens
  • Prompt S6 : 0 INBOX/PROMPTS/prompt-aep-S6-corrections-post-S5.md

Prompt — AEP Session 5 (corrections post Phase 2 + Session N fusionnée)

À lancer : prochaine session, Opus pilote + Sonnet délégué (ou Sonnet direct si charge légère) Priorité : UX polish + onglets multi-projets + report participatif Créé : 2026-04-15 (après Phase 2 livrée — 10/10 features, 9 commits)


Contexte

Site live : https://aep.trans-former.fr/ (nav.trans-former.fr → 301 → aep). Racine projet : C:\Users\jules\Dropbox\ATIS - IPCJRA\1 PROJETS\TECH - infra VPS, website pro, RAG\nav-carte\ VPS SSH : alias vps-hetzner, service nav-carte.service, working dir /opt/nav-carte/.output/. Stack : Nuxt 3 + Vue 3 + Tailwind + Leaflet.

État Phase 2 livrée (session J+1, 2026-04-15) :

  • Bugs critiques fixés (chatbot env vars, pins Leaflet ESM default import, redirect nav→aep)
  • 10 features UX déployées : modal fiche sidebar, fusion outre-mer, CartoDB Positron + layer control + bounds France, bandeau rétractable desktop + FAB mobile, textes corrigés, Liberapay /donate, logo tooltip, header refonte, dark mode toggle, /a-propos CTA, /ajouter-carte placeholder
  • 9 commits sur main (voir git log --oneline main)

Questions ouvertes Jules → Pilote (tranchées) :

  • Dark mode tuile : switch auto light_all ↔ dark_all CartoDB → oui (retour #9)
  • Doublon barre recherche header vs sidebar : retirer du header, garder sidebar (retour #1 desktop). Mobile : header doit afficher la barre (retour #1 mobile)
  • Composants morts (TerritoireTabs.vue, TerritoireToggle.vue) : supprimer, plus utilisés

Mission

Appliquer 11 retours visuels post-déploiement Phase 2 + fusionner Session N (onglets multi-projets) dans le header.


Retours Jules — à implémenter

1. Barre de recherche

  • Desktop : retirer la barre de recherche du header (doublon avec sidebar). Garder uniquement celle de NavSidebar.vue à gauche.
  • Mobile : faire apparaître la barre de recherche DANS le header mobile (actuellement absente).

2. Mobile — sheet swipable (Option A validée)

Sur pages/index.vue mobile (<lg) :

  • Carte en haut, hauteur ~45dvh initialement
  • En dessous, une bottom sheet swipable (à la Google Maps mobile) : glisser vers le haut → la sheet remplit l'écran, la carte se minimise
  • Pattern : Teleport + drag handle + transition hauteur, stocker état (collapsed / half / full) en ref
  • Sur full screen sheet : liste des fiches scrollable
  • Inspi : ChatbotSheet.vue existant pour la structure, mais avec drag handle fonctionnel (framer-motion ? ou vueuse useSwipe + transform)
  • Desktop : ne pas toucher (sidebar + modal modal déjà OK)

3. Header — onglets territoire multi-projets (fusion Session N)

Remplacer la barre de recherche header desktop par 3 onglets horizontaux centrés :

  • Écosystème Entraide Architecture (actif, actuel = /)
  • Agences Inspirantes (en construction — route /agences à créer, affiche "En construction" centré + retour accueil)
  • RAG (en construction — route /rag à créer, idem placeholder)

Design : onglets style tabs (underline actif, gris inactifs + mention "🔒 en construction" small en dessous pour les 2 placeholders). Mobile : même logique en format scroll horizontal ou drawer.

4. Header — retirer "+ Ajouter une carte"

Ne fait pas sens pour l'utilisateur. Garder juste + Proposer une ressource à droite. Supprimer aussi la route /ajouter-carte créée en S4 (pas utile).

5. Report/modif participatif — nouveau feature

Sur FicheDetail.vue (composant fiche complet), ajouter un bouton "Signaler une erreur / proposer une modif" (icône + texte, en pied de fiche ou header fiche, discret).

Clic → form inline (petit panneau qui se déplie) :

  • Champ texte (max 500 chars) : "Que proposes-tu de modifier ou signaler ?"
  • Champ email (obligatoire, validation regex)
  • Bouton "Envoyer"

Backend : créer server/api/report.post.ts qui :

  • Rate limit 5/IP/jour (pattern rateLimitJson existant)
  • Insère dans NocoDB nouvelle table reports (à créer côté NocoDB — demander token/table_id à Jules OU créer l'API endpoint et laisser Jules créer la table via UI NocoDB après)
  • Champs NocoDB : fiche_id (number), message (longtext), email (text), submitted_at (datetime), ip_hash (text), status (select: new/treated/ignored) default new

Alternative si table NocoDB pas créable en autonome : fallback envoi email via Resend (clé RESEND_API_KEY dans .env VPS) vers EMAIL_JULES (jules@trans-former.fr).

6. Commentaires — texte d'intro

Dans CommentSection.vue ou CommentForm.vue, ajouter/modifier le texte préalable aux commentaires :

"Les commentaires servent à confirmer ou attester de la fiabilité des services des organismes référencés."

Le placer en intro, italique ou subtil, avant les commentaires existants.

7. DOM-TOM — superposition horizontale + navigation

Actuellement : les 5 mini-cartes DOM-TOM sont en grille verticale dans l'encart droit 1/3 (desktop) et ne sont pas navigables (dragging désactivé).

Cible :

  • Layout : superposer horizontalement (5 colonnes étroites) au lieu de 5 lignes. Dans l'encart 1/3 droit, ça veut dire un bandeau plus large ou une scrollbox horizontale
  • Actually — repenser : si "superposer horizontalement" veut dire côte-à-côte, l'encart 1/3 est trop étroit. Proposer 2 options à Jules au démarrage de S5 :
    • Option A : DOM-TOM en row horizontale en BAS de la carte Métropole (pleine largeur, hauteur ~140px), plus en encart droit
    • Option B : encart droit garde la disposition mais devient scrollable horizontal
  • Navigation : activer dragging: true, scrollWheelZoom: true sur les mini-cartes DOM-TOM dans OutremerMap.vue (actuellement désactivés ligne 89-95). Le cadre est trop serré → augmenter le zoom initial ou élargir les bounds par DOM.

8. Layer control carte

À supprimer — retour Jules #8 : CartoDB Positron est super comme ça, pas besoin de superposer les couches. Retirer L.control.layers(baseMaps, {}, ...) dans NavMap.vue. Garder uniquement la tuile CartoDB Positron par défaut.

Note fun : Jules a remarqué que les noms de régions sont en anglais sur CartoDB → garder tel quel, ça l'amuse.

9. Dark mode — switch tuile carte

Implémenter le watcher manquant : quand dark class active sur html, switcher la tuile CartoDB de light_all vers dark_all (https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}{r}.png).

Dans NavMap.vue : watch sur un store/ref du theme (créer un composable useTheme() si pas existant), removeLayer / addLayer dynamique. Idem dans OutremerMap.vue.

10. Bandeau bas — inverser la logique

Actuel : bandeau déployé par défaut, se replie après 3 sec sans mouvement souris, se redéploie au hover (pattern jugé "chelou" et bloquant).

Cible :

  • Bandeau replié par défaut (barre fine ~30px)
  • Au survol souris (zone bas de l'écran ou bandeau lui-même) → se déploie, contenu visible
  • Quand souris s'éloigne → se replie immédiatement (pas de timer)
  • Opacité du bandeau déployé : 70% (plus transparent qu'actuellement)

11. Bouton "Soutenir le projet" — recentré

Dans le bandeau bas déployé, le bouton Liberapay est actuellement mal aligné. Le recentrer :

  • Vertical : décaler d'un saut de ligne vers le bas (plus centré dans la hauteur du bandeau déployé)
  • Horizontal : centré ou aligné avec le reste

Règles d'exécution

  • Tu peux déléguer à des sous-agents Task (subagent_type: general-purpose, model: sonnet) pour paralléliser
  • Commits atomiques par feature : feat(aep-s5): <feature>
  • Tester après chaque deploy : curl -sI https://aep.trans-former.fr/ | head -3 → 200
  • systemctl is-active nav-carte doit rester active
  • Mise à jour JOURNAL-V2.md avec section "Session 5 (date)"
  • NE PAS TOUCHER à .env VPS ni .env.production local (patchés manuellement, sync cassé)

Checkpoints requis pour Jules

  • Retour #5 report : au moment de créer la table NocoDB, demander à Jules le token + l'ID de la table (ou lui demander de la créer en UI puis te passer l'ID). Alternative fallback Resend si impossible.
  • Retour #7 DOM-TOM layout : présenter les 2 options A/B avant d'implémenter.

Dette technique deploy.sh (hors scope S5 — session dédiée)

Ces items ne bloquent pas S5 mais doivent être traités avant le prochain deploy.sh pour éviter d'écraser la config VPS patchée manuellement.

Ordre d'exécution recommandé :

P0 — deploy.sh (à corriger en premier, avant tout redeploy)

  • Cible incorrecte : deploy.sh pointe vers /opt/nav-carte/ alors que la cible correcte est /opt/nav-carte/.output/. Incohérence découverte en S3b — à corriger immédiatement.
  • Garde diff .env : ajouter dans deploy.sh un diff automatique entre .env.production local et .env VPS AVANT écrasement, ou passer le scp .env en option --env (skip par défaut). Actuellement le script écrase le .env VPS sans avertissement.

P1 — Synchroniser les .env (bloquant avant prochain deploy complet)

  • .env.production local obsolète : contient 4 vars + token périmé. Le .env VPS a été patché manuellement (Mistral, NocoDB, 7 aliases NUXT_*). Si deploy.sh tourne sans correction P0, il écrase le VPS → chatbot + API cassés. Action requise : copier le .env VPS (ssh vps-hetzner cat /opt/nav-carte/.env) dans .env.production local, puis synchroniser.
  • nuxt.config.ts : simplifier le double mapping variables .env (ex : MISTRAL_API_KEY + alias NUXT_MISTRAL_API_KEY — redondant, source d'erreurs silencieuses).

P1 — Migration terminologique (à planifier après deploy stabilisé)

  • /opt/nav-carte//opt/aep/ : renommer le répertoire VPS + mettre à jour deploy.sh + tous les chemins.
  • nav-carte.serviceaep.service : rebrand du service systemd (stop, rename unit file, daemon-reload, enable, start). Attention : coordonner avec le changement de répertoire.

P1 — Monitoring (à ajouter après migration)

  • Sonde Uptime Kuma : créer une sonde HTTP sur https://aep.trans-former.fr/api/stats — alerte sur code 5xx. Configurer dans l'instance Uptime Kuma existante sur le VPS.

Déploiement (rappel)

cd "<racine nav-carte>"
npm run build    # si EBUSY sur .nuxt : rm -rf .nuxt .output && sleep 2 && retry
tar -czf - .output | ssh vps-hetzner "rm -rf /tmp/nav-output && mkdir /tmp/nav-output && tar -xzf - -C /tmp/nav-output && rm -rf /opt/nav-carte/.output && mv /tmp/nav-output/.output /opt/nav-carte/.output && systemctl restart nav-carte"
curl -sI https://aep.trans-former.fr/ | head -3

Critères de fin

  • 11 retours implémentés et déployés
  • Route /agences + /rag créées (placeholders "en construction")
  • Route /ajouter-carte supprimée
  • Composants morts (TerritoireTabs.vue, TerritoireToggle.vue) supprimés
  • API /api/report ou fallback email fonctionnel
  • Site 200 OK, service active
  • JOURNAL-V2.md à jour

Modèle recommandé

  • Opus pilote pour arbitrages (checkpoint #7 DOM-TOM layout, décision NocoDB vs Resend pour #5)
  • Sonnet délégué pour l'exécution UX pure (#1, #3, #4, #6, #8, #9, #10, #11)
  • Sonnet sur sheet swipable mobile (#2) — assez technique mais cadré
  • Sonnet sur report feature (#5) avec fallback

Durée estimée

2-3h selon délégation + décision NocoDB.


Autocritique

✓ Solide :

  • Retours groupés par type (UX polish / nouvelle feature / bug fix)
  • #7 et #5 ont checkpoints explicites → pas de fonçage aveugle
  • Session N fusionnée dans #3, plus de prompt séparé nécessaire
  • État live + commits référencés pour éviter régression

⚠ Faiblesses :

  • #5 report : dépend création table NocoDB (bloquant si Jules pas dispo au moment du checkpoint)
  • #2 sheet swipable : pas de lib précise recommandée, l'agent devra choisir (@vueuse/core useSwipe ou implémentation manuelle transform)
  • #10 bandeau inversé : peut nécessiter rework plus profond du composant BandeauBas.vue selon son architecture actuelle — pas inspecté

Autonomie : 7/10 (2 checkpoints Jules : #5 NocoDB table, #7 DOM-TOM layout A/B).