Change to set

web/src/lib/components/album-page/rule-selection-form/face-selection.svelte

@@ -6,47 +6,47 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import FaceThumbnail from '$lib/components/assets/thumbnail/face-thumbnail.svelte';
 
-  export let selectedPeopleIds: Set<string> = new Set();
+  export let selectedPeople: Set<PersonResponseDto> = new Set();
   let people: PersonResponseDto[] = [];
-  let selectedPeople: PersonResponseDto[] = [];
+  let newPeople: PersonResponseDto[] = [];
 
   const dispatch = createEventDispatcher<{ close: void; confirm: { people: PersonResponseDto[] } }>();
 
   onMount(async () => {
     const { data } = await api.personApi.getAllPeople({ withHidden: false });
 
-    people = data.people.filter((p) => !selectedPeopleIds.has(p.id));
+    const selectedPeopleIds = Array.from(selectedPeople).map((p) => p.id);
+    people = data.people.filter((p) => !selectedPeopleIds.includes(p.id));
   });
 
   const handleSelection = (e: CustomEvent<{ person: PersonResponseDto }>) => {
     const person = e.detail.person;
 
-    if (selectedPeople.some((p) => p.id === person.id)) {
-      selectedPeople = selectedPeople.filter((p) => p.id !== person.id);
+    if (newPeople.some((p) => p.id === person.id)) {
+      newPeople = newPeople.filter((p) => p.id !== person.id);
     } else {
-      selectedPeople = [...selectedPeople, person];
+      newPeople = [...newPeople, person];
     }
   };
 
   const onConfirmClicked = () => {
-    dispatch('confirm', { people: selectedPeople });
+    dispatch('confirm', { people: newPeople });
   };
 </script>
 
 <ControlAppBar showBackButton backIcon={ArrowLeft} on:close-button-click={() => dispatch('close')}>
   <svelte:fragment slot="leading">
     <p class="text-immich-fg dark:text-immich-dark-fg font-medium">
-      {#if selectedPeople.length === 0}
+      {#if newPeople.length === 0}
         Select faces
       {:else}
-        {selectedPeople.length} people selected
+        {newPeople.length} people selected
       {/if}
     </p>
   </svelte:fragment>
 
   <svelte:fragment slot="trailing">
-    <Button disabled={selectedPeople.length === 0} size="sm" title="Confirm" on:click={onConfirmClicked}>Confirm</Button
-    >
+    <Button disabled={newPeople.length === 0} size="sm" title="Confirm" on:click={onConfirmClicked}>Confirm</Button>
   </svelte:fragment>
 </ControlAppBar>
 
@@ -57,7 +57,7 @@
       thumbnailSize={180}
       on:select={handleSelection}
       on:click={handleSelection}
-      selected={selectedPeople.some((p) => p.id === person.id)}
+      selected={newPeople.some((p) => p.id === person.id)}
     />
   {/each}
 </div>

web/src/lib/components/album-page/rule-selection-form/rule-selection-form.svelte

@@ -12,7 +12,7 @@
 
   let peopleSelection = false;
   let locationSelection = false;
-  let selectedPeopleIds = new Set<string>();
+  let selectedPeople = new Set<PersonResponseDto>();
 
   const dispatch = createEventDispatcher<{ close: void }>();
 
@@ -20,7 +20,7 @@
     peopleSelection = false;
     const people = e.detail.people;
 
-    selectedPeopleIds = new Set([...selectedPeopleIds, ...people.map((p) => p.id)]);
+    selectedPeople = new Set([...selectedPeople, ...people]);
   };
 
   const updateRule = async () => {
@@ -36,14 +36,18 @@
     // }
   };
 
-  onMount(() => {
-    const addedFaceIds = album.rules.map((r) => {
-      if (r.key === RuleKey.Person) {
-        return String(r.value);
-      }
-    }) as string[];
+  onMount(async () => {
+    const addedPeople: PersonResponseDto[] = [];
 
-    selectedPeopleIds = new Set([...selectedPeopleIds, ...addedFaceIds]);
+    for (const rule of album.rules) {
+      if (rule.key === RuleKey.Person) {
+        const personId = String(rule.value);
+        const { data } = await api.personApi.getPerson({ id: personId });
+        addedPeople.push(data);
+      }
+    }
+
+    selectedPeople = new Set([...selectedPeople, ...addedPeople]);
   });
 </script>
 
@@ -65,9 +69,9 @@
       <p class="text-sm font-medium">PEOPLE</p>
 
       <div class="mt-4 flex flex-wrap gap-2">
-        {#each selectedPeopleIds as personId (personId)}
+        {#each selectedPeople as person (person.id)}
           <button>
-            <img src={api.getPeopleThumbnailUrl(personId)} alt={personId} class="h-20 w-20 rounded-lg" />
+            <img src={api.getPeopleThumbnailUrl(person.id)} alt={person.id} class="h-20 w-20 rounded-lg" />
           </button>
         {/each}
 
@@ -123,7 +127,7 @@
       transition:fly={{ y: 500 }}
       class="dark:bg-immich-dark-bg absolute left-0 top-0 z-[10000] h-full min-h-max w-full overflow-y-auto bg-gray-200"
     >
-      <FaceSelection on:close={() => (peopleSelection = false)} on:confirm={handleFaceSelected} {selectedPeopleIds} />
+      <FaceSelection on:close={() => (peopleSelection = false)} on:confirm={handleFaceSelected} {selectedPeople} />
     </section>
   {/if}
 </Portal>