feat(frontend): rework audio player and shared UI components

Expand the player store, split player controls (transport, seek, volume, track info), add Cover/PlaylistArt/NowPlaying UI primitives and a cover image proxy route.

frontend/src/lib/components/player/TrackInfo.svelte

@@ -1,19 +1,27 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
+	import Cover from '$lib/components/ui/Cover.svelte';
 </script>
 
 <div class="flex min-w-0 items-center gap-3">
-	<div
-		class="grid h-12 w-12 shrink-0 place-items-center rounded-lg bg-gradient-to-br from-emerald-500/25 to-emerald-500/5 text-xl"
-	>
-		🎵
-	</div>
+	{#if player.current.id}
+		<Cover
+			trackId={player.current.id}
+			hue={player.current.hue}
+			size="small"
+			alt={player.current.title}
+			class="h-[52px] w-[52px] flex-shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
+		/>
+	{:else}
+		<div
+			class="h-[52px] w-[52px] flex-shrink-0 rounded-lg shadow-[0_6px_16px_-6px_rgba(0,0,0,0.6)]"
+			style="background:{player.artGradient}"
+		></div>
+	{/if}
 	<div class="min-w-0">
-		<p class="truncate text-sm font-semibold">{player.current?.title}</p>
-		{#if player.error}
-			<p class="truncate text-xs text-red-400">{player.error}</p>
-		{:else}
-			<p class="truncate text-xs text-neutral-500">Musify</p>
-		{/if}
+		<div class="truncate text-[13.5px] font-semibold text-[var(--mf-text)]">
+			{player.current.title}
+		</div>
+		<div class="truncate text-xs text-[var(--mf-text-3)]">{player.current.artist || '—'}</div>
 	</div>
 </div>