From 70f0cb610ab4e553f6e100d915fbc59d24d72336 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Tue, 19 Dec 2023 17:28:07 +0200
Subject: [PATCH] UX: Chat info area back button + styling tweaks (#24966)

## Back button to navigate out of add-member area

Currently on mobile, once you're in the member area, there is no easy to return to the general settings area, except exiting the settings altogether, which isn't very user friendly. A go-back link solves the problem.

## Styling tweaks

* Removed the background from the leave button
* Added more spacing between the sections on desktop and removed the fixed height for rows

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
---
 .../chat/routes/channel-info-members.gjs      | 13 +++++++++
 .../assets/stylesheets/common/chat-form.scss  |  6 +----
 .../mobile/chat-channel-members.scss          |  5 ++++
 .../assets/stylesheets/mobile/chat-form.scss  | 27 ++++++++++++++++---
 plugins/chat/config/locales/client.en.yml     |  1 +
 .../spec/system/channel_members_page_spec.rb  | 10 +++++++
 6 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
index 2b044bad680..7956723a065 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/channel-info-members.gjs
@@ -3,6 +3,7 @@ import { cached, tracked } from "@glimmer/tracking";
 import { fn, hash } from "@ember/helper";
 import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import { LinkTo } from "@ember/routing";
 import { inject as service } from "@ember/service";
 import { modifier } from "ember-modifier";
 import isElementInViewport from "discourse/lib/is-element-in-viewport";
@@ -10,6 +11,7 @@ import DiscourseURL, { userPath } from "discourse/lib/url";
 import autoFocus from "discourse/modifiers/auto-focus";
 import { INPUT_DELAY } from "discourse-common/config/environment";
 import icon from "discourse-common/helpers/d-icon";
+import i18n from "discourse-common/helpers/i18n";
 import discourseDebounce from "discourse-common/lib/debounce";
 import I18n from "discourse-i18n";
 import MessageCreator from "discourse/plugins/chat/discourse/components/chat/message-creator";
@@ -22,6 +24,7 @@ export default class ChatRouteChannelInfoMembers extends Component {
   @service chatApi;
   @service modal;
   @service loadingSlider;
+  @service site;
 
   @tracked filter = "";
   @tracked showAddMembers = false;
@@ -122,6 +125,16 @@ export default class ChatRouteChannelInfoMembers extends Component {
   }
 
   <template>
+    {{#if this.site.mobileView}}
+      <LinkTo
+        class="c-back-button"
+        @route="chat.channel.info.settings"
+        @model={{@channel}}
+      >
+        {{icon "chevron-left"}}
+        {{i18n "chat.members_view.back_to_settings"}}
+      </LinkTo>
+    {{/if}}
     {{#if this.showAddMembers}}
       <MessageCreator
         @mode={{this.addMembersMode}}
diff --git a/plugins/chat/assets/stylesheets/common/chat-form.scss b/plugins/chat/assets/stylesheets/common/chat-form.scss
index cd4800d6332..7469789abb1 100644
--- a/plugins/chat/assets/stylesheets/common/chat-form.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-form.scss
@@ -13,10 +13,7 @@
   display: flex;
   flex-direction: column;
   width: 100%;
-
-  & + .chat-form__section {
-    margin-top: 1rem;
-  }
+  margin-bottom: 2rem;
 
   &-title {
     font-weight: 700;
@@ -71,7 +68,6 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    min-height: 40px;
     gap: 0.25rem;
   }
 
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss b/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
index 92511513bfa..d7c30846923 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-channel-members.scss
@@ -1,3 +1,8 @@
+.c-channel-info {
+  .c-back-button {
+    padding-bottom: 1em;
+  }
+}
 .c-channel-members {
   width: 100%;
 }
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-form.scss b/plugins/chat/assets/stylesheets/mobile/chat-form.scss
index df7bbc1a424..f443a8aed92 100644
--- a/plugins/chat/assets/stylesheets/mobile/chat-form.scss
+++ b/plugins/chat/assets/stylesheets/mobile/chat-form.scss
@@ -1,6 +1,25 @@
-.chat-form__section {
-  &-content {
-    background: var(--primary-very-low);
-    padding: 1rem;
+.chat-form {
+  &__section {
+    margin-bottom: 0;
+
+    &:last-of-type {
+      .chat-form__section-content {
+        background: none;
+        padding-left: 0;
+      }
+    }
+
+    &-content {
+      background: var(--primary-very-low);
+      padding: 1rem;
+    }
+  }
+  &__section-title {
+    .chat-form__section:not(:first-of-type) & {
+      margin-top: 1.5rem;
+    }
+  }
+  &__row-content {
+    min-height: 40px;
   }
 }
diff --git a/plugins/chat/config/locales/client.en.yml b/plugins/chat/config/locales/client.en.yml
index b91b7fffd35..d9d6b8b7490 100644
--- a/plugins/chat/config/locales/client.en.yml
+++ b/plugins/chat/config/locales/client.en.yml
@@ -312,6 +312,7 @@ en:
       members_view:
         filter_placeholder: Find members
         add_member: Add Member
+        back_to_settings: "Back to settings"
 
       about_view:
         associated_topic: Linked topic
diff --git a/plugins/chat/spec/system/channel_members_page_spec.rb b/plugins/chat/spec/system/channel_members_page_spec.rb
index f9a146c6169..eeca7da8a09 100644
--- a/plugins/chat/spec/system/channel_members_page_spec.rb
+++ b/plugins/chat/spec/system/channel_members_page_spec.rb
@@ -102,4 +102,14 @@ RSpec.describe "Channel - Info - Members page", type: :system do
       )
     end
   end
+
+  context "when on mobile", mobile: true do
+    it "has a link to the settings" do
+      chat_page.visit_channel_members(channel_1)
+
+      expect(page).to have_css(
+        ".c-back-button[href='/chat/c/#{channel_1.slug}/#{channel_1.id}/info/settings']",
+      )
+    end
+  end
 end