Better notification title

3 files changed, 6 insertions, 6 deletions

diff --git a/modern/src/settings/DevicePage.js b/modern/src/settings/DevicePage.js
index bf79109b..b54c7c81 100644
--- a/modern/src/settings/DevicePage.js
+++ b/modern/src/settings/DevicePage.js
@@ -17,7 +17,6 @@ import EditAttributesAccordion from './components/EditAttributesAccordion';
 import SelectField from '../common/components/SelectField';
 import deviceCategories from '../common/util/deviceCategories';
 import LinkField from '../common/components/LinkField';
-import { prefixString } from '../common/util/stringUtils';
 import { useTranslation } from '../common/components/LocalizationProvider';
 import useDeviceAttributes from '../common/attributes/useDeviceAttributes';
 import { useAdministrator } from '../common/util/permissions';
@@ -25,6 +24,7 @@ import SettingsMenu from './components/SettingsMenu';
 import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes';
 import useFeatures from '../common/util/useFeatures';
 import { useCatch } from '../reactHelper';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -185,7 +185,7 @@ const DevicePage = () => {
                   baseId={item.id}
                   keyBase="deviceId"
                   keyLink="notificationId"
-                  titleGetter={(it) => t(prefixString('event', it.type))}
+                  titleGetter={(it) => formatNotificationTitle(t, it)}
                   label={t('sharedNotifications')}
                 />
                 {!features.disableDrivers && (
diff --git a/modern/src/settings/GroupPage.js b/modern/src/settings/GroupPage.js
index b4b0a92a..0bf66c69 100644
--- a/modern/src/settings/GroupPage.js
+++ b/modern/src/settings/GroupPage.js
@@ -14,8 +14,8 @@ import { useTranslation } from '../common/components/LocalizationProvider';
 import SettingsMenu from './components/SettingsMenu';
 import useCommonDeviceAttributes from '../common/attributes/useCommonDeviceAttributes';
 import useGroupAttributes from '../common/attributes/useGroupAttributes';
-import { prefixString } from '../common/util/stringUtils';
 import useFeatures from '../common/util/useFeatures';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -106,7 +106,7 @@ const GroupPage = () => {
                   baseId={item.id}
                   keyBase="groupId"
                   keyLink="notificationId"
-                  titleGetter={(it) => t(prefixString('event', it.type))}
+                  titleGetter={(it) => formatNotificationTitle(t, it)}
                   label={t('sharedNotifications')}
                 />
                 {!features.disableDrivers && (
diff --git a/modern/src/settings/UserPage.js b/modern/src/settings/UserPage.js
index a91dfe71..65a18be1 100644
--- a/modern/src/settings/UserPage.js
+++ b/modern/src/settings/UserPage.js
@@ -34,9 +34,9 @@ import SelectField from '../common/components/SelectField';
 import SettingsMenu from './components/SettingsMenu';
 import useCommonUserAttributes from '../common/attributes/useCommonUserAttributes';
 import { useAdministrator, useRestriction, useManager } from '../common/util/permissions';
-import { prefixString } from '../common/util/stringUtils';
 import useQuery from '../common/util/useQuery';
 import { useCatch } from '../reactHelper';
+import { formatNotificationTitle } from '../common/util/formatter';
 
 const useStyles = makeStyles((theme) => ({
   details: {
@@ -413,7 +413,7 @@ const UserPage = () => {
                   baseId={item.id}
                   keyBase="userId"
                   keyLink="notificationId"
-                  titleGetter={(it) => `${t(prefixString('event', it.type))} (${it.id})`}
+                  titleGetter={(it) => formatNotificationTitle(t, it, true)}
                   label={t('sharedNotifications')}
                 />
                 <LinkField