feat(web/server): Face thumbnail selection (#3081)

* add migration

* verify running migration populate new value

* implemented service

* generate api

* FE works

* FR Works

* fix test

* fix test fixture

* fix test

* fix test

* consolidate api

* fix test

* added test

* pr feedback

* refactor

* click ont humbnail to show feature selection as well

web/src/lib/components/faces-page/face-thumbnail-selector.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { AssetResponseDto } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import { quintOut } from 'svelte/easing';
+  import { fly } from 'svelte/transition';
+  import ControlAppBar from '../shared-components/control-app-bar.svelte';
+  import AssetSelectionViewer from '../shared-components/gallery-viewer/asset-selection-viewer.svelte';
+
+  const dispatch = createEventDispatcher();
+
+  export let assets: AssetResponseDto[];
+
+  let selectedAsset: AssetResponseDto | undefined = undefined;
+
+  const handleSelectedAsset = async (event: CustomEvent) => {
+    const { asset }: { asset: AssetResponseDto } = event.detail;
+    selectedAsset = asset;
+    onClose();
+  };
+
+  const onClose = () => {
+    dispatch('go-back', { selectedAsset });
+  };
+</script>
+
+<section
+  transition:fly={{ y: 500, duration: 100, easing: quintOut }}
+  class="absolute top-0 left-0 w-full h-full bg-immich-bg dark:bg-immich-dark-bg z-[9999]"
+>
+  <ControlAppBar on:close-button-click={onClose}>
+    <svelte:fragment slot="leading">Select feature photo</svelte:fragment>
+  </ControlAppBar>
+  <section class="pt-[100px] pl-[70px] bg-immich-bg dark:bg-immich-dark-bg">
+    <AssetSelectionViewer {assets} on:select={handleSelectedAsset} />
+  </section>
+</section>

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

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import Thumbnail from '$lib/components/assets/thumbnail/thumbnail.svelte';
+  import { getThumbnailSize } from '$lib/utils/thumbnail-util';
+  import { AssetResponseDto, ThumbnailFormat } from '@api';
+  import { createEventDispatcher } from 'svelte';
+  import { flip } from 'svelte/animate';
+
+  export let assets: AssetResponseDto[];
+  export let selectedAssets: Set<AssetResponseDto> = new Set();
+
+  let viewWidth: number;
+  $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
+
+  let dispatch = createEventDispatcher();
+
+  const selectAssetHandler = (event: CustomEvent) => {
+    const { asset }: { asset: AssetResponseDto } = event.detail;
+    let temp = new Set(selectedAssets);
+    if (selectedAssets.has(asset)) {
+      temp.delete(asset);
+    } else {
+      temp.add(asset);
+    }
+
+    selectedAssets = temp;
+    dispatch('select', { asset, selectedAssets });
+  };
+</script>
+
+{#if assets.length > 0}
+  <div class="flex flex-wrap gap-1 w-full pb-20" bind:clientWidth={viewWidth}>
+    {#each assets as asset (asset.id)}
+      <div animate:flip={{ duration: 500 }}>
+        <Thumbnail
+          {asset}
+          {thumbnailSize}
+          format={assets.length < 7 ? ThumbnailFormat.Jpeg : ThumbnailFormat.Webp}
+          on:click={selectAssetHandler}
+          selected={selectedAssets.has(asset)}
+        />
+      </div>
+    {/each}
+  </div>
+{/if}

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

@@ -10,6 +10,7 @@
   import AssetViewer from '../../asset-viewer/asset-viewer.svelte';
   import { flip } from 'svelte/animate';
   import { archivedAsset } from '$lib/stores/archived-asset.store';
+  import { getThumbnailSize } from '$lib/utils/thumbnail-util';
 
   export let assets: AssetResponseDto[];
   export let sharedLink: SharedLinkResponseDto | undefined = undefined;
@@ -24,22 +25,10 @@
   let currentViewAssetIndex = 0;
 
   let viewWidth: number;
-  let thumbnailSize = 300;
+  $: thumbnailSize = getThumbnailSize(assets.length, viewWidth);
 
   $: isMultiSelectionMode = selectedAssets.size > 0;
 
-  $: {
-    if (assets.length < 6) {
-      thumbnailSize = Math.min(320, Math.floor(viewWidth / assets.length - assets.length));
-    } else {
-      if (viewWidth > 600) thumbnailSize = Math.floor(viewWidth / 7 - 7);
-      else if (viewWidth > 400) thumbnailSize = Math.floor(viewWidth / 4 - 6);
-      else if (viewWidth > 300) thumbnailSize = Math.floor(viewWidth / 2 - 6);
-      else if (viewWidth > 200) thumbnailSize = Math.floor(viewWidth / 2 - 6);
-      else if (viewWidth > 100) thumbnailSize = Math.floor(viewWidth / 1 - 6);
-    }
-  }
-
   const viewAssetHandler = (event: CustomEvent) => {
     const { asset }: { asset: AssetResponseDto } = event.detail;