UX: improved collapsed drawer state/interactions (#29850)

- Clicking the channel title of a collapsed drawer will only open the drawer, and not open settings
- Remove the back button when the drawer is collapsed
- Uses same icon for toggling on chat that composer
- add max-width to minimised drawer + add hover effect
---------

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>

app/assets/javascripts/discourse/app/components/composer-toggles.js

@@ -29,13 +29,13 @@ export default class ComposerToggles extends Component {
   toggleIcon(composeState) {
     return composeState === "draft" || composeState === "saving"
       ? "xmark"
-      : "chevron-down";
+      : "angles-down";
   }
 
   @discourseComputed("composeState")
   fullscreenIcon(composeState) {
     return composeState === "draft"
-      ? "chevron-up"
+      ? "angles-up"
       : composeState === "fullscreen"
       ? "discourse-compress"
       : "discourse-expand";

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

@@ -12,7 +12,7 @@
     data-chat-thread-id={{this.chat.activeChannel.activeThread.id}}
     class={{concat-class
       "chat-drawer"
-      (if this.chatStateManager.isDrawerExpanded "is-expanded")
+      (if this.chatStateManager.isDrawerExpanded "is-expanded" "is-collapsed")
     }}
     {{chat/resizable-node ".chat-drawer-resizer" this.didResize}}
     style={{this.drawerStyle}}

plugins/chat/assets/javascripts/discourse/components/chat/navbar/back-button.gjs

@@ -1,9 +1,12 @@
 import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
+import { service } from "@ember/service";
 import icon from "discourse-common/helpers/d-icon";
 import { i18n } from "discourse-i18n";
 
 export default class ChatNavbarBackButton extends Component {
+  @service chatStateManager;
+
   get icon() {
     return this.args.icon ?? "chevron-left";
   }
@@ -16,32 +19,41 @@ export default class ChatNavbarBackButton extends Component {
     return this.args.route ?? "chat";
   }
 
+  get showBackButton() {
+    return (
+      this.chatStateManager.isDrawerExpanded ||
+      this.chatStateManager.isFullPageActive
+    );
+  }
+
   <template>
-    {{#if @routeModels}}
-      <LinkTo
-        @route={{@route}}
-        @models={{@routeModels}}
-        class="c-navbar__back-button no-text btn-transparent btn"
-        title={{this.title}}
-      >
-        {{#if (has-block)}}
-          {{yield}}
-        {{else}}
-          {{icon this.icon}}
-        {{/if}}
-      </LinkTo>
-    {{else}}
-      <LinkTo
-        @route={{this.targetRoute}}
-        class="c-navbar__back-button no-text btn-transparent btn"
-        title={{this.title}}
-      >
-        {{#if (has-block)}}
-          {{yield}}
-        {{else}}
-          {{icon this.icon}}
-        {{/if}}
-      </LinkTo>
+    {{#if this.showBackButton}}
+      {{#if @routeModels}}
+        <LinkTo
+          @route={{@route}}
+          @models={{@routeModels}}
+          class="c-navbar__back-button no-text btn-transparent btn"
+          title={{this.title}}
+        >
+          {{#if (has-block)}}
+            {{yield}}
+          {{else}}
+            {{icon this.icon}}
+          {{/if}}
+        </LinkTo>
+      {{else}}
+        <LinkTo
+          @route={{this.targetRoute}}
+          class="c-navbar__back-button no-text btn-transparent btn"
+          title={{this.title}}
+        >
+          {{#if (has-block)}}
+            {{yield}}
+          {{else}}
+            {{icon this.icon}}
+          {{/if}}
+        </LinkTo>
+      {{/if}}
     {{/if}}
   </template>
 }

plugins/chat/assets/javascripts/discourse/components/chat/navbar/channel-title.gjs

@@ -1,16 +1,26 @@
+import Component from "@glimmer/component";
 import { LinkTo } from "@ember/routing";
+import { service } from "@ember/service";
 import ChannelTitle from "discourse/plugins/chat/discourse/components/channel-title";
 
-const ChatNavbarChannelTitle = <template>
-  {{#if @channel}}
-    <LinkTo
-      @route="chat.channel.info.settings"
-      @models={{@channel.routeModels}}
-      class="c-navbar__channel-title"
-    >
-      <ChannelTitle @channel={{@channel}} />
-    </LinkTo>
-  {{/if}}
-</template>;
+export default class ChatNavbarChannelTitle extends Component {
+  @service chatStateManager;
 
-export default ChatNavbarChannelTitle;
+  <template>
+    {{#if @channel}}
+      {{#if this.chatStateManager.isDrawerExpanded}}
+        <LinkTo
+          @route="chat.channel.info.settings"
+          @models={{@channel.routeModels}}
+          class="c-navbar__channel-title"
+        >
+          <ChannelTitle @channel={{@channel}} />
+        </LinkTo>
+      {{else}}
+        <div class="c-navbar__channel-title">
+          <ChannelTitle @channel={{@channel}} />
+        </div>
+      {{/if}}
+    {{/if}}
+  </template>
+}

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

@@ -8,6 +8,10 @@ body.composer-open .chat-drawer-outlet-container {
   width: 15px;
   height: 15px;
   z-index: z("composer", "content");
+
+  .is-collapsed & {
+    display: none;
+  }
 }
 
 html:not(.rtl) {
@@ -76,9 +80,10 @@ html.rtl {
     }
   }
 
-  &:not(.is-expanded) {
+  &.is-collapsed {
     min-height: 0 !important;
     height: auto !important;
+    max-width: 25vw;
   }
 
   .chat-channel,

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

@@ -32,13 +32,43 @@
   width: 100%;
   gap: 0.25rem;
   position: relative;
+  container-type: inline-size;
+
+  .is-collapsed & {
+    margin-left: 1rem;
+    &__title {
+      margin-left: 0 !important;
+    }
+
+    &__toggle-drawer-button {
+      &:after {
+        @container (inline-size) {
+          content: "";
+          position: absolute;
+          height: 100%;
+          left: 0;
+          width: calc(100cqw - 2.3em + 1rem);
+        }
+
+        &:hover {
+          color: var(--tertiary-hover);
+
+          .d-icon {
+            color: inherit;
+          }
+        }
+      }
+    }
+  }
 
   .single-select-header {
     padding: 0.3675rem 0.584rem;
   }
 
   > .c-navbar__title:first-child {
-    margin-left: 1rem;
+    .chat-drawer & {
+      margin-left: 1rem;
+    }
   }
 }