librodrome/app/pages/messages.vue

<template>
  <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="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">
          <!-- 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 page-subtitle py-12">Aucun message pour l'instant.</p>

      <div class="mt-8 text-center">
        <NuxtLink to="/" class="btn-ghost text-sm">
          <div class="i-lucide-arrow-left mr-1 h-3.5 w-3.5" />
          Retour à l'accueil
        </NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
useHead({
  title: 'Messages',
})

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' })
}
</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>