Fix: #795 通知のグルーピング時、リストの新着投稿通知が表示されない (#800)

app/javascript/mastodon/features/notifications_v2/components/notification_group.tsx

@@ -13,6 +13,7 @@ import { NotificationEmojiReaction } from './notification_emoji_reaction';
 import { NotificationFavourite } from './notification_favourite';
 import { NotificationFollow } from './notification_follow';
 import { NotificationFollowRequest } from './notification_follow_request';
+import { NotificationListStatus } from './notification_list_status';
 import { NotificationMention } from './notification_mention';
 import { NotificationModerationWarning } from './notification_moderation_warning';
 import { NotificationPoll } from './notification_poll';
@@ -132,6 +133,14 @@ export const NotificationGroup: React.FC<{
         <NotificationStatus unread={unread} notification={notificationGroup} />
       );
       break;
+    case 'list_status':
+      content = (
+        <NotificationListStatus
+          unread={unread}
+          notification={notificationGroup}
+        />
+      );
+      break;
     case 'update':
       content = (
         <NotificationUpdate unread={unread} notification={notificationGroup} />

app/javascript/mastodon/features/notifications_v2/components/notification_list_status.tsx

@@ -0,0 +1,58 @@
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import NotificationsActiveIcon from '@/material-icons/400-24px/notifications_active-fill.svg?react';
+import type { NotificationGroupListStatus } from 'mastodon/models/notification_group';
+
+import type { LabelRenderer } from './notification_group_with_status';
+import { NotificationWithStatus } from './notification_with_status';
+
+const createLabelRenderer = (
+  notification: NotificationGroupListStatus,
+): LabelRenderer => {
+  const renderer: LabelRenderer = (values) => {
+    const list = notification.list;
+    if (list) {
+      const listLink = (
+        <bdi>
+          <Link
+            className='notification__display-name'
+            href={`/lists/${list.id}`}
+            title={list.title}
+            to={`/lists/${list.id}`}
+          >
+            {list.title}
+          </Link>
+        </bdi>
+      );
+      values.listName = listLink;
+    }
+
+    return (
+      <FormattedMessage
+        id='notification.list_status'
+        defaultMessage='{name} post is added to {listName}'
+        values={values}
+      />
+    );
+  };
+  return renderer;
+};
+
+export const NotificationListStatus: React.FC<{
+  notification: NotificationGroupListStatus;
+  unread: boolean;
+}> = ({ notification, unread }) => (
+  <NotificationWithStatus
+    type='list_status'
+    icon={NotificationsActiveIcon}
+    iconId='notifications-active'
+    accountIds={notification.sampleAccountIds}
+    count={notification.notifications_count}
+    statusId={notification.statusId}
+    labelRenderer={createLabelRenderer(notification)}
+    unread={unread}
+    muted
+  />
+);