feat: Add page transition animations and notification settings for audio playback

.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=0a0feb3
+NEXT_PUBLIC_COMMIT_SHA=3839a1b

app/components/AudioPlayer.tsx

@@ -31,6 +31,8 @@ export const AudioPlayer: React.FC = () => {
   const [volume, setVolume] = useState(1);
   const [isClient, setIsClient] = useState(false);
   const [isMinimized, setIsMinimized] = useState(false);
+  // Notifications and title management
+  const [lastNotifiedTrackId, setLastNotifiedTrackId] = useState<string | null>(null);
   const [isFullScreen, setIsFullScreen] = useState(false);
   const [audioInitialized, setAudioInitialized] = useState(false);
   const audioCurrent = audioRef.current;
@@ -442,6 +444,48 @@ export const AudioPlayer: React.FC = () => {
     };
   }, [playNextTrack, currentTrack, onTrackProgress, onTrackEnd, onTrackPlay, onTrackPause]);
 
+  // Update document title and optionally show a notification when a new song starts
+  useEffect(() => {
+    if (!isClient) return;
+    if (currentTrack) {
+      // Update favicon/title like Spotify
+      const baseTitle = `${currentTrack.name} • ${currentTrack.artist} – mice`;
+      document.title = isPlaying ? baseTitle : `(Paused) ${baseTitle}`;
+
+      // Notifications
+      const notifyEnabled = localStorage.getItem('playback-notifications-enabled') === 'true';
+      const canNotify = 'Notification' in window && Notification.permission !== 'denied';
+      if (notifyEnabled && canNotify && lastNotifiedTrackId !== currentTrack.id) {
+        try {
+          if (Notification.permission === 'default') {
+            Notification.requestPermission().then((perm) => {
+              if (perm === 'granted') {
+                new Notification('Now Playing', {
+                  body: `${currentTrack.name} — ${currentTrack.artist}`,
+                  icon: currentTrack.coverArt || '/icon-192.png',
+                  badge: '/icon-192.png',
+                });
+                setLastNotifiedTrackId(currentTrack.id);
+              }
+            });
+          } else if (Notification.permission === 'granted') {
+            new Notification('Now Playing', {
+              body: `${currentTrack.name} — ${currentTrack.artist}`,
+              icon: currentTrack.coverArt || '/icon-192.png',
+              badge: '/icon-192.png',
+            });
+            setLastNotifiedTrackId(currentTrack.id);
+          }
+        } catch (e) {
+          console.warn('Notification failed:', e);
+        }
+      }
+    } else {
+      // Reset title when no track
+      document.title = 'mice';
+    }
+  }, [currentTrack?.id, currentTrack?.name, currentTrack?.artist, isPlaying, isClient]);
+
   // Media Session API integration - Enhanced for mobile
   useEffect(() => {
     if (!isClient || !currentTrack) return;

app/components/FullScreenPlayer.tsx

@@ -1,6 +1,7 @@
-'use client';
+"use client";
 
 import React, { useEffect, useRef, useState } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
@@ -410,15 +411,23 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     return `${mins}:${secs.toString().padStart(2, '0')}`;
   };
 
-  if (!isOpen || !currentTrack) return null;
+  if (!currentTrack) return null;
 
   return (
-    <div className="fixed inset-0 z-[70] bg-black overflow-hidden">
+    <AnimatePresence>
+      {isOpen && (
+      <motion.div
+        className="fixed inset-0 z-[70] bg-black overflow-hidden"
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2, ease: 'easeInOut' }}
+      >
       {/* Enhanced Blurred background image */}
       {currentTrack.coverArt && (
-        <div className="absolute inset-0 w-full h-full">
+        <motion.div className="absolute inset-0 w-full h-full" initial={{ scale: 1.02 }} animate={{ scale: 1.08 }} transition={{ duration: 10, ease: 'linear' }}>
           {/* Main background */}
-          <div 
+          <motion.div 
             className="absolute inset-0 w-full h-full"
             style={{
               backgroundImage: `url(${currentTrack.coverArt})`,
@@ -428,9 +437,12 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
               filter: 'blur(20px) brightness(0.3)',
               transform: 'scale(1.1)',
             }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.3 }}
           />
           {/* Top gradient blur for mobile */}
-          <div 
+          <motion.div 
             className="absolute top-0 left-0 right-0 h-32"
             style={{
               background: `linear-gradient(to bottom, 
@@ -439,9 +451,12 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                 transparent 100%)`,
               backdropFilter: 'blur(10px)',
             }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.25 }}
           />
           {/* Bottom gradient blur for mobile */}
-          <div 
+          <motion.div 
             className="absolute bottom-0 left-0 right-0 h-32"
             style={{
               background: `linear-gradient(to top, 
@@ -450,31 +465,34 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                 transparent 100%)`,
               backdropFilter: 'blur(10px)',
             }}
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ duration: 0.25 }}
           />
