From d7baa1a83c6234364251c3958f8d3cc5b7b41695 Mon Sep 17 00:00:00 2001
From: Frederick O'Brien <frederik.obrien@gmail.com>
Date: Tue, 28 Oct 2025 23:14:13 +0000
Subject: [PATCH] `ArtistHydrated` type and release card grid refactor

---
 api/src/routes/artists/[slug]/+server.ts      |  5 +--
 app/src/lib/components/ReleaseCard.svelte     | 10 +++---
 app/src/lib/components/ReleaseCardGrid.svelte | 16 ++++++----
 .../components/search/SearchResults.svelte    |  2 --
 app/src/routes/+page.svelte                   |  2 +-
 app/src/routes/artists/[slug]/+page.server.ts | 28 -----------------
 app/src/routes/artists/[slug]/+page.svelte    | 31 +++++++------------
 app/src/routes/artists/[slug]/+page.ts        | 18 +++++++++++
 .../routes/me/collections/[slug]/+page.svelte |  2 +-
 app/src/routes/releases/+page.svelte          |  2 +-
 shared/config/index.ts                        |  1 +
 shared/types/hydrated.ts                      |  8 +++--
 12 files changed, 56 insertions(+), 69 deletions(-)
 delete mode 100644 app/src/routes/artists/[slug]/+page.server.ts
 create mode 100644 app/src/routes/artists/[slug]/+page.ts

diff --git a/api/src/routes/artists/[slug]/+server.ts b/api/src/routes/artists/[slug]/+server.ts
index b9ae3dc..e8aaf25 100644
--- a/api/src/routes/artists/[slug]/+server.ts
+++ b/api/src/routes/artists/[slug]/+server.ts
@@ -1,10 +1,11 @@
 import { TABLES } from '../../../../../shared/config';
 import { handlePostgrestQuery, supabase } from '$lib/server/supabase';
 import type { Artist } from '../../../../../shared/types/core';
