Fix double-fire player, navigation par morceaux, admin labels morceaux

- BookPlayer : navigation par playlist (9 morceaux) au lieu de 11 chapitres - stopPropagation clavier → plus de saut 1→3→5 - Sommaire aligné avec titres des morceaux - Bouton back aligné avec clavier (toujours morceau précédent) - Admin chapitres : tags morceaux cliquables avec étoile primary - Admin liste chapitres : badges morceaux associés - Éditeur markdown en vue split par défaut Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-27 14:08:58 +01:00
parent 8803087e77
commit 25bfc07b59
6 changed files with 314 additions and 162 deletions
--- a/app/components/admin/AdminMarkdownEditor.vue
+++ b/app/components/admin/AdminMarkdownEditor.vue
@@ -65,7 +65,7 @@ const emit = defineEmits<{
  'update:modelValue': [value: string]
 }>()

-const tab = ref<'edit' | 'preview' | 'split'>('edit')
+const tab = ref<'edit' | 'preview' | 'split'>('split')
 const fullscreen = ref(false)
 const textareaRef = ref<HTMLTextAreaElement>()

--- a/app/components/book/BookPlayer.vue
+++ b/app/components/book/BookPlayer.vue
@@ -35,8 +35,8 @@
                <div class="i-lucide-list h-5 w-5" />
              </button>
              <div class="reader-bar-title">
-                <span class="reader-bar-num">{{ chapterIdx + 1 }}.</span>
-                {{ chapters[chapterIdx].title }}
+                <span class="reader-bar-num">{{ trackIdx + 1 }}.</span>
+                {{ currentTrack?.title ?? '' }}
              </div>
              <span class="reader-bar-pages">{{ scrollPercent }}%</span>
              <button class="reader-bar-btn reader-bar-close" @click="close" aria-label="Fermer">
@@ -50,14 +50,14 @@
                <div class="sommaire-panel">
                  <h4 class="sommaire-title">{{ bpContent?.reader.sommaireTitle ?? 'Sommaire' }}</h4>
                  <button
-                    v-for="(ch, i) in chapters"
-                    :key="i"
+                    v-for="(track, i) in tracks"
+                    :key="track.id"
                    class="sommaire-item"
-                    :class="{ 'sommaire-item--active': chapterIdx === i }"
-                    @click="goToChapter(i)"
+                    :class="{ 'sommaire-item--active': trackIdx === i }"
+                    @click="goToTrack(i)"
                  >
                    <span class="sommaire-num">{{ i + 1 }}</span>
-                    {{ ch.title }}
+                    {{ track.title }}
                  </button>
                </div>
              </aside>
@@ -76,12 +76,12 @@
                ref="contentEl"
                :style="contentStyle"
              >
-                <div v-if="chapterLyrics" class="lyrics-content" v-html="chapterLyricsHtml" />
-                <div v-else-if="chapterSong" class="lyrics-empty">
-                  <p class="op-40 italic">Paroles à venir pour « {{ chapterSong.title }} »</p>
+                <div v-if="currentLyrics" class="lyrics-content" v-html="currentLyricsHtml" />
+                <div v-else-if="currentSong" class="lyrics-empty">
+                  <p class="op-40 italic">Paroles à venir pour « {{ currentSong.title }} »</p>
                </div>
                <div v-else class="lyrics-empty">
-                  <p class="op-40 italic">Aucun morceau associé à ce chapitre</p>
+                  <p class="op-40 italic">Aucun morceau sélectionné</p>
                </div>
              </div>
              <!-- Page turn shadow overlay (paginated only) -->
@@ -92,28 +92,28 @@
            <div class="reader-nav">
              <button
                class="reader-nav-btn"
-                :class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx <= 0 : (currentPage <= 0 && chapterIdx <= 0) }"
-                @click="isScrollMode ? prevChapter() : prevPage()"
-                :aria-label="isScrollMode ? 'Chapitre précédent' : 'Page précédente'"
+                :class="{ 'reader-nav-btn--hidden': isScrollMode ? trackIdx <= 0 : (currentPage <= 0 && trackIdx <= 0) }"
+                @click="isScrollMode ? prevTrack() : prevPage()"
+                :aria-label="isScrollMode ? 'Morceau précédent' : 'Page précédente'"
              >
                <div class="i-lucide-chevron-left h-5 w-5" />
              </button>

