From 7b4ff08a82c68a7aad516649501a6827c83a888f Mon Sep 17 00:00:00 2001
From: Xoconoch <github@cordovault.com>
Date: Thu, 21 Aug 2025 19:18:51 -0500
Subject: [PATCH] fix: separate appears_on releases from regular releases in
 artist page

---
 CONTRIBUTING.md                    |  7 +++++++
 spotizerr-ui/src/routes/artist.tsx | 19 ++++++++++++++++---
 spotizerr-ui/src/types/spotify.ts  |  1 +
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index a47f964..0239bb1 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,5 +1,12 @@
 # Contributing guidelines
 
+## Commit format
+
 - All pull requests must be made to `dev` branch
+- Use [conventional commit messages](https://www.conventionalcommits.org/en/v1.0.0/). E.g. `feat: add feature` or `fix: resolve issue #69420`
+
+
+## Feature philosophy
 
 - When implementing a feature related to downloading, follow the rule of choice: Every download must come from an active decision made by the user (e.g. clicking a download button, deciding the user wants a whole artist's discography, etc.). This takes out of the picture features like recommendation algorithms, auto-genererated playlists, etc.
+
diff --git a/spotizerr-ui/src/routes/artist.tsx b/spotizerr-ui/src/routes/artist.tsx
index 7a59725..ce33e0b 100644
--- a/spotizerr-ui/src/routes/artist.tsx
+++ b/spotizerr-ui/src/routes/artist.tsx
@@ -246,9 +246,10 @@ export const Artist = () => {
     return <div>Artist data could not be fully loaded. Please try again later.</div>;
   }
 
-  const artistAlbums = applyFilters(albums.filter((album) => album.album_type === "album"));
-  const artistSingles = applyFilters(albums.filter((album) => album.album_type === "single"));
-  const artistCompilations = applyFilters(albums.filter((album) => album.album_type === "compilation"));
+  const artistAlbums = applyFilters(albums.filter((album) => (album.album_group ?? album.album_type) === "album"));
+  const artistSingles = applyFilters(albums.filter((album) => (album.album_group ?? album.album_type) === "single"));
+  const artistCompilations = applyFilters(albums.filter((album) => (album.album_group ?? album.album_type) === "compilation"));
+  const artistAppearsOn = applyFilters(albums.filter((album) => (album.album_group ?? "") === "appears_on"));
 
   return (
     <div className="artist-page">
@@ -364,6 +365,18 @@ export const Artist = () => {
         </div>
       )}
 
+      {/* Appears On */}
+      {artistAppearsOn.length > 0 && (
+        <div className="mb-12">
+          <h2 className="text-3xl font-bold mb-6 text-content-primary dark:text-content-primary-dark">Appears On</h2>
+          <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-6">
+            {artistAppearsOn.map((album) => (
+              <AlbumCard key={album.id} album={album} onDownload={() => handleDownloadAlbum(album)} />
+            ))}
+          </div>
+        </div>
+      )}
+
       {/* sentinel + loading */}
       <div className="flex flex-col items-center gap-2">
         {loadingMore && <div className="py-4">Loading more...</div>}
diff --git a/spotizerr-ui/src/types/spotify.ts b/spotizerr-ui/src/types/spotify.ts
index b066a62..65525fb 100644
--- a/spotizerr-ui/src/types/spotify.ts
+++ b/spotizerr-ui/src/types/spotify.ts
@@ -44,6 +44,7 @@ export interface AlbumType {
   id: string;
   name: string;
   album_type: "album" | "single" | "compilation";
+  album_group?: "album" | "single" | "compilation" | "appears_on";
   artists: ArtistType[];
   images: ImageType[];
   release_date: string;