web-player: cards and grids (MediaCard)

MediaCard now builds its own art (src/trackIds via Artwork
size="fill", or a custom art snippet) and its own play button
(onPlay, with a scrim and a glass PlayButton on hover) instead of
relying on each wrapper passing it a snippet. Replaces AlbumCard,
PlaylistCard and MixTile, which are removed along with
MediaGrid.svelte (their grids move to the
grid-cards/grid-cards-lg/grid-tiles/grid-wide @utility recipes).

format.ts gains albumMeta() and playlistMeta() (previously ad-hoc
calculations inside each card). Explore's genre tile moves from an
inline style= gradient to the genre-tile @utility recipe +
--tile-hue. Along the way, fixes the "follower/s" pluralization on
the user profile that had been missed.

Delta documented: the art's hover-zoom and the scrim+PlayButton
(previously exclusive to MixTile) become MediaCard behavior gated on
the onPlay prop — they'll apply to any future card that uses it, for
consistency.

Verified with npm run check/build; no authenticated visual QA (Docker
unavailable this session).

web-player/src/routes/(app)/u/[id]/+page.svelte

@@ -3,13 +3,13 @@
 	import { enhance } from '$app/forms';
 	import ListMusic from '@lucide/svelte/icons/list-music';
 	import Page from '$lib/components/ui/Page.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 Avatar from '$lib/components/ui/Avatar.svelte';
 	import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
+	import { plural, playlistMeta } from '$lib/format';
 
 	let { data, form } = $props();
 
@@ -58,9 +58,11 @@
 	<CollectionHeader
 		eyebrow="Perfil"
 		title={profile.name}
-		meta="{profile.followersCount} {profile.followersCount === 1
-			? 'seguidor'
-			: 'seguidores'} · {profile.followingCount} siguiendo"
+		meta="{plural(
+			Number(profile.followersCount),
+			'seguidor',
+			'seguidores'
+		)} · {profile.followingCount} siguiendo"
 		align="center"
 		actions={canFollow ? followAction : undefined}
 	>
@@ -73,18 +75,20 @@
 		<SectionHeading title="Playlists públicas" subtitle="Creadas y compartidas por este usuario" />
 
 		{#if playlists.length > 0}
-			<MediaGrid min="210px" minMobile="180px" class="mt-6">
+			<div class="mt-6 grid-cards-lg">
 				{#each playlists 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}