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 = `
+
More from ${album.artist.name}
+
+ ${this.createSkeletonCards(6, false)}
+
+ `;
+ 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;