feat: enhance search

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

@@ -8,6 +8,7 @@
   import IconButton from '$lib/components/elements/buttons/icon-button.svelte';
   import SearchHistoryBox from './search-history-box.svelte';
   import SearchFilterBox from './search-filter-box.svelte';
+  import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
   export let value = '';
   export let grayTheme: boolean;
 
@@ -17,28 +18,19 @@
   let showFilter = false;
   $: showClearIcon = value.length > 0;
 
-  function onSearch() {
-    let smartSearch = 'true';
-    let searchValue = value;
-
-    if (value.slice(0, 2) == 'm:') {
-      smartSearch = 'false';
-      searchValue = value.slice(2);
-    }
-
-    $savedSearchTerms = $savedSearchTerms.filter((item) => item !== value);
-    saveSearchTerm(value);
+  function onSearch() {}
 
+  const onSearchNew = (payload: SmartSearchDto | MetadataSearchDto) => {
     const parameters = new URLSearchParams({
-      q: searchValue,
-      smart: smartSearch,
-      take: '100',
+      q: JSON.stringify(payload),
     });
 
     showHistory = false;
+    showFilter = false;
     $isSearchEnabled = false;
+
     goto(`${AppRoute.SEARCH}?${parameters}`, { invalidateAll: true });
-  }
+  };
 
   const clearSearchTerm = (searchTerm: string) => {
     input.focus();
@@ -139,7 +131,7 @@
     {/if}
 
     {#if showFilter}
-      <SearchFilterBox />
+      <SearchFilterBox on:search={({ detail }) => onSearchNew(detail)} />
     {/if}
   </form>
 </div>

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

@@ -8,17 +8,16 @@
     AssetTypeEnum,
     SearchSuggestionType,
     type PersonResponseDto,
-    searchSmart,
-    searchMetadata,
     type SmartSearchDto,
     type MetadataSearchDto,
   } from '@immich/sdk';
   import { getAllPeople, getSearchSuggestions } from '@immich/sdk';
   import { mdiArrowRight, mdiClose } from '@mdi/js';
-  import { onMount } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import { fly } from 'svelte/transition';
   import Combobox, { type ComboBoxOption } from '../combobox.svelte';
   import { DateTime } from 'luxon';
+  import _ from 'lodash-es';
 
   enum MediaType {
     All = 'all',
@@ -101,6 +100,7 @@
     mediaType: MediaType.All,
   };
 
+  const dispatch = createEventDispatcher<{ search: SmartSearchDto | MetadataSearchDto }>();
   let showAllPeople = false;
   $: peopleList = showAllPeople ? suggestions.people : suggestions.people.slice(0, 11);
 
@@ -237,8 +237,6 @@
       type = AssetTypeEnum.Video;
     }
 
-    console.log(filter.date);
-
     let payload: SmartSearchDto | MetadataSearchDto = {
       country: filter.location.country?.value,
       state: filter.location.state?.value,
@@ -254,17 +252,26 @@
       isArchived: filter.isArchive,
       isFavorite: filter.isFavorite,
       isNotInAlbum: filter.isNotInAlbum,
-      personIds: filter.people ? filter.people.map((p) => p.id) : undefined,
+      personIds: filter.people && filter.people.length > 0 ? filter.people.map((p) => p.id) : undefined,
       type,
     };
 
     if (filter.context) {
-      const { assets } = await searchSmart({ smartSearchDto: { query: filter.context, ...payload } });
-      console.log('Smart search', assets);
-    } else {
-      const { assets } = await searchMetadata({ metadataSearchDto: { ...payload } });
-      console.log('Metadata search', assets);
+      if (payload.personIds && payload.personIds.length > 0) {
+        handleError(
+          new Error('Context search does not support people filter'),
+          'Context search does not support people filter',
+        );
+        return;
+      }
+
+      payload = {
+        ...payload,
+        query: filter.context,
+      };
     }
+
+    dispatch('search', payload);
   };
 </script>
 

web/src/lib/stores/search.store.ts

@@ -1,6 +1,8 @@
+import type { MetadataSearchDto, SmartSearchDto } from '@immich/sdk';
 import { persisted } from 'svelte-local-storage-store';
 import { writable } from 'svelte/store';
 
 export const savedSearchTerms = persisted<string[]>('search-terms', [], {});
 export const isSearchEnabled = writable<boolean>(false);
 export const preventRaceConditionSearchBar = writable<boolean>(false);
