From 5bbf7fa95e7bdba5ff8b4c06b250cdd76001f397 Mon Sep 17 00:00:00 2001
From: cynthia kwok <ckwok@believer.gg>
Date: Tue, 28 May 2024 12:19:36 -0700
Subject: [PATCH] feat(friendshipper): add version selection to modal

---
 core/src/clients/kube.rs                      |  52 +--
 .../components/repo/ModifiedFilesCard.svelte  |   3 +-
 friendshipper/src-tauri/src/servers/router.rs |  30 +-
 .../lib/components/servers/ServerModal.svelte |  57 ++-
 .../servers/ServersListTable.svelte           |  48 ++-
 .../components/workflows/WorkflowTable.svelte |  11 +-
 friendshipper/src/routes/+layout.svelte       | 326 +++++++++---------
 friendshipper/src/routes/+page.svelte         |  39 +--
 friendshipper/src/routes/servers/+page.svelte |  98 +++++-
 9 files changed, 400 insertions(+), 264 deletions(-)

diff --git a/core/src/clients/kube.rs b/core/src/clients/kube.rs
index 2d0d2263..1725bd40 100644
--- a/core/src/clients/kube.rs
+++ b/core/src/clients/kube.rs
@@ -235,30 +235,28 @@ impl KubeClient {
         }
 
         match api.list(&lp).await {
-            Ok(res) => {
-                Ok(res
-                    .items
-                    .iter()
-                    .map(|i| {
-                        let (ip, port, netimgui_port) = match &i.status {
-                            Some(v) => (v.ip.clone(), v.port, v.netimgui_port),
-                            None => (Some("Missing".to_string()), 0, 0),
-                        };
-
-                        GameServerResults {
-                            name: i.metadata.name.clone().unwrap(),
-                            display_name: match i.spec.display_name.clone(){
-                                Some(name) => name,
-                                None => i.metadata.name.clone().unwrap(),
-                            },
-                            ip,
-                            port,
-                            netimgui_port,
-                            version: i.spec.version.clone(),
-                        }
-                    })
-                    .collect::<Vec<GameServerResults>>())
-            }
+            Ok(res) => Ok(res
+                .items
+                .iter()
+                .map(|i| {
+                    let (ip, port, netimgui_port) = match &i.status {
+                        Some(v) => (v.ip.clone(), v.port, v.netimgui_port),
+                        None => (Some("Missing".to_string()), 0, 0),
+                    };
+
+                    GameServerResults {
+                        name: i.metadata.name.clone().unwrap(),
+                        display_name: match i.spec.display_name.clone() {
+                            Some(name) => name,
+                            None => i.metadata.name.clone().unwrap(),
+                        },
+                        ip,
+                        port,
+                        netimgui_port,
+                        version: i.spec.version.clone(),
+                    }
+                })
+                .collect::<Vec<GameServerResults>>()),
             Err(e) => Err(CoreError::from(self.handle_kube_error(e).await)),
         }
     }
@@ -294,7 +292,11 @@ impl KubeClient {
                 }),
                 ..Default::default()
             },
-            spec: GameServerSpec {display_name: Some(display_name.to_string()), version: tag, map },
+            spec: GameServerSpec {
+                display_name: Some(display_name.to_string()),
+                version: tag,
+                map,
+            },
             status: None,
         };
 
diff --git a/core/ui/src/lib/components/repo/ModifiedFilesCard.svelte b/core/ui/src/lib/components/repo/ModifiedFilesCard.svelte
index 30ec831e..86141850 100644
--- a/core/ui/src/lib/components/repo/ModifiedFilesCard.svelte
+++ b/core/ui/src/lib/components/repo/ModifiedFilesCard.svelte
@@ -16,6 +16,7 @@
 	import {
 		CloseCircleSolid,
 		FileOutline,
+		FolderOpenOutline,
 		InfoCircleSolid,
 		PlusOutline
 	} from 'flowbite-svelte-icons';
@@ -241,7 +242,7 @@
 							size="xs"
 							class="p-1 border-0 focus-within:ring-0 dark:focus-within:ring-0"
 							on:click={async () => onOpenDirectory(file.path)}
-							><FolderOpenSolid class="w-4 h-4" /></Button
+							><FolderOpenOutline class="w-4 h-4" /></Button
 						>
 						<Button
 							outline
diff --git a/friendshipper/src-tauri/src/servers/router.rs b/friendshipper/src-tauri/src/servers/router.rs
index 71bda0f7..b8a3c8fa 100644
--- a/friendshipper/src-tauri/src/servers/router.rs
+++ b/friendshipper/src-tauri/src/servers/router.rs
@@ -157,22 +157,20 @@ async fn get_server(
     info!("Fetching server {}", name);
 
     match kube_client.get_gameserver(&name).await {
-        Ok(server) => {
-            match server.status {
-                Some(status) => Ok(Json(GameServerResults {
-                    display_name: match server.spec.display_name.clone(){
-                        Some(name) => name,
-                        None => server.metadata.name.clone().unwrap(),
-                    },
-                    name: server.metadata.name.unwrap(),
-                    ip: status.ip,
-                    port: status.port,
-                    netimgui_port: status.netimgui_port,
-                    version: server.spec.version.clone(),
-                })),
-                None => Err(CoreError::from(anyhow!("Server is not ready yet"))),
-            }
-        }
+        Ok(server) => match server.status {
+            Some(status) => Ok(Json(GameServerResults {
+                display_name: match server.spec.display_name.clone() {
+                    Some(name) => name,
+                    None => server.metadata.name.clone().unwrap(),
+                },
+                name: server.metadata.name.unwrap(),
+                ip: status.ip,
+                port: status.port,
+                netimgui_port: status.netimgui_port,
+                version: server.spec.version.clone(),
+            })),
+            None => Err(CoreError::from(anyhow!("Server is not ready yet"))),
+        },
         Err(e) => Err(CoreError::from(anyhow!("Error getting server: {:?}", e))),
     }
 }
