initiation librodrome

app/components/song/SongBadges.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-if="songs.length > 0" class="flex flex-wrap gap-1">
+    <span
+      v-for="song in songs"
+      :key="song.id"
+      class="inline-flex items-center gap-1 rounded-full bg-primary/10 px-2 py-0.5 text-xs text-primary/70"
+    >
+      <div class="i-lucide-music h-2.5 w-2.5" />
+      {{ song.title }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chapterSlug: string
+}>()
+
+const bookData = useBookData()
+await bookData.init()
+
+const songs = computed(() => bookData.getChapterSongs(props.chapterSlug))
+</script>

app/components/song/SongItem.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="card-surface flex cursor-pointer items-center gap-4"
+    :class="{ 'border-primary/40! shadow-primary/10!': isCurrent }"
+    @click="handlePlay"
+  >
+    <!-- Play indicator / cover -->
+    <div
+      class="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-surface-200"
+      :class="{ 'animate-glow-pulse': isCurrent && store.isPlaying }"
+    >
+      <div
+        v-if="isCurrent && store.isPlaying"
+        class="i-lucide-volume-2 h-5 w-5 text-primary"
+      />
+      <div
+        v-else
+        class="i-lucide-play h-5 w-5 text-white/40 transition-colors group-hover:text-primary"
+      />
+    </div>
+
+    <!-- Info -->
+    <div class="min-w-0 flex-1">
+      <p class="truncate text-sm font-medium" :class="isCurrent ? 'text-primary' : 'text-white'">
+        {{ song.title }}
+      </p>
+      <p class="truncate text-xs text-white/40">
+        {{ song.artist }}
+      </p>
+    </div>
+
+    <!-- Duration -->
+    <span class="font-mono text-xs text-white/30 flex-shrink-0">
+      {{ formatDuration(song.duration) }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Song } from '~/types/song'
+
+const props = defineProps<{
+  song: Song
+}>()
+
+const store = usePlayerStore()
+const { loadAndPlay, togglePlayPause } = useAudioPlayer()
+
+const isCurrent = computed(() => store.currentSong?.id === props.song.id)
+
+function handlePlay() {
+  if (isCurrent.value) {
+    togglePlayPause()
+  }
+  else {
+    loadAndPlay(props.song)
+  }
+}
+
+function formatDuration(seconds: number): string {
+  const mins = Math.floor(seconds / 60)
+  const secs = Math.floor(seconds % 60)
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+</script>

app/components/song/SongList.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="flex flex-col gap-2">
+    <SongItem
+      v-for="song in songs"
+      :key="song.id"
+      :song="song"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Song } from '~/types/song'
+
+defineProps<{
+  songs: Song[]
+}>()
+</script>

app/components/song/SongLyrics.vue

@@ -0,0 +1,50 @@
+<template>
+  <div v-if="song.lyrics" class="rounded-xl bg-surface p-6">
+    <button
+      class="flex w-full items-center justify-between text-left"
+      @click="isOpen = !isOpen"
+    >
+      <span class="font-display text-sm font-semibold text-white/70">Paroles</span>
+      <div
+        :class="isOpen ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
+        class="h-4 w-4 text-white/40 transition-transform"
+      />
+    </button>
+
+    <Transition name="lyrics-expand">
+      <div v-if="isOpen" class="mt-4">
+        <pre class="whitespace-pre-wrap font-sans text-sm leading-relaxed text-white/60">{{ song.lyrics }}</pre>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Song } from '~/types/song'
+
+defineProps<{
+  song: Song
+}>()
+
+const isOpen = ref(false)
+</script>
+
+<style scoped>
+.lyrics-expand-enter-active,
+.lyrics-expand-leave-active {
+  transition: all 0.3s var(--ease-out-expo);
+  overflow: hidden;
+}
+
+.lyrics-expand-enter-from,
+.lyrics-expand-leave-to {
+  max-height: 0;
+  opacity: 0;
+}
+
+.lyrics-expand-enter-to,
+.lyrics-expand-leave-from {
+  max-height: 500px;
+  opacity: 1;
+}
+</style>