From e9625c1461085faa45429f08f67d924086bc1d3f Mon Sep 17 00:00:00 2001
From: chapoi <101828855+chapoi@users.noreply.github.com>
Date: Thu, 24 Jul 2025 14:48:05 +0200
Subject: [PATCH] DEV: add toggle to mini-buttons for mobile

---
 common/common.scss                              |  6 +++++-
 .../discourse/components/toc-contents.gjs       |  6 +++++-
 .../discourse/components/toc-mini-buttons.gjs   | 17 +++++++++++++++++
 3 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/common/common.scss b/common/common.scss
index e2f887f..ecbb21a 100644
--- a/common/common.scss
+++ b/common/common.scss
@@ -1,3 +1,5 @@
+@use "lib/viewport";
+
 $padding-basis: 0.75em;
 
 @media screen and (min-width: 925px) {
@@ -8,7 +10,9 @@ $padding-basis: 0.75em;
 }
 
 .d-toc-main {
-  display: flex;
+  @include viewport.from(sm) {
+    display: flex;
+  }
   min-width: 6em;
   max-width: 13em;
   word-wrap: break-word;
diff --git a/javascripts/discourse/components/toc-contents.gjs b/javascripts/discourse/components/toc-contents.gjs
index 02afe57..f1f43dd 100644
--- a/javascripts/discourse/components/toc-contents.gjs
+++ b/javascripts/discourse/components/toc-contents.gjs
@@ -162,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"
diff --git a/javascripts/discourse/components/toc-mini-buttons.gjs b/javascripts/discourse/components/toc-mini-buttons.gjs
index fec8dfa..371ae03 100644
--- a/javascripts/discourse/components/toc-mini-buttons.gjs
+++ b/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>