FEATURE: Mobile Chat Notification Badges (#25438)

This change adds notification badges to the new footer tabs on mobile chat, to help users easily find areas where there’s new activity to review.

When on mobile chat:
- Show a badge on the DMs footer when there is unread activity in DMs.
- Show a badge on the Channels footer tab when there is unread channel activity.
- Show a badge on the Threads footer tab when there is unread activity in a followed thread.
- Notification badges should be removed once the unread activity is viewed.

Additionally this change will:
- Show green notification badges for channel mentions or DMs
- Show blue notification badges for unread messages in channels or threads

Co-authored-by: chapoi <101828855+chapoi@users.noreply.github.com>

plugins/chat/spec/system/chat_footer_spec.rb

@@ -1,7 +1,8 @@
 # frozen_string_literal: true
 
-RSpec.describe "Chat footer on mobile", type: :system, mobile: true do
+RSpec.describe "Mobile Chat footer", type: :system, mobile: true do
   fab!(:user)
+  fab!(:user_2) { Fabricate(:user) }
   fab!(:channel) { Fabricate(:chat_channel, threading_enabled: true) }
   fab!(:message) { Fabricate(:chat_message, chat_channel: channel, user: user) }
   let(:chat_page) { PageObjects::Pages::Chat.new }
@@ -10,6 +11,7 @@ RSpec.describe "Chat footer on mobile", type: :system, mobile: true do
     chat_system_bootstrap
     sign_in(user)
     channel.add(user)
+    channel.add(user_2)
   end
 
   context "with multiple tabs" do
@@ -69,4 +71,62 @@ RSpec.describe "Chat footer on mobile", type: :system, mobile: true do
       expect(page).to have_current_path("/chat/channels")
     end
   end
+
+  describe "badges" do
+    context "for channels" do
+      it "is unread for messages" do
+        Fabricate(:chat_message, chat_channel: channel)
+
+        visit("/")
+        chat_page.open_from_header
+
+        expect(page).to have_css("#c-footer-channels .chat-channel-unread-indicator")
+      end
+
+      it "is urgent for mentions" do
+        Jobs.run_immediately!
+
+        visit("/")
+        chat_page.open_from_header
+
+        Fabricate(
+          :chat_message_with_service,
+          chat_channel: channel,
+          message: "hello @#{user.username}",
+          user: user_2,
+        )
+
+        expect(page).to have_css(
+          "#c-footer-channels .chat-channel-unread-indicator.-urgent",
+          text: "1",
+        )
+      end
+    end
+
+    context "for direct messages" do
+      fab!(:dm_channel) { Fabricate(:direct_message_channel, users: [user]) }
+      fab!(:dm_message) { Fabricate(:chat_message, chat_channel: dm_channel) }
+
+      it "is urgent" do
+        visit("/")
+        chat_page.open_from_header
+
+        expect(page).to have_css("#c-footer-direct-messages .chat-channel-unread-indicator.-urgent")
+      end
+    end
+
+    context "for threads" do
+      fab!(:thread) { Fabricate(:chat_thread, channel: channel, original_message: message) }
+      fab!(:thread_message) { Fabricate(:chat_message, chat_channel: channel, thread: thread) }
+
+      it "is unread" do
+        SiteSetting.chat_threads_enabled = true
+
+        visit("/")
+        chat_page.open_from_header
+
+        expect(page).to have_css("#c-footer-threads .chat-channel-unread-indicator")
+      end
+    end
+  end
 end