🌌 Migrate app to svelte-5

app/src/routes/system/metrics/SystemMetrics.svelte

@@ -12,16 +12,16 @@
 
 	Chart.register(...registerables);
 
-    let cpuChartElement: HTMLCanvasElement;
+    let cpuChartElement: HTMLCanvasElement = $state();
 	let cpuChart: Chart;
 
-	let heapChartElement: HTMLCanvasElement;
+	let heapChartElement: HTMLCanvasElement = $state();
 	let heapChart: Chart;
 
-	let filesystemChartElement: HTMLCanvasElement;
+	let filesystemChartElement: HTMLCanvasElement = $state();
 	let filesystemChart: Chart;
 
-	let temperatureChartElement: HTMLCanvasElement;
+	let temperatureChartElement: HTMLCanvasElement = $state();
 	let temperatureChart: Chart;
 
 	onMount(() => {
@@ -330,15 +330,19 @@
 </script>
 
 <SettingsCard collapsible={false}>
-	<Metrics slot="icon" class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
-	<span slot="title">System Metrics</span>
+	{#snippet icon()}
+		<Metrics  class="lex-shrink-0 mr-2 h-6 w-6 self-end" />
+	{/snippet}
+	{#snippet title()}
+		<span >System Metrics</span>
+	{/snippet}
 
     <div class="w-full overflow-x-auto">
 		<div
 			class="flex w-full flex-col space-y-1 h-60"
 			transition:slide|local={{ duration: 300, easing: cubicOut }}
 		>
-			<canvas bind:this={cpuChartElement} />
+			<canvas bind:this={cpuChartElement}></canvas>
 		</div>
 	</div>
 
@@ -347,7 +351,7 @@
 			class="flex w-full flex-col space-y-1 h-60"
 			transition:slide|local={{ duration: 300, easing: cubicOut }}
 		>
-			<canvas bind:this={heapChartElement} />
+			<canvas bind:this={heapChartElement}></canvas>
 		</div>
 	</div>
 	<div class="w-full overflow-x-auto">
@@ -355,7 +359,7 @@
 			class="flex w-full flex-col space-y-1 h-52"
 			transition:slide|local={{ duration: 300, easing: cubicOut }}
 		>
-			<canvas bind:this={filesystemChartElement} />
+			<canvas bind:this={filesystemChartElement}></canvas>
 		</div>
 	</div>
 	<div class="w-full overflow-x-auto">
@@ -363,7 +367,7 @@
 			class="flex w-full flex-col space-y-1 h-52"
 			transition:slide|local={{ duration: 300, easing: cubicOut }}
 		>
-			<canvas bind:this={temperatureChartElement} />
+			<canvas bind:this={temperatureChartElement}></canvas>
 		</div>
 	</div>
 </SettingsCard>