From 14d5036e8b819beb6eb6e1c0e0fa6c58e62e9cc2 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Fri, 11 Jul 2025 20:47:56 +0000
Subject: [PATCH] feat: enhance mobile experience with responsive audio player
 and navigation improvements

---
 .env.local                         |   2 +-
 app/components/AudioPlayer.tsx     | 357 ++++++++++++++++++-----------
 app/components/ihateserverside.tsx | 102 +++++----
 app/components/menu.tsx            | 156 +++++++++++--
 app/globals.css                    | 110 +++++++--
 5 files changed, 508 insertions(+), 219 deletions(-)

diff --git a/.env.local b/.env.local
index 44eabfd..022b1eb 100644
--- a/.env.local
+++ b/.env.local
@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=35febc5
+NEXT_PUBLIC_COMMIT_SHA=d8a8534
diff --git a/app/components/AudioPlayer.tsx b/app/components/AudioPlayer.tsx
index 74357fb..cbb2a13 100644
--- a/app/components/AudioPlayer.tsx
+++ b/app/components/AudioPlayer.tsx
@@ -10,10 +10,12 @@ import { Progress } from '@/components/ui/progress';
 import { useToast } from '@/hooks/use-toast';
 import { useLastFmScrobbler } from '@/hooks/use-lastfm-scrobbler';
 import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
+import { useIsMobile } from '@/hooks/use-mobile';
 
 export const AudioPlayer: React.FC = () => {
   const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue, toggleShuffle, shuffle, toggleCurrentTrackStar } = useAudioPlayer();
   const router = useRouter();
+  const isMobile = useIsMobile();
   const audioRef = useRef<HTMLAudioElement>(null);
   const preloadAudioRef = useRef<HTMLAudioElement>(null);
   const [progress, setProgress] = useState(0);
@@ -354,109 +356,119 @@ export const AudioPlayer: React.FC = () => {
     return null;
   }
 
-  // Mini player (collapsed state)
-  if (isMinimized) {
+  // Mobile compact mini player :3
+  if (isMobile) {
     return (
-      <div className="fixed bottom-4 left-4 z-50">
-        <div 
-          className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg cursor-pointer hover:scale-[1.02] transition-transform w-80"
-          onClick={() => setIsMinimized(false)}
-        >
-          <div className="flex items-center p-3">
-            <Image 
-              src={currentTrack.coverArt || '/default-user.jpg'} 
-              alt={currentTrack.name} 
-              width={40} 
-              height={40} 
-              className="w-10 h-10 rounded-md shrink-0" 
-            />
-            <div className="flex-1 min-w-0 mx-3">
-              <div className="overflow-hidden">
-                <p className="font-semibold text-sm whitespace-nowrap animate-infinite-scroll">
-                  {currentTrack.name}
-                </p>
-              </div>
-              <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
-            </div>
-            {/* Heart icon for favoriting */}
-            <button 
-              className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors mr-2" 
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCurrentTrackStar();
-              }}
-              title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
-            >
-              <Heart 
-                className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : 'text-gray-400'}`} 
+      <>
+        <div className="fixed bottom-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-t shadow-lg mobile-audio-player mobile-safe-bottom">
+          <div className="px-4 py-3">
+            {/* Progress bar at top for mobile */}
+            <div className="mb-3">
+              <Progress 
+                value={progress} 
+                className="h-1 cursor-pointer progress-mobile" 
+                onClick={handleProgressClick}
               />
-            </button>
-            <div className="flex items-center justify-center space-x-2">
-          <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
-            <FaBackward className="w-3 h-3" />
-          </button>
-          <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
-            {isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
-          </button>
-          <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
-            <FaForward className="w-3 h-3" />
-          </button>
-        </div>
+            </div>
+            
+            <div className="flex items-center justify-between">
+              {/* Track info */}
+              <div 
+                className="flex items-center flex-1 min-w-0 cursor-pointer"
+                onClick={() => setIsFullScreen(true)}
+              >
+                <Image 
+                  src={currentTrack.coverArt || '/default-user.jpg'} 
+                  alt={currentTrack.name} 
+                  width={48} 
+                  height={48} 
+                  className="w-12 h-12 rounded-lg mr-3 shrink-0 shadow-sm" 
+                />
+                <div className="flex-1 min-w-0">
+                  <p className="font-semibold text-sm truncate">{currentTrack.name}</p>
+                  <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
+                </div>
+              </div>
+
+              {/* Mobile controls */}
+              <div className="flex items-center space-x-2">
+                <button 
+                  className="p-3 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95" 
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleCurrentTrackStar();
+                  }}
+                  title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
+                >
+                  <Heart 
+                    className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`} 
+                  />
+                </button>
+                <button 
+                  className="p-3 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95" 
+                  onClick={playPreviousTrack}
+                >
+                  <FaBackward className="w-4 h-4" />
+                </button>
+                <button 
+                  className="p-4 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95 bg-primary/10" 
+                  onClick={togglePlayPause}
+                >
+                  {isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
+                </button>
+                <button 
+                  className="p-3 hover:bg-muted/50 rounded-full transition-all duration-200 active:scale-95" 
+                  onClick={playNextTrack}
+                >
+                  <FaForward className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
           </div>
+          
+          {/* Full Screen Player for mobile */}
+          <FullScreenPlayer 
+            isOpen={isFullScreen} 
+            onClose={() => setIsFullScreen(false)} 
+            onOpenQueue={handleOpenQueue}
+          />
         </div>
+        
+        {/* Single audio element - shared across all UI states */}
         <audio ref={audioRef} hidden />
         <audio ref={preloadAudioRef} hidden preload="metadata" />
-      </div>
+      </>
     );
   }
 
