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/lib/components/Sidebar.svelte

@@ -4,7 +4,7 @@
 	import { liked } from '$lib/player/liked.svelte';
 	import { createPlaylistModal } from '$lib/playlists.svelte';
 	import type { SessionUser } from '$lib/types';
-	import Artwork from './ui/Artwork.svelte';
+	import ListRow from './ui/ListRow.svelte';
 	import IconButton from './ui/IconButton.svelte';
 	import Home from '@lucide/svelte/icons/house';
 	import Compass from '@lucide/svelte/icons/compass';
@@ -92,26 +92,17 @@
 		<div class="flex flex-1 flex-col gap-px overflow-y-auto pb-4.5">
 			{#each playlists as playlist (playlist.id)}
 				{@const active = page.url.pathname === `/playlists/${playlist.id}`}
-				<a
+				<ListRow
 					href="/playlists/{playlist.id}"
-					class="flex items-center gap-2.75 rounded-control px-3 py-1.75 transition-colors duration-150 {active
-						? 'bg-surface-hover'
-						: 'hover:bg-hover'}"
-				>
-					<Artwork
-						src="/api/playlists/{playlist.id}/cover?size=small&v={encodeURIComponent(
-							playlist.updatedAt
-						)}"
-						trackIds={playlist.coverTrackIds}
-						size="xs"
-						class="shrink-0 opacity-90"
-					/>
-					<div class="min-w-0 flex-1">
-						<div class="truncate text-sm {active ? 'text-fg' : 'text-fg-2'}">
-							{playlist.name}
-						</div>
-					</div>
-				</a>
+					{active}
+					size="xs"
+					title={playlist.name}
+					coverSrc="/api/playlists/{playlist.id}/cover?size=small&v={encodeURIComponent(
+						playlist.updatedAt
+					)}"
+					trackIds={playlist.coverTrackIds}
+					class="px-3 py-1.75"
+				/>
 			{:else}
 				<button
 					type="button"

web-player/src/lib/components/player/Queue.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
 	import { player } from '$lib/player/player.svelte';
 	import { queuePanel } from '$lib/player/queuePanel.svelte';
-	import Artwork from '$lib/components/ui/Artwork.svelte';
-	import ArtistLink from '$lib/components/ui/ArtistLink.svelte';
+	import MediaIdentity from '$lib/components/ui/MediaIdentity.svelte';
+	import ListRow from '$lib/components/ui/ListRow.svelte';
 	import IconButton from '$lib/components/ui/IconButton.svelte';
-	import { pressable } from '$lib/actions/pressable';
 	import { fmtTime } from '$lib/format';
 	import X from '@lucide/svelte/icons/x';
 	import { fly } from 'svelte/transition';
