From abfec7497126c83f4dfed5966018c13e62d3efdb Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Thu, 24 Jul 2025 14:26:14 +0200
Subject: [PATCH] UX: layout expand toggle to right of ToC

---
 common/common.scss                            |  7 +++++++
 .../discourse/components/toc-contents.gjs     | 14 +++----------
 .../discourse/components/toc-timeline.gjs     | 21 +++++++++++++++++++
 3 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index 0d90aa2..e2f887f 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -8,6 +8,7 @@ $padding-basis: 0.75em;
 }
 
 .d-toc-main {
+  display: flex;
   min-width: 6em;
   max-width: 13em;
   word-wrap: break-word;
@@ -125,6 +126,12 @@ $padding-basis: 0.75em;
   }
 }
 
+.d-toc {
+  &__btn-expand {
+    align-self: flex-start;
+  }
+}
+
 // active line marker
 $selector: "> ul > li.direct-active > a:before";
 $map: (
diff --git a/javascripts/discourse/components/toc-contents.gjs b/javascripts/discourse/components/toc-contents.gjs
index a03f3b0..02afe57 100644
--- a/javascripts/discourse/components/toc-contents.gjs
+++ b/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}}
diff --git a/javascripts/discourse/components/toc-timeline.gjs b/javascripts/discourse/components/toc-timeline.gjs
index 9af5868..c5bc9ee 100644
--- a/javascripts/discourse/components/toc-timeline.gjs
+++ b/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}}