Link track coauthors next to the artist in rows and the player

web-player/src/lib/components/music/TrackTitleCell.svelte

@@ -21,6 +21,7 @@
 		title={track.title}
 		artist={track.artist}
 		ownerUserId={track.ownerUserId}
+		coauthors={track.coauthors}
 		explicit={track.explicit}
 		{active}
 	>

web-player/src/lib/components/player/Queue.svelte

@@ -60,6 +60,7 @@
 					title={player.current.title}
 					artist={player.current.artist || '—'}
 					ownerUserId={player.current.ownerUserId}
+					coauthors={player.current.coauthors}
 					explicit={player.current.explicit}
 					active
 				/>
@@ -123,6 +124,7 @@
 						title={track.title}
 						subtitle={track.artist || '—'}
 						subtitleHref={track.ownerUserId}
+						coauthors={track.coauthors}
 						explicit={track.explicit}
 						trackId={track.id}
 						class="p-2"

web-player/src/lib/components/player/TrackInfo.svelte

@@ -42,6 +42,7 @@
 		<ArtistLink
 			name={current?.artist || '—'}
 			ownerUserId={current?.ownerUserId}
+			coauthors={current?.coauthors}
 			class="mt-0.5 text-xs text-fg-2"
 		/>
 	</div>

web-player/src/lib/components/ui/media/ArtistLink.svelte

@@ -2,14 +2,30 @@
 	interface Props {
 		name?: string | null;
 		ownerUserId?: string | null;
+		coauthors?: { id: string; name: string }[];
 		class?: string;
 	}
 
-	let { name, ownerUserId, class: klass = '' }: Props = $props();
+	let { name, ownerUserId, coauthors = [], class: klass = '' }: Props = $props();
 </script>
 
+{#snippet person(label: string, id?: string | null)}
+	{#if id}
+		<a href="/user/{id}" onclick={(e) => e.stopPropagation()} class="hover:underline">{label}</a>
+	{:else}
+		{label}
+	{/if}
+{/snippet}
+
 {#if name}
-	{#if ownerUserId}
+	{#if coauthors.length > 0}
+		<span class="block max-w-full truncate {klass}">
+			{@render person(name, ownerUserId)}{#each coauthors as coauthor (coauthor.id)}, {@render person(
+					coauthor.name,
+					coauthor.id
+				)}{/each}
+		</span>
+	{:else if ownerUserId}
 		<a
 			href="/user/{ownerUserId}"
 			onclick={(e) => e.stopPropagation()}

web-player/src/lib/components/ui/media/ListRow.svelte

@@ -13,6 +13,7 @@
 		title: string;
 		subtitle?: string | null;
 		subtitleHref?: string | null;
+		coauthors?: { id: string; name: string }[];
 		explicit?: boolean;
 		trackId?: string;
 		trackIds?: string[];
@@ -35,6 +36,7 @@
 		title,
 		subtitle,
 		subtitleHref,
+		coauthors,
 		explicit = false,
 		trackId,
 		trackIds,
@@ -60,6 +62,7 @@
 		{title}
 		artist={subtitle}
 		ownerUserId={subtitleHref}
+		{coauthors}
 		{trackId}
 		{trackIds}
 		{coverSrc}

web-player/src/lib/components/ui/media/MediaIdentity.svelte

@@ -10,6 +10,7 @@
 		title: string;
 		artist?: string | null;
 		ownerUserId?: string | null;
+		coauthors?: { id: string; name: string }[];
 		coverSrc?: string | null;
 		size?: 'xs' | 'sm' | 'lg';
 		explicit?: boolean;
@@ -26,6 +27,7 @@
 		title,
 		artist,
 		ownerUserId,
+		coauthors,
 		coverSrc,
 		size = 'sm',
 		explicit = false,
@@ -60,6 +62,6 @@
 				>{title}</span
 			>
 		</div>
-		<ArtistLink name={artist} {ownerUserId} class="mt-0.5 text-xs text-fg-2" />
+		<ArtistLink name={artist} {ownerUserId} {coauthors} class="mt-0.5 text-xs text-fg-2" />
 	</div>
 </div>

web-player/src/routes/(app)/+page.svelte

@@ -117,6 +117,7 @@
 							title={item.title}
 							subtitle={item.artist}
 							subtitleHref={item.ownerUserId}
+							coauthors={item.coauthors}
 							explicit={item.explicit}
 							trackId={item.id}
 							class="animate-enter"
@@ -182,6 +183,7 @@
 									title={track.title}
 									subtitle={track.artist}
 									subtitleHref={track.ownerUserId}
+									coauthors={track.coauthors}
 									explicit={track.explicit}
 								>
 									{#snippet leading()}

web-player/src/routes/(app)/explore/SearchResults.svelte

@@ -67,6 +67,7 @@
 								title={track.title}
 								subtitle={track.artist}
 								subtitleHref={track.ownerUserId}
+								coauthors={track.coauthors}
 								explicit={track.explicit}
 								active={player.currentId === track.id}
 								size="lg"