From 95ef60628cd9c220b8c2e2fa1156dbd976cbec6a Mon Sep 17 00:00:00 2001
From: Vogeluff <72712390+Vogeluff@users.noreply.github.com>
Date: Fri, 3 Apr 2026 17:37:03 +0200
Subject: [PATCH] fix(web): always show search type button (#27043)

* fix(web): always show search type button

* fix(web): formatting fixes

* fix(web): search-type-button inactive styling outline/secondary

* chore: styling

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
---
 .../search-bar/search-bar.svelte              | 72 ++++++++++---------
 1 file changed, 38 insertions(+), 34 deletions(-)

diff --git a/web/src/lib/components/shared-components/search-bar/search-bar.svelte b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
index a5fae6c3f3..891331eaed 100644
--- a/web/src/lib/components/shared-components/search-bar/search-bar.svelte
+++ b/web/src/lib/components/shared-components/search-bar/search-bar.svelte
@@ -184,6 +184,7 @@
     localStorage.setItem('searchQueryType', type);
     currentSearchType = type;
     showSearchTypeDropdown = false;
+    input?.focus();
   };
 
   const onsubmit = (event: Event) => {
@@ -306,43 +307,46 @@
       />
     </div>
 
-    {#if searchStore.isSearchEnabled}
-      <div
-        id={searchTypeId}
-        class="absolute inset-y-0 flex items-center end-16"
-        class:max-md:hidden={value}
-        class:end-28={value.length > 0}
-      >
-        <div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}>
-          <Button
-            class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs hover:opacity-80 transition-opacity cursor-pointer"
-            onclick={toggleSearchTypeDropdown}
-            aria-expanded={showSearchTypeDropdown}
-            aria-haspopup="listbox"
-          >
-            {getSearchTypeText()}
-          </Button>
+    <div
+      id={searchTypeId}
+      class="absolute inset-y-0 flex items-center end-16"
+      class:max-md:hidden={value}
+      class:end-28={value.length > 0}
+    >
+      <div class="relative" use:focusOutside={{ onFocusOut: closeSearchTypeDropdown }}>
+        <Button
+          shape="round"
+          variant={searchStore.isSearchEnabled ? 'filled' : 'outline'}
+          color={searchStore.isSearchEnabled ? 'primary' : 'secondary'}
+          class="px-3 py-1 text-xs {searchStore.isSearchEnabled
+            ? 'border border-transparent'
+            : 'border border-secondary/5 text-muted hover:text-dark font-light'}"
+          onclick={toggleSearchTypeDropdown}
+          aria-expanded={showSearchTypeDropdown}
+          aria-haspopup="listbox"
+        >
+          {getSearchTypeText()}
+        </Button>
 
-          {#if showSearchTypeDropdown}
-            <div
-              class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999"
-            >
-              {#each searchTypes as searchType (searchType.value)}
-                <button
-                  type="button"
-                  tabindex="0"
-                  class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
+        {#if showSearchTypeDropdown}
+          <div
+            class="absolute top-full right-0 mt-1 bg-white dark:bg-immich-dark-gray border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-32 z-9999"
+          >
+            {#each searchTypes as searchType (searchType.value)}
+              <button
+                type="button"
+                tabindex="0"
+                class="w-full text-left px-3 py-2 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors
                          {currentSearchType === searchType.value ? 'bg-gray-100 dark:bg-gray-700' : ''}"
-                  onclick={() => selectSearchType(searchType.value)}
-                >
-                  {searchType.label()}
-                </button>
-              {/each}
-            </div>
-          {/if}
-        </div>
+                onclick={() => selectSearchType(searchType.value)}
+              >
+                {searchType.label()}
+              </button>
+            {/each}
+          </div>
+        {/if}
       </div>
-    {/if}
+    </div>
 
     {#if showClearIcon}
       <div class="absolute inset-y-0 end-0 flex items-center pe-2">