Add Language Selector to Personal settings

ui/src/i18n/en.js

@@ -19,6 +19,7 @@ export default deepmerge(englishMessages, {
     album: {
       fields: {
         albumArtist: 'Album Artist',
+        artist: 'Artist',
         duration: 'Time',
         songCount: 'Songs',
         playCount: 'Plays'
@@ -51,7 +52,8 @@ export default deepmerge(englishMessages, {
     personal: {
       name: 'Personal',
       options: {
-        theme: 'Theme'
+        theme: 'Theme',
+        language: 'Language'
       }
     }
   },

ui/src/i18n/pt.js

@@ -88,7 +88,8 @@ export default deepmerge.all([
       personal: {
         name: 'Pessoal',
         options: {
-          theme: 'Tema'
+          theme: 'Tema',
+          language: 'Língua'
         }
       }
     },

ui/src/personal/Personal.js

@@ -1,29 +1,54 @@
 import React from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { Card } from '@material-ui/core'
-import { Title, SimpleForm, SelectInput, useTranslate } from 'react-admin'
+import {
+  Title,
+  SimpleForm,
+  SelectInput,
+  useTranslate,
+  useSetLocale,
+  useLocale
+} from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
 import { changeTheme } from './actions'
 import themes from '../themes'
+import i18n from '../i18n'
 
 const useStyles = makeStyles({
   root: { marginTop: '1em' }
 })
 
-const Personal = () => {
+const SelectLanguage = (props) => {
+  const translate = useTranslate()
+  const locale = useLocale()
+  const setLocale = useSetLocale()
+  const langChoices = Object.keys(i18n).map((key) => {
+    return { id: key, name: i18n[key].languageName }
+  })
+  return (
+    <SelectInput
+      {...props}
+      source="lamguage"
+      label={translate('menu.personal.options.language')}
+      defaultValue={locale}
+      choices={langChoices}
+      onChange={(event) => {
+        setLocale(event.target.value)
+      }}
+    />
+  )
+}
+
+const SelectTheme = (props) => {
   const translate = useTranslate()
-  const classes = useStyles()
-  const currentTheme = useSelector((state) => state.theme)
   const dispatch = useDispatch()
+  const currentTheme = useSelector((state) => state.theme)
   const themeChoices = Object.keys(themes).map((key) => {
     return { id: key, name: themes[key].themeName }
   })
-
   return (
-    <Card className={classes.root}>
-      <Title title={'Navidrome - ' + translate('menu.personal.name')} />
-      <SimpleForm toolbar={null}>
     <SelectInput
+      {...props}
       source="theme"
       label={translate('menu.personal.options.theme')}
       defaultValue={currentTheme}
@@ -32,6 +57,18 @@ const Personal = () => {
         dispatch(changeTheme(event.target.value))
       }}
     />
+  )
+}
+const Personal = () => {
+  const translate = useTranslate()
+  const classes = useStyles()
+
+  return (
+    <Card className={classes.root}>
+      <Title title={'Navidrome - ' + translate('menu.personal.name')} />
+      <SimpleForm toolbar={null}>
+        <SelectTheme />
+        <SelectLanguage />
       </SimpleForm>
     </Card>
   )