2nd pass grouping of 1-account-many-statuses fav/boost

src/components/notification.jsx

@@ -39,16 +39,20 @@ const contentText = {
   mention: 'mentioned you in their post.',
   status: 'published a post.',
   reblog: 'boosted your post.',
+  'reblog+account': (count) => `boosted ${count} of your posts.`,
   reblog_reply: 'boosted your reply.',
   follow: 'followed you.',
   follow_request: 'requested to follow you.',
   favourite: 'favourited your post.',
+  'favourite+account': (count) => `favourited ${count} of your posts.`,
   favourite_reply: 'favourited your reply.',
   poll: 'A poll you have voted in or created has ended.',
   'poll-self': 'A poll you have created has ended.',
   'poll-voted': 'A poll you have voted in has ended.',
   update: 'A post you interacted with has been edited.',
   'favourite+reblog': 'boosted & favourited your post.',
+  'favourite+reblog+account': (count) =>
+    `boosted & favourited ${count} of your posts.`,
   'favourite+reblog_reply': 'boosted & favourited your reply.',
 };
 
@@ -90,12 +94,19 @@ function Notification({ notification, instance, reload }) {
     type === 'favourite' ||
     type === 'favourite+reblog'
   ) {
-    text =
-      contentText[isReplyToOthers ? `${type}_reply` : type] ||
-      contentText[type];
+    if (_statuses?.length > 1) {
+      text = contentText[`${type}+account`];
+    } else if (isReplyToOthers) {
+      text = contentText[`${type}_reply`];
     } else {
       text = contentText[type];
     }
+  } else {
+    text = contentText[type];
+  }
+  if (typeof text === 'function') {
+    text = text(_statuses?.length || _accounts?.length);
+  }
 
   if (type === 'mention' && !status) {
     // Could be deleted
@@ -206,7 +217,23 @@ function Notification({ notification, instance, reload }) {
             ))}
           </p>
         )}
-        {status && (
+        {_statuses?.length > 1 && (
+          <ul class="notification-group-statuses">
+            {_statuses.map((status) => (
+              <li key={status.id}>
+                <Link
+                  class={`status-link status-type-${type}`}
+                  to={
+                    instance ? `/${instance}/s/${status.id}` : `/s/${status.id}`
+                  }
+                >
+                  <Status status={status} size="s" />
+                </Link>
+              </li>
+            ))}
+          </ul>
+        )}
+        {status && (!_statuses?.length || _statuses?.length <= 1) && (
           <Link
             class={`status-link status-type-${type}`}
             to={

src/pages/notifications.css

@@ -92,6 +92,7 @@
   filter: saturate(0.25);
 }
 .notification .status-link:not(.status-type-mention) > .status {
+  font-size: calc(var(--text-size) * 0.9);
   max-height: 160px;
   overflow: hidden;
   /* fade out mask gradient bottom */
@@ -134,6 +135,40 @@
   margin-bottom: 8px;
 }
 
+.notification-group-statuses {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.notification-group-statuses > li {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  position: relative;
+  counter-increment: index;
+}
+.notification-group-statuses > li:before {
+  content: counter(index);
+  position: absolute;
+  left: 0;
+  font-size: 10px;
+  padding: 8px;
+  color: var(--text-insignificant-color);
+}
+.notification-group-statuses > li + li {
+  margin-top: 8px;
+}
+.notification .notification-group-statuses .status-link {
+  max-height: 80px;
+}
+.notification .notification-group-statuses .status-link .status {
+  mask-image: linear-gradient(
+    rgba(0, 0, 0, 1) 50px,
+    rgba(0, 0, 0, 0.5) 70px,
+    transparent 79px
+  );
+}
+
 #mentions-option {
   float: right;
   margin-top: 0.5em;

src/utils/group-notifications.jsx

@@ -37,7 +37,40 @@ function groupNotifications(notifications) {
       cleanNotifications[j++] = n;
     }
   }
-  return cleanNotifications;
+
+  // 2nd pass to group "favourite+reblog"-type notifications by account if _accounts.length <= 1
+  // This means one acount has favourited and reblogged the multiple statuses
+  // The grouped notification
+  // - type: "favourite+reblog+account"
+  // - _statuses: [status, status, ...]
+  const notificationsMap2 = {};
+  const cleanNotifications2 = [];
+  for (let i = 0, j = 0; i < cleanNotifications.length; i++) {
+    const notification = cleanNotifications[i];
+    const { account, _accounts, type, createdAt } = notification;
+    const date = new Date(createdAt).toLocaleDateString();
+    if (type === 'favourite+reblog' && account && _accounts.length === 1) {
+      const key = `${account?.id}-${type}-${date}`;
+      const mappedNotification = notificationsMap2[key];
+      if (mappedNotification) {
+        mappedNotification._statuses.push(notification.status);
+      } else {
+        let n = (notificationsMap2[key] = {
+          ...notification,
+          type,
+          _statuses: [notification.status],
+        });
+        cleanNotifications2[j++] = n;
+      }
+    } else {
+      cleanNotifications2[j++] = notification;
+    }
+  }
+
+  console.log({ notifications, cleanNotifications, cleanNotifications2 });
+
+  // return cleanNotifications;
+  return cleanNotifications2;
 }
 
 export default groupNotifications;