UX: add CSS classes on body tag based on topic statuses. (#12729)

This commit will add CSS classes like `unlisted`, `pinned`, and `unpinned` on the body tag.

* DEV: we no longer using the `categoryClass` & `tagClasses` methods.
* Update app/assets/javascripts/discourse/app/components/add-topic-status-classes.js

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>

app/assets/javascripts/discourse/app/components/add-topic-status-classes.js

@@ -0,0 +1,50 @@
+import Component from "@ember/component";
+import { scheduleOnce } from "@ember/runloop";
+
+export default Component.extend({
+  tagName: "",
+
+  didInsertElement() {
+    this._super(...arguments);
+    this.refreshClass();
+  },
+
+  _updateClass() {
+    if (this.isDestroying || this.isDestroyed) {
+      return;
+    }
+    const body = document.getElementsByTagName("body")[0];
+
+    this._removeClass();
+
+    if (this.topic.invisible) {
+      body.classList.add("topic-status-unlisted");
+    }
+    if (this.topic.pinned) {
+      body.classList.add("topic-status-pinned");
+    }
+    if (this.topic.unpinned) {
+      body.classList.add("topic-status-unpinned");
+    }
+  },
+
+  didReceiveAttrs() {
+    this._super(...arguments);
+    this.refreshClass();
+  },
+
+  refreshClass() {
+    scheduleOnce("afterRender", this, this._updateClass);
+  },
+
+  _removeClass() {
+    const regx = new RegExp(/\btopic-status-\S+/, "g");
+    const body = document.getElementsByTagName("body")[0];
+    body.className = body.className.replace(regx, "");
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+    this._removeClass();
+  },
+});

app/assets/javascripts/discourse/app/components/discourse-topic.js

@@ -23,8 +23,6 @@ export default Component.extend(
       "topic.is_warning",
       "topic.category.read_restricted:read_restricted",
       "topic.deleted:deleted-topic",
-      "topic.categoryClass",
-      "topic.tagClasses",
     ],
     menuVisible: true,
     SHORT_POST: 1200,

app/assets/javascripts/discourse/app/models/topic.js

@@ -218,13 +218,6 @@ const Topic = RestModel.extend({
     return Category.findById(categoryId);
   },
 
-  categoryClass: fmt("category.fullSlug", "category-%@"),
-
-  @discourseComputed("tags")
-  tagClasses(tags) {
-    return tags && tags.map((t) => `tag-${t}`).join(" ");
-  },
-
   @discourseComputed("url")
   shareUrl(url) {
     const user = User.current();

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -1,6 +1,7 @@
 {{#discourse-topic multiSelect=multiSelect enteredAt=enteredAt topic=model hasScrolled=hasScrolled}}
   {{#if model}}
     {{add-category-tag-classes category=model.category tags=model.tags}}
+    {{add-topic-status-classes topic=model}}
     <div class="container">
       {{discourse-banner user=currentUser banner=site.banner overlay=hasScrolled hide=model.errorLoading}}
     </div>