From bb860044dde027e92c6c4ce11480f1a00de5a06f Mon Sep 17 00:00:00 2001
From: ordinarthur <@arthurbarre.js@gmail.com>
Date: Sun, 12 Apr 2026 22:12:57 +0200
Subject: [PATCH] feat: redesign player bar (solid dark bg, seek bar, proper
 nav stacking)

---
 src/components/layout/Layout.tsx    |   2 +-
 src/components/layout/MobileNav.tsx |  10 +--
 src/components/layout/PlayerBar.tsx | 128 +++++++++++++++-------------
 src/index.css                       |  22 +++--
 4 files changed, 91 insertions(+), 71 deletions(-)

diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index ae76c49..b016403 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -13,7 +13,7 @@ export function Layout() {
       <Navbar />
       <div className="flex flex-1">
         <Sidebar />
-        <main className="flex-1 max-w-6xl mx-auto w-full px-4 py-6 pb-24 lg:pb-6" style={{ paddingBottom: current ? '7rem' : undefined }}>
+        <main className="flex-1 max-w-6xl mx-auto w-full px-4 py-6" style={{ paddingBottom: current ? '10rem' : '5rem' }}>
           <Outlet />
         </main>
       </div>
diff --git a/src/components/layout/MobileNav.tsx b/src/components/layout/MobileNav.tsx
index 8b82758..d286e59 100644
--- a/src/components/layout/MobileNav.tsx
+++ b/src/components/layout/MobileNav.tsx
@@ -22,26 +22,24 @@ export function MobileNav() {
 
   return (
     <nav className={cn(
-      'lg:hidden fixed left-0 right-0 z-40 glass border-t border-border/60',
+      'lg:hidden fixed left-0 right-0 z-40 bg-surface border-t border-border',
       current ? 'bottom-[4.75rem]' : 'bottom-0',
     )}>
-      <div className="flex items-center justify-around h-[3.5rem] px-2">
+      <div className="flex items-center justify-around h-[3.25rem] px-2">
         {links.map(({ to, icon: Icon, label }) => (
           <NavLink
             key={to}
             to={to}
             className={({ isActive }) =>
               cn(
-                'flex flex-col items-center gap-0.5 text-[10px] font-semibold transition-all duration-150 px-3 py-1 rounded-xl',
+                'flex flex-col items-center gap-0.5 text-[10px] font-semibold transition-all duration-150 px-3 py-1',
                 isActive ? 'text-primary' : 'text-text-secondary',
               )
             }
           >
             {({ isActive }) => (
               <>
-                <div className={cn('p-1 rounded-xl transition-colors', isActive && 'bg-primary-soft')}>
-                  <Icon size={19} strokeWidth={isActive ? 2.5 : 2} />
-                </div>
+                <Icon size={18} strokeWidth={isActive ? 2.5 : 1.8} />
                 <span>{label}</span>
               </>
             )}
diff --git a/src/components/layout/PlayerBar.tsx b/src/components/layout/PlayerBar.tsx
index 204dc4d..d61de41 100644
--- a/src/components/layout/PlayerBar.tsx
+++ b/src/components/layout/PlayerBar.tsx
@@ -1,3 +1,4 @@
+import { useRef } from 'react'
 import { Play, Pause, Volume2, VolumeX, SkipBack, SkipForward } from 'lucide-react'
 import { usePlayerStore } from '@/stores/player'
 import { formatDuration } from '@/lib/utils'
@@ -5,95 +6,106 @@ import { Avatar } from '@/components/ui/Avatar'
 
 export function PlayerBar() {
   const { current, isPlaying, isExternal, progress, duration, volume, toggle, seek, setVolume } = usePlayerStore()
+  const seekRef = useRef<HTMLDivElement>(null)
 
   if (!current) return null
 
-  return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 glass border-t border-border/60 shadow-[0_-4px_30px_rgba(30,27,51,0.08)]">
-      {/* Progress bar (native audio only) */}
-      {!isExternal && (
-        <div className="relative h-[3px] bg-border-light cursor-pointer group" onClick={(e) => {
-          const rect = e.currentTarget.getBoundingClientRect()
-          const pct = (e.clientX - rect.left) / rect.width
-          seek(pct * duration)
-        }}>
-          <div
-            className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary to-[#7B6AEF] transition-all rounded-full"
-            style={{ width: `${duration ? (progress / duration) * 100 : 0}%` }}
-          />
-          <div
-            className="absolute top-1/2 -translate-y-1/2 w-3 h-3 rounded-full bg-primary shadow-[0_0_0_3px_rgba(91,76,219,0.2)] opacity-0 group-hover:opacity-100 transition-opacity"
-            style={{ left: `${duration ? (progress / duration) * 100 : 0}%`, marginLeft: '-6px' }}
-          />
-        </div>
-      )}
+  const pct = duration ? (progress / duration) * 100 : 0
 
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 h-[4.25rem] flex items-center gap-4">
-        {/* Track info */}
+  function handleSeek(e: React.MouseEvent<HTMLDivElement>) {
+    if (!seekRef.current || isExternal) return
+    const rect = seekRef.current.getBoundingClientRect()
+    const ratio = Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width))
+    seek(ratio * duration)
+  }
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-[#1E1B33] text-white shadow-[0_-2px_20px_rgba(0,0,0,0.3)]">
+      {/* Seek bar — full width, always visible */}
+      <div
+        ref={seekRef}
+        className="relative h-1.5 bg-white/10 cursor-pointer group"
+        onClick={handleSeek}
+      >
+        <div
+          className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary to-[#7B6AEF] rounded-r-full transition-[width] duration-100"
+          style={{ width: `${pct}%` }}
+        />
+        {!isExternal && (
+          <div
+            className="absolute top-1/2 -translate-y-1/2 w-3.5 h-3.5 rounded-full bg-white shadow-[0_0_6px_rgba(91,76,219,0.6)] opacity-0 group-hover:opacity-100 transition-opacity"
+            style={{ left: `${pct}%`, marginLeft: '-7px' }}
+          />
+        )}
+      </div>
+
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 h-[4.5rem] flex items-center gap-3 sm:gap-5">
+        {/* Cover + info */}
         <div className="flex items-center gap-3 min-w-0 flex-1">
           <div className="relative shrink-0">
             {current.cover_url ? (
-              <img src={current.cover_url} alt="" className="w-11 h-11 rounded-xl object-cover shadow-organic-sm" />
+              <img src={current.cover_url} alt="" className="w-12 h-12 rounded-lg object-cover" />
             ) : (
-              <Avatar name={current.title} size="md" className="!rounded-xl" />
+              <Avatar name={current.title} size="md" className="!rounded-lg !w-12 !h-12" />
             )}
             {isPlaying && (
-              <div className="absolute -bottom-0.5 -right-0.5 flex items-end gap-[2px] h-3 p-[2px] bg-surface rounded-md">
-                <div className="wave-bar" /><div className="wave-bar" /><div className="wave-bar" />
+              <div className="absolute -bottom-0.5 -right-0.5 flex items-end gap-[2px] h-3 p-[2px] bg-[#1E1B33] rounded-md">
+                <div className="wave-bar !bg-white/80" /><div className="wave-bar !bg-white/80" /><div className="wave-bar !bg-white/80" />
               </div>
             )}
           </div>
           <div className="min-w-0">
-            <p className="text-[13px] font-semibold truncate">{current.title}</p>
-            <p className="text-[11px] text-text-secondary truncate">{current.creator?.username}</p>
+            <p className="text-[13px] font-semibold truncate text-white">{current.title}</p>
+            <p className="text-[11px] text-white/50 truncate">{current.creator?.username}</p>
           </div>
         </div>
 
         {/* Controls */}
-        <div className="flex items-center gap-2.5">
+        <div className="flex items-center gap-1.5 sm:gap-3">
           {!isExternal && (
-            <button className="text-text-secondary hover:text-primary transition-colors cursor-pointer p-1" onClick={() => seek(Math.max(0, progress - 15))}>
-              <SkipBack size={17} />
+            <button
+              className="hidden sm:flex text-white/50 hover:text-white transition-colors cursor-pointer p-1.5 rounded-full hover:bg-white/10"
+              onClick={() => seek(Math.max(0, progress - 15))}
+            >
+              <SkipBack size={18} />
             </button>
           )}
           <button
             onClick={toggle}
-            className="w-11 h-11 rounded-full bg-gradient-to-br from-primary to-[#7B6AEF] text-white flex items-center justify-center hover:shadow-[0_2px_20px_rgba(91,76,219,0.4)] transition-all active:scale-95 cursor-pointer"
+            className="w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-white text-[#1E1B33] flex items-center justify-center hover:scale-105 transition-transform active:scale-95 cursor-pointer shadow-[0_2px_12px_rgba(255,255,255,0.2)]"
           >
-            {isPlaying ? <Pause size={17} /> : <Play size={17} className="ml-0.5" />}
+            {isPlaying ? <Pause size={18} /> : <Play size={18} className="ml-0.5" />}
           </button>
           {!isExternal && (
-            <button className="text-text-secondary hover:text-primary transition-colors cursor-pointer p-1" onClick={() => seek(Math.min(duration, progress + 15))}>
-              <SkipForward size={17} />
+            <button
+              className="hidden sm:flex text-white/50 hover:text-white transition-colors cursor-pointer p-1.5 rounded-full hover:bg-white/10"
+              onClick={() => seek(Math.min(duration, progress + 15))}
+            >
+              <SkipForward size={18} />
             </button>
           )}
         </div>
 
-        {/* Volume & time */}
+        {/* Time + Volume */}
         <div className="hidden sm:flex items-center gap-3 flex-1 justify-end">
-          {!isExternal ? (
-            <>
-              <span className="text-[11px] text-text-secondary tabular-nums font-medium">
-                {formatDuration(progress)} / {formatDuration(duration)}
-              </span>
-              <button onClick={() => setVolume(volume === 0 ? 0.8 : 0)} className="text-text-secondary hover:text-primary transition-colors cursor-pointer">
-                {volume === 0 ? <VolumeX size={15} /> : <Volume2 size={15} />}
-              </button>
-              <input
-                type="range"
-                min={0}
-                max={1}
-                step={0.01}
-                value={volume}
-                onChange={(e) => setVolume(parseFloat(e.target.value))}
-                className="w-20"
-              />
-            </>
-          ) : (
-            <span className="text-[11px] text-text-secondary font-medium">
-              {duration > 0 && formatDuration(duration)}
-            </span>
-          )}
+          <span className="text-[11px] text-white/40 tabular-nums font-medium min-w-[5rem] text-right">
+            {!isExternal ? `${formatDuration(progress)} / ${formatDuration(duration)}` : duration > 0 ? formatDuration(duration) : ''}
+          </span>
+          <button
+            onClick={() => setVolume(volume === 0 ? 0.8 : 0)}
+            className="text-white/50 hover:text-white transition-colors cursor-pointer p-1 rounded-full hover:bg-white/10"
+          >
+            {volume === 0 ? <VolumeX size={15} /> : <Volume2 size={15} />}
+          </button>
+          <input
+            type="range"
+            min={0}
+            max={1}
+            step={0.01}
+            value={volume}
+            onChange={(e) => setVolume(parseFloat(e.target.value))}
+            className="w-20 accent-white [&::-webkit-slider-thumb]:!bg-white [&::-webkit-slider-thumb]:!shadow-none"
+          />
         </div>
       </div>
     </div>
diff --git a/src/index.css b/src/index.css
index 333b1c4..3f2837a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -91,8 +91,8 @@ h1, h2, h3, h4, h5, h6 {
 input[type="range"] {
   -webkit-appearance: none;
   appearance: none;
-  height: 5px;
-  border-radius: 3px;
+  height: 4px;
+  border-radius: 2px;
   background: var(--color-border);
   outline: none;
 }
@@ -100,8 +100,8 @@ input[type="range"] {
 input[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
-  width: 16px;
-  height: 16px;
+  width: 14px;
+  height: 14px;
   border-radius: 50%;
   background: var(--color-primary);
   box-shadow: 0 0 0 3px rgba(91, 76, 219, 0.2);
@@ -110,8 +110,18 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 input[type="range"]::-webkit-slider-thumb:hover {
-  transform: scale(1.25);
-  box-shadow: 0 0 0 5px rgba(91, 76, 219, 0.15);
+  transform: scale(1.2);
+  box-shadow: 0 0 0 4px rgba(91, 76, 219, 0.15);
+}
+
+/* Player volume slider (dark bg) */
+.bg-\[#1E1B33\] input[type="range"] {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.bg-\[#1E1B33\] input[type="range"]::-webkit-slider-thumb {
+  background: #fff;
+  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
 }
 
 /* Waveform bars animation for active player */