feat(codev): tabs Besoins/Competences + retour fiche + panel mobile bottom sheet

pages/codev/carto.vue

@@ -11,75 +11,92 @@
       </p>
     </header>
 
-    <div class="show-labels-bar">
-      <button
-        type="button"
-        :class="{ active: showLabels }"
-        @click="showLabels = !showLabels"
-      >
-        {{ showLabels ? 'Masquer besoins/offres' : 'Montrer besoins/offres' }}
-      </button>
+    <div class="codev-tabs">
+      <button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
+      <button :class="{ active: tab === 'besoins' }" @click="tab = 'besoins'" type="button">Besoins</button>
+      <button :class="{ active: tab === 'competences' }" @click="tab = 'competences'" type="button">Compétences</button>
     </div>
 
-    <ClientOnly>
-      <CodevGraph
-        :fiches="fiches"
-        :matches="matches"
-        :mode="mode"
-        :show-labels="showLabels"
-        @select-fiche="onSelectFiche"
-      />
-      <template #fallback>
-        <div class="graph-fallback">Chargement du graphe...</div>
-      </template>
-    </ClientOnly>
+    <div v-if="tab === 'carto'">
+      <div class="show-labels-bar">
+        <button
+          type="button"
+          :class="{ active: showLabels }"
+          @click="showLabels = !showLabels"
+        >
+          {{ showLabels ? 'Masquer besoins/offres' : 'Montrer besoins/offres' }}
+        </button>
+      </div>
 
