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 in oklch, 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,12 @@
   border-color: var(--quote-color);
   box-shadow: 0 0 5px var(--quote-color);
 }
+.notification .status-link.status-type-mention\+quote:is(:hover, :focus) {
+  border-color: transparent;
+  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

@@ -106,6 +106,23 @@ export function groupNotifications2(groupNotifications) {
     const key = `${status?.id}-${virtualType}-${date}`;
     const mappedNotification = notificationsMap[key];
     if (!groupable(type)) {
+      // Merge mention and quote if same status
+      // NOTES:
+      // - status.id is definitely the same
+      // - account is definitely the same too and will only be one
+      if ((type === 'mention' || type === 'quote') && status?.id) {
+        const otherGN = newGroupNotifications1.find(
+          (o) =>
+            ((type === 'quote' && o.type === 'mention') ||
+              (type === 'mention' && o.type === 'quote')) &&
+            o.status?.id === status.id,
+        );
+        if (otherGN) {
+          otherGN.type = 'mention+quote';
+          continue; // Skip below logic
+        }
+      }
+
       newGroupNotifications1.push(gn);
     } else if (mappedNotification) {
       // Merge sampleAccounts + merge _types
@@ -132,7 +149,7 @@ export function groupNotifications2(groupNotifications) {
       mappedNotification._notificationsCount.push(notificationsCount);
       mappedNotification._sampleAccountsCount.push(sampleAccounts?.length);
       mappedNotification._accounts = mappedNotification.sampleAccounts;
-      mappedNotification._groupKeys.push(groupKey);
+      if (groupKey) mappedNotification._groupKeys.push(groupKey);
     } else {
       const accounts = sampleAccounts.map((a) => ({
         ...a,