show nb of members on group chat when members.length>0

_locales/en/messages.json

@@ -2317,8 +2317,8 @@
     "message": "Friends",
     "description": "friend tab title"
   },
-  "pending": {
+  "pendingAcceptance": {
-    "message": "pending",
+    "message": "Pending Acceptance",
     "description": "Indicates that a friend request is pending"
   },
   "notFriends": {
@@ -2541,5 +2541,14 @@
   },
   "youHaveFriendRequestFrom": {
     "message": "You have friend requests from..."
+  },
+  "members": {
+    "message": "$count$ members",
+    "placeholders": {
+      "count": {
+        "content": "$1",
+        "example": "26"
+      }
+    }
   }
 }

js/views/conversation_view.js

@@ -188,6 +188,7 @@
           isOnline: this.model.isOnline(),
           isArchived: this.model.get('isArchived'),
           isPublic: this.model.isPublic(),
+          isRss: this.model.isRss(),
           members,
           selectedMessages: this.model.selectedMessages,
           expirationSettingName,

stylesheets/_modules.scss

@@ -1458,7 +1458,6 @@
 
 .module-conversation-header__title-text {
   color: darkgrey;
-  margin-left: 1em;
 }
 
 .module-conversation-header__title-flex {

stylesheets/_session.scss

@@ -441,6 +441,8 @@ $session_message-container-border-radius: 5px;
 .module-conversation-header__title-flex,
 .module-conversation-header__title {
   width: 100%;
+  display: flex;
+  flex-direction: column;
 
   .module-contact-name {
     width: 100%;

ts/components/conversation/ConversationHeader.tsx

@@ -37,6 +37,7 @@ interface Props {
   isGroup: boolean;
   isArchived: boolean;
   isPublic: boolean;
+  isRss: boolean;
 
   members: Array<any>;
 
@@ -127,6 +128,8 @@ export class ConversationHeader extends React.Component<Props> {
       profileName,
       isFriend,
       isGroup,
+      isRss,
+      members,
       isFriendRequestPending,
       isMe,
       name,
@@ -142,9 +145,12 @@ export class ConversationHeader extends React.Component<Props> {
 
     let text = '';
     if (isFriendRequestPending) {
-      text = `(${i18n('pending')})`;
+      text = i18n('pendingAcceptance');
     } else if (!isFriend && !isGroup) {
-      text = `(${i18n('notFriends')})`;
+      text = i18n('notFriends');
+    } else if (isGroup && !isRss && members.length > 0) {
+      const count = String(members.length);
+      text = i18n('members', [count]);
     }
 
     const textEl =
@@ -152,14 +158,22 @@ export class ConversationHeader extends React.Component<Props> {
         <span className="module-conversation-header__title-text">{text}</span>
       );
 
+    let title;
+    if (profileName) {
+      title = `${profileName} ${window.shortenPubkey(phoneNumber)}`;
+    } else {
+      if (name) {
+        title = `${name}`;
+      } else {
+        title = phoneNumber;
+      }
+    }
+
     return (
       <div className="module-conversation-header__title">
-        <ContactName
+        <span className="module-contact-name__profile-name">
-          phoneNumber={phoneNumber}
+          {title}
-          profileName={profileName}
+        </span>
-          name={name}
-          i18n={i18n}
-        />
         {textEl}
       </div>
     );