From b6c723d3df8b4c5a4d1156bf82159ded8d32fd5b Mon Sep 17 00:00:00 2001
From: vicrodh <103399283+vicrodh@users.noreply.github.com>
Date: Mon, 2 Feb 2026 08:11:48 -0600
Subject: [PATCH] fix(search): use 4-quadrant collage for playlist cards

---
 src/lib/components/SearchPlaylistCard.svelte | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/lib/components/SearchPlaylistCard.svelte b/src/lib/components/SearchPlaylistCard.svelte
index c17b44cb1..905ea6505 100644
--- a/src/lib/components/SearchPlaylistCard.svelte
+++ b/src/lib/components/SearchPlaylistCard.svelte
@@ -46,12 +46,12 @@
     }
   }
 
-  function getPlaylistImage(): string {
+  function getPlaylistImages(): string[] {
     // Prefer images300 for better quality, fallback to images150, then images
-    if (playlist.images300?.length) return playlist.images300[0];
-    if (playlist.images150?.length) return playlist.images150[0];
-    if (playlist.images?.length) return playlist.images[0];
-    return '';
+    if (playlist.images300?.length) return playlist.images300;
+    if (playlist.images150?.length) return playlist.images150;
+    if (playlist.images?.length) return playlist.images;
+    return [];
   }
 
   function getGenreLabel(): string {
@@ -133,11 +133,7 @@
   onkeydown={(e) => e.key === 'Enter' && onclick?.()}
 >
   <div class="artwork-container">
-    {#if getPlaylistImage()}
-      <img src={getPlaylistImage()} alt={playlist.name} loading="lazy" />
-    {:else}
-      <PlaylistCollage artworks={playlist.images || []} size={162} />
-    {/if}
+    <PlaylistCollage artworks={getPlaylistImages()} size={162} />
 
     <div class="action-overlay">
       {#if getGenreLabel()}