librodrome/app/pages/admin/book/index.vue

<template>
  <div>
    <div class="flex items-center justify-between mb-6">
      <h1 class="font-display text-2xl font-bold text-white">Chapitres</h1>
      <AdminSaveButton :saving="saving" :saved="saved" @save="saveOrder" />
    </div>

    <div class="flex flex-col gap-2">
      <div
        v-for="(chapter, i) in chapters"
        :key="chapter.slug"
        class="chapter-item"
        draggable="true"
        @dragstart="onDragStart(i, $event)"
        @dragover.prevent="onDragOver(i)"
        @dragend="onDragEnd"
        :class="{ 'chapter-item--dragging': dragIdx === i, 'chapter-item--over': dropIdx === i && dropIdx !== dragIdx }"
      >
        <div class="drag-handle" aria-label="Réordonner">
          <div class="i-lucide-grip-vertical h-4 w-4" />
        </div>
        <span class="chapter-order">{{ String(i + 1).padStart(2, '0') }}</span>
        <NuxtLink
          :to="`/admin/book/${chapter.slug}`"
          class="chapter-title"
        >
          {{ chapter.title }}
        </NuxtLink>
        <button
          class="delete-btn"
          @click="removeChapter(chapter.slug)"
          aria-label="Supprimer"
        >
          <div class="i-lucide-trash-2 h-4 w-4" />
        </button>
        <NuxtLink :to="`/admin/book/${chapter.slug}`">
          <div class="i-lucide-chevron-right h-4 w-4 text-white/20" />
        </NuxtLink>
      </div>
    </div>

    <!-- Add chapter -->
    <div class="mt-6 flex items-end gap-3">
      <div class="flex-1">
        <label class="block text-xs text-white/40 mb-1">Titre</label>
        <input v-model="newTitle" class="admin-input w-full" placeholder="Nouveau chapitre" />
      </div>
      <div>
        <label class="block text-xs text-white/40 mb-1">Slug</label>
        <input v-model="newSlug" class="admin-input w-full font-mono text-xs" placeholder="12-slug" />
      </div>
      <button class="add-btn" @click="addChapter" :disabled="!newTitle || !newSlug">
        <div class="i-lucide-plus h-4 w-4" />
        Ajouter
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  layout: 'admin',
  middleware: 'admin',
})

const { data: chapters, refresh } = await useFetch<any[]>('/api/admin/chapters')
const saving = ref(false)
const saved = ref(false)
const newTitle = ref('')
const newSlug = ref('')

// Drag & drop state
const dragIdx = ref<number | null>(null)
const dropIdx = ref<number | null>(null)

function onDragStart(i: number, e: DragEvent) {
  dragIdx.value = i
  if (e.dataTransfer) {
    e.dataTransfer.effectAllowed = 'move'
  }
}

function onDragOver(i: number) {
  dropIdx.value = i
}

function onDragEnd() {
  if (dragIdx.value !== null && dropIdx.value !== null && dragIdx.value !== dropIdx.value && chapters.value) {
    const [moved] = chapters.value.splice(dragIdx.value, 1)
    chapters.value.splice(dropIdx.value, 0, moved)
  }
  dragIdx.value = null
  dropIdx.value = null
}

async function saveOrder() {
  if (!chapters.value) return
  saving.value = true
  saved.value = false
  try {
    const orderedChapters = chapters.value.map((ch: any, i: number) => ({
      slug: ch.slug,
      order: i + 1,
    }))
    await $fetch('/api/admin/chapters', {
      method: 'PUT',
      body: { chapters: orderedChapters },
    })
    saved.value = true
    setTimeout(() => { saved.value = false }, 2000)
  }
  finally {
    saving.value = false
  }
}

async function addChapter() {
  if (!newTitle.value || !newSlug.value) return
  const order = (chapters.value?.length ?? 0) + 1
  await $fetch('/api/admin/chapters', {
    method: 'POST',
    body: { slug: newSlug.value, title: newTitle.value, order },
  })
  newTitle.value = ''
  newSlug.value = ''
  await refresh()
}

async function removeChapter(slug: string) {
  if (!confirm(`Supprimer le chapitre "${slug}" ?`)) return
  await $fetch(`/api/admin/chapters/${slug}`, { method: 'DELETE' })
  await refresh()
}
</script>

<style scoped>
.chapter-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border: 1px solid hsl(20 8% 14%);
  border-radius: 0.5rem;
  transition: all 0.2s;
}

.chapter-item:hover {
  border-color: hsl(12 76% 48% / 0.3);
  background: hsl(20 8% 6%);
}

.chapter-item--dragging {
  opacity: 0.4;
}

.chapter-item--over {
  border-top: 2px solid hsl(12 76% 48%);
}

.drag-handle {
  cursor: grab;
  padding: 0.25rem;
  color: hsl(20 8% 35%);
  flex-shrink: 0;
}

.drag-handle:active {
  cursor: grabbing;
}

.chapter-order {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  color: hsl(12 76% 48% / 0.5);
  font-weight: 600;
  width: 1.75rem;
}

.chapter-title {
  flex: 1;
  color: white;
  font-weight: 500;
  text-decoration: none;
}

.chapter-title:hover {
  color: hsl(12 76% 68%);
}

.delete-btn {
  flex-shrink: 0;
  padding: 0.375rem;
  border-radius: 0.375rem;
  color: hsl(0 60% 50%);
  background: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}

.delete-btn:hover {
  background: hsl(0 60% 50% / 0.1);
}

.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);
}

.add-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid hsl(20 8% 25%);
  background: none;
  color: hsl(20 8% 55%);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.add-btn:hover:not(:disabled) {
  border-color: hsl(12 76% 48% / 0.5);
  color: hsl(12 76% 68%);
}

.add-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
</style>