From 22d4fbf59c61088a0b2490dfc309f42592cb5f01 Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Wed, 20 Dec 2023 17:24:10 +0200
Subject: [PATCH] UX: chat navbar > alignments part 2 (#24985)

* UX: chat navbar > alignments part 2

* Change copy to be consistent My threads

* Dont show back button on full page desktop
---
 .../components/chat/drawer-routes/threads.gjs |  2 +-
 .../components/chat/routes/threads.gjs        |  7 +++++-
 .../components/chat/thread-list/header.gjs    | 12 ++++++----
 .../stylesheets/common/chat-navbar.scss       | 23 ++++++++++++++-----
 .../stylesheets/mobile/chat-navbar.scss       |  5 ++++
 .../chat/assets/stylesheets/mobile/index.scss |  1 +
 6 files changed, 37 insertions(+), 13 deletions(-)
 create mode 100644 plugins/chat/assets/stylesheets/mobile/chat-navbar.scss

diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
index ef12da41282..019c5eb6af8 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/drawer-routes/threads.gjs
@@ -15,7 +15,7 @@ export default class ChatDrawerRoutesThreads extends Component {
     <Navbar @onClick={{this.chat.toggleDrawer}} as |navbar|>
       <navbar.BackButton @title={{this.backButtonTitle}} />
       <navbar.Title
-        @title={{i18n "chat.threads.list"}}
+        @title={{i18n "chat.my_threads.title"}}
         @icon="discourse-threads"
         as |title|
       >
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
index 1770de239fa..8e8dbf9e5d3 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/routes/threads.gjs
@@ -1,13 +1,18 @@
 import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
 import i18n from "discourse-common/helpers/i18n";
 import Navbar from "discourse/plugins/chat/discourse/components/chat/navbar";
 import UserThreads from "discourse/plugins/chat/discourse/components/user-threads";
 
 export default class ChatRoutesThreads extends Component {
+  @service site;
+
   <template>
     <div class="c-routes-threads">
       <Navbar as |navbar|>
-        <navbar.BackButton />
+        {{#if this.site.mobileView}}
+          <navbar.BackButton />
+        {{/if}}
         <navbar.Title
           @title={{i18n "chat.my_threads.title"}}
           @icon="discourse-threads"
diff --git a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs
index 9362bb8ee0b..44ce849a0a6 100644
--- a/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs
+++ b/plugins/chat/assets/javascripts/discourse/components/chat/thread-list/header.gjs
@@ -24,11 +24,13 @@ export default class ChatThreadListHeader extends Component {
 
   <template>
     <Navbar as |navbar|>
-      <navbar.BackButton
-        @route="chat.channel"
-        @routeModels={{@channel.routeModels}}
-        @title={{i18n "chat.return_to_channel"}}
-      />
+      {{#if this.site.mobileView}}
+        <navbar.BackButton
+          @route="chat.channel"
+          @routeModels={{@channel.routeModels}}
+          @title={{i18n "chat.return_to_channel"}}
+        />
+      {{/if}}
 
       <navbar.Title @title={{this.title}} @icon="discourse-threads" />
 
diff --git a/plugins/chat/assets/stylesheets/common/chat-navbar.scss b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
index e274e96db96..fe1a1d6297e 100644
--- a/plugins/chat/assets/stylesheets/common/chat-navbar.scss
+++ b/plugins/chat/assets/stylesheets/common/chat-navbar.scss
@@ -12,12 +12,12 @@
     box-sizing: border-box;
     display: flex;
     z-index: z("composer", "content") - 1;
+    padding-inline: 1rem;
 
-    .full-page & {
-      padding-inline: 1rem;
-    }
-    .chat-drawer & {
-      padding-inline: 0.25rem;
+    .chat-drawer &,
+    .c-routes-channel-thread &,
+    .c-routes-channel-info & {
+      padding-inline: 0;
     }
 
     &.-clickable {
@@ -37,7 +37,18 @@
   .c-navbar__title {
     @include ellipsis();
     font-weight: 700;
-    padding-left: 0.75rem;
+
+    .c-routes-channel-threads & {
+      padding-left: 0;
+    }
+
+    .chat-drawer & {
+      padding-left: 1rem;
+    }
+  }
+
+  .c-navbar__back-button ~ .c-navbar__title {
+    padding-left: 0;
   }
 
   .c-navbar__sub-title {
diff --git a/plugins/chat/assets/stylesheets/mobile/chat-navbar.scss b/plugins/chat/assets/stylesheets/mobile/chat-navbar.scss
new file mode 100644
index 00000000000..2a90d0496e4
--- /dev/null
+++ b/plugins/chat/assets/stylesheets/mobile/chat-navbar.scss
@@ -0,0 +1,5 @@
+.c-navbar {
+  &-container {
+    padding-inline: 0.25rem;
+  }
+}
diff --git a/plugins/chat/assets/stylesheets/mobile/index.scss b/plugins/chat/assets/stylesheets/mobile/index.scss
index 2b704dc518d..81b8998da14 100644
--- a/plugins/chat/assets/stylesheets/mobile/index.scss
+++ b/plugins/chat/assets/stylesheets/mobile/index.scss
@@ -17,5 +17,6 @@
 @import "chat-channel-settings";
 @import "chat-form";
 @import "chat-modal-new-message";
+@import "chat-navbar";
 @import "chat-thread-list-header";
 @import "chat-user-threads";