From caa29ec97351f1443f7be9560187116f045b820b Mon Sep 17 00:00:00 2001
From: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Date: Tue, 28 May 2024 07:16:18 -0600
Subject: [PATCH] DEV: Update how we determine the presence of a topic in the
 header (#27138)

# Context

We currently have a tracked value of `topic` in the header service that we utilize across the app for determining the presence of a topic.

A simple example is: If you are in a topic, and scroll down the page, we need to communicate to the header that a topic is present and we change the styling of the header.

The issue with this logic is that when entering a topic (and you are at the top of the page), we **haven't** set the topic on the header service yet. We only set the topic when you have scrolled down on the page (set by `app/components/discourse-topic.js`)

This is unhelpful behavior when you are utilizing a plugin outlet that is receiving the `topic` from the header:

https://github.com/discourse/discourse/blob/17add599e3cf7323ee8639286e6ab1876ef90474/app/assets/javascripts/discourse/app/components/header/topic/info.gjs#L85

As the `topic` won't be present until you scroll down the page.

# Changes

This PR adds a tracked `inTopic` value to the header service that is a boolean value. This is to let the app know

> Yes, we are scrolled within a topic

And instead sets the tracked `topic` value immediately, if you are loading a topic, to allow the necessary data to be populated to the plugin outlets on page load.
---
 .../javascripts/discourse/app/components/discourse-topic.js   | 4 ++--
 app/assets/javascripts/discourse/app/components/header.gjs    | 2 +-
 .../discourse/app/components/header/auth-buttons.gjs          | 2 +-
 .../javascripts/discourse/app/components/header/contents.gjs  | 4 ++--
 .../javascripts/discourse/app/routes/topic-from-params.js     | 3 +++
 app/assets/javascripts/discourse/app/services/header.js       | 1 +
 6 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/discourse-topic.js b/app/assets/javascripts/discourse/app/components/discourse-topic.js
index 4253cbb8034..2a3a0161c31 100644
--- a/app/assets/javascripts/discourse/app/components/discourse-topic.js
+++ b/app/assets/javascripts/discourse/app/components/discourse-topic.js
@@ -56,7 +56,7 @@ export default Component.extend(Scrolling, MobileScrollDirection, {
 
   _hideTopicInHeader() {
     this.appEvents.trigger("header:hide-topic");
-    this.header.topic = null;
+    this.header.inTopic = false;
     this._lastShowTopic = false;
   },
 
@@ -65,7 +65,7 @@ export default Component.extend(Scrolling, MobileScrollDirection, {
       return;
     }
     this.appEvents.trigger("header:show-topic", topic);
-    this.header.topic = topic;
+    this.header.inTopic = true;
     this._lastShowTopic = true;
   },
 
diff --git a/app/assets/javascripts/discourse/app/components/header.gjs b/app/assets/javascripts/discourse/app/components/header.gjs
index 54b33121332..0a030e181b5 100644
--- a/app/assets/javascripts/discourse/app/components/header.gjs
+++ b/app/assets/javascripts/discourse/app/components/header.gjs
@@ -242,7 +242,7 @@ export default class GlimmerHeader extends Component {
       </div>
       <PluginOutlet
         @name="after-header"
-        @outletArgs={{hash minimized=(globalThis.Boolean this.header.topic)}}
+        @outletArgs={{hash minimized=this.header.inTopic}}
       />
     </header>
   </template>
diff --git a/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs b/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs
index 713e8b44bc3..72f58757440 100644
--- a/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs
+++ b/app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs
@@ -8,7 +8,7 @@ export default class AuthButtons extends Component {
 
   <template>
     <span class="auth-buttons">
-      {{#if (and @canSignUp (not this.header.topic))}}
+      {{#if (and @canSignUp (not this.header.inTopic))}}
         <DButton
           class="btn-primary btn-small sign-up-button"
           @action={{@showCreateAccount}}
diff --git a/app/assets/javascripts/discourse/app/components/header/contents.gjs b/app/assets/javascripts/discourse/app/components/header/contents.gjs
index b4104daa926..c0d76b0cdb4 100644
--- a/app/assets/javascripts/discourse/app/components/header/contents.gjs
+++ b/app/assets/javascripts/discourse/app/components/header/contents.gjs
@@ -16,7 +16,7 @@ export default class Contents extends Component {
   @service sidebarState;
 
   get topicPresent() {
-    return !!this.header.topic;
+    return this.header.inTopic;
   }
 
   get sidebarIcon() {
@@ -45,7 +45,7 @@ export default class Contents extends Component {
         </PluginOutlet>
       </div>
 
-      {{#if this.header.topic}}
+      {{#if this.header.inTopic}}
         <TopicInfo @topic={{this.header.topic}} />
       {{else if
         (and
diff --git a/app/assets/javascripts/discourse/app/routes/topic-from-params.js b/app/assets/javascripts/discourse/app/routes/topic-from-params.js
index 10cb2d8e7a6..939567648fe 100644
--- a/app/assets/javascripts/discourse/app/routes/topic-from-params.js
+++ b/app/assets/javascripts/discourse/app/routes/topic-from-params.js
@@ -10,6 +10,7 @@ import { isTesting } from "discourse-common/config/environment";
 // This route is used for retrieving a topic based on params
 export default DiscourseRoute.extend({
   composer: service(),
+  header: service(),
 
   // Avoid default model hook
   model(params) {
@@ -44,6 +45,8 @@ export default DiscourseRoute.extend({
     if (topic.isPrivateMessage && topic.suggested_topics) {
       this.pmTopicTrackingState.startTracking();
     }
+
+    this.header.topic = topic;
   },
 
   deactivate() {
diff --git a/app/assets/javascripts/discourse/app/services/header.js b/app/assets/javascripts/discourse/app/services/header.js
index e88007b1635..4925d2531ac 100644
--- a/app/assets/javascripts/discourse/app/services/header.js
+++ b/app/assets/javascripts/discourse/app/services/header.js
@@ -7,6 +7,7 @@ export default class Header extends Service {
   @service siteSettings;
 
   @tracked topic = null;
+  @tracked inTopic = false;
   @tracked hamburgerVisible = false;
   @tracked userVisible = false;
   @tracked anyWidgetHeaderOverrides = false;