feat: add multi-lang

apps/desktop/package.json

@@ -36,6 +36,7 @@
 		"@radix-ui/react-tooltip": "^1.0.7",
 		"@tanstack/react-query": "^5.17.19",
 		"framer-motion": "^10.18.0",
+		"i18next": "^23.8.0",
 		"jotai": "^2.6.3",
 		"minidenticons": "^4.2.0",
 		"nanoid": "^5.0.4",
@@ -45,6 +46,7 @@
 		"react-currency-input-field": "^3.6.14",
 		"react-dom": "^18.2.0",
 		"react-hook-form": "^7.49.3",
+		"react-i18next": "^14.0.1",
 		"react-router-dom": "^6.21.3",
 		"smol-toml": "^1.1.4",
 		"sonner": "^1.3.1",

apps/desktop/src/app.tsx

@@ -1,7 +1,9 @@
 import { ColumnProvider, LumeProvider } from "@lume/ark";
 import { StorageProvider } from "@lume/storage";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { I18nextProvider } from "react-i18next";
 import { Toaster } from "sonner";
+import i18n from "./i18n";
 import Router from "./router";
 
 const queryClient = new QueryClient({
@@ -14,15 +16,17 @@ const queryClient = new QueryClient({
 
 export default function App() {
 	return (
-		<QueryClientProvider client={queryClient}>
+		<I18nextProvider i18n={i18n} defaultNS={"translation"}>
-			<Toaster position="top-center" theme="system" closeButton />
+			<QueryClientProvider client={queryClient}>
-			<StorageProvider>
+				<Toaster position="top-center" theme="system" closeButton />
-				<LumeProvider>
+				<StorageProvider>
-					<ColumnProvider>
+					<LumeProvider>
-						<Router />
+						<ColumnProvider>
-					</ColumnProvider>
+							<Router />
-				</LumeProvider>
+						</ColumnProvider>
-			</StorageProvider>
+					</LumeProvider>
-		</QueryClientProvider>
+				</StorageProvider>
+			</QueryClientProvider>
+		</I18nextProvider>
 	);
 }

apps/desktop/src/i18n.ts

@@ -0,0 +1,33 @@
+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 { initReactI18next } from "react-i18next";
+
+const enFilePath = await resolveResource("locales/en.json");
+const jaFilePath = await resolveResource("locales/ja.json");
+
+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,
+});
+
+export default i18n;

apps/desktop/src/routes/auth/create-address.tsx

@@ -14,6 +14,7 @@ import { Window } from "@tauri-apps/api/window";
 import { useSetAtom } from "jotai";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { useLoaderData, useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -43,6 +44,7 @@ export function CreateAccountAddress() {
 	const [serviceId, setServiceId] = useState(services?.[0]?.id);
 	const [loading, setIsLoading] = useState(false);
 
+	const { t } = useTranslation();
 	const {
 		register,
 		handleSubmit,
@@ -156,7 +158,7 @@ export function CreateAccountAddress() {
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
 					<h1 className="text-2xl font-semibold">
-						Let's set up your account on Nostr
+						{t("signupWithProvider.title")}
 					</h1>
 				</div>
 				{!services ? (
@@ -174,7 +176,7 @@ export function CreateAccountAddress() {
 									htmlFor="username"
 									className="text-sm font-semibold uppercase text-neutral-600"
 								>
-									Username *
+									{t("signupWithProvider.username")}
 								</label>
 								<div className="flex flex-col gap-1.5">
 									<div className="flex items-center justify-between w-full gap-2 bg-neutral-900 rounded-xl">
@@ -203,7 +205,7 @@ export function CreateAccountAddress() {
 													<Select.Viewport className="p-3">
 														<Select.Group>
 															<Select.Label className="mb-2 text-sm font-medium uppercase px-7 text-neutral-600">
-																Choose a Provider
+																{t("signupWithProvider.chooseProvider")}
 															</Select.Label>
 															{services.map((service) => (
 																<Item key={service.id} event={service} />
@@ -215,8 +217,7 @@ export function CreateAccountAddress() {
 										</Select.Root>
 									</div>
 									<span className="text-sm text-neutral-600">
-										Use to login to Lume and other Nostr apps. You can choose
+										{t("signupWithProvider.usernameFooter")}
-										provider you trust to manage your account
 									</span>
 								</div>
 							</div>
@@ -226,7 +227,7 @@ export function CreateAccountAddress() {
 										htmlFor="email"
 										className="text-sm font-semibold uppercase text-neutral-600"
 									>
-										Backup Email (optional)
+										{t("signupWithProvider.email")}
 									</label>
 									<input
 										type={"email"}
@@ -238,7 +239,7 @@ export function CreateAccountAddress() {
 									/>
 								</div>
 								<span className="text-sm text-neutral-600">
-									Use for recover your account if you lose your password
+									{t("signupWithProvider.emailFooter")}
 								</span>
 							</div>
 						</div>
@@ -251,7 +252,7 @@ export function CreateAccountAddress() {
 								{loading ? (
 									<LoaderIcon className="size-5 animate-spin" />
 								) : (
-									"Continue"
+									t("global.continue")
 								)}
 							</button>
 						</div>

apps/desktop/src/routes/auth/create-keys.tsx

@@ -11,6 +11,7 @@ import { useSetAtom } from "jotai";
 import { nanoid } from "nanoid";
 import { getPublicKey, nip19 } from "nostr-tools";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -20,6 +21,7 @@ export function CreateAccountKeys() {
 	const setOnboarding = useSetAtom(onboardingAtom);
 	const navigate = useNavigate();
 
+	const [t] = useTranslation();
 	const [key, setKey] = useState("");
 	const [loading, setLoading] = useState(false);
 	const [showKey, setShowKey] = useState(false);
@@ -76,11 +78,10 @@ export function CreateAccountKeys() {
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
 					<h1 className="text-2xl font-semibold">
-						This is your new Account Key
+						{t("signupWithSelfManage.title")}
 					</h1>
 					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
-						Keep your key in safe place. If you lose this key, you will lose
+						{t("signupWithSelfManage.subtitle")}
-						access to your account.
 					</p>
 				</div>
 				<div className="flex flex-col gap-6 mb-0">
@@ -122,7 +123,7 @@ export function CreateAccountKeys() {
 									className="text-sm leading-none text-neutral-500"
 									htmlFor="confirm1"
 								>
-									I understand the risk of lost private key.
+									{t("signupWithSelfManage.confirm1")}
 								</label>
 							</div>
 							<div className="flex items-center gap-2">
@@ -142,7 +143,7 @@ export function CreateAccountKeys() {
 									className="text-sm leading-none text-neutral-500"
 									htmlFor="confirm2"
 								>
-									I will make sure keep it safe and not sharing with anyone.
+									{t("signupWithSelfManage.confirm2")}
 								</label>
 							</div>
 							<div className="flex items-center gap-2">
@@ -162,7 +163,7 @@ export function CreateAccountKeys() {
 									className="text-sm leading-none text-neutral-500"
 									htmlFor="confirm3"
 								>
-									I understand I cannot recover private key.
+									{t("signupWithSelfManage.confirm3")}
 								</label>
 							</div>
 						</div>
@@ -176,7 +177,7 @@ export function CreateAccountKeys() {
 						{loading ? (
 							<LoaderIcon className="size-5 animate-spin" />
 						) : (
-							"Save key & Continue"
+							t("signupWithSelfManage.button")
 						)}
 					</button>
 				</div>

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

@@ -1,11 +1,13 @@
 import { LoaderIcon } from "@lume/icons";
 import { cn } from "@lume/utils";
 import { useState } from "react";
-import { Link, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
 
 export function CreateAccountScreen() {
 	const navigate = useNavigate();
 
+	const [t] = useTranslation();
 	const [method, setMethod] = useState<"self" | "managed">("self");
 	const [loading, setLoading] = useState(false);
 
@@ -23,9 +25,9 @@ export function CreateAccountScreen() {
 		<div className="relative flex items-center justify-center w-full h-full">
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
-					<h1 className="text-2xl font-semibold">Let's Get Started</h1>
+					<h1 className="text-2xl font-semibold">{t("signup.title")}</h1>
 					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
-						Choose one of methods below to create your account
+						{t("signup.subtitle")}
 					</p>
 				</div>
 				<div className="flex flex-col gap-4">
@@ -37,9 +39,9 @@ export function CreateAccountScreen() {
 							method === "self" ? "ring-1 ring-teal-500" : "",
 						)}
 					>
-						<p className="font-semibold">Self-Managed</p>
+						<p className="font-semibold">{t("signup.selfManageMethod")}</p>
 						<p className="text-sm font-medium text-neutral-500">
-							You create your keys and keep them safe.
+							{t("signup.selfManageMethodDescription")}
 						</p>
 					</button>
 					<button
@@ -50,9 +52,9 @@ export function CreateAccountScreen() {
 							method === "managed" ? "ring-1 ring-teal-500" : "",
 						)}
 					>
-						<p className="font-semibold">Managed by Provider</p>
+						<p className="font-semibold">{t("signup.providerMethod")}</p>
 						<p className="text-sm font-medium text-neutral-500">
-							A 3rd party provider will handle your sign in keys for you.
+							{t("signup.providerMethodDescription")}
 						</p>
 					</button>
 					<button
@@ -63,7 +65,7 @@ export function CreateAccountScreen() {
 						{loading ? (
 							<LoaderIcon className="size-5 animate-spin" />
 						) : (
-							"Continue"
+							t("global.continue")
 						)}
 					</button>
 				</div>

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

@@ -4,6 +4,7 @@ import { useStorage } from "@lume/storage";
 import { getPublicKey, nip19 } from "nostr-tools";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -15,6 +16,7 @@ export function LoginWithKey() {
 	const [showKey, setShowKey] = useState(false);
 	const [loading, setLoading] = useState(false);
 
+	const { t } = useTranslation("loginWithPrivkey.subtitle");
 	const {
 		register,
 		handleSubmit,
@@ -52,9 +54,14 @@ export function LoginWithKey() {
 		<div className="relative flex items-center justify-center w-full h-full">
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
-					<h1 className="text-2xl font-semibold">Enter your Private Key</h1>
+					<h1 className="text-2xl font-semibold">
-					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+						{t("loginWithPrivkey.title")}
-						Lume will put your private key to{" "}
+					</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"
@@ -62,10 +69,8 @@ export function LoginWithKey() {
 								  ? "Credential Manager"
 								  : "Secret Service"}
 						</span>
-						.
+						. It will be secured by your OS.
-						<br />
+					</Trans>
-						It will be secured by your OS.
-					</p>
 				</div>
 				<div className="flex flex-col gap-6">
 					<form
@@ -107,7 +112,7 @@ export function LoginWithKey() {
 							{loading ? (
 								<LoaderIcon className="size-5 animate-spin" />
 							) : (
-								"Continue"
+								t("global.continue")
 							)}
 						</button>
 					</form>

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

@@ -5,6 +5,7 @@ import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
 import { nip19 } from "nostr-tools";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -15,6 +16,7 @@ export function LoginWithNsecbunker() {
 
 	const [loading, setLoading] = useState(false);
 
+	const { t } = useTranslation();
 	const {
 		register,
 		handleSubmit,
@@ -69,7 +71,7 @@ export function LoginWithNsecbunker() {
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
 					<h1 className="text-2xl font-semibold">
-						Enter your nsecbunker token
+						{t("loginWithBunker.title")}
 					</h1>
 				</div>
 				<div className="flex flex-col gap-6">
@@ -101,7 +103,7 @@ export function LoginWithNsecbunker() {
 							{loading ? (
 								<LoaderIcon className="size-5 animate-spin" />
 							) : (
-								"Continue"
+								t("global.continue")
 							)}
 						</button>
 					</form>

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

@@ -7,6 +7,7 @@ import { Window } from "@tauri-apps/api/window";
 import { fetch } from "@tauri-apps/plugin-http";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -19,6 +20,7 @@ export function LoginWithOAuth() {
 
 	const [loading, setLoading] = useState(false);
 
+	const { t } = useTranslation();
 	const {
 		register,
 		handleSubmit,
@@ -130,7 +132,9 @@ export function LoginWithOAuth() {
 		<div className="relative flex items-center justify-center w-full h-full">
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
-					<h1 className="text-2xl font-semibold">Enter your Nostr Address</h1>
+					<h1 className="text-2xl font-semibold">
+						{t("loginWithAddress.title")}
+					</h1>
 				</div>
 				<div className="flex flex-col gap-6">
 					<form
@@ -161,7 +165,7 @@ export function LoginWithOAuth() {
 							{loading ? (
 								<LoaderIcon className="size-5 animate-spin" />
 							) : (
-								"Continue"
+								t("global.continue")
 							)}
 						</button>
 					</form>

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

@@ -1,11 +1,14 @@
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function LoginScreen() {
+	const { t } = useTranslation();
+
 	return (
 		<div className="relative flex items-center justify-center w-full h-full">
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
-					<h1 className="text-2xl font-semibold">Welcome back, anon!</h1>
+					<h1 className="text-2xl font-semibold">{t("login.title")}</h1>
 				</div>
 				<div className="flex flex-col gap-6">
 					<div className="flex flex-col gap-2">
@@ -13,13 +16,13 @@ export function LoginScreen() {
 							to="/auth/login-oauth"
 							className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
 						>
-							Login with Nostr Address
+							{t("login.loginWithAddress")}
 						</Link>
 						<Link
 							to="/auth/login-nsecbunker"
 							className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
 						>
-							Login with nsecBunker
+							{t("login.loginWithBunker")}
 						</Link>
 					</div>
 					<div className="flex flex-col gap-6">
@@ -29,7 +32,7 @@ export function LoginScreen() {
 							</div>
 							<div className="relative flex justify-center">
 								<span className="px-2 font-medium bg-black text-neutral-600">
-									Or continue with
+									{t("login.or")}
 								</span>
 							</div>
 						</div>
@@ -38,7 +41,7 @@ export function LoginScreen() {
 								to="/auth/login-key"
 								className="mb-2 inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
 							>
-								Login with Private Key
+								{t("login.loginWithPrivkey")}
 							</Link>
 							<p className="text-sm text-center text-neutral-500">
 								Lume will put your Private Key in{" "}

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

@@ -8,6 +8,7 @@ import {
 	requestPermission,
 } from "@tauri-apps/plugin-notification";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -16,6 +17,7 @@ export function OnboardingScreen() {
 	const storage = useStorage();
 	const navigate = useNavigate();
 
+	const [t] = useTranslation();
 	const [loading, setLoading] = useState(false);
 	const [apiKey, setAPIKey] = useState("");
 	const [settings, setSettings] = useState({
@@ -91,10 +93,10 @@ export function OnboardingScreen() {
 			<div className="mx-auto flex w-full max-w-md flex-col gap-8">
 				<div className="flex flex-col gap-1 text-center items-center">
 					<h1 className="text-2xl font-semibold">
-						You&apos;re almost ready to use Lume.
+						{t("onboardingSettings.title")}
 					</h1>
 					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
-						Let&apos;s start personalizing your experience.
+						{t("onboardingSettings.subtitle")}
 					</p>
 				</div>
 				<div className="flex flex-col gap-3">
@@ -107,10 +109,11 @@ export function OnboardingScreen() {
 							<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 						</Switch.Root>
 						<div>
-							<h3 className="font-semibold text-lg">Push notification</h3>
+							<h3 className="font-semibold text-lg">
+								{t("onboardingSettings.notification.title")}
+							</h3>
 							<p className="text-neutral-500">
-								Enabling push notifications will allow you to receive
+								{t("onboardingSettings.notification.subtitle")}
-								notifications from Lume.
 							</p>
 						</div>
 					</div>
@@ -123,10 +126,11 @@ export function OnboardingScreen() {
 							<Switch.Thumb className="block h-6 w-6 translate-x-0.5 rounded-full bg-neutral-50 transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
 						</Switch.Root>
 						<div>
-							<h3 className="font-semibold text-lg">Low Power Mode</h3>
+							<h3 className="font-semibold text-lg">
+								{t("onboardingSettings.lowPower.title")}
+							</h3>
 							<p className="text-neutral-500">
-								Limited relay connection and hide all media, sustainable for low
+								{t("onboardingSettings.lowPower.subtitle")}
-								network environment.
 							</p>
 						</div>
 					</div>
@@ -140,11 +144,10 @@ export function OnboardingScreen() {
 						</Switch.Root>
 						<div>
 							<h3 className="font-semibold text-lg">
-								Translation (nostr.wine)
+								{t("onboardingSettings.translation.title")}
 							</h3>
 							<p className="text-neutral-500">
-								Translate text to your preferred language, powered by Nostr
+								{t("onboardingSettings.translation.subtitle")}
-								Wine.
 							</p>
 						</div>
 					</div>
@@ -175,10 +178,7 @@ export function OnboardingScreen() {
 					) : null}
 					<div className="flex items-center gap-2 rounded-xl px-5 py-3 text-sm bg-blue-950 text-blue-300">
 						<InfoIcon className="size-8" />
-						<p>
+						<p>{t("onboardingSettings.footer")}</p>
-							There are many more settings you can configure from the
-							&quot;Settings&quot; screen. Be sure to visit it later.
-						</p>
 					</div>
 					<button
 						type="button"
@@ -188,7 +188,7 @@ export function OnboardingScreen() {
 						{loading ? (
 							<LoaderIcon className="size-5 animate-spin" />
 						) : (
-							"Continue"
+							t("global.continue")
 						)}
 					</button>
 				</div>

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

@@ -1,6 +1,9 @@
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
 export function WelcomeScreen() {
+	const { t } = useTranslation();
+
 	return (
 		<div className="flex flex-col items-center justify-between w-full h-full">
 			<div />
@@ -12,10 +15,8 @@ export function WelcomeScreen() {
 						alt="lume"
 						className="w-2/3"
 					/>
-					<p className="mt-5 text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
+					<p className="mt-5 text-lg whitespace-pre-line font-medium leading-snug text-neutral-600 dark:text-neutral-500">
-						Lume is a magnificent client for Nostr to meet, explore
+						{t("welcome.title")}
-						<br />
-						and freely share your thoughts with everyone.
 					</p>
 				</div>
 				<div className="flex flex-col w-full max-w-xs gap-2 mx-auto">
@@ -23,19 +24,19 @@ export function WelcomeScreen() {
 						to="/auth/create"
 						className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-white bg-blue-500 rounded-xl hover:bg-blue-600"
 					>
-						Join Nostr
+						{t("welcome.signup")}
 					</Link>
 					<Link
 						to="/auth/login"
 						className="inline-flex items-center justify-center w-full h-12 text-lg font-medium text-neutral-50 rounded-xl bg-neutral-950 hover:bg-neutral-900"
 					>
-						Login
+						{t("welcome.login")}
 					</Link>
 				</div>
 			</div>
 			<div className="flex items-center justify-center h-11">
 				<p className="text-neutral-700">
-					Before joining Nostr, you can take time to learn more about Nostr{" "}
+					{t("welcome.footer")}{" "}
 					<Link
 						to="https://nostr.com"
 						target="_blank"

packages/utils/src/constants.ts

@@ -1,5 +1,10 @@
 export const FETCH_LIMIT = 20;
 
+export const LANGUAGES = [
+	{ label: "English", code: "en" },
+	{ label: "Japanese", code: "ja" },
+];
+
 export const NOSTR_MENTIONS = [
 	"@npub1",
 	"nostr:npub1",
@@ -26,7 +31,7 @@ export const NOSTR_EVENTS = [
 	"Nostr:nevent1",
 ];
 
-export const BITCOINS = ['lnbc', 'bc1p', 'bc1q'];
+export const BITCOINS = ["lnbc", "bc1p", "bc1q"];
 
 export const IMAGES = ["jpg", "jpeg", "gif", "png", "webp", "avif", "tiff"];
 
@@ -374,4 +379,5 @@ export const QUOTES = [
 	"Are you a fan of following topics, instead of people? Use https://zapddit.com",
 ];
 
+// @ts-ignore, it works
 export const VITE_FLATPAK_RESOURCE = import.meta.env.VITE_FLATPAK_RESOURCE;

pnpm-lock.yaml

@@ -150,6 +150,9 @@ importers:
       framer-motion:
         specifier: ^10.18.0
         version: 10.18.0(react-dom@18.2.0)(react@18.2.0)
+      i18next:
+        specifier: ^23.8.0
+        version: 23.8.0
       jotai:
         specifier: ^2.6.3
         version: 2.6.3(@types/react@18.2.48)(react@18.2.0)
@@ -177,6 +180,9 @@ importers:
       react-hook-form:
         specifier: ^7.49.3
         version: 7.49.3(react@18.2.0)
+      react-i18next:
+        specifier: ^14.0.1
+        version: 14.0.1(i18next@23.8.0)(react-dom@18.2.0)(react@18.2.0)
       react-router-dom:
         specifier: ^6.21.3
         version: 6.21.3(react-dom@18.2.0)(react@18.2.0)
@@ -5180,6 +5186,12 @@ packages:
     resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
     dev: false
 
+  /html-parse-stringify@3.0.1:
+    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
+    dependencies:
+      void-elements: 3.1.0
+    dev: false
+
   /html-void-elements@3.0.0:
     resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
     dev: false
@@ -5203,6 +5215,12 @@ packages:
     engines: {node: '>=16.17.0'}
     dev: false
 
+  /i18next@23.8.0:
+    resolution: {integrity: sha512-1H+39doU9dQZrRprpnZ2aZetbX9I1N3bM/YGHN/ZkMJ//wJqrxDEqgI5mmSsh/rglsFBiNxI6UtFZfUO2A6XbA==}
+    dependencies:
+      '@babel/runtime': 7.23.9
+    dev: false
+
   /iconv-lite@0.4.23:
     resolution: {integrity: sha512-neyTUVFtahjf0mB3dZT77u+8O0QB89jFdnBkd5P1JgYPbPaia3gXXOVL2fq8VyU2gMMD7SaN7QukTB/pmXYvDA==}
     engines: {node: '>=0.10.0'}
@@ -6970,6 +6988,26 @@ packages:
       react-dom: 18.2.0(react@18.2.0)
     dev: false
 
+  /react-i18next@14.0.1(i18next@23.8.0)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-TMV8hFismBmpMdIehoFHin/okfvgjFhp723RYgIqB4XyhDobVMyukyM3Z8wtTRmajyFMZrBl/OaaXF2P6WjUAw==}
+    peerDependencies:
+      i18next: '>= 23.2.3'
+      react: '>= 16.8.0'
+      react-dom: '*'
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.23.9
+      html-parse-stringify: 3.0.1
+      i18next: 23.8.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
   /react-remove-scroll-bar@2.3.4(@types/react@18.2.48)(react@18.2.0):
     resolution: {integrity: sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==}
     engines: {node: '>=10'}
@@ -8594,6 +8632,11 @@ packages:
       vite: 5.0.12(@types/node@20.11.8)
     dev: false
 
+  /void-elements@3.1.0:
+    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /volar-service-css@0.0.17(@volar/language-service@1.11.1):
     resolution: {integrity: sha512-bEDJykygMzn2+a9ud6KwZZLli9eqarxApAXZuf2CqJJh6Trw1elmbBCo9SlPfqMrIhpFnwV0Sa+Xoc9x5WPeGw==}
     peerDependencies:

src-tauri/locales/en.json

@@ -0,0 +1,70 @@
+{
+	"global": {
+		"continue": "Continue",
+		"loading": "Loading"
+	},
+	"welcome": {
+		"title": "Lume is a magnificent client for Nostr to meet, explore\nand freely share your thoughts with everyone.",
+		"signup": "Join Nostr",
+		"login": "Login",
+		"footer": "Before joining Nostr, you can take time to learn more about Nostr"
+	},
+	"login": {
+		"title": "Welcome back, anon!",
+		"loginWithAddress": "Login with Nostr Address",
+		"loginWithBunker": "Login with nsecBunker",
+		"or": "Or continue with",
+		"loginWithPrivkey": "Login with Private Key"
+	},
+	"loginWithAddress": {
+		"title": "Enter your Nostr Address"
+	},
+	"loginWithBunker": {
+		"title": "Enter your nsecbunker token"
+	},
+	"loginWithPrivkey": {
+		"title": "Enter your Private Key",
+		"subtitle": "Lume will put your private key to <1>{{service}}</1>.\nIt will be secured by your OS."
+	},
+	"signup": {
+		"title": "Let's Get Started",
+		"subtitle": "Choose one of methods below to create your account",
+		"selfManageMethod": "Self-Managed",
+		"selfManageMethodDescription": "You create your keys and keep them safe.",
+		"providerMethod": "Managed by Provider",
+		"providerMethodDescription": "A 3rd party provider will handle your sign in keys for you."
+	},
+	"signupWithSelfManage": {
+		"title": "This is your new Account Key",
+		"subtitle": "Keep your key in safe place. If you lose this key, you will lose access to your account.",
+		"confirm1": "I understand the risk of lost private key.",
+		"confirm2": "I will make sure keep it safe and not sharing with anyone.",
+		"confirm3": "I understand I cannot recover private key.",
+		"button": "Save key & Continue"
+	},
+	"signupWithProvider": {
+		"title": "Let's set up your account on Nostr",
+		"username": "Username *",
+		"chooseProvider": "Choose a Provider",
+		"usernameFooter": "Use to login to Lume and other Nostr apps. You can choose provider you trust to manage your account",
+		"email": "Backup Email (optional)",
+		"emailFooter": "Use for recover your account if you lose your password"
+	},
+	"onboardingSettings": {
+		"title": "You're almost ready to use Lume.",
+		"subtitle": "Let's start personalizing your experience.",
+		"notification": {
+			"title": "Push notification",
+			"subtitle": "Enabling push notifications will allow you to receive notifications from Lume."
+		},
+		"lowPower": {
+			"title": "Low Power Mode",
+			"subtitle": "Limited relay connection and hide all media, sustainable for low network environment."
+		},
+		"translation": {
+			"title": "Translation (nostr.wine)",
+			"subtitle": "Translate text to your preferred language, powered by Nostr Wine."
+		},
+		"footer": "There are many more settings you can configure from the 'Settings' Screen. Be sure to visit it later."
+	}
+}

src-tauri/locales/ja.json

@@ -0,0 +1,3 @@
+{
+	"title": "こんにちは世界"
+}

src-tauri/resources/config.toml

@@ -1,108 +0,0 @@
-[info]
-relay_url = "<url>"
-name = "depot"
-description = "Nostr Relay inside Lume. Powered by nostr-rs-relay"
-pubkey = ""
-favicon = "favicon.ico"
-relay_icon = "https://example.test/img.png"
-#contact = "mailto:contact@example.com"
-
-[diagnostics]
-#tracing = false
-
-[database]
-engine = "sqlite"
-data_directory = "."
-max_conn = 8
-min_conn = 0
-
-[logging]
-#folder_path = "./log"
-#file_prefix = "nostr-relay"
-
-[network]
-address = "0.0.0.0"
-port = 6090
-#remote_ip_header = "x-forwarded-for"
-#remote_ip_header = "cf-connecting-ip"
-#ping_interval = 300
-
-[options]
-reject_future_seconds = 1800
-
-[limits]
-messages_per_sec = 10
-subscriptions_per_min = 10
-limit_scrapers = false
-
-[authorization]
-pubkey_whitelist = []
-nip42_auth = true
-nip42_dms = true
-
-[verified_users]
-mode = "passive"
-#domain_blacklist = ["wellorder.net"]
-#domain_whitelist = ["example.com"]
-verify_expiration = "1 week"
-#verify_update_frequency = "24 hours"
-max_consecutive_failures = 3
-
-[grpc]
-# gRPC interfaces for externalized decisions and other extensions to
-# functionality.
-#
-# Events can be authorized through an external service, by providing
-# the URL below.  In the event the server is not accessible, events
-# will be permitted.  The protobuf3 schema used is available in
-# `proto/nauthz.proto`.
-# event_admission_server = "http://[::1]:50051"
-
-# If the event admission server denies writes
-# in any case (excluding spam filtering).
-# This is reflected in the relay information document.
-# restricts_write = true
-
-[pay_to_relay]
-# Enable pay to relay
-#enabled = false
-
-# The cost to be admitted to relay
-#admission_cost = 4200
-
-# The cost in sats per post
-#cost_per_event = 0
-
-# Url of lnbits api
-#node_url = "<node url>"
-
-# LNBits api secret
-#api_secret = "<ln bits api>"
-
-# Nostr direct message on signup
-#direct_message=false
-
-# Terms of service
-#terms_message = """
-#This service (and supporting services) are provided "as is", without warranty of any kind, express or implied.
-#
-#By using this service, you agree:
-#* Not to engage in spam or abuse the relay service
-#* Not to disseminate illegal content
-#* That requests to delete content cannot be guaranteed
-#* To use the service in compliance with all applicable laws
-#* To grant necessary rights to your content for unlimited time
-#* To be of legal age and have capacity to use this service
-#* That the service may be terminated at any time without notice
-#* That the content you publish may be removed at any time without notice
-#* To have your IP address collected to detect abuse or misuse
-#* To cooperate with the relay to combat abuse or misuse
-#* You may be exposed to content that you might find triggering or distasteful
-#* The relay operator is not liable for content produced by users of the relay
-#"""
-
-# Whether or not new sign ups should be allowed
-#sign_ups = false
-
-# optional if `direct_message=false`
-#secret_key = "<nostr nsec>"

src-tauri/tauri.conf.json

@@ -34,7 +34,7 @@
 		},
 		"shell": {
 			"open": true,
-			"scope": [{ "name": "bin/depot", "sidecar": true, "args": true }]
+			"scope": []
 		},
 		"updater": {
 			"endpoints": [
@@ -51,7 +51,7 @@
 				"depends": []
 			},
 			"externalBin": [],
-			"resources": ["resources/*"],
+			"resources": ["resources/*", "./locales/*"],
 			"icon": [
 				"icons/32x32.png",
 				"icons/128x128.png",