From 8d2e76f0f536d9a69e0376adae9a303332356ed0 Mon Sep 17 00:00:00 2001
From: Peter Siegmund <developer@mars3142.org>
Date: Sat, 21 Mar 2026 18:59:02 +0100
Subject: [PATCH] convert to svelte 5

Signed-off-by: Peter Siegmund <developer@mars3142.org>
---
 firmware/website/src/components/common/card.svelte   |  9 +++++++--
 firmware/website/src/components/common/tabBar.svelte | 10 +++++++++-
 .../website/src/components/common/tabButton.svelte   | 12 ++++++++----
 .../src/components/controlTab/lightControl.svelte    |  4 ++--
 .../src/components/controlTab/modeControl.svelte     |  4 ++--
 .../src/components/controlTab/statusDisplay.svelte   |  6 +++---
 6 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/firmware/website/src/components/common/card.svelte b/firmware/website/src/components/common/card.svelte
index e24ae7d..9b7d0d1 100644
--- a/firmware/website/src/components/common/card.svelte
+++ b/firmware/website/src/components/common/card.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
-	export let title: string | undefined;
 	import { t } from '../../i18n/store';
+    interface Props {
+        title: string | undefined;
+        children?: import('svelte').Snippet;
+    }
+
+    let { title, children }: Props = $props();
 </script>
 
 <div class="bg-card p-6 rounded-lg border border-border shadow-sm">
@@ -10,5 +15,5 @@
             {$t(title)}
         </h2>
     {/if}
-    <slot />
+    {@render children?.()}
 </div>
diff --git a/firmware/website/src/components/common/tabBar.svelte b/firmware/website/src/components/common/tabBar.svelte
index b623ecd..ae3ab91 100644
--- a/firmware/website/src/components/common/tabBar.svelte
+++ b/firmware/website/src/components/common/tabBar.svelte
@@ -1,7 +1,15 @@
+<script lang="ts">
+	interface Props {
+		children?: import('svelte').Snippet;
+	}
+
+	let { children }: Props = $props();
+</script>
+
 <div class="flex justify-center mb-6">
 	<div
 		class="inline-flex bg-card rounded-lg p-1 border border-border shadow-sm"
 	>
-		<slot />
+		{@render children?.()}
 	</div>
 </div>
diff --git a/firmware/website/src/components/common/tabButton.svelte b/firmware/website/src/components/common/tabButton.svelte
index fb73bc1..b9e0208 100644
--- a/firmware/website/src/components/common/tabButton.svelte
+++ b/firmware/website/src/components/common/tabButton.svelte
@@ -1,14 +1,18 @@
 <script lang="ts">
-	export let active: boolean = false;
-	export let label: string = "";
-	export let onClick: () => void;
+	interface Props {
+		active?: boolean;
+		label?: string;
+		onClick: () => void;
+	}
+
+	let { active = false, label = "", onClick }: Props = $props();
 </script>
 
 <button
 	class="px-6 py-2 rounded-md text-sm font-medium transition-colors {active
 		? 'bg-primary text-white shadow-sm'
 		: 'text-muted-foreground hover:text-foreground'}"
-	on:click={onClick}
+	onclick={onClick}
 >
 	{label}
 </button>
diff --git a/firmware/website/src/components/controlTab/lightControl.svelte b/firmware/website/src/components/controlTab/lightControl.svelte
index 2efe0c9..0c624b3 100644
--- a/firmware/website/src/components/controlTab/lightControl.svelte
+++ b/firmware/website/src/components/controlTab/lightControl.svelte
@@ -4,7 +4,7 @@
 	import Toggle from '../common/toggle.svelte';
 	import { controlStore } from '../../stores/controlStore';
 
-	let lightOn = false;
+	let lightOn = $state(false);
 	controlStore.subscribe((state) => {
 		if (state) lightOn = state.on;
 	});
@@ -13,7 +13,7 @@
 		controlStore.setLight({ on: checked });
 	}
 
-	let thunderOn = false;
+	let thunderOn = $state(false);
 
 	function toggleThunder(checked: boolean) {
 		thunderOn = checked;
diff --git a/firmware/website/src/components/controlTab/modeControl.svelte b/firmware/website/src/components/controlTab/modeControl.svelte
index 477f792..c1f5b14 100644
--- a/firmware/website/src/components/controlTab/modeControl.svelte
+++ b/firmware/website/src/components/controlTab/modeControl.svelte
@@ -5,8 +5,8 @@
 	import Card from '../common/card.svelte';
 	import { controlStore } from '../../stores/controlStore';
 
-	let mode = 'simulation';
-	let activeSchema = 'schema_01.csv';
+	let mode = $state('simulation');
+	let activeSchema = $state('schema_01.csv');
 	let schemas = [
 		{ value: 'schema_01.csv', label: $t('schema.name.1') },
 		{ value: 'schema_02.csv', label: $t('schema.name.2') },
diff --git a/firmware/website/src/components/controlTab/statusDisplay.svelte b/firmware/website/src/components/controlTab/statusDisplay.svelte
index 69276b2..a961aac 100644
--- a/firmware/website/src/components/controlTab/statusDisplay.svelte
+++ b/firmware/website/src/components/controlTab/statusDisplay.svelte
@@ -3,9 +3,9 @@
 	import Card from '../common/card.svelte';
 	import { controlStore } from '../../stores/controlStore';
 
-	let mode = 'simulation';
-	let color = '#000000';
-	let clock: string | null = '12:34 Uhr';
+	let mode = $state('simulation');
+	let color = $state('#000000');
+	let clock: string | null = $state('12:34 Uhr');
 	controlStore.subscribe((state) => {
 		if (state) {
 			mode = state.mode;