From e6c91fea7d156d39b4c94e907402c1524d7d84d0 Mon Sep 17 00:00:00 2001
From: Yvv <yves@pervier.com>
Date: Fri, 27 Feb 2026 14:11:32 +0100
Subject: [PATCH] =?UTF-8?q?Replie=20les=20paroles=20par=20d=C3=A9faut=20da?=
 =?UTF-8?q?ns=20le=20player=20persistant?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Toggle discret pour les afficher au besoin (usage autonome).
Gain de place dans le panel déployé.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 app/components/player/PlayerPersistent.vue | 33 ++++++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/components/player/PlayerPersistent.vue b/app/components/player/PlayerPersistent.vue
index f7559a6..1d8acb1 100644
--- a/app/components/player/PlayerPersistent.vue
+++ b/app/components/player/PlayerPersistent.vue
@@ -51,10 +51,18 @@
             >
           </div>
 
-          <!-- Lyrics (if available) -->
-          <div v-if="store.currentSong.lyrics" class="panel-lyrics">
+          <!-- Lyrics (collapsed by default, available for standalone use) -->
+          <div v-if="store.currentSong.lyrics && showLyrics" class="panel-lyrics">
             <pre class="panel-lyrics-text">{{ store.currentSong.lyrics }}</pre>
           </div>
+          <button
+            v-if="store.currentSong.lyrics"
+            class="panel-lyrics-toggle"
+            @click="showLyrics = !showLyrics"
+          >
+            <div :class="showLyrics ? 'i-lucide-chevron-up' : 'i-lucide-text'" class="h-3 w-3" />
+            {{ showLyrics ? 'Masquer les paroles' : 'Paroles' }}
+          </button>
 
           <!-- Playlist -->
           <div class="panel-playlist">
@@ -128,6 +136,7 @@ useKeyboardShortcuts()
 
 const widgetRef = ref<HTMLElement>()
 const isExpanded = ref(false)
+const showLyrics = ref(false)
 let previousVolume = 0.8
 
 const circumference = 2 * Math.PI * 16
@@ -401,6 +410,26 @@ onClickOutside(widgetRef, () => {
   margin: 0;
 }
 
+/* ─── Lyrics toggle ─── */
+.panel-lyrics-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.375rem;
+  border: none;
+  border-top: 1px solid hsl(0 0% 100% / 0.04);
+  background: none;
+  color: hsl(0 0% 100% / 0.25);
+  font-size: 0.65rem;
+  cursor: pointer;
+  transition: color 0.15s;
+}
+.panel-lyrics-toggle:hover {
+  color: hsl(0 0% 100% / 0.5);
+}
+
 /* ─── Playlist ─── */
 .panel-playlist {
   max-height: 200px;