fix(web): merge faces (#4383)

* fix(web): merge faces

* pr feedback

web/src/lib/components/faces-page/merge-face-selector.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { createEventDispatcher } from 'svelte';
   import { api, type PersonResponseDto } from '@api';
   import FaceThumbnail from './face-thumbnail.svelte';
   import { quintOut } from 'svelte/easing';
@@ -17,7 +17,7 @@
   import SwapHorizontal from 'svelte-material-icons/SwapHorizontal.svelte';
 
   export let person: PersonResponseDto;
-  let people: PersonResponseDto[] = [];
+  export let people: PersonResponseDto[];
   let selectedPeople: PersonResponseDto[] = [];
   let screenHeight: number;
   let isShowConfirmation = false;
@@ -27,10 +27,6 @@
   $: unselectedPeople = people.filter(
     (source) => !selectedPeople.some((selected) => selected.id === source.id) && source.id !== person.id,
   );
-  onMount(async () => {
-    const { data } = await api.personApi.getAllPeople({ withHidden: false });
-    people = data.people;
-  });
 
   const onClose = () => {
     dispatch('go-back');
@@ -69,8 +65,9 @@
         message: `Merged ${count} ${count === 1 ? 'person' : 'people'}`,
         type: NotificationType.Info,
       });
+      people = people.filter((person) => !results.some((result) => result.id === person.id && result.success === true));
       await invalidateAll();
-      onClose();
+      dispatch('merge');
     } catch (error) {
       handleError(error, 'Cannot merge faces');
     } finally {

web/src/lib/stores/assets.store.ts

@@ -87,7 +87,6 @@ export class AssetStore {
       }),
 
       websocketStore.onAssetTrash.subscribe((ids) => {
-        console.log('onAssetTrash', ids);
         if (ids) {
           for (const id of ids) {
             this.pendingChanges.push({ type: 'trash', value: id });

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

@@ -66,8 +66,10 @@
   let personMerge2: PersonResponseDto;
   let potentialMergePeople: PersonResponseDto[] = [];
 
+  let refreshAssetGrid = false;
+
   let personName = '';
-  let thumbnailData = api.getPeopleThumbnailUrl(data.person.id);
+  $: thumbnailData = api.getPeopleThumbnailUrl(data.person.id);
 
   let name: string = data.person.name;
   let suggestedPeople: PersonResponseDto[] = [];
@@ -118,6 +120,7 @@
         personId: data.person.id,
       });
       previousPersonId = data.person.id;
+      refreshAssetGrid = !refreshAssetGrid;
     }
   });
 
@@ -139,6 +142,11 @@
     }
   };
 
+  const handleMerge = () => {
+    handleGoBack();
+    refreshAssetGrid = !refreshAssetGrid;
+  };
+
   const handleSelectFeaturePhoto = async (asset: AssetResponseDto) => {
     if (viewMode !== ViewMode.SELECT_FACE) {
       return;
@@ -302,7 +310,7 @@
 {/if}
 
 {#if viewMode === ViewMode.MERGE_FACES}
-  <MergeFaceSelector person={data.person} on:go-back={handleGoBack} />
+  <MergeFaceSelector person={data.person} bind:people on:go-back={handleGoBack} on:merge={handleMerge} />
 {/if}
 
 <header>
@@ -344,7 +352,7 @@
 </header>
 
 <main class="relative h-screen overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
-  {#key previousPersonId}
+  {#key refreshAssetGrid}
     <AssetGrid
       {assetStore}
       {assetInteractionStore}