feat(web): re-assign person faces (2) (#4949)

* feat: unassign person faces

* multiple improvements

* chore: regenerate api

* feat: improve face interactions in photos

* fix: tests

* fix: tests

* optimize

* fix: wrong assignment on complex-multiple re-assignments

* fix: thumbnails with large photos

* fix: complex reassign

* fix: don't send people with faces

* fix: person thumbnail generation

* chore: regenerate api

* add tess

* feat: face box even when zoomed

* fix: change feature photo

* feat: make the blue icon hoverable

* chore: regenerate api

* feat: use websocket

* fix: loading spinner when clicking on the done button

* fix: use the svelte way

* fix: tests

* simplify

* fix: unused vars

* fix: remove unused code

* fix: add migration

* chore: regenerate api

* ci: add unit tests

* chore: regenerate api

* feat: if a new person is created for a face and the server takes more than 15 seconds to generate the person thumbnail, don't wait for it

* reorganize

* chore: regenerate api

* feat: global edit

* pr feedback

* pr feedback

* simplify

* revert test

* fix: face generation

* fix: tests

* fix: face generation

* fix merge

* feat: search names in unmerge face selector modal

* fix: merge face selector

* simplify feature photo generation

* fix: change endpoint

* pr feedback

* chore: fix merge

* chore: fix merge

* fix: tests

* fix: edit & hide buttons

* fix: tests

* feat: show if person is hidden

* feat: rename face to person

* feat: split in new panel

* copy-paste-error

* pr feedback

* fix: feature photo

* do not leak faces

* fix: unmerge modal

* fix: merge modal event

* feat(server): remove duplicates

* fix: title for image thumbnails

* fix: disable side panel when there's no face until next PR

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

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

@@ -12,23 +12,18 @@
   import { handleError } from '$lib/utils/handle-error';
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
-  import { mdiCallMerge, mdiClose, mdiMagnify, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
+  import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
   import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
-  import { cloneDeep } from 'lodash-es';
-  import LoadingSpinner from '../shared-components/loading-spinner.svelte';
-  import { searchNameLocal } from '$lib/utils/person';
+  import PeopleList from './people-list.svelte';
   import { page } from '$app/stores';
 
   export let person: PersonResponseDto;
   let people: PersonResponseDto[] = [];
-  let peopleCopy: PersonResponseDto[] = [];
   let selectedPeople: PersonResponseDto[] = [];
   let screenHeight: number;
   let isShowConfirmation = false;
-  let name = '';
-  let searchWord: string;
-  let isSearchingPeople = false;
+
   let dispatch = createEventDispatcher();
 
   $: hasSelection = selectedPeople.length > 0;
@@ -39,44 +34,12 @@
   onMount(async () => {
     const { data } = await api.personApi.getAllPeople({ withHidden: false });
     people = data.people;
-    peopleCopy = cloneDeep(people);
   });
 
   const onClose = () => {
     dispatch('go-back');
   };
 
-  const resetSearch = () => {
-    name = '';
-    people = peopleCopy;
-  };
-
-  const searchPeople = async (force: boolean) => {
-    if (name === '') {
-      people = peopleCopy;
-      return;
-    }
-    if (!force) {
-      if (people.length < 20 && name.startsWith(searchWord)) {
-        people = searchNameLocal(name, peopleCopy, 10);
-        return;
-      }
-    }
-
-    const timeout = setTimeout(() => (isSearchingPeople = true), 100);
-    try {
-      const { data } = await api.searchApi.searchPerson({ name });
-      people = data;
-      searchWord = name;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isSearchingPeople = false;
-  };
-
   const handleSwapPeople = () => {
     [person, selectedPeople[0]] = [selectedPeople[0], person];
     $page.url.searchParams.set('action', 'merge');
@@ -113,7 +76,7 @@
       });
       dispatch('merge');
     } catch (error) {
-      handleError(error, 'Cannot merge faces');
+      handleError(error, 'Cannot merge people');
     } finally {
       isShowConfirmation = false;
     }
@@ -131,7 +94,7 @@
       {#if hasSelection}
         Selected {selectedPeople.length}
       {:else}
-        Merge faces
+        Merge people
       {/if}
       <div />
     </svelte:fragment>
@@ -151,7 +114,7 @@
   <section class="bg-immich-bg px-[70px] pt-[100px] dark:bg-immich-dark-bg">
     <section id="merge-face-selector relative">
       <div class="mb-10 h-[200px] place-content-center place-items-center">
-        <p class="mb-4 text-center uppercase dark:text-white">Choose matching faces to merge</p>
+        <p class="mb-4 text-center uppercase dark:text-white">Choose matching people to merge</p>
 
         <div class="grid grid-flow-col-dense place-content-center place-items-center gap-4">
           {#each selectedPeople as person (person.id)}
@@ -178,57 +141,25 @@
         </div>
       </div>
 
-      <div
-        class="flex w-40 sm:w-48 md:w-96 h-14 rounded-lg bg-gray-100 p-2 dark:bg-gray-700 mb-8 gap-2 place-items-center"
-      >
-        <button on:click={() => searchPeople(true)}>
-          <div class="w-fit">
-            <Icon path={mdiMagnify} size="24" />
-          </div>
-        </button>
-        <!-- svelte-ignore a11y-autofocus -->
-        <input
-          autofocus
-          class="w-full gap-2 bg-gray-100 dark:bg-gray-700 dark:text-white"
-          type="text"
-          placeholder="Search names"
-          bind:value={name}
-          on:input={() => searchPeople(false)}
-        />
-        {#if name}
-          <button on:click={resetSearch}>
-            <Icon path={mdiClose} />
-          </button>
-        {/if}
-        {#if isSearchingPeople}
-          <div class="flex place-items-center">
-            <LoadingSpinner />
-          </div>
-        {/if}
-      </div>
-
-      <div
-        class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 pt-8 px-8 pb-10 dark:bg-immich-dark-gray"
-        style:max-height={screenHeight - 250 - 250 + 'px'}
-      >
-        <div class="grid-col-2 grid gap-8 md:grid-cols-3 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10">
-          {#each unselectedPeople as person (person.id)}
-            <FaceThumbnail {person} on:click={() => onSelect(person)} circle border selectable />
-          {/each}
-        </div>
-      </div>
+      <PeopleList
+        people={unselectedPeople}
+        peopleCopy={unselectedPeople}
+        unselectedPeople={selectedPeople}
+        {screenHeight}
+        on:select={({ detail }) => onSelect(detail)}
+      />
     </section>
 
     {#if isShowConfirmation}
       <ConfirmDialogue
-        title="Merge faces"
+        title="Merge people"
         confirmText="Merge"
         on:confirm={handleMerge}
         on:cancel={() => (isShowConfirmation = false)}
       >
         <svelte:fragment slot="prompt">
-          <p>Are you sure you want merge these faces? <br />This action is <strong>irreversible</strong>.</p>
-        </svelte:fragment>
+          <p>Are you sure you want merge these people ?</p></svelte:fragment
+        >
       </ConfirmDialogue>
     {/if}
   </section>