-  // Compact floating player (default state)
-  return (
-    <div className="fixed bottom-4 left-4 right-4 z-50">
-      <div className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg p-3 cursor-pointer hover:scale-[1.01] transition-transform">
-        <div className="flex items-center">
-          {/* Track info */}
-          <div className="flex items-center flex-1 min-w-0">
-            <Image 
-              src={
-                currentTrack.coverArt && 
-                (currentTrack.coverArt.startsWith('http') || currentTrack.coverArt.startsWith('/'))
-                  ? currentTrack.coverArt 
-                  : '/default-user.jpg'
-              } 
-              alt={currentTrack.name} 
-              width={48} 
-              height={48} 
-              className="w-12 h-12 rounded-md mr-4 shrink-0" 
-            />
-            <div className="flex-1 min-w-0">
-              <p className="font-semibold truncate text-base">{currentTrack.name}</p>
-              <p className="text-sm text-muted-foreground truncate">{currentTrack.artist}</p>
-            </div>
-          </div>
-
-          {/* Center section with controls and progress */}
-          <div className="flex flex-col items-center flex-1 justify-center">
-            {/* Control buttons */}  
-            <div className="flex items-center justify-center space-x-3">
-              <button
-                onClick={toggleShuffle} 
-                className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${shuffle ? 'text-primary bg-primary/20' : ''}`} 
-                title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
-              >
-                <FaShuffle className="w-4 h-4" />
-              </button>
-              <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
-                <FaBackward className="w-4 h-4" />
-              </button>
-              <button className="p-3 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
-                {isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
-              </button>
-              <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
-                <FaForward className="w-4 h-4" />
-              </button>
+  // Desktop mini player (collapsed state)
+  if (isMinimized) {
+    return (
+      <>
+        <div className="fixed bottom-4 left-4 z-50">
+          <div 
+            className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg cursor-pointer hover:scale-[1.02] transition-transform w-80"
+            onClick={() => setIsMinimized(false)}
+          >
+            <div className="flex items-center p-3">
+              <Image 
+                src={currentTrack.coverArt || '/default-user.jpg'} 
+                alt={currentTrack.name} 
+                width={40} 
+                height={40} 
+                className="w-10 h-10 rounded-md shrink-0" 
+              />
+              <div className="flex-1 min-w-0 mx-3">
+                <div className="overflow-hidden">
+                  <p className="font-semibold text-sm whitespace-nowrap animate-infinite-scroll">
+                    {currentTrack.name}
+                  </p>
+                </div>
+                <p className="text-xs text-muted-foreground truncate">{currentTrack.artist}</p>
+              </div>
+              {/* Heart icon for favoriting */}
               <button 
-                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors flex items-center justify-center" 
+                className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors mr-2" 
                 onClick={(e) => {
                   e.stopPropagation();
                   toggleCurrentTrackStar();
@@ -464,51 +476,134 @@ export const AudioPlayer: React.FC = () => {
                 title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
               >
                 <Heart 
-                  className={`w-5 h-5 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`} 
+                  className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : 'text-gray-400'}`} 
                 />
               </button>
