feat: init moodle and separate stuffs to shared package

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

@@ -47,6 +47,7 @@
 				}
 			};
 		} catch (error) {
+			console.log(error);
 			return handlerNotFoundLoad(error, url);
 		}
 	};
@@ -62,6 +63,7 @@
 	import { errorNotification, handlerNotFoundLoad } from '$lib/common';
 	import { appSession, disabledButton, status } from '$lib/store';
 	import { onDestroy, onMount } from 'svelte';
+	import ServiceLinks from './_ServiceLinks.svelte';
 	const { id } = $page.params;
 
 	export let service: any;
@@ -76,6 +78,13 @@
 	let loading = false;
 	let statusInterval: any;
 
+	let location = service.fqdn || null;
+	if (GITPOD_WORKSPACE_URL && service.exposePort) {
+		const { href } = new URL(GITPOD_WORKSPACE_URL);
+		const newURL = href.replace('https://', `https://${service.exposePort}-`).replace(/\/$/, '');
+		location = newURL;
+	}
+
 	async function deleteService() {
 		const sure = confirm($t('application.confirm_to_delete', { name: service.name }));
 		if (sure) {
@@ -109,7 +118,7 @@
 		loading = true;
 		try {
 			await post(`/services/${service.id}/${service.type}/start`, {});
-			return window.location.reload()
+			return window.location.reload();
 		} catch (error) {
 			return errorNotification(error);
 		} finally {
@@ -147,6 +156,29 @@
 		<Loading fullscreen cover />
 	{:else}
 		{#if service.type && service.destinationDockerId && service.version}
+			{#if location}
+				<a
+					href={location}
+					target="_blank"
+					class="icons tooltip-bottom flex items-center bg-transparent text-sm"
+					><svg
+						xmlns="http://www.w3.org/2000/svg"
+						class="h-6 w-6"
+						viewBox="0 0 24 24"
+						stroke-width="1.5"
+						stroke="currentColor"
+						fill="none"
+						stroke-linecap="round"
+						stroke-linejoin="round"
+					>
+						<path stroke="none" d="M0 0h24v24H0z" fill="none" />
+						<path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+						<line x1="10" y1="14" x2="20" y2="4" />
+						<polyline points="15 4 20 4 20 9" />
+					</svg></a
+				>
+			{/if}
+			<div class="border border-stone-700 h-8" />
 			{#if $status.service.initialLoading}
 				<button
 					class="icons tooltip-bottom flex animate-spin items-center space-x-2 bg-transparent text-sm duration-500 ease-in-out"