feat: enhance mobile experience with responsive audio player and navigation improvements

.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=35febc5
+NEXT_PUBLIC_COMMIT_SHA=d8a8534

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,9 +356,95 @@ export const AudioPlayer: React.FC = () => {
     return null;
   }
 
-  // Mini player (collapsed state)
+  // Mobile compact mini player :3
+  if (isMobile) {
+    return (
+      <>
+        <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}
+              />
+            </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" />
+      </>
+    );
+  }
+
+  // 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"
@@ -404,14 +492,18 @@ export const AudioPlayer: React.FC = () => {
           </div>
             </div>
           </div>
+        </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)
+  // 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">
@@ -500,8 +592,6 @@ export const AudioPlayer: React.FC = () => {
             </div>
           </div>
         </div>
-      <audio ref={audioRef} hidden />
-      <audio ref={preloadAudioRef} hidden preload="metadata" />
         
         {/* Full Screen Player */}
         <FullScreenPlayer 
@@ -510,5 +600,10 @@ export const AudioPlayer: React.FC = () => {
           onOpenQueue={handleOpenQueue}
         />
       </div>
+      
+      {/* Single audio element - shared across all UI states */}
+      <audio ref={audioRef} hidden />
+      <audio ref={preloadAudioRef} hidden preload="metadata" />
+    </>
   );
 };

app/components/ihateserverside.tsx

@@ -96,7 +96,31 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
       </div>
     );
   }
+  
   return (
+    <>
+      {/* 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>
+
+        {/* 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
@@ -132,12 +156,12 @@ const Ihateserverside: React.FC<IhateserversideProps> = ({ children }) => {
             </div>
           </div>
 
-      {/* Floating Audio Player */}
-      {isStatusBarVisible && (
-        <AudioPlayer />
-      )}
         <Toaster />
       </div>
+      
+      {/* Single Shared Audio Player - shows on all layouts */}
+      <AudioPlayer />
+    </>
   );
 };
 

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,6 +156,69 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
     return (
       <>
       <div className="flex items-center justify-between w-full">
+        {/* 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={{
@@ -279,6 +386,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarMenu>
           </div>
         </Menubar>
+        )}
         
       </div>
 

app/globals.css

@@ -816,33 +816,95 @@
   ---break---
 */
 
-/* 
+/* Mobile-specific optimizations */
+@media (max-width: 767px) {
+  /* Improve touch targets for mobile */
+  button {
+    min-height: 44px;
+    min-width: 44px;
+  }
   
-will delete after the new theme replaces the old one
+  /* Better touch feedback */
-since the new theme already has the sidebar colors defined
+  button:active {
+    transform: scale(0.95);
+    transition: transform 0.1s ease;
+  }
   
-:root {
+  /* Ensure proper viewport behavior */
-  --sidebar: hsl(0 0% 98%);
+  html {
-  --sidebar-foreground: hsl(240 5.3% 26.1%);
+    -webkit-text-size-adjust: 100%;
-  --sidebar-primary: hsl(240 5.9% 10%);
+    -webkit-tap-highlight-color: transparent;
-  --sidebar-primary-foreground: hsl(0 0% 98%);
+  }
-  --sidebar-accent: hsl(240 4.8% 95.9%);
+  
-  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  /* Smooth scrolling for mobile */
-  --sidebar-border: hsl(220 13% 91%);
+  .overflow-y-auto {
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    -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 {
+/* Improved animations */
-  --sidebar: hsl(240 5.9% 10%);
+@keyframes fadeInUp {
-  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  from {
-  --sidebar-primary: hsl(224.3 76.3% 48%);
+    opacity: 0;
-  --sidebar-primary-foreground: hsl(0 0% 100%);
+    transform: translateY(20px);
-  --sidebar-accent: hsl(240 3.7% 15.9%);
+  }
-  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  to {
-  --sidebar-border: hsl(240 3.7% 15.9%);
+    opacity: 1;
-  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+    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---