@@ -31,23 +30,14 @@
 
 		{#if player.current.id}
 			<p class="mb-2.75 text-xs font-medium tracking-widest text-fg-3 uppercase">Reproduciendo</p>
-			<div class="mb-6 flex items-center gap-3 rounded-xl bg-accent-tint p-2.5">
-				<Artwork
-					trackIds={[player.current.id]}
-					size="sm"
-					alt={player.current.title}
-					class="shrink-0"
+			<div class="mb-6 rounded-control bg-accent-tint p-2.5">
+				<MediaIdentity
+					trackId={player.current.id}
+					title={player.current.title}
+					artist={player.current.artist || '—'}
+					ownerUserId={player.current.ownerUserId}
+					active
 				/>
-				<div class="min-w-0">
-					<div class="truncate text-sm text-accent-soft">
-						{player.current.title}
-					</div>
-					<ArtistLink
-						name={player.current.artist || '—'}
-						ownerUserId={player.current.ownerUserId}
-						class="mt-0.5 text-xs text-fg-3"
-					/>
-				</div>
 			</div>
 		{/if}
 
@@ -69,25 +59,22 @@
 		<div class="flex flex-1 flex-col gap-px overflow-y-auto">
 			{#each upcoming as track, i (track.id)}
 				{@const index = player.tracks.length - upcoming.length + i}
-				<div
-					role="button"
-					tabindex="0"
-					use:pressable={() => player.playQueueIndex(index)}
-					class="flex items-center gap-3 rounded-control p-2.25 text-left hover:bg-hover"
+				<ListRow
+					onclick={() => player.playQueueIndex(index)}
+					size="sm"
+					title={track.title}
+					subtitle={track.artist || '—'}
+					subtitleHref={track.ownerUserId}
+					trackId={track.id}
+					class="p-2.25"
 				>
-					<Artwork trackIds={[track.id]} size="sm" alt={track.title} class="shrink-0 opacity-80" />
-					<div class="min-w-0 flex-1">
-						<div class="truncate text-xs text-fg">{track.title}</div>
-						<ArtistLink
-							name={track.artist || '—'}
-							ownerUserId={track.ownerUserId}
-							class="mt-0.5 text-xs text-fg-3"
-						/>
-					</div>
-					{#if track.duration}
-						<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(track.duration)}</span>
-					{/if}
-				</div>
+					{#snippet trailing()}
+						{#if track.duration}
+							<span class="shrink-0 text-xs text-muted tabular-nums">{fmtTime(track.duration)}</span
+							>
+						{/if}
+					{/snippet}
+				</ListRow>
 			{:else}
 				<p class="px-2 py-6 text-center text-xs text-fg-3">No hay más canciones en la cola.</p>
 			{/each}

web-player/src/lib/components/ui/ContextMenu.svelte

@@ -21,7 +21,7 @@
 	import { enhance } from '$app/forms';
 	import type { LucideIcon } from '@lucide/svelte';
 	import ChevronRight from '@lucide/svelte/icons/chevron-right';
-	import Artwork from './Artwork.svelte';
+	import MediaIdentity from './MediaIdentity.svelte';
 	import GlassMenu from './GlassMenu.svelte';
 	import MenuItem from './MenuItem.svelte';
 
@@ -93,14 +93,14 @@
 								{/each}
 								<button
 									type="submit"
-									class="flex w-full items-center gap-3 rounded-control px-2 py-2.5 text-left text-sm font-medium text-fg transition hover:bg-hover"
+									class="flex w-full items-center rounded-control px-2 py-2.5 text-left text-sm font-medium text-fg transition hover:bg-hover"
 								>
-									<Artwork
-										src="/api/playlists/{playlist.id}/cover?size=small"
+									<MediaIdentity
+										title={playlist.name}
+										coverSrc="/api/playlists/{playlist.id}/cover?size=small"
 										size="xs"
-										class="shrink-0"
+										titleClass="text-fg-2"
 									/>
-									<span class="truncate text-fg-2">{playlist.name}</span>
 								</button>
 							</form>
 						{/each}

web-player/src/lib/components/ui/EqBars.svelte

@@ -3,21 +3,41 @@
 		size?: number;
 		barWidth?: number;
 		paused?: boolean;
+		overlay?: boolean;
 		class?: string;
 	}
 
-	let { size = 13, barWidth = 2, paused = false, class: klass = '' }: Props = $props();
+	let {
+		size = 13,
+		barWidth = 2,
+		paused = false,
+		overlay = false,
+		class: klass = ''
+	}: Props = $props();
 
 	const delays = [0, 0.3, 0.6];
 </script>
 
-<div class="flex items-end justify-center gap-0.5 {klass}" style="height:{size}px">
-	{#each delays as delay (delay)}
-		<span
-			class="rounded-full bg-accent"
-			style="width:{barWidth}px; height:100%; animation:equalize .9s ease-in-out {delay}s infinite; animation-play-state:{paused
-				? 'paused'
-				: 'running'}"
-		></span>
-	{/each}
-</div>
+{#if overlay}
+	<div class="absolute inset-0 flex items-end justify-center gap-0.75 bg-scrim/45 pb-2.5 {klass}">
+		{#each delays as delay (delay)}
+			<span
+				class="h-3.5 w-0.75 origin-bottom rounded-full bg-on-art"
+				style="animation:equalize .9s ease-in-out {delay}s infinite; animation-play-state:{paused
+					? 'paused'
+					: 'running'}"
+			></span>
+		{/each}
+	</div>
+{:else}
+	<div class="flex items-end justify-center gap-0.5 {klass}" style="height:{size}px">
+		{#each delays as delay (delay)}
+			<span
+				class="rounded-full bg-accent"
+				style="width:{barWidth}px; height:100%; animation:equalize .9s ease-in-out {delay}s infinite; animation-play-state:{paused
+					? 'paused'
+					: 'running'}"
+			></span>
+		{/each}
+	</div>
+{/if}

web-player/src/lib/components/ui/ListRow.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import MediaIdentity from './MediaIdentity.svelte';
+	import { pressable } from '$lib/actions/pressable';
+
+	interface Props {
+		href?: string;
+		onclick?: () => void;
+		oncontextmenu?: (event: MouseEvent) => void;
+		active?: boolean;
+		size?: 'xs' | 'sm' | 'lg';
+		variant?: 'row' | 'card';
+		title: string;
+		subtitle?: string | null;
+		subtitleHref?: string | number | null;
+		explicit?: boolean;
+		trackId?: string | number;
+		trackIds?: (string | number)[];
+		coverSrc?: string | null;
+		art?: Snippet;
+		overlay?: Snippet;
+		leading?: Snippet;
+		trailing?: Snippet;
+		class?: string;
+		style?: string;
+	}
+
+	let {
+		href,
+		onclick,
+		oncontextmenu,
+		active = false,
+		size = 'sm',
+		variant = 'row',
+		title,
+		subtitle,
+		subtitleHref,
+		explicit = false,
+		trackId,
+		trackIds,
+		coverSrc,
+		art,
+		overlay,
+		leading,
+		trailing,
+		class: klass = '',
+		style
+	}: Props = $props();
+
+	const classes = $derived(
+		`flex items-center gap-3 text-left transition-colors ${
+			variant === 'card' ? 'rounded-art p-2.25 pr-3.5' : 'rounded-control p-2'
+		} ${active ? 'bg-accent-tint' : 'hover:bg-hover'} ${klass}`
+	);
+</script>
+
+{#snippet content()}
+	{@render leading?.()}
+	<MediaIdentity
+		{title}
+		artist={subtitle}
+		ownerUserId={subtitleHref}
+		{trackId}
+		{trackIds}
+		{coverSrc}
+		{size}
+		{explicit}
+		{active}
+		{art}
+		{overlay}
+	/>
+	{@render trailing?.()}
+{/snippet}
+
+{#if href}
+	<a {href} {oncontextmenu} class={classes} {style}>
+		{@render content()}
+	</a>
+{:else}
+	<div
+		role="button"
+		tabindex="0"
+		use:pressable={onclick ?? (() => {})}
+		{oncontextmenu}
+		class={classes}
+		{style}
+	>
+		{@render content()}
+	</div>
+{/if}

web-player/src/lib/components/ui/MediaIdentity.svelte

@@ -3,25 +3,27 @@
 	import Artwork from './Artwork.svelte';
 	import ExplicitBadge from './ExplicitBadge.svelte';
 	import ArtistLink from './ArtistLink.svelte';
-	import { pressable } from '$lib/actions/pressable';
 
 	interface Props {
-		trackId: string | number;
+		trackId?: string | number;
+		trackIds?: (string | number)[];
 		title: string;
 		artist?: string | null;
 		ownerUserId?: string | number | null;
 		coverSrc?: string | null;
-		size?: 'sm' | 'lg';
+		size?: 'xs' | 'sm' | 'lg';
 		explicit?: boolean;
 		active?: boolean;
 		titleClass?: string;
-		onClick: () => void;
+		class?: string;
+		art?: Snippet;
 		overlay?: Snippet;
 		badge?: Snippet;
 	}
 
 	let {
 		trackId,
+		trackIds,
 		title,
 		artist,
 		ownerUserId,
@@ -30,23 +32,27 @@
 		explicit = false,
 		active = false,
 		titleClass = '',
-		onClick,
+		class: klass = '',
+		art,
 		overlay,
 		badge
 	}: Props = $props();
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<div
-	role="button"
-	tabindex="0"
-	use:pressable={onClick}
-	onclick={(event) => event.stopPropagation()}
-	class="flex min-w-0 items-center gap-3.5 text-left"
->
-	<Artwork trackIds={[trackId]} src={coverSrc} {size} alt={title} class="shrink-0">
-		{@render overlay?.()}
-	</Artwork>
+<div class="flex min-w-0 flex-1 items-center gap-3.5 {klass}">
+	{#if art}
+		{@render art()}
+	{:else if trackId !== undefined || coverSrc || trackIds?.length}
+		<Artwork
+			trackIds={trackIds ?? (trackId !== undefined ? [trackId] : [])}
+			src={coverSrc}
+			{size}
+			alt={title}
+			class="shrink-0"
+		>
+			{@render overlay?.()}
+		</Artwork>
+	{/if}
 	<div class="min-w-0">
 		<div class="flex min-w-0 items-center gap-2">
 			{#if explicit}

web-player/src/lib/components/ui/NowPlaying.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-	interface Props {
-		paused?: boolean;
-	}
-
-	let { paused = false }: Props = $props();
-
-	const delays = [0, 0.3, 0.6];
-</script>
-
-<div class="absolute inset-0 flex items-end justify-center gap-0.75 bg-scrim/45 pb-2.5">
-	{#each delays as delay (delay)}
-		<span
-			class="h-3.5 w-0.75 origin-bottom rounded-full bg-on-art"
-			style="animation:equalize .9s ease-in-out {delay}s infinite; animation-play-state:{paused
-				? 'paused'
-				: 'running'}"
-		></span>
-	{/each}
-</div>

web-player/src/lib/components/ui/SearchResultRow.svelte

@@ -1,65 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-	import ExplicitBadge from './ExplicitBadge.svelte';
-
-	interface Props {
-		title: string;
-		subtitle?: string | null;
-		meta?: string;
-		explicit?: boolean;
-		href?: string;
-		onclick?: () => void;
-		oncontextmenu?: (event: MouseEvent) => void;
-		art: Snippet<[string]>;
-	}
-
-	let {
-		title,
-		subtitle,
-		meta,
-		explicit = false,
-		href,
-		onclick,
-		oncontextmenu,
-		art
-	}: Props = $props();
-
-	const artClass = 'relative shrink-0';
-</script>
-
-{#snippet content()}
-	{@render art(artClass)}
-	<div class="min-w-0 flex-1">
-		<div class="flex min-w-0 items-center gap-1.75">
-			{#if explicit}
-				<ExplicitBadge />
-			{/if}
-			<span class="truncate text-sm font-medium text-fg">{title}</span>
-		</div>
-		{#if subtitle}
-			<div class="mt-0.75 truncate text-xs text-fg-3">{subtitle}</div>
-		{/if}
-	</div>
-	{#if meta}
-		<span class="shrink-0 text-xs text-muted tabular-nums">{meta}</span>
-	{/if}
-{/snippet}
-
-{#if href}
-	<a
-		{href}
-		{oncontextmenu}
-		class="group/row flex w-full min-w-0 items-center gap-3.5 rounded-control p-2 pr-4 text-left transition hover:bg-surface"
-	>
-		{@render content()}
-	</a>
-{:else}
-	<button
-		type="button"
-		{onclick}
-		{oncontextmenu}
-		class="group/row flex w-full min-w-0 items-center gap-3.5 rounded-control p-2 pr-4 text-left transition hover:bg-surface focus-visible:ring-2 focus-visible:ring-accent focus-visible:outline-none"
-	>
-		{@render content()}
-	</button>
-{/if}