Revert "Add Locale URL"

This reverts commit d910b21185783a8cb194d03b25cd4803ce1fec41.

.vscode/settings.json

@@ -1,5 +1,7 @@
 {
-	"i18n-ally.localesPaths": ["static/locales"],
+	"i18n-ally.localesPaths": ["locales"],
 	"i18n-ally.keystyle": "nested",
-	"i18n-ally.extract.ignored": ["Coolify", "coolLabs logo"]
+	"i18n-ally.extract.ignoredByFiles": {
+		"src\\routes\\__layout.svelte": ["Coolify", "coolLabs logo"]
+	}
 }

package.json

@@ -51,6 +51,7 @@
 		"prisma": "3.11.1",
 		"svelte": "3.46.4",
 		"svelte-check": "2.4.6",
+		"svelte-i18n": "^3.3.13",
 		"svelte-preprocess": "4.10.4",
 		"svelte-select": "^4.4.7",
 		"tailwindcss": "3.0.23",
@@ -81,7 +82,6 @@
 		"mustache": "^4.2.0",
 		"node-forge": "1.3.0",
 		"svelte-kit-cookie-session": "2.1.2",
-		"sveltekit-i18n": "^2.1.2",
 		"tailwindcss-scrollbar": "^0.1.0",
 		"unique-names-generator": "4.7.1"
 	},

pnpm-lock.yaml

@@ -46,10 +46,10 @@ specifiers:
   prisma: 3.11.1
   svelte: 3.46.4
   svelte-check: 2.4.6
+  svelte-i18n: ^3.3.13
   svelte-kit-cookie-session: 2.1.2
   svelte-preprocess: 4.10.4
   svelte-select: ^4.4.7
-  sveltekit-i18n: ^2.1.2
   tailwindcss: 3.0.23
   tailwindcss-scrollbar: ^0.1.0
   ts-node: 10.7.0
@@ -79,7 +79,6 @@ dependencies:
   mustache: 4.2.0
   node-forge: 1.3.0
   svelte-kit-cookie-session: 2.1.2
-  sveltekit-i18n: 2.1.2_svelte@3.46.4
   tailwindcss-scrollbar: 0.1.0_tailwindcss@3.0.23
   unique-names-generator: 4.7.1
 
@@ -109,6 +108,7 @@ devDependencies:
   prisma: 3.11.1
   svelte: 3.46.4
   svelte-check: 2.4.6_postcss@8.4.12+svelte@3.46.4
+  svelte-i18n: 3.3.13_svelte@3.46.4
   svelte-preprocess: 4.10.4_296873641a0ad9f42fe92172d27bcedd
   svelte-select: 4.4.7
   tailwindcss: 3.0.23_b89136460714832cdda11d1e9d57d1ff
@@ -184,6 +184,55 @@ packages:
       - supports-color
     dev: true
 
