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

web/src/lib/components/admin-page/delete-confirm-dialogue.svelte

@@ -1,25 +1,21 @@
 <script lang="ts">
+  import Checkbox from '$lib/components/elements/checkbox.svelte';
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
   import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import { serverConfig } from '$lib/stores/server-config.store';
   import { handleError } from '$lib/utils/handle-error';
   import { deleteUserAdmin, type UserResponseDto } from '@immich/sdk';
-  import { serverConfig } from '$lib/stores/server-config.store';
-  import { createEventDispatcher } from 'svelte';
-  import Checkbox from '$lib/components/elements/checkbox.svelte';
   import { t } from 'svelte-i18n';
-  import FormatMessage from '$lib/components/i18n/format-message.svelte';
 
   export let user: UserResponseDto;
+  export let onSuccess: () => void;
+  export let onFail: () => void;
+  export let onCancel: () => void;
 
   let forceDelete = false;
   let deleteButtonDisabled = false;
   let userIdInput: string = '';
 
-  const dispatch = createEventDispatcher<{
-    success: void;
-    fail: void;
-    cancel: void;
-  }>();
-
   const handleDeleteUser = async () => {
     try {
       const { deletedAt } = await deleteUserAdmin({
@@ -28,13 +24,13 @@
       });
 
       if (deletedAt == undefined) {
-        dispatch('fail');
+        onFail();
       } else {
-        dispatch('success');
+        onSuccess();
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_delete_user'));
-      dispatch('fail');
+      onFail();
     }
   };
 
@@ -48,7 +44,7 @@
   title={$t('delete_user')}
   confirmText={forceDelete ? $t('permanently_delete') : $t('delete')}
   onConfirm={handleDeleteUser}
-  onCancel={() => dispatch('cancel')}
+  {onCancel}
   disabled={deleteButtonDisabled}
 >
   <svelte:fragment slot="prompt">

web/src/lib/components/admin-page/jobs/job-tile.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Badge from '$lib/components/elements/badge.svelte';
+  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
   import { locale } from '$lib/stores/preferences.store';
   import { JobCommand, type JobCommandDto, type JobCountsDto, type QueueStatusDto } from '@immich/sdk';
@@ -12,11 +13,10 @@
     mdiPlay,
     mdiSelectionSearch,
   } from '@mdi/js';
-  import { createEventDispatcher, type ComponentType } from 'svelte';
+  import { type ComponentType } from 'svelte';
+  import { t } from 'svelte-i18n';
   import JobTileButton from './job-tile-button.svelte';
   import JobTileStatus from './job-tile-status.svelte';
-  import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
-  import { t } from 'svelte-i18n';
 
   export let title: string;
   export let subtitle: string | undefined;
@@ -29,13 +29,12 @@
 
   export let allText: string;
   export let missingText: string;
+  export let onCommand: (command: JobCommandDto) => void;
 
   $: waitingCount = jobCounts.waiting + jobCounts.paused + jobCounts.delayed;
   $: isIdle = !queueStatus.isActive && !queueStatus.isPaused;
 
   const commonClasses = 'flex place-items-center justify-between w-full py-2 sm:py-4 pr-4 pl-6';
-
-  const dispatch = createEventDispatcher<{ command: JobCommandDto }>();
 </script>
 
 <div
@@ -66,7 +65,7 @@
                   title={$t('clear_message')}
                   size="12"
                   padding="1"
-                  on:click={() => dispatch('command', { command: JobCommand.ClearFailed, force: false })}
+                  on:click={() => onCommand({ command: JobCommand.ClearFailed, force: false })}
                 />
               </div>
             </Badge>
@@ -117,54 +116,42 @@
       <JobTileButton
         disabled={true}
         color="light-gray"
-        on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
+        on:click={() => onCommand({ command: JobCommand.Start, force: false })}
       >
         <Icon path={mdiAlertCircle} size="36" />
         {$t('disabled').toUpperCase()}
       </JobTileButton>
     {:else if !isIdle}
       {#if waitingCount > 0}
-        <JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Empty, force: false })}>
+        <JobTileButton color="gray" on:click={() => onCommand({ command: JobCommand.Empty, force: false })}>
           <Icon path={mdiClose} size="24" />
           {$t('clear').toUpperCase()}
         </JobTileButton>
       {/if}
       {#if queueStatus.isPaused}
         {@const size = waitingCount > 0 ? '24' : '48'}
-        <JobTileButton
-          color="light-gray"
-          on:click={() => dispatch('command', { command: JobCommand.Resume, force: false })}
-        >
+        <JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Resume, force: false })}>
           <!-- size property is not reactive, so have to use width and height -->
           <Icon path={mdiFastForward} {size} />
           {$t('resume').toUpperCase()}
         </JobTileButton>
       {:else}
-        <JobTileButton
-          color="light-gray"
-          on:click={() => dispatch('command', { command: JobCommand.Pause, force: false })}
-        >
+        <JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Pause, force: false })}>
           <Icon path={mdiPause} size="24" />
           {$t('pause').toUpperCase()}
         </JobTileButton>
       {/if}
     {:else if allowForceCommand}
-      <JobTileButton color="gray" on:click={() => dispatch('command', { command: JobCommand.Start, force: true })}>
+      <JobTileButton color="gray" on:click={() => onCommand({ command: JobCommand.Start, force: true })}>
         <Icon path={mdiAllInclusive} size="24" />
         {allText}
       </JobTileButton>
-      <JobTileButton
-        color="light-gray"
-        on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
-      >
+      <JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Start, force: false })}>
         <Icon path={mdiSelectionSearch} size="24" />
         {missingText}
       </JobTileButton>
     {:else}
-      <JobTileButton
-        color="light-gray"
-        on:click={() => dispatch('command', { command: JobCommand.Start, force: false })}
-      >
+      <JobTileButton color="light-gray" on:click={() => onCommand({ command: JobCommand.Start, force: false })}>
         <Icon path={mdiPlay} size="48" />
         {$t('start').toUpperCase()}
       </JobTileButton>

web/src/lib/components/admin-page/jobs/jobs-panel.svelte

@@ -163,7 +163,7 @@
       {allowForceCommand}
       {jobCounts}
       {queueStatus}
-      on:command={({ detail }) => (handleCommandOverride || handleCommand)(jobName, detail)}
+      onCommand={(command) => (handleCommandOverride || handleCommand)(jobName, command)}
     />
   {/each}
 </div>

web/src/lib/components/admin-page/restore-dialogue.svelte

@@ -3,28 +3,24 @@
   import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { restoreUserAdmin, type UserResponseDto } from '@immich/sdk';
-  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
 
   export let user: UserResponseDto;
-
-  const dispatch = createEventDispatcher<{
-    success: void;
-    fail: void;
-    cancel: void;
-  }>();
+  export let onSuccess: () => void;
+  export let onFail: () => void;
+  export let onCancel: () => void;
 
   const handleRestoreUser = async () => {
     try {
       const { deletedAt } = await restoreUserAdmin({ id: user.id });
       if (deletedAt == undefined) {
-        dispatch('success');
+        onSuccess();
       } else {
-        dispatch('fail');
+        onFail();
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_user'));
-      dispatch('fail');
+      onFail();
     }
   };
 </script>
@@ -34,7 +30,7 @@
   confirmText={$t('continue')}
   confirmColor="green"
   onConfirm={handleRestoreUser}
-  onCancel={() => dispatch('cancel')}
+  {onCancel}
 >
   <svelte:fragment slot="prompt">
     <p>