UX: layout expand toggle to right of ToC

javascripts/discourse/components/toc-contents.gjs

@@ -4,7 +4,6 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import { service } from "@ember/service";
-import DButton from "discourse/components/d-button";
 import { debounce } from "discourse/lib/decorators";
 import { headerOffset } from "discourse/lib/offset-calculator";
 import TocHeading from "../components/toc-heading";
@@ -22,7 +21,6 @@ export default class TocContents extends Component {
   @tracked activeHeadingId = null;
   @tracked headingPositions = [];
   @tracked activeAncestorIds = [];
-  @tracked expandAll = false;
 
   willDestroy() {
     super.willDestroy(...arguments);
@@ -39,7 +37,7 @@ export default class TocContents extends Component {
   }
 
   get expandLabel() {
-    return this.expandAll ? "Reset expand" : "Expand all";
+    return this.args.expandAll ? "Reset expand" : "Expand all";
   }
 
   @action
@@ -72,7 +70,7 @@ export default class TocContents extends Component {
 
   @action
   toggleExpandAll() {
-    this.expandAll = !this.expandAll;
+    this.args.expandAll = !this.args.expandAll;
   }
 
   @debounce(RESIZE_DEBOUNCE)
@@ -171,12 +169,6 @@ export default class TocContents extends Component {
       {{didInsert this.setup}}
       {{didUpdate this.updateHeadingPositions @postID}}
     >
-      <div class="d-toc-top-buttons">
-        <DButton
-          @action={{this.toggleExpandAll}}
-          @translatedLabel={{this.expandLabel}}
-        />
-      </div>
 
       {{#each @tocStructure as |heading|}}
         <ul class="d-toc-heading">
@@ -185,7 +177,7 @@ export default class TocContents extends Component {
             @activeHeadingId={{this.activeHeadingId}}
             @activeAncestorIds={{this.activeAncestorIds}}
             @renderTimeline={{@renderTimeline}}
-            @expandAll={{this.expandAll}}
+            @expandAll={{this.args.expandAll}}
           />
         </ul>
       {{/each}}

javascripts/discourse/components/toc-timeline.gjs

@@ -4,6 +4,7 @@ import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
 import didUpdate from "@ember/render-modifiers/modifiers/did-update";
 import { service } from "@ember/service";
+import DButton from "discourse/components/d-button";
 import bodyClass from "discourse/helpers/body-class";
 import TocContents from "../components/toc-contents";
 import TocToggle from "../components/toc-toggle";
@@ -11,6 +12,8 @@ import TocToggle from "../components/toc-toggle";
 export default class TocTimeline extends Component {
   @service tocProcessor;
 
+  @tracked expandAll = false;
+
   @tracked
   isTocVisible = localStorage.getItem("tocVisibility") === "true" || true;
 
@@ -46,6 +49,10 @@ export default class TocTimeline extends Component {
     );
   }
 
+  get expandLabel() {
+    return this.expandAll ? "Reset expand" : "Expand all";
+  }
+
   @action
   callCheckPostforTOC() {
     this.tocProcessor.checkPostforTOC(this.args.topic);
@@ -58,6 +65,11 @@ export default class TocTimeline extends Component {
     }
   }
 
+  @action
+  toggleExpandAll() {
+    this.expandAll = !this.expandAll;
+  }
+
   <template>
     <div
       {{didInsert this.callCheckPostforTOC}}
@@ -75,7 +87,16 @@ export default class TocTimeline extends Component {
           @postID={{this.tocProcessor.postID}}
           @tocStructure={{this.tocProcessor.tocStructure}}
           @renderTimeline={{@renderTimeline}}
+          @expandAll={{this.expandAll}}
         />
+
+        <DButton
+          @action={{this.toggleExpandAll}}
+          aria-label={{this.expandLabel}}
+          @class="d-toc__btn-expand btn-transparent btn-small"
+          @icon="angles-down"
+        />
+
         {{#if @renderTimeline}}
           <TocToggle @topic={{@topic}} />
         {{/if}}