chore: migrate away from event dispatcher (#12820)

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">