From c4108ec75abb4a36681d3b2943e6c8435da0e5dc Mon Sep 17 00:00:00 2001
From: sentriz <senan@senan.xyz>
Date: Mon, 7 Jul 2025 14:44:07 +0100
Subject: [PATCH 1/2] ArtistDetails: group albums by type (Single, Album, EP,
 Compilation, etc)

---
 src/library/artist/ArtistDetails.vue | 33 +++++++++++++++++++++++-----
 src/shared/api.ts                    |  6 ++++-
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/library/artist/ArtistDetails.vue b/src/library/artist/ArtistDetails.vue
index b5c90d49..5abc8d3e 100644
--- a/src/library/artist/ArtistDetails.vue
+++ b/src/library/artist/ArtistDetails.vue
@@ -75,11 +75,19 @@
           <Icon icon="arrow-up-down" />
         </b-button>
       </div>
-      <AlbumList :items="albums">
-        <template #text="{ year }">
-          {{ year || 'Unknown' }}
+      <div v-for="({ releaseType, albums: releaseTypeAlbums }) in albums" :key="releaseType">
+        <template v-if="albums.length >= 2">
+          <h4 class="mt-3 text-muted">
+            {{ releaseType }}
+          </h4>
+          <hr class="my-2">
         </template>
-      </AlbumList>
+        <AlbumList :items="releaseTypeAlbums">
+          <template #text="{ year }">
+            {{ year || 'Unknown' }}
+          </template>
+        </AlbumList>
+      </div>
     </template>
 
     <template v-if="item.similarArtist.length > 0">
@@ -132,8 +140,21 @@
       isFavourite(): boolean {
         return !!this.favouriteStore.artists[this.id]
       },
-      albums(): Album[] {
-        return orderBy(this.item?.albums ?? [], 'year', this.mainStore.artistAlbumSortOrder)
+      albums(): { releaseType: string, albums: Album[] }[] {
+        const sorted: Album[] = (orderBy(this.item?.albums ?? [], 'year', this.mainStore.artistAlbumSortOrder) || [])
+        const grouped = Object.groupBy(sorted, ({ isCompilation, releaseTypes }) =>
+          isCompilation ? 'Compilation' : (releaseTypes[0] || 'Other')
+        ) || {}
+
+        const groupOrder = ['Album', 'EP', 'Single']
+        const groups = Object.entries(grouped).sort(([aType], [bType]) => {
+          const [a, b] = [groupOrder.indexOf(aType), groupOrder.indexOf(bType)]
+          if (a === -1 && b === -1) return 0
+          if (a === -1) return 1
+          if (b === -1) return -1
+          return a - b
+        })
+        return groups.map(([releaseType, albums]) => ({ releaseType, albums: albums || [] }))
       },
     },
     watch: {
diff --git a/src/shared/api.ts b/src/shared/api.ts
index ade5f716..9e2384c4 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -48,6 +48,8 @@ export interface Album {
   lastFmUrl?: string
   musicBrainzUrl?: string
   tracks?: Track[]
+  isCompilation: boolean
+  releaseTypes: string[]
 }
 
 export interface Artist {
@@ -591,7 +593,9 @@ export class API {
       musicBrainzUrl: item.musicBrainzId
         ? `https://musicbrainz.org/release/${item.musicBrainzId}`
         : undefined,
-      tracks: (item.song || []).map(this.normalizeTrack, this)
+      tracks: (item.song || []).map(this.normalizeTrack, this),
+      isCompilation: !!item.isCompilation,
+      releaseTypes: item.releaseTypes.length ? item.releaseTypes : [],
     }
   }
 

From 07a8d65454d2155052b27c1c7216be6d27297632 Mon Sep 17 00:00:00 2001
From: sentriz <senan@senan.xyz>
Date: Fri, 8 Aug 2025 21:00:42 +0100
Subject: [PATCH 2/2] render groups as top level elements

---
 src/library/artist/ArtistDetails.vue | 24 ++++++++----------------
 1 file changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/library/artist/ArtistDetails.vue b/src/library/artist/ArtistDetails.vue
index 5abc8d3e..ee2c58bb 100644
--- a/src/library/artist/ArtistDetails.vue
+++ b/src/library/artist/ArtistDetails.vue
@@ -66,28 +66,20 @@
       <TrackList :tracks="item.topTracks" no-artist />
     </template>
 
-    <template v-if="albums.length > 0">
-      <div class="d-flex justify-content-between mt-5 mb-2">
+    <template v-for="({ releaseType, albums: releaseTypeAlbums }) in albums">
+      <div :key="releaseType" class="d-flex justify-content-between mt-5 mb-2">
         <h3 class="my-0">
-          Albums
+          {{ releaseType }}
         </h3>
         <b-button variant="link" class="p-0" @click="toggleAlbumSortOrder">
           <Icon icon="arrow-up-down" />
         </b-button>
       </div>
-      <div v-for="({ releaseType, albums: releaseTypeAlbums }) in albums" :key="releaseType">
-        <template v-if="albums.length >= 2">
-          <h4 class="mt-3 text-muted">
-            {{ releaseType }}
-          </h4>
-          <hr class="my-2">
+      <AlbumList :key="releaseType" :items="releaseTypeAlbums">
+        <template #text="{ year }">
+          {{ year || 'Unknown' }}
         </template>
-        <AlbumList :items="releaseTypeAlbums">
-          <template #text="{ year }">
-            {{ year || 'Unknown' }}
-          </template>
-        </AlbumList>
-      </div>
+      </AlbumList>
     </template>
 
     <template v-if="item.similarArtist.length > 0">
@@ -143,7 +135,7 @@
       albums(): { releaseType: string, albums: Album[] }[] {
         const sorted: Album[] = (orderBy(this.item?.albums ?? [], 'year', this.mainStore.artistAlbumSortOrder) || [])
         const grouped = Object.groupBy(sorted, ({ isCompilation, releaseTypes }) =>
-          isCompilation ? 'Compilation' : (releaseTypes[0] || 'Other')
+          isCompilation ? 'Compilation' : (releaseTypes[0] || 'Album')
         ) || {}
 
         const groupOrder = ['Album', 'EP', 'Single']