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

web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte

@@ -15,10 +15,14 @@
   import UserAvatar from '../user-avatar.svelte';
   import AvatarSelector from './avatar-selector.svelte';
 
-  export let onLogout: () => void;
-  export let onClose: () => void = () => {};
+  interface Props {
+    onLogout: () => void;
+    onClose?: () => void;
+  }
 
-  let isShowSelectAvatar = false;
+  let { onLogout, onClose = () => {} }: Props = $props();
+
+  let isShowSelectAvatar = $state(false);
 
   const handleSaveProfile = async (color: UserAvatarColor) => {
     try {
@@ -60,7 +64,7 @@
           class="border"
           size="12"
           padding="2"
-          on:click={() => (isShowSelectAvatar = true)}
+          onclick={() => (isShowSelectAvatar = true)}
         />
       </div>
     </div>
@@ -72,7 +76,7 @@
     </div>
 
     <div class="flex flex-col gap-1">
-      <Button href={AppRoute.USER_SETTINGS} on:click={onClose} color="dark-gray" size="sm" shadow={false} border>
+      <Button href={AppRoute.USER_SETTINGS} onclick={onClose} color="dark-gray" size="sm" shadow={false} border>
         <div class="flex place-content-center place-items-center text-center gap-2 px-2">
           <Icon path={mdiCog} size="18" ariaHidden />
           {$t('account_settings')}
@@ -81,7 +85,7 @@
       {#if $user.isAdmin}
         <Button
           href={AppRoute.ADMIN_USER_MANAGEMENT}
-          on:click={onClose}
+          onclick={onClose}
           color="dark-gray"
           size="sm"
           shadow={false}
@@ -101,7 +105,7 @@
     <button
       type="button"
       class="flex w-full place-content-center place-items-center gap-2 py-3 font-medium text-gray-500 hover:bg-immich-primary/10 dark:text-gray-300"
-      on:click={onLogout}
+      onclick={onLogout}
     >
       <Icon path={mdiLogout} size={24} />
       {$t('sign_out')}</button

web/src/lib/components/shared-components/navigation-bar/avatar-selector.svelte

@@ -4,9 +4,13 @@
   import FullScreenModal from '../full-screen-modal.svelte';
   import UserAvatar from '../user-avatar.svelte';
 
-  export let user: UserResponseDto;
-  export let onClose: () => void;
-  export let onChoose: (color: UserAvatarColor) => void;
+  interface Props {
+    user: UserResponseDto;
+    onClose: () => void;
+    onChoose: (color: UserAvatarColor) => void;
+  }
+
+  let { user, onClose, onChoose }: Props = $props();
 
   const colors: UserAvatarColor[] = Object.values(UserAvatarColor);
 </script>
@@ -15,7 +19,7 @@
   <div class="flex items-center justify-center mt-4">
     <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
       {#each colors as color}
-        <button type="button" on:click={() => onChoose(color)}>
+        <button type="button" onclick={() => onChoose(color)}>
           <UserAvatar label={color} {user} {color} size="xl" showProfileImage={false} />
         </button>
       {/each}

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -21,20 +21,24 @@
   import HelpAndFeedbackModal from '$lib/components/shared-components/help-and-feedback-modal.svelte';
   import { onMount } from 'svelte';
 
-  export let showUploadButton = true;
-  export let onUploadClick: () => void;
+  interface Props {
+    showUploadButton?: boolean;
+    onUploadClick: () => void;
+  }
 
-  let shouldShowAccountInfo = false;
-  let shouldShowAccountInfoPanel = false;
-  let shouldShowHelpPanel = false;
-  let innerWidth: number;
+  let { showUploadButton = true, onUploadClick }: Props = $props();
+
+  let shouldShowAccountInfo = $state(false);
+  let shouldShowAccountInfoPanel = $state(false);
+  let shouldShowHelpPanel = $state(false);
+  let innerWidth: number = $state(0);
 
   const onLogout = async () => {
     const { redirectUri } = await logout();
     await handleLogout(redirectUri);
   };
 
-  let aboutInfo: ServerAboutResponseDto;
+  let aboutInfo: ServerAboutResponseDto | undefined = $state();
 
   onMount(async () => {
     aboutInfo = await getAboutInfo();
@@ -43,7 +47,7 @@
 
 <svelte:window bind:innerWidth />
 
-{#if shouldShowHelpPanel}
+{#if shouldShowHelpPanel && aboutInfo}
   <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} info={aboutInfo} />
 {/if}
 
@@ -71,6 +75,7 @@
             title={$t('go_to_search')}
             icon={mdiMagnify}
             padding="2"
+            onclick={() => {}}
           />
         {/if}
 
@@ -85,20 +90,20 @@
             id="support-feedback-button"
             title={$t('support_and_feedback')}
             icon={mdiHelpCircleOutline}
-            on:click={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
+            onclick={() => (shouldShowHelpPanel = !shouldShowHelpPanel)}
             padding="1"
           />
         </div>
 
         {#if !$page.url.pathname.includes('/admin') && showUploadButton}
-          <LinkButton on:click={onUploadClick} class="hidden lg:block">
+          <LinkButton onclick={onUploadClick} class="hidden lg:block">
             <div class="flex gap-2">
               <Icon path={mdiTrayArrowUp} size="1.5em" />
               <span>{$t('upload')}</span>
             </div>
           </LinkButton>
           <CircleIconButton
-            on:click={onUploadClick}
+            onclick={onUploadClick}
             title={$t('upload')}
             icon={mdiTrayArrowUp}
             class="lg:hidden"
@@ -115,11 +120,11 @@
           <button
             type="button"
             class="flex pl-2"
-            on:mouseover={() => (shouldShowAccountInfo = true)}
-            on:focus={() => (shouldShowAccountInfo = true)}
-            on:blur={() => (shouldShowAccountInfo = false)}
-            on:mouseleave={() => (shouldShowAccountInfo = false)}
-            on:click={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
+            onmouseover={() => (shouldShowAccountInfo = true)}
+            onfocus={() => (shouldShowAccountInfo = true)}
+            onblur={() => (shouldShowAccountInfo = false)}
+            onmouseleave={() => (shouldShowAccountInfo = false)}
+            onclick={() => (shouldShowAccountInfoPanel = !shouldShowAccountInfoPanel)}
           >
             {#key $user}
               <UserAvatar user={$user} size="md" showTitle={false} interactive />