feat: Implement offline library management with IndexedDB support

- Added `useOfflineLibrary` hook for managing offline library state and synchronization.
- Created `OfflineLibraryManager` class for handling IndexedDB operations and syncing with Navidrome API.
- Implemented methods for retrieving and storing albums, artists, songs, and playlists.
- Added support for offline favorites management (star/unstar).
- Implemented playlist creation, updating, and deletion functionalities.
- Added search functionality for offline data.
- Created a manifest file for PWA support with icons and shortcuts.
- Added service worker file for caching and offline capabilities.

app/components/CacheManagement.tsx

@@ -1,16 +1,28 @@
 'use client';
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } 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 { Progress } from '@/components/ui/progress';
+import { Separator } from '@/components/ui/separator';
+import { Switch } from '@/components/ui/switch';
 import { 
   Database,
   Trash2,
   RefreshCw,
-  HardDrive
+  HardDrive,
+  Download,
+  Wifi,
+  WifiOff,
+  X,
+  Music,
+  Globe,
+  Settings
 } from 'lucide-react';
 import { CacheManager } from '@/lib/cache';
+import { useOfflineDownloads, OfflineItem } from '@/hooks/use-offline-downloads';
+import { useAudioPlayer, Track } from '@/app/components/AudioPlayerContext';
 
 export function CacheManagement() {
   const [cacheStats, setCacheStats] = useState({
@@ -20,6 +32,24 @@ export function CacheManagement() {
   });
   const [isClearing, setIsClearing] = useState(false);
   const [lastCleared, setLastCleared] = useState<string | null>(null);
+  const [offlineItems, setOfflineItems] = useState<OfflineItem[]>([]);
+  const [offlineMode, setOfflineMode] = useState(false);
+  const [autoDownloadQueue, setAutoDownloadQueue] = useState(false);
+  const [isDownloadingQueue, setIsDownloadingQueue] = useState(false);
+  
+  const {
+    isSupported: isOfflineSupported,
+    isInitialized: isOfflineInitialized,
+    downloadProgress,
+    offlineStats,
+    downloadQueue,
+    enableOfflineMode,
+    deleteOfflineContent,
+    getOfflineItems,
+    clearDownloadProgress
+  } = useOfflineDownloads();
+
+  const { queue } = useAudioPlayer();
 
   const loadCacheStats = () => {
     if (typeof window === 'undefined') return;
@@ -65,15 +95,34 @@ export function CacheManagement() {
     });
   };
 
+  const loadOfflineItems = useCallback(() => {
+    if (isOfflineInitialized) {
+      const items = getOfflineItems();
+      setOfflineItems(items);
+    }
+  }, [isOfflineInitialized, getOfflineItems]);
+
   useEffect(() => {
     loadCacheStats();
+    loadOfflineItems();
+    
+    // Load offline mode settings
+    const storedOfflineMode = localStorage.getItem('offline-mode-enabled');
+    const storedAutoDownload = localStorage.getItem('auto-download-queue');
+    
+    if (storedOfflineMode) {
+      setOfflineMode(JSON.parse(storedOfflineMode));
+    }
+    if (storedAutoDownload) {
+      setAutoDownloadQueue(JSON.parse(storedAutoDownload));
+    }
     
     // Check if there's a last cleared timestamp
     const lastClearedTime = localStorage.getItem('cache-last-cleared');
     if (lastClearedTime) {
       setLastCleared(new Date(parseInt(lastClearedTime)).toLocaleString());
     }
-  }, []);
+  }, [loadOfflineItems]);
 
   const handleClearCache = async () => {
     setIsClearing(true);
@@ -142,77 +191,365 @@ export function CacheManagement() {
     loadCacheStats();
   };
 
+  const handleDeleteOfflineItem = async (item: OfflineItem) => {
+    try {
+      await deleteOfflineContent(item.id, item.type);
+      loadOfflineItems();
+      loadCacheStats();
+    } catch (error) {
+      console.error('Failed to delete offline item:', error);
+    }
+  };
+
+  // Convert Track to Song format for offline downloads
+  const convertTrackToSong = (track: Track) => ({
+    id: track.id,
+    parent: track.albumId || '',
+    isDir: false,
+    title: track.name,
+    album: track.album,
+    artist: track.artist,
+    size: 0, // Will be filled when downloaded
+    contentType: 'audio/mpeg',
+    suffix: 'mp3',
+    duration: track.duration,
+    path: '',
+    created: new Date().toISOString(),
+    albumId: track.albumId,
+    artistId: track.artistId,
+    type: 'music'
+  });
+
+  const handleOfflineModeToggle = async (enabled: boolean) => {
+    setOfflineMode(enabled);
+    localStorage.setItem('offline-mode-enabled', JSON.stringify(enabled));
+    
+    if (enabled && isOfflineSupported) {
+      try {
+        const convertedQueue = queue.map(convertTrackToSong);
+        await enableOfflineMode({
+          forceOffline: enabled,
+          autoDownloadQueue,
+          currentQueue: convertedQueue
+        });
+      } catch (error) {
+        console.error('Failed to enable offline mode:', error);
+      }
+    }
+  };
+
+  const handleAutoDownloadToggle = async (enabled: boolean) => {
+    setAutoDownloadQueue(enabled);
+    localStorage.setItem('auto-download-queue', JSON.stringify(enabled));
+    
+    if (enabled && isOfflineSupported) {
+      const convertedQueue = queue.map(convertTrackToSong);
+      await enableOfflineMode({
+        forceOffline: offlineMode,
+        autoDownloadQueue: enabled,
+        currentQueue: convertedQueue
+      });
+    }
+  };
+
+  const handleDownloadCurrentQueue = async () => {
+    if (!queue.length || !isOfflineSupported) return;
+    
+    setIsDownloadingQueue(true);
+    try {
+      const convertedQueue = queue.map(convertTrackToSong);
+      await downloadQueue(convertedQueue);
+      loadOfflineItems();
+    } catch (error) {
+      console.error('Failed to download queue:', error);
+    } finally {
+      setIsDownloadingQueue(false);
+    }
+  };
+
+  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];
+  };
+
   return (
     <Card className="break-inside-avoid py-5">
       <CardHeader>
         <CardTitle className="flex items-center gap-2">
           <Database className="h-5 w-5" />
-          Cache Management
+          Cache & Offline Downloads
         </CardTitle>
         <CardDescription>
-          Manage application cache to improve performance and free up storage
+          Manage application cache and offline content for better performance
         </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>
+      <CardContent className="space-y-6">
+        {/* Regular Cache Statistics */}
+        <div>
+          <h4 className="text-sm font-medium mb-3">Application Cache</h4>
+          <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>
-          <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>
+
+          {/* Cache Actions */}
+          <div className="space-y-2 mt-4">
+            <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>
         </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" />
+        <Separator />
+
+        {/* Offline Downloads Section */}
+        <div>
+          <h4 className="text-sm font-medium mb-3 flex items-center gap-2">
+            {isOfflineSupported ? (
+              <Wifi className="h-4 w-4 text-green-600" />
+            ) : (
+              <WifiOff className="h-4 w-4 text-red-600" />
+            )}
+            Offline Downloads
+            {!isOfflineSupported && (
+              <span className="text-xs text-muted-foreground">(Limited Support)</span>
+            )}
+          </h4>
+
+          {isOfflineSupported && (
+            <div className="grid grid-cols-3 gap-4 text-center mb-4">
+              <div className="space-y-1">
+                <p className="text-lg font-bold">{offlineStats.downloadedAlbums}</p>
+                <p className="text-xs text-muted-foreground">Albums</p>
+              </div>
+              <div className="space-y-1">
+                <p className="text-lg font-bold">{offlineStats.downloadedSongs}</p>
+                <p className="text-xs text-muted-foreground">Songs</p>
+              </div>
+              <div className="space-y-1">
+                <p className="text-lg font-bold">{formatSize(offlineStats.totalSize)}</p>
+                <p className="text-xs text-muted-foreground">Total Size</p>
+              </div>
+            </div>
+          )}
+
+          {/* Offline Mode Controls */}
+          {isOfflineSupported && (
+            <div className="space-y-4 mb-4 p-3 bg-muted/50 rounded-lg">
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <Label htmlFor="offline-mode" className="text-sm font-medium">
+                    Offline Mode
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    Force app to use only cached content (good for slow connections)
+                  </p>
+                </div>
+                <Switch
+                  id="offline-mode"
+                  checked={offlineMode}
+                  onCheckedChange={handleOfflineModeToggle}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-1">
+                  <Label htmlFor="auto-download" className="text-sm font-medium">
+                    Auto-download Queue
+                  </Label>
+                  <p className="text-xs text-muted-foreground">
+                    Automatically download songs when added to queue
+                  </p>
+                </div>
+                <Switch
+                  id="auto-download"
+                  checked={autoDownloadQueue}
+                  onCheckedChange={handleAutoDownloadToggle}
+                />
+              </div>
+
+              {/* Queue Download Controls */}
+              <div className="space-y-2">
+                <div className="flex items-center justify-between">
+                  <span className="text-sm font-medium">Current Queue</span>
+                  <span className="text-xs text-muted-foreground">
+                    {queue.length} song{queue.length !== 1 ? 's' : ''}
+                  </span>
+                </div>
+                
+                {queue.length > 0 && (
+                  <Button
+                    onClick={handleDownloadCurrentQueue}
+                    disabled={isDownloadingQueue || downloadProgress.status === 'downloading'}
+                    size="sm"
+                    className="w-full"
+                    variant="outline"
+                  >
+                    {isDownloadingQueue ? (
+                      <RefreshCw className="h-4 w-4 mr-2 animate-spin" />
+                    ) : (
+                      <Music className="h-4 w-4 mr-2" />
+                    )}
+                    {isDownloadingQueue ? 'Downloading...' : 'Download Current Queue'}
+                  </Button>
+                )}
+                
+                {queue.length === 0 && (
+                  <p className="text-xs text-muted-foreground text-center py-2">
+                    Add songs to queue to enable downloading
+                  </p>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Download Progress */}
+          {downloadProgress.status !== 'idle' && (
+            <div className="space-y-2 mb-4 p-3 bg-muted rounded-lg">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">
+                  {downloadProgress.status === 'downloading' && 'Downloading...'}
+                  {downloadProgress.status === 'starting' && 'Starting download...'}
+                  {downloadProgress.status === 'complete' && 'Download complete!'}
+                  {downloadProgress.status === 'error' && 'Download failed'}
+                </span>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  onClick={clearDownloadProgress}
+                  className="h-6 w-6 p-0"
+                >
+                  <X className="h-4 w-4" />
+                </Button>
+              </div>
+              
+              {downloadProgress.total > 0 && (
+                <div className="space-y-1">
+                  <Progress 
+                    value={(downloadProgress.completed / downloadProgress.total) * 100}
+                    className="h-2"
+                  />
+                  <div className="flex justify-between text-xs text-muted-foreground">
+                    <span>
+                      {downloadProgress.completed} / {downloadProgress.total} songs
+                      {downloadProgress.failed > 0 && ` (${downloadProgress.failed} failed)`}
+                    </span>
+                    <span>{Math.round((downloadProgress.completed / downloadProgress.total) * 100)}%</span>
+                  </div>
+                </div>
               )}
-              {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>
+              
+              {downloadProgress.currentSong && (
+                <p className="text-xs text-muted-foreground truncate">
+                  Current: {downloadProgress.currentSong}
+                </p>
+              )}
+              
+              {downloadProgress.error && (
+                <p className="text-xs text-red-600">
+                  Error: {downloadProgress.error}
+                </p>
+              )}
+            </div>
+          )}
+
+          {/* Offline Items List */}
+          {offlineItems.length > 0 && (
+            <div className="space-y-2">
+              <Label className="text-xs font-medium">Downloaded Content</Label>
+              <div className="max-h-40 overflow-y-auto space-y-1">
+                {offlineItems.map((item) => (
+                  <div
+                    key={`${item.type}-${item.id}`}
+                    className="flex items-center justify-between p-2 bg-muted rounded text-sm"
+                  >
+                    <div className="flex items-center gap-2 min-w-0 flex-1">
+                      <Download className="h-3 w-3 text-green-600 flex-shrink-0" />
+                      <div className="min-w-0 flex-1">
+                        <p className="font-medium truncate">{item.name}</p>
+                        <p className="text-xs text-muted-foreground truncate">
+                          {item.artist} • {item.type}
+                        </p>
+                      </div>
+                    </div>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => handleDeleteOfflineItem(item)}
+                      className="h-6 w-6 p-0 flex-shrink-0"
+                    >
+                      <X className="h-3 w-3" />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {offlineItems.length === 0 && (
+            <div className="text-center py-8 text-muted-foreground">
+              <Download className="h-8 w-8 mx-auto mb-2 opacity-50" />
+              <p className="text-sm">No offline content downloaded</p>
+              <p className="text-xs">Visit an album page to download content for offline listening</p>
+            </div>
+          )}
         </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>
+          {isOfflineSupported && (
+            <p>Offline downloads use Service Workers for true offline audio playback.</p>
+          )}
+          {!isOfflineSupported && (
+            <p>Limited offline support - only metadata cached without Service Worker support.</p>
+          )}
           {lastCleared && (
             <p>Last cleared: {lastCleared}</p>
           )}