diff --git a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx index 343a9bc4c1..91f8ae2d40 100644 --- a/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx +++ b/app/javascript/mastodon/features/notifications_v2/components/notification_group_with_status.tsx @@ -9,7 +9,7 @@ import { navigateToStatus } from 'mastodon/actions/statuses'; import type { IconProp } from 'mastodon/components/icon'; import { Icon } from 'mastodon/components/icon'; import { RelativeTimestamp } from 'mastodon/components/relative_timestamp'; -import { useAppDispatch } from 'mastodon/store'; +import { useAppSelector, useAppDispatch } from 'mastodon/store'; import { AvatarGroup } from './avatar_group'; import { DisplayedName } from './displayed_name'; @@ -60,6 +60,10 @@ export const NotificationGroupWithStatus: React.FC<{ [labelRenderer, accountIds, count, labelSeeMoreHref], ); + const isPrivateMention = useAppSelector( + (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct', + ); + const handlers = useMemo( () => ({ open: () => { @@ -79,7 +83,10 @@ export const NotificationGroupWithStatus: React.FC<{ role='button' className={classNames( `notification-group focusable notification-group--${type}`, - { 'notification-group--unread': unread }, + { + 'notification-group--unread': unread, + 'notification-group--direct': isPrivateMention, + }, )} tabIndex={0} > diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss index 0b0cbbfa84..208cdd6768 100644 --- a/app/javascript/styles/mastodon/components.scss +++ b/app/javascript/styles/mastodon/components.scss @@ -1626,7 +1626,8 @@ body > [data-popper-placement] { } .status__wrapper-direct, -.notification-ungrouped--direct { +.notification-ungrouped--direct, +.notification-group--direct { background: rgba($ui-highlight-color, 0.05); &:focus {