fix(ui): wire stack icon click and tooltip

cx

src/lib/components/NowPlayingBar.svelte

@@ -63,6 +63,7 @@
     isCastConnected?: boolean;
     onArtistClick?: () => void;
     onAlbumClick?: () => void;
+    onContextClick?: () => void;
   }
 
   let {
@@ -98,7 +99,8 @@
     lyricsActive = false,
     isCastConnected = false,
     onArtistClick,
-    onAlbumClick
+    onAlbumClick,
+    onContextClick
   }: Props = $props();
 
   let progressRef: HTMLDivElement;
@@ -297,7 +299,7 @@
           <div class="song-info">
             <span class="song-title" title={trackTitle}>{trackTitle}</span>
             <div class="song-meta">
-              <StackIcon size={12} class="stack-icon" />
+              <StackIcon size={12} class="stack-icon" onClick={onContextClick} />
               {#if artist}
                 <button class="meta-link" onclick={onArtistClick} title={$t('actions.goToArtist')}>
                   {artist}

src/lib/components/StackIcon.svelte

@@ -14,17 +14,12 @@
   let context = $state(getCurrentContext());
   let displayInfo = $state(context ? getContextDisplayInfo() : null);
   let showIcon = $state(getCachedPreferences().show_context_icon);
-  let isHovering = $state(false);
 
   function handleClick(e: MouseEvent) {
     e.stopPropagation();
     e.preventDefault();
-    console.log('[StackIcon] Clicked, onClick=', onClick, 'typeof=', typeof onClick);
     if (onClick) {
-      console.log('[StackIcon] Calling onClick callback');
       onClick();
-    } else {
-      console.warn('[StackIcon] No onClick callback provided');
     }
   }
 
@@ -58,19 +53,11 @@
   <button
     class="stack-icon-wrapper {className}"
     onclick={handleClick}
-    onmouseenter={() => isHovering = true}
-    onmouseleave={() => isHovering = false}
+    title={displayInfo ? `Playing from: ${displayInfo}` : undefined}
+    aria-label={displayInfo ? `Playing from: ${displayInfo}` : 'Playback context'}
     type="button"
   >
     <Layers size={size} strokeWidth={2} />
-    
-    {#if isHovering}
-      <div class="context-tooltip">
-        <div class="tooltip-text">Playing from</div>
-        <div class="tooltip-context">{displayInfo}</div>
-        <div class="tooltip-hint">Click to navigate</div>
-      </div>
-    {/if}
   </button>
 {/if}
 
@@ -101,38 +88,8 @@
     transform: scale(0.95);
   }
 
-  .context-tooltip {
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    background: rgba(20, 20, 20, 0.95);
-    backdrop-filter: blur(10px);
-    border: 1px solid rgba(255, 255, 255, 0.1);
-    border-radius: 8px;
-    padding: 8px 12px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-    white-space: nowrap;
-    z-index: 1000;
-    pointer-events: none;
-  }
-
-  .tooltip-text {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.6);
-    margin-bottom: 2px;
-  }
-
-  .tooltip-context {
-    font-size: 13px;
-    font-weight: 500;
-    color: rgba(255, 255, 255, 0.9);
-    margin-bottom: 2px;
-  }
-
-  .tooltip-hint {
-    font-size: 11px;
-    color: rgba(255, 255, 255, 0.5);
-    font-style: italic;
+  .stack-icon-wrapper:focus-visible {
+    outline: 2px solid var(--accent-primary);
+    outline-offset: 2px;
   }
 </style>