fix(media): toolbar remise entre carte et chatbot + nav renommée

- fix: layout-toggle-bar à l'intérieur du layout-container (entre carte D3 et chatbot) - fix: chatbot de nouveau visible en mode split - feat: nav "Écosystème Entraide Architecture" → "Écosystème Entraide" Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
fix(server): useEvent() → event param dans la server route auteurs-pensees
2026-05-22 15:50:22 +02:00 · 2026-05-22 15:26:27 +02:00 · 2026-05-22 15:24:29 +02:00
4 changed files with 133 additions and 135 deletions
--- a/app.vue
+++ b/app.vue
@@ -34,7 +34,7 @@
          class="nav-tab"
          :class="{ 'nav-tab--active': route.path === '/' }"
        >
-          Écosystème Entraide Architecture
+          Écosystème Entraide
        </NuxtLink>
        <NuxtLink
          to="/agences"
@@ -58,12 +58,11 @@
          Codev
        </NuxtLink>
        <NuxtLink
-          to="/rag"
+          to="/media"
          class="nav-tab"
-          :class="{ 'nav-tab--active': route.path === '/rag' }"
+          :class="{ 'nav-tab--active': route.path.startsWith('/media') }"
        >
-          RAG
-          <span class="nav-tab-badge">en construction</span>
+          recherche-média
        </NuxtLink>
      </nav>

--- a/components/MediaTabVisuel.vue
+++ b/components/MediaTabVisuel.vue
@@ -1,16 +1,17 @@
 <template>
  <div class="media-visuel">

-    <!-- Conteneur split / plein ecran -->
+    <!-- Conteneur principal : carte → toolbar → chatbot (ou bonpote/rag-backend) -->
    <div class="layout-container">

-      <!-- Slot carte D3 -->
+      <!-- SLOT CARTE D3 (mode carte uniquement) -->
      <div
+        v-if="contentView === 'carte'"
        class="carte-slot"
        :class="[
          layoutMode === 'split' ? 'carte-split' : '',
          layoutMode === 'carte-full' ? 'carte-full' : '',
-          (layoutMode === 'chatbot-full' || layoutMode === 'bonpote' || layoutMode === 'rag-backend') ? 'carte-hidden' : '',
+          layoutMode === 'chatbot-full' ? 'carte-hidden' : '',
        ]"
        :style="layoutMode === 'split' ? { flexBasis: carteFlexBasis } : {}"
        style="position: relative;"
@@ -44,47 +45,52 @@
        </div>
      </div>

-      <!-- Barre de toggle -->
+      <!-- BARRE DE TOGGLE (entre carte et chatbot, toujours visible) -->
      <div class="layout-toggle-bar shrink-0">
-        <button
-          @click="setLayoutMode('carte-full')"
-          :class="{ active: layoutMode === 'carte-full' }"
-          class="toggle-btn"
-          title="Carte en plein ecran"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
-            <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
-          </svg>
-          Carte plein ecran
-        </button>
-        <button
-          v-if="layoutMode !== 'split'"
-          @click="setLayoutMode('split')"
-          class="toggle-btn"
-          title="Vue partagee"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/>
-          </svg>
-          Vue partagee
-        </button>
-        <button
-          @click="setLayoutMode('chatbot-full')"
-          :class="{ active: layoutMode === 'chatbot-full' }"
-          class="toggle-btn"
-          title="Chatbot en plein ecran"
-        >
-          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
-            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
-          </svg>
-          Chatbot plein ecran
-        </button>