diff --git a/friendshipper/src/lib/components/servers/ServerModal.svelte b/friendshipper/src/lib/components/servers/ServerModal.svelte
index 847ada11..c27b7d30 100644
--- a/friendshipper/src/lib/components/servers/ServerModal.svelte
+++ b/friendshipper/src/lib/components/servers/ServerModal.svelte
@@ -1,14 +1,15 @@
 <script lang="ts">
 	import { Button, Helper, Input, Label, Modal, Select, Toggle } from 'flowbite-svelte';
 	import { emit } from '@tauri-apps/api/event';
+	import { get } from 'svelte/store';
 	import { launchServer } from '$lib/gameServers';
-	import type { ArtifactEntry } from '$lib/types';
-	import { activeProjectConfig } from '$lib/stores';
+	import type { ArtifactEntry, Nullable } from '$lib/types';
+	import { activeProjectConfig, builtCommits, selectedCommit, workflowMap } from '$lib/stores';
 
 	export let showModal: boolean;
-	export let buildEntry: ArtifactEntry;
 	export let handleServerCreate: () => Promise<void> = async () => {};
 	export let handleAutoLaunch: (serverName: string) => Promise<void>;
+	export let initialEntry: Nullable<ArtifactEntry> = null;
 
 	let busy = false;
 	let serverName = '';
@@ -18,6 +19,9 @@
 
 	const maps = $activeProjectConfig?.maps.map((m) => ({ name: m, value: m }));
 
