From 4549cc6d9af4f55643d512972fc0dea5ea08c1d0 Mon Sep 17 00:00:00 2001
From: Julien Maille <julien.maille@data-pixel.com>
Date: Thu, 8 Jan 2026 20:28:54 +0100
Subject: [PATCH] Hide add to playlist and lyrics buttons in playbar when no
 song is selected

---
 index.html |  6 +++---
 js/ui.js   | 19 ++++++++++++++-----
 2 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 0777111..08f03b5 100644
--- a/index.html
+++ b/index.html
@@ -811,7 +811,7 @@
                 <div class="player-actions-row">
                     <button id="now-playing-like-btn" class="like-btn" data-action="toggle-like" title="Save to Favorites" style="display: none;">
                     </button>
-                    <button id="now-playing-add-playlist-btn" title="Add to Playlist" class="desktop-only">
+                    <button id="now-playing-add-playlist-btn" title="Add to Playlist" class="desktop-only" style="display: none;">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                             <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
@@ -822,7 +822,7 @@
                             <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
                         </svg>
                     </button>
-                    <button id="toggle-lyrics-btn" title="Lyrics">
+                    <button id="toggle-lyrics-btn" title="Lyrics" style="display: none;">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mic"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/><line x1="8" y1="22" x2="16" y2="22"/></svg>
                     </button>
                     <button id="download-current-btn" title="Download current track" class="desktop-only">
@@ -833,7 +833,7 @@
                         </svg>
                     </button>
 
-                    <button id="mobile-add-playlist-btn" class="mobile-only">
+                    <button id="mobile-add-playlist-btn" class="mobile-only" style="display: none !important;">
                         <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                             <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
                             <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
diff --git a/js/ui.js b/js/ui.js
index ffc666d..fc44dd8 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -81,14 +81,23 @@ export class UIRenderer {
         this.updateGlobalTheme();
         
         const likeBtn = document.getElementById('now-playing-like-btn');
-        if (likeBtn) {
-            if (track) {
+        const addPlaylistBtn = document.getElementById('now-playing-add-playlist-btn');
+        const mobileAddPlaylistBtn = document.getElementById('mobile-add-playlist-btn');
+        const lyricsBtn = document.getElementById('toggle-lyrics-btn');
+
+        if (track) {
+            if (likeBtn) {
                 likeBtn.style.display = 'flex';
-                // Use the centralized update logic if possible, or manual here
                 this.updateLikeState(likeBtn.parentElement, 'track', track.id);
-            } else {
-                likeBtn.style.display = 'none';
             }
+            if (addPlaylistBtn) addPlaylistBtn.style.removeProperty('display');
+            if (mobileAddPlaylistBtn) mobileAddPlaylistBtn.style.removeProperty('display');
+            if (lyricsBtn) lyricsBtn.style.removeProperty('display');
+        } else {
+            if (likeBtn) likeBtn.style.display = 'none';
+            if (addPlaylistBtn) addPlaylistBtn.style.setProperty('display', 'none', 'important');
+            if (mobileAddPlaylistBtn) mobileAddPlaylistBtn.style.setProperty('display', 'none', 'important');
+            if (lyricsBtn) lyricsBtn.style.display = 'none';
         }
     }