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>

web-player/src/routes/+page.svelte

@@ -6,7 +6,7 @@
 	import { player, isQueueCurrent, playAllOrToggle, playShuffled } from '$lib/player/player.svelte';
 	import { pressable } from '$lib/actions/pressable';
 	import { mergeRecentlyPlayed } from '$lib/recentlyPlayed';
-	import { fmtTime, fmtDurationLong, fmtPlays } from '$lib/format';
+	import { fmtTime, fmtDurationLong, fmtPlays, plural } from '$lib/format';
 	import {
 		isTargetCurrent,
 		queueItemForTarget,
@@ -19,11 +19,10 @@
 		targetTitle,
 		type TrackTarget
 	} from '$lib/tracks';
-	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
 	import Artwork from '$lib/components/ui/Artwork.svelte';
 	import MixTile from '$lib/components/ui/MixTile.svelte';
 	import EqBars from '$lib/components/ui/EqBars.svelte';
-	import TrackTitleCell from '$lib/components/ui/TrackTitleCell.svelte';
+	import ListRow from '$lib/components/ui/ListRow.svelte';
 	import SectionHeading from '$lib/components/ui/SectionHeading.svelte';
 	import EmptyState from '$lib/components/ui/EmptyState.svelte';
 	import Button from '$lib/components/ui/Button.svelte';
@@ -72,7 +71,7 @@
 		spotlightTrackCount === 0
 			? spotlightVisibilityLabel
 			: [
-					`${spotlightTrackCount} ${spotlightTrackCount === 1 ? 'Canción' : 'Canciones'}`,
+					plural(spotlightTrackCount, 'canción', 'canciones'),
 					fmtDurationLong(spotlightDurationSeconds),
 					spotlightVisibilityLabel
 				].join(' · ')
@@ -176,26 +175,19 @@
 			<div class="grid grid-cols-2 gap-2.5 sm:grid-cols-3 lg:grid-cols-5">
 				{#each continueItems as item, i (item.id)}
 					{@const isCurrent = player.current.id === item.id}
-					<div
-						role="button"
-						tabindex="0"
-						use:pressable={() => playContinue(i)}
-						class="animate-enter rounded-art p-2.25 pr-3.5 transition-colors {isCurrent
-							? 'bg-accent-tint'
-							: 'hover:bg-hover'}"
-						style="--i:{i}"
+					<ListRow
+						onclick={() => playContinue(i)}
 						oncontextmenu={(e) => openContextMenu(e, targetForQueueItem(item))}
-					>
-						<TrackTitleCell
-							trackId={item.id}
-							title={item.title}
-							artist={item.artist}
-							ownerUserId={item.ownerUserId}
-							size="lg"
-							active={isCurrent}
-							onClick={() => playContinue(i)}
-						/>
-					</div>
+						active={isCurrent}
+						size="lg"
+						variant="card"
+						title={item.title}
+						subtitle={item.artist}
+						subtitleHref={item.ownerUserId}
+						trackId={item.id}
+						class="animate-enter"
+						style="--i:{i}"
+					/>
 				{/each}
 			</div>
 		{:else}
@@ -254,33 +246,22 @@
 				</div>
 				<div class="flex flex-col gap-0.5 p-5.5 sm:p-6">
 					{#each spotlightRows as { target, seconds }, i (targetId(target))}
-						<div
-							role="button"
-							tabindex="0"
-							use:pressable={() => playSpotlightTrack(i)}
-							class="flex items-center gap-4 rounded-control p-2 text-left transition-colors {isTargetCurrent(
-								target
-							)
-								? 'bg-accent-tint'
-								: 'hover:bg-hover'}"
+						<ListRow
+							onclick={() => playSpotlightTrack(i)}
+							active={isTargetCurrent(target)}
+							size="sm"
+							title={targetTitle(target)}
+							subtitle={targetArtist(target)}
+							subtitleHref={targetOwnerUserId(target)}
 						>
-							<span class="w-5 shrink-0 text-center text-xs text-muted tabular-nums">{i + 1}</span>
-							<div class="min-w-0 flex-1">
-								<div
-									class="truncate text-sm {isTargetCurrent(target)
-										? 'text-accent-soft'
-										: 'text-fg'}"
+							{#snippet leading()}
+								<span class="w-5 shrink-0 text-center text-xs text-muted tabular-nums">{i + 1}</span
 								>
-									{targetTitle(target)}
-								</div>
-								<ArtistLink
-									name={targetArtist(target)}
-									ownerUserId={targetOwnerUserId(target)}
-									class="mt-0.5 text-xs text-fg-3"
-								/>
-							</div>
-							<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(seconds)}</span>
-						</div>
+							{/snippet}
+							{#snippet trailing()}
+								<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(seconds)}</span>
+							{/snippet}
+						</ListRow>
 					{:else}
 						<p class="p-2 text-sm text-fg-3">Esta playlist todavía no tiene canciones.</p>
 					{/each}
