remove faces from payload

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

@@ -39,6 +39,8 @@
     <p class="text-immich-fg dark:text-immich-dark-fg font-medium">
       {#if newPeople.length === 0}
         Select faces
+      {:else if newPeople.length === 1}
+        1 person selected
       {:else}
         {newPeople.length} people selected
       {/if}

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

@@ -16,13 +16,19 @@
 
   const dispatch = createEventDispatcher<{ close: void }>();
 
-  const handleFaceSelected = async (e: CustomEvent<{ people: PersonResponseDto[] }>) => {
+  const handlePeopleSelected = async (e: CustomEvent<{ people: PersonResponseDto[] }>) => {
     peopleSelection = false;
     const people = e.detail.people;
 
     selectedPeople = new Set([...selectedPeople, ...people]);
   };
 
+  const handleRemovePerson = (person: PersonResponseDto) => {
+    const temp = new Set(selectedPeople);
+    temp.delete(person);
+    selectedPeople = temp;
+  };
+
   const updateRule = async () => {
     // for (const person of people) {
     //   const { data } = await api.ruleApi.createRule({
@@ -70,7 +76,7 @@
 
       <div class="mt-4 flex flex-wrap gap-2">
         {#each selectedPeople as person (person.id)}
-          <button>
+          <button on:click={() => handleRemovePerson(person)}>
             <img src={api.getPeopleThumbnailUrl(person.id)} alt={person.id} class="h-20 w-20 rounded-lg" />
           </button>
         {/each}
@@ -127,7 +133,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} {selectedPeople} />
+      <FaceSelection on:close={() => (peopleSelection = false)} on:confirm={handlePeopleSelected} {selectedPeople} />
     </section>
   {/if}
 </Portal>