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

web/src/lib/components/onboarding-page/onboarding-card.svelte

@@ -1,9 +1,15 @@
 <script lang="ts">
   import Icon from '$lib/components/elements/icon.svelte';
+  import type { Snippet } from 'svelte';
   import { fade } from 'svelte/transition';
 
-  export let title: string | undefined = undefined;
-  export let icon: string | undefined = undefined;
+  interface Props {
+    title?: string | undefined;
+    icon?: string | undefined;
+    children?: Snippet;
+  }
+
+  let { title = undefined, icon = undefined, children }: Props = $props();
 </script>
 
 <div
@@ -23,5 +29,5 @@
       {/if}
     </div>
   {/if}
-  <slot />
+  {@render children?.()}
 </div>

web/src/lib/components/onboarding-page/onboarding-hello.svelte

@@ -7,7 +7,11 @@
   import { user } from '$lib/stores/user.store';
   import { t } from 'svelte-i18n';
 
-  export let onDone: () => void;
+  interface Props {
+    onDone: () => void;
+  }
+
+  let { onDone }: Props = $props();
 </script>
 
 <OnboardingCard>
@@ -18,7 +22,7 @@
   <p class="text-3xl pb-6 font-light">{$t('onboarding_welcome_description')}</p>
 
   <div class="w-full flex place-content-end">
-    <Button class="flex gap-2 place-content-center" on:click={() => onDone()}>
+    <Button class="flex gap-2 place-content-center" onclick={() => onDone()}>
       <p>{$t('theme')}</p>
       <Icon path={mdiArrowRight} size="18" />
     </Button>

web/src/lib/components/onboarding-page/onboarding-privacy.svelte

@@ -10,10 +10,15 @@
   import { t } from 'svelte-i18n';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
 
-  export let onDone: () => void;
-  export let onPrevious: () => void;
+  interface Props {
+    onDone: () => void;
+    onPrevious: () => void;
+  }
 
