feat: add listening history page with grouped track display and clear history functionality

- Implemented HistoryPage component to display user's listening history.
- Tracks are grouped by date and displayed with play and add to queue options.
- Added clear history functionality with confirmation dialog.
- Created AlertDialog component for consistent alert dialog UI.

app/library/albums/page.tsx

@@ -1,61 +1,190 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
 'use client';
 
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { useState, useEffect } from 'react';
-import { Separator } from "@/components/ui/separator";
-import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
+import { Separator } from '@/components/ui/separator';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Tabs, TabsContent } from '@/components/ui/tabs';
 import { AlbumArtwork } from '@/app/components/album-artwork';
-import { useNavidrome } from '@/app/components/NavidromeContext';
-import { Album } from '@/lib/navidrome';
-import Loading  from '@/app/components/loading';
+import { getNavidromeAPI, Album } from '@/lib/navidrome';
+import { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { Shuffle, Search } from 'lucide-react';
+import Loading from '@/app/components/loading';
 
-export default function Albumpage() {
-  const { albums, isLoading } = useNavidrome();
-  const [sortedAlbums, setSortedAlbums] = useState<Album[]>([]);
+export default function AlbumsPage() {
+  const { shuffleAllAlbums } = useAudioPlayer();
+  const [albums, setAlbums] = useState<Album[]>([]);
+  const [filteredAlbums, setFilteredAlbums] = useState<Album[]>([]);
+  const [currentPage, setCurrentPage] = useState(0);
+  const [isLoadingAlbums, setIsLoadingAlbums] = useState(false);
+  const [hasMoreAlbums, setHasMoreAlbums] = useState(true);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<'alphabeticalByName' | 'newest' | 'alphabeticalByArtist'>('alphabeticalByName');
+  const albumsPerPage = 84;
+
+  const api = getNavidromeAPI();
+
+  const loadAlbums = async (page: number, append: boolean = false) => {
+    if (!api) {
+      console.error('Navidrome API not available');
+      return;
+    }
+    
+    try {
+      setIsLoadingAlbums(true);
+      const offset = page * albumsPerPage;
+      
+      const newAlbums = await api.getAlbums(sortBy, albumsPerPage, offset);
+      
+      if (append) {
+        setAlbums(prev => [...prev, ...newAlbums]);
+      } else {
+        setAlbums(newAlbums);
+      }
+      
+      setHasMoreAlbums(newAlbums.length === albumsPerPage);
+    } catch (error) {
+      console.error('Failed to load albums:', error);
+    } finally {
+      setIsLoadingAlbums(false);
+    }
+  };
 
   useEffect(() => {
-    if (albums.length > 0) {
-      // Sort albums alphabetically by name
-      const sorted = [...albums].sort((a, b) => a.name.localeCompare(b.name));
-      setSortedAlbums(sorted);
-    }
-  }, [albums]);
+    setCurrentPage(0);
+    loadAlbums(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortBy]);
 
-  if (isLoading) {
+  // Filter albums based on search query
+  useEffect(() => {
+    let filtered = [...albums];
+    
+    if (searchQuery) {
+      filtered = filtered.filter(album =>
+        album.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        album.artist.toLowerCase().includes(searchQuery.toLowerCase())
+      );
+    }
+    
+    setFilteredAlbums(filtered);
+  }, [albums, searchQuery]);
+
+  // Infinite scroll handler
+  useEffect(() => {
+    const handleScroll = (e: Event) => {
+      const target = e.target as HTMLElement;
+      if (!target || isLoadingAlbums || !hasMoreAlbums || searchQuery) 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);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadingAlbums, hasMoreAlbums, currentPage, searchQuery]);
+
+  const loadMore = () => {
+    if (isLoadingAlbums || !hasMoreAlbums || searchQuery) return;
+    const nextPage = currentPage + 1;
+    setCurrentPage(nextPage);
+    loadAlbums(nextPage, true);
+  };
+
+  if (isLoadingAlbums && albums.length === 0) {
     return <Loading />;
   }
 
   return (
     <div className="h-full px-4 py-6 lg:px-8">
-      <Tabs defaultValue="music" className="h-full space-y-6">
-        <TabsContent value="music" className="border-none p-0 outline-none">
-          <div className="flex items-center justify-between">
+      <Tabs defaultValue="music" className="h-full flex flex-col space-y-6">
+        <TabsContent value="music" className="border-none p-0 outline-none flex flex-col flex-grow">
+          <div className="flex items-center justify-between mb-4">
             <div className="space-y-1">
               <p className="text-2xl font-semibold tracking-tight">
-                Albums 
+                Albums
               </p>
               <p className="text-sm text-muted-foreground">
-                All albums in your music library ({sortedAlbums.length} albums)
+                {searchQuery ? `${filteredAlbums.length} albums found` : `Browse all albums (${albums.length} loaded)`}
               </p>
             </div>
+            <Button onClick={shuffleAllAlbums} className="flex items-center gap-2">
+              <Shuffle className="w-4 h-4" />
+              Shuffle All Albums
+            </Button>
           </div>
+
+          {/* Search and Filter Controls */}
+          <div className="flex flex-col sm:flex-row gap-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+              <Input
+                placeholder="Search albums and artists..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Select value={sortBy} onValueChange={(value: typeof sortBy) => setSortBy(value)}>
+              <SelectTrigger className="w-[200px]">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="alphabeticalByName">Sort by Album Name</SelectItem>
+                <SelectItem value="alphabeticalByArtist">Sort by Artist</SelectItem>
+                <SelectItem value="newest">Newest First</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+
           <Separator className="my-4" />
-          <div className="relative">
-            <ScrollArea>
-              <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 pb-4">
-                {sortedAlbums.map((album) => (
-                  <AlbumArtwork
-                    key={album.id}
-                    album={album}
-                    className="w-full"
-                    aspectRatio="square"
-                    width={200}
-                    height={200}
-                  />
-                ))}
+          
+          <div className="relative flex-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">
+                  {filteredAlbums.map((album) => (
+                    <AlbumArtwork
+                      key={album.id}
+                      album={album}
+                      className="w-full"
+                      aspectRatio="square"
+                      width={200}
+                      height={200}
+                    />
+                  ))}
+                </div>
+                {!searchQuery && hasMoreAlbums && (
+                  <div className="flex justify-center p-4 pb-24">
+                    <Button 
+                      onClick={loadMore} 
+                      disabled={isLoadingAlbums}
+                      variant="outline"
+                    >
+                      {isLoadingAlbums ? 'Loading...' : `Load More Albums (${albumsPerPage} more)`}
+                    </Button>
+                  </div>
+                )}
+                {!searchQuery && !hasMoreAlbums && 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>
+                )}
               </div>
-              <ScrollBar orientation="horizontal" />
+              <ScrollBar orientation="vertical" />
             </ScrollArea>
           </div>
         </TabsContent>

app/library/artists/page.tsx

@@ -5,29 +5,50 @@ import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { useState, useEffect } from 'react';
 import { Separator } from "@/components/ui/separator";
 import { Tabs, TabsContent } from "@/components/ui/tabs";
+import { Input } from "@/components/ui/input";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
 import { ArtistIcon } from '@/app/components/artist-icon';
 import { useNavidrome } from '@/app/components/NavidromeContext';
 import { Artist } from '@/lib/navidrome';
-import Loading  from '@/app/components/loading';
+import Loading from '@/app/components/loading';
+import { Search } from 'lucide-react';
 
 export default function ArtistPage() {
   const { artists, isLoading } = useNavidrome();
-  const [sortedArtists, setSortedArtists] = useState<Artist[]>([]);
+  const [filteredArtists, setFilteredArtists] = useState<Artist[]>([]);
+  const [searchQuery, setSearchQuery] = useState('');
+  const [sortBy, setSortBy] = useState<'name' | 'albumCount'>('name');
 
   useEffect(() => {
     if (artists.length > 0) {
-      // Sort artists alphabetically by name
-      const sorted = [...artists].sort((a, b) => a.name.localeCompare(b.name));
-      setSortedArtists(sorted);
+      let filtered = [...artists];
+      
+      // Filter by search query
+      if (searchQuery) {
+        filtered = filtered.filter(artist =>
+          artist.name.toLowerCase().includes(searchQuery.toLowerCase())
+        );
+      }
+      
+      // Sort artists
+      filtered.sort((a, b) => {
+        if (sortBy === 'name') {
+          return a.name.localeCompare(b.name);
+        } else {
+          return (b.albumCount || 0) - (a.albumCount || 0);
+        }
+      });
+      
+      setFilteredArtists(filtered);
     }
-  }, [artists]);
+  }, [artists, searchQuery, sortBy]);
 
   if (isLoading) {
     return <Loading />;
   }
 
   return (
-    <div className="h-full px-4 py-6 lg:px-8">
+    <div className="h-full px-4 py-6 lg:px-8 mb-24">
       <Tabs defaultValue="music" className="h-full space-y-6">
         <TabsContent value="music" className="border-none p-0 outline-none">
           <div className="flex items-center justify-between">
@@ -36,15 +57,38 @@ export default function ArtistPage() {
                 Artists
               </p>
               <p className="text-sm text-muted-foreground">
-                All artists in your music library ({sortedArtists.length} artists)
+                {filteredArtists.length} of {artists.length} artists
               </p>
             </div>
           </div>
+          
+          {/* Search and Filter Controls */}
+          <div className="flex flex-col sm:flex-row gap-4 my-4">
+            <div className="relative flex-1">
+              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+              <Input
+                placeholder="Search artists..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-10"
+              />
+            </div>
+            <Select value={sortBy} onValueChange={(value: 'name' | 'albumCount') => setSortBy(value)}>
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Sort by" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="name">Sort by Name</SelectItem>
+                <SelectItem value="albumCount">Sort by Album Count</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          
           <Separator className="my-4" />
           <div className="relative">
             <ScrollArea>
               <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-4 pb-4">
-                {sortedArtists.map((artist) => (
+                {filteredArtists.map((artist) => (
                   <ArtistIcon
                     key={artist.id}
                     artist={artist}