feat: added alternative queue display

furumi-node-player/client/src/components/PlayerBar.tsx

@@ -1,7 +1,28 @@
 import { NowPlaying } from './NowPlaying'
+import { QueuePopover } from './queue-popover'
 import type { QueueItem } from './QueueList'
 
-export function PlayerBar({ track }: { track: QueueItem | null }) {
+type PlayerBarProps = {
+  track: QueueItem | null
+  queue: QueueItem[]
+  order: number[]
+  playingOrigIdx: number
+  scrollSignal: number
+  onQueuePlay: (origIdx: number) => void
+  onQueueRemove: (origIdx: number) => void
+  onQueueMove: (fromPos: number, toPos: number) => void
+}
+
+export function PlayerBar({
+  track,
+  queue,
+  order,
+  playingOrigIdx,
+  scrollSignal,
+  onQueuePlay,
+  onQueueRemove,
+  onQueueMove,
+}: PlayerBarProps) {
   return (
     <div className="player-bar">
       <NowPlaying track={track} />
@@ -30,6 +51,15 @@ export function PlayerBar({ track }: { track: QueueItem | null }) {
         </div>
       </div>
       <div className="volume-row">
+        <QueuePopover
+          queue={queue}
+          order={order}
+          playingOrigIdx={playingOrigIdx}
+          scrollSignal={scrollSignal}
+          onPlay={onQueuePlay}
+          onRemove={onQueueRemove}
+          onMove={onQueueMove}
+        />
         <span className="vol-icon" id="volIcon">
           &#128266;
         </span>