From 0e05740df731f0c8fe20a41e84265dc40383113b Mon Sep 17 00:00:00 2001
From: Honey <me_honeyy@proton.me>
Date: Tue, 19 May 2026 20:20:04 +0200
Subject: [PATCH] feat: show title/album/artist order in bottom bar and now
 playing UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Bottom bar: player-info is now a centered flex column so text block
  aligns properly against the art circle
- Now playing: split artist·album line into album (above) + artist (below)
  matching the bottom bar layout; removed np-album-sep reference
- Removed stale np-album-sep style.display call from player.js

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 index.html    | 5 ++++-
 src/player.js | 1 -
 styles.css    | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 9b44cd2..624b4a1 100644
--- a/index.html
+++ b/index.html
@@ -872,8 +872,11 @@
     <div class="np-info">
       <div class="np-text">
         <div class="np-title" id="np-title">Kein Titel</div>
+        <div class="np-artist">
+          <span id="np-album-name" onclick="npGoAlbum()" style="cursor:pointer;opacity:.8">—</span>
+        </div>
         <div class="np-artist" id="np-artist">
-          <span id="np-artist-name">—</span><span id="np-album-sep" style="opacity:.5"> · </span><span id="np-album-name" onclick="npGoAlbum()" style="cursor:pointer;opacity:.8">—</span>
+          <span id="np-artist-name">—</span>
         </div>
       </div>
       <button class="np-star" id="np-star-btn" onclick="npToggleStar()">
diff --git a/src/player.js b/src/player.js
index d701af0..32bbf2a 100644
--- a/src/player.js
+++ b/src/player.js
@@ -444,7 +444,6 @@ export function _syncNpDirect(s) {
         }).join('<span style="opacity:.5"> • </span>')
       : '—';
   }
-  const asep = document.getElementById('np-album-sep'); if(asep) asep.style.display = s.album ? '' : 'none';
   const aln = document.getElementById('np-album-name'); if(aln) aln.textContent = s.album || '';
   syncNpStar();
 }
diff --git a/styles.css b/styles.css
index 2c504a3..1913a03 100644
--- a/styles.css
+++ b/styles.css
@@ -237,7 +237,7 @@ button:focus{outline:none}
 .player-art::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:8px;border-radius:50%;background:var(--bg);box-shadow:0 0 0 2px rgba(255,255,255,.15);pointer-events:none;opacity:0;transition:opacity .3s}
 .player-art.spinning::after{opacity:1}
 @keyframes spin{to{transform:rotate(360deg)}}
-.player-info{min-width:0}
+.player-info{min-width:0;display:flex;flex-direction:column;justify-content:center}
 .player-title{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
 /* Player bar clickable title/artist */
 .player-title:hover{color:var(--accent);text-decoration:underline}
@@ -263,7 +263,7 @@ button:focus{outline:none}
 .np-sheet-item.danger{color:var(--danger)}
 .np-sheet-item.danger svg{color:var(--danger)}
 
-.player-artist{font-size:11px;color:var(--text2);margin-top:2px}
+.player-artist{font-size:11px;color:var(--text2);margin-top:1px}
 .player-badge{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-left:5px;vertical-align:middle}
 .player-controls{display:flex;flex-direction:column;align-items:center;gap:7px;width:420px;padding:0 24px}
 .ctrl-buttons{display:flex;align-items:center;gap:10px}
@@ -601,6 +601,7 @@ button:focus{outline:none}
 .np-text{flex:1;min-width:0}
 .np-title{font-size:22px;font-weight:800;letter-spacing:-.4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:5px}
 .np-artist{font-size:15px;color:rgba(255,255,255,.65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s}
+.np-artist+.np-artist{font-size:13px;margin-top:2px;color:rgba(255,255,255,.45)}
 #np-artist-name span:hover,#np-album-name:hover{color:var(--accent);cursor:pointer}
 .np-star{
   background:none;border:none;cursor:pointer;