UX: Muted style for entire chat section link when muted (#18852)

app/assets/javascripts/discourse/app/components/sidebar/user/sections.hbs

@@ -24,6 +24,7 @@
       {{#each customSection.links as |link|}}
         <Sidebar::SectionLink
           @linkName={{link.name}}
+          @class={{link.classNames}}
           @route={{link.route}}
           @model={{link.model}}
           @models={{link.models}}

app/assets/javascripts/discourse/app/lib/sidebar/base-custom-sidebar-section-link.js

@@ -9,6 +9,13 @@ export default class BaseCustomSidebarSectionLink {
     this._notImplemented();
   }
 
+  /**
+   * @returns {string} The classnames of the section link.
+   */
+  get classNames() {
+    return "";
+  }
+
   /**
    * @returns {string} The Ember route which the section link should link to.
    */

app/assets/javascripts/discourse/tests/acceptance/sidebar-plugin-api-test.js

@@ -69,6 +69,10 @@ acceptance("Sidebar - Plugin API", function (needs) {
                     return "random-channel";
                   }
 
+                  get classNames() {
+                    return "my-class-name";
+                  }
+
                   get route() {
                     return "topic";
                   }
@@ -243,6 +247,11 @@ acceptance("Sidebar - Plugin API", function (needs) {
       "displays first link with correct text"
     );
 
+    assert.ok(
+      exists(".sidebar-section-link.my-class-name"),
+      "sets the custom class name for the section link"
+    );
+
     assert.strictEqual(
       links[0].title,
       "random channel title",

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

@@ -61,6 +61,12 @@ export default {
               return dasherize(slugifyChannel(this.title));
             }
 
+            get classNames() {
+              return this.channel.current_user_membership.muted
+                ? "sidebar-section-link--muted"
+                : "";
+            }
+
             get route() {
               return "chat.channel";
             }
@@ -108,12 +114,6 @@ export default {
                 ? "urgent"
                 : "unread";
             }
-
-            get contentCSSClass() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link-content-muted"
-                : "";
-            }
           };
 
           const SidebarChatChannelsSection = class extends BaseCustomSidebarSection {
@@ -243,6 +243,12 @@ export default {
               return slugifyChannel(this.title);
             }
 
+            get classNames() {
+              return this.channel.current_user_membership.muted
+                ? "sidebar-section-link--muted"
+                : "";
+            }
+
             get route() {
               return "chat.channel";
             }
@@ -307,12 +313,6 @@ export default {
               return "";
             }
 
-            get contentCSSClass() {
-              return this.channel.current_user_membership.muted
-                ? "sidebar-section-link-content-muted"
-                : "";
-            }
-
             get suffixType() {
               return "icon";
             }

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

@@ -162,7 +162,7 @@
     }
   }
 
-  .sidebar-section-link-content-muted {
+  .sidebar-section-link--muted {
-    opacity: 0.65;
+    opacity: 0.3;
   }
 }

plugins/chat/test/javascripts/acceptance/core-sidebar-test.js

@@ -310,9 +310,9 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-chat-dms .sidebar-section-link-sam .sidebar-section-link-content-muted"
+        ".sidebar-section-chat-dms .sidebar-section-link-sam.sidebar-section-link--muted"
       ),
-      "muted direct chat channel has right CSS class configured"
+      "muted direct chat channel section link has right classname configured"
     );
   });
 
@@ -321,9 +321,9 @@ acceptance("Discourse Chat - Core Sidebar", function (needs) {
 
     assert.ok(
       exists(
-        ".sidebar-section-chat-channels .sidebar-section-link-random .sidebar-section-link-content-muted"
+        ".sidebar-section-chat-channels .sidebar-section-link-random.sidebar-section-link--muted"
       ),
-      "muted random chat channel has right CSS class configured"
+      "muted random chat channel section link has right classname configured"
     );
   });