FEATURE: Add expand all button for TOC

common/common.scss

@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 $padding-basis: 0.75em;
 
 @media screen and (width >= 925px) {
@@ -8,6 +10,9 @@ $padding-basis: 0.75em;
 }
 
 .d-toc-main {
+  @include viewport.from(sm) {
+    display: flex;
+  }
   min-width: 6em;
   max-width: 13em;
   word-wrap: break-word;
@@ -58,6 +63,7 @@ $padding-basis: 0.75em;
       }
 
       &.active,
+      &.expand-all,
       .d-toc-wrapper.overlay & {
         ul {
           max-height: 500em;
@@ -124,6 +130,12 @@ $padding-basis: 0.75em;
   }
 }
 
+.d-toc {
+  &__btn-expand {
+    align-self: flex-start;
+  }
+}
+
 // active line marker
 $selector: "> ul > li.direct-active > a:before";
 $map: (

javascripts/discourse/components/toc-contents.gjs

@@ -36,6 +36,10 @@ export default class TocContents extends Component {
     return this.mappedTocStructure(this.args.tocStructure);
   }
 
+  get expandLabel() {
+    return this.args.expandAll ? "Reset expand" : "Expand all";
+  }
+
   @action
   setup() {
     this.listenForScroll();
@@ -64,6 +68,11 @@ export default class TocContents extends Component {
     );
   }
 
+  @action
+  toggleExpandAll() {
+    this.args.expandAll = !this.args.expandAll;
+  }
+
   @debounce(RESIZE_DEBOUNCE)
   calculateHeadingPositions() {
     this.updateHeadingPositions();
@@ -153,7 +162,11 @@ export default class TocContents extends Component {
 
   <template>
     {{#unless @renderTimeline}}
-      <TocMiniButtons @renderTimeline={{@renderTimeline}} @postID={{@postID}} />
+      <TocMiniButtons
+        @renderTimeline={{@renderTimeline}}
+        @postID={{@postID}}
+        @expandAll={{this.args.expandAll}}
+      />
     {{/unless}}
     <div
       id="d-toc"
@@ -168,6 +181,7 @@ export default class TocContents extends Component {
             @activeHeadingId={{this.activeHeadingId}}
             @activeAncestorIds={{this.activeAncestorIds}}
             @renderTimeline={{@renderTimeline}}
+            @expandAll={{this.args.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

javascripts/discourse/components/toc-mini-buttons.gjs

@@ -6,6 +6,10 @@ import DButton from "discourse/components/d-button";
 export default class TocMiniButtons extends Component {
   @service tocProcessor;
 
+  get expandLabel() {
+    return this.args.expandAll ? "Reset expand" : "Expand all";
+  }
+
   @action
   callCloseOverlay() {
     this.tocProcessor.setOverlayVisible(false);
@@ -16,16 +20,29 @@ export default class TocMiniButtons extends Component {
     this.tocProcessor.jumpToEnd(this.args.renderTimeline, this.args.postID);
   }
 
+  @action
+  toggleExpandAll() {
+    this.args.expandAll = !this.args.expandAll;
+  }
+
   <template>
     <div class="d-toc-icons">
       <DButton
         @action={{this.callJumpToEnd}}
         @icon="downward"
+        aria-label="Scroll to bottom"
         class="btn btn-transparent scroll-to-bottom"
       />
+      <DButton
+        @action={{this.toggleExpandAll}}
+        aria-label={{this.expandLabel}}
+        class="d-toc__btn-expand btn-transparent btn-small"
+        @icon="angles-down"
+      />
       <DButton
         @action={{this.closeOverlay}}
         @icon="xmark"
+        aria-label="close table of contents"
         class="btn btn-transparent d-toc-close"
       />
     </div>

javascripts/discourse/components/toc-timeline.gjs

@@ -4,13 +4,16 @@ 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";
 
 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}}