initiation librodrome

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>