+export const searchPayload = writable<SmartSearchDto | MetadataSearchDto | undefined>(undefined);

web/src/routes/(user)/search/+page.svelte

@@ -20,10 +20,10 @@
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
   import { AppRoute, QueryParameter } from '$lib/constants';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
+  import { preventRaceConditionSearchBar, searchPayload } from '$lib/stores/search.store';
   import { authenticate } from '$lib/utils/auth';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
-  import { search, type AssetResponseDto, type SearchResponseDto } from '@immich/sdk';
+  import { search, type AssetResponseDto, type SearchResponseDto, searchSmart, searchMetadata } from '@immich/sdk';
   import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { flip } from 'svelte/animate';
@@ -38,7 +38,7 @@
   // behavior for history.back(). To prevent that we store the previous page
   // manually and navigate back to that.
   let previousRoute = AppRoute.EXPLORE as string;
-  $: curPage = data.results?.assets.nextPage;
+  $: currentPage = data.results?.assets.nextPage;
   $: albums = data.results?.albums.items;
 
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
@@ -112,27 +112,35 @@
   };
 
   export const loadNextPage = async () => {
-    if (curPage == null || !term || (searchResultAssets && searchResultAssets.length >= MAX_ASSET_COUNT)) {
+    if (currentPage == null || !term || (searchResultAssets && searchResultAssets.length >= MAX_ASSET_COUNT)) {
       return;
     }
 
     await authenticate();
     let results: SearchResponseDto | null = null;
-    $page.url.searchParams.set('page', curPage.toString());
-    const res = await search({ ...$page.url.searchParams });
+    $page.url.searchParams.set('page', currentPage.toString());
+    const payload = $searchPayload;
+    let reponses: SearchResponseDto;
+
+    if (payload && 'query' in payload) {
+      reponses = await searchSmart({ smartSearchDto: { ...payload, page: parseInt(currentPage) } });
+    } else {
+      reponses = await searchMetadata({ metadataSearchDto: { ...payload, page: parseInt(currentPage) } });
+    }
+
     if (searchResultAssets) {
-      searchResultAssets.push(...res.assets.items);
+      searchResultAssets.push(...reponses.assets.items);
     } else {
-      searchResultAssets = res.assets.items;
+      searchResultAssets = reponses.assets.items;
     }
 
     const assets = {
-      ...res.assets,
+      ...reponses.assets,
       items: searchResultAssets,
     };
     results = {
       assets,
-      albums: res.albums,
+      albums: reponses.albums,
     };
 
     data.results = results;

web/src/routes/(user)/search/+page.ts

@@ -1,6 +1,13 @@
 import { QueryParameter } from '$lib/constants';
+import { searchPayload } from '$lib/stores/search.store';
 import { authenticate } from '$lib/utils/auth';
-import { search, type AssetResponseDto, type SearchResponseDto } from '@immich/sdk';
+import {
+  searchMetadata,
+  searchSmart,
+  type MetadataSearchDto,
+  type SearchResponseDto,
+  type SmartSearchDto,
+} from '@immich/sdk';
 import type { PageLoad } from './$types';
 
 export const load = (async (data) => {
@@ -9,23 +16,16 @@ export const load = (async (data) => {
   const term =
     url.searchParams.get(QueryParameter.SEARCH_TERM) || url.searchParams.get(QueryParameter.QUERY) || undefined;
   let results: SearchResponseDto | null = null;
+
   if (term) {
-    let params = {};
-    for (const [key, value] of data.url.searchParams) {
-      params = { ...params, [key]: value };
-    }
-    const response = await search({ ...params });
-    let items: AssetResponseDto[] = (data as unknown as { results: SearchResponseDto }).results?.assets.items;
-    if (items) {
-      items.push(...response.assets.items);
+    const payload = JSON.parse(term) as SmartSearchDto | MetadataSearchDto;
+    searchPayload.set(payload);
+
+    if (payload && 'query' in payload) {
+      results = await searchSmart({ smartSearchDto: { ...payload } });
     } else {
-      items = response.assets.items;
+      results = await searchMetadata({ metadataSearchDto: { ...payload } });
     }
-    const assets = { ...response.assets, items };
-    results = {
-      assets,
-      albums: response.albums,
-    };
   }
 
   return {