-              <!-- Song disc (if chapter has a song) -->
-              <div v-if="chapterSong" class="reader-song">
+              <!-- Song disc -->
+              <div v-if="currentSong" class="reader-song">
                <div class="reader-disc" :class="{ spinning: playerStore.isPlaying }">
                  <img src="/images/book-cover-spread.jpg" alt="" class="reader-disc-img" />
                  <div class="reader-disc-hole" />
                </div>
-                <span class="reader-song-name">{{ chapterSong.title }}</span>
+                <span class="reader-song-name">{{ currentSong.title }}</span>
              </div>
              <div v-else class="reader-song" />

              <button
                class="reader-nav-btn"
-                :class="{ 'reader-nav-btn--hidden': isScrollMode ? chapterIdx >= chapters.length - 1 : (currentPage >= totalPages - 1 && chapterIdx >= chapters.length - 1) }"
-                @click="isScrollMode ? nextChapter() : nextPage()"
-                :aria-label="isScrollMode ? 'Chapitre suivant' : 'Page suivante'"
+                :class="{ 'reader-nav-btn--hidden': isScrollMode ? trackIdx >= tracks.length - 1 : (currentPage >= totalPages - 1 && trackIdx >= tracks.length - 1) }"
+                @click="isScrollMode ? nextTrack() : nextPage()"
+                :aria-label="isScrollMode ? 'Morceau suivant' : 'Page suivante'"
              >
                <div class="i-lucide-chevron-right h-5 w-5" />
              </button>
@@ -123,7 +123,7 @@
        <!-- Hint -->
        <p class="bp-hint">
          <template v-if="isScrollMode">
-            <span class="hidden md:inline">{{ bpContent?.reader.hints.desktopScroll ?? '← → chapitres · Défilement libre · Esc fermer' }}</span>
+            <span class="hidden md:inline">{{ bpContent?.reader.hints.desktopScroll ?? '← → morceaux · Défilement libre · Esc fermer' }}</span>
            <span class="md:hidden">{{ bpContent?.reader.hints.mobileScroll ?? 'Défilez pour lire' }}</span>
          </template>
          <template v-else>
@@ -153,7 +153,7 @@ const overlayRef = ref<HTMLElement>()
 const viewportEl = ref<HTMLElement>()
 const contentEl = ref<HTMLElement>()

-const chapterIdx = ref(0)
+const trackIdx = ref(0)
 const currentPage = ref(0)
 const totalPages = ref(1)
 const colWidth = ref(500)
@@ -165,10 +165,6 @@ const readingMode = ref<'paginated' | 'scroll'>('scroll')
 const isScrollMode = computed(() => readingMode.value === 'scroll')
 const scrollPercent = ref(0)

