From ee2c38fcb8141584644928ece32461768a59fba4 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Fri, 30 Aug 2024 11:42:48 +0200
Subject: [PATCH] [Glitch] Change background color of notifications on private
 messages

Port 3ddeaca863999270719752aff49d55d73ae5f412 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../components/notification_group_with_status.tsx     | 11 +++++++++--
 app/javascript/flavours/glitch/styles/components.scss |  3 ++-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
index 233caaf65e..99045fa53b 100644
--- a/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
+++ b/app/javascript/flavours/glitch/features/notifications_v2/components/notification_group_with_status.tsx
@@ -9,7 +9,7 @@ import { navigateToStatus } from 'flavours/glitch/actions/statuses';
 import type { IconProp } from 'flavours/glitch/components/icon';
 import { Icon } from 'flavours/glitch/components/icon';
 import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
-import { useAppDispatch } from 'flavours/glitch/store';
+import { useAppSelector, useAppDispatch } from 'flavours/glitch/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/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 662607a7ca..ca841b5e47 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -1795,7 +1795,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 {