Merge pull request #5 from sillyangel/development

feat: enhance SearchPage with improved no results message and replace…

app/browse/page.tsx

@@ -50,6 +50,7 @@ export default function BrowsePage() {
 
   useEffect(() => {
     loadAlbums(0);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   // Infinite scroll handler
@@ -71,6 +72,7 @@ export default function BrowsePage() {
       scrollArea.addEventListener('scroll', handleScroll);
       return () => scrollArea.removeEventListener('scroll', handleScroll);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoadingAlbums, hasMoreAlbums, currentPage]);
 
   const loadMore = () => {

app/components/FullScreenPlayer.tsx

@@ -110,7 +110,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       
       return () => clearTimeout(scrollTimeout);
     }
-  }, [currentLyricIndex, showLyrics]);
+  }, [currentLyricIndex, showLyrics, lyrics.length]);
 
   // Reset lyrics to top when song changes
   useEffect(() => {
@@ -135,7 +135,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       
       return () => clearTimeout(resetTimeout);
     }
-  }, [currentTrack?.id, showLyrics]); // Only reset when track ID changes
+  }, [currentTrack?.id, showLyrics, currentTrack]); // Only reset when track ID changes
 
   // Sync with main audio player (improved responsiveness)
   useEffect(() => {
@@ -167,7 +167,7 @@ export const FullScreenPlayer: React.FC<FullScreenPlayerProps> = ({ isOpen, onCl
       const interval = setInterval(syncWithMainPlayer, 100);
       return () => clearInterval(interval);
     }
-  }, [isOpen, currentTrack?.id]); // React to track changes
+  }, [isOpen, currentTrack]); // React to track changes
 
   // Extract dominant color from cover art
   useEffect(() => {

app/search/page.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect } from 'react';
+import Image from 'next/image';
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
 import { Separator } from '@/components/ui/separator';
 import { Button } from '@/components/ui/button';
@@ -48,6 +49,7 @@ export default function SearchPage() {
     }, 300);
 
     return () => clearTimeout(timeoutId);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchQuery]);
 
   const handlePlaySong = (song: Song) => {
@@ -118,7 +120,7 @@ export default function SearchPage() {
           <div className="space-y-6">
             {searchResults.artists.length === 0 && searchResults.albums.length === 0 && searchResults.songs.length === 0 && !isSearching && (
               <div className="text-center py-12">
-                <p className="text-muted-foreground text-lg">No results found for "{searchQuery}"</p>
+                <p className="text-muted-foreground text-lg">No results found for &quot;{searchQuery}&quot;</p>
                 <p className="text-muted-foreground text-sm mt-2">Try different keywords or check your spelling</p>
               </div>
             )}
@@ -181,9 +183,11 @@ export default function SearchPage() {
                       
                       {/* Song Cover */}
                       <div className="flex-shrink-0">
-                        <img
+                        <Image
                           src={song.coverArt ? 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>