From 0aee58b823c38e49e0e92c67870eb7df33c024be Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Mon, 22 Dec 2025 23:28:09 +0000
Subject: [PATCH] Fix album track sorting and formatting for multi-disc albums

- Updated `renderAlbumPage` in `js/ui.js` to sort tracks by disc/volume number before track number.
- Updated `renderListWithTracks` to detect multi-disc albums.
- Updated `createTrackItemHTML` to display track numbers as `Disc-Track` (e.g., "1-1") for multi-disc albums when cover art is hidden (album view).
---
 js/ui.js | 25 +++++++++++++++++++++----
 1 file changed, 21 insertions(+), 4 deletions(-)

diff --git a/js/ui.js b/js/ui.js
index 7b72122..293ee6a 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -23,10 +23,19 @@ export class UIRenderer {
         `;
     }
 
-    createTrackItemHTML(track, index, showCover = false) {
+    createTrackItemHTML(track, index, showCover = false, hasMultipleDiscs = false) {
         const playIconSmall = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"></polygon></svg>';
         const trackImageHTML = showCover ? `<img src="${this.api.getCoverUrl(track.album?.cover, '80')}" alt="Track Cover" class="track-item-cover" loading="lazy">` : '';
-        const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : index + 1}</div>`;
+
+        let displayIndex;
+        if (hasMultipleDiscs && !showCover) {
+            const discNum = track.volumeNumber ?? track.discNumber ?? 1;
+            displayIndex = `${discNum}-${track.trackNumber}`;
+        } else {
+            displayIndex = index + 1;
+        }
+
+        const trackNumberHTML = `<div class="track-number">${showCover ? trackImageHTML : displayIndex}</div>`;
         const explicitBadge = hasExplicitContent(track) ? this.createExplicitBadge() : '';
         const trackArtists = getTrackArtists(track);
         const trackTitle = getTrackTitle(track);
@@ -117,8 +126,11 @@ export class UIRenderer {
         const fragment = document.createDocumentFragment();
         const tempDiv = document.createElement('div');
 
+        // Check if there are multiple discs in the tracks array
+        const hasMultipleDiscs = tracks.some(t => (t.volumeNumber || t.discNumber || 1) > 1);
+
         tempDiv.innerHTML = tracks.map((track, i) =>
-            this.createTrackItemHTML(track, i, showCover)
+            this.createTrackItemHTML(track, i, showCover, hasMultipleDiscs)
         ).join('');
 
         while (tempDiv.firstChild) {
@@ -288,7 +300,12 @@ export class UIRenderer {
                 </div>
             `;
 
-            tracks.sort((a, b) => a.trackNumber - b.trackNumber);
+            tracks.sort((a, b) => {
+                const discA = a.volumeNumber ?? a.discNumber ?? 1;
+                const discB = b.volumeNumber ?? b.discNumber ?? 1;
+                if (discA !== discB) return discA - discB;
+                return a.trackNumber - b.trackNumber;
+            });
             this.renderListWithTracks(tracklistContainer, tracks, false);
 
             recentActivityManager.addAlbum(album);