From c7b49a14c722f68fd47d3651ddb81aa168e3987a Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Mon, 10 Apr 2023 07:43:11 +0200
Subject: [PATCH] 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
---
 .../components/chat-drawer/channel.hbs        |  2 +-
 .../components/chat-drawer/draft-channel.hbs  |  2 +-
 .../components/chat-drawer/header.hbs         |  7 +++
 .../components/chat-drawer/header.js          |  6 +++
 .../chat-drawer/header/right-actions.hbs      |  6 +--
 .../header/toggle-expand-button.hbs           |  6 ++-
 .../components/chat-drawer/index.hbs          |  9 +++-
 .../components/chat-drawer/thread.hbs         |  2 +-
 .../stylesheets/common/chat-drawer.scss       | 43 +++++++++++++------
 plugins/chat/config/locales/client.en.yml     |  1 +
 plugins/chat/spec/system/drawer_spec.rb       | 12 ++++++
 11 files changed, 73 insertions(+), 23 deletions(-)
 create mode 100644 plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.js

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.hbs
index 45a1360f5c1..7a94b39267e 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/channel.hbs
+++ b/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
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.hbs
index 4ffca1a505b..1ead7951144 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/draft-channel.hbs
+++ b/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}} />
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.hbs
index 45a25d6fed4..416b6e5616c 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.hbs
+++ b/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>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.js b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header.js
new file mode 100644
index 00000000000..f38df7fe6e0
--- /dev/null
+++ b/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;
+}
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.hbs
index 38ad3860de1..c022dcdc028 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/right-actions.hbs
+++ b/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>
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs
index 9514aeb96b7..28d93d22fd0 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/header/toggle-expand-button.hbs
+++ b/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"
+  }}
 />
\ No newline at end of file
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.hbs
index 4f44d5f9453..080e5ab4ea5 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.hbs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/index.hbs
@@ -1,5 +1,10 @@
-<ChatDrawer::Header>
-  <ChatDrawer::Header::Title @title="chat.heading" />
+<ChatDrawer::Header @toggleExpand={{@drawerActions.toggleExpand}}>
+  <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>
 
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/thread.hbs b/plugins/chat/assets/javascripts/discourse/components/chat-drawer/thread.hbs
index a51bd5cfacd..3b2e19a4abd 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-drawer/thread.hbs
+++ b/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
diff --git a/plugins/chat/assets/stylesheets/common/chat-drawer.scss b/plugins/chat/assets/stylesheets/common/chat-drawer.scss
index 947838ecaa9..ffc08c688b7 100644
--- a/plugins/chat/assets/stylesheets/common/chat-drawer.scss
+++ b/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: 100%;
+  width: auto;
   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 {
-    padding: 0;
+  .chat-drawer-header__top-line {
+    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: 100%;
-    min-width: 40px;
-    width: 40px;
+    height: 30px;
+    width: 30px;
     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);
       }
     }
   }
diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml
index 503dc4de407..19252aec4ef 100644
--- a/plugins/chat/config/locales/client.en.yml
+++ b/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]"
diff --git a/plugins/chat/spec/system/drawer_spec.rb b/plugins/chat/spec/system/drawer_spec.rb
index 1807887a92f..afbec08b2a2 100644
--- a/plugins/chat/spec/system/drawer_spec.rb
+++ b/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) }