feat: add ultra-minimized view and toggle functionality in MusicPlayer

src/components/MusicPlayer.tsx

@@ -16,7 +16,8 @@ import {
   Shuffle,
   List,
   Maximize2,
-  Minimize2
+  Minimize2,
+  Minus
 } from 'lucide-react'
 
 export function MusicPlayer() {
@@ -31,6 +32,7 @@ export function MusicPlayer() {
     playlist,
     currentTrackIndex,
     isMinimized,
+    isUltraMinimized,
     showPlaylist,
     togglePlayPause,
     stop,
@@ -42,6 +44,7 @@ export function MusicPlayer() {
     setPlayMode,
     playTrack,
     toggleMaximize,
+    toggleUltraMinimize,
     togglePlaylistVisibility,
   } = useMusicPlayer()
 
@@ -95,6 +98,28 @@ export function MusicPlayer() {
 
   const progressPercentage = (currentTime / duration) * 100
 
+  // Ultra-minimized view - only essential controls
+  if (isUltraMinimized) {
+    return (
+      <Card className="fixed bottom-4 right-4 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border shadow-lg z-50">
+        <div className="p-3 flex items-center space-x-2">
+          <Button variant="ghost" size="sm" onClick={previousTrack}>
+            <SkipBack className="h-4 w-4" />
+          </Button>
+          <Button variant="default" size="sm" onClick={togglePlayPause}>
+            {isPlaying ? <Pause className="h-4 w-4" /> : <Play className="h-4 w-4" />}
+          </Button>
+          <Button variant="ghost" size="sm" onClick={nextTrack}>
+            <SkipForward className="h-4 w-4" />
+          </Button>
+          <Button variant="ghost" size="sm" onClick={toggleUltraMinimize}>
+            <Maximize2 className="h-4 w-4" />
+          </Button>
+        </div>
+      </Card>
+    )
+  }
+
   if (isMinimized) {
     return (
       <Card className="fixed bottom-4 right-4 w-80 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60 border shadow-lg z-50">
@@ -106,7 +131,16 @@ export function MusicPlayer() {
               alt={currentTrack.title}
               className="h-full w-full object-cover"
             />
-            <div className="absolute top-2 right-2">
+            <div className="absolute top-2 right-2 flex space-x-1">
+              <Button
+                variant="secondary"
+                size="sm"
+                onClick={toggleUltraMinimize}
+                className="h-8 w-8 p-0 bg-black/50 hover:bg-black/70"
+                title="Minimize to controls only"
+              >
+                <Minus className="h-4 w-4" />
+              </Button>
               <Button
                 variant="secondary"
                 size="sm"