Messages : types, réponses, sauts de ligne, data volume

- HomeMessages : type pill (Réaction/Question/Suggestion/Retour) + sélecteur dans le formulaire (sans Réaction)
- HomeMessages : white-space: pre-line sur les messages
- Page /messages : type pill + white-space: pre-line (idem home)
- Admin : badge type coloré + sélecteur d'édition + formulaire réponse
- API : type et reply dans PUT ; readDataYaml/writeDataYaml (data/ volume Docker)
- main.css : overrides light mode text-white/55, /75, /90

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/assets/css/main.css

@@ -106,8 +106,11 @@ a {
 .palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.68) !important; }
 .palette-light .text-white\/65 { color: hsl(var(--color-text) / 0.73) !important; }
 .palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.78) !important; }
+.palette-light .text-white\/55 { color: hsl(var(--color-text) / 0.63) !important; }
+.palette-light .text-white\/75 { color: hsl(var(--color-text) / 0.83) !important; }
 .palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.88) !important; }
 .palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.92) !important; }
+.palette-light .text-white\/90 { color: hsl(var(--color-text) / 0.95) !important; }
 
 /* white backgrounds → surface tones with more contrast */
 .palette-light .bg-white\/5 { background-color: hsl(var(--color-primary) / 0.05) !important; }

app/components/home/HomeMessages.vue

@@ -1,10 +1,11 @@
 <template>
   <section class="section-padding">
     <div class="container-content mx-auto max-w-3xl">
+
     <!-- Formulaire -->
     <UiScrollReveal>
       <div class="message-form-card">
-        <h3 class="font-display text-lg font-bold text-white mb-4">Laisser un message</h3>
+        <h3 class="font-display text-lg font-bold form-title mb-4">Laisser un message</h3>
 
         <form v-if="!submitted" class="space-y-3" @submit.prevent="send">
           <input
@@ -13,7 +14,12 @@
             placeholder="Votre nom"
             class="msg-input"
           />
-          <p class="text-white/30 text-xs -mt-1 px-1">Pour recevoir une réponse, laissez votre e-mail dans le message.</p>
+          <p class="hint-text text-xs -mt-1 px-1">Pour recevoir une réponse, laissez votre e-mail dans le message.</p>
+          <select v-model="form.type" class="msg-input msg-input--select">
+            <option value="question">Question</option>
+            <option value="suggestion">Suggestion</option>
+            <option value="retour">Retour d'expérience</option>
+          </select>
           <textarea
             v-model="form.text"
             placeholder="Votre message"
@@ -30,11 +36,11 @@
 
         <div v-else class="text-center py-6">
           <div class="i-lucide-heart-handshake h-10 w-10 text-primary mx-auto mb-3" />
-          <p class="text-white/90 font-display text-lg font-semibold">Merci pour votre message !</p>
+          <p class="msg-confirm-title font-display text-lg font-semibold">Merci pour votre message !</p>
-          <p class="text-white/55 text-sm mt-2 max-w-md mx-auto leading-relaxed">
+          <p class="msg-confirm-sub text-sm mt-2 max-w-md mx-auto leading-relaxed">
             Il sera lu et traité dans un délai... humainement raisonnable.
           </p>
-          <p class="text-primary/60 text-xs mt-4 italic">
+          <p class="msg-confirm-note text-xs mt-4 italic">
             Chaque message est un premier pas dans l'aventure.
           </p>
         </div>
@@ -44,13 +50,26 @@
     <!-- 2 derniers messages publiés -->
     <UiScrollReveal v-if="messages?.length" :delay="100">
       <div class="mt-8 space-y-4">
-        <h3 class="font-display text-lg font-bold text-white/80 text-center">Derniers messages</h3>
+        <h3 class="font-display text-lg font-bold section-title text-center">Derniers messages</h3>
         <div v-for="msg in messages.slice(0, 2)" :key="msg.id" class="message-card">
