docs: add CHANGELOG and commit rewriting script

Library/Songs improvements:
- Added pagination with 50 songs per page
- Added Previous/Next navigation buttons
- Updated header to show current page range (e.g., 'Showing 1-50 of 247 songs')
- Track numbers now reflect global position across all pages
- Page resets to 1 when search/sort filters change
- Imported ChevronLeft and ChevronRight icons for navigation

Listening Streak removal:
- Removed CompactListeningStreak component from home page
- Removed ListeningStreakCard component from history page
- Removed listening streak imports from both pages
- Cleaned up empty comment sections

The songs page now handles large libraries more efficiently with pagination,
and the UI is cleaner without the listening streak cards.

.env.docker

@@ -11,10 +11,6 @@ PORT=3000
 # NAVIDROME_USERNAME=your_username
 # NAVIDROME_PASSWORD=your_password
 
-# PostHog Analytics (optional)
-POSTHOG_KEY=
-POSTHOG_HOST=
-
 # Example for external Navidrome server:
 # NAVIDROME_URL=https://your-navidrome-server.com
 # NAVIDROME_USERNAME=your_username

.env.example

@@ -3,15 +3,9 @@ NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
 NEXT_PUBLIC_NAVIDROME_USERNAME=your_username
 NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password
 
-# PostHog Analytics (optional)
-NEXT_PUBLIC_POSTHOG_KEY=your_posthog_key
-NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-
 # For Docker deployment, use these variable names in your .env file:
 # NAVIDROME_URL=https://your-navidrome-server.com
 # NAVIDROME_USERNAME=your_username
 # NAVIDROME_PASSWORD=your_password
-# POSTHOG_KEY=your_posthog_key
-# POSTHOG_HOST=https://us.i.posthog.com
 # HOST_PORT=3000
 # PORT=3000

.env.local

@@ -1 +1 @@
-NEXT_PUBLIC_COMMIT_SHA=0c32c05
+NEXT_PUBLIC_COMMIT_SHA=b5fc053

.github/workflows/github-release.yml

@@ -0,0 +1,33 @@
+name: GitHub Release
+
+on:
+  push:
+    tags:
+      - 'v*'
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    name: Create Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Generate changelog
+        id: changelog
+        uses: orhun/git-cliff-action@v4
+        with:
+          config: cliff.toml
+          args: --latest --strip header
+
+      - name: Create Release
+        uses: softprops/action-gh-release@v2
+        with:
+          body: ${{ steps.changelog.outputs.content }}
+          draft: false
+          prerelease: false

.gitignore

@@ -70,6 +70,11 @@ next-env.d.ts
 # database
 still-database/
 
+# Debug related files
+scripts/sleep-debug.js
+.vscode/launch.json
+source-map-support/
+
 .next/
 certificates
 .vercel

.vscode/launch.json

@@ -1,6 +1,22 @@
 {
   "version": "0.2.0",
   "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Merow",
+      "program": "${workspaceFolder}/scripts/sleep-debug.js",
+      "skipFiles": [
+        "<node_internals>/**"
+      ],
+      "console": "integratedTerminal",
+      "sourceMaps": true,
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ],
+      "trace": true
+    },
     {
       "name": "Debug: Next.js Development",
       "type": "node",
@@ -17,7 +33,34 @@
       "resolveSourceMapLocations": [
         "${workspaceFolder}/**",
         "!**/node_modules/**"
-      ]
+      ],
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "http://localhost:40625"
+      }
+    },
+    {
+      "name": "Debug: Development (Verbose)",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["run", "dev"],
+      "cwd": "${workspaceFolder}",
+      "env": {
+        "NODE_ENV": "development",
+        "DEBUG": "*",
+        "NEXT_TELEMETRY_DISABLED": "1"
+      },
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"],
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/**",
+        "!**/node_modules/**"
+      ],
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "http://localhost:40625"
+      }
     },
     {
       "name": "Debug: Next.js Production",
@@ -32,7 +75,11 @@
       "preLaunchTask": "Build: Production Build Only",
       "runtimeExecutable": "pnpm",
       "runtimeArgs": ["run", "start"],
-      "skipFiles": ["<node_internals>/**"]
+      "skipFiles": ["<node_internals>/**"],
+      "serverReadyAction": {
+        "action": "openExternally",
+        "pattern": "http://localhost:40625"
+      }
     }
   ]
 }

CHANGELOG.md

@@ -0,0 +1,45 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+## [Unreleased]
+
+### Features
+- Fix menubar, add lazy loading, improve image quality, limit search results, filter browse artists
+- Add pagination to library/songs and remove listening streaks
+- Improve SortableQueueItem component with enhanced click handling and styling
+- Add keyboard shortcuts and queue management features
+- Add ListeningStreakCard component for tracking listening streaks
+- Enhance OfflineManagement component with improved card styling and layout
+- Implement Auto-Tagging Settings and MusicBrainz integration
+- Enhance audio settings with ReplayGain, crossfade, and equalizer presets; add AudioSettingsDialog component
+- Update cover art retrieval to use higher resolution images and enhance download manager with new features
+- Enhance UI with Framer Motion animations for album artwork and artist icons
+- Add page transition animations and notification settings for audio playback
+- Implement offline library synchronization with IndexedDB
+- Implement offline library management with IndexedDB support
+
+### Bug Fixes
+- Use git commit SHA for versioning, fix audio playback resume, remove all streak localStorage code
+- Docker startup issue, add GitHub release workflow and changelog config
+
+### Refactoring
+- Simplify service worker by removing offline download functionality
+- Remove all offline download and caching functionality
+- Move service worker registration to a dedicated component for improved client-side handling
+- Refactor service worker registration and enhance offline download manager with client-side checks
+
+### Miscellaneous
+- Organize documentation: move markdown files to docs/ folder
+- Update version to 2026.01.24 and add changelog for January 2026 release
+- Update pnpm-lock.yaml to match new overrides configuration
+- Remove PostHog analytics and update dependencies to latest minor versions
+- Bump the dev group across 1 directory with 2 updates
+- Merge pull request #39 from sillyangel/dependabot/npm_and_yarn/dev-99ea30e4b7
+
+### Styling
+- Update README formatting and improve content clarity
+
+## [2026.01.24] - 2026-01-24
+
+Previous release before changelog tracking.

Dockerfile

@@ -24,13 +24,9 @@ COPY README.md /app/
 ENV NEXT_PUBLIC_NAVIDROME_URL=NEXT_PUBLIC_NAVIDROME_URL
 ENV NEXT_PUBLIC_NAVIDROME_USERNAME=NEXT_PUBLIC_NAVIDROME_USERNAME
 ENV NEXT_PUBLIC_NAVIDROME_PASSWORD=NEXT_PUBLIC_NAVIDROME_PASSWORD
-ENV NEXT_PUBLIC_POSTHOG_KEY=NEXT_PUBLIC_POSTHOG_KEY
-ENV NEXT_PUBLIC_POSTHOG_HOST=NEXT_PUBLIC_POSTHOG_HOST
+ENV NEXT_PUBLIC_COMMIT_SHA=docker-build
 ENV PORT=3000
 
-# Generate git commit hash for build info (fallback if not available)
-RUN echo "NEXT_PUBLIC_COMMIT_SHA=docker-build" > .env.local
-
 # Build the application
 RUN pnpm build
 

README.md

@@ -1,15 +1,13 @@
-<p align="left" style="display: flex; align-items: center; gap: 12px;">
-  <img src="https://github.com/sillyangel/mice/blob/main/public/icon-512.png?raw=true" alt="Mice Logo" width="64" style="border-radius: 12px;" />
-  <strong style="font-size: 2rem;">Mice | Navidrome Client</strong>
+<p align="center">
+  <img src="https://github.com/sillyangel/mice/blob/main/public/icon-512.png?raw=true" alt="Mice Logo" width="120" />
 </p>
-
-#
+<h1 align="center"><strong>Mice | Navidrome Client</strong></h1>
 
 > Project based on [shadcn/ui](https://github.com/shadcn-ui/ui)'s music template.
 
-<!-- This is a music streaming web application built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/), now powered by **Navidrome** for a complete self-hosted music streaming experience. -->
+<!-- this looks like "ai" lol but its not -->
 
-This is a "Modern" Navidrome (or Subsonic) client built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/). It creates a beautiful, responsive music streaming web application that connects to your Navidrome server, and fully able to self-host.
+This is a "Modern" Navidrome (or Subsonic) client built with [Next.js](https://nextjs.org/) and [shadcn/ui](https://ui.shadcn.com/). It creates a beautiful, responsive music streaming web application that connects to your Navidrome server, and fully able to self-host using docker!
 
 ## Features
 
@@ -20,7 +18,7 @@ This is a "Modern" Navidrome (or Subsonic) client built with [Next.js](https://n
 - **Search** - Find music across your entire library
 - **Audio Player** with queue management
 - **Scrobbling** - Track your listening history
-<!-- - **Playlist Management** - Create and manage playlists -->
+- **Playlist Management** - Create and manage playlists
 
 ### Preview
 ![preview](https://github.com/sillyangel/mice/blob/main/public/home-preview.png?raw=true)
@@ -58,8 +56,6 @@ Next, open the new `.env` file and update it with your Navidrome server credenti
 NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
 NEXT_PUBLIC_NAVIDROME_USERNAME=your_username
 NEXT_PUBLIC_NAVIDROME_PASSWORD=your_password
-NEXT_PUBLIC_POSTHOG_KEY=phc_XXXXXXXXXXXXXXXXXX
-NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
 ```
 
 > **Tip:** If you don’t have your own Navidrome server yet, you can use the public demo credentials:  
@@ -117,7 +113,7 @@ docker run -p 3000:3000 \
   sillyangel/mice:latest
 ```
 
-📖 **For detailed Docker configuration, environment variables, troubleshooting, and advanced setups, see [DOCKER.md](./DOCKER.md)**
+ **For detailed Docker configuration, environment variables, troubleshooting, and advanced setups, see [DOCKER.md](./DOCKER.md)**
 
 ## Tech Stack
 

app/album/[id]/page.tsx

@@ -124,13 +124,13 @@ export default function AlbumPage() {
   // Dynamic cover art URLs based on image size
   const getMobileCoverArtUrl = () => {
     return album.coverArt && api
-      ? api.getCoverArtUrl(album.coverArt, 280)
+      ? api.getCoverArtUrl(album.coverArt, 600)
       : '/default-user.jpg';
   };
 
   const getDesktopCoverArtUrl = () => {
     return album.coverArt && api
-      ? api.getCoverArtUrl(album.coverArt, 300)
+      ? api.getCoverArtUrl(album.coverArt, 600)
       : '/default-user.jpg';
   };
 
@@ -146,8 +146,8 @@ export default function AlbumPage() {
               <Image 
                 src={getMobileCoverArtUrl()} 
                 alt={album.name} 
-                width={280} 
-                height={280}
+                width={600} 
+                height={600}
                 className="rounded-md shadow-lg"
               />
             </div>
@@ -182,8 +182,8 @@ export default function AlbumPage() {
             <Image 
               src={getDesktopCoverArtUrl()} 
               alt={album.name} 
-              width={300} 
-              height={300}
+              width={600} 
+              height={600}
               className="rounded-md"
             />
             <div className="space-y-2">
@@ -196,9 +196,15 @@ export default function AlbumPage() {
               <Link href={`/artist/${album.artistId}`}>
                 <p className="text-xl text-primary mt-0 mb-4 underline">{album.artist}</p>
               </Link>
-              <Button className="px-5" onClick={() => playAlbum(album.id)}>
-                Play
-              </Button>
+              
+              {/* Controls row */}
+              <div className="flex items-center gap-3">
+                <Button className="px-5" onClick={() => playAlbum(album.id)}>
+                  Play
+                </Button>
+              </div>
+              
+              {/* Album info */}
               <div className="text-sm text-muted-foreground">
                 <p>{album.genre} • {album.year}</p>
                 <p>{album.songCount} songs, {formatDuration(album.duration)}</p>

app/browse/page.tsx

@@ -1,90 +1,55 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { Button } from '@/components/ui/button';
-import { Tabs, TabsContent } from '@/components/ui/tabs';
 import { AlbumArtwork } from '@/app/components/album-artwork';
 import { ArtistIcon } from '@/app/components/artist-icon';
 import { useNavidrome } from '@/app/components/NavidromeContext';
-import { getNavidromeAPI, Album } from '@/lib/navidrome';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
-import { Shuffle } from 'lucide-react';
+import { useProgressiveAlbumLoading } from '@/hooks/use-progressive-album-loading';
+import { 
+  Shuffle, 
+  ArrowDown, 
+  RefreshCcw,
+  Loader2
+} from 'lucide-react';
 import Loading from '@/app/components/loading';