-        <!-- Groupe droit : carte des pensées + RAG backend -->
+        <!-- Gauche : contrôles layout (seulement en mode carte) -->
+        <template v-if="contentView === 'carte'">
+          <button
+            @click="layoutMode = 'carte-full'"
+            :class="{ active: layoutMode === 'carte-full' }"
+            class="toggle-btn"
+            title="Carte en plein ecran"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/>
+              <line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/>
+            </svg>
+            Carte plein ecran
+          </button>
+          <button
+            v-if="layoutMode !== 'split'"
+            @click="layoutMode = 'split'"
+            class="toggle-btn"
+            title="Vue partagee"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <rect x="3" y="3" width="18" height="18" rx="2"/><line x1="3" y1="12" x2="21" y2="12"/>
+            </svg>
+            Vue partagee
+          </button>
+          <button
+            @click="layoutMode = 'chatbot-full'"
+            :class="{ active: layoutMode === 'chatbot-full' }"
+            class="toggle-btn"
+            title="Chatbot plein ecran"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+            </svg>
+            Chatbot plein ecran
+          </button>
+        </template>
+
+        <!-- Droite : contrôles contenu (toujours, indépendants du layoutMode) -->
        <div style="margin-left: auto; display: flex; align-items: center; gap: 4px; flex-wrap: wrap;">
+          <!-- Slider opacité PDF -->
          <input
-            v-if="showFracasPdf"
+            v-if="showFracasPdf && contentView === 'carte'"
            type="range"
            min="0"
            max="100"
@@ -92,6 +98,21 @@
            class="opacity-slider"
            :title="`Opacité ${fracasOpacity}%`"
          />
+
+          <!-- CARTE PRINCIPALE -->
+          <button
+            @click="showCarte"
+            :class="{ active: contentView === 'carte' }"
+            class="toggle-btn"
+            title="Vue principale : carte D3 + chatbot"
+          >
+            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="2"/><path d="M12 2a10 10 0 0 0-7.07 17.07M12 2a10 10 0 0 1 7.07 17.07M3.34 7h17.32M3.34 17h17.32"/>
+            </svg>
+            CARTE PRINCIPALE
+          </button>
+
+          <!-- Tickbox PDF + carte des pensées -->
          <div class="carte-pensees-ctrl">
            <input
              type="checkbox"
@@ -100,17 +121,19 @@
              title="Superposer la carte FRACAS en PDF"
            />
            <button
-              @click="setLayoutMode('bonpote')"
-              :class="{ active: layoutMode === 'bonpote' }"
+              @click="contentView = 'bonpote'"
+              :class="{ active: contentView === 'bonpote' }"
              class="toggle-btn carte-pensees-btn"
              title="Carte des pensées écologiques — référence FRACAS Bonpote V2"
            >
              📗 carte des pensées écologiques
            </button>
          </div>
+
+          <!-- RAG backend -->
          <button
-            @click="setLayoutMode('rag-backend')"
-            :class="{ active: layoutMode === 'rag-backend' }"
+            @click="contentView = 'rag-backend'"
+            :class="{ active: contentView === 'rag-backend' }"
            class="toggle-btn"
            title="Interface LightRAG backend"
          >
@@ -122,9 +145,9 @@
        </div>
      </div>

-      <!-- Poignee draggable (visible uniquement en mode split, pas sur mobile) -->
+      <!-- POIGNEE DRAGGABLE (split uniquement) -->
      <div
-        v-if="layoutMode === 'split'"
+        v-if="contentView === 'carte' && layoutMode === 'split'"
        class="split-handle"
        @mousedown.prevent="onHandleMousedown"
        title="Redimensionner"
@@ -132,13 +155,14 @@
        <span class="split-handle-grip"></span>
      </div>

-      <!-- Slot chatbot inline -->
+      <!-- SLOT CHATBOT (mode carte uniquement) -->
      <div
+        v-if="contentView === 'carte'"
        class="chatbot-slot"
        :class="[
          layoutMode === 'split' ? 'chatbot-split' : '',
          layoutMode === 'chatbot-full' ? 'chatbot-full-mode' : '',
-          (layoutMode === 'carte-full' || layoutMode === 'bonpote' || layoutMode === 'rag-backend') ? 'chatbot-hidden' : '',
+          layoutMode === 'carte-full' ? 'chatbot-hidden' : '',
        ]"
        :style="layoutMode === 'split' ? { flexBasis: chatbotFlexBasis } : {}"
      >
@@ -147,9 +171,9 @@
        </ClientOnly>
      </div>