-          <p class="text-white/80 text-sm leading-relaxed">{{ msg.text }}</p>
+          <!-- En-tête auteur -->
-          <div class="mt-2 flex items-center gap-2 text-xs text-white/40">
+          <div class="flex items-center gap-2 mb-2">
-            <span class="font-semibold text-white/60">{{ msg.author }}</span>
+            <span class="msg-author font-semibold text-sm">{{ msg.author }}</span>
-            <span>&middot;</span>
+            <span class="type-pill">{{ typeLabel(msg.type) }}</span>
-            <span>{{ formatDate(msg.createdAt) }}</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 class="text-center">
@@ -68,12 +87,23 @@
 <script setup lang="ts">
 const { data: messages } = await useFetch('/api/messages')
 
-const form = reactive({ author: '', text: '' })
+const form = reactive({ author: '', text: '', type: 'question' })
 const sending = ref(false)
 const submitted = ref(false)
 
 const canSend = computed(() => form.text.trim().length > 0)
 
+const TYPE_LABELS: Record<string, string> = {
+  reaction: 'Réaction',
+  question: 'Question',
+  suggestion: 'Suggestion',
+  retour: 'Retour',
+}
+
+function typeLabel(type: string) {
+  return TYPE_LABELS[type] ?? type
+}
+
 async function send() {
   if (!canSend.value) return
   sending.value = true
@@ -106,6 +136,21 @@ function formatDate(iso: string) {
 </script>
 
 <style scoped>
+/* ── Couleurs adaptatives (dark + light) ── */
+.form-title       { color: hsl(var(--color-text)); }
+.hint-text        { color: hsl(var(--color-text) / 0.35); }
+.section-title    { color: hsl(var(--color-text) / 0.85); }
+.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; }
+.msg-confirm-title { color: hsl(var(--color-text) / 0.95); }
+.msg-confirm-sub  { color: hsl(var(--color-text) / 0.6); }
+.msg-confirm-note { color: hsl(var(--color-primary) / 0.65); }
+.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); }
+
+/* ── Carte formulaire ── */
 .message-form-card {
   background: hsl(var(--color-surface));
   border: 1px solid hsl(var(--color-text) / 0.1);
@@ -121,9 +166,15 @@ function formatDate(iso: string) {
   background: hsl(var(--color-bg));
   color: hsl(var(--color-text));
   font-size: 0.875rem;
+  font-family: inherit;
   transition: border-color 0.2s;
 }
 
+.msg-input--select {
+  width: auto;
+  cursor: pointer;
+}
+
 .msg-input::placeholder {
   color: hsl(var(--color-text) / 0.35);
 }
@@ -133,10 +184,53 @@ function formatDate(iso: string) {
   border-color: hsl(var(--color-primary) / 0.5);
 }
 
+/* ── Carte message ── */
 .message-card {
   background: hsl(var(--color-surface));
   border: 1px solid hsl(var(--color-text) / 0.1);
   border-radius: 0.75rem;
   padding: 1rem 1.25rem;
 }
+
+.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);
+}
+
+/* ── Réponse avec liaison graphique ── */
+.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>

app/pages/admin/messages.vue

@@ -5,7 +5,7 @@
       <span class="text-sm text-white/40">{{ messages?.length || 0 }} message(s)</span>
     </div>
 
-    <div v-if="messages?.length" class="space-y-3">
+    <div v-if="messages?.length" class="space-y-4">
       <div
         v-for="msg in messages"
         :key="msg.id"
@@ -17,6 +17,9 @@
           <div class="flex items-center gap-2 min-w-0">
             <span class="font-semibold text-white text-sm truncate">{{ msg.author }}</span>
             <span v-if="msg.email" class="text-white/30 text-xs truncate">{{ msg.email }}</span>
+            <span class="type-badge" :class="`type-badge--${msg.type || 'reaction'}`">
+              {{ typeLabel(msg.type) }}
+            </span>
           </div>
           <div class="flex items-center gap-2 shrink-0">
             <span class="text-xs text-white/30">{{ formatDate(msg.createdAt) }}</span>
@@ -29,23 +32,54 @@
           </div>
         </div>
 
