feat(server, web): smart search filtering and pagination (#6525)

* initial pagination impl

* use limit + offset instead of take + skip

* wip web pagination

* working infinite scroll

* update api

* formatting

* fix rebase

* search refactor

* re-add runtime config for vector search

* fix rebase

* fixes

* useless omitBy

* unnecessary handling

* add sql decorator for `searchAssets`

* fixed search builder

* fixed sql

* remove mock method

* linting

* fixed pagination

* fixed unit tests

* formatting

* fix e2e tests

* re-flatten search builder

* refactor endpoints

* clean up dto

* refinements

* don't break everything just yet

* update openapi spec & sql

* update api

* linting

* update sql

* fixes

* optimize web code

* fix typing

* add page limit

* make limit based on asset count

* increase limit

* simpler import

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

@@ -14,7 +14,6 @@
   import ControlAppBar from '$lib/components/shared-components/control-app-bar.svelte';
   import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
   import SearchBar from '$lib/components/shared-components/search-bar/search-bar.svelte';
-  import type { AssetResponseDto } from '@api';
   import type { PageData } from './$types';
   import Icon from '$lib/components/elements/icon.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
@@ -27,15 +26,20 @@
   import { preventRaceConditionSearchBar } from '$lib/stores/search.store';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { mdiArrowLeft, mdiDotsVertical, mdiImageOffOutline, mdiPlus, mdiSelectAll } from '@mdi/js';
+  import type { AssetResponseDto, SearchResponseDto } from '@immich/sdk';
+  import { authenticate } from '$lib/utils/auth';
+  import { api } from '@api';
 
   export let data: PageData;
 
+  const MAX_ASSET_COUNT = 5000;
   let { isViewing: showAssetViewer } = assetViewingStore;
 
   // The GalleryViewer pushes it's own history state, which causes weird
   // 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;
   $: albums = data.results?.albums.items;
 
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
@@ -107,6 +111,33 @@
   const handleSelectAll = () => {
     selectedAssets = new Set(searchResultAssets);
   };
+
+  export const loadNextPage = async () => {
+    if (curPage == 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 api.searchApi.search({}, { params: $page.url.searchParams });
+    if (searchResultAssets) {
+      searchResultAssets.push(...res.data.assets.items);
+    } else {
+      searchResultAssets = res.data.assets.items;
+    }
+
+    const assets = {
+      ...res.data.assets,
+      items: searchResultAssets,
+    };
+    results = {
+      assets,
+      albums: res.data.albums,
+    };
+
+    data.results = results;
+  };
 </script>
 
 <section>
@@ -164,7 +195,12 @@
     <section id="search-content" class="relative bg-immich-bg dark:bg-immich-dark-bg">
       {#if searchResultAssets && searchResultAssets.length > 0}
         <div class="pl-4">
-          <GalleryViewer assets={searchResultAssets} bind:selectedAssets showArchiveIcon={true} />
+          <GalleryViewer
+            assets={searchResultAssets}
+            bind:selectedAssets
+            on:intersected={loadNextPage}
+            showArchiveIcon={true}
+          />
         </div>
       {:else}
         <div class="flex min-h-[calc(66vh_-_11rem)] w-full place-content-center items-center dark:text-white">

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

@@ -1,5 +1,5 @@
 import { authenticate } from '$lib/utils/auth';
-import { type SearchResponseDto, api } from '@api';
+import { type AssetResponseDto, type SearchResponseDto, api } from '@api';
 import type { PageLoad } from './$types';
 import { QueryParameter } from '$lib/constants';
 
@@ -10,8 +10,18 @@ export const load = (async (data) => {
     url.searchParams.get(QueryParameter.SEARCH_TERM) || url.searchParams.get(QueryParameter.QUERY) || undefined;
   let results: SearchResponseDto | null = null;
   if (term) {
-    const { data } = await api.searchApi.search({}, { params: url.searchParams });
-    results = data;
+    const res = await api.searchApi.search({}, { params: data.url.searchParams });
+    let items: AssetResponseDto[] = (data as unknown as { results: SearchResponseDto }).results?.assets.items;
+    if (items) {
+      items.push(...res.data.assets.items);
+    } else {
+      items = res.data.assets.items;
+    }
+    const assets = { ...res.data.assets, items };
+    results = {
+      assets,
+      albums: res.data.albums,
+    };
   }
 
   return {