Merge remote-tracking branch 'parent/main' into upstream-20240326

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -29,6 +29,7 @@ import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
 import FollowRequestContainer from '../containers/follow_request_container';
 
+import { RelationshipsSeveranceEvent } from './relationships_severance_event';
 import Report from './report';
 
 const messages = defineMessages({
@@ -45,6 +46,7 @@ const messages = defineMessages({
   warning: { id: 'notification.warning', defaultMessage: 'You have been warned and "{action}" has been executed. Check your mailbox' },
   adminSignUp: { id: 'notification.admin.sign_up', defaultMessage: '{name} signed up' },
   adminReport: { id: 'notification.admin.report', defaultMessage: '{name} reported {target}' },
+  relationshipsSevered: { id: 'notification.relationships_severance_event', defaultMessage: 'Lost connections with {name}' },
 });
 
 const notificationForScreenReader = (intl, message, timestamp) => {
@@ -495,6 +497,29 @@ class Notification extends ImmutablePureComponent {
       </HotKeys>
     );
   }
+  
+  renderRelationshipsSevered (notification) {
+    const { intl, unread, hidden } = this.props;
+    const event = notification.get('event');
+
+    if (!event) {
+      return null;
+    }
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-severed-relationships focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.relationshipsSevered, { name: notification.getIn(['event', 'target_name']) }), notification.get('created_at'))}>
+          <RelationshipsSeveranceEvent
+            type={event.get('type')}
+            target={event.get('target_name')}
+            followersCount={event.get('followers_count')}
+            followingCount={event.get('following_count')}
+            hidden={hidden}
+          />
+        </div>
+      </HotKeys>
+    );
+  }
 
   renderAdminSignUp (notification, account, link) {
     const { intl, unread } = this.props;
@@ -577,6 +602,8 @@ class Notification extends ImmutablePureComponent {
       return this.renderPoll(notification, account);
     case 'warning':
       return this.renderWarning(notification);
+    case 'severed_relationships':
+      return this.renderRelationshipsSevered(notification);
     case 'admin.sign_up':
       return this.renderAdminSignUp(notification, account, link);
     case 'admin.report':