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/[personId]/+page.svelte

@@ -4,6 +4,7 @@
   import ImageThumbnail from '$lib/components/assets/thumbnail/image-thumbnail.svelte';
   import EditNameInput from '$lib/components/faces-page/edit-name-input.svelte';
   import MergeFaceSelector from '$lib/components/faces-page/merge-face-selector.svelte';
+  import UnMergeFaceSelector from '$lib/components/faces-page/unmerge-face-selector.svelte';
   import MergeSuggestionModal from '$lib/components/faces-page/merge-suggestion-modal.svelte';
   import SetBirthDateModal from '$lib/components/faces-page/set-birth-date-modal.svelte';
   import AddToAlbum from '$lib/components/photos-page/actions/add-to-album.svelte';
@@ -46,10 +47,11 @@
 
   enum ViewMode {
     VIEW_ASSETS = 'view-assets',
-    SELECT_FACE = 'select-face',
-    MERGE_FACES = 'merge-faces',
+    SELECT_PERSON = 'select-person',
+    MERGE_PEOPLE = 'merge-people',
     SUGGEST_MERGE = 'suggest-merge',
     BIRTH_DATE = 'birth-date',
+    UNASSIGN_ASSETS = 'unassign-faces',
   }
 
   let assetStore = new AssetStore({
@@ -124,7 +126,7 @@
       previousRoute = getPreviousRoute;
     }
     if (action == 'merge') {
-      viewMode = ViewMode.MERGE_FACES;
+      viewMode = ViewMode.MERGE_PEOPLE;
     }
   });
   const handleEscape = () => {
@@ -155,7 +157,17 @@
     }
   });
 
-  const toggleHideFace = async () => {
+  const handleUnmerge = () => {
+    $assetStore.removeAssets(Array.from($selectedAssets).map((a) => a.id));
+    assetInteractionStore.clearMultiselect();
+    viewMode = ViewMode.VIEW_ASSETS;
+  };
+
+  const handleReassignAssets = () => {
+    viewMode = ViewMode.UNASSIGN_ASSETS;
+  };
+
+  const toggleHidePerson = async () => {
     try {
       await api.personApi.updatePerson({
         id: data.person.id,
@@ -179,7 +191,7 @@
   };
 
   const handleSelectFeaturePhoto = async (asset: AssetResponseDto) => {
-    if (viewMode !== ViewMode.SELECT_FACE) {
+    if (viewMode !== ViewMode.SELECT_PERSON) {
       return;
     }
 
@@ -202,7 +214,7 @@
     }
   };
 
-  const handleMergeSameFace = async (response: [PersonResponseDto, PersonResponseDto]) => {
+  const handleMergeSamePerson = async (response: [PersonResponseDto, PersonResponseDto]) => {
     const [personToMerge, personToBeMergedIn] = response;
     viewMode = ViewMode.VIEW_ASSETS;
     isEditingName = false;
@@ -212,7 +224,7 @@
         mergePersonDto: { ids: [personToMerge.id] },
       });
       notificationController.show({
-        message: 'Merge faces succesfully',
+        message: 'Merge people succesfully',
         type: NotificationType.Info,
       });
       people = people.filter((person: PersonResponseDto) => person.id !== personToMerge.id);
@@ -333,6 +345,15 @@
   };
 </script>
 
+{#if viewMode === ViewMode.UNASSIGN_ASSETS}
+  <UnMergeFaceSelector
+    assetIds={Array.from($selectedAssets).map((a) => a.id)}
+    personAssets={data.person}
+    on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
+    on:confirm={handleUnmerge}
+  />
+{/if}
+
 {#if viewMode === ViewMode.SUGGEST_MERGE}
   <MergeSuggestionModal
     {personMerge1}
@@ -340,7 +361,7 @@
     {potentialMergePeople}
     on:close={() => (viewMode = ViewMode.VIEW_ASSETS)}
     on:reject={() => changeName()}
-    on:confirm={(event) => handleMergeSameFace(event.detail)}
+    on:confirm={(event) => handleMergeSamePerson(event.detail)}
   />
 {/if}
 
@@ -352,7 +373,7 @@
   />
 {/if}
 
-{#if viewMode === ViewMode.MERGE_FACES}
+{#if viewMode === ViewMode.MERGE_PEOPLE}
   <MergeFaceSelector person={data.person} on:go-back={handleGoBack} on:merge={handleMerge} />
 {/if}
 
@@ -370,6 +391,7 @@
         <DownloadAction menuItem filename="{data.person.name || 'immich'}.zip" />
         <FavoriteAction menuItem removeFavorite={isAllFavorite} />
         <ArchiveAction menuItem unarchive={isAllArchive} onArchive={(ids) => $assetStore.removeAssets(ids)} />
+        <MenuOption text="Fix incorrect match" on:click={handleReassignAssets} />
         <ChangeDate menuItem />
         <ChangeLocation menuItem />
       </AssetSelectContextMenu>
@@ -379,16 +401,19 @@
       <ControlAppBar showBackButton backIcon={mdiArrowLeft} on:close-button-click={() => goto(previousRoute)}>
         <svelte:fragment slot="trailing">
           <AssetSelectContextMenu icon={mdiDotsVertical} title="Menu">
-            <MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_FACE)} />
+            <MenuOption text="Change feature photo" on:click={() => (viewMode = ViewMode.SELECT_PERSON)} />
             <MenuOption text="Set date of birth" on:click={() => (viewMode = ViewMode.BIRTH_DATE)} />
-            <MenuOption text="Merge face" on:click={() => (viewMode = ViewMode.MERGE_FACES)} />
-            <MenuOption text={data.person.isHidden ? 'Unhide face' : 'Hide face'} on:click={() => toggleHideFace()} />
+            <MenuOption text="Merge person" on:click={() => (viewMode = ViewMode.MERGE_PEOPLE)} />
+            <MenuOption
+              text={data.person.isHidden ? 'Unhide person' : 'Hide person'}
+              on:click={() => toggleHidePerson()}
+            />
           </AssetSelectContextMenu>
         </svelte:fragment>
       </ControlAppBar>
     {/if}
 
-    {#if viewMode === ViewMode.SELECT_FACE}
+    {#if viewMode === ViewMode.SELECT_PERSON}
       <ControlAppBar on:close-button-click={() => (viewMode = ViewMode.VIEW_ASSETS)}>
         <svelte:fragment slot="leading">Select feature photo</svelte:fragment>
       </ControlAppBar>
@@ -401,13 +426,13 @@
     <AssetGrid
       {assetStore}
       {assetInteractionStore}
-      isSelectionMode={viewMode === ViewMode.SELECT_FACE}
-      singleSelect={viewMode === ViewMode.SELECT_FACE}
+      isSelectionMode={viewMode === ViewMode.SELECT_PERSON}
+      singleSelect={viewMode === ViewMode.SELECT_PERSON}
       on:select={({ detail: asset }) => handleSelectFeaturePhoto(asset)}
       on:escape={handleEscape}
     >
       {#if viewMode === ViewMode.VIEW_ASSETS || viewMode === ViewMode.SUGGEST_MERGE || viewMode === ViewMode.BIRTH_DATE}
-        <!-- Face information block -->
+        <!-- Person information block -->
         <div
           role="button"
           class="relative w-fit p-4 sm:px-6"