feat: update PlayNextQueue component and integrate it into Player; adjust layout in Playlist for improved UI

src/components/player/CompactPlayer.tsx

@@ -22,6 +22,7 @@ export function CompactPlayer({ className }: CompactPlayerProps) {
     volume: 80,
     previous_volume: 80,
     position: 0,
+    play_next_queue: [],
   })
   const [isLoading, setIsLoading] = useState(false)
 

src/components/player/PlayNextQueue.tsx

@@ -1,92 +1,105 @@
 import { Badge } from '@/components/ui/badge'
 import { ScrollArea } from '@/components/ui/scroll-area'
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover'
 import { filesService } from '@/lib/api/services/files'
 import { type PlayerSound } from '@/lib/api/services/player'
-import { cn } from '@/lib/utils'
 import { formatDuration } from '@/utils/format-duration'
 import { Music, ListPlus } from 'lucide-react'
 
 interface PlayNextQueueProps {
   queue: PlayerSound[]
-  variant?: 'normal' | 'maximized'
 }
 
-export function PlayNextQueue({ queue, variant = 'normal' }: PlayNextQueueProps) {
+export function PlayNextQueue({ queue }: PlayNextQueueProps) {
   if (queue.length === 0) {
     return null
   }
 
+  // Calculate total duration
+  const totalDuration = queue.reduce((sum, sound) => sum + sound.duration, 0)
+
   return (
-    <div className="w-full">
+    <Popover>
-      {/* Header */}
+      <PopoverTrigger asChild>
-      <div className="flex items-center justify-between mb-2">
+        <div className="flex items-center justify-between py-2 px-2 rounded hover:bg-muted/50 cursor-pointer transition-colors">
-        <div className="flex items-center gap-2">
+          <div className="flex items-center gap-2">
-          <ListPlus className="h-4 w-4 text-muted-foreground" />
+            <ListPlus className="h-4 w-4 text-muted-foreground" />
-          <h4 className="font-medium text-sm">Play Next</h4>
+            <span className="text-sm font-medium">Play Next</span>
+          </div>
+          <Badge variant="secondary" className="text-xs">
+            {queue.length} {queue.length === 1 ? 'track' : 'tracks'}
+          </Badge>
         </div>
-        <Badge variant="secondary" className="text-xs">
+      </PopoverTrigger>
-          {queue.length} {queue.length === 1 ? 'track' : 'tracks'}
+      <PopoverContent side="left" align="start" className="w-80 p-0">
-        </Badge>
+        <div className="w-full flex flex-col">
-      </div>
+          {/* Header - Fixed */}
+          <div className="flex items-center justify-between p-3 border-b">
+            <h4 className="font-semibold text-sm">Play Next Queue</h4>
+            <Badge variant="secondary" className="text-xs">
+              {queue.length}
+            </Badge>
+          </div>
 
-      {/* Track List */}
+          {/* Track List - Scrollable */}
-      <ScrollArea className={variant === 'maximized' ? 'max-h-60' : 'max-h-40'}>
+          <ScrollArea className="h-96">
-        <div className="w-full">
+            <div className="w-full space-y-1 p-3 pt-2">
-          {queue.map((sound, index) => (
+              {queue.map((sound, index) => (
-            <div
-              key={`${sound.id}-${index}`}
-              className={cn(
-                'grid grid-cols-10 gap-2 items-center py-1.5 px-2 rounded text-xs bg-muted/30',
-                index > 0 && 'mt-1',
-              )}
-            >
-              {/* Queue position - 1 column */}
-              <div className="col-span-1 flex justify-center">
-                <span className="text-muted-foreground">{index + 1}</span>
-              </div>
-
-              {/* Thumbnail - 1 column */}
-              <div className="col-span-1">
                 <div
-                  className={cn(
+                  key={`${sound.id}-${index}`}
-                    'bg-muted rounded flex items-center justify-center overflow-hidden',
+                  className="grid grid-cols-10 gap-2 items-center py-1.5 px-2 rounded hover:bg-muted/50 text-xs"
-                    variant === 'maximized' ? 'w-6 h-6' : 'w-5 h-5',
-                  )}
                 >
-                  {sound.thumbnail ? (
+                  {/* Queue position - 1 column */}
-                    <img
+                  <div className="col-span-1 flex justify-center">
-                      src={filesService.getThumbnailUrl(sound.id)}
+                    <span className="text-muted-foreground">{index + 1}</span>
-                      alt=""
+                  </div>
-                      className="w-full h-full object-cover"
+
-                    />
+                  {/* Thumbnail - 1 column */}
-                  ) : (
+                  <div className="col-span-1">
-                    <Music className="h-3 w-3 text-muted-foreground" />
+                    <div className="bg-muted rounded flex items-center justify-center overflow-hidden w-5 h-5">
-                  )}
+                      {sound.thumbnail ? (
+                        <img
+                          src={filesService.getThumbnailUrl(sound.id)}
+                          alt=""
+                          className="w-full h-full object-cover"
+                        />
+                      ) : (
+                        <Music className="h-3 w-3 text-muted-foreground" />
+                      )}
+                    </div>
+                  </div>
+
+                  {/* Track name - 6 columns */}
+                  <div className="col-span-6">
+                    <span className="font-medium truncate block text-xs">
+                      {sound.name}
+                    </span>
+                  </div>
+
+                  {/* Duration - 2 columns */}
+                  <div className="col-span-2 text-right">
+                    <span className="text-muted-foreground text-xs whitespace-nowrap">
+                      {formatDuration(sound.duration)}
+                    </span>
+                  </div>
                 </div>
-              </div>
+              ))}
-
-              {/* Track name - 6 columns */}
-              <div className="col-span-6">
-                <span
-                  className={cn(
-                    'font-medium truncate block text-muted-foreground',
-                    variant === 'maximized' ? 'text-sm' : 'text-xs',
-                  )}
-                >
-                  {sound.name}
-                </span>
-              </div>
-
-              {/* Duration - 2 columns */}
-              <div className="col-span-2 text-right">
-                <span className="text-muted-foreground text-xs whitespace-nowrap">
-                  {formatDuration(sound.duration)}
-                </span>
-              </div>
             </div>
-          ))}
+          </ScrollArea>
+
+          {/* Footer - Fixed */}
+          <div className="p-3 pt-2 border-t bg-muted/30">
+            <div className="flex justify-between items-center text-xs">
+              <span className="text-muted-foreground">Total playtime</span>
+              <span className="font-medium">{formatDuration(totalDuration)}</span>
+            </div>
+          </div>
         </div>
-      </ScrollArea>
+      </PopoverContent>
-    </div>
+    </Popover>
   )
 }

src/components/player/Player.tsx

@@ -378,7 +378,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
 
             {/* Play Next Queue */}
             {state.play_next_queue.length > 0 && (
-              <div className="mt-4 pt-4 border-t">
+              <div className="mt-2">
                 <PlayNextQueue queue={state.play_next_queue} />
               </div>
             )}
@@ -448,14 +448,14 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
 
         {/* Playlist Sidebar */}
         {state.playlist && (
-          <div className="w-96 border-l bg-muted/10 backdrop-blur-sm">
+          <div className="w-96 border-l bg-muted/10 backdrop-blur-sm flex flex-col">
-            <div className="p-4 border-b">
+            <div className="p-4 border-b flex-shrink-0">
               <h3 className="font-semibold">Playlist</h3>
               <p className="text-sm text-muted-foreground">
                 {state.playlist.sounds.length} tracks
               </p>
             </div>
-            <div className="p-4">
+            <div className="p-4 overflow-y-auto flex-1">
               <Playlist
                 playlist={state.playlist}
                 currentIndex={state.index}
@@ -470,8 +470,8 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
 
               {/* Play Next Queue */}
               {state.play_next_queue.length > 0 && (
-                <div className="mt-4 pt-4 border-t">
+                <div className="mt-2">
-                  <PlayNextQueue queue={state.play_next_queue} variant="maximized" />
+                  <PlayNextQueue queue={state.play_next_queue} />
                 </div>
               )}
             </div>

src/components/player/Playlist.tsx

@@ -76,7 +76,7 @@ export function Playlist({
 
       {/* Track List */}
       <ScrollArea
-        className={variant === 'maximized' ? 'h-[calc(100vh-280px)]' : 'h-60'}
+        className={variant === 'maximized' ? 'h-[calc(100vh-320px)]' : 'h-60'}
       >
         <div className="w-full">
           {filteredSounds.map((sound) => {