Chat/drawer ux tweaks (#21032)

- clicking empty area on the header will toggle collapse/expand it
- applies a background on hover of the channel title
- active state for small buttons
- the back button now has the correct icon color when hovered
- adds missing focus state for heade buttons icons

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

@@ -1,4 +1,4 @@
-<ChatDrawer::Header>
+<ChatDrawer::Header @toggleExpand={{@drawerActions.toggleExpand}}>
   <ChatDrawer::Header::LeftActions />
 
   <ChatDrawer::Header::ChannelTitle

plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.hbs

@@ -1,4 +1,4 @@
-<ChatDrawer::Header>
+<ChatDrawer::Header @toggleExpand={{@drawerActions.toggleExpand}}>
   <ChatDrawer::Header::LeftActions />
   <ChatDrawer::Header::Title @title="chat.direct_message_creator.title" />
   <ChatDrawer::Header::RightActions @drawerActions={{@drawerActions}} />

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

@@ -1,7 +1,14 @@
+{{! template-lint-disable no-invalid-interactive }}
 <div
   role="region"
   aria-label={{i18n "chat.aria_roles.header"}}
   class="chat-drawer-header"
+  {{on "click" @toggleExpand}}
+  title={{if
+    this.chatStateManager.isDrawerExpanded
+    (i18n "chat.collapse")
+    (i18n "chat.expand")
+  }}
 >
   {{yield}}
 </div>

plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.js

@@ -0,0 +1,6 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class ChatDrawerHeader extends Component {
+  @service chatStateManager;
+}

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

@@ -1,11 +1,11 @@
 <div class="chat-drawer-header__right-actions">
   <div class="chat-drawer-header__top-line">
-    <ChatDrawer::Header::FullPageButton
-      @openInFullPage={{@drawerActions.openInFullPage}}
-    />
     <ChatDrawer::Header::ToggleExpandButton
       @toggleExpand={{@drawerActions.toggleExpand}}
     />
+    <ChatDrawer::Header::FullPageButton
+      @openInFullPage={{@drawerActions.openInFullPage}}
+    />
     <ChatDrawer::Header::CloseButton @close={{@drawerActions.close}} />
   </div>
 </div>

plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs

@@ -6,5 +6,9 @@
   }}
   @class="btn-flat btn-link chat-drawer-header__expand-btn"
   @action={{@toggleExpand}}
-  @title="chat.collapse"
+  @title={{if
+    this.chatStateManager.isDrawerExpanded
+    "chat.collapse"
+    "chat.expand"
+  }}
 />

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

@@ -1,5 +1,10 @@
-<ChatDrawer::Header>
+<ChatDrawer::Header @toggleExpand={{@drawerActions.toggleExpand}}>
-  <ChatDrawer::Header::Title @title="chat.heading" />
+  <div class="chat-drawer-header__title">
+    <div class="chat-drawer-header__top-line">
+      {{i18n "chat.heading"}}
+    </div>
+  </div>
+
   <ChatDrawer::Header::RightActions @drawerActions={{@drawerActions}} />
 </ChatDrawer::Header>
 

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

@@ -1,4 +1,4 @@
-<ChatDrawer::Header>
+<ChatDrawer::Header @toggleExpand={{@drawerActions.toggleExpand}}>
   <ChatDrawer::Header::LeftActions />
 
   <ChatDrawer::Header::ChannelTitle

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

@@ -101,17 +101,16 @@ html.rtl {
 
 .chat-drawer-header__left-actions {
   display: flex;
-  height: 100%;
+  height: 2rem;
 }
 
 .chat-drawer-header__right-actions {
   display: flex;
-  height: 100%;
+  height: 2rem;
   margin-left: auto;
 }
 
 .chat-drawer-header__top-line {
-  height: 2.5rem;
   display: flex;
   align-items: center;
 }
@@ -125,14 +124,25 @@ html.rtl {
 .chat-drawer-header__title {
   @include ellipsis;
   display: flex;
-  flex-direction: column;
+  width: auto;
-  width: 100%;
   font-weight: 700;
-  padding: 0 0.5rem 0 1rem;
+  padding: 0 0.5rem 0 0;
   cursor: pointer;
+  height: 2rem;
+  align-items: center;
 
-  .chat-channel-title {
+  .chat-drawer-header__top-line {
-    padding: 0;
+    padding: 0.25rem;
+    width: 100%;
+  }
+}
+
+a.chat-drawer-header__title {
+  &:hover {
+    .chat-drawer-header__top-line {
+      background: var(--primary-low);
+      border-radius: 5px;
+    }
   }
 }
 
@@ -144,6 +154,8 @@ html.rtl {
   width: 100%;
   display: flex;
   align-items: flex-start;
+  cursor: pointer;
+  padding: 0.25rem;
 
   .btn {
     height: 100%;
@@ -195,13 +207,16 @@ html.rtl {
   &__return-to-channels-btn,
   &__full-screen-btn,
   &__expand-btn {
-    max-height: 2.5rem;
+    height: 30px;
-    height: 100%;
+    width: 30px;
-    min-width: 40px;
-    width: 40px;
     display: flex;
     justify-content: center;
     align-items: center;
+    border-radius: 100%;
+
+    &:hover:active {
+      background: var(--primary-low);
+    }
 
     .d-icon {
       color: var(--primary-low-mid);
@@ -219,13 +234,13 @@ html.rtl {
 
       .d-icon {
         background: none;
-        color: var(--primary-low-mid);
+        color: var(--primary);
       }
     }
 
     &:hover {
       .d-icon {
-        color: var(--primary-high);
+        color: var(--primary);
       }
     }
   }

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

@@ -79,6 +79,7 @@ en:
       click_to_join: "Click here to view available channels."
       close: "Close"
       collapse: "Collapse Chat Drawer"
+      expand: "Expand Chat Drawer"
       confirm_flag: "Are you sure you want to flag %{username}'s message?"
       deleted: "A message was deleted. [view]"
       hidden: "A message was hidden. [view]"

plugins/chat/spec/system/drawer_spec.rb

@@ -68,6 +68,18 @@ RSpec.describe "Drawer", type: :system, js: true do
     end
   end
 
+  context "when clicking the drawer's header" do
+    it "collapses the drawer" do
+      visit("/")
+      chat_page.open_from_header
+      expect(page).to have_selector(".chat-drawer.is-expanded")
+
+      page.find(".chat-drawer-header").click
+
+      expect(page).to have_selector(".chat-drawer:not(.is-expanded)")
+    end
+  end
+
   context "when going from drawer to full page" do
     fab!(:channel_1) { Fabricate(:chat_channel) }
     fab!(:channel_2) { Fabricate(:chat_channel) }