chore: migrate away from event dispatcher (#12820)

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

@@ -43,7 +43,7 @@
           icon: option.icon,
         };
       }}
-      on:select={({ detail }) => onToggle(detail)}
+      onSelect={onToggle}
     />
   </div>
 </div>

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { createEventDispatcher } from 'svelte';
   import { t } from 'svelte-i18n';
   import Icon from '$lib/components/elements/icon.svelte';
   import { mdiChevronDown } from '@mdi/js';
@@ -14,15 +13,14 @@
   export let isEdited = false;
   export let number = false;
   export let disabled = false;
-
-  const dispatch = createEventDispatcher<{ select: string | number }>();
+  export let onSelect: (setting: string | number) => void = () => {};
 
   const handleChange = (e: Event) => {
     value = (e.target as HTMLInputElement).value;
     if (number) {
       value = Number.parseInt(value);
     }
-    dispatch('select', value);
+    onSelect(value);
   };
 </script>
 

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

@@ -1,7 +1,6 @@
 <script lang="ts">
   import { quintOut } from 'svelte/easing';
   import { fly } from 'svelte/transition';
-  import { createEventDispatcher } from 'svelte';
   import Slider from '$lib/components/elements/slider.svelte';
   import { generateId } from '$lib/utils/generate-id';
   import { t } from 'svelte-i18n';
@@ -11,14 +10,12 @@
   export let checked = false;
   export let disabled = false;
   export let isEdited = false;
+  export let onToggle: (isChecked: boolean) => void = () => {};
 
   let id: string = generateId();
 
   $: sliderId = `${id}-slider`;
   $: subtitleId = subtitle ? `${id}-subtitle` : undefined;
-
-  const dispatch = createEventDispatcher<{ toggle: boolean }>();
-  const onToggle = (isChecked: boolean) => dispatch('toggle', isChecked);
 </script>
 
 <div class="flex place-items-center justify-between">