setMobileMenuOpen(false)}>
- Pricing
+ {t('navigation.pricing')}
setMobileMenuOpen(false)}>
Proof
setMobileMenuOpen(false)}>
- Teams
+ {t('navigation.teams')}
-
-
- );
-}
+// Initialize localization BEFORE we render anything
+initI18n().then(() => {
+ console.log('[main] i18n initialized, rendering app...');
+
+ // Render the app
+ const rootElement = document.getElementById("root")!;
+ if (!rootElement.innerHTML) {
+ const root = createRoot(rootElement);
+ root.render(
+
+
+
+ );
+ }
+}).catch((error) => {
+ console.error('[main] Failed to initialize i18n:', error);
+
+ // Still render the app even if i18n fails, but show a warning
+ const rootElement = document.getElementById("root")!;
+ if (!rootElement.innerHTML) {
+ const root = createRoot(rootElement);
+ root.render(
+
+
+
+ );
+ }
+});
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index f902daeb..54300b66 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -8,6 +8,7 @@ import { Sidebar, SidebarToggle } from "@/components/Sidebar";
import { cva } from "class-variance-authority";
import { InfoContent } from "@/components/Explainer";
import { useState, useCallback, useEffect } from "react";
+import { useTranslation } from 'react-i18next';
import { Card, CardHeader } from "@/components/ui/card";
import { VerificationModal } from "@/components/VerificationModal";
import { TopNav } from "@/components/TopNav";
@@ -50,6 +51,7 @@ export const Route = createFileRoute("/")({
});
function Index() {
+ const { t } = useTranslation();
const navigate = useNavigate();
const localState = useLocalState();
@@ -162,7 +164,7 @@ function Index() {
/>
- Private AI Chat
+ {t('app.description')}
diff --git a/frontend/src/utils/i18n.ts b/frontend/src/utils/i18n.ts
new file mode 100644
index 00000000..b0d0477a
--- /dev/null
+++ b/frontend/src/utils/i18n.ts
@@ -0,0 +1,83 @@
+import i18next, { InitOptions } from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { invoke } from '@tauri-apps/api/core';
+
+/**
+ * Resolve the locale to use:
+ * 1. Try the native Tauri localization plugin.
+ * 2. Fallback to the browser language.
+ */
+async function resolveLocale(): Promise {
+ try {
+ const native = await invoke('plugin:localization|get_locale');
+ if (native) {
+ console.log('[i18n] Native locale detected:', native);
+ return native;
+ }
+ } catch (e) {
+ console.warn('[i18n] Native locale unavailable, using navigator.language', e);
+ }
+
+ const browserLocale = navigator.language || 'en-US';
+ console.log('[i18n] Using browser locale:', browserLocale);
+ return browserLocale;
+}
+
+/**
+ * Load the JSON file that matches the locale.
+ * Vite's import.meta.glob creates a map of all json files in the locales folder.
+ * The path needs to be relative to the project root where public/ is located.
+ */
+const localeModules = import.meta.glob('/public/locales/*.json') as Record<
+ string,
+ () => Promise<{ default: unknown }>
+>;
+
+async function loadResources(requested: string) {
+ const short = requested.split('-')[0]; // en-US → en
+ const path = `/public/locales/${short}.json`;
+
+ console.log('[i18n] Looking for locale file:', path);
+ console.log('[i18n] Available locale modules:', Object.keys(localeModules));
+
+ const loader = localeModules[path];
+ if (!loader) {
+ console.warn(`[i18n] Locale ${short} not found – falling back to English`);
+ const englishLoader = localeModules['/public/locales/en.json'];
+ if (!englishLoader) {
+ console.error('[i18n] English fallback not found!');
+ return { en: { translation: {} } };
+ }
+ const mod = await englishLoader();
+ return { en: { translation: mod.default as Record } };
+ }
+
+ const mod = await loader();
+ return { [short]: { translation: mod.default as Record } };
+}
+
+/**
+ * Initialize i18next – call once at startup.
+ */
+export async function initI18n(): Promise {
+ console.log('[i18n] Initializing i18next...');
+
+ const locale = await resolveLocale();
+ const resources = await loadResources(locale);
+ const short = locale.split('-')[0]; // en-US → en
+
+ console.log('[i18n] Using locale:', short);
+ console.log('[i18n] Resources loaded:', Object.keys(resources));
+
+ const options: InitOptions = {
+ lng: short,
+ fallbackLng: 'en',
+ resources,
+ interpolation: { escapeValue: false },
+ react: { useSuspense: false },
+ debug: import.meta.env.DEV // Enable debug logging in development
+ };
+
+ await i18next.use(initReactI18next).init(options);
+ console.log('[i18n] i18next initialized successfully');
+}