Change conversations to always show names of other participants (mastodon#10047)

Fix mastodon#9190

Author: Gargron

app/javascript/mastodon/components/display_name.js

@@ -11,26 +11,36 @@ export default class DisplayName extends React.PureComponent {
   };
 
   render () {
-    const { account, others, localDomain } = this.props;
-    const displayNameHtml = { __html: account.get('display_name_html') };
+    const { others, localDomain } = this.props;
 
-    let suffix;
+    let displayName, suffix, account;
 
     if (others && others.size > 1) {
-      suffix = `+${others.size}`;
+      displayName = others.take(2).map(a => <bdi key={a.get('id')}><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: a.get('display_name_html') }} /></bdi>).reduce((prev, cur) => [prev, ', ', cur]);
+
+      if (others.size - 2 > 0) {
+        suffix = `+${others.size - 2}`;
+      }
     } else {
+      if (others) {
+        account = others.first();
+      } else {
+        account = this.props.account;
+      }
+
       let acct = account.get('acct');
 
       if (acct.indexOf('@') === -1 && localDomain) {
         acct = `${acct}@${localDomain}`;
       }
 
-      suffix = <span className='display-name__account'>@{acct}</span>;
+      displayName = <bdi><strong className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} /></bdi>;
+      suffix      = <span className='display-name__account'>@{acct}</span>;
     }
 
     return (
       <span className='display-name'>
-        <bdi><strong className='display-name__html' dangerouslySetInnerHTML={displayNameHtml} /></bdi> {suffix}
+        {displayName} {suffix}
       </span>
     );
   }