From 33c9f4d72e9b0dd400b3d604513a6437caba04b3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?L=C5=91rik=20Levente?=
 <33373714+Levminer@users.noreply.github.com>
Date: Sat, 31 Aug 2024 17:34:11 +0200
Subject: [PATCH] Web remote connections improvements

---
 .../ui/components/connectionDropdown.svelte   | 194 ++++++++++++++----
 .../ui/components/modularDialog.svelte        |  44 ++++
 .../ui/components/powerDropdown.svelte        |  16 +-
 .../web/src/components/connect.svelte         |  56 ++++-
 .../src/routes/(app)/settings/+page.svelte    | 175 ++++------------
 5 files changed, 305 insertions(+), 180 deletions(-)
 create mode 100644 platforms/interface/ui/components/modularDialog.svelte

diff --git a/platforms/interface/ui/components/connectionDropdown.svelte b/platforms/interface/ui/components/connectionDropdown.svelte
index 0052d41..1932d80 100644
--- a/platforms/interface/ui/components/connectionDropdown.svelte
+++ b/platforms/interface/ui/components/connectionDropdown.svelte
@@ -1,56 +1,174 @@
-<DropdownMenu.Root>
-	<DropdownMenu.Trigger
-		class="hover:bg-cores-current inline-flex items-center justify-center gap-2 rounded-full bg-gray-700 px-3 py-2 text-xl font-semibold duration-200 ease-in-out"
-	>
-		<Plug size="30" />
-		<p class="hidden md:block">Connection</p>
-		<div id="status" class="relative top-0.5 size-3 rounded-full bg-red-800" />
-	</DropdownMenu.Trigger>
-	<DropdownMenu.Content
-		class="bg-background shadow-popover w-full max-w-[229px] rounded-xl bg-gray-700 p-1"
+<Popover.Root>
+	{#if mode === "header"}
+		<Popover.Trigger
+			class="hover:bg-cores-current inline-flex items-center justify-center gap-2 rounded-full bg-gray-700 px-3 py-2 text-xl font-semibold duration-200 ease-in-out"
+		>
+			<Plug size="30" />
+			<p class="hidden md:block">Connection</p>
+			<div id="status" class="relative top-0.5 size-3 rounded-full bg-red-800" />
+		</Popover.Trigger>
+	{:else}
+		<Popover.Trigger class="button">
+			<Plug size="30" />
+			<p>Connections</p>
+		</Popover.Trigger>
+	{/if}
+	<Popover.Content
+		class="bg-background w-full max-w-[300px] overflow-hidden rounded-xl bg-gray-600 shadow-xl"
 		transition={flyAndScale}
 		sideOffset={8}
 	>
-		{#if $settings.connectionCodes.length === 0}
-			<DropdownMenu.Item
-				class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600"
-			>
-				<div class="flex items-center">
-					<Plug />
-				</div>
-				<div class="flex flex-col items-start">
-					<h4>No connections</h4>
-					<h5>Go to settings</h5>
-				</div>
-			</DropdownMenu.Item>
-		{/if}
 		{#each $settings.connectionCodes as item, i}
 			{#if i > 0}
-				<DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-gray-600" />
+				<Separator.Root class="-ml-1 -mr-1 block h-px bg-gray-500" />
 			{/if}
-			<DropdownMenu.Item
-				on:click={() => {
-					connect(item.code)
-				}}
-				class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600"
-			>
-				<div class="flex items-center">
-					<Plug />
-				</div>
+			<div class="flex select-none items-center justify-between gap-3 p-3 px-5 duration-200 ease-in-out">
 				<div class="flex flex-col items-start">
 					<h4>{item.name}</h4>
 					<h5>crs_********{item.code.slice(-2)}</h5>
 				</div>
-			</DropdownMenu.Item>
+				<div class="flex items-center gap-1">
+					<ModularDialog title={"Edit Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
+						<slot slot="openButton">
+							<Dialog.Trigger class="rounded-full bg-white px-3 py-2 text-black duration-200 ease-in-out hover:bg-gray-300">
+								<Pencil class="h-5 w-5" />
+							</Dialog.Trigger>
+						</slot>
+						<slot slot="confirmButton">
+							<Dialog.Close
+								on:click={() => {
+									editConnectionCode(item.code)
+								}}
+								class="smallButton"
+							>
+								<Pencil />
+								Edit
+							</Dialog.Close>
+						</slot>
+						<slot slot="deleteButton">
+							<button
+								class="smallButton border-red-600 bg-red-600 text-white hover:text-red-600"
+								on:click={() => deleteConnectionCode(item.code)}
+							>
+								<Trash2 />
+								Delete
+							</button>
+						</slot>
+						<div class="flex flex-col flex-wrap gap-3">
+							<div>
+								<h5>Name <span class="text-red-500">*</span></h5>
+								<input value={item.name} placeholder="My Home PC" class="input mt-1" type="text" id="name" />
+							</div>
+
+							<div>
+								<h5>Connection code <span class="text-red-500">*</span></h5>
+								<input value={item.code} placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
+							</div>
+
+							<div>
+								<h5>MAC address</h5>
+								<input value={item.mac ?? ""} placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
+							</div>
+						</div>
+					</ModularDialog>
+					<button
+						on:click={() => {
+							connect(item.code)
+						}}
+						class="rounded-full bg-white px-3 py-2 text-black duration-200 ease-in-out hover:bg-gray-300"
+					>
+						<Plug class="h-5 w-5" />
+					</button>
+				</div>
+			</div>
 		{/each}
-	</DropdownMenu.Content>
-</DropdownMenu.Root>
+		<div class="w-full p-3 px-5">
+			<ModularDialog title={"Add Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
+				<slot slot="openButton">
+					<Dialog.Trigger class="smallButton w-full">Add connection</Dialog.Trigger>
+				</slot>
+				<slot slot="confirmButton">
+					<Dialog.Close on:click={() => addConnectionCode()} class="smallButton">
+						<Plus class="h-5 w-5" />
+						Add
+					</Dialog.Close>
+				</slot>
+				<div class="flex flex-col flex-wrap gap-3">
+					<div>
+						<h5>Name <span class="text-red-500">*</span></h5>
+						<input placeholder="My Home PC" class="input mt-1" type="text" id="name" />
+					</div>
+
+					<div>
+						<h5>Connection code <span class="text-red-500">*</span></h5>
+						<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
+					</div>
+
+					<div>
+						<h5>MAC address</h5>
+						<input placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
+					</div>
+				</div>
+			</ModularDialog>
+		</div>
+	</Popover.Content>
+</Popover.Root>
 
 <script lang="ts">
-	import { DropdownMenu } from "bits-ui"
+	import { Dialog, Popover, Separator } from "bits-ui"
 	import { flyAndScale } from "../utils/transitions.ts"
-	import { Plug } from "lucide-svelte"
+	import { Pencil, Plug, Plus, Trash2 } from "lucide-svelte"
 	import { settings } from "ui/stores/settings.ts"
+	import ModularDialog from "./modularDialog.svelte"
+
+	const addConnectionCode = () => {
+		const nameInput = document.getElementById("name") as HTMLInputElement
+		const codeInput = document.getElementById("code") as HTMLInputElement
+		const macInput = document.getElementById("mac") as HTMLInputElement
+
+		if (nameInput.value === "") {
+			return alert("Please enter a name for your connection")
+		}
+
+		if (!codeInput.value.startsWith("crs_")) {
+			return alert("Invalid connection code! The connection code must start with: crs_")
+		}
+
+		$settings.connectionCodes = [
+			...$settings.connectionCodes,
+			{
+				name: nameInput.value,
+				code: codeInput.value,
+				mac: macInput.value,
+			},
+		]
+	}
+
+	const editConnectionCode = (code: string) => {
+		const nameInput = document.getElementById("name") as HTMLInputElement
+		const codeInput = document.getElementById("code") as HTMLInputElement
+		const macInput = document.getElementById("mac") as HTMLInputElement
+
+		if (nameInput.value === "") {
+			return alert("Please enter a name for your connection")
+		}
+
+		if (!codeInput.value.startsWith("crs_")) {
+			return alert("Invalid connection code! The connection code must start with: crs_")
+		}
+
+		let id = $settings.connectionCodes.findIndex((item) => item.code === code)
+		$settings.connectionCodes[id] = {
+			name: nameInput.value,
+			code: codeInput.value,
+			mac: macInput.value,
+		}
+	}
+
+	const deleteConnectionCode = (code: string) => {
+		$settings.connectionCodes = $settings.connectionCodes.filter((item) => item.code !== code)
+	}
 
 	export let connect = (item: string) => {}
+	export let mode = "header" as "menu" | "header"
 </script>
diff --git a/platforms/interface/ui/components/modularDialog.svelte b/platforms/interface/ui/components/modularDialog.svelte
new file mode 100644
index 0000000..772c150
--- /dev/null
+++ b/platforms/interface/ui/components/modularDialog.svelte
@@ -0,0 +1,44 @@
+<Dialog.Root bind:open>
+	<slot name="openButton" />
+
+	<Dialog.Portal>
+		<Dialog.Overlay transition={fade} transitionConfig={{ duration: 150 }} class="fixed inset-0 z-50 bg-black/70" />
+		<Dialog.Content
+			transition={flyAndScale}
+			class="fixed left-[50%] top-[50%] z-50 w-full max-w-xl translate-x-[-50%] translate-y-[-50%] rounded-2xl border border-gray-600 bg-gray-800 p-5 shadow-md outline-none sm:max-w-[490px] md:w-full"
+		>
+			<Dialog.Title class="-mt-1.5 flex w-full items-center justify-center text-lg font-semibold tracking-tight">{title}</Dialog.Title>
+			<Separator.Root class="-mx-5 mb-6 mt-5 block h-px bg-gray-600" />
+			<Dialog.Description class="text-sm text-gray-200">
+				{description}
+			</Dialog.Description>
+			<div class="flex flex-col items-start gap-1 pb-11 pt-7">
+				<slot />
+			</div>
+			<div class="flex w-full justify-between">
+				<slot name="deleteButton" />
+				<slot name="confirmButton" />
+			</div>
+
+			<Dialog.Close
+				class="focus-visible:ring-foreground focus-visible:ring-offset-background active:scale-98 absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+			>
+				<div>
+					<X class="text-foreground size-5" />
+					<span class="sr-only">Close</span>
+				</div>
+			</Dialog.Close>
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>
+
+<script lang="ts">
+	import { Dialog, Separator } from "bits-ui"
+	import { flyAndScale } from "../utils/transitions.ts"
+	import { X } from "lucide-svelte"
+	import { fade } from "svelte/transition"
+
+	export let title = ""
+	export let description = ""
+	export let open = false
+</script>
diff --git a/platforms/interface/ui/components/powerDropdown.svelte b/platforms/interface/ui/components/powerDropdown.svelte
index b59f014..4c1e0be 100644
--- a/platforms/interface/ui/components/powerDropdown.svelte
+++ b/platforms/interface/ui/components/powerDropdown.svelte
@@ -6,7 +6,7 @@
 		<p class="hidden md:block">Power</p>
 	</DropdownMenu.Trigger>
 	<DropdownMenu.Content
-		class="bg-background shadow-popover w-full max-w-[229px] rounded-xl bg-gray-700 p-1"
+		class="bg-background shadow-xl w-full max-w-[230px] overflow-hidden rounded-xl bg-gray-600"
 		transition={flyAndScale}
 		sideOffset={8}
 	>
@@ -14,7 +14,7 @@
 			on:click={() => {
 				action("disconnect")
 			}}
-			class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600"
+			class="flex cursor-pointer select-none items-center gap-3 p-3 px-5 duration-200 ease-in-out data-[highlighted]:bg-gray-500"
 		>
 			<div class="flex items-center">
 				<ScreenShareOff />
@@ -23,12 +23,12 @@
 				<h4>Disconnect</h4>
 			</div>
 		</DropdownMenu.Item>
-		<DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-gray-600" />
+		<DropdownMenu.Separator class="-ml-1 -mr-1 block h-px bg-gray-500" />
 		<DropdownMenu.Item
 			on:click={() => {
 				action("sleep")
 			}}
-			class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600"
+			class="flex cursor-pointer select-none items-center gap-3 p-3 px-5 duration-200 ease-in-out data-[highlighted]:bg-gray-500"
 		>
 			<div class="flex items-center">
 				<Moon />
@@ -37,12 +37,12 @@
 				<h4>Sleep</h4>
 			</div>
 		</DropdownMenu.Item>
-		<DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-gray-600" />
+		<DropdownMenu.Separator class="-ml-1 -mr-1 block h-px bg-gray-500" />
 		<DropdownMenu.Item
 			on:click={() => {
 				action("shutdown")
 			}}
-			class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600"
+			class="flex cursor-pointer select-none items-center gap-3 p-3 px-5 duration-200 ease-in-out data-[highlighted]:bg-gray-500"
 		>
 			<div class="flex items-center">
 				<Power />
@@ -51,12 +51,12 @@
 				<h4>Shut down</h4>
 			</div>
 		</DropdownMenu.Item>
-		<DropdownMenu.Separator class="my-1 -ml-1 -mr-1 block h-px bg-gray-600" />
+		<DropdownMenu.Separator class="-ml-1 -mr-1 block h-px bg-gray-500" />
 		<DropdownMenu.Item
 			on:click={() => {
 				action("restart")
 			}}
-			class="flex cursor-pointer select-none items-center gap-3 rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600"
+			class="flex cursor-pointer select-none items-center gap-3 p-3 px-5 duration-200 ease-in-out data-[highlighted]:bg-gray-500"
 		>
 			<div class="flex items-center">
 				<RotateCcw />
diff --git a/platforms/interface/web/src/components/connect.svelte b/platforms/interface/web/src/components/connect.svelte
index 0277e53..0b486e5 100644
--- a/platforms/interface/web/src/components/connect.svelte
+++ b/platforms/interface/web/src/components/connect.svelte
@@ -10,7 +10,7 @@
 					</div>
 					<div class="flex flex-row gap-3">
 						<button
-							class="rounded-full bg-white px-3 py-2 text-black"
+							class="rounded-full bg-white px-3 py-2 text-black duration-200 ease-in-out hover:bg-gray-300"
 							on:click={() => {
 								$settings.connectionCode = item.code
 								$state.currentCode = item.code
@@ -22,7 +22,33 @@
 					</div>
 				</div>
 			{/each}
-			<a href="/settings" class="button">Add connection</a>
+			<ModularDialog title={"Add Remote Connection"} description={"You can get your connection code from the Cores desktop app."}>
+				<slot slot="openButton">
+					<Dialog.Trigger class="smallButton w-full">Add connection</Dialog.Trigger>
+				</slot>
+				<slot slot="confirmButton">
+					<Dialog.Close on:click={() => addConnectionCode()} class="smallButton">
+						<Plus class="h-5 w-5" />
+						Add
+					</Dialog.Close>
+				</slot>
+				<div class="flex flex-col flex-wrap gap-3">
+					<div>
+						<h5>Name <span class="text-red-500">*</span></h5>
+						<input placeholder="My Home PC" class="input mt-1" type="text" id="name" />
+					</div>
+
+					<div>
+						<h5>Connection code <span class="text-red-500">*</span></h5>
+						<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
+					</div>
+
+					<div>
+						<h5>MAC address</h5>
+						<input placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
+					</div>
+				</div>
+			</ModularDialog>
 		</div>
 	</div>
 </div>
@@ -32,4 +58,30 @@
 	import { Plug } from "lucide-svelte"
 	import { goto } from "$app/navigation"
 	import { state } from "../stores/state.ts"
+	import ModularDialog from "ui/components/modularDialog.svelte"
+	import { Plus } from "lucide-svelte"
+	import { Dialog } from "bits-ui"
+
+	const addConnectionCode = () => {
+		const nameInput = document.getElementById("name") as HTMLInputElement
+		const codeInput = document.getElementById("code") as HTMLInputElement
+		const macInput = document.getElementById("mac") as HTMLInputElement
+
+		if (nameInput.value === "") {
+			return alert("Please enter a name for your connection")
+		}
+
+		if (!codeInput.value.startsWith("crs_")) {
+			return alert("Invalid connection code! The connection code must start with: crs_")
+		}
+
+		$settings.connectionCodes = [
+			...$settings.connectionCodes,
+			{
+				name: nameInput.value,
+				code: codeInput.value,
+				mac: macInput.value,
+			},
+		]
+	}
 </script>
diff --git a/platforms/interface/web/src/routes/(app)/settings/+page.svelte b/platforms/interface/web/src/routes/(app)/settings/+page.svelte
index d06d743..9fc2428 100644
--- a/platforms/interface/web/src/routes/(app)/settings/+page.svelte
+++ b/platforms/interface/web/src/routes/(app)/settings/+page.svelte
@@ -1,118 +1,54 @@
 <div class="transparent-900 m-10 mx-auto w-11/12 rounded-xl sm:w-full">
 	<div class="mx-10 flex flex-col gap-5 pb-10 pt-10 sm:mx-3 sm:flex-wrap">
-		<!-- remote connections -->
-		<div class="transparent-800 flex w-full flex-row flex-wrap items-center justify-between rounded-xl p-8 text-left sm:p-4">
+		<!-- remote connections link -->
+		<div class="hidden">
+			<Dialog
+				open={dialogOpen}
+				title={"Add Remote Connection"}
+				description={"You can get your connection code from the Cores desktop app."}
+				action={addConnectionCode}
+			>
+				<div class="flex flex-col flex-wrap gap-3">
+					<div>
+						<h5>Name <span class="text-red-500">*</span></h5>
+						<input placeholder="My Home PC" class="input mt-1" type="text" id="name" />
+					</div>
+
+					<div>
+						<h5>Connection code <span class="text-red-500">*</span></h5>
+						<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
+					</div>
+
+					<div>
+						<h5>MAC address</h5>
+						<input placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
+					</div>
+				</div>
+			</Dialog>
+		</div>
+
+		<!-- feedback -->
+		<div class="transparent-800 flex w-full flex-row items-center justify-between rounded-xl p-8 text-left sm:p-4">
 			<div class="flex flex-col items-start gap-3">
 				<div class="flex items-center gap-3">
 					<div class="transparent-900 flex aspect-square items-center justify-center rounded-lg p-3 sm:p-2">
-						<MonitorSmartphone />
+						<Megaphone />
 					</div>
-					<h2>Remote connections</h2>
+					<h2>Feedback</h2>
 				</div>
-				<h3>Get your connection code from the Cores desktop app.</h3>
+				<h3>Thank you for providing feedback! Please report issues or feature requests on GitHub or by Email (cores@levminer.com).</h3>
 			</div>
 
-			<div class="flex flex-col items-start gap-3 sm:my-5">
-				<Dialog
-					open={dialogOpen}
-					title={"Add Remote Connection"}
-					description={"You can get your connection code from the Cores desktop app."}
-					action={addConnectionCode}
+			<div class="flex flex-col items-start gap-3">
+				<button
+					class="button"
+					on:click={() => {
+						open("https://github.com/levminer/cores/issues")
+					}}
 				>
-					<div class="flex flex-col flex-wrap gap-3">
-						<div>
-							<h5>Name <span class="text-red-500">*</span></h5>
-							<input placeholder="My Home PC" class="input mt-1" type="text" id="name" />
-						</div>
-
-						<div>
-							<h5>Connection code <span class="text-red-500">*</span></h5>
-							<input placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
-						</div>
-
-						<div>
-							<h5>MAC address</h5>
-							<input placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
-						</div>
-					</div>
-				</Dialog>
-			</div>
-
-			<div class="mt-5 flex w-full flex-col gap-5">
-				{#each $settings.connectionCodes as item}
-					<div class="flex w-full flex-row flex-wrap items-center justify-between gap-3">
-						<div class="flex flex-row flex-wrap gap-3">
-							<div>
-								<h5>Name</h5>
-								<input class="input mt-1" type="text" value={item.name} readonly />
-							</div>
-
-							<div>
-								<h5>Connection code</h5>
-								<input class="input mt-1" type="text" value={item.code} readonly />
-							</div>
-						</div>
-
-						<div class="flex flex-row flex-wrap gap-3">
-							<div class="mt-6">
-								<Dialog
-									title={"Edit Remote Connection"}
-									description={"You can get your connection code from the Cores desktop app."}
-									action={() => {
-										editConnectionCode(item.code)
-									}}
-								>
-									<slot slot="button">
-										<Pencil />
-										Edit
-									</slot>
-									<slot slot="delete">
-										<button
-											class="smallButton border-red-600 bg-red-600 text-white hover:text-red-600"
-											on:click={() => deleteConnectionCode(item.code)}
-										>
-											<Trash2 />
-											Delete
-										</button>
-									</slot>
-									<div class="flex flex-col flex-wrap gap-3">
-										<div>
-											<h5>Name <span class="text-red-500">*</span></h5>
-											<input value={item.name} placeholder="My Home PC" class="input mt-1" type="text" id="name" />
-										</div>
-
-										<div>
-											<h5>Connection code <span class="text-red-500">*</span></h5>
-											<input value={item.code} placeholder="crs_abcde12345" class="input mt-1" type="text" id="code" />
-										</div>
-
-										<div>
-											<h5>MAC address</h5>
-											<input value={item.mac ?? ""} placeholder="AA:BB:CC:DD:EE:FF" class="input mt-1" type="text" id="mac" />
-										</div>
-									</div>
-								</Dialog>
-							</div>
-
-							{#if $state.state === "connected" && item.mac}
-								<button
-									class="button mt-6"
-									on:click={() => {
-										console.log(item.mac?.replaceAll(":", ""))
-
-										$state.message = JSON.stringify({
-											type: "wol",
-											data: item.mac?.replaceAll(":", ""),
-										})
-									}}
-								>
-									<Power />
-									<span>Turn on</span>
-								</button>
-							{/if}
-						</div>
-					</div>
-				{/each}
+					<Github />
+					GitHub
+				</button>
 			</div>
 		</div>
 
@@ -146,7 +82,7 @@
 <script lang="ts">
 	import { settings } from "ui/stores/settings.ts"
 	import Dialog from "ui/components/dialog.svelte"
-	import { Trash2, MonitorSmartphone, Info, Pencil, Power } from "lucide-svelte"
+	import { Trash2, MonitorSmartphone, Info, Pencil, Power, Megaphone, Github } from "lucide-svelte"
 	import { version, number, date } from "../../../../../../../build.json"
 	import { onMount } from "svelte"
 	import { state } from "../../../stores/state.ts"
@@ -156,7 +92,7 @@
 	onMount(() => {
 		// get connectionCode from url params
 		const urlParams = new URLSearchParams(window.location.search)
-		const connectionCode = urlParams.get("connectionCode")
+		let connectionCode = urlParams.get("connectionCode")
 		const name = urlParams.get("name") || "My Home PC"
 		const mac = urlParams.get("mac") || ""
 
@@ -201,29 +137,4 @@
 			},
 		]
 	}
-
-	const editConnectionCode = (code: string) => {
-		const nameInput = document.getElementById("name") as HTMLInputElement
-		const codeInput = document.getElementById("code") as HTMLInputElement
-		const macInput = document.getElementById("mac") as HTMLInputElement
-
-		if (nameInput.value === "") {
-			return alert("Please enter a name for your connection")
-		}
-
-		if (!codeInput.value.startsWith("crs_")) {
-			return alert("Invalid connection code! The connection code must start with: crs_")
-		}
-
-		let idx = $settings.connectionCodes.findIndex((item) => item.code === code)
-		$settings.connectionCodes[idx] = {
-			name: nameInput.value,
-			code: codeInput.value,
-			mac: macInput.value,
-		}
-	}
-
-	const deleteConnectionCode = (code: string) => {
-		$settings.connectionCodes = $settings.connectionCodes.filter((item) => item.code !== code)
-	}
 </script>