🐛 fix language switch and add search

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',
 };

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<string>(
     (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,

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];