-        </div>
+        </motion.div>
       )}
       
       {/* Overlay for better contrast */}
-      <div className="absolute inset-0 bg-black/30" />
+      <motion.div className="absolute inset-0 bg-black/30" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} />
       
-      <div className="relative h-full w-full flex flex-col">
+      <motion.div className="relative h-full w-full flex flex-col" initial={{ y: 10, opacity: 0 }} animate={{ y: 0, opacity: 1 }} exit={{ y: 10, opacity: 0 }} transition={{ duration: 0.2, ease: 'easeOut' }}>
         
         {/* Mobile Close Handle */}
         {isMobile && (
-          <div className="flex justify-center py-4 px-4">
+          <motion.div className="flex justify-center py-4 px-4" initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.2 }}>
             <div 
               onClick={onClose}
               className="cursor-pointer px-8 py-3 -mx-8 -my-3"
               style={{ touchAction: 'manipulation' }}
             >
-              <div className="w-8 h-1 bg-gray-300 rounded-full opacity-60" />
+              <motion.div className="w-8 h-1 bg-gray-300 rounded-full opacity-60" initial={{ scaleX: 0.9 }} animate={{ scaleX: 1 }} transition={{ duration: 0.3 }} />
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* Desktop Header */}
         {!isMobile && (
-          <div className="absolute top-0 right-0 z-10 p-4 lg:p-6">
+          <motion.div className="absolute top-0 right-0 z-10 p-4 lg:p-6" initial={{ opacity: 0, y: -6 }} animate={{ opacity: 1, y: 0 }} transition={{ duration: 0.2 }}>
             <div className="flex items-center gap-2">
               {onOpenQueue && (
                 <button 
@@ -493,7 +511,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                 <FaXmark className="w-5 h-5" />
               </button>
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* Main Content */}
@@ -502,8 +520,9 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             /* Mobile Tab Content */
             <div className="h-full flex flex-col">
               <div className="flex-1 overflow-hidden">
+                <AnimatePresence mode="wait" initial={false}>
                 {activeTab === 'player' && (
-                  <div className="h-full flex flex-col justify-center items-center px-8 py-4">
+                  <motion.div key="tab-player" className="h-full flex flex-col justify-center items-center px-8 py-4" initial={{ x: 20, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: -20, opacity: 0 }} transition={{ duration: 0.2 }}>
                     {/* Mobile Album Art */}
                     <div className="relative mb-6 shrink-0">
                       <Image
@@ -621,11 +640,11 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                         />
                       </div>
                     )}
-                  </div>
+                  </motion.div>
                 )}
 
                 {activeTab === 'lyrics' && lyrics.length > 0 && (
-                  <div className="h-full flex flex-col px-4">
+                  <motion.div key="tab-lyrics" className="h-full flex flex-col px-4" initial={{ x: 20, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: -20, opacity: 0 }} transition={{ duration: 0.2 }}>
                     <div 
                       className="flex-1 overflow-y-auto"
                       ref={lyricsRef}
@@ -657,11 +676,11 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                         <div style={{ height: '200px' }} />
                       </div>
                     </div>
-                  </div>
+                  </motion.div>
                 )}
 
                 {activeTab === 'queue' && (
-                  <div className="h-full flex flex-col px-4">
+                  <motion.div key="tab-queue" className="h-full flex flex-col px-4" initial={{ x: 20, opacity: 0 }} animate={{ x: 0, opacity: 1 }} exit={{ x: -20, opacity: 0 }} transition={{ duration: 0.2 }}>
                     <ScrollArea className="flex-1">
                       <div className="space-y-2 py-4">
                         {queue.map((track, index) => (
@@ -690,8 +709,9 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                         ))}
                       </div>
                     </ScrollArea>
-                  </div>
+                  </motion.div>
                 )}
+                </AnimatePresence>
               </div>
 
               {/* Mobile Tab Bar */}
@@ -857,8 +877,14 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
               </div>
 
               {/* Right Side - Lyrics (Desktop Only) */}
+              <AnimatePresence initial={false}>
               {showLyrics && lyrics.length > 0 && (
-                <div className="flex-1 min-w-0 min-h-0 flex flex-col" ref={lyricsRef}>
+                <motion.div className="flex-1 min-w-0 min-h-0 flex flex-col" ref={lyricsRef}
+                  initial={{ x: 30, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  exit={{ x: 30, opacity: 0 }}
+                  transition={{ duration: 0.2 }}
+                >
                   <div className="h-full flex flex-col">
                     <ScrollArea className="flex-1 min-h-0">
                       <div className="space-y-3 pl-4 pr-4 py-4">
@@ -890,12 +916,15 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                       </div>
                     </ScrollArea>
                   </div>
-                </div>
+                </motion.div>
               )}
+              </AnimatePresence>
             </div>
           )}
         </div>
-      </div>
+      </motion.div>
-    </div>
+  </motion.div>
+  )}
+    </AnimatePresence>
   );
 };

