UX: various tweaks on thread (#21083)

- Back button in drawer will bring you back to channel
- Larger font for thread indicator
- Prevents screen flashing due to clearing messages when they were already loaded
- Fixes a bug where did-update params were inverted causing an error when expanding/collapsing drawer

plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/back-link.hbs

@@ -1,7 +1,8 @@
 <LinkTo
-  title={{i18n "chat.return_to_list"}}
+  title={{@title}}
-  class="chat-drawer-header__return-to-channels-btn"
+  class="chat-drawer-header__back-btn"
-  @route="chat"
+  @route={{@route}}
+  @models={{or @routeModels (array)}}
 >
   {{d-icon "chevron-left"}}
 </LinkTo>

plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/left-actions.hbs

@@ -1,7 +1,10 @@
 {{#if this.chatStateManager.isDrawerExpanded}}
   <div class="chat-drawer-header__left-actions">
     <div class="chat-drawer-header__top-line">
-      <ChatDrawer::Header::BackLink />
+      <ChatDrawer::Header::BackLink
+        @route="chat"
+        @title={{i18n "chat.return_to_list"}}
+      />
     </div>
   </div>
 {{/if}}

plugins/chat/assets/javascripts/discourse/components/chat-drawer/thread.hbs

@@ -1,10 +1,17 @@
 <ChatDrawer::Header @toggleExpand={{@drawerActions.toggleExpand}}>
-  <ChatDrawer::Header::LeftActions />
+  {{#if (and this.chatStateManager.isDrawerExpanded this.chat.activeChannel)}}
+    <div class="chat-drawer-header__left-actions">
+      <div class="chat-drawer-header__top-line">
+        <ChatDrawer::Header::BackLink
+          @route="chat.channel"
+          @title={{i18n "chat.return_to_list"}}
+          @routeModels={{this.chat.activeChannel.routeModels}}
+        />
+      </div>
+    </div>
+  {{/if}}
 
-  <ChatDrawer::Header::ChannelTitle
+  <ChatDrawer::Header::Title @title="chat.thread.label" />
-    @channel={{this.chat.activeChannel}}
-    @drawerActions={{@drawerActions}}
-  />
 
   <ChatDrawer::Header::RightActions @drawerActions={{@drawerActions}} />
 </ChatDrawer::Header>

plugins/chat/assets/javascripts/discourse/components/chat-live-pane.hbs

@@ -12,6 +12,7 @@
   {{did-update this.updateChannel @channel.id}}
   {{did-insert this.addAutoFocusEventListener}}
   {{will-destroy this.removeAutoFocusEventListener}}
+  data-id={{@channel.id}}
 >
   <ChatFullPageHeader
     @channel={{@channel}}

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

@@ -2,18 +2,20 @@
   class={{concat-class "chat-thread" (if this.loading "loading")}}
   data-id={{this.thread.id}}
   {{did-insert this.loadMessages}}
-  {{did-update this.thread.id this.loadMessages}}
+  {{did-update this.loadMessages this.thread.id}}
 >
-  <div class="chat-thread__header">
+  {{#if @includeHeader}}
-    <span class="chat-thread__label">{{i18n "chat.thread.label"}}</span>
+    <div class="chat-thread__header">
-    <LinkTo
+      <span class="chat-thread__label">{{i18n "chat.thread.label"}}</span>
-      class="chat-thread__close"
+      <LinkTo
-      @route="chat.channel"
+        class="chat-thread__close"
-      @models={{this.chat.activeChannel.routeModels}}
+        @route="chat.channel"
-    >
+        @models={{this.chat.activeChannel.routeModels}}
-      {{d-icon "times"}}
+      >
-    </LinkTo>
+        {{d-icon "times"}}
-  </div>
+      </LinkTo>
+    </div>
+  {{/if}}
 
   <div
     class="chat-thread__body popper-viewport"

plugins/chat/assets/javascripts/discourse/components/chat-thread.js

@@ -44,6 +44,8 @@ export default class ChatThreadPanel extends Component {
 
   @action
   loadMessages() {
+    this.thread.messagesManager.clearMessages();
+
     if (this.args.targetMessageId) {
       this.requestedTargetMessageId = parseInt(this.args.targetMessageId, 10);
     }
@@ -73,7 +75,6 @@ export default class ChatThreadPanel extends Component {
 
     this.loadingMorePast = true;
     this.loading = true;
-    this.thread.messagesManager.clearMessages();
 
     const findArgs = { pageSize: PAGE_SIZE };
 

plugins/chat/assets/javascripts/discourse/templates/chat-channel-thread.hbs

@@ -1,2 +1,2 @@
 {{! ChatThreadList will go here later }}
-<ChatThread />
+<ChatThread @includeHeader={{true}} />

plugins/chat/assets/stylesheets/common/chat-drawer.scss

@@ -204,7 +204,7 @@ a.chat-drawer-header__title {
   }
 
   &__close-btn,
-  &__return-to-channels-btn,
+  &__back-btn,
   &__full-screen-btn,
   &__expand-btn {
     height: 30px;

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

@@ -18,12 +18,11 @@
 
   &__replies-count {
     color: var(--primary-medium);
-
+    font-size: var(--font-down-1);
-    font-size: var(--font-down-2);
   }
 
   &__view-thread {
-    font-size: var(--font-down-2);
+    font-size: var(--font-down-1);
 
     .chat-message-thread-indicator:hover & {
       text-decoration: underline;

plugins/chat/spec/system/navigation_spec.rb

@@ -216,7 +216,7 @@ RSpec.describe "Navigation", type: :system, js: true do
         visit("/")
         chat_page.open_from_header
         chat_drawer_page.open_channel(category_channel_2)
-        chat_drawer_page.open_index
+        chat_drawer_page.back
         chat_drawer_page.close
         chat_page.open_from_header
 

plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb

@@ -16,8 +16,8 @@ module PageObjects
         find("#{VISIBLE_DRAWER} .chat-drawer-header__close-btn").click
       end
 
-      def open_index
+      def back
-        find("#{VISIBLE_DRAWER} .chat-drawer-header__return-to-channels-btn").click
+        find("#{VISIBLE_DRAWER} .chat-drawer-header__back-btn").click
       end
 
       def open_channel(channel)
@@ -34,6 +34,10 @@ module PageObjects
       def has_open_thread?(thread)
         has_css?("#{VISIBLE_DRAWER} .chat-thread[data-id='#{thread.id}']")
       end
+
+      def has_open_channel?(channel)
+        has_css?("#{VISIBLE_DRAWER} .chat-live-pane[data-id='#{channel.id}']")
+      end
     end
   end
 end

plugins/chat/spec/system/single_thread_spec.rb

@@ -58,6 +58,18 @@ describe "Single thread in side panel", type: :system, js: true do
       expect(chat_drawer_page).to have_open_thread(thread)
     end
 
+    it "navigates back to the channel when clicking back button from a thread" do
+      visit("/latest")
+      chat_page.open_from_header
+      chat_drawer_page.open_channel(channel)
+      channel_page.message_thread_indicator(thread.original_message).click
+      expect(chat_drawer_page).to have_open_thread(thread)
+
+      chat_drawer_page.back
+
+      expect(chat_drawer_page).to have_open_channel(channel)
+    end
+
     it "opens the side panel for a single thread from the indicator" do
       chat_page.visit_channel(channel)
       channel_page.message_thread_indicator(thread.original_message).click