chore: migrate away from event dispatcher (#12820)

web/src/lib/components/faces-page/unmerge-face-selector.svelte

@@ -10,7 +10,7 @@
     type PersonResponseDto,
   } from '@immich/sdk';
   import { mdiMerge, mdiPlus } from '@mdi/js';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import { onMount } from 'svelte';
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
   import Button from '../elements/buttons/button.svelte';
@@ -23,6 +23,8 @@
 
   export let assetIds: string[];
   export let personAssets: PersonResponseDto;
+  export let onConfirm: () => void;
+  export let onClose: () => void;
 
   let people: PersonResponseDto[] = [];
   let selectedPerson: PersonResponseDto | null = null;
@@ -34,11 +36,6 @@
 
   $: peopleToNotShow = selectedPerson ? [personAssets, selectedPerson] : [personAssets];
 
-  let dispatch = createEventDispatcher<{
-    confirm: void;
-    close: void;
-  }>();
-
   const selectedPeople: AssetFaceUpdateItem[] = [];
 
   for (const assetId of assetIds) {
@@ -50,10 +47,6 @@
     people = data.people;
   });
 
-  const onClose = () => {
-    dispatch('close');
-  };
-
   const handleSelectedPerson = (person: PersonResponseDto) => {
     if (selectedPerson && selectedPerson.id === person.id) {
       handleRemoveSelectedPerson();
@@ -87,7 +80,7 @@
     }
 
     showLoadingSpinnerCreate = false;
-    dispatch('confirm');
+    onConfirm();
   };
 
   const handleReassign = async () => {
@@ -113,7 +106,7 @@
     }
 
     showLoadingSpinnerReassign = false;
-    dispatch('confirm');
+    onConfirm();
   };
 </script>
 
@@ -123,7 +116,7 @@
   transition:fly={{ y: 500, duration: 100, easing: quintOut }}
   class="absolute left-0 top-0 z-[9999] h-full w-full bg-immich-bg dark:bg-immich-dark-bg"
 >
-  <ControlAppBar on:close={onClose}>
+  <ControlAppBar {onClose}>
     <svelte:fragment slot="leading">
       <slot name="header" />
       <div />
@@ -180,7 +173,7 @@
           </div>
         </div>
       {/if}
-      <PeopleList {people} {peopleToNotShow} {screenHeight} on:select={({ detail }) => handleSelectedPerson(detail)} />
+      <PeopleList {people} {peopleToNotShow} {screenHeight} onSelect={handleSelectedPerson} />
     </section>
   </section>
 </section>