feat(ui): add compact mode to TrackRow for Continue Listening

- Add compact prop to TrackRow: smaller height (44px), artist as column
- Apply compact mode to Continue Listening section in Home
- Reduces vertical space and improves scannability
This commit is contained in:
vicrodh committed 2026-01-11 02:21:26 -06:00
1 parent 174b7742ca
commit 29ded155d1
2 files changed
+31 -2

No files matched your search

+30 -2
View File
@@ -24,6 +24,7 @@
downloadProgress?: number;
hideDownload?: boolean;
hideFavorite?: boolean;
compact?: boolean; // Compact mode: smaller height, artist as column
onPlay?: () => void;
onDownload?: () => void;
onRemoveDownload?: () => void;
@@ -54,6 +55,7 @@
downloadProgress = 0,
hideDownload = false,
hideFavorite = false,
compact = false,
onPlay,
onDownload,
onRemoveDownload,
@@ -91,6 +93,7 @@
class="track-row"
class:playing={isPlaying}
class:hovered={isHovered && !isPlaying}
class:compact
onmouseenter={() => (isHovered = true)}
onmouseleave={() => (isHovered = false)}
onclick={onPlay}
@@ -116,11 +119,16 @@
<!-- Track Info -->
<div class="track-info">
<div class="track-title" class:active={isPlaying}>{title}</div>
{#if artist}
{#if artist && !compact}
<div class="track-artist">{artist}</div>
{/if}
</div>
<!-- Artist Column (compact mode) -->
{#if artist && compact}
<div class="track-artist-column">{artist}</div>
{/if}
<!-- Duration -->
<div class="track-duration">{duration}</div>
@@ -163,7 +171,7 @@
onPlayNow={playNowAction}
onPlayNext={menuActions?.onPlayNext}
onPlayLater={menuActions?.onPlayLater}
onAddFavorite={handleToggleFavorite}
onAddFavorite={trackId !== undefined ? () => toggleTrackFavorite(trackId) : undefined}
onAddToPlaylist={menuActions?.onAddToPlaylist}
onShareQobuz={menuActions?.onShareQobuz}
onShareSonglink={menuActions?.onShareSonglink}
@@ -196,6 +204,16 @@
background-color: var(--bg-secondary);
}
.track-row.compact {
height: 44px;
padding: 0 12px;
gap: 12px;
}
.track-row.compact .track-number {
width: 32px;
}
.track-number {
width: 48px;
display: flex;
@@ -274,6 +292,16 @@
white-space: nowrap;
}
.track-artist-column {
width: 180px;
flex-shrink: 0;
font-size: 13px;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.track-duration {
font-size: 14px;
color: var(--text-muted);
+1
View File
@@ -593,6 +593,7 @@
duration={track.duration}
quality={getTrackQuality(track)}
hideDownload={true}
compact={true}
onPlay={() => onTrackPlay?.(track)}
menuActions={{
onPlayNow: () => onTrackPlay?.(track)