feat(ui): complete stack icon repositioning (all 4 players)

Stack icon now appears in artist/album area across all players:

- FocusMode: icon before artist (size 12px)
- MiniPlayer: icon at start of artist-album row (size 12px)
- Consistent sizing: 12px (compact players), 16px (expanded player)
- Visual hierarchy: Title → [icon] Artist · Album

All 4 players updated and consistent.

cp
This commit is contained in:
vicrodh committed 2026-01-18 03:16:38 -06:00
1 parent 2071149747
commit 7907b695f8
2 files changed
+24 -25

No files matched your search

+15 -7
View File
@@ -185,11 +185,11 @@
<div class="track-info">
<img src={artwork} alt="" class="mini-artwork" />
<div class="track-meta">
<div class="track-title-row">
<StackIcon size={14} class="stack-icon" />
<div class="track-title">{trackTitle}</div>
<div class="track-title">{trackTitle}</div>
<div class="track-artist-row">
<StackIcon size={12} class="stack-icon" />
<div class="track-artist">{artist}</div>
</div>
<div class="track-artist">{artist}</div>
</div>
</div>
@@ -487,8 +487,17 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1;
min-width: 0;
}
.track-artist-row {
display: flex;
align-items: center;
gap: 6px;
margin-top: 2px;
}
.track-artist-row :global(.stack-icon) {
flex-shrink: 0;
}
.track-artist {
@@ -497,7 +506,6 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 2px;
}
/* Playback Section */
+9 -18
View File
@@ -231,11 +231,9 @@
<Maximize2 size={14} />
</button>
<div class="track-info">
<div class="title-row">
<StackIcon size={14} class="stack-icon" />
<div class="title">{playerState.currentTrack?.title ?? 'No track'}</div>
</div>
<div class="title">{playerState.currentTrack?.title ?? 'No track'}</div>
<div class="artist-album">
<StackIcon size={12} class="stack-icon" />
{playerState.currentTrack?.artist ?? '—'}
{#if playerState.currentTrack?.album}
<span class="separator">—</span>
@@ -412,18 +410,6 @@
padding-right: 30px;
}
.title-row {
display: flex;
align-items: center;
gap: 6px;
white-space: nowrap;
overflow: hidden;
}
.title-row :global(.stack-icon) {
flex-shrink: 0;
}
.title {
font-weight: 600;
font-size: 14px;
@@ -432,11 +418,12 @@
text-overflow: ellipsis;
color: #fff;
line-height: 1.4;
flex: 1;
min-width: 0;
}
.artist-album {
display: flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: rgba(255, 255, 255, 0.5);
white-space: nowrap;
@@ -445,6 +432,10 @@
margin-top: 2px;
}
.artist-album :global(.stack-icon) {
flex-shrink: 0;
}
.separator {
margin: 0 4px;
opacity: 0.5;