feat(phase36): implement context icon visibility toggle (frontend + UI)

Frontend:
- Add show_context_icon to PlaybackPreferences interface
- Add setShowContextIcon function to store
- StackIcon now subscribes to preferences and checks show_context_icon
- Icon hidden when setting is false (context still tracked)

UI (Settings → Playback):
- Add toggle: "Show track playing context in player"
- Tooltip with bilingual explanation (EN/ES)
- Default: enabled (true)
- Persists across restarts

Context tracking ALWAYS active regardless of icon visibility.

Phase 3.6 COMPLETE ✅

cp

src/lib/components/StackIcon.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { Layers } from 'lucide-svelte';
   import { subscribe, getCurrentContext, getContextDisplayInfo } from '$lib/stores/playbackContextStore';
+  import { subscribe as subscribePrefs, getCachedPreferences } from '$lib/stores/playbackPreferencesStore';
   
   interface Props {
     size?: number;
@@ -11,8 +12,9 @@
   
   let context = $state(getCurrentContext());
   let displayInfo = $state(context ? getContextDisplayInfo() : null);
+  let showIcon = $state(getCachedPreferences().show_context_icon);
 
-  // Subscribe to context changes with $effect
+  // Subscribe to context changes
   $effect(() => {
     const unsubscribe = subscribe(() => {
       const newContext = getCurrentContext();
@@ -26,15 +28,24 @@
       unsubscribe();
     };
   });
+
+  // Subscribe to preferences changes
+  $effect(() => {
+    const unsubscribe = subscribePrefs(() => {
+      showIcon = getCachedPreferences().show_context_icon;
+      console.log('[StackIcon] Icon visibility:', showIcon);
+    });
+
+    return () => {
+      unsubscribe();
+    };
+  });
 </script>
 
-{#if context && displayInfo}
+{#if context && displayInfo && showIcon}
   <div class="stack-icon-wrapper {className}" title="Playing from: {displayInfo}">
     <Layers size={size} strokeWidth={2} />
   </div>
-{:else}
-  <!-- Debug: Icon should be hidden -->
-  <!-- <span style="font-size: 10px; color: red;">No context</span> -->
 {/if}
 
 <style>

src/lib/components/views/SettingsView.svelte

@@ -46,6 +46,7 @@
   import {
     getPlaybackPreferences,
     setAutoplayMode,
+    setShowContextIcon,
     type AutoplayMode
   } from '$lib/stores/playbackPreferencesStore';
 
@@ -316,6 +317,7 @@
 
   // Playback settings
   let autoplayMode = $state<AutoplayMode>('continue');
+  let showContextIcon = $state(true);
   let gaplessPlayback = $state(true);
   let crossfade = $state(0);
   let normalizeVolume = $state(false);
@@ -1114,6 +1116,7 @@
     try {
       const prefs = await getPlaybackPreferences();
       autoplayMode = prefs.autoplay_mode;
+      showContextIcon = prefs.show_context_icon;
     } catch (err) {
       console.error('Failed to load playback preferences:', err);
     }
@@ -1131,6 +1134,18 @@
     }
   }
 
+  async function handleShowContextIconChange(show: boolean) {
+    console.log('[Settings] Changing show context icon to:', show);
+    try {
+      await setShowContextIcon(show);
+      showContextIcon = show;
+      console.log('[Settings] Show context icon saved successfully');
+    } catch (err) {
+      console.error('[Settings] Failed to set show context icon:', err);
+      showToast('Failed to save icon visibility preference', 'error');
+    }
+  }
+
   async function checkLegacyDownloads() {
     try {
       const result = await invoke<{has_legacy_files: boolean, total_tracks: number}>('detect_legacy_downloads');
@@ -1478,6 +1493,19 @@
         </label>
       </div>
     </div>
+    <div class="setting-row">
+      <div class="label-with-tooltip">
+        <span class="setting-label">Show track playing context in player</span>
+        <Tooltip>
+          <div style="max-width: 260px;">
+            <strong>English:</strong> Shows the context from which the current track is being played, such as from an album view, artist page, playlist, etc.
+            <br><br>
+            <strong>Español:</strong> Muestra el contexto desde donde se está reproduciendo el track actual, por ejemplo desde la vista de álbum, de artista, playlist, etc.
+          </div>
+        </Tooltip>
+      </div>
+      <Toggle enabled={showContextIcon} onchange={handleShowContextIconChange} />
+    </div>
     <div class="setting-row">
       <div class="label-with-tooltip">
         <span class="setting-label">{$t('settings.playback.gapless')}</span>

src/lib/stores/playbackPreferencesStore.ts

@@ -12,12 +12,14 @@ export type AutoplayMode = 'continue' | 'track_only';
 
 export interface PlaybackPreferences {
   autoplay_mode: AutoplayMode;
+  show_context_icon: boolean;
 }
 
 // ============ State ============
 
 let preferences: PlaybackPreferences = {
-  autoplay_mode: 'continue'
+  autoplay_mode: 'continue',
+  show_context_icon: true
 };
 
 const listeners = new Set<() => void>();
@@ -49,6 +51,15 @@ export async function setAutoplayMode(mode: AutoplayMode): Promise<void> {
   notifyListeners();
 }
 
+/**
+ * Set whether to show context icon in player
+ */
+export async function setShowContextIcon(show: boolean): Promise<void> {
+  await invoke('set_show_context_icon', { show });
+  preferences.show_context_icon = show;
+  notifyListeners();
+}
+
 /**
  * Get cached preferences (no backend call)
  */