UX: Add back button in chat browse screen on mobile (#18849)

plugins/chat/assets/javascripts/discourse/components/chat-browse-view.js

@@ -87,6 +87,11 @@ export default class ChatBrowseView extends Component {
     showModal("create-channel");
   }
 
+  @action
+  returnToChannelsList() {
+    return this.router.transitionTo("chat.index");
+  }
+
   @bind
   filterChannels(filter) {
     this.canLoadMore = true;

plugins/chat/assets/javascripts/discourse/templates/components/chat-browse-view.hbs

@@ -6,6 +6,14 @@
 
 <div class="chat-browse-view">
   <div class="chat-browse-view__header">
+    {{#if this.site.mobileView}}
+      <DButton
+        @action={{action "returnToChannelsList"}}
+        @icon="chevron-left"
+        @class="chat-browse-view__back"
+        @title="chat.browse.back"
+      />
+    {{/if}}
     <h1 class="chat-browse-view__title">{{i18n "chat.browse.title"}}</h1>
     {{#if this.currentUser.staff}}
       <DButton

plugins/chat/assets/stylesheets/common/chat-browse.scss

@@ -10,13 +10,14 @@
 
   &__header {
     display: flex;
-    justify-content: space-between;
+    gap: 1rem;
     align-items: center;
     margin: 1rem 0 1rem 1rem;
   }
 
   &__title {
     box-sizing: border-box;
+    margin-bottom: 0;
   }
 
   &__content_wrapper {
@@ -28,6 +29,10 @@
     }
   }
 
+  .new-channel-btn {
+    margin-left: auto;
+  }
+
   &__cards {
     display: grid;
     grid-template-columns: repeat(2, 1fr);

plugins/chat/config/locales/client.en.yml

@@ -176,6 +176,7 @@ en:
         open: "Open"
 
       browse:
+        back: "Back"
         title: Channels
         filter_all: All
         filter_open: Opened

plugins/chat/test/javascripts/acceptance/mobile-chat-test.js

@@ -23,6 +23,11 @@ acceptance("Discourse Chat - Mobile test", function (needs) {
     server.get("/u/search/users", () => {
       return helper.response([]);
     });
+
+    server.get("/chat/api/chat_channels.json", () => {
+      const channels = [];
+      return helper.response(channels);
+    });
   });
 
   needs.settings({
@@ -54,4 +59,14 @@ acceptance("Discourse Chat - Mobile test", function (needs) {
       "Clicking the left arrow button returns to the channels list"
     );
   });
+
+  test("Chat browse screen back button", async function (assert) {
+    await visit("/chat/browse");
+    await click(".chat-browse-view__back");
+    assert.strictEqual(
+      currentURL(),
+      "/chat",
+      "Clicking the back button returns to the channels list"
+    );
+  });
 });