Modified language selection to use language names

src/frontend/src/components/items/LanguageSelect.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react';
 import { Locales, languages } from '../../contexts/LanguageContext';
 import { useLocalState } from '../../states/LocalState';
 
-export function LanguageSelect() {
+export function LanguageSelect({ width = 80 }: { width?: number }) {
   const [value, setValue] = useState<string | null>(null);
   const [locale, setLanguage] = useLocalState((state) => [
     state.language,
@@ -21,6 +21,18 @@ export function LanguageSelect() {
   useEffect(() => {
     setValue(locale);
   }, [locale]);
+  const langOptions = Object.keys(languages).map((key) => ({
+    value: key,
+    label: languages[key as Locales]
+  }));
 
-  return <Select w={80} data={languages} value={value} onChange={setValue} />;
+  return (
+    <Select
+      w={width}
+      data={langOptions}
+      value={value}
+      onChange={setValue}
+      searchable
+    />
+  );
 }

src/frontend/src/components/widgets/DisplayWidget.tsx

@@ -21,7 +21,7 @@ export default function DisplayWidget() {
           <Trans>Language</Trans>
         </div>
         <div>
-          <LanguageSelect />
+          <LanguageSelect width={140} />
         </div>
       </SimpleGrid>
     </span>

src/frontend/src/contexts/LanguageContext.tsx

@@ -1,4 +1,5 @@
 import { i18n } from '@lingui/core';
+import { t } from '@lingui/macro';
 import { I18nProvider } from '@lingui/react';
 import { useEffect } from 'react';
 
@@ -38,37 +39,38 @@ export type Locales =
   | 'zh-hant'
   | 'pseudo-LOCALE';
 
-export const languages: Locales[] = [
-  'cs',
-  'da',
-  'de',
-  'el',
-  'en',
-  'es',
-  'es-mx',
-  'fa',
-  'fi',
-  'fr',
-  'he',
-  'hi',
-  'hu',
-  'it',
-  'ja',
-  'ko',
-  'nl',
-  'no',
-  'pl',
-  'pt',
-  'pt-br',
-  'ru',
-  'sl',
-  'sv',
-  'th',
-  'tr',
-  'vi',
-  'zh-hans',
-  'zh-hant'
-];
+export const languages: Record<Locales, string> = {
+  cs: t`Czech`,
+  da: t`Danish`,
+  de: t`German`,
+  el: t`Greek`,
+  en: t`English`,
+  es: t`Spanish`,
+  'es-mx': t`Spanish (Mexican)`,
+  fa: t`Farsi / Persian`,
+  fi: t`Finnish`,
+  fr: t`French`,
+  he: t`Hebrew`,
+  hi: t`Hindi`,
+  hu: t`Hungarian`,
+  it: t`Italian`,
+  ja: t`Japanese`,
+  ko: t`Korean`,
+  nl: t`Dutch`,
+  no: t`Norwegian`,
+  pl: t`Polish`,
+  pt: t`Portuguese`,
+  'pt-br': t`Portuguese (Brazilian)`,
+  ru: t`Russian`,
+  sl: t`Slovenian`,
+  sv: t`Swedish`,
+  th: t`Thai`,
+  tr: t`Turkish`,
+  vi: t`Vietnamese`,
+  'zh-hans': t`Chinese (Simplified)`,
+  'zh-hant': t`Chinese (Traditional)`,
+  'pseudo-LOCALE': t`Pseudo Locale`
+};
 
 export function LanguageContext({ children }: { children: JSX.Element }) {
   const [language] = useLocalState((state) => [state.language]);

src/frontend/src/pages/Index/Profile/UserPanel.tsx

@@ -149,7 +149,7 @@ function DisplaySettings({ height }: { height: number }) {
           <Trans>Language</Trans>
         </Text>
         <Stack>
-          <LanguageSelect />
+          <LanguageSelect width={200} />
           <Button onClick={enablePseudoLang} variant="light">
             <Trans>Use pseudo language</Trans>
           </Button>