-        <!-- Texte éditable -->
+        <!-- Texte du message -->
-        <div v-if="editing === msg.id" class="mb-3">
+        <div v-if="editing === msg.id" class="mb-3 space-y-2">
-          <input
+          <input v-model="editForm.author" class="admin-input w-full" placeholder="Auteur" />
-            v-model="editForm.author"
+          <select v-model="editForm.type" class="admin-input w-full">
-            class="admin-input mb-2 w-full"
+            <option value="question">Question</option>
-            placeholder="Auteur"
+            <option value="suggestion">Suggestion</option>
-          />
+            <option value="retour">Retour d'expérience</option>
-          <textarea
+          </select>
-            v-model="editForm.text"
+          <textarea v-model="editForm.text" class="admin-input w-full" rows="3" />
-            class="admin-input w-full"
+        </div>
-            rows="3"
+        <p v-else class="msg-text text-sm leading-relaxed mb-3">{{ msg.text }}</p>
-          />
+
+        <!-- Réponse existante -->
+        <div v-if="msg.reply && replyEditing !== msg.id" class="reply-block mb-3">
+          <div class="flex items-center justify-between mb-1">
+            <span class="text-xs font-semibold text-primary/80">Réponse publiée</span>
+            <span class="text-xs text-white/30">{{ formatDate(msg.reply.publishedAt) }}</span>
+          </div>
+          <p class="text-white/60 text-sm leading-relaxed">{{ msg.reply.text }}</p>
+          <button class="action-btn mt-2 text-xs" @click="startReply(msg)">
+            <div class="i-lucide-pencil h-3 w-3" />
+            Modifier la réponse
+          </button>
+        </div>
+
+        <!-- Formulaire réponse -->
+        <div v-if="replyEditing === msg.id" class="reply-form mb-3">
+          <textarea
+            v-model="replyText"
+            class="admin-input w-full text-sm"
+            rows="3"
+            placeholder="Votre réponse..."
+          />
+          <div class="flex gap-2 mt-2">
+            <button class="action-btn action-btn--save" @click="saveReply(msg)">
+              <div class="i-lucide-check h-3.5 w-3.5" />
+              Publier la réponse
+            </button>
+            <button v-if="msg.reply" class="action-btn action-btn--danger" @click="removeReply(msg)">
+              <div class="i-lucide-x h-3.5 w-3.5" />
+              Supprimer la réponse
+            </button>
+            <button class="action-btn" @click="replyEditing = null">Annuler</button>
+          </div>
         </div>
-        <p v-else class="text-white/70 text-sm leading-relaxed mb-3">{{ msg.text }}</p>
 
         <!-- Actions -->
-        <div class="flex items-center gap-2">
+        <div class="flex items-center gap-2 flex-wrap">
           <button class="action-btn" @click="togglePublished(msg)">
             <div :class="msg.published ? 'i-lucide-eye-off' : 'i-lucide-eye'" class="h-3.5 w-3.5" />
             {{ msg.published ? 'Dépublier' : 'Publier' }}
@@ -56,15 +90,18 @@
               <div class="i-lucide-check h-3.5 w-3.5" />
               Valider
             </button>
-            <button class="action-btn" @click="editing = null">
+            <button class="action-btn" @click="editing = null">Annuler</button>
-              Annuler
-            </button>
           </template>
           <button v-else class="action-btn" @click="startEdit(msg)">
             <div class="i-lucide-pencil h-3.5 w-3.5" />
             Modifier
           </button>
 
+          <button v-if="replyEditing !== msg.id && !msg.reply" class="action-btn action-btn--reply" @click="startReply(msg)">
+            <div class="i-lucide-reply h-3.5 w-3.5" />
+            Répondre
+          </button>
+
           <button class="action-btn action-btn--danger ml-auto" @click="remove(msg)">
             <div class="i-lucide-trash-2 h-3.5 w-3.5" />
             Supprimer
