fix: separate appears_on releases from regular releases in artist page

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.
+

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 artistAlbums = applyFilters(albums.filter((album) => (album.album_group ?? album.album_type) === "album"));
-  const artistSingles = applyFilters(albums.filter((album) => album.album_type === "single"));
+  const artistSingles = applyFilters(albums.filter((album) => (album.album_group ?? album.album_type) === "single"));
-  const artistCompilations = applyFilters(albums.filter((album) => album.album_type === "compilation"));
+  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>}

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;