frontend: Migrate to Svelte 5

2 files changed, 27 insertions, 10 deletions

diff --git a/frontend/src/lib/navigation/Link.svelte b/frontend/src/lib/navigation/Link.svelte
index be09a36..9c7e218 100644
--- a/frontend/src/lib/navigation/Link.svelte
+++ b/frontend/src/lib/navigation/Link.svelte
@@ -1,20 +1,31 @@
 <script lang="ts">
-	import { page } from '$app/stores';
+	import { page } from '$app/state';
 	import { accelerator, type Shortcut } from '$lib/Shortcuts';
-	import type { HTMLAttributeAnchorTarget } from 'svelte/elements';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
 
-	export let href: string;
-	export let title: string;
-	export let accel: Shortcut;
-	export let matchExact = false;
-	export let target: HTMLAttributeAnchorTarget | undefined = undefined;
-	$: active = matchExact ? $page.url.pathname === href : $page.url.pathname.startsWith(href);
+	interface Props extends Pick<HTMLAnchorAttributes, 'title' | 'target'> {
+		href: string;
+		accel: Shortcut;
+		matchExact?: boolean;
+		children?: Snippet;
+	}
+
+	let { href, title, accel, matchExact = false, target, children }: Props = $props();
+
+	let active = $derived.by(() => {
+		if (matchExact) {
+			return page.url.pathname === href;
+		} else {
+			return page.url.pathname.startsWith(href);
+		}
+	});
 </script>
 
 <li class:active class="items-center hover:bg-indigo-700 [&.active]:bg-indigo-700">
 	<a class="focus-background flex items-center" {target} {title} {href} use:accelerator={accel}>
 		<div class="flex p-3">
-			<slot />
+			{@render children?.()}
 		</div>
 	</a>
 </li>
diff --git a/frontend/src/lib/navigation/Navigation.svelte b/frontend/src/lib/navigation/Navigation.svelte
index 76096c8..6734272 100644
--- a/frontend/src/lib/navigation/Navigation.svelte
+++ b/frontend/src/lib/navigation/Navigation.svelte
@@ -1,5 +1,11 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let { children }: { children?: Snippet } = $props();
+</script>
+
 <nav>
 	<ul class="flex h-full flex-col bg-slate-700/70 font-medium">
-		<slot />
+		{@render children?.()}
 	</ul>
 </nav>