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

2025-11-28 20:09:53 +09:00 · 2024-11-14 08:43:25 -06:00
parent 9203a61709
commit 0b3742cf13
310 changed files with 6435 additions and 4176 deletions
--- a/web/src/lib/components/user-settings-page/app-settings.svelte
+++ b/web/src/lib/components/user-settings-page/app-settings.svelte
@@ -19,26 +19,7 @@
  import { fade } from 'svelte/transition';
  import { invalidateAll } from '$app/navigation';

-  let time = new Date();
-
-  $: formattedDate = time.toLocaleString(editedLocale, {
-    year: 'numeric',
-    month: '2-digit',
-    day: '2-digit',
-  });
-  $: timePortion = time.toLocaleString(editedLocale, {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
-  $: selectedDate = `${formattedDate} ${timePortion}`;
-  $: editedLocale = findLocale($locale).code;
-  // svelte-ignore reactive_declaration_non_reactive_property
-  $: selectedOption = {
-    value: findLocale(editedLocale).code || fallbackLocale.code,
-    label: findLocale(editedLocale).name || fallbackLocale.name,
-  };
-  $: closestLanguage = getClosestAvailableLocale([$lang], langCodes);
+  let time = $state(new Date());

  onMount(() => {
    const interval = setInterval(() => {
@@ -90,6 +71,27 @@
      $locale = newLocale;
    }
  };
+  let editedLocale = $derived(findLocale($locale).code);
+  let formattedDate = $derived(
+    time.toLocaleString(editedLocale, {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    }),
+  );
+  let timePortion = $derived(
+    time.toLocaleString(editedLocale, {
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    }),
+  );
+  let selectedDate = $derived(`${formattedDate} ${timePortion}`);
+  let selectedOption = $derived({
+    value: findLocale(editedLocale).code || fallbackLocale.code,
+    label: findLocale(editedLocale).name || fallbackLocale.name,
+  });
+  let closestLanguage = $derived(getClosestAvailableLocale([$lang], langCodes));
 </script>

 <section class="my-4">
--- a/web/src/lib/components/user-settings-page/change-password-settings.svelte
+++ b/web/src/lib/components/user-settings-page/change-password-settings.svelte
@@ -8,14 +8,13 @@

  import Button from '$lib/components/elements/buttons/button.svelte';
  import type { HttpError } from '@sveltejs/kit';
-  import SettingInputField, {
-    SettingInputFieldType,
-  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
  import { t } from 'svelte-i18n';
+  import { SettingInputFieldType } from '$lib/constants';

-  let password = '';
-  let newPassword = '';
-  let confirmPassword = '';
+  let password = $state('');
+  let newPassword = $state('');
+  let confirmPassword = $state('');

  const handleChangePassword = async () => {
    try {
@@ -37,11 +36,15 @@
      });
    }
  };
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+  };
 </script>

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" on:submit|preventDefault>
+    <form autocomplete="off" {onsubmit}>
      <div class="ml-4 mt-4 flex flex-col gap-4">
        <SettingInputField
          inputType={SettingInputFieldType.PASSWORD}
@@ -72,7 +75,7 @@
            type="submit"
            size="sm"
            disabled={!(password && newPassword && newPassword === confirmPassword)}
-            on:click={() => handleChangePassword()}>{$t('save')}</Button
+            onclick={() => handleChangePassword()}>{$t('save')}</Button
          >
        </div>
      </div>
--- a/web/src/lib/components/user-settings-page/device-card.svelte
+++ b/web/src/lib/components/user-settings-page/device-card.svelte
@@ -17,8 +17,12 @@
  import { DateTime, type ToRelativeCalendarOptions } from 'luxon';
  import { t } from 'svelte-i18n';

-  export let device: SessionResponseDto;
-  export let onDelete: (() => void) | undefined = undefined;
+  interface Props {
+    device: SessionResponseDto;
+    onDelete?: (() => void) | undefined;
+  }
+
+  let { device, onDelete = undefined }: Props = $props();

  const options: ToRelativeCalendarOptions = {
    unit: 'days',
@@ -71,7 +75,7 @@
          icon={mdiTrashCanOutline}
          title={$t('log_out')}
          size="16"
-          on:click={onDelete}
+          onclick={onDelete}
        />
      </div>
    {/if}
--- a/web/src/lib/components/user-settings-page/device-list.svelte
+++ b/web/src/lib/components/user-settings-page/device-list.svelte
@@ -7,12 +7,16 @@
  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
  import { t } from 'svelte-i18n';

-  export let devices: SessionResponseDto[];
+  interface Props {
+    devices: SessionResponseDto[];
+  }
+
+  let { devices = $bindable() }: Props = $props();

  const refresh = () => getSessions().then((_devices) => (devices = _devices));

-  $: currentDevice = devices.find((device) => device.current);
-  $: otherDevices = devices.filter((device) => !device.current);
+  let currentDevice = $derived(devices.find((device) => device.current));
+  let otherDevices = $derived(devices.filter((device) => !device.current));

  const handleDelete = async (device: SessionResponseDto) => {
    const isConfirmed = await dialogController.show({
@@ -78,7 +82,7 @@
      {$t('log_out_all_devices').toUpperCase()}
    </h3>
    <div class="flex justify-end">
-      <Button color="red" size="sm" on:click={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
+      <Button color="red" size="sm" onclick={handleDeleteAll}>{$t('log_out_all_devices')}</Button>
    </div>
  {/if}
 </section>
--- a/web/src/lib/components/user-settings-page/download-settings.svelte
+++ b/web/src/lib/components/user-settings-page/download-settings.svelte
@@ -10,14 +10,13 @@
  import { preferences } from '$lib/stores/user.store';
  import Button from '../elements/buttons/button.svelte';
  import { t } from 'svelte-i18n';
-  import SettingInputField, {
-    SettingInputFieldType,
-  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
  import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
  import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
+  import { SettingInputFieldType } from '$lib/constants';

-  let archiveSize = convertFromBytes($preferences?.download?.archiveSize || 4, ByteUnit.GiB);
-  let includeEmbeddedVideos = $preferences?.download?.includeEmbeddedVideos || false;
+  let archiveSize = $state(convertFromBytes($preferences?.download?.archiveSize || 4, ByteUnit.GiB));
+  let includeEmbeddedVideos = $state($preferences?.download?.includeEmbeddedVideos || false);

  const handleSave = async () => {
    try {
@@ -36,16 +35,20 @@
      handleError(error, $t('errors.unable_to_update_settings'));
    }
  };
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+  };
 </script>

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" on:submit|preventDefault>
+    <form autocomplete="off" {onsubmit}>
      <div class="ml-4 mt-4 flex flex-col gap-4">
        <SettingInputField
          inputType={SettingInputFieldType.NUMBER}
          label={$t('archive_size')}
-          desc={$t('archive_size_description')}
+          description={$t('archive_size_description')}
          bind:value={archiveSize}
        />
        <SettingSwitch
@@ -54,7 +57,7 @@
          bind:checked={includeEmbeddedVideos}
        ></SettingSwitch>
        <div class="flex justify-end">
-          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
+          <Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
        </div>
      </div>
    </form>
--- a/web/src/lib/components/user-settings-page/feature-settings.svelte
+++ b/web/src/lib/components/user-settings-page/feature-settings.svelte
@@ -14,22 +14,22 @@
  import SettingAccordion from '$lib/components/shared-components/settings/setting-accordion.svelte';

  // Folders
-  let foldersEnabled = $preferences?.folders?.enabled ?? false;
-  let foldersSidebar = $preferences?.folders?.sidebarWeb ?? false;
+  let foldersEnabled = $state($preferences?.folders?.enabled ?? false);
+  let foldersSidebar = $state($preferences?.folders?.sidebarWeb ?? false);

  // Memories
-  let memoriesEnabled = $preferences?.memories?.enabled ?? true;
+  let memoriesEnabled = $state($preferences?.memories?.enabled ?? true);

  // People
-  let peopleEnabled = $preferences?.people?.enabled ?? false;
-  let peopleSidebar = $preferences?.people?.sidebarWeb ?? false;
+  let peopleEnabled = $state($preferences?.people?.enabled ?? false);
+  let peopleSidebar = $state($preferences?.people?.sidebarWeb ?? false);

  // Ratings
-  let ratingsEnabled = $preferences?.ratings?.enabled ?? false;
+  let ratingsEnabled = $state($preferences?.ratings?.enabled ?? false);

  // Tags
-  let tagsEnabled = $preferences?.tags?.enabled ?? false;
-  let tagsSidebar = $preferences?.tags?.sidebarWeb ?? false;
+  let tagsEnabled = $state($preferences?.tags?.enabled ?? false);
+  let tagsSidebar = $state($preferences?.tags?.sidebarWeb ?? false);

  const handleSave = async () => {
    try {
@@ -50,11 +50,15 @@
      handleError(error, $t('errors.unable_to_update_settings'));
    }
  };
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+  };
 </script>

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" on:submit|preventDefault>
+    <form autocomplete="off" {onsubmit}>
      <div class="ml-4 mt-4 flex flex-col">
        <SettingAccordion key="folders" title={$t('folders')} subtitle={$t('folders_feature_description')}>
          <div class="ml-4 mt-6">
@@ -116,7 +120,7 @@
        </SettingAccordion>

        <div class="flex justify-end">
-          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
+          <Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
        </div>
      </div>
    </form>
--- a/web/src/lib/components/user-settings-page/notifications-settings.svelte
+++ b/web/src/lib/components/user-settings-page/notifications-settings.svelte
@@ -12,9 +12,9 @@
  import Button from '../elements/buttons/button.svelte';
  import { t } from 'svelte-i18n';

-  let emailNotificationsEnabled = $preferences?.emailNotifications?.enabled ?? true;
-  let albumInviteNotificationEnabled = $preferences?.emailNotifications?.albumInvite ?? true;
-  let albumUpdateNotificationEnabled = $preferences?.emailNotifications?.albumUpdate ?? true;
+  let emailNotificationsEnabled = $state($preferences?.emailNotifications?.enabled ?? true);
+  let albumInviteNotificationEnabled = $state($preferences?.emailNotifications?.albumInvite ?? true);
+  let albumUpdateNotificationEnabled = $state($preferences?.emailNotifications?.albumUpdate ?? true);

  const handleSave = async () => {
    try {
@@ -37,11 +37,15 @@
      handleError(error, $t('errors.unable_to_update_settings'));
    }
  };
+
+  const onsubmit = (event: Event) => {
+    event.preventDefault();
+  };
 </script>

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" on:submit|preventDefault>
+    <form autocomplete="off" {onsubmit}>
      <div class="ml-4 mt-4 flex flex-col gap-4">
        <div class="ml-4">
          <SettingSwitch
@@ -67,7 +71,7 @@
        </div>

        <div class="flex justify-end">
-          <Button type="submit" size="sm" on:click={() => handleSave()}>{$t('save')}</Button>
+          <Button type="submit" size="sm" onclick={() => handleSave()}>{$t('save')}</Button>
        </div>
      </div>
    </form>
--- a/web/src/lib/components/user-settings-page/oauth-settings.svelte
+++ b/web/src/lib/components/user-settings-page/oauth-settings.svelte
@@ -11,9 +11,13 @@
  import { notificationController, NotificationType } from '../shared-components/notification/notification';
  import { t } from 'svelte-i18n';

-  export let user: UserAdminResponseDto;
+  interface Props {
+    user: UserAdminResponseDto;
+  }

-  let loading = true;
+  let { user = $bindable() }: Props = $props();
+
+  let loading = $state(true);

  onMount(async () => {
    if (oauth.isCallback(window.location)) {
@@ -58,9 +62,9 @@
        </div>
      {:else if $featureFlags.oauth}
        {#if user.oauthId}
-          <Button size="sm" on:click={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
+          <Button size="sm" onclick={() => handleUnlink()}>{$t('unlink_oauth')}</Button>
        {:else}
-          <Button size="sm" on:click={() => oauth.authorize(window.location)}>{$t('link_to_oauth')}</Button>
+          <Button size="sm" onclick={() => oauth.authorize(window.location)}>{$t('link_to_oauth')}</Button>
        {/if}
      {/if}
    </div>
--- a/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
+++ b/web/src/lib/components/user-settings-page/partner-selection-modal.svelte
@@ -6,12 +6,16 @@
  import Button from '../elements/buttons/button.svelte';
  import UserAvatar from '../shared-components/user-avatar.svelte';

-  export let user: UserResponseDto;
-  export let onClose: () => void;
-  export let onAddUsers: (users: UserResponseDto[]) => void;
+  interface Props {
+    user: UserResponseDto;
+    onClose: () => void;
+    onAddUsers: (users: UserResponseDto[]) => void;
+  }

-  let availableUsers: UserResponseDto[] = [];
-  let selectedUsers: UserResponseDto[] = [];
+  let { user, onClose, onAddUsers }: Props = $props();
+
+  let availableUsers: UserResponseDto[] = $state([]);
+  let selectedUsers: UserResponseDto[] = $state([]);

  onMount(async () => {
    let users = await searchUsers();
@@ -38,7 +42,7 @@
      {#each availableUsers as user}
        <button
          type="button"
-          on:click={() => selectUser(user)}
+          onclick={() => selectUser(user)}
          class="flex w-full place-items-center gap-4 px-5 py-4 transition-all hover:bg-gray-200 dark:hover:bg-gray-700 rounded-xl"
        >
          {#if selectedUsers.includes(user)}
@@ -68,7 +72,7 @@

    {#if selectedUsers.length > 0}
      <div class="pt-5">
-        <Button size="sm" fullwidth on:click={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
+        <Button size="sm" fullwidth onclick={() => onAddUsers(selectedUsers)}>{$t('add')}</Button>
      </div>
    {/if}
  </div>
--- a/web/src/lib/components/user-settings-page/partner-settings.svelte
+++ b/web/src/lib/components/user-settings-page/partner-settings.svelte
@@ -27,11 +27,15 @@
    inTimeline: boolean;
  }

-  export let user: UserResponseDto;
+  interface Props {
+    user: UserResponseDto;
+  }

-  let createPartnerFlag = false;
+  let { user }: Props = $props();
+
+  let createPartnerFlag = $state(false);
  // let removePartnerDto: PartnerResponseDto | null = null;
-  let partners: Array<PartnerSharing> = [];
+  let partners: Array<PartnerSharing> = $state([]);

  onMount(async () => {
    await refreshPartners();
@@ -139,7 +143,7 @@

          {#if partner.sharedByMe}
            <CircleIconButton
-              on:click={() => handleRemovePartner(partner.user)}
+              onclick={() => handleRemovePartner(partner.user)}
              icon={mdiClose}
              size={'16'}
              title={$t('stop_sharing_photos_with_user')}
@@ -186,7 +190,7 @@
  {/if}

  <div class="flex justify-end mt-5">
-    <Button size="sm" on:click={() => (createPartnerFlag = true)}>{$t('add_partner')}</Button>
+    <Button size="sm" onclick={() => (createPartnerFlag = true)}>{$t('add_partner')}</Button>
  </div>
 </section>

--- a/web/src/lib/components/user-settings-page/user-api-key-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-api-key-list.svelte
@@ -19,11 +19,15 @@
  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
  import { t } from 'svelte-i18n';

-  export let keys: ApiKeyResponseDto[];
+  interface Props {
+    keys: ApiKeyResponseDto[];
+  }

-  let newKey: { name: string } | null = null;
-  let editKey: ApiKeyResponseDto | null = null;
-  let secret = '';
+  let { keys = $bindable() }: Props = $props();
+
+  let newKey: { name: string } | null = $state(null);
+  let editKey: ApiKeyResponseDto | null = $state(null);
+  let secret = $state('');

  const format: Intl.DateTimeFormatOptions = {
    month: 'short',
@@ -118,7 +122,7 @@
 <section class="my-4">
  <div class="flex flex-col gap-2" in:fade={{ duration: 500 }}>
    <div class="mb-2 flex justify-end">
-      <Button size="sm" on:click={() => (newKey = { name: $t('api_key') })}>{$t('new_api_key')}</Button>
+      <Button size="sm" onclick={() => (newKey = { name: $t('api_key') })}>{$t('new_api_key')}</Button>
    </div>

    {#if keys.length > 0}
@@ -152,14 +156,14 @@
                    icon={mdiPencilOutline}
                    title={$t('edit_key')}
                    size="16"
-                    on:click={() => (editKey = key)}
+                    onclick={() => (editKey = key)}
                  />
                  <CircleIconButton
                    color="primary"
                    icon={mdiTrashCanOutline}
                    title={$t('delete_key')}
                    size="16"
-                    on:click={() => handleDelete(key)}
+                    onclick={() => handleDelete(key)}
                  />
                </td>
              </tr>
--- a/web/src/lib/components/user-settings-page/user-profile-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-profile-settings.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
+  import { createBubbler, preventDefault } from 'svelte/legacy';
+
+  const bubble = createBubbler();
  import {
    notificationController,
    NotificationType,
  } from '$lib/components/shared-components/notification/notification';
-  import SettingInputField, {
-    SettingInputFieldType,
-  } from '$lib/components/shared-components/settings/setting-input-field.svelte';
+  import SettingInputField from '$lib/components/shared-components/settings/setting-input-field.svelte';
  import { user } from '$lib/stores/user.store';
  import { updateMyUser } from '@immich/sdk';
  import { cloneDeep } from 'lodash-es';
@@ -13,8 +14,9 @@
  import { handleError } from '../../utils/handle-error';
  import Button from '../elements/buttons/button.svelte';
  import { t } from 'svelte-i18n';
+  import { SettingInputFieldType } from '$lib/constants';

-  let editedUser = cloneDeep($user);
+  let editedUser = $state(cloneDeep($user));

  const handleSaveProfile = async () => {
    try {
@@ -40,7 +42,7 @@

 <section class="my-4">
  <div in:fade={{ duration: 500 }}>
-    <form autocomplete="off" on:submit|preventDefault>
+    <form autocomplete="off" onsubmit={preventDefault(bubble('submit'))}>
      <div class="ml-4 mt-4 flex flex-col gap-4">
        <SettingInputField
          inputType={SettingInputFieldType.TEXT}
@@ -67,7 +69,7 @@
        />

        <div class="flex justify-end">
-          <Button type="submit" size="sm" on:click={() => handleSaveProfile()}>{$t('save')}</Button>
+          <Button type="submit" size="sm" onclick={() => handleSaveProfile()}>{$t('save')}</Button>
        </div>
      </div>
    </form>
--- a/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
+++ b/web/src/lib/components/user-settings-page/user-purchase-settings.svelte
@@ -24,8 +24,8 @@
  import { setSupportBadgeVisibility } from '$lib/utils/purchase-utils';
  const { isPurchased } = purchaseStore;

-  let isServerProduct = false;
-  let serverPurchaseInfo: LicenseResponseDto | null = null;
+  let isServerProduct = $state(false);
+  let serverPurchaseInfo: LicenseResponseDto | null = $state(null);

  const checkPurchaseInfo = async () => {
    const serverInfo = await getAboutInfo();
@@ -145,7 +145,7 @@

        {#if $user.isAdmin}
          <div class="text-right mt-4">
-            <Button size="sm" color="red" on:click={removeServerProductKey}>{$t('purchase_button_remove_key')}</Button>
+            <Button size="sm" color="red" onclick={removeServerProductKey}>{$t('purchase_button_remove_key')}</Button>
          </div>
        {/if}
      {:else}
@@ -169,8 +169,7 @@
        </div>

        <div class="text-right mt-4">
-          <Button size="sm" color="red" on:click={removeIndividualProductKey}>{$t('purchase_button_remove_key')}</Button
-          >
+          <Button size="sm" color="red" onclick={removeIndividualProductKey}>{$t('purchase_button_remove_key')}</Button>
        </div>
      {/if}
    {:else}
--- a/web/src/lib/components/user-settings-page/user-settings-list.svelte
+++ b/web/src/lib/components/user-settings-page/user-settings-list.svelte
@@ -33,8 +33,12 @@
    mdiTwoFactorAuthentication,
  } from '@mdi/js';

-  export let keys: ApiKeyResponseDto[] = [];
-  export let sessions: SessionResponseDto[] = [];
+  interface Props {
+    keys?: ApiKeyResponseDto[];
+    sessions?: SessionResponseDto[];
+  }
+
+  let { keys = $bindable([]), sessions = $bindable([]) }: Props = $props();

  let oauthOpen =
    oauth.isCallback(window.location) ||