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,46 +62,10 @@ export const handle = handleSession(
 					expires: new Date('Thu, 01 Jan 1970 00:00:01 GMT')
 				})
 			);
-		}
-
-		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);
-		}
-
+		} finally {
 			return response;
 		}
+	}
 );
 
 export const getSession: GetSession = function ({ locals }) {

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,6 +147,9 @@
 	<title>Coolify</title>
 </svelte:head>
 
+{#await setupResult}
+	Please wait...
+{:then}
 	<SvelteToast options={{ intro: { y: -64 }, duration: 3000, pausable: true }} />
 	{#if $session.userId}
 		<nav class="nav-main">
@@ -155,7 +162,7 @@
 						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')}
+						data-tooltip="Dashboard"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -184,7 +191,7 @@
 							$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')}
+						data-tooltip="Applications"
 					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -329,7 +336,7 @@
 						{#if isUpdateAvailable}
 							<button
 								disabled={updateStatus.success === false}
-							title={$t('layout.update_available')}
+								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"
 							>
@@ -527,7 +534,7 @@
 			bind:value={selectedTeamId}
 			on:change={switchTeam}
 		>
-		<option value="" disabled selected>{$t('layout.switch_to_a_different_team')}</option>
+			<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}
@@ -536,3 +543,6 @@
 	<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>