-      <!-- Vue Bonpote V2 -->
+      <!-- VUE BONPOTE -->
      <div
-        v-if="layoutMode === 'bonpote'"
+        v-if="contentView === 'bonpote'"
        class="flex-1 overflow-y-auto px-6 py-8"
        style="max-width: 680px; margin: 0 auto;"
      >
@@ -178,7 +202,7 @@
              Telecharger le poster PDF (recto/verso)
            </a>
            <button
-              @click="setLayoutMode('split')"
+              @click="showCarte"
              class="flex items-center gap-3 px-4 py-3 rounded-lg hover:opacity-80 transition-opacity text-left"
              style="background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; font-weight: 500; border: none; cursor: pointer;">
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
@@ -202,9 +226,9 @@
        </div>
      </div>

-      <!-- Vue RAG backend -->
+      <!-- VUE RAG BACKEND -->
      <div
-        v-if="layoutMode === 'rag-backend'"
+        v-if="contentView === 'rag-backend'"
        style="flex: 1; overflow: hidden; display: flex; flex-direction: column;"
      >
        <MediaTabBackend />
@@ -285,9 +309,11 @@ interface LivreRag { slug: string; titre: string; annee: number; couches: string
 interface AuteurData { id: string; nom: string; dates: string; ecoles: string[]; ecole_principale: string; livres_rag: LivreRag[]; theses_cles: string[]; bio_courte: string }
 interface PenseesData { meta: any; ecoles: EcoleData[]; auteurs: AuteurData[] }

-type LayoutMode = 'split' | 'carte-full' | 'chatbot-full' | 'bonpote' | 'rag-backend'
+type LayoutMode = 'split' | 'carte-full' | 'chatbot-full'
+type ContentView = 'carte' | 'bonpote' | 'rag-backend'

-const STORAGE_KEY = 'media-layout-mode'
+const LAYOUT_KEY = 'media-layout-mode'
+const CONTENT_KEY = 'media-content-view'
 const SPLIT_RATIO_KEY = 'media-split-ratio'
 const DEFAULT_SPLIT_RATIO = 0.66

@@ -297,7 +323,9 @@ const ficheEcoleOpen = ref(false)
 const ficheEcoleId = ref<string | null>(null)
 const ragInfoOpen = ref(false)
 const chatbotAuteur = ref<string | null>(null)
+
 const layoutMode = ref<LayoutMode>('split')
+const contentView = ref<ContentView>('carte')
 const cartePenseesRef = ref<{ triggerResize: () => void } | null>(null)

 const showFracasPdf = ref(false)
@@ -313,12 +341,21 @@ let dragStartY = 0
 let dragStartRatio = DEFAULT_SPLIT_RATIO
 let containerHeight = 0

+function showCarte() {
+  contentView.value = 'carte'
+  layoutMode.value = 'split'
+  if (typeof window !== 'undefined') {
+    localStorage.setItem(CONTENT_KEY, 'carte')
+    localStorage.setItem(LAYOUT_KEY, 'split')
+  }
+  nextTick(() => cartePenseesRef.value?.triggerResize())
+}
+
 function onHandleMousedown(e: MouseEvent) {
  dragStartY = e.clientY
  dragStartRatio = splitRatio.value
  const container = (e.target as HTMLElement)?.closest('.layout-container') as HTMLElement | null
  containerHeight = container ? container.clientHeight : window.innerHeight
-
  window.addEventListener('mousemove', onHandleMousemove)
  window.addEventListener('mouseup', onHandleMouseup)
 }
@@ -332,17 +369,19 @@ function onHandleMousemove(e: MouseEvent) {
 function onHandleMouseup() {
  window.removeEventListener('mousemove', onHandleMousemove)
  window.removeEventListener('mouseup', onHandleMouseup)
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
-  }
+  if (typeof window !== 'undefined') localStorage.setItem(SPLIT_RATIO_KEY, String(splitRatio.value))
  cartePenseesRef.value?.triggerResize()
 }

 onMounted(async () => {
  if (typeof window !== 'undefined') {
-    const saved = localStorage.getItem(STORAGE_KEY) as LayoutMode | null
-    if (saved && (['split', 'carte-full', 'chatbot-full', 'bonpote', 'rag-backend'] as string[]).includes(saved)) {
-      layoutMode.value = saved
+    const savedLayout = localStorage.getItem(LAYOUT_KEY) as LayoutMode | null
+    if (savedLayout && (['split', 'carte-full', 'chatbot-full'] as string[]).includes(savedLayout)) {
+      layoutMode.value = savedLayout
+    }
+    const savedContent = localStorage.getItem(CONTENT_KEY) as ContentView | null
+    if (savedContent && (['carte', 'bonpote', 'rag-backend'] as string[]).includes(savedContent)) {
+      contentView.value = savedContent
    }
    const savedRatio = parseFloat(localStorage.getItem(SPLIT_RATIO_KEY) ?? '')
    if (!isNaN(savedRatio) && savedRatio >= 0.20 && savedRatio <= 0.80) {
@@ -354,30 +393,23 @@ onMounted(async () => {
    }
  }
  try {
-    penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json?v=4.2')
+    penseesData.value = await $fetch<PenseesData>('/data/auteurs-pensees.json')
  } catch (e) {
    console.error('Erreur chargement auteurs-pensees.json', e)
  }
 })

-function setLayoutMode(mode: LayoutMode) {
-  layoutMode.value = mode
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(STORAGE_KEY, mode)
-  }
-  if (mode === 'split' || mode === 'carte-full') {
-    setTimeout(() => {
-      cartePenseesRef.value?.triggerResize()
-    }, 350)
-  }
-}
-
 watch(layoutMode, (v) => {
-  if (typeof window !== 'undefined') {
-    localStorage.setItem(STORAGE_KEY, v)
+  if (typeof window !== 'undefined') localStorage.setItem(LAYOUT_KEY, v)
+  if (v === 'split' || v === 'carte-full') {
+    setTimeout(() => cartePenseesRef.value?.triggerResize(), 350)
  }
 })

+watch(contentView, (v) => {
+  if (typeof window !== 'undefined') localStorage.setItem(CONTENT_KEY, v)
+})
+
 function onSelectAuteur(id: string) {
  ficheAuteurId.value = id
  ficheOpen.value = true
@@ -398,16 +430,16 @@ function onInterrogerEcole(ecoleId: string) {
  ficheEcoleOpen.value = false
  const ecole = penseesData.value?.ecoles.find(e => e.id === ecoleId)
  chatbotAuteur.value = ecole?.label ?? null
-  if (layoutMode.value === 'carte-full') setLayoutMode('split')
+  if (contentView.value !== 'carte') showCarte()
+  else if (layoutMode.value === 'carte-full') layoutMode.value = 'split'
 }

 function onInterrogerRag(auteurId: string) {
  ficheOpen.value = false
  const auteur = penseesData.value?.auteurs.find(a => a.id === auteurId)
  chatbotAuteur.value = auteur?.nom ?? null
-  if (layoutMode.value === 'carte-full') {
-    setLayoutMode('split')
-  }
+  if (contentView.value !== 'carte') showCarte()
+  else if (layoutMode.value === 'carte-full') layoutMode.value = 'split'
 }
 </script>

@@ -420,7 +452,6 @@ function onInterrogerRag(auteurId: string) {
  min-height: 0;
 }

-/* Conteneur des slots carte + toggle + chatbot */
 .layout-container {
  flex: 1;
  display: flex;
@@ -463,7 +494,7 @@ function onInterrogerRag(auteurId: string) {
  pointer-events: none;
 }

-/* --- Barre de toggle --- */
+/* --- Barre de toggle (entre carte et chatbot) --- */
 .layout-toggle-bar {
  flex-shrink: 0;
  display: flex;
@@ -503,7 +534,7 @@ function onInterrogerRag(auteurId: string) {
  border-color: var(--nav-primary);
 }

-/* --- Contrôle fusionné carte des pensées + tickbox --- */
+/* --- Contrôle fusionné carte des pensées --- */
 .carte-pensees-ctrl {
  display: inline-flex;
  align-items: center;
@@ -524,14 +555,13 @@ function onInterrogerRag(auteurId: string) {
  border: none;
 }

-/* --- Slider opacité PDF --- */
 .opacity-slider {
  width: 80px;
  cursor: pointer;
  accent-color: var(--nav-primary, #3b6ea5);
 }

-/* --- Poignee draggable entre carte et chatbot --- */
+/* --- Poignee draggable --- */
 .split-handle {
  flex-shrink: 0;
  height: 8px;
@@ -563,11 +593,8 @@ function onInterrogerRag(auteurId: string) {
  );
 }

-/* Masquer la poignee sur mobile (ratio fixe) */
@media (max-width: 767px) {
-  .split-handle {
-    display: none;
-  }
+  .split-handle { display: none; }
 }

 /* --- Slot chatbot --- */
@@ -605,19 +632,16 @@ function onInterrogerRag(auteurId: string) {
 .modal-enter-from { opacity: 0; transform: translate(-50%,-48%) scale(0.94); }
 .modal-leave-to { opacity: 0; transform: translate(-50%,-48%) scale(0.96); }

-/* --- Responsive mobile (<768px) --- */
+/* --- Mobile --- */
@media (max-width: 767px) {
  .carte-split {
    flex: 0 0 60vh;
    height: 60vh;
  }
-
  .chatbot-split {
    flex: 0 0 calc(40vh - 38px);
    height: calc(40vh - 38px);
  }
-
-  .toggle-btn span,
  .toggle-btn {
    font-size: 0.7rem;
    padding: 3px 7px;
--- a/pages/rag.vue
+++ b/pages/rag.vue
@@ -1,38 +1,3 @@
-<template>
-  <div class="flex flex-col items-center justify-center h-full gap-6" style="background: var(--nav-bg);">
-    <div class="text-center max-w-md px-6">
-      <div
-        class="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-5"
-        style="background: var(--nav-bg-alt);"
-      >
-        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted);">
-          <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/>
-          <polyline points="3.27 6.96 12 12.01 20.73 6.96"/>
-          <line x1="12" y1="22.08" x2="12" y2="12"/>
-        </svg>
-      </div>
-      <h1 class="text-2xl font-bold mb-3" style="color: var(--nav-text);">RAG — Retrieval Augmented Generation</h1>
-      <p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text-muted);">
-        Une base de connaissances interrogeable par IA — textes, rapports, manifestes et ressources documentaires sur l'architecture d'écologie politique.
-      </p>
-      <p class="text-xs font-semibold uppercase tracking-widest mb-6" style="color: var(--nav-text-muted); opacity: 0.6;">
-        Bientôt disponible
-      </p>
-      <NuxtLink
-        to="/"
-        class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all hover:opacity-80"
-        style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
-      >
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
-          <line x1="19" y1="12" x2="5" y2="12"/>
-          <polyline points="12 19 5 12 12 5"/>
-        </svg>
-        Retour à l'écosystème
-      </NuxtLink>
-    </div>
-  </div>
-</template>
-
 <script setup lang="ts">
-useHead({ title: 'RAG — AEP (bientôt disponible)' })
+navigateTo('/media', { redirectCode: 301 })
 </script>
--- a/server/routes/data/auteurs-pensees.json.get.ts
+++ b/server/routes/data/auteurs-pensees.json.get.ts
@@ -0,0 +1,10 @@
+import { readFileSync } from 'node:fs'
+import { join } from 'node:path'
+
+export default defineEventHandler((event) => {
+  const path = join(process.cwd(), 'public', 'data', 'auteurs-pensees.json')
+  const raw = readFileSync(path, 'utf-8')
+  setResponseHeader(event, 'content-type', 'application/json; charset=utf-8')
+  setResponseHeader(event, 'cache-control', 'public, max-age=300')
+  return raw
+})