frontend: Migrate to Svelte 5

1 files changed, 30 insertions, 8 deletions

diff --git a/frontend/src/lib/tabs/Tabs.svelte b/frontend/src/lib/tabs/Tabs.svelte
index fd5d08e..1ae7c32 100644
--- a/frontend/src/lib/tabs/Tabs.svelte
+++ b/frontend/src/lib/tabs/Tabs.svelte
@@ -1,28 +1,50 @@
+<script lang="ts" module>
+	import { getContext, setContext } from 'svelte';
+
+	type Tab = string;
+	type Tabs = Record<Tab, { title: string }>;
+
+	class TabContext {
+		tabs: Tabs = $state({});
+		current: Tab = $state('');
+	}
+
+	export function getTabContext() {
+		return getContext<TabContext>('tabs');
+	}
+
+	function initTabContext() {
+		return setContext('tabs', new TabContext());
+	}
+</script>
+
 <script lang="ts">
-	import { getTabContext } from '$lib/Tabs';
 	import { fadeFast } from '$lib/Transitions';
+	import type { Snippet } from 'svelte';
 	import { fade } from 'svelte/transition';
 
-	const context = getTabContext();
+	let { badges = {}, children }: { badges?: Record<Tab, boolean>; children?: Snippet } = $props();
+
+	const context = initTabContext();
 </script>
 
 <div class="flex h-full max-h-full flex-col">
 	<nav>
 		<ul class="me-3 ms-1 flex border-b-2 border-slate-700 text-sm">
-			{#each Object.entries($context.tabs) as [id, { title, badge }]}
+			{#each Object.entries(context.tabs) as [id, { title }]}
 				<li class="-mb-0.5">
 					<button
 						type="button"
-						class:active={$context.current === id}
+						class:active={context.current === id}
 						class="focus-background relative flex gap-1 p-1 px-3 hover:border-b-2 hover:border-slate-200"
-						on:click={() => ($context.current = id)}
+						onclick={() => (context.current = id)}
 					>
-						{#if badge}
+						{#if badges[id]}
 							<div
 								class="absolute right-0 top-1 h-2 w-2 rounded-full bg-emerald-400"
 								title="There are pending changes"
 								transition:fade={fadeFast}
-							/>
+							></div>
 						{/if}
 						<span>{title}</span>
 					</button>
@@ -30,7 +52,7 @@
 			{/each}
 		</ul>
 	</nav>
-	<slot />
+	{@render children?.()}
 </div>
 
 <style lang="postcss">