+  /@formatjs/ecma402-abstract/1.11.4:
+    resolution:
+      {
+        integrity: sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==
+      }
+    dependencies:
+      '@formatjs/intl-localematcher': 0.2.25
+      tslib: 2.3.1
+    dev: true
+
+  /@formatjs/fast-memoize/1.2.1:
+    resolution:
+      {
+        integrity: sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==
+      }
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
+  /@formatjs/icu-messageformat-parser/2.0.19:
+    resolution:
+      {
+        integrity: sha512-8HsLm9YLyVVIDMyBJb7wmve2wGd461cUwJ470eUog5YH5ZsF4p5lgvaJ+oGKxz1mrSMNNdDHU9v/NDsS+z+ilg==
+      }
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.4
+      '@formatjs/icu-skeleton-parser': 1.3.6
+      tslib: 2.3.1
+    dev: true
+
+  /@formatjs/icu-skeleton-parser/1.3.6:
+    resolution:
+      {
+        integrity: sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==
+      }
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.4
+      tslib: 2.3.1
+    dev: true
+
+  /@formatjs/intl-localematcher/0.2.25:
+    resolution:
+      {
+        integrity: sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==
+      }
+    dependencies:
+      tslib: 2.3.1
+    dev: true
+
   /@humanwhocodes/config-array/0.5.0:
     resolution:
       {
@@ -446,26 +495,6 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltekit-i18n/base/1.1.1_svelte@3.46.4:
-    resolution:
-      {
-        integrity: sha512-J/sMU0OwS3dCLOuilHMBqu8vZHuuXiNV9vFJx8Nb4/b5BlR/KCZ4bCXI8wZR02GHeCOYKZxWus07CM1scxa/jw==
-      }
-    peerDependencies:
-      svelte: ^3.x
-    dependencies:
-      svelte: 3.46.4
-    optionalDependencies:
-      '@sveltekit-i18n/parser-default': 1.0.3
-    dev: false
-
-  /@sveltekit-i18n/parser-default/1.0.3:
-    resolution:
-      {
-        integrity: sha512-HheveklTjp3hxpYQhoHfyA6B4bQaUeSV5MQf2usIv/58UF2jY/YqhCAWj9bDBjufbuZc5pSz4BXvdX3WVT+viA==
-      }
-    dev: false
-
   /@szmarczak/http-timer/5.0.1:
     resolution:
       {
@@ -2225,6 +2254,14 @@ packages:
       }
     dev: true
 
+  /deepmerge/4.2.2:
+    resolution:
+      {
+        integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
+      }
+    engines: { node: '>=0.10.0' }
+    dev: true
+
   /defer-to-connect/2.0.1:
     resolution:
       {
@@ -3425,6 +3462,18 @@ packages:
         integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
       }
 
+  /intl-messageformat/9.12.0:
+    resolution:
+      {
+        integrity: sha512-5Q9j21JreB1G27/CqMYsA+pvJ19JjHyhiTSeUuvZK9BCDJGHtOLgpUUcGM+GLHiUuoVMKVeeX1smamiVHQrSKQ==
+      }
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.4
+      '@formatjs/fast-memoize': 1.2.1
+      '@formatjs/icu-messageformat-parser': 2.0.19
+      tslib: 2.3.1
+    dev: true
+
   /invariant/2.2.4:
     resolution:
       {
@@ -5194,6 +5243,24 @@ packages:
       svelte: 3.46.4
     dev: true
 
+  /svelte-i18n/3.3.13_svelte@3.46.4:
+    resolution:
+      {
+        integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==
+      }
+    engines: { node: '>= 11.15.0' }
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.25.1
+    dependencies:
+      deepmerge: 4.2.2
+      estree-walker: 2.0.2
+      intl-messageformat: 9.12.0
+      sade: 1.7.4
+      svelte: 3.46.4
+      tiny-glob: 0.2.9
+    dev: true
+
   /svelte-kit-cookie-session/2.1.2:
     resolution:
       {
@@ -5271,19 +5338,6 @@ packages:
     engines: { node: '>= 8' }
     dev: true
 
-  /sveltekit-i18n/2.1.2_svelte@3.46.4:
-    resolution:
-      {
-        integrity: sha512-s5YxcbNd2EWNZaZR1A4Drt8s53E4fpUkN4XIWd3VRpw1pihZVWssqmBW1qkjQ6AB0kiu1Qwule+vt1HkbQOjrg==
-      }
-    peerDependencies:
-      svelte: ^3.x
-    dependencies:
-      '@sveltekit-i18n/base': 1.1.1_svelte@3.46.4
-      '@sveltekit-i18n/parser-default': 1.0.3
-      svelte: 3.46.4
-    dev: false
-
   /table/6.7.2:
     resolution:
       {

src/hooks.ts

@@ -6,9 +6,6 @@ import { getUserDetails, sentry } from '$lib/common';
 import { version } from '$lib/common';
 import cookie from 'cookie';
 import { dev } from '$app/env';
-import { locales } from '$lib/translations';
-
-const routeRegex = new RegExp(/^\/[^.]*([?#].*)?$/);
 
 export const handle = handleSession(
 	{
@@ -65,45 +62,9 @@ export const handle = handleSession(
 					expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT')
 				})
 			);
+		} finally {
+			return response;
 		}
-
-		const { url, request } = event;
-		const { pathname } = url;
-
-		// If this request is a route request
-		if (routeRegex.test(pathname)) {
-			// Get defined locales
-			const supportedLocales = locales.get();
-
-			// Try to get locale from `pathname`.
-			let locale = supportedLocales.find(
-				(l) => `${l}`.toLowerCase() === `${pathname.match(/[^/]+?(?=\/|$)/)}`.toLowerCase()
-			);
-
-			// If route locale is not supported
-			if (!locale) {
-				// Get user preferred locale
-				locale = `${`${request.headers['accept-language']}`.match(
-					/[a-zA-Z]+?(?=-|_|,|;)/
-				)}`.toLowerCase();
-
-				// Set default locale if user preferred locale does not match
-				if (!supportedLocales.includes(locale)) locale = 'en';
-
-				// 301 redirect
-				return new Response(undefined, {
-					headers: { location: `/${locale}${pathname}` },
-					status: 301
-				});
-			}
-
-			// Add html `lang` attribute
-			const body = await response.text();
-
-			return new Response(`${body}`.replace(/<html.*>/, `<html lang="${locale}">`), response);
-		}
-
-		return response;
 	}
 );
 

src/lib/form.ts

@@ -1,15 +1,10 @@
 import { toast } from '@zerodevx/svelte-toast';
-import { t } from '$lib/translations';
-
-let formatMessage;
-t.subscribe((storeFormat) => (formatMessage = storeFormat));
-
-export function errorNotification(message: string): void {
+export function errorNotification(message: string) {
 	console.error(message);
 	if (typeof message !== 'string') {
-		toast.push(formatMessage('error.generic_message'));
+		toast.push('Ooops, something is not okay, are you okay?');
 	} else {
-		toast.push(formatMessage(message));
+		toast.push(message);
 	}
 }
 export function enhance(

src/lib/lang.json

@@ -1,4 +0,0 @@
-{
-	"en": "English",
-	"fr": "Français"
-}

src/lib/settings.ts

@@ -1,4 +1,4 @@
-const publicPaths = [
+export const publicPaths = [
 	'/login',
 	'/register',
 	'/reset',
@@ -8,7 +8,3 @@ const publicPaths = [
 	'/webhooks/github/install',
 	'/webhooks/gitlab'
 ];
-
-export function isPublicPath(path: string): boolean {
-	return publicPaths.includes(path);
-}

src/lib/translations.ts

@@ -1,26 +0,0 @@
-import i18n from 'sveltekit-i18n';
-import lang from './lang.json';
-
-/** @type {import('sveltekit-i18n').Config} */
-export const config = {
-	fallbackLocale: 'en',
-	translations: {
-		en: { lang },
-		fr: { lang }
-	},
-	loaders: [
-		{
-			locale: 'en',
-			key: '',
-			loader: async () => (await import('../../static/locales/en.json')).default
-		},
-		{
-			locale: 'fr',
-			key: '',
-			loader: async () => (await import('../../static/locales/fr.json')).default
-		}
-	]
-};
-
-export const { t, loading, locales, locale, loadTranslations } = new i18n(config);
-loading.subscribe(($loading) => $loading && console.log('Loading translations...'));

src/routes/__error.svelte

@@ -12,17 +12,17 @@
 </script>
 
 <script>
-	import { t } from '$lib/translations';
+	import { _ } from 'svelte-i18n';
 	export let status;
 	export let error;
 </script>
 
 <div class="mx-auto flex h-screen flex-col items-center justify-center px-4">
 	<div class="pb-10 text-7xl font-bold">{status}</div>
-	<div class="text-3xl font-bold">{$t('error.oops_your_lost')}</div>
+	<div class="text-3xl font-bold">Ooops you are lost! But don't be afraid!</div>
 	<div class="text-xl">
-		{$t('error.you_can_find_your_way_back')}
-		<a href="/" class="font-bold uppercase text-sky-400">{$t('error.here')}</a>
+		{$_('error.you_can_find_your_way_back')}
+		<a href="/" class="font-bold uppercase text-sky-400">{$_('error.here')}</a>
 	</div>
 	<div class="py-10 text-xs font-bold">
 		<pre

src/routes/__layout.svelte

@@ -1,15 +1,9 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit';
-	import { isPublicPath } from '$lib/settings';
-	import { locale, loadTranslations } from '$lib/translations';
+	import { publicPaths } from '$lib/settings';
 
 	export const load: Load = async ({ fetch, url, session }) => {
-		const { pathname } = url;
-		const lang = `${pathname.match(/[^/]+?(?=\/|$)/) || ''}`;
-		const route = pathname.replace(new RegExp(`^/${lang}`), '');
-		await loadTranslations(lang, route);
-
-		if (!session.userId && !isPublicPath(route)) {
+		if (!session.userId && !publicPaths.includes(url.pathname)) {
 			return {
 				status: 302,
 				redirect: '/login'
@@ -44,7 +38,18 @@
 	import { errorNotification } from '$lib/form';
 	import { asyncSleep } from '$lib/components/common';
 	import { del, get, post } from '$lib/api';
-	import { t } from '$lib/translations';
+	import { register, init, _, getLocaleFromNavigator } from 'svelte-i18n';
+
+	async function setup() {
+		register('en', () => import('../../static/locales/en.json'));
+
+		return await Promise.allSettled([
+			// TODO: add some more stuff you want to init ...
+			init({ initialLocale: getLocaleFromNavigator(), fallbackLocale: 'en' })
+		]);
+	}
+
+	const setupResult = setup();
 
 	let isUpdateAvailable = false;
 
@@ -54,7 +59,6 @@
 		success: null
 	};
 	let latestVersion = 'latest';
-
 	onMount(async () => {
 		if ($session.userId) {
 			const overrideVersion = browser && window.localStorage.getItem('latestVersion');
@@ -111,7 +115,7 @@
 				return window.location.reload();
 			} else {
 				await post(`/update.json`, { type: 'update', latestVersion });
-				toast.push(`${$t('layout.update_done')}<br><br>${$t('layout.wait_new_version_startup')}`);
+				toast.push(`${$_('layout.update_done')}<br><br>${$_('layout.wait_new_version_startup')}`);
 				let reachable = false;
 				let tries = 0;
 				do {
@@ -125,7 +129,7 @@
 					if (reachable) break;
 					tries++;
 				} while (!reachable || tries < 120);
-				toast.push($t('layout.new_version'));
+				toast.push($_('layout.new_version'));
 				updateStatus.loading = false;
 				updateStatus.success = true;
 				await asyncSleep(3000);
@@ -143,332 +147,22 @@
 	<title>Coolify</title>
 </svelte:head>
 
-<SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
-{#if $session.userId}
-	<nav class="nav-main">
-		<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
-			<div class="my-4 h-10 w-10"><img src="/favicon.png" alt="coolLabs logo" /></div>
-			<div class="flex flex-col space-y-4 py-2">
-				<a
-					sveltekit:prefetch
-					href="/"
-					class="icons tooltip-right bg-coolgray-200 hover:text-white"
-					class:text-white={$page.url.pathname === '/'}
-					class:bg-coolgray-500={$page.url.pathname === '/'}
-					data-tooltip={$t('dashboard')}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"
-						/>
-						<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
-					</svg>
-				</a>
-				<div class="border-t border-stone-700" />
-
-				<a
-					sveltekit:prefetch
-					href="/applications"
-					class="icons tooltip-right bg-coolgray-200 hover:text-green-500"
-					class:text-green-500={$page.url.pathname.startsWith('/applications') ||
-						$page.url.pathname.startsWith('/new/application')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
-						$page.url.pathname.startsWith('/new/application')}
-					data-tooltip={$t('index.applications')}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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" />
-						<rect x="4" y="4" width="6" height="6" rx="1" />
-						<rect x="4" y="14" width="6" height="6" rx="1" />
-						<rect x="14" y="14" width="6" height="6" rx="1" />
-						<line x1="14" y1="7" x2="20" y2="7" />
-						<line x1="17" y1="4" x2="17" y2="10" />
-					</svg>
-				</a>
-				<a
-					sveltekit:prefetch
-					href="/sources"
-					class="icons tooltip-right bg-coolgray-200 hover:text-orange-500"
-					class:text-orange-500={$page.url.pathname.startsWith('/sources') ||
-						$page.url.pathname.startsWith('/new/source')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
-						$page.url.pathname.startsWith('/new/source')}
-					data-tooltip="Git Sources"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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" />
-						<circle cx="6" cy="6" r="2" />
-						<circle cx="18" cy="18" r="2" />
-						<path d="M11 6h5a2 2 0 0 1 2 2v8" />
-						<polyline points="14 9 11 6 14 3" />
-						<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
-						<polyline points="10 15 13 18 10 21" />
-					</svg>
-				</a>
-				<div class="border-t border-stone-700" />
-				<a
-					sveltekit:prefetch
-					href="/destinations"
-					class="icons tooltip-right bg-coolgray-200 hover:text-sky-500"
-					class:text-sky-500={$page.url.pathname.startsWith('/destinations') ||
-						$page.url.pathname.startsWith('/new/destination')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
-						$page.url.pathname.startsWith('/new/destination')}
-					data-tooltip="Destinations"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
-						/>
-						<path d="M5 10h3v3h-3z" />
-						<path d="M8 10h3v3h-3z" />
-						<path d="M11 10h3v3h-3z" />
-						<path d="M8 7h3v3h-3z" />
-						<path d="M11 7h3v3h-3z" />
-						<path d="M11 4h3v3h-3z" />
-						<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
-						<line x1="10" y1="16" x2="10" y2="16.01" />
-					</svg>
-				</a>
-				<div class="border-t border-stone-700" />
-				<a
-					sveltekit:prefetch
-					href="/databases"
-					class="icons tooltip-right bg-coolgray-200 hover:text-purple-500"
-					class:text-purple-500={$page.url.pathname.startsWith('/databases') ||
-						$page.url.pathname.startsWith('/new/database')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
-						$page.url.pathname.startsWith('/new/database')}
-					data-tooltip="Databases"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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" />
-						<ellipse cx="12" cy="6" rx="8" ry="3" />
-						<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
-						<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
-					</svg>
-				</a>
-				<div class="border-t border-stone-700" />
-				<a
-					sveltekit:prefetch
-					href="/services"
-					class="icons tooltip-right bg-coolgray-200 hover:text-pink-500"
-					class:text-pink-500={$page.url.pathname.startsWith('/services') ||
-						$page.url.pathname.startsWith('/new/service')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
-						$page.url.pathname.startsWith('/new/service')}
-					data-tooltip="Services"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
-					</svg>
-				</a>
-				<div class="border-t border-stone-700" />
-			</div>
-			<div class="flex-1" />
-
-			<div class="flex flex-col space-y-4 py-2">
-				{#if $session.teamId === '0'}
-					{#if isUpdateAvailable}
-						<button
-							disabled={updateStatus.success === false}
-							title={$t('layout.update_available')}
-							on:click={update}
-							class="icons tooltip-right bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
-						>
-							{#if updateStatus.loading}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="lds-heart h-9 w-8"
-									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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
-									/>
-								</svg>
-							{:else if updateStatus.success === null}
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									class="w-8 h-9"
-									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" />
-									<circle cx="12" cy="12" r="9" />
-									<line x1="12" y1="8" x2="8" y2="12" />
-									<line x1="12" y1="8" x2="12" y2="16" />
-									<line x1="16" y1="12" x2="12" y2="8" />
-								</svg>
-							{:else if updateStatus.success}
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
-									><path
-										fill="#DD2E44"
-										d="M11.626 7.488c-.112.112-.197.247-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"
-									/><path
-										fill="#EA596E"
-										d="M13 12L.416 32.506l-.282.635.011.011c-.208.403.14 1.223.853 1.937.232.232.473.408.709.557L17 17l-4-5z"
-									/><path
-										fill="#A0041E"
-										d="M23.012 13.066c4.67 4.672 7.263 9.652 5.789 11.124-1.473 1.474-6.453-1.118-11.126-5.788-4.671-4.672-7.263-9.654-5.79-11.127 1.474-1.473 6.454 1.119 11.127 5.791z"
-									/><path
-										fill="#AA8DD8"
-										d="M18.59 13.609c-.199.161-.459.245-.734.215-.868-.094-1.598-.396-2.109-.873-.541-.505-.808-1.183-.735-1.862.128-1.192 1.324-2.286 3.363-2.066.793.085 1.147-.17 1.159-.292.014-.121-.277-.446-1.07-.532-.868-.094-1.598-.396-2.11-.873-.541-.505-.809-1.183-.735-1.862.13-1.192 1.325-2.286 3.362-2.065.578.062.883-.057 1.012-.134.103-.063.144-.123.148-.158.012-.121-.275-.446-1.07-.532-.549-.06-.947-.552-.886-1.102.059-.549.55-.946 1.101-.886 2.037.219 2.973 1.542 2.844 2.735-.13 1.194-1.325 2.286-3.364 2.067-.578-.063-.88.057-1.01.134-.103.062-.145.123-.149.157-.013.122.276.446 1.071.532 2.037.22 2.973 1.542 2.844 2.735-.129 1.192-1.324 2.286-3.362 2.065-.578-.062-.882.058-1.012.134-.104.064-.144.124-.148.158-.013.121.276.446 1.07.532.548.06.947.553.886 1.102-.028.274-.167.511-.366.671z"
-									/><path
-										fill="#77B255"
-										d="M30.661 22.857c1.973-.557 3.334.323 3.658 1.478.324 1.154-.378 2.615-2.35 3.17-.77.216-1.001.584-.97.701.034.118.425.312 1.193.095 1.972-.555 3.333.325 3.657 1.479.326 1.155-.378 2.614-2.351 3.17-.769.216-1.001.585-.967.702.033.117.423.311 1.192.095.53-.149 1.084.16 1.233.691.148.532-.161 1.084-.693 1.234-1.971.555-3.333-.323-3.659-1.479-.324-1.154.379-2.613 2.353-3.169.77-.217 1.001-.584.967-.702-.032-.117-.422-.312-1.19-.096-1.974.556-3.334-.322-3.659-1.479-.325-1.154.378-2.613 2.351-3.17.768-.215.999-.585.967-.701-.034-.118-.423-.312-1.192-.096-.532.15-1.083-.16-1.233-.691-.149-.53.161-1.082.693-1.232z"
-									/><path
-										fill="#AA8DD8"
-										d="M23.001 20.16c-.294 0-.584-.129-.782-.375-.345-.432-.274-1.061.156-1.406.218-.175 5.418-4.259 12.767-3.208.547.078.927.584.849 1.131-.078.546-.58.93-1.132.848-6.493-.922-11.187 2.754-11.233 2.791-.186.148-.406.219-.625.219z"
-									/><path
-										fill="#77B255"
-										d="M5.754 16c-.095 0-.192-.014-.288-.042-.529-.159-.829-.716-.67-1.245 1.133-3.773 2.16-9.794.898-11.364-.141-.178-.354-.353-.842-.316-.938.072-.849 2.051-.848 2.071.042.551-.372 1.031-.922 1.072-.559.034-1.031-.372-1.072-.923-.103-1.379.326-4.035 2.692-4.214 1.056-.08 1.933.287 2.552 1.057 2.371 2.951-.036 11.506-.542 13.192-.13.433-.528.712-.958.712z"
-									/><circle fill="#5C913B" cx="25.5" cy="9.5" r="1.5" /><circle
-										fill="#9266CC"
-										cx="2"
-										cy="18"
-										r="2"
-									/><circle fill="#5C913B" cx="32.5" cy="19.5" r="1.5" /><circle
-										fill="#5C913B"
-										cx="23.5"
-										cy="31.5"
-										r="1.5"
-									/><circle fill="#FFCC4D" cx="28" cy="4" r="2" /><circle
-										fill="#FFCC4D"
-										cx="32.5"
-										cy="8.5"
-										r="1.5"
-									/><circle fill="#FFCC4D" cx="29.5" cy="12.5" r="1.5" /><circle
-										fill="#FFCC4D"
-										cx="7.5"
-										cy="23.5"
-										r="1.5"
-									/></svg
-								>
-							{:else}
-								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
-									><path
-										fill="#FFCC4D"
-										d="M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18"
-									/><path
-										fill="#664500"
-										d="M22 27c0 2.763-1.791 3-4 3-2.21 0-4-.237-4-3 0-2.761 1.79-6 4-6 2.209 0 4 3.239 4 6zm8-12c-.124 0-.25-.023-.371-.072-5.229-2.091-7.372-5.241-7.461-5.374-.307-.46-.183-1.081.277-1.387.459-.306 1.077-.184 1.385.274.019.027 1.93 2.785 6.541 4.629.513.206.763.787.558 1.3-.157.392-.533.63-.929.63zM6 15c-.397 0-.772-.238-.929-.629-.205-.513.044-1.095.557-1.3 4.612-1.844 6.523-4.602 6.542-4.629.308-.456.929-.577 1.387-.27.457.308.581.925.275 1.383-.089.133-2.232 3.283-7.46 5.374C6.25 14.977 6.124 15 6 15z"
-									/><path fill="#5DADEC" d="M24 16h4v19l-4-.046V16zM8 35l4-.046V16H8v19z" /><path
-										fill="#664500"
-										d="M14.999 18c-.15 0-.303-.034-.446-.105-3.512-1.756-7.07-.018-7.105 0-.495.249-1.095.046-1.342-.447-.247-.494-.047-1.095.447-1.342.182-.09 4.498-2.197 8.895 0 .494.247.694.848.447 1.342-.176.35-.529.552-.896.552zm14 0c-.15 0-.303-.034-.446-.105-3.513-1.756-7.07-.018-7.105 0-.494.248-1.094.047-1.342-.447-.247-.494-.047-1.095.447-1.342.182-.09 4.501-2.196 8.895 0 .494.247.694.848.447 1.342-.176.35-.529.552-.896.552z"
-									/><ellipse fill="#5DADEC" cx="18" cy="34" rx="18" ry="2" /><ellipse
-										fill="#E75A70"
-										cx="18"
-										cy="27"
-										rx="3"
-										ry="2"
-									/></svg
-								>
-							{/if}
-						</button>
-					{/if}
-				{/if}
-			</div>
-			<div class="flex flex-col space-y-4 py-2">
-				<a
-					sveltekit:prefetch
-					href="/teams"
-					class="icons tooltip-right bg-coolgray-200 hover:text-cyan-500"
-					class:text-cyan-500={$page.url.pathname.startsWith('/teams')}
-					class:bg-coolgray-500={$page.url.pathname.startsWith('/teams')}
-					data-tooltip="Teams"
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-8 w-8"
-						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" />
-						<circle cx="9" cy="7" r="4" />
-						<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
-						<path d="M16 3.13a4 4 0 0 1 0 7.75" />
-						<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
-					</svg>
-				</a>
-				{#if $session.teamId === '0'}
+{#await setupResult}
+	Please wait...
+{:then}
+	<SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
+	{#if $session.userId}
+		<nav class="nav-main">
+			<div class="flex h-screen w-full flex-col items-center transition-all duration-100">
+				<div class="my-4 h-10 w-10"><img src="/favicon.png" alt="coolLabs logo" /></div>
+				<div class="flex flex-col space-y-4 py-2">
 					<a
 						sveltekit:prefetch
-						href="/settings"
-						class="icons tooltip-right bg-coolgray-200 hover:text-yellow-500"
-						class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
-						class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
-						data-tooltip="Settings"
+						href="/"
+						class="icons tooltip-right bg-coolgray-200 hover:text-white"
+						class:text-white={$page.url.pathname === '/'}
+						class:bg-coolgray-500={$page.url.pathname === '/'}
+						data-tooltip="Dashboard"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -482,57 +176,373 @@
 						>
 							<path stroke="none" d="M0 0h24v24H0z" fill="none" />
 							<path
-								d="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+								d="M19 8.71l-5.333 -4.148a2.666 2.666 0 0 0 -3.274 0l-5.334 4.148a2.665 2.665 0 0 0 -1.029 2.105v7.2a2 2 0 0 0 2 2h12a2 2 0 0 0 2 -2v-7.2c0 -.823 -.38 -1.6 -1.03 -2.105"
 							/>
-							<circle cx="12" cy="12" r="3" />
+							<path d="M16 15c-2.21 1.333 -5.792 1.333 -8 0" />
 						</svg>
 					</a>
-				{/if}
-				<div
-					class="icons tooltip-right bg-coolgray-200 hover:text-red-500"
-					data-tooltip="Logout"
-					on:click={logout}
-				>
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="ml-1 h-7 w-7"
-						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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
-						/>
-						<path d="M7 12h14l-3 -3m0 6l3 -3" />
-					</svg>
-				</div>
-				<div
-					class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
-				>
+					<div class="border-t border-stone-700" />
+
 					<a
-						class="text-[10px] no-underline"
-						href={`https://github.com/coollabsio/coolify/releases/tag/v${$session.version}`}
-						target="_blank">v{$session.version}</a
+						sveltekit:prefetch
+						href="/applications"
+						class="icons tooltip-right bg-coolgray-200 hover:text-green-500"
+						class:text-green-500={$page.url.pathname.startsWith('/applications') ||
+							$page.url.pathname.startsWith('/new/application')}
+						class:bg-coolgray-500={$page.url.pathname.startsWith('/applications') ||
+							$page.url.pathname.startsWith('/new/application')}
+						data-tooltip="Applications"
 					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							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" />
+							<rect x="4" y="4" width="6" height="6" rx="1" />
+							<rect x="4" y="14" width="6" height="6" rx="1" />
+							<rect x="14" y="14" width="6" height="6" rx="1" />
+							<line x1="14" y1="7" x2="20" y2="7" />
+							<line x1="17" y1="4" x2="17" y2="10" />
+						</svg>
+					</a>
+					<a
+						sveltekit:prefetch
+						href="/sources"
+						class="icons tooltip-right bg-coolgray-200 hover:text-orange-500"
+						class:text-orange-500={$page.url.pathname.startsWith('/sources') ||
+							$page.url.pathname.startsWith('/new/source')}
+						class:bg-coolgray-500={$page.url.pathname.startsWith('/sources') ||
+							$page.url.pathname.startsWith('/new/source')}
+						data-tooltip="Git Sources"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							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" />
+							<circle cx="6" cy="6" r="2" />
+							<circle cx="18" cy="18" r="2" />
+							<path d="M11 6h5a2 2 0 0 1 2 2v8" />
+							<polyline points="14 9 11 6 14 3" />
+							<path d="M13 18h-5a2 2 0 0 1 -2 -2v-8" />
+							<polyline points="10 15 13 18 10 21" />
+						</svg>
+					</a>
+					<div class="border-t border-stone-700" />
+					<a
+						sveltekit:prefetch
+						href="/destinations"
+						class="icons tooltip-right bg-coolgray-200 hover:text-sky-500"
+						class:text-sky-500={$page.url.pathname.startsWith('/destinations') ||
+							$page.url.pathname.startsWith('/new/destination')}
+						class:bg-coolgray-500={$page.url.pathname.startsWith('/destinations') ||
+							$page.url.pathname.startsWith('/new/destination')}
+						data-tooltip="Destinations"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							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="M22 12.54c-1.804 -.345 -2.701 -1.08 -3.523 -2.94c-.487 .696 -1.102 1.568 -.92 2.4c.028 .238 -.32 1.002 -.557 1h-14c0 5.208 3.164 7 6.196 7c4.124 .022 7.828 -1.376 9.854 -5c1.146 -.101 2.296 -1.505 2.95 -2.46z"
+							/>
+							<path d="M5 10h3v3h-3z" />
+							<path d="M8 10h3v3h-3z" />
+							<path d="M11 10h3v3h-3z" />
+							<path d="M8 7h3v3h-3z" />
+							<path d="M11 7h3v3h-3z" />
+							<path d="M11 4h3v3h-3z" />
+							<path d="M4.571 18c1.5 0 2.047 -.074 2.958 -.78" />
+							<line x1="10" y1="16" x2="10" y2="16.01" />
+						</svg>
+					</a>
+					<div class="border-t border-stone-700" />
+					<a
+						sveltekit:prefetch
+						href="/databases"
+						class="icons tooltip-right bg-coolgray-200 hover:text-purple-500"
+						class:text-purple-500={$page.url.pathname.startsWith('/databases') ||
+							$page.url.pathname.startsWith('/new/database')}
+						class:bg-coolgray-500={$page.url.pathname.startsWith('/databases') ||
+							$page.url.pathname.startsWith('/new/database')}
+						data-tooltip="Databases"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							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" />
+							<ellipse cx="12" cy="6" rx="8" ry="3" />
+							<path d="M4 6v6a8 3 0 0 0 16 0v-6" />
+							<path d="M4 12v6a8 3 0 0 0 16 0v-6" />
+						</svg>
+					</a>
+					<div class="border-t border-stone-700" />
+					<a
+						sveltekit:prefetch
+						href="/services"
+						class="icons tooltip-right bg-coolgray-200 hover:text-pink-500"
+						class:text-pink-500={$page.url.pathname.startsWith('/services') ||
+							$page.url.pathname.startsWith('/new/service')}
+						class:bg-coolgray-500={$page.url.pathname.startsWith('/services') ||
+							$page.url.pathname.startsWith('/new/service')}
+						data-tooltip="Services"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							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="M7 18a4.6 4.4 0 0 1 0 -9a5 4.5 0 0 1 11 2h1a3.5 3.5 0 0 1 0 7h-12" />
+						</svg>
+					</a>
+					<div class="border-t border-stone-700" />
+				</div>
+				<div class="flex-1" />
+
+				<div class="flex flex-col space-y-4 py-2">
+					{#if $session.teamId === '0'}
+						{#if isUpdateAvailable}
+							<button
+								disabled={updateStatus.success === false}
+								title={$_('layout.update_available')}
+								on:click={update}
+								class="icons tooltip-right bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 text-white duration-75 hover:scale-105"
+							>
+								{#if updateStatus.loading}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="lds-heart h-9 w-8"
+										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="M19.5 13.572l-7.5 7.428l-7.5 -7.428m0 0a5 5 0 1 1 7.5 -6.566a5 5 0 1 1 7.5 6.572"
+										/>
+									</svg>
+								{:else if updateStatus.success === null}
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										class="w-8 h-9"
+										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" />
+										<circle cx="12" cy="12" r="9" />
+										<line x1="12" y1="8" x2="8" y2="12" />
+										<line x1="12" y1="8" x2="12" y2="16" />
+										<line x1="16" y1="12" x2="12" y2="8" />
+									</svg>
+								{:else if updateStatus.success}
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
+										><path
+											fill="#DD2E44"
+											d="M11.626 7.488c-.112.112-.197.247-.268.395l-.008-.008L.134 33.141l.011.011c-.208.403.14 1.223.853 1.937.713.713 1.533 1.061 1.936.853l.01.01L28.21 24.735l-.008-.009c.147-.07.282-.155.395-.269 1.562-1.562-.971-6.627-5.656-11.313-4.687-4.686-9.752-7.218-11.315-5.656z"
+										/><path
+											fill="#EA596E"
+											d="M13 12L.416 32.506l-.282.635.011.011c-.208.403.14 1.223.853 1.937.232.232.473.408.709.557L17 17l-4-5z"
+										/><path
+											fill="#A0041E"
+											d="M23.012 13.066c4.67 4.672 7.263 9.652 5.789 11.124-1.473 1.474-6.453-1.118-11.126-5.788-4.671-4.672-7.263-9.654-5.79-11.127 1.474-1.473 6.454 1.119 11.127 5.791z"
+										/><path
+											fill="#AA8DD8"
+											d="M18.59 13.609c-.199.161-.459.245-.734.215-.868-.094-1.598-.396-2.109-.873-.541-.505-.808-1.183-.735-1.862.128-1.192 1.324-2.286 3.363-2.066.793.085 1.147-.17 1.159-.292.014-.121-.277-.446-1.07-.532-.868-.094-1.598-.396-2.11-.873-.541-.505-.809-1.183-.735-1.862.13-1.192 1.325-2.286 3.362-2.065.578.062.883-.057 1.012-.134.103-.063.144-.123.148-.158.012-.121-.275-.446-1.07-.532-.549-.06-.947-.552-.886-1.102.059-.549.55-.946 1.101-.886 2.037.219 2.973 1.542 2.844 2.735-.13 1.194-1.325 2.286-3.364 2.067-.578-.063-.88.057-1.01.134-.103.062-.145.123-.149.157-.013.122.276.446 1.071.532 2.037.22 2.973 1.542 2.844 2.735-.129 1.192-1.324 2.286-3.362 2.065-.578-.062-.882.058-1.012.134-.104.064-.144.124-.148.158-.013.121.276.446 1.07.532.548.06.947.553.886 1.102-.028.274-.167.511-.366.671z"
+										/><path
+											fill="#77B255"
+											d="M30.661 22.857c1.973-.557 3.334.323 3.658 1.478.324 1.154-.378 2.615-2.35 3.17-.77.216-1.001.584-.97.701.034.118.425.312 1.193.095 1.972-.555 3.333.325 3.657 1.479.326 1.155-.378 2.614-2.351 3.17-.769.216-1.001.585-.967.702.033.117.423.311 1.192.095.53-.149 1.084.16 1.233.691.148.532-.161 1.084-.693 1.234-1.971.555-3.333-.323-3.659-1.479-.324-1.154.379-2.613 2.353-3.169.77-.217 1.001-.584.967-.702-.032-.117-.422-.312-1.19-.096-1.974.556-3.334-.322-3.659-1.479-.325-1.154.378-2.613 2.351-3.17.768-.215.999-.585.967-.701-.034-.118-.423-.312-1.192-.096-.532.15-1.083-.16-1.233-.691-.149-.53.161-1.082.693-1.232z"
+										/><path
+											fill="#AA8DD8"
+											d="M23.001 20.16c-.294 0-.584-.129-.782-.375-.345-.432-.274-1.061.156-1.406.218-.175 5.418-4.259 12.767-3.208.547.078.927.584.849 1.131-.078.546-.58.93-1.132.848-6.493-.922-11.187 2.754-11.233 2.791-.186.148-.406.219-.625.219z"
+										/><path
+											fill="#77B255"
+											d="M5.754 16c-.095 0-.192-.014-.288-.042-.529-.159-.829-.716-.67-1.245 1.133-3.773 2.16-9.794.898-11.364-.141-.178-.354-.353-.842-.316-.938.072-.849 2.051-.848 2.071.042.551-.372 1.031-.922 1.072-.559.034-1.031-.372-1.072-.923-.103-1.379.326-4.035 2.692-4.214 1.056-.08 1.933.287 2.552 1.057 2.371 2.951-.036 11.506-.542 13.192-.13.433-.528.712-.958.712z"
+										/><circle fill="#5C913B" cx="25.5" cy="9.5" r="1.5" /><circle
+											fill="#9266CC"
+											cx="2"
+											cy="18"
+											r="2"
+										/><circle fill="#5C913B" cx="32.5" cy="19.5" r="1.5" /><circle
+											fill="#5C913B"
+											cx="23.5"
+											cy="31.5"
+											r="1.5"
+										/><circle fill="#FFCC4D" cx="28" cy="4" r="2" /><circle
+											fill="#FFCC4D"
+											cx="32.5"
+											cy="8.5"
+											r="1.5"
+										/><circle fill="#FFCC4D" cx="29.5" cy="12.5" r="1.5" /><circle
+											fill="#FFCC4D"
+											cx="7.5"
+											cy="23.5"
+											r="1.5"
+										/></svg
+									>
+								{:else}
+									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" class="w-8 h-9"
+										><path
+											fill="#FFCC4D"
+											d="M36 18c0 9.941-8.059 18-18 18S0 27.941 0 18 8.059 0 18 0s18 8.059 18 18"
+										/><path
+											fill="#664500"
+											d="M22 27c0 2.763-1.791 3-4 3-2.21 0-4-.237-4-3 0-2.761 1.79-6 4-6 2.209 0 4 3.239 4 6zm8-12c-.124 0-.25-.023-.371-.072-5.229-2.091-7.372-5.241-7.461-5.374-.307-.46-.183-1.081.277-1.387.459-.306 1.077-.184 1.385.274.019.027 1.93 2.785 6.541 4.629.513.206.763.787.558 1.3-.157.392-.533.63-.929.63zM6 15c-.397 0-.772-.238-.929-.629-.205-.513.044-1.095.557-1.3 4.612-1.844 6.523-4.602 6.542-4.629.308-.456.929-.577 1.387-.27.457.308.581.925.275 1.383-.089.133-2.232 3.283-7.46 5.374C6.25 14.977 6.124 15 6 15z"
+										/><path fill="#5DADEC" d="M24 16h4v19l-4-.046V16zM8 35l4-.046V16H8v19z" /><path
+											fill="#664500"
+											d="M14.999 18c-.15 0-.303-.034-.446-.105-3.512-1.756-7.07-.018-7.105 0-.495.249-1.095.046-1.342-.447-.247-.494-.047-1.095.447-1.342.182-.09 4.498-2.197 8.895 0 .494.247.694.848.447 1.342-.176.35-.529.552-.896.552zm14 0c-.15 0-.303-.034-.446-.105-3.513-1.756-7.07-.018-7.105 0-.494.248-1.094.047-1.342-.447-.247-.494-.047-1.095.447-1.342.182-.09 4.501-2.196 8.895 0 .494.247.694.848.447 1.342-.176.35-.529.552-.896.552z"
+										/><ellipse fill="#5DADEC" cx="18" cy="34" rx="18" ry="2" /><ellipse
+											fill="#E75A70"
+											cx="18"
+											cy="27"
+											rx="3"
+											ry="2"
+										/></svg
+									>
+								{/if}
+							</button>
+						{/if}
+					{/if}
+				</div>
+				<div class="flex flex-col space-y-4 py-2">
+					<a
+						sveltekit:prefetch
+						href="/teams"
+						class="icons tooltip-right bg-coolgray-200 hover:text-cyan-500"
+						class:text-cyan-500={$page.url.pathname.startsWith('/teams')}
+						class:bg-coolgray-500={$page.url.pathname.startsWith('/teams')}
+						data-tooltip="Teams"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="h-8 w-8"
+							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" />
+							<circle cx="9" cy="7" r="4" />
+							<path d="M3 21v-2a4 4 0 0 1 4 -4h4a4 4 0 0 1 4 4v2" />
+							<path d="M16 3.13a4 4 0 0 1 0 7.75" />
+							<path d="M21 21v-2a4 4 0 0 0 -3 -3.85" />
+						</svg>
+					</a>
+					{#if $session.teamId === '0'}
+						<a
+							sveltekit:prefetch
+							href="/settings"
+							class="icons tooltip-right bg-coolgray-200 hover:text-yellow-500"
+							class:text-yellow-500={$page.url.pathname.startsWith('/settings')}
+							class:bg-coolgray-500={$page.url.pathname.startsWith('/settings')}
+							data-tooltip="Settings"
+						>
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								class="h-8 w-8"
+								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="M10.325 4.317c.426 -1.756 2.924 -1.756 3.35 0a1.724 1.724 0 0 0 2.573 1.066c1.543 -.94 3.31 .826 2.37 2.37a1.724 1.724 0 0 0 1.065 2.572c1.756 .426 1.756 2.924 0 3.35a1.724 1.724 0 0 0 -1.066 2.573c.94 1.543 -.826 3.31 -2.37 2.37a1.724 1.724 0 0 0 -2.572 1.065c-.426 1.756 -2.924 1.756 -3.35 0a1.724 1.724 0 0 0 -2.573 -1.066c-1.543 .94 -3.31 -.826 -2.37 -2.37a1.724 1.724 0 0 0 -1.065 -2.572c-1.756 -.426 -1.756 -2.924 0 -3.35a1.724 1.724 0 0 0 1.066 -2.573c-.94 -1.543 .826 -3.31 2.37 -2.37c1 .608 2.296 .07 2.572 -1.065z"
+								/>
+								<circle cx="12" cy="12" r="3" />
+							</svg>
+						</a>
+					{/if}
+					<div
+						class="icons tooltip-right bg-coolgray-200 hover:text-red-500"
+						data-tooltip="Logout"
+						on:click={logout}
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							class="ml-1 h-7 w-7"
+							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="M14 8v-2a2 2 0 0 0 -2 -2h-7a2 2 0 0 0 -2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2 -2v-2"
+							/>
+							<path d="M7 12h14l-3 -3m0 6l3 -3" />
+						</svg>
+					</div>
+					<div
+						class="w-full text-center font-bold text-stone-400 hover:bg-coolgray-200 hover:text-white"
+					>
+						<a
+							class="text-[10px] no-underline"
+							href={`https://github.com/coollabsio/coolify/releases/tag/v${$session.version}`}
+							target="_blank">v{$session.version}</a
+						>
+					</div>
 				</div>
 			</div>
-		</div>
-	</nav>
-	<select
-		class="fixed right-0 bottom-0 z-50 m-2 w-64 bg-opacity-30 p-2 px-4"
-		bind:value={selectedTeamId}
-		on:change={switchTeam}
-	>
-		<option value="" disabled selected>{$t('layout.switch_to_a_different_team')}</option>
-		{#each teams as team}
-			<option value={team.teamId}>{team.team.name} - {team.permission}</option>
-		{/each}
-	</select>
-{/if}
-<main>
-	<slot />
-</main>
+		</nav>
+		<select
+			class="fixed right-0 bottom-0 z-50 m-2 w-64 bg-opacity-30 p-2 px-4"
+			bind:value={selectedTeamId}
+			on:change={switchTeam}
+		>
+			<option value="" disabled selected>{$_('layout.switch_to_a_different_team')}</option>
+			{#each teams as team}
+				<option value={team.teamId}>{team.team.name} - {team.permission}</option>
+			{/each}
+		</select>
+	{/if}
+	<main>
+		<slot />
+	</main>
+{:catch error}
+	<p style="color: red">{error.message}</p>
+{/await}

src/routes/applications/[id]/settings.json.ts

@@ -2,7 +2,6 @@ import { getUserDetails } from '$lib/common';
 import * as db from '$lib/database';
 import { ErrorHandler } from '$lib/database';
 import type { RequestHandler } from '@sveltejs/kit';
-import { _ } from 'svelte-i18n';
 
 export const post: RequestHandler = async (event) => {
 	const { teamId, status, body } = await getUserDetails(event);
@@ -15,7 +14,8 @@ export const post: RequestHandler = async (event) => {
 		const isDouble = await db.checkDoubleBranch(branch, projectId);
 		if (isDouble && autodeploy) {
 			throw {
-				message: $_('application.app.error_double_app_for_one_branch')
+				message:
+					'Cannot activate automatic deployments until only one application is defined for this repository / branch.'
 			};
 		}
 		await db.setApplicationSettings({ id, debug, previews, dualCerts, autodeploy });

src/routes/applications/_Application.svelte

@@ -15,7 +15,6 @@
 	import Docker from '$lib/components/svg/applications/Docker.svelte';
 	import Astro from '$lib/components/svg/applications/Astro.svelte';
 	import Eleventy from '$lib/components/svg/applications/Eleventy.svelte';
-	import { t } from '$lib/translations';
 
 	const buildPack = application?.buildPack?.toLowerCase();
 </script>
@@ -60,7 +59,7 @@
 		{/if}
 		{#if !application.gitSourceId || !application.destinationDockerId}
 			<div class="truncate text-center font-bold text-red-500 group-hover:text-white">
-				{$t('application.configuration_missing')}
+				Configuration missing
 			</div>
 		{/if}
 	</div>

src/routes/applications/index.svelte

@@ -4,7 +4,6 @@
 	import Application from './_Application.svelte';
 	import { post } from '$lib/api';
 	import { goto } from '$app/navigation';
-	import { t } from '$lib/translations';
 	async function newApplication() {
 		const { id } = await post('/applications/new', {});
 		return await goto(`/applications/${id}`, { replaceState: true });
@@ -12,7 +11,7 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl ">{$t('index.applications')}</div>
+	<div class="mr-4 text-2xl ">Applications</div>
 	{#if $session.isAdmin}
 		<div on:click={newApplication} class="add-icon cursor-pointer bg-green-600 hover:bg-green-500">
 			<svg
@@ -34,7 +33,7 @@
 <div class="flex flex-wrap justify-center">
 	{#if !applications || applications.length === 0}
 		<div class="flex-col">
-			<div class="text-center text-xl font-bold">{$t('application.no_applications_found')}</div>
+			<div class="text-center text-xl font-bold">No applications found</div>
 		</div>
 	{:else}
 		{#each applications as application}

src/routes/index.svelte

@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
 	import type { Load } from '@sveltejs/kit';
-	import { t } from '$lib/translations';
 	export const load: Load = async ({ fetch, session }) => {
 		const url = `/dashboard.json`;
 		const res = await fetch(url);
@@ -30,7 +29,7 @@
 </script>
 
 <div class="flex space-x-1 p-6 font-bold">
-	<div class="mr-4 text-2xl tracking-tight">{$t('dashboard')}</div>
+	<div class="mr-4 text-2xl tracking-tight">Dashboard</div>
 </div>
 
 <div class="mt-10 pb-12 tracking-tight sm:pb-16">
@@ -45,7 +44,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-green-500 no-underline transition duration-150 hover:bg-green-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							{$t('index.applications')}
+							Applications
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{applicationsCount}
@@ -57,7 +56,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-sky-500 no-underline transition duration-150 hover:bg-sky-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							{$t('index.destinations')}
+							Destinations
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{destinationsCount}
@@ -69,7 +68,7 @@
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-orange-500 no-underline transition duration-150 hover:bg-orange-500 hover:text-white"
 					>
 						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							{$t('index.git_sources')}
+							Git Sources
 						</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{sourcesCount}
@@ -80,9 +79,7 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-purple-500 no-underline transition duration-150 hover:bg-purple-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							{$t('index.databases')}
-						</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Databases</dt>
 						<dd class="order-1 text-5xl font-extrabold ">{databasesCount}</dd>
 					</a>
 					<a
@@ -90,9 +87,7 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-pink-500 no-underline transition duration-150 hover:bg-pink-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							{$t('index.services')}
-						</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Services</dt>
 						<dd class="order-1 text-5xl font-extrabold ">{servicesCount}</dd>
 					</a>
 
@@ -101,9 +96,7 @@
 						sveltekit:prefetch
 						class="flex cursor-pointer flex-col rounded p-6 text-center text-cyan-500 no-underline transition duration-150 hover:bg-cyan-500 hover:text-white"
 					>
-						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">
-							{$t('index.teams')}
-						</dt>
+						<dt class="order-2 mt-2 text-sm font-bold uppercase leading-6 text-white">Teams</dt>
 						<dd class="order-1 text-5xl font-extrabold ">
 							{teamsCount}
 						</dd>

src/routes/login/index.svelte

@@ -5,8 +5,6 @@
 	import { post } from '$lib/api';
 	import { errorNotification } from '$lib/form';
 	import { onMount } from 'svelte';
-	import { t } from '$lib/translations';
-
 	let loading = false;
 	let emailEl;
 	let email, password;
@@ -41,7 +39,7 @@
 
 <div class="flex h-screen flex-col items-center justify-center">
 	{#if $session.userId}
-		<div class="flex justify-center px-4 text-xl font-bold">{$t('login.already_logged_in')}</div>
+		<div class="flex justify-center px-4 text-xl font-bold">Already logged in...</div>
 	{:else}
 		<div class="flex justify-center px-4">
 			<form on:submit|preventDefault={handleSubmit} class="flex flex-col py-4 space-y-2">
@@ -50,7 +48,7 @@
 				<input
 					type="email"
 					name="email"
-					placeholder={$t('forms.email')}
+					placeholder="Email"
 					autocomplete="off"
 					required
 					bind:this={emailEl}
@@ -59,7 +57,7 @@
 				<input
 					type="password"
 					name="password"
-					placeholder={$t('forms.password')}
+					placeholder="Password"
 					bind:value={password}
 					required
 				/>
@@ -71,19 +69,16 @@
 						class="hover:opacity-90 text-white"
 						class:bg-transparent={loading}
 						class:text-stone-600={loading}
-						class:bg-coollabs={!loading}
-						>{loading ? $t('login.authenticating') : $t('login.login')}</button
+						class:bg-coollabs={!loading}>{loading ? 'Authenticating...' : 'Login'}</button
 					>
 
 					<button
 						on:click|preventDefault={() => goto('/register')}
-						class="bg-transparent hover:bg-coolgray-300	text-white "
-						>{$t('register.register')}</button
+						class="bg-transparent hover:bg-coolgray-300	text-white ">Register</button
 					>
 					<button
 						class="bg-transparent hover:bg-coolgray-300"
-						on:click|preventDefault={() => goto('/reset')}
-						>{$t('reset_password.reset_password')}</button
+						on:click|preventDefault={() => goto('/reset')}>Reset password</button
 					>
 				</div>
 			</form>