225 lines
13 KiB
Markdown
225 lines
13 KiB
Markdown
## É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).
|