feat(web): search names when merging faces (#5209)

* feat: search names when merging faces

* fix: reactive

* styling

* small stlying

* remove unused variable

* fix: reactive

* feat: reset

---------

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

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

@@ -12,15 +12,21 @@
   import { handleError } from '$lib/utils/handle-error';
   import { goto } from '$app/navigation';
   import { AppRoute } from '$lib/constants';
-  import { mdiCallMerge, mdiMerge, mdiSwapHorizontal } from '@mdi/js';
+  import { mdiCallMerge, mdiClose, mdiMagnify, 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';
 
   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;
@@ -31,12 +37,49 @@
   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 = peopleCopy
+          .filter((person: PersonResponseDto) => {
+            const nameParts = person.name.split(' ');
+            return nameParts.some((splitName) => splitName.toLowerCase().startsWith(name.toLowerCase()));
+          })
+          .slice(0, 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];
     goto(`${AppRoute.PEOPLE}/${person.id}?action=merge`);
@@ -136,9 +179,39 @@
           <FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
         </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 p-10 dark:bg-immich-dark-gray"
-        style:max-height={screenHeight - 200 - 200 + 'px'}
+        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)}