📐 Adds more settings pages

app/src/components/settings/Configuration.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    import { socket, isConnected, settings } from "../../lib/socket";
+    import { onMount } from 'svelte'
+    
+    onMount(() => {
+        if ($isConnected) {
+            const message = JSON.stringify({type: 'system/settings'})
+            $socket.send(message)
+        }
+    })
+
+</script>
+
+<div class="w-full h-full">
+    <div>
+        {#each Object.entries($settings) as entry}
+           <div class="flex gap-8">
+                <div class="w-32">{entry[0]}:</div>
+                <div>{entry[1]}</div>
+            </div>
+        {/each}
+    </div>
+</div>

app/src/components/settings/Info.svelte

@@ -1,3 +1,27 @@
-<div class="bg-blue-600 w-full h-full">
-INFO
+<script lang="ts">
+    import { socket, isConnected, systemInfo } from "../../lib/socket";
+    import { onMount } from 'svelte'
+	import { humanFileSize } from "../../lib/utils";
+    
+    onMount(() => {
+        if ($isConnected) {
+            const message = JSON.stringify({type: 'system/info'})
+            $socket.send(message)
+        }
+    })
+
+</script>
+<div class="w-full h-full">
+    <div class="w-1/3">
+        {#each Object.entries($systemInfo ?? {}) as entry}
+           <div class="flex gap-8">
+            <div class="w-32">{entry[0]}:</div>
+            {#if entry[0].includes("Size") || entry[0].includes("Free") || entry[0].includes("Min")}
+                <div>{humanFileSize(entry[1])}</div>
+            {:else}
+                <div>{entry[1]}</div>
+            {/if}
+        </div>
+        {/each}
+    </div>
 </div>

app/src/components/settings/Log.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { socket, isConnected, log } from "../../lib/socket";
+    import { onMount } from 'svelte'
+    
+    onMount(() => {
+        if ($isConnected) {
+            const message = JSON.stringify({type: 'system/logs'})
+            $socket.send(message)
+        }
+    })
+
+</script>
+
+<div class="w-full h-full">
+    {#each $log as entry}
+        <div>{entry}</div>
+    {/each}
+</div>

app/src/routes/Settings.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
 	import { Link, Route, Router } from 'svelte-routing';
-	import { dataBuffer, socket } from '../lib/socket';
-	import { humanFileSize } from '../lib/utils';
 	import Info from '../components/settings/Info.svelte';
+	import Log from '../components/settings/Log.svelte';
+	import Configuration from '../components/settings/Configuration.svelte';
+	import { Icon, Wifi, CommandLine, InformationCircle, BookOpen, AdjustmentsVertical, Cog6Tooth, Newspaper } from 'svelte-hero-icons';
+	import Calibration from '../components/settings/Calibration.svelte';
 
     export const page = ""
 
@@ -10,23 +12,27 @@
 		{
 			title: 'Calibration',
 			path: '/calibration',
-			component: Info
+            icon: AdjustmentsVertical,
+			component: Calibration
 		},
 		{
-			title: 'Settings',
-			path: '/settings',
-			component: Info
-		},
-		{
-			title: 'About',
-			path: '/about',
-			component: Info
-		},
-		{
-			title: 'Info',
+            title: 'System info',
 			path: '/info',
+            icon: InformationCircle,
 			component: Info
-		}
+		},
+        {
+            title: 'Log',
+			path: '/log',
+            icon: BookOpen,
+			component: Log
+		},
+        {
+            title: 'Settings',
+            path: '/settings',
+            icon: Cog6Tooth,
+            component: Configuration
+        },
 	];
 </script>
 
@@ -34,9 +40,8 @@
 	<nav class="w-1/6 flex flex-col">
 		{#each menu as link}
 			<Link to={'/settings'+link.path}>
-                <div class="px-4 py-2">
-                    {link.title}
-                    
+                <div class="px-4 py-2 flex gap-2 items-center">
+                    <Icon src={link.icon} size="24" />{link.title}
                 </div>
             </Link>
 		{/each}