-            </div>
-            
-            {/* Progress bar */}
-            {/* <div className="flex items-center space-x-2 w-80">
-              <span className="text-xs text-muted-foreground w-8 text-right">
-                {formatTime(audioCurrent?.currentTime ?? 0)}
-              </span>
-              <Progress value={progress} className="flex-1 cursor-pointer h-1" onClick={handleProgressClick}/>
-              <span className="text-xs text-muted-foreground w-8">
-                {formatTime(audioCurrent?.duration ?? 0)}
-              </span>
-            </div> */}
+              <div className="flex items-center justify-center space-x-2">
+            <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
+              <FaBackward className="w-3 h-3" />
+            </button>
+            <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
+              {isPlaying ? <FaPause className="w-4 h-4" /> : <FaPlay className="w-4 h-4" />}
+            </button>
+            <button className="p-1.5 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
+              <FaForward className="w-3 h-3" />
+            </button>
           </div>
-
-          {/* Right side buttons */}
-          <div className="flex items-center justify-end space-x-2 flex-1">
-            <button 
-              className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" 
-              onClick={() => setIsFullScreen(true)}
-              title="Full Screen"
-            >
-              <FaExpand className="w-4 h-4" />
-            </button>
-            <button 
-              className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" 
-              onClick={() => setIsMinimized(true)}
-              title="Minimize"
-            >
-              <FaCompress className="w-4 h-4" />
-            </button>
+            </div>
           </div>
         </div>
