From 212887214c823c72d90bef3501d75c38acb9f118 Mon Sep 17 00:00:00 2001
From: Kendall Garner <17521368+kgarner7@users.noreply.github.com>
Date: Sun, 16 Mar 2025 23:39:19 +0000
Subject: [PATCH] fix(ui): minor icon inconsistencies and "no missing files"
 translation (#3837)

* chore(ui): Fix minor inconsistencies

1. The icons in the user menu are a mix of MUI and react-icons. Move them all to react-icons, and use a standard size (24px)
2. On missing files page, provide a custom Empty component that just removes 'yet'

* use RA's builtin support for custom empty message

Signed-off-by: Deluan <deluan@navidrome.org>

---------

Signed-off-by: Deluan <deluan@navidrome.org>
Co-authored-by: Deluan <deluan@navidrome.org>
---
 resources/i18n/pt.json              |  1 +
 ui/src/i18n/en.json                 |  1 +
 ui/src/layout/AppBar.jsx            | 14 +++++++-------
 ui/src/layout/PersonalMenu.jsx      |  4 ++--
 ui/src/missing/MissingFilesList.jsx |  2 +-
 ui/src/transcoding/index.js         |  4 ++--
 6 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/resources/i18n/pt.json b/resources/i18n/pt.json
index 6a45ccfde..c3c65ca57 100644
--- a/resources/i18n/pt.json
+++ b/resources/i18n/pt.json
@@ -229,6 +229,7 @@
     },
     "missing": {
       "name": "Arquivo ausente |||| Arquivos ausentes",
+      "empty": "Nenhum arquivo ausente",
       "fields": {
         "path": "Caminho",
         "size": "Tamanho",
diff --git a/ui/src/i18n/en.json b/ui/src/i18n/en.json
index 476786640..cd377932c 100644
--- a/ui/src/i18n/en.json
+++ b/ui/src/i18n/en.json
@@ -231,6 +231,7 @@
     },
     "missing": {
       "name": "Missing File|||| Missing Files",
+      "empty": "No Missing Files",
       "fields": {
         "path": "Path",
         "size": "Size",
diff --git a/ui/src/layout/AppBar.jsx b/ui/src/layout/AppBar.jsx
index 943119fd5..a8c36cd14 100644
--- a/ui/src/layout/AppBar.jsx
+++ b/ui/src/layout/AppBar.jsx
@@ -6,12 +6,10 @@ import {
   usePermissions,
   getResources,
 } from 'react-admin'
+import { MdInfo, MdPerson, MdSupervisorAccount } from 'react-icons/md'
 import { useSelector } from 'react-redux'
 import { makeStyles, MenuItem, ListItemIcon, Divider } from '@material-ui/core'
 import ViewListIcon from '@material-ui/icons/ViewList'
-import InfoIcon from '@material-ui/icons/Info'
-import PersonIcon from '@material-ui/icons/Person'
-import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount'
 import { Dialogs } from '../dialogs/Dialogs'
 import { AboutDialog } from '../dialogs'
 import PersonalMenu from './PersonalMenu'
@@ -51,7 +49,7 @@ const AboutMenuItem = forwardRef(({ onClick, ...rest }, ref) => {
     <>
       <MenuItem ref={ref} onClick={handleOpen} className={classes.root}>
         <ListItemIcon className={classes.icon}>
-          <InfoIcon titleAccess={label} />
+          <MdInfo titleAccess={label} size={24} />
         </ListItemIcon>
         {label}
       </MenuItem>
@@ -86,9 +84,9 @@ const CustomUserMenu = ({ onClick, ...rest }) => {
       if (!config.enableUserEditing) {
         return null
       }
-      userResource.icon = PersonIcon
+      userResource.icon = MdPerson
     } else {
-      userResource.icon = SupervisorAccountIcon
+      userResource.icon = MdSupervisorAccount
     }
     return renderSettingsMenuItemLink(
       userResource,
@@ -109,7 +107,9 @@ const CustomUserMenu = ({ onClick, ...rest }) => {
         to={link}
         primaryText={label}
         leftIcon={
-          (resource.icon && createElement(resource.icon)) || <ViewListIcon />
+          (resource.icon && createElement(resource.icon, { size: 24 })) || (
+            <ViewListIcon />
+          )
         }
         onClick={onClick}
         sidebarIsOpen={true}
diff --git a/ui/src/layout/PersonalMenu.jsx b/ui/src/layout/PersonalMenu.jsx
index f97985c98..12f8beeb1 100644
--- a/ui/src/layout/PersonalMenu.jsx
+++ b/ui/src/layout/PersonalMenu.jsx
@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react'
 import { MenuItemLink, useTranslate } from 'react-admin'
+import { MdTune } from 'react-icons/md'
 import { makeStyles } from '@material-ui/core'
-import TuneIcon from '@material-ui/icons/Tune'
 
 const useStyles = makeStyles((theme) => ({
   menuItem: {
@@ -17,7 +17,7 @@ const PersonalMenu = forwardRef(({ onClick, sidebarIsOpen, dense }, ref) => {
       ref={ref}
       to="/personal"
       primaryText={translate('menu.personal.name')}
-      leftIcon={<TuneIcon />}
+      leftIcon={<MdTune size={24} />}
       onClick={onClick}
       className={classes.menuItem}
       sidebarIsOpen={sidebarIsOpen}
diff --git a/ui/src/missing/MissingFilesList.jsx b/ui/src/missing/MissingFilesList.jsx
index c7703ea0a..8f73023fa 100644
--- a/ui/src/missing/MissingFilesList.jsx
+++ b/ui/src/missing/MissingFilesList.jsx
@@ -1,4 +1,4 @@
-import { List, SizeField } from '../common/index.js'
+import { List, SizeField } from '../common/index'
 import {
   Datagrid,
   DateField,
diff --git a/ui/src/transcoding/index.js b/ui/src/transcoding/index.js
index cb3491920..0bff293b3 100644
--- a/ui/src/transcoding/index.js
+++ b/ui/src/transcoding/index.js
@@ -1,4 +1,4 @@
-import TransformIcon from '@material-ui/icons/Transform'
+import { MdTransform } from 'react-icons/md'
 import TranscodingList from './TranscodingList'
 import TranscodingEdit from './TranscodingEdit'
 import TranscodingCreate from './TranscodingCreate'
@@ -10,5 +10,5 @@ export default {
   edit: config.enableTranscodingConfig && TranscodingEdit,
   create: config.enableTranscodingConfig && TranscodingCreate,
   show: !config.enableTranscodingConfig && TranscodingShow,
-  icon: TransformIcon,
+  icon: MdTransform,
 }