FIX: Back button action and position on glimmer topic timeline (#20121)

This PR introduces a proper `action` to the topic timeline `back-button` which will fix the button not being clickable (or functional) as well as removing a duplicate setting of `this.lastReadTop` which was causing odd positionings of the button.

This is very difficult to test due to the fact you have to manage the "read history" for a user to have the back button populate. We will have to move forward without one (as we did in the last version of the timeline 😅) for now.

app/assets/javascripts/discourse/app/components/topic-timeline/back-button.hbs

@@ -2,7 +2,7 @@
   @type="button"
   @class="btn-primary btn-small back-button"
   @title={{i18n "topic.timeline.back_description"}}
-  @onClick={{@onClick}}
+  @action={{@onGoBack}}
 >
   {{i18n "topic.timeline.back"}}
 </DButton>

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

@@ -82,7 +82,7 @@
       <TopicTimeline::Scroller
         @current={{this.current}}
         @total={{this.total}}
-        @goBack={{this.goBack}}
+        @onGoBack={{this.onGoBack}}
         @fullscreen={{@fullscreen}}
         @showDockedButton={{this.showDockedButton}}
         @date={{this.date}}
@@ -96,12 +96,10 @@
         onClick={{this.updatePercentage}}
       ></div>
 
-      {{#if this.hasBackPosition}}
+      {{#if (and this.hasBackPosition this.showButton)}}
         <div class="timeline-last-read" style={{this.lastReadStyle}}>
           {{d-icon "minus" class="progress"}}
-          {{#if this.showButton}}
-            <TopicTimeline::BackButton @onClick={{this.goBack}} />
-          {{/if}}
+          <TopicTimeline::BackButton @onGoBack={{this.goBack}} />
         </div>
       {{/if}}
     </div>

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

@@ -27,6 +27,8 @@ export default class TopicTimelineScrollArea extends Component {
   @tracked total;
   @tracked date;
   @tracked lastReadPercentage = null;
+  @tracked lastRead;
+  @tracked lastReadTop;
   @tracked before;
   @tracked after;
   @tracked timelineScrollareaStyle;
@@ -171,8 +173,8 @@ export default class TopicTimelineScrollArea extends Component {
 
     this.date = date;
 
-    const lastReadId = topic.last_read_post_id;
     const lastReadNumber = topic.last_read_post_number;
+    const lastReadId = topic.last_read_post_id;
 
     if (lastReadId && lastReadNumber) {
       const idx = postStream.stream.indexOf(lastReadId) + 1;
@@ -200,12 +202,6 @@ export default class TopicTimelineScrollArea extends Component {
         this.before + SCROLLER_HEIGHT - 5 < this.lastReadTop ||
         this.before > this.lastReadTop + 25;
     }
-
-    if (this.hasBackPosition) {
-      this.lastReadTop = Math.round(
-        this.lastReadPercentage * scrollareaHeight()
-      );
-    }
   }
 
   @debounce(50)

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

@@ -18,7 +18,7 @@
         </div>
       {{/if}}
       {{#if (and @showDockedButton (not @dragging))}}
-        <TopicTimeline::BackButton @onClick={{@goBack}} />
+        <TopicTimeline::BackButton @onGoBack={{@onGoBack}} />
       {{/if}}
     </div>
     <div class="timeline-handle"></div>
@@ -34,7 +34,7 @@
         </div>
       {{/if}}
       {{#if (and @showDockedButton (not @dragging))}}
-        <TopicTimeline::BackButton @onClick={{@goBack}} />
+        <TopicTimeline::BackButton @onGoBack={{@onGoBack}} />
       {{/if}}
     </div>
   {{/if}}