Merge pull request #1 from coinos/i18n

Add Internationalization to CoinOS

2 files changed, 18 insertions, 3 deletions

diff --git a/src/routes/[username]/settings.svelte b/src/routes/[username]/settings.svelte
index 5abe58e0..e4d7b0bf 100644
--- a/src/routes/[username]/settings.svelte
+++ b/src/routes/[username]/settings.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { AppHeader, Icon, Toggle } from '$comp';
+	import { AppHeader, Icon, Toggle, LocaleSelector } from '$comp';
 	import { user, colorTheme } from '$lib/store';
 
 	let setting = 'account';
@@ -45,6 +45,11 @@
 
 		{#if setting === 'account'}
 			<div>
+				<label for="language" class="font-bold block mb-1">Language</label>
+				<LocaleSelector style="block py-3 w-full" />
+			</div>
+
+			<div>
 				<label for="username" class="font-bold mb-1 block">Username</label>
 				<input
 					type="text"
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 5ffdc9a0..8ac6f20f 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,6 +1,8 @@
 <script>
 	import { SvelteToast } from '@zerodevx/svelte-toast';
-	import '../app.css';
+  import '$lib/i18n';
+  import { isLoading, locale } from 'svelte-i18n';
+  import '../app.css';
 	import { onMount } from 'svelte';
 	import { connect } from '$lib/socket';
 	import { user, token } from '$lib/store';
@@ -15,6 +17,14 @@
 	let ready = false;
 
 	onMount(() => {
+    // get locale from local storage
+    let localStorageLocale = localStorage.getItem('svelte-i18n-locale');
+    if (localStorageLocale) locale.set(localStorageLocale);
+
+    locale.subscribe((lng) => {
+      if (lng) localStorage.setItem('svelte-i18n-locale', lng);
+    });
+
 		if (protectedRoutes.find((p) => $page.url.pathname.match(p))) {
 			if (!$token) {
 				goto('/login');
@@ -29,7 +39,7 @@
 	});
 </script>
 
-{#if ready}
+{#if ready && !$isLoading}
 	<SvelteToast options={{ reversed: true, intro: { y: 192 } }} />
 	<slot />
 {:else}