FIX: correctly highlights active channel (#18991)

Prior to this change, only hovering the row would highlight it.

plugins/chat/assets/javascripts/discourse/components/topic-chat-float.js

@@ -253,6 +253,7 @@ export default Component.extend({
   close() {
     this.set("hidden", true);
     this.set("expanded", false);
+    this.chat.setActiveChannel(null);
     this.appEvents.trigger("chat:float-toggled", this.hidden);
   },
 

plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js

@@ -10,6 +10,7 @@ import { emojiUnescape } from "discourse/lib/text";
 import { decorateUsername } from "discourse/helpers/decorate-username-selector";
 import { until } from "discourse/lib/formatter";
 import { inject as service } from "@ember/service";
+import { computed } from "@ember/object";
 
 export default {
   name: "chat-sidebar",
@@ -60,10 +61,19 @@ export default {
               return dasherize(slugifyChannel(this.channel));
             }
 
+            @computed("chatService.activeChannel")
             get classNames() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link--muted"
-                : "";
+              const classes = [];
+
+              if (this.channel.current_user_membership.muted) {
+                classes.push("sidebar-section-link--muted");
+              }
+
+              if (this.channel.id === this.chatService.activeChannel?.id) {
+                classes.push("sidebar-section-link--active");
+              }
+
+              return classes.join(" ");
             }
 
             get route() {
@@ -239,10 +249,19 @@ export default {
               return slugifyChannel(this.channel);
             }
 
+            @computed("chatService.activeChannel")
             get classNames() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link--muted"
-                : "";
+              const classes = [];
+
+              if (this.channel.current_user_membership.muted) {
+                classes.push("sidebar-section-link--muted");
+              }
+
+              if (this.channel.id === this.chatService.activeChannel?.id) {
+                classes.push("sidebar-section-link--active");
+              }
+
+              return classes.join(" ");
             }
 
             get route() {

plugins/chat/assets/stylesheets/sidebar-extensions.scss

@@ -162,6 +162,10 @@
     }
   }
 
+  .sidebar-section-link--active {
+    background: var(--primary-low);
+  }
+
   .sidebar-section-link--muted {
     opacity: 0.5;
 

plugins/chat/spec/system/navigation_spec.rb

@@ -216,5 +216,50 @@ RSpec.describe "Navigation", type: :system, js: true do
         expect(page).to have_content(category_channel_2.title)
       end
     end
+
+    context "when opening a channel in full page" do
+      it "activates the channel in the sidebar" do
+        visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}")
+        expect(page).to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
+
+    context "when clicking logo from a channel in full page" do
+      it "deactivates the channel in the sidebar" do
+        visit("/chat/channel/#{category_channel.id}/#{category_channel.slug}")
+        find("#site-logo").click
+
+        expect(page).not_to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
+
+    context "when opening a channel in drawer" do
+      it "activates the channel in the sidebar" do
+        visit("/")
+        chat_page.open_from_header
+        find("a[title='#{category_channel.title}']").click
+
+        expect(page).to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
+
+    context "when closing drawer in a channel" do
+      it "deactivates the channel in the sidebar" do
+        visit("/")
+        chat_page.open_from_header
+        find("a[title='#{category_channel.title}']").click
+        chat_drawer_page.close
+
+        expect(page).not_to have_css(
+          ".sidebar-section-link-#{category_channel.slug}.sidebar-section-link--active",
+        )
+      end
+    end
   end
 end