initiation librodrome

app/components/player/PlayerControls.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="flex items-center gap-2">
+    <!-- Shuffle -->
+    <button
+      class="btn-ghost !p-2"
+      :class="{ 'text-primary!': store.isShuffled }"
+      aria-label="Mélanger"
+      @click="toggleShuffle"
+    >
+      <div class="i-lucide-shuffle h-4 w-4" />
+    </button>
+
+    <!-- Previous -->
+    <button
+      class="btn-ghost !p-2"
+      :disabled="!store.hasPrev"
+      aria-label="Précédent"
+      @click="playPrev"
+    >
+      <div class="i-lucide-skip-back h-5 w-5" />
+    </button>
+
+    <!-- Play/Pause -->
+    <button
+      class="flex h-10 w-10 items-center justify-center rounded-full bg-white text-surface-bg transition-transform hover:scale-110 active:scale-95"
+      :aria-label="store.isPlaying ? 'Pause' : 'Lecture'"
+      @click="togglePlayPause"
+    >
+      <div :class="store.isPlaying ? 'i-lucide-pause' : 'i-lucide-play'" class="h-5 w-5" />
+    </button>
+
+    <!-- Next -->
+    <button
+      class="btn-ghost !p-2"
+      :disabled="!store.hasNext"
+      aria-label="Suivant"
+      @click="playNext"
+    >
+      <div class="i-lucide-skip-forward h-5 w-5" />
+    </button>
+
+    <!-- Repeat -->
+    <button
+      class="btn-ghost !p-2"
+      :class="{ 'text-primary!': store.repeatMode !== 'none' }"
+      aria-label="Répéter"
+      @click="store.toggleRepeat()"
+    >
+      <div
+        :class="store.repeatMode === 'one' ? 'i-lucide-repeat-1' : 'i-lucide-repeat'"
+        class="h-4 w-4"
+      />
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const store = usePlayerStore()
+const { togglePlayPause, playNext, playPrev } = useAudioPlayer()
+const { toggleShuffle } = usePlaylist()
+</script>