DEV: Disambiguate how the topic info is handled in the header service (#27810)

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.topicInfoVisible = 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.topicInfoVisible = true;
     this._lastShowTopic = true;
   },
 

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.topicInfoVisible)}}
       />
     </header>
   </template>

app/assets/javascripts/discourse/app/components/header/auth-buttons.gjs

@@ -9,7 +9,7 @@ export default class AuthButtons extends Component {
     return (
       this.args.canSignUp &&
       !this.header.headerButtonsHidden.includes("signup") &&
-      !this.header.topic
+      !this.header.topicInfoVisible
     );
   }
 

app/assets/javascripts/discourse/app/components/header/contents.gjs

@@ -15,10 +15,6 @@ export default class Contents extends Component {
   @service header;
   @service sidebarState;
 
-  get topicPresent() {
-    return !!this.header.topic;
-  }
-
   get sidebarIcon() {
     if (this.sidebarState.adminSidebarAllowedWithLegacyNavigationMenu) {
       return "discourse-sidebar";
@@ -31,7 +27,11 @@ export default class Contents extends Component {
     <div class="contents">
       <PluginOutlet
         @name="header-contents__before"
-        @outletArgs={{hash topic=this.header.topic}}
+        @outletArgs={{hash
+          topic=this.header.topic
+          topicInfo=this.header.topicInfo
+          topicInfoVisible=this.header.topicInfoVisible
+        }}
       />
       {{#if this.site.desktopView}}
         {{#if @sidebarEnabled}}
@@ -45,12 +45,12 @@ export default class Contents extends Component {
 
       <div class="home-logo-wrapper-outlet">
         <PluginOutlet @name="home-logo-wrapper">
-          <HomeLogo @minimized={{this.topicPresent}} />
+          <HomeLogo @minimized={{this.header.topicInfoVisible}} />
         </PluginOutlet>
       </div>
 
-      {{#if this.header.topic}}
-        <TopicInfo @topic={{this.header.topic}} />
+      {{#if this.header.topicInfoVisible}}
+        <TopicInfo @topic={{this.header.topicInfo}} />
       {{else if
         (and
           this.siteSettings.bootstrap_mode_enabled
@@ -66,19 +66,31 @@ export default class Contents extends Component {
       <div class="before-header-panel-outlet">
         <PluginOutlet
           @name="before-header-panel"
-          @outletArgs={{hash topic=this.header.topic}}
+          @outletArgs={{hash
+            topic=this.header.topic
+            topicInfo=this.header.topicInfo
+            topicInfoVisible=this.header.topicInfoVisible
+          }}
         />
       </div>
       <div class="panel" role="navigation">{{yield}}</div>
       <div class="after-header-panel-outlet">
         <PluginOutlet
           @name="after-header-panel"
-          @outletArgs={{hash topic=this.header.topic}}
+          @outletArgs={{hash
+            topic=this.header.topic
+            topicInfo=this.header.topicInfo
+            topicInfoVisible=this.header.topicInfoVisible
+          }}
         />
       </div>
       <PluginOutlet
         @name="header-contents__after"
-        @outletArgs={{hash topic=this.header.topic}}
+        @outletArgs={{hash
+          topic=this.header.topic
+          topicInfo=this.header.topicInfo
+          topicInfoVisible=this.header.topicInfoVisible
+        }}
       />
     </div>
   </template>

app/assets/javascripts/discourse/app/components/header/topic/featured-link.gjs

@@ -7,7 +7,7 @@ export default class FeaturedLink extends Component {
   @service header;
 
   get meta() {
-    return extractLinkMeta(this.header.topic);
+    return extractLinkMeta(this.header.topicInfo);
   }
 
   <template>

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 class TopicFromParams extends DiscourseRoute {
   @service composer;
+  @service header;
 
   // Avoid default model hook
   model(params) {
@@ -44,6 +45,8 @@ export default class TopicFromParams extends DiscourseRoute {
     if (topic.isPrivateMessage && topic.suggested_topics) {
       this.pmTopicTrackingState.startTracking();
     }
+
+    this.header.topicInfo = topic;
   }
 
   deactivate() {

app/assets/javascripts/discourse/app/services/header.js

@@ -3,6 +3,7 @@ import { registerDestructor } from "@ember/destroyable";
 import Service, { service } from "@ember/service";
 import { TrackedMap } from "@ember-compat/tracked-built-ins";
 import { disableImplicitInjections } from "discourse/lib/implicit-injections";
+import deprecated from "discourse-common/lib/deprecated";
 
 const VALID_HEADER_BUTTONS_TO_HIDE = ["search", "login", "signup"];
 
@@ -10,13 +11,43 @@ const VALID_HEADER_BUTTONS_TO_HIDE = ["search", "login", "signup"];
 export default class Header extends Service {
   @service siteSettings;
 
-  @tracked topic = null;
+  /**
+   * The topic currently viewed on the page.
+   *
+   * The information is updated as soon as the page is loaded.
+   *
+   * @type {Topic|null}
+   */
+  @tracked topicInfo = null;
+
+  /**
+   * Indicates whether the topic information is visible on the header.
+   *
+   * The information is updated when the user scrolls the page.
+   *
+   * @type {boolean}
+   */
+  @tracked topicInfoVisible = false;
+
   @tracked hamburgerVisible = false;
   @tracked userVisible = false;
   @tracked anyWidgetHeaderOverrides = false;
 
   #hiders = new TrackedMap();
 
+  get topic() {
+    deprecated(
+      "`.topic` is deprecated in service:header. Use `.topicInfo` or `.topicInfoVisible` instead.",
+      {
+        id: "discourse.header-service-topic",
+        since: "3.3.0.beta4-dev",
+        dropFrom: "3.4.0",
+      }
+    );
+
+    return this.topicInfoVisible ? this.topicInfo : null;
+  }
+
   get useGlimmerHeader() {
     if (this.siteSettings.glimmer_header_mode === "disabled") {
       return false;