web-player: rows (ListRow, MediaIdentity, EqBars)

Add MediaIdentity.svelte (renames and generalizes TrackTitleCell,
purely presentational: art + title + subtitle, no click handling)
and ListRow.svelte on top of it (href|onclick, active, size xs/sm/lg,
variant row|card, leading/trailing/overlay). Also used by
player/TrackInfo... (TrackInfo itself is left for a later pass, which
already has an explicit task to touch that file).

Migrated to ListRow: SearchResultRow (Explore, 4 groups — component
removed), Home (Continue listening, Popular, spotlight, Your
playlists), Queue (Up next), Sidebar (playlists). The 6 track tables
(AlbumTrackTable, PlaylistTrackTable, library, liked, mixes,
LibraryPicker) migrate to MediaIdentity with their own local
use:pressable, since TrackList doesn't exist yet.

EqBars gains an `overlay` prop (scrim/45 background, on-art color)
replacing NowPlaying.svelte (removed). Along the way, fixes 6
plural() calls that a previous pass had left unmigrated (liked,
library, mixes, playlists, PlaylistHeader, Home).

Deltas documented in the plan's log: Sidebar's active row now uses
the accent tint (previously neutral gray); Home's "Your playlists"
card loses its redundant author line and its radius becomes
rounded-art; Queue rows lose the art's opacity-80.

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

web-player/src/routes/(app)/albums/[id]/components/AlbumTrackTable.svelte

@@ -8,7 +8,8 @@
 	import TrackRow from '$lib/components/ui/TrackRow.svelte';
 	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
 	import TrackIndexCell from '$lib/components/ui/TrackIndexCell.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
+	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
+	import { pressable } from '$lib/actions/pressable';
 
 	type AlbumTrack = ApiTrackLike & { duration: number | string; listensCount: number | string };
 
@@ -34,15 +35,23 @@
 		{@const active = player.current.id === track.id}
 		<TrackRow {active}>
 			<TrackIndexCell index={i} {active} playing={player.playing} onToggle={() => playFrom(i)} />
