remember user language selection

6 files changed, 33 insertions, 30 deletions

diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index cb3e284d..d853dd9e 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -39,37 +39,30 @@
   $: update(data);
   let update = (data) => {
     ({ rate, user, subject, token, rates } = data);
+    $locale = user?.language || "en";
   };
 
   onMount(async () => {
-    let localeLocalStorageKey = "sveltekit-i18n-locale";
-    let localStorageLocale = localStorage.getItem(localeLocalStorageKey);
-    if (localStorageLocale) locale.set(localStorageLocale);
-
-    locale.subscribe((lng) => {
-      if (lng) localStorage.setItem(localeLocalStorageKey, lng);
-    });
-
     if (browser) {
       checkSocket();
       let locktime = user && user.locktime ? user.locktime : 300;
       expireTimer = setTimeout(expirePin, locktime * 1000);
 
       if (window.NDEFReader && user.nfc) {
-      	try {
-      		$ndef = new NDEFReader();
-      		await $ndef.scan();
+        try {
+          $ndef = new NDEFReader();
+          await $ndef.scan();
 
-      		$ndef.addEventListener('readingerror', (e) => {
-      			console.log('nfc error', e);
-      		});
+          $ndef.addEventListener("readingerror", (e) => {
+            console.log("nfc error", e);
+          });
 
-              $ndef.addEventListener('reading', ({ message, serialNumber }) => {
+          $ndef.addEventListener("reading", ({ message, serialNumber }) => {
             goto(`/send/${message}`);
-      		});
-      	} catch (error) {
-      		console.log('Argh! ' + error);
-      	}
+          });
+        } catch (error) {
+          console.log("Argh! " + error);
+        }
       }
     }
   });
diff --git a/src/routes/(app)/[username]/invoice/[id]/+page.svelte b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
index a7a7b26d..e09d5935 100644
--- a/src/routes/(app)/[username]/invoice/[id]/+page.svelte
+++ b/src/routes/(app)/[username]/invoice/[id]/+page.svelte
@@ -204,8 +204,8 @@
   {#if type === types.liquid}
     <div class="flex justify-center">
       <div class="my-auto text-xl text-center text-secondary">
-        We only support <span class="text-teal-500 font-bold">L-BTC</span>,
-        don't deposit other assets yet
+        {$t("payments.onlyLbtc")} <span class="text-teal-500 font-bold">L-BTC</span>,
+        {$t("payments.dontDeposit")}
       </div>
     </div>
   {/if}
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
index b9717b82..3c10d897 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.server.js
@@ -5,7 +5,7 @@ export function load({ cookies, params, url }) {
   if (url.pathname.endsWith("settings"))
     redirect(307, url.pathname + "/account");
   params.cookies = cookies.getAll();
-  return params;
+  return { cookies: cookies.getAll(), tab: params.tab }
 }
 
 export const actions = {
diff --git a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
index 54a2d71c..0a08a4b1 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/+page.svelte
@@ -39,7 +39,17 @@
 
   $: form?.user && ({ user } = form);
 
-  $: form?.success && success($t("user.settings.saved"), false);
+  $: form?.success && throttledSuccess();
+
+  let justUpdated;
+  let throttledSuccess = () => {
+    console.log("justUpdated", justUpdated);
+    if (!justUpdated) {
+      justUpdated = true;
+      success($t("user.settings.saved"), false);
+      setTimeout(() => (justUpdated = false), 5000);
+    }
+  };
 
   $: form?.message && fail(form.message);
 
diff --git a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
index 539cfd5e..80ae3ad9 100644
--- a/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
+++ b/src/routes/(app)/[username]/settings/[...tab]/_pos.svelte
@@ -15,7 +15,7 @@
   <label for="language" class="font-bold block mb-1"
     >{$t("user.settings.locale")}</label
   >
-  <LocaleSelector style="select-styles block py-3 w-full" />
+  <LocaleSelector style="select-styles block py-3 w-full" bind:user />
 </div>
 
 <div>
@@ -71,6 +71,6 @@
     class="flex rounded-full border py-2 px-4 font-bold hover:opacity-80 w-full gap-2 my-5 justify-center"
   >
     <img src="/icons/shopify.svg" class="w-8" />
-    <div class="my-auto">Shopify Integration</div>
+    <div class="my-auto">{$t("user.settings.shopify")}</div>
   </button>
 </a>
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index 5273d372..91d24d3d 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -1,6 +1,7 @@
 import { auth, get } from "$lib/utils";
 import { loadTranslations, locale } from "$lib/translations";
-export const load = async ({ cookies, url }) => {
+
+export let load = async ({ cookies, url }) => {
   let user;
   let token = cookies.get("token");
   if (token) {
@@ -9,9 +10,8 @@ export const load = async ({ cookies, url }) => {
     } catch (e) {}
   }
 
-  const { host, pathname } = url;
-  const defaultLocale = user?.language || "en"; // get from cookie, user session, ...
-  const initLocale = locale.get() || defaultLocale; // set default if no locale already set
-  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+  let { host, pathname } = url;
+  let locale = user?.language || "en";
+  await loadTranslations(locale, pathname);
   return { host, pathname };
 };