From a12b933f5c88bf2404e13f1c6284afd397e5dd61 Mon Sep 17 00:00:00 2001
From: Jan Cernik <66427541+jancernik@users.noreply.github.com>
Date: Tue, 27 Aug 2024 07:50:36 -0500
Subject: [PATCH] UX: highlight the chat channel/DM only when chat is expanded
 (#28488)

---
 .../discourse/initializers/chat-sidebar.js        | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
index 5cc0967cb43..7de1e561528 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
@@ -51,6 +51,7 @@ export default {
       const chatChannelsManager = container.lookup(
         "service:chat-channels-manager"
       );
+      const chatStateManager = container.lookup("service:chat-state-manager");
 
       api.addSidebarSection(
         (BaseCustomSidebarSection, BaseCustomSidebarSectionLink) => {
@@ -119,6 +120,7 @@ export default {
                 super(...arguments);
                 this.channel = channel;
                 this.chatService = chatService;
+                this.chatStateManager = chatStateManager;
               }
 
               get name() {
@@ -132,7 +134,11 @@ export default {
                   classes.push("sidebar-section-link--muted");
                 }
 
-                if (this.channel.id === this.chatService.activeChannel?.id) {
+                if (
+                  this.channel.id === this.chatService.activeChannel?.id &&
+                  (this.chatStateManager.isDrawerExpanded ||
+                    this.chatStateManager.isFullPageActive)
+                ) {
                   classes.push("sidebar-section-link--active");
                 }
 
@@ -289,6 +295,7 @@ export default {
               this.channel = channel;
               this.chatService = chatService;
               this.currentUser = currentUser;
+              this.chatStateManager = chatStateManager;
 
               if (this.oneOnOneMessage) {
                 const user = this.channel.chatable.users[0];
@@ -330,7 +337,11 @@ export default {
                 classes.push("sidebar-section-link--muted");
               }
 
-              if (this.channel.id === this.chatService.activeChannel?.id) {
+              if (
+                this.channel.id === this.chatService.activeChannel?.id &&
+                (this.chatStateManager.isDrawerExpanded ||
+                  this.chatStateManager.isFullPageActive)
+              ) {
                 classes.push("sidebar-section-link--active");
               }