From 1791abab25487c75fe2a3fb457f7ad9632ae9ca7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9gis=20Hanol?= <regis@hanol.fr>
Date: Thu, 12 Dec 2024 17:56:30 +0100
Subject: [PATCH] FIX: replace dropdown with button when there's only one
 option (#30242)

On mobile, in the topic footer buttons, instead of showing all the
buttons, we "merge" some of then into a dropdown.

If the dropdown has only one "option", then it doesn't make sense to
show the "ellipsis" button. Instead, we directly show the button of the
only available option. Saving a click on the way.
---
 .../app/components/topic-footer-buttons.hbs     | 17 ++++++++++++++++-
 .../app/components/topic-footer-buttons.js      |  5 +++++
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/app/assets/javascripts/discourse/app/components/topic-footer-buttons.hbs b/app/assets/javascripts/discourse/app/components/topic-footer-buttons.hbs
index fa8fe109f89..c1c93589ffd 100644
--- a/app/assets/javascripts/discourse/app/components/topic-footer-buttons.hbs
+++ b/app/assets/javascripts/discourse/app/components/topic-footer-buttons.hbs
@@ -59,7 +59,22 @@
     {{/each}}
 
     {{#if this.site.mobileView}}
-      {{#if this.dropdownButtons}}
+      {{#if this.loneDropdownButton}}
+        <DButton
+          @action={{this.loneDropdownButton.action}}
+          @icon={{this.loneDropdownButton.icon}}
+          @translatedLabel={{this.loneDropdownButton.label}}
+          @translatedTitle={{this.loneDropdownButton.title}}
+          @translatedAriaLabel={{this.loneDropdownButton.ariaLabel}}
+          @disabled={{this.loneDropdownButton.disabled}}
+          id={{concat "topic-footer-button-" this.loneDropdownButton.id}}
+          class={{concat-class
+            "btn-default"
+            "topic-footer-button"
+            this.loneDropdownButton.classNames
+          }}
+        />
+      {{else if (gt this.dropdownButtons.length 1)}}
         <DMenu
           @modalForMobile={{true}}
           @identifier="topic-footer-mobile-dropdown"
diff --git a/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js b/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js
index 215bebf364a..8ccd589730d 100644
--- a/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js
+++ b/app/assets/javascripts/discourse/app/components/topic-footer-buttons.js
@@ -48,6 +48,11 @@ export default class TopicFooterButtons extends Component {
     return inlineButtons.filter((button) => button.dropdown);
   }
 
+  @discourseComputed("dropdownButtons.[]")
+  loneDropdownButton(dropdownButtons) {
+    return dropdownButtons.length === 1 ? dropdownButtons[0] : null;
+  }
+
   @discourseComputed("topic.isPrivateMessage")
   showNotificationsButton(isPM) {
     return !isPM || this.canSendPms;