-function toggleReadingMode() {
-  readingMode.value = readingMode.value === 'paginated' ? 'scroll' : 'paginated'
-}
-
 // When switching back to paginated, recalc pages
 watch(readingMode, async (mode) => {
  if (mode === 'paginated') {
@@ -185,66 +181,29 @@ function onViewportScroll() {
  scrollPercent.value = max > 0 ? Math.round((el.scrollTop / max) * 100) : 0
 }

-const { init: initBookData, getSongs, getPrimarySong, getChapterForSong, getPlaylistOrder } = useBookData()
+const { init: initBookData, getPlaylistOrder } = useBookData()
 const audioPlayer = useAudioPlayer()
 const playerStore = usePlayerStore()

-// ── Content loaded flag (lyrics come from bookplayer config) ──
-const contentLoaded = ref(false)
-
-async function loadContent() {
-  if (contentLoaded.value) return
-  contentLoaded.value = true
-}
-
-// ── Chapter metadata ──
-const chapters = [
-  { slug: '01-introduction', title: 'Introduction' },
-  { slug: '02-don', title: 'De quel don parlons-nous ?' },
-  { slug: '03-mesure', title: 'La mesure du don' },
-  { slug: '04-monnaie', title: 'Raison d\'être d\'une monnaie' },
-  { slug: '05-trm', title: 'La TRM' },
-  { slug: '06-economie', title: 'Créer une économie ?' },
-  { slug: '07-echange', title: 'Échanger' },
-  { slug: '08-institution', title: 'Relation institutionnelle' },
-  { slug: '09-greffes', title: 'Autres greffes' },
-  { slug: '10-maintenant', title: 'Et maintenant ?… action ?' },
-  { slug: '11-annexes', title: 'Chapitres annexes' },
-]
-
-// ── Per-chapter color hues ──
-const chapterHues: [number, number][] = [
-  [12, 36],    // cover (intro + cover phases)
-  [15, 35],    // 1
-  [350, 15],   // 2
-  [36, 50],    // 3
-  [170, 200],  // 4
-  [220, 250],  // 5
-  [270, 300],  // 6
-  [320, 345],  // 7
-  [150, 170],  // 8
-  [190, 220],  // 9
-  [40, 20],    // 10
-  [210, 240],  // 11
-]
-
-const sceneVars = computed(() => {
-  const idx = chapterIdx.value + 1
-  const [h1, h2] = chapterHues[idx] ?? chapterHues[0]
-  return { '--scene-h1': h1, '--scene-h2': h2 } as Record<string, number>
+// ── Tracks: built from playlist order (songs), not chapters ──
+const tracks = computed(() => {
+  return playerStore.playlist.map(song => ({
+    id: song.id,
+    title: song.title,
+    song,
+  }))
 })

-const chapterSong = computed(() => {
-  return getPrimarySong(chapters[chapterIdx.value].slug)
+const currentTrack = computed(() => tracks.value[trackIdx.value] ?? null)
+const currentSong = computed(() => currentTrack.value?.song ?? null)
+
+const currentLyrics = computed(() => {
+  return currentSong.value?.lyrics?.trim() || ''
 })

-const chapterLyrics = computed(() => {
-  return chapterSong.value?.lyrics?.trim() || ''
-})
-
-const chapterLyricsHtml = computed(() => {
-  if (!chapterLyrics.value) return ''
-  return chapterLyrics.value
+const currentLyricsHtml = computed(() => {
+  if (!currentLyrics.value) return ''
+  return currentLyrics.value
    .replace(/&/g, '&amp;')
    .replace(/</g, '&lt;')
    .replace(/>/g, '&gt;')
@@ -255,6 +214,24 @@ const chapterLyricsHtml = computed(() => {
    .replace(/$/, '</p>')
 })

+// ── Per-track color hues (9 tracks) ──
+const trackHues: [number, number][] = [
+  [15, 35],    // 1 Ce livre est une façon
+  [350, 15],   // 2 De quel don nous parlons
+  [36, 50],    // 3 Les asymétries
+  [170, 200],  // 4 Inverser les flux
+  [220, 250],  // 5 Ainsi soit-il
+  [270, 300],  // 6 La croissance
+  [320, 345],  // 7 Monnaie libre
+  [150, 170],  // 8 Créer une économie
+  [190, 220],  // 9 Coder la liberté
+]
+
+const sceneVars = computed(() => {
+  const [h1, h2] = trackHues[trackIdx.value] ?? trackHues[0]
+  return { '--scene-h1': h1, '--scene-h2': h2 } as Record<string, number>
+})
+
 // ── CSS columns pagination ──
 const contentStyle = computed(() => {
  if (isScrollMode.value) return {}
@@ -275,8 +252,8 @@ function recalcPages() {

 let resizeObs: ResizeObserver | null = null

-// Recalc when chapter changes
-watch(chapterIdx, async () => {
+// Recalc when track changes
+watch(trackIdx, async () => {
  currentPage.value = 0
  await nextTick()
  await nextTick()
@@ -284,8 +261,7 @@ watch(chapterIdx, async () => {
 })

 async function initReading() {
-  await loadContent()
-  chapterIdx.value = 0
+  trackIdx.value = 0
  currentPage.value = 0
  await nextTick()
  await nextTick()
@@ -297,34 +273,35 @@ async function initReading() {
  setTimeout(recalcPages, 200)
 }

-// ── Navigation ──
+// ── Navigation by tracks (songs) ──
 let _skipSongWatch = false

-function goToChapter(idx: number) {
-  chapterIdx.value = idx
+function goToTrack(idx: number) {
+  if (idx < 0 || idx >= tracks.value.length) return
+  trackIdx.value = idx
  currentPage.value = 0
  showSommaire.value = false
  // Scroll to top in scroll mode
  if (isScrollMode.value && viewportEl.value) {
    viewportEl.value.scrollTop = 0
  }
-  // Play chapter song (skip watcher to avoid loop)
-  const song = getPrimarySong(chapters[idx].slug)
+  // Play the song
+  const song = tracks.value[idx]?.song
  if (song) {
    _skipSongWatch = true
    audioPlayer.loadAndPlay(song)
  }
 }

-function nextChapter() {
-  if (chapterIdx.value < chapters.length - 1) {
-    goToChapter(chapterIdx.value + 1)
+function nextTrack() {
+  if (trackIdx.value < tracks.value.length - 1) {
+    goToTrack(trackIdx.value + 1)
  }
 }

-function prevChapter() {
-  if (chapterIdx.value > 0) {
-    goToChapter(chapterIdx.value - 1)
+function prevTrack() {
+  if (trackIdx.value > 0) {
+    goToTrack(trackIdx.value - 1)
  }
 }

@@ -333,9 +310,8 @@ function nextPage() {
    triggerTurn()
    currentPage.value++
  }
-  else if (chapterIdx.value < chapters.length - 1) {
-    // Next chapter
-    goToChapter(chapterIdx.value + 1)
+  else if (trackIdx.value < tracks.value.length - 1) {
+    goToTrack(trackIdx.value + 1)
  }
 }

@@ -344,25 +320,8 @@ function prevPage() {
    triggerTurn()
    currentPage.value--
  }
-  else if (chapterIdx.value > 0) {
-    // Previous chapter, go to last page
-    chapterIdx.value--
-    currentPage.value = 0
-    showSommaire.value = false
-    const song = getPrimarySong(chapters[chapterIdx.value].slug)
-    if (song) {
-      _skipSongWatch = true
-      audioPlayer.loadAndPlay(song)
-    }
-    // After content loads, go to last page
-    watch(chapterIdx, async () => {
-      await nextTick()
-      await nextTick()
-      setTimeout(() => {
-        recalcPages()
-        currentPage.value = Math.max(0, totalPages.value - 1)
-      }, 150)
-    }, { once: true })
+  else if (trackIdx.value > 0) {
+    goToTrack(trackIdx.value - 1)
  }
 }

@@ -376,19 +335,26 @@ function close() {
 }

 function handleKeydown(e: KeyboardEvent) {
+  // CRITICAL: stop propagation so useKeyboardShortcuts doesn't also fire
+  e.stopPropagation()
+
+  if (e.key === 'Escape') { close(); return }
+
+  if (e.key === ' ') {
+    e.preventDefault()
+    audioPlayer.togglePlayPause()
+    return
+  }
+
  if (isScrollMode.value) {
-    // Scroll mode: left/right = chapters, up/down = natural scroll (no preventDefault)
-    if (e.key === 'ArrowRight') { e.preventDefault(); nextChapter() }
-    else if (e.key === 'ArrowLeft') { e.preventDefault(); prevChapter() }
-    else if (e.key === 'Escape') close()
+    if (e.key === 'ArrowRight') { e.preventDefault(); nextTrack() }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); prevTrack() }
  }
  else {
-    // Paginated mode: left/right = pages, up/down = chapters
    if (e.key === 'ArrowRight') { e.preventDefault(); nextPage() }
    else if (e.key === 'ArrowLeft') { e.preventDefault(); prevPage() }
-    else if (e.key === 'ArrowDown') { e.preventDefault(); nextChapter() }
-    else if (e.key === 'ArrowUp') { e.preventDefault(); prevChapter() }
-    else if (e.key === 'Escape') close()
+    else if (e.key === 'ArrowDown') { e.preventDefault(); nextTrack() }
+    else if (e.key === 'ArrowUp') { e.preventDefault(); prevTrack() }
  }
 }

@@ -400,7 +366,6 @@ function onTouchStart(e: TouchEvent) {
 }

 function onTouchEnd(e: TouchEvent) {
-  // Disable page-swipe in scroll mode (vertical scroll is native)
  if (isScrollMode.value) return
  const diff = touchStartX - (e.changedTouches[0]?.screenX ?? 0)
  if (Math.abs(diff) > 50) {
@@ -413,7 +378,6 @@ function onTouchEnd(e: TouchEvent) {
 watch(isOpen, async (open) => {
  if (open) {
    showSommaire.value = false
-    contentLoaded.value = false
    await initBookData()
    await nextTick()
    overlayRef.value?.focus()
@@ -422,12 +386,10 @@ watch(isOpen, async (open) => {
    // Load playlist & play first song
    const playlist = getPlaylistOrder()
    if (playlist.length) playerStore.setPlaylist(playlist)
-    const first = getSongs().find(s => s.id === 'ce-livre-est-une-facon')
-    if (first) {
+    if (playlist.length) {
      _skipSongWatch = true
-      audioPlayer.loadAndPlay(first)
+      audioPlayer.loadAndPlay(playlist[0])
    }
-    // Start reading directly
    await initReading()
  }
  else {
@@ -437,20 +399,16 @@ watch(isOpen, async (open) => {
  }
 })

-// ── Sync: when song changes in player, navigate to matching chapter (display only, no loadAndPlay) ──
+// ── Sync: when song changes externally (persistent player controls), update trackIdx ──
 watch(() => playerStore.currentSong, (song) => {
  if (!song || !isOpen.value) return
  if (_skipSongWatch) {
    _skipSongWatch = false
    return
  }
-  const slug = getChapterForSong(song.id)
-  if (!slug) return
-  const idx = chapters.findIndex(ch => ch.slug === slug)
-  if (idx !== -1 && idx !== chapterIdx.value) {
-    // Only update the displayed chapter — do NOT call goToChapter/loadAndPlay
-    // to avoid retriggering this watcher and causing song skips
-    chapterIdx.value = idx
+  const idx = tracks.value.findIndex(t => t.id === song.id)
+  if (idx !== -1 && idx !== trackIdx.value) {
+    trackIdx.value = idx
    currentPage.value = 0
    showSommaire.value = false
    if (isScrollMode.value && viewportEl.value) {
--- a/app/composables/useAudioPlayer.ts
+++ b/app/composables/useAudioPlayer.ts
@@ -124,13 +124,7 @@ export function useAudioPlayer() {
  function playPrev() {
    const song = store.prevSong()
    if (song) {
-      if (song === store.currentSong && store.currentTime <= 3) {
-        // prevSong already reset time
-        seek(0)
-      }
-      else {
-        loadAndPlay(song)
-      }
+      loadAndPlay(song)
    }
  }

--- a/app/pages/admin/book/[slug].vue
+++ b/app/pages/admin/book/[slug].vue
@@ -34,6 +34,36 @@
        </div>
      </AdminFormSection>

+      <AdminFormSection title="Morceaux associés">
+        <p class="text-xs text-white/40 mb-3">
+          Cliquez pour associer/dissocier. Cliquez sur l'étoile pour définir le morceau principal.
+        </p>
+        <div class="flex flex-wrap gap-2">
+          <div
+            v-for="song in allSongs"
+            :key="song.id"
+            class="song-tag"
+            :class="{
+              'song-tag--active': isLinked(song.id),
+              'song-tag--primary': isPrimary(song.id),
+            }"
+          >
+            <button
+              v-if="isLinked(song.id)"
+              class="song-star"
+              :class="{ 'song-star--active': isPrimary(song.id) }"
+              @click="setPrimary(song.id)"
+              aria-label="Définir comme principal"
+            >
+              <div class="i-lucide-star h-3 w-3" />
+            </button>
+            <button class="song-tag-label" @click="toggleSong(song.id)">
+              {{ song.title }}
+            </button>
+          </div>
+        </div>
+      </AdminFormSection>
+
      <AdminFormSection title="Contenu" open>
        <AdminMarkdownEditor v-model="body" :rows="35" />
      </AdminFormSection>
@@ -51,6 +81,7 @@ const route = useRoute()
 const slug = computed(() => route.params.slug as string)

 const { data: chapter } = await useFetch(() => `/api/admin/chapters/${slug.value}`)
+const { data: bookConfig } = await useFetch<any>('/api/content/config')

 const title = ref('')
 const description = ref('')
@@ -65,7 +96,6 @@ const wordCount = computed(() => {

 watch(chapter, (val) => {
  if (val) {
-    // Parse frontmatter fields
    const fm = val.frontmatter ?? ''
    title.value = extractFmField(fm, 'title')
    description.value = extractFmField(fm, 'description')
@@ -79,6 +109,52 @@ function extractFmField(fm: string, field: string): string {
  return match ? match[1].trim() : ''
 }

+// ── Morceaux associés ──
+const allSongs = computed(() => bookConfig.value?.songs ?? [])
+const linkedSongIds = ref<Set<string>>(new Set())
+const primarySongId = ref<string | null>(null)
+
+watch(bookConfig, (val) => {
+  if (!val) return
+  const links = (val.chapterSongs ?? []).filter(
+    (cs: any) => cs.chapterSlug === slug.value,
+  )
+  linkedSongIds.value = new Set(links.map((l: any) => l.songId))
+  const primary = links.find((l: any) => l.primary)
+  primarySongId.value = primary?.songId ?? null
+}, { immediate: true })
+
+function isLinked(songId: string) {
+  return linkedSongIds.value.has(songId)
+}
+
+function isPrimary(songId: string) {
+  return primarySongId.value === songId
+}
+
+function toggleSong(songId: string) {
+  const next = new Set(linkedSongIds.value)
+  if (next.has(songId)) {
+    next.delete(songId)
+    if (primarySongId.value === songId) primarySongId.value = null
+  }
+  else {
+    next.add(songId)
+    if (!primarySongId.value) primarySongId.value = songId
+  }
+  linkedSongIds.value = next
+}
+
+function setPrimary(songId: string) {
+  if (!linkedSongIds.value.has(songId)) {
+    const next = new Set(linkedSongIds.value)
+    next.add(songId)
+    linkedSongIds.value = next
+  }
+  primarySongId.value = songId
+}
+
+// ── Save ──
 const saving = ref(false)
 const saved = ref(false)

@@ -86,6 +162,7 @@ async function save() {
  saving.value = true
  saved.value = false
  try {
+    // 1. Sauvegarder le contenu du chapitre
    const order = chapter.value?.frontmatter?.match(/order:\s*(\d+)/)?.[1] ?? '1'
    const frontmatter = [
      `title: "${title.value}"`,
@@ -98,6 +175,27 @@ async function save() {
      method: 'PUT',
      body: { frontmatter, body: body.value },
    })
+
+    // 2. Sauvegarder les liaisons morceaux dans la config
+    if (bookConfig.value) {
+      const otherLinks = (bookConfig.value.chapterSongs ?? []).filter(
+        (cs: any) => cs.chapterSlug !== slug.value,
+      )
+      const newLinks = [...linkedSongIds.value].map(songId => ({
+        chapterSlug: slug.value,
+        songId,
+        primary: songId === primarySongId.value,
+      }))
+      const updatedConfig = {
+        ...bookConfig.value,
+        chapterSongs: [...otherLinks, ...newLinks],
+      }
+      await $fetch('/api/admin/content/config', {
+        method: 'PUT',
+        body: updatedConfig,
+      })
+    }
+
    saved.value = true
    setTimeout(() => { saved.value = false }, 2000)
  }
@@ -129,4 +227,70 @@ async function save() {
  outline: none;
  border-color: hsl(12 76% 48% / 0.5);
 }
+
+/* ── Song tags ── */
+.song-tag {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  border: 1px solid hsl(20 8% 22%);
+  transition: all 0.15s;
+  overflow: hidden;
+}
+
+.song-tag:hover {
+  border-color: hsl(12 76% 48% / 0.4);
+}
+
+.song-tag--active {
+  border-color: hsl(12 76% 48% / 0.6);
+  background: hsl(12 76% 48% / 0.08);
+}
+
+.song-tag--primary {
+  border-color: hsl(45 90% 55%);
+  background: hsl(45 90% 55% / 0.08);
+}
+
+.song-tag-label {
+  padding: 0.375rem 0.75rem;
+  background: none;
+  border: none;
+  color: hsl(20 8% 50%);
+  font-size: 0.8rem;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.song-tag--active .song-tag-label {
+  color: hsl(12 76% 68%);
+}
+
+.song-tag--primary .song-tag-label {
+  color: hsl(45 90% 65%);
+}
+
+.song-tag-label:hover {
+  color: white;
+}
+
+.song-star {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.375rem 0 0.375rem 0.625rem;
+  background: none;
+  border: none;
+  color: hsl(20 8% 30%);
+  cursor: pointer;
+  transition: color 0.15s;
+}
+
+.song-star:hover {
+  color: hsl(45 90% 55%);
+}
+
+.song-star--active {
+  color: hsl(45 90% 55%);
+}
 </style>
--- a/app/pages/admin/book/index.vue
+++ b/app/pages/admin/book/index.vue
@@ -20,12 +20,21 @@
          <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>
+        <div class="chapter-info">
+          <NuxtLink
+            :to="`/admin/book/${chapter.slug}`"
+            class="chapter-title"
+          >
+            {{ chapter.title }}
+          </NuxtLink>
+          <div v-if="getChapterSongNames(chapter.slug).length" class="chapter-songs">
+            <span
+              v-for="name in getChapterSongNames(chapter.slug)"
+              :key="name"
+              class="song-badge"
+            >{{ name }}</span>
+          </div>
+        </div>
        <button
          class="delete-btn"
          @click="removeChapter(chapter.slug)"
@@ -64,6 +73,19 @@ definePageMeta({
 })

 const { data: chapters, refresh } = await useFetch<any[]>('/api/admin/chapters')
+const { data: bookConfig } = await useFetch<any>('/api/content/config')
+
+function getChapterSongNames(chapterSlug: string): string[] {
+  if (!bookConfig.value) return []
+  const links = (bookConfig.value.chapterSongs ?? []).filter(
+    (cs: any) => cs.chapterSlug === chapterSlug,
+  )
+  return links.map((link: any) => {
+    const song = bookConfig.value.songs.find((s: any) => s.id === link.songId)
+    return song?.title ?? link.songId
+  })
+}
+
 const saving = ref(false)
 const saved = ref(false)
 const newTitle = ref('')
@@ -176,8 +198,13 @@ async function removeChapter(slug: string) {
  width: 1.75rem;
 }

-.chapter-title {
+.chapter-info {
  flex: 1;
+  min-width: 0;
+}
+
+.chapter-title {
+  display: block;
  color: white;
  font-weight: 500;
  text-decoration: none;
@@ -187,6 +214,22 @@ async function removeChapter(slug: string) {
  color: hsl(12 76% 68%);
 }

+.chapter-songs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  margin-top: 0.25rem;
+}
+
+.song-badge {
+  font-size: 0.65rem;
+  padding: 0.1rem 0.5rem;
+  border-radius: 9999px;
+  background: hsl(12 76% 48% / 0.1);
+  color: hsl(12 76% 60%);
+  border: 1px solid hsl(12 76% 48% / 0.2);
+}
+
 .delete-btn {
  flex-shrink: 0;
  padding: 0.375rem;
--- a/app/stores/player.ts
+++ b/app/stores/player.ts
@@ -119,20 +119,13 @@ export const usePlayerStore = defineStore('player', () => {
  function prevSong(): Song | null {
    if (playlist.value.length === 0) return null

-    // If more than 3 seconds in, restart current song
-    if (currentTime.value > 3) {
-      currentTime.value = 0
-      return currentSong.value
-    }
-
    let prevIdx = currentIndex.value - 1
    if (prevIdx < 0) {
      if (repeatMode.value === 'all') {
        prevIdx = playlist.value.length - 1
      }
      else {
-        currentTime.value = 0
-        return currentSong.value
+        return null
      }
    }