diff --git a/next-i18next.config.js b/next-i18next.config.js index 6ab97a6f6..9c876f550 100644 --- a/next-i18next.config.js +++ b/next-i18next.config.js @@ -4,7 +4,9 @@ module.exports = { i18n: { defaultLocale: 'en', locales: ['en', 'de', 'en', 'es', 'fr', 'it', 'ja', 'nl', 'pl', 'ru', 'sl', 'sv', 'zh'], + fallbackLng: 'en', localeDetection: true, + returnEmptyString: false }, reloadOnPrerender: process.env.NODE_ENV === 'development', }; diff --git a/src/components/Settings/LanguageSwitch.tsx b/src/components/Settings/LanguageSwitch.tsx index 01e2ecfec..c9334c0b4 100644 --- a/src/components/Settings/LanguageSwitch.tsx +++ b/src/components/Settings/LanguageSwitch.tsx @@ -12,7 +12,7 @@ export default function LanguageSwitch() { const { t, i18n } = useTranslation('settings/general/internationalization'); const { changeLanguage } = i18n; const configLocale = getCookie('config-locale'); - const { locale, locales } = useRouter(); + const { locale, locales, push } = useRouter(); const [selectedLanguage, setSelectedLanguage] = useState( (configLocale as string) ?? locale ?? 'en' ); @@ -37,6 +37,8 @@ export default function LanguageSwitch() { sameSite: 'strict', }); + push('/', '/', { locale: value }); + showNotification({ title: 'Language changed', message: `You changed the language to '${newLanguage.originalName}'`, @@ -65,6 +67,14 @@ export default function LanguageSwitch() { onChange={onChangeSelect} value={selectedLanguage} defaultValue={locale} + searchable + filter={(value, item) => { + const selectItems = item as unknown as { value: string, language: Language }; + return ( + selectItems.language.originalName.trim().includes(value.trim()) || + selectItems.language.translatedName.trim().includes(value.trim()) + ); + }} styles={{ icon: { width: 42, diff --git a/src/languages/language.ts b/src/languages/language.ts index c292ea53b..d2cbc5d59 100644 --- a/src/languages/language.ts +++ b/src/languages/language.ts @@ -64,4 +64,4 @@ const languages: Language[] = [ ]; export const getLanguageByCode = (code: string | null) => - languages.find((language) => language.shortName === code) ?? languages[-1]; + languages.find((language) => language.shortName === code) ?? languages[languages.length - 1];