Add links to documentation on how to contribute with themes and translations

ui/src/personal/Personal.js

@@ -10,6 +10,7 @@ import {
   useLocale,
 } from 'react-admin'
 import { makeStyles } from '@material-ui/core/styles'
+import HelpOutlineIcon from '@material-ui/icons/HelpOutline'
 import { changeTheme } from './actions'
 import themes from '../themes'
 import i18n from '../i18n'
@@ -18,6 +19,20 @@ const useStyles = makeStyles({
   root: { marginTop: '1em' },
 })
 
+const helpKey = '_help'
+
+function openInNewTab(url) {
+  const win = window.open(url, '_blank')
+  win.focus()
+}
+
+const HelpMsg = ({ caption }) => (
+  <>
+    <HelpOutlineIcon />
+    &nbsp;&nbsp; {caption}
+  </>
+)
+
 const SelectLanguage = (props) => {
   const translate = useTranslate()
   const locale = useLocale()
@@ -25,6 +40,10 @@ const SelectLanguage = (props) => {
   const langChoices = Object.keys(i18n).map((key) => {
     return { id: key, name: i18n[key].languageName }
   })
+  langChoices.push({
+    id: helpKey,
+    name: <HelpMsg caption={'Help to translate'} />,
+  })
   return (
     <SelectInput
       {...props}
@@ -33,6 +52,12 @@ const SelectLanguage = (props) => {
       defaultValue={locale}
       choices={langChoices}
       onChange={(event) => {
+        if (event.target.value === helpKey) {
+          openInNewTab(
+            'https://www.navidrome.org/docs/developers/translations/'
+          )
+          return
+        }
         setLocale(event.target.value)
         localStorage.setItem('locale', event.target.value)
       }}
@@ -47,6 +72,10 @@ const SelectTheme = (props) => {
   const themeChoices = Object.keys(themes).map((key) => {
     return { id: key, name: themes[key].themeName }
   })
+  themeChoices.push({
+    id: helpKey,
+    name: <HelpMsg caption={'Create your own'} />,
+  })
   return (
     <SelectInput
       {...props}
@@ -55,11 +84,18 @@ const SelectTheme = (props) => {
       defaultValue={currentTheme}
       choices={themeChoices}
       onChange={(event) => {
+        if (event.target.value === helpKey) {
+          openInNewTab(
+            'https://www.navidrome.org/docs/developers/creating-themes/'
+          )
+          return
+        }
         dispatch(changeTheme(event.target.value))
       }}
     />
   )
 }
+
 const Personal = () => {
   const translate = useTranslate()
   const classes = useStyles()