Prompt AEP — S7 : Logo, fiches cliquables, outre-mer accordéon

Projet : 1 PROJETS/TECH - infra VPS, website pro, RAG/nav-carte/ Site live : aep.trans-former.fr Journal : nav-carte/JOURNAL-V2.md Invocation : /atis-dev AEP Commit de référence desktop : aca6bc8 (S5)

État d'avancement (fin S6, 2026-04-16)

Déployé et fonctionnel :

Header mobile : sous-titre "Écosystème d'entraide Architecture" sous AEP
Onglets Métropole/Outre-mer en pills colorées (fond primary actif)
Hamburger menu z-[1200] — fonctionne partout (Métropole + Outre-mer)
Pinch-to-zoom page désactivé (zoom carte Leaflet préservé)
MobileSheet : compteur "99 fiches" supprimé du header (reste sous les tags)
Page /contribuer : scroll mobile fixé (overflow-y: auto)
Outre-mer : 5 cartes en colonne verticale

Bugs restants :

Fiches ne s'ouvrent pas au clic (ni mobile ni desktop)
Outre-mer difficile à lire en petit format horizontal

Corrections à faire (par priorité)

P0 — Bug critique : fiches ne s'ouvrent pas au clic

Symptôme : Sur mobile ET desktop, cliquer sur un marqueur carte ne déploie pas la fiche. On voit les marqueurs, les popups Leaflet s'ouvrent (mobile), mais le FicheModal (desktop) ne s'ouvre jamais et sur mobile la sélection ne fait rien de visible.

Contexte technique :

Desktop (pages/index.vue) :

function onSelectOrg(id: number) {
  selectedId.value = selectedId.value === id ? null : id
  if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
    ficheModalId.value = id
    ficheModalOpen.value = true
  }
}

Le FicheModal est bien dans le template :

<FicheModal v-model="ficheModalOpen" :orgId="ficheModalId" />

Le NavMap.vue émet select-org sur clic marker :

marker.on('click', () => emit('select-org', org.Id))

En S6, on a ajouté un conditionnel sur bindPopup (mobile uniquement) dans NavMap.vue :

if (typeof window !== 'undefined' && window.innerWidth < 1024) {
  marker.bindPopup(...)
}

Hypothèses à investiguer :

Le popup Leaflet intercepte-t-il le click event même quand bindPopup n'est pas appelé ?
Le clusterGroup (MarkerClusterGroup) intercepte-t-il les clics ?
L'API /api/fiche/[id] retourne-t-elle bien les données ? Tester : curl https://aep.trans-former.fr/api/fiche/1
Le FicheModal reçoit-il bien orgId et modelValue=true ? Ajouter un console.log temporaire dans onSelectOrg.
Sur mobile, onSelectOrgMobile ne fait que toggler selectedId — il n'ouvre rien. Faut-il naviguer vers /fiche/[id] ?

Approche suggérée :

Tester l'API fiche en curl d'abord
Ajouter des console.log dans onSelectOrg / onSelectOrgMobile pour confirmer que l'event arrive
Sur desktop : vérifier que FicheModal se monte (DevTools → Elements)
Sur mobile : décider du comportement attendu (naviguer vers /fiche/[id] ou ouvrir une sheet ?)

P1 — Logo "AEP" dans le carré + header renommé

Actuellement (app.vue) :

<div class="w-7 h-7 rounded-lg flex items-center justify-center shrink-0"
  style="background: var(--nav-primary-solid);">
  <span class="font-bold text-sm" style="color: var(--nav-text-on-primary);">A</span>
</div>
<div class="flex flex-col">
  <span class="font-bold text-base tracking-tight leading-tight">AEP</span>
  <span class="text-xs leading-tight lg:hidden">Écosystème d'entraide Architecture</span>
  <span class="text-xs leading-tight hidden lg:inline">Architecture d'Écologie Politique</span>
</div>

Attendu :

Le carré affiche "AEP" (pas juste "A") — agrandir légèrement le carré si nécessaire (w-9 h-7 ?)
Le texte à côté du logo : "Architecture d'Écologie Politique" (sur mobile ET desktop)
Supprimer le sous-titre "Écosystème d'entraide Architecture" (c'est le nom de la carte, pas du site)
Clic sur le logo → renvoie vers le blog https://trans-former.fr (pas vers /)

P2 — Outre-mer mobile : accordéon

Actuellement : 5 mini-cartes empilées en colonne, chacune 120px de haut. Difficile à lire.

Attendu : Système d'accordéon :

Par défaut : les 5 DOM-TOM sont des lignes compactes (label + compteur fiches, ~40px)
Clic sur une ligne → la déplie (~1/3 de l'écran, ~33vh) et affiche la carte Leaflet
Les autres lignes restent repliées
Re-clic → replie
Une seule carte dépliée à la fois

Implémentation suggérée :

<div v-for="dom in DOM_TOM" :key="dom.name" class="outremer-accordion-item">
  <!-- Header cliquable (toujours visible) -->
  <div class="accordion-header" @click="toggleDom(dom.name)">
    <span>{{ dom.name }}</span>
    <span>{{ orgCounts[dom.name] }} fiches</span>
    <chevron :expanded="expandedDom === dom.name" />
  </div>
  <!-- Carte (visible si déplié) -->
  <div v-show="expandedDom === dom.name" class="accordion-body" style="height: 33vh;">
    <div :ref="..." class="outremer-map" />
  </div>
</div>

Script : ajouter const expandedDom = ref<string | null>(null) + toggleDom(name).

Attention : les cartes Leaflet doivent être initialisées APRÈS le dépliage (ou invalidateSize() appelé), sinon les tiles ne s'affichent pas correctement.

Desktop : garder le layout colonne actuel (pas d'accordéon, les 5 cartes restent visibles dans la sidebar droite de 220px).

Fichiers clés

Fichier	Rôle
`app.vue`	Header global, logo, hamburger menu
`pages/index.vue`	Page carte, onSelectOrg, FicheModal
`components/NavMap.vue`	Carte Leaflet Métropole, markers, clics
`components/FicheModal.vue`	Modal fiche desktop (Teleport to body)
`components/OutremerMap.vue`	Mini-cartes DOM-TOM
`components/MobileSheet.vue`	Bottom sheet swipable mobile
`server/api/fiche/[id].get.ts`	API proxy NocoDB pour une fiche

Deploy

# Build local
cd nav-carte && npm run build

# Tar + SCP + extract dans .output/ (PAS dans /opt/nav-carte/ racine !)
tar -czf /tmp/nav-carte-output.tar.gz -C .output .
scp -P 4422 /tmp/nav-carte-output.tar.gz vps-hetzner:/tmp/
scp -P 4422 .env.production vps-hetzner:/opt/nav-carte/.env

# Sur le VPS
ssh -p 4422 vps-hetzner "rm -rf /opt/nav-carte/.output/server /opt/nav-carte/.output/public && cd /opt/nav-carte/.output && tar -xzf /tmp/nav-carte-output.tar.gz && rm /tmp/nav-carte-output.tar.gz && systemctl restart nav-carte"

# Vérifier (port 3333, pas 3000 !)
ssh -p 4422 vps-hetzner "curl -s -o /dev/null -w 'HTTP %{http_code}' http://localhost:3333/"

Piège : le service écoute sur le port 3333 (pas 3000). Le Caddyfile fait reverse_proxy localhost:3333.

6.5 KiB Raw Blame History