fix(web): events as props (#12825)

web/src/lib/components/shared-components/purchasing/purchase-activation-success.svelte

@@ -20,7 +20,7 @@
       title={$t('show_supporter_badge')}
       subtitle={$t('show_supporter_badge_description')}
       bind:checked={$preferences.purchase.showSupportBadge}
-      on:toggle={({ detail }) => setSupportBadgeVisibility(detail)}
+      onToggle={setSupportBadgeVisibility}
     />
   </div>
 

web/src/lib/components/shared-components/search-bar/search-camera-section.svelte

@@ -56,7 +56,7 @@
     <div class="w-full">
       <Combobox
         label={$t('make')}
-        on:select={({ detail }) => (filters.make = detail?.value)}
+        onSelect={(option) => (filters.make = option?.value)}
         options={asComboboxOptions(makes)}
         placeholder={$t('search_camera_make')}
         selectedOption={asSelectedOption(makeFilter)}
@@ -66,7 +66,7 @@
     <div class="w-full">
       <Combobox
         label={$t('model')}
-        on:select={({ detail }) => (filters.model = detail?.value)}
+        onSelect={(option) => (filters.model = option?.value)}
         options={asComboboxOptions(models)}
         placeholder={$t('search_camera_model')}
         selectedOption={asSelectedOption(modelFilter)}

web/src/lib/components/shared-components/search-bar/search-location-section.svelte

@@ -73,7 +73,7 @@
     <div class="w-full">
       <Combobox
         label={$t('country')}
-        on:select={({ detail }) => (filters.country = detail?.value)}
+        onSelect={(option) => (filters.country = option?.value)}
         options={asComboboxOptions(countries)}
         placeholder={$t('search_country')}
         selectedOption={asSelectedOption(filters.country)}
@@ -83,7 +83,7 @@
     <div class="w-full">
       <Combobox
         label={$t('state')}
-        on:select={({ detail }) => (filters.state = detail?.value)}
+        onSelect={(option) => (filters.state = option?.value)}
         options={asComboboxOptions(states)}
         placeholder={$t('search_state')}
         selectedOption={asSelectedOption(filters.state)}
@@ -93,7 +93,7 @@
     <div class="w-full">
       <Combobox
         label={$t('city')}
-        on:select={({ detail }) => (filters.city = detail?.value)}
+        onSelect={(option) => (filters.city = option?.value)}
         options={asComboboxOptions(cities)}
         placeholder={$t('search_city')}
         selectedOption={asSelectedOption(filters.city)}

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

@@ -32,14 +32,7 @@
     <p class="text-sm dark:text-immich-dark-fg">{subtitle}</p>
   </div>
   <div class="flex items-center">
-    <Combobox
-      label={title}
-      hideLabel={true}
-      {selectedOption}
-      {options}
-      placeholder={comboboxPlaceholder}
-      on:select={({ detail }) => onSelect(detail)}
-    />
+    <Combobox label={title} hideLabel={true} {selectedOption} {options} placeholder={comboboxPlaceholder} {onSelect} />
     <slot />
   </div>
 </div>