fix(web): preserve search text (#12531)

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

@@ -10,8 +10,8 @@
   }
 
   export type SearchFilter = {
-    context?: string;
-    filename?: string;
+    query: string;
+    queryType: 'smart' | 'metadata';
     personIds: Set<string>;
     location: SearchLocationFilter;
     camera: SearchCameraFilter;
@@ -48,8 +48,8 @@
   }
 
   let filter: SearchFilter = {
-    context: 'query' in searchQuery ? searchQuery.query : '',
-    filename: 'originalFileName' in searchQuery ? searchQuery.originalFileName : undefined,
+    query: 'query' in searchQuery ? searchQuery.query : searchQuery.originalFileName || '',
+    queryType: 'query' in searchQuery ? 'smart' : 'metadata',
     personIds: new Set('personIds' in searchQuery ? searchQuery.personIds : []),
     location: {
       country: withNullAsUndefined(searchQuery.country),
@@ -79,6 +79,8 @@
 
   const resetForm = () => {
     filter = {
+      query: '',
+      queryType: 'smart',
       personIds: new Set(),
       location: {},
       camera: {},
@@ -96,9 +98,11 @@
       type = AssetTypeEnum.Video;
     }
 
+    const query = filter.query || undefined;
+
     let payload: SmartSearchDto | MetadataSearchDto = {
-      query: filter.context || undefined,
-      originalFileName: filter.filename,
+      query: filter.queryType === 'smart' ? query : undefined,
+      originalFileName: filter.queryType === 'metadata' ? query : undefined,
       country: filter.location.country,
       state: filter.location.state,
       city: filter.location.city,
@@ -132,7 +136,7 @@
       <SearchPeopleSection bind:selectedPeople={filter.personIds} />
 
       <!-- TEXT -->
-      <SearchTextSection bind:filename={filter.filename} bind:context={filter.context} />
+      <SearchTextSection bind:query={filter.query} bind:queryType={filter.queryType} />
 
       <!-- LOCATION -->
       <SearchLocationSection bind:filters={filter.location} />

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

@@ -2,46 +2,25 @@
   import RadioButton from '$lib/components/elements/radio-button.svelte';
   import { t } from 'svelte-i18n';
 
-  export let filename: string | undefined;
-  export let context: string | undefined;
-
-  enum TextSearchOptions {
-    Context = 'context',
-    Filename = 'filename',
-  }
-
-  let selectedOption = filename ? TextSearchOptions.Filename : TextSearchOptions.Context;
-
-  $: {
-    if (selectedOption === TextSearchOptions.Context) {
-      filename = undefined;
-    } else {
-      context = undefined;
-    }
-  }
+  export let query: string | undefined;
+  export let queryType: 'smart' | 'metadata' = 'smart';
 </script>
 
 <fieldset>
   <legend class="immich-form-label">{$t('search_type')}</legend>
   <div class="flex flex-wrap gap-x-5 gap-y-2 mt-1 mb-2">
-    <RadioButton
-      name="query-type"
-      id="context-radio"
-      bind:group={selectedOption}
-      label={$t('context')}
-      value={TextSearchOptions.Context}
-    />
+    <RadioButton name="query-type" id="context-radio" label={$t('context')} bind:group={queryType} value="smart" />
     <RadioButton
       name="query-type"
       id="file-name-radio"
-      bind:group={selectedOption}
       label={$t('file_name_or_extension')}
-      value={TextSearchOptions.Filename}
+      bind:group={queryType}
+      value="metadata"
     />
   </div>
 </fieldset>
 
-{#if selectedOption === TextSearchOptions.Context}
+{#if queryType === 'smart'}
   <label for="context-input" class="immich-form-label">{$t('search_by_context')}</label>
   <input
     class="immich-form-input hover:cursor-text w-full !mt-1"
@@ -49,7 +28,7 @@
     id="context-input"
     name="context"
     placeholder={$t('sunrise_on_the_beach')}
-    bind:value={context}
+    bind:value={query}
   />
 {:else}
   <label for="file-name-input" class="immich-form-label">{$t('search_by_filename')}</label>
@@ -59,7 +38,7 @@
     id="file-name-input"
     name="file-name"
     placeholder={$t('search_by_filename_example')}
-    bind:value={filename}
+    bind:value={query}
     aria-labelledby="file-name-label"
   />
 {/if}