better selection

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

@@ -6,7 +6,7 @@
   import Button from '$lib/components/elements/buttons/button.svelte';
   import FaceThumbnail from '$lib/components/assets/thumbnail/face-thumbnail.svelte';
 
-  export let selectedPeopleIds: string[] = [];
+  export let selectedPeopleIds: Set<string> = new Set();
   let people: PersonResponseDto[] = [];
   let selectedPeople: PersonResponseDto[] = [];
 
@@ -15,9 +15,7 @@
   onMount(async () => {
     const { data } = await api.personApi.getAllPeople({ withHidden: false });
 
-    people = data.people;
-
-    selectedPeople = people.filter((p) => selectedPeopleIds.includes(p.id));
+    people = data.people.filter((p) => !selectedPeopleIds.has(p.id));
   });
 
   const handleSelection = (e: CustomEvent<{ person: PersonResponseDto }>) => {

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

@@ -1,6 +1,6 @@
 <script lang="ts">
   import BaseModal from '$lib/components/shared-components/base-modal.svelte';
-  import { createEventDispatcher } from 'svelte';
+  import { createEventDispatcher, onMount } from 'svelte';
   import { RuleKey, type AlbumResponseDto, type PersonResponseDto, api } from '@api';
   import Plus from 'svelte-material-icons/Plus.svelte';
   import Button from '../../elements/buttons/button.svelte';
@@ -12,11 +12,7 @@
 
   let peopleSelection = false;
   let locationSelection = false;
-  $: selectedFaces = album.rules.map((r) => {
-    if (r.key === RuleKey.Person) {
-      return String(r.value);
-    }
-  }) as string[];
+  let selectedPeopleIds = new Set<string>();
 
   const dispatch = createEventDispatcher<{ close: void }>();
 
@@ -24,7 +20,7 @@
     peopleSelection = false;
     const people = e.detail.people;
 
-    selectedFaces = people.map((p) => p.id);
+    selectedPeopleIds = new Set([...selectedPeopleIds, ...people.map((p) => p.id)]);
   };
 
   const updateRule = async () => {
@@ -39,6 +35,16 @@
     //   album.rules = [...album.rules, data];
     // }
   };
+
+  onMount(() => {
+    const addedFaceIds = album.rules.map((r) => {
+      if (r.key === RuleKey.Person) {
+        return String(r.value);
+      }
+    }) as string[];
+
+    selectedPeopleIds = new Set([...selectedPeopleIds, ...addedFaceIds]);
+  });
 </script>
 
 <BaseModal
@@ -57,7 +63,14 @@
     <!--  People Selection -->
     <div id="people-selection">
       <p class="text-sm font-medium">PEOPLE</p>
-      <div class="mt-4">
+
+      <div class="mt-4 flex flex-wrap gap-2">
+        {#each selectedPeopleIds as personId (personId)}
+          <button>
+            <img src={api.getPeopleThumbnailUrl(personId)} alt={personId} class="h-20 w-20 rounded-lg" />
+          </button>
+        {/each}
+
         <button
           class="immich-text-primary border-1 flex h-20 w-20 place-content-center place-items-center rounded-lg border border-gray-300 hover:bg-gray-500/20 dark:border-gray-500"
           on:click={() => (peopleSelection = true)}
@@ -65,10 +78,6 @@
           <Plus size="24" />
         </button>
       </div>
-
-      {#each selectedFaces as person (person)}
-        <div>id: {person}</div>
-      {/each}
     </div>
 
     <!-- Location Selection -->
@@ -98,15 +107,14 @@
         </div>
       </div>
     </div>
-
-    <!-- Buttons rows -->
-    <div>
-      <div class="mt-5 flex justify-end gap-2">
-        <Button size="sm" color="secondary" on:click={() => dispatch('close')}>Cancel</Button>
-        <Button size="sm" color="primary">Confirm</Button>
-      </div>
-    </div>
   </section>
+  <!-- Buttons rows -->
+  <svelte:fragment slot="sticky-bottom">
+    <div class="flex justify-end gap-2">
+      <Button size="sm" color="secondary" on:click={() => dispatch('close')}>Cancel</Button>
+      <Button size="sm" color="primary">Confirm</Button>
+    </div>
+  </svelte:fragment>
 </BaseModal>
 
 <Portal target="body">
@@ -115,11 +123,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={selectedFaces}
-      />
+      <FaceSelection on:close={() => (peopleSelection = false)} on:confirm={handleFaceSelected} {selectedPeopleIds} />
     </section>
   {/if}
 </Portal>

web/src/lib/components/shared-components/base-modal.svelte

@@ -37,7 +37,7 @@
   <div
     use:clickOutside
     on:outclick={() => !ignoreClickOutside && dispatch('close')}
-    class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg min-h-[200px] w-[450px] overflow-y-auto rounded-lg shadow-md"
+    class="bg-immich-bg dark:bg-immich-dark-gray dark:text-immich-dark-fg max-h-[700px] min-h-[200px] w-[450px] overflow-y-auto rounded-lg shadow-md"
   >
     <div class="dark:bg-immich-dark-gray bg-immich-bg sticky top-0 flex place-items-center justify-between px-5 py-3">
       <div>
@@ -49,8 +49,14 @@
       <CircleIconButton on:click={() => dispatch('close')} logo={Close} size={'20'} />
     </div>
 
-    <div class="max-h-[600px]">
+    <div class="">
       <slot />
     </div>
+
+    {#if $$slots['sticky-bottom']}
+      <div class="dark:bg-immich-dark-gray bg-immich-bg sticky bottom-0 px-5 pb-5 pt-3">
+        <slot name="sticky-bottom" />
+      </div>
+    {/if}
   </div>
 </div>