FIX: makes chat user avatar show presence by default (#22490)

It's way more common to have presence enabled than disabled, so we should have been making it the default from start.

This commit also changes the namespace of `<ChatUserAvatar />` into `<Chat::UserAvatar />` and refactors tests.

plugins/chat/assets/javascripts/discourse/components/chat-channel-title.hbs

@@ -7,7 +7,7 @@
             {{@channel.chatable.users.length}}
           </span>
         {{else}}
-          <ChatUserAvatar @user={{@channel.chatable.users.firstObject}} />
+          <Chat::UserAvatar @user={{@channel.chatable.users.firstObject}} />
         {{/if}}
       </div>
     {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-composer-message-details.hbs

@@ -5,7 +5,7 @@
 >
   <div class="chat-reply">
     {{d-icon (if @message.editing "pencil-alt" "reply")}}
-    <ChatUserAvatar @user={{@message.user}} />
+    <Chat::UserAvatar @user={{@message.user}} />
     <span class="chat-reply__username">{{@message.user.username}}</span>
     <span class="chat-reply__excerpt">
       {{replace-emoji @message.excerpt}}

plugins/chat/assets/javascripts/discourse/components/chat-message-actions-mobile.hbs

@@ -16,7 +16,7 @@
     <div class="chat-message-actions">
       <div class="selected-message-container">
         <div class="selected-message">
-          <ChatUserAvatar @user={{this.message.user}} />
+          <Chat::UserAvatar @user={{this.message.user}} />
           <span
             {{on "touchstart" this.expandReply passive=true}}
             role="button"

plugins/chat/assets/javascripts/discourse/components/chat-message-in-reply-to-indicator.hbs

@@ -9,7 +9,7 @@
     {{#if @message.inReplyTo.chatWebhookEvent.emoji}}
       <ChatEmojiAvatar @emoji={{@message.inReplyTo.chatWebhookEvent.emoji}} />
     {{else}}
-      <ChatUserAvatar @user={{@message.inReplyTo.user}} />
+      <Chat::UserAvatar @user={{@message.inReplyTo.user}} />
     {{/if}}
 
     <span class="chat-reply__excerpt">

plugins/chat/assets/javascripts/discourse/components/chat-message-thread-indicator.hbs

@@ -10,7 +10,7 @@
 >
 
   <div class="chat-message-thread-indicator__last-reply-avatar">
-    <ChatUserAvatar
+    <Chat::UserAvatar
       @user={{@message.thread.preview.lastReplyUser}}
       @avatarSize="small"
     />

plugins/chat/assets/javascripts/discourse/components/chat-user-avatar.hbs

@@ -1,11 +0,0 @@
-<div
-  class="chat-user-avatar {{if (and this.isOnline @showPresence) 'is-online'}}"
->
-  <div
-    role="button"
-    class="chat-user-avatar-container clickable"
-    data-user-card={{@user.username}}
-  >
-    {{avatar @user imageSize=this.avatarSize}}
-  </div>
-</div>

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

@@ -1,6 +1,6 @@
 {{#if @user}}
   <a href={{this.userPath}} data-user-card={{@user.username}}>
-    <ChatUserAvatar @user={{@user}} @avatarSize="medium" />
+    <Chat::UserAvatar @user={{@user}} @avatarSize="medium" />
   </a>
   <a href={{this.userPath}} data-user-card={{@user.username}}>
     <ChatUserDisplayName @user={{@user}} />

plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-row.hbs

@@ -1,4 +1,4 @@
-<ChatUserAvatar @user={{@content.model}} @showPresence={{true}} />
+<Chat::UserAvatar @user={{@content.model}} />
 <ChatUserDisplayName @user={{@content.model}} />
 
 {{#if (gt @content.tracking.unreadCount 0)}}

plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user-selection.hbs

@@ -1,4 +1,4 @@
-<ChatUserAvatar @user={{@selection.model}} @showPresence={{true}} />
+<Chat::UserAvatar @user={{@selection.model}} />
 
 <span class="chat-message-creator__selection-item__username">
   {{@selection.model.username}}

plugins/chat/assets/javascripts/discourse/components/chat/message/avatar.hbs

@@ -2,10 +2,6 @@
   {{#if @message.chatWebhookEvent.emoji}}
     <ChatEmojiAvatar @emoji={{@message.chatWebhookEvent.emoji}} />
   {{else}}
-    <ChatUserAvatar
-      @showPresence={{true}}
-      @user={{@message.user}}
-      @avatarSize="medium"
-    />
+    <Chat::UserAvatar @user={{@message.user}} @avatarSize="medium" />
   {{/if}}
 </div>

plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs

@@ -14,7 +14,7 @@
     >
       <div class="chat-thread-list-item__header">
         <div class="chat-thread-list-item__om-user-avatar">
-          <ChatUserAvatar @user={{@thread.originalMessage.user}} />
+          <Chat::UserAvatar @user={{@thread.originalMessage.user}} />
         </div>
         <div class="chat-thread-list-item__title overflow-ellipsis">
           {{replace-emoji this.title}}

plugins/chat/assets/javascripts/discourse/components/chat/thread/participants.hbs

@@ -2,7 +2,7 @@
   <div class="chat-thread-participants">
     <div class="chat-thread-participants__avatar-group">
       {{#each @thread.preview.participantUsers as |user|}}
-        <ChatUserAvatar
+        <Chat::UserAvatar
           @user={{user}}
           @avatarSize="tiny"
           @showPresence={{false}}

plugins/chat/assets/javascripts/discourse/components/chat/user-avatar.hbs

@@ -0,0 +1,9 @@
+<div class="chat-user-avatar {{if this.isOnline 'is-online'}}">
+  <div
+    role="button"
+    class="chat-user-avatar__container clickable"
+    data-user-card={{@user.username}}
+  >
+    {{avatar @user imageSize=this.avatarSize}}
+  </div>
+</div>

plugins/chat/assets/javascripts/discourse/components/chat/user-avatar.js

@@ -8,12 +8,19 @@ export default class ChatUserAvatar extends Component {
     return this.args.avatarSize || "tiny";
   }
 
+  get showPresence() {
+    return this.args.showPresence ?? true;
+  }
+
   get isOnline() {
     const users = (this.args.chat || this.chat).presenceChannel?.users;
 
     return (
-      !!users?.findBy("id", this.args.user?.id) ||
-      !!users?.findBy("username", this.args.user?.username)
+      this.showPresence &&
+      !!users?.find(
+        ({ id, username }) =>
+          this.args.user?.id === id || this.args.user?.username === username
+      )
     );
   }
 }