feat: update dependencies and refactor ScrollArea component for improved structure

bun.lock

@@ -26,15 +26,15 @@
         "clsx": "^2.1.1",
         "cmdk": "^1.1.1",
         "date-fns": "^4.1.0",
-        "lucide-react": "^0.525.0",
+        "lucide-react": "^0.539.0",
         "next-themes": "^0.4.6",
         "react": "^19.1.0",
-        "react-day-picker": "^9.8.0",
+        "react-day-picker": "^9.8.1",
         "react-dom": "^19.1.0",
         "react-router": "^7.7.1",
         "recharts": "2.15.4",
         "socket.io-client": "^4.8.1",
-        "sonner": "^2.0.6",
+        "sonner": "^2.0.7",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.11",
       },
@@ -720,7 +720,7 @@
 
     "lru-cache": ["lru-cache@10.4.3", "", {}, "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ=="],
 
-    "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
+    "lucide-react": ["lucide-react@0.539.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-VVISr+VF2krO91FeuCrm1rSOLACQUYVy7NQkzrOty52Y8TlTPcXcMdQFj9bYzBgXbWCiywlwSZ3Z8u6a+6bMlg=="],
 
     "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="],
 
@@ -790,7 +790,7 @@
 
     "react": ["react@19.1.0", "", {}, "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg=="],
 
-    "react-day-picker": ["react-day-picker@9.8.0", "", { "dependencies": { "@date-fns/tz": "1.2.0", "date-fns": "4.1.0", "date-fns-jalali": "4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-E0yhhg7R+pdgbl/2toTb0xBhsEAtmAx1l7qjIWYfcxOy8w4rTSVfbtBoSzVVhPwKP/5E9iL38LivzoE3AQDhCQ=="],
+    "react-day-picker": ["react-day-picker@9.8.1", "", { "dependencies": { "@date-fns/tz": "^1.2.0", "date-fns": "^4.1.0", "date-fns-jalali": "^4.1.0-0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-kMcLrp3PfN/asVJayVv82IjF3iLOOxuH5TNFWezX6lS/T8iVRFPTETpHl3TUSTH99IDMZLubdNPJr++rQctkEw=="],
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
@@ -838,7 +838,7 @@
 
     "socket.io-parser": ["socket.io-parser@4.2.4", "", { "dependencies": { "@socket.io/component-emitter": "~3.1.0", "debug": "~4.3.1" } }, "sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew=="],
 
-    "sonner": ["sonner@2.0.6", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-yHFhk8T/DK3YxjFQXIrcHT1rGEeTLliVzWbO0xN8GberVun2RiBnxAjXAYpZrqwEVHBG9asI/Li8TAAhN9m59Q=="],
+    "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 

package.json

@@ -33,15 +33,15 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "date-fns": "^4.1.0",
-    "lucide-react": "^0.525.0",
+    "lucide-react": "^0.539.0",
     "next-themes": "^0.4.6",
     "react": "^19.1.0",
-    "react-day-picker": "^9.8.0",
+    "react-day-picker": "^9.8.1",
     "react-dom": "^19.1.0",
     "react-router": "^7.7.1",
     "recharts": "2.15.4",
     "socket.io-client": "^4.8.1",
-    "sonner": "^2.0.6",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.11"
   },

src/components/player/Playlist.tsx

@@ -19,7 +19,7 @@ export function Playlist({
   onTrackSelect,
   variant = 'normal'
 }: PlaylistProps) {
-  const maxHeight = variant === 'maximized' ? 'max-h-[calc(100vh-200px)]' : 'max-h-60'
+  const maxHeight = variant === 'maximized' ? 'h-[calc(100vh-200px)]' : 'h-60'
 
   return (
     <div className="space-y-2">

src/components/ui/scroll-area.tsx

@@ -1,46 +1,58 @@
+"use client"
+
 import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
-const ScrollArea = React.forwardRef<
+function ScrollArea({
-  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,
+  className,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
+  children,
->(({ className, children, ...props }, ref) => (
+  ...props
-  <ScrollAreaPrimitive.Root
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-    ref={ref}
+  return (
-    className={cn("relative overflow-hidden", className)}
+    <ScrollAreaPrimitive.Root
-    {...props}
+      data-slot="scroll-area"
-  >
+      className={cn("relative", className)}
-    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
+      {...props}
-      {children}
+    >
-    </ScrollAreaPrimitive.Viewport>
+      <ScrollAreaPrimitive.Viewport
-    <ScrollBar />
+        data-slot="scroll-area-viewport"
-    <ScrollAreaPrimitive.Corner />
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-  </ScrollAreaPrimitive.Root>
+      >
-))
+        {children}
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  )
+}
 
-const ScrollBar = React.forwardRef<
+function ScrollBar({
-  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
+  className,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
+  orientation = "vertical",
->(({ className, orientation = "vertical", ...props }, ref) => (
+  ...props
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-    ref={ref}
+  return (
-    orientation={orientation}
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
-    className={cn(
+      data-slot="scroll-area-scrollbar"
-      "flex touch-none select-none transition-colors",
+      orientation={orientation}
-      orientation === "vertical" &&
+      className={cn(
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
+        "flex touch-none p-px transition-colors select-none",
-      orientation === "horizontal" &&
+        orientation === "vertical" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+          "h-full w-2.5 border-l border-l-transparent",
-      className
+        orientation === "horizontal" &&
-    )}
+          "h-2.5 flex-col border-t border-t-transparent",
-    {...props}
+        className
-  >
+      )}
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
+      {...props}
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
+    >
-))
+      <ScrollAreaPrimitive.ScrollAreaThumb
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  )
+}
 
 export { ScrollArea, ScrollBar }