src/i18n/index.js

@@ -1,23 +1,35 @@
 import { derived, writable } from "svelte/store";
 import translations from "./translations";
 
+const storedLocale = localStorage.getItem("locale");
 const browserLocale = navigator.language || "en";
-const [baseLang, region] = browserLocale.split("-");
+const [baseLang] = browserLocale.split("-");
+
+export const DEFAULT_LOCALE =
+  storedLocale && translations[storedLocale] ? storedLocale :
+  translations[browserLocale] ? browserLocale :
+  translations[baseLang] ? baseLang :
+  "en";
 
-export const DEFAULT_LOCALE = translations[browserLocale] ? browserLocale : translations[baseLang] ? baseLang :"en";
 export const locale = writable(DEFAULT_LOCALE);
+
+locale.subscribe((value) => {
+  if (value) localStorage.setItem("locale", value);
+});
+
 export const locales = Object.entries(translations).map(([key, lang]) => [key, lang.name]);
 
 function translate(locale, key, vars = {}) {
   if (!key) throw new Error("Translation key is required.");
 
+  const fallbackLocale = "en";
   const validLocale = translations[locale]
     ? locale
     : translations[baseLang]
     ? baseLang
-    : "en";
+    : fallbackLocale;
 
-  let text = translations[validLocale][key] || translations["en"][key];
+  let text = translations[validLocale][key] || translations[fallbackLocale][key];
 
   if (!text) {
     console.error(`Missing translation for key "${key}" in locale "${validLocale}".`);