web-player: P9 — tarjetas y grids (MediaCard)

MediaCard pasa a construir su propio arte (src/trackIds vía Artwork
size="fill", o un snippet art a medida) y su botón de reproducir
(onPlay, con scrim y PlayButton glass en hover) en vez de depender de
que cada wrapper le pase un snippet. Sustituye a AlbumCard,
PlaylistCard y MixTile, que se borran junto con MediaGrid.svelte (sus
grids pasan a los @utility grid-cards/grid-cards-lg/grid-tiles/
grid-wide de P1).

format.ts gana albumMeta() y playlistMeta() (antes cálculos ad-hoc
dentro de cada tarjeta). El tile de género en Explorar pasa de un
style= con el gradiente inline a la receta @utility genre-tile
+ --tile-hue. De paso, corrige la pluralización "seguidor/es" del
perfil de usuario que quedó suelta.

Delta documentado: el hover-zoom del arte y el scrim+PlayButton (antes
exclusivos de MixTile) pasan a ser comportamiento de MediaCard
condicionado a la prop onPlay — se aplicarían a cualquier tarjeta
futura que la use, por consistencia.

Verificado con npm run check/build; sin QA visual autenticada (Docker
no disponible en esta sesión).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

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

@@ -2,12 +2,11 @@
 	import ListMusic from '@lucide/svelte/icons/list-music';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
-	import MediaGrid from '$lib/components/ui/MediaGrid.svelte';
-	import PlaylistCard from '$lib/components/ui/PlaylistCard.svelte';
+	import MediaCard from '$lib/components/ui/MediaCard.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import { createPlaylistModal } from '$lib/playlists.svelte';
-	import { fmtDurationLong, plural } from '$lib/format';
+	import { fmtDurationLong, plural, playlistMeta } from '$lib/format';
 
 	let { data } = $props();
 
@@ -36,18 +35,20 @@
 	</PageHeader>
 
 	{#if items.length > 0}
-		<MediaGrid min="210px" minMobile="180px" class="mt-7 sm:mt-8">
+		<div class="mt-7 grid-cards-lg sm:mt-8">
 			{#each items as playlist, i (playlist.id)}
-				<PlaylistCard
-					id={playlist.id}
-					name={playlist.name}
-					trackCount={playlist.trackCount}
+				<MediaCard
+					href="/playlists/{playlist.id}"
+					title={playlist.name}
+					subtitle={playlistMeta(Number(playlist.trackCount))}
 					trackIds={playlist.coverTrackIds}
-					updatedAt={playlist.updatedAt}
+					src="/api/playlists/{playlist.id}/cover?size=large&v={encodeURIComponent(
+						playlist.updatedAt
+					)}"
 					index={i}
 				/>
 			{/each}
-		</MediaGrid>
+		</div>
 	{:else}
 		<EmptyState
 			icon={ListMusic}