Web connection rewrite

apps/web/src/routes/(app)/+layout.svelte

@@ -1,12 +1,8 @@
 <AppHeader />
 <Navigation />
 
-{#if $state.state === "loading" && url !== "/settings"}
-	<Loading />
-{:else}
-	<slot />
-	<div class="mb-32" />
-{/if}
+<slot />
+<div class="mb-32" />
 
 <script lang="ts">
 	import { setHardwareInfo, hardwareInfo } from "ui/stores/hardwareInfo"
@@ -17,17 +13,10 @@
 	import { page } from "$app/stores"
 	import { onNavigate } from "$app/navigation"
 	import { EzRTCClient } from "ezrtc"
-	import Loading from "ui/navigation/loading.svelte"
 	import { onMount } from "svelte"
 	import { state } from "../../stores/state.ts"
 	import AppHeader from "../../components/appHeader.svelte"
 
-	$: url = $page.url.pathname
-
-	onNavigate((navigation) => {
-		url = navigation.to?.url.pathname ?? "/"
-	})
-
 	onMount(() => {
 		// Connect to server when user selected a connection
 		state.subscribe((data) => {

apps/web/src/routes/(app)/cpu/+page.svelte

@@ -1,16 +1,14 @@
-{#if $hardwareInfo.cpu !== undefined}
+{#if $state.state === "connected"}
 	<CPU />
+{:else if $state.state === "loading"}
+	<Loading />
+{:else}
+	<Connect />
 {/if}
 
 <script>
-	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import CPU from "ui/pages/cpu.svelte"
-	import { hardwareInfo } from "ui/stores/hardwareInfo.ts"
-
-	onMount(() => {
-		if ($hardwareInfo.cpu === undefined) {
-			goto("/connect")
-		}
-	})
+	import { state } from "../../../stores/state"
+	import Loading from "ui/navigation/loading.svelte"
+	import Connect from "../../../components/connect.svelte"
 </script>

apps/web/src/routes/(app)/gpu/+page.svelte

@@ -1,16 +1,14 @@
-{#if $hardwareInfo.cpu !== undefined}
+{#if $state.state === "connected"}
 	<GPU />
+{:else if $state.state === "loading"}
+	<Loading />
+{:else}
+	<Connect />
 {/if}
 
 <script>
-	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import GPU from "ui/pages/gpu.svelte"
-	import { hardwareInfo } from "ui/stores/hardwareInfo.ts"
-
-	onMount(() => {
-		if ($hardwareInfo.cpu === undefined) {
-			goto("/connect")
-		}
-	})
+	import { state } from "../../../stores/state"
+	import Loading from "ui/navigation/loading.svelte"
+	import Connect from "../../../components/connect.svelte"
 </script>

apps/web/src/routes/(app)/home/+page.svelte

@@ -1,16 +1,14 @@
-{#if $hardwareInfo.cpu !== undefined}
+{#if $state.state === "connected"}
 	<Home />
+{:else if $state.state === "loading"}
+	<Loading />
+{:else}
+	<Connect />
 {/if}
 
 <script>
-	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import Home from "ui/pages/home.svelte"
-	import { hardwareInfo } from "ui/stores/hardwareInfo.ts"
-
-	onMount(() => {
-		if ($hardwareInfo.cpu === undefined) {
-			goto("/connect")
-		}
-	})
+	import { state } from "../../../stores/state"
+	import Loading from "ui/navigation/loading.svelte"
+	import Connect from "../../../components/connect.svelte"
 </script>

apps/web/src/routes/(app)/network/+page.svelte

@@ -1,16 +1,14 @@
-{#if $hardwareInfo.cpu !== undefined}
+{#if $state.state === "connected"}
 	<Network />
+{:else if $state.state === "loading"}
+	<Loading />
+{:else}
+	<Connect />
 {/if}
 
 <script>
-	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import Network from "ui/pages/network.svelte"
-	import { hardwareInfo } from "ui/stores/hardwareInfo.ts"
-
-	onMount(() => {
-		if ($hardwareInfo.cpu === undefined) {
-			goto("/connect")
-		}
-	})
+	import { state } from "../../../stores/state"
+	import Loading from "ui/navigation/loading.svelte"
+	import Connect from "../../../components/connect.svelte"
 </script>

apps/web/src/routes/(app)/ram/+page.svelte

@@ -1,16 +1,14 @@
-{#if $hardwareInfo.cpu !== undefined}
-	<RAM/>
+{#if $state.state === "connected"}
+	<RAM />
+{:else if $state.state === "loading"}
+	<Loading />
+{:else}
+	<Connect />
 {/if}
 
 <script>
-	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import RAM from "ui/pages/ram.svelte"
-	import { hardwareInfo } from "ui/stores/hardwareInfo.ts"
-
-	onMount(() => {
-		if ($hardwareInfo.cpu === undefined) {
-			goto("/connect")
-		}
-	})
+	import { state } from "../../../stores/state"
+	import Loading from "ui/navigation/loading.svelte"
+	import Connect from "../../../components/connect.svelte"
 </script>

apps/web/src/routes/(app)/storage/+page.svelte

@@ -1,16 +1,14 @@
-{#if $hardwareInfo.cpu !== undefined}
+{#if $state.state === "connected"}
 	<Storage />
+{:else if $state.state === "loading"}
+	<Loading />
+{:else}
+	<Connect />
 {/if}
 
 <script>
-	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import Storage from "ui/pages/storage.svelte"
-	import { hardwareInfo } from "ui/stores/hardwareInfo.ts"
-
-	onMount(() => {
-		if ($hardwareInfo.cpu === undefined) {
-			goto("/connect")
-		}
-	})
+	import { state } from "../../../stores/state"
+	import Loading from "ui/navigation/loading.svelte"
+	import Connect from "../../../components/connect.svelte"
 </script>

apps/web/src/routes/(app)/system/+page.svelte

@@ -1,16 +1,14 @@
-{#if $hardwareInfo.cpu !== undefined}
+{#if $state.state === "connected"}
 	<System />
+{:else if $state.state === "loading"}
+	<Loading />
+{:else}
+	<Connect />
 {/if}
 
 <script>
-	import { goto } from "$app/navigation"
-	import { onMount } from "svelte"
 	import System from "ui/pages/system.svelte"
-	import { hardwareInfo } from "ui/stores/hardwareInfo.ts"
-
-	onMount(() => {
-		if ($hardwareInfo.cpu === undefined) {
-			goto("/connect")
-		}
-	})
+	import { state } from "../../../stores/state"
+	import Loading from "ui/navigation/loading.svelte"
+	import Connect from "../../../components/connect.svelte"
 </script>