add language selection to settings (#260)

* Add language selection to settings

* Add available languages to i18n

src/i18n/locale/en.json

@@ -236,6 +236,7 @@
     },
     "language": {
       "label": {
+        "language": "Language",
         "language_with_code": "language with code: {{code}}"
       },
       "title": {

src/i18n/translations.ts

@@ -7,12 +7,22 @@
 
 import en from 'i18n/locale/en.json';
 
+import ar from 'i18n/resources/ar.json';
+import de from 'i18n/resources/de.json';
+import es from 'i18n/resources/es.json';
+import fr from 'i18n/resources/fr.json';
+
 const translationHelper = <T>(lng: T) => ({
     translation: lng,
 });
 
 const resources = {
     en: translationHelper(en),
+
+    ar: translationHelper(ar),
+    de: translationHelper(de),
+    es: translationHelper(es),
+    fr: translationHelper(fr),
 } as const;
 
 export default resources;

src/screens/Settings.tsx

@@ -29,7 +29,7 @@ import DialogContentText from '@mui/material/DialogContentText';
 import TextField from '@mui/material/TextField';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import Slider from '@mui/material/Slider';
-import { DialogTitle, ListItemButton } from '@mui/material';
+import { DialogTitle, ListItemButton, MenuItem, Select } from '@mui/material';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import NavbarContext from 'components/context/NavbarContext';
 import DarkTheme from 'components/context/DarkTheme';
@@ -37,9 +37,11 @@ import useLocalStorage from 'util/useLocalStorage';
 import ListItemLink from 'components/util/ListItemLink';
 import SearchSettings from 'screens/settings/SearchSettings';
 import { useTranslation } from 'react-i18next';
+import LanguageIcon from '@mui/icons-material/Language';
+import { langCodeToName } from 'util/language';
 
 export default function Settings() {
-    const { t } = useTranslation();
+    const { t, i18n } = useTranslation();
 
     const { setTitle, setAction } = useContext(NavbarContext);
     useEffect(() => {
@@ -162,6 +164,25 @@ export default function Settings() {
                         <Switch edge="end" checked={useCache} onChange={() => setUseCache(!useCache)} />
                     </ListItemSecondaryAction>
                 </ListItem>
+                <ListItem>
+                    <ListItemIcon>
+                        <LanguageIcon />
+                    </ListItemIcon>
+                    <ListItemText primary={t('global.language.label.language')} />
+                    <ListItemSecondaryAction>
+                        <Select
+                            MenuProps={{ PaperProps: { style: { maxHeight: 150 } } }}
+                            value={i18n.language}
+                            onChange={({ target: { value: language } }) => i18n.changeLanguage(language)}
+                        >
+                            {Object.keys(i18n.services.resourceStore.data).map((language) => (
+                                <MenuItem key={language} value={language}>
+                                    {langCodeToName(language)}
+                                </MenuItem>
+                            ))}
+                        </Select>
+                    </ListItemSecondaryAction>
+                </ListItem>
                 <ListItem>
                     <ListItemIcon>
                         <DnsIcon />