feat(web): swap between people when merging faces (#4089)

* feat: swap between people when merging faces

* rename

* fix: remove url parameter when closing

* chore: handler naming

---------

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

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

@@ -12,7 +12,9 @@
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
   import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
   import { handleError } from '$lib/utils/handle-error';
-  import { invalidateAll } from '$app/navigation';
+  import { goto, invalidateAll } from '$app/navigation';
+  import { AppRoute } from '$lib/constants';
+  import SwapHorizontal from 'svelte-material-icons/SwapHorizontal.svelte';
 
   export let person: PersonResponseDto;
   let people: PersonResponseDto[] = [];
@@ -22,8 +24,9 @@
   let dispatch = createEventDispatcher();
 
   $: hasSelection = selectedPeople.length > 0;
-  $: unselectedPeople = people.filter((source) => !selectedPeople.includes(source) && source.id !== person.id);
-
+  $: 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;
@@ -33,6 +36,11 @@
     dispatch('go-back');
   };
 
+  const handleSwapPeople = () => {
+    [person, selectedPeople[0]] = [selectedPeople[0], person];
+    goto(`${AppRoute.PEOPLE}/${person.id}?action=merge`);
+  };
+
   const onSelect = (selected: PersonResponseDto) => {
     if (selectedPeople.includes(selected)) {
       selectedPeople = selectedPeople.filter((person) => person.id !== selected.id);
@@ -112,7 +120,14 @@
           {/each}
 
           {#if hasSelection}
-            <span><CallMerge size={48} class="rotate-90 dark:text-white" /> </span>
+            <span class="grid grid-cols-1"
+              ><CallMerge size={48} class="rotate-90 dark:text-white" />
+              {#if selectedPeople.length === 1}
+                <button class="flex justify-center" on:click={handleSwapPeople}
+                  ><SwapHorizontal size={24} class="dark:text-white" />
+                </button>
+              {/if}
+            </span>
           {/if}
           <FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
         </div>

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

@@ -43,7 +43,7 @@
     BIRTH_DATE = 'birth-date',
   }
 
-  const assetStore = new AssetStore({
+  let assetStore = new AssetStore({
     size: TimeBucketSize.Month,
     isArchived: false,
     personId: data.person.id,
@@ -54,6 +54,7 @@
   let viewMode: ViewMode = ViewMode.VIEW_ASSETS;
   let isEditingName = false;
   let previousRoute: string = AppRoute.EXPLORE;
+  let previousPersonId: string = data.person.id;
   let people = data.people.people;
   let personMerge1: PersonResponseDto;
   let personMerge2: PersonResponseDto;
@@ -74,6 +75,14 @@
     if (from && from.route.id !== $page.route.id) {
       previousRoute = from.url.href;
     }
+    if (previousPersonId !== data.person.id) {
+      assetStore = new AssetStore({
+        size: TimeBucketSize.Month,
+        isArchived: false,
+        personId: data.person.id,
+      });
+      previousPersonId = data.person.id;
+    }
   });
 
   const hideFace = async () => {
@@ -215,6 +224,14 @@
       handleError(error, 'Unable to save date of birth');
     }
   };
+
+  const handleGoBack = () => {
+    viewMode = ViewMode.VIEW_ASSETS;
+    if ($page.url.searchParams.has('action')) {
+      $page.url.searchParams.delete('action');
+      goto($page.url);
+    }
+  };
 </script>
 
 {#if viewMode === ViewMode.SUGGEST_MERGE}
@@ -237,7 +254,7 @@
 {/if}
 
 {#if viewMode === ViewMode.MERGE_FACES}
-  <MergeFaceSelector person={data.person} on:go-back={() => (viewMode = ViewMode.VIEW_ASSETS)} />
+  <MergeFaceSelector person={data.person} on:go-back={handleGoBack} />
 {/if}
 
 <header>
@@ -279,6 +296,7 @@
 </header>
 
 <main class="relative h-screen overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg">
+  {#key previousPersonId}
     <AssetGrid
       {assetStore}
       {assetInteractionStore}
@@ -323,4 +341,5 @@
         </section>
       {/if}
     </AssetGrid>
+  {/key}
 </main>