-			<TrackTitleCell
-				trackId={track.id}
-				title={track.title}
-				artist={track.artist}
-				ownerUserId={track.ownerUserId}
-				explicit={track.isExplicit}
-				{active}
-				onClick={() => playFrom(i)}
-			/>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				role="button"
+				tabindex="0"
+				use:pressable={() => playFrom(i)}
+				onclick={(event) => event.stopPropagation()}
+				class="flex min-w-0 flex-1 text-left"
+			>
+				<MediaIdentity
+					trackId={track.id}
+					title={track.title}
+					artist={track.artist}
+					ownerUserId={track.ownerUserId}
+					explicit={track.isExplicit}
+					{active}
+				/>
+			</div>
 			<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>
 			<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 			{#if isOwner}

web-player/src/routes/(app)/albums/[id]/components/LibraryPicker.svelte

@@ -8,8 +8,9 @@
 	import TrackTable from '$lib/components/ui/TrackTable.svelte';
 	import TrackRow from '$lib/components/ui/TrackRow.svelte';
 	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
-	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
+	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
+	import { pressable } from '$lib/actions/pressable';
+	import EqBars from '$lib/components/ui/EqBars.svelte';
 
 	type LibraryTrack = ApiTrackLike & { duration: number | string; listensCount: number | string };
 
@@ -30,21 +31,29 @@
 		{#each library as track, i (track.id)}
 			{@const active = player.current.id === track.id}
 			<TrackRow {active}>
-				<TrackTitleCell
-					trackId={track.id}
-					title={track.title}
-					artist={track.artist}
-					ownerUserId={track.ownerUserId}
-					explicit={track.isExplicit}
-					{active}
-					onClick={() => playFrom(i)}
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					role="button"
+					tabindex="0"
+					use:pressable={() => playFrom(i)}
+					onclick={(event) => event.stopPropagation()}
+					class="flex min-w-0 flex-1 text-left"
 				>
-					{#snippet overlay()}
-						{#if player.current.id === track.id}
-							<NowPlaying paused={!player.playing} />
-						{/if}
-					{/snippet}
-				</TrackTitleCell>
+					<MediaIdentity
+						trackId={track.id}
+						title={track.title}
+						artist={track.artist}
+						ownerUserId={track.ownerUserId}
+						explicit={track.isExplicit}
+						{active}
+					>
+						{#snippet overlay()}
+							{#if player.current.id === track.id}
+								<EqBars overlay paused={!player.playing} />
+							{/if}
+						{/snippet}
+					</MediaIdentity>
+				</div>
 				<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>
 				<TrackMeta>{fmtTime(Number(track.duration))}</TrackMeta>
 				<form

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

@@ -11,8 +11,8 @@
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import Avatar from '$lib/components/ui/Avatar.svelte';
 	import PlayButton from '$lib/components/ui/PlayButton.svelte';
-	import NowPlaying from '$lib/components/ui/NowPlaying.svelte';
-	import SearchResultRow from '$lib/components/ui/SearchResultRow.svelte';
+	import EqBars from '$lib/components/ui/EqBars.svelte';
+	import ListRow from '$lib/components/ui/ListRow.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import { EXPLORE_PAGE_SIZE } from '$lib/config';
 	import { searchHref } from '$lib/navigation.svelte';
@@ -30,6 +30,7 @@
 		targetExplicit,
 		targetId,
 		targetListensCount,
+		targetOwnerUserId,
 		targetTitle,
 		type TrackTarget
 	} from '$lib/tracks';
@@ -410,27 +411,28 @@
 						<ul class="flex flex-col gap-1">
 							{#each capped(songRows) as { target: item, seconds }, i (targetId(item))}
 								<li>
-									<SearchResultRow
+									<ListRow
 										title={targetTitle(item)}
 										subtitle={targetArtist(item)}
-										meta="{fmtTime(seconds)} · {fmtPlays(targetListensCount(item))}"
+										subtitleHref={targetOwnerUserId(item)}
 										explicit={targetExplicit(item)}
+										active={isTargetCurrent(item)}
+										size="lg"
+										trackId={targetId(item)}
 										onclick={() => togglePlay(i)}
 										oncontextmenu={(e) => openContextMenu(e, item)}
 									>
-										{#snippet art(artClass)}
-											<Artwork
-												trackIds={[targetId(item)]}
-												size="lg"
-												alt={targetTitle(item)}
-												class="{artClass} ring-1 ring-line ring-inset"
-											>
-												{#if isTargetCurrent(item)}
-													<NowPlaying paused={!player.playing} />
-												{/if}
-											</Artwork>
+										{#snippet overlay()}
+											{#if isTargetCurrent(item)}
+												<EqBars overlay paused={!player.playing} />
+											{/if}
 										{/snippet}
-									</SearchResultRow>
+										{#snippet trailing()}
+											<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
+												{fmtTime(seconds)} · {fmtPlays(targetListensCount(item))}
+											</span>
+										{/snippet}
+									</ListRow>
 								</li>
 							{/each}
 						</ul>
@@ -460,16 +462,19 @@
 					<ul class="flex flex-col gap-1">
 						{#each capped(albums) as album (album.id)}
 							<li>
-								<SearchResultRow
+								<ListRow
 									title={album.title}
-									meta="{Number(album.trackCount)} canciones"
 									href="/albums/{album.id}"
+									size="lg"
+									trackIds={album.coverTrackIds}
 									oncontextmenu={(e) => openAlbumMenu(e, album.id)}
 								>
-									{#snippet art(artClass)}
-										<Artwork trackIds={album.coverTrackIds} size="lg" class={artClass} />
+									{#snippet trailing()}
+										<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
+											{Number(album.trackCount)} canciones
+										</span>
 									{/snippet}
-								</SearchResultRow>
+								</ListRow>
 							</li>
 						{/each}
 					</ul>
@@ -489,11 +494,11 @@
 					<ul class="flex flex-col gap-1">
 						{#each capped(users) as u (u.id)}
 							<li>
-								<SearchResultRow title={u.name} href="/u/{u.id}">
-									{#snippet art(artClass)}
-										<Avatar name={u.name} src={u.profilePictureUrl} size="md" class={artClass} />
+								<ListRow title={u.name} href="/u/{u.id}" size="lg">
+									{#snippet art()}
+										<Avatar name={u.name} src={u.profilePictureUrl} size="md" />
 									{/snippet}
-								</SearchResultRow>
+								</ListRow>
 							</li>
 						{/each}
 					</ul>
@@ -513,22 +518,16 @@
 					<ul class="flex flex-col gap-1">
 						{#each capped(playlistMatches) as playlist (playlist.id)}
 							<li>
-								<SearchResultRow
+								<ListRow
 									title={playlist.name}
 									subtitle={playlist.description}
 									href="/playlists/{playlist.id}"
-								>
-									{#snippet art(artClass)}
-										<Artwork
-											src="/api/playlists/{playlist.id}/cover?size=medium&v={encodeURIComponent(
-												playlist.updatedAt
-											)}"
-											trackIds={playlist.coverTrackIds}
-											size="lg"
-											class={artClass}
-										/>
-									{/snippet}
-								</SearchResultRow>
+									size="lg"
+									coverSrc="/api/playlists/{playlist.id}/cover?size=medium&v={encodeURIComponent(
+										playlist.updatedAt
+									)}"
+									trackIds={playlist.coverTrackIds}
+								/>
 							</li>
 						{/each}
 					</ul>

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

@@ -4,7 +4,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import Music from '@lucide/svelte/icons/music';
 	import { player, toQueueItems } from '$lib/player/player.svelte';
-	import { fmtTime, fmtDate } from '$lib/format';
+	import { fmtTime, fmtDate, plural } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import PageHeader from '$lib/components/ui/PageHeader.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
@@ -14,7 +14,8 @@
 	import TrackRow from '$lib/components/ui/TrackRow.svelte';
 	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
 	import TrackIndexCell from '$lib/components/ui/TrackIndexCell.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
+	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
+	import { pressable } from '$lib/actions/pressable';
 
 	let { data } = $props();
 
@@ -34,7 +35,7 @@
 <Page>
 	<PageHeader
 		title="Tus canciones subidas"
-		subtitle="{total} {total === 1 ? 'canción' : 'canciones'} subida{total === 1 ? '' : 's'}."
+		subtitle="{plural(total, 'canción', 'canciones')} subida{total === 1 ? '' : 's'}."
 	>
 		{#snippet actions()}
 			{#if items.length > 0}
@@ -66,12 +67,16 @@
 						playing={player.playing}
 						onToggle={() => togglePlay(i)}
 					/>
-					<TrackTitleCell
-						trackId={track.id}
-						title={track.title}
-						{active}
-						onClick={() => togglePlay(i)}
-					/>
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						role="button"
+						tabindex="0"
+						use:pressable={() => togglePlay(i)}
+						onclick={(event) => event.stopPropagation()}
+						class="flex min-w-0 flex-1 text-left"
+					>
+						<MediaIdentity trackId={track.id} title={track.title} {active} />
+					</div>
 					<TrackMeta class="hidden sm:block">—</TrackMeta>
 					<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
 					<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>

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

@@ -3,7 +3,7 @@
 	import X from '@lucide/svelte/icons/x';
 	import { player, isQueueCurrent, playAllOrToggle } from '$lib/player/player.svelte';
 	import { liked } from '$lib/player/liked.svelte';
-	import { fmtDate, fmtTime } from '$lib/format';
+	import { fmtDate, fmtTime, plural } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -13,7 +13,8 @@
 	import TrackRow from '$lib/components/ui/TrackRow.svelte';
 	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
 	import TrackIndexCell from '$lib/components/ui/TrackIndexCell.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
+	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
+	import { pressable } from '$lib/actions/pressable';
 
 	const tracks = $derived(liked.list);
 	const isCurrentQueue = $derived(isQueueCurrent(tracks));
@@ -36,7 +37,7 @@
 	<CollectionHeader
 		eyebrow="Colección"
 		title="Me gusta"
-		meta="{tracks.length} {tracks.length === 1 ? 'Canción' : 'Canciones'}"
+		meta={plural(tracks.length, 'canción', 'canciones')}
 		align="center"
 	>
 		{#snippet cover()}
@@ -73,15 +74,23 @@
 						playing={player.playing}
 						onToggle={() => playFrom(i)}
 					/>
-					<TrackTitleCell
-						trackId={track.id}
-						title={track.title}
-						artist={track.artist}
-						ownerUserId={track.ownerUserId}
-						explicit={track.explicit}
-						{active}
-						onClick={() => playFrom(i)}
-					/>
+					<!-- svelte-ignore a11y_click_events_have_key_events -->
+					<div
+						role="button"
+						tabindex="0"
+						use:pressable={() => playFrom(i)}
+						onclick={(event) => event.stopPropagation()}
+						class="flex min-w-0 flex-1 text-left"
+					>
+						<MediaIdentity
+							trackId={track.id}
+							title={track.title}
+							artist={track.artist}
+							ownerUserId={track.ownerUserId}
+							explicit={track.explicit}
+							{active}
+						/>
+					</div>
 					<TrackMeta class="hidden sm:block">—</TrackMeta>
 					<TrackMeta class="hidden sm:block">{fmtDate(track.likedAt)}</TrackMeta>
 					<TrackMeta class="hidden sm:block">{Number(track.listensCount ?? 0)}</TrackMeta>

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

@@ -3,7 +3,7 @@
 	import Pause from '@lucide/svelte/icons/pause';
 	import Shuffle from '@lucide/svelte/icons/shuffle';
 	import { player, isQueueCurrent, playAllOrToggle, playShuffled } from '$lib/player/player.svelte';
-	import { fmtTime } from '$lib/format';
+	import { fmtTime, plural } from '$lib/format';
 	import Page from '$lib/components/ui/Page.svelte';
 	import BackLink from '$lib/components/ui/BackLink.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -14,7 +14,8 @@
 	import TrackRow from '$lib/components/ui/TrackRow.svelte';
 	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
 	import TrackIndexCell from '$lib/components/ui/TrackIndexCell.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
+	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
+	import { pressable } from '$lib/actions/pressable';
 	import ContextMenu from '$lib/components/ui/ContextMenu.svelte';
 	import ListPlus from '@lucide/svelte/icons/list-plus';
 	import { createTrackMenu } from '$lib/menus.svelte';
@@ -59,7 +60,7 @@
 		eyebrow="Mezcla"
 		title={mix.title}
 		description={mix.subtitle ?? undefined}
-		meta="{items.length} {items.length === 1 ? 'canción' : 'canciones'} · {fmtTime(totalSeconds)}"
+		meta="{plural(items.length, 'canción', 'canciones')} · {fmtTime(totalSeconds)}"
 	>
 		{#snippet cover()}
 			<Artwork
@@ -100,13 +101,21 @@
 			{@const active = isTargetCurrent(targets[i])}
 			<TrackRow {active} oncontextmenu={(e) => trackMenu.open(e, targets[i])}>
 				<TrackIndexCell index={i} {active} playing={player.playing} onToggle={() => playFrom(i)} />
-				<TrackTitleCell
-					trackId={targetId(targets[i])}
-					title={targetTitle(targets[i])}
-					artist={targetArtist(targets[i])}
-					{active}
-					onClick={() => playFrom(i)}
-				/>
+				<!-- svelte-ignore a11y_click_events_have_key_events -->
+				<div
+					role="button"
+					tabindex="0"
+					use:pressable={() => playFrom(i)}
+					onclick={(event) => event.stopPropagation()}
+					class="flex min-w-0 flex-1 text-left"
+				>
+					<MediaIdentity
+						trackId={targetId(targets[i])}
+						title={targetTitle(targets[i])}
+						artist={targetArtist(targets[i])}
+						{active}
+					/>
+				</div>
 				<TrackMeta class="hidden sm:block">{Number(targetListensCount(targets[i]) ?? 0)}</TrackMeta>
 				<TrackMeta>{fmtTime(Number(item.durationSeconds))}</TrackMeta>
 			</TrackRow>

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

@@ -7,14 +7,14 @@
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import { createPlaylistModal } from '$lib/playlists.svelte';
-	import { fmtDurationLong } from '$lib/format';
+	import { fmtDurationLong, plural } from '$lib/format';
 
 	let { data } = $props();
 
 	const items = $derived(data.playlists.items);
 	const totals = $derived(data.totals);
 	const summary = $derived(
-		`${totals.playlistCount} ${totals.playlistCount === 1 ? 'Playlist' : 'Playlists'} · ${totals.trackCount} ${totals.trackCount === 1 ? 'Canción' : 'Canciones'} · ${fmtDurationLong(totals.durationSeconds)}`
+		`${plural(totals.playlistCount, 'playlist', 'playlists')} · ${plural(totals.trackCount, 'canción', 'canciones')} · ${fmtDurationLong(totals.durationSeconds)}`
 	);
 </script>
 

web-player/src/routes/(app)/playlists/[id]/components/PlaylistHeader.svelte

@@ -2,6 +2,7 @@
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
 	import CollectionHeader from '$lib/components/ui/CollectionHeader.svelte';
+	import { plural } from '$lib/format';
 
 	interface Props {
 		id: string;
@@ -30,7 +31,7 @@
 	}: Props = $props();
 
 	const meta = $derived(
-		`${trackIds.length} ${trackIds.length === 1 ? 'Canción' : 'Canciones'} · ${
+		`${plural(trackIds.length, 'canción', 'canciones')} · ${
 			visibility === 'Public' ? 'Pública' : 'Privada'
 		}`
 	);

web-player/src/routes/(app)/playlists/[id]/components/PlaylistTrackTable.svelte

@@ -8,7 +8,8 @@
 	import TrackRow from '$lib/components/ui/TrackRow.svelte';
 	import TrackMeta from '$lib/components/ui/TrackMeta.svelte';
 	import TrackIndexCell from '$lib/components/ui/TrackIndexCell.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
+	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
+	import { pressable } from '$lib/actions/pressable';
 
 	type PlaylistTrack = ApiTrackLike & {
 		createdAt: string;
@@ -41,15 +42,23 @@
 		{@const active = player.current.id === track.id}
 		<TrackRow {active}>
 			<TrackIndexCell index={i} playing={player.playing} onToggle={() => playFrom(i)} {active} />
-			<TrackTitleCell
-				trackId={track.id}
-				title={track.title}
-				artist={track.artist}
-				ownerUserId={track.ownerUserId}
-				explicit={track.isExplicit}
-				{active}
-				onClick={() => playFrom(i)}
-			/>
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				role="button"
+				tabindex="0"
+				use:pressable={() => playFrom(i)}
+				onclick={(event) => event.stopPropagation()}
+				class="flex min-w-0 flex-1 text-left"
+			>
+				<MediaIdentity
+					trackId={track.id}
+					title={track.title}
+					artist={track.artist}
+					ownerUserId={track.ownerUserId}
+					explicit={track.isExplicit}
+					{active}
+				/>
+			</div>
 			<TrackMeta class="hidden sm:block">—</TrackMeta>
 			<TrackMeta class="hidden sm:block">{fmtDate(track.createdAt)}</TrackMeta>
 			<TrackMeta class="hidden sm:block">{Number(track.listensCount)}</TrackMeta>