chore: migrate away from event dispatcher (#12820)

web/src/lib/components/elements/dropdown.svelte

@@ -19,22 +19,18 @@
   import LinkButton from './buttons/link-button.svelte';
   import { clickOutside } from '$lib/actions/click-outside';
   import { fly } from 'svelte/transition';
-  import { createEventDispatcher } from 'svelte';
 
   let className = '';
   export { className as class };
 
-  const dispatch = createEventDispatcher<{
-    select: T;
-    'click-outside': void;
-  }>();
-
   export let options: T[];
   export let selectedOption = options[0];
   export let showMenu = false;
   export let controlable = false;
   export let hideTextOnSmallScreen = true;
   export let title: string | undefined = undefined;
+  export let onSelect: (option: T) => void;
+  export let onClickOutside: () => void = () => {};
 
   export let render: (item: T) => string | RenderedOption = String;
 
@@ -43,11 +39,11 @@
       showMenu = false;
     }
 
-    dispatch('click-outside');
+    onClickOutside();
   };
 
   const handleSelectOption = (option: T) => {
-    dispatch('select', option);
+    onSelect(option);
     selectedOption = option;
 
     showMenu = false;

web/src/lib/components/elements/search-bar.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import { mdiClose, mdiMagnify } from '@mdi/js';
-  import { createEventDispatcher } from 'svelte';
   import type { SearchOptions } from '$lib/utils/dipatch';
   import LoadingSpinner from '../shared-components/loading-spinner.svelte';
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
@@ -10,20 +9,20 @@
   export let roundedBottom = true;
   export let showLoadingSpinner: boolean;
   export let placeholder: string;
+  export let onSearch: (options: SearchOptions) => void = () => {};
+  export let onReset: () => void = () => {};
 
   let inputRef: HTMLElement;
 
-  const dispatch = createEventDispatcher<{ search: SearchOptions; reset: void }>();
-
   const resetSearch = () => {
     name = '';
-    dispatch('reset');
+    onReset();
     inputRef?.focus();
   };
 
   const handleSearch = (event: KeyboardEvent) => {
     if (event.key === 'Enter') {
-      dispatch('search', { force: true });
+      onSearch({ force: true });
     }
   };
 </script>
@@ -38,7 +37,7 @@
     title={$t('search')}
     size="16"
     padding="2"
-    on:click={() => dispatch('search', { force: true })}
+    on:click={() => onSearch({ force: true })}
   />
   <input
     class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
@@ -47,7 +46,7 @@
     bind:value={name}
     bind:this={inputRef}
     on:keydown={handleSearch}
-    on:input={() => dispatch('search', { force: false })}
+    on:input={() => onSearch({ force: false })}
   />
   {#if showLoadingSpinner}
     <div class="flex place-items-center">