Web improved remote connection UI

Levminer · Jun 12, 2024 · 66288ac · 66288ac
1 parent 2d02531
commit 66288ac
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 38 deletions.
diff --git a/apps/web/src/components/connect.svelte b/apps/web/src/components/connect.svelte
@@ -1,23 +1,25 @@
 <div class="mx-auto mb-20 flex min-h-screen w-full flex-col items-center justify-center">
-	<h1 class="text-center">Select remote connection</h1>
 	<div class="transparent-900 m-3 my-10 rounded-xl p-8 text-left">
-		<h2 class="mb-5">Select remote connection</h2>
+		<h2 class="mb-5 text-center">Select remote connection</h2>
 		<div class="flex flex-col gap-3">
 			{#each $settings.connectionCodes as item}
 				<div class="transparent-800 flex w-full flex-row items-center justify-between rounded-xl p-5">
 					<div>
 						<h4>{item.name}</h4>
 						<h5>crs_********{item.code.slice(-2)}</h5>
 					</div>
-					<button
-						on:click={() => {
-							$settings.connectionCode = item.code
-							$state.currentCode = item.code
-							goto("/home")
-						}}
-					>
-						<Plug />
-					</button>
+					<div class="flex flex-row gap-3">
+						<button
+							class="rounded-full bg-white px-3 py-2 text-black"
+							on:click={() => {
+								$settings.connectionCode = item.code
+								$state.currentCode = item.code
+								goto("/home")
+							}}
+						>
+							<Plug />
+						</button>
+					</div>
 				</div>
 			{/each}
 			<a href="/settings" class="button">Add connection</a>

diff --git a/apps/web/src/routes/(app)/settings/+page.svelte b/apps/web/src/routes/(app)/settings/+page.svelte
@@ -2,14 +2,37 @@
 	<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">
-			<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">
-					<Cable />
+			<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">
+						<Cable />
+					</div>
+					<h2>Remote connections</h2>
 				</div>
-				<h2>Remote connections</h2>
+				<h3>Get your connection code from the Cores desktop app.</h3>
+			</div>
+
+			<div class="flex flex-col items-start gap-3 sm:my-5">
+				<Dialog
+					title={"Add Remote Connection"}
+					description={"You can copy your connection code from the Cores desktop app in the settings."}
+					action={addConnectionCode}
+				>
+					<div class="flex flex-row flex-wrap gap-3">
+						<div>
+							<h5>Name</h5>
+							<input class="input mt-1" type="text" id="name" />
+						</div>
+
+						<div>
+							<h5>Connection code</h5>
+							<input class="input mt-1" type="text" id="code" />
+						</div>
+					</div>
+				</Dialog>
 			</div>
+
 			<div class="mt-5 flex w-full flex-col gap-5">
-				<h3>Get your connection code from the Cores desktop app.</h3>
 				{#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">
@@ -32,24 +55,6 @@
 						</div>
 					</div>
 				{/each}
-				<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" id="name" />
-						</div>
-
-						<div>
-							<h5>Connection code</h5>
-							<input class="input mt-1" type="text" id="code" />
-						</div>
-					</div>
-
-					<button class="button mt-6" on:click={addConnectionCode}>
-						<Plus />
-						<span>Add</span>
-					</button>
-				</div>
 			</div>
 		</div>
 
@@ -82,13 +87,18 @@
 
 <script lang="ts">
 	import { settings } from "ui/stores/settings.ts"
-	import { Plus, RefreshCcw, Trash2, Cable, Info } from "lucide-svelte"
+	import Dialog from "ui/components/dialog.svelte"
+	import { Trash2, Cable, Info } from "lucide-svelte"
 	import { version, number, date } from "../../../../../../build.json"
 
 	const addConnectionCode = () => {
 		const name = document.getElementById("name") as HTMLInputElement
 		const code = document.getElementById("code") as HTMLInputElement
 
+		if (!code.value.startsWith("crs_")) {
+			return alert("Invalid connection code! The connection code must start with: crs_")
+		}
+
 		$settings.connectionCodes = [
 			...$settings.connectionCodes,
 			{

diff --git a/packages/ui/components/connectionDropdown.svelte b/packages/ui/components/connectionDropdown.svelte
@@ -11,6 +11,19 @@
 		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" />
@@ -19,7 +32,7 @@
 				on:click={() => {
 					connect(item.code)
 				}}
-				class="flex cursor-pointer select-none gap-3 items-center rounded-xl p-2 duration-200 ease-in-out data-[highlighted]:bg-gray-600"
+				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 />
@@ -34,9 +47,9 @@
 </DropdownMenu.Root>
 
 <script lang="ts">
-	import { Avatar, DropdownMenu } from "bits-ui"
+	import { DropdownMenu } from "bits-ui"
 	import { flyAndScale } from "../utils/transitions.ts"
-	import { Plug, UserCircle } from "lucide-svelte"
+	import { Plug } from "lucide-svelte"
 	import { settings } from "ui/stores/settings.ts"
 
 	export let connect = (item: string) => {}

diff --git a/packages/ui/components/dialog.svelte b/packages/ui/components/dialog.svelte
@@ -0,0 +1,47 @@
+<Dialog.Root>
+	<Dialog.Trigger class="button">
+		<Plus />
+		Add
+	</Dialog.Trigger>
+	<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-end">
+				<Dialog.Close on:click={action} class="smallButton">
+					<Plus />
+					Add
+				</Dialog.Close>
+			</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 { Plus, X } from "lucide-svelte"
+	import { fade } from "svelte/transition"
+
+	export let title = ""
+	export let description = ""
+    export let action = () => {}
+</script>