From dc4db405d2991d3ec6a114f3b08d3fccd057d3ee Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Thu, 13 Feb 2025 17:52:16 +0100
Subject: frontend: Migrate to Svelte 5

---
 frontend/src/lib/toolbar/Toolbar.svelte | 38 +++++++++++++++++----------------
 1 file changed, 20 insertions(+), 18 deletions(-)

(limited to 'frontend/src/lib/toolbar/Toolbar.svelte')

diff --git a/frontend/src/lib/toolbar/Toolbar.svelte b/frontend/src/lib/toolbar/Toolbar.svelte
index e87d731..03cd892 100644
--- a/frontend/src/lib/toolbar/Toolbar.svelte
+++ b/frontend/src/lib/toolbar/Toolbar.svelte
@@ -1,23 +1,25 @@
-<script lang="ts" context="module">
-	import { writable, type Writable } from 'svelte/store';
+<script lang="ts">
+	import { type Snippet } from 'svelte';
 
-	interface ToolbarContext {
-		expand: boolean;
+	export interface ToolbarState {
+		expanded: boolean;
+		toggle: () => void;
 	}
 
-	function initToolbarContext() {
-		return setContext<Writable<ToolbarContext>>('toolbar', writable({ expand: false }));
+	interface Props {
+		start?: Snippet<[ToolbarState]>;
+		center?: Snippet<[ToolbarState]>;
+		end?: Snippet<[ToolbarState]>;
+		expansion?: Snippet;
 	}
 
-	export function getToolbarContext() {
-		return getContext<Writable<ToolbarContext>>('toolbar');
-	}
-</script>
+	let { start, center, end, expansion }: Props = $props();
 
-<script lang="ts">
-	import { getContext, setContext } from 'svelte';
+	let expanded = $state(false);
 
-	const toolbar = initToolbarContext();
+	function toggle() {
+		expanded = !expanded;
+	}
 </script>
 
 <div class="flex flex-col">
@@ -25,18 +27,18 @@
 		class="flex flex-row flex-wrap gap-4 text-sm xl:grid xl:grid-flow-col xl:grid-cols-[1fr_2fr_1fr]"
 	>
 		<div class="flex flex-row justify-start gap-2">
-			<slot name="start" />
+			{@render start?.({ expanded, toggle })}
 		</div>
 		<div class="flex flex-row flex-wrap justify-start gap-2 xl:flex-nowrap xl:justify-center">
-			<slot name="center" />
+			{@render center?.({ expanded, toggle })}
 		</div>
 		<div class="flex flex-row justify-end gap-2">
-			<slot name="end" />
+			{@render end?.({ expanded, toggle })}
 		</div>
 	</div>
-	{#if $toolbar.expand}
+	{#if expanded}
 		<div class="mt-4">
-			<slot />
+			{@render expansion?.()}
 		</div>
 	{/if}
 </div>
-- 
cgit v1.2.3-2-gb3c3