UX: Add transition to glimmer-topic-timeline fullscreen view (#20149)

- Rename `class` getter -> `classes` seeing that we are dealing with multiple classes
- Add `show` class to fullscreen topic timeline via `did-insert` to handle how CSS transitions only apply when an existing element changes its properties. We need to wait until `timeline-fullscreen` is painted to the DOM, and then add the `show` class later.

app/assets/javascripts/discourse/app/components/glimmer-topic-timeline.hbs

@@ -1,4 +1,7 @@
-<div class={{concat "timeline-container " this.class}}>
+<div
+  class={{concat "timeline-container " this.classes}}
+  {{did-insert this.addShowClass}}
+>
   <div class="topic-timeline">
     <TopicTimeline::Container
       @model={{@model}}

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

@@ -2,6 +2,7 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import optionalService from "discourse/lib/optional-service";
 import { inject as service } from "@ember/service";
+import { bind } from "discourse-common/utils/decorators";
 
 export default class GlimmerTopicTimeline extends Component {
   @service site;
@@ -55,14 +56,10 @@ export default class GlimmerTopicTimeline extends Component {
     );
   }
 
-  get class() {
+  get classes() {
     const classes = [];
     if (this.args.fullscreen) {
-      if (this.addShowClass) {
+      classes.push("timeline-fullscreen");
-        classes.push("timeline-fullscreen show");
-      } else {
-        classes.push("timeline-fullscreen");
-      }
     }
 
     if (this.dockAt) {
@@ -75,14 +72,17 @@ export default class GlimmerTopicTimeline extends Component {
     return classes.join(" ");
   }
 
-  get addShowClass() {
-    return this.args.fullscreen && !this.args.addShowClass;
-  }
-
   get createdAt() {
     return new Date(this.args.model.created_at);
   }
 
+  @bind
+  addShowClass(element) {
+    if (this.args.fullscreen && !this.args.addShowClass) {
+      element.classList.add("show");
+    }
+  }
+
   willDestroy() {
     if (!this.site.mobileView) {
       this.intersectionObserver?.disconnect();