Highlight by flair.

assets/chat/css/style.scss

@@ -318,6 +318,7 @@ hr {
   align-items: center;
   margin-left: -$gutter-xs;
   .flair {
+    cursor: pointer;
     margin-left: $gutter-xs;
   }
 }
@@ -518,7 +519,7 @@ hr {
 }
 
 /* Focus or highlight a line */
-.focus-user .msg-chat {
+.focus .msg-chat {
   opacity: 0.3;
 }
 
@@ -1013,6 +1014,7 @@ hr {
         align-items: center;
         margin-right: $gutter-md;
         .flair {
+          cursor: pointer;
           margin-right: $gutter-xs;
         }
       }

assets/chat/js/focus.js

@@ -16,38 +16,42 @@ class ChatUserFocus {
     const t = $(target);
     if (t.hasClass('chat-user')) {
       if (!this.chat.settings.get('focusmentioned'))
-        this.toggleFocus(t.closest('.msg-user').data('username'), true);
+        this.toggleFocus(t.closest('.msg-user').data('username'), false, true);
       this.toggleFocus(t.text());
     } else if (t.hasClass('user')) {
       this.toggleFocus(t.text());
+    } else if (t.hasClass('flair')) {
+      this.toggleFocus(t.data('flair'), true);
     } else if (this.focused.length > 0) {
       this.clearFocus();
     }
   }
 
-  toggleFocus(username = '', onlyAdd = false) {
-    const normalizedUsername = username.toLowerCase();
-    const index = this.focused.indexOf(normalizedUsername);
+  toggleFocus(value = '', isFlair = false, onlyAdd = false) {
+    const normalized = value.toLowerCase();
+    const index = this.focused.indexOf(normalized);
     const focused = index !== -1;
 
     if (!focused) {
-      this.addCssRule(normalizedUsername);
+      this.addCssRule(normalized, isFlair);
     } else if (!onlyAdd) {
       this.removeCssRule(index);
     }
 
     return this;
   }
 
-  addCssRule(username) {
+  addCssRule(value, isFlair) {
     let rule;
-    if (this.chat.settings.get('focusmentioned')) {
-      rule = `.msg-user[data-username="${username}"],.msg-user[data-mentioned~="${username}"]{opacity:1 !important;}`;
+    if (isFlair) {
+      rule = `.msg-user:has(.features .flair.${value}){opacity:1 !important;}`;
+    } else if (this.chat.settings.get('focusmentioned')) {
+      rule = `.msg-user[data-username="${value}"],.msg-user[data-mentioned~="${value}"]{opacity:1 !important;}`;
     } else {
-      rule = `.msg-user[data-username="${username}"]{opacity:1 !important;}`;
+      rule = `.msg-user[data-username="${value}"]{opacity:1 !important;}`;
     }
     this.css.insertRule(rule, this.focused.length); // max 4294967295
-    this.focused.push(username);
+    this.focused.push(value);
     this.redraw();
   }
 
@@ -64,7 +68,7 @@ class ChatUserFocus {
   }
 
   redraw() {
-    this.chat.ui.toggleClass('focus-user', this.focused.length > 0);
+    this.chat.ui.toggleClass('focus', this.focused.length > 0);
   }
 }
 

assets/chat/js/menus/ChatUserMenu.js

@@ -46,6 +46,9 @@ export default class ChatUserMenu extends ChatMenu {
     this.container.on('click', '.user', (e) =>
       this.chat.userfocus.toggleFocus(e.target.getAttribute('data-username'))
     );
+    this.container.on('click', '.flair', (e) =>
+      this.chat.userfocus.toggleFocus(e.target.getAttribute('data-flair'), true)
+    );
     this.container.on('click', '.mention-nick', (e) => {
       ChatMenu.closeMenus(this.chat);
       const value = this.chat.input.val().toString().trim();
@@ -121,7 +124,8 @@ export default class ChatUserMenu extends ChatMenu {
       .map((e) => this.chat.flairsMap.get(e))
       .sort((a, b) => a.priority - b.priority)
       .reduce(
-        (str, e) => `${str}<i class="flair ${e.name}" title="${e.label}"></i> `,
+        (str, e) =>
+          `${str}<i data-flair="${e.name}" class="flair ${e.name}" title="${e.label}"></i> `,
         ''
       );
     return features !== '' ? `<span class="features">${features}</span>` : '';

assets/chat/js/messages/ChatUserMessage.js

@@ -55,7 +55,8 @@ export default class ChatUserMessage extends ChatMessage {
       .filter((e) => chat.flairsMap.has(e))
       .map((e) => chat.flairsMap.get(e))
       .reduce(
-        (str, e) => `${str}<i class="flair ${e.name}" title="${e.label}"></i> `,
+        (str, e) =>
+          `${str}<i data-flair="${e.name}" class="flair ${e.name}" title="${e.label}"></i> `,
         ''
       );
     return features !== '' ? `<span class="features">${features}</span>` : '';