Add account_warning notification

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

@@ -30,6 +30,7 @@ const messages = defineMessages({
   status: { id: 'notification.status', defaultMessage: '{name} just posted' },
   statusReference: { id: 'notification.status_reference', defaultMessage: '{name} refered' },
   update: { id: 'notification.update', defaultMessage: '{name} edited a post' },
+  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}' },
 });
@@ -443,6 +444,31 @@ class Notification extends ImmutablePureComponent {
     );
   }
 
+  renderWarning (notification) {
+    const { intl, unread } = this.props;
+    console.dir(notification);
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-warning focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.statusReference, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <div className='notification__favourite-icon-wrapper'>
+              <Icon id='exclamation-triangle' className='star-icon' fixedWidth />
+            </div>
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.warning' defaultMessage='You have been warned and "{action}" has been executed. Check your mailbox' values={{action: notification.getIn(['account_warning', 'action'])}} />
+            </span>
+          </div>
+
+          <div className='notification__warning-text'>
+            {notification.getIn(['account_warning', 'text'])}
+          </div>
+        </div>
+      </HotKeys>
+    );
+  }
+
   renderAdminSignUp (notification, account, link) {
     const { intl, unread } = this.props;
 
@@ -522,6 +548,8 @@ class Notification extends ImmutablePureComponent {
       return this.renderUpdate(notification, link);
     case 'poll':
       return this.renderPoll(notification, account);
+    case 'warning':
+      return this.renderWarning(notification);
     case 'admin.sign_up':
       return this.renderAdminSignUp(notification, account, link);
     case 'admin.report':

app/javascript/mastodon/locales/ja.json

@@ -439,6 +439,7 @@
   "notification.status": "{name}さんが投稿しました",
   "notification.status_reference": "{name}さんがあなたの投稿を参照しました",
   "notification.update": "{name}さんが投稿を編集しました",
+  "notification.warning": "あなたは警告を出され、「{action}」が実行されました。詳細はメールをご確認ください",
   "notifications.clear": "通知を消去",
   "notifications.clear_confirmation": "本当に通知を消去しますか？",
   "notifications.column_settings.admin.report": "新しい通報:",

app/javascript/mastodon/reducers/notifications.js

@@ -52,10 +52,11 @@ const notificationToMap = notification => ImmutableMap({
   id: notification.id,
   type: notification.type,
   account: notification.account.id,
-  emoji_reaction: ImmutableMap(notification.emoji_reaction),
   created_at: notification.created_at,
+  emoji_reaction: ImmutableMap(notification.emoji_reaction),
   status: notification.status ? notification.status.id : null,
   report: notification.report ? fromJS(notification.report) : null,
+  account_warning: notification.account_warning ? ImmutableMap(notification.account_warning) : null,
 });
 
 const normalizeNotification = (state, notification, usePendingItems) => {

app/javascript/styles/mastodon/components.scss

@@ -1848,6 +1848,11 @@ a.account__display-name {
   }
 }
 
+.notification__warning-text {
+  padding: 16px 16px 16px 48px;
+  color: $darker-text-color;
+}
+
 .notification__display-name {
   color: inherit;
   font-weight: 500;