@@ -86,18 +123,33 @@ definePageMeta({
 const { data: messages, refresh } = await useFetch<any[]>('/api/admin/messages')
 
 const editing = ref<number | null>(null)
-const editForm = reactive({ author: '', text: '' })
+const editForm = reactive({ author: '', text: '', type: 'question' })
+
+const replyEditing = ref<number | null>(null)
+const replyText = ref('')
+
+const TYPE_LABELS: Record<string, string> = {
+  reaction: 'Réaction',
+  question: 'Question',
+  suggestion: 'Suggestion',
+  retour: 'Retour',
+}
+
+function typeLabel(type: string) {
+  return TYPE_LABELS[type] ?? type
+}
 
 function startEdit(msg: any) {
   editing.value = msg.id
   editForm.author = msg.author
   editForm.text = msg.text
+  editForm.type = TYPE_LABELS[msg.type] ? msg.type : 'question'
 }
 
 async function saveEdit(msg: any) {
   await $fetch(`/api/admin/messages/${msg.id}`, {
     method: 'PUT',
-    body: { author: editForm.author, text: editForm.text },
+    body: { author: editForm.author, text: editForm.text, type: editForm.type },
   })
   editing.value = null
   await refresh()
@@ -111,6 +163,29 @@ async function togglePublished(msg: any) {
   await refresh()
 }
 
+function startReply(msg: any) {
+  replyEditing.value = msg.id
+  replyText.value = msg.reply?.text ?? ''
+}
+
+async function saveReply(msg: any) {
+  await $fetch(`/api/admin/messages/${msg.id}`, {
+    method: 'PUT',
+    body: { reply: replyText.value.trim() || null },
+  })
+  replyEditing.value = null
+  await refresh()
+}
+
+async function removeReply(msg: any) {
+  await $fetch(`/api/admin/messages/${msg.id}`, {
+    method: 'PUT',
+    body: { reply: null },
+  })
+  replyEditing.value = null
+  await refresh()
+}
+
 async function remove(msg: any) {
   if (!confirm(`Supprimer le message de "${msg.author}" ?`)) return
   await $fetch(`/api/admin/messages/${msg.id}`, { method: 'DELETE' })
@@ -159,6 +234,45 @@ function formatDate(iso: string) {
   color: hsl(var(--color-accent));
 }
 
+.type-badge {
+  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.12);
+  color: hsl(var(--color-primary) / 0.7);
+}
+
+.type-badge--question {
+  background: hsl(220 70% 50% / 0.12);
+  color: hsl(220 70% 65%);
+}
+
+.type-badge--suggestion {
+  background: hsl(280 60% 55% / 0.12);
+  color: hsl(280 60% 70%);
+}
+
+.type-badge--retour {
+  background: hsl(35 70% 50% / 0.12);
+  color: hsl(35 70% 65%);
+}
+
+.reply-block {
+  background: hsl(var(--color-primary) / 0.06);
+  border-left: 2px solid hsl(var(--color-primary) / 0.3);
+  border-radius: 0 0.5rem 0.5rem 0;
+  padding: 0.75rem 1rem;
+}
+
+.reply-form {
+  background: hsl(var(--color-surface) / 0.5);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+
 .admin-input {
   padding: 0.375rem 0.5rem;
   border-radius: 0.375rem;
@@ -201,6 +315,20 @@ function formatDate(iso: string) {
   background: hsl(142 70% 40% / 0.1);
 }
 
+.action-btn--reply {
+  border-color: hsl(var(--color-primary) / 0.3);
+  color: hsl(var(--color-primary) / 0.8);
+}
+
+.action-btn--reply:hover {
+  background: hsl(var(--color-primary) / 0.08);
+}
+
+.msg-text {
+  color: hsl(var(--color-text) / 0.72);
+  white-space: pre-line;
+}
+
 .action-btn--danger:hover {
   background: hsl(0 70% 40% / 0.1);
   border-color: hsl(0 70% 40% / 0.3);

app/pages/messages.vue

@@ -48,6 +48,7 @@ useHead({
 const { data: messages } = await useFetch('/api/messages')
 
 const TYPE_LABELS: Record<string, string> = {
+  reaction: 'Réaction',
   question: 'Question',
   suggestion: 'Suggestion',
   retour: 'Retour',

server/api/admin/messages/[id].delete.ts

@@ -1,3 +1,5 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async (event) => {
   const id = Number(getRouterParam(event, 'id'))
 
@@ -5,7 +7,7 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, statusMessage: 'ID invalide' })
   }
 
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)
 
   const index = data.messages.findIndex(m => m.id === id)
   if (index === -1) {
@@ -13,8 +15,7 @@ export default defineEventHandler(async (event) => {
   }
 
   data.messages.splice(index, 1)
-  await writeYaml('messages.yml', data)
+  await writeDataYaml('messages.yml', data)
-  gitSyncContent(`Suppression message #${id}`, ['site/messages.yml'])
 
   return { ok: true }
 })

server/api/admin/messages/[id].put.ts

@@ -1,3 +1,5 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async (event) => {
   const id = Number(getRouterParam(event, 'id'))
 
@@ -5,8 +7,15 @@ export default defineEventHandler(async (event) => {
     throw createError({ statusCode: 400, statusMessage: 'ID invalide' })
   }
 
-  const body = await readBody<{ text?: string; published?: boolean; author?: string }>(event)
+  const body = await readBody<{
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+    text?: string
+    published?: boolean
+    author?: string
+    type?: string
+    reply?: string | null
+  }>(event)
+
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)
 
   const message = data.messages.find(m => m.id === id)
   if (!message) {
@@ -16,9 +25,14 @@ export default defineEventHandler(async (event) => {
   if (body.text !== undefined) message.text = body.text
   if (body.published !== undefined) message.published = body.published
   if (body.author !== undefined) message.author = body.author
+  if (body.type !== undefined) message.type = body.type
+  if ('reply' in body) {
+    message.reply = body.reply
+      ? { text: body.reply, publishedAt: new Date().toISOString() }
+      : null
+  }
 
-  await writeYaml('messages.yml', data)
+  await writeDataYaml('messages.yml', data)
-  gitSyncContent(`Mise à jour message #${id}`, ['site/messages.yml'])
 
   return { ok: true }
 })

server/api/admin/messages/index.get.ts

@@ -1,4 +1,6 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async () => {
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)
   return data.messages.sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
 })

server/api/messages/index.get.ts

@@ -1,7 +1,8 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async () => {
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)
-  const published = data.messages
+  return data.messages
     .filter(m => m.published)
     .sort((a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime())
-  return published
 })

server/api/messages/index.post.ts

@@ -1,24 +1,28 @@
+const EMPTY = { messages: [] as any[] }
+
 export default defineEventHandler(async (event) => {
-  const body = await readBody<{ author: string; email?: string; text: string }>(event)
+  const body = await readBody<{ author: string; email?: string; text: string; type?: string }>(event)
 
   if (!body.text?.trim()) {
     throw createError({ statusCode: 400, statusMessage: 'Message requis' })
   }
 
-  const data = await readYaml<{ messages: any[] }>('messages.yml')
+  const data = await readDataYaml<{ messages: any[] }>('messages.yml', EMPTY)
 
   const maxId = data.messages.reduce((max, m) => Math.max(max, m.id || 0), 0)
 
   data.messages.push({
     id: maxId + 1,
-    author: body.author.trim(),
+    author: body.author?.trim() || 'Anonyme',
     email: body.email?.trim() || '',
     text: body.text.trim(),
+    type: body.type || 'reaction',
     published: false,
     createdAt: new Date().toISOString(),
+    reply: null,
   })
 
-  await writeYaml('messages.yml', data)
+  await writeDataYaml('messages.yml', data)
 
   return { ok: true }
 })

server/utils/content.ts

@@ -1,8 +1,10 @@
-import { readFile, writeFile } from 'node:fs/promises'
+import { readFile, writeFile, mkdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
 import { join } from 'node:path'
 import yaml from 'yaml'
 
 const dataDir = join(process.cwd(), 'site')
+const runtimeDataDir = join(process.cwd(), 'data')
 
 const cache = new Map<string, { data: unknown; mtime: number }>()
 
@@ -35,3 +37,19 @@ export function invalidateCache(relativePath?: string): void {
     cache.clear()
   }
 }
+
+// Runtime data — stored in data/ (Docker volume, never overwritten by deploys)
+
+export async function readDataYaml<T = unknown>(relativePath: string, defaultValue: T): Promise<T> {
+  const filePath = join(runtimeDataDir, relativePath)
+  if (!existsSync(filePath)) return defaultValue
+  const raw = await readFile(filePath, 'utf-8')
+  return yaml.parse(raw) as T
+}
+
+export async function writeDataYaml(relativePath: string, data: unknown): Promise<void> {
+  await mkdir(runtimeDataDir, { recursive: true })
+  const filePath = join(runtimeDataDir, relativePath)
+  const raw = yaml.stringify(data, { lineWidth: 120 })
+  await writeFile(filePath, raw, 'utf-8')
+}