@@ -314,37 +295,32 @@
 			<div class="grid grid-cols-1 gap-x-8.5 gap-y-1.5 lg:grid-cols-2">
 				{#each popularTargets as target, i (targetId(target))}
 					{@const isCurrent = isTargetCurrent(target)}
-					<div
-						role="button"
-						tabindex="0"
-						use:pressable={() => playPopular(i)}
-						class="flex items-center gap-3.5 rounded-control p-2 transition-colors {isCurrent
-							? 'bg-accent-tint'
-							: 'hover:bg-hover'}"
+					<ListRow
+						onclick={() => playPopular(i)}
 						oncontextmenu={(e) => openContextMenu(e, target)}
+						active={isCurrent}
+						size="sm"
+						title={targetTitle(target)}
+						subtitle={targetArtist(target)}
+						subtitleHref={targetOwnerUserId(target)}
+						explicit={targetExplicit(target)}
+						trackId={targetId(target)}
 					>
-						<span class="flex h-3.5 w-4.5 shrink-0 items-end justify-center">
-							{#if isCurrent}
-								<EqBars size={13} paused={!player.playing} />
-							{:else}
-								<span class="text-xs text-muted tabular-nums">{i + 1}</span>
-							{/if}
-						</span>
-						<div class="min-w-0 flex-1">
-							<TrackTitleCell
-								trackId={targetId(target)}
-								title={targetTitle(target)}
-								artist={targetArtist(target)}
-								ownerUserId={targetOwnerUserId(target)}
-								explicit={targetExplicit(target)}
-								active={isCurrent}
-								onClick={() => playPopular(i)}
-							/>
-						</div>
-						<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
-							{fmtPlays(targetListensCount(target))}
-						</span>
-					</div>
+						{#snippet leading()}
+							<span class="flex h-3.5 w-4.5 shrink-0 items-end justify-center">
+								{#if isCurrent}
+									<EqBars size={13} paused={!player.playing} />
+								{:else}
+									<span class="text-xs text-muted tabular-nums">{i + 1}</span>
+								{/if}
+							</span>
+						{/snippet}
+						{#snippet trailing()}
+							<span class="hidden shrink-0 text-xs text-muted tabular-nums sm:block">
+								{fmtPlays(targetListensCount(target))}
+							</span>
+						{/snippet}
+					</ListRow>
 				{/each}
 			</div>
 		{:else}
@@ -377,36 +353,18 @@
 		{#if playlists.length > 0}
 			<div class="grid grid-cols-[repeat(auto-fill,minmax(258px,1fr))] gap-3.5">
 				{#each playlists as playlist, i (playlist.id)}
-					<div
-						role="button"
-						tabindex="0"
-						use:pressable={() => goto(`/playlists/${playlist.id}`)}
-						class="group/card animate-enter flex items-center gap-3.5 rounded-panel p-3 transition-colors hover:bg-hover"
+					<ListRow
+						onclick={() => goto(`/playlists/${playlist.id}`)}
+						size="lg"
+						variant="card"
+						title={playlist.name}
+						subtitle={playlist.description}
+						coverSrc="/api/playlists/{playlist.id}/cover?size=medium&v={encodeURIComponent(
+							playlist.updatedAt
+						)}"
+						trackIds={playlist.coverTrackIds}
 						style="--i:{i}"
-					>
-						<Artwork
-							src="/api/playlists/{playlist.id}/cover?size=medium&v={encodeURIComponent(
-								playlist.updatedAt
-							)}"
-							trackIds={playlist.coverTrackIds}
-							size="lg"
-							alt={playlist.name}
-							class="shrink-0"
-						/>
-						<div class="min-w-0 flex-1">
-							<div class="truncate text-sm tracking-tight text-fg">
-								{playlist.name}
-							</div>
-							{#if playlist.description}
-								<div class="mt-1 truncate text-xs text-fg-3">{playlist.description}</div>
-							{/if}
-							<ArtistLink
-								name={data.user?.name}
-								ownerUserId={data.user?.sub}
-								class="mt-1 text-xs text-fg-3"
-							/>
-						</div>
-					</div>
+					/>
 				{/each}
 			</div>
 		{:else}