Distinct both implementation of grouped notifications

src/components/notification.jsx

@@ -147,9 +147,11 @@ function Notification({
     report,
     event,
     moderation_warning,
+    // Client-side grouped notification
+    _ids,
     _accounts,
     _statuses,
-    // Grouped notification
+    // Server-side grouped notification
     sampleAccounts,
     notificationsCount,
   } = notification;
@@ -266,7 +268,7 @@ function Notification({
   return (
     <div
       class={`notification notification-${type}`}
-      data-notification-id={id}
+      data-notification-id={_ids || id}
       tabIndex="0"
     >
       <div

src/pages/home.jsx

@@ -177,7 +177,7 @@ function NotificationsMenu({ anchorRef, state, onClose }) {
               .slice(0, NOTIFICATIONS_DISPLAY_LIMIT)
               .map((notification) => (
                 <Notification
-                  key={notification.ids || notification.id}
+                  key={notification._ids || notification.id}
                   instance={instance}
                   notification={notification}
                   disableContextMenu

src/pages/notifications.jsx

@@ -716,12 +716,12 @@ function Notifications({ columnMode }) {
                         hideTime: true,
                       });
                 return (
-                  <Fragment key={notification.ids || notification.id}>
+                  <Fragment key={notification._ids || notification.id}>
                     {differentDay && <h2 class="timeline-header">{heading}</h2>}
                     <Notification
                       instance={instance}
                       notification={notification}
-                      key={notification.ids || notification.id}
+                      key={notification._ids || notification.id}
                     />
                   </Fragment>
                 );

src/utils/group-notifications.jsx

@@ -99,12 +99,12 @@ export function groupNotifications2(groupNotifications) {
       const mappedNotification = notificationsMap2[key];
       if (mappedNotification) {
         mappedNotification._statuses.push(gn.status);
-        mappedNotification.ids += `-${gn.id}`;
+        mappedNotification._ids += `-${gn.id}`;
       } else {
         let n = (notificationsMap2[key] = {
-          ids: gn.id,
           ...gn,
           type,
+          _ids: gn.id,
           _statuses: [gn.status],
         });
         newGroupNotifications2.push(n);
@@ -145,18 +145,18 @@ export default function groupNotifications(notifications) {
       if (mappedAccount) {
         mappedAccount._types.push(type);
         mappedAccount._types.sort().reverse();
-        mappedNotification.ids += `-${id}`;
+        mappedNotification._ids += `-${id}`;
       } else {
         account._types = [type];
         mappedNotification._accounts.push(account);
-        mappedNotification.ids += `-${id}`;
+        mappedNotification._ids += `-${id}`;
       }
     } else {
       if (account) account._types = [type];
       let n = (notificationsMap[key] = {
-        ids: id,
         ...notification,
         type: virtualType,
+        _ids: id,
         _accounts: account ? [account] : [],
       });
       cleanNotifications[j++] = n;
@@ -179,12 +179,12 @@ export default function groupNotifications(notifications) {
       const mappedNotification = notificationsMap2[key];
       if (mappedNotification) {
         mappedNotification._statuses.push(notification.status);
-        mappedNotification.ids += `-${id}`;
+        mappedNotification._ids += `-${id}`;
       } else {
         let n = (notificationsMap2[key] = {
-          ids: id,
           ...notification,
           type,
+          _ids: id,
           _statuses: [notification.status],
         });
         cleanNotifications2[j++] = n;