UX: Thread indicator small fixes (#22389)

* UX: make timestamp font size smaller

* UX: participants use copy instead of avatar

* FIX: Move thread participant count into i18n

---------

Co-authored-by: Martin Brennan <martin@discourse.org>

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

@@ -11,11 +11,14 @@
           @showPresence={{false}}
         />
       {{/each}}
-      {{#if @thread.preview.otherParticipantCount}}
-        <div class="chat-thread-participants__other-count">
-          +{{@thread.preview.otherParticipantCount}}
-        </div>
-      {{/if}}
     </div>
+    {{#if @thread.preview.otherParticipantCount}}
+      <div class="chat-thread-participants__other-count">
+        {{i18n
+          "chat.thread.participants_other_count"
+          count=@thread.preview.otherParticipantCount
+        }}
+      </div>
+    {{/if}}
   </div>
 {{/if}}

plugins/chat/assets/stylesheets/common/chat-message-thread-indicator.scss

@@ -54,7 +54,6 @@
     @include ellipsis;
     font-weight: bold;
     color: var(--primary-very-high);
-    margin-right: 0.25rem;
   }
 
   &__last-reply-info {
@@ -66,7 +65,7 @@
 
   &__last-reply-timestamp {
     color: var(--primary-high);
-    font-size: var(--font-down-2);
+    font-size: var(--font-down-3);
   }
 
   &__last-reply-excerpt {
@@ -80,7 +79,7 @@
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    gap: 0.5rem;
+    gap: 0.25rem;
   }
 
   &__replies-count {

plugins/chat/assets/stylesheets/common/chat-thread-participants.scss

@@ -1,19 +1,8 @@
 .chat-thread-participants {
   margin-left: 0.5rem;
   &__other-count {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 22px;
-    height: 22px;
-    border: 1px solid rgba(0, 0, 0, 0);
-    box-sizing: border-box;
     font-size: var(--font-down-2);
-    color: var(--primary-very-low);
-    background: var(--secondary-high);
-    padding: 0.21em 0.42em;
-    border-radius: 1em;
-    text-align: center;
+    color: var(--primary-high);
     white-space: nowrap;
   }
 
@@ -41,11 +30,11 @@
 @container (max-width: 400px) {
   .chat-thread-participants {
     &__avatar-group {
-      flex-direction: row-reverse;
+      flex-direction: row;
       justify-content: flex-start;
       .chat-user-avatar {
-        &:not(:first-child) {
-          margin-right: -12px;
+        &:not(:last-child) {
+          margin-right: -10px;
         }
         .avatar {
           width: 22px;
@@ -54,12 +43,5 @@
         }
       }
     }
-    &__other-count {
-      width: 22px;
-      height: 22px;
-      margin-right: -12px;
-      z-index: 1;
-      border: 1px solid var(--primary-very-low);
-    }
   }
 }

plugins/chat/config/locales/client.en.yml

@@ -584,8 +584,8 @@ en:
             title: "Tracking"
             description: "A count of new replies for this thread will be shown in the thread list and the channel. You will be notified if someone mentions your @name in this thread."
         participants_other_count:
-          one: "+%{count} other"
-          other: "+%{count} others"
+          one: "+%{count}"
+          other: "+%{count}"
       threads:
         open: "Open Thread"
         list: "Ongoing discussions"