From 113ef58d50b236e5d19daba8d77fa67938a6d901 Mon Sep 17 00:00:00 2001
From: Alessandro Pignotti <a.pignotti@sssup.it>
Date: Sat, 12 Oct 2024 16:39:25 +0200
Subject: [PATCH] Initial prototype for Network sidebar

---
 src/lib/NetworkingTab.svelte | 11 +++++++++++
 src/lib/SideBar.svelte       |  9 +++++++--
 2 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/NetworkingTab.svelte

diff --git a/src/lib/NetworkingTab.svelte b/src/lib/NetworkingTab.svelte
new file mode 100644
index 0000000..9900d37
--- /dev/null
+++ b/src/lib/NetworkingTab.svelte
@@ -0,0 +1,11 @@
+<script>
+	var currentIp = null;
+</script>
+<h1 class="text-lg font-bold">Networking</h1>
+{#if currentIp === null}
+	<p class="bg-neutral-700 hover:bg-neutral-500 p-2 rounded-md cursor-pointer"><img src="assets/tailscale.svg" class="inline w-8"/><span class="ml-1">Connect to Tailscale</span></p>
+{:else}
+	<p>Current IP: {currentIp}</p>
+{/if}
+<p>WebVM can connect to the Internet via Tailscale</p>
+<p>Using Tailscale is required since browser do not support TCP/UDP sockets (yet!)</p>
diff --git a/src/lib/SideBar.svelte b/src/lib/SideBar.svelte
index b3ecf16..dc1d780 100644
--- a/src/lib/SideBar.svelte
+++ b/src/lib/SideBar.svelte
@@ -1,5 +1,6 @@
 <script>
 	import Icon from './Icon.svelte';
+	import NetworkingTab from './NetworkingTab.svelte';
 
 	const icons = [
 		//{ icon: 'fas fa-info-circle', info: 'Information' },
@@ -37,8 +38,12 @@
 			{/if}
 		{/each}
 	</div>
-	<div class="flex flex-col shrink-0 w-60 h-full z-10 p-2 bg-neutral-600 text-gray-100" class:hidden={!activeInfo}>
-		<p>{activeInfo}</p>
+	<div class="flex flex-col gap-5 shrink-0 w-60 h-full z-10 p-2 bg-neutral-600 text-gray-100" class:hidden={!activeInfo}>
+		{#if activeInfo === 'Networking'}
+			<NetworkingTab />
+		{:else}
+			<p>{activeInfo}</p>
+		{/if}
 		<div class="mt-auto text-sm text-gray-300">
 			<div class="pt-1 pb-1">
 				<a href="https://cheerpx.io/" target="_blank">