refactor(web): search people (#9082)

* refactor: search people

* fix: test

* fix: timeout

* fix: callbacks

* fix: simplify

* remove unused var

* refactor: rename file

* fix: focus when deleting last character

---------

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

web/src/lib/components/faces-page/people-list.svelte

@@ -1,11 +1,8 @@
 <script lang="ts">
-  import { maximumLengthSearchPeople, timeBeforeShowLoadingSpinner } from '$lib/constants';
-  import { handleError } from '$lib/utils/handle-error';
-  import { searchNameLocal } from '$lib/utils/person';
-  import { searchPerson, type PersonResponseDto } from '@immich/sdk';
+  import { type PersonResponseDto } from '@immich/sdk';
   import { createEventDispatcher } from 'svelte';
   import FaceThumbnail from './face-thumbnail.svelte';
-  import SearchBar from '../elements/search-bar.svelte';
+  import SearchPeople from '$lib/components/faces-page/people-search.svelte';
 
   export let screenHeight: number;
   export let people: PersonResponseDto[];
@@ -13,54 +10,26 @@
   export let unselectedPeople: PersonResponseDto[];
 
   let name = '';
-  let searchWord: string;
-  let isSearchingPeople = false;
+  let showPeople: PersonResponseDto[];
 
   let dispatch = createEventDispatcher<{
     select: PersonResponseDto;
   }>();
 
   $: {
-    people = peopleCopy.filter(
+    showPeople = people.filter(
       (person) => !unselectedPeople.some((unselectedPerson) => unselectedPerson.id === person.id),
     );
-    if (name) {
-      people = searchNameLocal(name, people, maximumLengthSearchPeople);
-    }
   }
-
-  const searchPeople = async (force: boolean) => {
-    if (name === '') {
-      people = peopleCopy;
-      return;
-    }
-    if (!force && people.length < maximumLengthSearchPeople && name.startsWith(searchWord)) {
-      return;
-    }
-
-    const timeout = setTimeout(() => (isSearchingPeople = true), timeBeforeShowLoadingSpinner);
-    try {
-      people = await searchPerson({ name });
-      searchWord = name;
-    } catch (error) {
-      handleError(error, "Can't search people");
-    } finally {
-      clearTimeout(timeout);
-    }
-
-    isSearchingPeople = false;
-  };
 </script>
 
 <div class=" w-40 sm:w-48 md:w-96 h-14 mb-8">
-  <SearchBar
-    bind:name
-    isSearching={isSearchingPeople}
+  <SearchPeople
+    type="searchBar"
     placeholder="Search people"
-    on:reset={() => {
-      people = peopleCopy;
-    }}
-    on:search={({ detail }) => searchPeople(detail.force ?? false)}
+    bind:searchName={name}
+    bind:searchedPeopleLocal={people}
+    onReset={() => (people = peopleCopy)}
   />
 </div>
 
@@ -69,7 +38,7 @@
   style:max-height={screenHeight - 400 + '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 people as person (person.id)}
+    {#each showPeople as person (person.id)}
       <FaceThumbnail
         {person}
         on:click={() => {