refactor(ui): housekeeping

src/lib/components/ContextMenu.svelte

@@ -48,6 +48,13 @@
       onClose();
     }
   }
+
+  function handleKeyDown(e: KeyboardEvent, item: MenuItem) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleItemClick(item);
+    }
+  }
 </script>
 
 <div
@@ -61,6 +68,8 @@
         role="menuitem"
         class:disabled={item.disabled}
         onclick={() => handleItemClick(item)}
+        onkeydown={(e) => handleKeyDown(e, item)}
+        tabindex="0"
       >
         {item.label}
       </li>

src/lib/components/NowPlayingPanel.svelte

@@ -4,6 +4,14 @@
   import LyricsDisplay from '$lib/components/LyricsDisplay.svelte';
   import TriangleVolumeSlider from '$lib/components/TriangleVolumeSlider.svelte';
 
+  // Local volume state that syncs with the store
+  let volume = $state($playback.volume);
+
+  // Sync local volume with store volume
+  $effect(() => {
+    volume = $playback.volume;
+  });
+
   function handlePlayPause() {
     playback.togglePlayPause();
   }
@@ -23,8 +31,8 @@
     playback.setCurrentTime(time);
   }
 
-  function handleVolumeChange(volume: number) {
-    playback.setVolume(volume);
+  function handleVolumeChange(newVolume: number) {
+    playback.setVolume(newVolume);
   }
 
   function formatTime(seconds: number): string {
@@ -127,7 +135,7 @@
         </div>
 
         <div class="volume-section">
-          <TriangleVolumeSlider bind:value={$playback.volume} onchange={handleVolumeChange} />
+          <TriangleVolumeSlider bind:value={volume} onchange={handleVolumeChange} />
         </div>
       </div>
     </div>

src/lib/components/TriangleVolumeSlider.svelte

@@ -148,6 +148,9 @@
         bind:this={volumeThumb}
         onmousedown={handleThumbMouseDown}
         ontouchstart={handleThumbTouchStart}
+        role="button"
+        tabindex="-1"
+        aria-label="Volume slider thumb"
       >
         <div class="volume-thumb-inner"></div>
       </div>

src/lib/stores/playback.ts

@@ -46,6 +46,8 @@ function createPlaybackStore(): PlaybackStore {
 
   return {
     subscribe,
+    set,
+    update,
 
     // Queue management
     playTrack(track: Track) {

src/routes/services/deezer/playlists/[id]/+page.svelte

@@ -98,11 +98,15 @@
           // If we have cached album picture, use it
           if (cachedTracks[0].album_picture) {
             playlistPicture = cachedTracks[0].album_picture;
-          } else if ($deezerAuth.arl && cachedTracks[0].track_id) {
+          } else if ($deezerAuth.arl) {
+            // Get the track ID - handle both DeezerTrack (has 'id') and DeezerPlaylistTrack (has 'track_id')
+            const trackId = 'track_id' in cachedTracks[0] ? cachedTracks[0].track_id : cachedTracks[0].id;
+
+            if (trackId) {
               // Fetch album data from API to get cover
               try {
                 deezerAPI.setArl($deezerAuth.arl);
-              const trackData = await deezerAPI.getTrackData(cachedTracks[0].track_id);
+                const trackData = await deezerAPI.getTrack(trackId);
                 if (trackData && trackData.ALB_PICTURE) {
                   const albumCoverUrl = `https://e-cdns-images.dzcdn.net/images/cover/${trackData.ALB_PICTURE}/500x500-000000-80-0-0.jpg`;
                   playlistPicture = albumCoverUrl;
@@ -111,7 +115,7 @@
                   const database = await import('$lib/library/deezer-database').then(m => m.initDeezerDatabase());
                   await database.execute(
                     'UPDATE deezer_playlist_tracks SET album_picture = $1 WHERE track_id = $2',
-                  [albumCoverUrl, cachedTracks[0].track_id]
+                    [albumCoverUrl, trackId]
                   );
                 }
               } catch (err) {
@@ -119,6 +123,7 @@
               }
             }
           }
+        }
 
         // Final fallback to local files
         if ((!playlistPicture || !playlistPicture.startsWith('http')) && $settings.musicFolder) {