Allows for toggling of sorting in the merge face selector

immich-app · Dec 20, 2024 · 5f4e1cc · 5f4e1cc
1 parent 79a780e
commit 5f4e1cc
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 6 deletions.
diff --git a/i18n/en.json b/i18n/en.json
@@ -1196,6 +1196,7 @@
   "sort_items": "Number of items",
   "sort_modified": "Date modified",
   "sort_oldest": "Oldest photo",
+  "sort_people_by_similarity": "Sort people by similarity",
   "sort_recent": "Most recent photo",
   "sort_title": "Title",
   "source": "Source",

diff --git a/web/src/lib/components/faces-page/merge-face-selector.svelte b/web/src/lib/components/faces-page/merge-face-selector.svelte
@@ -34,10 +34,14 @@
   let hasSelection = $derived(selectedPeople.length > 0);
   let peopleToNotShow = $derived([...selectedPeople, person]);
 
-  onMount(async () => {
-    const data = await getAllPeople({ withHidden: false, closestPersonId: person.id });
+  let sortFaces = $state(true);
+
+  const handleSearch = async () => {
+    const data = await getAllPeople({ withHidden: false, closestPersonId: sortFaces ? person.id : undefined });
     people = data.people;
-  });
+  };
+
+  onMount(handleSearch);
 
   const handleSwapPeople = async () => {
     [person, selectedPeople[0]] = [selectedPeople[0], person];
@@ -149,8 +153,7 @@
           <FaceThumbnail {person} border circle selectable={false} thumbnailSize={180} />
         </div>
       </div>
-
-      <PeopleList {people} {peopleToNotShow} {screenHeight} {onSelect} />
+      <PeopleList {people} {peopleToNotShow} {screenHeight} {onSelect} bind:sortFaces {handleSearch} />
     </section>
   </section>
 </section>
diff --git a/web/src/lib/components/faces-page/people-list.svelte b/web/src/lib/components/faces-page/people-list.svelte
@@ -3,15 +3,18 @@
   import FaceThumbnail from './face-thumbnail.svelte';
   import SearchPeople from '$lib/components/faces-page/people-search.svelte';
   import { t } from 'svelte-i18n';
+  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
   interface Props {
+    sortFaces: boolean;
     screenHeight: number;
     people: PersonResponseDto[];
     peopleToNotShow: PersonResponseDto[];
     onSelect: (person: PersonResponseDto) => void;
+    handleSearch: () => void;
   }
 
-  let { screenHeight, people, peopleToNotShow, onSelect }: Props = $props();
+  let { sortFaces = $bindable(true), screenHeight, people, peopleToNotShow, onSelect, handleSearch }: Props = $props();
 
   let searchedPeopleLocal: PersonResponseDto[] = $state([]);
 
@@ -28,6 +31,11 @@
   <SearchPeople type="searchBar" placeholder={$t('search_people')} bind:searchName={name} bind:searchedPeopleLocal />
 </div>
 
+<div class=" w-40 sm:w-48 md:w-96 mb-8">
+  <SettingSwitch onToggle={handleSearch} bind:checked={sortFaces} title={$t('sort_people_by_similarity')}
+  ></SettingSwitch>
+</div>
+
 <div
   class="immich-scrollbar overflow-y-auto rounded-3xl bg-gray-200 p-10 dark:bg-immich-dark-gray"
   style:max-height={screenHeight - 400 + 'px'}