Merge remote-tracking branch 'upstream/main'

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

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { HotKeys } from 'react-hotkeys';
-
-import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { Permalink } from 'flavours/glitch/components/permalink';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
-
-import Report from './report';
-
-class AdminReport extends ImmutablePureComponent {
-
-  static propTypes = {
-    hidden: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    report: ImmutablePropTypes.map.isRequired,
-    ...WithRouterPropTypes,
-  };
-
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
-  render () {
-    const { account, notification, unread, report } = this.props;
-
-    if (!report) {
-      return null;
-    }
-
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
-    const targetAccount = report.get('target_account');
-    const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
-    const targetLink = <bdi><Permalink className='notification__display-name' href={targetAccount.get('url')} title={targetAccount.get('acct')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
-
-    return (
-      <HotKeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0}>
-          <div className='notification__message'>
-            <Icon id='flag' icon={FlagIcon} />
-
-            <span title={notification.get('created_at')}>
-              <FormattedMessage id='notification.admin.report' defaultMessage='{name} reported {target}' values={{ name: link, target: targetLink }} />
-            </span>
-          </div>
-
-          <Report account={account} report={notification.get('report')} hidden={this.props.hidden} />
-          <NotificationOverlayContainer notification={notification} />
-        </div>
-      </HotKeys>
-    );
-  }
-
-}
-
-export default withRouter(AdminReport);

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

@@ -1,107 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { HotKeys } from 'react-hotkeys';
-
-import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { Permalink } from 'flavours/glitch/components/permalink';
-import AccountContainer from 'flavours/glitch/containers/account_container';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
-
-class NotificationAdminSignup extends ImmutablePureComponent {
-
-  static propTypes = {
-    hidden: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    ...WithRouterPropTypes,
-  };
-
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
-  render () {
-    const { account, notification, hidden, unread } = this.props;
-
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
-    //  Renders.
-    return (
-      <HotKeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0}>
-          <div className='notification__message'>
-            <Icon id='user-plus' icon={PersonAddIcon} />
-
-            <FormattedMessage
-              id='notification.admin.sign_up'
-              defaultMessage='{name} signed up'
-              values={{ name: link }}
-            />
-          </div>
-
-          <AccountContainer hidden={hidden} id={account.get('id')} withNote={false} />
-          <NotificationOverlayContainer notification={notification} />
-        </div>
-      </HotKeys>
-    );
-  }
-
-}
-
-export default withRouter(NotificationAdminSignup);

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

@@ -1,107 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import { HotKeys } from 'react-hotkeys';
-
-import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
-import { Icon } from 'flavours/glitch/components/icon';
-import { Permalink } from 'flavours/glitch/components/permalink';
-import AccountContainer from 'flavours/glitch/containers/account_container';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
-
-class NotificationFollow extends ImmutablePureComponent {
-
-  static propTypes = {
-    hidden: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    account: ImmutablePropTypes.map.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    ...WithRouterPropTypes,
-  };
-
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
-  render () {
-    const { account, notification, hidden, unread } = this.props;
-
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
-    //  Renders.
-    return (
-      <HotKeys handlers={this.getHandlers()}>
-        <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0}>
-          <div className='notification__message'>
-            <Icon id='user-plus' icon={PersonAddIcon} />
-
-            <FormattedMessage
-              id='notification.follow'
-              defaultMessage='{name} followed you'
-              values={{ name: link }}
-            />
-          </div>
-
-          <AccountContainer hidden={hidden} id={account.get('id')} withNote={false} />
-          <NotificationOverlayContainer notification={notification} />
-        </div>
-      </HotKeys>
-    );
-  }
-
-}
-
-export default withRouter(NotificationFollow);

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

@@ -1,26 +1,16 @@
 import PropTypes from 'prop-types';
 
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
 
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import { HotKeys } from 'react-hotkeys';
-
 import CheckIcon from '@/material-icons/400-24px/check.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
 import { Avatar } from 'flavours/glitch/components/avatar';
 import { DisplayName } from 'flavours/glitch/components/display_name';
