From 73edcc0f3607cf72cc7a7b4eac86f73b44d2bb25 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@data-pixel.com>
Date: Tue, 23 Dec 2025 14:51:54 +0100
Subject: [PATCH] feat: add 'More from Artist' section to album page and refine
 header spacing

---
 js/ui.js   | 40 ++++++++++++++++++++++++++++++++++++++++
 styles.css | 11 ++++++-----
 2 files changed, 46 insertions(+), 5 deletions(-)

diff --git a/js/ui.js b/js/ui.js
index d3474cf..2728032 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -351,6 +351,46 @@ export class UIRenderer {
             recentActivityManager.addAlbum(album);
 
             document.title = `${album.title} - ${album.artist.name} - Monochrome`;
+
+            // "More from Artist" Section
+            try {
+                // Remove any existing "More from" section if re-rendering
+                const existingMoreSection = document.getElementById('album-more-from-artist');
+                if (existingMoreSection) existingMoreSection.remove();
+
+                const moreSection = document.createElement('section');
+                moreSection.id = 'album-more-from-artist';
+                moreSection.className = 'content-section';
+                moreSection.style.marginTop = '3rem';
+                moreSection.innerHTML = `
+                    <h2 class="section-title">More from ${album.artist.name}</h2>
+                    <div class="card-grid" id="album-more-albums">
+                        ${this.createSkeletonCards(6, false)}
+                    </div>
+                `;
+                document.getElementById('page-album').appendChild(moreSection);
+
+                const artistData = await this.api.getArtist(album.artist.id);
+                // Filter out current album and duplicates
+                const otherAlbums = artistData.albums
+                    .filter(a => a.id != album.id)
+                    .filter((a, index, self) => 
+                        index === self.findIndex((t) => t.title === a.title) // Dedup by title
+                    )
+                    .slice(0, 12); // Limit to 12
+
+                const moreContainer = document.getElementById('album-more-albums');
+                
+                if (otherAlbums.length > 0) {
+                    moreContainer.innerHTML = otherAlbums.map(a => this.createAlbumCardHTML(a)).join('');
+                } else {
+                    moreSection.remove(); // Remove section if no other albums
+                }
+            } catch (err) {
+                console.warn('Failed to load "More from artist":', err);
+                document.getElementById('album-more-from-artist')?.remove();
+            }
+
         } catch (error) {
             console.error("Failed to load album:", error);
             tracklistContainer.innerHTML = createPlaceholder(`Could not load album details. ${error.message}`);
diff --git a/styles.css b/styles.css
index bf91bcd..b8f665b 100644
--- a/styles.css
+++ b/styles.css
@@ -666,8 +666,8 @@ kbd {
     display: flex;
     align-items: flex-end;
     gap: var(--spacing-xl);
-    margin-bottom: var(--spacing-2xl);
-    padding-bottom: var(--spacing-xl);
+    margin-bottom: var(--spacing-lg);
+    padding-bottom: var(--spacing-md);
 }
 
 .detail-header-image {
@@ -2622,15 +2622,16 @@ input:checked + .slider::before {
 .now-playing-bar .cover:hover::after {
     opacity: 1;
 }
+
 #page-playlist .detail-header {
     display: flex;
     align-items: flex-end;
     gap: var(--spacing-xl);
-    margin-bottom: var(--spacing-2xl);
-    padding-bottom: var(--spacing-xl);
+    margin-bottom: var(--spacing-lg);
+    padding-bottom: var(--spacing-md);
 }
 
-#playlist-detail-image {
+#page-playlist .detail-cover {
     width: 200px;
     height: 200px;
     flex-shrink: 0;