refactor(web): migrate away from event dispatcher (#12802)

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { page } from '$app/stores';
   import { focusTrap } from '$lib/actions/focus-trap';
   import Button from '$lib/components/elements/buttons/button.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
@@ -9,12 +10,11 @@
   import { deleteProfileImage, updateMyPreferences, type UserAvatarColor } from '@immich/sdk';
   import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
+  import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
   import { NotificationType, notificationController } from '../notification/notification';
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
-  import { t } from 'svelte-i18n';
-  import { page } from '$app/stores';
 
   let isShowSelectAvatar = false;
 
@@ -120,9 +120,5 @@
 </div>
 
 {#if isShowSelectAvatar}
-  <AvatarSelector
-    user={$user}
-    on:close={() => (isShowSelectAvatar = false)}
-    on:choose={({ detail: color }) => handleSaveProfile(color)}
-  />
+  <AvatarSelector user={$user} onClose={() => (isShowSelectAvatar = false)} onChoose={handleSaveProfile} />
 {/if}

web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte

@@ -1,24 +1,21 @@
 <script lang="ts">
   import { UserAvatarColor, type UserResponseDto } from '@immich/sdk';
-  import { createEventDispatcher } from 'svelte';
+  import { t } from 'svelte-i18n';
   import FullScreenModal from '../full-screen-modal.svelte';
   import UserAvatar from '../user-avatar.svelte';
-  import { t } from 'svelte-i18n';
 
   export let user: UserResponseDto;
+  export let onClose: () => void;
+  export let onChoose: (color: UserAvatarColor) => void;
 
-  const dispatch = createEventDispatcher<{
-    close: void;
-    choose: UserAvatarColor;
-  }>();
   const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>
 
-<FullScreenModal title={$t('select_avatar_color')} width="auto" onClose={() => dispatch('close')}>
+<FullScreenModal title={$t('select_avatar_color')} width="auto" {onClose}>
   <div class="flex items-center justify-center mt-4">
     <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
       {#each colors as color}
-        <button type="button" on:click={() => dispatch('choose', color)}>
+        <button type="button" on:click={() => onChoose(color)}>
           <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
         </button>
       {/each}

web/src/lib/components/shared-components/settings/setting-switch.svelte

@@ -43,11 +43,5 @@
     <slot />
   </div>
 
-  <Slider
-    id={sliderId}
-    bind:checked
-    {disabled}
-    on:toggle={({ detail }) => onToggle(detail)}
-    ariaDescribedBy={subtitleId}
-  />
+  <Slider id={sliderId} bind:checked {disabled} {onToggle} ariaDescribedBy={subtitleId} />
 </div>

web/src/lib/components/shared-components/show-shortcuts.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
-  import FullScreenModal from './full-screen-modal.svelte';
   import { mdiInformationOutline } from '@mdi/js';
-  import Icon from '../elements/icon.svelte';
   import { t } from 'svelte-i18n';
+  import Icon from '../elements/icon.svelte';
+  import FullScreenModal from './full-screen-modal.svelte';
 
   interface Shortcuts {
     general: ExplainedShortcut[];
@@ -16,6 +15,8 @@
     info?: string;
   }
 
+  export let onClose: () => void;
+
   export let shortcuts: Shortcuts = {
     general: [
       { key: ['←', '→'], action: $t('previous_or_next_photo') },
@@ -33,12 +34,9 @@
       { key: ['Del'], action: $t('trash_delete_asset'), info: $t('shift_to_permanent_delete') },
     ],
   };
-  const dispatch = createEventDispatcher<{
-    close: void;
-  }>();
 </script>
 
-<FullScreenModal title={$t('keyboard_shortcuts')} width="auto" onClose={() => dispatch('close')}>
+<FullScreenModal title={$t('keyboard_shortcuts')} width="auto" {onClose}>
   <div class="grid grid-cols-1 gap-4 px-4 pb-4 md:grid-cols-2">
     {#if shortcuts.general.length > 0}
       <div class="p-4">