initiation librodrome

app/pages/admin/messages.vue

@@ -0,0 +1,209 @@
+<template>
+  <div>
+    <div class="flex items-center justify-between mb-6">
+      <h1 class="font-display text-2xl font-bold text-white">Messages</h1>
+      <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-for="msg in messages"
+        :key="msg.id"
+        class="msg-row"
+        :class="{ 'msg-row--draft': !msg.published }"
+      >
+        <!-- En-tête -->
+        <div class="flex items-center justify-between gap-4 mb-2">
+          <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>
+          </div>
+          <div class="flex items-center gap-2 shrink-0">
+            <span class="text-xs text-white/30">{{ formatDate(msg.createdAt) }}</span>
+            <span
+              class="status-badge"
+              :class="msg.published ? 'status-badge--pub' : 'status-badge--draft'"
+            >
+              {{ msg.published ? 'Publié' : 'En attente' }}
+            </span>
+          </div>
+        </div>
+
+        <!-- Texte éditable -->
+        <div v-if="editing === msg.id" class="mb-3">
+          <input
+            v-model="editForm.author"
+            class="admin-input mb-2 w-full"
+            placeholder="Auteur"
+          />
+          <textarea
+            v-model="editForm.text"
+            class="admin-input w-full"
+            rows="3"
+          />
+        </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">
+          <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' }}
+          </button>
+
+          <template v-if="editing === msg.id">
+            <button class="action-btn action-btn--save" @click="saveEdit(msg)">
+              <div class="i-lucide-check h-3.5 w-3.5" />
+              Valider
+            </button>
+            <button class="action-btn" @click="editing = null">
+              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 class="action-btn action-btn--danger ml-auto" @click="remove(msg)">
+            <div class="i-lucide-trash-2 h-3.5 w-3.5" />
+            Supprimer
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <p v-else class="text-center text-white/40 py-12">Aucun message.</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'admin',
+  middleware: 'admin',
+})
+
+const { data: messages, refresh } = await useFetch<any[]>('/api/admin/messages')
+
+const editing = ref<number | null>(null)
+const editForm = reactive({ author: '', text: '' })
+
+function startEdit(msg: any) {
+  editing.value = msg.id
+  editForm.author = msg.author
+  editForm.text = msg.text
+}
+
+async function saveEdit(msg: any) {
+  await $fetch(`/api/admin/messages/${msg.id}`, {
+    method: 'PUT',
+    body: { author: editForm.author, text: editForm.text },
+  })
+  editing.value = null
+  await refresh()
+}
+
+async function togglePublished(msg: any) {
+  await $fetch(`/api/admin/messages/${msg.id}`, {
+    method: 'PUT',
+    body: { published: !msg.published },
+  })
+  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' })
+  await refresh()
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  })
+}
+</script>
+
+<style scoped>
+.msg-row {
+  background: hsl(20 8% 6%);
+  border: 1px solid hsl(20 8% 14%);
+  border-radius: 0.75rem;
+  padding: 1rem 1.25rem;
+}
+
+.msg-row--draft {
+  border-left: 3px solid hsl(36 80% 52%);
+}
+
+.status-badge {
+  font-size: 0.65rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  padding: 0.15rem 0.5rem;
+  border-radius: 9999px;
+}
+
+.status-badge--pub {
+  background: hsl(142 70% 40% / 0.15);
+  color: hsl(142 70% 60%);
+}
+
+.status-badge--draft {
+  background: hsl(36 80% 52% / 0.15);
+  color: hsl(36 80% 66%);
+}
+
+.admin-input {
+  padding: 0.375rem 0.5rem;
+  border-radius: 0.375rem;
+  border: 1px solid hsl(20 8% 18%);
+  background: hsl(20 8% 6%);
+  color: white;
+  font-size: 0.8rem;
+}
+
+.admin-input:focus {
+  outline: none;
+  border-color: hsl(12 76% 48% / 0.5);
+}
+
+.action-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.3rem 0.6rem;
+  border-radius: 0.375rem;
+  font-size: 0.75rem;
+  color: hsl(20 8% 60%);
+  background: none;
+  border: 1px solid hsl(20 8% 16%);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  background: hsl(20 8% 10%);
+  color: white;
+}
+
+.action-btn--save {
+  border-color: hsl(142 70% 40% / 0.3);
+  color: hsl(142 70% 60%);
+}
+
+.action-btn--save:hover {
+  background: hsl(142 70% 40% / 0.1);
+}
+
+.action-btn--danger:hover {
+  background: hsl(0 70% 40% / 0.1);
+  border-color: hsl(0 70% 40% / 0.3);
+  color: hsl(0 70% 60%);
+}
+</style>