From 7a6288cc0214e7e1563bcc2a0855b5ef2d65f525 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sat, 4 Oct 2025 21:55:20 +0200
Subject: [PATCH] feat: update PlayNextQueue component and integrate it into
 Player; adjust layout in Playlist for improved UI

---
 src/components/player/CompactPlayer.tsx |   1 +
 src/components/player/PlayNextQueue.tsx | 147 +++++++++++++-----------
 src/components/player/Player.tsx        |  12 +-
 src/components/player/Playlist.tsx      |   2 +-
 4 files changed, 88 insertions(+), 74 deletions(-)

diff --git a/src/components/player/CompactPlayer.tsx b/src/components/player/CompactPlayer.tsx
index c9888ce..46fb115 100644
--- a/src/components/player/CompactPlayer.tsx
+++ b/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)
 
diff --git a/src/components/player/PlayNextQueue.tsx b/src/components/player/PlayNextQueue.tsx
index 89ab6a1..6bf6e53 100644
--- a/src/components/player/PlayNextQueue.tsx
+++ b/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">
-      {/* Header */}
-      <div className="flex items-center justify-between mb-2">
-        <div className="flex items-center gap-2">
-          <ListPlus className="h-4 w-4 text-muted-foreground" />
-          <h4 className="font-medium text-sm">Play Next</h4>
+    <Popover>
+      <PopoverTrigger asChild>
+        <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">
+            <ListPlus className="h-4 w-4 text-muted-foreground" />
+            <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">
-          {queue.length} {queue.length === 1 ? 'track' : 'tracks'}
-        </Badge>
-      </div>
+      </PopoverTrigger>
+      <PopoverContent side="left" align="start" className="w-80 p-0">
+        <div className="w-full flex flex-col">
+          {/* 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 */}
-      <ScrollArea className={variant === 'maximized' ? 'max-h-60' : 'max-h-40'}>
-        <div className="w-full">
-          {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">
+          {/* Track List - Scrollable */}
+          <ScrollArea className="h-96">
+            <div className="w-full space-y-1 p-3 pt-2">
+              {queue.map((sound, index) => (
                 <div
-                  className={cn(
-                    'bg-muted rounded flex items-center justify-center overflow-hidden',
-                    variant === 'maximized' ? 'w-6 h-6' : 'w-5 h-5',
-                  )}
+                  key={`${sound.id}-${index}`}
+                  className="grid grid-cols-10 gap-2 items-center py-1.5 px-2 rounded hover:bg-muted/50 text-xs"
                 >
-                  {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" />
-                  )}
+                  {/* 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="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>
-    </div>
+      </PopoverContent>
+    </Popover>
   )
 }
diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index 2ce3bb2..ff23f7a 100644
--- a/src/components/player/Player.tsx
+++ b/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="p-4 border-b">
+          <div className="w-96 border-l bg-muted/10 backdrop-blur-sm flex flex-col">
+            <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">
-                  <PlayNextQueue queue={state.play_next_queue} variant="maximized" />
+                <div className="mt-2">
+                  <PlayNextQueue queue={state.play_next_queue} />
                 </div>
               )}
             </div>
diff --git a/src/components/player/Playlist.tsx b/src/components/player/Playlist.tsx
index 5b59275..e434842 100644
--- a/src/components/player/Playlist.tsx
+++ b/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) => {