fix: suggest people (#4566)

* fix: suggest people

* feat: remove hidden people

* add hidden people when merging faces

* pr feedback

* fix: don't use reactive statement

* fixed section height

* improve merging

* fix: migration

* fix migration

* feat: add asset count

* fix: test

* rename endpoint

* add server test

* improve responsive design

* fix: remove videos from live photos in the asset count

* pr feedback

* fix: rename asset count endpoint

* fix: return firstname and lastname

* fix: reset people only on error

* fix: search

* fix: responsive design & div flickering

* fix: cleanup

* chore: open api

---------

Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>

web/src/routes/(user)/people/[personId]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { afterNavigate, goto, invalidateAll } from '$app/navigation';
+  import { afterNavigate, goto } from '$app/navigation';
   import { page } from '$app/stores';
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
@@ -35,11 +35,11 @@
   import type { PageData } from './$types';
   import { clickOutside } from '$lib/utils/click-outside';
   import { assetViewingStore } from '$lib/stores/asset-viewing.store';
-  import { browser } from '$app/environment';
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
 
   export let data: PageData;
 
+  let numberOfAssets = data.statistics.assets;
   let { isViewing: showAssetViewer } = assetViewingStore;
 
   enum ViewMode {
@@ -63,7 +63,7 @@
   let isEditingName = false;
   let previousRoute: string = AppRoute.EXPLORE;
   let previousPersonId: string = data.person.id;
-  let people: PersonResponseDto[];
+  let people: PersonResponseDto[] = [];
   let personMerge1: PersonResponseDto;
   let personMerge2: PersonResponseDto;
   let potentialMergePeople: PersonResponseDto[] = [];
@@ -84,34 +84,27 @@
    * or if the new search word starts with another word / letter
    **/
   let searchWord: string;
-  let maxPeople = false;
   let isSearchingPeople = false;
 
   const searchPeople = async () => {
-    isSearchingPeople = true;
-    people = [];
+    if ((people.length < 20 && name.startsWith(searchWord)) || name === '') {
+      return;
+    }
+    const timeout = setTimeout(() => (isSearchingPeople = true), 300);
     try {
       const { data } = await api.searchApi.searchPerson({ name });
       people = data;
       searchWord = name;
-      if (data.length < 20) {
-        maxPeople = false;
-      } else {
-        maxPeople = true;
-      }
     } catch (error) {
+      people = [];
       handleError(error, "Can't search people");
+    } finally {
+      clearTimeout(timeout);
     }
 
     isSearchingPeople = false;
   };
 
-  $: {
-    if (name !== '' && browser) {
-      if (maxPeople === true || (!name.startsWith(searchWord) && maxPeople === false)) searchPeople();
-    }
-  }
-
   $: isAllArchive = Array.from($selectedAssets).every((asset) => asset.isArchived);
   $: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
   $: $onPersonThumbnail === data.person.id &&
@@ -122,10 +115,13 @@
       suggestedPeople = !name
         ? []
         : people
-            .filter(
-              (person: PersonResponseDto) =>
-                person.name.toLowerCase().startsWith(name.toLowerCase()) && person.id !== data.person.id,
-            )
+            .filter((person: PersonResponseDto) => {
+              const nameParts = person.name.split(' ');
+              return (
+                nameParts.some((splitName) => splitName.toLowerCase().startsWith(name.toLowerCase())) &&
+                person.id !== data.person.id
+              );
+            })
             .slice(0, 5);
     }
   }
@@ -204,6 +200,17 @@
     viewMode = ViewMode.VIEW_ASSETS;
   };
 
+  const updateAssetCount = async () => {
+    try {
+      const { data: statistics } = await api.personApi.getPersonStatistics({
+        id: data.person.id,
+      });
+      numberOfAssets = statistics.assets;
+    } catch (error) {
+      handleError(error, "Can't update the asset count");
+    }
+  };
+
   const handleMergeSameFace = async (response: [PersonResponseDto, PersonResponseDto]) => {
     const [personToMerge, personToBeMergedIn] = response;
     viewMode = ViewMode.VIEW_ASSETS;
@@ -219,8 +226,8 @@
       });
       people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
       if (personToBeMergedIn.name != personName && data.person.id === personToBeMergedIn.id) {
-        changeName();
-        invalidateAll();
+        await updateAssetCount();
+        refreshAssetGrid = !refreshAssetGrid;
         return;
       }
       goto(`${AppRoute.PEOPLE}/${personToBeMergedIn.id}`, { replaceState: true });
