UX: thread list design changes (#23348)

chapoi · web-flow · commit c9c2a734413f · 2023-08-31T18:09:41.000+02:00
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/item.hbs
@@ -14,9 +14,6 @@
       {{on "click" (fn this.openThread @thread) passive=true}}
     >
       <div class="chat-thread-list-item__header">
-        <div class="chat-thread-list-item__om-user-avatar">
-          <Chat::UserAvatar @user={{@thread.originalMessage.user}} />
-        </div>
         <div class="chat-thread-list-item__title">
           {{#if this.title}}
             {{replace-emoji this.title}}
@@ -31,29 +28,31 @@
 
       <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)}}
         </span>
       </div>
 
       <div class="chat-thread-list-item__metadata">
-        <Chat::Thread::Participants
-          @thread={{@thread}}
-          @includeOriginalMessageUser={{false}}
-          class="chat-thread-list-item__participants"
-        />
-        <span class="chat-thread-list-item__replies-count">
-          {{i18n "chat.thread.replies" count=@thread.preview.replyCount}}
-        </span>
-        <span class="chat-thread-list-item__metadata__separator">·</span>
+
         <div class="chat-thread-list-item__last-reply-timestamp">
           {{#if @thread.preview.lastReplyCreatedAt}}
             <span>{{i18n "chat.thread.last_reply"}}</span>
             {{format-date @thread.preview.lastReplyCreatedAt leaveAgo="true"}}
           {{/if}}
         </div>
+
+        <Chat::UserAvatar
+          @user={{@thread.originalMessage.user}}
+          @showPresence={{false}}
+        />
+        <Chat::Thread::Participants
+          @thread={{@thread}}
+          @includeOriginalMessageUser={{false}}
+          class="chat-thread-list-item__participants"
+        />
       </div>
     </div>
   </div>
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss b/plugins/chat/assets/stylesheets/common/chat-thread-list-item.scss
@@ -10,7 +10,7 @@
 .chat-thread-list-item {
   @include thread-list-item;
   cursor: pointer;
-  margin: 0.25rem;
+  margin: 0.75rem;
 
   & + .chat-thread-list-item {
     margin-top: 0;
@@ -44,7 +44,10 @@
   &__body {
     padding-bottom: 0.25rem;
     word-break: break-word;
-    margin: 0.5rem 0rem;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
 
     > * {
       pointer-events: none;
@@ -53,34 +56,35 @@
 
   &__last-reply-author {
     font-weight: 700;
+    font-size: var(--font-down-1);
+    color: var(--primary-high);
   }
 
   &__metadata {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-  }
+    justify-content: flex-end;
 
-  &__metadata__separator {
-    padding-inline: 0.5rem;
-    font-weight: 700;
-    font-size: 20px;
-    text-align: center;
+    .chat-user-avatar {
+      .avatar {
+        border: 1px solid var(--primary-very-low);
+      }
+
+      &:not(:last-child) {
+        margin-right: -8px;
+      }
+    }
   }
 
   &__participants {
     margin-right: 0.25rem;
   }
 
-  &__replies-count {
-    margin-left: auto;
-  }
-
-  &__last-reply-timestamp,
-  &__replies-count {
-    color: var(--secondary-low);
-    font-size: var(--font-down-1);
+  &__last-reply-timestamp {
+    color: var(--primary-medium);
+    font-size: var(--font-down-2);
     @include ellipsis;
+    margin-right: auto;
   }
 
   &__header {
@@ -92,13 +96,12 @@
 
   &__title {
     flex: 1 1 auto;
-    font-weight: 500;
-    font-size: var(--font-up-1);
+    font-weight: bold;
     @include ellipsis;
   }
 
   &__last-reply-excerpt {
-    font-size: var(--font-0);
+    font-size: var(--font-down-1);
   }
 
   &__unread-indicator {
@@ -118,7 +121,7 @@
   }
 
   &__om-user-avatar {
-    margin-right: 0.25rem;
+    margin-right: 0.5rem;
     flex: 0 0 auto;
   }
 }
diff --git a/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss b/plugins/chat/assets/stylesheets/common/chat-thread-participants.scss
@@ -3,6 +3,7 @@
     font-size: var(--font-down-2);
     color: var(--primary-high);
     white-space: nowrap;
+    margin-left: 0.25rem;
   }
 
   &__avatar-group {
diff --git a/plugins/chat/spec/system/thread_list/full_page_spec.rb b/plugins/chat/spec/system/thread_list/full_page_spec.rb
@@ -108,10 +108,10 @@
       )
     end
 
-    it "shows the thread original message user avatar" do
+    it "doesn’t show the thread original message user avatar" do
       chat_page.visit_channel(channel)
       channel_page.open_thread_list
-      expect(thread_list_page.item_by_id(thread_1.id)).to have_css(
+      expect(thread_list_page.item_by_id(thread_1.id)).to have_no_css(
         thread_list_page.avatar_selector(thread_1.original_message.user),
       )
     end
@@ -126,16 +126,6 @@
       )
     end
 
-    it "shows replies count" do
-      chat_page.visit_channel(channel)
-      channel_page.open_thread_list
-
-      expect(thread_list_page.item_by_id(thread_1.id)).to have_css(
-        ".chat-thread-list-item__replies-count",
-        text: I18n.t("js.chat.thread.replies", count: thread_1.replies_count_cache),
-      )
-    end
-
     it "shows participants" do
       chat_page.visit_channel(channel)
       channel_page.open_thread_list

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`font-size: var(--font-down-2);`
`4`	`4`	`color: var(--primary-high);`
`5`	`5`	`white-space: nowrap;`
	`6`	`+ margin-left: 0.25rem;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`&__avatar-group {`