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

web/src/lib/components/user-settings-page/device-card.svelte

@@ -15,14 +15,10 @@
     mdiUbuntu,
   } from '@mdi/js';
   import { DateTime, type ToRelativeCalendarOptions } from 'luxon';
-  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
 
   export let device: SessionResponseDto;
-
-  const dispatcher = createEventDispatcher<{
-    delete: void;
-  }>();
+  export let onDelete: (() => void) | undefined = undefined;
 
   const options: ToRelativeCalendarOptions = {
     unit: 'days',
@@ -68,14 +64,14 @@
         </span>
       </div>
     </div>
-    {#if !device.current}
+    {#if !device.current && onDelete}
       <div>
         <CircleIconButton
           color="primary"
           icon={mdiTrashCanOutline}
           title={$t('log_out')}
           size="16"
-          on:click={() => dispatcher('delete')}
+          on:click={onDelete}
         />
       </div>
     {/if}

web/src/lib/components/user-settings-page/device-list.svelte

@@ -68,7 +68,7 @@
         {$t('other_devices').toUpperCase()}
       </h3>
       {#each otherDevices as device, index}
-        <DeviceCard {device} on:delete={() => handleDelete(device)} />
+        <DeviceCard {device} onDelete={() => handleDelete(device)} />
         {#if index !== otherDevices.length - 1}
           <hr class="my-3" />
         {/if}

web/src/lib/components/user-settings-page/partner-selection-modal.svelte

@@ -1,19 +1,18 @@
 <script lang="ts">
-  import { searchUsers, getPartners, type UserResponseDto, PartnerDirection } from '@immich/sdk';
-  import { createEventDispatcher, onMount } from 'svelte';
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import { getPartners, PartnerDirection, searchUsers, type UserResponseDto } from '@immich/sdk';
+  import { onMount } from 'svelte';
+  import { t } from 'svelte-i18n';
   import Button from '../elements/buttons/button.svelte';
   import UserAvatar from '../shared-components/user-avatar.svelte';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
-  import { t } from 'svelte-i18n';
 
   export let user: UserResponseDto;
   export let onClose: () => void;
+  export let onAddUsers: (users: UserResponseDto[]) => void;
 
   let availableUsers: UserResponseDto[] = [];
   let selectedUsers: UserResponseDto[] = [];
 
-  const dispatch = createEventDispatcher<{ 'add-users': UserResponseDto[] }>();
-
   onMount(async () => {
     let users = await searchUsers();
 
@@ -69,7 +68,7 @@
 
     {#if selectedUsers.length > 0}
       <div class="pt-5">
-        <Button size="sm" fullwidth on:click={() => dispatch('add-users', selectedUsers)}>{$t('add')}</Button>
+        <Button size="sm" fullwidth on:click={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
       </div>
     {/if}
   </div>

web/src/lib/components/user-settings-page/partner-settings.svelte

@@ -191,9 +191,5 @@
 </section>
 
 {#if createPartnerFlag}
-  <PartnerSelectionModal
-    {user}
-    onClose={() => (createPartnerFlag = false)}
-    on:add-users={(event) => handleCreatePartners(event.detail)}
-  />
+  <PartnerSelectionModal {user} onClose={() => (createPartnerFlag = false)} onAddUsers={handleCreatePartners} />
 {/if}