Redesign direct messages column (#9022)

1 files changed, 11 insertions, 8 deletions

diff --git a/app/javascript/mastodon/components/display_name.js b/app/javascript/mastodon/components/display_name.js
index c3a9ab921..c2c40cb3f 100644
--- a/app/javascript/mastodon/components/display_name.js
+++ b/app/javascript/mastodon/components/display_name.js
@@ -1,25 +1,28 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import PropTypes from 'prop-types';
 
 export default class DisplayName extends React.PureComponent {
 
   static propTypes = {
     account: ImmutablePropTypes.map.isRequired,
-    withAcct: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    withAcct: true,
+    others: ImmutablePropTypes.list,
   };
 
   render () {
-    const { account, withAcct } = this.props;
+    const { account, others } = this.props;
     const displayNameHtml = { __html: account.get('display_name_html') };
 
+    let suffix;
+
+    if (others && others.size > 1) {
+      suffix = `+${others.size}`;
+    } else {
+      suffix = <span className='display-name__account'>@{account.get('acct')}</span>;
+    }
+
     return (
       <span className='display-name'>
-        <bdi><strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /></bdi> {withAcct && <span className='display-name__account'>@{account.get('acct')}</span>}
+        <bdi><strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /></bdi> {suffix}
       </span>
     );
   }