From a8203e9fc71582d35ee8cab7787c4036e9abc38b Mon Sep 17 00:00:00 2001
From: CJPeckover <cjpeckover@hotmail.ca>
Date: Fri, 6 Jun 2025 23:01:15 -0400
Subject: [PATCH] - cleanup combobox thumbnails, use component prop to enable

---
 .../lib/components/shared-components/combobox.svelte   | 10 ++++++----
 .../search-bar/search-albums-section.svelte            |  3 ++-
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/web/src/lib/components/shared-components/combobox.svelte b/web/src/lib/components/shared-components/combobox.svelte
index b0aff6639e..793f0f6ec8 100644
--- a/web/src/lib/components/shared-components/combobox.svelte
+++ b/web/src/lib/components/shared-components/combobox.svelte
@@ -46,6 +46,7 @@
      * select first matching option on enter key.
      */
     defaultFirstOption?: boolean;
+    hasThumbnails?: boolean;
     onSelect?: (option: ComboBoxOption | undefined) => void;
   }
 
@@ -57,6 +58,7 @@
     placeholder = '',
     allowCreate = false,
     defaultFirstOption = false,
+    hasThumbnails = false,
     onSelect = () => {},
   }: Props = $props();
 
@@ -385,13 +387,11 @@
           onclick={() => handleSelect(option)}
           role="option"
         >
-          {#if option.thumbnail}
+          {#if hasThumbnails}
             <div
               class="text-start flex w-full place-items-center gap-4 rounded-e-full py-3 transition-[padding] delay-100 duration-100 hover:cursor-pointer hover:bg-subtle hover:text-immich-primary dark:text-immich-dark-fg dark:hover:bg-immich-dark-gray dark:hover:text-immich-dark-primary px-4"
             >
-              {#if option.thumbnail === 'no-thumbnail'}
-                <div class="h-6 w-6 bg-cover rounded hover:shadow-lg"></div>
-              {:else}
+              {#if option.thumbnail}
                 <img
                   src={option.thumbnail}
                   alt={option.label}
@@ -399,6 +399,8 @@
                   data-testid="album-image"
                   draggable="false"
                 />
+              {:else}
+                <div class="h-6 w-6 bg-cover rounded hover:shadow-lg"></div>
               {/if}
               {option.label}
             </div>
diff --git a/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte b/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
index a1f53f31e1..ae1064e6d7 100644
--- a/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-albums-section.svelte
@@ -43,13 +43,14 @@
       <div class="my-4 flex flex-col gap-2">
         <Combobox
           onSelect={handleSelect}
+          hasThumbnails
           label={$t('albums').toUpperCase()}
           defaultFirstOption
           options={allAlbums.map((album) => ({
             id: album.id,
             label: album.albumName,
             value: album.id,
-            thumbnail: album.albumThumbnailAssetId ? getAssetThumbnailUrl(album.albumThumbnailAssetId) : 'no-thumbnail',
+            thumbnail: album.albumThumbnailAssetId ? getAssetThumbnailUrl(album.albumThumbnailAssetId) : undefined,
           }))}
           bind:selectedOption
           placeholder={$t('search_albums')}