+        
+        {/* Single audio element - shared across all UI states */}
+        <audio ref={audioRef} hidden />
+        <audio ref={preloadAudioRef} hidden preload="metadata" />
+      </>
+    );
+  }
+
+  // Desktop compact floating player (default state)
+  return (
+    <>
+      <div className="fixed bottom-4 left-4 right-4 z-50">
+        <div className="bg-background/95 backdrop-blur-xs border rounded-lg shadow-lg p-3 cursor-pointer hover:scale-[1.01] transition-transform">
+          <div className="flex items-center">
+            {/* Track info */}
+            <div className="flex items-center flex-1 min-w-0">
+              <Image 
+                src={
+                  currentTrack.coverArt && 
+                  (currentTrack.coverArt.startsWith('http') || currentTrack.coverArt.startsWith('/'))
+                    ? currentTrack.coverArt 
+                    : '/default-user.jpg'
+                } 
+                alt={currentTrack.name} 
+                width={48} 
+                height={48} 
+                className="w-12 h-12 rounded-md mr-4 shrink-0" 
+              />
+              <div className="flex-1 min-w-0">
+                <p className="font-semibold truncate text-base">{currentTrack.name}</p>
+                <p className="text-sm text-muted-foreground truncate">{currentTrack.artist}</p>
+              </div>
+            </div>
+
+            {/* Center section with controls and progress */}
+            <div className="flex flex-col items-center flex-1 justify-center">
+              {/* Control buttons */}  
+              <div className="flex items-center justify-center space-x-3">
+                <button
+                  onClick={toggleShuffle} 
+                  className={`p-2 hover:bg-gray-700/50 rounded-full transition-colors ${shuffle ? 'text-primary bg-primary/20' : ''}`} 
+                  title={shuffle ? 'Shuffle On - Queue is shuffled' : 'Shuffle Off - Click to shuffle queue'}
+                >
+                  <FaShuffle className="w-4 h-4" />
+                </button>
+                <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playPreviousTrack}>
+                  <FaBackward className="w-4 h-4" />
+                </button>
+                <button className="p-3 hover:bg-gray-700/50 rounded-full transition-colors" onClick={togglePlayPause}>
+                  {isPlaying ? <FaPause className="w-5 h-5" /> : <FaPlay className="w-5 h-5" />}
+                </button>
+                <button className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" onClick={playNextTrack}>
+                  <FaForward className="w-4 h-4" />
+                </button>
+                <button 
+                  className="p-2 hover:bg-gray-700/50 rounded-full transition-colors flex items-center justify-center" 
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    toggleCurrentTrackStar();
+                  }}
+                  title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
+                >
+                  <Heart 
+                    className={`w-5 h-5 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`} 
+                  />
+                </button>
+              </div>
+              
+              {/* Progress bar */}
+              {/* <div className="flex items-center space-x-2 w-80">
+                <span className="text-xs text-muted-foreground w-8 text-right">
+                  {formatTime(audioCurrent?.currentTime ?? 0)}
+                </span>
+                <Progress value={progress} className="flex-1 cursor-pointer h-1" onClick={handleProgressClick}/>
+                <span className="text-xs text-muted-foreground w-8">
+                  {formatTime(audioCurrent?.duration ?? 0)}
+                </span>
+              </div> */}
+            </div>
+
+            {/* Right side buttons */}
+            <div className="flex items-center justify-end space-x-2 flex-1">
+              <button 
+                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" 
+                onClick={() => setIsFullScreen(true)}
+                title="Full Screen"
+              >
+                <FaExpand className="w-4 h-4" />
+              </button>
+              <button 
+                className="p-2 hover:bg-gray-700/50 rounded-full transition-colors" 
+                onClick={() => setIsMinimized(true)}
+                title="Minimize"
+              >
+                <FaCompress className="w-4 h-4" />
+              </button>
+            </div>
+          </div>
+        </div>
+        
+        {/* Full Screen Player */}
+        <FullScreenPlayer 
+          isOpen={isFullScreen} 
+          onClose={() => setIsFullScreen(false)} 
+          onOpenQueue={handleOpenQueue}
+        />
       </div>
+      
+      {/* Single audio element - shared across all UI states */}
       <audio ref={audioRef} hidden />
       <audio ref={preloadAudioRef} hidden preload="metadata" />
-      
-      {/* Full Screen Player */}
-      <FullScreenPlayer 
-        isOpen={isFullScreen} 
-        onClose={() => setIsFullScreen(false)} 
-        onOpenQueue={handleOpenQueue}
-      />
-    </div>
+    </>
   );
 };
\ No newline at end of file
diff --git a/app/components/ihateserverside.tsx b/app/components/ihateserverside.tsx
index 04fc6c0..df3de1d 100644
--- a/app/components/ihateserverside.tsx
+++ b/app/components/ihateserverside.tsx
@@ -96,48 +96,72 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
       </div>
     );
   }
