From d8b929206604b189eeab3de2ce2cea0581d138cf Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Tue, 21 Jan 2025 16:21:29 +1000
Subject: [PATCH] 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.
---
 common/common.scss                             |  1 +
 .../discourse/components/toc-contents.gjs      | 18 ++++++++++++++++++
 .../discourse/components/toc-heading.gjs       |  6 +++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/common/common.scss b/common/common.scss
index d9777fc..13fb709 100644
--- a/common/common.scss
+++ b/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;
diff --git a/javascripts/discourse/components/toc-contents.gjs b/javascripts/discourse/components/toc-contents.gjs
index 2866420..2848e25 100644
--- a/javascripts/discourse/components/toc-contents.gjs
+++ b/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}}
diff --git a/javascripts/discourse/components/toc-heading.gjs b/javascripts/discourse/components/toc-heading.gjs
index fa52db8..d3544a1 100644
--- a/javascripts/discourse/components/toc-heading.gjs
+++ b/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