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

web/src/routes/auth/onboarding/+page.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { run } from 'svelte/legacy';
+
   import { goto } from '$app/navigation';
   import { page } from '$app/stores';
   import OnboardingHello from '$lib/components/onboarding-page/onboarding-hello.svelte';
@@ -9,7 +11,7 @@
   import { retrieveServerConfig } from '$lib/stores/server-config.store';
   import { updateAdminOnboarding } from '@immich/sdk';
 
-  let index = 0;
+  let index = $state(0);
 
   interface OnboardingStep {
     name: string;
@@ -27,11 +29,11 @@
     { name: 'storage', component: OnboadingStorageTemplate },
   ];
 
-  $: {
+  run(() => {
     const stepState = $page.url.searchParams.get('step');
     const temporaryIndex = onboardingSteps.findIndex((step) => step.name === stepState);
     index = temporaryIndex >= 0 ? temporaryIndex : 0;
-  }
+  });
 
   const handleDoneClicked = async () => {
     if (index >= onboardingSteps.length - 1) {
@@ -50,6 +52,8 @@
       await goto(`${AppRoute.AUTH_ONBOARDING}?${QueryParameter.ONBOARDING_STEP}=${onboardingSteps[index].name}`);
     }
   };
+
+  const SvelteComponent = $derived(onboardingSteps[index].component);
 </script>
 
 <section id="onboarding-page" class="min-w-screen flex min-h-screen p-4">
@@ -61,11 +65,7 @@
       ></div>
     </div>
     <div class="w-full min-w-screen py-8 flex h-full place-content-center place-items-center">
-      <svelte:component
-        this={onboardingSteps[index].component}
-        onDone={handleDoneClicked}
-        onPrevious={handlePrevious}
-      />
+      <SvelteComponent onDone={handleDoneClicked} onPrevious={handlePrevious} />
     </div>
   </div>
 </section>