diff --git a/packages/pl-fe/src/components/statuses/status-info.tsx b/packages/pl-fe/src/components/statuses/status-info.tsx index 865ba3619..3594722d5 100644 --- a/packages/pl-fe/src/components/statuses/status-info.tsx +++ b/packages/pl-fe/src/components/statuses/status-info.tsx @@ -7,10 +7,11 @@ interface IStatusInfo { avatarSize: number; icon: React.ReactNode; text: React.ReactNode; + title?: string; } const StatusInfo = (props: IStatusInfo) => { - const { avatarSize, icon, text } = props; + const { avatarSize, icon, text, title } = props; const onClick = (event: React.MouseEvent) => { event.stopPropagation(); @@ -20,9 +21,10 @@ const StatusInfo = (props: IStatusInfo) => { {icon} diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx index d08a54c5c..0ce923484 100644 --- a/packages/pl-fe/src/features/notifications/components/notification.tsx +++ b/packages/pl-fe/src/features/notifications/components/notification.tsx @@ -27,6 +27,7 @@ import { NotificationType } from 'pl-fe/utils/notification'; import type { NotificationGroup } from 'pl-api'; import type { Account } from 'pl-fe/normalizers/account'; import type { Status as StatusEntity } from 'pl-fe/normalizers/status'; +import StatusInfo from 'pl-fe/components/statuses/status-info'; const notificationForScreenReader = (intl: IntlShape, message: string, timestamp: string) => { const output = [message]; @@ -427,7 +428,7 @@ const Notification: React.FC = (props) => { const targetName = notification.type === 'move' ? notification.target.acct : ''; - const message: React.ReactNode = account && typeof account === 'object' + const message: React.ReactNode = accounts.length ? buildMessage(intl, displayedType, accounts, targetName, instance.title, !!status) : null; @@ -435,7 +436,7 @@ const Notification: React.FC = (props) => { notificationForScreenReader( intl, intl.formatMessage(messages[displayedType], { - name: account && typeof account === 'object' ? account.acct : '', + name: accounts.length ? intl.formatList(accounts.map(account => account.acct), { type: 'conjunction' }) : '', targetName, }), notification.latest_page_notification_at!, @@ -453,26 +454,12 @@ const Notification: React.FC = (props) => {
-
- {renderIcon()} -
- -
- - {message} - +
+
{!['mention', 'status'].includes(notification.type) && ( -
+