-import { Icon } from 'flavours/glitch/components/icon';
 import { IconButton } from 'flavours/glitch/components/icon_button';
 import { Permalink } from 'flavours/glitch/components/permalink';
-import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
-
-import NotificationOverlayContainer from '../containers/overlay_container';
 
 const messages = defineMessages({
   authorize: { id: 'follow_request.authorize', defaultMessage: 'Authorize' },
@@ -34,50 +24,10 @@ class FollowRequest extends ImmutablePureComponent {
     onAuthorize: PropTypes.func.isRequired,
     onReject: PropTypes.func.isRequired,
     intl: PropTypes.object.isRequired,
-    notification: ImmutablePropTypes.map.isRequired,
-    unread: PropTypes.bool,
-    ...WithRouterPropTypes,
   };
 
-  handleMoveUp = () => {
-    const { notification, onMoveUp } = this.props;
-    onMoveUp(notification.get('id'));
-  };
-
-  handleMoveDown = () => {
-    const { notification, onMoveDown } = this.props;
-    onMoveDown(notification.get('id'));
-  };
-
-  handleOpen = () => {
-    this.handleOpenProfile();
-  };
-
-  handleOpenProfile = () => {
-    const { history, notification } = this.props;
-    history.push(`/@${notification.getIn(['account', 'acct'])}`);
-  };
-
-  handleMention = e => {
-    e.preventDefault();
-
-    const { history, notification, onMention } = this.props;
-    onMention(notification.get('account'), history);
-  };
-
-  getHandlers () {
-    return {
-      moveUp: this.handleMoveUp,
-      moveDown: this.handleMoveDown,
-      open: this.handleOpen,
-      openProfile: this.handleOpenProfile,
-      mention: this.handleMention,
-      reply: this.handleMention,
-    };
-  }
-
   render () {
-    const { intl, hidden, account, onAuthorize, onReject, notification, unread } = this.props;
+    const { intl, hidden, account, onAuthorize, onReject } = this.props;
 
     if (!account) {
       return <div />;
@@ -92,51 +42,23 @@ class FollowRequest extends ImmutablePureComponent {
       );
     }
 
-    //  Links to the display name.
-    const displayName = account.get('display_name_html') || account.get('username');
-    const link = (
-      <bdi><Permalink
-        className='notification__display-name'
-        href={account.get('url')}
-        title={account.get('acct')}
-        to={`/@${account.get('acct')}`}
-        dangerouslySetInnerHTML={{ __html: displayName }}
-      /></bdi>
-    );
-
     return (
-      <HotKeys handlers={this.getHandlers()}>
+      <div className='account'>
-        <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0}>
+        <div className='account__wrapper'>
-          <div className='notification__message'>
+          <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <Icon id='user' icon={PersonIcon} />
+            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+            <DisplayName account={account} />
+          </Permalink>
 
-            <FormattedMessage
+          <div className='account__relationship'>
-              id='notification.follow_request'
+            <IconButton title={intl.formatMessage(messages.authorize)} icon='check' iconComponent={CheckIcon} onClick={onAuthorize} />
-              defaultMessage='{name} has requested to follow you'
+            <IconButton title={intl.formatMessage(messages.reject)} icon='times' iconComponent={CloseIcon} onClick={onReject} />
-              values={{ name: link }}
-            />
           </div>
-
-          <div className='account'>
-            <div className='account__wrapper'>
-              <Permalink key={account.get('id')} className='account__display-name' title={account.get('acct')} href={account.get('url')} to={`/@${account.get('acct')}`}>
-                <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-                <DisplayName account={account} />
-              </Permalink>
-
-              <div className='account__relationship'>
-                <IconButton title={intl.formatMessage(messages.authorize)} icon='check' iconComponent={CheckIcon} onClick={onAuthorize} />
-                <IconButton title={intl.formatMessage(messages.reject)} icon='times' iconComponent={CloseIcon} onClick={onReject} />
-              </div>
-            </div>
-          </div>
-
-          <NotificationOverlayContainer notification={notification} />
         </div>
-      </HotKeys>
+      </div>
     );
   }
 
 }
 