+import type { ArtistHydrated } from '../../../../../shared/types/hydrated';
 
 export async function GET({ params }) {
-	return handlePostgrestQuery<Artist>(
-		async () => await supabase.from(TABLES.artists).select().eq('id', params.slug).single(),
+	return handlePostgrestQuery<ArtistHydrated>(
+		async () => await supabase.from(TABLES.artistsRich).select().eq('id', params.slug).single(),
 		{ errorMessage: 'Failed to fetch artist' }
 	);
 }
diff --git a/app/src/lib/components/ReleaseCard.svelte b/app/src/lib/components/ReleaseCard.svelte
index 05d8b99..0a2d79b 100644
--- a/app/src/lib/components/ReleaseCard.svelte
+++ b/app/src/lib/components/ReleaseCard.svelte
@@ -2,15 +2,13 @@
 	let {
 		link,
 		name,
-		artist,
-		coverArt,
-		hideArtist = false
+		artist = undefined,
+		coverArt
 	}: {
 		link: string;
 		name: string;
-		artist: string;
+		artist?: string;
 		coverArt: string;
-		hideArtist?: boolean;
 	} = $props();
 
 	const randomRotation = Math.floor(Math.random() * 4) - 2;
@@ -20,7 +18,7 @@
 	<div class="release-card">
 		<img src={coverArt} alt={`Artwork for ${name} by ${artist}`} />
 		<div class="release-name">{name}</div>
-		{#if !hideArtist}
+		{#if artist}
 			<div class="artist-name">
 				{artist}
 			</div>
diff --git a/app/src/lib/components/ReleaseCardGrid.svelte b/app/src/lib/components/ReleaseCardGrid.svelte
index 964da46..09f775b 100644
--- a/app/src/lib/components/ReleaseCardGrid.svelte
+++ b/app/src/lib/components/ReleaseCardGrid.svelte
@@ -1,15 +1,20 @@
 <script lang="ts">
-	import type { ReleaseHydrated } from '../../../../shared/types/hydrated';
 	import { makeImageLink } from '$lib/utils';
 	import ReleaseCard from './ReleaseCard.svelte';
+	import type { Release } from '../../../../shared/types/core';
+	import type { ReleaseHydrated } from '../../../../shared/types/hydrated';
 
 	let {
 		releases,
-		hideArtistName = false
+		showArtistName = false
 	}: {
-		releases: ReleaseHydrated[];
-		hideArtistName?: boolean;
+		releases: (Release | ReleaseHydrated)[];
+		showArtistName?: boolean;
 	} = $props();
+
+	const isHydrated = (release: Release | ReleaseHydrated): release is ReleaseHydrated => {
+		return (release as ReleaseHydrated).artist !== undefined;
+	};
 </script>
 
 <div class="releases-grid">
@@ -17,9 +22,8 @@
 		<ReleaseCard
 			link={`/releases/${release.id}`}
 			name={release.title}
-			artist={release.artist?.name}
+			artist={isHydrated(release) && showArtistName ? release.artist.name : undefined}
 			coverArt={makeImageLink(release.artwork_ipfs_cid, 200)}
-			hideArtist={hideArtistName}
 		/>
 	{/each}
 </div>
diff --git a/app/src/lib/components/search/SearchResults.svelte b/app/src/lib/components/search/SearchResults.svelte
index 6d3ffc8..478252b 100644
--- a/app/src/lib/components/search/SearchResults.svelte
+++ b/app/src/lib/components/search/SearchResults.svelte
@@ -38,10 +38,8 @@
 				{#each searchResultsReleases as release}
 					<ReleaseCard
 						name={release.name}
-						artist={'tbd'}
 						coverArt={release.image_cid ? makeImageLink(release.image_cid, 200) : ''}
 						link={`/releases/${release.id}`}
-						hideArtist={true}
 					/>
 				{/each}
 			</div>
diff --git a/app/src/routes/+page.svelte b/app/src/routes/+page.svelte
index e19fc51..a29a661 100644
--- a/app/src/routes/+page.svelte
+++ b/app/src/routes/+page.svelte
@@ -25,7 +25,7 @@
 <section>
 	<a href="/releases"><h2>Releases</h2></a>
 
-	<ReleaseCardGrid releases={albumsAndEPs} />
+	<ReleaseCardGrid releases={albumsAndEPs} showArtistName />
 </section>
 
 <section>
diff --git a/app/src/routes/artists/[slug]/+page.server.ts b/app/src/routes/artists/[slug]/+page.server.ts
deleted file mode 100644
index 89ff986..0000000
--- a/app/src/routes/artists/[slug]/+page.server.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { API_BASE } from '$lib/global/config';
-import { error } from '@sveltejs/kit';
-import type { Artist } from '../../../../../shared/types/core';
-import { sortReleasesByDate } from '../../../../../shared/utils';
-import type { ReleaseHydrated } from '../../../../../shared/types/hydrated';
-
-export const load = async ({ params, fetch }) => {
-	const matchingArtist: Artist = await fetch(`${API_BASE}/artists/${params.slug}`).then((res) => {
-		if (!res.ok) {
-			error(404, 'Artist not found');
-		}
-		return res.json();
-	});
-
-	const artistReleases: ReleaseHydrated[] = await fetch(
-		`${API_BASE}/artists/${params.slug}/releases`
-	).then((res) => {
-		if (!res.ok) {
-			error(500, 'Failed to fetch artist releases');
-		}
-		return res.json();
-	});
-
-	return {
-		artist: matchingArtist,
-		releases: sortReleasesByDate(artistReleases)
-	};
-};
diff --git a/app/src/routes/artists/[slug]/+page.svelte b/app/src/routes/artists/[slug]/+page.svelte
index 20c38c7..2e669f5 100644
--- a/app/src/routes/artists/[slug]/+page.svelte
+++ b/app/src/routes/artists/[slug]/+page.svelte
@@ -1,35 +1,29 @@
 <script lang="ts">
 	import ReleaseCardGrid from '$lib/components/ReleaseCardGrid.svelte';
-	import type { ReleaseHydrated } from '../../../../../shared/types/hydrated';
+	import type { ArtistHydrated } from '../../../../../shared/types/hydrated';
 	import { makeImageLink } from '$lib/utils';
 	import { toggleFollowedArtist } from '$lib/remote-functions/user.remote';
 	import SectionLink from '$lib/components/layout/SectionLink.svelte';
-	import type { Artist } from '../../../../../shared/types/core';
+	import type { Release } from '../../../../../shared/types/core';
 
-	let {
-		data
-	}: { data: { artist: Artist; releases: ReleaseHydrated[]; followedArtists: string[] } } =
-		$props();
+	let { data }: { data: { artist: ArtistHydrated; followedArtists: string[] } } = $props();
+
+	const sortReleasesByDate = (releases: Release[]) => {
+		return releases.sort((a, b) => {
+			return new Date(b.release_date).getTime() - new Date(a.release_date).getTime();
+		});
+	};
 
 	const { name, bio, website_url, image_ipfs_cid } = $derived(data.artist);
-	const releases = $derived(data.releases);
-	let updatingFollow = $state(false);
+	const releases = $derived(sortReleasesByDate(data.artist.releases));
 
-	const filterReleasesByType = (type: 'album' | 'ep' | 'single', releases: ReleaseHydrated[]) => {
+	const filterReleasesByType = (type: 'album' | 'ep' | 'single', releases: Release[]) => {
 		return releases.filter((release) => release.release_type === type);
 	};
 
 	const lps = $derived(filterReleasesByType('album', releases));
 	const eps = $derived(filterReleasesByType('ep', releases));
 	const singles = $derived(filterReleasesByType('single', releases));
-
-	function handleUpdate() {
-		updatingFollow = true;
-		return async ({ update }: { update: () => Promise<void> }) => {
-			await update();
-			updatingFollow = false;
-		};
-	}
 </script>
 
 <svelte:head>
@@ -90,7 +84,6 @@
 							artistName: name
 						};
 					})}
-					hideArtistName
 				/>
 			</div>
 		{/if}
@@ -105,7 +98,6 @@
 							artistName: name
 						};
 					})}
