mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
f58c7e4602
- Implement next-intl framework for scalable i18n - Add complete Chinese (Simplified) localization - Support 400+ translated strings across all pages - Add language switcher with persistent preference - Zero breaking changes to existing functionality Framework additions: - i18n routing and middleware - LocaleContext for client-side state - LanguageSwitcher component - Translation files (en.json, zh.json) Translated components: - Homepage: Hero, features, CTA, navbar - Auth: Login, register - Dashboard: Main page, layout - Connectors: Management, add page (all categories) - Documents: Upload, manage, filters - Settings: LLM configs, role assignments - Onboarding: Add provider, assign roles - Logs: Task logs viewer Adding a new language now requires only: 1. Create messages/<locale>.json 2. Add locale to i18n/routing.ts
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import {useLocaleContext} from '@/contexts/LocaleContext';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import {Globe} from 'lucide-react';
|
|
|
|
/**
|
|
* Language switcher component
|
|
* Allows users to change the application language
|
|
* Persists preference in localStorage
|
|
*/
|
|
export function LanguageSwitcher() {
|
|
const {locale, setLocale} = useLocaleContext();
|
|
|
|
// Supported languages configuration
|
|
const languages = [
|
|
{code: 'en' as const, name: 'English', flag: '🇺🇸'},
|
|
{code: 'zh' as const, name: '简体中文', flag: '🇨🇳'},
|
|
];
|
|
|
|
/**
|
|
* Handle language change
|
|
* Updates locale in context and localStorage
|
|
*/
|
|
const handleLanguageChange = (newLocale: string) => {
|
|
setLocale(newLocale as 'en' | 'zh');
|
|
};
|
|
|
|
return (
|
|
<Select value={locale} onValueChange={handleLanguageChange}>
|
|
<SelectTrigger className="w-[160px]">
|
|
<Globe className="mr-2 h-4 w-4" />
|
|
<SelectValue>
|
|
{languages.find(lang => lang.code === locale)?.name || 'English'}
|
|
</SelectValue>
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{languages.map((language) => (
|
|
<SelectItem key={language.code} value={language.code}>
|
|
<span className="flex items-center gap-2">
|
|
<span>{language.flag}</span>
|
|
<span>{language.name}</span>
|
|
</span>
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
);
|
|
}
|
|
|