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/components/AudioPlayerContext.tsx

@@ -37,6 +37,8 @@ interface AudioPlayerContextProps {
   toggleShuffle: () => void;
   shuffleAllAlbums: () => Promise<void>;
   playArtist: (artistId: string) => Promise<void>;
+  playedTracks: Track[];
+  clearHistory: () => void;
 }
 
 const AudioPlayerContext = createContext<AudioPlayerContextProps | undefined>(undefined);
@@ -534,6 +536,27 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     }
   }, [api, songToTrack, toast, shuffle, playTrack]);
 
+  const clearHistory = useCallback(() => {
+    setPlayedTracks([]);
+    localStorage.removeItem('navidrome-playedTracks');
+  }, []);
+
+  // Persist played tracks to localStorage
+  useEffect(() => {
+    localStorage.setItem('navidrome-playedTracks', JSON.stringify(playedTracks));
+  }, [playedTracks]);
+
+  // Load played tracks from localStorage on mount
+  useEffect(() => {
+    const savedPlayedTracks = localStorage.getItem('navidrome-playedTracks');
+    if (savedPlayedTracks) {
+      try {
+        setPlayedTracks(JSON.parse(savedPlayedTracks));
+      } catch (error) {
+        console.error('Failed to parse saved played tracks:', error);
+      }
+    }
+  }, []);
   const contextValue = useMemo(() => ({
     currentTrack, 
     playTrack, 
@@ -552,7 +575,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     shuffle,
     toggleShuffle,
     shuffleAllAlbums,
-    playArtist
+    playArtist,
+    playedTracks,
+    clearHistory
   }), [
     currentTrack, 
     queue, 
@@ -571,7 +596,9 @@ export const AudioPlayerProvider: React.FC<{ children: React.ReactNode }> = ({ c
     shuffle,
     toggleShuffle,
     shuffleAllAlbums,
-    playArtist
+    playArtist,
+    playedTracks,
+    clearHistory
   ]);
 
   return (

app/components/FullScreenPlayer.tsx

@@ -285,16 +285,15 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       
       {/* Overlay for better contrast */}
       <div className="absolute inset-0 bg-black/50" />
-      
-      <div className="relative h-full w-full flex flex-col">
+        <div className="relative h-full w-full flex flex-col">
         {/* Header */}
         <div className="flex items-center justify-between p-4 lg:p-6 flex-shrink-0">
           <h2 className="text-lg lg:text-xl font-semibold text-white"></h2>
-          <div className="flex items-center gap-3">
+          <div className="flex items-center gap-2">
             {onOpenQueue && (
               <button 
                 onClick={onOpenQueue}
-                className="text-white hover:bg-white/20 p-2 rounded-full transition-colors"
+                className="text-white hover:bg-white/20 p-2 rounded-full transition-colors flex items-center justify-center w-10 h-10"
                 title="Open Queue"
               >
                 <FaListUl className="w-5 h-5" />
@@ -302,7 +301,8 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
             )}
             <button 
               onClick={onClose}
-              className="text-white hover:bg-white/20 p-2 rounded-full transition-colors"
+              className="text-white hover:bg-white/20 p-2 rounded-full transition-colors flex items-center justify-center w-10 h-10"
+              title="Close Player"
             >
               <FaXmark className="w-5 h-5" />
             </button>

app/history/page.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { ScrollArea } 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 { useAudioPlayer } from '@/app/components/AudioPlayerContext';
+import { getNavidromeAPI } from '@/lib/navidrome';
+import { Play, Plus, User, Disc, History, Trash2 } from 'lucide-react';
+import { 
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog';
+
+export default function HistoryPage() {
+  const { playedTracks, clearHistory, playTrack, addToQueue, currentTrack } = useAudioPlayer();
+  const [groupedHistory, setGroupedHistory] = useState<{ [date: string]: typeof playedTracks }>({});
+  const api = getNavidromeAPI();
+
+  useEffect(() => {
+    // Group tracks by date
+    const grouped = playedTracks.reduce((acc, track, index) => {
+      // Since we don't have timestamps, we'll group by position in array
+      // More recent tracks will be at the end of the array
+      const now = new Date();
+      const daysAgo = Math.floor(index / 10); // Roughly group every 10 tracks as a different day
+      const date = new Date(now.getTime() - (daysAgo * 24 * 60 * 60 * 1000));
+      const dateKey = date.toLocaleDateString();
+      
+      if (!acc[dateKey]) {
+        acc[dateKey] = [];
+      }
+      acc[dateKey].unshift(track); // Add to beginning to show most recent first
+      return acc;
+    }, {} as { [date: string]: typeof playedTracks });
+
+    setGroupedHistory(grouped);
+  }, [playedTracks]);
+
+  const handlePlayClick = (track: typeof playedTracks[0]) => {
+    if (!api) {
+      console.error('Navidrome API not available');
+      return;
+    }
+    playTrack(track);
+  };
+
+  const handleAddToQueue = (track: typeof playedTracks[0]) => {
+    if (!api) {
+      console.error('Navidrome API not available');
+      return;
+    }
+    addToQueue(track);
+  };
+
+  const isCurrentlyPlaying = (track: typeof playedTracks[0]): boolean => {
+    return currentTrack?.id === track.id;
+  };
+
+  const formatDuration = (duration: number): string => {
+    const minutes = Math.floor(duration / 60);
+    const seconds = duration % 60;
+    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
+  };
+
+  const totalTracks = playedTracks.length;
+  const uniqueTracks = new Set(playedTracks.map(track => track.id)).size;
+
+  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">
+            <div className="space-y-1">
+              <div className="flex items-center gap-2">
+                <History className="w-6 h-6" />
+                <p className="text-2xl font-semibold tracking-tight">
+                  Listening History
+                </p>
+              </div>
+              <p className="text-sm text-muted-foreground">
+                {totalTracks} total plays • {uniqueTracks} unique tracks
+              </p>
+            </div>
+            <AlertDialog>
+              <AlertDialogTrigger asChild>
+                <Button variant="outline" size="sm" className="flex items-center gap-2">
+                  <Trash2 className="w-4 h-4" />
+                  Clear History
+                </Button>
+              </AlertDialogTrigger>
+              <AlertDialogContent>
+                <AlertDialogHeader>
+                  <AlertDialogTitle>Clear Listening History</AlertDialogTitle>
+                  <AlertDialogDescription>
+                    This will permanently delete your entire listening history. This action cannot be undone.
+                  </AlertDialogDescription>
+                </AlertDialogHeader>
+                <AlertDialogFooter>
+                  <AlertDialogCancel>Cancel</AlertDialogCancel>
+                  <AlertDialogAction onClick={clearHistory}>
+                    Clear History
+                  </AlertDialogAction>
+                </AlertDialogFooter>
+              </AlertDialogContent>
+            </AlertDialog>
+          </div>
+          
+          <Separator className="my-4" />
+          
+          {playedTracks.length === 0 ? (
+            <div className="text-center py-12">
+              <History className="w-16 h-16 mx-auto text-muted-foreground mb-4" />
+              <h3 className="text-lg font-semibold mb-2">No listening history yet</h3>
+              <p className="text-muted-foreground">
+                Start playing music to build your listening history
+              </p>
+            </div>
+          ) : (
+            <ScrollArea className="h-[calc(100vh-250px)]">
+              <div className="space-y-6">
+                {Object.entries(groupedHistory)
+                  .sort(([a], [b]) => new Date(b).getTime() - new Date(a).getTime())
+                  .map(([date, tracks]) => (
+                    <div key={date} className="space-y-3">
+                      <h3 className="text-lg font-semibold tracking-tight">{date}</h3>
+                      <div className="space-y-1">
+                        {tracks.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 ${
+                              isCurrentlyPlaying(track) ? 'bg-accent/50 border-l-4 border-primary' : ''
+                            }`}
+                            onClick={() => handlePlayClick(track)}
+                          >
+                            {/* Play Indicator */}
+                            <div className="w-8 text-center text-sm text-muted-foreground mr-3">
+                              {isCurrentlyPlaying(track) ? (
+                                <div className="w-4 h-4 mx-auto">
+                                  <div className="w-full h-full bg-primary rounded-full animate-pulse" />
+                                </div>
+                              ) : (
+                                <Play className="w-4 h-4 mx-auto opacity-0 group-hover:opacity-100 transition-opacity" />
+                              )}
+                            </div>
+
+                            {/* Album Art */}
+                            <div className="w-12 h-12 mr-4 flex-shrink-0">
+                              <Image
+                                src={track.coverArt || '/default-user.jpg'}
+                                alt={track.album}
+                                width={48}
+                                height={48}
+                                className="w-full h-full object-cover rounded-md"
+                              />
+                            </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 ${
+                                  isCurrentlyPlaying(track) ? 'text-primary' : ''
+                                }`}>
+                                  {track.name}
+                                </p>
+                              </div>
+                              <div className="flex items-center text-sm text-muted-foreground space-x-4">
+                                <div className="flex items-center gap-1">
+                                  <User className="w-3 h-3" />
+                                  <Link 
+                                    href={`/artist/${track.artistId}`} 
+                                    className="truncate hover:text-primary hover:underline"
+                                    onClick={(e) => e.stopPropagation()}
+                                  >
+                                    {track.artist}
+                                  </Link>
+                                </div>
+                                {track.album && (
+                                  <div className="flex items-center gap-1">
+                                    <Disc className="w-3 h-3" />
+                                    <Link 
+                                      href={`/album/${track.albumId}`} 
+                                      className="truncate hover:text-primary hover:underline"
+                                      onClick={(e) => e.stopPropagation()}
+                                    >
+                                      {track.album}
+                                    </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();
+                                  handleAddToQueue(track);
+                                }}
+                                className="h-8 w-8 p-0"
+                              >
+                                <Plus className="w-4 h-4" />
+                              </Button>
+                            </div>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </ScrollArea>
+          )}
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}

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}