FIX: Show mention count for channel list on mobile (#22682)

Followup to 07c3782e51805c73dbb56e5fd053a9c6978712ff

The above incorrectly removed the channel unread count in
the mobile/drawer channel list when the user has mentions
(meaning the unreads are urgent). This commit adds it
back and refactors system specs a little.

plugins/chat/spec/system/page_objects/chat/components/channel_index.rb

@@ -0,0 +1,48 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    module Chat
+      class ChannelIndex < PageObjects::Components::Base
+        attr_reader :context
+
+        SELECTOR = ".channels-list"
+
+        def initialize(context = nil)
+          @context = context
+        end
+
+        def component
+          return find(SELECTOR) if !@context
+          find(context).find(SELECTOR)
+        end
+
+        def open_channel(channel)
+          component.find("#{channel_row_selector(channel)}").click
+        end
+
+        def channel_row_selector(channel)
+          ".chat-channel-row[data-chat-channel-id='#{channel.id}']"
+        end
+
+        def has_unread_channel?(channel, count: nil, wait: Capybara.default_max_wait_time)
+          unread_indicator_selector =
+            "#{channel_row_selector(channel)} .chat-channel-unread-indicator"
+          has_css?(unread_indicator_selector) &&
+            if count
+              has_css?(
+                "#{unread_indicator_selector} .chat-channel-unread-indicator__number",
+                text: count,
+              )
+            else
+              true
+            end
+        end
+
+        def has_no_unread_channel?(channel)
+          has_no_css?("#{channel_row_selector(channel)} .chat-channel-unread-indicator")
+        end
+      end
+    end
+  end
+end

plugins/chat/spec/system/page_objects/chat_drawer/chat_drawer.rb

@@ -4,6 +4,11 @@ module PageObjects
   module Pages
     class ChatDrawer < PageObjects::Pages::Base
       VISIBLE_DRAWER = ".chat-drawer.is-expanded"
+
+      def channel_index
+        @channel_index ||= ::PageObjects::Components::Chat::ChannelIndex.new(VISIBLE_DRAWER)
+      end
+
       def open_browse
         mouseout
         find("#{VISIBLE_DRAWER} .open-browse-page-btn").click
@@ -20,20 +25,16 @@ module PageObjects
       end
 
       def open_channel(channel)
-        find("#{VISIBLE_DRAWER} .channels-list #{channel_row_selector(channel)}").click
+        channel_index.open_channel(channel)
         has_no_css?(".chat-skeleton")
       end
 
-      def channel_row_selector(channel)
-        ".chat-channel-row[data-chat-channel-id='#{channel.id}']"
-      end
-
       def has_unread_channel?(channel)
-        has_css?("#{channel_row_selector(channel)} .chat-channel-unread-indicator")
+        channel_index.has_unread_channel?(channel)
       end
 
       def has_no_unread_channel?(channel)
-        has_no_css?("#{channel_row_selector(channel)} .chat-channel-unread-indicator")
+        channel_index.has_no_unread_channel?(channel)
       end
 
       def maximize