initiation librodrome

app/components/player/PlayerTrackInfo.vue

@@ -0,0 +1,34 @@
+<template>
+  <div v-if="store.currentSong" class="flex items-center gap-3 min-w-0">
+    <div
+      class="h-10 w-10 flex-shrink-0 rounded-lg bg-surface-200 flex items-center justify-center overflow-hidden"
+      :class="{ 'animate-glow-pulse': store.isPlaying }"
+    >
+      <img
+        v-if="store.currentSong.coverImage"
+        :src="store.currentSong.coverImage"
+        :alt="store.currentSong.title"
+        class="h-full w-full object-cover"
+      >
+      <div v-else class="i-lucide-music h-5 w-5 text-primary" />
+    </div>
+    <div class="min-w-0">
+      <p class="truncate text-sm font-medium text-white">
+        {{ store.currentSong.title }}
+      </p>
+      <p class="truncate text-xs text-white/50">
+        {{ store.currentSong.artist }}
+      </p>
+    </div>
+  </div>
+  <div v-else class="flex items-center gap-3 text-white/40">
+    <div class="h-10 w-10 flex-shrink-0 rounded-lg bg-surface-200 flex items-center justify-center">
+      <div class="i-lucide-music h-5 w-5" />
+    </div>
+    <p class="text-sm">Aucune piste sélectionnée</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+const store = usePlayerStore()
+</script>