UX: minor tweaks to thread list item (#23259)

- drop @
- prevents +X  (participants) to show on next line
- few spacing/fonts adjustments

Note that this commit is also stripping links from chat excerpts.

plugins/chat/app/models/chat/message.rb

@@ -113,7 +113,7 @@ module Chat
       return uploads.first.original_filename if cooked.blank? && uploads.present?
 
       # this may return blank for some complex things like quotes, that is acceptable
-      PrettyText.excerpt(cooked, max_length)
+      PrettyText.excerpt(cooked, max_length, strip_links: true)
     end
 
     def censored_excerpt(max_length: 50)

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

@@ -18,11 +18,10 @@
           <Chat::UserAvatar @user={{@thread.originalMessage.user}} />
         </div>
         <div class="chat-thread-list-item__title">
-
           {{#if this.title}}
             {{replace-emoji this.title}}
           {{else}}
-            {{@thread.originalMessage.excerpt}}
+            {{replace-emoji @thread.originalMessage.excerpt}}
           {{/if}}
         </div>
         <div class="chat-thread-list-item__unread-indicator">
@@ -32,7 +31,7 @@
 
       <div class="chat-thread-list-item__body">
         <span class="chat-thread-list-item__last-reply-author">
-          @{{@thread.preview.lastReplyUser.username}}:
+          {{@thread.preview.lastReplyUser.username}}:
         </span>
         <span class="chat-thread-list-item__last-reply-excerpt">
           {{replace-emoji (html-safe @thread.preview.lastReplyExcerpt)}}

plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss

@@ -31,6 +31,11 @@
     }
   }
 
+  &__participants {
+    display: flex;
+    align-items: center;
+  }
+
   &__main {
     flex: 1 1 100%;
     width: 100%;
@@ -57,8 +62,10 @@
   }
 
   &__metadata__separator {
-    padding-inline: 0.25rem;
+    padding-inline: 0.5rem;
     font-weight: 700;
+    font-size: 20px;
+    text-align: center;
   }
 
   &__participants {
@@ -85,12 +92,22 @@
 
   &__title {
     flex: 1 1 auto;
-    font-weight: bold;
+    font-weight: 500;
+    font-size: var(--font-up-1);
     @include ellipsis;
   }
 
+  &__last-reply-excerpt {
+    font-size: var(--font-0);
+  }
+
   &__unread-indicator {
     flex: 0 0 auto;
+
+    .chat-thread-list-item-unread-indicator__number {
+      color: var(--primary);
+      font-size: var(--font-up-1);
+    }
   }
 
   &__open-button {

plugins/chat/spec/system/chat_channel_spec.rb

@@ -237,7 +237,7 @@ RSpec.describe "Chat channel", type: :system do
       chat.visit_channel(channel_1)
 
       expect(find(".chat-reply .chat-reply__excerpt")["innerHTML"].strip).to eq(
-        "<a class=\"mention\" href=\"/u/#{other_user.username}\">@#{other_user.username}</a> &lt;mark&gt;not marked&lt;/mark&gt;",
+        "@#{other_user.username} &lt;mark&gt;not marked&lt;/mark&gt;",
       )
     end
   end

plugins/chat/spec/system/reply_to_message/full_page_spec.rb

@@ -106,7 +106,7 @@ RSpec.describe "Reply to message - channel - full page", type: :system do
       channel_page.reply_to(original_message)
 
       expect(find(".chat-reply .chat-reply__excerpt")["innerHTML"].strip).to eq(
-        "<a class=\"mention\" href=\"/u/#{other_user.username}\">@#{other_user.username}</a> &lt;mark&gt;not marked&lt;/mark&gt;",
+        "@#{other_user.username} &lt;mark&gt;not marked&lt;/mark&gt;",
       )
 
       channel_page.fill_composer("reply to message")