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/routes/(user)/people/+page.svelte

@@ -79,7 +79,7 @@
     // trigger reactivity
     people = people;
 
-    // Reset variables used on the "Show & hide faces"   modal
+    // Reset variables used on the "Show & hide people"   modal
     showLoadingSpinner = false;
     selectHidden = false;
     toggleVisibility = false;
@@ -145,13 +145,13 @@
         `Unable to change the visibility for ${changed.length} ${changed.length <= 1 ? 'person' : 'people'}`,
       );
     }
-    // Reset variables used on the "Show & hide faces" modal
+    // Reset variables used on the "Show & hide people" modal
     showLoadingSpinner = false;
     selectHidden = false;
     toggleVisibility = false;
   };
 
-  const handleMergeSameFace = async (response: [PersonResponseDto, PersonResponseDto]) => {
+  const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
     const [personToMerge, personToBeMergedIn] = response;
     showMergeModal = false;
 
@@ -167,7 +167,7 @@
       people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
 
       notificationController.show({
-        message: 'Merge faces succesfully',
+        message: 'Merge people succesfully',
         type: NotificationType.Info,
       });
     } catch (error) {
@@ -213,7 +213,7 @@
     edittingPerson = detail;
   };
 
-  const handleHideFace = async (detail: PersonResponseDto) => {
+  const handleHidePerson = async (detail: PersonResponseDto) => {
     try {
       const { data: updatedPerson } = await api.personApi.updatePerson({
         id: detail.id,
@@ -244,7 +244,7 @@
     }
   };
 
-  const handleMergeFaces = (detail: PersonResponseDto) => {
+  const handleMergePeople = (detail: PersonResponseDto) => {
     goto(`${AppRoute.PEOPLE}/${detail.id}?action=merge&previousRoute=${AppRoute.PEOPLE}`);
   };
 
@@ -352,7 +352,7 @@
       {potentialMergePeople}
       on:close={() => (showMergeModal = false)}
       on:reject={() => changeName()}
-      on:confirm={(event) => handleMergeSameFace(event.detail)}
+      on:confirm={(event) => handleMergeSamePerson(event.detail)}
     />
   </FullScreenModal>
 {/if}
@@ -363,7 +363,7 @@
       <IconButton on:click={() => (selectHidden = !selectHidden)}>
         <div class="flex flex-wrap place-items-center justify-center gap-x-1 text-sm">
           <Icon path={mdiEyeOutline} size="18" />
-          <p class="ml-2">Show & hide faces</p>
+          <p class="ml-2">Show & hide people</p>
         </div>
       </IconButton>
     {/if}
@@ -379,8 +379,8 @@
               preload={idx < 20}
               on:change-name={() => handleChangeName(person)}
               on:set-birth-date={() => handleSetBirthDate(person)}
-              on:merge-faces={() => handleMergeFaces(person)}
-              on:hide-face={() => handleHideFace(person)}
+              on:merge-people={() => handleMergePeople(person)}
+              on:hide-person={() => handleHidePerson(person)}
             />
           {/if}
         {/each}