-export default withRouter(injectIntl(FollowRequest));
+export default injectIntl(FollowRequest);

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

@@ -1,258 +1,437 @@
-//  Package imports.
 import PropTypes from 'prop-types';
 
+import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
+
+import classNames from 'classnames';
+import { withRouter } from 'react-router-dom';
+
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-//  Our imports,
+import { HotKeys } from 'react-hotkeys';
+
+import FlagIcon from '@/material-icons/400-24px/flag-fill.svg?react';
+import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
+import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
+import { Icon }  from 'flavours/glitch/components/icon';
+import { Permalink } from 'flavours/glitch/components/permalink';
+import AccountContainer from 'flavours/glitch/containers/account_container';
 import StatusContainer from 'flavours/glitch/containers/status_container';
+import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router';
 
-import NotificationAdminReportContainer from '../containers/admin_report_container';
+import FollowRequestContainer from '../containers/follow_request_container';
-import NotificationFollowRequestContainer from '../containers/follow_request_container';
+import NotificationOverlayContainer from '../containers/overlay_container';
 
-import NotificationAdminSignup from './admin_signup';
+import Report from './report';
-import NotificationFollow from './follow';
 
-export default class Notification extends ImmutablePureComponent {
+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}' },
+});
 
+const notificationForScreenReader = (intl, message, timestamp) => {
+  const output = [message];
+
+  output.push(intl.formatDate(timestamp, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }));
+
+  return output.join(', ');
+};
+
+class Notification extends ImmutablePureComponent {
   static propTypes = {
     notification: ImmutablePropTypes.map.isRequired,
     hidden: PropTypes.bool,
     onMoveUp: PropTypes.func.isRequired,
     onMoveDown: PropTypes.func.isRequired,
     onMention: PropTypes.func.isRequired,
+    onFavourite: PropTypes.func.isRequired,
+    onReblog: PropTypes.func.isRequired,
+    onToggleHidden: PropTypes.func.isRequired,
+    status: ImmutablePropTypes.map,
+    intl: PropTypes.object.isRequired,
     getScrollPosition: PropTypes.func,
     updateScrollBottom: PropTypes.func,
     cacheMediaWidth: PropTypes.func,
     cachedMediaWidth: PropTypes.number,
     onUnmount: PropTypes.func,
     unread: PropTypes.bool,
+    ...WithRouterPropTypes,
   };
 
+  handleMoveUp = () => {
+    const { notification, onMoveUp } = this.props;
+    onMoveUp(notification.get('id'));
+  };
+
+  handleMoveDown = () => {
+    const { notification, onMoveDown } = this.props;
+    onMoveDown(notification.get('id'));
+  };
+
+  handleOpen = () => {
+    const { notification } = this.props;
+
+    if (notification.get('status')) {
+      this.props.history.push(`/@${notification.getIn(['status', 'account', 'acct'])}/${notification.get('status')}`);
+    } else {
+      this.handleOpenProfile();
+    }
+  };
+
+  handleOpenProfile = () => {
+    const { notification } = this.props;
+    this.props.history.push(`/@${notification.getIn(['account', 'acct'])}`);
+  };
+
+  handleMention = e => {
+    e.preventDefault();
+
+    const { notification, onMention } = this.props;
+    onMention(notification.get('account'), this.props.history);
+  };
+
+  handleHotkeyFavourite = () => {
+    const { status } = this.props;
+    if (status) this.props.onFavourite(status);
+  };
+
+  handleHotkeyBoost = e => {
+    const { status } = this.props;
+    if (status) this.props.onReblog(status, e);
+  };
+
+  getHandlers () {
+    return {
+      reply: this.handleMention,
+      favourite: this.handleHotkeyFavourite,
+      boost: this.handleHotkeyBoost,
+      mention: this.handleMention,
+      open: this.handleOpen,
+      openProfile: this.handleOpenProfile,
+      moveUp: this.handleMoveUp,
+      moveDown: this.handleMoveDown,
+    };
+  }
+
+  renderFollow (notification, account, link) {
+    const { intl, unread } = this.props;
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-follow focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.follow, { name: account.get('acct') }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='user-plus' icon={PersonAddIcon} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
+            </span>
+          </div>
+
+          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
+    );
+  }
+
+  renderFollowRequest (notification, account, link) {
+    const { intl, unread } = this.props;
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-follow-request focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow_request', defaultMessage: '{name} has requested to follow you' }, { name: account.get('acct') }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='user' icon={PersonIcon} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.follow_request' defaultMessage='{name} has requested to follow you' values={{ name: link }} />
+            </span>
+          </div>
+
+          <FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
+    );
+  }
+
+  renderMention (notification) {
+    return (
+      <StatusContainer
+        id={notification.get('status')}
+        containerId={notification.get('id')}
+        withDismiss
+        hidden={this.props.hidden}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        notification={notification}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        unread={this.props.unread}
+        onUnmount={this.props.onUnmount}
+      />
+    );
+  }
+
+  renderFavourite (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='favourite'
+        muted
+        withDismiss
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        unread={this.props.unread}
+      />
+    );
+  }
+
+  renderReaction (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='reaction'
+        muted
+        withDismiss
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        unread={this.props.unread}
+      />
+    );
+  }
+
+  renderReblog (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='reblog'
+        muted
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        withDismiss
+        unread={this.props.unread}
+      />
+    );
+  }
+
+  renderStatus (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='status'
+        muted
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        withDismiss
+        unread={this.props.unread}
+      />
+    );
+  }
+
+  renderUpdate (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='update'
+        muted
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        withDismiss
+        unread={this.props.unread}
+      />
+    );
+  }
+
+  renderPoll (notification) {
+    return (
+      <StatusContainer
+        containerId={notification.get('id')}
+        hidden={!!this.props.hidden}
+        id={notification.get('status')}
+        account={notification.get('account')}
+        prepend='poll'
+        muted
+        notification={notification}
+        onMoveDown={this.handleMoveDown}
+        onMoveUp={this.handleMoveUp}
+        onMention={this.props.onMention}
+        contextType='notifications'
+        getScrollPosition={this.props.getScrollPosition}
+        updateScrollBottom={this.props.updateScrollBottom}
+        cachedMediaWidth={this.props.cachedMediaWidth}
+        cacheMediaWidth={this.props.cacheMediaWidth}
+        onUnmount={this.props.onUnmount}
+        withDismiss
+        unread={this.props.unread}
+      />
+    );
+  }
+
+  renderAdminSignUp (notification, account, link) {
+    const { intl, unread } = this.props;
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-admin-sign-up focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminSignUp, { name: account.get('acct') }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='user-plus' icon={PersonAddIcon} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.admin.sign_up' defaultMessage='{name} signed up' values={{ name: link }} />
+            </span>
+          </div>
+
+          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
+    );
+  }
+
+  renderAdminReport (notification, account, link) {
+    const { intl, unread, report } = this.props;
+
+    if (!report) {
+      return null;
+    }
+
+    const targetAccount = report.get('target_account');
+    const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
+    const targetLink = (
+      <bdi>
+        <Permalink
+          className='notification__display-name'
+          href={account.get('url')}
+          title={targetAccount.get('acct')}
+          to={`/@${targetAccount.get('acct')}`}
+          dangerouslySetInnerHTML={targetDisplayNameHtml}
+        />
+      </bdi>
+    );
+
+    return (
+      <HotKeys handlers={this.getHandlers()}>
+        <div className={classNames('notification notification-admin-report focusable', { unread })} tabIndex={0} aria-label={notificationForScreenReader(intl, intl.formatMessage(messages.adminReport, { name: account.get('acct'), target: notification.getIn(['report', 'target_account', 'acct']) }), notification.get('created_at'))}>
+          <div className='notification__message'>
+            <Icon id='flag' icon={FlagIcon} />
+
+            <span title={notification.get('created_at')}>
+              <FormattedMessage id='notification.admin.report' defaultMessage='{name} reported {target}' values={{ name: link, target: targetLink }} />
+            </span>
+          </div>
+
+          <Report account={account} report={notification.get('report')} hidden={this.props.hidden} />
+          <NotificationOverlayContainer notification={notification} />
+        </div>
+      </HotKeys>
+    );
+  }
+
   render () {
-    const {
+    const { notification } = this.props;
-      hidden,
+    const account          = notification.get('account');
-      notification,
+    const displayNameHtml  = { __html: account.get('display_name_html') };
-      onMoveDown,
+    const link             = (
-      onMoveUp,
+      <bdi>
-      onMention,
+        <Permalink
-      getScrollPosition,
+          className='notification__display-name'
-      updateScrollBottom,
+          href={`/@${account.get('acct')}`}
-    } = this.props;
+          title={account.get('acct')}
+          to={`/@${account.get('acct')}`}
+          dangerouslySetInnerHTML={displayNameHtml}
+        />
+      </bdi>
+    );
 
     switch(notification.get('type')) {
     case 'follow':
-      return (
+      return this.renderFollow(notification, account, link);
-        <NotificationFollow
-          hidden={hidden}
-          id={notification.get('id')}
-          account={notification.get('account')}
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          unread={this.props.unread}
-        />
-      );
     case 'follow_request':
-      return (
+      return this.renderFollowRequest(notification, account, link);
-        <NotificationFollowRequestContainer
-          hidden={hidden}
-          id={notification.get('id')}
-          account={notification.get('account')}
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          unread={this.props.unread}
-        />
-      );
-    case 'admin.sign_up':
-      return (
-        <NotificationAdminSignup
-          hidden={hidden}
-          id={notification.get('id')}
-          account={notification.get('account')}
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          unread={this.props.unread}
-        />
-      );
-    case 'admin.report':
-      return (
-        <NotificationAdminReportContainer
-          hidden={hidden}
-          id={notification.get('id')}
-          account={notification.get('account')}
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          unread={this.props.unread}
-        />
-      );
     case 'mention':
-      return (
+      return this.renderMention(notification);
-        <StatusContainer
-          containerId={notification.get('id')}
-          hidden={hidden}
-          id={notification.get('status')}
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          contextType='notifications'
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
-    case 'status':
-      return (
-        <StatusContainer
-          containerId={notification.get('id')}
-          hidden={hidden}
-          id={notification.get('status')}
-          account={notification.get('account')}
-          prepend='status'
-          muted
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          contextType='notifications'
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
     case 'favourite':
-      return (
+      return this.renderFavourite(notification);
-        <StatusContainer
-          containerId={notification.get('id')}
-          hidden={hidden}
-          id={notification.get('status')}
-          account={notification.get('account')}
-          prepend='favourite'
-          muted
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          contextType='notifications'
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
     case 'reaction':
-      return (
+      return this.renderReaction(notification);
-        <StatusContainer
-          containerId={notification.get('id')}
-          hidden={hidden}
-          id={notification.get('status')}
-          account={notification.get('account')}
-          prepend='reaction'
-          muted
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
     case 'reblog':
-      return (
+      return this.renderReblog(notification);
-        <StatusContainer
+    case 'status':
-          containerId={notification.get('id')}
+      return this.renderStatus(notification);
-          hidden={hidden}
-          id={notification.get('status')}
-          account={notification.get('account')}
-          prepend='reblog'
-          muted
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          contextType='notifications'
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
-    case 'poll':
-      return (
-        <StatusContainer
-          containerId={notification.get('id')}
-          hidden={hidden}
-          id={notification.get('status')}
-          account={notification.get('account')}
-          prepend='poll'
-          muted
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          contextType='notifications'
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
     case 'update':
-      return (
+      return this.renderUpdate(notification);
-        <StatusContainer
+    case 'poll':
-          containerId={notification.get('id')}
+      return this.renderPoll(notification);
-          hidden={hidden}
+    case 'admin.sign_up':
-          id={notification.get('status')}
+      return this.renderAdminSignUp(notification, account, link);
-          account={notification.get('account')}
+    case 'admin.report':
-          prepend='update'
+      return this.renderAdminReport(notification, account, link);
-          muted
-          notification={notification}
-          onMoveDown={onMoveDown}
-          onMoveUp={onMoveUp}
-          onMention={onMention}
-          contextType='notifications'
-          getScrollPosition={getScrollPosition}
-          updateScrollBottom={updateScrollBottom}
-          cachedMediaWidth={this.props.cachedMediaWidth}
-          cacheMediaWidth={this.props.cacheMediaWidth}
-          onUnmount={this.props.onUnmount}
-          withDismiss
-          unread={this.props.unread}
-        />
-      );
-    default:
-      return null;
     }
+
+    return null;
   }
 
 }
+
+export default withRouter(injectIntl(Notification));

app/javascript/flavours/glitch/features/notifications/containers/admin_report_container.js

@@ -1,15 +0,0 @@
-import { connect } from 'react-redux';
-
-import { makeGetReport } from 'flavours/glitch/selectors';
-
-import AdminReport from '../components/admin_report';
-
-const mapStateToProps = (state, { notification }) => {
-  const getReport = makeGetReport();
-
-  return {
-    report: notification.get('report') ? getReport(state, notification.get('report'), notification.getIn(['report', 'target_account', 'id'])) : null,
-  };
-};
-
-export default connect(mapStateToProps)(AdminReport);

app/javascript/flavours/glitch/features/notifications/containers/notification_container.js

@@ -1,24 +1,62 @@
 import { connect } from 'react-redux';
 
-import { mentionCompose } from 'flavours/glitch/actions/compose';
+import { initBoostModal } from '../../../actions/boosts';
-import { makeGetNotification } from 'flavours/glitch/selectors';
+import { mentionCompose } from '../../../actions/compose';
-
+import {
+  reblog,
+  favourite,
+  unreblog,
+  unfavourite,
+} from '../../../actions/interactions';
+import { boostModal } from '../../../initial_state';
+import { makeGetNotification, makeGetStatus, makeGetReport } from '../../../selectors';
 import Notification from '../components/notification';
 
 const makeMapStateToProps = () => {
   const getNotification = makeGetNotification();
+  const getStatus = makeGetStatus();
+  const getReport = makeGetReport();
 
-  const mapStateToProps = (state, props) => ({
+  const mapStateToProps = (state, props) => {
-    notification: getNotification(state, props.notification, props.accountId),
+    const notification = getNotification(state, props.notification, props.accountId);
-    notifCleaning: state.getIn(['notifications', 'cleaningMode']),
+    return {
-  });
+      notification: notification,
+      status: notification.get('status') ? getStatus(state, { id: notification.get('status'), contextType: 'notifications' }) : null,
+      report: notification.get('report') ? getReport(state, notification.get('report'), notification.getIn(['report', 'target_account', 'id'])) : null,
+      notifCleaning: state.getIn(['notifications', 'cleaningMode']),
+    };
+  };
 
   return mapStateToProps;
 };
 
 const mapDispatchToProps = dispatch => ({
-  onMention: (account, history) => {
+  onMention: (account, router) => {
-    dispatch(mentionCompose(account, history));
+    dispatch(mentionCompose(account, router));
+  },
+
+  onModalReblog (status, privacy) {
+    dispatch(reblog(status, privacy));
+  },
+
+  onReblog (status, e) {
+    if (status.get('reblogged')) {
+      dispatch(unreblog(status));
+    } else {
+      if (e.shiftKey || !boostModal) {
+        this.onModalReblog(status);
+      } else {
+        dispatch(initBoostModal({ status, onReblog: this.onModalReblog }));
+      }
+    }
+  },
+
+  onFavourite (status) {
+    if (status.get('favourited')) {
+      dispatch(unfavourite(status));
+    } else {
+      dispatch(favourite(status));
+    }
   },
 });
 

app/javascript/flavours/glitch/locales/de.json

@@ -14,6 +14,7 @@
   "column_subheading.lists": "Listen",
   "column_subheading.navigation": "Navigation",
   "community.column_settings.allow_local_only": "Nur-lokale Toots anzeigen",
+  "compose.attach.doodle": "Male etwas",
   "compose.change_federation": "Föderationseinstellungen ändern",
   "compose.content-type.change": "Erweiterte Formatierungsoptionen ändern",
   "compose.content-type.html": "HTML",
@@ -22,6 +23,8 @@
   "compose.content-type.markdown_meta": "Deine Beiträge mit Markdown formatieren",
   "compose.content-type.plain": "Unformatierter Text",
   "compose.content-type.plain_meta": "Ohne erweiterte Formatierung verfassen",
+  "compose.disable_threaded_mode": "Thread-Modus deaktivieren",
+  "compose.enable_threaded_mode": "Thread-Modus aktivieren",
   "compose_form.sensitive.hide": "{count, plural, one {Mit einer Inhaltswarnung versehen} other {Mit einer Inhaltswarnung versehen}}",
   "compose_form.sensitive.marked": "{count, plural, one {Medien-Datei ist mit einer Inhaltswarnung versehen} other {Medien-Dateien sind mit einer Inhaltswarnung versehen}}",
   "compose_form.sensitive.unmarked": "{count, plural, one {Medien-Datei ist nicht mit einer Inhaltswarnung versehen} other {Medien-Dateien sind nicht mit einer Inhaltswarnung versehen}}",
@@ -63,6 +66,9 @@
   "notification_purge.btn_invert": "Auswahl\numkehren",
   "notification_purge.btn_none": "Auswahl\naufheben",
   "notification_purge.start": "Benachrichtigungen-Aufräumen-Modus starten",
+  "notifications.column_settings.filter_bar.advanced": "Zeige alle Kategorien an",
+  "notifications.column_settings.filter_bar.category": "Schnellfilterleiste",
+  "notifications.column_settings.filter_bar.show_bar": "Filterleiste anzeigen",
   "notifications.marked_clear": "Ausgewählte Benachrichtigungen entfernen",
   "notifications.marked_clear_confirmation": "Möchtest du wirklich alle auswählten Benachrichtigungen für immer entfernen?",
   "settings.always_show_spoilers_field": "Das Inhaltswarnungs-Feld immer aktivieren",
@@ -153,5 +159,6 @@
   "status.in_reply_to": "Dieser Toot ist eine Antwort",
   "status.is_poll": "Dieser Toot ist eine Umfrage",
   "status.local_only": "Nur auf deiner Instanz sichtbar",
-  "status.uncollapse": "Ausklappen"
+  "status.uncollapse": "Ausklappen",
+  "suggestions.dismiss": "Vorschlag ablehnen"
 }

app/javascript/flavours/glitch/locales/es-AR.json

@@ -64,6 +64,9 @@
   "notification_purge.btn_invert": "Invertir\nselección",
   "notification_purge.btn_none": "Seleccionar\nnada",
   "notification_purge.start": "Entrar en modo de limpieza de notificaciones",
+  "notifications.column_settings.filter_bar.advanced": "Mostrar todas las categorías",
+  "notifications.column_settings.filter_bar.category": "Barra de filtrado rápido",
+  "notifications.column_settings.filter_bar.show_bar": "Mostrar barra de filtros",
   "notifications.marked_clear": "Limpiar notificaciones seleccionadas",
   "notifications.marked_clear_confirmation": "¿Deseas borrar permanentemente todas las notificaciones seleccionadas?",
   "settings.always_show_spoilers_field": "Siempre mostrar el campo de advertencia de contenido",
@@ -127,6 +130,7 @@
   "settings.shared_settings_link": "preferencias de usuario",
   "settings.show_action_bar": "Mostrar botones de acción en toots colapsados",
   "settings.show_content_type_choice": "Mostrar selección de tipo de contenido al crear toots",
+  "settings.show_published_toast": "Mostrar brindis al enviar o guardar un mensaje",
   "settings.show_reply_counter": "Mostrar un conteo estimado de respuestas",
   "settings.side_arm": "Botón secundario:",
   "settings.side_arm.none": "Ninguno",

app/javascript/flavours/glitch/locales/zh-CN.json

@@ -64,6 +64,9 @@
   "notification_purge.btn_invert": "反选",
   "notification_purge.btn_none": "取消全选",
   "notification_purge.start": "进入通知清理模式",
+  "notifications.column_settings.filter_bar.advanced": "显示所有类别",
+  "notifications.column_settings.filter_bar.category": "快速筛选栏",
+  "notifications.column_settings.filter_bar.show_bar": "显示筛选栏",
   "notifications.marked_clear": "清除选择的通知",
   "notifications.marked_clear_confirmation": "你确定要永久清除所有选择的通知吗？",
   "settings.always_show_spoilers_field": "始终显示内容警告框",
@@ -127,6 +130,7 @@
   "settings.shared_settings_link": "用户偏好设置",
   "settings.show_action_bar": "在折叠的嘟文中显示操作按钮",
   "settings.show_content_type_choice": "允许在发嘟时选择格式类型",
+  "settings.show_published_toast": "发布/保存嘟文时显示提示",
   "settings.show_reply_counter": "显示回复的大致数量",
   "settings.side_arm": "辅助发嘟按钮：",
   "settings.side_arm.none": "无",

app/javascript/flavours/glitch/locales/zh-TW.json

@@ -60,6 +60,9 @@
   "notification_purge.btn_invert": "反向選擇",
   "notification_purge.btn_none": "取消選取",
   "notification_purge.start": "進入通知清理模式",
+  "notifications.column_settings.filter_bar.advanced": "顯示所有分類",
+  "notifications.column_settings.filter_bar.category": "快速過濾欄",
+  "notifications.column_settings.filter_bar.show_bar": "顯示過濾器",
   "notifications.marked_clear": "清除被選取的通知訊息",
   "notifications.marked_clear_confirmation": "您確定要永久清除所有被選取的通知訊息嗎？",
   "settings.always_show_spoilers_field": "永遠啟用內容警告欄位",
@@ -123,6 +126,7 @@
   "settings.shared_settings_link": "使用者偏好設定",
   "settings.show_action_bar": "在折疊的貼文顯示操作按鈕",
   "settings.show_content_type_choice": "在編寫貼文時顯示內容類型選擇",
+  "settings.show_published_toast": "發布或儲存貼文時顯示提示",
   "settings.show_reply_counter": "顯示回覆數量的估計值",
   "settings.side_arm": "次要發出貼文按鈕",
   "settings.side_arm.none": "無",

config/locales-glitch/es-AR.yml

@@ -11,7 +11,7 @@ es-AR:
       flavour_and_skin:
         title: Sabor y apariencia
       hide_followers_count:
-        desc_html: No mostrar el conteo de seguidorxs en perfiles de usuarix
+        desc_html: No mostrar el conteo de seguidores en perfiles de usuario
         title: Ocultar conteo de seguidorxs
       other:
         preamble: Varias configuraciones de glitch-soc que no encajan en otras categorías.

config/locales-glitch/simple_form.es-AR.yml

@@ -16,8 +16,8 @@ es-AR:
         setting_default_content_type_html: HTML
         setting_default_content_type_markdown: Markdown
         setting_default_content_type_plain: Sin formato
-        setting_favourite_modal: Mostrar diálogo de confirmación antes de marcar como favorito (sólo aplica a la edición Glich)
+        setting_favourite_modal: Mostrar diálogo de confirmación antes de marcar como favorito (solo aplica a la edición Glitch)
-        setting_show_followers_count: Mostrá el conteo de tus seguidores
+        setting_show_followers_count: Mostrar el conteo de tus seguidores
         setting_skin: Diseño
         setting_system_emoji_font: Usar la fuente predeterminada del sistema para emojis (sólo aplica a la edición Glitch)
       notification_emails: