initiation librodrome

app/pages/ecouter/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="section-padding">
+    <div class="container-content">
+      <header class="mb-12 text-center">
+        <p class="mb-2 font-mono text-sm tracking-widest text-accent uppercase">{{ content?.kicker }}</p>
+        <h1 class="page-title font-display font-bold tracking-tight text-white">
+          {{ content?.title }}
+        </h1>
+        <p class="mt-4 mx-auto max-w-2xl text-white/60">
+          {{ content?.description }}
+        </p>
+      </header>
+
+      <!-- Search + view toggle -->
+      <div class="mb-6 flex items-center justify-between gap-4">
+        <div class="relative flex-1 max-w-md">
+          <div class="i-lucide-search absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/30" />
+          <input
+            v-model="search"
+            type="text"
+            :placeholder="content?.searchPlaceholder"
+            class="w-full rounded-lg bg-surface border border-white/8 py-2 pl-10 pr-4 text-sm text-white placeholder:text-white/30 focus:border-primary/50 focus:outline-none"
+          >
+        </div>
+
+        <div class="flex items-center gap-1 rounded-lg bg-surface p-1">
+          <button
+            class="rounded p-1.5 transition-colors"
+            :class="viewMode === 'list' ? 'bg-white/10 text-white' : 'text-white/40'"
+            @click="viewMode = 'list'"
+          >
+            <div class="i-lucide-list h-4 w-4" />
+          </button>
+          <button
+            class="rounded p-1.5 transition-colors"
+            :class="viewMode === 'grid' ? 'bg-white/10 text-white' : 'text-white/40'"
+            @click="viewMode = 'grid'"
+          >
+            <div class="i-lucide-grid-3x3 h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Song list -->
+      <div v-if="viewMode === 'list'" class="flex flex-col gap-2">
+        <SongItem
+          v-for="song in filteredSongs"
+          :key="song.id"
+          :song="song"
+        />
+      </div>
+
+      <!-- Song grid -->
+      <div v-else class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        <SongItem
+          v-for="song in filteredSongs"
+          :key="song.id"
+          :song="song"
+        />
+      </div>
+
+      <p v-if="filteredSongs.length === 0" class="text-center text-white/40 py-12">
+        {{ content?.noResults }}
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+definePageMeta({
+  layout: 'default',
+})
+
+const { data: content } = await usePageContent('ecouter')
+
+useHead({
+  title: content.value?.meta?.title ?? 'Écouter',
+})
+
+const store = usePlayerStore()
+const bookData = useBookData()
+const { loadFullPlaylist } = usePlaylist()
+
+await bookData.init()
+
+// Switch to free mode
+store.setMode('free')
+await loadFullPlaylist()
+
+const search = ref('')
+const viewMode = ref<'list' | 'grid'>('list')
+
+const filteredSongs = computed(() => {
+  const songs = bookData.getSongs()
+  if (!search.value.trim()) return songs
+
+  const q = search.value.toLowerCase()
+  return songs.filter(
+    s => s.title.toLowerCase().includes(q)
+      || s.artist.toLowerCase().includes(q)
+      || s.tags.some(t => t.toLowerCase().includes(q)),
+  )
+})
+</script>
+
+<style scoped>
+.page-title {
+  font-size: clamp(2rem, 5vw, 2.75rem);
+}
+</style>