app/components/PageTransition.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import React from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { usePathname } from "next/navigation";
+
+export default function PageTransition({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  return (
+    <AnimatePresence mode="wait" initial={false}>
+      <motion.div
+        key={pathname}
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.18, ease: "easeInOut" }}
+        className="contents"
+      >
+        {children}
+      </motion.div>
+    </AnimatePresence>
+  );
+}

app/components/RootLayoutClient.tsx

@@ -13,6 +13,7 @@ import ThemeColorHandler from "./ThemeColorHandler";
 import { useViewportThemeColor } from "@/hooks/use-viewport-theme-color";
 import { LoginForm } from "./start-screen";
 import Image from "next/image";
+import PageTransition from "./PageTransition";
 
 // Service Worker registration
 if (typeof window !== 'undefined' && 'serviceWorker' in navigator) {
@@ -102,7 +103,7 @@ export default function RootLayoutClient({ children }: { children: React.ReactNo
             <NavidromeErrorBoundary>
               <AudioPlayerProvider>
                 <Ihateserverside>
-                  {children}
+                  <PageTransition>{children}</PageTransition>
                 </Ihateserverside>
                 <WhatsNewPopup />
               </AudioPlayerProvider>

app/components/album-artwork.tsx

@@ -72,6 +72,17 @@ export function AlbumArtwork({
     router.push(`/album/${album.id}`);
   };
 
+  const handlePrefetch = () => {
+    try {
+      // Next.js App Router will prefetch on hover when using Link with prefetch
+      // but we also call router.prefetch to ensure programmatic prefetch.
+      // @ts-ignore - prefetch exists in next/navigation router in app router
+      if (router && typeof (router as any).prefetch === 'function') {
+        (router as any).prefetch(`/album/${album.id}`);
+      }
+    } catch {}
+  };
+
   const handleAddToQueue = () => {
     addAlbumToQueue(album.id);
   };
@@ -129,7 +140,7 @@ export function AlbumArtwork({
     <div className={cn("space-y-3", className)} {...props}>
       <ContextMenu>
         <ContextMenuTrigger>
-          <Card key={album.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()}>
+          <Card key={album.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()} onMouseEnter={handlePrefetch} onFocus={handlePrefetch}>
             <div className="aspect-square relative group">
               {album.coverArt && api && !offline.isOfflineMode ? (
                 <Image
@@ -163,7 +174,9 @@ export function AlbumArtwork({
               </div>
             </div>
             <CardContent className="p-4">
-              <h3 className="font-semibold truncate">{album.name}</h3>
+              <h3 className="font-semibold truncate">
+                <Link href={`/album/${album.id}`} prefetch>{album.name}</Link>
+              </h3>
               <p className="text-sm text-muted-foreground truncate " onClick={() => router.push(album.artistId)}>{album.artist}</p>
               <p className="text-xs text-muted-foreground mt-1">
                 {album.songCount} songs • {Math.floor(album.duration / 60)} min

app/settings/page.tsx

@@ -17,6 +17,7 @@ import { CacheManagement } from '@/app/components/CacheManagement';
 import { OfflineManagement } from '@/app/components/OfflineManagement';
 import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
 import { Settings, ExternalLink } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
 
 const SettingsPage = () => {
     const { theme, setTheme, mode, setMode } = useTheme();
@@ -59,6 +60,7 @@ const SettingsPage = () => {
     // Sidebar settings
     const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
     const [sidebarVisible, setSidebarVisible] = useState(true);
+    const [notifyNowPlaying, setNotifyNowPlaying] = useState(false);
 
     // Initialize client-side state after hydration
     useEffect(() => {
@@ -94,6 +96,12 @@ const SettingsPage = () => {
             setSidebarVisible(true); // Default to visible
         }
 
+        // Notifications preference
+        const savedNotify = localStorage.getItem('playback-notifications-enabled');
+        if (savedNotify !== null) {
+            setNotifyNowPlaying(savedNotify === 'true');
+        }
+
         // Load Last.fm credentials
         const storedCredentials = localStorage.getItem('lastfm-credentials');
         if (storedCredentials) {
@@ -264,6 +272,43 @@ const SettingsPage = () => {
         }
     };
 
+    const handleNotifyToggle = async (enabled: boolean) => {
+        setNotifyNowPlaying(enabled);
+        if (isClient) {
+            localStorage.setItem('playback-notifications-enabled', enabled.toString());
+        }
+        if (enabled && typeof window !== 'undefined' && 'Notification' in window) {
+            try {
+                if (Notification.permission === 'default') {
+                    await Notification.requestPermission();
+                }
+            } catch {}
+        }
+        toast({
+            title: enabled ? 'Notifications Enabled' : 'Notifications Disabled',
+            description: enabled ? 'You will be notified when a new song starts.' : 'Now playing notifications are off.',
+        });
+    };
+
+    const handleTestNotification = () => {
+        if (typeof window === 'undefined') return;
+        if (!('Notification' in window)) {
+            toast({ title: 'Not supported', description: 'Browser does not support notifications.', variant: 'destructive' });
+            return;
+        }
+        if (Notification.permission === 'denied') {
+            toast({ title: 'Permission denied', description: 'Enable notifications in your browser settings.', variant: 'destructive' });
+            return;
+        }
+        const title = 'mice – Test Notification';
+        const body = 'This is how a now playing notification will look.';
+        try {
+            new Notification(title, { body, icon: '/icon-192.png', badge: '/icon-192.png' });
+        } catch {
+            toast({ title: 'Test Notification', description: body });
+        }
+    };
+
     const handleLastFmAuth = () => {
         if (!lastFmCredentials.apiKey) {
             toast({
@@ -470,6 +515,29 @@ const SettingsPage = () => {
                     </Card>
                 )}
 
+                {/* Notifications */}
+                <Card className="mb-6 break-inside-avoid py-5">
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <Settings className="w-5 h-5" />
+                            Notifications
+                        </CardTitle>
+                        <CardDescription>Control now playing notifications</CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-4">
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <p className="font-medium">Now playing notifications</p>
+                                <p className="text-sm text-muted-foreground">Show a notification when a new song starts</p>
+                            </div>
+                            <Switch checked={notifyNowPlaying} onCheckedChange={handleNotifyToggle} />
+                        </div>
+                        <div className="flex gap-2">
+                            <Button variant="outline" size="sm" onClick={handleTestNotification}>Test notification</Button>
+                        </div>
+                    </CardContent>
+                </Card>
+
                 <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle className="flex items-center gap-2">

package.json

@@ -50,6 +50,7 @@
     "colorthief": "^2.6.0",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^11.18.2",
     "input-otp": "^1.4.2",
     "lucide-react": "^0.525.0",
     "next": "15.4.4",
@@ -75,7 +76,6 @@
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "chalk": "^5.3.0",
-    "eslint": "^9.31",
     "eslint": "^9.32",
     "eslint-config-next": "15.4.5",
     "postcss": "^8",

pnpm-lock.yaml

@@ -132,6 +132,9 @@ importers:
       embla-carousel-react:
         specifier: ^8.6.0
         version: 8.6.0(react@19.1.0)
+      framer-motion:
+        specifier: ^11.18.2
+        version: 11.18.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
       input-otp:
         specifier: ^1.4.2
         version: 1.4.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
@@ -2313,6 +2316,20 @@ packages:
     resolution: {integrity: sha512-KrGhL9Q4zjj0kiUt5OO4Mr/A/jlI2jDYs5eHBpYHPcBEVSiipAvn2Ko2HnPe20rmcuuvMHNdZFp+4IlGTMF0Ow==}
     engines: {node: '>= 6'}
 
+  framer-motion@11.18.2:
+    resolution: {integrity: sha512-5F5Och7wrvtLVElIpclDT0CBzMVg3dL22B64aZwHtsIY8RB4mXICLrkajK4G9R+ieSAGcgrLeae2SeUTg2pr6w==}
+    peerDependencies:
+      '@emotion/is-prop-valid': '*'
+      react: ^18.0.0 || ^19.0.0
+      react-dom: ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      '@emotion/is-prop-valid':
+        optional: true
+      react:
+        optional: true
+      react-dom:
+        optional: true
+
   function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
 
@@ -2724,6 +2741,12 @@ packages:
     engines: {node: '>=10'}
     hasBin: true
 
+  motion-dom@11.18.1:
+    resolution: {integrity: sha512-g76KvA001z+atjfxczdRtw/RXOM3OMSdd1f4DL77qCTF/+avrRJiawSG4yDibEQ215sr9kpinSlX2pCTJ9zbhw==}
+
+  motion-utils@11.18.1:
+    resolution: {integrity: sha512-49Kt+HKjtbJKLtgO/LKj9Ld+6vw9BjH5d9sc40R/kVyH8GLAXgT42M2NnuPcJNuA3s9ZfZBUcwIgpmZWGEE+hA==}
+
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
@@ -5526,6 +5549,15 @@ snapshots:
       hasown: 2.0.2
       mime-types: 2.1.35
 
+  framer-motion@11.18.2(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
+    dependencies:
+      motion-dom: 11.18.1
+      motion-utils: 11.18.1
+      tslib: 2.8.1
+    optionalDependencies:
+      react: 19.1.0
+      react-dom: 19.1.0(react@19.1.0)
+
   function-bind@1.1.2: {}
 
   function.prototype.name@1.1.8:
@@ -5908,6 +5940,12 @@ snapshots:
 
   mkdirp@3.0.1: {}
 
+  motion-dom@11.18.1:
+    dependencies:
+      motion-utils: 11.18.1
+
+  motion-utils@11.18.1: {}
+
   ms@2.1.3: {}
 
   nanoid@3.3.11: {}