WIP: global player refactor pt. 1

src/lib/components/player/Queue.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { Play, X } from "@lucide/svelte";
+	import { Button } from "$lib/components/ui/button";
+	import { player } from "$lib/player/store.svelte";
+
+	function onRemove(id: number) {
+		player.remove(id);
+	}
+
+	function onJump(track: any) {
+		player.playNext(track);
+		// Wait, jump usually means play immediately?
+		// "Jump to track" -> set as current.
+		// If it's in the queue, we can just set currentId.
+		player.playId(track.id);
+	}
+</script>
+
+<div
+    class="flex flex-col h-full w-full bg-background/50 backdrop-blur rounded-lg border overflow-hidden"
+>
+    <div
+        class="px-4 py-3 border-b flex justify-between items-center bg-muted/20"
+    >
+        <h3 class="font-semibold text-sm">Up Next</h3>
+        <Button
+            variant="ghost"
+            size="sm"
+            class="h-6 w-6 p-0"
+            onclick={() => player.clearQueue()}
+        >
+            <span class="sr-only">Clear</span>
+            <X class="h-3 w-3" />
+        </Button>
+    </div>
+
+    <div class="flex-1 overflow-y-auto p-2 space-y-1">
+        {#if player.displayQueue.length === 0}
+            <div class="text-center py-8 text-muted-foreground text-sm">
+                Queue is empty
+            </div>
+        {:else}
+            {#each player.displayQueue as track (track.id)}
+                <div
+                    role="button"
+                    tabindex="0"
+                    onclick={() => onJump(track)}
+                    onkeydown={(e) => e.key === "Enter" && onJump(track)}
+                    class="group flex items-center gap-2 px-3 py-2 rounded-md hover:bg-muted/50 transition-colors cursor-pointer text-sm"
+                    class:active={player.currentId === track.id}
+                >
+                    <div
+                        class="w-8 flex-shrink-0 text-center text-xs text-muted-foreground/60 font-mono"
+                    >
+                        {#if player.currentId === track.id}
+                            <div
+                                class="w-2 h-2 bg-primary rounded-full mx-auto animate-pulse"
+                            ></div>
+                        {:else}
+                            <span class="group-hover:hidden">#</span>
+                            <Play
+                                class="hidden group-hover:block mx-auto h-3 w-3 text-muted-foreground"
+                            />
+                        {/if}
+                    </div>
+
+                    <div class="flex-1 min-w-0">
+                        <div
+                            class="font-medium truncate"
+                            class:text-primary={player.currentId === track.id}
+                        >
+                            {track.title}
+                        </div>
+                        <div class="text-xs text-muted-foreground truncate">
+                            {track.artist}
+                        </div>
+                    </div>
+
+                    <Button
+                        variant="ghost"
+                        size="icon"
+                        class="h-6 w-6 opacity-0 group-hover:opacity-100 transition-opacity"
+                        onclick={(e) => {
+                            e.stopPropagation();
+                            onRemove(track.id);
+                        }}
+                    >
+                        <X class="h-3 w-3" />
+                    </Button>
+                </div>
+            {/each}
+        {/if}
+    </div>
+</div>
+
+<style>
+    @reference "../../../routes/layout.css";
+    .active {
+        @apply bg-muted/40;
+    }
+</style>