feat(aep): carte AEP — push Gitea 2026-04-28

components/CommentSection.vue

@@ -0,0 +1,100 @@
+<template>
+  <section class="mb-6">
+    <h2
+      class="text-lg font-semibold mb-4"
+      style="color: var(--nav-text);"
+    >
+      Commentaires
+      <span
+        v-if="comments.length"
+        class="ml-2 text-sm font-normal"
+        style="color: var(--nav-text-muted);"
+      >({{ comments.length }})</span>
+    </h2>
+
+    <!-- Texte d'intro -->
+    <p class="text-sm italic mb-4" style="color: var(--nav-text-muted);">
+      Les commentaires servent à confirmer ou attester de la fiabilité des services des organismes référencés.
+    </p>
+
+    <!-- Chargement -->
+    <div v-if="pending" class="text-sm py-4" style="color: var(--nav-text-muted);">
+      Chargement des commentaires…
+    </div>
+
+    <!-- Liste -->
+    <div v-else-if="comments.length" class="space-y-3">
+      <article
+        v-for="comment in comments"
+        :key="comment.Id"
+        class="rounded-xl p-4"
+        style="background: var(--nav-surface); border: 1px solid var(--nav-bg-alt);"
+      >
+        <!-- Méta auteur + date -->
+        <div class="flex items-center gap-2 mb-2">
+          <!-- Avatar initiale -->
+          <div
+            class="w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold shrink-0"
+            style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
+          >{{ initiale(comment.auteur_pseudo) }}</div>
+
+          <span class="text-sm font-medium" style="color: var(--nav-text);">
+            {{ comment.auteur_pseudo || 'Anonyme' }}
+          </span>
+
+          <span v-if="comment.submitted_at" class="text-xs ml-auto" style="color: var(--nav-text-muted);">
+            {{ formatDate(comment.submitted_at) }}
+          </span>
+        </div>
+
+        <!-- Contenu -->
+        <p class="text-sm leading-relaxed" style="color: var(--nav-text);">{{ comment.contenu }}</p>
+      </article>
+    </div>
+
+    <!-- Vide -->
+    <p v-else class="text-sm italic py-2" style="color: var(--nav-text-muted);">
+      Aucun commentaire pour le moment. Partage ton expérience ci-dessous.
+    </p>
+  </section>
+</template>
+
+<script setup lang="ts">
+interface Comment {
+  Id: number
+  auteur_pseudo?: string
+  contenu: string
+  orga_id: number
+  published?: boolean
+  submitted_at?: string
+}
+
+const props = defineProps<{
+  orgId: number
+  refresh?: number  // incrémenter pour forcer un rechargement
+}>()
+
+const { data, pending, refresh } = await useFetch<{ list: Comment[] }>(
+  `/api/comment/${props.orgId}`,
+  { key: `comments-${props.orgId}` }
+)
+
+const comments = computed<Comment[]>(() => data.value?.list ?? [])
+
+// Rechargement si le parent incrément refresh
+watch(() => props.refresh, () => {
+  refresh()
+})
+
+// ── Helpers ─────────────────────────────────────────────────────────────
+function initiale(pseudo?: string): string {
+  if (!pseudo) return '?'
+  return pseudo.trim().charAt(0).toUpperCase()
+}
+
+function formatDate(iso?: string): string {
+  if (!iso) return ''
+  const d = new Date(iso)
+  return d.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
+}
+</script>