From 7907b695f8ded9bbafd9b6fa656a1c3f92dfcb7c Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Sun, 18 Jan 2026 03:16:38 -0600
Subject: [PATCH] feat(ui): complete stack icon repositioning (all 4 players)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 src/lib/components/FocusMode.svelte | 22 +++++++++++++++-------
 src/routes/miniplayer/+page.svelte  | 27 +++++++++------------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/lib/components/FocusMode.svelte b/src/lib/components/FocusMode.svelte
index 001ab45a3..d25ea069a 100644
--- a/src/lib/components/FocusMode.svelte
+++ b/src/lib/components/FocusMode.svelte
@@ -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 */
diff --git a/src/routes/miniplayer/+page.svelte b/src/routes/miniplayer/+page.svelte
index b103c1f70..9b392fea4 100644
--- a/src/routes/miniplayer/+page.svelte
+++ b/src/routes/miniplayer/+page.svelte
@@ -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;