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/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}
         />