From 3851fecd924522bd9d50cfdf0a1ec8637a0e0176 Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 18 Jan 2026 01:26:18 -0600
Subject: [PATCH] fix(ui): improve StackIcon reactivity and add debugging

- Replace onMount/onDestroy with $effect rune for better reactivity
- Add console logging to trace context changes
- Log when setPlaybackContext/clearPlaybackContext are called
- Log when StackIcon receives context updates

This will help debug why stack icon might not appear immediately.

To test:
1. Open browser console
2. Click a track in an album
3. Check logs for '[PlaybackContext]' and '[StackIcon]'
4. Verify context is being set and icon is receiving updates

cp
---
 src/lib/components/StackIcon.svelte    | 24 ++++++++++++++----------
 src/lib/stores/playbackContextStore.ts |  5 +++++
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/StackIcon.svelte b/src/lib/components/StackIcon.svelte
index e09fee108..16b7edf6a 100644
--- a/src/lib/components/StackIcon.svelte
+++ b/src/lib/components/StackIcon.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
   import { Layers } from 'lucide-svelte';
   import { subscribe, getCurrentContext, getContextDisplayInfo } from '$lib/stores/playbackContextStore';
-  import { onMount, onDestroy } from 'svelte';
   
   interface Props {
     size?: number;
@@ -13,17 +12,19 @@
   let context = $state(getCurrentContext());
   let displayInfo = $state(context ? getContextDisplayInfo() : null);
 
-  let unsubscribe: (() => void) | null = null;
-
-  onMount(() => {
-    unsubscribe = subscribe(() => {
-      context = getCurrentContext();
-      displayInfo = context ? getContextDisplayInfo() : null;
+  // Subscribe to context changes with $effect
+  $effect(() => {
+    const unsubscribe = subscribe(() => {
+      const newContext = getCurrentContext();
+      const newDisplayInfo = newContext ? getContextDisplayInfo() : null;
+      console.log('[StackIcon] Context changed:', { newContext, newDisplayInfo });
+      context = newContext;
+      displayInfo = newDisplayInfo;
     });
-  });
 
-  onDestroy(() => {
-    unsubscribe?.();
+    return () => {
+      unsubscribe();
+    };
   });
 </script>
 
@@ -31,6 +32,9 @@
   <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>
diff --git a/src/lib/stores/playbackContextStore.ts b/src/lib/stores/playbackContextStore.ts
index 3e0507af8..2f4b67dc7 100644
--- a/src/lib/stores/playbackContextStore.ts
+++ b/src/lib/stores/playbackContextStore.ts
@@ -45,6 +45,8 @@ export async function setPlaybackContext(
   trackIds: number[],
   startPosition: number
 ): Promise<void> {
+  console.log('[PlaybackContext] Setting context:', { contextType, id, label, trackIds: trackIds.length, startPosition });
+  
   await invoke('set_playback_context', {
     contextType,
     id,
@@ -64,6 +66,7 @@ export async function setPlaybackContext(
     current_position: startPosition
   };
 
+  console.log('[PlaybackContext] Context set, notifying listeners. Current context:', currentContext);
   notifyListeners();
 }
 
@@ -71,8 +74,10 @@ export async function setPlaybackContext(
  * Clear the playback context (e.g., when playing single track)
  */
 export async function clearPlaybackContext(): Promise<void> {
+  console.log('[PlaybackContext] Clearing context');
   await invoke('clear_playback_context');
   currentContext = null;
+  console.log('[PlaybackContext] Context cleared, notifying listeners');
   notifyListeners();
 }