From f4e951db3c2de6359b4b4e90c12f9112c3578f88 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sun, 10 Aug 2025 14:57:13 +0200
Subject: [PATCH] feat: enhance CompactPlayer with volume state management and
 mute/unmute functionality

---
 src/components/AppSidebar.tsx           |  3 ++-
 src/components/player/CompactPlayer.tsx | 15 +++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/AppSidebar.tsx b/src/components/AppSidebar.tsx
index 4b75924..0b07b66 100644
--- a/src/components/AppSidebar.tsx
+++ b/src/components/AppSidebar.tsx
@@ -57,10 +57,11 @@ export function AppSidebar({ showCompactPlayer = false }: AppSidebarProps) {
       <SidebarFooter>
         {showCompactPlayer && (
           <>
+            <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
             <div className="p-2">
               <CompactPlayer />
             </div>
-            <Separator className="mb-2" />
+            <Separator className="mb-1 group-data-[collapsible=icon]:hidden" />
           </>
         )}
         <UserNav user={user} logout={logout} />
diff --git a/src/components/player/CompactPlayer.tsx b/src/components/player/CompactPlayer.tsx
index 1460fa6..028df7d 100644
--- a/src/components/player/CompactPlayer.tsx
+++ b/src/components/player/CompactPlayer.tsx
@@ -30,6 +30,7 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
     position: 0
   })
   const [isLoading, setIsLoading] = useState(false)
+  const [previousVolume, setPreviousVolume] = useState(50)
 
   // Load initial state
   useEffect(() => {
@@ -57,6 +58,13 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
     }
   }, [])
 
+  // Initialize previous volume when state loads
+  useEffect(() => {
+    if (state.volume > 0 && previousVolume <= 0) {
+      setPreviousVolume(state.volume)
+    }
+  }, [state.volume, previousVolume])
+
   const executeAction = useCallback(async (action: () => Promise<void | MessageResponse>, actionName: string) => {
     setIsLoading(true)
     try {
@@ -87,11 +95,14 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
 
   const handleVolumeToggle = useCallback(() => {
     if (state.volume === 0) {
-      executeAction(() => playerService.setVolume(50), 'unmute')
+      // Unmute
+      executeAction(() => playerService.setVolume(previousVolume), 'unmute')
     } else {
+      // Mute
+      setPreviousVolume(state.volume)
       executeAction(() => playerService.setVolume(0), 'mute')
     }
-  }, [state.volume, executeAction])
+  }, [previousVolume, state.volume, executeAction])
 
   // Don't show if no current sound
   if (!state.current_sound) {