@@ -232,6 +239,7 @@
   const handleSuggestPeople = (person: PersonResponseDto) => {
     isEditingName = false;
     potentialMergePeople = [];
+    personName = person.name;
     personMerge1 = data.person;
     personMerge2 = person;
     viewMode = ViewMode.SUGGEST_MERGE;
@@ -266,6 +274,7 @@
   };
 
   const handleNameChange = async (name: string) => {
+    isEditingName = false;
     potentialMergePeople = [];
     personName = name;
 
@@ -277,7 +286,7 @@
       return;
     }
 
-    const result = await api.searchApi.searchPerson({ name: personName });
+    const result = await api.searchApi.searchPerson({ name: personName, withHidden: true });
 
     const existingPerson = result.data.find(
       (person: PersonResponseDto) =>
@@ -413,42 +422,49 @@
           on:outclick={handleCancelEditName}
           on:escape={handleCancelEditName}
         >
-          <section class="flex w-96 place-items-center border-black">
+          <section class="flex w-64 sm:w-96 place-items-center border-black">
             {#if isEditingName}
               <EditNameInput
                 person={data.person}
                 suggestedPeople={suggestedPeople.length > 0 || isSearchingPeople}
                 bind:name
                 on:change={(event) => handleNameChange(event.detail)}
+                on:input={searchPeople}
               />
             {:else}
-              <button on:click={() => (viewMode = ViewMode.VIEW_ASSETS)}>
-                <ImageThumbnail
-                  circle
-                  shadow
-                  url={thumbnailData}
-                  altText={data.person.name}
-                  widthStyle="3.375rem"
-                  heightStyle="3.375rem"
-                />
-              </button>
-
-              <button
-                title="Edit name"
-                class="px-4 text-immich-primary dark:text-immich-dark-primary"
-                on:click={() => (isEditingName = true)}
-              >
-                {#if data.person.name}
-                  <p class="py-2 font-medium">{data.person.name}</p>
-                {:else}
-                  <p class="w-fit font-medium">Add a name</p>
-                  <p class="text-sm text-gray-500 dark:text-immich-gray">Find them fast by name with search</p>
-                {/if}
-              </button>
+              <div class="relative">
+                <button
+                  class="flex items-center justify-center"
+                  title="Edit name"
+                  on:click={() => (isEditingName = true)}
+                >
+                  <ImageThumbnail
+                    circle
+                    shadow
+                    url={thumbnailData}
+                    altText={data.person.name}
+                    widthStyle="3.375rem"
+                    heightStyle="3.375rem"
+                  />
+                  <div
+                    class="flex flex-col justify-center text-left px-4 h-14 text-immich-primary dark:text-immich-dark-primary"
+                  >
+                    {#if data.person.name}
+                      <p class="w-40 sm:w-72 font-medium truncate">{data.person.name}</p>
+                      <p class="absolute w-fit text-sm text-gray-500 dark:text-immich-gray bottom-0">
+                        {`${numberOfAssets} asset${numberOfAssets > 1 ? 's' : ''}`}
+                      </p>
+                    {:else}
+                      <p class="font-medium">Add a name</p>
+                      <p class="text-sm text-gray-500 dark:text-immich-gray">Find them fast by name with search</p>
+                    {/if}
+                  </div>
+                </button>
+              </div>
             {/if}
           </section>
           {#if isEditingName}
-            <div class="absolute z-[999] w-96">
+            <div class="absolute z-[999] w-64 sm:w-96">
               {#if isSearchingPeople}
                 <div
                   class="flex rounded-b-lg dark:border-immich-dark-gray place-items-center bg-gray-100 p-2 dark:bg-gray-700"
@@ -460,9 +476,8 @@
               {:else}
                 {#each suggestedPeople as person, index (person.id)}
                   <div
-                    class="flex {index === suggestedPeople.length - 1
-                      ? 'rounded-b-lg'
-                      : 'border-b dark:border-immich-dark-gray'} place-items-center bg-gray-100 p-2 dark:bg-gray-700"
+                    class="flex border-t dark:border-immich-dark-gray place-items-center bg-gray-100 p-2 dark:bg-gray-700 {index ===
+                      suggestedPeople.length - 1 && 'rounded-b-lg'}"
                   >
                     <button class="flex w-full place-items-center" on:click={() => handleSuggestPeople(person)}>
                       <ImageThumbnail