feat(ui): sequential playlist track numbering and banner panel

src/lib/components/CollectionView.svelte

@@ -11,6 +11,7 @@
     selectedTrackIndex?: number | null;
     onTrackClick?: (index: number) => void;
     showAlbumColumn?: boolean;
+    useSequentialNumbers?: boolean;
   }
 
   let {
@@ -21,7 +22,8 @@
     tracks,
     selectedTrackIndex = null,
     onTrackClick,
-    showAlbumColumn = false
+    showAlbumColumn = false,
+    useSequentialNumbers = false
   }: Props = $props();
 
   function getThumbnailUrl(coverPath?: string): string {
@@ -100,7 +102,7 @@
                 onclick={() => handleTrackClick(i)}
               >
                 <td class="track-number">
-                  {track.metadata.trackNumber ?? i + 1}
+                  {useSequentialNumbers ? i + 1 : (track.metadata.trackNumber ?? i + 1)}
                 </td>
                 <td>{track.metadata.title ?? '—'}</td>
                 {#if showAlbumColumn}
@@ -206,6 +208,13 @@
     width: 100%;
   }
 
+  thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    background: #121212;
+  }
+
   th {
     text-align: left;
   }

src/routes/+layout.svelte

@@ -12,6 +12,7 @@
 
   let playlists = $state<Playlist[]>([]);
   let playlistsLoadTimestamp = $state<number>(0);
+  let showBanner = $state(false);
 
   // Count active downloads (queued or downloading)
   let activeDownloads = $derived(
@@ -149,9 +150,17 @@
     </nav>
   </aside>
 
-    <main class="content-area sunken-panel">
+    <div class="right-column">
-      {@render children?.()}
+      <main class="content-area sunken-panel">
-    </main>
+        {@render children?.()}
+      </main>
+
+      {#if showBanner}
+        <div class="banner-panel sunken-panel">
+          Banner content here
+        </div>
+      {/if}
+    </div>
   </div>
 
   <div class="status-text">Ready</div>
@@ -230,15 +239,32 @@
     padding-left: 8px;
   }
 
-  .content-area {
+  .right-column {
     flex: 1;
     min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .content-area {
+    flex: 1;
+    min-height: 0;
     overflow-y: auto;
     padding: 0;
     font-family: "Pixelated MS Sans Serif", Arial;
     background: #121212;
   }
 
+  .banner-panel {
+    flex-shrink: 0;
+    height: 120px;
+    padding: 8px;
+    font-family: "Pixelated MS Sans Serif", Arial;
+    background: #121212;
+    overflow: hidden;
+  }
+
   .status-text {
     padding: 6px 8px 10px 10px;
     font-family: "Pixelated MS Sans Serif", Arial;

src/routes/playlists/[name]/+page.svelte

@@ -94,6 +94,7 @@
       {selectedTrackIndex}
       onTrackClick={handleTrackClick}
       showAlbumColumn={true}
+      useSequentialNumbers={true}
     />
   {/if}
 </div>