fix: use face thumbnail and not person face thumbnail when un-assigning face

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -16,7 +16,6 @@
   import { photoViewer } from '$lib/stores/assets.store';
   import UnassignedFacesSidePannel from './unassigned-faces-side-pannel.svelte';
   import type { FaceWithGeneretedThumbnail } from '$lib/utils/people-utils';
-  import { cloneDeep } from 'lodash-es';
 
   export let assetId: string;
 
@@ -29,10 +28,9 @@
   let selectedPersonToReassign: (PersonResponseDto | null)[];
   let selectedPersonToCreate: (string | null)[];
   let selectedPersonToAdd: FaceWithGeneretedThumbnail[] = [];
-  let selectedPersonToUnassign: AssetFaceResponseDto[] = [];
+  let selectedPersonToUnassign: FaceWithGeneretedThumbnail[] = [];
   let selectedPersonToRemove: boolean[] = [];
   let unassignedFaces: (FaceWithGeneretedThumbnail | null)[] = [];
-  let unassignedFacesOriginal: (FaceWithGeneretedThumbnail | null)[] = [];
   let editedPersonIndex: number;
   let shouldRefresh: boolean = false;
 
@@ -94,7 +92,6 @@
           }
         }),
       );
-      unassignedFacesOriginal = cloneDeep(unassignedFaces);
     } catch (error) {
       handleError(error, "Can't get faces");
     } finally {
@@ -163,7 +160,8 @@
         if (selectedPersonToRemove[i]) {
           const image = await zoomImageToBase64(peopleWithFaces[i], $photoViewer);
           if (image) {
-            selectedPersonToUnassign.push(peopleWithFaces[i]);
+            selectedPersonToUnassign.push({ ...peopleWithFaces[i], customThumbnail: image });
+            // Trigger reactivity
             selectedPersonToUnassign = selectedPersonToUnassign;
             if (selectedPersonToReassign[i]) {
               selectedPersonToReassign[i] = null;
@@ -183,8 +181,6 @@
 
   const handleEditFaces = async () => {
     loaderLoadingDoneTimeout = setTimeout(() => (isShowLoadingDone = true), 100);
-    const uniqueIds = new Set(unassignedFacesOriginal.map((objA) => objA && objA.id));
-    selectedPersonToUnassign = selectedPersonToUnassign.filter((objB) => !uniqueIds.has(objB.id));
 
     const numberOfChanges =
       selectedPersonToCreate.filter((person) => person !== null).length +
@@ -267,8 +263,6 @@
 
   const handleCreateOrReassignFaceFromUnassignedFace = (face: FaceWithGeneretedThumbnail) => {
     selectedPersonToAdd.push(face);
-    const uniqueIds = new Set(selectedPersonToAdd.map((objA) => objA.id));
-    selectedPersonToUnassign = selectedPersonToUnassign.filter((objB) => !uniqueIds.has(objB.id));
     selectedPersonToAdd = selectedPersonToAdd;
     showUnassignedFaces = false;
   };
@@ -336,7 +330,7 @@
   </div>
 
   <div class="px-4 py-4 text-sm">
-    <div class="flex items-center justify-between gap-2">
+    <div class="flex items-center justify-between gap-2 h-10">
       {#if peopleWithFaces.every((item) => item.person === null)}
         <div class="flex items-center justify-center w-full">
           <div class="grid place-items-center">
@@ -357,7 +351,7 @@
         </button>
       {/if}
     </div>
-    <div class="mt-4 flex flex-wrap gap-2">
+    <div class="mt-2 flex flex-wrap gap-2">
       {#if isShowLoadingPeople}
         <div class="flex w-full justify-center">
           <LoadingSpinner />
@@ -440,7 +434,8 @@
       {/if}
     </div>
     {#if selectedPersonToAdd.length > 0}
-      Faces to add
+      <div class="mt-2">
+        <p>Faces to add</p>
         <div class="mt-4 flex flex-wrap gap-2">
           {#each selectedPersonToAdd as face, index}
             {#if face}
@@ -485,9 +480,11 @@
             {/if}
           {/each}
         </div>
+      </div>
     {/if}
     {#if selectedPersonToUnassign.length > 0}
-      Faces to unassign
+      <div class="mt-2">
+        <p>Faces to unassign</p>
         <div class="mt-4 flex flex-wrap gap-2">
           {#each selectedPersonToUnassign as face, index}
             {#if face && face.person}
@@ -504,7 +501,7 @@
                     <ImageThumbnail
                       curve
                       shadow
-                    url={api.getPeopleThumbnailUrl(face.person.id)}
+                      url={face.customThumbnail}
                       altText={'New person'}
                       title={'New person'}
                       widthStyle="90px"
@@ -530,6 +527,7 @@
             {/if}
           {/each}
         </div>
+      </div>
     {/if}
   </div>
 </section>

web/src/lib/components/faces-page/unassigned-faces-side-pannel.svelte

@@ -67,7 +67,7 @@
           <Icon path={mdiArrowLeftThin} size="24" />
         </div>
       </button>
-      <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Faces Available</p>
+      <p class="flex text-lg text-immich-fg dark:text-immich-dark-fg">Faces available</p>
     </div>
   </div>
   {#if unassignedFaces.some((face) => face)}