feat(web,flutter): #401 — now-playing highlight on TrackRow + PlaylistTrackRow
Cross-platform consistency: when a track is currently playing, its row on the album / liked / history / search / playlist detail surfaces gets the same accent-border + bg-lift treatment that QueueTrackRow applies on the queue panel. Closes the inconsistency caught during the #375 DRY audit (the queue row had a "you are here" indicator; other track-row surfaces did not). Web — TrackRow.svelte + PlaylistTrackRow.svelte: isCurrent = player.current?.id === track.id → border-l-2 border-l-accent bg-surface-hover when true. PlaylistTrackRow additionally gates on !isUnavailable so deleted rows never match a phantom playing id. Flutter — TrackRow + _PlaylistTrackRow: TrackRow becomes a ConsumerWidget, watches mediaItemProvider, and wraps its InkWell in a Container whose BoxDecoration carries the fs.iron background + 2px fs.accent left border when current. Title text also shifts to fs.accent and FontWeight.w500. Same pattern for _PlaylistTrackRow. No "Now playing" pill on these surfaces — the player bar already names the track, so the accent band alone reads as enough cue. For #401 / #356 umbrella. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,6 +5,7 @@
|
||||
import TrackMenu from './TrackMenu.svelte';
|
||||
import type { PlaylistTrack } from '$lib/api/types';
|
||||
import { playlistTrackToRef } from '$lib/playlists/playlistTrackToRef';
|
||||
import { player } from '$lib/player/store.svelte';
|
||||
import { offsetToDelta } from './queue-row-math';
|
||||
|
||||
let {
|
||||
@@ -50,12 +51,20 @@
|
||||
// the dragEnd handler skips by returning before onMove fires; visually
|
||||
// the user never sees the row move.
|
||||
const canDrag = $derived(isOwner && !isUnavailable);
|
||||
|
||||
// "Now playing" highlight: matches QueueTrackRow's treatment so the
|
||||
// user can see which row is current without reading the player bar.
|
||||
// Unavailable rows (trackId === null) never match.
|
||||
const isCurrent = $derived(
|
||||
!isUnavailable && player.current?.id === row.track_id,
|
||||
);
|
||||
</script>
|
||||
|
||||
<div
|
||||
role="listitem"
|
||||
class="flex items-center gap-3 px-3 py-2 text-sm transition-colors hover:bg-surface-hover
|
||||
{isUnavailable ? 'text-text-muted' : 'text-text-primary'}"
|
||||
{isUnavailable ? 'text-text-muted' : 'text-text-primary'}
|
||||
{isCurrent ? 'border-l-2 border-l-accent bg-surface-hover' : ''}"
|
||||
use:draggable={{
|
||||
axis: 'y',
|
||||
bounds: 'parent',
|
||||
|
||||
Reference in New Issue
Block a user