From ab27ba948f4b0a0fb93cf41a2b33a9d0e287576f Mon Sep 17 00:00:00 2001
From: Adrian Bonpin <adrianbonpin@gmail.com>
Date: Tue, 28 Apr 2026 22:30:19 +0800
Subject: [PATCH] fix: add image fallback chain for missing game covers in
 search

---
 app/search/page.tsx       | 24 ++++++++++++++++++------
 lib/api/search-unified.ts |  2 ++
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/search/page.tsx b/app/search/page.tsx
index e899191..cbd9729 100644
--- a/app/search/page.tsx
+++ b/app/search/page.tsx
@@ -43,6 +43,7 @@ interface UnifiedResult {
   isPoorPerformance?: boolean
   bestFps?: number | null
   latestVersion?: string | null
+  tinyImage?: string | null
 }
 
 function SearchContent() {
@@ -240,7 +241,7 @@ function SearchResultCard({
           whileHover={{ scale: 1.03 }}
           transition={{ duration: 0.2 }}
         >
-          <GameCover image={result.image} title={result.title} />
+          <GameCover image={result.image} tinyImage={result.tinyImage} title={result.title} />
         </motion.div>
 
         {/* Main Content */}
@@ -507,18 +508,29 @@ function protonColor(status: string): string {
   return map[status] || "text-text/25"
 }
 
-function GameCover({ image, title }: { image: string | null; title: string }) {
-  const [error, setError] = useState(false)
+function GameCover({ image, tinyImage, title }: { image: string | null; tinyImage?: string | null; title: string }) {
+  const [src, setSrc] = useState(image)
+  const [fallbackStage, setFallbackStage] = useState(0)
 
-  if (image && !error) {
+  const handleError = () => {
+    if (fallbackStage === 0 && tinyImage) {
+      setFallbackStage(1)
+      setSrc(tinyImage)
+    } else {
+      setFallbackStage(2)
+      setSrc(null)
+    }
+  }
+
+  if (src) {
     return (
       <Image
-        src={image}
+        src={src}
         alt={title}
         fill
         className="object-cover"
         sizes="(max-width: 640px) 80px, 112px"
-        onError={() => setError(true)}
+        onError={handleError}
       />
     )
   }
diff --git a/lib/api/search-unified.ts b/lib/api/search-unified.ts
index fa354c1..018243c 100644
--- a/lib/api/search-unified.ts
+++ b/lib/api/search-unified.ts
@@ -269,6 +269,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
         appId: g.steamAppId,
         title: g.title,
         image: g.capsuleImage || g.headerImage,
+        tinyImage: g.capsuleImage || g.headerImage || null,
         developer: g.developer,
         publisher: g.publisher,
         description: g.description,
@@ -299,6 +300,7 @@ export const searchUnifiedRoutes = new Elysia({ prefix: "/search" }).get(
         appId: item.id,
         title: item.name,
         image: `https://cdn.akamai.steamstatic.com/steam/apps/${item.id}/library_600x900.jpg`,
+        tinyImage: item.tiny_image || null,
         developer: null,
         publisher: null,
         description: null,