+import { useInView } from 'react-intersection-observer';
 
 export default function BrowsePage() {
-  const { artists, isLoading: contextLoading } = useNavidrome();
+  const { artists: allArtists, isLoading: contextLoading } = useNavidrome();
+  // Filter to only show album artists (artists with at least one album)
+  const artists = allArtists.filter(artist => artist.albumCount && artist.albumCount > 0);
   const { shuffleAllAlbums } = useAudioPlayer();
-  const [albums, setAlbums] = useState<Album[]>([]);
-  const [currentPage, setCurrentPage] = useState(0);
-  const [isLoadingAlbums, setIsLoadingAlbums] = useState(false);
-  const [hasMoreAlbums, setHasMoreAlbums] = useState(true);
-  const albumsPerPage = 84;
   
-  const api = getNavidromeAPI();
-  const loadAlbums = async (page: number, append: boolean = false) => {
-    if (!api) {
-      console.error('Navidrome API not available');
-      return;
-    }
+  // Use our progressive loading hook
+  const { 
+    albums, 
+    isLoading, 
+    hasMore, 
+    loadMoreAlbums, 
+    refreshAlbums
+  } = useProgressiveAlbumLoading('alphabeticalByName');
   
-    try {
-      setIsLoadingAlbums(true);
-      const offset = page * albumsPerPage;
-      
-      // Use alphabeticalByName to get all albums in alphabetical order
-      const newAlbums = await api.getAlbums('alphabeticalByName', albumsPerPage, offset);
-      
-      if (append) {
-        setAlbums(prev => [...prev, ...newAlbums]);
-      } else {
-        setAlbums(newAlbums);
-      }
-      
-      // If we got fewer albums than requested, we've reached the end
-      setHasMoreAlbums(newAlbums.length === albumsPerPage);
-    } catch (error) {
-      console.error('Failed to load albums:', error);
-    } finally {
-      setIsLoadingAlbums(false);
-    }
-  };
+  // Infinite scroll with intersection observer
+  const { ref, inView } = useInView({
+    threshold: 0.1,
+    triggerOnce: false
+  });
   
+  // Load more albums when the load more sentinel comes into view
   useEffect(() => {
-    loadAlbums(0);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  // Infinite scroll handler
-  useEffect(() => {
-    const handleScroll = (e: Event) => {
-      const target = e.target as HTMLElement;
-      if (!target || isLoadingAlbums || !hasMoreAlbums) return;
-      
-      const { scrollTop, scrollHeight, clientHeight } = target;
-      const threshold = 200; // Load more when 200px from bottom
-      
-      if (scrollHeight - scrollTop - clientHeight < threshold) {
-        loadMore();
-      }
-    };
-
-    const scrollArea = document.querySelector('[data-radix-scroll-area-viewport]');
-    if (scrollArea) {
-      scrollArea.addEventListener('scroll', handleScroll);
-      return () => scrollArea.removeEventListener('scroll', handleScroll);
+    if (inView && hasMore && !isLoading) {
+      loadMoreAlbums();
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoadingAlbums, hasMoreAlbums, currentPage]);
+  }, [inView, hasMore, isLoading, loadMoreAlbums]);
   
-  const loadMore = () => {
-    if (isLoadingAlbums || !hasMoreAlbums) return;
-    const nextPage = currentPage + 1;
-    setCurrentPage(nextPage);
-    loadAlbums(nextPage, true);
-  };
+  // Pull-to-refresh simulation
+  const handleRefresh = useCallback(() => {
+    refreshAlbums();
+  }, [refreshAlbums]);
 
   if (contextLoading) {
     return <Loading />;
@@ -115,12 +80,13 @@ export default function BrowsePage() {
             <div className="relative">
             <ScrollArea>
             <div className="flex space-x-4 pb-4">
-            {artists.map((artist) => (
+            {artists.map((artist, index) => (
                   <ArtistIcon
                     key={artist.id}
                     artist={artist}
                     className="shrink-0 overflow-hidden"
                     size={190}
+                    loading={index < 10 ? 'eager' : 'lazy'}
                   />
                 ))}
               </div>
@@ -137,13 +103,17 @@ export default function BrowsePage() {
                 Browse the full collection of albums ({albums.length} loaded).
               </p>
             </div>
+            <Button onClick={handleRefresh} variant="outline" size="sm">
+              <RefreshCcw className="w-4 h-4 mr-2" />
+              Refresh
+            </Button>
           </div>
           <Separator className="my-4" />
           <div className="relative grow">
             <ScrollArea className="h-full">
               <div className="h-full overflow-y-auto">
                 <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 2xl:grid-cols-7 gap-4 p-4 pb-8">
-                  {albums.map((album) => (
+                  {albums.map((album, index) => (
                     <AlbumArtwork
                       key={album.id}
                       album={album}
@@ -151,27 +121,51 @@ export default function BrowsePage() {
                       aspectRatio="square"
                       width={200}
                       height={200}
+                      loading={index < 20 ? 'eager' : 'lazy'}
                     />
                   ))}
                 </div>
-                {hasMoreAlbums && (
-                  <div className="flex justify-center p-4 pb-24">
+                {/* Load more sentinel */}
+                {hasMore && (
+                  <div 
+                    ref={ref} 
+                    className="flex justify-center p-4 pb-24"
+                  >
                     <Button 
-                      onClick={loadMore} 
-                      disabled={isLoadingAlbums}
-                      variant="outline"
+                      onClick={loadMoreAlbums} 
+                      disabled={isLoading}
+                      variant="ghost"
+                      className="flex flex-col items-center gap-2"
                     >
-                      {isLoadingAlbums ? 'Loading...' : `Load More Albums (${albumsPerPage} more)`}
+                      {isLoading ? (
+                        <Loader2 className="h-6 w-6 animate-spin" />
+                      ) : (
+                        <ArrowDown className="h-6 w-6" />
+                      )}
+                      <span className="text-sm">
+                        {isLoading ? 'Loading...' : 'Load More Albums'}
+                      </span>
                     </Button>
                   </div>
                 )}
-                {!hasMoreAlbums && albums.length > 0 && (
+                
+                {!hasMore && albums.length > 0 && (
                   <div className="flex justify-center p-4 pb-24">
                     <p className="text-sm text-muted-foreground">
                       All albums loaded ({albums.length} total)
                     </p>
                   </div>
                 )}
+                
+                {albums.length === 0 && !isLoading && (
+                  <div className="flex flex-col items-center justify-center p-12">
+                    <p className="text-lg font-medium mb-2">No albums found</p>
+                    <p className="text-sm text-muted-foreground mb-4">
+                      Try refreshing or check your connection
+                    </p>
+                    <Button onClick={handleRefresh}>Refresh</Button>
+                  </div>
+                )}
               </div>
               <ScrollBar orientation="vertical" />
             </ScrollArea>

app/components/AudioPlayer.tsx

@@ -11,9 +11,27 @@ 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';
+import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
+import { useGlobalSearch } from './GlobalSearchProvider';
+import { DraggableMiniPlayer } from './DraggableMiniPlayer';
 
 export const AudioPlayer: React.FC = () => {
-  const { currentTrack, playPreviousTrack, addToQueue, playNextTrack, clearQueue, queue, toggleShuffle, shuffle, toggleCurrentTrackStar } = useAudioPlayer();
+  const { 
+    currentTrack, 
+    playPreviousTrack, 
+    addToQueue, 
+    playNextTrack, 
+    clearQueue, 
+    queue, 
+    toggleShuffle, 
+    shuffle, 
+    toggleCurrentTrackStar,
+    audioSettings,
+    updateAudioSettings,
+    equalizerPreset,
+    setEqualizerPreset,
+    audioEffects
+  } = useAudioPlayer();
   const router = useRouter();
   const isMobile = useIsMobile();
   
@@ -31,6 +49,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;
@@ -114,16 +134,18 @@ export const AudioPlayer: React.FC = () => {
   useEffect(() => {
     setIsClient(true);
     
-    // Load saved volume
-    const savedVolume = localStorage.getItem('navidrome-volume');
-    if (savedVolume) {
-      try {
-        const volumeValue = parseFloat(savedVolume);
-        if (volumeValue >= 0 && volumeValue <= 1) {
-          setVolume(volumeValue);
+    if (currentTrack) {
+      // Load saved volume
+      const savedVolume = localStorage.getItem('navidrome-volume');
+      if (savedVolume) {
+        try {
+          const volumeValue = parseFloat(savedVolume);
+          if (volumeValue >= 0 && volumeValue <= 1) {
+            setVolume(volumeValue);
+          }
+        } catch (error) {
+          console.error('Failed to parse saved volume:', error);
         }
-      } catch (error) {
-        console.error('Failed to parse saved volume:', error);
       }
     }
     
@@ -219,17 +241,22 @@ export const AudioPlayer: React.FC = () => {
       }
     }
     keysToRemove.forEach(key => localStorage.removeItem(key));
-  }, [isMobile, audioInitialized, volume]);
+  }, [isMobile, audioInitialized, volume, currentTrack]);
 
   // Apply volume to audio element when volume changes
   useEffect(() => {
     const audioCurrent = audioRef.current;
     if (audioCurrent) {
-      audioCurrent.volume = volume;
+      // Apply volume through audio effects chain if available
+      if (audioEffects) {
+        audioEffects.setVolume(volume);
+      } else {
+        audioCurrent.volume = volume;
+      }
     }
     // Save volume to localStorage
     localStorage.setItem('navidrome-volume', volume.toString());
-  }, [volume]);
+  }, [volume, audioEffects]);
 
   // Save position when component unmounts or track changes
   useEffect(() => {
@@ -243,6 +270,7 @@ export const AudioPlayer: React.FC = () => {
 
   useEffect(() => {
     const audioCurrent = audioRef.current;
+    const preloadAudioCurrent = preloadAudioRef.current;
     
     if (currentTrack && audioCurrent && audioCurrent.src !== currentTrack.url) {
       // Always clear current track time when changing tracks
@@ -256,6 +284,20 @@ export const AudioPlayer: React.FC = () => {
         return;
       }
 
+      // If we have audio effects and ReplayGain is enabled, apply it
+      if (audioEffects && audioSettings.replayGainEnabled && currentTrack.replayGain) {
+        audioEffects.setReplayGain(currentTrack.replayGain);
+      }
+
+      // For gapless playback, start preloading the next track
+      if (audioSettings.gaplessPlayback && queue.length > 0) {
+        const nextTrack = queue[0];
+        if (preloadAudioCurrent && nextTrack) {
+          preloadAudioCurrent.src = nextTrack.url;
+          preloadAudioCurrent.load();
+        }
+      }
+      
       // Debug: Log current audio element state
       console.log('🔍 Audio element state before loading:', {
         src: audioCurrent.src,
@@ -368,7 +410,7 @@ export const AudioPlayer: React.FC = () => {
         setIsPlaying(false);
       }
     }
-  }, [currentTrack, onTrackStart, onTrackPlay, isMobile, audioInitialized]);
+  }, [currentTrack, onTrackStart, onTrackPlay, isMobile, audioInitialized, audioEffects, audioSettings.gaplessPlayback, audioSettings.replayGainEnabled, queue]);
 
   useEffect(() => {
     const audioCurrent = audioRef.current;
@@ -397,6 +439,12 @@ export const AudioPlayer: React.FC = () => {
         
         // Notify scrobbler about track end
         onTrackEnd(currentTrack, audioCurrent.currentTime, audioCurrent.duration);
+
+        // If crossfade is enabled and we have more tracks in queue
+        if (audioSettings.crossfadeDuration > 0 && queue.length > 0 && audioEffects) {
+          // Start fading out current track
+          audioEffects.setCrossfadeTime(audioSettings.crossfadeDuration);
+        }
       }
       playNextTrack();
     };
@@ -440,7 +488,50 @@ export const AudioPlayer: React.FC = () => {
         audioCurrent.removeEventListener('pause', handlePause);
       }
     };
-  }, [playNextTrack, currentTrack, onTrackProgress, onTrackEnd, onTrackPlay, onTrackPause]);
+  }, [playNextTrack, currentTrack, onTrackProgress, onTrackEnd, onTrackPlay, onTrackPause, audioEffects, audioSettings.crossfadeDuration, queue.length]);
+
+  // Update document title and optionally show a notification when a new song starts
+  useEffect(() => {
+    if (!isClient || !currentTrack) {
+      if (!currentTrack) {
+        document.title = 'mice';
+      }
+      return;
+    }
+
+    // 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);
+      }
+    }
+  }, [currentTrack, isPlaying, isClient, lastNotifiedTrackId]);
 
   // Media Session API integration - Enhanced for mobile
   useEffect(() => {
@@ -710,6 +801,34 @@ export const AudioPlayer: React.FC = () => {
       }
     }
   };
+
+  // Volume control functions for keyboard shortcuts
+  const handleVolumeUp = useCallback(() => {
+    setVolume(prevVolume => Math.min(1, prevVolume + 0.1));
+  }, []);
+
+  const handleVolumeDown = useCallback(() => {
+    setVolume(prevVolume => Math.max(0, prevVolume - 0.1));
+  }, []);
+
+  const handleToggleMute = useCallback(() => {
+    setVolume(prevVolume => prevVolume === 0 ? 1 : 0);
+  }, []);
+
+  const { openSpotlight } = useGlobalSearch();
+
+  // Set up keyboard shortcuts
+  useKeyboardShortcuts({
+    onPlayPause: togglePlayPause,
+    onNextTrack: playNextTrack,
+    onPreviousTrack: playPreviousTrack,
+    onVolumeUp: handleVolumeUp,
+    onVolumeDown: handleVolumeDown,
+    onToggleMute: handleToggleMute,
+    onSpotlightSearch: openSpotlight,
+    disabled: !currentTrack || isFullScreen // Disable if no track or in fullscreen (let FullScreenPlayer handle it)
+  });
+
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newVolume = parseFloat(e.target.value);
     setVolume(newVolume);
@@ -819,54 +938,7 @@ export const AudioPlayer: React.FC = () => {
   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-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'}`} 
-                />
-              </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>
-        </div>
+        <DraggableMiniPlayer onExpand={() => setIsMinimized(false)} />
         
         {/* Single audio element - shared across all UI states */}
         <audio 

app/components/AudioPlayerContext.tsx

@@ -1,9 +1,10 @@
 'use client';
 
-import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
-import { Song, Album, Artist } from '@/lib/navidrome';
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { Song } from '@/lib/navidrome';
 import { getNavidromeAPI } from '@/lib/navidrome';
 import { useToast } from "@/hooks/use-toast";
+import { AudioEffects } from '@/lib/audio-effects';
 
 export interface Track {
   id: string;
@@ -15,8 +16,16 @@ export interface Track {
   coverArt?: string;
   albumId: string;
   artistId: string;
-  autoPlay?: boolean; // Flag to control auto-play
-  starred?: boolean; // Flag for starred/favorited tracks
+  autoPlay?: boolean;
+  starred?: boolean;
+  replayGain?: number; // Added ReplayGain field
+}
+
+interface AudioSettings {
+  crossfadeDuration: number;
+  equalizer: string;
+  replayGainEnabled: boolean;
+  gaplessPlayback: boolean;
 }
 
 interface AudioPlayerContextProps {
@@ -24,12 +33,14 @@ interface AudioPlayerContextProps {
   playTrack: (track: Track, autoPlay?: boolean) => void;
   queue: Track[];
   addToQueue: (track: Track) => void;
+  insertAtBeginningOfQueue: (track: Track) => void;
   playNextTrack: () => void;
   clearQueue: () => void;
   addAlbumToQueue: (albumId: string) => Promise<void>;
   playAlbum: (albumId: string) => Promise<void>;
   playAlbumFromTrack: (albumId: string, startingSongId: string) => Promise<void>;
   removeTrackFromQueue: (index: number) => void;
+  reorderQueue: (oldIndex: number, newIndex: number) => void;
   skipToTrackInQueue: (index: number) => void;
   addArtistToQueue: (artistId: string) => Promise<void>;
   playPreviousTrack: () => void;
@@ -42,16 +53,37 @@ interface AudioPlayerContextProps {
   clearHistory: () => void;
   toggleCurrentTrackStar: () => Promise<void>;
   updateTrackStarred: (trackId: string, starred: boolean) => void;
+  // Audio settings
+  audioSettings: AudioSettings;
+  updateAudioSettings: (settings: Partial<AudioSettings>) => void;
+  equalizerPreset: string;
+  setEqualizerPreset: (preset: string) => void;
+  audioEffects: AudioEffects | null;
+  // Playback state
+  isPlaying: boolean;
+  togglePlayPause: () => Promise<void>;
 }
 
 const AudioPlayerContext = createContext<AudioPlayerContextProps | undefined>(undefined);
 
+export // Default audio settings
+const DEFAULT_AUDIO_SETTINGS: AudioSettings = {
+  crossfadeDuration: 3,
+  equalizer: 'normal',
+  replayGainEnabled: true,
+  gaplessPlayback: true
+};
+
 export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [currentTrack, setCurrentTrack] = useState<Track | null>(null);
   const [queue, setQueue] = useState<Track[]>([]);
   const [playedTracks, setPlayedTracks] = useState<Track[]>([]);
   const [isLoading, setIsLoading] = useState(false);
   const [shuffle, setShuffle] = useState(false);
+  const [audioSettings, setAudioSettings] = useState<AudioSettings>(DEFAULT_AUDIO_SETTINGS);
+  const [equalizerPreset, setEqualizerPreset] = useState('normal');
+  const [audioEffects, setAudioEffects] = useState<AudioEffects | null>(null);
+  const audioRef = useRef<HTMLAudioElement | null>(null);
   const { toast } = useToast();
   const api = useMemo(() => {
     const navidromeApi = getNavidromeAPI();
@@ -83,8 +115,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     if (savedCurrentTrack) {
       try {
         const track = JSON.parse(savedCurrentTrack);
-        // Clear autoPlay flag when loading from localStorage to prevent auto-play on refresh
-        track.autoPlay = false;
+        // Check if there's a saved playback position - if so, user was likely playing
+        const savedTime = localStorage.getItem('navidrome-current-track-time');
+        track.autoPlay = savedTime !== null && parseFloat(savedTime) > 0;
         setCurrentTrack(track);
       } catch (error) {
         console.error('Failed to parse saved current track:', error);
@@ -102,6 +135,73 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     }
   }, [currentTrack]);
 
+  // Initialize audio effects when audio element is available
+  useEffect(() => {
+    const audioElement = audioRef.current;
+    if (audioElement && !audioEffects) {
+      const effects = new AudioEffects(audioElement);
+      setAudioEffects(effects);
+
+      // Load saved audio settings
+      const savedSettings = localStorage.getItem('navidrome-audio-settings');
+      if (savedSettings) {
+        try {
+          const settings = JSON.parse(savedSettings);
+          setAudioSettings(settings);
+          effects.setPreset(settings.equalizer);
+          setEqualizerPreset(settings.equalizer);
+        } catch (error) {
+          console.error('Failed to load audio settings:', error);
+        }
+      }
+
+      return () => {
+        effects.disconnect();
+      };
+    }
+  }, [audioEffects]);
+
+  // Save all audio-related settings
+  const saveSettings = useCallback(() => {
+    try {
+      // Save audio settings
+      localStorage.setItem('navidrome-audio-settings', JSON.stringify(audioSettings));
+      // Save equalizer preset
+      localStorage.setItem('navidrome-equalizer-preset', equalizerPreset);
+      // Save other playback settings
+      const playbackSettings = {
+        replayGainEnabled: audioSettings.replayGainEnabled,
+        gaplessPlayback: audioSettings.gaplessPlayback,
+        crossfadeDuration: audioSettings.crossfadeDuration,
+        volume: audioRef.current?.volume || 1,
+        lastPosition: audioRef.current?.currentTime || 0
+      };
+      localStorage.setItem('navidrome-playback-settings', JSON.stringify(playbackSettings));
+    } catch (error) {
+      console.error('Failed to save settings:', error);
+    }
+  }, [audioSettings, equalizerPreset]);
+
+  // Save settings whenever they change
+  useEffect(() => {
+    saveSettings();
+  }, [audioSettings, equalizerPreset, saveSettings]);
+
+  // Update equalizer when preset changes
+  useEffect(() => {
+    if (audioEffects) {
+      audioEffects.setPreset(equalizerPreset);
+    }
+  }, [equalizerPreset, audioEffects]);
+
+  const updateAudioSettings = useCallback((settings: Partial<AudioSettings>) => {
+    setAudioSettings(prev => {
+      const newSettings = { ...prev, ...settings };
+      localStorage.setItem('navidrome-audio-settings', JSON.stringify(newSettings));
+      return newSettings;
+    });
+  }, []);
+
   const songToTrack = useMemo(() => (song: Song): Track => {
     if (!api) {
       throw new Error('Navidrome API not configured');
@@ -120,7 +220,8 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
       coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
-      starred: !!song.starred
+      starred: !!song.starred,
+      replayGain: song.replayGain || 0 // Add ReplayGain support
     };
   }, [api]);
 
@@ -159,6 +260,10 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     });
   }, [shuffle]);
 
+  const insertAtBeginningOfQueue = useCallback((track: Track) => {
+    setQueue((prevQueue) => [track, ...prevQueue]);
+  }, []);
+
   const clearQueue = useCallback(() => {
     setQueue([]);
   }, []);
@@ -167,6 +272,15 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     setQueue((prevQueue) => prevQueue.filter((_, i) => i !== index));
   }, []);
 
+  const reorderQueue = useCallback((oldIndex: number, newIndex: number) => {
+    setQueue((prevQueue) => {
+      const newQueue = [...prevQueue];
+      const [movedItem] = newQueue.splice(oldIndex, 1);
+      newQueue.splice(newIndex, 0, movedItem);
+      return newQueue;
+    });
+  }, []);
+
   const playNextTrack = useCallback(() => {
     // Clear saved timestamp when changing tracks
     localStorage.removeItem('navidrome-current-track-time');
@@ -573,15 +687,43 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
       }
     }
   }, []);
+  // Track playback state
+  const [isPlaying, setIsPlaying] = useState(false);
+
+  // Shared playback control function
+  const togglePlayPause = useCallback(async () => {
+    const audioElement = audioRef.current;
+    if (!audioElement || !currentTrack) return;
+
+    try {
+      if (isPlaying) {
+        audioElement.pause();
+        setIsPlaying(false);
+      } else {
+        await audioElement.play();
+        setIsPlaying(true);
+      }
+    } catch (error) {
+      console.error('Failed to toggle playback:', error);
+      toast({
+        variant: "destructive",
+        title: "Playback Error",
+        description: "Failed to control playback. Please try again.",
+      });
+    }
+  }, [currentTrack, isPlaying, toast]);
+
   const contextValue = useMemo(() => ({
     currentTrack, 
     playTrack, 
     queue, 
     addToQueue, 
+    insertAtBeginningOfQueue,
     playNextTrack, 
     clearQueue, 
     addAlbumToQueue, 
     removeTrackFromQueue, 
+    reorderQueue,
     addArtistToQueue, 
     playPreviousTrack,
     isLoading,
@@ -594,6 +736,15 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     playArtist,
     playedTracks,
     clearHistory,
+    // Audio settings
+    audioSettings,
+    updateAudioSettings,
+    equalizerPreset,
+    setEqualizerPreset,
+    audioEffects,
+    // Playback state
+    isPlaying,
+    togglePlayPause,
     toggleCurrentTrackStar: async () => {
       if (!currentTrack || !api) {
         toast({
@@ -668,10 +819,12 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     isLoading, 
     playTrack, 
     addToQueue, 
+    insertAtBeginningOfQueue,
     playNextTrack, 
     clearQueue, 
     addAlbumToQueue, 
     removeTrackFromQueue, 
+    reorderQueue,
     addArtistToQueue, 
     playPreviousTrack,
     playAlbum,
@@ -684,7 +837,14 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     playedTracks,
     clearHistory,
     api,
-    toast
+    toast,
+    audioEffects,
+    audioSettings,
+    equalizerPreset,
+    updateAudioSettings,
+    setEqualizerPreset,
+    isPlaying,
+    togglePlayPause
   ]);
 
   return (

app/components/AudioSettingsDialog.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Slider } from "@/components/ui/slider";
+import { Switch } from "@/components/ui/switch";
+import { Button } from "@/components/ui/button";
+import { Label } from "@/components/ui/label";
+import { useAudioPlayer } from "./AudioPlayerContext";
+import { presets } from "@/lib/audio-effects";
+
+interface AudioSettingsDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+export function AudioSettingsDialog({ isOpen, onClose }: AudioSettingsDialogProps) {
+  const { 
+    audioSettings,
+    updateAudioSettings,
+    equalizerPreset,
+    setEqualizerPreset,
+  } = useAudioPlayer();
+
+  const handleCrossfadeChange = (value: number[]) => {
+    updateAudioSettings({ crossfadeDuration: value[0] });
+  };
+
+  const handleReplayGainToggle = (enabled: boolean) => {
+    updateAudioSettings({ replayGainEnabled: enabled });
+  };
+
+  const handleGaplessToggle = (enabled: boolean) => {
+    updateAudioSettings({ gaplessPlayback: enabled });
+  };
+
+  const handleEqualizerPresetChange = (preset: string) => {
+    setEqualizerPreset(preset);
+    updateAudioSettings({ equalizer: preset });
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Audio Settings</DialogTitle>
+          <DialogDescription>
+            Configure playback settings and audio effects
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-6">
+          {/* Crossfade */}
+          <div className="space-y-2">
+            <Label>Crossfade Duration ({audioSettings.crossfadeDuration}s)</Label>
+            <Slider
+              value={[audioSettings.crossfadeDuration]}
+              onValueChange={handleCrossfadeChange}
+              min={0}
+              max={5}
+              step={0.5}
+            />
+          </div>
+
+          {/* ReplayGain */}
+          <div className="flex items-center justify-between">
+            <Label>ReplayGain</Label>
+            <Switch
+              checked={audioSettings.replayGainEnabled}
+              onCheckedChange={handleReplayGainToggle}
+            />
+          </div>
+
+          {/* Gapless Playback */}
+          <div className="flex items-center justify-between">
+            <Label>Gapless Playback</Label>
+            <Switch
+              checked={audioSettings.gaplessPlayback}
+              onCheckedChange={handleGaplessToggle}
+            />
+          </div>
+
+          {/* Equalizer Presets */}
+          <div className="space-y-2">
+            <Label>Equalizer Preset</Label>
+            <div className="grid grid-cols-2 gap-2">
+              {Object.keys(presets).map((preset) => (
+                <Button
+                  key={preset}
+                  variant={preset === equalizerPreset ? "default" : "outline"}
+                  onClick={() => handleEqualizerPresetChange(preset)}
+                  className="w-full"
+                >
+                  {presets[preset].name}
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

app/components/AutoTagContextMenu.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { useState } from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { MusicIcon, TagIcon, InfoIcon } from 'lucide-react';
+import { AutoTaggingDialog } from './AutoTaggingDialog';
+
+interface AutoTagContextMenuProps {
+  children: React.ReactNode;
+  mode: 'track' | 'album' | 'artist';
+  itemId: string;
+  itemName: string;
+  artistName?: string;
+}
+
+export function AutoTagContextMenu({
+  children,
+  mode,
+  itemId,
+  itemName,
+  artistName
+}: AutoTagContextMenuProps) {
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  return (
+    <>
+      <ContextMenu>
+        <ContextMenuTrigger asChild>
+          {children}
+        </ContextMenuTrigger>
+        <ContextMenuContent className="w-56">
+          <ContextMenuItem
+            onClick={() => setIsDialogOpen(true)}
+            className="cursor-pointer"
+          >
+            <TagIcon className="mr-2 h-4 w-4" />
+            Auto-Tag {mode === 'track' ? 'Track' : mode === 'album' ? 'Album' : 'Artist'}
+          </ContextMenuItem>
+          {mode === 'track' && (
+            <>
+              <ContextMenuSeparator />
+              <ContextMenuItem className="cursor-pointer">
+                <InfoIcon className="mr-2 h-4 w-4" />
+                View Track Details
+              </ContextMenuItem>
+              <ContextMenuItem className="cursor-pointer">
+                <MusicIcon className="mr-2 h-4 w-4" />
+                Edit Track Metadata
+              </ContextMenuItem>
+            </>
+          )}
+        </ContextMenuContent>
+      </ContextMenu>
+
+      <AutoTaggingDialog
+        isOpen={isDialogOpen}
+        onClose={() => setIsDialogOpen(false)}
+        mode={mode}
+        itemId={itemId}
+        itemName={itemName}
+        artistName={artistName}
+      />
+    </>
+  );
+}
+
+export default AutoTagContextMenu;

app/components/AutoTaggingDialog.tsx

@@ -0,0 +1,319 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet";
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { useToast } from "@/hooks/use-toast";
+import { useAutoTagging, EnhancedTrackMetadata, EnhancedAlbumMetadata } from "@/hooks/use-auto-tagging";
+import { useIsMobile } from "@/hooks/use-mobile";
+import { 
+  MusicIcon, 
+  AlbumIcon, 
+  UsersIcon, 
+  CheckCircle2Icon, 
+  XCircleIcon, 
+  AlertTriangleIcon, 
+  InfoIcon 
+} from 'lucide-react';
+import Image from 'next/image';
+
+interface AutoTaggingDialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  mode: 'track' | 'album' | 'artist';
+  itemId: string;
+  itemName: string;
+  artistName?: string;
+}
+
+export const AutoTaggingDialog: React.FC<AutoTaggingDialogProps> = ({
+  isOpen,
+  onClose,
+  mode,
+  itemId,
+  itemName,
+  artistName
+}) => {
+  const isMobile = useIsMobile();
+  const { toast } = useToast();
+  const [confidenceThreshold, setConfidenceThreshold] = useState(70);
+  const [activeTab, setActiveTab] = useState<'tracks' | 'albums'>('tracks');
+  const [isApplying, setIsApplying] = useState(false);
+  const {
+    isProcessing,
+    progress,
+    enhancedTracks,
+    enhancedAlbums,
+    startAutoTagging,
+    applyEnhancedMetadata
+  } = useAutoTagging();
+
+  // Start auto-tagging when the dialog is opened
+  useEffect(() => {
+    if (isOpen && itemId && !isProcessing && progress === 0) {
+      // Wrap in try/catch to handle any errors that might occur during auto-tagging
+      try {
+        startAutoTagging(mode, itemId, confidenceThreshold);
+      } catch (error) {
+        console.error('Failed to start auto-tagging:', error);
+        toast({
+          title: "Auto-Tagging Error",
+          description: error instanceof Error ? error.message : "Failed to start auto-tagging",
+          variant: "destructive",
+        });
+        onClose();
+      }
+    }
+  }, [isOpen, itemId, mode, isProcessing, progress, startAutoTagging, confidenceThreshold, toast, onClose]);
+
+  // Set the active tab based on the mode
+  useEffect(() => {
+    if (mode === 'track') {
+      setActiveTab('tracks');
+    } else if (mode === 'album' || mode === 'artist') {
+      setActiveTab('albums');
+    }
+  }, [mode]);
+
+  const handleApplyMetadata = async () => {
+    try {
+      setIsApplying(true);
+      await applyEnhancedMetadata(
+        enhancedTracks.filter(track => track.status === 'matched' && track.confidence >= confidenceThreshold),
+        enhancedAlbums.filter(album => album.status === 'matched' && album.confidence >= confidenceThreshold)
+      );
+      onClose();
+    } catch (error) {
+      console.error('Failed to apply metadata:', error);
+      toast({
+        title: "Error",
+        description: "Failed to apply metadata",
+        variant: "destructive",
+      });
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  // Get match statistics
+  const matchedTracks = enhancedTracks.filter(track => track.status === 'matched' && track.confidence >= confidenceThreshold).length;
+  const totalTracks = enhancedTracks.length;
+  const matchedAlbums = enhancedAlbums.filter(album => album.status === 'matched' && album.confidence >= confidenceThreshold).length;
+  const totalAlbums = enhancedAlbums.length;
+
+  const getStatusIcon = (status: 'pending' | 'matched' | 'failed' | 'applied', confidence: number) => {
+    if (status === 'pending') return <AlertTriangleIcon className="w-4 h-4 text-yellow-500" />;
+    if (status === 'failed') return <XCircleIcon className="w-4 h-4 text-red-500" />;
+    if (status === 'matched' && confidence >= confidenceThreshold) return <CheckCircle2Icon className="w-4 h-4 text-green-500" />;
+    if (status === 'matched' && confidence < confidenceThreshold) return <InfoIcon className="w-4 h-4 text-yellow-500" />;
+    if (status === 'applied') return <CheckCircle2Icon className="w-4 h-4 text-blue-500" />;
+    return null;
+  };
+
+  const getConfidenceColor = (confidence: number) => {
+    if (confidence >= 90) return 'bg-green-500';
+    if (confidence >= 70) return 'bg-green-400';
+    if (confidence >= 50) return 'bg-yellow-500';
+    return 'bg-red-500';
+  };
+
+  // Render the appropriate dialog/sheet based on mobile status
+  const DialogComponent = isMobile ? Sheet : Dialog;
+  const DialogContentComponent = isMobile ? SheetContent : DialogContent;
+  const DialogHeaderComponent = isMobile ? SheetHeader : DialogHeader;
+  const DialogTitleComponent = isMobile ? SheetTitle : DialogTitle;
+  const DialogDescriptionComponent = isMobile ? SheetDescription : DialogDescription;
+
+  return (
+    <DialogComponent open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContentComponent className={isMobile ? "p-0 pt-8" : "max-w-3xl max-h-[90vh] overflow-hidden flex flex-col"}>
+        <DialogHeaderComponent className={isMobile ? "p-6 pb-2" : ""}>
+          <DialogTitleComponent>
+            Auto-Tagging {mode === 'track' ? 'Track' : mode === 'album' ? 'Album' : 'Artist'}
+          </DialogTitleComponent>
+          <DialogDescriptionComponent>
+            {isProcessing ? (
+              `Analyzing ${mode === 'track' ? 'track' : mode === 'album' ? 'album' : 'artist'} "${itemName}"`
+            ) : (
+              `Found metadata for ${matchedTracks} of ${totalTracks} tracks${totalAlbums > 0 ? ` and ${matchedAlbums} of ${totalAlbums} albums` : ''}`
+            )}
+          </DialogDescriptionComponent>
+
+          {/* Progress bar */}
+          {(isProcessing || isApplying) && (
+            <div className="my-4">
+              <Progress value={progress} className="h-2" />
+              <p className="text-sm text-muted-foreground mt-2">
+                {isProcessing ? 'Analyzing metadata...' : 'Applying metadata...'}
+              </p>
+            </div>
+          )}
+        </DialogHeaderComponent>
+
+        {/* Tabs for tracks and albums */}
+        {!isProcessing && !isApplying && (
+          <div className={`flex-1 overflow-hidden flex flex-col ${isMobile ? "px-6" : ""}`}>
+            <Tabs value={activeTab} onValueChange={(value) => setActiveTab(value as 'tracks' | 'albums')} className="flex-1 flex flex-col">
+              <div className="flex justify-between items-center mb-2">
+                <TabsList>
+                  <TabsTrigger value="tracks" disabled={totalTracks === 0}>
+                    <MusicIcon className="w-4 h-4 mr-2" /> Tracks ({matchedTracks}/{totalTracks})
+                  </TabsTrigger>
+                  <TabsTrigger value="albums" disabled={totalAlbums === 0}>
+                    <AlbumIcon className="w-4 h-4 mr-2" /> Albums ({matchedAlbums}/{totalAlbums})
+                  </TabsTrigger>
+                </TabsList>
+
+                {/* Confidence threshold slider */}
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground whitespace-nowrap">Min. Confidence: {confidenceThreshold}%</span>
+                  <input
+                    type="range"
+                    min="0"
+                    max="100"
+                    value={confidenceThreshold}
+                    onChange={(e) => setConfidenceThreshold(parseInt(e.target.value))}
+                    className="w-24"
+                  />
+                </div>
+              </div>
+
+              {/* Tracks tab content */}
+              <TabsContent value="tracks" className="flex-1 overflow-auto data-[state=active]:flex flex-col">
+                <div className="rounded-md border">
+                  <div className="bg-muted p-2 grid grid-cols-12 gap-2 text-sm font-medium">
+                    <div className="col-span-1"></div>
+                    <div className="col-span-4">Title</div>
+                    <div className="col-span-3">Artist</div>
+                    <div className="col-span-2">Album</div>
+                    <div className="col-span-2 text-right">Confidence</div>
+                  </div>
+                  <div className="divide-y max-h-[50vh] overflow-auto">
+                    {enhancedTracks.map(track => (
+                      <div key={track.id} className="grid grid-cols-12 gap-2 p-2 items-center">
+                        <div className="col-span-1">
+                          {getStatusIcon(track.status, track.confidence)}
+                        </div>
+                        <div className="col-span-4 truncate">
+                          {track.title}
+                        </div>
+                        <div className="col-span-3 truncate">
+                          {track.artist}
+                        </div>
+                        <div className="col-span-2 truncate">
+                          {track.album}
+                        </div>
+                        <div className="col-span-2 flex justify-end items-center gap-2">
+                          <div className="h-2 w-10 rounded-full bg-gray-200">
+                            <div 
+                              className={`h-full rounded-full ${getConfidenceColor(track.confidence)}`} 
+                              style={{ width: `${track.confidence}%` }}
+                            />
+                          </div>
+                          <span className="text-xs">{track.confidence}%</span>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </TabsContent>
+
+              {/* Albums tab content */}
+              <TabsContent value="albums" className="flex-1 overflow-auto data-[state=active]:flex flex-col">
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[50vh] overflow-auto p-1">
+                  {enhancedAlbums.map(album => (
+                    <div key={album.id} className="border rounded-lg overflow-hidden">
+                      <div className="flex">
+                        {/* Album cover */}
+                        <div className="relative w-24 h-24">
+                          {album.coverArtUrl ? (
+                            <Image
+                              src={album.coverArtUrl}
+                              alt={album.name}
+                              fill
+                              className="object-cover"
+                            />
+                          ) : (
+                            <div className="w-full h-full bg-muted flex items-center justify-center">
+                              <AlbumIcon className="w-8 h-8 text-muted-foreground" />
+                            </div>
+                          )}
+                          {/* Status badge */}
+                          <div className="absolute top-1 left-1">
+                            {getStatusIcon(album.status, album.confidence)}
+                          </div>
+                        </div>
+                        {/* Album info */}
+                        <div className="flex-1 p-3">
+                          <h4 className="font-medium text-sm truncate">{album.name}</h4>
+                          <p className="text-xs text-muted-foreground truncate">{album.artist}</p>
+                          <div className="mt-2 flex items-center gap-2">
+                            <div className="h-2 w-10 rounded-full bg-gray-200">
+                              <div 
+                                className={`h-full rounded-full ${getConfidenceColor(album.confidence)}`} 
+                                style={{ width: `${album.confidence}%` }}
+                              />
+                            </div>
+                            <span className="text-xs">{album.confidence}%</span>
+                          </div>
+                          {album.year && (
+                            <p className="text-xs mt-1">Year: {album.year}</p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        )}
+
+        <DialogFooter className={`${isMobile ? "p-6 pt-4" : "mt-4"}`}>
+          <div className="w-full flex flex-col md:flex-row justify-end gap-2">
+            <Button
+              variant="outline"
+              onClick={onClose}
+              disabled={isProcessing || isApplying}
+            >
+              Cancel
+            </Button>
+            <Button
+              onClick={handleApplyMetadata}
+              disabled={
+                isProcessing || 
+                isApplying || 
+                (matchedTracks === 0 && matchedAlbums === 0)
+              }
+            >
+              Apply Metadata
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContentComponent>
+    </DialogComponent>
+  );
+};
+
+export default AutoTaggingDialog;

app/components/AutoTaggingSettings.tsx

@@ -0,0 +1,221 @@
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Input } from '@/components/ui/input';
+import { FaTags } from 'react-icons/fa';
+import { useToast } from '@/hooks/use-toast';
+import { AutoTaggingDialog } from './AutoTaggingDialog';
+
+export const AutoTaggingSettings = () => {
+  const { toast } = useToast();
+  const [isClient, setIsClient] = useState(false);
+  const [autoTaggingEnabled, setAutoTaggingEnabled] = useState(false);
+  const [autoTagDialogOpen, setAutoTagDialogOpen] = useState(false);
+  const [selectedItem, setSelectedItem] = useState({
+    id: '',
+    name: 'Library',
+    mode: 'artist' as 'track' | 'album' | 'artist'
+  });
+  const [autoTagOptions, setAutoTagOptions] = useState({
+    rateLimit: 1000, // milliseconds between requests
+    autoProcess: false,
+    preferLocalMetadata: true,
+    tagsToUpdate: ['title', 'artist', 'album', 'year', 'genre'],
+  });
+
+  useEffect(() => {
+    setIsClient(true);
+    
+    // Load saved preferences from localStorage
+    const savedAutoTagging = localStorage.getItem('auto-tagging-enabled');
+    if (savedAutoTagging !== null) {
+      setAutoTaggingEnabled(savedAutoTagging === 'true');
+    }
+    
+    // Load saved auto-tag options
+    const savedOptions = localStorage.getItem('auto-tagging-options');
+    if (savedOptions !== null) {
+      try {
+        setAutoTagOptions(JSON.parse(savedOptions));
+      } catch (error) {
+        console.error('Failed to parse stored auto-tagging options:', error);
+      }
+    }
+  }, []);
+
+  const handleAutoTaggingToggle = (enabled: boolean) => {
+    setAutoTaggingEnabled(enabled);
+    if (isClient) {
+      localStorage.setItem('auto-tagging-enabled', enabled.toString());
+    }
+    toast({
+      title: enabled ? 'Auto-Tagging Enabled' : 'Auto-Tagging Disabled',
+      description: enabled 
+        ? 'Music will be automatically tagged with metadata from MusicBrainz' 
+        : 'Auto-tagging has been disabled',
+    });
+  };
+
+  const handleOptionsChange = (key: string, value: unknown) => {
+    setAutoTagOptions(prev => {
+      const newOptions = { ...prev, [key]: value };
+      if (isClient) {
+        localStorage.setItem('auto-tagging-options', JSON.stringify(newOptions));
+      }
+      return newOptions;
+    });
+  };
+
+  const handleTagSelectionChange = (tag: string, isSelected: boolean) => {
+    setAutoTagOptions(prev => {
+      const currentTags = [...prev.tagsToUpdate];
+      const newTags = isSelected 
+        ? [...currentTags, tag]
+        : currentTags.filter(t => t !== tag);
+      
+      const newOptions = { ...prev, tagsToUpdate: newTags };
+      if (isClient) {
+        localStorage.setItem('auto-tagging-options', JSON.stringify(newOptions));
+      }
+      return newOptions;
+    });
+  };
+
+  const isTagSelected = (tag: string) => {
+    return autoTagOptions.tagsToUpdate.includes(tag);
+  };
+
+  return (
+    <>
+      <Card className="mb-6 break-inside-avoid py-5">
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <FaTags className="w-5 h-5" />
+            Auto-Tagging
+          </CardTitle>
+          <CardDescription>
+            Configure metadata auto-tagging with MusicBrainz
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">Enable Auto-Tagging</p>
+              <p className="text-sm text-muted-foreground">
+                Automatically fetch and apply metadata from MusicBrainz
+              </p>
+            </div>
+            <Switch 
+              checked={autoTaggingEnabled} 
+              onCheckedChange={handleAutoTaggingToggle} 
+            />
+          </div>
+
+          {autoTaggingEnabled && (
+            <>
+              <div className="space-y-2">
+                <Label htmlFor="rate-limit">API Rate Limit (ms)</Label>
+                <Input
+                  id="rate-limit"
+                  type="number"
+                  min={500}
+                  max={5000}
+                  step={100}
+                  value={autoTagOptions.rateLimit}
+                  onChange={(e) => handleOptionsChange('rateLimit', Number(e.target.value))}
+                />
+                <p className="text-xs text-muted-foreground">
+                  Time between API requests in milliseconds (min: 500ms)
+                </p>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Auto Process Results</p>
+                  <p className="text-sm text-muted-foreground">
+                    Automatically apply best matches without confirmation
+                  </p>
+                </div>
+                <Switch 
+                  checked={autoTagOptions.autoProcess}
+                  onCheckedChange={(checked) => handleOptionsChange('autoProcess', checked)}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div>
+                  <p className="font-medium">Prefer Local Metadata</p>
+                  <p className="text-sm text-muted-foreground">
+                    Keep existing metadata when confidence is low
+                  </p>
+                </div>
+                <Switch 
+                  checked={autoTagOptions.preferLocalMetadata}
+                  onCheckedChange={(checked) => handleOptionsChange('preferLocalMetadata', checked)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Tags to Update</Label>
+                <div className="grid grid-cols-2 gap-2">
+                  {['title', 'artist', 'album', 'year', 'genre', 'albumArtist', 'trackNumber', 'discNumber'].map(tag => (
+                    <div key={tag} className="flex items-center space-x-2">
+                      <Switch 
+                        id={`tag-${tag}`}
+                        checked={isTagSelected(tag)}
+                        onCheckedChange={(checked) => handleTagSelectionChange(tag, checked)}
+                      />
+                      <Label htmlFor={`tag-${tag}`} className="capitalize">
+                        {tag === 'albumArtist' ? 'Album Artist' : 
+                         tag === 'trackNumber' ? 'Track Number' :
+                         tag === 'discNumber' ? 'Disc Number' : tag}
+                      </Label>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              <div className="pt-2">
+                <Button onClick={() => {
+                  // Set selected item to represent the whole library
+                  setSelectedItem({
+                    id: 'library',
+                    name: 'Full Library',
+                    mode: 'artist'
+                  });
+                  setAutoTagDialogOpen(true);
+                }} variant="outline">
+                  <FaTags className="w-4 h-4 mr-2" />
+                  Open Auto-Tagging Tool
+                </Button>
+              </div>
+            </>
+          )}
+
+          <div className="text-sm text-muted-foreground space-y-2">
+            <p><strong>How it works:</strong></p>
+            <ul className="list-disc list-inside space-y-1 ml-2">
+              <li>Metadata is fetched from MusicBrainz when you play tracks</li>
+              <li>Tags can be applied automatically or manually reviewed</li>
+              <li>Right-click on tracks or albums to tag them manually</li>
+              <li>MusicBrainz API has rate limits, so don&apos;t set too fast</li>
+            </ul>
+          </div>
+        </CardContent>
+      </Card>
+
+      <AutoTaggingDialog 
+        isOpen={autoTagDialogOpen}
+        onClose={() => setAutoTagDialogOpen(false)}
+        mode={selectedItem.mode}
+        itemId={selectedItem.id}
+        itemName={selectedItem.name}
+      />
+    </>
+  );
+};

app/components/BottomNavigation.tsx

@@ -3,6 +3,8 @@
 import { useRouter, usePathname } from 'next/navigation';
 import { Home, Search, Disc, Users, Music, Heart, List, Settings } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { motion, AnimatePresence } from 'framer-motion';
+import { useGlobalSearch } from './GlobalSearchProvider';
 
 interface NavItem {
   href: string;
@@ -20,9 +22,15 @@ const navigationItems: NavItem[] = [
 export function BottomNavigation() {
   const router = useRouter();
   const pathname = usePathname();
+  const { openSpotlight } = useGlobalSearch();
 
   const handleNavigation = (href: string) => {
-    router.push(href);
+    if (href === '/search') {
+      // Use spotlight search instead of navigating to search page
+      openSpotlight();
+    } else {
+      router.push(href);
+    }
   };
 
   const isActive = (href: string) => {
@@ -40,7 +48,7 @@ export function BottomNavigation() {
           const Icon = item.icon;
           
           return (
-            <button
+            <motion.button
               key={item.href}
               onClick={() => handleNavigation(item.href)}
               className={cn(
@@ -50,6 +58,8 @@ export function BottomNavigation() {
                   ? "text-primary bg-primary/10" 
                   : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
               )}
+              whileTap={{ scale: 0.95 }}
+              whileHover={{ y: -1 }}
             >
               <Icon className={cn("w-5 h-5 mb-1", isItemActive && "text-primary")} />
               <span className={cn(
@@ -58,7 +68,19 @@ export function BottomNavigation() {
               )}>
                 {item.label}
               </span>
-            </button>
+              <AnimatePresence>
+                {isItemActive && (
+                  <motion.div
+                    layoutId="bottom-nav-underline"
+                    className="h-0.5 w-6 bg-primary mt-1 rounded"
+                    initial={{ opacity: 0, scaleX: 0.6 }}
+                    animate={{ opacity: 1, scaleX: 1 }}
+                    exit={{ opacity: 0, scaleX: 0.6 }}
+                    transition={{ duration: 0.2 }}
+                  />
+                )}
+              </AnimatePresence>
+            </motion.button>
           );
         })}
       </div>

app/components/CacheManagement.tsx

@@ -1,223 +0,0 @@
-'use client';
-
-import React, { useState, useEffect } from 'react';
-import { Button } from '@/components/ui/button';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Label } from '@/components/ui/label';
-import { 
-  Database,
-  Trash2,
-  RefreshCw,
-  HardDrive
-} from 'lucide-react';
-import { CacheManager } from '@/lib/cache';
-
-export function CacheManagement() {
-  const [cacheStats, setCacheStats] = useState({
-    total: 0,
-    expired: 0,
-    size: '0 B'
-  });
-  const [isClearing, setIsClearing] = useState(false);
-  const [lastCleared, setLastCleared] = useState<string | null>(null);
-
-  const loadCacheStats = () => {
-    if (typeof window === 'undefined') return;
-    
-    let total = 0;
-    let expired = 0;
-    let totalSize = 0;
-    const now = Date.now();
-
-    // Check localStorage for cache entries
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i);
-      if (key && (key.startsWith('cache-') || key.startsWith('navidrome-cache-') || key.startsWith('library-cache-'))) {
-        total++;
-        const value = localStorage.getItem(key);
-        if (value) {
-          totalSize += key.length + value.length;
-          try {
-            const parsed = JSON.parse(value);
-            if (parsed.expiresAt && now > parsed.expiresAt) {
-              expired++;
-            }
-          } catch (error) {
-            expired++;
-          }
-        }
-      }
-    }
-
-    // Convert bytes to human readable format
-    const formatSize = (bytes: number): string => {
-      if (bytes === 0) return '0 B';
-      const k = 1024;
-      const sizes = ['B', 'KB', 'MB', 'GB'];
-      const i = Math.floor(Math.log(bytes) / Math.log(k));
-      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-    };
-
-    setCacheStats({
-      total,
-      expired,
-      size: formatSize(totalSize * 2) // *2 for UTF-16 encoding
-    });
-  };
-
-  useEffect(() => {
-    loadCacheStats();
-    
-    // Check if there's a last cleared timestamp
-    const lastClearedTime = localStorage.getItem('cache-last-cleared');
-    if (lastClearedTime) {
-      setLastCleared(new Date(parseInt(lastClearedTime)).toLocaleString());
-    }
-  }, []);
-
-  const handleClearCache = async () => {
-    setIsClearing(true);
-    try {
-      // Clear all cache using the CacheManager
-      CacheManager.clearAll();
-      
-      // Also clear any other cache-related localStorage items
-      if (typeof window !== 'undefined') {
-        const keys = Object.keys(localStorage);
-        keys.forEach(key => {
-          if (key.startsWith('cache-') || 
-              key.startsWith('navidrome-cache-') || 
-              key.startsWith('library-cache-') ||
-              key.includes('album') ||
-              key.includes('artist') ||
-              key.includes('song')) {
-            localStorage.removeItem(key);
-          }
-        });
-        
-        // Set last cleared timestamp
-        localStorage.setItem('cache-last-cleared', Date.now().toString());
-      }
-      
-      // Update stats
-      loadCacheStats();
-      setLastCleared(new Date().toLocaleString());
-      
-      // Show success feedback
-      setTimeout(() => {
-        setIsClearing(false);
-      }, 1000);
-      
-    } catch (error) {
-      console.error('Failed to clear cache:', error);
-      setIsClearing(false);
-    }
-  };
-
-  const handleCleanExpired = () => {
-    if (typeof window === 'undefined') return;
-    
-    const now = Date.now();
-    const keysToRemove: string[] = [];
-
-    for (let i = 0; i < localStorage.length; i++) {
-      const key = localStorage.key(i);
-      if (key && (key.startsWith('cache-') || key.startsWith('navidrome-cache-') || key.startsWith('library-cache-'))) {
-        try {
-          const value = localStorage.getItem(key);
-          if (value) {
-            const parsed = JSON.parse(value);
-            if (parsed.expiresAt && now > parsed.expiresAt) {
-              keysToRemove.push(key);
-            }
-          }
-        } catch (error) {
-          // Invalid cache item, remove it
-          keysToRemove.push(key);
-        }
-      }
-    }
-
-    keysToRemove.forEach(key => localStorage.removeItem(key));
-    loadCacheStats();
-  };
-
-  return (
-    <Card className="break-inside-avoid py-5">
-      <CardHeader>
-        <CardTitle className="flex items-center gap-2">
-          <Database className="h-5 w-5" />
-          Cache Management
-        </CardTitle>
-        <CardDescription>
-          Manage application cache to improve performance and free up storage
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="space-y-4">
-        {/* Cache Statistics */}
-        <div className="grid grid-cols-3 gap-4 text-center">
-          <div className="space-y-1">
-            <p className="text-2xl font-bold">{cacheStats.total}</p>
-            <p className="text-xs text-muted-foreground">Total Items</p>
-          </div>
-          <div className="space-y-1">
-            <p className="text-2xl font-bold">{cacheStats.expired}</p>
-            <p className="text-xs text-muted-foreground">Expired</p>
-          </div>
-          <div className="space-y-1">
-            <p className="text-2xl font-bold">{cacheStats.size}</p>
-            <p className="text-xs text-muted-foreground">Storage Used</p>
-          </div>
-        </div>
-
-        {/* Cache Actions */}
-        <div className="space-y-2">
-          <div className="flex gap-2">
-            <Button
-              onClick={handleClearCache}
-              disabled={isClearing}
-              variant="destructive"
-              size="sm"
-              className="flex-1"
-            >
-              {isClearing ? (
-                <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
-              ) : (
-                <Trash2 className="h-4 w-4 mr-2" />
-              )}
-              {isClearing ? 'Clearing...' : 'Clear All Cache'}
-            </Button>
-            
-            <Button
-              onClick={handleCleanExpired}
-              variant="outline"
-              size="sm"
-              className="flex-1"
-            >
-              <HardDrive className="h-4 w-4 mr-2" />
-              Clean Expired
-            </Button>
-          </div>
-          
-          <Button
-            onClick={loadCacheStats}
-            variant="ghost"
-            size="sm"
-            className="w-full"
-          >
-            <RefreshCw className="h-4 w-4 mr-2" />
-            Refresh Stats
-          </Button>
-        </div>
-
-        {/* Cache Info */}
-        <div className="text-sm text-muted-foreground space-y-1">
-          <p>Cache includes albums, artists, songs, and image URLs to improve loading times.</p>
-          {lastCleared && (
-            <p>Last cleared: {lastCleared}</p>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  );
-}

app/components/ContextMenus.tsx

@@ -0,0 +1,260 @@
+'use client';
+
+import React from 'react';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
+import { 
+  Play, 
+  Plus, 
+  ListMusic,
+  Heart,
+  SkipForward,
+  UserIcon,
+  Disc3,
+  Star,
+  Share,
+  Info
+} from 'lucide-react';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { Track } from '@/app/components/AudioPlayerContext';
+
+interface TrackContextMenuProps {
+  children: React.ReactNode;
+  track: Track;
+  showPlayOptions?: boolean;
+  showQueueOptions?: boolean;
+  showFavoriteOption?: boolean;
+  showAlbumArtistOptions?: boolean;
+}
+
+export function TrackContextMenu({
+  children,
+  track,
+  showPlayOptions = true,
+  showQueueOptions = true,
+  showFavoriteOption = true,
+  showAlbumArtistOptions = true
+}: TrackContextMenuProps) {
+  const { 
+    playTrack, 
+    addToQueue, 
+    insertAtBeginningOfQueue,
+    toggleCurrentTrackStar,
+    currentTrack,
+    queue
+  } = useAudioPlayer();
+
+  const handlePlayTrack = () => {
+    playTrack(track, true);
+  };
+
+  const handleAddToQueue = () => {
+    addToQueue(track);
+  };
+
+  const handlePlayNext = () => {
+    // Add track to the beginning of the queue to play next
+    insertAtBeginningOfQueue(track);
+  };
+
+  const handleToggleFavorite = () => {
+    if (currentTrack?.id === track.id) {
+      toggleCurrentTrackStar();
+    }
+    // For non-current tracks, we'd need a separate function to toggle favorites
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        {showPlayOptions && (
+          <>
+            <ContextMenuItem onClick={handlePlayTrack} className="cursor-pointer">
+              <Play className="mr-2 h-4 w-4" />
+              Play Now
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+        
+        {showQueueOptions && (
+          <>
+            <ContextMenuItem onClick={handlePlayNext} className="cursor-pointer">
+              <SkipForward className="mr-2 h-4 w-4" />
+              Play Next
+            </ContextMenuItem>
+            <ContextMenuItem onClick={handleAddToQueue} className="cursor-pointer">
+              <Plus className="mr-2 h-4 w-4" />
+              Add to Queue
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {showFavoriteOption && (
+          <>
+            <ContextMenuItem onClick={handleToggleFavorite} className="cursor-pointer">
+              <Heart className={`mr-2 h-4 w-4 ${track.starred ? 'fill-current text-red-500' : ''}`} />
+              {track.starred ? 'Remove from Favorites' : 'Add to Favorites'}
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        {showAlbumArtistOptions && (
+          <>
+            <ContextMenuItem className="cursor-pointer">
+              <Disc3 className="mr-2 h-4 w-4" />
+              Go to Album
+            </ContextMenuItem>
+            <ContextMenuItem className="cursor-pointer">
+              <UserIcon className="mr-2 h-4 w-4" />
+              Go to Artist
+            </ContextMenuItem>
+            <ContextMenuSeparator />
+          </>
+        )}
+
+        <ContextMenuItem className="cursor-pointer">
+          <Info className="mr-2 h-4 w-4" />
+          Track Info
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Share className="mr-2 h-4 w-4" />
+          Share
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+// Additional context menus for albums and artists
+interface AlbumContextMenuProps {
+  children: React.ReactNode;
+  albumId: string;
+  albumName: string;
+}
+
+export function AlbumContextMenu({ 
+  children, 
+  albumId, 
+  albumName 
+}: AlbumContextMenuProps) {
+  const { playAlbum, addAlbumToQueue } = useAudioPlayer();
+
+  const handlePlayAlbum = () => {
+    playAlbum(albumId);
+  };
+
+  const handleAddAlbumToQueue = () => {
+    addAlbumToQueue(albumId);
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuItem onClick={handlePlayAlbum} className="cursor-pointer">
+          <Play className="mr-2 h-4 w-4" />
+          Play Album
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem onClick={handleAddAlbumToQueue} className="cursor-pointer">
+          <Plus className="mr-2 h-4 w-4" />
+          Add Album to Queue
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <SkipForward className="mr-2 h-4 w-4" />
+          Play Album Next
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <Heart className="mr-2 h-4 w-4" />
+          Add to Favorites
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <UserIcon className="mr-2 h-4 w-4" />
+          Go to Artist
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Info className="mr-2 h-4 w-4" />
+          Album Info
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Share className="mr-2 h-4 w-4" />
+          Share Album
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+interface ArtistContextMenuProps {
+  children: React.ReactNode;
+  artistId: string;
+  artistName: string;
+}
+
+export function ArtistContextMenu({ 
+  children, 
+  artistId, 
+  artistName 
+}: ArtistContextMenuProps) {
+  const { playArtist, addArtistToQueue } = useAudioPlayer();
+
+  const handlePlayArtist = () => {
+    playArtist(artistId);
+  };
+
+  const handleAddArtistToQueue = () => {
+    addArtistToQueue(artistId);
+  };
+
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger asChild>
+        {children}
+      </ContextMenuTrigger>
+      <ContextMenuContent className="w-56">
+        <ContextMenuItem onClick={handlePlayArtist} className="cursor-pointer">
+          <Play className="mr-2 h-4 w-4" />
+          Play All Songs
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem onClick={handleAddArtistToQueue} className="cursor-pointer">
+          <Plus className="mr-2 h-4 w-4" />
+          Add All to Queue
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <SkipForward className="mr-2 h-4 w-4" />
+          Play All Next
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <Heart className="mr-2 h-4 w-4" />
+          Add to Favorites
+        </ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem className="cursor-pointer">
+          <Info className="mr-2 h-4 w-4" />
+          Artist Info
+        </ContextMenuItem>
+        <ContextMenuItem className="cursor-pointer">
+          <Share className="mr-2 h-4 w-4" />
+          Share Artist
+        </ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}

app/components/DraggableMiniPlayer.tsx

@@ -0,0 +1,478 @@
+'use client';
+
+import React, { useRef, useState, useEffect, useCallback } from 'react';
+import Image from 'next/image';
+import { motion, PanInfo, AnimatePresence } from 'framer-motion';
+import { useAudioPlayer, Track } from './AudioPlayerContext';
+import { FaPlay, FaPause, FaExpand, FaForward, FaBackward, FaVolumeHigh, FaVolumeXmark } from 'react-icons/fa6';
+import { Heart } from 'lucide-react';
+import { constrain } from '@/lib/utils';
+import { Progress } from '@/components/ui/progress';
+import { extractDominantColor } from '@/lib/image-utils';
+
+interface DraggableMiniPlayerProps {
+  onExpand: () => void;
+}
+
+export const DraggableMiniPlayer: React.FC<DraggableMiniPlayerProps> = ({ onExpand }) => {
+  const { 
+    currentTrack, 
+    playPreviousTrack, 
+    playNextTrack,
+    toggleCurrentTrackStar,
+    isPlaying,
+    togglePlayPause 
+  } = useAudioPlayer();
+
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dominantColor, setDominantColor] = useState<string | null>(null);
+  const [progress, setProgress] = useState(0);
+  const [showVolumeSlider, setShowVolumeSlider] = useState(false);
+  const [volume, setVolume] = useState(1);
+  const [clickCount, setClickCount] = useState(0);
+  const [clickTimer, setClickTimer] = useState<NodeJS.Timeout | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dragStartRef = useRef({ x: 0, y: 0 });
+
+  // Save position to localStorage when it changes
+  useEffect(() => {
+    if (!isDragging) {
+      localStorage.setItem('mini-player-position', JSON.stringify(position));
+    }
+  }, [position, isDragging]);
+
+  // Extract dominant color from album art
+  useEffect(() => {
+    if (!currentTrack?.coverArt) {
+      setDominantColor(null);
+      return;
+    }
+    
+    extractDominantColor(currentTrack.coverArt)
+      .then(color => setDominantColor(color))
+      .catch(error => {
+        console.error('Failed to extract color:', error);
+        setDominantColor(null);
+      });
+  }, [currentTrack?.coverArt]);
+
+  // Track progress from main audio player
+  useEffect(() => {
+    const updateProgress = () => {
+      const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+      if (audioElement && audioElement.duration) {
+        setProgress((audioElement.currentTime / audioElement.duration) * 100);
+      }
+    };
+    
+    const updateVolume = () => {
+      const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+      if (audioElement) {
+        setVolume(audioElement.volume);
+      }
+    };
+    
+    const interval = setInterval(updateProgress, 250);
+    updateVolume(); // Initial volume
+    
+    // Set up event listener for volume changes
+    const audioElement = document.querySelector('audio');
+    if (audioElement) {
+      audioElement.addEventListener('volumechange', updateVolume);
+    }
+    
+    return () => {
+      clearInterval(interval);
+      if (audioElement) {
+        audioElement.removeEventListener('volumechange', updateVolume);
+      }
+    };
+  }, [currentTrack]);
+
+  // Detect double clicks for expanding
+  const handleContainerClick = useCallback(() => {
+    setClickCount(prev => prev + 1);
+    
+    if (clickTimer) {
+      clearTimeout(clickTimer);
+    }
+    
+    const timer = setTimeout(() => {
+      // If single click, do nothing
+      if (clickCount === 0) {
+        // Nothing
+      } 
+      // If double click, expand
+      else if (clickCount === 1) {
+        onExpand();
+      }
+      setClickCount(0);
+    }, 300);
+    
+    setClickTimer(timer as unknown as NodeJS.Timeout);
+  }, [clickCount, clickTimer, onExpand]);
+  
+  // Handle seeking in track
+  const handleProgressClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.stopPropagation();
+    const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+    if (!audioElement) return;
+    
+    const rect = e.currentTarget.getBoundingClientRect();
+    const clickX = e.clientX - rect.left;
+    const percent = clickX / rect.width;
+    audioElement.currentTime = percent * audioElement.duration;
+  };
+  
+  // Handle volume change
+  const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const audioElement = document.querySelector('audio') as HTMLAudioElement | null;
+    if (!audioElement) return;
+    
+    const newVolume = parseFloat(e.target.value);
+    audioElement.volume = newVolume;
+    setVolume(newVolume);
+    
+    try {
+      localStorage.setItem('navidrome-volume', newVolume.toString());
+    } catch (error) {
+      console.error('Failed to save volume:', error);
+    }
+  };
+
+  // Keyboard controls for the mini player
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Only handle keyboard shortcuts if the mini player is focused
+      if (document.activeElement?.tagName === 'INPUT') return;
+
+      const step = e.shiftKey ? 100 : 10; // Larger steps with shift key
+      
+      switch (e.key) {
+        case 'ArrowLeft':
+          setPosition(prev => ({
+            ...prev,
+            x: constrain(
+              prev.x - step,
+              -(window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 + 16,
+              (window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'ArrowRight':
+          setPosition(prev => ({
+            ...prev,
+            x: constrain(
+              prev.x + step,
+              -(window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 + 16,
+              (window.innerWidth - (containerRef.current?.offsetWidth || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'ArrowUp':
+          setPosition(prev => ({
+            ...prev,
+            y: constrain(
+              prev.y - step,
+              -(window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 + 16,
+              (window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'ArrowDown':
+          setPosition(prev => ({
+            ...prev,
+            y: constrain(
+              prev.y + step,
+              -(window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 + 16,
+              (window.innerHeight - (containerRef.current?.offsetHeight || 0)) / 2 - 16
+            )
+          }));
+          break;
+        case 'Escape':
+          onExpand();
+          break;
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [onExpand]);
+
+  // Load saved position on mount
+  useEffect(() => {
+    const savedPosition = localStorage.getItem('mini-player-position');
+    if (savedPosition) {
+      try {
+        const pos = JSON.parse(savedPosition);
+        setPosition(pos);
+      } catch (error) {
+        console.error('Failed to parse saved mini player position:', error);
+      }
+    }
+  }, []);
+
+  // Ensure player stays within viewport bounds and implement edge snapping
+  useEffect(() => {
+    const constrainToViewport = () => {
+      if (!containerRef.current || isDragging) return;
+
+      const rect = containerRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      // Add some padding from edges
+      const padding = 16;
+      
+      // Calculate constrained position
+      let newX = constrain(
+        position.x,
+        -(viewportWidth - rect.width) / 2 + padding,
+        (viewportWidth - rect.width) / 2 - padding
+      );
+      
+      let newY = constrain(
+        position.y,
+        -(viewportHeight - rect.height) / 2 + padding,
+        (viewportHeight - rect.height) / 2 - padding
+      );
+      
+      // Edge snapping logic
+      const snapThreshold = 24; // Pixels from edge to trigger snap
+      const snapPositions = {
+        left: -(viewportWidth - rect.width) / 2 + padding,
+        right: (viewportWidth - rect.width) / 2 - padding,
+        top: -(viewportHeight - rect.height) / 2 + padding,
+        bottom: (viewportHeight - rect.height) / 2 - padding,
+      };
+      
+      // Snap to left or right edge
+      if (Math.abs(newX - snapPositions.left) < snapThreshold) {
+        newX = snapPositions.left;
+      } else if (Math.abs(newX - snapPositions.right) < snapThreshold) {
+        newX = snapPositions.right;
+      }
+      
+      // Snap to top or bottom edge
+      if (Math.abs(newY - snapPositions.top) < snapThreshold) {
+        newY = snapPositions.top;
+      } else if (Math.abs(newY - snapPositions.bottom) < snapThreshold) {
+        newY = snapPositions.bottom;
+      }
+
+      if (newX !== position.x || newY !== position.y) {
+        setPosition({ x: newX, y: newY });
+      }
+    };
+
+    constrainToViewport();
+    window.addEventListener('resize', constrainToViewport);
+    return () => window.removeEventListener('resize', constrainToViewport);
+  }, [position, isDragging]);
+
+  const handleDragStart = () => {
+    setIsDragging(true);
+    dragStartRef.current = position;
+  };
+
+  const handleDrag = (_: MouseEvent | TouchEvent | PointerEvent, info: PanInfo) => {
+    setPosition({
+      x: dragStartRef.current.x + info.offset.x,
+      y: dragStartRef.current.y + info.offset.y
+    });
+  };
+
+  const handleDragEnd = () => {
+    setIsDragging(false);
+  };
+
+  if (!currentTrack) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        ref={containerRef}
+        drag
+        dragMomentum={false}
+        dragElastic={0}
+        onDragStart={handleDragStart}
+        onDrag={handleDrag}
+        onDragEnd={handleDragEnd}
+        animate={{
+          x: position.x + window.innerWidth / 2,
+          y: position.y + window.innerHeight / 2,
+          scale: isDragging ? 1.02 : 1,
+          opacity: isDragging ? 0.8 : 1
+        }}
+        transition={{ type: 'spring', damping: 20 }}
+        style={{ 
+          position: 'fixed',
+          zIndex: 100,
+          transform: `translate(-50%, -50%)`
+        }}
+        className="cursor-grab active:cursor-grabbing"
+        onClick={handleContainerClick}
+      >
+        <div 
+          className="backdrop-blur-sm border rounded-lg shadow-xl hover:shadow-2xl transition-shadow p-3 w-[280px]"
+          style={{
+            backgroundColor: dominantColor 
+              ? `${dominantColor.replace('rgb', 'rgba').replace(')', ', 0.15)')}` 
+              : 'var(--background-color, rgba(0, 0, 0, 0.8))',
+            borderColor: dominantColor 
+              ? `${dominantColor.replace('rgb', 'rgba').replace(')', ', 0.3)')}` 
+              : 'var(--border-color, rgba(255, 255, 255, 0.1))'
+          }}
+        >
+          {/* Progress bar at the top */}
+          <div className="mb-3" onClick={handleProgressClick}>
+            <Progress 
+              value={progress} 
+              className="h-1 cursor-pointer" 
+              style={{
+                backgroundColor: dominantColor 
+                  ? `${dominantColor.replace('rgb', 'rgba').replace(')', ', 0.2)')}` 
+                  : undefined,
+                '--progress-color': dominantColor || undefined
+              } as React.CSSProperties}
+            />
+          </div>
+          
+          <div className="flex items-center gap-3">
+            {/* Album Art - Animated transition */}
+            <AnimatePresence mode="wait">
+              <motion.div 
+                key={currentTrack.id}
+                className="relative w-12 h-12 shrink-0"
+                initial={{ opacity: 0, scale: 0.9 }}
+                animate={{ opacity: 1, scale: 1 }}
+                exit={{ opacity: 0, scale: 0.9 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Image
+                  src={currentTrack.coverArt || '/default-user.jpg'}
+                  alt={currentTrack.name}
+                  fill
+                  className="rounded-md object-cover shadow-md"
+                  sizes="48px"
+                  priority
+                />
+              </motion.div>
+            </AnimatePresence>
+
+            {/* Track Info */}
+            <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>
+
+          {/* Keyboard shortcut hint */}
+          <div className="text-xs text-muted-foreground text-center mt-2 px-2">
+            Double-click to expand • Arrow keys to move
+          </div>
+
+          {/* Controls */}
+          <div className="flex items-center justify-between mt-2 px-2">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleCurrentTrackStar();
+              }}
+              className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+              title={currentTrack.starred ? 'Remove from favorites' : 'Add to favorites'}
+            >
+              <Heart
+                className={`w-4 h-4 ${currentTrack.starred ? 'text-primary fill-primary' : ''}`}
+              />
+            </button>
+
+            <div className="flex items-center gap-2">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  playPreviousTrack();
+                }}
+                className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+              >
+                <FaBackward className="w-3 h-3" />
+              </button>
+
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  togglePlayPause();
+                }}
+                className="p-3 hover:bg-muted/50 rounded-full transition-colors"
+              >
+                {isPlaying ? (
+                  <FaPause className="w-4 h-4" />
+                ) : (
+                  <FaPlay className="w-4 h-4" />
+                )}
+              </button>
+
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  playNextTrack();
+                }}
+                className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+              >
+                <FaForward className="w-3 h-3" />
+              </button>
+            </div>
+
+            <div className="relative">
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  setShowVolumeSlider(prev => !prev);
+                }}
+                className="p-2 hover:bg-muted/50 rounded-full transition-colors"
+                title="Volume"
+              >
+                {volume === 0 ? (
+                  <FaVolumeXmark className="w-4 h-4" />
+                ) : (
+                  <FaVolumeHigh className="w-4 h-4" />
+                )}
+              </button>
+              
+              {/* Volume Slider */}
+              {showVolumeSlider && (
+                <div 
+                  className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 p-2 bg-background/95 backdrop-blur-sm border rounded-lg shadow-lg"
+                  onClick={e => e.stopPropagation()}
+                >
+                  <input
+                    type="range"
+                    min="0"
+                    max="1"
+                    step="0.01"
+                    value={volume}
+                    onChange={handleVolumeChange}
+                    className="w-24 accent-foreground"
+                  />
+                </div>
+              )}
+            </div>
+          </div>
+          
+          {/* Expand button in top-right corner */}
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onExpand();
+            }}
+            className="absolute top-2 right-2 p-1.5 hover:bg-muted/50 rounded-full transition-colors"
+            title="Expand"
+          >
+            <FaExpand className="w-3 h-3" />
+          </button>
+        </div>
+      </motion.div>
+    </AnimatePresence>
+  );
+};

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';
@@ -8,6 +9,9 @@ import { Progress } from '@/components/ui/progress';
 import { lrcLibClient } from '@/lib/lrclib';
 import Link from 'next/link';
 import { useIsMobile } from '@/hooks/use-mobile';
+import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
+import { useGlobalSearch } from './GlobalSearchProvider';
+import { AudioSettingsDialog } from './AudioSettingsDialog';
 import { 
   FaPlay, 
   FaPause, 
@@ -19,7 +23,8 @@ import {
   FaRepeat,
   FaXmark,
   FaQuoteLeft,
-  FaListUl
+  FaListUl,
+  FaSliders
 } from "react-icons/fa6";
 import { Heart } from 'lucide-react';
 import { ScrollArea } from '@/components/ui/scroll-area';
@@ -45,8 +50,11 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     shuffle, 
     toggleShuffle, 
     toggleCurrentTrackStar,
-    queue 
+    queue,
+    audioSettings,
+    updateAudioSettings
   } = useAudioPlayer();
+  const [showAudioSettings, setShowAudioSettings] = useState(false);
   
   const isMobile = useIsMobile();
   const router = useRouter();
@@ -63,6 +71,22 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
   const [activeTab, setActiveTab] = useState<MobileTab>('player');
   const lyricsRef = useRef<HTMLDivElement>(null);
 
+  // Initialize volume from saved preference when fullscreen opens
+  useEffect(() => {
+    if (!isOpen) return;
+    try {
+      const savedVolume = localStorage.getItem('navidrome-volume');
+      if (savedVolume !== null) {
+        const vol = parseFloat(savedVolume);
+        if (!isNaN(vol) && vol >= 0 && vol <= 1) {
+          setVolume(vol);
+          const mainAudio = document.querySelector('audio') as HTMLAudioElement | null;
+          if (mainAudio) mainAudio.volume = vol;
+        }
+      }
+    } catch {}
+  }, [isOpen]);
+
   // Debug logging for component changes
   useEffect(() => {
     console.log('🔍 FullScreenPlayer state changed:', {
@@ -127,7 +151,9 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             const containerHeight = scrollContainer.clientHeight;
             const elementTop = currentLyricElement.offsetTop;
             const elementHeight = currentLyricElement.offsetHeight;
-            const targetScrollTop = elementTop - (containerHeight / 2) + (elementHeight / 2);
+            // Position the active lyric higher on the screen (~25% from top)
+            const focusFraction = 0.25; // 0.5 would be center
+            const targetScrollTop = elementTop - (containerHeight * focusFraction) + (elementHeight / 2);
             
             scrollContainer.scrollTo({
               top: Math.max(0, targetScrollTop),
@@ -378,6 +404,9 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     
     mainAudio.currentTime = newTime;
     setCurrentTime(newTime);
+    try {
+      localStorage.setItem('navidrome-current-track-time', newTime.toString());
+    } catch {}
   };
 
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -387,14 +416,68 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
     const newVolume = parseInt(e.target.value) / 100;
     mainAudio.volume = newVolume;
     setVolume(newVolume);
+    try {
+      localStorage.setItem('navidrome-volume', newVolume.toString());
+    } catch {}
   };
 
+  // Volume control functions for keyboard shortcuts
+  const handleVolumeUp = () => {
+    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+    if (!mainAudio) return;
+    const newVolume = Math.min(1, mainAudio.volume + 0.1);
+    mainAudio.volume = newVolume;
+    setVolume(newVolume);
+    try {
+      localStorage.setItem('navidrome-volume', newVolume.toString());
+    } catch {}
+  };
+
+  const handleVolumeDown = () => {
+    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+    if (!mainAudio) return;
+    const newVolume = Math.max(0, mainAudio.volume - 0.1);
+    mainAudio.volume = newVolume;
+    setVolume(newVolume);
+    try {
+      localStorage.setItem('navidrome-volume', newVolume.toString());
+    } catch {}
+  };
+
+  const handleToggleMute = () => {
+    const mainAudio = document.querySelector('audio') as HTMLAudioElement;
+    if (!mainAudio) return;
+    const newVolume = mainAudio.volume === 0 ? 1 : 0;
+    mainAudio.volume = newVolume;
+    setVolume(newVolume);
+    try {
+      localStorage.setItem('navidrome-volume', newVolume.toString());
+    } catch {}
+  };
+
+  const { openSpotlight } = useGlobalSearch();
+
+  // Set up keyboard shortcuts for fullscreen player
+  useKeyboardShortcuts({
+    onPlayPause: togglePlayPause,
+    onNextTrack: playNextTrack,
+    onPreviousTrack: playPreviousTrack,
+    onVolumeUp: handleVolumeUp,
+    onVolumeDown: handleVolumeDown,
+    onToggleMute: handleToggleMute,
+    onSpotlightSearch: openSpotlight,
+    disabled: !isOpen || !currentTrack // Only active when fullscreen is open
+  });
+
   const handleLyricClick = (time: number) => {
     const mainAudio = document.querySelector('audio') as HTMLAudioElement;
     if (!mainAudio) return;
 
     mainAudio.currentTime = time;
     setCurrentTime(time);
+    try {
+      localStorage.setItem('navidrome-current-track-time', time.toString());
+    } catch {}
     
     // Update progress bar as well
     if (duration > 0) {
@@ -410,15 +493,24 @@ 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 +520,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 +534,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 +548,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 +594,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                 <FaXmark className="w-5 h-5" />
               </button>
             </div>
-          </div>
+          </motion.div>
         )}
 
         {/* Main Content */}
@@ -502,20 +603,32 @@ 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">
-                    {/* Mobile Album Art */}
-                    <div className="relative mb-6 shrink-0">
-                      <Image
-                        src={currentTrack.coverArt || '/default-album.png'}
-                        alt={currentTrack.album}
-                        width={260}
-                        height={260}
-                        className={`rounded-lg shadow-2xl object-cover transition-all duration-300 ${
-                          !isPlaying ? 'w-52 h-52 opacity-70 scale-95' : 'w-64 h-64'
-                        }`}
-                        priority
-                      />
+                  <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 (crossfade on track change) */}
+                    <div className="relative mb-6 shrink-0 flex items-center justify-center" style={{ minHeight: 208 }}>
+                      <AnimatePresence mode="wait" initial={false}>
+                        <motion.div
+                          key={currentTrack.id}
+                          initial={{ opacity: 0, scale: 0.98 }}
+                          animate={{ opacity: 1, scale: 1 }}
+                          exit={{ opacity: 0, scale: 1.02, position: 'absolute' as const }}
+                          transition={{ duration: 0.25 }}
+                          className="flex items-center justify-center"
+                        >
+                          <Image
+                            src={currentTrack.coverArt || '/default-album.png'}
+                            alt={currentTrack.album}
+                            width={260}
+                            height={260}
+                            className={`rounded-lg shadow-2xl object-cover transition-all duration-300 ${
+                              !isPlaying ? 'w-52 h-52 opacity-70 scale-95' : 'w-64 h-64'
+                            }`}
+                            priority
+                          />
+                        </motion.div>
+                      </AnimatePresence>
                     </div>
 
                     {/* Track Info - Left Aligned and Heart on Same Line */}
@@ -621,24 +734,27 @@ 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}
                     >
-                      <div className="space-y-3 py-4">
+            <div className="space-y-4 py-10">
                         {lyrics.map((line, index) => (
-                          <div
+                          <motion.div
                             key={index}
                             data-lyric-index={index}
                             onClick={() => handleLyricClick(line.time)}
-                            className={`text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground px-2 ${
+                            initial={false}
+              animate={index === currentLyricIndex ? { scale: 1.06, opacity: 1 } : index < currentLyricIndex ? { scale: 0.985, opacity: 0.75 } : { scale: 0.98, opacity: 0.6 }}
+                            transition={{ duration: 0.2 }}
+              className={`text-2xl sm:text-3xl leading-relaxed transition-colors duration-200 break-words cursor-pointer hover:text-foreground px-2 ${
                               index === currentLyricIndex
-                                ? 'text-foreground font-bold text-xl'
+                ? 'text-foreground font-extrabold leading-tight text-5xl sm:text-6xl'
                                 : index < currentLyricIndex
                                 ? 'text-foreground/60'
                                 : 'text-foreground/40'
@@ -647,21 +763,25 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                               wordWrap: 'break-word',
                               overflowWrap: 'break-word',
                               hyphens: 'auto',
-                              paddingBottom: '4px'
+                              paddingBottom: '4px',
+                              // Subtle glow to make the current line feel elevated
+                              textShadow: index === currentLyricIndex 
+                                ? '0 4px 16px rgba(0,0,0,0.7), 0 0 24px rgba(255,255,255,0.16)'
+                                : undefined
                             }}
                             title={`Click to jump to ${formatTime(line.time)}`}
                           >
                             {line.text || '♪'}
-                          </div>
+                          </motion.div>
                         ))}
-                        <div style={{ height: '200px' }} />
+                        <div style={{ height: '260px' }} />
                       </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,11 +810,10 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                         ))}
                       </div>
                     </ScrollArea>
-                  </div>
+                  </motion.div>
                 )}
+                </AnimatePresence>
               </div>
-
-              {/* Mobile Tab Bar */}
               <div className="flex-shrink-0 pb-safe">
                 <div className="flex justify-around py-4 mb-2">
                   <button
@@ -733,16 +852,27 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             <div className="h-full flex flex-row gap-8 p-6 overflow-hidden">
               {/* Left Side - Album Art and Controls */}
               <div className="flex flex-col items-center justify-center min-h-0 flex-1 min-w-0">
-                {/* Album Art */}
-                <div className="relative mb-6 shrink-0">
-                  <Image
-                    src={currentTrack.coverArt || '/default-album.png'}
-                    alt={currentTrack.album}
-                    width={320}
-                    height={320}
-                    className="w-80 h-80 rounded-lg shadow-2xl object-cover"
-                    priority
-                  />
+                {/* Album Art (crossfade on track change) */}
+                <div className="relative mb-6 shrink-0 w-80 h-80">
+                  <AnimatePresence mode="wait" initial={false}>
+                    <motion.div
+                      key={currentTrack.id}
+                      className="absolute inset-0"
+                      initial={{ opacity: 0, scale: 0.985 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 1.02 }}
+                      transition={{ duration: 0.25 }}
+                    >
+                      <Image
+                        src={currentTrack.coverArt || '/default-album.png'}
+                        alt={currentTrack.album}
+                        width={320}
+                        height={320}
+                        className="w-80 h-80 rounded-lg shadow-2xl object-cover"
+                        priority
+                      />
+                    </motion.div>
+                  </AnimatePresence>
                 </div>
 
                 {/* Track Info */}
@@ -838,6 +968,14 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                     </button>
                   )}
 
+                  <button
+                    onClick={() => setShowAudioSettings(true)}
+                    className="p-2 hover:bg-gray-700/50 rounded-full transition-colors"
+                    title="Audio Settings"
+                  >
+                    <FaSliders className="w-5 h-5" />
+                  </button>
+                  
                   {showVolumeSlider && (
                     <div 
                       className="w-24"
@@ -857,19 +995,28 @@ 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">
+                      <div className="space-y-3 pl-4 pr-4 py-8">
                         {lyrics.map((line, index) => (
-                          <div
+                          <motion.div
                             key={index}
                             data-lyric-index={index}
                             onClick={() => handleLyricClick(line.time)}
-                            className={`text-base leading-relaxed transition-all duration-300 break-words cursor-pointer hover:text-foreground ${
+                            initial={false}
+                            animate={index === currentLyricIndex ? { scale: 1.04, opacity: 1 } : index < currentLyricIndex ? { scale: 0.985, opacity: 0.75 } : { scale: 0.98, opacity: 0.5 }}
+                            transition={{ duration: 0.2 }}
+                            className={`text-base leading-relaxed transition-colors duration-200 break-words cursor-pointer hover:text-foreground ${
                               index === currentLyricIndex
-                                ? 'text-foreground font-bold text-2xl'
+                                ? 'text-foreground font-extrabold leading-tight text-5xl'
                                 : index < currentLyricIndex
                                 ? 'text-foreground/60'
                                 : 'text-foreground/40'
@@ -879,23 +1026,35 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
                               overflowWrap: 'break-word',
                               hyphens: 'auto',
                               paddingBottom: '4px',
-                              paddingLeft: '8px'
+                              paddingLeft: '8px',
+                              // Subtle glow to make the current line feel elevated
+                              textShadow: index === currentLyricIndex 
+                                ? '0 6px 18px rgba(0,0,0,0.7), 0 0 28px rgba(255,255,255,0.18)'
+                                : undefined
                             }}
                             title={`Click to jump to ${formatTime(line.time)}`}
                           >
                             {line.text || '♪'}
-                          </div>
+                          </motion.div>
                         ))}
-                        <div style={{ height: '200px' }} />
+                        <div style={{ height: '240px' }} />
                       </div>
                     </ScrollArea>
                   </div>
-                </div>
+                </motion.div>
               )}
+              </AnimatePresence>
             </div>
           )}
         </div>
-      </div>
-    </div>
+      </motion.div>
+  </motion.div>
+  )}
+    </AnimatePresence>
+    <AudioSettingsDialog 
+      isOpen={showAudioSettings}
+      onClose={() => setShowAudioSettings(false)}
+    />
+    </>
   );
 };

app/components/GlobalSearchProvider.tsx

@@ -0,0 +1,46 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback } from 'react';
+import { SpotlightSearch } from './SpotlightSearch';
+
+interface GlobalSearchContextProps {
+  isSpotlightOpen: boolean;
+  openSpotlight: () => void;
+  closeSpotlight: () => void;
+}
+
+const GlobalSearchContext = createContext<GlobalSearchContextProps | undefined>(undefined);
+
+export function GlobalSearchProvider({ children }: { children: React.ReactNode }) {
+  const [isSpotlightOpen, setIsSpotlightOpen] = useState(false);
+
+  const openSpotlight = useCallback(() => {
+    setIsSpotlightOpen(true);
+  }, []);
+
+  const closeSpotlight = useCallback(() => {
+    setIsSpotlightOpen(false);
+  }, []);
+
+  return (
+    <GlobalSearchContext.Provider value={{
+      isSpotlightOpen,
+      openSpotlight,
+      closeSpotlight
+    }}>
+      {children}
+      <SpotlightSearch 
+        isOpen={isSpotlightOpen} 
+        onClose={closeSpotlight} 
+      />
+    </GlobalSearchContext.Provider>
+  );
+}
+
+export function useGlobalSearch() {
+  const context = useContext(GlobalSearchContext);
+  if (!context) {
+    throw new Error('useGlobalSearch must be used within a GlobalSearchProvider');
+  }
+  return context;
+}

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/PostHogProvider.tsx

@@ -1,50 +0,0 @@
-"use client"
-
-import posthog from "posthog-js"
-import { PostHogProvider as PHProvider, usePostHog } from "posthog-js/react"
-import { Suspense, useEffect } from "react"
-import { usePathname, useSearchParams } from "next/navigation"
-
-function PathnameTracker() {
-  const posthogClient = usePostHog()
-  const pathname = usePathname()
-  const searchParams = useSearchParams()
-
-  useEffect(() => {
-    if (posthogClient) {
-      posthogClient.capture('$pageview', {
-        path: pathname + (searchParams.toString() ? `?${searchParams.toString()}` : ''),
-      })
-    }
-  }, [posthogClient, pathname, searchParams])
-
-  return null
-}
-
-function SuspendedPostHogPageView() {
-  return (
-    <Suspense fallback={null}>
-      <PathnameTracker />
-    </Suspense>
-  )
-}
-
-export function PostHogProvider({ children }: { children: React.ReactNode }) {
-  useEffect(() => {
-    posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-      api_host: "/ingest",
-      ui_host: "https://us.posthog.com",
-      capture_pageview: 'history_change',
-      capture_pageleave: true,
-      capture_exceptions: true,
-      debug: process.env.NODE_ENV === "development",
-    })
-  }, [])
-
-  return (
-    <PHProvider client={posthog}>
-      <SuspendedPostHogPageView />
-      {children}
-    </PHProvider>
-  )
-}

app/components/RootLayoutClient.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import React from "react";
+import React, { useEffect } from "react";
 import { AudioPlayerProvider } from "../components/AudioPlayerContext";
 import { NavidromeProvider, useNavidrome } from "../components/NavidromeContext";
 import { NavidromeConfigProvider } from "../components/NavidromeConfigContext";
 import { ThemeProvider } from "../components/ThemeProvider";
-import { PostHogProvider } from "../components/PostHogProvider";
 import { WhatsNewPopup } from "../components/WhatsNewPopup";
 import Ihateserverside from "./ihateserverside";
 import DynamicViewportTheme from "./DynamicViewportTheme";
@@ -13,9 +12,29 @@ 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";
+import { GlobalSearchProvider } from "./GlobalSearchProvider";
+
+// ServiceWorkerRegistration component to handle registration
+function ServiceWorkerRegistration() {
+  useEffect(() => {
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.register('/sw.js')
+        .then((registration) => {
+          console.log('Service Worker registered successfully:', registration);
+        })
+        .catch((error) => {
+          console.error('Service Worker registration failed:', error);
+        });
+    }
+  }, []);
+  
+  return null;
+}
 
 function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
-  const { error } = useNavidrome();
+  // For now, since we're switching to offline-first, we'll handle errors differently
+  // The offline provider will handle connectivity issues automatically
   const [isClient, setIsClient] = React.useState(false);
   const [hasCompletedOnboarding, setHasCompletedOnboarding] = React.useState(true); // Default to true to prevent flash
   
@@ -58,10 +77,9 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
     return <>{children}</>;
   }
   
-  // Show start screen ONLY if:
-  // 1. First-time user (no onboarding completed), OR
-  // 2. User has completed onboarding BUT there's an error AND no config exists
-  const shouldShowStartScreen = !hasCompletedOnboarding || (hasCompletedOnboarding && error && !hasAnyConfig);
+  // Show start screen ONLY if first-time user (no onboarding completed)
+  // In offline-first mode, we don't need to check for errors since the app works offline
+  const shouldShowStartScreen = !hasCompletedOnboarding;
   
   if (shouldShowStartScreen) {
     return (
@@ -82,23 +100,24 @@ function NavidromeErrorBoundary({ children }: { children: React.ReactNode }) {
 
 export default function RootLayoutClient({ children }: { children: React.ReactNode }) {
   return (
-    <PostHogProvider>
-      <ThemeProvider>
-        <DynamicViewportTheme />
-        <ThemeColorHandler />
-        <NavidromeConfigProvider>
-          <NavidromeProvider>
-            <NavidromeErrorBoundary>
-              <AudioPlayerProvider>
+    <ThemeProvider>
+      <DynamicViewportTheme />
+      <ThemeColorHandler />
+      <ServiceWorkerRegistration />
+      <NavidromeConfigProvider>
+        <NavidromeProvider>
+          <NavidromeErrorBoundary>
+            <AudioPlayerProvider>
+              <GlobalSearchProvider>
                 <Ihateserverside>
-                  {children}
+                  <PageTransition>{children}</PageTransition>
                 </Ihateserverside>
                 <WhatsNewPopup />
-              </AudioPlayerProvider>
-            </NavidromeErrorBoundary>
-          </NavidromeProvider>
-        </NavidromeConfigProvider>
-      </ThemeProvider>
-    </PostHogProvider>
+              </GlobalSearchProvider>
+            </AudioPlayerProvider>
+          </NavidromeErrorBoundary>
+        </NavidromeProvider>
+      </NavidromeConfigProvider>
+    </ThemeProvider>
   );
 }

app/components/SongRecommendations.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
-import { Song, Album } from '@/lib/navidrome';
+import { Song, Album, getNavidromeAPI } from '@/lib/navidrome';
 import { useNavidrome } from '@/app/components/NavidromeContext';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
 import { useIsMobile } from '@/hooks/use-mobile';
@@ -17,7 +17,7 @@ interface SongRecommendationsProps {
 }
 
 export function SongRecommendations({ userName }: SongRecommendationsProps) {
-  const { api, isConnected } = useNavidrome();
+  const { api } = useNavidrome();
   const { playTrack, shuffle, toggleShuffle } = useAudioPlayer();
   const isMobile = useIsMobile();
   const [recommendedSongs, setRecommendedSongs] = useState<Song[]>([]);
@@ -42,66 +42,62 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
 
   useEffect(() => {
     const loadRecommendations = async () => {
-      if (!api || !isConnected) return;
-      
       setLoading(true);
       try {
-        // Get random albums for both mobile album view and desktop song extraction
-        const randomAlbums = await api.getAlbums('random', 10);
+        const api = getNavidromeAPI();
         
-        if (isMobile) {
-          // For mobile: show 6 random albums
-          setRecommendedAlbums(randomAlbums.slice(0, 6));
-        } else {
-          // For desktop: extract songs from albums (original behavior)
-          const allSongs: Song[] = [];
-          
-          // Get songs from first few albums
-          for (let i = 0; i < Math.min(3, randomAlbums.length); i++) {
-            try {
-              const albumSongs = await api.getAlbumSongs(randomAlbums[i].id);
-              allSongs.push(...albumSongs);
-            } catch (error) {
-              console.error('Failed to get album songs:', error);
+        if (api) {
+          // Use server-side recommendations
+          const randomAlbums = await api.getAlbums('random', 10);
+          if (isMobile) {
+            setRecommendedAlbums(randomAlbums.slice(0, 6));
+          } else {
+            const allSongs: Song[] = [];
+            for (let i = 0; i < Math.min(3, randomAlbums.length); i++) {
+              try {
+                const albumSongs = await api.getAlbumSongs(randomAlbums[i].id);
+                allSongs.push(...albumSongs);
+              } catch (error) {
+                console.error('Failed to get album songs:', error);
+              }
             }
+            const shuffled = allSongs.sort(() => Math.random() - 0.5);
+            const recommendations = shuffled.slice(0, 6);
+            setRecommendedSongs(recommendations);
+            const states: Record<string, boolean> = {};
+            recommendations.forEach((song: Song) => { states[song.id] = !!song.starred; });
+            setSongStates(states);
           }
-          
-          // Shuffle and limit to 6 songs
-          const shuffled = allSongs.sort(() => Math.random() - 0.5);
-          const recommendations = shuffled.slice(0, 6);
-          setRecommendedSongs(recommendations);
-          
-          // Initialize starred states for songs
-          const states: Record<string, boolean> = {};
-          recommendations.forEach((song: Song) => {
-            states[song.id] = !!song.starred;
-          });
-          setSongStates(states);
         }
       } catch (error) {
         console.error('Failed to load recommendations:', error);
+        setRecommendedAlbums([]);
+        setRecommendedSongs([]);
       } finally {
         setLoading(false);
       }
     };
 
     loadRecommendations();
-  }, [api, isConnected, isMobile]);
+  }, [isMobile]);
 
   const handlePlaySong = async (song: Song) => {
-    if (!api) return;
-    
     try {
+      const api = getNavidromeAPI();
+      if (!api) return;
+      
+      const url = api.getStreamUrl(song.id);
+      const coverArt = song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined;
       const track = {
         id: song.id,
         name: song.title,
-        url: api.getStreamUrl(song.id),
+        url,
         artist: song.artist || 'Unknown Artist',
         artistId: song.artistId || '',
         album: song.album || 'Unknown Album',
         albumId: song.albumId || '',
         duration: song.duration || 0,
-        coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
+        coverArt,
         starred: !!song.starred
       };
       await playTrack(track, true);
@@ -111,23 +107,26 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
   };
 
   const handlePlayAlbum = async (album: Album) => {
-    if (!api) return;
-    
     try {
-      // Get album songs and play the first one
+      const api = getNavidromeAPI();
+      if (!api) return;
+      
       const albumSongs = await api.getAlbumSongs(album.id);
       if (albumSongs.length > 0) {
+        const first = albumSongs[0];
+        const url = api.getStreamUrl(first.id);
+        const coverArt = first.coverArt ? api.getCoverArtUrl(first.coverArt, 300) : undefined;
         const track = {
-          id: albumSongs[0].id,
-          name: albumSongs[0].title,
-          url: api.getStreamUrl(albumSongs[0].id),
-          artist: albumSongs[0].artist || 'Unknown Artist',
-          artistId: albumSongs[0].artistId || '',
-          album: albumSongs[0].album || 'Unknown Album',
-          albumId: albumSongs[0].albumId || '',
-          duration: albumSongs[0].duration || 0,
-          coverArt: albumSongs[0].coverArt ? api.getCoverArtUrl(albumSongs[0].coverArt, 64) : undefined,
-          starred: !!albumSongs[0].starred
+          id: first.id,
+          name: first.title,
+          url,
+          artist: first.artist || 'Unknown Artist',
+          artistId: first.artistId || '',
+          album: first.album || 'Unknown Album',
+          albumId: first.albumId || '',
+          duration: first.duration || 0,
+          coverArt,
+          starred: !!first.starred
         };
         await playTrack(track, true);
       }
@@ -222,9 +221,9 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
                   className="group cursor-pointer block"
                 >
                   <div className="relative aspect-square rounded-lg overflow-hidden bg-muted">
-                    {album.coverArt && api ? (
+                    {album.coverArt && getNavidromeAPI() ? (
                       <Image
-                        src={api.getCoverArtUrl(album.coverArt, 300)}
+            src={getNavidromeAPI()!.getCoverArtUrl(album.coverArt, 300)}
                         alt={album.name}
                         width={600}
                         height={600}
@@ -281,10 +280,10 @@ export function SongRecommendations({ userName }: SongRecommendationsProps) {
                 <CardContent className="px-2">
                   <div className="flex items-center gap-3">
                     <div className="relative w-12 h-12 rounded overflow-hidden bg-muted flex-shrink-0">
-                      {song.coverArt && api ? (
+                      {song.coverArt && getNavidromeAPI() ? (
                         <>
                           <Image
-                            src={api.getCoverArtUrl(song.coverArt, 48)}
+            src={getNavidromeAPI()!.getCoverArtUrl(song.coverArt, 48)}
                             alt={song.title}
                             fill
                             className="object-cover"

app/components/SpotlightSearch.tsx

@@ -0,0 +1,653 @@
+'use client';
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
+import { 
+  Search, 
+  X, 
+  Music, 
+  Disc, 
+  User, 
+  Clock, 
+  Heart,
+  Play,
+  Plus,
+  ExternalLink,
+  Info,
+  Star,
+  TrendingUp,
+  Users,
+  Calendar,
+  Globe
+} from 'lucide-react';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { lastFmAPI } from '@/lib/lastfm-api';
+import { Song, Album, Artist, getNavidromeAPI } from '@/lib/navidrome';
+import { useKeyboardShortcuts } from '@/hooks/use-keyboard-shortcuts';
+import Image from 'next/image';
+
+interface SpotlightSearchProps {
+  isOpen: boolean;
+  onClose: () => void;
+}
+
+interface LastFmTrackInfo {
+  name: string;
+  artist: {
+    name: string;
+    url: string;
+  };
+  album?: {
+    title: string;
+    image?: string;
+  };
+  wiki?: {
+    summary: string;
+    content: string;
+  };
+  duration?: string;
+  playcount?: string;
+  listeners?: string;
+  tags?: Array<{
+    name: string;
+    url: string;
+  }>;
+}
+
+interface LastFmTag {
+  name: string;
+  url: string;
+}
+
+interface LastFmArtist {
+  name: string;
+  url: string;
+  image?: Array<{ '#text': string; size: string }>;
+}
+
+interface LastFmBio {
+  summary: string;
+  content: string;
+}
+
+interface LastFmStats {
+  listeners: string;
+  playcount: string;
+}
+
+interface LastFmArtistInfo {
+  name: string;
+  bio?: LastFmBio;
+  stats?: LastFmStats;
+  tags?: {
+    tag: LastFmTag[];
+  };
+  similar?: {
+    artist: LastFmArtist[];
+  };
+  image?: Array<{ '#text': string; size: string }>;
+}
+
+interface SearchResult {
+  type: 'track' | 'album' | 'artist';
+  id: string;
+  title: string;
+  subtitle: string;
+  image?: string;
+  data: Song | Album | Artist;
+  lastFmData?: LastFmArtistInfo;
+}
+
+export function SpotlightSearch({ isOpen, onClose }: SpotlightSearchProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showDetails, setShowDetails] = useState(false);
+  const [selectedResult, setSelectedResult] = useState<SearchResult | null>(null);
+  const [lastFmDetails, setLastFmDetails] = useState<LastFmArtistInfo | null>(null);
+  
+  const inputRef = useRef<HTMLInputElement>(null);
+  const resultsRef = useRef<HTMLDivElement>(null);
+  const router = useRouter();
+  const api = getNavidromeAPI();
+  
+  const { search2 } = useNavidrome();
+  const { playTrack, addToQueue, insertAtBeginningOfQueue } = useAudioPlayer();
+
+  // Convert Song to Track with proper URL generation
+  const songToTrack = useCallback((song: Song) => {
+    if (!api) {
+      throw new Error('Navidrome API not configured');
+    }
+    
+    return {
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 512) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId,
+      starred: !!song.starred,
+      replayGain: song.replayGain || 0
+    };
+  }, [api]);
+
+  // Focus input when opened
+  useEffect(() => {
+    if (isOpen && inputRef.current) {
+      inputRef.current.focus();
+    }
+  }, [isOpen]);
+
+  // Close on escape
+  useKeyboardShortcuts({
+    disabled: !isOpen
+  });
+
+  // Handle keyboard navigation
+  useEffect(() => {
+    if (!isOpen) return;
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setSelectedIndex(prev => Math.min(prev + 1, results.length - 1));
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+          setSelectedIndex(prev => Math.max(prev - 1, 0));
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (results[selectedIndex]) {
+            handleResultSelect(results[selectedIndex]);
+          }
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (showDetails) {
+            setShowDetails(false);
+            setSelectedResult(null);
+          } else {
+            onClose();
+          }
+          break;
+        case 'Tab':
+          e.preventDefault();
+          if (results[selectedIndex]) {
+            handleShowDetails(results[selectedIndex]);
+          }
+          break;
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [isOpen, results, selectedIndex, showDetails, onClose]);
+
+  // Search function with debouncing
+  const performSearch = useCallback(async (searchQuery: string) => {
+    if (!searchQuery.trim()) {
+      setResults([]);
+      return;
+    }
+
+    setIsLoading(true);
+    try {
+      const searchResults = await search2(searchQuery);
+      const formattedResults: SearchResult[] = [];
+
+      // Add tracks
+      searchResults.songs?.forEach(song => {
+        formattedResults.push({
+          type: 'track',
+          id: song.id,
+          title: song.title,
+          subtitle: `${song.artist} • ${song.album}`,
+          image: song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 256) : undefined,
+          data: song
+        });
+      });
+
+      // Add albums
+      searchResults.albums?.forEach(album => {
+        formattedResults.push({
+          type: 'album',
+          id: album.id,
+          title: album.name,
+          subtitle: `${album.artist} • ${album.songCount} tracks`,
+          image: album.coverArt && api ? api.getCoverArtUrl(album.coverArt, 256) : undefined,
+          data: album
+        });
+      });
+
+      // Add artists
+      searchResults.artists?.forEach(artist => {
+        formattedResults.push({
+          type: 'artist',
+          id: artist.id,
+          title: artist.name,
+          subtitle: `${artist.albumCount} albums`,
+          image: artist.coverArt && api ? api.getCoverArtUrl(artist.coverArt, 256) : undefined,
+          data: artist
+        });
+      });
+
+      setResults(formattedResults);
+      setSelectedIndex(0);
+    } catch (error) {
+      console.error('Search failed:', error);
+      setResults([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [search2]);
+
+  // Debounced search
+  useEffect(() => {
+    const timeoutId = setTimeout(() => {
+      performSearch(query);
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  }, [query, performSearch]);
+
+  const handleResultSelect = (result: SearchResult) => {
+    switch (result.type) {
+      case 'track':
+        const songData = result.data as Song;
+        const track = songToTrack(songData);
+        playTrack(track, true);
+        onClose();
+        break;
+      case 'album':
+        router.push(`/album/${result.id}`);
+        onClose();
+        break;
+      case 'artist':
+        router.push(`/artist/${result.id}`);
+        onClose();
+        break;
+    }
+  };
+
+  const handleShowDetails = async (result: SearchResult) => {
+    setSelectedResult(result);
+    setShowDetails(true);
+    setLastFmDetails(null);
+
+    // Fetch Last.fm data
+    try {
+      let lastFmData = null;
+      
+      if (result.type === 'artist') {
+        const artistData = result.data as Artist;
+        lastFmData = await lastFmAPI.getArtistInfo(artistData.name);
+      } else if (result.type === 'album') {
+        // For albums, get artist info as Last.fm album info is limited
+        const albumData = result.data as Album;
+        lastFmData = await lastFmAPI.getArtistInfo(albumData.artist);
+      } else if (result.type === 'track') {
+        // For tracks, get artist info
+        const songData = result.data as Song;
+        lastFmData = await lastFmAPI.getArtistInfo(songData.artist);
+      }
+      
+      setLastFmDetails(lastFmData);
+    } catch (error) {
+      console.error('Failed to fetch Last.fm data:', error);
+    }
+  };
+
+  const handlePlayNext = (result: SearchResult) => {
+    if (result.type === 'track') {
+      const songData = result.data as Song;
+      const track = songToTrack(songData);
+      insertAtBeginningOfQueue(track);
+    }
+  };
+
+  const handleAddToQueue = (result: SearchResult) => {
+    if (result.type === 'track') {
+      const songData = result.data as Song;
+      const track = songToTrack(songData);
+      addToQueue(track);
+    }
+  };
+
+  const getResultIcon = (type: string) => {
+    switch (type) {
+      case 'track': return <Music className="w-4 h-4" />;
+      case 'album': return <Disc className="w-4 h-4" />;
+      case 'artist': return <User className="w-4 h-4" />;
+      default: return <Search className="w-4 h-4" />;
+    }
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <AnimatePresence>
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+      >
+        <div className="flex items-start justify-center pt-[10vh] px-4">
+          <motion.div
+            initial={{ opacity: 0, scale: 0.95, y: -20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.95, y: -20 }}
+            transition={{ type: "spring", duration: 0.4 }}
+            className="w-full max-w-2xl bg-background border border-border rounded-lg shadow-2xl overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+            {/* Search Input */}
+            <div className="flex items-center px-4 py-3 border-b border-border">
+              <Search className="w-5 h-5 text-muted-foreground mr-3" />
+              <Input
+                ref={inputRef}
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Search tracks, albums, artists..."
+                className="border-0 focus-visible:ring-0 text-lg bg-transparent"
+              />
+              {query && (
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setQuery('')}
+                  className="p-1 h-auto"
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              )}
+            </div>
+
+            {/* Results */}
+            <div className="max-h-96 overflow-hidden">
+              {isLoading ? (
+                <div className="flex items-center justify-center py-8">
+                  <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+                  <span className="ml-2 text-muted-foreground">Searching...</span>
+                </div>
+              ) : results.length > 0 ? (
+                <ScrollArea className="max-h-96" ref={resultsRef}>
+                  <div className="py-2">
+                    {results.map((result, index) => (
+                      <div
+                        key={`${result.type}-${result.id}`}
+                        className={`flex items-center px-4 py-3 cursor-pointer transition-colors ${
+                          index === selectedIndex ? 'bg-accent' : 'hover:bg-accent/50'
+                        }`}
+                        onClick={() => handleResultSelect(result)}
+                        onMouseEnter={() => setSelectedIndex(index)}
+                      >
+                        <div className="flex items-center space-x-3 flex-1 min-w-0">
+                          {result.image ? (
+                            <Image
+                              src={result.image}
+                              alt={result.title}
+                              width={40}
+                              height={40}
+                              className="w-10 h-10 rounded object-cover"
+                            />
+                          ) : (
+                            <div className="w-10 h-10 rounded bg-muted flex items-center justify-center">
+                              {getResultIcon(result.type)}
+                            </div>
+                          )}
+                          <div className="flex-1 min-w-0">
+                            <div className="font-medium truncate">{result.title}</div>
+                            <div className="text-sm text-muted-foreground truncate">
+                              {result.subtitle}
+                            </div>
+                          </div>
+                          <Badge variant="secondary" className="capitalize">
+                            {result.type}
+                          </Badge>
+                        </div>
+                        
+                        {/* Quick Actions */}
+                        <div className="flex items-center space-x-1 ml-3">
+                          {result.type === 'track' && (
+                            <>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handlePlayNext(result);
+                                }}
+                                className="h-8 w-8 p-0"
+                                title="Play Next"
+                              >
+                                <Play className="w-3 h-3" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={(e) => {
+                                  e.stopPropagation();
+                                  handleAddToQueue(result);
+                                }}
+                                className="h-8 w-8 p-0"
+                                title="Add to Queue"
+                              >
+                                <Plus className="w-3 h-3" />
+                              </Button>
+                            </>
+                          )}
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleShowDetails(result);
+                            }}
+                            className="h-8 w-8 p-0"
+                            title="Show Details (Tab)"
+                          >
+                            <Info className="w-3 h-3" />
+                          </Button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </ScrollArea>
+              ) : query.trim() ? (
+                <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                  <Search className="w-8 h-8 mb-2" />
+                  <p>No results found for &ldquo;{query}&rdquo;</p>
+                </div>
+              ) : (
+                <div className="flex flex-col items-center justify-center py-8 text-muted-foreground">
+                  <Music className="w-8 h-8 mb-2" />
+                  <p>Start typing to search your music library</p>
+                  <div className="text-xs mt-2 space-y-1">
+                    <p>• Use ↑↓ to navigate • Enter to select</p>
+                    <p>• Tab for details • Esc to close</p>
+                  </div>
+                </div>
+              )}
+            </div>
+          </motion.div>
+        </div>
+
+        {/* Details Panel */}
+        <AnimatePresence>
+          {showDetails && selectedResult && (
+            <motion.div
+              initial={{ opacity: 0, x: 400 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 400 }}
+              transition={{ type: "spring", duration: 0.4 }}
+              className="fixed right-4 top-[10vh] bottom-4 w-80 bg-background border border-border rounded-lg shadow-2xl overflow-hidden"
+            >
+              <div className="flex items-center justify-between p-4 border-b border-border">
+                <h3 className="font-semibold">Details</h3>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={() => setShowDetails(false)}
+                  className="h-8 w-8 p-0"
+                >
+                  <X className="w-4 h-4" />
+                </Button>
+              </div>
+              
+              <ScrollArea className="h-full">
+                <div className="p-4 space-y-4">
+                  {/* Basic Info */}
+                  <div className="space-y-3">
+                    {selectedResult.image && (
+                      <Image
+                        src={selectedResult.image}
+                        alt={selectedResult.title}
+                        width={200}
+                        height={200}
+                        className="w-full aspect-square rounded object-cover"
+                      />
+                    )}
+                    <div>
+                      <h4 className="font-semibold text-lg">{selectedResult.title}</h4>
+                      <p className="text-muted-foreground">{selectedResult.subtitle}</p>
+                      <Badge variant="secondary" className="mt-1 capitalize">
+                        {selectedResult.type}
+                      </Badge>
+                    </div>
+                  </div>
+
+                  {/* Last.fm Data */}
+                  {lastFmDetails && (
+                    <>
+                      <Separator />
+                      <div className="space-y-3">
+                        <div className="flex items-center space-x-2">
+                          <ExternalLink className="w-4 h-4" />
+                          <span className="font-medium">Last.fm Info</span>
+                        </div>
+
+                        {/* Stats */}
+                        {lastFmDetails.stats && (
+                          <div className="grid grid-cols-2 gap-3">
+                            <div className="text-center p-2 bg-muted rounded">
+                              <div className="flex items-center justify-center space-x-1 mb-1">
+                                <Users className="w-3 h-3" />
+                                <span className="text-xs font-medium">Listeners</span>
+                              </div>
+                              <div className="text-sm font-semibold">
+                                {parseInt(lastFmDetails.stats.listeners).toLocaleString()}
+                              </div>
+                            </div>
+                            <div className="text-center p-2 bg-muted rounded">
+                              <div className="flex items-center justify-center space-x-1 mb-1">
+                                <TrendingUp className="w-3 h-3" />
+                                <span className="text-xs font-medium">Plays</span>
+                              </div>
+                              <div className="text-sm font-semibold">
+                                {parseInt(lastFmDetails.stats.playcount).toLocaleString()}
+                              </div>
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Bio */}
+                        {lastFmDetails.bio?.summary && (
+                          <div>
+                            <h5 className="font-medium mb-2">Biography</h5>
+                            <p className="text-sm text-muted-foreground leading-relaxed">
+                              {lastFmDetails.bio.summary.replace(/<[^>]*>/g, '').split('\n')[0]}
+                            </p>
+                          </div>
+                        )}
+
+                        {/* Tags */}
+                        {lastFmDetails.tags?.tag && (
+                          <div>
+                            <h5 className="font-medium mb-2">Tags</h5>
+                            <div className="flex flex-wrap gap-1">
+                              {lastFmDetails.tags.tag.slice(0, 6).map((tag: LastFmTag, index: number) => (
+                                <Badge key={index} variant="outline" className="text-xs">
+                                  {tag.name}
+                                </Badge>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+
+                        {/* Similar Artists */}
+                        {lastFmDetails.similar?.artist && (
+                          <div>
+                            <h5 className="font-medium mb-2">Similar Artists</h5>
+                            <div className="space-y-2">
+                              {lastFmDetails.similar.artist.slice(0, 4).map((artist: LastFmArtist, index: number) => (
+                                <div key={index} className="flex items-center space-x-2">
+                                  <div className="w-8 h-8 bg-muted rounded flex items-center justify-center">
+                                    <User className="w-3 h-3" />
+                                  </div>
+                                  <span className="text-sm">{artist.name}</span>
+                                </div>
+                              ))}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                    </>
+                  )}
+
+                  {/* Actions */}
+                  <Separator />
+                  <div className="space-y-2">
+                    <Button
+                      onClick={() => handleResultSelect(selectedResult)}
+                      className="w-full"
+                    >
+                      <Play className="w-4 h-4 mr-2" />
+                      {selectedResult.type === 'track' ? 'Play Track' : 
+                       selectedResult.type === 'album' ? 'View Album' : 'View Artist'}
+                    </Button>
+                    {selectedResult.type === 'track' && (
+                      <>
+                        <Button
+                          variant="outline"
+                          onClick={() => handlePlayNext(selectedResult)}
+                          className="w-full"
+                        >
+                          <Play className="w-4 h-4 mr-2" />
+                          Play Next
+                        </Button>
+                        <Button
+                          variant="outline"
+                          onClick={() => handleAddToQueue(selectedResult)}
+                          className="w-full"
+                        >
+                          <Plus className="w-4 h-4 mr-2" />
+                          Add to Queue
+                        </Button>
+                      </>
+                    )}
+                  </div>
+                </div>
+              </ScrollArea>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </motion.div>
+    </AnimatePresence>
+  );
+}

app/components/UserProfile.tsx

@@ -94,9 +94,9 @@ export function UserProfile({ variant = 'desktop' }: UserProfileProps) {
                 }}
               />
             ) : (
-              <div className="w-8 h-8 bg-primary/10 rounded-full flex items-center justify-center">
-                <User className="w-4 h-4 text-primary" />
-              </div>
+                <div className="w-4 h-4 bg-primary/10 rounded-full flex items-center justify-center">
+                <User className="w-2 h-2 text-primary" />
+                </div>
             )}
           </Button>
         </DropdownMenuTrigger>
@@ -106,8 +106,8 @@ export function UserProfile({ variant = 'desktop' }: UserProfileProps) {
               <Image
                 src={gravatarUrl}
                 alt={`${userInfo.username}'s avatar`}
-                width={16}
-                height={16}
+                width={32}
+                height={32}
                 className="rounded-full"
               />
             ) : (
@@ -207,3 +207,4 @@ export function UserProfile({ variant = 'desktop' }: UserProfileProps) {
     );
   }
 }
+

app/components/WhatsNewPopup.tsx

@@ -5,10 +5,34 @@ import { Button } from '@/components/ui/button';
 import { Badge } from '@/components/ui/badge';
 
 // Current app version from package.json
-const APP_VERSION = '2025.07.31';
+const APP_VERSION = '2026.01.24';
 
 // Changelog data - add new versions at the top
 const CHANGELOG = [
+  {
+    version: '2026.01.24',
+    title: 'January 2026 Update',
+    changes: [
+      'Improved SortableQueueItem component with enhanced click handling and styling',
+      'Added keyboard shortcuts and queue management features',
+      'Added ListeningStreakCard component for tracking listening streaks',
+      'Moved service worker registration to dedicated component for improved client-side handling',
+      'Implemented Auto-Tagging Settings and MusicBrainz integration',
+      'Enhanced audio settings with ReplayGain, crossfade, and equalizer presets',
+      'Added AudioSettingsDialog component',
+      'Updated cover art retrieval to use higher resolution images',
+      'Enhanced UI with Framer Motion animations for album artwork and artist icons',
+      'Added page transition animations and notification settings for audio playback',
+      'Updated all npm subdependencies to latest minor versions',
+    ],
+    fixes: [
+      'Updated README formatting and improved content clarity',
+    ],
+    breaking: [
+      'Removed PostHog analytics tracking',
+      'Removed all offline download and caching functionality',
+    ]
+  },
   {
     version: '2025.07.31',
     title: 'July End of Month Update',
@@ -47,7 +71,6 @@ const CHANGELOG = [
       'Enhanced Home page layout and content',
       'Themes updated to use OKLCH (from HSL)',
       'All themes updated (light themes look similar)',
-      'Caching system added (incomplete)',
       'Skeleton loading added across all pages'
     ],
     fixes: [

app/components/album-artwork.tsx

@@ -3,6 +3,7 @@
 import Image from "next/image"
 import { PlusCircledIcon } from "@radix-ui/react-icons"
 import { useRouter } from 'next/navigation';
+import { motion } from 'framer-motion';
 
 import { cn } from "@/lib/utils"
 import {
@@ -24,14 +25,18 @@ import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { ArtistIcon } from "@/app/components/artist-icon";
-import { Heart, Music, Disc, Mic, Play } from "lucide-react";
+import { Heart, Music, Disc, Mic, Play, Download } from "lucide-react";
 import { Album, Artist, Song } from "@/lib/navidrome";
 
-interface AlbumArtworkProps extends React.HTMLAttributes<HTMLDivElement> {
+interface AlbumArtworkProps extends Omit<
+  React.HTMLAttributes<HTMLDivElement>,
+  'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDragOver' | 'onDragEnter' | 'onDragLeave' | 'onDrop'
+> {
   album: Album
   aspectRatio?: "portrait" | "square"
   width?: number
   height?: number
+  loading?: 'eager' | 'lazy'
 }
 
 export function AlbumArtwork({
@@ -39,6 +44,7 @@ export function AlbumArtwork({
   aspectRatio = "portrait",
   width,
   height,
+  loading = 'lazy',
   className,
   ...props
 }: AlbumArtworkProps) {
@@ -69,6 +75,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 when present.
+      const r = router as unknown as { prefetch?: (href: string) => Promise<void> | void };
+      if (r && typeof r.prefetch === 'function') {
+        r.prefetch(`/album/${album.id}`);
+      }
+    } catch {}
+  };
+
   const handleAddToQueue = () => {
     addAlbumToQueue(album.id);
   };
@@ -124,9 +141,16 @@ export function AlbumArtwork({
     
   return (
     <div className={cn("space-y-3", className)} {...props}>
+      <motion.div
+        initial={{ opacity: 0, y: 10 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, amount: 0.15 }}
+        transition={{ duration: 0.2 }}
+        whileHover={{ y: -2 }}
+      >
       <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 ? (
                 <Image
@@ -138,7 +162,7 @@ export function AlbumArtwork({
                   onLoad={handleImageLoad}
                   onError={handleImageError}
                   priority={false}
-                  loading="lazy"
+                  loading={loading}
                 />
               ) : (
                 <div className="w-full h-full bg-muted rounded flex items-center justify-center">
@@ -150,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
@@ -213,6 +239,7 @@ export function AlbumArtwork({
           <ContextMenuItem>Share</ContextMenuItem>
         </ContextMenuContent>
       </ContextMenu>
+      </motion.div>
     </div>
   )
 }

app/components/artist-icon.tsx

@@ -4,6 +4,7 @@ import Image from "next/image"
 import { PlusCircledIcon } from "@radix-ui/react-icons"
 import { useRouter } from 'next/navigation';
 import { cn } from "@/lib/utils"
+import { motion } from 'framer-motion'
 import {
   ContextMenu,
   ContextMenuContent,
@@ -26,6 +27,7 @@ interface ArtistIconProps extends React.HTMLAttributes<HTMLDivElement> {
   size?: number
   imageOnly?: boolean
   responsive?: boolean
+  loading?: 'eager' | 'lazy'
 }
 
 export function ArtistIcon({
@@ -33,6 +35,7 @@ export function ArtistIcon({
   size = 150,
   imageOnly = false,
   responsive = false,
+  loading = 'lazy',
   className,
   ...props
 }: ArtistIconProps) {
@@ -76,6 +79,7 @@ export function ArtistIcon({
           width={size}
           height={size}
           className="w-full h-full object-cover transition-all hover:scale-105"
+          loading={loading}
         />
       </div>
     );
@@ -88,6 +92,13 @@ export function ArtistIcon({
     <div className={cn("space-y-3", className)} {...props}>
       <ContextMenu>
         <ContextMenuTrigger>
+          <motion.div
+            initial={{ opacity: 0, y: 8 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, amount: 0.2 }}
+            transition={{ duration: 0.2 }}
+            whileHover={{ y: -2 }}
+          >
           <Card key={artist.id} className="overflow-hidden cursor-pointer px-0 py-0 gap-0" onClick={() => handleClick()}>
             <div
               className="aspect-square relative group"
@@ -108,6 +119,7 @@ export function ArtistIcon({
                       }
                   )}
                   className={isResponsive ? "object-cover" : "object-cover w-full h-full"}
+                  loading={loading}
                 />
               </div>
             </div>
@@ -118,6 +130,7 @@ export function ArtistIcon({
               </p>
             </CardContent>
           </Card>
+          </motion.div>
         </ContextMenuTrigger>
         <ContextMenuContent className="w-40">
           <ContextMenuItem onClick={handleStar}>

app/components/menu.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/navigation';
 import Image from "next/image";
 import { Github, Mail, Menu as MenuIcon, X } from "lucide-react"
 import { UserProfile } from "@/app/components/UserProfile";
+import { useGlobalSearch } from "./GlobalSearchProvider";
 import {
     Menubar,
     MenubarCheckboxItem,
@@ -75,6 +76,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
     const [isClient, setIsClient] = useState(false);
     const [navidromeUrl, setNavidromeUrl] = useState<string | null>(null);
     const isMobile = useIsMobile();
+    const { openSpotlight } = useGlobalSearch();
 
     // Navigation items for mobile menu
     const navigationItems = [
@@ -189,11 +191,8 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           <MenubarMenu>
         <MenubarTrigger className="relative">File</MenubarTrigger>
         <MenubarContent>
-          <MenubarSub>
-            <MenubarSubTrigger>New</MenubarSubTrigger>
-            <MenubarSubContent className="w-[230px]">
-          <MenubarItem>
-            Playlist <MenubarShortcut>⌘N</MenubarShortcut>
+          <MenubarItem onClick={() => router.push('/library/playlists')}>
+            View Playlists
           </MenubarItem>
           <MenubarItem disabled>
             Playlist from Selection <MenubarShortcut>⇧⌘N</MenubarShortcut>
@@ -203,8 +202,6 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
           </MenubarItem>
           <MenubarItem>Playlist Folder</MenubarItem>
           <MenubarItem disabled>Genius Playlist</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
           <MenubarItem>
             Open Stream URL <MenubarShortcut>⌘U</MenubarShortcut>
           </MenubarItem>
@@ -333,9 +330,19 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
         </Menubar>
         )}
         
-        {/* User Profile - Desktop only */}
+        {/* User Profile and Search - Desktop only */}
         {!isMobile && (
-          <div className="ml-auto">
+          <div className="ml-auto flex items-center space-x-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={openSpotlight}
+              className="flex items-center space-x-2"
+              title="Search (/ or ⌘K)"
+            >
+              <Search className="w-4 h-4" />
+              <span className="hidden lg:inline">Search</span>
+            </Button>
             <UserProfile variant="desktop" />
           </div>
         )}
@@ -374,7 +381,7 @@ export function Menu({ toggleSidebar, isSidebarVisible, toggleStatusBar, isStatu
               ) : navidromeUrl ? (
                 navidromeUrl
               ) : (
-                <span className="italic text-gray-400">Not set</span>
+                <span className="italic text-gray-400">Auto-configured</span>
               )}
             </span>
           </div>

app/layout.tsx

@@ -26,12 +26,6 @@ export const metadata = {
       'max-snippet': -1,
     },
   },
-  viewport: {
-    width: 'device-width',
-    initialScale: 1,
-    maximumScale: 1,
-    userScalable: false,
-  },
   appleWebApp: {
     capable: true,
     statusBarStyle: 'black-translucent',
@@ -57,6 +51,13 @@ export const metadata = {
   },
 };
 
+export const viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  maximumScale: 1,
+  userScalable: false,
+};
+
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
   variable: "--font-geist-sans",
@@ -76,6 +77,7 @@ export default function Layout({ children }: LayoutProps) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
+        <link rel="manifest" href="/manifest.json" />
         <script
           dangerouslySetInnerHTML={{
             __html: `

app/library/songs/page.tsx

@@ -10,13 +10,15 @@ import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
-import { Search, Play, Plus, User, Disc } from 'lucide-react';
+import { Search, Play, Plus, User, Disc, ChevronLeft, ChevronRight } from 'lucide-react';
 import Loading from '@/app/components/loading';
 import { getNavidromeAPI } from '@/lib/navidrome';
 
 type SortOption = 'title' | 'artist' | 'album' | 'year' | 'duration' | 'track';
 type SortDirection = 'asc' | 'desc';
 
+const ITEMS_PER_PAGE = 50;
+
 export default function SongsPage() {
   const { getAllSongs } = useNavidrome();
   const { playTrack, addToQueue, currentTrack } = useAudioPlayer();
@@ -26,6 +28,7 @@ export default function SongsPage() {
   const [searchQuery, setSearchQuery] = useState('');
   const [sortBy, setSortBy] = useState<SortOption>('title');
   const [sortDirection, setSortDirection] = useState<SortDirection>('asc');
+  const [currentPage, setCurrentPage] = useState(1);
   const api = getNavidromeAPI();
 
   useEffect(() => {
@@ -100,6 +103,7 @@ export default function SongsPage() {
     });
 
     setFilteredSongs(filtered);
+    setCurrentPage(1); // Reset to first page when filters change
   }, [songs, searchQuery, sortBy, sortDirection]);
     const handlePlayClick = (song: Song) => {
     if (!api) {
@@ -114,7 +118,7 @@ export default function SongsPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -135,7 +139,7 @@ export default function SongsPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -154,6 +158,24 @@ export default function SongsPage() {
     return currentTrack?.id === song.id;
   };
 
+  // Pagination calculations
+  const totalPages = Math.ceil(filteredSongs.length / ITEMS_PER_PAGE);
+  const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
+  const endIndex = startIndex + ITEMS_PER_PAGE;
+  const paginatedSongs = filteredSongs.slice(startIndex, endIndex);
+
+  const goToNextPage = () => {
+    if (currentPage < totalPages) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
+  const goToPreviousPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
   if (loading) {
     return <Loading />;
   }
@@ -165,7 +187,8 @@ export default function SongsPage() {
         <div className="space-y-2">
           <h1 className="text-3xl font-semibold tracking-tight">Songs</h1>
           <p className="text-sm text-muted-foreground">
-            {filteredSongs.length} of {songs.length} songs
+            Showing {startIndex + 1}-{Math.min(endIndex, filteredSongs.length)} of {filteredSongs.length} songs
+            {searchQuery && ` (filtered from ${songs.length} total)`}
           </p>
         </div>
 
@@ -216,7 +239,7 @@ export default function SongsPage() {
             </div>
           ) : (
             <div className="space-y-1">
-              {filteredSongs.map((song, index) => (
+              {paginatedSongs.map((song, index) => (
                 <div
                   key={song.id}
                   className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors ${
@@ -232,7 +255,7 @@ export default function SongsPage() {
                       </div>
                     ) : (
                       <>
-                        <span className="group-hover:hidden">{index + 1}</span>
+                        <span className="group-hover:hidden">{startIndex + index + 1}</span>
                         <Play className="w-4 h-4 mx-auto hidden group-hover:block" />
                       </>
                     )}
@@ -298,6 +321,35 @@ export default function SongsPage() {
             </div>
           )}
         </ScrollArea>
+
+        {/* Pagination Controls */}
+        {filteredSongs.length > ITEMS_PER_PAGE && (
+          <div className="flex items-center justify-between pt-4">
+            <p className="text-sm text-muted-foreground">
+              Page {currentPage} of {totalPages}
+            </p>
+            <div className="flex gap-2">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToPreviousPage}
+                disabled={currentPage === 1}
+              >
+                <ChevronLeft className="w-4 h-4 mr-1" />
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={goToNextPage}
+                disabled={currentPage === totalPages}
+              >
+                Next
+                <ChevronRight className="w-4 h-4 ml-1" />
+              </Button>
+            </div>
+          </div>
+        )}
       </div>
     </div>
   );

app/manifest.ts

@@ -1,134 +0,0 @@
-import type { MetadataRoute } from 'next'
- 
-export default function manifest(): MetadataRoute.Manifest {
-  return {
-    name: 'Mice',
-    short_name: 'Mice',
-    description: 'a very awesome navidrome client',
-    start_url: '/',
-    categories: ["music", "entertainment"],
-    display_override: ['window-controls-overlay'],
-    display: 'standalone',
-    background_color: '#0f0f0f',
-    theme_color: '#0f0f0f',
-    icons: [
-      { 
-         src: '/favicon.ico', 
-         type: 'image/x-icon', 
-         sizes: '48x48'
-      },
-      { 
-         src: '/icon-192.png', 
-         type: 'image/png', 
-         sizes: '192x192' 
-      },
-      { 
-         src: '/icon-512.png', 
-         type: 'image/png', 
-         sizes: '512x512' 
-      },
-      { 
-         src: '/icon-192-maskable.png', 
-         type: 'image/png', 
-         sizes: '192x192', 
-         purpose: 'maskable' 
-      },
-      { 
-         src: './icon-512-maskable.png', 
-         type: 'image/png', 
-         sizes: '512x512', 
-         purpose: 'maskable'
-      },
-      // Apple Touch Icons for iOS
-      { 
-         src: '/apple-touch-icon.png', 
-         type: 'image/png', 
-         sizes: '180x180',
-         purpose: 'any'
-      },
-      { 
-         src: '/icon-192.png', 
-         type: 'image/png', 
-         sizes: '152x152',
-         purpose: 'any'
-      },
-      { 
-         src: '/icon-192.png', 
-         type: 'image/png', 
-         sizes: '120x120',
-         purpose: 'any'
-      }
-   ],
-      screenshots: [
-         {
-         src: '/home-preview.png',
-         sizes: '1920x1020',
-         type: 'image/png',
-         label: 'Home Preview',
-         form_factor: 'wide'
-         },
-         {
-         src: '/browse-preview.png',
-         sizes: '1920x1020',
-         type: 'image/png',
-         label: 'Browse Preview',
-         form_factor: 'wide'
-         },
-         {
-         src: '/album-preview.png',
-         sizes: '1920x1020',
-         type: 'image/png',
-         label: 'Album Preview',
-         form_factor: 'wide'
-         },
-         {
-         src: '/fullscreen-preview.png',
-         sizes: '1920x1020',
-         type: 'image/png',
-         label: 'Fullscreen Preview',
-         form_factor: 'wide'
-         }
-      ],
-      shortcuts: [
-         {
-            name: 'Resume Song',
-            short_name: 'Resume',
-            description: 'Resume the last played song',
-            url: '/?action=resume',
-            icons: [
-               {
-                  src: '/icon-192.png',
-                  sizes: '192x192',
-                  type: 'image/png'
-               }
-            ]
-         },
-         {
-            name: 'Play Recent Albums',
-            short_name: 'Recent',
-            description: 'Play from recently added albums',
-            url: '/?action=recent',
-            icons: [
-               {
-                  src: '/icon-192.png',
-                  sizes: '192x192',
-                  type: 'image/png'
-               }
-            ]
-         },
-         {
-            name: 'Shuffle Favorites',
-            short_name: 'Shuffle',
-            description: 'Shuffle songs from favorite artists',
-            url: '/?action=shuffle-favorites',
-            icons: [
-               {
-                  src: '/icon-192.png',
-                  sizes: '192x192',
-                  type: 'image/png'
-               }
-            ]
-         }
-      ]
-  }
-}

app/page.tsx

@@ -6,7 +6,7 @@ import { Tabs, TabsContent } from '../components/ui/tabs';
 import { AlbumArtwork } from './components/album-artwork';
 import { useNavidrome } from './components/NavidromeContext';
 import { useEffect, useState, Suspense } from 'react';
-import { Album } from '@/lib/navidrome';
+import { Album, Song, getNavidromeAPI } from '@/lib/navidrome';
 import { useNavidromeConfig } from './components/NavidromeConfigContext';
 import { useSearchParams } from 'next/navigation';
 import { useAudioPlayer } from './components/AudioPlayerContext';
@@ -18,48 +18,71 @@ import { UserProfile } from './components/UserProfile';
 type TimeOfDay = 'morning' | 'afternoon' | 'evening';
 
 function MusicPageContent() {
-  const { albums, isLoading, api, isConnected } = useNavidrome();
+  const { api } = useNavidrome();
   const { playAlbum, playTrack, shuffle, toggleShuffle, addToQueue } = useAudioPlayer();
   const searchParams = useSearchParams();
+  const [allAlbums, setAllAlbums] = useState<Album[]>([]);
   const [recentAlbums, setRecentAlbums] = useState<Album[]>([]);
   const [newestAlbums, setNewestAlbums] = useState<Album[]>([]);
   const [favoriteAlbums, setFavoriteAlbums] = useState<Album[]>([]);
+  const [albumsLoading, setAlbumsLoading] = useState(true);
   const [favoritesLoading, setFavoritesLoading] = useState(true);
   const [shortcutProcessed, setShortcutProcessed] = useState(false);
   const isMobile = useIsMobile();
 
+  // Load albums
   useEffect(() => {
-    if (albums.length > 0) {
-      // Split albums into recent and newest for display
-      const recent = albums.slice(0, Math.ceil(albums.length / 2));
-      const newest = albums.slice(Math.ceil(albums.length / 2));
-      setRecentAlbums(recent);
-      setNewestAlbums(newest);
-    }
-  }, [albums]);
-
-  useEffect(() => {
-    const loadFavoriteAlbums = async () => {
-      if (!api || !isConnected) return;
-      
-      setFavoritesLoading(true);
+    let mounted = true;
+    const load = async () => {
+      if (!api) return;
+      setAlbumsLoading(true);
       try {
-        const starredAlbums = await api.getAlbums('starred', 20); // Limit to 20 for homepage
-        setFavoriteAlbums(starredAlbums);
-      } catch (error) {
-        console.error('Failed to load favorite albums:', error);
+        const list = await api.getAlbums('newest', 500);
+        if (!mounted) return;
+        setAllAlbums(list || []);
+        // Split albums into two sections
+        const recent = list.slice(0, Math.ceil(list.length / 2));
+        const newest = list.slice(Math.ceil(list.length / 2));
+        setRecentAlbums(recent);
+        setNewestAlbums(newest);
+      } catch (e) {
+        console.error('Failed to load albums:', e);
+        if (mounted) {
+          setAllAlbums([]);
+          setRecentAlbums([]);
+          setNewestAlbums([]);
+        }
       } finally {
-        setFavoritesLoading(false);
+        if (mounted) setAlbumsLoading(false);
       }
     };
+    load();
+    return () => { mounted = false; };
+  }, [api]);
 
+  useEffect(() => {
+    let mounted = true;
+    const loadFavoriteAlbums = async () => {
+      if (!api) return;
+      setFavoritesLoading(true);
+      try {
+        const starred = await api.getAlbums('starred', 20);
+        if (mounted) setFavoriteAlbums(starred || []);
+      } catch (error) {
+        console.error('Failed to load favorite albums:', error);
+        if (mounted) setFavoriteAlbums([]);
+      } finally {
+        if (mounted) setFavoritesLoading(false);
+      }
+    };
     loadFavoriteAlbums();
-  }, [api, isConnected]);
+    return () => { mounted = false; };
+  }, [api]);
 
   // Handle PWA shortcuts
   useEffect(() => {
     const action = searchParams.get('action');
-    if (!action || shortcutProcessed || !api || !isConnected) return;
+    if (!action || shortcutProcessed) return;
 
     const handleShortcuts = async () => {
       try {
@@ -91,18 +114,20 @@ function MusicPageContent() {
               await playAlbum(shuffledAlbums[0].id);
               
               // Add remaining albums to queue
-              for (let i = 1; i < shuffledAlbums.length; i++) {
-                try {
-                  const albumSongs = await api.getAlbumSongs(shuffledAlbums[i].id);
-                  albumSongs.forEach(song => {
-                    addToQueue({
-                      id: song.id,
-                      name: song.title,
-                      url: api.getStreamUrl(song.id),
-                      artist: song.artist || 'Unknown Artist',
-                      artistId: song.artistId || '',
-                      album: song.album || 'Unknown Album',
-                      albumId: song.parent,
+              const navidromeApi = getNavidromeAPI();
+              if (navidromeApi) {
+                for (let i = 1; i < shuffledAlbums.length; i++) {
+                  try {
+                    const songs = await navidromeApi.getAlbumSongs(shuffledAlbums[i].id);
+                    songs.forEach((song: Song) => {
+                      addToQueue({
+                        id: song.id,
+                        name: song.title,
+                        url: navidromeApi.getStreamUrl(song.id),
+                        artist: song.artist || 'Unknown Artist',
+                        artistId: song.artistId || '',
+                        album: song.album || 'Unknown Album',
+                        albumId: song.parent,
                       duration: song.duration || 0,
                       coverArt: song.coverArt,
                       starred: !!song.starred
@@ -113,6 +138,7 @@ function MusicPageContent() {
                 }
               }
             }
+            }
             break;
 
           case 'shuffle-favorites':
@@ -129,18 +155,20 @@ function MusicPageContent() {
               await playAlbum(shuffledFavorites[0].id);
               
               // Add remaining albums to queue
-              for (let i = 1; i < shuffledFavorites.length; i++) {
-                try {
-                  const albumSongs = await api.getAlbumSongs(shuffledFavorites[i].id);
-                  albumSongs.forEach(song => {
-                    addToQueue({
-                      id: song.id,
-                      name: song.title,
-                      url: api.getStreamUrl(song.id),
-                      artist: song.artist || 'Unknown Artist',
-                      artistId: song.artistId || '',
-                      album: song.album || 'Unknown Album',
-                      albumId: song.parent,
+              const navidromeApiFav = getNavidromeAPI();
+              if (navidromeApiFav) {
+                for (let i = 1; i < shuffledFavorites.length; i++) {
+                  try {
+                    const songs = await navidromeApiFav.getAlbumSongs(shuffledFavorites[i].id);
+                    songs.forEach((song: Song) => {
+                      addToQueue({
+                        id: song.id,
+                        name: song.title,
+                        url: navidromeApiFav.getStreamUrl(song.id),
+                        artist: song.artist || 'Unknown Artist',
+                        artistId: song.artistId || '',
+                        album: song.album || 'Unknown Album',
+                        albumId: song.parent,
                       duration: song.duration || 0,
                       coverArt: song.coverArt,
                       starred: !!song.starred
@@ -151,6 +179,7 @@ function MusicPageContent() {
                 }
               }
             }
+            }
             break;
         }
         setShortcutProcessed(true);
@@ -162,7 +191,7 @@ function MusicPageContent() {
     // Delay to ensure data is loaded
     const timeout = setTimeout(handleShortcuts, 1000);
     return () => clearTimeout(timeout);
-  }, [searchParams, api, isConnected, recentAlbums, favoriteAlbums, shortcutProcessed, playAlbum, playTrack, shuffle, toggleShuffle, addToQueue]);
+  }, [searchParams, recentAlbums, favoriteAlbums, shortcutProcessed, playAlbum, playTrack, shuffle, toggleShuffle, addToQueue]);
 
   // Try to get user name from navidrome context, fallback to 'user'
   let userName = '';
@@ -197,7 +226,7 @@ function MusicPageContent() {
           <div className="relative">
             <ScrollArea>
               <div className="flex space-x-4 pb-4">
-                {isLoading ? (
+                {albumsLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
                     <div key={i} className="w-[220px] shrink-0 space-y-3">
@@ -284,7 +313,7 @@ function MusicPageContent() {
           <div className="relative">
             <ScrollArea>
             <div className="flex space-x-4 pb-4">
-            {isLoading ? (
+            {albumsLoading ? (
                   // Loading skeletons
                   Array.from({ length: 10 }).map((_, i) => (
                     <div key={i} className="w-[220px] shrink-0 space-y-3">

app/playlist/[id]/page.tsx

@@ -57,7 +57,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -77,7 +77,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred
@@ -98,7 +98,7 @@ export default function PlaylistPage() {
       artist: song.artist,
       album: song.album,
       duration: song.duration,
-      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 64) : undefined,
+  coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
       albumId: song.albumId,
       artistId: song.artistId,
       starred: !!song.starred

app/queue/page.tsx

@@ -3,14 +3,161 @@
 import React from 'react';
 import Image from 'next/image';
 import Link from 'next/link';
-import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { useAudioPlayer, Track } from '@/app/components/AudioPlayerContext';
 import { Button } from '@/components/ui/button';
 import { Separator } from '@/components/ui/separator';
 import { ScrollArea } from '@/components/ui/scroll-area';
-import { Play, X, Disc, Trash2, SkipForward } from 'lucide-react';
+import { Play, X, Disc, Trash2, SkipForward, GripVertical } from 'lucide-react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+  useSortable,
+} from '@dnd-kit/sortable';
+import {
+  CSS,
+} from '@dnd-kit/utilities';
+
+interface SortableQueueItemProps {
+  track: Track;
+  index: number;
+  onPlay: () => void;
+  onRemove: () => void;
+  formatDuration: (seconds: number) => string;
+}
+
+function SortableQueueItem({ track, index, onPlay, onRemove, formatDuration }: SortableQueueItemProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id: `${track.id}-${index}` });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`group flex items-center p-3 rounded-lg hover:bg-accent/50 transition-colors ${
+        isDragging ? 'bg-accent' : ''
+      }`}
+    >
+      {/* Drag Handle */}
+      <div
+        className="mr-3 opacity-60 group-hover:opacity-100 transition-opacity cursor-grab active:cursor-grabbing p-1 -m-1 hover:bg-accent rounded"
+        {...attributes}
+        {...listeners}
+        onClick={(e) => e.stopPropagation()}
+        onMouseDown={(e) => e.stopPropagation()}
+      >
+        <GripVertical className="w-4 h-4 text-muted-foreground" />
+      </div>
+
+      {/* Clickable content area for play */}
+      <div 
+        className="flex items-center flex-1 cursor-pointer"
+        onClick={onPlay}
+      >
+        {/* Album Art with Play Indicator */}
+        <div className="w-12 h-12 mr-4 shrink-0 relative">
+          <Image
+            src={track.coverArt || '/default-user.jpg'}
+            alt={track.album}
+            width={48}
+            height={48}
+            className="w-full h-full object-cover rounded-md"
+          />
+          <div className="absolute inset-0 bg-black/50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
+            <Play className="w-5 h-5 text-white" />
+          </div>
+        </div>
+
+        {/* Song Info */}
+        <div className="flex-1 min-w-0 mr-4">
+          <div className="flex items-center gap-2 mb-1">
+            <p className="font-semibold truncate">{track.name}</p>
+          </div>
+          <div className="flex items-center text-sm text-muted-foreground space-x-4">
+            <div className="flex items-center gap-1">
+              <Link 
+                href={`/artist/${track.artistId}`} 
+                className="truncate hover:text-primary hover:underline"
+                onClick={(e) => e.stopPropagation()}
+              >
+                {track.artist}
+              </Link>
+            </div>
+          </div>
+        </div>
+
+        {/* Duration */}
+        <div className="flex items-center text-sm text-muted-foreground mr-4">
+          {formatDuration(track.duration)}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onRemove();
+          }}
+          className="h-8 w-8 p-0 hover:bg-destructive hover:text-destructive-foreground"
+        >
+          <X className="w-4 h-4" />
+        </Button>
+      </div>
+    </div>
+  );
+}
 
 const QueuePage: React.FC = () => {
-  const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue } = useAudioPlayer();
+  const { queue, currentTrack, removeTrackFromQueue, clearQueue, skipToTrackInQueue, reorderQueue } = useAudioPlayer();
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8, // Require 8px of movement before starting drag
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (over && active.id !== over.id) {
+      const oldIndex = queue.findIndex((track, index) => `${track.id}-${index}` === active.id);
+      const newIndex = queue.findIndex((track, index) => `${track.id}-${index}` === over.id);
+
+      if (oldIndex !== -1 && newIndex !== -1) {
+        reorderQueue(oldIndex, newIndex);
+      }
+    }
+  };
 
   const formatDuration = (seconds: number): string => {
     const minutes = Math.floor(seconds / 60);
@@ -107,67 +254,29 @@ const QueuePage: React.FC = () => {
                 </p>
               </div>
             ) : (
-              <div className="space-y-1">
-                {queue.map((track, index) => (
-                  <div
-                    key={`${track.id}-${index}`}
-                    className="group flex items-center p-3 rounded-lg hover:bg-accent/50 cursor-pointer transition-colors"
-                    onClick={() => skipToTrackInQueue(index)}
-                  >
-                    {/* Album Art with Play Indicator */}
-                    <div className="w-12 h-12 mr-4 shrink-0 relative">
-                      <Image
-                        src={track.coverArt || '/default-user.jpg'}
-                        alt={track.album}
-                        width={48}
-                        height={48}
-                        className="w-full h-full object-cover rounded-md"
+              <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragEnd={handleDragEnd}
+              >
+                <SortableContext
+                  items={queue.map((track, index) => `${track.id}-${index}`)}
+                  strategy={verticalListSortingStrategy}
+                >
+                  <div className="space-y-1">
+                    {queue.map((track, index) => (
+                      <SortableQueueItem
+                        key={`${track.id}-${index}`}
+                        track={track}
+                        index={index}
+                        onPlay={() => skipToTrackInQueue(index)}
+                        onRemove={() => removeTrackFromQueue(index)}
+                        formatDuration={formatDuration}
                       />
-                      <div className="absolute inset-0 bg-black/50 rounded-md opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
-                        <Play className="w-5 h-5 text-white" />
-                      </div>
-                    </div>
-
-                    {/* Song Info */}
-                    <div className="flex-1 min-w-0 mr-4">
-                      <div className="flex items-center gap-2 mb-1">
-                        <p className="font-semibold truncate">{track.name}</p>
-                      </div>
-                      <div className="flex items-center text-sm text-muted-foreground space-x-4">
-                        <div className="flex items-center gap-1">
-                          <Link 
-                            href={`/artist/${track.artistId}`} 
-                            className="truncate hover:text-primary hover:underline"
-                            onClick={(e) => e.stopPropagation()}
-                          >
-                            {track.artist}
-                          </Link>
-                        </div>
-                      </div>
-                    </div>
-
-                    {/* Duration */}
-                    <div className="flex items-center text-sm text-muted-foreground mr-4">
-                      {formatDuration(track.duration)}
-                    </div>
-
-                    {/* Actions */}
-                    <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          removeTrackFromQueue(index);
-                        }}
-                        className="h-8 w-8 p-0 hover:bg-destructive hover:text-destructive-foreground"
-                      >
-                        <X className="w-4 h-4" />
-                      </Button>
-                    </div>
+                    ))}
                   </div>
-                ))}
-              </div>
+                </SortableContext>
+              </DndContext>
             )}
           </ScrollArea>
         </div>

app/search/page.tsx

@@ -11,6 +11,7 @@ import { ArtistIcon } from '@/app/components/artist-icon';
 import { useNavidrome } from '@/app/components/NavidromeContext';
 import { getNavidromeAPI, Artist, Album, Song } from '@/lib/navidrome';
 import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { TrackContextMenu, AlbumContextMenu, ArtistContextMenu } from '@/app/components/ContextMenus';
 import { Search, Play, Plus } from 'lucide-react';
 
 export default function SearchPage() {
@@ -34,7 +35,12 @@ export default function SearchPage() {
     try {
       setIsSearching(true);
       const results = await search2(query);
-      setSearchResults(results);
+      // Limit results to 5 of each type
+      setSearchResults({
+        artists: results.artists.slice(0, 5),
+        albums: results.albums.slice(0, 5),
+        songs: results.songs.slice(0, 5)
+      });
     } catch (error) {
       console.error('Search failed:', error);
       setSearchResults({ artists: [], albums: [], songs: [] });
@@ -51,6 +57,31 @@ export default function SearchPage() {
     return () => clearTimeout(timeoutId);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
+
+  // Focus search input when component mounts (for keyboard shortcut navigation)
+  useEffect(() => {
+    const searchInput = document.querySelector('input[type="text"]') as HTMLInputElement;
+    if (searchInput) {
+      searchInput.focus();
+    }
+  }, []);
+  const createTrackFromSong = (song: Song) => {
+    if (!api) return null;
+    
+    return {
+      id: song.id,
+      name: song.title,
+      url: api.getStreamUrl(song.id),
+      artist: song.artist,
+      album: song.album,
+      duration: song.duration,
+      coverArt: song.coverArt ? api.getCoverArtUrl(song.coverArt, 300) : undefined,
+      albumId: song.albumId,
+      artistId: song.artistId,
+      starred: !!song.starred
+    };
+  };
+
   const handlePlaySong = (song: Song) => {
     if (!api) {
       console.error('Navidrome API not available');
@@ -136,25 +167,29 @@ export default function SearchPage() {
             )}
 
             {/* Artists */}
-            {/* {searchResults.artists.length > 0 && (
+            {searchResults.artists.length > 0 && (
               <div>
                 <h2 className="text-2xl font-bold mb-4">Artists</h2>
                 <ScrollArea className="w-full">
                   <div className="flex space-x-4 pb-4">
                     {searchResults.artists.map((artist) => (
+                      <ArtistContextMenu 
+                        key={artist.id}
+                        artistId={artist.id}
+                        artistName={artist.name}
+                      >
                         <ArtistIcon
-                          key={artist.id}
                           artist={artist}
                           className="shrink-0 overflow-hidden"
                           size={190}
                         />
+                      </ArtistContextMenu>
                     ))}
                   </div>
                   <ScrollBar orientation="horizontal" />
                 </ScrollArea>
               </div>
-            )} */}
-            {/* broken for now */}
+            )}
 
             {/* Albums */}
             {searchResults.albums.length > 0 && (
@@ -163,14 +198,19 @@ export default function SearchPage() {
                 <ScrollArea className="w-full">
                   <div className="flex space-x-4 pb-4">
                     {searchResults.albums.map((album) => (
-                      <AlbumArtwork 
+                      <AlbumContextMenu 
                         key={album.id}
-                        album={album} 
-                        className="shrink-0 w-48" 
-                        aspectRatio="square"
-                        width={192}
-                        height={192}
-                      />
+                        albumId={album.id}
+                        albumName={album.name}
+                      >
+                        <AlbumArtwork 
+                          album={album} 
+                          className="shrink-0 w-48" 
+                          aspectRatio="square"
+                          width={192}
+                          height={192}
+                        />
+                      </AlbumContextMenu>
                     ))}
                   </div>
                   <ScrollBar orientation="horizontal" />
@@ -183,54 +223,62 @@ export default function SearchPage() {
               <div>
                 <h2 className="text-2xl font-bold mb-4">Songs</h2>
                 <div className="space-y-2">
-                  {searchResults.songs.slice(0, 10).map((song, index) => (
-                    <div key={song.id} className="group flex items-center space-x-3 p-3 hover:bg-accent rounded-lg transition-colors">
-                      <div className="w-8 text-center text-sm text-muted-foreground">
-                        <span className="group-hover:hidden">{index + 1}</span>
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handlePlaySong(song)}
-                          className="hidden group-hover:flex h-8 w-8 p-0"
-                        >
-                          <Play className="w-4 h-4" />
-                        </Button>
-                      </div>
+                  {searchResults.songs.slice(0, 10).map((song, index) => {
+                    const track = createTrackFromSong(song);
+                    if (!track) return null;
 
-                      {/* Song Cover */}
-                      <div className="shrink-0">                        <Image
-                          src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 64) : '/default-user.jpg'}
-                          alt={song.album}
-                          width={48}
-                          height={48}
-                          className="w-12 h-12 rounded-md object-cover"
-                        />
-                      </div>
+                    return (
+                      <TrackContextMenu key={song.id} track={track}>
+                        <div className="group flex items-center space-x-3 p-3 hover:bg-accent rounded-lg transition-colors cursor-pointer">
+                          <div className="w-8 text-center text-sm text-muted-foreground">
+                            <span className="group-hover:hidden">{index + 1}</span>
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handlePlaySong(song)}
+                              className="hidden group-hover:flex h-8 w-8 p-0"
+                            >
+                              <Play className="w-4 h-4" />
+                            </Button>
+                          </div>
                           
-                      {/* Song Info */}
-                      <div className="flex-1 min-w-0">
-                        <p className="font-medium truncate">{song.title}</p>
-                        <p className="text-sm text-muted-foreground truncate">{song.artist} • {song.album}</p>
-                      </div>
+                          {/* Song Cover */}
+                          <div className="shrink-0">
+                            <Image
+                              src={song.coverArt && api ? api.getCoverArtUrl(song.coverArt, 300) : '/default-user.jpg'}
+                              alt={song.album}
+                              width={48}
+                              height={48}
+                              className="w-12 h-12 rounded-md object-cover"
+                            />
+                          </div>
                           
-                      {/* Duration */}
-                      <div className="text-sm text-muted-foreground">
-                        {formatDuration(song.duration)}
-                      </div>
+                          {/* Song Info */}
+                          <div className="flex-1 min-w-0">
+                            <p className="font-medium truncate">{song.title}</p>
+                            <p className="text-sm text-muted-foreground truncate">{song.artist} • {song.album}</p>
+                          </div>
                           
-                      {/* Actions */}
-                      <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
-                        <Button
-                          variant="ghost"
-                          size="sm"
-                          onClick={() => handleAddToQueue(song)}
-                          className="h-8 w-8 p-0"
-                        >
-                          <Plus className="w-4 h-4" />
-                        </Button>
-                      </div>
-                    </div>
-                  ))}
+                          {/* Duration */}
+                          <div className="text-sm text-muted-foreground">
+                            {formatDuration(song.duration)}
+                          </div>
+                          
+                          {/* Actions */}
+                          <div className="flex items-center space-x-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                            <Button
+                              variant="ghost"
+                              size="sm"
+                              onClick={() => handleAddToQueue(song)}
+                              className="h-8 w-8 p-0"
+                            >
+                              <Plus className="w-4 h-4" />
+                            </Button>
+                          </div>
+                        </div>
+                      </TrackContextMenu>
+                    );
+                  })}
                   
                   {searchResults.songs.length > 10 && (
                     <div className="text-center pt-4">

app/settings/page.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { Label } from '@/components/ui/label';
 import { Select, SelectTrigger, SelectContent, SelectItem, SelectValue } from '@/components/ui/select';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
 import { Input } from '@/components/ui/input';
 import { Button } from '@/components/ui/button';
 import { useTheme } from '@/app/components/ThemeProvider';
@@ -13,9 +14,10 @@ import { useStandaloneLastFm } from '@/hooks/use-standalone-lastfm';
 import { useSidebarShortcuts, SidebarShortcutType } from '@/hooks/use-sidebar-shortcuts';
 import { SidebarCustomization } from '@/app/components/SidebarCustomization';
 import { SettingsManagement } from '@/app/components/SettingsManagement';
-import { CacheManagement } from '@/app/components/CacheManagement';
-import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog } from 'react-icons/fa';
-import { Settings, ExternalLink } from 'lucide-react';
+import { AutoTaggingSettings } from '@/app/components/AutoTaggingSettings';
+import { FaServer, FaUser, FaLock, FaCheck, FaTimes, FaLastfm, FaCog, FaTags } from 'react-icons/fa';
+import { Settings, ExternalLink, Tag } from 'lucide-react';
+import { Switch } from '@/components/ui/switch';
 
 const SettingsPage = () => {
     const { theme, setTheme, mode, setMode } = useTheme();
@@ -23,6 +25,7 @@ const SettingsPage = () => {
     const { toast } = useToast();
     const { isEnabled: isStandaloneLastFmEnabled, getCredentials, getAuthUrl, getSessionKey } = useStandaloneLastFm();
     const { shortcutType, updateShortcutType } = useSidebarShortcuts();
+    const audioPlayer = useAudioPlayer();
     
     const [formData, setFormData] = useState({
         serverUrl: '',
@@ -58,6 +61,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(() => {
@@ -93,6 +97,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) {
@@ -263,6 +273,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({
@@ -469,6 +516,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">
@@ -707,9 +777,9 @@ const SettingsPage = () => {
                   <SettingsManagement />
                 </div>
 
-                {/* Cache Management */}
+                {/* Auto-Tagging Settings */}
                 <div className="break-inside-avoid mb-6">
-                  <CacheManagement />
+                  <AutoTaggingSettings />
                 </div>
 
                 <Card className="mb-6 break-inside-avoid py-5">
@@ -761,6 +831,87 @@ const SettingsPage = () => {
                 </Card>
 
                 {/* Theme Preview */}
+                <Card className="mb-6 break-inside-avoid py-5">
+                    <CardHeader>
+                        <CardTitle className="flex items-center gap-2">
+                            <FaCog className="w-5 h-5" />
+                            Audio Settings
+                        </CardTitle>
+                        <CardDescription>
+                            Configure playback and audio effects
+                        </CardDescription>
+                    </CardHeader>
+                    <CardContent className="space-y-6">
+                        {/* Crossfade */}
+                        <div className="space-y-2">
+                            <Label htmlFor="crossfade-duration">Crossfade Duration</Label>
+                            <Select 
+                                value={String(audioPlayer.audioSettings.crossfadeDuration)}
+                                onValueChange={(value) => audioPlayer.updateAudioSettings({ crossfadeDuration: Number(value) })}
+                            >
+                                <SelectTrigger id="crossfade-duration">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="0">Off</SelectItem>
+                                    <SelectItem value="2">2 seconds</SelectItem>
+                                    <SelectItem value="3">3 seconds</SelectItem>
+                                    <SelectItem value="4">4 seconds</SelectItem>
+                                    <SelectItem value="5">5 seconds</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* Equalizer Preset */}
+                        <div className="space-y-2">
+                            <Label htmlFor="equalizer-preset">Equalizer Preset</Label>
+                            <Select 
+                                value={audioPlayer.equalizerPreset} 
+                                onValueChange={audioPlayer.setEqualizerPreset}
+                            >
+                                <SelectTrigger id="equalizer-preset">
+                                    <SelectValue />
+                                </SelectTrigger>
+                                <SelectContent>
+                                    <SelectItem value="normal">Normal</SelectItem>
+                                    <SelectItem value="bassBoost">Bass Boost</SelectItem>
+                                    <SelectItem value="trebleBoost">Treble Boost</SelectItem>
+                                    <SelectItem value="vocalBoost">Vocal Boost</SelectItem>
+                                </SelectContent>
+                            </Select>
+                        </div>
+
+                        {/* ReplayGain */}
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <Label>ReplayGain</Label>
+                                <p className="text-sm text-muted-foreground">Normalize volume across tracks</p>
+                            </div>
+                            <Switch 
+                                checked={audioPlayer.audioSettings.replayGainEnabled}
+                                onCheckedChange={(checked) => audioPlayer.updateAudioSettings({ replayGainEnabled: checked })}
+                            />
+                        </div>
+
+                        {/* Gapless Playback */}
+                        <div className="flex items-center justify-between">
+                            <div>
+                                <Label>Gapless Playback</Label>
+                                <p className="text-sm text-muted-foreground">Seamless transitions between tracks</p>
+                            </div>
+                            <Switch 
+                                checked={audioPlayer.audioSettings.gaplessPlayback}
+                                onCheckedChange={(checked) => audioPlayer.updateAudioSettings({ gaplessPlayback: checked })}
+                            />
+                        </div>                        <div className="text-sm text-muted-foreground space-y-2">
+                            <p><strong>Crossfade:</strong> Smooth fade between tracks (2-5 seconds)</p>
+                            <p><strong>Equalizer:</strong> Preset frequency adjustments for different music styles</p>
+                            <p><strong>ReplayGain:</strong> Consistent volume across all tracks in your library</p>
+                            <p><strong>Gapless:</strong> Perfect for live albums and continuous DJ mixes</p>
+                        </div>
+                    </CardContent>
+                </Card>
+
                 <Card className="mb-6 break-inside-avoid py-5">
                     <CardHeader>
                         <CardTitle>Preview</CardTitle>

cliff.toml

@@ -0,0 +1,46 @@
+# git-cliff configuration for changelog generation
+# https://git-cliff.org
+
+[changelog]
+header = """
+# Changelog
+
+All notable changes to this project will be documented in this file.
+"""
+body = """
+{% if version %}\
+    ## [{{ version | trim_start_matches(pat="v") }}] - {{ timestamp | date(format="%Y-%m-%d") }}
+{% else %}\
+    ## [unreleased]
+{% endif %}\
+{% for group, commits in commits | group_by(attribute="group") %}
+    ### {{ group | striptags | trim | upper_first }}
+    {% for commit in commits %}
+        - {% if commit.scope %}{{ commit.scope }}: {% endif %}\
+            {{ commit.message | upper_first }}\
+    {% endfor %}
+{% endfor %}
+"""
+footer = ""
+trim = true
+
+[git]
+conventional_commits = true
+filter_unconventional = true
+split_commits = false
+commit_parsers = [
+    { message = "^feat", group = "Features" },
+    { message = "^fix", group = "Bug Fixes" },
+    { message = "^doc", group = "Documentation" },
+    { message = "^perf", group = "Performance" },
+    { message = "^refactor", group = "Refactoring" },
+    { message = "^style", group = "Styling" },
+    { message = "^test", group = "Testing" },
+    { message = "^chore\\(release\\)", skip = true },
+    { message = "^chore|^ci", group = "Miscellaneous" },
+]
+protect_breaking_commits = false
+filter_commits = false
+tag_pattern = "v[0-9].*"
+topo_order = false
+sort_commits = "oldest"

components/ui/infinite-scroll.tsx

@@ -0,0 +1,56 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+import { Loader2 } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface InfiniteScrollProps {
+  onLoadMore: () => void;
+  hasMore: boolean;
+  isLoading: boolean;
+  loadingText?: string;
+  endMessage?: string;
+  className?: string;
+}
+
+export function InfiniteScroll({
+  onLoadMore,
+  hasMore,
+  isLoading,
+  loadingText = 'Loading more items...',
+  endMessage = 'No more items to load',
+  className
+}: InfiniteScrollProps) {
+  const { ref, inView } = useInView({
+    threshold: 0,
+    rootMargin: '100px 0px',
+  });
+
+  useEffect(() => {
+    if (inView && hasMore && !isLoading) {
+      onLoadMore();
+    }
+  }, [inView, hasMore, isLoading, onLoadMore]);
+
+  return (
+    <div 
+      ref={ref} 
+      className={cn(
+        'py-4 flex flex-col items-center justify-center w-full', 
+        className
+      )}
+    >
+      {isLoading && (
+        <div className="flex items-center gap-2">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          <p className="text-sm text-muted-foreground">{loadingText}</p>
+        </div>
+      )}
+      
+      {!hasMore && !isLoading && (
+        <p className="text-sm text-muted-foreground">{endMessage}</p>
+      )}
+    </div>
+  );
+}

components/ui/resizable.tsx

@@ -2,16 +2,16 @@
 
 import * as React from "react"
 import { GripVerticalIcon } from "lucide-react"
-import * as ResizablePrimitive from "react-resizable-panels"
+import { Group as PanelGroup, Panel, Separator as PanelResizeHandle } from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
 
 function ResizablePanelGroup({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: React.ComponentProps<typeof PanelGroup>) {
   return (
-    <ResizablePrimitive.PanelGroup
+    <PanelGroup
       data-slot="resizable-panel-group"
       className={cn(
         "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
@@ -24,19 +24,19 @@ function ResizablePanelGroup({
 
 function ResizablePanel({
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
+}: React.ComponentProps<typeof Panel>) {
+  return <Panel data-slot="resizable-panel" {...props} />
 }
 
 function ResizableHandle({
   withHandle,
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+}: React.ComponentProps<typeof PanelResizeHandle> & {
   withHandle?: boolean
 }) {
   return (
-    <ResizablePrimitive.PanelResizeHandle
+    <PanelResizeHandle
       data-slot="resizable-handle"
       className={cn(
         "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
@@ -49,7 +49,7 @@ function ResizableHandle({
           <GripVerticalIcon className="size-2.5" />
         </div>
       )}
-    </ResizablePrimitive.PanelResizeHandle>
+    </PanelResizeHandle>
   )
 }
 

docker-compose.example.yml

@@ -12,10 +12,6 @@ services:
       # - NAVIDROME_USERNAME=user
       # - NAVIDROME_PASSWORD=password
 
-      # # PostHog Analytics
-      # - POSTHOG_KEY=phc_Sa39J7754MwaHrPxYiWnWETVSD3g1cU4nOplMGczRE9
-      # - POSTHOG_HOST=https://us.i.posthog.com
-
       # Application Port
       - PORT=40625
     

docker-compose.override.yml.example

@@ -14,8 +14,6 @@ services:
       - NEXT_PUBLIC_NAVIDROME_URL=http://localhost:4533
       - NEXT_PUBLIC_NAVIDROME_USERNAME=admin
       - NEXT_PUBLIC_NAVIDROME_PASSWORD=admin
-      - NEXT_PUBLIC_POSTHOG_KEY=${POSTHOG_KEY:-}
-      - NEXT_PUBLIC_POSTHOG_HOST=${POSTHOG_HOST:-}
       - PORT=${PORT:-3000}
     
     # Mount source code for development (optional)

docker-compose.yml

@@ -13,10 +13,6 @@ services:
       - NEXT_PUBLIC_NAVIDROME_USERNAME=${NAVIDROME_USERNAME:-}
       - NEXT_PUBLIC_NAVIDROME_PASSWORD=${NAVIDROME_PASSWORD:-}
       
-      # PostHog Analytics (optional)
-      # - NEXT_PUBLIC_POSTHOG_KEY=phc_Sa39J7754MwaHrPxYiWnWETVSD3g1cU4nOplMGczRE9
-      # - NEXT_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com
-
       # Application Port
       - PORT=40625
     

docs/DOCKER.md

@@ -65,8 +65,6 @@ When running with Docker, use these variable names (without the `NEXT_PUBLIC_` p
 - `NAVIDROME_PASSWORD`: Navidrome password (optional - app will prompt if not set)
 - `PORT`: Port for the application to listen on (default: `3000`)
 - `HOST_PORT`: Host port to map to container port (docker-compose only, default: `3000`)
-- `POSTHOG_KEY`: PostHog analytics key (optional)
-- `POSTHOG_HOST`: PostHog analytics host (optional)
 
 ### Development Environment Variables
 
@@ -75,8 +73,6 @@ For local development (non-Docker), use these variable names:
 - `NEXT_PUBLIC_NAVIDROME_URL`: URL of your Navidrome server
 - `NEXT_PUBLIC_NAVIDROME_USERNAME`: Navidrome username
 - `NEXT_PUBLIC_NAVIDROME_PASSWORD`: Navidrome password
-- `NEXT_PUBLIC_POSTHOG_KEY`: PostHog analytics key (optional)
-- `NEXT_PUBLIC_POSTHOG_HOST`: PostHog analytics host (optional)
 
 **Note**: Docker deployment uses a runtime replacement mechanism to inject environment variables, while development uses Next.js's built-in `NEXT_PUBLIC_` variables.
 

docs/KEYBOARD_SHORTCUTS.md

@@ -0,0 +1,121 @@
+# Keyboard Shortcuts & Queue Management Features
+
+This document outlines the new keyboard shortcuts, queue management, and context menu features added to the music player.
+
+## Keyboard Shortcuts
+
+The following keyboard shortcuts work globally throughout the application:
+
+### Playback Controls
+- **Space** - Play/Pause current track
+- **→ (Right Arrow)** - Skip to next track
+- **← (Left Arrow)** - Skip to previous track
+
+### Volume Controls
+- **↑ (Up Arrow)** - Increase volume by 10%
+- **↓ (Down Arrow)** - Decrease volume by 10%
+- **M** - Toggle mute/unmute
+
+### Navigation
+- **/** - Quick search (navigates to search page and focuses input)
+
+### Notes
+- Keyboard shortcuts are disabled when typing in input fields
+- When in fullscreen player mode, shortcuts are handled by the fullscreen player
+- Volume changes are saved to localStorage
+
+## Queue Management
+
+### Drag and Drop Queue Reordering
+- **Drag Handle**: Hover over queue items to reveal the grip handle (⋮⋮)
+- **Reorder**: Click and drag the handle to reorder tracks in the queue
+- **Visual Feedback**: Dragged items become semi-transparent during drag
+- **Keyboard Support**: Use Tab to focus items, then Space + Arrow keys to reorder
+
+### Queue Features
+- Real-time visual feedback during drag operations
+- Maintains playback order after reordering
+- Works with both mouse and keyboard navigation
+- Accessible drag and drop implementation
+
+## Context Menus (Right-Click)
+
+Right-click on tracks, albums, and artists to access quick actions:
+
+### Track Context Menu
+- **Play Now** - Immediately play the selected track
+- **Play Next** - Add track to the beginning of the queue
+- **Add to Queue** - Add track to the end of the queue
+- **Add/Remove from Favorites** - Toggle favorite status
+- **Go to Album** - Navigate to the track's album
+- **Go to Artist** - Navigate to the track's artist
+- **Track Info** - View detailed track information
+- **Share** - Share the track
+
+### Album Context Menu
+- **Play Album** - Play the entire album from the beginning
+- **Add Album to Queue** - Add all album tracks to queue
+- **Play Album Next** - Add album tracks to beginning of queue
+- **Add to Favorites** - Add album to favorites
+- **Go to Artist** - Navigate to the album's artist
+- **Album Info** - View detailed album information
+- **Share Album** - Share the album
+
+### Artist Context Menu
+- **Play All Songs** - Play all songs by the artist
+- **Add All to Queue** - Add all artist songs to queue
+- **Play All Next** - Add all artist songs to beginning of queue
+- **Add to Favorites** - Add artist to favorites
+- **Artist Info** - View detailed artist information
+- **Share Artist** - Share the artist
+
+## Where to Find These Features
+
+### Keyboard Shortcuts
+- Available globally throughout the application
+- Work in main player, fullscreen player, and all pages
+- Search shortcut (/) works from any page
+
+### Queue Management
+- **Queue Page**: `/queue` - Full drag and drop interface
+- **Mini Player**: Shows current track and basic controls
+- **Fullscreen Player**: Queue management button available
+
+### Context Menus
+- **Search Results**: Right-click on any track, album, or artist
+- **Album Pages**: Right-click on individual tracks
+- **Artist Pages**: Right-click on tracks and albums
+- **Queue Page**: Right-click on queued tracks
+- **Library Browse**: Right-click on any item
+
+## Technical Implementation
+
+### Components Used
+- `useKeyboardShortcuts` hook for global keyboard shortcuts
+- `@dnd-kit` for drag and drop functionality
+- `@radix-ui/react-context-menu` for context menus
+- Custom context menu components for different content types
+
+### Accessibility
+- Full keyboard navigation support
+- Screen reader compatible
+- Focus management
+- ARIA labels and descriptions
+- High contrast support
+
+## Tips for Users
+
+1. **Keyboard Shortcuts**: Most shortcuts work anywhere in the app, just start typing
+2. **Queue Reordering**: Hover over queue items to see the drag handle
+3. **Context Menus**: Right-click almost anything to see available actions
+4. **Quick Search**: Press `/` from anywhere to jump to search
+5. **Volume Control**: Use arrow keys for precise volume adjustment
+
+## Future Enhancements
+
+Potential future additions:
+- Custom keyboard shortcut configuration
+- More queue management options (clear queue, save as playlist)
+- Additional context menu actions (edit metadata, download)
+- Gesture support for mobile devices
+- Queue templates and smart playlists

docs/OFFLINE_DOWNLOADS.md

@@ -0,0 +1,168 @@
+# Offline Downloads Feature
+
+This document describes the offline downloads functionality implemented in the Mice Navidrome client.
+
+## Overview
+
+The offline downloads feature allows users to download music for offline listening using modern web technologies including Service Workers and Cache API, with localStorage fallback for browsers without Service Worker support.
+
+## Components
+
+### 1. Service Worker (`/public/sw.js`)
+- Handles audio, image, and API caching
+- Manages download operations in the background
+- Provides offline audio playback capabilities
+- Implements cache-first strategy for downloaded content
+
+### 2. Download Manager Hook (`/hooks/use-offline-downloads.ts`)
+- Provides React interface for download operations
+- Manages download progress and status
+- Handles Service Worker communication
+- Provides localStorage fallback for metadata
+
+### 3. Cache Management Component (`/app/components/CacheManagement.tsx`)
+- Enhanced to show offline download statistics
+- Displays download progress during operations
+- Lists downloaded content with removal options
+- Shows Service Worker support status
+
+### 4. Offline Indicator Component (`/app/components/OfflineIndicator.tsx`)
+- Shows download status for albums and songs
+- Provides download/remove buttons
+- Displays visual indicators on album artwork
+
+## Features
+
+### Download Capabilities
+- **Album Downloads**: Download entire albums with all tracks and artwork
+- **Individual Song Downloads**: Download single tracks
+- **Progress Tracking**: Real-time download progress with track-by-track updates
+- **Error Handling**: Graceful handling of failed downloads with retry options
+
+### Visual Indicators
+- **Album Artwork**: Small download icon in top-right corner of downloaded albums
+- **Album Pages**: Download buttons and status indicators
+- **Song Lists**: Individual download indicators for tracks
+- **Library View**: Visual badges showing offline availability
+
+### Offline Storage
+- **Service Worker Cache**: True offline storage for audio files and images
+- **localStorage Fallback**: Metadata-only storage for limited browser support
+- **Progressive Enhancement**: Works in all browsers with varying capabilities
+
+### Cache Management
+- **Storage Statistics**: Shows total offline storage usage
+- **Content Management**: List and remove downloaded content
+- **Cache Cleanup**: Clear expired and unnecessary cache data
+- **Progress Monitoring**: Real-time download progress display
+
+## Usage
+
+### Downloading Content
+
+#### From Album Page
+1. Navigate to any album page
+2. Click the "Download" button (desktop) or small download button (mobile)
+3. Monitor progress in the cache management section
+4. Downloaded albums show indicators on artwork and in lists
+
+#### From Settings Page
+1. Go to Settings → Cache & Offline Downloads
+2. View current download statistics
+3. Monitor active downloads
+4. Manage downloaded content
+
+### Managing Downloads
+
+#### Viewing Downloaded Content
+- Settings page shows list of all downloaded albums and songs
+- Album artwork displays download indicators
+- Individual songs show download status
+
+#### Removing Downloads
+- Use the "X" button next to items in the cache management list
+- Use "Remove Download" button on album pages
+- Clear all cache to remove everything
+
+## Technical Implementation
+
+### Service Worker Features
+- **Audio Caching**: Streams are cached using the Subsonic API
+- **Image Caching**: Album artwork and avatars cached separately
+- **API Caching**: Metadata cached with network-first strategy
+- **Background Downloads**: Downloads continue even when page is closed
+
+### Browser Compatibility
+- **Full Support**: Modern browsers with Service Worker support
+- **Limited Support**: Older browsers get metadata-only caching
+- **Progressive Enhancement**: Features gracefully degrade
+
+### Storage Strategy
+- **Audio Cache**: Large files stored in Service Worker cache
+- **Image Cache**: Artwork cached separately for optimization
+- **Metadata Cache**: Song/album information in localStorage
+- **Size Management**: Automatic cleanup of old cached content
+
+## Configuration
+
+### Environment Variables
+The offline downloads use existing Navidrome configuration:
+- `NEXT_PUBLIC_NAVIDROME_URL`
+- `NEXT_PUBLIC_NAVIDROME_USERNAME` 
+- `NEXT_PUBLIC_NAVIDROME_PASSWORD`
+
+### Cache Limits
+- Default audio cache: No explicit limit (browser manages)
+- Image cache: Optimized sizes based on display requirements
+- Metadata: Stored in localStorage with cleanup
+
+## Development Notes
+
+### File Structure
+```
+hooks/
+  use-offline-downloads.ts     # Main download hook
+app/components/
+  CacheManagement.tsx          # Enhanced cache UI
+  OfflineIndicator.tsx         # Download status components
+  album-artwork.tsx            # Updated with indicators
+album/[id]/
+  page.tsx                     # Enhanced with download buttons
+public/
+  sw.js                        # Service Worker implementation
+```
+
+### API Integration
+- Uses existing Navidrome API endpoints
+- Leverages Subsonic streaming URLs
+- Integrates with current authentication system
+- Compatible with existing cache infrastructure
+
+## Future Enhancements
+
+### Planned Features
+- **Playlist Downloads**: Download entire playlists
+- **Smart Sync**: Automatic download of favorites
+- **Storage Limits**: User-configurable storage limits
+- **Download Scheduling**: Queue downloads for later
+- **Offline Mode Detection**: Automatic offline behavior
+
+### Performance Optimizations
+- **Compression**: Audio compression options
+- **Quality Selection**: Choose download quality
+- **Selective Sync**: Download only specific tracks
+- **Background Sync**: Download during idle time
+
+## Troubleshooting
+
+### Common Issues
+- **Service Worker not registering**: Check browser console
+- **Downloads failing**: Verify Navidrome server connection
+- **Storage full**: Clear cache or check browser storage limits
+- **Slow downloads**: Check network connection and server performance
+
+### Debug Information
+- Browser Developer Tools → Application → Service Workers
+- Cache storage inspection in DevTools
+- Console logs for download progress and errors
+- Network tab for failed requests

docs/SPOTLIGHT_SEARCH.md

@@ -0,0 +1,135 @@
+# Spotlight Search Feature
+
+## Overview
+
+The Spotlight Search feature provides a macOS Spotlight-style search interface for your music library, enhanced with Last.fm metadata for rich music information.
+
+## Features
+
+### 🔍 **Instant Search**
+
+- **Global Search**: Press `Cmd+K` (macOS) / `Ctrl+K` (Windows/Linux) from anywhere in the app
+- **Real-time Results**: Search as you type with 300ms debouncing
+- **Multiple Types**: Search across tracks, albums, and artists simultaneously
+
+### ⌨️ **Keyboard Navigation**
+- `↑`/`↓` arrows to navigate results
+- `Enter` to select and play/view
+- `Tab` to show detailed information
+- `Esc` to close (or close details panel)
+
+### 🎵 **Quick Actions**
+- **Play Now**: Click on any result to play immediately
+- **Play Next**: Add track to the beginning of queue
+- **Add to Queue**: Add track to the end of queue
+- **Show Details**: Get rich information from Last.fm
+
+### 🌍 **Last.fm Integration**
+When viewing details, you'll see:
+- **Artist Biography**: Rich biographical information
+- **Statistics**: Play counts and listener numbers
+- **Tags**: Genre and style tags
+- **Similar Artists**: Discover new music based on your selections
+- **Album Art**: High-quality images
+
+## Usage
+
+### Opening Search
+
+- **Keyboard**: Press `Cmd+K` (macOS) / `Ctrl+K` (Windows/Linux)
+- **Mouse**: Click the search button in the top menu bar (desktop)
+- **Mobile**: Tap the search icon in the bottom navigation
+
+### Search Tips
+- Type partial song names, artist names, or album titles
+- Results appear in real-time as you type
+- Use keyboard navigation for fastest access
+- Press Tab to see detailed Last.fm information
+
+### Quick Actions
+- **Tracks**: Play, Play Next, Add to Queue
+- **Albums**: View album page, Add entire album to queue
+- **Artists**: View artist page, Play all songs
+
+## Last.fm Data
+
+The search integrates with Last.fm to provide:
+
+### Artist Information
+- **Bio**: Artist biography and background
+- **Stats**: Total plays and listeners globally
+- **Similar**: Artists with similar style
+- **Tags**: Genre classification and style tags
+
+### Enhanced Discovery
+- Click on similar artists to search for them
+- Explore tags to discover new genres
+- View play statistics to understand popularity
+
+## Keyboard Shortcuts Summary
+
+| Shortcut | Action |
+|----------|--------|
+| `Cmd+K` / `Ctrl+K` | Open Spotlight Search |
+| `↑` / `↓` | Navigate results |
+| `Enter` | Select result |
+| `Tab` | Show details |
+| `Esc` | Close search/details |
+| `Space` | Play/Pause (when not in search) |
+| `←` / `→` | Previous/Next track |
+| `↑` / `↓` | Volume up/down (when not in search) |
+| `M` | Toggle mute |
+
+## Implementation Details
+
+### Architecture
+- **Global Context**: `GlobalSearchProvider` manages search state
+- **Component**: `SpotlightSearch` handles UI and interactions
+- **Hooks**: `useKeyboardShortcuts` for global hotkeys
+- **Integration**: Uses existing Navidrome search API + Last.fm API
+
+### Performance
+- **Debounced Search**: 300ms delay prevents excessive API calls
+- **Keyboard Optimized**: All interactions available via keyboard
+- **Lazy Loading**: Last.fm data loaded only when details are viewed
+- **Caching**: Search results cached during session
+
+### Accessibility
+- **Keyboard Navigation**: Full keyboard support
+- **Screen Reader**: Proper ARIA labels and descriptions
+- **Focus Management**: Automatic focus on search input
+- **Visual Feedback**: Clear hover and selection states
+
+## Future Enhancements
+
+### Planned Features
+- **Search History**: Remember recent searches
+- **Smart Suggestions**: AI-powered search suggestions
+- **Scoped Search**: Filter by type (tracks only, albums only, etc.)
+- **Advanced Filters**: Date ranges, genres, etc.
+- **Playlist Integration**: Search within specific playlists
+
+### Last.fm Enhancements
+- **Track Information**: Individual track details from Last.fm
+- **Album Reviews**: User reviews and ratings
+- **Concert Information**: Upcoming shows and tour dates
+- **Scrobbling Integration**: Enhanced scrobbling with search data
+
+## Troubleshooting
+
+### Search Not Working
+1. Check Navidrome connection in settings
+2. Verify network connectivity
+3. Try refreshing the page
+
+### Last.fm Data Missing
+1. Last.fm API may be unavailable
+2. Artist/album may not exist in Last.fm database
+3. Network connectivity issues
+
+### Keyboard Shortcuts Not Working
+1. Ensure you're not in an input field
+2. Check if fullscreen mode is interfering
+3. Try clicking outside any input fields first
+
+The Spotlight Search feature transforms how you discover and interact with your music library, making it faster and more intuitive than ever before!

docs/rewrite-commits.sh

@@ -0,0 +1,63 @@
+#!/bin/bash
+# Script to rewrite commits to conventional commit format
+# WARNING: This rewrites git history. Only use on branches that haven't been shared or after coordinating with team.
+
+# This script uses git filter-branch to rewrite commit messages
+# Run from repository root: bash docs/rewrite-commits.sh
+
+echo "⚠️  WARNING: This will rewrite git history!"
+echo "This should only be done on the offline-support branch before merging to main."
+echo ""
+read -p "Are you sure you want to continue? (yes/no): " confirm
+
+if [ "$confirm" != "yes" ]; then
+    echo "Aborted."
+    exit 1
+fi
+
+# Backup current branch
+git branch backup-$(date +%Y%m%d-%H%M%S)
+
+# Set up commit message mapping
+export FILTER_BRANCH_SQUELCH_WARNING=1
+
+git filter-branch -f --msg-filter '
+    msg=$(cat)
+    
+    # Skip if already has conventional commit prefix
+    if echo "$msg" | grep -qE "^(feat|fix|chore|docs|style|refactor|perf|test|build|ci):"; then
+        echo "$msg"
+    # Convert specific commit messages
+    elif echo "$msg" | grep -q "Use git commit SHA for versioning"; then
+        echo "fix: use git commit SHA for versioning, fix audio playback resume, remove all streak localStorage code"
+    elif echo "$msg" | grep -q "Fix menubar, add lazy loading"; then
+        echo "feat: fix menubar, add lazy loading, improve image quality, limit search results, filter browse artists"
+    elif echo "$msg" | grep -q "Add pagination to library/songs"; then
+        echo "feat: add pagination to library/songs and remove listening streaks"
+    elif echo "$msg" | grep -q "Organize documentation"; then
+        echo "chore: organize documentation - move markdown files to docs/ folder"
+    elif echo "$msg" | grep -q "Simplify service worker"; then
+        echo "refactor: simplify service worker by removing offline download functionality"
+    elif echo "$msg" | grep -q "Remove all offline download"; then
+        echo "refactor: remove all offline download and caching functionality"
+    elif echo "$msg" | grep -q "Update pnpm-lock.yaml"; then
+        echo "chore: update pnpm-lock.yaml to match new overrides configuration"
+    elif echo "$msg" | grep -q "Remove PostHog analytics"; then
+        echo "chore: remove PostHog analytics and update dependencies to latest minor versions"
+    elif echo "$msg" | grep -q "Merge pull request"; then
+        echo "chore: $(echo "$msg" | sed "s/^Merge/merge/")"
+    # Default: add chore: prefix to any other commit
+    else
+        first_char=$(echo "$msg" | cut -c1 | tr "[:upper:]" "[:lower:]")
+        rest=$(echo "$msg" | cut -c2-)
+        echo "chore: ${first_char}${rest}"
+    fi
+' 2025.07.31..HEAD
+
+echo ""
+echo "✅ Commits have been rewritten!"
+echo "⚠️  To update the remote branch, you'll need to force push:"
+echo "    git push origin offline-support --force-with-lease"
+echo ""
+echo "If something went wrong, restore from backup:"
+echo "    git reset --hard backup-TIMESTAMP"

entrypoint.sh

@@ -15,3 +15,7 @@ printenv | grep NEXT_PUBLIC_ | while read -r line ; do
 done
 
 echo "✅ Environment variable replacement complete"
+echo "🚀 Starting Next.js application..."
+
+# Execute the command passed as arguments
+exec "$@"

hooks/use-auto-tagging.ts

@@ -0,0 +1,603 @@
+import { useState, useCallback } from 'react';
+import MusicBrainzClient, { 
+  MusicBrainzRelease, 
+  MusicBrainzReleaseDetails,
+  MusicBrainzRecording,
+  MusicBrainzRecordingDetails 
+} from '@/lib/musicbrainz-api';
+import { getNavidromeAPI } from '@/lib/navidrome';
+import { useToast } from '@/hooks/use-toast';
+import { Album, Song, Artist } from '@/lib/navidrome';
+// Define interfaces for the enhanced metadata
+
+// Define interfaces for the enhanced metadata
+export interface EnhancedTrackMetadata {
+  id: string;               // Navidrome track ID
+  title: string;            // Track title
+  artist: string;           // Artist name
+  album: string;            // Album name
+  mbTrackId?: string;       // MusicBrainz recording ID
+  mbReleaseId?: string;     // MusicBrainz release ID
+  mbArtistId?: string;      // MusicBrainz artist ID
+  year?: string;            // Release year
+  genres?: string[];        // Genres
+  tags?: string[];          // Tags
+  trackNumber?: number;     // Track number
+  discNumber?: number;      // Disc number
+  duration?: number;        // Duration in seconds
+  artistCountry?: string;   // Artist country
+  artistType?: string;      // Artist type (group, person, etc.)
+  releaseType?: string;     // Release type (album, EP, single, etc.)
+  status: 'pending' | 'matched' | 'failed' | 'applied';  // Status of the track metadata
+  confidence: number;       // Match confidence (0-100)
+}
+
+export interface EnhancedAlbumMetadata {
+  id: string;              // Navidrome album ID
+  name: string;            // Album name
+  artist: string;          // Album artist name
+  mbReleaseId?: string;    // MusicBrainz release ID
+  mbArtistId?: string;     // MusicBrainz artist ID
+  year?: string;           // Release year
+  genres?: string[];       // Genres
+  tags?: string[];         // Tags
+  country?: string;        // Release country
+  releaseType?: string;    // Release type (album, EP, single, etc.)
+  barcode?: string;        // Barcode
+  label?: string;          // Record label
+  status: 'pending' | 'matched' | 'failed' | 'applied';  // Status
+  confidence: number;      // Match confidence (0-100)
+  tracks: EnhancedTrackMetadata[]; // Tracks in the album
+  coverArtUrl?: string;    // Cover art URL from MusicBrainz
+}
+
+// Type for the Auto-Tagging operation mode
+export type AutoTaggingMode = 'track' | 'album' | 'artist';
+
+export function useAutoTagging() {
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const [enhancedTracks, setEnhancedTracks] = useState<EnhancedTrackMetadata[]>([]);
+  const [enhancedAlbums, setEnhancedAlbums] = useState<EnhancedAlbumMetadata[]>([]);
+  const { toast } = useToast();
+  const api = getNavidromeAPI();
+
+  /**
+   * Find enhanced metadata for a single track from MusicBrainz
+   */
+  const enhanceTrack = useCallback(async (track: Song): Promise<EnhancedTrackMetadata> => {
+    try {
+      // Start with basic metadata
+      const enhancedTrack: EnhancedTrackMetadata = {
+        id: track.id,
+        title: track.title,
+        artist: track.artist,
+        album: track.album,
+        status: 'pending',
+        confidence: 0
+      };
+      
+      // Try to find the track in MusicBrainz
+      const recording = await MusicBrainzClient.findBestMatchingRecording(
+        track.title,
+        track.artist,
+        track.duration * 1000 // Convert to milliseconds
+      );
+      
+      if (!recording) {
+        enhancedTrack.status = 'failed';
+        return enhancedTrack;
+      }
+      
+      // Get detailed recording information
+      const recordingDetails = await MusicBrainzClient.getRecording(recording.id);
+      
+      if (!recordingDetails) {
+        enhancedTrack.status = 'failed';
+        return enhancedTrack;
+      }
+      
+      // Calculate match confidence
+      const titleSimilarity = calculateStringSimilarity(
+        MusicBrainzClient.normalizeString(track.title),
+        MusicBrainzClient.normalizeString(recording.title)
+      );
+      
+      const artistSimilarity = calculateStringSimilarity(
+        MusicBrainzClient.normalizeString(track.artist),
+        MusicBrainzClient.normalizeString(recording['artist-credit'][0]?.artist.name || '')
+      );
+      
+      // Calculate confidence score (0-100)
+      enhancedTrack.confidence = Math.round((titleSimilarity * 0.6 + artistSimilarity * 0.4) * 100);
+      
+      // Update track with MusicBrainz metadata
+      enhancedTrack.mbTrackId = recording.id;
+      enhancedTrack.mbArtistId = recording['artist-credit'][0]?.artist.id;
+      
+      // Extract additional metadata from recordingDetails
+      if (recordingDetails.releases && recordingDetails.releases.length > 0) {
+        enhancedTrack.mbReleaseId = recordingDetails.releases[0].id;
+      }
+      
+      if (recordingDetails['first-release-date']) {
+        enhancedTrack.year = recordingDetails['first-release-date'].split('-')[0];
+      }
+      
+      if (recordingDetails.genres) {
+        enhancedTrack.genres = recordingDetails.genres.map(genre => genre.name);
+      }
+      
+      if (recordingDetails.tags) {
+        enhancedTrack.tags = recordingDetails.tags.map(tag => tag.name);
+      }
+      
+      enhancedTrack.status = 'matched';
+      return enhancedTrack;
+    } catch (error) {
+      console.error('Failed to enhance track:', error);
+      return {
+        id: track.id,
+        title: track.title,
+        artist: track.artist,
+        album: track.album,
+        status: 'failed',
+        confidence: 0
+      };
+    }
+  }, []);
+
+  /**
+   * Find enhanced metadata for an album and its tracks from MusicBrainz
+   */
+  const enhanceAlbum = useCallback(async (album: Album, tracks: Song[]): Promise<EnhancedAlbumMetadata> => {
+    try {
+      // Start with basic metadata
+      const enhancedAlbum: EnhancedAlbumMetadata = {
+        id: album.id,
+        name: album.name,
+        artist: album.artist,
+        status: 'pending',
+        confidence: 0,
+        tracks: []
+      };
+      
+      // Try to find the album in MusicBrainz
+      const release = await MusicBrainzClient.findBestMatchingRelease(
+        album.name,
+        album.artist,
+        tracks.length
+      );
+      
+      if (!release) {
+        enhancedAlbum.status = 'failed';
+        return enhancedAlbum;
+      }
+      
+      // Get detailed release information
+      const releaseDetails = await MusicBrainzClient.getRelease(release.id);
+      
+      if (!releaseDetails) {
+        enhancedAlbum.status = 'failed';
+        return enhancedAlbum;
+      }
+      
+      // Calculate match confidence
+      const albumSimilarity = calculateStringSimilarity(
+        MusicBrainzClient.normalizeString(album.name),
+        MusicBrainzClient.normalizeString(release.title)
+      );
+      
+      const artistSimilarity = calculateStringSimilarity(
+        MusicBrainzClient.normalizeString(album.artist),
+        MusicBrainzClient.normalizeString(release['artist-credit'][0]?.artist.name || '')
+      );
+      
+      // Calculate confidence score (0-100)
+      enhancedAlbum.confidence = Math.round((albumSimilarity * 0.6 + artistSimilarity * 0.4) * 100);
+      
+      // Update album with MusicBrainz metadata
+      enhancedAlbum.mbReleaseId = release.id;
+      enhancedAlbum.mbArtistId = release['artist-credit'][0]?.artist.id;
+      
+      if (release.date) {
+        enhancedAlbum.year = release.date.split('-')[0];
+      }
+      
+      if (release.country) {
+        enhancedAlbum.country = release.country;
+      }
+      
+      // We need to access release-group via a type assertion since it's not defined in MusicBrainzRelease interface
+      // But it exists in the MusicBrainzReleaseDetails which we're working with
+      const releaseWithGroup = release as unknown as { 'release-group'?: { id: string; 'primary-type'?: string } };
+      if (releaseWithGroup['release-group'] && releaseWithGroup['release-group']['primary-type']) {
+        enhancedAlbum.releaseType = releaseWithGroup['release-group']['primary-type'];
+      }
+      
+      if (releaseDetails.barcode) {
+        enhancedAlbum.barcode = releaseDetails.barcode;
+      }
+      
+      // Get cover art URL
+      if (releaseDetails['cover-art-archive'] && releaseDetails['cover-art-archive'].front) {
+        enhancedAlbum.coverArtUrl = MusicBrainzClient.getCoverArtUrl(release.id);
+      }
+      
+      // Match tracks with MusicBrainz tracks
+      const enhancedTracks: EnhancedTrackMetadata[] = [];
+      
+      // First, organize MB tracks by disc and track number
+      // Define a type for the MusicBrainz track
+      interface MusicBrainzTrack {
+        position: number;
+        number: string;
+        title: string;
+        length?: number;
+        recording: {
+          id: string;
+          title: string;
+          length?: number;
+        };
+      }
+      
+      const mbTracks: Record<number, Record<number, MusicBrainzTrack>> = {};
+      
+      if (releaseDetails.media) {
+        for (const medium of releaseDetails.media) {
+          const discNumber = medium.position;
+          mbTracks[discNumber] = {};
+          
+          for (const track of medium.tracks) {
+            mbTracks[discNumber][track.position] = track;
+          }
+        }
+      }
+      
+      // Try to match each track
+      for (const track of tracks) {
+        // Basic track info
+        const enhancedTrack: EnhancedTrackMetadata = {
+          id: track.id,
+          title: track.title,
+          artist: track.artist,
+          album: track.album,
+          status: 'pending',
+          confidence: 0
+        };
+        
+        // Try to find the track by position if available
+        if (track.discNumber && track.track && mbTracks[track.discNumber] && mbTracks[track.discNumber][track.track]) {
+          const mbTrack = mbTracks[track.discNumber][track.track];
+          
+          enhancedTrack.mbTrackId = mbTrack.recording.id;
+          enhancedTrack.mbReleaseId = release.id;
+          enhancedTrack.trackNumber = track.track;
+          enhancedTrack.discNumber = track.discNumber;
+          
+          // Calculate title similarity
+          const titleSimilarity = calculateStringSimilarity(
+            MusicBrainzClient.normalizeString(track.title),
+            MusicBrainzClient.normalizeString(mbTrack.title)
+          );
+          
+          enhancedTrack.confidence = Math.round(titleSimilarity * 100);
+          enhancedTrack.status = 'matched';
+        }
+        // If we can't match by position, try to match by title
+        else {
+          // Find in any medium and any position
+          let bestMatch: MusicBrainzTrack | null = null;
+          let bestSimilarity = 0;
+          
+          for (const discNumber of Object.keys(mbTracks)) {
+            for (const trackNumber of Object.keys(mbTracks[Number(discNumber)])) {
+              const mbTrack = mbTracks[Number(discNumber)][Number(trackNumber)];
+              const similarity = calculateStringSimilarity(
+                MusicBrainzClient.normalizeString(track.title),
+                MusicBrainzClient.normalizeString(mbTrack.title)
+              );
+              
+              if (similarity > bestSimilarity && similarity > 0.6) { // 60% similarity threshold
+                bestMatch = mbTrack;
+                bestSimilarity = similarity;
+              }
+            }
+          }
+          
+          if (bestMatch) {
+            enhancedTrack.mbTrackId = bestMatch.recording.id;
+            enhancedTrack.mbReleaseId = release.id;
+            enhancedTrack.confidence = Math.round(bestSimilarity * 100);
+            enhancedTrack.status = 'matched';
+          } else {
+            enhancedTrack.status = 'failed';
+          }
+        }
+        
+        enhancedTracks.push(enhancedTrack);
+      }
+      
+      // Update album with tracks
+      enhancedAlbum.tracks = enhancedTracks;
+      enhancedAlbum.status = 'matched';
+      
+      return enhancedAlbum;
+    } catch (error) {
+      console.error('Failed to enhance album:', error);
+      return {
+        id: album.id,
+        name: album.name,
+        artist: album.artist,
+        status: 'failed',
+        confidence: 0,
+        tracks: []
+      };
+    }
+  }, []);
+
+  /**
+   * Start the auto-tagging process for a track, album, or artist
+   */
+  const startAutoTagging = useCallback(async (
+    mode: AutoTaggingMode, 
+    itemId: string, 
+    confidenceThreshold: number = 70
+  ) => {
+    if (!api) {
+      toast({
+        title: "Error",
+        description: "Navidrome API is not configured",
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    setIsProcessing(true);
+    setProgress(0);
+    setEnhancedTracks([]);
+    setEnhancedAlbums([]);
+    
+    try {
+      // Process different modes
+      if (mode === 'track') {
+        // In the absence of a direct method to get a song by ID, 
+        // we'll find it by searching for it in its album
+        const searchResults = await api.search(itemId, 0, 0, 10);
+        const track = searchResults.songs.find(song => song.id === itemId);
+        
+        if (!track) {
+          throw new Error('Track not found');
+        }
+        
+        setProgress(10);
+        
+        // Enhance track metadata
+        const enhancedTrack = await enhanceTrack(track);
+        
+        setEnhancedTracks([enhancedTrack]);
+        setProgress(100);
+        
+        toast({
+          title: "Track Analysis Complete",
+          description: enhancedTrack.status === 'matched' 
+            ? `Found metadata for "${track.title}" with ${enhancedTrack.confidence}% confidence` 
+            : `Couldn't find metadata for "${track.title}"`,
+        });
+      } 
+      else if (mode === 'album') {
+        // Get album and its tracks from Navidrome
+        const { album, songs } = await api.getAlbum(itemId);
+        if (!album) {
+          throw new Error('Album not found');
+        }
+        
+        setProgress(10);
+        
+        // Enhance album metadata
+        const enhancedAlbum = await enhanceAlbum(album, songs);
+        
+        setEnhancedAlbums([enhancedAlbum]);
+        setProgress(100);
+        
+        toast({
+          title: "Album Analysis Complete",
+          description: enhancedAlbum.status === 'matched' 
+            ? `Found metadata for "${album.name}" with ${enhancedAlbum.confidence}% confidence` 
+            : `Couldn't find metadata for "${album.name}"`,
+        });
+      }
+      else if (mode === 'artist') {
+        // Get artist and their albums from Navidrome
+        try {
+          const { artist, albums } = await api.getArtist(itemId);
+          if (!artist) {
+            throw new Error('Artist not found');
+          }
+          
+          setProgress(5);
+          
+          const enhancedAlbumsData: EnhancedAlbumMetadata[] = [];
+          let processedAlbums = 0;
+          
+          // Process each album
+          for (const album of albums) {
+            try {
+              const { songs } = await api.getAlbum(album.id);
+              const enhancedAlbum = await enhanceAlbum(album, songs);
+              enhancedAlbumsData.push(enhancedAlbum);
+            } catch (albumError) {
+              console.error('Error processing album:', albumError);
+              // Continue with the next album
+            }
+            
+            processedAlbums++;
+            setProgress(5 + Math.round((processedAlbums / albums.length) * 95));
+          }
+          
+          setEnhancedAlbums(enhancedAlbumsData);
+          setProgress(100);
+          
+          const matchedAlbums = enhancedAlbumsData.filter(album => 
+            album.status === 'matched' && album.confidence >= confidenceThreshold
+          ).length;
+          
+          toast({
+            title: "Artist Analysis Complete",
+            description: `Found metadata for ${matchedAlbums} of ${albums.length} albums by "${artist.name}"`,
+          });
+        } catch (artistError) {
+          console.error('Error fetching artist:', artistError);
+          toast({
+            title: "Artist Not Found",
+            description: "Could not find the artist in your library",
+            variant: "destructive",
+          });
+          setProgress(100);
+        }
+      }
+    } catch (error) {
+      console.error('Auto-tagging error:', error);
+      toast({
+        title: "Auto-Tagging Failed",
+        description: error instanceof Error ? error.message : "An unknown error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [api, enhanceTrack, enhanceAlbum, toast]);
+
+  /**
+   * Apply enhanced metadata to tracks in Navidrome
+   */
+  const applyEnhancedMetadata = useCallback(async (
+    tracks: EnhancedTrackMetadata[],
+    albums?: EnhancedAlbumMetadata[]
+  ) => {
+    if (!api) {
+      toast({
+        title: "Error",
+        description: "Navidrome API is not configured",
+        variant: "destructive",
+      });
+      return;
+    }
+    
+    setIsProcessing(true);
+    setProgress(0);
+    
+    try {
+      let processedItems = 0;
+      const totalItems = tracks.length + (albums?.length || 0);
+      
+      // Apply album metadata first
+      if (albums && albums.length > 0) {
+        for (const album of albums) {
+          if (album.status === 'matched') {
+            // To be implemented: Update album metadata via Navidrome API
+            // This requires a custom Navidrome endpoint or plugin
+            console.log('Would update album:', album);
+          }
+          
+          processedItems++;
+          setProgress(Math.round((processedItems / totalItems) * 100));
+        }
+      }
+      
+      // Apply track metadata
+      for (const track of tracks) {
+        if (track.status === 'matched') {
+          // To be implemented: Update track metadata via Navidrome API
+          // This requires a custom Navidrome endpoint or plugin
+          console.log('Would update track:', track);
+          
+          // Alternatively, suggest implementing this feature using a separate
+          // script that interacts with music files directly
+        }
+        
+        processedItems++;
+        setProgress(Math.round((processedItems / totalItems) * 100));
+      }
+      
+      toast({
+        title: "Metadata Applied",
+        description: `Updated metadata for ${tracks.filter(t => t.status === 'matched').length} tracks`,
+      });
+    } catch (error) {
+      console.error('Failed to apply metadata:', error);
+      toast({
+        title: "Metadata Update Failed",
+        description: error instanceof Error ? error.message : "An unknown error occurred",
+        variant: "destructive",
+      });
+    } finally {
+      setIsProcessing(false);
+    }
+  }, [api, toast]);
+
+  return {
+    isProcessing,
+    progress,
+    enhancedTracks,
+    enhancedAlbums,
+    startAutoTagging,
+    applyEnhancedMetadata
+  };
+}
+
+/**
+ * Calculate similarity between two strings (0-1)
+ * Uses Levenshtein distance
+ */
+function calculateStringSimilarity(str1: string, str2: string): number {
+  // If either string is empty, return 0
+  if (!str1.length || !str2.length) {
+    return 0;
+  }
+  
+  // If strings are identical, return 1
+  if (str1 === str2) {
+    return 1;
+  }
+  
+  // Calculate Levenshtein distance
+  const distance = levenshteinDistance(str1, str2);
+  
+  // Calculate similarity score
+  const maxLength = Math.max(str1.length, str2.length);
+  const similarity = 1 - distance / maxLength;
+  
+  return similarity;
+}
+
+/**
+ * Calculate Levenshtein distance between two strings
+ */
+function levenshteinDistance(str1: string, str2: string): number {
+  const matrix: number[][] = [];
+  
+  // Initialize matrix with row and column indices
+  for (let i = 0; i <= str1.length; i++) {
+    matrix[i] = [i];
+  }
+  
+  for (let j = 0; j <= str2.length; j++) {
+    matrix[0][j] = j;
+  }
+  
+  // Fill in the matrix
+  for (let i = 1; i <= str1.length; i++) {
+    for (let j = 1; j <= str2.length; j++) {
+      const cost = str1[i - 1] === str2[j - 1] ? 0 : 1;
+      
+      matrix[i][j] = Math.min(
+        matrix[i - 1][j] + 1,      // Deletion
+        matrix[i][j - 1] + 1,      // Insertion
+        matrix[i - 1][j - 1] + cost // Substitution
+      );
+    }
+  }
+  
+  return matrix[str1.length][str2.length];
+}

hooks/use-favorite-albums.ts

@@ -60,7 +60,7 @@ export function useFavoriteAlbums() {
           id: album.id,
           name: album.name,
           artist: album.artist,
-          coverArt: album.coverArt ? api.getCoverArtUrl(album.coverArt, 64) : undefined
+          coverArt: album.coverArt ? api.getCoverArtUrl(album.coverArt, 300) : undefined
         };
         addFavoriteAlbum(favoriteAlbum);
       }

hooks/use-keyboard-shortcuts.ts

@@ -0,0 +1,125 @@
+'use client';
+
+import { useEffect, useCallback } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface KeyboardShortcutsOptions {
+  onPlayPause?: () => void;
+  onNextTrack?: () => void;
+  onPreviousTrack?: () => void;
+  onVolumeUp?: () => void;
+  onVolumeDown?: () => void;
+  onToggleMute?: () => void;
+  onSpotlightSearch?: () => void;
+  disabled?: boolean;
+}
+
+export function useKeyboardShortcuts({
+  onPlayPause,
+  onNextTrack,
+  onPreviousTrack,
+  onVolumeUp,
+  onVolumeDown,
+  onToggleMute,
+  onSpotlightSearch,
+  disabled = false
+}: KeyboardShortcutsOptions = {}) {
+  const router = useRouter();
+
+  const handleKeyDown = useCallback((event: KeyboardEvent) => {
+    // Don't trigger shortcuts if user is typing in an input field
+    const target = event.target as HTMLElement;
+    const isInputField = target.tagName === 'INPUT' || 
+                        target.tagName === 'TEXTAREA' || 
+                        target.contentEditable === 'true' ||
+                        target.closest('[data-cmdk-input]'); // Command palette input
+
+    if (disabled || isInputField) return;
+
+    // Prevent default behavior for our shortcuts
+    const preventDefault = () => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
+
+    switch (event.key) {
+      case ' ': // Space - Play/Pause
+        if (onPlayPause) {
+          preventDefault();
+          onPlayPause();
+        }
+        break;
+
+      case 'ArrowRight': // Right Arrow - Next Track
+        if (onNextTrack) {
+          preventDefault();
+          onNextTrack();
+        }
+        break;
+
+      case 'ArrowLeft': // Left Arrow - Previous Track
+        if (onPreviousTrack) {
+          preventDefault();
+          onPreviousTrack();
+        }
+        break;
+
+      case 'ArrowUp': // Up Arrow - Volume Up
+        if (onVolumeUp) {
+          preventDefault();
+          onVolumeUp();
+        }
+        break;
+
+      case 'ArrowDown': // Down Arrow - Volume Down
+        if (onVolumeDown) {
+          preventDefault();
+          onVolumeDown();
+        }
+        break;
+
+      case 'm': // M - Toggle Mute
+      case 'M':
+        if (onToggleMute) {
+          preventDefault();
+          onToggleMute();
+        }
+        break;
+
+      case 'k': // Cmd+K or Ctrl+K - Spotlight Search
+      case 'K':
+        if ((event.metaKey || event.ctrlKey) && onSpotlightSearch) {
+          preventDefault();
+          onSpotlightSearch();
+        }
+        break;
+
+      default:
+        break;
+    }
+  }, [
+    disabled,
+    onPlayPause,
+    onNextTrack,
+    onPreviousTrack,
+    onVolumeUp,
+    onVolumeDown,
+    onToggleMute,
+    onSpotlightSearch,
+    router
+  ]);
+
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  return {
+    // Return any utility functions if needed
+    isShortcutActive: !disabled
+  };
+}

hooks/use-library-cache.ts

@@ -1,110 +0,0 @@
-'use client';
-
-import { useState, useEffect } from 'react';
-
-interface LibraryCacheItem<T> {
-  data: T;
-  timestamp: number;
-  expiresAt: number;
-}
-
-export function useLibraryCache<T>(
-  key: string, 
-  fetcher: () => Promise<T>, 
-  ttl: number = 30 * 60 * 1000 // 30 minutes default
-) {
-  const [data, setData] = useState<T | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
-
-  const getCacheKey = (key: string) => `library-cache-${key}`;
-
-  const getFromCache = (key: string): T | null => {
-    if (typeof window === 'undefined') return null;
-    
-    try {
-      const cached = localStorage.getItem(getCacheKey(key));
-      if (!cached) return null;
-      
-      const item: LibraryCacheItem<T> = JSON.parse(cached);
-      
-      // Check if expired
-      if (Date.now() > item.expiresAt) {
-        localStorage.removeItem(getCacheKey(key));
-        return null;
-      }
-      
-      return item.data;
-    } catch (error) {
-      console.warn('Failed to get cached data:', error);
-      localStorage.removeItem(getCacheKey(key));
-      return null;
-    }
-  };
-
-  const setToCache = (key: string, data: T, ttl: number) => {
-    if (typeof window === 'undefined') return;
-    
-    const item: LibraryCacheItem<T> = {
-      data,
-      timestamp: Date.now(),
-      expiresAt: Date.now() + ttl
-    };
-    
-    try {
-      localStorage.setItem(getCacheKey(key), JSON.stringify(item));
-    } catch (error) {
-      console.warn('Failed to cache data:', error);
-    }
-  };
-
-  useEffect(() => {
-    const loadData = async () => {
-      setLoading(true);
-      setError(null);
-      
-      // Check cache first
-      const cached = getFromCache(key);
-      if (cached) {
-        setData(cached);
-        setLoading(false);
-        return;
-      }
-      
-      // Fetch fresh data
-      try {
-        const result = await fetcher();
-        setData(result);
-        setToCache(key, result, ttl);
-      } catch (err) {
-        setError(err as Error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    loadData();
-  }, [key, ttl]);
-
-  const refresh = async () => {
-    setLoading(true);
-    setError(null);
-    
-    try {
-      const result = await fetcher();
-      setData(result);
-      setToCache(key, result, ttl);
-    } catch (err) {
-      setError(err as Error);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const clearCache = () => {
-    if (typeof window === 'undefined') return;
-    localStorage.removeItem(getCacheKey(key));
-  };
-
-  return { data, loading, error, refresh, clearCache };
-}

hooks/use-progressive-album-loading.ts

@@ -0,0 +1,115 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Album } from '@/lib/navidrome';
+import { useNavidrome } from '@/app/components/NavidromeContext';
+
+const INITIAL_BATCH_SIZE = 24;  // Initial number of albums to load
+const BATCH_SIZE = 24;          // Number of albums to load in each batch
+const SCROLL_THRESHOLD = 200;   // Pixels from bottom before loading more
+
+export type AlbumSortOption = 'alphabeticalByName' | 'newest' | 'recent' | 'frequent' | 'random' | 'alphabeticalByArtist' | 'starred' | 'highest';
+
+export function useProgressiveAlbumLoading(sortBy: AlbumSortOption = 'alphabeticalByName') {
+  const [albums, setAlbums] = useState<Album[]>([]);
+  const [isLoading, setIsLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [currentOffset, setCurrentOffset] = useState(0);
+  const { api } = useNavidrome();
+  const [error, setError] = useState<string | null>(null);
+
+  // Load initial batch
+  useEffect(() => {
+    loadInitialBatch();
+  }, [sortBy]);
+
+  // Cleanup when sort changes
+  useEffect(() => {
+    return () => {
+      setAlbums([]);
+      setCurrentOffset(0);
+      setHasMore(true);
+    };
+  }, [sortBy]);
+
+  // Load initial batch of albums
+  const loadInitialBatch = useCallback(async () => {
+    if (!api) return;
+    
+    setIsLoading(true);
+    setError(null);
+    
+    try {
+      const albumData = await api.getAlbums(sortBy, INITIAL_BATCH_SIZE, 0);
+      setAlbums(albumData);
+      setCurrentOffset(albumData.length);
+      // Assume there are more unless we got fewer than we asked for
+      setHasMore(albumData.length >= INITIAL_BATCH_SIZE);
+    } catch (err) {
+      console.error('Failed to load initial albums batch:', err);
+      setError(err instanceof Error ? err.message : 'Unknown error loading albums');
+      setAlbums([]);
+      setHasMore(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [api, sortBy]);
+
+  // Load more albums when scrolling
+  const loadMoreAlbums = useCallback(async () => {
+    if (isLoading || !hasMore || !api) return;
+    
+    setIsLoading(true);
+    
+    try {
+      const newAlbums = await api.getAlbums(sortBy, BATCH_SIZE, currentOffset);
+      setAlbums(prev => [...prev, ...newAlbums]);
+      setCurrentOffset(currentOffset + newAlbums.length);
+      // If we get fewer albums than we asked for, we've reached the end
+      setHasMore(newAlbums.length >= BATCH_SIZE);
+    } catch (err) {
+      console.error('Failed to load more albums:', err);
+      setError(err instanceof Error ? err.message : 'Unknown error loading more albums');
+      setHasMore(false);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [api, currentOffset, isLoading, hasMore, sortBy]);
+
+  // Manual refresh (useful for pull-to-refresh functionality)
+  const refreshAlbums = useCallback(() => {
+    setAlbums([]);
+    setCurrentOffset(0);
+    setHasMore(true);
+    loadInitialBatch();
+  }, [loadInitialBatch]);
+
+  // Setup scroll listener
+  useEffect(() => {
+    const handleScroll = () => {
+      // Don't trigger if already loading
+      if (isLoading || !hasMore) return;
+
+      // Check if we're near the bottom
+      const scrollHeight = document.documentElement.scrollHeight;
+      const currentScroll = window.innerHeight + document.documentElement.scrollTop;
+      
+      if (scrollHeight - currentScroll <= SCROLL_THRESHOLD) {
+        loadMoreAlbums();
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+    return () => window.removeEventListener('scroll', handleScroll);
+  }, [isLoading, hasMore, loadMoreAlbums]);
+
+  return {
+    albums,
+    isLoading,
+    hasMore,
+    loadMoreAlbums,
+    refreshAlbums,
+    error,
+    resetAndLoad: refreshAlbums // Alias for consistency
+  };
+}

lib/audio-effects.ts

@@ -0,0 +1,169 @@
+declare global {
+  interface Window {
+    webkitAudioContext: typeof AudioContext;
+  }
+}
+
+export interface AudioEffectPreset {
+  name: string;
+  gains: number[];  // Gains for different frequency bands
+  frequencies: number[];  // Center frequencies for each band
+}
+
+export const presets: { [key: string]: AudioEffectPreset } = {
+  normal: {
+    name: "Normal",
+    gains: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
+    frequencies: [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000]
+  },
+  bassBoost: {
+    name: "Bass Boost",
+    gains: [7, 5, 3, 2, 0, 0, 0, 0, 0, 0],
+    frequencies: [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000]
+  },
+  trebleBoost: {
+    name: "Treble Boost",
+    gains: [0, 0, 0, 0, 0, 0, 2, 3, 5, 7],
+    frequencies: [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000]
+  },
+  vocalBoost: {
+    name: "Vocal Boost",
+    gains: [0, 0, 0, 2, 4, 4, 2, 0, 0, 0],
+    frequencies: [32, 64, 125, 250, 500, 1000, 2000, 4000, 8000, 16000]
+  }
+};
+
+export class AudioEffects {
+  private context: AudioContext;
+  private source: MediaElementAudioSourceNode | null = null;
+  private destination: AudioDestinationNode;
+  private filters: BiquadFilterNode[] = [];
+  private gainNode: GainNode;
+  private crossfadeGainNode: GainNode;
+  private analyser: AnalyserNode;
+  private replayGainNode: GainNode;
+  private currentPreset: string = 'normal';
+  
+  constructor(audioElement: HTMLAudioElement) {
+    // Properly type the AudioContext initialization
+    this.context = new (window.AudioContext || window.webkitAudioContext || AudioContext)();
+    this.destination = this.context.destination;
+    this.gainNode = this.context.createGain();
+    this.crossfadeGainNode = this.context.createGain();
+    this.analyser = this.context.createAnalyser();
+    this.replayGainNode = this.context.createGain();
+    
+    // Initialize ReplayGain node
+    this.replayGainNode.gain.value = 1.0;
+    
+    // Create the audio processing chain
+    this.setupAudioChain(audioElement);
+    
+    // Initialize EQ filters
+    this.setupEqualizer();
+  }
+
+  private setupAudioChain(audioElement: HTMLAudioElement) {
+    // Disconnect any existing source
+    if (this.source) {
+      this.source.disconnect();
+    }
+    
+    // Create new source from audio element
+    this.source = this.context.createMediaElementSource(audioElement);
+    
+    // Connect the audio processing chain
+    this.source
+      .connect(this.replayGainNode)
+      .connect(this.gainNode)
+      .connect(this.crossfadeGainNode);
+      
+    // Connect filters in series
+    let lastNode: AudioNode = this.crossfadeGainNode;
+    this.filters.forEach(filter => {
+      lastNode.connect(filter);
+      lastNode = filter;
+    });
+    
+    // Connect to analyser and destination
+    lastNode.connect(this.analyser);
+    this.analyser.connect(this.destination);
+  }
+
+  private setupEqualizer() {
+    // Create 10-band EQ
+    presets.normal.frequencies.forEach((freq, index) => {
+      const filter = this.context.createBiquadFilter();
+      filter.type = 'peaking';
+      filter.frequency.value = freq;
+      filter.Q.value = 1.0;
+      filter.gain.value = 0;
+      this.filters.push(filter);
+    });
+  }
+
+  public setPreset(presetName: string) {
+    if (presets[presetName]) {
+      this.currentPreset = presetName;
+      presets[presetName].gains.forEach((gain, index) => {
+        if (this.filters[index]) {
+          this.filters[index].gain.setValueAtTime(gain, this.context.currentTime);
+        }
+      });
+    }
+  }
+
+  public getCurrentPreset(): string {
+    return this.currentPreset;
+  }
+
+  public setVolume(volume: number) {
+    if (this.gainNode) {
+      this.gainNode.gain.setValueAtTime(volume, this.context.currentTime);
+    }
+  }
+
+  public setCrossfadeTime(seconds: number) {
+    if (this.crossfadeGainNode) {
+      const now = this.context.currentTime;
+      this.crossfadeGainNode.gain.setValueAtTime(1, now);
+      this.crossfadeGainNode.gain.linearRampToValueAtTime(0, now + seconds);
+    }
+  }
+
+  public startCrossfade() {
+    if (this.crossfadeGainNode) {
+      this.crossfadeGainNode.gain.value = 1;
+    }
+  }
+
+  public setReplayGain(gain: number) {
+    if (this.replayGainNode) {
+      // Clamp gain between -12dB and +12dB for safety
+      const clampedGain = Math.max(-12, Math.min(12, gain));
+      const gainValue = Math.pow(10, clampedGain / 20); // Convert dB to linear gain
+      this.replayGainNode.gain.setValueAtTime(gainValue, this.context.currentTime);
+    }
+  }
+
+  public getAnalyserNode(): AnalyserNode {
+    return this.analyser;
+  }
+
+  public async resume() {
+    if (this.context.state === 'suspended') {
+      await this.context.resume();
+    }
+  }
+
+  public disconnect() {
+    if (this.source) {
+      this.source.disconnect();
+    }
+    this.filters.forEach(filter => filter.disconnect());
+    this.gainNode.disconnect();
+    this.crossfadeGainNode.disconnect();
+    this.analyser.disconnect();
+    this.replayGainNode.disconnect();
+  }
+}

lib/cache.ts

@@ -1,258 +0,0 @@
-'use client';
-
-// Types for caching (simplified versions to avoid circular imports)
-interface Album {
-  id: string;
-  name: string;
-  artist: string;
-  artistId: string;
-  coverArt?: string;
-  songCount: number;
-  duration: number;
-  playCount?: number;
-  created: string;
-  starred?: string;
-  year?: number;
-  genre?: string;
-}
-
-interface Artist {
-  id: string;
-  name: string;
-  albumCount: number;
-  starred?: string;
-  coverArt?: string;
-}
-
-interface Song {
-  id: string;
-  parent: string;
-  isDir: boolean;
-  title: string;
-  artist?: string;
-  artistId?: string;
-  album?: string;
-  albumId?: string;
-  year?: number;
-  genre?: string;
-  coverArt?: string;
-  size?: number;
-  contentType?: string;
-  suffix?: string;
-  starred?: string;
-  duration?: number;
-  bitRate?: number;
-  path?: string;
-  playCount?: number;
-  created: string;
-}
-
-export interface CacheItem<T> {
-  data: T;
-  timestamp: number;
-  expiresAt: number;
-}
-
-export interface CacheConfig {
-  defaultTTL: number; // Time to live in milliseconds
-  maxSize: number; // Maximum number of items in cache
-}
-
-class Cache<T> {
-  private cache = new Map<string, CacheItem<T>>();
-  private config: CacheConfig;
-
-  constructor(config: CacheConfig = { defaultTTL: 24 * 60 * 60 * 1000, maxSize: 1000 }) {
-    this.config = config;
-  }
-
-  set(key: string, data: T, ttl?: number): void {
-    const now = Date.now();
-    const expiresAt = now + (ttl || this.config.defaultTTL);
-    
-    // Remove expired items before adding new one
-    this.cleanup();
-    
-    // If cache is at max size, remove oldest item
-    if (this.cache.size >= this.config.maxSize) {
-      const oldestKey = this.cache.keys().next().value;
-      if (oldestKey) {
-        this.cache.delete(oldestKey);
-      }
-    }
-    
-    this.cache.set(key, {
-      data,
-      timestamp: now,
-      expiresAt
-    });
-  }
-
-  get(key: string): T | null {
-    const item = this.cache.get(key);
-    if (!item) return null;
-    
-    // Check if item has expired
-    if (Date.now() > item.expiresAt) {
-      this.cache.delete(key);
-      return null;
-    }
-    
-    return item.data;
-  }
-
-  has(key: string): boolean {
-    return this.get(key) !== null;
-  }
-
-  delete(key: string): boolean {
-    return this.cache.delete(key);
-  }
-
-  clear(): void {
-    this.cache.clear();
-  }
-
-  size(): number {
-    this.cleanup();
-    return this.cache.size;
-  }
-
-  keys(): string[] {
-    this.cleanup();
-    return Array.from(this.cache.keys());
-  }
-
-  private cleanup(): void {
-    const now = Date.now();
-    for (const [key, item] of this.cache.entries()) {
-      if (now > item.expiresAt) {
-        this.cache.delete(key);
-      }
-    }
-  }
-
-  // Get cache statistics
-  getStats() {
-    this.cleanup();
-    const items = Array.from(this.cache.values());
-    const totalSize = items.length;
-    const oldestItem = items.reduce((oldest, item) => 
-      !oldest || item.timestamp < oldest.timestamp ? item : oldest, null as CacheItem<T> | null);
-    const newestItem = items.reduce((newest, item) => 
-      !newest || item.timestamp > newest.timestamp ? item : newest, null as CacheItem<T> | null);
-
-    return {
-      size: totalSize,
-      maxSize: this.config.maxSize,
-      oldestTimestamp: oldestItem?.timestamp,
-      newestTimestamp: newestItem?.timestamp,
-      defaultTTL: this.config.defaultTTL
-    };
-  }
-}
-
-// Specific cache instances
-export const albumCache = new Cache<Album[]>({ defaultTTL: 24 * 60 * 60 * 1000, maxSize: 500 }); // 24 hours
-export const artistCache = new Cache<Artist[]>({ defaultTTL: 24 * 60 * 60 * 1000, maxSize: 200 }); // 24 hours
-export const songCache = new Cache<Song[]>({ defaultTTL: 12 * 60 * 60 * 1000, maxSize: 1000 }); // 12 hours
-export const imageCache = new Cache<string>({ defaultTTL: 7 * 24 * 60 * 60 * 1000, maxSize: 1000 }); // 7 days for image URLs
-
-// Cache management utilities
-export const CacheManager = {
-  clearAll() {
-    albumCache.clear();
-    artistCache.clear();
-    songCache.clear();
-    imageCache.clear();
-    
-    // Also clear localStorage cache data
-    if (typeof window !== 'undefined') {
-      const keys = Object.keys(localStorage);
-      keys.forEach(key => {
-        if (key.startsWith('cache-') || key.startsWith('library-cache-')) {
-          localStorage.removeItem(key);
-        }
-      });
-    }
-  },
-
-  getStats() {
-    return {
-      albums: albumCache.getStats(),
-      artists: artistCache.getStats(),
-      songs: songCache.getStats(),
-      images: imageCache.getStats()
-    };
-  },
-
-  getCacheSizeBytes() {
-    if (typeof window === 'undefined') return 0;
-    
-    let size = 0;
-    const keys = Object.keys(localStorage);
-    keys.forEach(key => {
-      if (key.startsWith('cache-') || key.startsWith('library-cache-')) {
-        size += localStorage.getItem(key)?.length || 0;
-      }
-    });
-    return size;
-  }
-};
-
-// Persistent cache for localStorage
-export const PersistentCache = {
-  set<T>(key: string, data: T, ttl: number = 24 * 60 * 60 * 1000): void {
-    if (typeof window === 'undefined') return;
-    
-    const item: CacheItem<T> = {
-      data,
-      timestamp: Date.now(),
-      expiresAt: Date.now() + ttl
-    };
-    
-    try {
-      localStorage.setItem(`cache-${key}`, JSON.stringify(item));
-    } catch (error) {
-      console.warn('Failed to store in localStorage cache:', error);
-    }
-  },
-
-  get<T>(key: string): T | null {
-    if (typeof window === 'undefined') return null;
-    
-    try {
-      const stored = localStorage.getItem(`cache-${key}`);
-      if (!stored) return null;
-      
-      const item: CacheItem<T> = JSON.parse(stored);
-      
-      // Check if expired
-      if (Date.now() > item.expiresAt) {
-        localStorage.removeItem(`cache-${key}`);
-        return null;
-      }
-      
-      return item.data;
-    } catch (error) {
-      console.warn('Failed to read from localStorage cache:', error);
-      return null;
-    }
-  },
-
-  delete(key: string): void {
-    if (typeof window === 'undefined') return;
-    localStorage.removeItem(`cache-${key}`);
-  },
-
-  clear(): void {
-    if (typeof window === 'undefined') return;
-    
-    const keys = Object.keys(localStorage);
-    keys.forEach(key => {
-      if (key.startsWith('cache-')) {
-        localStorage.removeItem(key);
-      }
-    });
-  }
-};

lib/gravatar.ts

@@ -14,7 +14,7 @@ export function getGravatarUrl(
 ): string {
   // Normalize email: trim whitespace and convert to lowercase
   const normalizedEmail = email.trim().toLowerCase();
-  
+  // i love md5 hash (no i dont)
   // Generate MD5 hash of the email
   const hash = crypto.createHash('md5').update(normalizedEmail).digest('hex');
   

lib/image-utils.ts

@@ -123,3 +123,85 @@ export function useOptimalImageSize(
   const divisions = [60, 120, 240, 400, 600, 1200];
   return divisions.find(size => size >= optimalSize) || 1200;
 }
+
+/**
+ * Extract dominant color from an image
+ * @param imageUrl - URL of the image to analyze
+ * @returns Promise that resolves to CSS color string (rgb format)
+ */
+export async function extractDominantColor(imageUrl: string): Promise<string> {
+  return new Promise((resolve, reject) => {
+    try {
+      const img = document.createElement('img');
+      img.crossOrigin = 'anonymous';
+      
+      img.onload = () => {
+        try {
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d');
+          if (!ctx) {
+            resolve('rgb(25, 25, 25)'); // Fallback dark color
+            return;
+          }
+          
+          canvas.width = img.width;
+          canvas.height = img.height;
+          ctx.drawImage(img, 0, 0);
+          
+          // Simple dominant color extraction
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const data = imageData.data;
+          let r = 0, g = 0, b = 0;
+          
+          // Sample points across the image (for performance, not using all pixels)
+          const sampleSize = Math.max(1, Math.floor(data.length / 4000)); 
+          let sampleCount = 0;
+          
+          for (let i = 0; i < data.length; i += 4 * sampleSize) {
+            r += data[i];
+            g += data[i + 1];
+            b += data[i + 2];
+            sampleCount++;
+          }
+          
+          r = Math.floor(r / sampleCount);
+          g = Math.floor(g / sampleCount);
+          b = Math.floor(b / sampleCount);
+          
+          // Adjust brightness to ensure readability
+          const brightness = (r * 299 + g * 587 + b * 114) / 1000;
+          
+          // For very light colors, darken them
+          if (brightness > 200) {
+            const darkFactor = 0.7;
+            r = Math.floor(r * darkFactor);
+            g = Math.floor(g * darkFactor);
+            b = Math.floor(b * darkFactor);
+          }
+          
+          // For very dark colors, lighten them slightly
+          if (brightness < 50) {
+            const lightFactor = 1.3;
+            r = Math.min(255, Math.floor(r * lightFactor));
+            g = Math.min(255, Math.floor(g * lightFactor));
+            b = Math.min(255, Math.floor(b * lightFactor));
+          }
+          
+          resolve(`rgb(${r}, ${g}, ${b})`);
+        } catch (error) {
+          console.error('Error extracting color:', error);
+          resolve('rgb(25, 25, 25)'); // Fallback dark color
+        }
+      };
+      
+      img.onerror = () => {
+        resolve('rgb(25, 25, 25)'); // Fallback dark color
+      };
+      
+      img.src = imageUrl;
+    } catch (error) {
+      console.error('Error loading image for color extraction:', error);
+      resolve('rgb(25, 25, 25)'); // Fallback dark color
+    }
+  });
+}

lib/indexeddb.ts

@@ -0,0 +1,655 @@
+'use client';
+
+export interface LibraryItem {
+  id: string;
+  lastModified: number;
+  synced: boolean;
+}
+
+export interface OfflineAlbum extends LibraryItem {
+  name: string;
+  artist: string;
+  artistId: string;
+  coverArt?: string;
+  songCount: number;
+  duration: number;
+  playCount?: number;
+  created: string;
+  starred?: string;
+  year?: number;
+  genre?: string;
+}
+
+export interface OfflineArtist extends LibraryItem {
+  name: string;
+  albumCount: number;
+  starred?: string;
+  coverArt?: string;
+}
+
+export interface OfflineSong extends LibraryItem {
+  parent: string;
+  isDir: boolean;
+  title: string;
+  album: string;
+  artist: string;
+  track?: number;
+  year?: number;
+  genre?: string;
+  coverArt?: string;
+  size: number;
+  contentType: string;
+  suffix: string;
+  duration: number;
+  bitRate?: number;
+  path: string;
+  playCount?: number;
+  discNumber?: number;
+  created: string;
+  albumId: string;
+  artistId: string;
+  type: string;
+  starred?: string;
+}
+
+export interface OfflinePlaylist extends LibraryItem {
+  name: string;
+  comment?: string;
+  owner: string;
+  public: boolean;
+  songCount: number;
+  duration: number;
+  created: string;
+  changed: string;
+  coverArt?: string;
+  songIds: string[];
+}
+
+export interface SyncMetadata<T = unknown> {
+  key: string;
+  value: T;
+  lastUpdated: number;
+}
+
+// Shape for queued operations' data payloads
+export type SyncOperationData =
+  | { star: true } // star
+  | { star: false } // unstar
+  | { name: string; songIds?: string[] } // create_playlist
+  | { name?: string; comment?: string; songIds?: string[] } // update_playlist
+  | Record<string, never>; // delete_playlist, scrobble, or empty
+
+export interface SyncOperation {
+  id: string;
+  type: 'star' | 'unstar' | 'create_playlist' | 'update_playlist' | 'delete_playlist' | 'scrobble';
+  entityType: 'song' | 'album' | 'artist' | 'playlist';
+  entityId: string;
+  data: SyncOperationData;
+  timestamp: number;
+  retryCount: number;
+}
+
+export interface LibrarySyncStats {
+  albums: number;
+  artists: number;
+  songs: number;
+  playlists: number;
+  lastSync: Date | null;
+  pendingOperations: number;
+  storageSize: number;
+  syncInProgress: boolean;
+}
+
+class OfflineLibraryDB {
+  private dbName = 'stillnavidrome-offline';
+  private dbVersion = 2;
+  private db: IDBDatabase | null = null;
+  private isInitialized = false;
+
+  async initialize(): Promise<boolean> {
+    if (this.isInitialized && this.db) {
+      return true;
+    }
+
+    if (!('indexedDB' in window)) {
+      console.warn('IndexedDB not supported');
+      return false;
+    }
+
+    try {
+      this.db = await this.openDatabase();
+      this.isInitialized = true;
+      return true;
+    } catch (error) {
+      console.error('Failed to initialize offline library:', error);
+      return false;
+    }
+  }
+
+  private openDatabase(): Promise<IDBDatabase> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.dbVersion);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result);
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result;
+
+        // Albums store
+        if (!db.objectStoreNames.contains('albums')) {
+          const albumsStore = db.createObjectStore('albums', { keyPath: 'id' });
+          albumsStore.createIndex('artist', 'artist', { unique: false });
+          albumsStore.createIndex('artistId', 'artistId', { unique: false });
+          albumsStore.createIndex('starred', 'starred', { unique: false });
+          albumsStore.createIndex('synced', 'synced', { unique: false });
+          albumsStore.createIndex('lastModified', 'lastModified', { unique: false });
+        }
+
+        // Artists store
+        if (!db.objectStoreNames.contains('artists')) {
+          const artistsStore = db.createObjectStore('artists', { keyPath: 'id' });
+          artistsStore.createIndex('name', 'name', { unique: false });
+          artistsStore.createIndex('starred', 'starred', { unique: false });
+          artistsStore.createIndex('synced', 'synced', { unique: false });
+          artistsStore.createIndex('lastModified', 'lastModified', { unique: false });
+        }
+
+        // Songs store
+        if (!db.objectStoreNames.contains('songs')) {
+          const songsStore = db.createObjectStore('songs', { keyPath: 'id' });
+          songsStore.createIndex('albumId', 'albumId', { unique: false });
+          songsStore.createIndex('artistId', 'artistId', { unique: false });
+          songsStore.createIndex('starred', 'starred', { unique: false });
+          songsStore.createIndex('synced', 'synced', { unique: false });
+          songsStore.createIndex('lastModified', 'lastModified', { unique: false });
+          songsStore.createIndex('title', 'title', { unique: false });
+        }
+
+        // Playlists store
+        if (!db.objectStoreNames.contains('playlists')) {
+          const playlistsStore = db.createObjectStore('playlists', { keyPath: 'id' });
+          playlistsStore.createIndex('name', 'name', { unique: false });
+          playlistsStore.createIndex('owner', 'owner', { unique: false });
+          playlistsStore.createIndex('synced', 'synced', { unique: false });
+          playlistsStore.createIndex('lastModified', 'lastModified', { unique: false });
+        }
+
+        // Sync operations queue
+        if (!db.objectStoreNames.contains('syncQueue')) {
+          const syncStore = db.createObjectStore('syncQueue', { keyPath: 'id' });
+          syncStore.createIndex('timestamp', 'timestamp', { unique: false });
+          syncStore.createIndex('type', 'type', { unique: false });
+          syncStore.createIndex('entityType', 'entityType', { unique: false });
+        }
+
+        // Metadata store for sync info and settings
+        if (!db.objectStoreNames.contains('metadata')) {
+          const metadataStore = db.createObjectStore('metadata', { keyPath: 'key' });
+        }
+      };
+    });
+  }
+
+  // Metadata operations
+  async setMetadata<T>(key: string, value: T): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['metadata'], 'readwrite');
+    const store = transaction.objectStore('metadata');
+    
+    const metadata: SyncMetadata<T> = {
+      key,
+      value,
+      lastUpdated: Date.now()
+    };
+
+    return new Promise((resolve, reject) => {
+      const request = store.put(metadata);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getMetadata<T = unknown>(key: string): Promise<T | null> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['metadata'], 'readonly');
+    const store = transaction.objectStore('metadata');
+
+    return new Promise((resolve, reject) => {
+      const request = store.get(key);
+      request.onsuccess = () => {
+        const result = request.result as SyncMetadata<T> | undefined;
+        resolve(result ? (result.value as T) : null);
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Album operations
+  async storeAlbums(albums: OfflineAlbum[]): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['albums'], 'readwrite');
+    const store = transaction.objectStore('albums');
+
+    return new Promise((resolve, reject) => {
+      let completed = 0;
+      const total = albums.length;
+
+      if (total === 0) {
+        resolve();
+        return;
+      }
+
+      albums.forEach(album => {
+        const albumWithMeta = {
+          ...album,
+          lastModified: Date.now(),
+          synced: true
+        };
+
+        const request = store.put(albumWithMeta);
+        request.onsuccess = () => {
+          completed++;
+          if (completed === total) resolve();
+        };
+        request.onerror = () => reject(request.error);
+      });
+    });
+  }
+
+  async getAlbums(starred?: boolean): Promise<OfflineAlbum[]> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['albums'], 'readonly');
+    const store = transaction.objectStore('albums');
+
+    return new Promise((resolve, reject) => {
+      const request = starred 
+        ? store.index('starred').getAll(IDBKeyRange.only('starred'))
+        : store.getAll();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getAlbum(id: string): Promise<OfflineAlbum | null> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['albums'], 'readonly');
+    const store = transaction.objectStore('albums');
+
+    return new Promise((resolve, reject) => {
+      const request = store.get(id);
+      request.onsuccess = () => resolve(request.result || null);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Artist operations
+  async storeArtists(artists: OfflineArtist[]): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['artists'], 'readwrite');
+    const store = transaction.objectStore('artists');
+
+    return new Promise((resolve, reject) => {
+      let completed = 0;
+      const total = artists.length;
+
+      if (total === 0) {
+        resolve();
+        return;
+      }
+
+      artists.forEach(artist => {
+        const artistWithMeta = {
+          ...artist,
+          lastModified: Date.now(),
+          synced: true
+        };
+
+        const request = store.put(artistWithMeta);
+        request.onsuccess = () => {
+          completed++;
+          if (completed === total) resolve();
+        };
+        request.onerror = () => reject(request.error);
+      });
+    });
+  }
+
+  async getArtists(starred?: boolean): Promise<OfflineArtist[]> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['artists'], 'readonly');
+    const store = transaction.objectStore('artists');
+
+    return new Promise((resolve, reject) => {
+      const request = starred 
+        ? store.index('starred').getAll(IDBKeyRange.only('starred'))
+        : store.getAll();
+
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Song operations
+  async storeSongs(songs: OfflineSong[]): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['songs'], 'readwrite');
+    const store = transaction.objectStore('songs');
+
+    return new Promise((resolve, reject) => {
+      let completed = 0;
+      const total = songs.length;
+
+      if (total === 0) {
+        resolve();
+        return;
+      }
+
+      songs.forEach(song => {
+        const songWithMeta = {
+          ...song,
+          lastModified: Date.now(),
+          synced: true
+        };
+
+        const request = store.put(songWithMeta);
+        request.onsuccess = () => {
+          completed++;
+          if (completed === total) resolve();
+        };
+        request.onerror = () => reject(request.error);
+      });
+    });
+  }
+
+  async getSongs(albumId?: string, starred?: boolean): Promise<OfflineSong[]> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['songs'], 'readonly');
+    const store = transaction.objectStore('songs');
+
+    return new Promise((resolve, reject) => {
+      let request: IDBRequest<OfflineSong[]>;
+
+      if (albumId) {
+        request = store.index('albumId').getAll(IDBKeyRange.only(albumId));
+      } else if (starred) {
+        request = store.index('starred').getAll(IDBKeyRange.only('starred'));
+      } else {
+        request = store.getAll();
+      }
+
+  request.onsuccess = () => resolve(request.result as OfflineSong[]);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Playlist operations
+  async storePlaylists(playlists: OfflinePlaylist[]): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['playlists'], 'readwrite');
+    const store = transaction.objectStore('playlists');
+
+    return new Promise((resolve, reject) => {
+      let completed = 0;
+      const total = playlists.length;
+
+      if (total === 0) {
+        resolve();
+        return;
+      }
+
+      playlists.forEach(playlist => {
+        const playlistWithMeta = {
+          ...playlist,
+          lastModified: Date.now(),
+          synced: true
+        };
+
+        const request = store.put(playlistWithMeta);
+        request.onsuccess = () => {
+          completed++;
+          if (completed === total) resolve();
+        };
+        request.onerror = () => reject(request.error);
+      });
+    });
+  }
+
+  async getPlaylists(): Promise<OfflinePlaylist[]> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['playlists'], 'readonly');
+    const store = transaction.objectStore('playlists');
+
+    return new Promise((resolve, reject) => {
+      const request = store.getAll();
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Sync operations
+  async addSyncOperation(operation: Omit<SyncOperation, 'id' | 'timestamp' | 'retryCount'>): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['syncQueue'], 'readwrite');
+    const store = transaction.objectStore('syncQueue');
+
+    const syncOp: SyncOperation = {
+      ...operation,
+      id: crypto.randomUUID(),
+      timestamp: Date.now(),
+      retryCount: 0
+    };
+
+    return new Promise((resolve, reject) => {
+      const request = store.add(syncOp);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getSyncOperations(): Promise<SyncOperation[]> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['syncQueue'], 'readonly');
+    const store = transaction.objectStore('syncQueue');
+
+    return new Promise((resolve, reject) => {
+      const request = store.getAll();
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async removeSyncOperation(id: string): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['syncQueue'], 'readwrite');
+    const store = transaction.objectStore('syncQueue');
+
+    return new Promise((resolve, reject) => {
+      const request = store.delete(id);
+      request.onsuccess = () => resolve();
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Statistics and management
+  async getStats(): Promise<LibrarySyncStats> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const [albums, artists, songs, playlists, syncOps, lastSyncNum] = await Promise.all([
+      this.getAlbums(),
+      this.getArtists(),
+      this.getSongs(),
+      this.getPlaylists(),
+      this.getSyncOperations(),
+      this.getMetadata<number>('lastSync')
+    ]);
+
+    // Estimate storage size
+    const storageSize = await this.estimateStorageSize();
+
+    return {
+      albums: albums.length,
+      artists: artists.length,
+      songs: songs.length,
+      playlists: playlists.length,
+  lastSync: typeof lastSyncNum === 'number' ? new Date(lastSyncNum) : null,
+      pendingOperations: syncOps.length,
+      storageSize,
+  syncInProgress: (await this.getMetadata<boolean>('syncInProgress')) ?? false
+    };
+  }
+
+  async estimateStorageSize(): Promise<number> {
+    if (!this.db) return 0;
+
+    try {
+      const estimate = await navigator.storage.estimate();
+      return estimate.usage || 0;
+    } catch {
+      // Fallback estimation if storage API not available
+      const [albums, artists, songs, playlists] = await Promise.all([
+        this.getAlbums(),
+        this.getArtists(),
+        this.getSongs(),
+        this.getPlaylists()
+      ]);
+
+      // Rough estimation: average 2KB per item
+      return (albums.length + artists.length + songs.length + playlists.length) * 2048;
+    }
+  }
+
+  async clearAllData(): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const transaction = this.db.transaction(['albums', 'artists', 'songs', 'playlists', 'syncQueue', 'metadata'], 'readwrite');
+    
+    const stores = [
+      transaction.objectStore('albums'),
+      transaction.objectStore('artists'),
+      transaction.objectStore('songs'),
+      transaction.objectStore('playlists'),
+      transaction.objectStore('syncQueue'),
+      transaction.objectStore('metadata')
+    ];
+
+    return new Promise((resolve, reject) => {
+      let completed = 0;
+      const total = stores.length;
+
+      stores.forEach(store => {
+        const request = store.clear();
+        request.onsuccess = () => {
+          completed++;
+          if (completed === total) resolve();
+        };
+        request.onerror = () => reject(request.error);
+      });
+    });
+  }
+
+  // Star/unstar operations (offline-first)
+  async starItem(id: string, type: 'song' | 'album' | 'artist'): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const storeName = `${type}s`;
+    const transaction = this.db.transaction([storeName, 'syncQueue'], 'readwrite');
+    const store = transaction.objectStore(storeName);
+    const syncStore = transaction.objectStore('syncQueue');
+
+    return new Promise((resolve, reject) => {
+      // Update the item locally first
+      const getRequest = store.get(id);
+      getRequest.onsuccess = () => {
+        const item = getRequest.result;
+        if (item) {
+          item.starred = 'starred';
+          item.lastModified = Date.now();
+          item.synced = false;
+
+          const putRequest = store.put(item);
+          putRequest.onsuccess = () => {
+            // Add to sync queue
+            const syncOp: SyncOperation = {
+              id: crypto.randomUUID(),
+              type: 'star',
+              entityType: type,
+              entityId: id,
+              data: { star: true },
+              timestamp: Date.now(),
+              retryCount: 0
+            };
+
+            const syncRequest = syncStore.add(syncOp);
+            syncRequest.onsuccess = () => resolve();
+            syncRequest.onerror = () => reject(syncRequest.error);
+          };
+          putRequest.onerror = () => reject(putRequest.error);
+        } else {
+          reject(new Error(`${type} not found`));
+        }
+      };
+      getRequest.onerror = () => reject(getRequest.error);
+    });
+  }
+
+  async unstarItem(id: string, type: 'song' | 'album' | 'artist'): Promise<void> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const storeName = `${type}s`;
+    const transaction = this.db.transaction([storeName, 'syncQueue'], 'readwrite');
+    const store = transaction.objectStore(storeName);
+    const syncStore = transaction.objectStore('syncQueue');
+
+    return new Promise((resolve, reject) => {
+      const getRequest = store.get(id);
+      getRequest.onsuccess = () => {
+        const item = getRequest.result;
+        if (item) {
+          delete item.starred;
+          item.lastModified = Date.now();
+          item.synced = false;
+
+          const putRequest = store.put(item);
+          putRequest.onsuccess = () => {
+            const syncOp: SyncOperation = {
+              id: crypto.randomUUID(),
+              type: 'unstar',
+              entityType: type,
+              entityId: id,
+              data: { star: false },
+              timestamp: Date.now(),
+              retryCount: 0
+            };
+
+            const syncRequest = syncStore.add(syncOp);
+            syncRequest.onsuccess = () => resolve();
+            syncRequest.onerror = () => reject(syncRequest.error);
+          };
+          putRequest.onerror = () => reject(putRequest.error);
+        } else {
+          reject(new Error(`${type} not found`));
+        }
+      };
+      getRequest.onerror = () => reject(getRequest.error);
+    });
+  }
+}
+
+// Singleton instance
+export const offlineLibraryDB = new OfflineLibraryDB();

lib/musicbrainz-api.ts

@@ -0,0 +1,347 @@
+/**
+ * MusicBrainz API client for the auto-tagging feature
+ * 
+ * This module provides functions to search and fetch metadata from MusicBrainz,
+ * which is an open music encyclopedia that collects music metadata.
+ */
+
+// Define the User-Agent string as per MusicBrainz API guidelines
+// https://musicbrainz.org/doc/MusicBrainz_API/Rate_Limiting#User-Agent
+const USER_AGENT = 'mice/1.0.0 (https://github.com/sillyangel/mice)';
+
+// Base URL for MusicBrainz API
+const API_BASE_URL = 'https://musicbrainz.org/ws/2';
+
+// Add a delay between requests to comply with MusicBrainz rate limiting
+const RATE_LIMIT_DELAY = 1100; // Slightly more than 1 second to be safe
+
+// Queue for API requests to ensure proper rate limiting
+const requestQueue: (() => Promise<unknown>)[] = [];
+let isProcessingQueue = false;
+
+/**
+ * Process the request queue with proper rate limiting
+ */
+async function processQueue() {
+  if (isProcessingQueue || requestQueue.length === 0) return;
+  
+  isProcessingQueue = true;
+  
+  while (requestQueue.length > 0) {
+    const request = requestQueue.shift();
+    if (request) {
+      try {
+        await request();
+      } catch (error) {
+        console.error('MusicBrainz API request failed:', error);
+      }
+      
+      // Wait before processing the next request
+      await new Promise(resolve => setTimeout(resolve, RATE_LIMIT_DELAY));
+    }
+  }
+  
+  isProcessingQueue = false;
+}
+
+/**
+ * Make a rate-limited request to the MusicBrainz API
+ */
+async function makeRequest<T>(endpoint: string, params: Record<string, string> = {}): Promise<T> {
+  return new Promise<T>((resolve, reject) => {
+    const requestFn = async () => {
+      try {
+        const url = new URL(`${API_BASE_URL}${endpoint}`);
+        
+        // Add format parameter
+        url.searchParams.append('fmt', 'json');
+        
+        // Add other parameters
+        Object.entries(params).forEach(([key, value]) => {
+          url.searchParams.append(key, value);
+        });
+        
+        const response = await fetch(url.toString(), {
+          headers: {
+            'User-Agent': USER_AGENT
+          }
+        });
+        
+        if (!response.ok) {
+          throw new Error(`MusicBrainz API error: ${response.status} ${response.statusText}`);
+        }
+        
+        const data = await response.json();
+        resolve(data as T);
+      } catch (error) {
+        reject(error);
+      }
+    };
+    
+    // Add request to queue
+    requestQueue.push(requestFn);
+    processQueue();
+  });
+}
+
+/**
+ * Search for releases (albums) in MusicBrainz
+ */
+export async function searchReleases(query: string, limit: number = 10): Promise<MusicBrainzRelease[]> {
+  try {
+    interface ReleaseSearchResult {
+      releases: MusicBrainzRelease[];
+    }
+    
+    const data = await makeRequest<ReleaseSearchResult>('/release', {
+      query,
+      limit: limit.toString()
+    });
+    
+    return data.releases || [];
+  } catch (error) {
+    console.error('Failed to search releases:', error);
+    return [];
+  }
+}
+
+/**
+ * Search for recordings (tracks) in MusicBrainz
+ */
+export async function searchRecordings(query: string, limit: number = 10): Promise<MusicBrainzRecording[]> {
+  try {
+    interface RecordingSearchResult {
+      recordings: MusicBrainzRecording[];
+    }
+    
+    const data = await makeRequest<RecordingSearchResult>('/recording', {
+      query,
+      limit: limit.toString()
+    });
+    
+    return data.recordings || [];
+  } catch (error) {
+    console.error('Failed to search recordings:', error);
+    return [];
+  }
+}
+
+/**
+ * Get detailed information about a release by its MBID
+ */
+export async function getRelease(mbid: string): Promise<MusicBrainzReleaseDetails | null> {
+  try {
+    // Request with recording-level relationships to get track-level data
+    const data = await makeRequest<MusicBrainzReleaseDetails>(`/release/${mbid}`, {
+      inc: 'recordings+artists+labels+artist-credits'
+    });
+    
+    return data;
+  } catch (error) {
+    console.error(`Failed to get release ${mbid}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Get detailed information about a recording by its MBID
+ */
+export async function getRecording(mbid: string): Promise<MusicBrainzRecordingDetails | null> {
+  try {
+    const data = await makeRequest<MusicBrainzRecordingDetails>(`/recording/${mbid}`, {
+      inc: 'artists+releases+artist-credits'
+    });
+    
+    return data;
+  } catch (error) {
+    console.error(`Failed to get recording ${mbid}:`, error);
+    return null;
+  }
+}
+
+/**
+ * Find the best matching release for the given album information
+ * This uses fuzzy matching to find the most likely match
+ */
+export async function findBestMatchingRelease(
+  albumName: string, 
+  artistName: string,
+  trackCount?: number
+): Promise<MusicBrainzRelease | null> {
+  try {
+    // Build a search query with both album and artist
+    const query = `release:"${albumName}" AND artist:"${artistName}"`;
+    const releases = await searchReleases(query, 5);
+    
+    if (!releases || releases.length === 0) {
+      return null;
+    }
+    
+    // If track count is provided, prioritize releases with the same track count
+    if (trackCount !== undefined) {
+      const exactTrackCountMatch = releases.find(release => 
+        release['track-count'] === trackCount
+      );
+      
+      if (exactTrackCountMatch) {
+        return exactTrackCountMatch;
+      }
+    }
+    
+    // Just return the first result as it's likely the best match
+    return releases[0];
+  } catch (error) {
+    console.error('Failed to find matching release:', error);
+    return null;
+  }
+}
+
+/**
+ * Find the best matching recording for the given track information
+ */
+export async function findBestMatchingRecording(
+  trackName: string,
+  artistName: string,
+  duration?: number // in milliseconds
+): Promise<MusicBrainzRecording | null> {
+  try {
+    // Build a search query with both track and artist
+    const query = `recording:"${trackName}" AND artist:"${artistName}"`;
+    const recordings = await searchRecordings(query, 5);
+    
+    if (!recordings || recordings.length === 0) {
+      return null;
+    }
+    
+    // If duration is provided, try to find a close match
+    if (duration !== undefined) {
+      // Convert to milliseconds if not already (MusicBrainz uses milliseconds)
+      const durationMs = duration < 1000 ? duration * 1000 : duration;
+      
+      // Find recording with the closest duration (within 5 seconds)
+      const durationMatches = recordings.filter(recording => {
+        if (!recording.length) return false;
+        return Math.abs(recording.length - durationMs) < 5000; // 5 second tolerance
+      });
+      
+      if (durationMatches.length > 0) {
+        return durationMatches[0];
+      }
+    }
+    
+    // Just return the first result as it's likely the best match
+    return recordings[0];
+  } catch (error) {
+    console.error('Failed to find matching recording:', error);
+    return null;
+  }
+}
+
+// Type definitions for MusicBrainz API responses
+
+export interface MusicBrainzRelease {
+  id: string; // MBID
+  title: string;
+  'artist-credit': Array<{
+    artist: {
+      id: string;
+      name: string;
+    };
+    name: string;
+  }>;
+  date?: string;
+  country?: string;
+  'track-count': number;
+  status?: string;
+  disambiguation?: string;
+}
+
+export interface MusicBrainzReleaseDetails extends MusicBrainzRelease {
+  media: Array<{
+    position: number;
+    format?: string;
+    tracks: Array<{
+      position: number;
+      number: string;
+      title: string;
+      length?: number;
+      recording: {
+        id: string;
+        title: string;
+        length?: number;
+      };
+    }>;
+  }>;
+  'cover-art-archive'?: {
+    artwork: boolean;
+    count: number;
+    front: boolean;
+    back: boolean;
+  };
+  barcode?: string;
+  'release-group'?: {
+    id: string;
+    'primary-type'?: string;
+  };
+}
+
+export interface MusicBrainzRecording {
+  id: string; // MBID
+  title: string;
+  length?: number; // in milliseconds
+  'artist-credit': Array<{
+    artist: {
+      id: string;
+      name: string;
+    };
+    name: string;
+  }>;
+  releases?: Array<{
+    id: string;
+    title: string;
+  }>;
+  isrcs?: string[];
+}
+
+export interface MusicBrainzRecordingDetails extends MusicBrainzRecording {
+  disambiguation?: string;
+  'first-release-date'?: string;
+  genres?: Array<{
+    id: string;
+    name: string;
+  }>;
+  tags?: Array<{
+    count: number;
+    name: string;
+  }>;
+}
+
+// Cover art functions
+// MusicBrainz has a separate API for cover art: Cover Art Archive
+
+export function getCoverArtUrl(releaseId: string, size: 'small' | 'large' | '500' | 'full' = 'large'): string {
+  return `https://coverartarchive.org/release/${releaseId}/front-${size}`;
+}
+
+// Utility function to normalize strings for comparison
+export function normalizeString(input: string): string {
+  return input
+    .toLowerCase()
+    .replace(/[^\w\s]/g, '') // Remove special characters
+    .replace(/\s+/g, ' ')    // Replace multiple spaces with a single space
+    .trim();
+}
+
+// Export the MusicBrainz client as a singleton
+const MusicBrainzClient = {
+  searchReleases,
+  searchRecordings,
+  getRelease,
+  getRecording,
+  findBestMatchingRelease,
+  findBestMatchingRecording,
+  getCoverArtUrl,
+  normalizeString
+};
+
+export default MusicBrainzClient;

lib/navidrome.ts

@@ -1,5 +1,4 @@
 import crypto from 'crypto';
-import { albumCache, artistCache, songCache, imageCache, PersistentCache } from './cache';
 
 export interface NavidromeConfig {
   serverUrl: string;
@@ -68,6 +67,7 @@ export interface Song {
   artistId: string;
   type: string;
   starred?: string;
+  replayGain?: number;
 }
 
 export interface Playlist {
@@ -214,12 +214,21 @@ class NavidromeAPI {
   }
 
   async getArtist(artistId: string): Promise<{ artist: Artist; albums: Album[] }> {
-    const response = await this.makeRequest('getArtist', { id: artistId });
-    const artistData = response.artist as Artist & { album?: Album[] };
-    return {
-      artist: artistData,
-      albums: artistData.album || []
-    };
+    try {
+      const response = await this.makeRequest('getArtist', { id: artistId });
+      // Check if artist data exists
+      if (!response.artist) {
+        throw new Error('Artist not found in response');
+      }
+      const artistData = response.artist as Artist & { album?: Album[] };
+      return {
+        artist: artistData,
+        albums: artistData.album || []
+      };
+    } catch (error) {
+      console.error('Navidrome API request failed:', error);
+      throw new Error('Artist not found');
+    }
   }
 
   async getAlbums(type?: 'newest' | 'recent' | 'frequent' | 'random' | 'alphabeticalByName' | 'alphabeticalByArtist' | 'starred' | 'highest', size: number = 500, offset: number = 0): Promise<Album[]> {
@@ -330,6 +339,23 @@ class NavidromeAPI {
     return `${this.config.serverUrl}/rest/stream?${params.toString()}`;
   }
 
+  // Direct download URL (original file). Useful for offline caching where the browser can handle transcoding.
+  getDownloadUrl(songId: string): string {
+    const salt = this.generateSalt();
+    const token = this.generateToken(this.config.password, salt);
+
+    const params = new URLSearchParams({
+      u: this.config.username,
+      t: token,
+      s: salt,
+      v: this.version,
+      c: this.clientName,
+      id: songId
+    });
+
+    return `${this.config.serverUrl}/rest/download?${params.toString()}`;
+  }
+
   getCoverArtUrl(coverArtId: string, size?: number): string {
     const salt = this.generateSalt();
     const token = this.generateToken(this.config.password, salt);

lib/offline-library.ts

@@ -0,0 +1,782 @@
+'use client';
+
+import { Album, Artist, Song, Playlist } from '@/lib/navidrome';
+
+export interface NavidromeAPIInterface {
+  ping(): Promise<boolean>;
+  getAlbums(type?: string, size?: number): Promise<Album[]>;
+  getArtists(): Promise<Artist[]>;
+  getPlaylists(): Promise<Playlist[]>;
+  getAlbum(id: string): Promise<{ album: Album; songs: Song[] }>;
+  star(id: string, type: string): Promise<void>;
+  unstar(id: string, type: string): Promise<void>;
+  createPlaylist(name: string, songIds?: string[]): Promise<Playlist>;
+  updatePlaylist(id: string, name?: string, comment?: string, songIds?: string[]): Promise<void>;
+  deletePlaylist(id: string): Promise<void>;
+  scrobble(songId: string): Promise<void>;
+}
+
+export interface OfflineDatabase {
+  albums: Album[];
+  artists: Artist[];
+  songs: Song[];
+  playlists: Playlist[];
+  favorites: {
+    albums: string[];
+    artists: string[];
+    songs: string[];
+  };
+  syncQueue: SyncOperation[];
+  lastSync: number;
+}
+
+export interface SyncOperationData {
+  // For star/unstar operations
+  star?: boolean;
+  
+  // For playlist operations
+  name?: string;
+  comment?: string;
+  songIds?: string[];
+  
+  // For scrobble operations
+  timestamp?: number;
+}
+
+export interface SyncOperation {
+  id: string;
+  type: 'star' | 'unstar' | 'create_playlist' | 'update_playlist' | 'delete_playlist' | 'scrobble';
+  data: SyncOperationData;
+  timestamp: number;
+  retryCount: number;
+  entityType: 'song' | 'album' | 'artist' | 'playlist';
+  entityId: string;
+}
+
+export interface OfflineLibraryStats {
+  albums: number;
+  artists: number;
+  songs: number;
+  playlists: number;
+  lastSync: Date | null;
+  pendingOperations: number;
+  storageSize: number;
+}
+
+class OfflineLibraryManager {
+  private dbName = 'mice-offline-library';
+  private dbVersion = 1;
+  private db: IDBDatabase | null = null;
+
+  async initialize(): Promise<boolean> {
+    if (!('indexedDB' in window)) {
+      console.warn('IndexedDB not supported');
+      return false;
+    }
+
+    try {
+      this.db = await this.openDatabase();
+      return true;
+    } catch (error) {
+      console.error('Failed to initialize offline library:', error);
+      return false;
+    }
+  }
+
+  private openDatabase(): Promise<IDBDatabase> {
+    return new Promise((resolve, reject) => {
+      const request = indexedDB.open(this.dbName, this.dbVersion);
+
+      request.onerror = () => reject(request.error);
+      request.onsuccess = () => resolve(request.result);
+
+      request.onupgradeneeded = (event) => {
+        const db = (event.target as IDBOpenDBRequest).result;
+
+        // Create object stores
+        if (!db.objectStoreNames.contains('albums')) {
+          const albumsStore = db.createObjectStore('albums', { keyPath: 'id' });
+          albumsStore.createIndex('artist', 'artist', { unique: false });
+          albumsStore.createIndex('starred', 'starred', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('artists')) {
+          const artistsStore = db.createObjectStore('artists', { keyPath: 'id' });
+          artistsStore.createIndex('name', 'name', { unique: false });
+          artistsStore.createIndex('starred', 'starred', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('songs')) {
+          const songsStore = db.createObjectStore('songs', { keyPath: 'id' });
+          songsStore.createIndex('albumId', 'albumId', { unique: false });
+          songsStore.createIndex('artistId', 'artistId', { unique: false });
+          songsStore.createIndex('starred', 'starred', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('playlists')) {
+          const playlistsStore = db.createObjectStore('playlists', { keyPath: 'id' });
+          playlistsStore.createIndex('name', 'name', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('playlistSongs')) {
+          const playlistSongsStore = db.createObjectStore('playlistSongs', { keyPath: ['playlistId', 'songId'] });
+          playlistSongsStore.createIndex('playlistId', 'playlistId', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('syncQueue')) {
+          const syncStore = db.createObjectStore('syncQueue', { keyPath: 'id' });
+          syncStore.createIndex('timestamp', 'timestamp', { unique: false });
+          syncStore.createIndex('type', 'type', { unique: false });
+        }
+
+        if (!db.objectStoreNames.contains('metadata')) {
+          const metadataStore = db.createObjectStore('metadata', { keyPath: 'key' });
+        }
+      };
+    });
+  }
+
+  // Library sync methods
+  async syncFromServer(navidromeAPI: NavidromeAPIInterface): Promise<void> {
+    if (!this.db || !navidromeAPI) return;
+
+    try {
+      console.log('Starting full library sync...');
+      
+      // Test connection
+      const isConnected = await navidromeAPI.ping();
+      if (!isConnected) {
+        throw new Error('No connection to Navidrome server');
+      }
+
+      // Sync albums
+      const albums = await navidromeAPI.getAlbums('alphabeticalByName', 5000);
+      await this.storeAlbums(albums);
+
+      // Sync artists
+      const artists = await navidromeAPI.getArtists();
+      await this.storeArtists(artists);
+
+      // Sync playlists
+      const playlists = await navidromeAPI.getPlaylists();
+      await this.storePlaylists(playlists);
+
+      // Sync songs for recently added albums (to avoid overwhelming the db)
+      const recentAlbums = albums.slice(0, 100);
+      for (const album of recentAlbums) {
+        try {
+          const { songs } = await navidromeAPI.getAlbum(album.id);
+          await this.storeSongs(songs);
+        } catch (error) {
+          console.warn(`Failed to sync songs for album ${album.id}:`, error);
+        }
+      }
+
+      // Update last sync timestamp
+      await this.setMetadata('lastSync', Date.now());
+      console.log('Library sync completed successfully');
+
+    } catch (error) {
+      console.error('Failed to sync library:', error);
+      throw error;
+    }
+  }
+
+  async syncPendingOperations(navidromeAPI: NavidromeAPIInterface): Promise<void> {
+    if (!this.db || !navidromeAPI) return;
+
+    const operations = await this.getAllSyncOperations();
+    
+    for (const operation of operations) {
+      try {
+        await this.executeOperation(operation, navidromeAPI);
+        await this.removeSyncOperation(operation.id);
+      } catch (error) {
+        console.error(`Failed to sync operation ${operation.id}:`, error);
+        
+        // Increment retry count
+        operation.retryCount++;
+        if (operation.retryCount < 3) {
+          await this.updateSyncOperation(operation);
+        } else {
+          // Remove after 3 failed attempts
+          await this.removeSyncOperation(operation.id);
+        }
+      }
+    }
+  }
+
+  private async executeOperation(operation: SyncOperation, api: NavidromeAPIInterface): Promise<void> {
+    switch (operation.type) {
+      case 'star':
+        await api.star(operation.entityId, operation.entityType);
+        break;
+      case 'unstar':
+        await api.unstar(operation.entityId, operation.entityType);
+        break;
+      case 'create_playlist':
+        if (operation.data.name) {
+          await api.createPlaylist(operation.data.name, operation.data.songIds);
+        }
+        break;
+      case 'update_playlist':
+        await api.updatePlaylist(operation.entityId, operation.data.name, operation.data.comment, operation.data.songIds);
+        break;
+      case 'delete_playlist':
+        await api.deletePlaylist(operation.entityId);
+        break;
+      case 'scrobble':
+        await api.scrobble(operation.entityId);
+        break;
+    }
+  }
+
+  // Data storage methods
+  async storeAlbums(albums: Album[]): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['albums'], 'readwrite');
+    const store = transaction.objectStore('albums');
+
+    for (const album of albums) {
+      store.put(album);
+    }
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  async storeArtists(artists: Artist[]): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['artists'], 'readwrite');
+    const store = transaction.objectStore('artists');
+
+    for (const artist of artists) {
+      store.put(artist);
+    }
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  async storeSongs(songs: Song[]): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['songs'], 'readwrite');
+    const store = transaction.objectStore('songs');
+
+    for (const song of songs) {
+      store.put(song);
+    }
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  async storePlaylists(playlists: Playlist[]): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['playlists'], 'readwrite');
+    const store = transaction.objectStore('playlists');
+
+    for (const playlist of playlists) {
+      store.put(playlist);
+    }
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  // Data retrieval methods
+  async getAlbums(starred?: boolean): Promise<Album[]> {
+    if (!this.db) return [];
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction(['albums'], 'readonly');
+      const store = transaction.objectStore('albums');
+      
+      let request: IDBRequest;
+      if (starred !== undefined) {
+        const index = store.index('starred');
+        request = index.getAll(starred ? IDBKeyRange.only('starred') : IDBKeyRange.only(undefined));
+      } else {
+        request = store.getAll();
+      }
+
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getArtists(starred?: boolean): Promise<Artist[]> {
+    if (!this.db) return [];
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction(['artists'], 'readonly');
+      const store = transaction.objectStore('artists');
+      
+      let request: IDBRequest;
+      if (starred !== undefined) {
+        const index = store.index('starred');
+        request = index.getAll(starred ? IDBKeyRange.only('starred') : IDBKeyRange.only(undefined));
+      } else {
+        request = store.getAll();
+      }
+
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getSongs(albumId?: string, artistId?: string, starred?: boolean): Promise<Song[]> {
+    if (!this.db) return [];
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction(['songs'], 'readonly');
+      const store = transaction.objectStore('songs');
+      
+      let request: IDBRequest;
+      
+      if (albumId) {
+        const index = store.index('albumId');
+        request = index.getAll(albumId);
+      } else if (artistId) {
+        const index = store.index('artistId');
+        request = index.getAll(artistId);
+      } else if (starred !== undefined) {
+        const index = store.index('starred');
+        request = index.getAll(starred ? IDBKeyRange.only('starred') : IDBKeyRange.only(undefined));
+      } else {
+        request = store.getAll();
+      }
+
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getPlaylists(): Promise<Playlist[]> {
+    if (!this.db) return [];
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction(['playlists'], 'readonly');
+      const store = transaction.objectStore('playlists');
+      const request = store.getAll();
+
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  async getAlbum(id: string): Promise<{ album: Album; songs: Song[] } | null> {
+    if (!this.db) return null;
+
+    try {
+      const [album, songs] = await Promise.all([
+        this.getAlbumById(id),
+        this.getSongs(id)
+      ]);
+
+      if (!album) return null;
+
+      return { album, songs };
+    } catch (error) {
+      console.error('Failed to get album:', error);
+      return null;
+    }
+  }
+
+  private async getAlbumById(id: string): Promise<Album | null> {
+    if (!this.db) return null;
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction(['albums'], 'readonly');
+      const store = transaction.objectStore('albums');
+      const request = store.get(id);
+
+      request.onsuccess = () => resolve(request.result || null);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Sync queue methods
+  async addSyncOperation(operation: Omit<SyncOperation, 'id' | 'timestamp' | 'retryCount'>): Promise<void> {
+    if (!this.db) return;
+
+    const fullOperation: SyncOperation = {
+      ...operation,
+      id: `${operation.type}_${operation.entityId}_${Date.now()}`,
+      timestamp: Date.now(),
+      retryCount: 0
+    };
+
+    const transaction = this.db.transaction(['syncQueue'], 'readwrite');
+    const store = transaction.objectStore('syncQueue');
+    store.put(fullOperation);
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  private async getAllSyncOperations(): Promise<SyncOperation[]> {
+    if (!this.db) return [];
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction(['syncQueue'], 'readonly');
+      const store = transaction.objectStore('syncQueue');
+      const request = store.getAll();
+
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  private async updateSyncOperation(operation: SyncOperation): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['syncQueue'], 'readwrite');
+    const store = transaction.objectStore('syncQueue');
+    store.put(operation);
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  private async removeSyncOperation(id: string): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['syncQueue'], 'readwrite');
+    const store = transaction.objectStore('syncQueue');
+    store.delete(id);
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  // Metadata methods
+  async setMetadata(key: string, value: unknown): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['metadata'], 'readwrite');
+    const store = transaction.objectStore('metadata');
+    store.put({ key, value });
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  async getMetadata(key: string): Promise<unknown> {
+    if (!this.db) return null;
+
+    return new Promise((resolve, reject) => {
+      const transaction = this.db!.transaction(['metadata'], 'readonly');
+      const store = transaction.objectStore('metadata');
+      const request = store.get(key);
+
+      request.onsuccess = () => {
+        const result = request.result;
+        resolve(result ? result.value : null);
+      };
+      request.onerror = () => reject(request.error);
+    });
+  }
+
+  // Search methods
+  async searchOffline(query: string): Promise<{ artists: Artist[]; albums: Album[]; songs: Song[] }> {
+    if (!this.db) return { artists: [], albums: [], songs: [] };
+
+    try {
+      const [allAlbums, allArtists, allSongs] = await Promise.all([
+        this.getAlbums(),
+        this.getArtists(),
+        this.getSongs()
+      ]);
+
+      const searchLower = query.toLowerCase();
+
+      const albums = allAlbums.filter(album =>
+        album.name.toLowerCase().includes(searchLower) ||
+        album.artist.toLowerCase().includes(searchLower)
+      );
+
+      const artists = allArtists.filter(artist =>
+        artist.name.toLowerCase().includes(searchLower)
+      );
+
+      const songs = allSongs.filter(song =>
+        song.title.toLowerCase().includes(searchLower) ||
+        (song.artist && song.artist.toLowerCase().includes(searchLower)) ||
+        (song.album && song.album.toLowerCase().includes(searchLower))
+      );
+
+      return { artists, albums, songs };
+    } catch (error) {
+      console.error('Offline search failed:', error);
+      return { artists: [], albums: [], songs: [] };
+    }
+  }
+
+  // Offline favorites management
+  async starOffline(id: string, type: 'song' | 'album' | 'artist'): Promise<void> {
+    if (!this.db) return;
+
+    // Add to sync queue
+    await this.addSyncOperation({
+      type: 'star',
+      entityType: type,
+      entityId: id,
+      data: {}
+    });
+
+    // Update local data
+    const storeName = type === 'song' ? 'songs' : type === 'album' ? 'albums' : 'artists';
+    const transaction = this.db.transaction([storeName], 'readwrite');
+    const store = transaction.objectStore(storeName);
+    
+    const getRequest = store.get(id);
+    getRequest.onsuccess = () => {
+      const item = getRequest.result;
+      if (item) {
+        item.starred = new Date().toISOString();
+        store.put(item);
+      }
+    };
+  }
+
+  async unstarOffline(id: string, type: 'song' | 'album' | 'artist'): Promise<void> {
+    if (!this.db) return;
+
+    // Add to sync queue
+    await this.addSyncOperation({
+      type: 'unstar',
+      entityType: type,
+      entityId: id,
+      data: {}
+    });
+
+    // Update local data
+    const storeName = type === 'song' ? 'songs' : type === 'album' ? 'albums' : 'artists';
+    const transaction = this.db.transaction([storeName], 'readwrite');
+    const store = transaction.objectStore(storeName);
+    
+    const getRequest = store.get(id);
+    getRequest.onsuccess = () => {
+      const item = getRequest.result;
+      if (item) {
+        delete item.starred;
+        store.put(item);
+      }
+    };
+  }
+
+  // Playlist management
+  async createPlaylistOffline(name: string, songIds?: string[]): Promise<Playlist> {
+    if (!this.db) throw new Error('Database not initialized');
+
+    const playlistId = `offline_${Date.now()}`;
+    const playlist: Playlist = {
+      id: playlistId,
+      name,
+      comment: '',
+      owner: 'offline',
+      public: false,
+      songCount: songIds?.length || 0,
+      duration: 0,
+      created: new Date().toISOString(),
+      changed: new Date().toISOString()
+    };
+
+    // Store playlist
+    const transaction = this.db.transaction(['playlists'], 'readwrite');
+    const store = transaction.objectStore('playlists');
+    store.put(playlist);
+
+    // Add to sync queue
+    await this.addSyncOperation({
+      type: 'create_playlist',
+      entityType: 'playlist',
+      entityId: playlistId,
+      data: { name, songIds }
+    });
+
+    return playlist;
+  }
+
+  // Update playlist
+  async updatePlaylist(id: string, name?: string, comment?: string, songIds?: string[]): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['playlists', 'playlistSongs'], 'readwrite');
+    const playlistStore = transaction.objectStore('playlists');
+    const playlistSongsStore = transaction.objectStore('playlistSongs');
+
+    // Get existing playlist
+    const playlist = await new Promise<Playlist>((resolve, reject) => {
+      const request = playlistStore.get(id);
+      request.onsuccess = () => resolve(request.result);
+      request.onerror = () => reject(request.error);
+    });
+
+    if (!playlist) {
+      throw new Error('Playlist not found');
+    }
+
+    // Update playlist metadata
+    const updatedPlaylist = {
+      ...playlist,
+      ...(name && { name }),
+      ...(comment && { comment }),
+      updatedAt: new Date().toISOString()
+    };
+
+    playlistStore.put(updatedPlaylist);
+
+    // Update song associations if provided
+    if (songIds) {
+      // Remove existing songs
+      const existingSongs = await new Promise<{ playlistId: string; songId: string }[]>((resolve, reject) => {
+        const index = playlistSongsStore.index('playlistId');
+        const request = index.getAll(id);
+        request.onsuccess = () => resolve(request.result || []);
+        request.onerror = () => reject(request.error);
+      });
+
+      for (const song of existingSongs) {
+        playlistSongsStore.delete([song.playlistId, song.songId]);
+      }
+
+      // Add new songs
+      for (const songId of songIds) {
+        playlistSongsStore.put({
+          playlistId: id,
+          songId: songId
+        });
+      }
+    }
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  // Delete playlist
+  async deletePlaylist(id: string): Promise<void> {
+    if (!this.db) return;
+
+    const transaction = this.db.transaction(['playlists', 'playlistSongs'], 'readwrite');
+    const playlistStore = transaction.objectStore('playlists');
+    const playlistSongsStore = transaction.objectStore('playlistSongs');
+
+    // Delete playlist
+    playlistStore.delete(id);
+
+    // Delete associated songs
+    const index = playlistSongsStore.index('playlistId');
+    const songs = await new Promise<{ playlistId: string; songId: string }[]>((resolve, reject) => {
+      const request = index.getAll(id);
+      request.onsuccess = () => resolve(request.result || []);
+      request.onerror = () => reject(request.error);
+    });
+
+    for (const song of songs) {
+      playlistSongsStore.delete([song.playlistId, song.songId]);
+    }
+
+    return new Promise((resolve, reject) => {
+      transaction.oncomplete = () => resolve();
+      transaction.onerror = () => reject(transaction.error);
+    });
+  }
+
+  // Statistics
+  async getLibraryStats(): Promise<OfflineLibraryStats> {
+    if (!this.db) {
+      return {
+        albums: 0,
+        artists: 0,
+        songs: 0,
+        playlists: 0,
+        lastSync: null,
+        pendingOperations: 0,
+        storageSize: 0
+      };
+    }
+
+    try {
+      const [albums, artists, songs, playlists, syncOps, lastSync] = await Promise.all([
+        this.getAlbums(),
+        this.getArtists(),
+        this.getSongs(),
+        this.getPlaylists(),
+        this.getAllSyncOperations(),
+        this.getMetadata('lastSync')
+      ]);
+
+      // Estimate storage size (rough calculation)
+      const storageSize = this.estimateStorageSize(albums, artists, songs, playlists);
+
+      return {
+        albums: albums.length,
+        artists: artists.length,
+        songs: songs.length,
+        playlists: playlists.length,
+        lastSync: lastSync && typeof lastSync === 'number' ? new Date(lastSync) : null,
+        pendingOperations: syncOps.length,
+        storageSize
+      };
+    } catch (error) {
+      console.error('Failed to get library stats:', error);
+      return {
+        albums: 0,
+        artists: 0,
+        songs: 0,
+        playlists: 0,
+        lastSync: null,
+        pendingOperations: 0,
+        storageSize: 0
+      };
+    }
+  }
+
+  private estimateStorageSize(albums: Album[], artists: Artist[], songs: Song[], playlists: Playlist[]): number {
+    // Rough estimation: each item is approximately 1KB in JSON
+    return (albums.length + artists.length + songs.length + playlists.length) * 1024;
+  }
+
+  // Clear all data
+  async clearAllData(): Promise<void> {
+    if (!this.db) return;
+
+    const storeNames = ['albums', 'artists', 'songs', 'playlists', 'playlistSongs', 'syncQueue', 'metadata'];
+    
+    for (const storeName of storeNames) {
+      const transaction = this.db.transaction([storeName], 'readwrite');
+      const store = transaction.objectStore(storeName);
+      await new Promise<void>((resolve, reject) => {
+        const request = store.clear();
+        request.onsuccess = () => resolve();
+        request.onerror = () => reject(request.error);
+      });
+    }
+  }
+}
+
+export const offlineLibraryManager = new OfflineLibraryManager();

lib/posthog.ts

@@ -1,11 +0,0 @@
-import { PostHog } from "posthog-node"
-
-export default function PostHogClient() {
-  const posthogClient = new PostHog(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
-    host: process.env.NEXT_PUBLIC_POSTHOG_HOST,
-    // capture_pageview: 'history_change',
-    flushAt: 1,
-    flushInterval: 0,
-  })
-  return posthogClient
-}

lib/utils.ts

@@ -4,3 +4,19 @@ import { twMerge } from "tailwind-merge"
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function constrain(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function formatBytes(bytes: number, decimals: number = 2): string {
+  if (!+bytes) return '0 Bytes';
+
+  const k = 1024;
+  const dm = decimals < 0 ? 0 : decimals;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
+
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`;
+}

next.config.mjs

@@ -12,6 +12,8 @@ const nextConfig = {
         hostname: "**",
       }
     ],
+    minimumCacheTTL: 60,
+    // unoptimized: true,
   },
   async headers() {
     return [
@@ -45,30 +47,12 @@ const nextConfig = {
           },
           {
             key: 'Content-Security-Policy',
-            value: "default-src 'self'; script-src 'self'",
+            value: "default-src 'self' *; connect-src 'self' *; script-src 'self'",
           },
         ],
       },
     ];
   },
-  async rewrites() {
-    return [
-      {
-        source: '/ingest/static/:path*',
-        destination: 'https://us-assets.i.posthog.com/static/:path*',
-      },
-      {
-        source: '/ingest/:path*',
-        destination: 'https://us.i.posthog.com/:path*',
-      },
-      {
-        source: '/ingest/decide',
-        destination: 'https://us.i.posthog.com/decide',
-      },
-    ];
-  },
-  // This is required to support PostHog trailing slash API requests
-  skipTrailingSlashRedirect: true,
 };
 
 export default nextConfig;

package.json

@@ -1,9 +1,10 @@
 {
   "name": "mice-reworked",
-  "version": "2025.07.10",
+  "version": "2026.01.24",
   "private": true,
   "scripts": {
     "predev": "echo NEXT_PUBLIC_COMMIT_SHA=$(git rev-parse --short HEAD) > .env.local",
+    "prebuild": "echo NEXT_PUBLIC_COMMIT_SHA=$(git rev-parse --short HEAD) > .env.local",
     "dev": "next dev --turbopack -p 40625",
     "build": "next build",
     "start": "next start -p 40625",
@@ -13,84 +14,86 @@
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@hookform/resolvers": "^5.2.0",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-aspect-ratio": "^1.1.7",
-    "@radix-ui/react-avatar": "^1.1.1",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.2",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
+    "@radix-ui/react-aspect-ratio": "^1.1.8",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.1",
-    "@radix-ui/react-select": "^2.2.5",
-    "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toast": "^1.2.4",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toast": "^1.2.15",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@types/react-beautiful-dnd": "^13.1.8",
-    "axios": "^1.11.0",
-    "class-variance-authority": "^0.7.0",
+    "axios": "^1.13.2",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "colorthief": "^2.6.0",
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
+    "framer-motion": "^12.29.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.525.0",
-    "next": "15.4.4",
+    "lucide-react": "^0.563.0",
+    "next": "16.1.4",
     "next-themes": "^0.4.6",
-    "posthog-js": "^1.255.0",
-    "posthog-node": "^5.1.1",
-    "react": "19.1.0",
-    "react-day-picker": "^9.7.0",
-    "react-dom": "19.1.0",
-    "react-hook-form": "^7.60.0",
-    "react-icons": "^5.3.0",
-    "react-resizable-panels": "^3.0.3",
-    "recharts": "^3.0.2",
-    "sonner": "^2.0.5",
-    "tailwind-merge": "^3.3.1",
+    "react": "19.2.3",
+    "react-day-picker": "^9.13.0",
+    "react-dom": "19.2.3",
+    "react-hook-form": "^7.71.1",
+    "react-icons": "^5.5.0",
+    "react-intersection-observer": "^10.0.2",
+    "react-resizable-panels": "^4.5.1",
+    "recharts": "^3.7.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.1.2",
-    "zod": "^4.0.10"
+    "zod": "^4.3.6"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.11",
-    "@types/node": "^24.1.0",
-    "@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.4",
-    "postcss": "^8",
-    "tailwindcss": "^4.1.11",
-    "typescript": "^5"
+    "@tailwindcss/postcss": "^4.1.18",
+    "@types/node": "^25.0.10",
+    "@types/react": "19.2.9",
+    "@types/react-dom": "19.2.3",
+    "chalk": "^5.6.2",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "16.1.4",
+    "postcss": "^8.5.6",
+    "source-map-support": "^0.5.21",
+    "tailwindcss": "^4.1.18",
+    "typescript": "5.9.3"
   },
   "packageManager": "pnpm@10.13.1",
   "overrides": {
-    "@types/react": "19.1.8",
-    "@types/react-dom": "19.1.6"
+    "@types/react": "19.2.9",
+    "@types/react-dom": "19.2.3",
+    "typescript": "5.9.3"
   },
   "pnpm": {
     "overrides": {
-      "@types/react": "19.1.8",
-      "@types/react-dom": "19.1.6"
+      "@types/react": "19.2.9",
+      "@types/react-dom": "19.2.3",
+      "typescript": "5.9.3"
     },
     "onlyBuiltDependencies": [
       "sharp",

public/manifest.json

@@ -0,0 +1,129 @@
+{
+  "name": "Mice",
+  "short_name": "Mice",
+  "description": "a very awesome navidrome client",
+  "start_url": "/",
+  "categories": ["music", "entertainment"],
+  "display_override": ["window-controls-overlay"],
+  "display": "standalone",
+  "background_color": "#0f0f0f",
+  "theme_color": "#0f0f0f",
+  "icons": [
+    { 
+      "src": "/favicon.ico", 
+      "type": "image/x-icon", 
+      "sizes": "48x48"
+    },
+    { 
+      "src": "/icon-192.png", 
+      "type": "image/png", 
+      "sizes": "192x192" 
+    },
+    { 
+      "src": "/icon-512.png", 
+      "type": "image/png", 
+      "sizes": "512x512" 
+    },
+    { 
+      "src": "/icon-192-maskable.png", 
+      "type": "image/png", 
+      "sizes": "192x192", 
+      "purpose": "maskable" 
+    },
+    { 
+      "src": "/icon-512-maskable.png", 
+      "type": "image/png", 
+      "sizes": "512x512", 
+      "purpose": "maskable"
+    },
+    { 
+      "src": "/apple-touch-icon.png", 
+      "type": "image/png", 
+      "sizes": "180x180",
+      "purpose": "any"
+    },
+    { 
+      "src": "/icon-192.png", 
+      "type": "image/png", 
+      "sizes": "152x152",
+      "purpose": "any"
+    },
+    { 
+      "src": "/icon-192.png", 
+      "type": "image/png", 
+      "sizes": "120x120",
+      "purpose": "any"
+    }
+  ],
+  "screenshots": [
+    {
+      "src": "/home-preview.png",
+      "sizes": "1920x1020",
+      "type": "image/png",
+      "label": "Home Preview",
+      "form_factor": "wide"
+    },
+    {
+      "src": "/browse-preview.png",
+      "sizes": "1920x1020",
+      "type": "image/png",
+      "label": "Browse Preview",
+      "form_factor": "wide"
+    },
+    {
+      "src": "/album-preview.png",
+      "sizes": "1920x1020",
+      "type": "image/png",
+      "label": "Album Preview",
+      "form_factor": "wide"
+    },
+    {
+      "src": "/fullscreen-preview.png",
+      "sizes": "1920x1020",
+      "type": "image/png",
+      "label": "Fullscreen Preview",
+      "form_factor": "wide"
+    }
+  ],
+  "shortcuts": [
+    {
+      "name": "Resume Song",
+      "short_name": "Resume",
+      "description": "Resume the last played song",
+      "url": "/?action=resume",
+      "icons": [
+        {
+          "src": "/icon-192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        }
+      ]
+    },
+    {
+      "name": "Play Recent Albums",
+      "short_name": "Recent",
+      "description": "Play from recently added albums",
+      "url": "/?action=recent",
+      "icons": [
+        {
+          "src": "/icon-192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        }
+      ]
+    },
+    {
+      "name": "Shuffle Favorites",
+      "short_name": "Shuffle",
+      "description": "Shuffle songs from favorite artists",
+      "url": "/?action=shuffle-favorites",
+      "icons": [
+        {
+          "src": "/icon-192.png",
+          "sizes": "192x192",
+          "type": "image/png"
+        }
+      ]
+    }
+  ]
+}

public/sw.js

@@ -0,0 +1,123 @@
+/*
+	Service Worker for Mice (Navidrome client)
+	- App shell caching for faster loading
+	- Static asset caching
+*/
+
+/* global self, caches */
+const VERSION = 'v3';
+const APP_SHELL_CACHE = `mice-app-shell-${VERSION}`;
+const IMAGE_CACHE = `mice-images-${VERSION}`;
+
+// Core assets to precache (safe, static public files)
+const APP_SHELL = [
+	'/',
+	'/favicon.ico',
+	'/manifest.json',
+	'/icon-192.png',
+	'/icon-192-maskable.png',
+	'/icon-512.png',
+	'/icon-512-maskable.png',
+	'/apple-touch-icon.png',
+	'/apple-touch-icon-precomposed.png',
+];
+
+// Install: pre-cache app shell
+self.addEventListener('install', (event) => {
+	event.waitUntil(
+		(async () => {
+			const cache = await caches.open(APP_SHELL_CACHE);
+			await cache.addAll(APP_SHELL.map((u) => new Request(u, { cache: 'reload' })));
+			// Force activate new SW immediately
+			await self.skipWaiting();
+		})()
+	);
+});
+
+// Activate: clean old caches and claim clients
+self.addEventListener('activate', (event) => {
+	event.waitUntil(
+		(async () => {
+			const keys = await caches.keys();
+			await Promise.all(
+				keys
+					.filter((k) => ![APP_SHELL_CACHE, IMAGE_CACHE].includes(k))
+					.map((k) => caches.delete(k))
+			);
+			await self.clients.claim();
+		})()
+	);
+});
+
+// Fetch strategy
+self.addEventListener('fetch', (event) => {
+	const req = event.request;
+
+	// Navigation requests: network-first, fallback to cache
+	if (req.mode === 'navigate') {
+		event.respondWith(
+			(async () => {
+				try {
+					const fresh = await fetch(req);
+					const cache = await caches.open(APP_SHELL_CACHE);
+					cache.put(req, fresh.clone()).catch(() => {});
+					return fresh;
+				} catch {
+					const cache = await caches.open(APP_SHELL_CACHE);
+					const cached = await cache.match(req);
+					if (cached) return cached;
+					// final fallback to index
+					return (await cache.match('/')) || Response.error();
+				}
+			})()
+		);
+		return;
+	}
+
+	// Images: cache-first for better performance
+	if (req.destination === 'image') {
+		event.respondWith(
+			(async () => {
+				const cache = await caches.open(IMAGE_CACHE);
+				const cached = await cache.match(req);
+				if (cached) return cached;
+				try {
+					const res = await fetch(req);
+					cache.put(req, res.clone()).catch(() => {});
+					return res;
+				} catch {
+					return cached || Response.error();
+				}
+			})()
+		);
+		return;
+	}
+
+	// Scripts, styles, fonts, and Next.js assets: cache-first for faster loading
+	if (
+		req.destination === 'script' ||
+		req.destination === 'style' ||
+		req.destination === 'font' ||
+		req.url.includes('/_next/')
+	) {
+		event.respondWith(
+			(async () => {
+				const cache = await caches.open(APP_SHELL_CACHE);
+				const cached = await cache.match(req);
+				if (cached) return cached;
+				try {
+					const res = await fetch(req);
+					cache.put(req, res.clone()).catch(() => {});
+					return res;
+				} catch {
+					return cached || Response.error();
+				}
+			})()
+		);
+		return;
+	}
+
+	// Default: network-only (no caching for API calls, audio streams, etc.)
+	event.respondWith(fetch(req));
+});
+

tsconfig.json

@@ -14,7 +14,7 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
+    "jsx": "react-jsx",
     "incremental": true,
     "plugins": [
       {
@@ -32,7 +32,8 @@
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
   ],
   "exclude": [
     "node_modules"