feat: optimize locale loader

apps/desktop/package.json

@@ -37,6 +37,7 @@
 		"@tanstack/react-query": "^5.17.19",
 		"framer-motion": "^10.18.0",
 		"i18next": "^23.8.0",
+		"i18next-resources-to-backend": "^1.2.0",
 		"jotai": "^2.6.3",
 		"minidenticons": "^4.2.0",
 		"nanoid": "^5.0.4",

apps/desktop/src/i18n.ts

@@ -2,32 +2,25 @@ import { resolveResource } from "@tauri-apps/api/path";
 import { readTextFile } from "@tauri-apps/plugin-fs";
 import { locale } from "@tauri-apps/plugin-os";
 import i18n from "i18next";
+import resourcesToBackend from "i18next-resources-to-backend";
 import { initReactI18next } from "react-i18next";
 
-const enFilePath = await resolveResource("locales/en.json");
-const jaFilePath = await resolveResource("locales/ja.json");
+const currentLocale = (await locale()).slice(0, 2);
 
-const enLocale = JSON.parse(await readTextFile(enFilePath));
-const jaLocale = JSON.parse(await readTextFile(jaFilePath));
-
-const osLocale = (await locale()).slice(0, 2);
-
-const resources = {
-	en: {
-		translation: enLocale,
-	},
-	ja: {
-		translation: jaLocale,
-	},
-};
-
-i18n.use(initReactI18next).init({
-	lng: osLocale,
-	fallbackLng: "en",
-	interpolation: {
-		escapeValue: false,
-	},
-	resources,
-});
+i18n
+	.use(
+		resourcesToBackend(async (language: string) => {
+			const file_path = await resolveResource(`locales/${language}.json`);
+			return JSON.parse(await readTextFile(file_path));
+		}),
+	)
+	.use(initReactI18next)
+	.init({
+		lng: currentLocale,
+		fallbackLng: "en",
+		interpolation: {
+			escapeValue: false,
+		},
+	});
 
 export default i18n;

apps/desktop/src/routes/auth/login-key.tsx

@@ -57,20 +57,19 @@ export function LoginWithKey() {
 					<h1 className="text-2xl font-semibold">
 						{t("loginWithPrivkey.title")}
 					</h1>
-					<Trans
-						t={t}
-						className="text-lg font-medium whitespace-pre-line leading-snug text-neutral-600 dark:text-neutral-500"
-					>
-						Lume will put your private key to
-						<span className="text-teal-500">
-							{storage.platform === "macos"
-								? "Apple Keychain"
-								: storage.platform === "windows"
-								  ? "Credential Manager"
-								  : "Secret Service"}
-						</span>
-						. It will be secured by your OS.
-					</Trans>
+					<p className="text-lg font-medium whitespace-pre-line leading-snug text-neutral-600 dark:text-neutral-500">
+						<Trans t={t}>
+							Lume will put your private key to{" "}
+							<span className="text-teal-500">
+								{storage.platform === "macos"
+									? "Apple Keychain"
+									: storage.platform === "windows"
+									  ? "Credential Manager"
+									  : "Secret Service"}
+							</span>
+							. It will be secured by your OS.
+						</Trans>
+					</p>
 				</div>
 				<div className="flex flex-col gap-6">
 					<form

apps/desktop/src/routes/auth/login.tsx

@@ -1,4 +1,4 @@
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function LoginScreen() {
@@ -43,15 +43,9 @@ export function LoginScreen() {
 							>
 								{t("login.loginWithPrivkey")}
 							</Link>
-							<Trans
-								i18nKey="login.footer"
-								className="text-sm text-center text-neutral-500"
-							>
-								Lume will put your Private Key in{" "}
-								<span className="text-teal-600">Secure Storage</span> depended
-								on your OS Platform. It will be secured by Password or Biometric
-								ID
-							</Trans>
+							<p className="text-sm text-center text-neutral-500">
+								{t("login.footer")}
+							</p>
 						</div>
 					</div>
 				</div>