i18n: add EN/ES dictionaries, lazy-load provider, and language selector

Author: Jathow

app/i18n.tsx

@@ -15,6 +15,7 @@ const I18nContext = createContext<I18nContextValue | null>(null);
 
 // Base English messages (scaffold). Keys are dot-notation strings.
 let enMessages: Record<string, string> = {};
+let esMessages: Record<string, string> = {};
 
 async function loadEnMessages(): Promise<Record<string, string>> {
 	try {
@@ -26,6 +27,16 @@ async function loadEnMessages(): Promise<Record<string, string>> {
 	}
 }
 
+async function loadEsMessages(): Promise<Record<string, string>> {
+	try {
+		const res = await fetch('/locales/es.json', { cache: 'no-store' });
+		if (!res.ok) return {};
+		return (await res.json()) as Record<string, string>;
+	} catch {
+		return {};
+	}
+}
+
 function format(template: string, vars?: Vars): string {
 	if (!vars) return template;
 	return template.replace(/\{(\w+)\}/g, (_m, k: string) => (vars[k] !== undefined ? String(vars[k]) : `{${k}}`));
@@ -47,14 +58,18 @@ export function I18nProvider({ children }: { children: React.ReactNode }) {
 		(async () => {
 			if (locale === 'en') {
 				enMessages = await loadEnMessages();
-				setLoaded((v) => !v); // trigger rerender
+				setLoaded((v) => !v);
+			} else if (locale === 'es') {
+				esMessages = await loadEsMessages();
+				setLoaded((v) => !v);
 			}
 		})();
 	}, [locale]);
 
 	const t = useCallback((key: string, vars?: Vars) => {
 		// Only 'en' for now; scaffold for future locales
-		const message = (locale === 'en' ? enMessages[key] : undefined) || key;
+		const dict = locale === 'en' ? enMessages : locale === 'es' ? esMessages : enMessages;
+		const message = dict[key] || key;
 		return format(message, vars);
 	}, [locale]);
 

app/theme-toggle.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useEffect, useState } from 'react';
+import { useI18n } from './i18n';
 
 function getTheme(): 'dark' | 'light' {
 	if (typeof window === 'undefined') return 'dark';
@@ -10,6 +11,7 @@ function getTheme(): 'dark' | 'light' {
 }
 
 export function ThemeToolbar() {
+    const { locale, setLocale } = useI18n();
 	const [theme, setTheme] = useState<'dark' | 'light'>(getTheme());
 	const [contrast, setContrast] = useState<'normal' | 'high'>(() => (typeof window === 'undefined' ? 'normal' : (window.localStorage.getItem('contrast') as 'normal' | 'high') || 'normal'));
 	const [motion, setMotion] = useState<'normal' | 'reduce'>(() => (typeof window === 'undefined' ? 'normal' : (window.localStorage.getItem('motion') as 'normal' | 'reduce') || 'normal'));
@@ -45,6 +47,10 @@ export function ThemeToolbar() {
 			<button onClick={() => setMotion(motion === 'normal' ? 'reduce' : 'normal')} aria-pressed={motion === 'reduce'} aria-label="Toggle reduced motion">
 				Motion
 			</button>
+            <select value={locale} onChange={(e) => setLocale(e.target.value)} aria-label="Language">
+                <option value="en">EN</option>
+                <option value="es">ES</option>
+            </select>
 		</div>
 	);
 }

locales/es.json

@@ -0,0 +1,12 @@
+{
+	"home.title": "Planificador de Optimización Diaria",
+	"home.init": "Aplicación Next.js (TypeScript) inicializada.",
+	"nav.onboarding.hard": "Comenzar onboarding: Restricciones fijas",
+	"nav.onboarding.lifestyle": "Siguiente: Estilo de vida y capacidad",
+	"nav.onboarding.areas": "Siguiente: Importancia por áreas",
+	"nav.onboarding.wellbeing": "Siguiente: Objetivos de bienestar",
+	"nav.onboarding.integrations": "Onboarding: Integraciones (ICS/CSV)",
+	"nav.plan": "Abrir vista de Plan (arrastrar y soltar)"
+}
+
+