+  
   return (
-    <div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
-      {/* Top Menu */}
-      <div
-        className="sticky z-10 bg-background border-b w-full"
-        style={{
-          left: 'env(titlebar-area-x, 0)',
-          top: 'env(titlebar-area-y, 0)',
-        }}
-      >
-        <Menu
-          toggleSidebar={toggleSidebarVisibility}
-          isSidebarVisible={isSidebarVisible}
-          toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
-          isStatusBarVisible={isStatusBarVisible}
-        />
-      </div>
-
-      {/* Main Content Area */}
-        <div className="flex-1 flex overflow-hidden w-full">
-          {isSidebarVisible && (
-            <div className="w-16 shrink-0 border-r transition-all duration-200">
-              <Sidebar
-                playlists={playlists}
-                className="h-full overflow-y-auto"
-                visible={isSidebarVisible}
-                favoriteAlbums={favoriteAlbums}
-                onRemoveFavoriteAlbum={removeFavoriteAlbum}
-              />
-            </div>
-          )}
-          <div className="flex-1 overflow-y-auto min-w-0">
-            <div>{children}</div>
-          </div>
+    <>
+      {/* Mobile Layout */}
+      <div className="flex md:hidden flex-col h-screen w-screen overflow-hidden">
+        {/* Top Menu */}
+        <div className="shrink-0 bg-background border-b w-full">
+          <Menu
+            toggleSidebar={toggleSidebarVisibility}
+            isSidebarVisible={isSidebarVisible}
+            toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
+            isStatusBarVisible={isStatusBarVisible}
+          />
         </div>
 
-      {/* Floating Audio Player */}
-      {isStatusBarVisible && (
-        <AudioPlayer />
-      )}
-      <Toaster />
-    </div>
+        {/* Main Content Area with bottom padding for audio player */}
+        <div className="flex-1 overflow-y-auto pb-24">
+          <div>{children}</div>
+        </div>
+
+        {/* Mobile Audio Player - always visible on mobile */}
+        <Toaster />
+      </div>
+
+      {/* Desktop Layout */}
+      <div className="hidden md:flex md:flex-col md:h-screen md:w-screen md:overflow-hidden">
+        {/* Top Menu */}
+        <div
+          className="sticky z-10 bg-background border-b w-full"
+          style={{
+            left: 'env(titlebar-area-x, 0)',
+            top: 'env(titlebar-area-y, 0)',
+          }}
+        >
+          <Menu
+            toggleSidebar={toggleSidebarVisibility}
+            isSidebarVisible={isSidebarVisible}
+            toggleStatusBar={() => setIsStatusBarVisible(!isStatusBarVisible)}
+            isStatusBarVisible={isStatusBarVisible}
+          />
+        </div>
+
+        {/* Main Content Area */}
+          <div className="flex-1 flex overflow-hidden w-full">
+            {isSidebarVisible && (
+              <div className="w-16 shrink-0 border-r transition-all duration-200">
+                <Sidebar
+                  playlists={playlists}
+                  className="h-full overflow-y-auto"
+                  visible={isSidebarVisible}
+                  favoriteAlbums={favoriteAlbums}
+                  onRemoveFavoriteAlbum={removeFavoriteAlbum}
+                />
+              </div>
+            )}
+            <div className="flex-1 overflow-y-auto min-w-0">
+              <div>{children}</div>
+            </div>
+          </div>
+
+        <Toaster />
+      </div>
+      
+      {/* Single Shared Audio Player - shows on all layouts */}
+      <AudioPlayer />
+    </>
   );
 };
 
diff --git a/app/components/menu.tsx b/app/components/menu.tsx
index 995a0b7..e8fab84 100644
--- a/app/components/menu.tsx
+++ b/app/components/menu.tsx
@@ -1,7 +1,7 @@
 import { useCallback } from "react";
 import { useRouter } from 'next/navigation';
 import Image from "next/image";
