feat: add runtime language selector in header (EN/FR toggle)

- Add LanguageSelector component with globe icon + cycle button
- Refactor i18n to support reactive locale switching via useSyncExternalStore
- Locale priority: localStorage > VITE_LOCALE > navigator.language > 'en'
- All components now use useT() hook for reactive re-rendering on locale change
- Persists choice to localStorage (key: pinchchat-locale)
- No page reload needed — instant switch
This commit is contained in:
Nicolas Varrot
2026-02-11 16:18:22 +00:00
parent b6a989bb51
commit 9b3aed4adc
12 changed files with 155 additions and 29 deletions

16
src/hooks/useLocale.ts Normal file
View File

@@ -0,0 +1,16 @@
import { useSyncExternalStore } from 'react';
import { getLocale, onLocaleChange, t as rawT, type TranslationKey } from '../lib/i18n';
/** Re-renders component when locale changes. Returns the current locale string. */
export function useLocale(): string {
return useSyncExternalStore(onLocaleChange, getLocale, getLocale);
}
/**
* Reactive translation hook.
* Components using this will automatically re-render when locale changes.
*/
export function useT(): (key: TranslationKey) => string {
useLocale(); // subscribe to changes
return rawT;
}