-  let config: SystemConfigDto | null = null;
+  let { onDone, onPrevious }: Props = $props();
+
+  let config: SystemConfigDto | null = $state(null);
+  let adminSettingsComponent = $state<ReturnType<typeof AdminSettings>>();
 
   onMount(async () => {
     config = await getConfig();
@@ -26,38 +31,42 @@
   </p>
 
   {#if config && $user}
-    <AdminSettings bind:config let:handleSave>
-      <SettingSwitch
-        title={$t('admin.map_settings')}
-        subtitle={$t('admin.map_implications')}
-        bind:checked={config.map.enabled}
-      />
-      <SettingSwitch
-        title={$t('admin.version_check_settings')}
-        subtitle={$t('admin.version_check_implications')}
-        bind:checked={config.newVersionCheck.enabled}
-      />
-      <div class="flex pt-4">
-        <div class="w-full flex place-content-start">
-          <Button class="flex gap-2 place-content-center" on:click={() => onPrevious()}>
-            <Icon path={mdiArrowLeft} size="18" />
-            <p>{$t('theme')}</p>
-          </Button>
-        </div>
-        <div class="flex w-full place-content-end">
-          <Button
-            on:click={() => {
-              handleSave({ map: config?.map, newVersionCheck: config?.newVersionCheck });
-              onDone();
-            }}
-          >
-            <span class="flex place-content-center place-items-center gap-2">
-              {$t('admin.storage_template_settings')}
-              <Icon path={mdiArrowRight} size="18" />
-            </span>
-          </Button>
-        </div>
-      </div>
+    <AdminSettings bind:config bind:this={adminSettingsComponent}>
+      {#snippet children()}
+        {#if config}
+          <SettingSwitch
+            title={$t('admin.map_settings')}
+            subtitle={$t('admin.map_implications')}
+            bind:checked={config.map.enabled}
+          />
+          <SettingSwitch
+            title={$t('admin.version_check_settings')}
+            subtitle={$t('admin.version_check_implications')}
+            bind:checked={config.newVersionCheck.enabled}
+          />
+          <div class="flex pt-4">
+            <div class="w-full flex place-content-start">
+              <Button class="flex gap-2 place-content-center" onclick={() => onPrevious()}>
+                <Icon path={mdiArrowLeft} size="18" />
+                <p>{$t('theme')}</p>
+              </Button>
+            </div>
+            <div class="flex w-full place-content-end">
+              <Button
+                onclick={() => {
+                  adminSettingsComponent?.handleSave({ map: config?.map, newVersionCheck: config?.newVersionCheck });
+                  onDone();
+                }}
+              >
+                <span class="flex place-content-center place-items-center gap-2">
+                  {$t('admin.storage_template_settings')}
+                  <Icon path={mdiArrowRight} size="18" />
+                </span>
+              </Button>
+            </div>
+          </div>
+        {/if}
+      {/snippet}
     </AdminSettings>
   {/if}
 </OnboardingCard>

web/src/lib/components/onboarding-page/onboarding-storage-template.svelte

@@ -12,10 +12,15 @@
   import { t } from 'svelte-i18n';
   import FormatMessage from '$lib/components/i18n/format-message.svelte';
 
-  export let onDone: () => void;
-  export let onPrevious: () => void;
+  interface Props {
+    onDone: () => void;
+    onPrevious: () => void;
+  }
 
-  let config: SystemConfigDto | null = null;
+  let { onDone, onPrevious }: Props = $props();
+
+  let config: SystemConfigDto | undefined = $state();
+  let adminSettingsComponent = $state<ReturnType<typeof AdminSettings>>();
 
   onMount(async () => {
     config = await getConfig();
@@ -24,45 +29,51 @@
 
 <OnboardingCard title={$t('admin.storage_template_settings')} icon={mdiHarddisk}>
   <p>
-    <FormatMessage key="admin.storage_template_onboarding_description" let:message>
-      <a class="underline" href="https://immich.app/docs/administration/storage-template">{message}</a>
+    <FormatMessage key="admin.storage_template_onboarding_description">
+      {#snippet children({ message })}
+        <a class="underline" href="https://immich.app/docs/administration/storage-template">{message}</a>
+      {/snippet}
     </FormatMessage>
   </p>
 
   {#if config && $user}
-    <AdminSettings bind:config let:defaultConfig let:savedConfig let:handleSave let:handleReset>
-      <StorageTemplateSettings
-        minified
-        disabled={$featureFlags.configFile}
-        {config}
-        {defaultConfig}
-        {savedConfig}
-        onSave={(config) => handleSave(config)}
-        onReset={(options) => handleReset(options)}
-        duration={0}
-      >
-        <div class="flex pt-4">
-          <div class="w-full flex place-content-start">
-            <Button class="flex gap-2 place-content-center" on:click={() => onPrevious()}>
-              <Icon path={mdiArrowLeft} size="18" />
-              <p>{$t('theme')}</p>
-            </Button>
-          </div>
-          <div class="flex w-full place-content-end">
-            <Button
-              on:click={() => {
-                handleSave({ storageTemplate: config?.storageTemplate });
-                onDone();
-              }}
-            >
-              <span class="flex place-content-center place-items-center gap-2">
-                {$t('done')}
-                <Icon path={mdiCheck} size="18" />
-              </span>
-            </Button>
-          </div>
-        </div>
-      </StorageTemplateSettings>
+    <AdminSettings bind:config bind:this={adminSettingsComponent}>
+      {#snippet children({ defaultConfig, savedConfig })}
+        {#if config}
+          <StorageTemplateSettings
+            minified
+            disabled={$featureFlags.configFile}
+            {config}
+            {defaultConfig}
+            {savedConfig}
+            onSave={(config) => adminSettingsComponent?.handleSave(config)}
+            onReset={(options) => adminSettingsComponent?.handleReset(options)}
+            duration={0}
+          >
+            <div class="flex pt-4">
+              <div class="w-full flex place-content-start">
+                <Button class="flex gap-2 place-content-center" onclick={() => onPrevious()}>
+                  <Icon path={mdiArrowLeft} size="18" />
+                  <p>{$t('theme')}</p>
+                </Button>
+              </div>
+              <div class="flex w-full place-content-end">
+                <Button
+                  onclick={() => {
+                    adminSettingsComponent?.handleSave({ storageTemplate: config?.storageTemplate });
+                    onDone();
+                  }}
+                >
+                  <span class="flex place-content-center place-items-center gap-2">
+                    {$t('done')}
+                    <Icon path={mdiCheck} size="18" />
+                  </span>
+                </Button>
+              </div>
+            </div>
+          </StorageTemplateSettings>
+        {/if}
+      {/snippet}
     </AdminSettings>
   {/if}
 </OnboardingCard>

web/src/lib/components/onboarding-page/onboarding-theme.svelte

@@ -8,7 +8,11 @@
   import { Theme } from '$lib/constants';
   import { t } from 'svelte-i18n';
 
-  export let onDone: () => void;
+  interface Props {
+    onDone: () => void;
+  }
+
+  let { onDone }: Props = $props();
 </script>
 
 <OnboardingCard icon={mdiThemeLightDark} title={$t('color_theme')}>
@@ -20,7 +24,7 @@
     <button
       type="button"
       class="w-1/2 aspect-square bg-immich-bg rounded-3xl transition-all shadow-sm hover:shadow-xl border-[3px] border-immich-dark-primary/80 border-immich-primary dark:border dark:border-transparent"
-      on:click={() => ($colorTheme.value = Theme.LIGHT)}
+      onclick={() => ($colorTheme.value = Theme.LIGHT)}
     >
       <div
         class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-primary"
@@ -32,7 +36,7 @@
     <button
       type="button"
       class="w-1/2 aspect-square bg-immich-dark-bg rounded-3xl dark:border-[3px] dark:border-immich-dark-primary/80 dark:border-immich-dark-primary border border-transparent"
-      on:click={() => ($colorTheme.value = Theme.DARK)}
+      onclick={() => ($colorTheme.value = Theme.DARK)}
     >
       <div
         class="flex flex-col place-items-center place-content-center justify-around h-full w-full text-immich-dark-primary"
@@ -45,7 +49,7 @@
 
   <div class="flex">
     <div class="w-full flex place-content-end">
-      <Button class="flex gap-2 place-content-center" on:click={() => onDone()}>
+      <Button class="flex gap-2 place-content-center" onclick={() => onDone()}>
         <p>{$t('privacy')}</p>
         <Icon path={mdiArrowRight} size="18" />
       </Button>