feat: Implement a dedicated desktop queue panel and introduce a variant-specific song item UI for the queue.

Author: thakurdotdev

client/src/Pages/Music/BottomPlayer/DesktopQueuePanel.jsx

@@ -0,0 +1,106 @@
+import { ListMusic } from "lucide-react"
+import { memo } from "react"
+import { Badge } from "@/components/ui/badge"
+import { usePlayerStore } from "@/stores/playerStore"
+import QueueTab from "./QueueTab"
+
+const DesktopQueuePanel = memo(({ ready }) => {
+  const playlistLength = usePlayerStore((s) => s.playlist.length)
+
+  return (
+    <>
+      <div className="dqp-panel">
+        <div className="dqp-header">
+          <div className="flex items-center gap-2.5">
+            <ListMusic className="w-4 h-4 text-white/50" />
+            <span className="text-sm font-semibold text-white/85 tracking-wide">Queue</span>
+            <Badge
+              variant="secondary"
+              className="h-[18px] text-[10px] px-1.5 bg-white/8 text-white/50 border-0 font-medium"
+            >
+              {playlistLength}
+            </Badge>
+          </div>
+        </div>
+
+        <div className="dqp-list">
+          {ready ? (
+            <QueueTab variant="desktop" />
+          ) : (
+            <div className="flex items-center justify-center h-32">
+              <div className="w-5 h-5 border-2 border-white/10 border-t-white/40 rounded-full animate-spin" />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <style>{`
+        .dqp-panel {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          width: 300px;
+          background: transparent;
+          // border-left: 1px solid rgba(255, 255, 255, 0.04);
+          display: flex;
+          flex-direction: column;
+          z-index: 25;
+        }
+        .dqp-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 16px 16px 12px 18px;
+          flex-shrink: 0;
+        }
+        .dqp-list {
+          flex: 1;
+          overflow-y: auto;
+          overflow-x: hidden;
+          scrollbar-width: thin;
+          scrollbar-color: rgba(255,255,255,0.08) transparent;
+        }
+        .dqp-list::-webkit-scrollbar {
+          width: 4px;
+        }
+        .dqp-list::-webkit-scrollbar-track {
+          background: transparent;
+        }
+        .dqp-list::-webkit-scrollbar-thumb {
+          background: rgba(255,255,255,0.1);
+          border-radius: 4px;
+        }
+        .dqp-list::-webkit-scrollbar-thumb:hover {
+          background: rgba(255,255,255,0.18);
+        }
+        .dqp-item {
+          opacity: 0.75;
+          transition: opacity 0.2s ease, background 0.2s ease;
+        }
+        .dqp-item:hover {
+          opacity: 1;
+          background: rgba(255,255,255,0.04);
+        }
+        .dqp-item-active {
+          background: rgba(255,255,255,0.06);
+          opacity: 1;
+        }
+        .dqp-eq-bar {
+          width: 2px;
+          border-radius: 1px;
+          background: rgba(255,255,255,0.7);
+        }
+        .dqp-eq-1 { animation: dqpEq1 1s ease-in-out infinite; }
+        .dqp-eq-2 { animation: dqpEq2 1s ease-in-out infinite 0.15s; }
+        .dqp-eq-3 { animation: dqpEq3 1s ease-in-out infinite 0.3s; }
+        @keyframes dqpEq1 { 0%,100%{height:10px} 50%{height:16px} }
+        @keyframes dqpEq2 { 0%,100%{height:14px} 50%{height:8px} }
+        @keyframes dqpEq3 { 0%,100%{height:8px} 50%{height:14px} }
+      `}</style>
+    </>
+  )
+})
+
+DesktopQueuePanel.displayName = "DesktopQueuePanel"
+export default DesktopQueuePanel

client/src/Pages/Music/BottomPlayer/NowPlayingTab.jsx

@@ -1,8 +1,8 @@
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { SheetTitle } from "@/components/ui/sheet"
 import he from "he"
 import { ChevronRight, Music } from "lucide-react"
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
+import { SheetTitle } from "@/components/ui/sheet"
 import { usePlayerStore } from "@/stores/playerStore"
 import { MusicControls, ProgressBarMusic } from "../Common"
 
@@ -233,7 +233,7 @@ const NowPlayingTab = memo(({ currentSong }) => {
   }), [])
 
   return (
-    <div className="w-full h-full relative overflow-hidden bg-[#050508]">
+    <div className="w-full h-full relative overflow-hidden bg-[#050508] lg:pr-[300px]">
 
       {/* === MOBILE BG: Pre-blurred canvas, zero CSS filter cost === */}
       {blurredBg.previous && (
@@ -253,12 +253,12 @@ const NowPlayingTab = memo(({ currentSong }) => {
       {images.previous && (
         <div
           className="hidden lg:block absolute inset-0 bg-cover bg-center np-bg-fade-out"
-          style={{ backgroundImage: `url(${images.previous})`, filter: "blur(160px) saturate(1.4) brightness(0.65)", transform: "scale(2) translateZ(0)", willChange: "transform" }}
+          style={{ backgroundImage: `url(${images.previous})`, filter: "blur(100px) saturate(1.3) brightness(0.6)", transform: "scale(1.5) translateZ(0)", willChange: "opacity" }}
         />
       )}
       <div
         className={`hidden lg:block absolute inset-0 bg-cover bg-center ${images.transitioning ? "np-bg-fade-in" : ""}`}
-        style={{ backgroundImage: `url(${images.current})`, filter: "blur(160px) saturate(1.4) brightness(0.65)", transform: "scale(2) translateZ(0)", willChange: "transform" }}
+        style={{ backgroundImage: `url(${images.current})`, filter: "blur(100px) saturate(1.3) brightness(0.6)", transform: "scale(1.5) translateZ(0)" }}
       />
 
       {/* Desktop: glass effects */}
@@ -293,7 +293,7 @@ const NowPlayingTab = memo(({ currentSong }) => {
         </div>
 
         <div
-          className="flex-1 flex flex-col gap-6 min-w-0 transition-all duration-600 ease-out"
+          className="flex-1 flex flex-col gap-6 min-w-0 overflow-hidden transition-all duration-600 ease-out"
           style={{
             opacity: showEntrance ? 1 : 0,
             transform: showEntrance ? "translateY(0)" : "translateY(20px)",
@@ -392,10 +392,11 @@ const NowPlayingTab = memo(({ currentSong }) => {
           mix-blend-mode: overlay;
         }
         .np-orb-layer {
-          filter: blur(80px);
-          transform: scale(1.3);
+          filter: blur(50px);
+          transform: scale(1.2);
           mix-blend-mode: soft-light;
-          opacity: 0.6;
+          opacity: 0.5;
+          contain: layout style;
         }
         .np-orb {
           position: absolute;

client/src/Pages/Music/BottomPlayer/PlayerSheet.jsx

@@ -1,7 +1,7 @@
 /** biome-ignore-all lint/a11y/useButtonType: <explanation> */
 
 import { ChevronDownIcon, Disc3, ListMusic, MoreHorizontal, User, X } from "lucide-react"
-import { memo, useCallback, useState } from "react"
+import { memo, useCallback, useEffect, useState } from "react"
 import { useNavigate } from "react-router-dom"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
@@ -13,14 +13,24 @@ import {
 } from "@/components/ui/dropdown-menu"
 import { Sheet, SheetContent } from "@/components/ui/sheet"
 import { usePlayerStore } from "@/stores/playerStore"
+import DesktopQueuePanel from "./DesktopQueuePanel"
 import NowPlayingTab from "./NowPlayingTab"
 import QueueTab from "./QueueTab"
 
 const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
-  const [queueOpen, setQueueOpen] = useState(false)
+  const [mobileQueueOpen, setMobileQueueOpen] = useState(false)
+  const [queueReady, setQueueReady] = useState(false)
   const playlistLength = usePlayerStore((s) => s.playlist.length)
   const navigate = useNavigate()
 
+  useEffect(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => setQueueReady(true), 500)
+      return () => clearTimeout(timer)
+    }
+    setQueueReady(false)
+  }, [isOpen])
+
   const handleGoToAlbum = useCallback(
     (e) => {
       e.stopPropagation()
@@ -51,11 +61,9 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
         side="bottom"
         className="h-full w-full p-0 overflow-hidden border-0 bg-black"
       >
-        {/* Full-screen Now Playing - all screen sizes */}
         <div className="h-full w-full relative">
           <NowPlayingTab currentSong={currentSong} onOpenModal={onOpenModal} isDesktop />
 
-          {/* Floating controls overlay */}
           <div className="absolute top-4 left-4 right-4 flex items-center justify-between z-30">
             <Button
               variant="ghost"
@@ -70,8 +78,8 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
               <Button
                 variant="ghost"
                 size="icon"
-                onClick={() => setQueueOpen(true)}
-                className="h-10 w-10 bg-white/10 hover:bg-white/20 rounded-full transition-colors duration-300 relative"
+                onClick={() => setMobileQueueOpen(true)}
+                className="lg:hidden h-10 w-10 bg-white/10 hover:bg-white/20 rounded-full transition-colors duration-300 relative"
               >
                 <ListMusic className="h-5 w-5 text-white" />
                 <span className="absolute -top-1 -right-1 min-w-[18px] h-[18px] rounded-full bg-white/25 text-[10px] text-white font-semibold flex items-center justify-center px-1">
@@ -115,16 +123,21 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
             </div>
           </div>
 
-          {/* Queue slide-over panel */}
+          {/* Desktop: always-visible queue panel, content delayed */}
+          <div className="hidden lg:block">
+            <DesktopQueuePanel ready={queueReady} />
+          </div>
+
+          {/* Mobile: full-screen slide-over queue */}
           <div
-            className={`absolute inset-0 z-40 transition-all duration-500 ease-out ${queueOpen ? "pointer-events-auto" : "pointer-events-none"}`}
+            className={`lg:hidden absolute inset-0 z-40 transition-all duration-500 ease-out ${mobileQueueOpen ? "pointer-events-auto" : "pointer-events-none"}`}
           >
             <div
-              className={`absolute inset-0 bg-black/70 transition-opacity duration-500 ${queueOpen ? "opacity-100" : "opacity-0"}`}
-              onClick={() => setQueueOpen(false)}
+              className={`absolute inset-0 bg-black/70 transition-opacity duration-500 ${mobileQueueOpen ? "opacity-100" : "opacity-0"}`}
+              onClick={() => setMobileQueueOpen(false)}
             />
             <div
-              className={`absolute top-0 right-0 bottom-0 w-full sm:w-[420px] bg-[#0a0a0a]/95 transition-transform duration-500 ease-out flex flex-col ${queueOpen ? "translate-x-0" : "translate-x-full"}`}
+              className={`absolute top-0 right-0 bottom-0 w-full sm:w-105 bg-black/10 backdrop-blur-xl transition-transform duration-500 ease-out flex flex-col border-l border-white/4 ${mobileQueueOpen ? "translate-x-0" : "translate-x-full"}`}
             >
               <div className="h-16 px-5 flex items-center justify-between shrink-0">
                 <div className="flex items-center gap-3">
@@ -140,7 +153,7 @@ const PlayerSheet = memo(({ isOpen, onClose, currentSong, onOpenModal }) => {
                 <Button
                   variant="ghost"
                   size="icon"
-                  onClick={() => setQueueOpen(false)}
+                  onClick={() => setMobileQueueOpen(false)}
                   className="h-9 w-9 bg-white/10 hover:bg-white/20 rounded-full transition-colors duration-300"
                 >
                   <X className="h-4 w-4 text-white" />