test ws

apps/ui/src/routes/__layout.svelte

@@ -81,6 +81,7 @@
 	export let permission: string;
 	export let isAdmin: boolean;
 
+	import{ status, connect } from '$lib/store';
 	import '../tailwind.css';
 	import Cookies from 'js-cookie';
 	import { fade } from 'svelte/transition';
@@ -93,6 +94,7 @@
 	import { appSession } from '$lib/store';
 	import Toasts from '$lib/components/Toasts.svelte';
 	import Tooltip from '$lib/components/Tooltip.svelte';
+	import { onMount } from 'svelte';
 
 	if (userId) $appSession.userId = userId;
 	if (teamId) $appSession.teamId = teamId;
@@ -107,6 +109,9 @@
 			return errorNotification(error);
 		}
 	}
+	onMount(async () => {
+		connect();
+	});
 </script>
 
 <svelte:head>

apps/ui/src/routes/services/[id]/__layout.svelte

@@ -127,7 +127,7 @@
 					await post(`/services/${id}/wordpress/ftp`, {
 						ftpEnabled: false
 					});
-					window.location.reload()
+					service.wordpress?.ftpEnabled && window.location.reload()
 				}
 			} catch (error) {
 				return errorNotification(error);
@@ -287,7 +287,7 @@
 					<line x1="7.16" y1="18.37" x2="7.16" y2="18.38" />
 					<line x1="11" y1="19.94" x2="11" y2="19.95" />
 				</svg>
-				Loading...
+				{$status.service.startup[id] || 'Loading...'}
 			</button>
 		{:else if $status.service.overallStatus === 'healthy'}
 			<button

apps/ui/src/routes/services/[id]/index.svelte

@@ -399,10 +399,10 @@
 				/>
 			</div>
 		</div>
-		<div>
+		<div class="pt-6">
 			{#each Object.keys(template) as oneService}
 				<div
-					class="flex flex-row my-2 space-x-2"
+					class="flex flex-row my-2 space-x-2 mb-6"
 					class:my-6={template[oneService].environment.length > 0 &&
 						template[oneService].environment.find((env) => env.main === oneService)}
 					class:border-b={template[oneService].environment.length > 0 &&
@@ -420,7 +420,7 @@
 					{#if template[oneService].environment.length > 0}
 						{#each template[oneService].environment as variable}
 							{#if variable.main === oneService}
-								<div class="grid grid-cols-2 items-center gap-2">
+								<div class="grid grid-cols-2 items-center gap-2" >
 									<label class="h-10" for={variable.name}
 										>{variable.label || variable.name}
 										{#if variable.description}