-    <!-- Bandeau info mode actif -->
-    <div v-if="mode !== 'none'" class="mode-banner">
-      <span>
-        Mode {{ MODE_LABELS[mode] }} actif -
-        {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
-      </span>
-      <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
+      <ClientOnly>
+        <CodevGraph
+          :fiches="fiches"
+          :matches="matches"
+          :mode="mode"
+          :show-labels="showLabels"
+          @select-fiche="onSelectFiche"
+        />
+        <template #fallback>
+          <div class="graph-fallback">Chargement du graphe...</div>
+        </template>
+      </ClientOnly>
+
+      <!-- Bandeau info mode actif -->
+      <div v-if="mode !== 'none'" class="mode-banner">
+        <span>
+          Mode {{ MODE_LABELS[mode] }} actif -
+          {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
+        </span>
+        <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
+      </div>
+
+      <!-- Boutons matching -->
+      <div class="matching-controls">
+        <button
+          :class="{ active: mode === 'alliance' }"
+          style="--mode-color: #f97316"
+          @click="setMode('alliance')"
+          type="button"
+        >
+          Alliance
+          <span class="hint">besoins partages</span>
+        </button>
+        <button
+          :class="{ active: mode === 'surprise' }"
+          style="--mode-color: #3b82f6"
+          @click="setMode('surprise')"
+          type="button"
+        >
+          Surprise
+          <span class="hint">offres partagees</span>
+        </button>
+        <button
+          v-if="mode !== 'none'"
+          class="reset"
+          @click="setMode('none')"
+          type="button"
+        >
+          Effacer
+        </button>
+      </div>
     </div>
 
-    <!-- Boutons matching -->
-    <div class="matching-controls">
-      <button
-        :class="{ active: mode === 'solution' }"
-        style="--mode-color: #22c55e"
-        @click="setMode('solution')"
-        type="button"
-      >
-        Solution
-        <span class="hint">besoin - offre</span>
-      </button>
-      <button
-        :class="{ active: mode === 'alliance' }"
-        style="--mode-color: #f97316"
-        @click="setMode('alliance')"
-        type="button"
-      >
-        Alliance
-        <span class="hint">besoins partages</span>
-      </button>
-      <button
-        :class="{ active: mode === 'surprise' }"
-        style="--mode-color: #3b82f6"
-        @click="setMode('surprise')"
-        type="button"
-      >
-        Surprise
-        <span class="hint">offres partagees</span>
-      </button>
-      <button
-        v-if="mode !== 'none'"
-        class="reset"
-        @click="setMode('none')"
-        type="button"
-      >
-        Effacer
-      </button>
+    <div v-else-if="tab === 'besoins'" class="list-view">
+      <div v-for="f in fiches" :key="f.id" class="list-card">
+        <div class="list-card-name">{{ f.nom }}</div>
+        <p class="list-card-text">{{ f.besoin }}</p>
+        <NuxtLink :to="`/codev/fiche?id=${f.id}`" class="list-card-link">Modifier</NuxtLink>
+      </div>
+      <div v-if="fiches.length === 0" class="list-empty">Aucune fiche. <NuxtLink to="/codev/fiche">Ajouter la mienne</NuxtLink></div>
+    </div>
+
+    <div v-else-if="tab === 'competences'" class="list-view">
+      <div v-for="f in fiches" :key="f.id" class="list-card">
+        <div class="list-card-name">{{ f.nom }}</div>
+        <p class="list-card-text">{{ f.offre }}</p>
+        <NuxtLink :to="`/codev/fiche?id=${f.id}`" class="list-card-link">Modifier</NuxtLink>
+      </div>
+      <div v-if="fiches.length === 0" class="list-empty">Aucune fiche. <NuxtLink to="/codev/fiche">Ajouter la mienne</NuxtLink></div>
     </div>
 
     <!-- FAB ajouter une fiche -->
@@ -87,6 +104,28 @@
       +
     </NuxtLink>
 
+    <Transition name="sheet">
+      <div v-if="selectedFiche" class="bottom-sheet" @click.self="selectedFiche = null">
+        <div class="sheet-content">
+          <div class="sheet-handle"></div>
+          <div class="sheet-name">{{ selectedFiche.nom }}</div>
+          <div class="sheet-section">
+            <span class="sheet-label">Besoin</span>
+            <p class="sheet-text">{{ selectedFiche.besoin }}</p>
+          </div>
+          <div class="sheet-section">
+            <span class="sheet-label">Ce que j'apporte</span>
+            <p class="sheet-text">{{ selectedFiche.offre }}</p>
+          </div>
+          <div class="sheet-tags" v-if="selectedFiche.hashtags.length">
+            <span v-for="t in selectedFiche.hashtags" :key="t" class="sheet-tag">#{{ t }}</span>
+          </div>
+          <NuxtLink :to="`/codev/fiche?id=${selectedFiche.id}`" class="sheet-edit-btn">Modifier cette fiche</NuxtLink>
+          <button class="sheet-close" @click="selectedFiche = null" type="button">Fermer</button>
+        </div>
+      </div>
+    </Transition>
+
   </div>
 </template>
 
@@ -102,6 +141,9 @@ const fiches = computed(() => data.value?.list ?? [])
 const matches = ref<CodevMatch[]>([])
 const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
 const showLabels = ref(false)
+const tab = ref<'carto' | 'besoins' | 'competences'>('carto')
+const selectedFiche = ref<CodevFiche | null>(null)
+const isMobileView = typeof window !== 'undefined' ? window.innerWidth < 600 : false
 
 const MODE_LABELS: Record<string, string> = {
   solution: 'Solution',
@@ -119,7 +161,11 @@ function setMode(newMode: 'none' | 'solution' | 'alliance' | 'surprise') {
 }
 
 function onSelectFiche(id: number) {
-  navigateTo(`/codev/fiche?id=${id}`)
+  if (isMobileView) {
+    selectedFiche.value = fiches.value.find(f => f.id === id) ?? null
+  } else {
+    navigateTo(`/codev/fiche?id=${id}`)
+  }
 }
 </script>
 
@@ -326,6 +372,37 @@ function onSelectFiche(id: number) {
   opacity: 0.92;
 }
 
+/* ── Tabs ── */
+
+.codev-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
+.codev-tabs button { flex: 1; padding: 8px 4px; border: none; border-radius: 7px; background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: #6b7280; transition: all 0.15s; }
+.codev-tabs button.active { background: white; color: #1a1a2e; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
+
+/* ── List view ── */
+
+.list-view { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
+.list-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
+.list-card-name { font-weight: 700; font-size: 0.95rem; color: #1a1a2e; }
+.list-card-text { font-size: 0.875rem; color: #4b5563; margin: 0; line-height: 1.5; }
+.list-card-link { font-size: 0.8rem; color: #1B4436; text-decoration: none; align-self: flex-end; }
+.list-empty { text-align: center; color: #6b7280; font-size: 0.9rem; }
+
+/* ── Bottom sheet ── */
+
+.bottom-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: flex-end; }
+.sheet-content { background: white; border-radius: 16px 16px 0 0; padding: 16px 20px 32px; width: 100%; display: flex; flex-direction: column; gap: 12px; max-height: 80vh; overflow-y: auto; }
+.sheet-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; align-self: center; margin-bottom: 4px; }
+.sheet-name { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
+.sheet-section { display: flex; flex-direction: column; gap: 4px; }
+.sheet-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
+.sheet-text { font-size: 0.9rem; color: #374151; margin: 0; line-height: 1.5; }
+.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
+.sheet-tag { font-size: 0.75rem; background: #f3f4f6; color: #374151; padding: 2px 8px; border-radius: 12px; }
+.sheet-edit-btn { display: block; text-align: center; background: #1B4436; color: white; border-radius: 8px; padding: 12px; text-decoration: none; font-weight: 600; }
+.sheet-close { background: transparent; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; color: #6b7280; cursor: pointer; font-size: 0.875rem; }
+.sheet-enter-active, .sheet-leave-active { transition: opacity 0.2s; }
+.sheet-enter-from, .sheet-leave-to { opacity: 0; }
+
 /* ── Mobile ── */
 
 @media (max-width: 600px) {