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

web/src/lib/components/layouts/user-page-layout.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   export const headerId = 'user-page-header';
 </script>
 
@@ -7,16 +7,36 @@
   import NavigationBar from '../shared-components/navigation-bar/navigation-bar.svelte';
   import SideBar from '../shared-components/side-bar/side-bar.svelte';
   import AdminSideBar from '../shared-components/side-bar/admin-side-bar.svelte';
+  import type { Snippet } from 'svelte';
 
-  export let hideNavbar = false;
-  export let showUploadButton = false;
-  export let title: string | undefined = undefined;
-  export let description: string | undefined = undefined;
-  export let scrollbar = true;
-  export let admin = false;
+  interface Props {
+    hideNavbar?: boolean;
+    showUploadButton?: boolean;
+    title?: string | undefined;
+    description?: string | undefined;
+    scrollbar?: boolean;
+    admin?: boolean;
+    header?: Snippet;
+    sidebar?: Snippet;
+    buttons?: Snippet;
+    children?: Snippet;
+  }
 
-  $: scrollbarClass = scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden';
-  $: hasTitleClass = title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full';
+  let {
+    hideNavbar = false,
+    showUploadButton = false,
+    title = undefined,
+    description = undefined,
+    scrollbar = true,
+    admin = false,
+    header,
+    sidebar,
+    buttons,
+    children,
+  }: Props = $props();
+
+  let scrollbarClass = $derived(scrollbar ? 'immich-scrollbar p-2 pb-8' : 'scrollbar-hidden');
+  let hasTitleClass = $derived(title ? 'top-16 h-[calc(100%-theme(spacing.16))]' : 'top-0 h-full');
 </script>
 
 <header>
@@ -24,22 +44,20 @@
     <NavigationBar {showUploadButton} onUploadClick={() => openFileUploadDialog()} />
   {/if}
 
-  <slot name="header" />
+  {@render header?.()}
 </header>
 <main
   tabindex="-1"
   class="relative grid h-screen grid-cols-[theme(spacing.18)_auto] overflow-hidden bg-immich-bg pt-[var(--navbar-height)] dark:bg-immich-dark-bg md:grid-cols-[theme(spacing.64)_auto]"
 >
-  <slot name="sidebar">
-    {#if admin}
-      <AdminSideBar />
-    {:else}
-      <SideBar />
-    {/if}
-  </slot>
+  {#if sidebar}{@render sidebar()}{:else if admin}
+    <AdminSideBar />
+  {:else}
+    <SideBar />
+  {/if}
 
   <section class="relative">
-    {#if title || $$slots.buttons}
+    {#if title || buttons}
       <div
         class="absolute flex h-16 w-full place-items-center justify-between border-b p-4 dark:border-immich-dark-gray dark:text-immich-dark-fg"
       >
@@ -51,12 +69,12 @@
             <p class="text-sm text-gray-400 dark:text-gray-600">{description}</p>
           {/if}
         </div>
-        <slot name="buttons" />
+        {@render buttons?.()}
       </div>
     {/if}
 
     <div class="{scrollbarClass} scrollbar-stable absolute {hasTitleClass} w-full overflow-y-auto">
-      <slot />
+      {@render children?.()}
     </div>
   </section>
 </main>