librodrome/app/pages/admin/messages.vue

<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>