Refactoring complet : contenu livre, config unique, routes, admin et light mode

- Source unique : supprime app/data/librodrome.config.yml, renomme site/ en bookplayer.config.yml - Morceaux : renommés avec slugs lisibles, fichiers audio renommés, inversion ch2↔ch3 corrigée - Chapitres : 11 fichiers .md réécrits avec le vrai contenu du livre (synthèse fidèle du PDF) - Routes : /lire → /modele-eco, /ecouter → /en-musique, redirections 301 - Admin chapitres : champs structurés (titre, description, temps lecture), compteur mots - Éditeur markdown : mode split, plein écran, support Tab, meilleur rendu aperçu - Admin morceaux : drag & drop, ajout/suppression, gestion playlist - Light mode : palettes printemps/été plus saturées et contrastées, teintes primary - Raccourcis clavier player : espace, flèches gauche/droite - Paroles : toggle supprimé, toujours visibles et scrollables - Nouvelles pages : autonomie, evenement Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 20:20:52 +01:00
parent 4fce862df6
commit 2f438d9d7a
70 changed files with 2125 additions and 1385 deletions
--- a/app/pages/admin/book/[slug].vue
+++ b/app/pages/admin/book/[slug].vue
@@ -6,24 +6,36 @@
          ← Chapitres
        </NuxtLink>
        <h1 class="font-display text-2xl font-bold text-white mt-1">
-          {{ chapter?.slug }}
+          {{ chapterTitle || slug }}
        </h1>
+        <span class="text-xs text-white/30 font-mono">{{ slug }}</span>
+      </div>
+      <div class="flex items-center gap-3">
+        <span v-if="wordCount" class="text-xs text-white/30">{{ wordCount }} mots</span>
+        <AdminSaveButton :saving="saving" :saved="saved" @save="save" />
      </div>
-      <AdminSaveButton :saving="saving" :saved="saved" @save="save" />
    </div>

    <template v-if="chapter">
-      <AdminFormSection title="Frontmatter" open>
-        <textarea
-          v-model="frontmatter"
-          class="fm-textarea"
-          rows="6"
-          spellcheck="false"
-        />
+      <AdminFormSection title="Métadonnées">
+        <div class="grid gap-3 sm:grid-cols-2">
+          <div>
+            <label class="field-label">Titre</label>
+            <input v-model="title" class="field-input" placeholder="Titre du chapitre" />
+          </div>
+          <div>
+            <label class="field-label">Temps de lecture</label>
+            <input v-model="readingTime" class="field-input" placeholder="15 min" />
+          </div>
+          <div class="sm:col-span-2">
+            <label class="field-label">Description</label>
+            <input v-model="description" class="field-input" placeholder="Description courte pour le SEO" />
+          </div>
+        </div>
      </AdminFormSection>

-      <AdminFormSection title="Contenu Markdown" open>
-        <AdminMarkdownEditor v-model="body" :rows="30" />
+      <AdminFormSection title="Contenu" open>
+        <AdminMarkdownEditor v-model="body" :rows="35" />
      </AdminFormSection>
    </template>
  </div>
@@ -40,16 +52,33 @@ const slug = computed(() => route.params.slug as string)

 const { data: chapter } = await useFetch(() => `/api/admin/chapters/${slug.value}`)

-const frontmatter = ref('')
+const title = ref('')
+const description = ref('')
+const readingTime = ref('')
 const body = ref('')

+const chapterTitle = computed(() => title.value)
+const wordCount = computed(() => {
+  if (!body.value) return 0
+  return body.value.trim().split(/\s+/).filter(Boolean).length
+})
+
 watch(chapter, (val) => {
  if (val) {
-    frontmatter.value = val.frontmatter ?? ''
+    // Parse frontmatter fields
+    const fm = val.frontmatter ?? ''
+    title.value = extractFmField(fm, 'title')
+    description.value = extractFmField(fm, 'description')
+    readingTime.value = extractFmField(fm, 'readingTime')
    body.value = val.body ?? ''
  }
 }, { immediate: true })

+function extractFmField(fm: string, field: string): string {
+  const match = fm.match(new RegExp(`^${field}:\\s*"?([^"\\n]*)"?`, 'm'))
+  return match ? match[1].trim() : ''
+}
+
 const saving = ref(false)
 const saved = ref(false)

