Merge remote-tracking branch 'upstream/main'

app/javascript/flavours/glitch/features/notifications/components/filtered_notifications_banner.jsx

@@ -41,7 +41,8 @@ export const FilteredNotificationsBanner = () => {
       </div>
 
       <div className='filtered-notifications-banner__badge'>
-        {toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}
+        <div className='filtered-notifications-banner__badge__badge'>{toCappedNumber(policy.getIn(['summary', 'pending_notifications_count']))}</div>
+        <FormattedMessage id='filtered_notifications_banner.private_mentions' defaultMessage='{count, plural, one {private mention} other {private mentions}}' values={{ count: policy.getIn(['summary', 'pending_notifications_count']) }} />
       </div>
     </Link>
   );

app/javascript/flavours/glitch/features/notifications/components/notification.jsx

@@ -22,12 +22,14 @@ import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 import FollowRequestContainer from '../containers/follow_request_container';
 import NotificationOverlayContainer from '../containers/overlay_container';
 
+import { RelationshipsSeveranceEvent } from './relationships_severance_event';
 import Report from './report';
 
 const messages = defineMessages({
   follow: { id: 'notification.follow', defaultMessage: '{name} followed you' },
   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) => {
@@ -328,6 +330,29 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
+  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;
 
@@ -423,6 +448,8 @@ class Notification extends ImmutablePureComponent {
       return this.renderUpdate(notification);
     case 'poll':
       return this.renderPoll(notification);
+    case 'severed_relationships':
+      return this.renderRelationshipsSevered(notification);
     case 'admin.sign_up':
       return this.renderAdminSignUp(notification, account, link);
     case 'admin.report':

app/javascript/flavours/glitch/features/notifications/components/notification_request.jsx

@@ -7,8 +7,8 @@ import { Link } from 'react-router-dom';
 
 import { useSelector, useDispatch } from 'react-redux';
 
+import DeleteIcon from '@/material-icons/400-24px/delete.svg?react';
 import DoneIcon from '@/material-icons/400-24px/done.svg?react';
-import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
 import { acceptNotificationRequest, dismissNotificationRequest } from 'flavours/glitch/actions/notifications';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { IconButton } from 'flavours/glitch/components/icon_button';
@@ -51,7 +51,7 @@ export const NotificationRequest = ({ id, accountId, notificationsCount }) => {
       </Link>
 
       <div className='notification-request__actions'>
-        <IconButton iconComponent={VolumeOffIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
+        <IconButton iconComponent={DeleteIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
         <IconButton iconComponent={DoneIcon} onClick={handleAccept} title={intl.formatMessage(messages.accept)} />
       </div>
     </div>

app/javascript/flavours/glitch/features/notifications/components/relationships_severance_event.jsx

@@ -0,0 +1,45 @@
+import PropTypes from 'prop-types';
+
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import HeartBrokenIcon from '@/material-icons/400-24px/heart_broken-fill.svg?react';
+import { Icon }  from 'flavours/glitch/components/icon';
+import { domain } from 'flavours/glitch/initial_state';
+
+// This needs to be kept in sync with app/models/relationships_severance_event.rb
+const messages = defineMessages({
+  account_suspension: { id: 'notification.relationships_severance_event.account_suspension', defaultMessage: 'An admin from {from} has suspended {target}, which means you can no longer receive updates from them or interact with them.' },
+  domain_block: { id: 'notification.relationships_severance_event.domain_block', defaultMessage: 'An admin from {from} has blocked {target}, including {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
+  user_domain_block: { id: 'notification.relationships_severance_event.user_domain_block', defaultMessage: 'You have blocked {target}, removing {followersCount} of your followers and {followingCount, plural, one {# account} other {# accounts}} you follow.' },
+});
+
+export const RelationshipsSeveranceEvent = ({ type, target, followingCount, followersCount, hidden }) => {
+  const intl = useIntl();
+
+  if (hidden) {
+    return null;
+  }
+
+  return (
+    <a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='notification__relationships-severance-event'>
+      <Icon id='heart_broken' icon={HeartBrokenIcon} />
+
+      <div className='notification__relationships-severance-event__content'>
+        <p>{intl.formatMessage(messages[type], { from: <strong>{domain}</strong>, target: <strong>{target}</strong>, followingCount, followersCount })}</p>
+        <span className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></span>
+      </div>
+    </a>
+  );
+};
+
+RelationshipsSeveranceEvent.propTypes = {
+  type: PropTypes.oneOf([
+    'account_suspension',
+    'domain_block',
+    'user_domain_block',
+  ]).isRequired,
+  target: PropTypes.string.isRequired,
+  followersCount: PropTypes.number.isRequired,
+  followingCount: PropTypes.number.isRequired,
+  hidden: PropTypes.bool,
+};