fixes

apps/ui/src/lib/components/ServiceStatus.svelte

@@ -2,27 +2,33 @@
 	export let id: any;
 	import { status } from '$lib/store';
 	let serviceStatus = {
+		isExcluded: false,
 		isExited: false,
 		isRunning: false,
 		isRestarting: false,
 		isStopped: false
 	};
 
-	$: if (Object.keys($status.service.statuses).length > 0) {
-		let { isExited, isRunning, isRestarting } = $status.service.statuses[id].status;
+	$: if (Object.keys($status.service.statuses).length > 0 && $status.service.statuses[id]?.status) {
+		let { isExited, isRunning, isRestarting, isExcluded } = $status.service.statuses[id].status;
+		
 		serviceStatus.isExited = isExited;
 		serviceStatus.isRunning = isRunning;
+		serviceStatus.isExcluded = isExcluded;
 		serviceStatus.isRestarting = isRestarting;
 		serviceStatus.isStopped = !isExited && !isRunning && !isRestarting;
 	} else {
 		serviceStatus.isExited = false;
 		serviceStatus.isRunning = false;
+		serviceStatus.isExcluded = false;
 		serviceStatus.isRestarting = false;
 		serviceStatus.isStopped = true;
 	}
 </script>
 
-{#if serviceStatus.isRunning}
+{#if serviceStatus.isExcluded}
+	<span class="badge font-bold uppercase rounded text-orange-500 mt-2">Excluded</span>
+{:else if serviceStatus.isRunning}
 	<span class="badge font-bold uppercase rounded text-green-500 mt-2">Running</span>
 {:else if serviceStatus.isStopped || serviceStatus.isExited}
 	<span class="badge font-bold uppercase rounded text-red-500 mt-2">Stopped</span>

apps/ui/src/lib/components/Tooltip.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { Tooltip } from 'flowbite-svelte';
 	export let placement = 'bottom';
-	export let color = 'bg-coollabs font-thin text-left';
+	export let color = 'bg-coollabs font-thin text-left border-none p-4';
 	export let triggeredBy = '#tooltip-default';
 </script>
 
-<Tooltip {triggeredBy} {placement} arrow={false} {color} style="custom"><slot /></Tooltip>
+<Tooltip {triggeredBy} {placement} arrow={false} defaultClass={color} style="custom"><slot /></Tooltip>

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

@@ -81,12 +81,11 @@
 		<span>Logs</span>
 	</li>
 	<li
-		class:text-stone-600={$status.service.overallStatus === 'stopped'}
 		class="rounded"
 		class:bg-coollabs={$page.url.pathname === `/services/${$page.params.id}/logs`}
 	>
 		<a
-			href={$status.service.overallStatus !== 'stopped' ? `/services/${$page.params.id}/logs` : ''}
+			href={`/services/${$page.params.id}/logs`}
 			class="no-underline w-full"
 			><svg
 				xmlns="http://www.w3.org/2000/svg"

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

@@ -127,7 +127,7 @@
 					await post(`/services/${id}/wordpress/ftp`, {
 						ftpEnabled: false
 					});
-					service.wordpress?.ftpEnabled && window.location.reload()
+					service.wordpress?.ftpEnabled && window.location.reload();
 				}
 			} catch (error) {
 				return errorNotification(error);

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

@@ -34,7 +34,7 @@
 		if (sure) {
 			$status.service.initialLoading = true;
 			try {
-				if (service.type && $status.service.isRunning) {
+				if (service.type && $status.service.overallStatus !== 'stopped') {
 					await post(`/services/${service.id}/stop`, {});
 				}
 				await del(`/services/${service.id}`, { id: service.id });
@@ -61,6 +61,6 @@
 		class:hover:bg-red-500={$appSession.isAdmin}
 		class="btn btn-lg btn-error text-sm"
 	>
-		Delete Application
+		Delete Service
 	</button>
 </div>

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

@@ -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}