🌌 Migrate app to svelte-5

app/src/lib/components/statusbar/BatteryIndicator.svelte

@@ -5,7 +5,11 @@
 
 	const features = useFeatureFlags();
 
-	export let battery:Battery;
+	interface Props {
+		battery: Battery;
+	}
+
+	let { battery }: Props = $props();
 
 	const getBatteryIcon = () => {
 		if (battery.voltage === 0) return BatteryCharging;
@@ -18,9 +22,9 @@
 </script>
 
 {#if $features.battery}
+	{@const SvelteComponent = getBatteryIcon()}
 	<div class="tooltip tooltip-left z-10" data-tip="{battery.voltage}V {Math.floor(battery.current*10)/10} mA">
-		<svelte:component 
-			this={getBatteryIcon()} 
+		<SvelteComponent 
 			class="h-7 w-7 -rotate-90 {battery.voltage === 0 || battery.voltage <= 7.6 ? 'animate-pulse' : ''} {battery.voltage <= 7.6 ? 'text-error' : ''}" 
 		/>
 	</div>

app/src/lib/components/statusbar/FullscreenButton.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
     import { isFullscreen, toggleFullscreen } from '$lib/stores';
 	import { MdiFullscreenExit, MdiFullscreen } from '../icons';
+
+    const SvelteComponent = $derived($isFullscreen ? MdiFullscreenExit : MdiFullscreen);
 </script>
 
-<button on:click={toggleFullscreen}>
-    <svelte:component this={$isFullscreen ? MdiFullscreenExit : MdiFullscreen} class="h-7 w-7" />
+<button onclick={toggleFullscreen}>
+    <SvelteComponent class="h-7 w-7" />
 </button>

app/src/lib/components/statusbar/RSSIIndicator.svelte

@@ -1,8 +1,12 @@
 <script lang="ts">
 	import { WiFi, WiFi0, WiFi1, WiFi2, WifiOff } from "../icons";
 
-	export let showDBm = false;
-	export let rssi = 0;
+	interface Props {
+		showDBm?: boolean;
+		rssi?: number;
+	}
+
+	let { showDBm = false, rssi = 0 }: Props = $props();
 
 	const getWiFiIcon = () => {
 		if (rssi === 0) return WifiOff;
@@ -11,6 +15,8 @@
 		if (rssi >= -85) return WiFi1;
 		return WiFi0;
 	};
+
+	const SvelteComponent = $derived(getWiFiIcon());
 </script>
 
 <div class="indicator">
@@ -21,7 +27,7 @@
 			</span>
 		{/if}
 		<div class="h-7 w-7">
-			<svelte:component this={getWiFiIcon()} class="absolute inset-0 h-full w-full" />
+			<SvelteComponent class="absolute inset-0 h-full w-full" />
 		</div>
 	</div>
 </div>

app/src/lib/components/statusbar/SleepButton.svelte

@@ -27,7 +27,7 @@
 
 {#if $features.sleep}
     <div class="flex-none">
-        <button class="btn btn-square btn-ghost h-9 w-10" on:click={confirmSleep}>
+        <button class="btn btn-square btn-ghost h-9 w-10" onclick={confirmSleep}>
             <Power class="text-error h-9 w-9" />
         </button>
     </div>

app/src/lib/components/statusbar/StopButton.svelte

@@ -7,4 +7,4 @@
 </script>
 
 
-<button on:click={deactivate} class="bg-error text-white btn rounded-none">STOP</button>
+<button onclick={deactivate} class="bg-error text-white btn rounded-none">STOP</button>

app/src/lib/components/statusbar/TopBar.svelte

@@ -5,7 +5,7 @@
 <div class="topbar absolute left-0 top-0 w-full z-20 flex justify-between bg-zinc-800">
 	<div class="flex gap-2 p-2">
         <a href="/">
-            <svelte:component this={Hamburger} class="h-8 w-8"/>
+            <Hamburger class="h-8 w-8"/>
         </a>
     </div>
 </div>

app/src/lib/components/statusbar/UpdateIndicator.svelte

@@ -14,10 +14,14 @@
 
     const features = useFeatureFlags();
 
-    export let update = false;
+    interface Props {
+        update?: boolean;
+    }
 
-    let firmwareVersion: string;
-    let firmwareDownloadLink: string;
+    let { update = $bindable(false) }: Props = $props();
+
+    let firmwareVersion: string = $state();
+    let firmwareDownloadLink: string = $state();
 
     async function getGithubAPI() {
         const headers = {
@@ -100,7 +104,7 @@
     <div class="indicator flex-none">
         <button
             class="btn btn-square btn-ghost h-9 w-9"
-            on:click={() => confirmGithubUpdate(firmwareDownloadLink)}
+            onclick={() => confirmGithubUpdate(firmwareDownloadLink)}
         >
             <span
                 class="indicator-item indicator-top indicator-center badge badge-info badge-xs top-2 scale-75 lg:top-1"