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/lib/components/asset-viewer/intersection-observer.svelte

@@ -9,7 +9,7 @@
   export let right = 0;
   export let root: HTMLElement | null = null;
 
-  let intersecting = false;
+  export let intersecting = false;
   let container: HTMLDivElement;
   const dispatch = createEventDispatcher<{
     hidden: HTMLDivElement;

web/src/lib/components/assets/thumbnail/thumbnail.svelte

@@ -37,6 +37,7 @@
   export let readonly = false;
   export let showArchiveIcon = false;
   export let showStackedIcon = true;
+  export let intersecting = false;
 
   let className = '';
   export { className as class };
@@ -85,7 +86,7 @@
   };
 </script>
 
-<IntersectionObserver once={false} let:intersecting>
+<IntersectionObserver once={false} on:intersected bind:intersecting>
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div
     style:width="{width}px"
@@ -95,8 +96,8 @@
       : 'bg-immich-primary/20 dark:bg-immich-dark-primary/20'}"
     class:cursor-not-allowed={disabled}
     class:hover:cursor-pointer={!disabled}
-    on:mouseenter={() => onMouseEnter()}
-    on:mouseleave={() => onMouseLeave()}
+    on:mouseenter={onMouseEnter}
+    on:mouseleave={onMouseLeave}
     on:click={thumbnailClickedHandler}
     on:keydown={thumbnailKeyDownHandler}
   >

web/src/lib/components/shared-components/gallery-viewer/gallery-viewer.svelte

@@ -8,6 +8,10 @@
   import { getThumbnailSize } from '$lib/utils/thumbnail-util';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
   import { onDestroy } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
+  import type { BucketPosition } from '$lib/stores/assets.store';
+
+  const dispatch = createEventDispatcher<{ intersected: { container: HTMLDivElement; position: BucketPosition } }>();
 
   export let assets: AssetResponseDto[];
   export let selectedAssets: Set<AssetResponseDto> = new Set();
@@ -18,7 +22,6 @@
 
   let selectedAsset: AssetResponseDto;
   let currentViewAssetIndex = 0;
-
   let viewWidth: number;
   $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
 
@@ -88,7 +91,7 @@
 
 {#if assets.length > 0}
   <div class="flex w-full flex-wrap gap-1 pb-20" bind:clientWidth={viewWidth}>
-    {#each assets as asset (asset.id)}
+    {#each assets as asset, i (asset.id)}
       <div animate:flip={{ duration: 500 }}>
         <Thumbnail
           {asset}
@@ -97,6 +100,8 @@
           format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
           on:click={(e) => (isMultiSelectionMode ? selectAssetHandler(e) : viewAssetHandler(e))}
           on:select={selectAssetHandler}
+          on:intersected={(event) =>
+            i === Math.max(1, assets.length - 7) ? dispatch('intersected', event.detail) : undefined}
           selected={selectedAssets.has(asset)}
           {showArchiveIcon}
         />

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

@@ -32,6 +32,7 @@
     const parameters = new URLSearchParams({
       q: searchValue,
       smart: smartSearch,
+      take: '100',
     });
 
     showHistory = false;