feat(ui): add now playing panel and context menu for tracks

src/routes/+layout.svelte

@@ -3,16 +3,38 @@
   import TitleBar from "$lib/TitleBar.svelte";
   import MenuBar from "$lib/MenuBar.svelte";
   import ToolBar from "$lib/ToolBar.svelte";
+  import NowPlayingPanel from "$lib/components/NowPlayingPanel.svelte";
   import { settings, loadSettings } from '$lib/stores/settings';
   import { scanPlaylists, type Playlist } from '$lib/library/scanner';
   import { downloadQueue } from '$lib/stores/downloadQueue';
   import { deezerQueueManager } from '$lib/services/deezer/queueManager';
+  import { playback } from '$lib/stores/playback';
 
   let { children } = $props();
 
   let playlists = $state<Playlist[]>([]);
   let playlistsLoadTimestamp = $state<number>(0);
-  let showBanner = $state(false);
+  let showNowPlaying = $state(false);
+  let userHasClosedPanel = $state(false);
+
+  // Auto-show now playing panel when track starts (but only if user hasn't manually closed it)
+  $effect(() => {
+    if ($playback.currentTrack && !showNowPlaying && !userHasClosedPanel) {
+      showNowPlaying = true;
+    }
+    // Reset the closed flag when there's no track
+    if (!$playback.currentTrack) {
+      userHasClosedPanel = false;
+    }
+  });
+
+  export function toggleNowPlaying() {
+    showNowPlaying = !showNowPlaying;
+    // Track when user manually closes the panel
+    if (!showNowPlaying) {
+      userHasClosedPanel = true;
+    }
+  }
 
   // Count active downloads (queued or downloading)
   let activeDownloads = $derived(
@@ -86,7 +108,7 @@
 <div class="app-container">
   <TitleBar />
   <MenuBar />
-  <ToolBar />
+  <ToolBar onToggleNowPlaying={toggleNowPlaying} />
 
   <div class="main-layout">
   <aside class="sidebar sunken-panel">
@@ -155,9 +177,9 @@
         {@render children?.()}
       </main>
 
-      {#if showBanner}
+      {#if showNowPlaying}
         <div class="banner-panel sunken-panel">
-          Banner content here
+          <NowPlayingPanel />
         </div>
       {/if}
     </div>