feat(web): remember search context (#16614)

* Retain search context in LocalStorage.

* Remove debug logging

* Prettier

* Added QueryType and VALID_QUERY_TYPES to $lib/constants

* Prettier

* Renamed VALID_QUERY_TYPES to fit the codestyle.

Ran prettier

* show current search type on search bar

* fix: linting

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/shared-components/search-bar/search-bar.svelte

@@ -32,6 +32,7 @@
   let showFilter = $state(false);
   let isSearchSuggestions = $state(false);
   let selectedId: string | undefined = $state();
+  let isFocus = $state(false);
 
   const listboxId = generateId();
 
@@ -98,7 +99,25 @@
   };
 
   const onSubmit = () => {
-    handlePromiseError(handleSearch({ query: value }));
+    const searchType = getSearchType();
+    let payload: SmartSearchDto | MetadataSearchDto = {} as SmartSearchDto | MetadataSearchDto;
+
+    switch (searchType) {
+      case 'smart': {
+        payload = { query: value } as SmartSearchDto;
+        break;
+      }
+      case 'metadata': {
+        payload = { originalFileName: value } as MetadataSearchDto;
+        break;
+      }
+      case 'description': {
+        payload = { description: value } as MetadataSearchDto;
+        break;
+      }
+    }
+
+    handlePromiseError(handleSearch(payload));
     saveSearchTerm(value);
   };
 
@@ -132,10 +151,12 @@
 
   const openDropdown = () => {
     showSuggestions = true;
+    isFocus = true;
   };
 
   const closeDropdown = () => {
     showSuggestions = false;
+    isFocus = false;
     searchHistoryBox?.clearSelection();
   };
 
@@ -143,6 +164,26 @@
     event.preventDefault();
     onSubmit();
   };
+
+  function getSearchType(): 'smart' | 'metadata' | 'description' {
+    const t = localStorage.getItem('searchQueryType');
+    return t === 'smart' || t === 'description' ? t : 'metadata';
+  }
+
+  function getSearchTypeText(): string {
+    const searchType = getSearchType();
+    switch (searchType) {
+      case 'smart': {
+        return $t('context');
+      }
+      case 'metadata': {
+        return $t('filename');
+      }
+      case 'description': {
+        return $t('description');
+      }
+    }
+  }
 </script>
 
 <svelte:window
@@ -214,6 +255,21 @@
     <div class="absolute inset-y-0 {showClearIcon ? 'right-14' : 'right-2'} flex items-center pl-6 transition-all">
       <CircleIconButton title={$t('show_search_options')} icon={mdiTune} onclick={onFilterClick} size="20" />
     </div>
+
+    {#if isFocus}
+      <div
+        class="absolute inset-y-0 flex items-center"
+        class:right-16={isFocus}
+        class:right-28={isFocus && value.length > 0}
+      >
+        <p
+          class="bg-immich-primary text-white dark:bg-immich-dark-primary/90 dark:text-black/75 rounded-full px-3 py-1 text-xs z-10"
+        >
+          {getSearchTypeText()}
+        </p>
+      </div>
+    {/if}
+
     {#if showClearIcon}
       <div class="absolute inset-y-0 right-0 flex items-center pr-2">
         <CircleIconButton onclick={onClear} icon={mdiClose} title={$t('clear')} size="20" />