Group mention+quote notification

Author: cheeaun

src/components/notification.jsx

@@ -502,6 +502,11 @@ function Notification({
             <Icon icon="rocket" size="xl" alt={type} class="reblog-icon" />
             <Icon icon="heart" size="xl" alt={type} class="favourite-icon" />
           </>
+        ) : type === 'mention+quote' ? (
+          <>
+            <Icon icon="comment" size="xl" alt={type} class="mention-icon" />
+            <Icon icon="quote" size="xl" alt={type} class="quote-icon" />
+          </>
         ) : (
           <Icon
             icon={NOTIFICATION_ICONS[type] || 'notification'}
@@ -526,7 +531,7 @@ function Notification({
             </mark>
           </>
         )} */}
-        {type !== 'mention' && type !== 'quote' && (
+        {type !== 'mention' && type !== 'quote' && type !== 'mention+quote' && (
           <>
             <p>{text}</p>
             {type === 'follow_request' && (

src/locales/en.po

@@ -51,7 +51,11 @@
     cursor: pointer;
   }
 }
-.notification-type:is(.notification-mention, .notification-quote) {
+.notification-type:is(
+    .notification-mention,
+    .notification-quote,
+    .notification-mention\+quote
+  ) {
   padding-top: 16px;
 }
 .only-mentions .notification:not(.notification-mention),
@@ -91,6 +95,12 @@
 .notification .favourite-icon {
   color: var(--favourite-color);
 }
+.notification .mention-icon {
+  color: var(--reply-to-color);
+}
+.notification .quote-icon {
+  color: var(--quote-color);
+}
 
 .notification .account-avatar-stack {
   position: relative;
@@ -142,12 +152,20 @@
   filter: saturate(0.25);
 }
 .notification
-  .status-link:not(.status-type-mention, .status-type-quote)
+  .status-link:not(
+    .status-type-mention,
+    .status-type-quote,
+    .status-type-mention\+quote
+  )
   > .status {
   font-size: calc(var(--text-size) * 0.9);
 }
 .notification
-  .status-link.truncated:not(.status-type-mention, .status-type-quote)
+  .status-link.truncated:not(
+    .status-type-mention,
+    .status-type-quote,
+    .status-type-mention\+quote
+  )
   > .status {
   /* fade out mask gradient bottom */
   mask-image: linear-gradient(
@@ -200,6 +218,20 @@
   border-color: var(--quote-color);
   box-shadow: 0 0 0 3px var(--quote-faded-color);
 }
+.notification .status-link.status-type-mention\+quote {
+  max-height: 320px;
+  filter: none;
+  background-color: var(--bg-color);
+  border-color: transparent;
+  background-image:
+    linear-gradient(var(--bg-color), var(--bg-color)),
+    linear-gradient(135deg, var(--reply-to-color), var(--quote-color));
+  background-origin: border-box;
+  background-clip: padding-box, border-box;
+  box-shadow:
+    1.5px 1.5px 0 1.5px var(--quote-faded-color),
+    -1.5px -1.5px 0 1.5px var(--reply-to-faded-color);
+}
 .notification:focus-visible .status-link,
 .notification .status-link:is(:hover, :focus) {
   background-color: var(--bg-blur-color);
@@ -214,6 +246,11 @@
   border-color: var(--quote-color);
   box-shadow: 0 0 5px var(--quote-color);
 }
+.notification .status-link.status-type-mention\+quote:is(:hover, :focus) {
+  box-shadow:
+    2.5px 2.5px 5px -2.5px var(--quote-color),
+    -2.5px -2.5px 5px -2.5px var(--reply-to-color);
+}
 .notification .status-link:active {
   filter: brightness(0.95);
 }

src/pages/notifications.css

@@ -11,7 +11,7 @@ const notificationTypeKeys = {
   update: ['status'],
 };
 
-const GROUP_TYPES = ['favourite', 'reblog', 'follow'];
+const GROUP_TYPES = ['favourite', 'reblog', 'follow', 'mention', 'quote'];
 const groupable = (type) => GROUP_TYPES.includes(type);
 
 export function fixNotifications(notifications) {
@@ -102,6 +102,9 @@ export function groupNotifications2(groupNotifications) {
     ) {
       virtualType = 'favourite+reblog';
     }
+    if (type === 'mention' || type === 'quote') {
+      virtualType = 'mention+quote';
+    }
     // const key = `${status?.id}-${virtualType}-${date}-${sameCount ? 1 : 0}`;
     const key = `${status?.id}-${virtualType}-${date}`;
     const mappedNotification = notificationsMap[key];