feat(web): suggest to merge people faces when renaming a person name (#3399)

* feat: propose to merge faced based on the name * responsive * drop down menu * add border * improvements * improvements * improvements * add comments * responsive * responsive * feat: use FullScreenModal * responsive * pr feeback * pr feeback * pr feeback * responsive * pr feeback * pr feeback * styling * fix test --------- Co-authored-by: Alex Tran <alex.tran1502@gmail.com>
2025-11-07 17:27:20 +00:00 · 2023-07-28 05:04:20 +02:00 · 2023-07-28 05:04:20 +02:00 · afb0d0f54d
commit afb0d0f54d
parent 26085ff82b
5 changed files with 345 additions and 34 deletions
--- a/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
+++ b/web/src/lib/components/faces-page/merge-suggestion-modal.svelte
@ -0,0 +1,128 @@
+<script lang="ts">
+  import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
+  import { createEventDispatcher } from 'svelte';
+  import Close from 'svelte-material-icons/Close.svelte';
+  import ImageThumbnail from '../assets/thumbnail/image-thumbnail.svelte';
+  import type { PersonResponseDto } from '../../../api/open-api';
+  import { api } from '@api';
+  import Merge from 'svelte-material-icons/Merge.svelte';
+  import Button from '../elements/buttons/button.svelte';
+  import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
+
+  const dispatch = createEventDispatcher<{
+    reject: void;
+    confirm: [PersonResponseDto, PersonResponseDto];
+    close: void;
+  }>();
+
+  export let personMerge1: PersonResponseDto;
+  export let personMerge2: PersonResponseDto;
+  export let people: PersonResponseDto[];
+  let potentialMergePeople: PersonResponseDto[] = people
+    .filter(
+      (person: PersonResponseDto) =>
+        personMerge2.name.toLowerCase() === person.name.toLowerCase() &&
+        person.id !== personMerge2.id &&
+        person.id !== personMerge1.id &&
+        !person.isHidden,
+    )
+    .slice(0, 3);
+
+  let choosePersonToMerge = false;
+
+  const title = personMerge2.name;
+
+  const changePersonToMerge = (newperson: PersonResponseDto) => {
+    const index = potentialMergePeople.indexOf(newperson);
+    [potentialMergePeople[index], personMerge2] = [personMerge2, potentialMergePeople[index]];
+    choosePersonToMerge = false;
+  };
+</script>
+
+<div class="flex h-full w-full place-content-center place-items-center overflow-hidden">
+  <div
+    class="w-[250px] max-w-[125vw] rounded-3xl border bg-immich-bg shadow-sm dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-fg md:w-[375px]"
+  >
+    <div class="relative flex items-center justify-between">
+      <h1 class="truncate px-4 py-4 font-medium text-immich-primary dark:text-immich-dark-primary">
+        Merge faces - {title}
+      </h1>
+      <CircleIconButton logo={Close} on:click={() => dispatch('close')} />
+    </div>
+
+    <div class="flex items-center justify-center px-2 py-4 md:h-36 md:px-4 md:py-4">
+      {#if !choosePersonToMerge}
+        <div class="flex h-20 w-20 items-center px-1 md:h-24 md:w-24 md:px-2">
+          <ImageThumbnail
+            circle
+            shadow
+            url={api.getPeopleThumbnailUrl(personMerge1.id)}
+            altText={personMerge1.name}
+            widthStyle="100%"
+          />
+        </div>
+        <div class="mx-0.5 flex md:mx-2">
+          <CircleIconButton
+            logo={Merge}
+            on:click={() => ([personMerge1, personMerge2] = [personMerge2, personMerge1])}
+          />
+        </div>
+
+        <button
+          disabled={potentialMergePeople.length === 0}
+          class="flex h-28 w-28 items-center rounded-full border-2 border-immich-primary px-1 dark:border-immich-dark-primary md:h-32 md:w-32 md:px-2"
+          on:click={() => {
+            if (potentialMergePeople.length > 0) {
+              choosePersonToMerge = !choosePersonToMerge;
+            }
+          }}
+        >
+          <ImageThumbnail
+            border={potentialMergePeople.length !== 0}
+            circle
+            shadow
+            url={api.getPeopleThumbnailUrl(personMerge2.id)}
+            altText={personMerge2.name}
+            widthStyle="100%"
+          />
+        </button>
+      {:else}
+        <div class="grid w-full grid-cols-1 gap-2">
+          <div class="px-2">
+            <button on:click={() => (choosePersonToMerge = false)}> <ArrowLeft /></button>
+          </div>
+          <div class="flex items-center justify-center">
+            <div class="flex flex-wrap justify-center md:grid md:grid-cols-{potentialMergePeople.length}">
+              {#each potentialMergePeople as person (person.id)}
+                <div class="h-24 w-24 md:h-28 md:w-28">
+                  <button class="p-2" on:click={() => changePersonToMerge(person)}>
+                    <ImageThumbnail
+                      border={true}
+                      circle
+                      shadow
+                      url={api.getPeopleThumbnailUrl(person.id)}
+                      altText={person.name}
+                      widthStyle="100%"
+                      on:click={() => changePersonToMerge(person)}
+                    />
+                  </button>
+                </div>
+              {/each}
+            </div>
+          </div>
+        </div>
+      {/if}
+    </div>
+
+    <div class="flex px-4 md:px-8 md:pt-4">
+      <h1 class="text-xl text-gray-500 dark:text-gray-300">Are these the same face?</h1>
+    </div>
+    <div class="flex px-4 pt-2 md:px-8">
+      <p class="text-sm text-gray-500 dark:text-gray-300">They will be merged together</p>
+    </div>
+    <div class="mt-8 flex w-full gap-4 px-4 pb-4">
+      <Button color="gray" fullwidth on:click={() => dispatch('reject')}>No</Button>
+      <Button fullwidth on:click={() => dispatch('confirm', [personMerge1, personMerge2])}>Yes</Button>
+    </div>
+  </div>
+</div>