convert to svelte 5

Signed-off-by: Peter Siegmund <developer@mars3142.org>

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>

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>

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>

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;

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') },

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;