-import { Github, Mail } from "lucide-react"
+import { Github, Mail, Menu as MenuIcon, X } from "lucide-react"
 import {
     Menubar,
     MenubarCheckboxItem,
@@ -28,9 +28,35 @@ import {
     DialogHeader,
     DialogTitle,
     DialogTrigger,
-  } from "@/components/ui/dialog"
+} from "@/components/ui/dialog"
+import {
+    Drawer,
+    DrawerClose,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger,
+} from "@/components/ui/drawer"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
+import { useIsMobile } from "@/hooks/use-mobile"
+import Link from "next/link"
+import { 
+  Search,
+  Home,
+  List,
+  Radio,
+  Users,
+  Disc,
+  Music,
+  Heart,
+  Grid3X3,
+  Clock,
+  Settings,
+  Circle
+} from "lucide-react";
 
 interface MenuProps {
   toggleSidebar: () => void;
@@ -43,9 +69,27 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
     const [isFullScreen, setIsFullScreen] = useState(false)
     const router = useRouter();
     const [open, setOpen] = useState(false);
+    const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
     const { isConnected } = useNavidrome();
     const [isClient, setIsClient] = useState(false);
     const [navidromeUrl, setNavidromeUrl] = useState<string | null>(null);
+    const isMobile = useIsMobile();
+
+    // Navigation items for mobile menu
+    const navigationItems = [
+      { href: '/', label: 'Home', icon: Home },
+      { href: '/search', label: 'Search', icon: Search },
+      { href: '/library/albums', label: 'Albums', icon: Disc },
+      { href: '/library/artists', label: 'Artists', icon: Users },
+      { href: '/library/songs', label: 'Songs', icon: Circle },
+      { href: '/library/playlists', label: 'Playlists', icon: Music },
+      { href: '/favorites', label: 'Favorites', icon: Heart },
+      { href: '/queue', label: 'Queue', icon: List },
+      { href: '/radio', label: 'Radio', icon: Radio },
+      { href: '/browse', label: 'Browse', icon: Grid3X3 },
+      { href: '/history', label: 'History', icon: Clock },
+      { href: '/settings', label: 'Settings', icon: Settings },
+    ];
 
     // For this demo, we'll show connection status instead of user auth
     const connectionStatus = isConnected ? "Connected to Navidrome" : "Not connected";
@@ -112,28 +156,91 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
     return (
       <>
       <div className="flex items-center justify-between w-full">
-        <Menubar
-          className="rounded-none border-b border-none px-2 lg:px-2 flex-1 min-w-0"
-          style={{
-            minWidth: 0,
-            WebkitAppRegion: "drag"
-          } as React.CSSProperties}
-        >
-        <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties} className="flex items-center gap-2">
-        <MenubarMenu>
-        <MenubarTrigger className="font-bold">mice</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem onClick={() => router.push('/settings')}>
-            Preferences <MenubarShortcut>⌘,</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem onClick={() => isClient && window.close()}>
-            Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-          </MenubarMenu>
+        {/* Mobile Navigation */}
+        {isMobile ? (
+          <div className="flex items-center justify-between w-full p-2">
+            <div className="flex items-center gap-2">
+              <Drawer open={mobileMenuOpen} onOpenChange={setMobileMenuOpen}>
+                <DrawerTrigger asChild>
+                  <Button variant="ghost" size="sm" className="p-2">
+                    <MenuIcon className="h-5 w-5" />
+                  </Button>
+                </DrawerTrigger>
+                <DrawerContent>
+                  <DrawerHeader>
+                    <DrawerTitle className="flex items-center gap-2">
+                      <Image src="/icon-192.png" alt="mice" width={24} height={24} className="rounded" />
+                      mice
+                    </DrawerTitle>
+                    <DrawerDescription>
+                      Navigate through your music library
+                    </DrawerDescription>
+                  </DrawerHeader>
+                  <div className="px-4 pb-6">
+                    <div className="grid gap-2">
+                      {navigationItems.map((item) => (
+                        <Link key={item.href} href={item.href}>
+                          <DrawerClose asChild>
+                            <Button 
+                              variant="ghost" 
+                              className="w-full justify-start gap-3 h-12"
+                              onClick={() => setMobileMenuOpen(false)}
+                            >
+                              <item.icon className="h-5 w-5" />
+                              {item.label}
+                            </Button>
+                          </DrawerClose>
+                        </Link>
+                      ))}
+                    </div>
+                  </div>
+                </DrawerContent>
+              </Drawer>
+              <h1 className="font-bold text-lg">mice</h1>
+            </div>
+            <div className="flex items-center gap-2">
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={() => router.push('/search')}
+                className="p-2"
+              >
+                <Search className="h-5 w-5" />
+              </Button>
+              <Button 
+                variant="ghost" 
+                size="sm" 
+                onClick={() => setOpen(true)}
+                className="p-2"
+              >
+                <Settings className="h-5 w-5" />
+              </Button>
+            </div>
+          </div>
+        ) : (
+          /* Desktop Navigation */
+          <Menubar
+            className="rounded-none border-b border-none px-2 lg:px-2 flex-1 min-w-0"
+            style={{
+              minWidth: 0,
+              WebkitAppRegion: "drag"
+            } as React.CSSProperties}
+          >
+          <div style={{ WebkitAppRegion: "no-drag" } as React.CSSProperties} className="flex items-center gap-2">
+          <MenubarMenu>
+          <MenubarTrigger className="font-bold">mice</MenubarTrigger>
+          <MenubarContent>
+            <MenubarItem onClick={() => setOpen(true)}>About Music</MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem onClick={() => router.push('/settings')}>
+              Preferences <MenubarShortcut>⌘,</MenubarShortcut>
+            </MenubarItem>
+            <MenubarSeparator />
+            <MenubarItem onClick={() => isClient && window.close()}>
+              Quit Music <MenubarShortcut>⌘Q</MenubarShortcut>
+            </MenubarItem>
+          </MenubarContent>
+            </MenubarMenu>
           <MenubarMenu>
         <MenubarTrigger className="relative">File</MenubarTrigger>
         <MenubarContent>
@@ -279,6 +386,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarMenu>
           </div>
         </Menubar>
+        )}
         
       </div>
 
diff --git a/app/globals.css b/app/globals.css
index d0ebb2b..eb58d54 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -816,33 +816,95 @@
   ---break---
 */
 
-/* 
-
-will delete after the new theme replaces the old one
-since the new theme already has the sidebar colors defined
-
-:root {
-  --sidebar: hsl(0 0% 98%);
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
-  --sidebar-primary: hsl(240 5.9% 10%);
-  --sidebar-primary-foreground: hsl(0 0% 98%);
-  --sidebar-accent: hsl(240 4.8% 95.9%);
-  --sidebar-accent-foreground: hsl(240 5.9% 10%);
-  --sidebar-border: hsl(220 13% 91%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+/* Mobile-specific optimizations */
+@media (max-width: 767px) {
+  /* Improve touch targets for mobile */
+  button {
+    min-height: 44px;
+    min-width: 44px;
+  }
+  
+  /* Better touch feedback */
+  button:active {
+    transform: scale(0.95);
+    transition: transform 0.1s ease;
+  }
+  
+  /* Ensure proper viewport behavior */
+  html {
+    -webkit-text-size-adjust: 100%;
+    -webkit-tap-highlight-color: transparent;
+  }
+  
+  /* Smooth scrolling for mobile */
+  .overflow-y-auto {
+    -webkit-overflow-scrolling: touch;
+  }
+  
+  /* Mobile audio player specific */
+  .mobile-audio-player {
+    backdrop-filter: blur(20px);
+    -webkit-backdrop-filter: blur(20px);
+  }
+  
+  /* Prevent horizontal scroll */
+  body {
+    overflow-x: hidden;
+  }
 }
 
+/* Better focus states for accessibility */
+button:focus-visible {
+  outline: 2px solid hsl(var(--primary));
+  outline-offset: 2px;
+}
 
-.dark {
-  --sidebar: hsl(240 5.9% 10%);
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-primary: hsl(224.3 76.3% 48%);
-  --sidebar-primary-foreground: hsl(0 0% 100%);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
-  --sidebar-border: hsl(240 3.7% 15.9%);
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
-} */
+/* Improved animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.3s ease-out;
+}
+
+/* Safe area insets for mobile devices */
+@supports (padding: max(0px)) {
+  .mobile-safe-bottom {
+    padding-bottom: max(1rem, env(safe-area-inset-bottom));
+  }
+  
+  .mobile-safe-top {
+    padding-top: max(0.5rem, env(safe-area-inset-top));
+  }
+}
+
+/* Progress bar improvements for mobile */
+@media (max-width: 767px) {
+  .progress-mobile {
+    height: 3px;
+    cursor: pointer;
+    -webkit-appearance: none;
+    touch-action: manipulation;
+  }
+  
+  .progress-mobile::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: hsl(var(--primary));
+    cursor: pointer;
+    margin-top: -6px;
+  }
+}
 
 /*
   ---break---