frontend: Migrate to Svelte 5

5 files changed, 26 insertions, 9 deletions

diff --git a/frontend/src/lib/containers/Cardlets.svelte b/frontend/src/lib/containers/Cardlets.svelte
index 129da61..5997a69 100644
--- a/frontend/src/lib/containers/Cardlets.svelte
+++ b/frontend/src/lib/containers/Cardlets.svelte
@@ -1,11 +1,13 @@
 <script>
 	import { fadeDefault } from '$lib/Transitions';
 	import { fade } from 'svelte/transition';
+
+	let { children } = $props();
 </script>
 
 <div
 	class="grid gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 min-[1600px]:grid-cols-8 min-[1920px]:grid-cols-10"
 	in:fade={fadeDefault}
 >
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/containers/Cards.svelte b/frontend/src/lib/containers/Cards.svelte
index a19e8be..36a4b86 100644
--- a/frontend/src/lib/containers/Cards.svelte
+++ b/frontend/src/lib/containers/Cards.svelte
@@ -1,8 +1,10 @@
 <script>
 	import { fadeDefault } from '$lib/Transitions';
 	import { fade } from 'svelte/transition';
+
+	let { children } = $props();
 </script>
 
 <div class="grid gap-4 xl:grid-cols-2 min-[1920px]:grid-cols-3" in:fade|global={fadeDefault}>
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/containers/Carousel.svelte b/frontend/src/lib/containers/Carousel.svelte
index 1268a78..fb05b7d 100644
--- a/frontend/src/lib/containers/Carousel.svelte
+++ b/frontend/src/lib/containers/Carousel.svelte
@@ -1,6 +1,13 @@
 <script lang="ts">
-	export let title: string;
-	export let href: string;
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		title: string;
+		href: string;
+		children?: Snippet;
+	}
+
+	let { title, href, children }: Props = $props();
 </script>
 
 <div class="flex flex-col gap-1">
@@ -10,6 +17,6 @@
 		</a>
 	</h2>
 	<div class="flex flex-wrap gap-5">
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
diff --git a/frontend/src/lib/containers/Column.svelte b/frontend/src/lib/containers/Column.svelte
index 05daece..fe5ac47 100644
--- a/frontend/src/lib/containers/Column.svelte
+++ b/frontend/src/lib/containers/Column.svelte
@@ -1,3 +1,7 @@
+<script>
+	let { children } = $props();
+</script>
+
 <div class="flex flex-col gap-4">
-	<slot />
+	{@render children?.()}
 </div>
diff --git a/frontend/src/lib/containers/Grid.svelte b/frontend/src/lib/containers/Grid.svelte
index 1224156..af5125a 100644
--- a/frontend/src/lib/containers/Grid.svelte
+++ b/frontend/src/lib/containers/Grid.svelte
@@ -1,14 +1,16 @@
-<script>
+<script lang="ts">
 	import { fadeDefault } from '$lib/Transitions';
-
+	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
+
+	let { children }: { children?: Snippet } = $props();
 </script>
 
 <div
 	class="flex flex-col gap-1 lg:grid lg:h-full lg:max-h-full lg:overflow-auto"
 	in:fade|global={fadeDefault}
 >
-	<slot />
+	{@render children?.()}
 </div>
 
 <style>