Add about dialog, with version and helpful links

resources/i18n/cs.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "Knihovna",
         "settings": "Nastavení",
-        "version": "Verze %{version}",
+        "version": "Verze",
         "theme": "Motiv",
         "personal": {
             "name": "Osobní",

resources/i18n/da.json

@@ -257,7 +257,7 @@
     "menu": {
         "library": "Bibliotek",
         "settings": "Indstillinger",
-        "version": "Version %{version}",
+        "version": "Version",
         "theme": "Tema",
         "personal": {
             "name": "Personligt",

resources/i18n/de.json

@@ -257,7 +257,7 @@
     "menu": {
         "library": "Bibliothek",
         "settings": "Einstellungen",
-        "version": "Version %{version}",
+        "version": "Version",
         "theme": "Design",
         "personal": {
             "name": "Persönlich",

resources/i18n/es.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "Biblioteca",
         "settings": "Ajustes",
-        "version": "Versión %{version}",
+        "version": "Versión",
         "theme": "Tema",
         "personal": {
             "name": "Personal",

resources/i18n/fr.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "Bibliothèque",
         "settings": "Paramètres",
-        "version": "Version%{version}",
+        "version": "Version",
         "theme": "Thème",
         "personal": {
             "name": "Paramètres personnels",

resources/i18n/it.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "Libreria",
         "settings": "Impostazioni",
-        "version": "Versione %{version}",
+        "version": "Versione",
         "theme": "Tema",
         "personal": {
             "name": "Personale",

resources/i18n/ja.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "ライブラリ",
         "settings": "設定",
-        "version": "バージョン %{version}",
+        "version": "バージョン",
         "theme": "テーマ",
         "personal": {
             "name": "個人設定",

resources/i18n/nl.json

@@ -222,7 +222,7 @@
     "menu": {
         "library": "Bibliotheek",
         "settings": "Instellingen",
-        "version": "Versie %{version}",
+        "version": "Versie",
         "theme": "Thema",
         "personal": {
             "name": "Persoonlijk",

resources/i18n/pl.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "Biblioteka",
         "settings": "Ustawienia",
-        "version": "Wersja %{version}",
+        "version": "Wersja",
         "theme": "Wygląd",
         "personal": {
             "name": "Personalizacja",

resources/i18n/pt.json

@@ -265,7 +265,7 @@
         "albumList": "Álbuns",
         "library": "Biblioteca",
         "settings": "Configurações",
-        "version": "Versão %{version}",
+        "version": "Versão",
         "theme": "Tema",
         "personal": {
             "name": "Pessoal",
@@ -276,6 +276,13 @@
             }
         }
     },
+    "about": {
+        "links": {
+            "homepage": "Website",
+            "source": "Código fonte",
+            "featureRequests": "Pedido de funcionalidade"
+        }
+    },
     "player": {
         "playListsText": "Fila de Execução",
         "openText": "Abrir",

resources/i18n/tr.json

@@ -257,7 +257,7 @@
     "menu": {
         "library": "Müzik kütüphanesi",
         "settings": "Ayarlar",
-        "version": "Sürüm %{version}",
+        "version": "Sürüm",
         "theme": "Tema",
         "personal": {
             "name": "Kişisel",

resources/i18n/zn.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "曲库",
         "settings": "设置",
-        "version": "版本 %{version}",
+        "version": "版本",
         "theme": "主题",
         "personal": {
             "name": "个性化",

ui/src/i18n/en.json

@@ -265,7 +265,7 @@
     "menu": {
         "library": "Library",
         "settings": "Settings",
-        "version": "Version %{version}",
+        "version": "Version",
         "theme": "Theme",
         "personal": {
             "name": "Personal",
@@ -275,7 +275,15 @@
                 "defaultView": "Default View"
             }
         },
-        "albumList": "Albums"
+        "albumList": "Albums",
+        "about": "About"
+    },
+    "about": {
+        "links": {
+            "homepage": "Home page",
+            "source": "Source code",
+            "featureRequests": "Feature requests"
+        }
     },
     "player": {
         "playListsText": "Play Queue",

ui/src/layout/AboutDialog.js

@@ -0,0 +1,146 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import Link from '@material-ui/core/Link'
+import Dialog from '@material-ui/core/Dialog'
+import MuiDialogTitle from '@material-ui/core/DialogTitle'
+import MuiDialogContent from '@material-ui/core/DialogContent'
+import IconButton from '@material-ui/core/IconButton'
+import CloseIcon from '@material-ui/icons/Close'
+import Typography from '@material-ui/core/Typography'
+import TableContainer from '@material-ui/core/TableContainer'
+import Table from '@material-ui/core/Table'
+import TableBody from '@material-ui/core/TableBody'
+import TableRow from '@material-ui/core/TableRow'
+import TableCell from '@material-ui/core/TableCell'
+import Paper from '@material-ui/core/Paper'
+import FavoriteBorderIcon from '@material-ui/icons/FavoriteBorder'
+import inflection from 'inflection'
+import { useTranslate } from 'react-admin'
+import config from '../config'
+
+const styles = (theme) => ({
+  root: {
+    margin: 0,
+    padding: theme.spacing(2),
+  },
+  closeButton: {
+    position: 'absolute',
+    right: theme.spacing(1),
+    top: theme.spacing(1),
+    color: theme.palette.grey[500],
+  },
+})
+
+const links = {
+  homepage: 'navidrome.org',
+  reddit: 'reddit.com/r/Navidrome',
+  twitter: 'twitter.com/navidrome',
+  discord: 'discord.gg/xh7j7yF',
+  source: 'github.com/deluan/navidrome',
+  featureRequests: 'github.com/deluan/navidrome/issues',
+}
+
+const DialogTitle = withStyles(styles)((props) => {
+  const { children, classes, onClose, ...other } = props
+  return (
+    <MuiDialogTitle disableTypography className={classes.root} {...other}>
+      <Typography variant="h5">{children}</Typography>
+      {onClose ? (
+        <IconButton
+          aria-label="close"
+          className={classes.closeButton}
+          onClick={onClose}
+        >
+          <CloseIcon />
+        </IconButton>
+      ) : null}
+    </MuiDialogTitle>
+  )
+})
+
+const DialogContent = withStyles((theme) => ({
+  root: {
+    padding: theme.spacing(2),
+  },
+}))(MuiDialogContent)
+
+const AboutDialog = ({ open, onClose }) => {
+  const translate = useTranslate()
+  return (
+    <Dialog
+      onClose={onClose}
+      onBackdropClick={onClose}
+      aria-labelledby="customized-dialog-title"
+      open={open}
+    >
+      <DialogTitle id="customized-dialog-title" onClose={onClose}>
+        Navidrome Music Server
+      </DialogTitle>
+      <DialogContent dividers>
+        <TableContainer component={Paper}>
+          <Table aria-label="song details" size="small">
+            <TableBody>
+              <TableRow>
+                <TableCell align="right" component="th" scope="row">
+                  {translate('menu.version')}:
+                </TableCell>
+                <TableCell align="left">{config.version}</TableCell>
+              </TableRow>
+              {Object.keys(links).map((key) => {
+                return (
+                  <TableRow key={key}>
+                    <TableCell align="right" component="th" scope="row">
+                      {translate(`about.links.${key}`, {
+                        _: inflection.humanize(inflection.underscore(key)),
+                      })}
+                      :
+                    </TableCell>
+                    <TableCell align="left">
+                      <Link
+                        href={`https://${links[key]}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                      >
+                        {links[key]}
+                      </Link>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+              <TableRow>
+                <TableCell align="right" component="th" scope="row">
+                  <Link
+                    href={'https://github.com/sponsors/deluan'}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    <IconButton size={'small'}>
+                      <FavoriteBorderIcon fontSize={'small'} />
+                    </IconButton>
+                  </Link>
+                </TableCell>
+                <TableCell align="left">
+                  <Link
+                    href={'https://ko-fi.com/deluan'}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    ko-fi.com/deluan
+                  </Link>
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+AboutDialog.propTypes = {
+  open: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+}
+
+export default AboutDialog

ui/src/layout/AppBar.js

@@ -1,40 +1,53 @@
 import React, { forwardRef } from 'react'
-import {
-  AppBar as RAAppBar,
-  MenuItemLink,
-  UserMenu,
-  useTranslate,
-} from 'react-admin'
-import { makeStyles } from '@material-ui/core'
+import { AppBar as RAAppBar, UserMenu, useTranslate } from 'react-admin'
+import { makeStyles, MenuItem, ListItemIcon } from '@material-ui/core'
 import InfoIcon from '@material-ui/icons/Info'
-import config from '../config'
+import AboutDialog from './AboutDialog'
 
 const useStyles = makeStyles((theme) => ({
-  menuItem: {
+  root: {
     color: theme.palette.text.secondary,
   },
+  active: {
+    color: theme.palette.text.primary,
+  },
+  icon: { minWidth: theme.spacing(5) },
 }))
 
-const VersionMenu = forwardRef((props, ref) => {
+const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
+  const classes = useStyles(rest)
   const translate = useTranslate()
-  const classes = useStyles()
+  const [open, setOpen] = React.useState(false)
+
+  const handleOpen = () => {
+    setOpen(true)
+  }
+  const handleClose = () => {
+    onClick && onClick()
+    setOpen(false)
+  }
+  const label = translate('menu.about')
   return (
-    <MenuItemLink
-      ref={ref}
-      to="#"
-      primaryText={translate('menu.version', {
-        version: config.version,
-      })}
-      leftIcon={<InfoIcon />}
-      className={classes.menuItem}
-      sidebarIsOpen={true}
-    />
+    <>
+      <MenuItem
+        ref={ref}
+        onClick={handleOpen}
+        className={classes.root}
+        activeClassName={classes.active}
+      >
+        <ListItemIcon className={classes.icon}>
+          <InfoIcon titleAccess={label} />
+        </ListItemIcon>
+        {label}
+      </MenuItem>
+      <AboutDialog onClose={handleClose} open={open} />
+    </>
   )
 })
 
 const CustomUserMenu = (props) => (
   <UserMenu {...props}>
-    <VersionMenu />
+    <AboutMenuItem />
   </UserMenu>
 )