Fix NavBar title translations

ui/src/album/AlbumList.js

@@ -67,7 +67,9 @@ const AlbumList = (props) => {
   return (
     <List
       {...props}
-      title={<Title subTitle={'Albums'} />}
+      title={
+        <Title subTitle={'resources.album.name'} args={{ smart_count: 2 }} />
+      }
       exporter={false}
       bulkActionButtons={false}
       actions={<AlbumListActions />}

ui/src/artist/ArtistList.js

@@ -25,7 +25,9 @@ const artistRowClick = (id) => {
 const ArtistList = (props) => (
   <List
     {...props}
-    title={<Title subTitle={'Artists'} />}
+    title={
+      <Title subTitle={'resources.artist.name'} args={{ smart_count: 2 }} />
+    }
     sort={{ field: 'name', order: 'ASC' }}
     exporter={false}
     bulkActionButtons={false}

ui/src/common/Title.js

@@ -1,13 +1,16 @@
 import React from 'react'
 import { useMediaQuery } from '@material-ui/core'
+import { useTranslate } from 'react-admin'
 
-const Title = ({ subTitle }) => {
+const Title = ({ subTitle, args }) => {
+  const translate = useTranslate()
   const isDesktop = useMediaQuery((theme) => theme.breakpoints.up('md'))
+  const text = translate(subTitle, { ...args, _: subTitle })
 
   if (isDesktop) {
-    return <span>Navidrome {subTitle ? ` - ${subTitle}` : ''}</span>
+    return <span>Navidrome {text ? ` - ${text}` : ''}</span>
   }
-  return <span>{subTitle ? subTitle : 'Navidrome'}</span>
+  return <span>{text ? text : 'Navidrome'}</span>
 }
 
 export default Title

ui/src/i18n/en.js

@@ -17,6 +17,7 @@ export default deepmerge(englishMessages, {
       },
     },
     album: {
+      name: 'Album |||| Albums',
       fields: {
         albumArtist: 'Album Artist',
         artist: 'Artist',
@@ -31,6 +32,18 @@ export default deepmerge(englishMessages, {
         shuffle: 'Shuffle',
       },
     },
+    artist: {
+      name: 'Artist |||| Artists',
+    },
+    user: {
+      name: 'User |||| Users',
+    },
+    player: {
+      name: 'Player |||| Players',
+    },
+    transcoding: {
+      name: 'Transcoding |||| Transcodings',
+    },
   },
   ra: {
     auth: {

ui/src/i18n/pt.js

@@ -92,6 +92,9 @@ export default deepmerge(portugueseMessages, {
       invalidChars: 'Somente use letras e numeros',
       passwordDoesNotMatch: 'Senha não confere',
     },
+    page: {
+      create: 'Criar %{name}',
+    },
   },
   menu: {
     library: 'Biblioteca',

ui/src/player/PlayerEdit.js

@@ -7,11 +7,14 @@ import {
   SimpleForm,
   SelectInput,
   ReferenceInput,
+  useTranslate,
 } from 'react-admin'
 import { Title } from '../common'
 
 const PlayerTitle = ({ record }) => {
-  return <Title subTitle={`Player ${record ? record.name : ''}`} />
+  const translate = useTranslate()
+  const resourceName = translate('resources.player.name', { smart_count: 1 })
+  return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} />
 }
 
 const PlayerEdit = (props) => (

ui/src/player/PlayerList.js

@@ -13,7 +13,13 @@ import { SimpleList, Title } from '../common'
 const PlayerList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return (
-    <List title={<Title subTitle={'Players'} />} exporter={false} {...props}>
+    <List
+      title={
+        <Title subTitle={'resources.player.name'} args={{ smart_count: 2 }} />
+      }
+      exporter={false}
+      {...props}
+    >
       {isXsmall ? (
         <SimpleList
           primaryText={(r) => r.client}

ui/src/song/SongList.js

@@ -36,7 +36,9 @@ const SongList = (props) => {
   return (
     <List
       {...props}
-      title={<Title subTitle={'Songs'} />}
+      title={
+        <Title subTitle={'resources.song.name'} args={{ smart_count: 2 }} />
+      }
       sort={{ field: 'title', order: 'ASC' }}
       exporter={false}
       bulkActionButtons={<SongBulkActions />}

ui/src/transcoding/TranscodingCreate.js

@@ -5,11 +5,19 @@ import {
   Create,
   required,
   SimpleForm,
+  useTranslate,
 } from 'react-admin'
 import { Title } from '../common'
 
-const TranscodingTitle = ({ record }) => {
-  return <Title subTitle={`Transcoding ${record ? record.name : ''}`} />
+const TranscodingTitle = () => {
+  const translate = useTranslate()
+  const resourceName = translate('resources.transcoding.name', {
+    smart_count: 1,
+  })
+  const title = translate('ra.page.create', {
+    name: `${resourceName}`,
+  })
+  return <Title subTitle={title} />
 }
 
 const TranscodingCreate = (props) => (

ui/src/transcoding/TranscodingEdit.js

@@ -1,9 +1,20 @@
 import React from 'react'
-import { TextInput, SelectInput, Edit, required, SimpleForm } from 'react-admin'
+import {
+  TextInput,
+  SelectInput,
+  Edit,
+  required,
+  SimpleForm,
+  useTranslate,
+} from 'react-admin'
 import { Title } from '../common'
 
 const TranscodingTitle = ({ record }) => {
-  return <Title subTitle={`Transcoding ${record ? record.name : ''}`} />
+  const translate = useTranslate()
+  const resourceName = translate('resources.transcoding.name', {
+    smart_count: 1,
+  })
+  return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} />
 }
 
 const TranscodingEdit = (props) => (

ui/src/transcoding/TranscodingList.js

@@ -7,7 +7,12 @@ const TranscodingList = (props) => {
   const isXsmall = useMediaQuery((theme) => theme.breakpoints.down('xs'))
   return (
     <List
-      title={<Title subTitle={'Transcodings'} />}
+      title={
+        <Title
+          subTitle={'resources.transcoding.name'}
+          args={{ smart_count: 2 }}
+        />
+      }
       exporter={false}
       {...props}
     >

ui/src/user/UserCreate.js

@@ -7,19 +7,27 @@ import {
   required,
   email,
   SimpleForm,
+  useTranslate,
 } from 'react-admin'
 import { Title } from '../common'
 
-const UserCreate = (props) => (
-  <Create title={<Title subTitle={'Create User'} />} {...props}>
-    <SimpleForm redirect="list">
-      <TextInput source="userName" validate={[required()]} />
-      <TextInput source="name" validate={[required()]} />
-      <TextInput source="email" validate={[required(), email()]} />
-      <PasswordInput source="password" validate={[required()]} />
-      <BooleanInput source="isAdmin" defaultValue={false} />
-    </SimpleForm>
-  </Create>
-)
+const UserCreate = (props) => {
+  const translate = useTranslate()
+  const resourceName = translate('resources.user.name', { smart_count: 1 })
+  const title = translate('ra.page.create', {
+    name: `${resourceName}`,
+  })
+  return (
+    <Create title={<Title subTitle={title} />} {...props}>
+      <SimpleForm redirect="list">
+        <TextInput source="userName" validate={[required()]} />
+        <TextInput source="name" validate={[required()]} />
+        <TextInput source="email" validate={[required(), email()]} />
+        <PasswordInput source="password" validate={[required()]} />
+        <BooleanInput source="isAdmin" defaultValue={false} />
+      </SimpleForm>
+    </Create>
+  )
+}
 
 export default UserCreate

ui/src/user/UserEdit.js

@@ -8,11 +8,14 @@ import {
   required,
   email,
   SimpleForm,
+  useTranslate,
 } from 'react-admin'
 import { Title } from '../common'
 
 const UserTitle = ({ record }) => {
-  return <Title subTitle={`User ${record ? record.name : ''}`} />
+  const translate = useTranslate()
+  const resourceName = translate('resources.user.name', { smart_count: 1 })
+  return <Title subTitle={`${resourceName} ${record ? record.name : ''}`} />
 }
 const UserEdit = (props) => (
   <Edit title={<UserTitle />} {...props}>

ui/src/user/UserList.js

@@ -24,7 +24,9 @@ const UserList = (props) => {
   return (
     <List
       {...props}
-      title={<Title subTitle={'Users'} />}
+      title={
+        <Title subTitle={'resources.user.name'} args={{ smart_count: 2 }} />
+      }
       sort={{ field: 'userName', order: 'ASC' }}
       exporter={false}
       filters={<UserFilter />}