From 0d69b10be046f85482d2cb771524c75c19bc1020 Mon Sep 17 00:00:00 2001
From: angel <sillyangel3@gmail.com>
Date: Fri, 20 Jun 2025 01:18:04 +0000
Subject: [PATCH] feat: enhance SearchPage with improved no results message and
 replace img with Image component for better performance

---
 app/api/test-navidrome/route.ts     | 0
 app/browse/page.tsx                 | 2 ++
 app/components/FullScreenPlayer.tsx | 6 +++---
 app/search/page.tsx                 | 8 ++++++--
 4 files changed, 11 insertions(+), 5 deletions(-)
 delete mode 100644 app/api/test-navidrome/route.ts

diff --git a/app/api/test-navidrome/route.ts b/app/api/test-navidrome/route.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/app/browse/page.tsx b/app/browse/page.tsx
index 751d0f3..5ccbebb 100644
--- a/app/browse/page.tsx
+++ b/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 = () => {
diff --git a/app/components/FullScreenPlayer.tsx b/app/components/FullScreenPlayer.tsx
index f4374cf..d2c4c10 100644
--- a/app/components/FullScreenPlayer.tsx
+++ b/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(() => {
diff --git a/app/search/page.tsx b/app/search/page.tsx
index c60eb1f..c918c6f 100644
--- a/app/search/page.tsx
+++ b/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>