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

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

@@ -7,7 +7,11 @@
   import { preferences } from '$lib/stores/user.store';
   import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
 
-  export let onDone: () => void;
+  interface Props {
+    onDone: () => void;
+  }
+
+  let { onDone }: Props = $props();
 </script>
 
 <div class="m-auto w-3/4 text-center flex flex-col place-content-center place-items-center dark:text-white my-6">
@@ -25,6 +29,6 @@
   </div>
 
   <div class="mt-6 w-full">
-    <Button fullwidth on:click={onDone}>{$t('ok')}</Button>
+    <Button fullwidth onclick={onDone}>{$t('ok')}</Button>
   </div>
 </div>

web/src/lib/components/shared-components/purchasing/purchase-content.svelte

@@ -8,12 +8,15 @@
   import { purchaseStore } from '$lib/stores/purchase.store';
   import { t } from 'svelte-i18n';
 
-  export let onActivate: () => void;
+  interface Props {
+    onActivate: () => void;
+    showTitle?: boolean;
+    showMessage?: boolean;
+  }
 
-  export let showTitle = true;
-  export let showMessage = true;
-  let productKey = '';
-  let isLoading = false;
+  let { onActivate, showTitle = true, showMessage = true }: Props = $props();
+  let productKey = $state('');
+  let isLoading = $state(false);
 
   const activate = async () => {
     try {
@@ -61,7 +64,7 @@
 
     <div class="mt-6">
       <p class="dark:text-immich-gray">{$t('purchase_input_suggestion')}</p>
-      <form class="mt-2 flex gap-2" on:submit={activate}>
+      <form class="mt-2 flex gap-2" onsubmit={activate}>
         <input
           class="immich-form-input w-full"
           id="purchaseKey"

web/src/lib/components/shared-components/purchasing/purchase-modal.svelte

@@ -5,9 +5,13 @@
 
   import Portal from '$lib/components/shared-components/portal/portal.svelte';
 
-  export let onClose: () => void;
+  interface Props {
+    onClose: () => void;
+  }
 
-  let showProductActivated = false;
+  let { onClose }: Props = $props();
+
+  let showProductActivated = $state(false);
 </script>
 
 <Portal>