From 85774cc21492dc686b89269ce9b9a001265e9d4b Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Tue, 8 Oct 2024 08:28:32 +1000
Subject: [PATCH] UX: Automatically collapse admin page header buttons on
 mobile (#29040)

This commit attempts to improve the mobile experience for
admin page header and subheader by automatically collapsing
all action buttons in these components into a DMenu when viewing
mobile.

This is done by using different "list" wrapper components and a
DMenu trigger and a DropdownMenu on mobile only, and uses has-block
to determine whether to render the DMenu trigger at all.

This also removes the `PluginOutlet` in `AdminPluginConfigPage`, it
was too inflexible for this `DropdownMenu` case, and since the `:actions`
were always rendering we couldn't rely on `has-block`. A new plugin API,
`registerPluginHeaderActionComponent`, has been introduced instead to
replace it.
---
 .../components/admin-backups-actions.gjs      |  4 +-
 .../components/admin-page-action-button.gjs   | 88 ++++++++++++++++++-
 .../addon/components/admin-page-header.gjs    | 67 ++++++++++++--
 .../addon/components/admin-page-subheader.gjs | 54 ++++++++++--
 .../components/admin-plugin-config-page.gjs   | 18 ++--
 .../admin/addon/models/admin-plugin.js        |  6 +-
 .../admin/addon/templates/backups-index.hbs   | 27 +++---
 .../app/components/uppy-backup-uploader.hbs   |  3 +-
 .../app/lib/admin-plugin-header-actions.js    | 13 +++
 .../discourse/app/lib/plugin-api.gjs          | 19 ++++
 .../discourse/tests/helpers/qunit-helpers.js  |  2 +
 .../components/admin-page-header-test.gjs     | 69 +++++++++++++++
 .../components/admin-page-subheader-test.gjs  | 48 ++++++++++
 .../common/admin/admin_page_header.scss       | 34 ++++++-
 .../stylesheets/common/admin/badges.scss      |  1 -
 .../components/chat-admin-plugin-actions.gjs  |  3 +-
 .../index.hbs                                 |  1 +
 .../chat-admin-plugin-configuration-nav.js    |  5 +-
 18 files changed, 406 insertions(+), 56 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/lib/admin-plugin-header-actions.js

diff --git a/app/assets/javascripts/admin/addon/components/admin-backups-actions.gjs b/app/assets/javascripts/admin/addon/components/admin-backups-actions.gjs
index a6abf5a5346..b37a8692003 100644
--- a/app/assets/javascripts/admin/addon/components/admin-backups-actions.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-backups-actions.gjs
@@ -74,14 +74,13 @@ export default class AdminBackupsActions extends Component {
         @action={{routeAction "rollback"}}
         @label="admin.backups.operations.rollback.label"
         @title="admin.backups.operations.rollback.title"
-        @icon="truck-medical"
         @disabled={{this.rollbackDisabled}}
+        @icon="truck-medical"
         class="admin-backups__rollback"
       />
     {{/if}}
 
     <@actions.Default
-      @icon={{if this.site.isReadOnly "far-eye-slash" "far-eye"}}
       @action={{this.toggleReadOnlyMode}}
       @disabled={{@backups.isOperationRunning}}
       @title={{if
@@ -94,6 +93,7 @@ export default class AdminBackupsActions extends Component {
         "admin.backups.read_only.disable.label"
         "admin.backups.read_only.enable.label"
       }}
+      @icon={{if this.site.isReadOnly "far-eye-slash" "far-eye"}}
       class="admin-backups__toggle-read-only"
     />
   </template>
diff --git a/app/assets/javascripts/admin/addon/components/admin-page-action-button.gjs b/app/assets/javascripts/admin/addon/components/admin-page-action-button.gjs
index fe9edd1cecf..1a1a0c76db8 100644
--- a/app/assets/javascripts/admin/addon/components/admin-page-action-button.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-page-action-button.gjs
@@ -1,3 +1,4 @@
+import { hash } from "@ember/helper";
 import DButton from "discourse/components/d-button";
 
 export const AdminPageActionButton = <template>
@@ -13,6 +14,18 @@ export const AdminPageActionButton = <template>
     @isLoading={{@isLoading}}
   />
 </template>;
+
+// This is used for cases where there is another component,
+// e.g. UppyBackupUploader, that is a button which cannot use
+// PrimaryButton and so on directly. This should be used very rarely,
+// most cases are covered by the other button types.
+export const WrappedButton = <template>
+  <span class="admin-page-action-wrapped-button">{{yield}}</span>
+</template>;
+
+// No buttons here pass in an @icon by design. They are okay to
+// use on dropdown list items, but our UI guidelines do not allow them
+// on regular buttons.
 export const PrimaryButton = <template>
   <AdminPageActionButton
     class="btn-primary"
@@ -22,10 +35,10 @@ export const PrimaryButton = <template>
     @routeModels={{@routeModels}}
     @label={{@label}}
     @title={{@title}}
-    @icon={{@icon}}
     @isLoading={{@isLoading}}
   />
 </template>;
+
 export const DangerButton = <template>
   <AdminPageActionButton
     class="btn-danger"
@@ -35,12 +48,55 @@ export const DangerButton = <template>
     @routeModels={{@routeModels}}
     @label={{@label}}
     @title={{@title}}
-    @icon={{@icon}}
     @isLoading={{@isLoading}}
   />
 </template>;
+
 export const DefaultButton = <template>
   <AdminPageActionButton
+    class="btn-default"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @isLoading={{@isLoading}}
+  />
+</template>;
+
+export const AdminPageActionListItem = <template>
+  <li class="dropdown-menu__item admin-page-action-list-item">
+    <AdminPageActionButton
+      class="btn-transparent"
+      ...attributes
+      @action={{@action}}
+      @route={{@route}}
+      @routeModels={{@routeModels}}
+      @label={{@label}}
+      @title={{@title}}
+      @icon={{@icon}}
+      @isLoading={{@isLoading}}
+    />
+  </li>
+</template>;
+
+// This is used for cases where there is another component,
+// e.g. UppyBackupUploader, that is a button which cannot use
+// PrimaryActionListItem and so on directly. This should be used very rarely,
+// most cases are covered by the other list types.
+export const WrappedActionListItem = <template>
+  <li
+    class="dropdown-menu__item admin-page-action-list-item admin-page-action-wrapped-list-item"
+  >
+    {{yield (hash buttonClass="btn-transparent")}}
+  </li>
+</template>;
+
+// It is not a mistake that `btn-default` is used here, in a list
+// there is no need for blue text.
+export const PrimaryActionListItem = <template>
+  <AdminPageActionListItem
     class="btn-default"
     ...attributes
     @action={{@action}}
@@ -52,3 +108,31 @@ export const DefaultButton = <template>
     @isLoading={{@isLoading}}
   />
 </template>;
+
+export const DefaultActionListItem = <template>
+  <AdminPageActionListItem
+    class="btn-default"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @icon={{@icon}}
+    @isLoading={{@isLoading}}
+  />
+</template>;
+
+export const DangerActionListItem = <template>
+  <AdminPageActionListItem
+    class="btn-danger"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @icon={{@icon}}
+    @isLoading={{@isLoading}}
+  />
+</template>;
diff --git a/app/assets/javascripts/admin/addon/components/admin-page-header.gjs b/app/assets/javascripts/admin/addon/components/admin-page-header.gjs
index 63cd1e24a97..2e9a7d02e69 100644
--- a/app/assets/javascripts/admin/addon/components/admin-page-header.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-page-header.gjs
@@ -1,17 +1,28 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
+import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import { or } from "truth-helpers";
 import DBreadcrumbsContainer from "discourse/components/d-breadcrumbs-container";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DropdownMenu from "discourse/components/dropdown-menu";
 import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
 import i18n from "discourse-common/helpers/i18n";
 import {
+  DangerActionListItem,
   DangerButton,
+  DefaultActionListItem,
   DefaultButton,
+  PrimaryActionListItem,
   PrimaryButton,
+  WrappedActionListItem,
+  WrappedButton,
 } from "admin/components/admin-page-action-button";
+import DMenu from "float-kit/components/d-menu";
 
 export default class AdminPageHeader extends Component {
+  @service site;
+
   get title() {
     if (this.args.titleLabelTranslated) {
       return this.args.titleLabelTranslated;
@@ -41,14 +52,54 @@ export default class AdminPageHeader extends Component {
           <h1 class="admin-page-header__title">{{this.title}}</h1>
         {{/if}}
 
-        <div class="admin-page-header__actions">
-          {{yield
-            (hash
-              Primary=PrimaryButton Default=DefaultButton Danger=DangerButton
-            )
-            to="actions"
-          }}
-        </div>
+        {{#if (or (has-block "actions") @headerActionComponent)}}
+          <div class="admin-page-header__actions">
+            {{#if this.site.mobileView}}
+              <DMenu
+                @identifier="admin-page-header-mobile-actions"
+                @title={{i18n "more_options"}}
+                @icon="ellipsis-vertical"
+                class="btn-small"
+              >
+                <:content>
+                  <DropdownMenu class="admin-page-header__mobile-actions">
+                    {{#let
+                      (hash
+                        Primary=PrimaryActionListItem
+                        Default=DefaultActionListItem
+                        Danger=DangerActionListItem
+                        Wrapped=WrappedActionListItem
+                      )
+                      as |actions|
+                    }}
+                      {{#if (has-block "actions")}}
+                        {{yield actions to="actions"}}
+                      {{else}}
+                        <@headerActionComponent @actions={{actions}} />
+                      {{/if}}
+                    {{/let}}
+                  </DropdownMenu>
+                </:content>
+              </DMenu>
+            {{else}}
+              {{#let
+                (hash
+                  Primary=PrimaryButton
+                  Default=DefaultButton
+                  Danger=DangerButton
+                  Wrapped=WrappedButton
+                )
+                as |actions|
+              }}
+                {{#if (has-block "actions")}}
+                  {{yield actions to="actions"}}
+                {{else}}
+                  <@headerActionComponent @actions={{actions}} />
+                {{/if}}
+              {{/let}}
+            {{/if}}
+          </div>
+        {{/if}}
       </div>
 
       {{#if this.description}}
diff --git a/app/assets/javascripts/admin/addon/components/admin-page-subheader.gjs b/app/assets/javascripts/admin/addon/components/admin-page-subheader.gjs
index 77a8ad7ac06..c2d10775b94 100644
--- a/app/assets/javascripts/admin/addon/components/admin-page-subheader.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-page-subheader.gjs
@@ -1,14 +1,24 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
+import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
+import DropdownMenu from "discourse/components/dropdown-menu";
 import i18n from "discourse-common/helpers/i18n";
 import {
+  DangerActionListItem,
   DangerButton,
+  DefaultActionListItem,
   DefaultButton,
+  PrimaryActionListItem,
   PrimaryButton,
+  WrappedActionListItem,
+  WrappedButton,
 } from "admin/components/admin-page-action-button";
+import DMenu from "float-kit/components/d-menu";
 
 export default class AdminPageSubheader extends Component {
+  @service site;
+
   get title() {
     if (this.args.titleLabelTranslated) {
       return this.args.titleLabelTranslated;
@@ -29,14 +39,42 @@ export default class AdminPageSubheader extends Component {
     <div class="admin-page-subheader">
       <div class="admin-page-subheader__title-row">
         <h3 class="admin-page-subheader__title">{{this.title}}</h3>
-        <div class="admin-page-subheader__actions">
-          {{yield
-            (hash
-              Primary=PrimaryButton Default=DefaultButton Danger=DangerButton
-            )
-            to="actions"
-          }}
-        </div>
+        {{#if (has-block "actions")}}
+          <div class="admin-page-subheader__actions">
+            {{#if this.site.mobileView}}
+              <DMenu
+                @identifier="admin-page-subheader-mobile-actions"
+                @title={{i18n "more_options"}}
+                @icon="ellipsis-vertical"
+                class="btn-small"
+              >
+                <:content>
+                  <DropdownMenu class="admin-page-subheader__mobile-actions">
+                    {{yield
+                      (hash
+                        Primary=PrimaryActionListItem
+                        Default=DefaultActionListItem
+                        Danger=DangerActionListItem
+                        Wrapped=WrappedActionListItem
+                      )
+                      to="actions"
+                    }}
+                  </DropdownMenu>
+                </:content>
+              </DMenu>
+            {{else}}
+              {{yield
+                (hash
+                  Primary=PrimaryButton
+                  Default=DefaultButton
+                  Danger=DangerButton
+                  Wrapped=WrappedButton
+                )
+                to="actions"
+              }}
+            {{/if}}
+          </div>
+        {{/if}}
       </div>
 
       {{#if this.description}}
diff --git a/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs b/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs
index 17f9b477587..a4f138b0a85 100644
--- a/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-plugin-config-page.gjs
@@ -1,9 +1,8 @@
 import Component from "@glimmer/component";
-import { hash } from "@ember/helper";
 import { service } from "@ember/service";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
 import NavItem from "discourse/components/nav-item";
-import PluginOutlet from "discourse/components/plugin-outlet";
+import { headerActionComponentForPlugin } from "discourse/lib/admin-plugin-header-actions";
 import i18n from "discourse-common/helpers/i18n";
 import AdminPageHeader from "./admin-page-header";
 import AdminPluginConfigArea from "./admin-plugin-config-area";
@@ -25,7 +24,11 @@ export default class AdminPluginConfigPage extends Component {
   }
 
   get actionsOutletName() {
-    return `admin-plugin-config-page-actions-${this.args.plugin.kebabCaseName}`;
+    return `admin-plugin-config-page-actions-${this.args.plugin.dasherizedName}`;
+  }
+
+  get headerActionComponent() {
+    return headerActionComponentForPlugin(this.args.plugin.dasherizedName);
   }
 
   linkText(navLink) {
@@ -42,6 +45,7 @@ export default class AdminPluginConfigPage extends Component {
         @titleLabelTranslated={{@plugin.nameTitleized}}
         @descriptionLabelTranslated={{@plugin.about}}
         @learnMoreUrl={{@plugin.linkUrl}}
+        @headerActionComponent={{this.headerActionComponent}}
       >
         <:breadcrumbs>
 
@@ -71,14 +75,6 @@ export default class AdminPluginConfigPage extends Component {
             {{/each}}
           {{/if}}
         </:tabs>
-        <:actions as |actions|>
-          <div class={{this.actionsOutletName}}>
-            <PluginOutlet
-              @name={{this.actionsOutletName}}
-              @outletArgs={{hash plugin=@plugin actions=actions}}
-            />
-          </div>
-        </:actions>
       </AdminPageHeader>
 
       <div class="admin-plugin-config-page__content">
diff --git a/app/assets/javascripts/admin/addon/models/admin-plugin.js b/app/assets/javascripts/admin/addon/models/admin-plugin.js
index 02d940d9470..4b0bb10045b 100644
--- a/app/assets/javascripts/admin/addon/models/admin-plugin.js
+++ b/app/assets/javascripts/admin/addon/models/admin-plugin.js
@@ -1,5 +1,5 @@
 import { cached, tracked } from "@glimmer/tracking";
-import { capitalize } from "@ember/string";
+import { capitalize, dasherize } from "@ember/string";
 import { snakeCaseToCamelCase } from "discourse-common/lib/case-converter";
 import I18n from "discourse-i18n";
 
@@ -24,8 +24,8 @@ export default class AdminPlugin {
     return this.name.replaceAll("-", "_");
   }
 
-  get kebabCaseName() {
-    return this.name.replaceAll(" ", "-").replaceAll("_", "-");
+  get dasherizedName() {
+    return dasherize(this.name);
   }
 
   get translatedCategoryName() {
diff --git a/app/assets/javascripts/admin/addon/templates/backups-index.hbs b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
index e0843ad5ba8..733cf6a3210 100644
--- a/app/assets/javascripts/admin/addon/templates/backups-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
@@ -1,13 +1,19 @@
 <AdminPageSubheader @titleLabel="admin.backups.files_title">
-  <:actions>
-    {{#if this.localBackupStorage}}
-      <UppyBackupUploader
-        @done={{route-action "uploadSuccess"}}
-        @localBackupStorage={{this.localBackupStorage}}
-      />
-    {{else}}
-      <UppyBackupUploader @done={{route-action "remoteUploadSuccess"}} />
-    {{/if}}
+  <:actions as |actions|>
+    <actions.Wrapped as |wrapped|>
+      {{#if this.localBackupStorage}}
+        <UppyBackupUploader
+          class={{wrapped.buttonClass}}
+          @done={{route-action "uploadSuccess"}}
+          @localBackupStorage={{this.localBackupStorage}}
+        />
+      {{else}}
+        <UppyBackupUploader
+          class={{wrapped.buttonClass}}
+          @done={{route-action "remoteUploadSuccess"}}
+        />
+      {{/if}}
+    </actions.Wrapped>
   </:actions>
 </AdminPageSubheader>
 
@@ -34,10 +40,9 @@
       <tr class="backup-item-row" data-backup-filename={{backup.filename}}>
         <td class="backup-filename">{{backup.filename}}</td>
         <td class="backup-size">{{human-size backup.size}}</td>
-        <td class="backup-controls">
+        <td class="backup-controls admin-table-row-controls">
           <DButton
             @action={{fn this.download backup}}
-            @icon="download"
             @title="admin.backups.operations.download.title"
             @label="admin.backups.operations.download.label"
             class="btn-default btn-small backup-item-row__download"
diff --git a/app/assets/javascripts/discourse/app/components/uppy-backup-uploader.hbs b/app/assets/javascripts/discourse/app/components/uppy-backup-uploader.hbs
index 76826aa0b10..6f8190e9777 100644
--- a/app/assets/javascripts/discourse/app/components/uppy-backup-uploader.hbs
+++ b/app/assets/javascripts/discourse/app/components/uppy-backup-uploader.hbs
@@ -2,8 +2,9 @@
   class="btn btn-small btn-primary admin-backups-upload"
   disabled={{this.uploading}}
   title={{i18n "admin.backups.upload.title"}}
+  ...attributes
 >
-  {{d-icon "upload"}}{{this.uploadButtonText}}
+  {{this.uploadButtonText}}
   <input
     class="hidden-upload-field"
     disabled={{this.uploading}}
diff --git a/app/assets/javascripts/discourse/app/lib/admin-plugin-header-actions.js b/app/assets/javascripts/discourse/app/lib/admin-plugin-header-actions.js
new file mode 100644
index 00000000000..27cb2a227c7
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/lib/admin-plugin-header-actions.js
@@ -0,0 +1,13 @@
+let pluginHeaderActionComponents = new Map();
+
+export function registerPluginHeaderActionComponent(pluginId, componentClass) {
+  pluginHeaderActionComponents.set(pluginId, componentClass);
+}
+
+export function clearPluginHeaderActionComponents() {
+  pluginHeaderActionComponents = new Map();
+}
+
+export function headerActionComponentForPlugin(pluginId) {
+  return pluginHeaderActionComponents.get(pluginId);
+}
diff --git a/app/assets/javascripts/discourse/app/lib/plugin-api.gjs b/app/assets/javascripts/discourse/app/lib/plugin-api.gjs
index 77310b8cdbb..fb68689f98a 100644
--- a/app/assets/javascripts/discourse/app/lib/plugin-api.gjs
+++ b/app/assets/javascripts/discourse/app/lib/plugin-api.gjs
@@ -61,6 +61,7 @@ import {
   PLUGIN_NAV_MODE_TOP,
   registerAdminPluginConfigNav,
 } from "discourse/lib/admin-plugin-config-nav";
+import { registerPluginHeaderActionComponent } from "discourse/lib/admin-plugin-header-actions";
 import classPrepend, {
   withPrependsRolledBack,
 } from "discourse/lib/class-prepend";
@@ -3252,6 +3253,24 @@ class PluginApi {
     addLegacyAboutPageStat(name);
   }
 
+  /**
+   * Registers a component class that will be rendered within the AdminPageHeader component
+   * only on plugins using the AdminPluginConfigPage and the new plugin "show" route.
+   *
+   * This component will be passed an `@actions` argument, with Primary, Default, Danger,
+   * and Wrapped keys, which can be used for various different types of buttons (Wrapped
+   * should be used only in very rare scenarios).
+   *
+   * This component would be used for actions that should be present on the entire UI
+   * for that plugin -- one example is "Create export" for chat.
+   *
+   * @param {string} pluginId - The `dasherizedName` of the plugin using this component.
+   * @param {Class} componentClass - The JS class of the component to render.
+   */
+  registerPluginHeaderActionComponent(pluginId, componentClass) {
+    registerPluginHeaderActionComponent(pluginId, componentClass);
+  }
+
   // eslint-disable-next-line no-unused-vars
   #deprecatedWidgetOverride(widgetName, override) {
     // insert here the code to handle widget deprecations, e.g. for the header widgets we used:
diff --git a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js
index 423113b881a..a62a75fb842 100644
--- a/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js
+++ b/app/assets/javascripts/discourse/tests/helpers/qunit-helpers.js
@@ -35,6 +35,7 @@ import { clearHTMLCache } from "discourse/helpers/custom-html";
 import { resetUsernameDecorators } from "discourse/helpers/decorate-username-selector";
 import { resetBeforeAuthCompleteCallbacks } from "discourse/instance-initializers/auth-complete";
 import { resetAdminPluginConfigNav } from "discourse/lib/admin-plugin-config-nav";
+import { clearPluginHeaderActionComponents } from "discourse/lib/admin-plugin-header-actions";
 import { rollbackAllPrepends } from "discourse/lib/class-prepend";
 import { clearPopupMenuOptions } from "discourse/lib/composer/custom-popup-menu-options";
 import { clearDesktopNotificationHandlers } from "discourse/lib/desktop-notifications";
@@ -251,6 +252,7 @@ export function testCleanup(container, app) {
   clearAboutPageActivities();
   clearLegacyAboutPageStats();
   resetWidgetCleanCallbacks();
+  clearPluginHeaderActionComponents();
 }
 
 function cleanupCssGeneratorTags() {
diff --git a/app/assets/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs
index f6768b65946..5cc3b6c59ad 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs
@@ -2,10 +2,23 @@ import { click, render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
 import NavItem from "discourse/components/nav-item";
+import { forceMobile } from "discourse/lib/mobile";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import i18n from "discourse-common/helpers/i18n";
 import AdminPageHeader from "admin/components/admin-page-header";
 
+const AdminPageHeaderActionsTestComponent = <template>
+  <div class="admin-page-header-actions-test-component">
+    <@actions.Default
+      @route="adminBadges.award"
+      @routeModels="new"
+      @icon="upload"
+      @label="admin.badges.mass_award.title"
+      class="award-badge"
+    />
+  </div>
+</template>;
+
 module("Integration | Component | AdminPageHeader", function (hooks) {
   setupRenderingTest(hooks);
 
@@ -174,4 +187,60 @@ module("Integration | Component | AdminPageHeader", function (hooks) {
     await click(".edit-groupings-btn");
     assert.true(actionCalled);
   });
+
+  test("@headerActionComponent is rendered with actions arg", async function (assert) {
+    await render(<template>
+      <AdminPageHeader
+        @headerActionComponent={{AdminPageHeaderActionsTestComponent}}
+      />
+    </template>);
+
+    assert
+      .dom(".admin-page-header-actions-test-component .award-badge")
+      .exists();
+  });
+});
+
+module("Integration | Component | AdminPageHeader | Mobile", function (hooks) {
+  hooks.beforeEach(function () {
+    forceMobile();
+  });
+
+  setupRenderingTest(hooks);
+
+  test("action buttons become a dropdown on mobile", async function (assert) {
+    await render(<template>
+      <AdminPageHeader>
+        <:actions as |actions|>
+          <actions.Primary
+            @route="adminBadges.show"
+            @routeModels="new"
+            @icon="plus"
+            @label="admin.badges.new"
+            class="new-badge"
+          />
+
+          <actions.Default
+            @route="adminBadges.award"
+            @routeModels="new"
+            @icon="upload"
+            @label="admin.badges.mass_award.title"
+            class="award-badge"
+          />
+        </:actions>
+      </AdminPageHeader>
+    </template>);
+
+    assert
+      .dom(
+        ".admin-page-header__actions .fk-d-menu__trigger.admin-page-header-mobile-actions-trigger"
+      )
+      .exists();
+
+    await click(".admin-page-header-mobile-actions-trigger");
+
+    assert
+      .dom(".dropdown-menu.admin-page-header__mobile-actions .new-badge")
+      .exists();
+  });
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/admin-page-subheader-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/admin-page-subheader-test.gjs
index d705317e24b..217ef7ca2cc 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/admin-page-subheader-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/admin-page-subheader-test.gjs
@@ -1,5 +1,6 @@
 import { click, render } from "@ember/test-helpers";
 import { module, test } from "qunit";
+import { forceMobile } from "discourse/lib/mobile";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import i18n from "discourse-common/helpers/i18n";
 import AdminPageSubheader from "admin/components/admin-page-subheader";
@@ -127,3 +128,50 @@ module("Integration | Component | AdminPageSubheader", function (hooks) {
     assert.true(actionCalled);
   });
 });
+
+module(
+  "Integration | Component | AdminPageSubheader | Mobile",
+  function (hooks) {
+    hooks.beforeEach(function () {
+      forceMobile();
+    });
+
+    setupRenderingTest(hooks);
+
+    test("action buttons become a dropdown on mobile", async function (assert) {
+      await render(<template>
+        <AdminPageSubheader>
+          <:actions as |actions|>
+            <actions.Primary
+              @route="adminBadges.show"
+              @routeModels="new"
+              @icon="plus"
+              @label="admin.badges.new"
+              class="new-badge"
+            />
+
+            <actions.Default
+              @route="adminBadges.award"
+              @routeModels="new"
+              @icon="upload"
+              @label="admin.badges.mass_award.title"
+              class="award-badge"
+            />
+          </:actions>
+        </AdminPageSubheader>
+      </template>);
+
+      assert
+        .dom(
+          ".admin-page-subheader .fk-d-menu__trigger.admin-page-subheader-mobile-actions-trigger"
+        )
+        .exists();
+
+      await click(".admin-page-subheader-mobile-actions-trigger");
+
+      assert
+        .dom(".dropdown-menu.admin-page-subheader__mobile-actions .new-badge")
+        .exists();
+    });
+  }
+);
diff --git a/app/assets/stylesheets/common/admin/admin_page_header.scss b/app/assets/stylesheets/common/admin/admin_page_header.scss
index 996b81934e6..c29fdb31e1b 100644
--- a/app/assets/stylesheets/common/admin/admin_page_header.scss
+++ b/app/assets/stylesheets/common/admin/admin_page_header.scss
@@ -6,10 +6,6 @@
     align-items: stretch;
     margin-bottom: var(--space-2);
 
-    @media (max-width: $mobile-breakpoint) {
-      flex-direction: column;
-    }
-
     h1,
     h3 {
       margin: 0;
@@ -58,3 +54,33 @@
     }
   }
 }
+
+.admin-page-header {
+  &__title-row {
+    @media (max-width: $mobile-breakpoint) {
+      flex-direction: row;
+      align-items: center;
+
+      .admin-page-header__actions {
+        button {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.admin-page-subheader {
+  &__title-row {
+    @media (max-width: $mobile-breakpoint) {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+}
+
+.admin-page-action-list-item {
+  .btn-primary {
+    color: var(--primary);
+  }
+}
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index a4f1fb55543..a6326ce8a1f 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -97,7 +97,6 @@
 }
 
 .award-badge {
-  margin: 15px 0 0 15px;
   float: left;
   max-width: 70%;
 
diff --git a/plugins/chat/admin/assets/javascripts/admin/components/chat-admin-plugin-actions.gjs b/plugins/chat/admin/assets/javascripts/admin/components/chat-admin-plugin-actions.gjs
index 66b02e3dcb9..017dda597c3 100644
--- a/plugins/chat/admin/assets/javascripts/admin/components/chat-admin-plugin-actions.gjs
+++ b/plugins/chat/admin/assets/javascripts/admin/components/chat-admin-plugin-actions.gjs
@@ -29,10 +29,11 @@ export default class ChatAdminPluginActions extends Component {
   }
 
   <template>
-    <@outletArgs.actions.Primary
+    <@actions.Primary
       @label="chat.admin.export_messages.create_export"
       @title="chat.admin.export_messages.create_export"
       @action={{this.confirmExportMessages}}
+      @icon="right-from-bracket"
       class="admin-chat-export"
     />
   </template>
diff --git a/plugins/chat/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-chat-incoming-webhooks/index.hbs b/plugins/chat/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-chat-incoming-webhooks/index.hbs
index f050a5ff06b..8f494bde0ad 100644
--- a/plugins/chat/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-chat-incoming-webhooks/index.hbs
+++ b/plugins/chat/admin/assets/javascripts/discourse/templates/admin-plugins/show/discourse-chat-incoming-webhooks/index.hbs
@@ -14,6 +14,7 @@
         @title="chat.incoming_webhooks.new"
         @route="adminPlugins.show.discourse-chat-incoming-webhooks.new"
         @routeModels="chat"
+        @icon="plus"
         class="admin-incoming-webhooks-new"
       />
     </:actions>
diff --git a/plugins/chat/assets/javascripts/discourse/initializers/chat-admin-plugin-configuration-nav.js b/plugins/chat/assets/javascripts/discourse/initializers/chat-admin-plugin-configuration-nav.js
index 2fbc231a7c7..ae508c97db9 100644
--- a/plugins/chat/assets/javascripts/discourse/initializers/chat-admin-plugin-configuration-nav.js
+++ b/plugins/chat/assets/javascripts/discourse/initializers/chat-admin-plugin-configuration-nav.js
@@ -19,10 +19,7 @@ export default {
         },
       ]);
 
-      api.renderInOutlet(
-        "admin-plugin-config-page-actions-chat",
-        ChatAdminPluginActions
-      );
+      api.registerPluginHeaderActionComponent("chat", ChatAdminPluginActions);
     });
   },
 };