From c52fa6007dfbeb9b22c9924020a7483d5b344e33 Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Thu, 19 Mar 2026 05:41:24 +0100
Subject: [PATCH] =?UTF-8?q?Page=20/messages=20:=20afficher=20les=20r=C3=A9?=
 =?UTF-8?q?ponses=20publi=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Type badge + auteur + date comme sur la home
- Réponse avec liaison graphique (reply-thread/connector/block)
- Style adaptatif light/dark cohérent avec HomeMessages.vue

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/pages/messages.vue | 86 ++++++++++++++++++++++++++++++++++++++----
 1 file changed, 79 insertions(+), 7 deletions(-)

diff --git a/app/pages/messages.vue b/app/pages/messages.vue
index e7226cc..146ca9d 100644
--- a/app/pages/messages.vue
+++ b/app/pages/messages.vue
@@ -2,20 +2,33 @@
   <div class="section-padding">
     <div class="container-content mx-auto max-w-3xl">
       <h1 class="font-display text-3xl font-bold text-gradient mb-2">Messages des visiteurs</h1>
-      <p class="text-white/50 mb-8">Les mots laissés par celles et ceux qui passent par ici.</p>
+      <p class="page-subtitle mb-8">Les mots laissés par celles et ceux qui passent par ici.</p>
 
       <div v-if="messages?.length" class="space-y-4">
         <div v-for="msg in messages" :key="msg.id" class="message-card">
-          <p class="text-white/80 leading-relaxed">{{ msg.text }}</p>
-          <div class="mt-3 flex items-center gap-2 text-xs text-white/40">
-            <span class="font-semibold text-white/60">{{ msg.author }}</span>
-            <span>&middot;</span>
-            <span>{{ formatDate(msg.createdAt) }}</span>
+          <!-- En-tête auteur -->
+          <div class="flex items-center gap-2 mb-2">
+            <span class="msg-author font-semibold text-sm">{{ msg.author }}</span>
+            <span class="type-pill">{{ typeLabel(msg.type) }}</span>
+            <span class="msg-date text-xs ml-auto">{{ formatDate(msg.createdAt) }}</span>
+          </div>
+          <!-- Texte du message -->
+          <p class="msg-text text-sm leading-relaxed">{{ msg.text }}</p>
+          <!-- Réponse -->
+          <div v-if="msg.reply?.text" class="reply-thread">
+            <div class="reply-connector" aria-hidden="true" />
+            <div class="reply-block">
+              <div class="flex items-center gap-1.5 mb-1">
+                <div class="i-lucide-corner-down-right h-3 w-3 reply-icon" />
+                <span class="reply-author text-xs font-semibold">Le Librodrome</span>
+              </div>
+              <p class="reply-text text-sm leading-relaxed italic">{{ msg.reply.text }}</p>
+            </div>
           </div>
         </div>
       </div>
 
-      <p v-else class="text-center text-white/40 py-12">Aucun message pour l'instant.</p>
+      <p v-else class="text-center page-subtitle py-12">Aucun message pour l'instant.</p>
 
       <div class="mt-8 text-center">
         <NuxtLink to="/" class="btn-ghost text-sm">
@@ -34,6 +47,16 @@ useHead({
 
 const { data: messages } = await useFetch('/api/messages')
 
+const TYPE_LABELS: Record<string, string> = {
+  question: 'Question',
+  suggestion: 'Suggestion',
+  retour: 'Retour',
+}
+
+function typeLabel(type: string) {
+  return TYPE_LABELS[type] ?? type
+}
+
 function formatDate(iso: string) {
   const date = new Date(iso)
   return date.toLocaleDateString('fr-FR', { day: 'numeric', month: 'long', year: 'numeric' })
@@ -41,10 +64,59 @@ function formatDate(iso: string) {
 </script>
 
 <style scoped>
+.page-subtitle  { color: hsl(var(--color-text) / 0.5); }
+.msg-author     { color: hsl(var(--color-text) / 0.75); }
+.msg-date       { color: hsl(var(--color-text) / 0.38); }
+.msg-text       { color: hsl(var(--color-text) / 0.78); white-space: pre-line; }
+.reply-icon     { color: hsl(var(--color-primary) / 0.5); }
+.reply-author   { color: hsl(var(--color-primary) / 0.8); }
+.reply-text     { color: hsl(var(--color-text) / 0.62); }
+
 .message-card {
   background: hsl(var(--color-surface));
   border: 1px solid hsl(var(--color-text) / 0.1);
   border-radius: 0.75rem;
   padding: 1.25rem 1.5rem;
 }
+
+.type-pill {
+  font-size: 0.6rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.1rem 0.45rem;
+  border-radius: 9999px;
+  background: hsl(var(--color-primary) / 0.1);
+  color: hsl(var(--color-primary) / 0.7);
+}
+
+.reply-thread {
+  position: relative;
+  display: flex;
+  gap: 0;
+  margin-top: 0.75rem;
+  padding-left: 1.25rem;
+}
+
+.reply-connector {
+  position: absolute;
+  left: 0.5rem;
+  top: -0.5rem;
+  bottom: 0.5rem;
+  width: 2px;
+  background: linear-gradient(
+    to bottom,
+    hsl(var(--color-primary) / 0.35),
+    hsl(var(--color-primary) / 0.15)
+  );
+  border-radius: 2px;
+}
+
+.reply-block {
+  flex: 1;
+  background: hsl(var(--color-primary) / 0.05);
+  border-left: 2px solid hsl(var(--color-primary) / 0.25);
+  border-radius: 0 0.5rem 0.5rem 0;
+  padding: 0.6rem 0.875rem;
+}
 </style>