+	let selected: Nullable<ArtifactEntry> = get(selectedCommit);
+	let recentCommits = get(builtCommits);
+
 	const validateServerName = (name: string): boolean => {
 		if (name === '') return true;
 
@@ -31,11 +35,15 @@
 	};
 
 	const handleSubmit = async () => {
+		if (selected === null) {
+			return;
+		}
+
 		busy = true;
 
 		try {
 			await launchServer({
-				commit: buildEntry.commit,
+				commit: selected.commit,
 				displayName: serverName,
 				checkForExisting: false,
 				map
@@ -56,18 +64,57 @@
 
 		autoLaunch = false;
 	};
+
+	const handleCommitChange = (newCommit: Nullable<ArtifactEntry>) => {
+		if (newCommit === null) {
+			return;
+		}
+
+		selectedCommit.set(newCommit);
+	};
+
+	$: void handleCommitChange(selected);
+
+	$: $builtCommits,
+		() => {
+			recentCommits = get(builtCommits);
+		};
 </script>
 
 <Modal
 	size="xs"
-	defaultClass="bg-secondary-700 dark:bg-space-900 overflow-y-auto"
+	defaultClass="bg-secondary-700 dark:bg-space-900 overflow-y-auto overflow-x-hidden"
 	bodyClass="!border-t-0"
 	bind:open={showModal}
+	on:open={() => {
+		selected = initialEntry !== null ? initialEntry : get(selectedCommit);
+		console.log(initialEntry);
+		console.log(selected);
+	}}
 	autoclose={false}
 	outsideclose
 >
 	<form class="flex flex-col space-y-4" action="#" on:submit|preventDefault={handleSubmit}>
 		<h4 class="text-lg font-semibold text-primary-400">Launch Server</h4>
+		<Label color={hasError ? 'red' : 'gray'} class="space-y-2 text-xs text-white">
+			<span>Version</span>
+			<Select
+				size="sm"
+				class="bg-secondary-700 dark:bg-space-900 border-white dark:border-white text-white dark:text-white"
+				placeholder="Select a commit"
+				bind:value={selected}
+				required
+			>
+				{#if recentCommits}
+					{#each recentCommits as commit}
+						<option value={commit.value}>
+							{commit.name.substring(0, 8)}
+							{$workflowMap.get(commit.name)?.message.substring(0, 55) || ''}
+						</option>
+					{/each}
+				{/if}
+			</Select>
+		</Label>
 		<Label color={hasError ? 'red' : 'gray'} class="space-y-2 text-xs text-white">
 			<span>Name</span>
 			<Input
diff --git a/friendshipper/src/lib/components/servers/ServersListTable.svelte b/friendshipper/src/lib/components/servers/ServersListTable.svelte
index 6fdfe221..42c5a4c0 100644
--- a/friendshipper/src/lib/components/servers/ServersListTable.svelte
+++ b/friendshipper/src/lib/components/servers/ServersListTable.svelte
@@ -1,24 +1,34 @@
 <script lang="ts">
-	import { Button, Table, TableBody, TableBodyCell, TableBodyRow, Tooltip } from 'flowbite-svelte';
+	import {
+		Button,
+		Table,
+		TableBody,
+		TableBodyCell,
+		TableBodyRow,
+		TableHead,
+		TableHeadCell,
+		Tooltip
+	} from 'flowbite-svelte';
 	import { ArchiveArrowDownOutline, CodeOutline, FileCopyOutline } from 'flowbite-svelte-icons';
 	import { emit } from '@tauri-apps/api/event';
-	import ServerLogsModal from '$lib/components/servers/ServerLogsModal.svelte';
+	import { ProgressModal } from '@ethos/core';
 	import type { GameServerResult, SyncClientRequest } from '$lib/types';
 	import { builds } from '$lib/stores';
 	import { syncClient } from '$lib/builds';
 	import { downloadServerLogs, terminateServer } from '$lib/gameServers';
-	import { ProgressModal } from '@ethos/core';
+	import ServerLogsModal from '$lib/components/servers/ServerLogsModal.svelte';
 
 	const defaultLogTooltip = 'Download server logs';
 
+	export let servers: GameServerResult[] = [];
+	export let onUpdateServers: () => Promise<void>;
+	export let showHeader = false;
+
 	// Loading states
 	let syncing = false;
 	let downloadingLogs = false;
 	let logTooltip = defaultLogTooltip;
 
-	export let servers: GameServerResult[] = [];
-	export let onUpdateServers: () => Promise<void>;
-
 	// logs modal
 	let showServerLogsModal = false;
 	let selectedServerName = '';
@@ -35,7 +45,6 @@
 		const entry = $builds.entries.find((e) => e.commit === server.version);
 
 		if (!entry) {
-			console.log('NO');
 			return;
 		}
 
@@ -81,10 +90,17 @@
 </script>
 
 <Table color="custom" striped={true} divClass="w-full h-full overflow-x-hidden overflow-y-auto">
+	{#if showHeader}
+		<TableHead class="text-center border-b-0 p-2 bg-secondary-800 dark:bg-space-950">
+			<TableHeadCell class="">Name</TableHeadCell>
+			<TableHeadCell class="">Version</TableHeadCell>
+			<TableHeadCell class="" />
+		</TableHead>
+	{/if}
 	<TableBody>
 		{#if servers.length === 0}
 			<TableBodyRow class="text-center p-2">
-				<TableBodyCell class="py-2" colspan="4">
+				<TableBodyCell class="" colspan="4">
 					<p class="text-gray-400 dark:text-gray-400">No servers found</p>
 				</TableBodyCell>
 			</TableBodyRow>
@@ -92,18 +108,16 @@
 			{#each servers as server, index}
 				<TableBodyRow
 					class="text-center border-b-0 p-2 {index % 2 === 0
-						? 'bg-secondary-800 dark:bg-space-950'
-						: 'bg-secondary-700 dark:bg-space-900'}"
+						? 'bg-secondary-700 dark:bg-space-900'
+						: 'bg-secondary-800 dark:bg-space-950'}"
 				>
 					<TableBodyCell class="py-2 text-xs"
 						>{formatServerName(server.displayName || server.name)}</TableBodyCell
 					>
-					<TableBodyCell class="py-2 text-xs">{formatServerName(server.name)}</TableBodyCell>
-					<Tooltip
-						class="w-auto text-xs text-primary-400 bg-secondary-600 dark:bg-space-800"
-						placement="top"
-						>{server.name}
-					</Tooltip>
+					<TableBodyCell
+						class="py-2 w-16 max-w-[4rem] break-normal overflow-ellipsis whitespace-nowrap text-xs"
+						>{server.version.substring(0, 8)}</TableBodyCell
+					>
 					<TableBodyCell class="py-2 flex gap-2 justify-end">
 						<Button
 							outline
@@ -167,5 +181,5 @@
 	</TableBody>
 </Table>
 
-<ProgressModal bind:showModal={syncing} title="Syncing Client" />
+<ProgressModal bind:showModal={syncing} />
 <ServerLogsModal bind:showModal={showServerLogsModal} serverName={selectedServerName} />
diff --git a/friendshipper/src/lib/components/workflows/WorkflowTable.svelte b/friendshipper/src/lib/components/workflows/WorkflowTable.svelte
index fd25600a..2f5f85d9 100644
--- a/friendshipper/src/lib/components/workflows/WorkflowTable.svelte
+++ b/friendshipper/src/lib/components/workflows/WorkflowTable.svelte
@@ -1,6 +1,11 @@
 <script lang="ts">
 	import { Badge, Button, Card, Indicator, Tooltip } from 'flowbite-svelte';
-	import { ChevronDownOutline, ChevronUpOutline, CloseOutline, CodeOutline } from 'flowbite-svelte-icons';
+	import {
+		ChevronDownOutline,
+		ChevronUpOutline,
+		CloseOutline,
+		CodeOutline
+	} from 'flowbite-svelte-icons';
 	import { emit } from '@tauri-apps/api/event';
 	import type { CommitWorkflowInfo, Nullable, Workflow } from '$lib/types';
 	import { stopWorkflow } from '$lib/builds';
@@ -155,9 +160,9 @@
 				selectedCommit === commit.commit ? setSelectedCommit('') : setSelectedCommit(commit.commit)}
 		>
 			{#if selectedCommit === commit.commit}
-				<ChevronDownOutline class="w-4 h-4 text-white" />
+				<ChevronDownOutline class="w-5 h-5 text-white" />
 			{:else}
-				<ChevronUpOutline class="w-4 h-4 text-white" />
+				<ChevronUpOutline class="w-5 h-5 text-white" />
 			{/if}
 		</Button>
 	</div>
diff --git a/friendshipper/src/routes/+layout.svelte b/friendshipper/src/routes/+layout.svelte
index 9d3ccedc..7275ffa1 100644
--- a/friendshipper/src/routes/+layout.svelte
+++ b/friendshipper/src/routes/+layout.svelte
@@ -98,9 +98,9 @@
 	const spanClass = 'flex-1 ml-3 whitespace-nowrap';
 	const sidebarSubItemClass = 'mx-2 my-1 text-sm text-primary-400 dark:text-primary-400';
 	const sidebarSubItemInactiveClass =
-			'flex items-center justify-between mx-2 my-1 px-2 py-1 text-base font-normal rounded-lg text-primary-400 dark:text-primary-400 bg-secondary-800 dark:bg-space-950 hover:bg-secondary-700 dark:hover:bg-space-900';
+		'flex items-center justify-between mx-2 my-1 px-2 py-1 text-base font-normal rounded-lg text-primary-400 dark:text-primary-400 bg-secondary-800 dark:bg-space-950 hover:bg-secondary-700 dark:hover:bg-space-900';
 	const sidebarSubItemActiveClass =
-			'flex items-center justify-between mx-2 my-1 px-2 py-1 text-base font-normal bg-secondary-700 dark:bg-space-900 rounded-lg text-primary-400 dark:text-primary-400 hover:bg-secondary-700 dark:hover:bg-space-900';
+		'flex items-center justify-between mx-2 my-1 px-2 py-1 text-base font-normal bg-secondary-700 dark:bg-space-900 rounded-lg text-primary-400 dark:text-primary-400 hover:bg-secondary-700 dark:hover:bg-space-900';
 
 	$: activeUrl = $page.url.pathname;
 
@@ -215,7 +215,7 @@
 
 				if ($appConfig.repoPath !== '') {
 					const [repoConfigResponse, repoStatusResponse, commitsResponse, locksResponse] =
-							await Promise.all([getRepoConfig(), getRepoStatus(), getAllCommits(), verifyLocks()]);
+						await Promise.all([getRepoConfig(), getRepoStatus(), getAllCommits(), verifyLocks()]);
 
 					repoConfig.set(repoConfigResponse);
 					repoStatus.set(repoStatusResponse);
@@ -226,29 +226,29 @@
 				loadingBuilds = true;
 
 				getWorkflows()
-						.then((response) => {
-							workflows.set(response.commits);
-							loadingBuilds = false;
-						})
-						.catch((e) => {
-							if (e instanceof Error) {
-								void emit('error', e);
-							}
-						});
+					.then((response) => {
+						workflows.set(response.commits);
+						loadingBuilds = false;
+					})
+					.catch((e) => {
+						if (e instanceof Error) {
+							void emit('error', e);
+						}
+					});
 			} catch (e) {
 				await emit('error', e);
 			}
 
 			if ($appConfig.engineRepoUrl !== '') {
 				getWorkflows(true)
-						.then((response) => {
-							engineWorkflows.set(response.commits);
-						})
-						.catch((e) => {
-							if (e instanceof Error) {
-								void emit('error', e);
-							}
-						});
+					.then((response) => {
+						engineWorkflows.set(response.commits);
+					})
+					.catch((e) => {
+						if (e instanceof Error) {
+							void emit('error', e);
+						}
+					});
 			}
 		}
 
@@ -319,28 +319,28 @@
 		};
 
 		initialize()
-				.then(() => {
-					void refresh();
+			.then(() => {
+				void refresh();
 
-					const interval = setInterval(() => {
-						void refresh();
-					}, refreshInterval);
-					const authInterval = setInterval(() => {
-						void checkAuth();
-					}, refreshInterval);
-
-					showWelcomeModal = !get(appConfig).initialized;
-
-					return () => {
-						clearInterval(interval);
-						clearInterval(authInterval);
-					};
-				})
-				.catch((e) => {
-					if (e instanceof Error) {
-						void emit('error', e);
-					}
-				});
+				const interval = setInterval(() => {
+					void refresh();
+				}, refreshInterval);
+				const authInterval = setInterval(() => {
+					void checkAuth();
+				}, refreshInterval);
+
+				showWelcomeModal = !get(appConfig).initialized;
+
+				return () => {
+					clearInterval(interval);
+					clearInterval(authInterval);
+				};
+			})
+			.catch((e) => {
+				if (e instanceof Error) {
+					void emit('error', e);
+				}
+			});
 	});
 
 	void listen('error', (e) => {
@@ -402,47 +402,47 @@
 <WelcomeModal bind:showModal={showWelcomeModal} onClose={initialize} />
 
 <PreferencesModal
-		bind:showModal={showPreferencesModal}
-		bind:requestInFlight={preferencesModalRequestInFlight}
-		bind:showProgressModal
-		{handleCheckForUpdates}
+	bind:showModal={showPreferencesModal}
+	bind:requestInFlight={preferencesModalRequestInFlight}
+	bind:showProgressModal
+	{handleCheckForUpdates}
 />
 
 <div class="flex flex-col h-screen w-screen border border-primary-900 overflow-hidden rounded-md">
 	<div
-			class="flex justify-between items-center gap-1 w-full h-8 bg-secondary-800 dark:bg-space-950 border-b border-opacity-50 border-dotted border-primary-500"
-			data-tauri-drag-region
+		class="flex justify-between items-center gap-1 w-full h-8 bg-secondary-800 dark:bg-space-950 border-b border-opacity-50 border-dotted border-primary-500"
+		data-tauri-drag-region
 	>
 		<div class="pl-2 flex gap-2 items-center">
 			<Img imgClass="w-5 h-5" src="/assets/icon.png" /><span class="text-gray-300"
-		>friendshipper</span
-		>
+				>friendshipper</span
+			>
 		</div>
 		<div class="pr-2 flex gap-2 justify-end">
 			<Button
-					outline
-					color="dark"
-					size="xs"
-					class="p-1 my-1 hover:bg-secondary-800 text-gray-400 dark:hover:bg-space-950 border-0 focus-within:ring-0 dark:focus-within:ring-0 focus-within:bg-secondary-800 dark:focus-within:bg-space-950"
-					on:click={async () => {
+				outline
+				color="dark"
+				size="xs"
+				class="p-1 my-1 hover:bg-secondary-800 text-gray-400 dark:hover:bg-space-950 border-0 focus-within:ring-0 dark:focus-within:ring-0 focus-within:bg-secondary-800 dark:focus-within:bg-space-950"
+				on:click={async () => {
 					await appWindow.minimize();
 				}}><MinusOutline class="h-4 w-4" /></Button
 			>
 			<Button
-					outline
-					color="dark"
-					size="xs"
-					class="p-1 my-1 hover:bg-secondary-800 text-gray-400 dark:hover:bg-space-950 border-0 focus-within:ring-0 dark:focus-within:ring-0 focus-within:bg-secondary-800 dark:focus-within:bg-space-950"
-					on:click={async () => {
+				outline
+				color="dark"
+				size="xs"
+				class="p-1 my-1 hover:bg-secondary-800 text-gray-400 dark:hover:bg-space-950 border-0 focus-within:ring-0 dark:focus-within:ring-0 focus-within:bg-secondary-800 dark:focus-within:bg-space-950"
+				on:click={async () => {
 					await appWindow.toggleMaximize();
 				}}><WindowOutline class="h-4 w-4" /></Button
 			>
 			<Button
-					outline
-					color="dark"
-					size="xs"
-					class="p-1 my-1 hover:bg-secondary-800 text-gray-400 dark:hover:bg-space-950 border-0 focus-within:ring-0 dark:focus-within:ring-0 focus-within:bg-secondary-800 dark:focus-within:bg-space-950"
-					on:click={async () => {
+				outline
+				color="dark"
+				size="xs"
+				class="p-1 my-1 hover:bg-secondary-800 text-gray-400 dark:hover:bg-space-950 border-0 focus-within:ring-0 dark:focus-within:ring-0 focus-within:bg-secondary-800 dark:focus-within:bg-space-950"
+				on:click={async () => {
 					await appWindow.hide();
 				}}><CloseOutline class="h-4 w-4" /></Button
 			>
@@ -451,17 +451,17 @@
 	{#if !initialized}
 		{#if loginRequired && loginPrompted}
 			<div
-					class="flex flex-col p-4 align-middle justify-around h-full w-full bg-secondary-800 dark:bg-space-950"
+				class="flex flex-col p-4 align-middle justify-around h-full w-full bg-secondary-800 dark:bg-space-950"
 			>
 				<Card
-						class="w-full p-4 sm:p-4 max-w-full flex flex-col align-middle gap-2 bg-secondary-700 dark:bg-space-900 border-0 shadow-none"
+					class="w-full p-4 sm:p-4 max-w-full flex flex-col align-middle gap-2 bg-secondary-700 dark:bg-space-900 border-0 shadow-none"
 				>
 					<img src="/assets/7B_5.png" alt="Friendshipper Logo" class="w-24 h-24 mx-auto" />
 					<h3 class="text-xl text-white text-center">Log in to Friendshipper!</h3>
 					<div class="flex flex-row justify-around align-middle">
 						<Button
-								class="w-[300px]"
-								on:click={async () => {
+							class="w-[300px]"
+							on:click={async () => {
 								try {
 									await refreshLogin();
 									await initialize();
@@ -471,14 +471,14 @@
 									await emit('error', e);
 								}
 							}}
-						>Log In
+							>Log In
 						</Button>
 					</div>
 				</Card>
 			</div>
 		{:else}
 			<div
-					class="flex flex-col gap-2 px-12 bg-secondary-700 dark:bg-space-900 items-center w-screen h-screen justify-center"
+				class="flex flex-col gap-2 px-12 bg-secondary-700 dark:bg-space-900 items-center w-screen h-screen justify-center"
 			>
 				<div class="flex items-center gap-2">
 					<span class="text-gray-300 text-xl">{startupMessage}...</span>
@@ -489,40 +489,40 @@
 		{/if}
 	{:else}
 		<div
-				class="flex bg-secondary-800 dark:bg-space-950 h-full overflow-y-hidden w-full overflow-x-hidden"
+			class="flex bg-secondary-800 dark:bg-space-950 h-full overflow-y-hidden w-full overflow-x-hidden"
 		>
 			<QuickLaunchModal bind:showModal={quickLaunching} serverName={quickLaunchServerName} />
 			<Sidebar
-					asideClass="w-56 shadow-md sticky top-0 h-full"
-					activeClass="flex items-center p-2 text-base font-normal text-gray-900 bg-secondary-800 dark:bg-space-950 rounded-lg text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950"
-					nonActiveClass="flex items-center p-2 text-base font-normal rounded-lg text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950"
-					{activeUrl}
+				asideClass="w-56 shadow-md sticky top-0 h-full"
+				activeClass="flex items-center p-2 text-base font-normal text-gray-900 bg-secondary-800 dark:bg-space-950 rounded-lg text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950"
+				nonActiveClass="flex items-center p-2 text-base font-normal rounded-lg text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950"
+				{activeUrl}
 			>
 				<SidebarWrapper class="h-full rounded-none bg-secondary-700 dark:bg-space-900">
 					<SidebarGroup>
 						<SidebarItem
-								class="group/item"
-								label="Home"
-								href="/"
-								active={activeUrl === '/'}
-								{spanClass}
+							class="group/item"
+							label="Home"
+							href="/"
+							active={activeUrl === '/'}
+							{spanClass}
 						>
 							<svelte:fragment slot="icon">
 								<HomeSolid
-										class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
+									class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
 								/>
 							</svelte:fragment>
 						</SidebarItem>
 						<SidebarItem
-								class="group/item"
-								label="Playtests"
-								href="/playtests"
-								active={activeUrl === '/playtests'}
-								{spanClass}
+							class="group/item"
+							label="Playtests"
+							href="/playtests"
+							active={activeUrl === '/playtests'}
+							{spanClass}
 						>
 							<svelte:fragment slot="icon">
 								<UserSolid
-										class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
+									class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
 								/>
 							</svelte:fragment>
 						</SidebarItem>
@@ -542,26 +542,26 @@
 
 						{#if loadingBuilds}
 							<Button
-									class="flex gap-3 w-full p-2 justify-start hover:bg-secondary-700 dark:hover:bg-space-900 bg-secondary-700 dark:bg-space-950"
-									disabled
+								class="flex gap-3 w-full p-2 justify-start hover:bg-secondary-700 dark:hover:bg-space-900 bg-secondary-700 dark:bg-space-950"
+								disabled
 							>
 								<Spinner class="w-5 h-5 border-none" />
 								<span class="font-normal text-base text-gray-400 dark:text-gray-300">Builds</span>
 							</Button>
 						{:else}
 							<SidebarItem
-									class="group/item"
-									label="Builds"
-									href="/builds"
-									active={activeUrl === '/builds'}
-									{spanClass}
+								class="group/item"
+								label="Builds"
+								href="/builds"
+								active={activeUrl === '/builds'}
+								{spanClass}
 							>
 								<svelte:fragment slot="icon">
 									{#if loadingBuilds}
 										<Spinner class="w-5 h-5 border-none" />
 									{:else}
 										<BuildingSolid
-												class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
+											class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
 										/>
 									{/if}
 								</svelte:fragment>
@@ -569,13 +569,13 @@
 						{/if}
 						{#if $appConfig.repoPath !== ''}
 							<SidebarDropdownWrapper
-									label="Source"
-									class="group/item text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950 rounded-lg"
-									ulClass="my-2 rounded-lg py-1 bg-secondary-800 dark:bg-space-950"
+								label="Source"
+								class="group/item text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950 rounded-lg"
+								ulClass="my-2 rounded-lg py-1 bg-secondary-800 dark:bg-space-950"
 							>
 								<svelte:fragment slot="icon">
 									<CodeBranchSolid
-											class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
+										class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
 									/>
 								</svelte:fragment>
 								<svelte:fragment slot="arrowup">
@@ -585,17 +585,17 @@
 									<ChevronDownOutline class="h-5 w-5 text-white" />
 								</svelte:fragment>
 								<SidebarItem
-										label="Submit"
-										activeClass={sidebarSubItemActiveClass}
-										nonActiveClass={sidebarSubItemInactiveClass}
-										spanClass={sidebarSubItemClass}
-										href="/source/submit"
-										active={activeUrl === '/source/submit'}
+									label="Submit"
+									activeClass={sidebarSubItemActiveClass}
+									nonActiveClass={sidebarSubItemInactiveClass}
+									spanClass={sidebarSubItemClass}
+									href="/source/submit"
+									active={activeUrl === '/source/submit'}
 								>
 									<svelte:fragment slot="subtext">
 										<div class="flex w-full gap-1 pl-2 ms-3 items-center justify-end">
 											<span
-													class="items-center px-2 text-sm font-medium text-white rounded-full {$allModifiedFiles.length >
+												class="items-center px-2 text-sm font-medium text-white rounded-full {$allModifiedFiles.length >
 												0
 													? 'bg-primary-600 dark:bg-primary-600'
 													: 'bg-gray-500 dark:bg-gray-500'}"
@@ -604,7 +604,7 @@
 											</span>
 											{#if conflictsDetected}
 												<span
-														class="items-center px-2 text-sm font-medium text-white rounded-full {$allModifiedFiles.length >
+													class="items-center px-2 text-sm font-medium text-white rounded-full {$allModifiedFiles.length >
 													0
 														? 'bg-red-700 dark:bg-red-700'
 														: 'bg-gray-500 dark:bg-gray-500'}"
@@ -616,24 +616,24 @@
 									</svelte:fragment>
 								</SidebarItem>
 								<SidebarItem
-										label="Commits"
-										activeClass={sidebarSubItemActiveClass}
-										nonActiveClass={sidebarSubItemInactiveClass}
-										spanClass={sidebarSubItemClass}
-										href="/source/history"
-										active={activeUrl === '/source/history'}
+									label="Commits"
+									activeClass={sidebarSubItemActiveClass}
+									nonActiveClass={sidebarSubItemInactiveClass}
+									spanClass={sidebarSubItemClass}
+									href="/source/history"
+									active={activeUrl === '/source/history'}
 								/>
 								<SidebarItem
-										label="Locks"
-										activeClass={sidebarSubItemActiveClass}
-										nonActiveClass={sidebarSubItemInactiveClass}
-										spanClass={sidebarSubItemClass}
-										href="/source/locks"
-										active={activeUrl === '/source/locks'}
+									label="Locks"
+									activeClass={sidebarSubItemActiveClass}
+									nonActiveClass={sidebarSubItemInactiveClass}
+									spanClass={sidebarSubItemClass}
+									href="/source/locks"
+									active={activeUrl === '/source/locks'}
 								>
 									<svelte:fragment slot="subtext">
 										<span
-												class="items-center px-2 ms-3 text-sm font-medium text-white rounded-full {$locks
+											class="items-center px-2 ms-3 text-sm font-medium text-white rounded-full {$locks
 												.ours.length > 0
 												? 'bg-primary-600 dark:bg-primary-600'
 												: 'bg-gray-500 dark:bg-gray-500'}"
@@ -643,24 +643,24 @@
 									</svelte:fragment>
 								</SidebarItem>
 								<SidebarItem
-										label="Diagnostics"
-										activeClass={sidebarSubItemActiveClass}
-										nonActiveClass={sidebarSubItemInactiveClass}
-										spanClass={sidebarSubItemClass}
-										href="/source/diagnostics"
-										active={activeUrl === '/source/diagnostics'}
+									label="Diagnostics"
+									activeClass={sidebarSubItemActiveClass}
+									nonActiveClass={sidebarSubItemInactiveClass}
+									spanClass={sidebarSubItemClass}
+									href="/source/diagnostics"
+									active={activeUrl === '/source/diagnostics'}
 								/>
 							</SidebarDropdownWrapper>
 						{/if}
 						{#if $dynamicConfig.ludosEnabled && $appConfig.ludosShowUI}
 							<SidebarDropdownWrapper
-									label="Ludos"
-									class="group/item text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950 rounded-lg"
-									ulClass="my-2 rounded-lg py-1 bg-secondary-800 dark:bg-space-950"
+								label="Ludos"
+								class="group/item text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950 rounded-lg"
+								ulClass="my-2 rounded-lg py-1 bg-secondary-800 dark:bg-space-950"
 							>
 								<svelte:fragment slot="icon">
 									<DatabaseSolid
-											class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
+										class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
 									/>
 								</svelte:fragment>
 								<svelte:fragment slot="arrowup">
@@ -670,23 +670,23 @@
 									<ChevronDownOutline class="h-5 w-5 text-white" />
 								</svelte:fragment>
 								<SidebarItem
-										label="Storage"
-										activeClass={sidebarSubItemActiveClass}
-										nonActiveClass={sidebarSubItemInactiveClass}
-										class={sidebarSubItemClass}
-										href="/ludos/objects"
-										active={activeUrl === '/ludos/objects'}
+									label="Storage"
+									activeClass={sidebarSubItemActiveClass}
+									nonActiveClass={sidebarSubItemInactiveClass}
+									class={sidebarSubItemClass}
+									href="/ludos/objects"
+									active={activeUrl === '/ludos/objects'}
 								/>
 							</SidebarDropdownWrapper>
 						{/if}
 						<SidebarDropdownWrapper
-								label="System"
-								class="group/item text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950 rounded-lg"
-								ulClass="my-2 rounded-lg py-1 bg-secondary-800 dark:bg-space-950"
+							label="System"
+							class="group/item text-primary-400 dark:text-primary-400 hover:bg-secondary-800 dark:hover:bg-space-950 rounded-lg"
+							ulClass="my-2 rounded-lg py-1 bg-secondary-800 dark:bg-space-950"
 						>
 							<svelte:fragment slot="icon">
 								<ComputerSpeakerSolid
-										class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
+									class="w-5 h-5 transition duration-75 text-gray-400 dark:text-gray-400 group-hover/item:text-white dark:group-hover/item:text-white"
 								/>
 							</svelte:fragment>
 							<svelte:fragment slot="arrowup">
@@ -696,12 +696,12 @@
 								<ChevronDownOutline class="h-5 w-5 text-white" />
 							</svelte:fragment>
 							<SidebarItem
-									label="Logs"
-									activeClass={sidebarSubItemActiveClass}
-									nonActiveClass={sidebarSubItemInactiveClass}
-									class={sidebarSubItemClass}
-									href="/system/logs"
-									active={activeUrl === '/system/logs'}
+								label="Logs"
+								activeClass={sidebarSubItemActiveClass}
+								nonActiveClass={sidebarSubItemInactiveClass}
+								class={sidebarSubItemClass}
+								href="/system/logs"
+								active={activeUrl === '/system/logs'}
 							/>
 						</SidebarDropdownWrapper>
 					</SidebarGroup>
@@ -717,12 +717,12 @@
 						<div class="flex flex-col">
 							<div class="flex mt-2">
 								<Button
-										class="!p-2 active:border-none focus:outline-none"
-										label="Preferences"
-										on:click={() => {
+									class="!p-2 active:border-none focus:outline-none"
+									label="Preferences"
+									on:click={() => {
 										showPreferencesModal = true;
 									}}
-										bind:disabled={preferencesModalRequestInFlight}
+									bind:disabled={preferencesModalRequestInFlight}
 								>
 									{#if preferencesModalRequestInFlight}
 										<Spinner class="h-6 w-6 border-none" />
@@ -731,15 +731,15 @@
 									{/if}
 								</Button>
 								<Button
-										outline
-										class="mb-1 p-0 w-full hover:bg-secondary-700 dark:hover:bg-space-900 hover:text-primary-500 dark:hover:text-primary-500 active:border-none dark:active:border-none focus:ring-0 dark:focus:ring-0 border-none text-primary-500 dark:text-primary-500 text-center text-sm"
-										on:click={toggleVersionText}
-								>{(hidePizza && `v${appVersion}`) || 'Have a piece of pizza!'}
+									outline
+									class="mb-1 p-0 w-full hover:bg-secondary-700 dark:hover:bg-space-900 hover:text-primary-500 dark:hover:text-primary-500 active:border-none dark:active:border-none focus:ring-0 dark:focus:ring-0 border-none text-primary-500 dark:text-primary-500 text-center text-sm"
+									on:click={toggleVersionText}
+									>{(hidePizza && `v${appVersion}`) || 'Have a piece of pizza!'}
 								</Button>
 							</div>
 							<div
-									class="w-full h-24 bg-black border rounded border-primary-500 dark:border-primary-500 hover:cursor-grab active:cursor-grabbing mt-2"
-									class:hidePizza
+								class="w-full h-24 bg-black border rounded border-primary-500 dark:border-primary-500 hover:cursor-grab active:cursor-grabbing mt-2"
+								class:hidePizza
 							>
 								<Canvas>
 									<Pizza />
@@ -766,11 +766,11 @@
 
 <!-- Update modal, not quite worthy of a component yet -->
 <Modal
-		open={updateAvailable && !$updateDismissed}
-		size="sm"
-		defaultClass="bg-secondary-700 dark:bg-space-900 overflow-y-auto"
-		bodyClass="!border-t-0"
-		on:close={() => {
+	open={updateAvailable && !$updateDismissed}
+	size="sm"
+	defaultClass="bg-secondary-700 dark:bg-space-900 overflow-y-auto"
+	bodyClass="!border-t-0"
+	on:close={() => {
 		updateDismissed.set(true);
 	}}
 >
@@ -779,7 +779,7 @@
 			Friendshipper <span class="font-mono text-primary-400">v{latest}</span> is available!
 		</div>
 		<Button disabled={updating} color="green" class="flex gap-2" on:click={handleUpdateClicked}
-		>Upgrade
+			>Upgrade
 			{#if updating}
 				<Spinner color="white" class="h-4 w-4 border-none" />
 			{/if}
@@ -809,4 +809,4 @@
 	:global(::-webkit-scrollbar-corner) {
 		background: theme('colors.secondary.700');
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/friendshipper/src/routes/+page.svelte b/friendshipper/src/routes/+page.svelte
index 1cadce6a..d41bf830 100644
--- a/friendshipper/src/routes/+page.svelte
+++ b/friendshipper/src/routes/+page.svelte
@@ -1,21 +1,10 @@
 <script lang="ts">
-	import {
-		Button,
-		Card,
-		Label,
-		Select,
-		Spinner,
-		Tooltip
-	} from 'flowbite-svelte';
+	import { Button, Card, Label, Select, Spinner, Tooltip } from 'flowbite-svelte';
 	import { invoke } from '@tauri-apps/api/tauri';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
-	import {
-		CirclePlusOutline,
-		FolderOpenOutline
-	} from 'flowbite-svelte-icons';
+	import { CirclePlusOutline, FolderOpenOutline } from 'flowbite-svelte-icons';
 	import { emit, listen } from '@tauri-apps/api/event';
-	import { ProgressModal } from '@ethos/core';
 	import {
 		activeProjectConfig,
 		appConfig,
@@ -35,16 +24,11 @@
 		QuickLaunchEvent,
 		SyncClientRequest
 	} from '$lib/types';
-	import {
-		getServers,
-		launchServer,
-		openLogsFolder,
-	} from '$lib/gameServers';
+	import { getServers, launchServer, openLogsFolder } from '$lib/gameServers';
 	import { syncClient, getBuilds } from '$lib/builds';
 	import ServerModal from '$lib/components/servers/ServerModal.svelte';
 	import { getPlaytestGroupForUser } from '$lib/playtests';
-	import ServerLogsModal from '$lib/components/servers/ServerLogsModal.svelte';
-	import ServersListTable from "$lib/components/servers/ServersListTable.svelte";
+	import ServersListTable from '$lib/components/servers/ServersListTable.svelte';
 
 	// Loading states
 	let playtestLoading = false;
@@ -58,10 +42,6 @@
 	let selected: Nullable<ArtifactEntry> = get(selectedCommit);
 	let recentCommits = get(builtCommits);
 
-	// logs modal
-	let showServerLogsModal = false;
-	let selectedServerName = '';
-
 	const getNextPlaytest = (pts: Playtest[]): Nullable<Playtest> => {
 		if (pts.length > 0) {
 			const nextAssigned = pts.find(
@@ -122,6 +102,11 @@
 			recentCommits = get(builtCommits);
 		};
 
+	$: $selectedCommit,
+		() => {
+			selected = get(selectedCommit);
+		};
+
 	const handleServerCreate = async () => {
 		if (selected === null) {
 			return;
@@ -129,6 +114,7 @@
 
 		try {
 			await updateServers(selected.commit);
+			selected = get(selectedCommit);
 		} catch (e) {
 			await emit('error', e);
 		}
@@ -380,7 +366,7 @@
 
 				<ServerModal
 					bind:showModal={showServerModal}
-					buildEntry={selected}
+					initialEntry={selected}
 					{handleServerCreate}
 					{handleAutoLaunch}
 				/>
@@ -423,6 +409,3 @@
 		>{getMainButtonText()}
 	</Button>
 {/key}
-
-<ProgressModal bind:showModal={syncing} />
-<ServerLogsModal bind:showModal={showServerLogsModal} serverName={selectedServerName} />
diff --git a/friendshipper/src/routes/servers/+page.svelte b/friendshipper/src/routes/servers/+page.svelte
index 0b3ea670..8184e37c 100644
--- a/friendshipper/src/routes/servers/+page.svelte
+++ b/friendshipper/src/routes/servers/+page.svelte
@@ -1,15 +1,23 @@
 <script lang="ts">
-	import { Card, Spinner } from 'flowbite-svelte';
+	import { Button, Card, Spinner } from 'flowbite-svelte';
 	import { emit } from '@tauri-apps/api/event';
 	import { onMount } from 'svelte';
-	import { appConfig } from '$lib/stores';
-	import type { GameServerResult } from '$lib/types';
+	import { CirclePlusOutline, RefreshOutline } from 'flowbite-svelte-icons';
+	import { get } from 'svelte/store';
+	import { appConfig, builds, selectedCommit } from '$lib/stores';
+	import type { ArtifactEntry, GameServerResult, Nullable, SyncClientRequest } from '$lib/types';
 	import ServersListTable from '$lib/components/servers/ServersListTable.svelte';
 	import { getServers } from '$lib/gameServers';
+	import ServerModal from '$lib/components/servers/ServerModal.svelte';
+	import { syncClient } from '$lib/builds';
 
 	let fetchingServers = false;
 	let servers: GameServerResult[] = [];
 
+	// create server modal
+	let showModal = false;
+	let selected: Nullable<ArtifactEntry> = get(selectedCommit);
+
 	const updateServers = async () => {
 		if ($appConfig.initialized) {
 			fetchingServers = true;
@@ -22,6 +30,56 @@
 		}
 	};
 
+	const handleServerCreate = async () => {
+		if (selected === null) {
+			return;
+		}
+
+		try {
+			await updateServers();
+			selected = get(selectedCommit);
+		} catch (e) {
+			await emit('error', e);
+		}
+	};
+
+	const handleSyncClient = async (entry: Nullable<ArtifactEntry>, server: GameServerResult) => {
+		if (entry === null) {
+			return;
+		}
+
+		const req: SyncClientRequest = {
+			artifactEntry: entry,
+			methodPrefix: $builds.methodPrefix,
+			launchOptions: {
+				ip: server.ip,
+				port: server.port,
+				netimguiPort: server.netimguiPort
+			}
+		};
+
+		try {
+			await syncClient(req);
+		} catch (e) {
+			await emit('error', e);
+		}
+	};
+
+	const handleAutoLaunch = async (serverName: string) => {
+		if (selected === null) {
+			return;
+		}
+
+		const server = servers.find((s) => s.displayName === serverName);
+		if (server) {
+			try {
+				await handleSyncClient(selected, server);
+			} catch (e) {
+				await emit('error', e);
+			}
+		}
+	};
+
 	onMount(() => {
 		void updateServers();
 	});
@@ -29,9 +87,34 @@
 
 <div class="flex items-center gap-2">
 	<p class="text-2xl my-2 text-primary-400 dark:text-primary-400">Servers</p>
-	{#if fetchingServers}
-		<Spinner size="4" />
-	{/if}
+	<Button
+		disabled={fetchingServers}
+		class="!p-1.5"
+		primary
+		on:click={async () => {
+			await updateServers();
+		}}
+	>
+		{#if fetchingServers}
+			<Spinner size="4" />
+		{:else}
+			<RefreshOutline class="w-4 h-4" />
+		{/if}
+	</Button>
+	<Button
+		disabled={fetchingServers}
+		class="!p-1.5"
+		primary
+		on:click={() => {
+			showModal = true;
+		}}
+	>
+		{#if fetchingServers}
+			<Spinner size="4" />
+		{:else}
+			<CirclePlusOutline class="w-4 h-4" />
+		{/if}
+	</Button>
 </div>
 <Card
 	class="w-full p-2 sm:p-2 max-w-full bg-secondary-700 dark:bg-space-900 h-full overflow-y-hidden border-0 shadow-none flex flex-col gap-0 overflow-auto"
@@ -41,5 +124,8 @@
 		onUpdateServers={async () => {
 			await updateServers();
 		}}
+		showHeader
 	/>
 </Card>
+
+<ServerModal bind:showModal {handleServerCreate} {handleAutoLaunch} />