FEATURE: Add expand all button for TOC

This commit adds a button at the top of the TOC
headings list called "Expand all". This will expand
all of the subheadings in the list for easier searching.
Clicking the button again will hide all the subheadings except
the currently active one.

Author: martin-brennan

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

@@ -1,4 +1,5 @@
 import Component from "@glimmer/component";
+import DButton from "discourse/components/d-button";
 import { tracked } from "@glimmer/tracking";
 import { action } from "@ember/object";
 import didInsert from "@ember/render-modifiers/modifiers/did-insert";
@@ -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