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

@@ -8,6 +8,7 @@
 		id: string | number;
 		title: string;
 		artist?: string | null;
+		typeLabel?: string;
 		coverSrc?: string | null;
 		coverSize?: 'small' | 'medium' | 'large';
 		hue: number;
@@ -24,6 +25,7 @@
 		id,
 		title,
 		artist,
+		typeLabel,
 		coverSrc,
 		coverSize = 'large',
 		hue,
@@ -35,6 +37,8 @@
 		onContextMenu,
 		badge
 	}: Props = $props();
+
+	const meta = $derived([typeLabel, artist].filter((part) => !!part).join(' · '));
 </script>
 
 <li
@@ -64,11 +68,11 @@
 			{/if}
 			<span class="truncate text-fg" {title}>{title}</span>
 		</div>
-		{#if badge || artist}
+		{#if badge || meta}
 			<div class="mt-0.5 flex min-w-0 items-center gap-1.5">
 				{@render badge?.()}
-				{#if artist}
+				{#if meta}
-					<span class="truncate text-sm text-fg-3" title={artist}>{artist}</span>
+					<span class="truncate text-sm text-fg-3" title={meta}>{meta}</span>
 				{/if}
 			</div>
 		{/if}

web-player/src/lib/components/ui/AlbumCard.svelte

@@ -8,6 +8,7 @@
 		title: string;
 		href?: string;
 		subtitle?: string;
+		typeLabel?: string;
 		releaseYear?: number;
 		trackCount?: number;
 		trackIds?: (string | number)[];
@@ -20,6 +21,7 @@
 		title,
 		href,
 		subtitle,
+		typeLabel,
 		releaseYear,
 		trackCount,
 		trackIds = [],
@@ -29,6 +31,7 @@
 
 	const meta = $derived(
 		[
+			typeLabel,
 			subtitle,
 			releaseYear ? String(releaseYear) : undefined,
 			trackCount === undefined

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

@@ -275,6 +275,7 @@
 					<AlbumCard
 						id={album.id}
 						title={album.title}
+						typeLabel="Álbum"
 						releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
 						trackCount={Number(album.trackCount)}
 						trackIds={album.coverTrackIds}
@@ -286,6 +287,7 @@
 						id={album.albumId}
 						href="/albums/youtube/{album.albumId}"
 						title={album.title}
+						typeLabel="Álbum"
 						subtitle={album.artist}
 						releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
 						coverSrc={album.thumbnailUrl}
@@ -314,6 +316,7 @@
 					id={targetId(item)}
 					title={targetTitle(item)}
 					artist={targetArtist(item)}
+					typeLabel="Canción"
 					coverSrc={targetCoverSrc(item)}
 					hue={hueFor(targetId(item))}
 					explicit={targetExplicit(item)}