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>