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

web/src/lib/components/forms/api-key-form.svelte

@@ -5,13 +5,23 @@
   import FullScreenModal from '../shared-components/full-screen-modal.svelte';
   import { NotificationType, notificationController } from '../shared-components/notification/notification';
 
-  export let apiKey: { name: string };
-  export let title: string;
-  export let cancelText = $t('cancel');
-  export let submitText = $t('save');
+  interface Props {
+    apiKey: { name: string };
+    title: string;
+    cancelText?: string;
+    submitText?: string;
+    onSubmit: (apiKey: { name: string }) => void;
+    onCancel: () => void;
+  }
 
-  export let onSubmit: (apiKey: { name: string }) => void;
-  export let onCancel: () => void;
+  let {
+    apiKey = $bindable(),
+    title,
+    cancelText = $t('cancel'),
+    submitText = $t('save'),
+    onSubmit,
+    onCancel,
+  }: Props = $props();
 
   const handleSubmit = () => {
     if (apiKey.name) {
@@ -23,17 +33,23 @@
       });
     }
   };
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+    handleSubmit();
+  };
 </script>
 
 <FullScreenModal {title} icon={mdiKeyVariant} onClose={() => onCancel()}>
-  <form on:submit|preventDefault={handleSubmit} autocomplete="off" id="api-key-form">
+  <form {onsubmit} autocomplete="off" id="api-key-form">
     <div class="mb-4 flex flex-col gap-2">
       <label class="immich-form-label" for="name">{$t('name')}</label>
       <input class="immich-form-input" id="name" name="name" type="text" bind:value={apiKey.name} />
     </div>
   </form>
-  <svelte:fragment slot="sticky-bottom">
-    <Button color="gray" fullwidth on:click={() => onCancel()}>{cancelText}</Button>
+
+  {#snippet stickyBottom()}
+    <Button color="gray" fullwidth onclick={() => onCancel()}>{cancelText}</Button>
     <Button type="submit" fullwidth form="api-key-form">{submitText}</Button>
-  </svelte:fragment>
+  {/snippet}
 </FullScreenModal>