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

web/src/lib/components/shared-components/full-screen-modal.svelte

@@ -4,36 +4,52 @@
   import { fade } from 'svelte/transition';
   import ModalHeader from '$lib/components/shared-components/modal-header.svelte';
   import { generateId } from '$lib/utils/generate-id';
+  import type { Snippet } from 'svelte';
 
-  export let onClose: () => void;
-  export let title: string;
-  /**
-   * If true, the logo will be displayed next to the modal title.
-   */
-  export let showLogo = false;
-  /**
-   * Optional icon to display next to the modal title, if `showLogo` is false.
-   */
-  export let icon: string | undefined = undefined;
-  /**
-   * Sets the width of the modal.
-   *
-   * - `wide`: 48rem
-   * - `narrow`: 28rem
-   * - `auto`: fits the width of the modal content, up to a maximum of 32rem
-   */
-  export let width: 'extra-wide' | 'wide' | 'narrow' | 'auto' = 'narrow';
+  interface Props {
+    onClose: () => void;
+    title: string;
+    /**
+     * If true, the logo will be displayed next to the modal title.
+     */
+    showLogo?: boolean;
+    /**
+     * Optional icon to display next to the modal title, if `showLogo` is false.
+     */
+    icon?: string | undefined;
+    /**
+     * Sets the width of the modal.
+     *
+     * - `wide`: 48rem
+     * - `narrow`: 28rem
+     * - `auto`: fits the width of the modal content, up to a maximum of 32rem
+     */
+    width?: 'extra-wide' | 'wide' | 'narrow' | 'auto';
+    stickyBottom?: Snippet;
+    children?: Snippet;
+  }
+
+  let {
+    onClose,
+    title,
+    showLogo = false,
+    icon = undefined,
+    width = 'narrow',
+    stickyBottom,
+    children,
+  }: Props = $props();
 
   /**
    * Unique identifier for the modal.
    */
   let id: string = generateId();
 
-  $: titleId = `${id}-title`;
-  $: isStickyBottom = !!$$slots['sticky-bottom'];
+  let titleId = $derived(`${id}-title`);
+  let isStickyBottom = $derived(!!stickyBottom);
 
-  let modalWidth: string;
-  $: {
+  let modalWidth = $state<string>();
+
+  $effect(() => {
     switch (width) {
       case 'extra-wide': {
         modalWidth = 'w-[56rem]';
@@ -54,7 +70,7 @@
         modalWidth = 'sm:max-w-4xl';
       }
     }
-  }
+  });
 </script>
 
 <section
@@ -62,7 +78,7 @@
   in:fade={{ duration: 100 }}
   out:fade={{ duration: 100 }}
   class="fixed left-0 top-0 z-[9999] flex h-dvh w-screen place-content-center place-items-center bg-black/40"
-  on:keydown={(event) => {
+  onkeydown={(event) => {
     event.stopPropagation();
   }}
   use:focusTrap
@@ -77,14 +93,14 @@
     <div class="immich-scrollbar overflow-y-auto pt-1" class:pb-4={isStickyBottom}>
       <ModalHeader id={titleId} {title} {showLogo} {icon} {onClose} />
       <div class="px-5 pt-0 mb-5">
-        <slot />
+        {@render children?.()}
       </div>
     </div>
     {#if isStickyBottom}
       <div
         class="flex flex-col sm:flex-row justify-end w-full gap-2 sm:gap-4 sticky pt-4 px-5 bg-immich-bg dark:bg-immich-dark-gray border-t border-gray-200 dark:border-gray-500"
       >
-        <slot name="sticky-bottom" />
+        {@render stickyBottom?.()}
       </div>
     {/if}
   </div>