From a7fc6e8d5da8ce9c562f804d2dc251016c14ab70 Mon Sep 17 00:00:00 2001
From: Markury <mr.catborg@gmail.com>
Date: Fri, 3 Oct 2025 20:12:03 -0400
Subject: [PATCH] feat(ui): sequential playlist track numbering and banner
 panel

---
 src/lib/components/CollectionView.svelte | 13 +++++++--
 src/routes/+layout.svelte                | 34 +++++++++++++++++++++---
 src/routes/playlists/[name]/+page.svelte |  1 +
 3 files changed, 42 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/CollectionView.svelte b/src/lib/components/CollectionView.svelte
index 59e57f3..1dc08b3 100644
--- a/src/lib/components/CollectionView.svelte
+++ b/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;
   }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 162ff6f..a11d6cf 100644
--- a/src/routes/+layout.svelte
+++ b/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">
-      {@render children?.()}
-    </main>
+    <div class="right-column">
+      <main class="content-area sunken-panel">
+        {@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;
diff --git a/src/routes/playlists/[name]/+page.svelte b/src/routes/playlists/[name]/+page.svelte
index 781c977..2882ace 100644
--- a/src/routes/playlists/[name]/+page.svelte
+++ b/src/routes/playlists/[name]/+page.svelte
@@ -94,6 +94,7 @@
       {selectedTrackIndex}
       onTrackClick={handleTrackClick}
       showAlbumColumn={true}
+      useSequentialNumbers={true}
     />
   {/if}
 </div>