feat(web-player): show YouTube Music albums in the explore search

The Albums chip now returns both your own albums and what YouTube Music has
for the term. A YouTube card opens a read-only album page with its cover,
tracklist and play button, and right-clicking a track still offers to add it
to a playlist through the existing menu.

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

@@ -35,11 +35,17 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 			})
 		: Promise.resolve(null);
 
-	const [tracksRes, searchRes, playlistsRes, albumsRes] = await Promise.all([
+	const youtubeAlbumsPromise =
+		query.length >= SEARCH_MIN_LENGTH
+			? api.GET('/youtube/albums', { params: { query: { query } } })
+			: Promise.resolve(null);
+
+	const [tracksRes, searchRes, playlistsRes, albumsRes, youtubeAlbumsRes] = await Promise.all([
 		tracksPromise,
 		searchPromise,
 		playlistsPromise,
-		albumsPromise
+		albumsPromise,
+		youtubeAlbumsPromise
 	]);
 
 	const tracks = unwrapOrError(tracksRes, 'No se pudieron cargar las canciones.');
@@ -48,6 +54,7 @@ export const load: PageServerLoad = async ({ url, locals, fetch }) => {
 		query,
 		tracks,
 		albums: albumsRes?.data?.items ?? [],
+		youtubeAlbums: youtubeAlbumsRes?.data?.items ?? [],
 		ytResults: searchRes?.data ?? null,
 		ytError: Boolean(searchRes?.error),
 		youtubeFiller: query

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

@@ -101,12 +101,14 @@
 	const hasMore = $derived(showTracks && (localHasNext || ytContinuation !== ''));
 
 	const albums = $derived(data.albums);
+	const youtubeAlbums = $derived(data.youtubeAlbums);
+	const hasAlbums = $derived(albums.length > 0 || youtubeAlbums.length > 0);
 
 	const nothingFound = $derived(
 		!!data.query &&
 			!data.ytError &&
 			(showTracks ? items.length === 0 : true) &&
-			(showAlbums ? albums.length === 0 : true) &&
+			(showAlbums ? !hasAlbums : true) &&
 			filters.length > 0
 	);
 
@@ -230,7 +232,7 @@
 		/>
 	{/if}
 
-	{#if showAlbums && albums.length > 0}
+	{#if showAlbums && hasAlbums}
 		<div class="mt-8">
 			<SectionHeading title="Álbumes" />
 			<MediaGrid class="mt-4">
@@ -240,16 +242,26 @@
 						title={album.title}
 						releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
 						trackCount={Number(album.trackCount)}
-						trackIds={[]}
 						index={i}
 					/>
 				{/each}
+				{#each youtubeAlbums as album, i (album.albumId)}
+					<AlbumCard
+						id={album.albumId}
+						href="/albums/youtube/{album.albumId}"
+						title={album.title}
+						subtitle={album.artist}
+						releaseYear={album.releaseYear === null ? undefined : Number(album.releaseYear)}
+						coverSrc={album.thumbnailUrl}
+						index={albums.length + i}
+					/>
+				{/each}
 			</MediaGrid>
 		</div>
 	{/if}
 
 	{#if showTracks && items.length > 0}
-		{#if showAlbums && albums.length > 0}
+		{#if showAlbums && hasAlbums}
 			<SectionHeading title="Canciones" class="mt-10" />
 		{/if}
 		<MediaGrid as="ul" class="mt-6">