chore(web): migration svelte 5 syntax (#13883)

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

@@ -5,14 +5,25 @@
   import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
   import { t } from 'svelte-i18n';
 
-  export let name: string;
-  export let roundedBottom = true;
-  export let showLoadingSpinner: boolean;
-  export let placeholder: string;
-  export let onSearch: (options: SearchOptions) => void = () => {};
-  export let onReset: () => void = () => {};
+  interface Props {
+    name: string;
+    roundedBottom?: boolean;
+    showLoadingSpinner: boolean;
+    placeholder: string;
+    onSearch?: (options: SearchOptions) => void;
+    onReset?: () => void;
+  }
 
-  let inputRef: HTMLElement;
+  let {
+    name = $bindable(),
+    roundedBottom = true,
+    showLoadingSpinner,
+    placeholder,
+    onSearch = () => {},
+    onReset = () => {},
+  }: Props = $props();
+
+  let inputRef = $state<HTMLElement>();
 
   const resetSearch = () => {
     name = '';
@@ -37,7 +48,7 @@
     title={$t('search')}
     size="16"
     padding="2"
-    on:click={() => onSearch({ force: true })}
+    onclick={() => onSearch({ force: true })}
   />
   <input
     class="w-full gap-2 bg-gray-200 dark:bg-immich-dark-gray dark:text-white"
@@ -45,8 +56,8 @@
     {placeholder}
     bind:value={name}
     bind:this={inputRef}
-    on:keydown={handleSearch}
-    on:input={() => onSearch({ force: false })}
+    onkeydown={handleSearch}
+    oninput={() => onSearch({ force: false })}
   />
   {#if showLoadingSpinner}
     <div class="flex place-items-center">
@@ -54,6 +65,6 @@
     </div>
   {/if}
   {#if name}
-    <CircleIconButton icon={mdiClose} title={$t('clear_value')} size="16" padding="2" on:click={resetSearch} />
+    <CircleIconButton icon={mdiClose} title={$t('clear_value')} size="16" padding="2" onclick={resetSearch} />
   {/if}
 </div>