feat: enhance UI responsiveness and volume control

- Updated layout margins for 2xl screens
- Commented out section title in homepage
- Improved volume slider and mute functionality in player
- Adjusted sidebar width for 2xl screens

Signed-off-by: rajput-hemant <[email protected]>

Author: rajput-hemant

src/app/(root)/layout.tsx

@@ -21,7 +21,7 @@ export default async function Layout({ children }: React.PropsWithChildren) {
     <React.Fragment>
       <Navbar />
       <Sidebar user={user} userPlaylists={userPlaylists} />
-      <main className="p-2 pb-24 sm:p-4 sm:pb-24 lg:ml-[20%] lg:pb-10 xl:ml-[15%]">
+      <main className="p-2 pb-24 sm:p-4 sm:pb-24 lg:ml-[20%] lg:pb-10 xl:ml-[15%] 2xl:ml-[12.5%]">
         <SecondaryNavbar />
         {children}
         <SiteFooter />

src/app/(root)/page.tsx

@@ -33,10 +33,10 @@ export default async function HomePage() {
       <div key={key} className="mb-4 space-y-4">
         <header className="border-b pb-2">
           <h1 className="sr-only">{siteConfig.name} Homepage</h1>
-
+          {/* 
           <h2 className="pl-2 font-heading text-2xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-3xl md:text-4xl lg:pl-0">
             {section.title}
-          </h2>
+          </h2> */}
 
           {section.subtitle && (
             <p className="pl-2 font-medium text-muted-foreground lg:pl-0">

src/components/player.tsx

@@ -403,11 +403,20 @@ export function Player({ user, playlists }: PlayerProps) {
           <div className="hidden items-center gap-4 xl:flex">
             <button
               aria-label={muted ? "Unmute" : "Mute"}
-              disabled={!isReady || muted}
-              onClick={() => mute(!muted)}
-              className="disabled:text-muted-foreground"
+              onClick={() => {
+                if (!isReady) return;
+                const newMuted = !muted;
+                mute(newMuted);
+                if (!newMuted && volume === 0) {
+                  setVolume(0.75); // Reset to 75% if unmuting from 0
+                }
+              }}
+              className={cn(
+                "transition-opacity hover:opacity-100",
+                (!isReady || muted) && "text-muted-foreground opacity-50"
+              )}
             >
-              {muted ?
+              {muted || volume === 0 ?
                 <VolumeX />
               : volume < 0.33 ?
                 <Volume />
@@ -418,13 +427,26 @@ export function Player({ user, playlists }: PlayerProps) {
 
             <Slider
               aria-label="Volume"
-              disabled={!isReady || muted}
-              value={[volume * 100]}
+              value={[muted ? 0 : volume * 100]}
               defaultValue={[75]}
-              onValueChange={([volume]) => {
-                setVolume(volume / 100);
+              min={0}
+              max={100}
+              step={1}
+              onValueChange={([value]) => {
+                if (!isReady) return;
+                const newVolume = value / 100;
+                setVolume(newVolume);
+                if (newVolume > 0 && muted) {
+                  mute(false);
+                }
+                if (newVolume === 0 && !muted) {
+                  mute(true);
+                }
               }}
-              className="w-44"
+              className={cn(
+                "w-44 transition-opacity hover:opacity-100",
+                !isReady && "opacity-50"
+              )}
             >
               <SliderTrack className="h-1 cursor-pointer">
                 <SliderRange
@@ -442,7 +464,7 @@ export function Player({ user, playlists }: PlayerProps) {
             </Slider>
 
             <span className="w-8 text-sm font-medium">
-              {(volume * 100).toFixed()}%
+              {muted ? "0" : Math.round(volume * 100)}%
             </span>
           </div>
 

src/components/sidebar.tsx

@@ -24,7 +24,7 @@ export function Sidebar({ user, userPlaylists }: SidebarProps) {
   const [segment] = useSelectedLayoutSegments();
 
   return (
-    <aside className="fixed left-0 top-14 hidden h-full w-1/5 space-y-2 border-r p-4 animate-in slide-in-from-left-full [animation-duration:500ms] lg:block xl:w-[15%]">
+    <aside className="fixed left-0 top-14 hidden h-full w-1/5 space-y-2 border-r p-4 animate-in slide-in-from-left-full [animation-duration:500ms] lg:block xl:w-[15%] 2xl:w-[12.5%]">
       <h3 className="pl-3 font-heading text-xl drop-shadow-md dark:bg-gradient-to-br dark:from-neutral-200 dark:to-neutral-600 dark:bg-clip-text dark:text-transparent sm:text-2xl md:text-3xl">
         Discover
       </h3>