From 3cde55b76f6d681a243876b360bd8368c0a81ac6 Mon Sep 17 00:00:00 2001
From: David Battersby <info@davidbattersby.com>
Date: Fri, 29 Nov 2024 12:52:55 +0400
Subject: [PATCH] FIX: show urgent badge for mentions in DM threads (#29821)

When thread tracking level is Normal in a DM channel, we should still show notification badges to the mentioned user.
---
 .../chat-channel-unread-indicator.gjs         | 68 +++++++-------
 .../chat/footer/unread-indicator.gjs          |  5 +-
 .../chat/message-creator/channel.gjs          | 33 +++++--
 .../message-creator/lib/chatables-loader.js   | 31 +++++--
 .../components/chat/message-creator/user.gjs  | 25 +++++-
 .../discourse/initializers/chat-sidebar.js    | 14 ++-
 .../services/chat-channels-manager.js         | 32 ++++---
 .../services/chat-tracking-state-manager.js   |  2 +-
 plugins/chat/spec/system/chat_footer_spec.rb  | 36 +++++++-
 .../message_notifications_mobile_spec.rb      | 29 ++++++
 ...message_notifications_with_sidebar_spec.rb | 88 ++++++++++++++-----
 11 files changed, 265 insertions(+), 98 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat-channel-unread-indicator.gjs b/plugins/chat/assets/javascripts/discourse/components/chat-channel-unread-indicator.gjs
index af37fd903a0..e8fc3cff002 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat-channel-unread-indicator.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat-channel-unread-indicator.gjs
@@ -1,7 +1,8 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import concatClass from "discourse/helpers/concat-class";
-import { hasChatIndicator } from "../lib/chat-user-preferences";
+
+const MAX_UNREAD_COUNT = 99;
 
 export default class ChatChannelUnreadIndicator extends Component {
   @service chat;
@@ -10,48 +11,41 @@ export default class ChatChannelUnreadIndicator extends Component {
 
   get showUnreadIndicator() {
     return (
-      this.args.channel.tracking.unreadCount > 0 ||
-      this.args.channel.tracking.mentionCount > 0 ||
-      this.args.channel.unreadThreadsCountSinceLastViewed > 0
+      this.args.channel.tracking.unreadCount +
+        this.args.channel.tracking.mentionCount +
+        this.args.channel.unreadThreadsCountSinceLastViewed >
+      0
+    );
+  }
+
+  get publicUrgentCount() {
+    return (
+      this.args.channel.tracking.mentionCount +
+      this.args.channel.tracking.watchedThreadsUnreadCount
+    );
+  }
+
+  get directUrgentCount() {
+    return (
+      this.args.channel.tracking.unreadCount +
+      this.args.channel.tracking.mentionCount +
+      this.args.channel.tracking.watchedThreadsUnreadCount
     );
   }
 
   get urgentCount() {
-    if (this.hasChannelMentions) {
-      return this.args.channel.tracking.mentionCount;
-    }
-    if (this.hasWatchedThreads) {
-      return this.args.channel.tracking.watchedThreadsUnreadCount;
-    }
-    return this.args.channel.tracking.unreadCount;
+    return this.args.channel.isDirectMessageChannel
+      ? this.directUrgentCount
+      : this.publicUrgentCount;
   }
 
   get isUrgent() {
-    if (this.onlyMentions) {
-      return this.hasChannelMentions;
-    }
-    return (
-      this.isDirectMessage || this.hasChannelMentions || this.hasWatchedThreads
-    );
+    return this.urgentCount > 0;
   }
 
-  get isDirectMessage() {
-    return (
-      this.args.channel.isDirectMessageChannel &&
-      this.args.channel.tracking.unreadCount > 0
-    );
-  }
-
-  get hasChannelMentions() {
-    return this.args.channel.tracking.mentionCount > 0;
-  }
-
-  get hasWatchedThreads() {
-    return this.args.channel.tracking.watchedThreadsUnreadCount > 0;
-  }
-
-  get onlyMentions() {
-    return hasChatIndicator(this.currentUser).ONLY_MENTIONS;
+  get urgentBadgeCount() {
+    let totalCount = this.urgentCount;
+    return totalCount > MAX_UNREAD_COUNT ? `${MAX_UNREAD_COUNT}+` : totalCount;
   }
 
   <template>
@@ -62,9 +56,9 @@ export default class ChatChannelUnreadIndicator extends Component {
           (if this.isUrgent "-urgent")
         }}
       >
-        <div class="chat-channel-unread-indicator__number">{{#if
-            this.isUrgent
-          }}{{this.urgentCount}}{{else}}&nbsp;{{/if}}</div>
+        <div class="chat-channel-unread-indicator__number">
+          {{#if this.isUrgent}}{{this.urgentBadgeCount}}{{else}}&nbsp;{{/if}}
+        </div>
       </div>
     {{/if}}
   </template>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs
index dc57ad8d175..0a7d8ec30ca 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/footer/unread-indicator.gjs
@@ -27,7 +27,10 @@ export default class FooterUnreadIndicator extends Component {
     if (this.badgeType === CHANNELS_TAB) {
       return this.chatTrackingStateManager.publicChannelMentionCount;
     } else if (this.badgeType === DMS_TAB) {
-      return this.chatTrackingStateManager.directMessageUnreadCount;
+      return (
+        this.chatTrackingStateManager.directMessageUnreadCount +
+        this.chatTrackingStateManager.directMessageMentionCount
+      );
     } else if (this.badgeType === THREADS_TAB) {
       return this.chatTrackingStateManager.watchedThreadsUnreadCount;
     } else {
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/channel.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/channel.gjs
index 94b36fa4db9..df8d595f582 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/channel.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/channel.gjs
@@ -1,21 +1,40 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
-import { gt, not } from "truth-helpers";
+import { not } from "truth-helpers";
 import ChannelTitle from "discourse/plugins/chat/discourse/components/channel-title";
 
 export default class Channel extends Component {
   @service currentUser;
 
+  get tracking() {
+    return this.args.item.tracking;
+  }
+
   get isUrgent() {
+    return this.args.item.model.isDirectMessageChannel
+      ? this.hasUnreads || this.hasUrgent
+      : this.hasUrgent;
+  }
+
+  get hasUnreads() {
+    return this.tracking?.unreadCount > 0;
+  }
+
+  get hasUrgent() {
     return (
-      this.args.item.model.isDirectMessageChannel ||
-      (this.args.item.model.isCategoryChannel &&
-        this.args.item.model.tracking.mentionCount > 0) ||
-      (this.args.item.model.isCategoryChannel &&
-        this.args.item.model.tracking.watchedThreadsUnreadCount > 0)
+      this.tracking?.mentionCount > 0 ||
+      this.tracking?.watchedThreadsUnreadCount > 0
     );
   }
 
+  get hasUnreadThreads() {
+    return this.args.item.unread_thread_count > 0;
+  }
+
+  get showIndicator() {
+    return this.hasUnreads || this.hasUnreadThreads || this.hasUrgent;
+  }
+
   <template>
     <div
       class="chat-message-creator__chatable -category-channel"
@@ -23,7 +42,7 @@ export default class Channel extends Component {
     >
       <ChannelTitle
         @channel={{@item.model}}
-        @isUnread={{gt @item.tracking.unreadCount 0}}
+        @isUnread={{this.showIndicator}}
         @isUrgent={{this.isUrgent}}
       />
     </div>
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/lib/chatables-loader.js b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/lib/chatables-loader.js
index 03be57b98f4..cda74bdd5a3 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/lib/chatables-loader.js
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/lib/chatables-loader.js
@@ -59,7 +59,14 @@ export default class ChatablesLoader {
       ]
         .map((item) => {
           const chatable = ChatChatable.create(item);
-          chatable.tracking = this.#injectTracking(chatable);
+          const channel = this.#findChannel(chatable);
+
+          if (channel) {
+            chatable.tracking = channel.tracking;
+            chatable.unread_thread_count =
+              channel.unreadThreadsCountSinceLastViewed;
+          }
+
           return chatable;
         })
         .slice(0, MAX_RESULTS);
@@ -74,24 +81,32 @@ export default class ChatablesLoader {
         let chatable;
         if (channel.chatable?.users?.length === 1) {
           chatable = ChatChatable.createUser(channel.chatable.users[0]);
-          chatable.tracking = this.#injectTracking(chatable);
         } else {
           chatable = ChatChatable.createChannel(channel);
-          chatable.tracking = channel.tracking;
         }
+
+        chatable.tracking = channel.tracking;
+        chatable.unread_thread_count =
+          channel.unreadThreadsCountSinceLastViewed;
         return chatable;
       })
       .filter(Boolean)
       .slice(0, MAX_RESULTS);
   }
 
-  #injectTracking(chatable) {
-    if (!chatable.type === "channel") {
+  #findChannel(chatable) {
+    if (!["user", "channel"].includes(chatable.type)) {
       return;
     }
 
-    return this.chatChannelsManager.allChannels.find(
-      (channel) => channel.id === chatable.model.id
-    )?.tracking;
+    const { allChannels } = this.chatChannelsManager;
+    if (chatable.type === "user") {
+      return allChannels.find(
+        ({ chatable: { users } }) =>
+          users?.length === 1 && users[0].id === chatable.model.id
+      );
+    } else if (chatable.type === "channel") {
+      return allChannels.find(({ id }) => id === chatable.model.id);
+    }
   }
 }
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs
index 3901b192fd2..39b9fe89b23 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/message-creator/user.gjs
@@ -1,8 +1,9 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import { modifier } from "ember-modifier";
-import { gt, not } from "truth-helpers";
+import { not } from "truth-helpers";
 import UserStatusMessage from "discourse/components/user-status-message";
+import concatClass from "discourse/helpers/concat-class";
 import userStatus from "discourse/helpers/user-status";
 import { i18n } from "discourse-i18n";
 import ChatUserAvatar from "discourse/plugins/chat/discourse/components/chat-user-avatar";
@@ -21,6 +22,22 @@ export default class ChatableUser extends Component {
     };
   });
 
+  get showIndicator() {
+    return this.isUrgent || this.isUnread;
+  }
+
+  get isUrgent() {
+    return (
+      this.args.item.tracking?.unreadCount > 0 ||
+      this.args.item.tracking?.mentionCount > 0 ||
+      this.args.item.tracking?.watchedThreadsUnreadCount > 0
+    );
+  }
+
+  get isUnread() {
+    return this.args.item.unread_thread_count > 0;
+  }
+
   <template>
     <div
       class="chat-message-creator__chatable -user"
@@ -29,8 +46,10 @@ export default class ChatableUser extends Component {
       <ChatUserAvatar @user={{@item.model}} @interactive={{false}} />
       <ChatUserDisplayName @user={{@item.model}} />
 
-      {{#if (gt @item.tracking.unreadCount 0)}}
-        <div class="unread-indicator -urgent"></div>
+      {{#if this.showIndicator}}
+        <div
+          class={{concatClass "unread-indicator" (if this.isUrgent "-urgent")}}
+        ></div>
       {{/if}}
 
       {{userStatus @item.model currentUser=this.currentUser}}
diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
index bdfd611f0ff..6c373abaf68 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-sidebar.js
@@ -293,7 +293,6 @@ export default {
           const SidebarChatDirectMessagesSectionLink = class extends BaseCustomSidebarSectionLink {
             route = "chat.channel";
             suffixType = "icon";
-            suffixCSSClass = "urgent";
             hoverType = "icon";
             hoverValue = "xmark";
             hoverTitle = i18n("chat.direct_messages.close");
@@ -424,7 +423,18 @@ export default {
             }
 
             get suffixValue() {
-              return this.channel.tracking.unreadCount > 0 ? "circle" : "";
+              return this.channel.tracking.unreadCount > 0 ||
+                this.channel.unreadThreadsCountSinceLastViewed > 0
+                ? "circle"
+                : "";
+            }
+
+            get suffixCSSClass() {
+              return this.channel.tracking.unreadCount > 0 ||
+                this.channel.tracking.mentionCount > 0 ||
+                this.channel.tracking.watchedThreadsUnreadCount > 0
+                ? "urgent"
+                : "unread";
             }
 
             get hoverAction() {
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-channels-manager.js b/plugins/chat/assets/javascripts/discourse/services/chat-channels-manager.js
index 596b828c87b..b26e0a97804 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat-channels-manager.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-channels-manager.js
@@ -210,12 +210,12 @@ export default class ChatChannelsManager extends Service {
         a: {
           urgent:
             a.tracking.mentionCount + a.tracking.watchedThreadsUnreadCount,
-          unread: a.tracking.unreadCount + a.threadsManager.unreadThreadCount,
+          unread: a.tracking.unreadCount + a.unreadThreadsCountSinceLastViewed,
         },
         b: {
           urgent:
             b.tracking.mentionCount + b.tracking.watchedThreadsUnreadCount,
-          unread: b.tracking.unreadCount + b.threadsManager.unreadThreadCount,
+          unread: b.tracking.unreadCount + b.unreadThreadsCountSinceLastViewed,
         },
       };
 
@@ -253,22 +253,26 @@ export default class ChatChannelsManager extends Service {
         return -1;
       }
 
-      if (
-        a.tracking.unreadCount + a.tracking.watchedThreadsUnreadCount > 0 ||
-        b.tracking.unreadCount + b.tracking.watchedThreadsUnreadCount > 0
-      ) {
-        return a.tracking.unreadCount + a.tracking.watchedThreadsUnreadCount >
-          b.tracking.unreadCount + b.tracking.watchedThreadsUnreadCount
-          ? -1
-          : 1;
+      const aUrgent =
+        a.tracking.unreadCount +
+        a.tracking.mentionCount +
+        a.tracking.watchedThreadsUnreadCount;
+
+      const bUrgent =
+        b.tracking.unreadCount +
+        b.tracking.mentionCount +
+        b.tracking.watchedThreadsUnreadCount;
+
+      if (aUrgent > 0 || bUrgent > 0) {
+        return aUrgent > bUrgent ? -1 : 1;
       }
 
       if (
-        a.threadsManager.unreadThreadCount > 0 ||
-        b.threadsManager.unreadThreadCount > 0
+        a.unreadThreadsCountSinceLastViewed > 0 ||
+        b.unreadThreadsCountSinceLastViewed > 0
       ) {
-        return a.threadsManager.unreadThreadCount >
-          b.threadsManager.unreadThreadCount
+        return a.unreadThreadsCountSinceLastViewed >
+          b.unreadThreadsCountSinceLastViewed
           ? -1
           : 1;
       }
diff --git a/plugins/chat/assets/javascripts/discourse/services/chat-tracking-state-manager.js b/plugins/chat/assets/javascripts/discourse/services/chat-tracking-state-manager.js
index ddb2c2738db..65e85ad8618 100644
--- a/plugins/chat/assets/javascripts/discourse/services/chat-tracking-state-manager.js
+++ b/plugins/chat/assets/javascripts/discourse/services/chat-tracking-state-manager.js
@@ -76,7 +76,7 @@ export default class ChatTrackingStateManager extends Service {
 
   get allChannelUrgentCount() {
     return (
-      this.publicChannelMentionCount +
+      this.allChannelMentionCount +
       this.directMessageUnreadCount +
       this.watchedThreadsUnreadCount
     );
diff --git a/plugins/chat/spec/system/chat_footer_spec.rb b/plugins/chat/spec/system/chat_footer_spec.rb
index 403034b3b85..ed5d1f07888 100644
--- a/plugins/chat/spec/system/chat_footer_spec.rb
+++ b/plugins/chat/spec/system/chat_footer_spec.rb
@@ -122,7 +122,7 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
 
     context "for direct messages" do
       fab!(:dm_channel) { Fabricate(:direct_message_channel, users: [current_user]) }
-      fab!(:dm_message) { Fabricate(:chat_message, chat_channel: dm_channel) }
+      fab!(:dm_message) { Fabricate(:chat_message, chat_channel: dm_channel, user: current_user) }
 
       it "is urgent" do
         visit("/")
@@ -130,6 +130,40 @@ RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
 
         expect(page).to have_css("#c-footer-direct-messages .c-unread-indicator.-urgent")
       end
+
+      context "with threads" do
+        fab!(:thread) { Fabricate(:chat_thread, channel: dm_channel, original_message: dm_message) }
+
+        before do
+          SiteSetting.chat_threads_enabled = true
+          dm_channel.membership_for(current_user).mark_read!(dm_message.id)
+        end
+
+        it "is urgent for thread mentions" do
+          Jobs.run_immediately!
+
+          thread.membership_for(current_user).update!(
+            notification_level: ::Chat::NotificationLevels.all[:normal],
+          )
+
+          visit("/")
+          chat_page.open_from_header
+
+          expect(page).to have_no_css("#c-footer-direct-messages .c-unread-indicator.-urgent")
+
+          Fabricate(
+            :chat_message_with_service,
+            chat_channel: dm_channel,
+            thread: thread,
+            message: "hello @#{current_user.username}",
+          )
+
+          expect(page).to have_css(
+            "#c-footer-direct-messages .c-unread-indicator.-urgent",
+            text: "1",
+          )
+        end
+      end
     end
 
     context "for my threads" do
diff --git a/plugins/chat/spec/system/message_notifications_mobile_spec.rb b/plugins/chat/spec/system/message_notifications_mobile_spec.rb
index d3ea939595f..3e00008ef3c 100644
--- a/plugins/chat/spec/system/message_notifications_mobile_spec.rb
+++ b/plugins/chat/spec/system/message_notifications_mobile_spec.rb
@@ -177,6 +177,35 @@ RSpec.describe "Message notifications - mobile", type: :system, mobile: true do
               ".chat-channel-row:nth-child(2)[data-chat-channel-id=\"#{dm_channel_1.id}\"]",
             )
           end
+
+          context "with threads" do
+            fab!(:message) do
+              Fabricate(:chat_message, chat_channel: dm_channel_1, user: current_user)
+            end
+            fab!(:thread) do
+              Fabricate(:chat_thread, channel: dm_channel_1, original_message: message)
+            end
+
+            before { dm_channel_1.membership_for(current_user).mark_read!(message.id) }
+
+            it "shows urgent badge for mentions" do
+              Jobs.run_immediately!
+
+              visit("/chat/direct-messages")
+
+              expect(channels_index_page).to have_no_unread_channel(dm_channel_1)
+
+              Fabricate(
+                :chat_message_with_service,
+                chat_channel: dm_channel_1,
+                thread: thread,
+                message: "hello @#{current_user.username}",
+                user: user_1,
+              )
+
+              expect(channels_index_page).to have_unread_channel(dm_channel_1, urgent: true)
+            end
+          end
         end
       end
 
diff --git a/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb b/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb
index 00edb689a88..7793a48400b 100644
--- a/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb
+++ b/plugins/chat/spec/system/message_notifications_with_sidebar_spec.rb
@@ -6,6 +6,7 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
   let!(:chat_page) { PageObjects::Pages::Chat.new }
   let!(:channel_page) { PageObjects::Pages::ChatChannel.new }
   let!(:thread_page) { PageObjects::Pages::ChatThread.new }
+  let!(:sidebar) { PageObjects::Pages::Sidebar.new }
 
   before do
     SiteSetting.navigation_menu = "sidebar"
@@ -233,36 +234,75 @@ RSpec.describe "Message notifications - with sidebar", type: :system do
         end
       end
 
-      context "with a thread" do
-        fab!(:channel) { Fabricate(:category_channel, threading_enabled: true) }
+      context "with threads" do
         fab!(:other_user) { Fabricate(:user) }
-        fab!(:thread) do
-          chat_thread_chain_bootstrap(channel: channel, users: [current_user, other_user])
-        end
 
-        before do
-          channel.membership_for(current_user).mark_read!
-          thread.membership_for(current_user).mark_read!
-
-          visit("/")
-        end
-
-        context "when chat_header_indicator_preference is 'all_new'" do
-          before do
-            current_user.user_option.update!(
-              chat_header_indicator_preference:
-                UserOption.chat_header_indicator_preferences[:all_new],
-            )
+        context "with public channels" do
+          fab!(:channel) { Fabricate(:category_channel, threading_enabled: true) }
+          fab!(:thread) do
+            chat_thread_chain_bootstrap(channel: channel, users: [current_user, other_user])
           end
 
-          context "when a reply is created" do
-            it "shows the unread indicator in the header" do
-              expect(page).to have_no_css(".chat-header-icon .chat-channel-unread-indicator")
+          before do
+            channel.membership_for(current_user).mark_read!
+            thread.membership_for(current_user).mark_read!
 
-              create_message(thread: thread, creator: other_user)
+            visit("/")
+          end
 
-              expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator")
-            end
+          it "shows the unread badge in chat header" do
+            expect(page).to have_no_css(".chat-header-icon .chat-channel-unread-indicator")
+
+            create_message(thread: thread, creator: other_user, text: "this is a test")
+
+            expect(page).to have_css(".chat-header-icon .chat-channel-unread-indicator")
+          end
+        end
+
+        context "with direct message channels" do
+          fab!(:dm_channel) do
+            Fabricate(:direct_message_channel, users: [current_user, other_user])
+          end
+          fab!(:thread) do
+            chat_thread_chain_bootstrap(channel: dm_channel, users: [current_user, other_user])
+          end
+
+          before do
+            dm_channel.membership_for(current_user).mark_read!
+            thread.membership_for(current_user).mark_read!
+
+            visit("/")
+          end
+
+          it "shows the unread indicator in the sidebar for tracked threads" do
+            expect(page).to have_no_css(".sidebar-row.channel-#{dm_channel.id} .unread")
+
+            create_message(channel: dm_channel, thread: thread, creator: other_user)
+
+            expect(page).to have_css(".sidebar-row.channel-#{dm_channel.id} .unread")
+          end
+
+          it "shows the urgent indicator in the sidebar for tracked threads" do
+            expect(page).to have_no_css(".sidebar-row.channel-#{dm_channel.id} .urgent")
+
+            thread.membership_for(current_user).update!(notification_level: :watching)
+
+            create_message(channel: dm_channel, thread: thread, creator: other_user)
+
+            expect(page).to have_css(".sidebar-row.channel-#{dm_channel.id} .urgent")
+          end
+
+          it "shows the urgent indicator in the chat sidebar for mentions" do
+            expect(page).to have_no_css(".sidebar-row.channel-#{dm_channel.id} .urgent")
+
+            create_message(
+              channel: dm_channel,
+              thread: thread,
+              creator: other_user,
+              text: "hey @#{current_user.username}",
+            )
+
+            expect(page).to have_css(".sidebar-row.channel-#{dm_channel.id} .urgent")
           end
         end
       end