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

web/src/lib/components/faces-page/people-infinite-scroll.svelte

@@ -1,11 +1,16 @@
 <script lang="ts">
   import type { PersonResponseDto } from '@immich/sdk';
 
-  export let people: PersonResponseDto[];
-  export let hasNextPage: boolean | undefined = undefined;
-  export let loadNextPage: () => void;
+  interface Props {
+    people: PersonResponseDto[];
+    hasNextPage?: boolean | undefined;
+    loadNextPage: () => void;
+    children?: import('svelte').Snippet<[{ person: PersonResponseDto; index: number }]>;
+  }
 
-  let lastPersonContainer: HTMLElement | undefined;
+  let { people, hasNextPage = undefined, loadNextPage, children }: Props = $props();
+
+  let lastPersonContainer: HTMLElement | undefined = $state();
 
   const intersectionObserver = new IntersectionObserver((entries) => {
     const entry = entries.find((entry) => entry.target === lastPersonContainer);
@@ -14,20 +19,22 @@
     }
   });
 
-  $: if (lastPersonContainer) {
-    intersectionObserver.disconnect();
-    intersectionObserver.observe(lastPersonContainer);
-  }
+  $effect(() => {
+    if (lastPersonContainer) {
+      intersectionObserver.disconnect();
+      intersectionObserver.observe(lastPersonContainer);
+    }
+  });
 </script>
 
 <div class="w-full grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 xl:grid-cols-7 2xl:grid-cols-9 gap-1">
   {#each people as person, index (person.id)}
     {#if hasNextPage && index === people.length - 1}
       <div bind:this={lastPersonContainer}>
-        <slot {person} {index} />
+        {@render children?.({ person, index })}
       </div>
     {:else}
-      <slot {person} {index} />
+      {@render children?.({ person, index })}
     {/if}
   {/each}
 </div>