UX: sort chat channels by activity in desktop drawer (#28822)

This change sorts the desktop chat channels by activity in drawer mode, and keeps sidebar channel list sorted by slug.

plugins/chat/assets/javascripts/discourse/components/channels-list-public.gjs

@@ -33,6 +33,12 @@ export default class ChannelsListPublic extends Component {
     return this.chatChannelsManager.hasThreadedChannels;
   }
 
+  get channelList() {
+    return this.args.sortByActivity === true
+      ? this.chatChannelsManager.publicMessageChannelsByActivity
+      : this.chatChannelsManager.publicMessageChannels;
+  }
+
   @action
   toggleChannelSection(section) {
     this.args.toggleSection(section);
@@ -103,7 +109,7 @@ export default class ChannelsListPublic extends Component {
           @showCTA={{this.chatChannelsManager.displayPublicChannels}}
         />
       {{else}}
-        {{#each this.chatChannelsManager.publicMessageChannels as |channel|}}
+        {{#each this.channelList as |channel|}}
           <ChatChannelRow
             @channel={{channel}}
             @options={{hash settingsButton=true}}

plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/channels.gjs

@@ -22,7 +22,7 @@ export default class ChatDrawerRoutesChannels extends Component {
 
       {{#if this.chatStateManager.isDrawerExpanded}}
         <div class="chat-drawer-content">
-          <ChannelsListPublic />
+          <ChannelsListPublic @sortByActivity={{true}} />
         </div>
 
         <ChatFooter />

plugins/chat/assets/javascripts/discourse/components/chat/routes/channels.gjs

@@ -17,7 +17,7 @@ export default class ChatRoutesChannels extends Component {
         </navbar.Actions>
       </Navbar>
 
-      <ChannelsListPublic />
+      <ChannelsListPublic @sortByActivity={{true}} />
     </div>
   </template>
 }

plugins/chat/assets/javascripts/discourse/services/chat-channels-manager.js

@@ -125,16 +125,16 @@ export default class ChatChannelsManager extends Service {
 
   @cached
   get publicMessageChannels() {
-    const channels = this.channels.filter(
+    return this.channels
-      (channel) =>
+      .filter(
-        channel.isCategoryChannel && channel.currentUserMembership.following
+        (channel) =>
-    );
+          channel.isCategoryChannel && channel.currentUserMembership.following
+      )
+      .sort((a, b) => a?.slug?.localeCompare?.(b?.slug));
+  }
 
-    if (this.site.mobileView) {
+  get publicMessageChannelsByActivity() {
-      return this.#sortChannelsByActivity(channels);
+    return this.#sortChannelsByActivity(this.publicMessageChannels);
-    } else {
-      return channels.sort((a, b) => a?.slug?.localeCompare?.(b?.slug));
-    }
   }
 
   @cached

plugins/chat/spec/system/list_channels/sidebar_spec.rb

@@ -50,7 +50,19 @@ RSpec.describe "List channels | sidebar", type: :system do
         channel_2.add(current_user)
       end
 
-      it "sorts them by slug" do
+      it "sorts them by slug when all channels are read" do
+        visit("/")
+
+        expect(page.find("#sidebar-section-content-chat-channels li:nth-child(1)")).to have_css(
+          ".channel-#{channel_2.id}",
+        )
+        expect(page.find("#sidebar-section-content-chat-channels li:nth-child(2)")).to have_css(
+          ".channel-#{channel_1.id}",
+        )
+      end
+
+      it "sorts them by slug when channel has unread messages" do
+        Fabricate(:chat_message, chat_channel: channel_1)
         visit("/")
 
         expect(page.find("#sidebar-section-content-chat-channels li:nth-child(1)")).to have_css(