-					hideArtistName
 				/>
 			</div>
 		{/if}
@@ -120,7 +112,6 @@
 							artistName: name
 						};
 					})}
-					hideArtistName
 				/>
 			</div>
 		{/if}
diff --git a/app/src/routes/artists/[slug]/+page.ts b/app/src/routes/artists/[slug]/+page.ts
new file mode 100644
index 0000000..8c9f4ca
--- /dev/null
+++ b/app/src/routes/artists/[slug]/+page.ts
@@ -0,0 +1,18 @@
+import { API_BASE } from '$lib/global/config';
+import type { PostgrestResponse } from '@supabase/supabase-js';
+import { error } from '@sveltejs/kit';
+import type { ArtistHydrated } from '../../../../../shared/types/hydrated';
+
+export const load = async ({ params, fetch }) => {
+	const matchingArtist: PostgrestResponse<ArtistHydrated> = await fetch(
+		`${API_BASE}/artists/${params.slug}`
+	).then((res) => {
+		return res.json();
+	});
+
+	if (matchingArtist.error) error(404, 'Artist not found');
+
+	return {
+		artist: matchingArtist
+	};
+};
diff --git a/app/src/routes/me/collections/[slug]/+page.svelte b/app/src/routes/me/collections/[slug]/+page.svelte
index b034236..019dd58 100644
--- a/app/src/routes/me/collections/[slug]/+page.svelte
+++ b/app/src/routes/me/collections/[slug]/+page.svelte
@@ -36,7 +36,7 @@
 			<div>{description}</div>
 		{/if}
 	</div>
-	<ReleaseCardGrid {releases} />
+	<ReleaseCardGrid {releases} showArtistName />
 </div>
 
 <form {...deleteCollection.for(id)}>
diff --git a/app/src/routes/releases/+page.svelte b/app/src/routes/releases/+page.svelte
index ee6e8a1..c41b0a5 100644
--- a/app/src/routes/releases/+page.svelte
+++ b/app/src/routes/releases/+page.svelte
@@ -12,4 +12,4 @@
 
 <h2>Releases</h2>
 
-<ReleaseCardGrid releases={data.releases} />
+<ReleaseCardGrid releases={data.releases} showArtistName />
diff --git a/shared/config/index.ts b/shared/config/index.ts
index f482d9f..9b55a48 100644
--- a/shared/config/index.ts
+++ b/shared/config/index.ts
@@ -15,6 +15,7 @@ export const REVENUE_SPLIT = {
 export const TABLES = {
   users: "users",
   artists: "artists",
+  artistsRich: "artists_rich",
   artistMembers: "artist_members",
   tracks: "tracks",
   releaseTracks: "release_tracks",
diff --git a/shared/types/hydrated.ts b/shared/types/hydrated.ts
index cfa3f6b..5fbf425 100644
--- a/shared/types/hydrated.ts
+++ b/shared/types/hydrated.ts
@@ -10,10 +10,14 @@ export interface TrackHydrated extends Track {
   artist: Artist;
 }
 
+export interface ArtistHydrated extends Artist {
+  releases: Release[];
+}
+
 export interface CollectionHydrated extends Collection {
-    releases: ReleaseHydrated[];
+  releases: ReleaseHydrated[];
 }
 
 export interface MixtapeHydrated extends Mixtape {
-    tracks: TrackHydrated[]
+  tracks: TrackHydrated[];
 }