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>

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,7 +307,6 @@
       />
     </div>
 
-    {#if searchStore.isSearchEnabled}
     <div
       id={searchTypeId}
       class="absolute inset-y-0 flex items-center end-16"
@@ -315,7 +315,12 @@
     >
       <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"
+          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"
@@ -342,7 +347,6 @@
         {/if}
       </div>
     </div>
-    {/if}
 
     {#if showClearIcon}
       <div class="absolute inset-y-0 end-0 flex items-center pe-2">