## É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.service` → `aep.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)

```bash
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).
