FEATURE: Add expand all button for TOC

common/common.scss

@@ -46,6 +46,7 @@ $padding-basis: 0.75em;
         transition: opacity 0.3s ease-in-out, max-height 0.3s ease-in-out;
       }
       &.active,
+      &.expand-all,
       .d-toc-wrapper.overlay & {
         ul {
           max-height: 500em;

javascripts/discourse/components/toc-contents.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 { headerOffset } from "discourse/lib/offset-calculator";
 import { debounce } from "discourse-common/utils/decorators";
 import TocHeading from "../components/toc-heading";
@@ -21,6 +22,7 @@ export default class TocContents extends Component {
   @tracked activeHeadingId = null;
   @tracked headingPositions = [];
   @tracked activeAncestorIds = [];
+  @tracked expandAll = false;
 
   willDestroy() {
     super.willDestroy(...arguments);
@@ -36,6 +38,10 @@ export default class TocContents extends Component {
     return this.mappedTocStructure(this.args.tocStructure);
   }
 
+  get expandLabel() {
+    return this.expandAll ? "Reset expand" : "Expand all";
+  }
+
   @action
   setup() {
     this.listenForScroll();
@@ -64,6 +70,11 @@ export default class TocContents extends Component {
     );
   }
 
+  @action
+  toggleExpandAll() {
+    this.expandAll = !this.expandAll;
+  }
+
   @debounce(RESIZE_DEBOUNCE)
   calculateHeadingPositions() {
     this.updateHeadingPositions();
@@ -160,6 +171,12 @@ 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">
@@ -168,6 +185,7 @@ export default class TocContents extends Component {
             @activeHeadingId={{this.activeHeadingId}}
             @activeAncestorIds={{this.activeAncestorIds}}
             @renderTimeline={{@renderTimeline}}
+            @expandAll={{this.expandAll}}
           />
         </ul>
       {{/each}}

javascripts/discourse/components/toc-heading.gjs

@@ -25,12 +25,16 @@ export default class TocHeading extends Component {
       ? ` d-toc-${this.args.item.tagName}`
       : "";
     let activeClass = "";
+    let expandAllClass = "";
     if (this.isActive) {
       activeClass = " direct-active active";
     } else if (this.isAncestorActive) {
       activeClass = " active";
     }
-    return `${baseClass}${typeClass}${activeClass}`;
+    if (this.args.expandAll) {
+      expandAllClass = " expand-all";
+    }
+    return `${baseClass}${typeClass}${activeClass}${expandAllClass}`;
   }
 
   @action