feat(web): add types to dispatcher (#5700)

* feat: add types to dispatcher

* fix: create album name

* pr feedback

* pr feedback

* pr feedback

* fix: api key name

* remove newSharedAlbum

* pr feedback

* fix: api key creation

* on:close

* fix: owner

* fix: onclose

* remove unused code

---------

Co-authored-by: Alex Tran <alex.tran1502@gmail.com>

web/src/lib/components/faces-page/assign-face-side-panel.svelte

@@ -28,7 +28,11 @@
   let searchFaces = false;
   let searchName = '';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    createPerson: string | null;
+    reassign: PersonResponseDto;
+  }>();
   const handleBackButton = () => {
     dispatch('close');
   };

web/src/lib/components/faces-page/face-thumbnail.svelte

@@ -10,7 +10,9 @@
   export let circle = false;
   export let border = false;
 
-  let dispatch = createEventDispatcher();
+  let dispatch = createEventDispatcher<{
+    click: PersonResponseDto;
+  }>();
 
   const handleOnClicked = () => {
     dispatch('click', person);

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

@@ -24,7 +24,10 @@
   let screenHeight: number;
   let isShowConfirmation = false;
 
-  let dispatch = createEventDispatcher();
+  let dispatch = createEventDispatcher<{
+    back: void;
+    merge: void;
+  }>();
 
   $: hasSelection = selectedPeople.length > 0;
   $: unselectedPeople = people.filter(
@@ -37,7 +40,7 @@
   });
 
   const onClose = () => {
-    dispatch('go-back');
+    dispatch('back');
   };
 
   const handleSwapPeople = () => {
@@ -89,7 +92,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-button-click={onClose}>
+  <ControlAppBar on:close={onClose}>
     <svelte:fragment slot="leading">
       {#if hasSelection}
         Selected {selectedPeople.length}

web/src/lib/components/faces-page/person-side-panel.svelte

@@ -40,7 +40,10 @@
   let automaticRefreshTimeout: NodeJS.Timeout;
 
   const { onPersonThumbnail } = websocketStore;
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    refresh: void;
+  }>();
 
   // Reset value
   $onPersonThumbnail = '';

web/src/lib/components/faces-page/show-hide.svelte

@@ -7,7 +7,12 @@
   import LoadingSpinner from '$lib/components/shared-components/loading-spinner.svelte';
   import { mdiClose, mdiEye, mdiEyeOff, mdiRestart } from '@mdi/js';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    close: void;
+    reset: void;
+    change: void;
+    done: void;
+  }>();
 
   export let showLoadingSpinner: boolean;
   export let toggleVisibility: boolean;
@@ -21,24 +26,20 @@
     class="sticky top-0 z-10 flex h-16 w-full items-center justify-between border-b bg-white p-1 dark:border-immich-dark-gray dark:bg-black dark:text-immich-dark-fg md:p-8"
   >
     <div class="flex items-center">
-      <CircleIconButton icon={mdiClose} on:click={() => dispatch('closeClick')} />
+      <CircleIconButton icon={mdiClose} on:click={() => dispatch('close')} />
       <p class="ml-4 hidden sm:block">Show & hide people</p>
     </div>
     <div class="flex items-center justify-end">
       <div class="flex items-center md:mr-8">
-        <CircleIconButton
-          title="Reset people visibility"
-          icon={mdiRestart}
-          on:click={() => dispatch('reset-visibility')}
-        />
+        <CircleIconButton title="Reset people visibility" icon={mdiRestart} on:click={() => dispatch('reset')} />
         <CircleIconButton
           title="Toggle visibility"
           icon={toggleVisibility ? mdiEye : mdiEyeOff}
-          on:click={() => dispatch('toggle-visibility')}
+          on:click={() => dispatch('change')}
         />
       </div>
       {#if !showLoadingSpinner}
-        <IconButton on:click={() => dispatch('doneClick')}>Done</IconButton>
+        <IconButton on:click={() => dispatch('done')}>Done</IconButton>
       {:else}
         <LoadingSpinner />
       {/if}

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

@@ -28,7 +28,10 @@
     ? people.filter((person) => selectedPerson && person.id !== selectedPerson.id && personAssets.id !== person.id)
     : people;
 
-  let dispatch = createEventDispatcher();
+  let dispatch = createEventDispatcher<{
+    confirm: void;
+    close: void;
+  }>();
 
   const selectedPeople: AssetFaceUpdateItem[] = [];
 
@@ -117,7 +120,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-button-click={onClose}>
+  <ControlAppBar on:close={onClose}>
     <svelte:fragment slot="leading">
       <slot name="header" />
       <div />