FEATURE: Add user status to chat members list (#25831)

This change adds the user status next to the name within the chat channel members list.

plugins/chat/app/serializers/chat/user_channel_membership_serializer.rb

@@ -2,7 +2,7 @@
 
 module Chat
   class UserChannelMembershipSerializer < BaseChannelMembershipSerializer
-    has_one :user, serializer: ::Chat::BasicUserSerializer, embed: :objects
+    has_one :user, serializer: ::Chat::ChatableUserSerializer, embed: :objects
 
     def user
       object.user || Chat::NullUser.new

plugins/chat/assets/javascripts/discourse/components/chat-user-display-name.gjs

@@ -30,7 +30,6 @@ export default class ChatUserDisplayName extends Component {
     <span class="chat-user-display-name">
       {{#if this.shouldShowNameFirst}}
         <span class="chat-user-display-name__name -first">{{@user.name}}</span>
-        <span class="separator">—</span>
       {{/if}}
 
       <span
@@ -43,7 +42,6 @@ export default class ChatUserDisplayName extends Component {
       </span>
 
       {{#if this.shouldShowNameLast}}
-        <span class="separator">—</span>
         <span class="chat-user-display-name__name">{{@user.name}}</span>
       {{/if}}
     </span>

plugins/chat/assets/javascripts/discourse/components/chat-user-info.gjs

@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import UserStatusMessage from "discourse/components/user-status-message";
 import { userPath } from "discourse/lib/url";
 import ChatUserAvatar from "discourse/plugins/chat/discourse/components/chat-user-avatar";
 import ChatUserDisplayName from "discourse/plugins/chat/discourse/components/chat-user-display-name";
@@ -16,6 +17,14 @@ export default class ChatUserInfo extends Component {
     return this.args.interactive ?? false;
   }
 
+  get showStatus() {
+    return this.args.showStatus ?? false;
+  }
+
+  get showStatusDescription() {
+    return this.args.showStatusDescription ?? false;
+  }
+
   <template>
     {{#if @user}}
       <ChatUserAvatar
@@ -31,6 +40,13 @@ export default class ChatUserInfo extends Component {
       {{else}}
         <ChatUserDisplayName @user={{@user}} />
       {{/if}}
+
+      {{#if this.showStatus}}
+        <UserStatusMessage
+          @status={{@user.status}}
+          @showDescription={{this.showStatusDescription}}
+        />
+      {{/if}}
     {{/if}}
   </template>
 }

plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs

@@ -176,6 +176,8 @@ export default class ChatRouteChannelInfoMembers extends Component {
                 @user={{membership.user}}
                 @avatarSize="tiny"
                 @interactive={{false}}
+                @showStatus={{true}}
+                @showStatusDescription={{true}}
               />
             </li>
           {{else}}

plugins/chat/assets/stylesheets/common/chat-channel-members.scss

@@ -32,6 +32,23 @@
         .chat-user-avatar {
           margin-right: 0.5rem;
         }
+
+        .chat-user-display-name span:not(.-first) {
+          color: var(--primary-high);
+          font-size: var(--font-down-1);
+          margin-left: 0.5rem;
+        }
+
+        .user-status-message {
+          color: var(--primary-medium);
+          font-size: var(--font-down-2);
+          margin-left: 0.5rem;
+
+          .emoji {
+            height: var(--font-0);
+            width: var(--font-0);
+          }
+        }
       }
 
       &.-add-member {

plugins/chat/spec/support/api/schemas/user_chat_channel_membership.json

@@ -24,6 +24,7 @@
         "name": { "type": "string" },
         "avatar_template": { "type": "string" },
         "username": { "type": "string" },
+        "custom_fields": { "type": ["object", "null"] },
         "can_chat": { "type": "boolean" },
         "has_chat_enabled": { "type": "boolean" }
       }

plugins/chat/spec/system/channel_members_page_spec.rb

@@ -62,6 +62,19 @@ RSpec.describe "Channel - Info - Members page", type: :system do
           expect(page).to have_selector(".c-channel-members__list-item", count: 1, text: "cat")
         end
       end
+
+      context "with user status" do
+        it "renders status next to name" do
+          SiteSetting.enable_user_status = true
+          current_user.set_status!("walking the dog", "dog")
+
+          chat_page.visit_channel_members(channel_1)
+
+          expect(page).to have_selector(
+            ".-member .user-status-message img[alt='#{current_user.user_status.emoji}']",
+          )
+        end
+      end
     end
   end
 

plugins/chat/test/javascripts/components/chat-user-display-name-test.js

@@ -28,7 +28,7 @@ module(
 
       await render(hbs`<ChatUserDisplayName @user={{this.user}} />`);
 
-      assert.strictEqual(displayName(), "bob — Bobcat");
+      assert.strictEqual(displayName(), "bob Bobcat");
     });
   }
 );
@@ -53,7 +53,7 @@ module(
 
       await render(hbs`<ChatUserDisplayName @user={{this.user}} />`);
 
-      assert.strictEqual(displayName(), "Bobcat — bob");
+      assert.strictEqual(displayName(), "Bobcat bob");
     });
   }
 );