@@ -57,12 +86,17 @@ async function save() {
  saving.value = true
  saved.value = false
  try {
+    const order = chapter.value?.frontmatter?.match(/order:\s*(\d+)/)?.[1] ?? '1'
+    const frontmatter = [
+      `title: "${title.value}"`,
+      `description: "${description.value}"`,
+      `order: ${order}`,
+      `readingTime: "${readingTime.value}"`,
+    ].join('\n')
+
    await $fetch(`/api/admin/chapters/${slug.value}`, {
      method: 'PUT',
-      body: {
-        frontmatter: frontmatter.value,
-        body: body.value,
-      },
+      body: { frontmatter, body: body.value },
    })
    saved.value = true
    setTimeout(() => { saved.value = false }, 2000)
@@ -74,20 +108,24 @@ async function save() {
 </script>

 <style scoped>
-.fm-textarea {
-  width: 100%;
-  padding: 0.75rem;
-  border: 1px solid hsl(20 8% 18%);
-  border-radius: 0.5rem;
-  background: hsl(20 8% 4%);
-  color: hsl(36 80% 76%);
-  font-family: var(--font-mono, monospace);
-  font-size: 0.85rem;
-  line-height: 1.7;
-  resize: vertical;
+.field-label {
+  display: block;
+  font-size: 0.75rem;
+  color: hsl(20 8% 50%);
+  margin-bottom: 0.25rem;
 }

-.fm-textarea:focus {
+.field-input {
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border-radius: 0.375rem;
+  border: 1px solid hsl(20 8% 18%);
+  background: hsl(20 8% 6%);
+  color: white;
+  font-size: 0.85rem;
+}
+
+.field-input:focus {
  outline: none;
  border-color: hsl(12 76% 48% / 0.5);
 }
--- a/app/pages/admin/book/index.vue
+++ b/app/pages/admin/book/index.vue
@@ -1,18 +1,58 @@
 <template>
  <div>
-    <h1 class="font-display text-2xl font-bold text-white mb-6">Chapitres</h1>
+    <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">
-      <NuxtLink
-        v-for="chapter in chapters"
+      <div
+        v-for="(chapter, i) in chapters"
        :key="chapter.slug"
-        :to="`/admin/book/${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 }"
      >
-        <span class="chapter-order">{{ String(chapter.order ?? 0).padStart(2, '0') }}</span>
-        <span class="chapter-title">{{ chapter.title }}</span>
-        <div class="i-lucide-chevron-right h-4 w-4 text-white/20" />
-      </NuxtLink>
+        <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>
@@ -23,7 +63,74 @@ definePageMeta({
  middleware: 'admin',
 })

-const { data: chapters } = await useFetch('/api/admin/chapters')
+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>
@@ -34,7 +141,6 @@ const { data: chapters } = await useFetch('/api/admin/chapters')
  padding: 0.75rem 1rem;
  border: 1px solid hsl(20 8% 14%);
  border-radius: 0.5rem;
-  text-decoration: none;
  transition: all 0.2s;
 }

@@ -43,6 +149,25 @@ const { data: chapters } = await useFetch('/api/admin/chapters')
  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;
@@ -55,5 +180,64 @@ const { data: chapters } = await useFetch('/api/admin/chapters')
  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>
--- a/app/pages/admin/songs.vue
+++ b/app/pages/admin/songs.vue
@@ -6,14 +6,22 @@
    </div>

    <template v-if="config">
-      <AdminFormSection title="Métadonnées des chansons" open>
+      <AdminFormSection title="Morceaux" open>
        <div
          v-for="(song, i) in config.songs"
-          :key="i"
+          :key="song.id"
          class="song-row"
+          draggable="true"
+          @dragstart="onDragStart(i, $event)"
+          @dragover.prevent="onDragOver(i)"
+          @dragend="onDragEnd"
+          :class="{ 'song-row--dragging': dragIdx === i, 'song-row--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="song-num">{{ i + 1 }}</span>
-          <div class="flex-1 grid gap-2 sm:grid-cols-2">
+          <div class="flex-1 grid gap-2 sm:grid-cols-3">
            <input
              v-model="song.title"
              class="admin-input"
@@ -24,8 +32,33 @@
              class="admin-input"
              placeholder="/audio/fichier.mp3"
            />
+            <input
+              v-model="song.id"
+              class="admin-input font-mono text-xs"
+              placeholder="identifiant-slug"
+            />
          </div>
+          <div class="flex-1">
+            <textarea
+              v-model="song.lyrics"
+              class="admin-input lyrics-textarea"
+              placeholder="Paroles..."
+              rows="2"
+            />
+          </div>
+          <button
+            class="delete-btn"
+            @click="removeSong(i)"
+            aria-label="Supprimer"
+          >
+            <div class="i-lucide-trash-2 h-4 w-4" />
+          </button>
        </div>
+
+        <button class="add-btn" @click="addSong">
+          <div class="i-lucide-plus h-4 w-4" />
+          Ajouter un morceau
+        </button>
      </AdminFormSection>
    </template>
  </div>
@@ -37,14 +70,80 @@ definePageMeta({
  middleware: 'admin',
 })

-const { data: config } = await useFetch('/api/content/config')
+const { data: config } = await useFetch<any>('/api/content/config')
 const saving = ref(false)
 const saved = ref(false)

+// 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 && config.value) {
+    const songs = config.value.songs
+    const [moved] = songs.splice(dragIdx.value, 1)
+    songs.splice(dropIdx.value, 0, moved)
+    // Sync defaultPlaylistOrder
+    config.value.defaultPlaylistOrder = songs.map((s: any) => s.id)
+  }
+  dragIdx.value = null
+  dropIdx.value = null
+}
+
+function addSong() {
+  if (!config.value) return
+  const newSong = {
+    id: `nouveau-morceau-${Date.now()}`,
+    title: '',
+    artist: 'Yvv',
+    file: '/audio/',
+    duration: 0,
+    lyrics: '',
+    tags: [],
+  }
+  config.value.songs.push(newSong)
+  config.value.defaultPlaylistOrder.push(newSong.id)
+}
+
+function removeSong(i: number) {
+  if (!config.value) return
+  const songId = config.value.songs[i].id
+  config.value.songs.splice(i, 1)
+  // Remove from defaultPlaylistOrder
+  const orderIdx = config.value.defaultPlaylistOrder.indexOf(songId)
+  if (orderIdx !== -1) config.value.defaultPlaylistOrder.splice(orderIdx, 1)
+  // Clean chapterSongs
+  config.value.chapterSongs = config.value.chapterSongs.filter((cs: any) => cs.songId !== songId)
+}
+
 async function save() {
  saving.value = true
  saved.value = false
  try {
+    // Regenerate IDs from titles for new songs
+    for (const song of config.value!.songs) {
+      if (song.id.startsWith('nouveau-morceau-')) {
+        song.id = song.title
+          .toLowerCase()
+          .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
+          .replace(/[^a-z0-9]+/g, '-')
+          .replace(/^-|-$/g, '')
+      }
+    }
+    // Sync playlist order
+    config.value!.defaultPlaylistOrder = config.value!.songs.map((s: any) => s.id)
+
    await $fetch('/api/admin/content/config', {
      method: 'PUT',
      body: config.value,
@@ -61,10 +160,31 @@ async function save() {
 <style scoped>
 .song-row {
  display: flex;
-  align-items: center;
+  align-items: flex-start;
  gap: 0.75rem;
-  padding: 0.5rem;
+  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid hsl(20 8% 10%);
+  transition: background 0.15s;
+}
+
+.song-row--dragging {
+  opacity: 0.4;
+}
+
+.song-row--over {
+  border-top: 2px solid hsl(12 76% 48%);
+}
+
+.drag-handle {
+  cursor: grab;
+  padding: 0.25rem;
+  color: hsl(20 8% 35%);
+  flex-shrink: 0;
+  margin-top: 0.25rem;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
 }

 .song-num {
@@ -73,6 +193,8 @@ async function save() {
  color: hsl(20 8% 40%);
  width: 1.25rem;
  text-align: right;
+  flex-shrink: 0;
+  margin-top: 0.375rem;
 }

 .admin-input {
@@ -89,4 +211,45 @@ async function save() {
  outline: none;
  border-color: hsl(12 76% 48% / 0.5);
 }
+
+.lyrics-textarea {
+  resize: vertical;
+  min-height: 2.5rem;
+}
+
+.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;
+  margin-top: 0.25rem;
+}
+
+.delete-btn:hover {
+  background: hsl(0 60% 50% / 0.1);
+}
+
+.add-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 1rem;
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  border: 1px dashed hsl(20 8% 25%);
+  background: none;
+  color: hsl(20 8% 55%);
+  font-size: 0.85rem;
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.add-btn:hover {
+  border-color: hsl(12 76% 48% / 0.5);
+  color: hsl(12 76% 68%);
+}
 </style>