From a879bcdc356d4e691fd217abd34a9f9a2022539c Mon Sep 17 00:00:00 2001
From: Martin Brennan <martin@discourse.org>
Date: Wed, 18 Dec 2024 08:13:39 +1000
Subject: [PATCH] DEV: Introduce <DPageHeader /> and <DPageSubheader />
 components (#30146)

This converts the `<AdminPageHeader />` component and the
`<AdminPageSubheader />` components into new components
that can be used outside of admin, and updates the CSS classes.
Also introduces a `<DPageActionButton />` component and child
components for the header action buttons.

I have to keep the old admin-only components around for
now until plugins are updated, then we can remove it,
and remove the re-exports that are done within
admin-page-action-button.gjs
---
 .../look-and-feel-themes.gjs                  |  10 +-
 .../components/admin-page-action-button.gjs   | 159 +++-------------
 .../components/admin-plugin-config-page.gjs   |  12 +-
 .../components/admin-section-landing-item.gjs |   8 +-
 .../admin/addon/templates/admin-badges.hbs    |   9 +-
 .../admin/addon/templates/backups-index.hbs   |   4 +-
 .../admin/addon/templates/backups.hbs         |  10 +-
 .../admin/addon/templates/config-about.hbs    |   9 +-
 .../admin/addon/templates/config-flags.hbs    |   9 +-
 .../addon/templates/config-look-and-feel.hbs  |   9 +-
 .../admin/addon/templates/dashboard.hbs       |   4 +-
 .../admin/addon/templates/emojis.hbs          |   9 +-
 .../addon/templates/permalinks-index.hbs      |   9 +-
 .../admin/addon/templates/plugins-index.hbs   |   9 +-
 .../admin/addon/templates/plugins.hbs         |   4 +-
 .../admin/addon/templates/section-account.hbs |   7 +-
 .../admin/addon/templates/user-fields.hbs     |   9 +-
 .../admin/addon/templates/users-list-show.hbs |   4 +-
 .../admin/addon/templates/users-list.hbs      |   9 +-
 .../admin/addon/templates/whats-new.hbs       |   9 +-
 .../app/components/d-page-action-button.gjs   | 124 ++++++++++++
 .../app/components/d-page-header.gjs          | 145 ++++++++++++++
 .../app/components/d-page-subheader.gjs       |  76 ++++++++
 .../discourse/app/lib/plugin-api.gjs          |   2 +-
 .../tests/acceptance/admin-users-list-test.js |   8 +-
 .../components/admin-page-subheader-test.gjs  | 177 ------------------
 ...header-test.gjs => d-page-header-test.gjs} | 119 +++++-------
 .../components/d-page-subheader-test.gjs      | 154 +++++++++++++++
 .../stylesheets/common/admin/badges.scss      |   2 +-
 .../stylesheets/common/admin/customize.scss   |   1 +
 .../stylesheets/common/admin/plugins.scss     |   2 +-
 .../stylesheets/common/components/_index.scss |   1 +
 .../common/components/d-page-header.scss      |  92 +++++++++
 .../index.hbs                                 |   8 +-
 .../system/admin/incoming_webhooks_spec.rb    |   6 +-
 spec/system/admin_flags_spec.rb               |  11 +-
 spec/system/admin_user_fields_spec.rb         |   8 +-
 .../{admin-header.rb => admin_header.rb}      |   7 +-
 .../page_objects/components/d_page_header.rb  |  19 ++
 .../page_objects/pages/admin_plugins_list.rb  |   2 +-
 .../page_objects/pages/admin_user_fields.rb   |   2 +-
 41 files changed, 789 insertions(+), 489 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/components/d-page-action-button.gjs
 create mode 100644 app/assets/javascripts/discourse/app/components/d-page-header.gjs
 create mode 100644 app/assets/javascripts/discourse/app/components/d-page-subheader.gjs
 delete mode 100644 app/assets/javascripts/discourse/tests/integration/components/admin-page-subheader-test.gjs
 rename app/assets/javascripts/discourse/tests/integration/components/{admin-page-header-test.gjs => d-page-header-test.gjs} (54%)
 create mode 100644 app/assets/javascripts/discourse/tests/integration/components/d-page-subheader-test.gjs
 create mode 100644 app/assets/stylesheets/common/components/d-page-header.scss
 rename spec/system/page_objects/components/{admin-header.rb => admin_header.rb} (50%)
 create mode 100644 spec/system/page_objects/components/d_page_header.rb

diff --git a/app/assets/javascripts/admin/addon/components/admin-config-areas/look-and-feel-themes.gjs b/app/assets/javascripts/admin/addon/components/admin-config-areas/look-and-feel-themes.gjs
index 66c8b369b3f..d47f9b85671 100644
--- a/app/assets/javascripts/admin/addon/components/admin-config-areas/look-and-feel-themes.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-config-areas/look-and-feel-themes.gjs
@@ -1,8 +1,8 @@
 import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { service } from "@ember/service";
+import DPageSubheader from "discourse/components/d-page-subheader";
 import { i18n } from "discourse-i18n";
-import AdminPageSubheader from "admin/components/admin-page-subheader";
 import InstallThemeModal from "admin/components/modal/install-theme";
 import ThemesGrid from "admin/components/themes-grid";
 
@@ -47,9 +47,9 @@ export default class AdminConfigAreasLookAndFeelThemes extends Component {
   }
 
   <template>
-    <AdminPageSubheader
-      @titleLabel="admin.config_areas.look_and_feel.themes.title"
-      @descriptionLabel="admin.customize.theme.themes_intro_new"
+    <DPageSubheader
+      @titleLabel={{i18n "admin.config_areas.look_and_feel.themes.title"}}
+      @descriptionLabel={{i18n "admin.customize.theme.themes_intro_new"}}
       @learnMoreUrl="https://meta.discourse.org/t/93648"
     >
       <:actions as |actions|>
@@ -60,7 +60,7 @@ export default class AdminConfigAreasLookAndFeelThemes extends Component {
           class="admin-look-and-feel__install-theme"
         />
       </:actions>
-    </AdminPageSubheader>
+    </DPageSubheader>
 
     <div class="admin-detail">
       <ThemesGrid @themes={{@themes}} />
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 1a1a0c76db8..501267210f9 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,138 +1,25 @@
-import { hash } from "@ember/helper";
-import DButton from "discourse/components/d-button";
+// TODO (martin) Delete this once we have removed references from plugins.
 
-export const AdminPageActionButton = <template>
-  <DButton
-    class="admin-page-action-button btn-small"
-    ...attributes
-    @action={{@action}}
-    @route={{@route}}
-    @routeModels={{@routeModels}}
-    @label={{@label}}
-    @title={{@title}}
-    @icon={{@icon}}
-    @isLoading={{@isLoading}}
-  />
-</template>;
+import {
+  DangerActionListItem,
+  DangerButton,
+  DefaultActionListItem,
+  DefaultButton,
+  DPageActionButton,
+  DPageActionListItem,
+  PrimaryActionListItem,
+  PrimaryButton,
+  WrappedActionListItem,
+  WrappedButton,
+} from "discourse/components/d-page-action-button";
 
-// 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"
-    ...attributes
-    @action={{@action}}
-    @route={{@route}}
-    @routeModels={{@routeModels}}
-    @label={{@label}}
-    @title={{@title}}
-    @isLoading={{@isLoading}}
-  />
-</template>;
-
-export const DangerButton = <template>
-  <AdminPageActionButton
-    class="btn-danger"
-    ...attributes
-    @action={{@action}}
-    @route={{@route}}
-    @routeModels={{@routeModels}}
-    @label={{@label}}
-    @title={{@title}}
-    @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}}
-    @route={{@route}}
-    @routeModels={{@routeModels}}
-    @label={{@label}}
-    @title={{@title}}
-    @icon={{@icon}}
-    @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>;
+export { DangerActionListItem as DangerActionListItem };
+export { DangerButton as DangerButton };
+export { DefaultActionListItem as DefaultActionListItem };
+export { DefaultButton as DefaultButton };
+export { DPageActionButton as DPageActionButton };
+export { DPageActionListItem as DPageActionListItem };
+export { PrimaryActionListItem as PrimaryActionListItem };
+export { PrimaryButton as PrimaryButton };
+export { WrappedActionListItem as WrappedActionListItem };
+export { WrappedButton as WrappedButton };
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 a2d27c9f80a..687867b0e9e 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,10 +1,10 @@
 import Component from "@glimmer/component";
 import { service } from "@ember/service";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DPageHeader from "discourse/components/d-page-header";
 import NavItem from "discourse/components/nav-item";
 import { headerActionComponentForPlugin } from "discourse/lib/admin-plugin-header-actions";
 import { i18n } from "discourse-i18n";
-import AdminPageHeader from "./admin-page-header";
 import AdminPluginConfigArea from "./admin-plugin-config-area";
 
 export default class AdminPluginConfigPage extends Component {
@@ -41,14 +41,14 @@ export default class AdminPluginConfigPage extends Component {
 
   <template>
     <div class="admin-plugin-config-page">
-      <AdminPageHeader
-        @titleLabelTranslated={{@plugin.nameTitleized}}
-        @descriptionLabelTranslated={{@plugin.about}}
+      <DPageHeader
+        @titleLabel={{@plugin.nameTitleized}}
+        @descriptionLabel={{@plugin.about}}
         @learnMoreUrl={{@plugin.linkUrl}}
         @headerActionComponent={{this.headerActionComponent}}
       >
         <:breadcrumbs>
-
+          <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
           <DBreadcrumbsItem
             @path="/admin/plugins"
             @label={{i18n "admin.plugins.title"}}
@@ -75,7 +75,7 @@ export default class AdminPluginConfigPage extends Component {
             {{/each}}
           {{/if}}
         </:tabs>
-      </AdminPageHeader>
+      </DPageHeader>
 
       <div class="admin-plugin-config-page__content">
         <div class={{this.mainAreaClasses}}>
diff --git a/app/assets/javascripts/admin/addon/components/admin-section-landing-item.gjs b/app/assets/javascripts/admin/addon/components/admin-section-landing-item.gjs
index c81ae55ebe1..8bd55918e44 100644
--- a/app/assets/javascripts/admin/addon/components/admin-section-landing-item.gjs
+++ b/app/assets/javascripts/admin/addon/components/admin-section-landing-item.gjs
@@ -1,14 +1,14 @@
 import Component from "@glimmer/component";
 import { hash } from "@ember/helper";
 import { LinkTo } from "@ember/routing";
-import concatClass from "discourse/helpers/concat-class";
-import dIcon from "discourse-common/helpers/d-icon";
-import { i18n } from "discourse-i18n";
 import {
   DangerButton,
   DefaultButton,
   PrimaryButton,
-} from "admin/components/admin-page-action-button";
+} from "discourse/components/d-page-action-button";
+import concatClass from "discourse/helpers/concat-class";
+import dIcon from "discourse-common/helpers/d-icon";
+import { i18n } from "discourse-i18n";
 
 export default class AdminSectionLandingItem extends Component {
   get title() {
diff --git a/app/assets/javascripts/admin/addon/templates/admin-badges.hbs b/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
index 0183cb413bd..3a94b3a7969 100644
--- a/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
+++ b/app/assets/javascripts/admin/addon/templates/admin-badges.hbs
@@ -1,10 +1,11 @@
 <div class="badges">
-  <AdminPageHeader
-    @titleLabel="admin.badges.title"
-    @descriptionLabel="admin.badges.page_description"
+  <DPageHeader
+    @titleLabel={{i18n "admin.badges.title"}}
+    @descriptionLabel={{i18n "admin.badges.page_description"}}
     @learnMoreUrl="https://meta.discourse.org/t/understanding-and-using-badges/32540"
   >
     <:breadcrumbs>
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
         @path="/admin/badges"
         @label={{i18n "admin.badges.title"}}
@@ -35,7 +36,7 @@
         class="edit-groupings-btn"
       />
     </:actions>
-  </AdminPageHeader>
+  </DPageHeader>
 
   <div class="admin-container">
     <div class="content-list">
diff --git a/app/assets/javascripts/admin/addon/templates/backups-index.hbs b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
index 26da5482cae..faf2692b51b 100644
--- a/app/assets/javascripts/admin/addon/templates/backups-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/backups-index.hbs
@@ -1,4 +1,4 @@
-<AdminPageSubheader @titleLabel="admin.backups.files_title">
+<DPageSubheader @titleLabel={{i18n "admin.backups.files_title"}}>
   <:actions as |actions|>
     <actions.Wrapped as |wrapped|>
       {{#if this.localBackupStorage}}
@@ -15,7 +15,7 @@
       {{/if}}
     </actions.Wrapped>
   </:actions>
-</AdminPageSubheader>
+</DPageSubheader>
 
 {{#if this.status.restoreDisabled}}
   <div class="backup-message alert alert-info">
diff --git a/app/assets/javascripts/admin/addon/templates/backups.hbs b/app/assets/javascripts/admin/addon/templates/backups.hbs
index a5428da896d..7d9b2b38b4d 100644
--- a/app/assets/javascripts/admin/addon/templates/backups.hbs
+++ b/app/assets/javascripts/admin/addon/templates/backups.hbs
@@ -1,11 +1,11 @@
 <div class="admin-backups admin-config-page">
-
-  <AdminPageHeader
-    @titleLabel="admin.backups.title"
-    @descriptionLabel="admin.backups.description"
+  <DPageHeader
+    @titleLabel={{i18n "admin.backups.title"}}
+    @descriptionLabel={{i18n "admin.backups.description"}}
     @learnMoreUrl="https://meta.discourse.org/t/create-download-and-restore-a-backup-of-your-discourse-database/122710"
   >
     <:breadcrumbs>
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
         @path="/admin/backups"
         @label={{i18n "admin.backups.title"}}
@@ -32,7 +32,7 @@
       />
       <PluginOutlet @name="downloader" @connectorTagName="div" />
     </:tabs>
-  </AdminPageHeader>
+  </DPageHeader>
 
   <PluginOutlet @name="before-backup-list" @connectorTagName="div" />
 
diff --git a/app/assets/javascripts/admin/addon/templates/config-about.hbs b/app/assets/javascripts/admin/addon/templates/config-about.hbs
index 266f64240f1..3e3ca547f55 100644
--- a/app/assets/javascripts/admin/addon/templates/config-about.hbs
+++ b/app/assets/javascripts/admin/addon/templates/config-about.hbs
@@ -1,6 +1,6 @@
-<AdminPageHeader
-  @titleLabel="admin.config_areas.about.header"
-  @descriptionLabelTranslated={{i18n
+<DPageHeader
+  @titleLabel={{i18n "admin.config_areas.about.header"}}
+  @descriptionLabel={{i18n
     "admin.config_areas.about.description"
     (hash basePath=(base-path))
   }}
@@ -8,12 +8,13 @@
   @learnMoreUrl="https://meta.discourse.org/t/understanding-and-customizing-the-about-page/332161"
 >
   <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
     <DBreadcrumbsItem
       @path="/admin/config/about"
       @label={{i18n "admin.config_areas.about.header"}}
     />
   </:breadcrumbs>
-</AdminPageHeader>
+</DPageHeader>
 
 <div class="admin-container admin-config-page__main-area">
   <AdminConfigAreas::About @data={{this.model.site_settings}} />
diff --git a/app/assets/javascripts/admin/addon/templates/config-flags.hbs b/app/assets/javascripts/admin/addon/templates/config-flags.hbs
index f0706ea7e07..fa8890d1101 100644
--- a/app/assets/javascripts/admin/addon/templates/config-flags.hbs
+++ b/app/assets/javascripts/admin/addon/templates/config-flags.hbs
@@ -1,9 +1,10 @@
-<AdminPageHeader
-  @titleLabel="admin.config_areas.flags.header"
-  @descriptionLabel="admin.config_areas.flags.subheader"
+<DPageHeader
+  @titleLabel={{i18n "admin.config_areas.flags.header"}}
+  @descriptionLabel={{i18n "admin.config_areas.flags.subheader"}}
   @learnMoreUrl="https://meta.discourse.org/t/moderation-flags/325589"
 >
   <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
     <DBreadcrumbsItem
       @path="/admin/config/flags"
       @label={{i18n "admin.config_areas.flags.header"}}
@@ -30,7 +31,7 @@
       class="admin-flags-tabs__flags"
     />
   </:tabs>
-</AdminPageHeader>
+</DPageHeader>
 
 <div class="admin-container admin-config-page__main-area">
   {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs b/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs
index 1dacd69dcea..6ae9534c04b 100644
--- a/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs
+++ b/app/assets/javascripts/admin/addon/templates/config-look-and-feel.hbs
@@ -1,9 +1,10 @@
-<AdminPageHeader
-  @titleLabel="admin.config_areas.look_and_feel.title"
-  @descriptionLabel="admin.config_areas.look_and_feel.description"
+<DPageHeader
+  @titleLabel={{i18n "admin.config_areas.look_and_feel.title"}}
+  @descriptionLabel={{i18n "admin.config_areas.look_and_feel.description"}}
   @learnMoreUrl="https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966"
 >
   <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
     <DBreadcrumbsItem
       @path="/admin/config/look-and-feel"
       @label={{i18n "admin.config_areas.look_and_feel.title"}}
@@ -16,7 +17,7 @@
       @label="admin.config_areas.look_and_feel.themes.title"
     />
   </:tabs>
-</AdminPageHeader>
+</DPageHeader>
 
 <div class="admin-container admin-config-page__main-area">
   {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/dashboard.hbs b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
index f5a07025ee1..d63e75b3bdd 100644
--- a/app/assets/javascripts/admin/addon/templates/dashboard.hbs
+++ b/app/assets/javascripts/admin/addon/templates/dashboard.hbs
@@ -2,11 +2,11 @@
   <PluginOutlet @name="admin-dashboard-top" @connectorTagName="div" />
 </span>
 
-<AdminPageHeader @hideTabs={{true}}>
+<DPageHeader @hideTabs={{true}}>
   <:breadcrumbs>
     <DBreadcrumbsItem @path="/admin" @label={{i18n "admin.dashboard.title"}} />
   </:breadcrumbs>
-</AdminPageHeader>
+</DPageHeader>
 
 {{#if this.showVersionChecks}}
   <div class="section-top">
diff --git a/app/assets/javascripts/admin/addon/templates/emojis.hbs b/app/assets/javascripts/admin/addon/templates/emojis.hbs
index c30f4a20dac..4edea0c0b0b 100644
--- a/app/assets/javascripts/admin/addon/templates/emojis.hbs
+++ b/app/assets/javascripts/admin/addon/templates/emojis.hbs
@@ -1,10 +1,11 @@
 <div class="admin-emojis admin-config-page">
-  <AdminPageHeader
-    @titleLabel="admin.emoji.title"
-    @descriptionLabel="admin.emoji.description"
+  <DPageHeader
+    @titleLabel={{i18n "admin.emoji.title"}}
+    @descriptionLabel={{i18n "admin.emoji.description"}}
     @hideTabs={{this.hideTabs}}
   >
     <:breadcrumbs>
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
         @path="/admin/customize/emojis"
         @label={{i18n "admin.emoji.title"}}
@@ -25,7 +26,7 @@
         class="admin-emojis-tabs__emoji"
       />
     </:tabs>
-  </AdminPageHeader>
+  </DPageHeader>
 
   <div class="admin-container admin-config-page__main-area">
     {{outlet}}
diff --git a/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs b/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs
index f7929430151..5676ac234bd 100644
--- a/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/permalinks-index.hbs
@@ -1,10 +1,11 @@
 <div class="admin-permalinks admin-config-page">
-  <AdminPageHeader
-    @titleLabel="admin.permalink.title"
-    @descriptionLabel="admin.permalink.description"
+  <DPageHeader
+    @titleLabel={{i18n "admin.permalink.title"}}
+    @descriptionLabel={{i18n "admin.permalink.description"}}
     @learnMoreUrl="https://meta.discourse.org/t/redirect-old-forum-urls-to-new-discourse-urls/20930"
   >
     <:breadcrumbs>
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
         @path="/admin/customize/permalinks"
         @label={{i18n "admin.permalink.title"}}
@@ -19,7 +20,7 @@
         class="admin-permalinks__header-add-permalink"
       />
     </:actions>
-  </AdminPageHeader>
+  </DPageHeader>
   <div class="admin-container admin-config-page__main-area">
     <ConditionalLoadingSpinner @condition={{this.loading}}>
       <div class="permalink-search">
diff --git a/app/assets/javascripts/admin/addon/templates/plugins-index.hbs b/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
index 6edfa99661d..b50c6b5c4fb 100644
--- a/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
+++ b/app/assets/javascripts/admin/addon/templates/plugins-index.hbs
@@ -1,11 +1,12 @@
 <div class="admin-plugins-list-container">
 
-  <AdminPageHeader
-    @titleLabel="admin.plugins.installed"
-    @descriptionLabel="admin.plugins.description"
+  <DPageHeader
+    @titleLabel={{i18n "admin.plugins.installed"}}
+    @descriptionLabel={{i18n "admin.plugins.description"}}
     @learnMoreUrl="https://www.discourse.org/plugins"
   >
     <:breadcrumbs>
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
         @path="/admin/plugins"
         @label={{i18n "admin.plugins.title"}}
@@ -32,7 +33,7 @@
         {{/if}}
       {{/each}}
     </:tabs>
-  </AdminPageHeader>
+  </DPageHeader>
 
   <div class="alert alert-info -top-margin admin-plugins-howto">
     {{dIcon "circle-info"}}
diff --git a/app/assets/javascripts/admin/addon/templates/plugins.hbs b/app/assets/javascripts/admin/addon/templates/plugins.hbs
index b729a6f5359..a878db38063 100644
--- a/app/assets/javascripts/admin/addon/templates/plugins.hbs
+++ b/app/assets/javascripts/admin/addon/templates/plugins.hbs
@@ -1,12 +1,12 @@
 {{#if this.showTopNav}}
-  <div class="admin-page-header">
+  <div class="d-page-header">
     <DBreadcrumbsContainer />
     <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
     <DBreadcrumbsItem
       @path="/admin/plugins"
       @label={{i18n "admin.plugins.title"}}
     />
-    <div class="admin-nav-submenu">
+    <div class="d-nav-submenu">
       <HorizontalOverflowNav class="main-nav nav plugin-nav">
         <NavItem @route="adminPlugins.index" @label="admin.plugins.title" />
         {{#each this.adminRoutes as |route|}}
diff --git a/app/assets/javascripts/admin/addon/templates/section-account.hbs b/app/assets/javascripts/admin/addon/templates/section-account.hbs
index 3c50c9114e9..8d10f240686 100644
--- a/app/assets/javascripts/admin/addon/templates/section-account.hbs
+++ b/app/assets/javascripts/admin/addon/templates/section-account.hbs
@@ -1,14 +1,15 @@
-<AdminPageHeader
-  @titleLabel="admin.section_landing_pages.account.title"
+<DPageHeader
+  @titleLabel={{i18n "admin.section_landing_pages.account.title"}}
   @hideTabs={{true}}
 >
   <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
     <DBreadcrumbsItem
       @path="/admin/section/account"
       @label={{i18n "admin.section_landing_pages.account.title"}}
     />
   </:breadcrumbs>
-</AdminPageHeader>
+</DPageHeader>
 
 <AdminSectionLandingWrapper>
   <AdminSectionLandingItem
diff --git a/app/assets/javascripts/admin/addon/templates/user-fields.hbs b/app/assets/javascripts/admin/addon/templates/user-fields.hbs
index 1007dafad2e..a53ef39ce07 100644
--- a/app/assets/javascripts/admin/addon/templates/user-fields.hbs
+++ b/app/assets/javascripts/admin/addon/templates/user-fields.hbs
@@ -1,11 +1,12 @@
 <div class="admin-user_fields admin-config-page">
-  <AdminPageHeader
-    @titleLabel="admin.user_fields.title"
-    @descriptionLabel="admin.user_fields.help"
+  <DPageHeader
+    @titleLabel={{i18n "admin.user_fields.title"}}
+    @descriptionLabel={{i18n "admin.user_fields.help"}}
     @hideTabs={{true}}
     @learnMoreUrl="https://meta.discourse.org/t/creating-and-configuring-custom-user-fields/113192"
   >
     <:breadcrumbs>
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
         @path="/admin/customize/user_fields"
         @label={{i18n "admin.user_fields.title"}}
@@ -17,7 +18,7 @@
         @label="admin.user_fields.add"
       />
     </:actions>
-  </AdminPageHeader>
+  </DPageHeader>
 
   <div class="admin-config-page__main-area">
     <div class="user-fields">
diff --git a/app/assets/javascripts/admin/addon/templates/users-list-show.hbs b/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
index ec82e1b1096..1ee1985adbc 100644
--- a/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
+++ b/app/assets/javascripts/admin/addon/templates/users-list-show.hbs
@@ -1,4 +1,4 @@
-<AdminPageSubheader @titleLabelTranslated={{this.title}}>
+<DPageSubheader @titleLabel={{this.title}}>
   <:actions as |actions|>
     {{#if this.canCheckEmails}}
       {{#if this.showEmails}}
@@ -16,7 +16,7 @@
       {{/if}}
     {{/if}}
   </:actions>
-</AdminPageSubheader>
+</DPageSubheader>
 
 <PluginOutlet @name="admin-users-list-show-before" />
 
diff --git a/app/assets/javascripts/admin/addon/templates/users-list.hbs b/app/assets/javascripts/admin/addon/templates/users-list.hbs
index 3aa622b6c0b..4ae8893e263 100644
--- a/app/assets/javascripts/admin/addon/templates/users-list.hbs
+++ b/app/assets/javascripts/admin/addon/templates/users-list.hbs
@@ -1,10 +1,11 @@
 <div class="admin-users admin-config-page">
-  <AdminPageHeader
-    @titleLabel="admin.users.title"
-    @descriptionLabel="admin.users.description"
+  <DPageHeader
+    @titleLabel={{i18n "admin.users.title"}}
+    @descriptionLabel={{i18n "admin.users.description"}}
     @learnMoreUrl="https://meta.discourse.org/t/accessing-a-user-s-admin-page/311859"
   >
     <:breadcrumbs>
+      <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
       <DBreadcrumbsItem
         @path="/admin/users/list"
         @label={{i18n "admin.users.title"}}
@@ -72,7 +73,7 @@
         class="admin-users-tabs__groups"
       />
     </:tabs>
-  </AdminPageHeader>
+  </DPageHeader>
   <div class="admin-container admin-config-page__main-area">
   </div>
 </div>
diff --git a/app/assets/javascripts/admin/addon/templates/whats-new.hbs b/app/assets/javascripts/admin/addon/templates/whats-new.hbs
index 854339cfc96..f0b2103a570 100644
--- a/app/assets/javascripts/admin/addon/templates/whats-new.hbs
+++ b/app/assets/javascripts/admin/addon/templates/whats-new.hbs
@@ -1,10 +1,11 @@
-<AdminPageHeader
-  @titleLabel="admin.dashboard.new_features.title"
-  @descriptionLabel="admin.dashboard.new_features.subtitle"
+<DPageHeader
+  @titleLabel={{i18n "admin.dashboard.new_features.title"}}
+  @descriptionLabel={{i18n "admin.dashboard.new_features.subtitle"}}
   @learnMoreUrl="https://meta.discourse.org/tags/c/announcements/67/release-notes"
   @hideTabs={{true}}
 >
   <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
     <DBreadcrumbsItem
       @path="/admin/whats-new"
       @label={{i18n "admin.dashboard.new_features.title"}}
@@ -16,7 +17,7 @@
       @action={{this.checkForUpdates}}
     />
   </:actions>
-</AdminPageHeader>
+</DPageHeader>
 
 <div class="admin-container admin-config-page__main-area">
   <div class="admin-config-area">
diff --git a/app/assets/javascripts/discourse/app/components/d-page-action-button.gjs b/app/assets/javascripts/discourse/app/components/d-page-action-button.gjs
new file mode 100644
index 00000000000..fbc2e7eb404
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/d-page-action-button.gjs
@@ -0,0 +1,124 @@
+import { hash } from "@ember/helper";
+import DButton from "discourse/components/d-button";
+
+export const DPageActionButton = <template>
+  <DButton
+    class="d-page-action-button btn-small"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @icon={{@icon}}
+    @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="d-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>
+  <DPageActionButton
+    class="btn-primary"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @isLoading={{@isLoading}}
+  />
+</template>;
+
+export const DangerButton = <template>
+  <DPageActionButton
+    class="btn-danger"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @isLoading={{@isLoading}}
+  />
+</template>;
+
+export const DefaultButton = <template>
+  <DPageActionButton
+    class="btn-default"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @isLoading={{@isLoading}}
+  />
+</template>;
+
+export const DPageActionListItem = <template>
+  <li class="dropdown-menu__item d-page-action-list-item">
+    <DPageActionButton
+      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 d-page-action-list-item d-page-action-wrapped-list-item"
+  >
+    {{yield (hash buttonClass="btn-transparent")}}
+  </li>
+</template>;
+
+// It is not a mistake that there is no PrimaryActionListItem here, in a list
+// there is no need for blue text.
+export const DefaultActionListItem = <template>
+  <DPageActionListItem
+    class="btn-default"
+    ...attributes
+    @action={{@action}}
+    @route={{@route}}
+    @routeModels={{@routeModels}}
+    @label={{@label}}
+    @title={{@title}}
+    @icon={{@icon}}
+    @isLoading={{@isLoading}}
+  />
+</template>;
+
+export const DangerActionListItem = <template>
+  <DPageActionListItem
+    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/discourse/app/components/d-page-header.gjs b/app/assets/javascripts/discourse/app/components/d-page-header.gjs
new file mode 100644
index 00000000000..8e1af6402cd
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/d-page-header.gjs
@@ -0,0 +1,145 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+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 {
+  DangerActionListItem,
+  DangerButton,
+  DefaultActionListItem,
+  DefaultButton,
+  PrimaryButton,
+  WrappedActionListItem,
+  WrappedButton,
+} from "discourse/components/d-page-action-button";
+import DropdownMenu from "discourse/components/dropdown-menu";
+import HorizontalOverflowNav from "discourse/components/horizontal-overflow-nav";
+import { bind } from "discourse-common/utils/decorators";
+import { i18n } from "discourse-i18n";
+import DMenu from "float-kit/components/d-menu";
+
+const HEADLESS_ACTIONS = ["new", "edit"];
+
+export default class DPageHeader extends Component {
+  @service site;
+  @service router;
+  @tracked shouldDisplay = true;
+
+  constructor() {
+    super(...arguments);
+    this.router.on("routeDidChange", this, this.#checkIfShouldDisplay);
+    this.#checkIfShouldDisplay();
+  }
+
+  willDestroy() {
+    super.willDestroy(...arguments);
+    this.router.off("routeDidChange", this, this.#checkIfShouldDisplay);
+  }
+
+  @bind
+  #checkIfShouldDisplay() {
+    if (this.args.shouldDisplay !== undefined) {
+      return (this.shouldDisplay = this.args.shouldDisplay);
+    }
+
+    const currentPath = this.router._router.currentPath;
+    if (!currentPath) {
+      return (this.shouldDisplay = true);
+    }
+
+    // NOTE: This has a little admin-specific logic in it, in future
+    // we could extract this out and have it a bit more generic,
+    // for now I think it's a fine tradeoff.
+    const pathSegments = currentPath.split(".");
+    this.shouldDisplay =
+      !pathSegments.includes("admin") ||
+      !HEADLESS_ACTIONS.find((segment) => pathSegments.includes(segment));
+  }
+
+  <template>
+    {{#if this.shouldDisplay}}
+      <div class="d-page-header">
+        <div class="d-page-header__breadcrumbs">
+          <DBreadcrumbsContainer />
+          {{yield to="breadcrumbs"}}
+        </div>
+
+        <div class="d-page-header__title-row">
+          {{#if @titleLabel}}
+            <h1 class="d-page-header__title">{{@titleLabel}}</h1>
+          {{/if}}
+
+          {{#if (or (has-block "actions") @headerActionComponent)}}
+            <div class="d-page-header__actions">
+              {{#if this.site.mobileView}}
+                <DMenu
+                  @identifier="d-page-header-mobile-actions"
+                  @title={{i18n "more_options"}}
+                  @icon="ellipsis-vertical"
+                  class="btn-small"
+                >
+                  <:content>
+                    <DropdownMenu class="d-page-header__mobile-actions">
+                      {{#let
+                        (hash
+                          Primary=DefaultActionListItem
+                          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 @descriptionLabel}}
+          <p class="d-page-header__description">
+            {{htmlSafe @descriptionLabel}}
+            {{#if @learnMoreUrl}}
+              <span class="d-page-header__learn-more">{{htmlSafe
+                  (i18n "learn_more_with_link" url=@learnMoreUrl)
+                }}</span>
+            {{/if}}
+          </p>
+        {{/if}}
+
+        {{#unless @hideTabs}}
+          <div class="d-nav-submenu">
+            <HorizontalOverflowNav class="d-nav-submenu__tabs">
+              {{yield to="tabs"}}
+            </HorizontalOverflowNav>
+          </div>
+        {{/unless}}
+      </div>
+    {{/if}}
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/components/d-page-subheader.gjs b/app/assets/javascripts/discourse/app/components/d-page-subheader.gjs
new file mode 100644
index 00000000000..ae2d1811c30
--- /dev/null
+++ b/app/assets/javascripts/discourse/app/components/d-page-subheader.gjs
@@ -0,0 +1,76 @@
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import { service } from "@ember/service";
+import { htmlSafe } from "@ember/template";
+import {
+  DangerActionListItem,
+  DangerButton,
+  DefaultActionListItem,
+  DefaultButton,
+  PrimaryButton,
+  WrappedActionListItem,
+  WrappedButton,
+} from "discourse/components/d-page-action-button";
+import DropdownMenu from "discourse/components/dropdown-menu";
+import { i18n } from "discourse-i18n";
+import DMenu from "float-kit/components/d-menu";
+
+export default class DPageSubheader extends Component {
+  @service site;
+
+  <template>
+    <div class="d-page-subheader">
+      <div class="d-page-subheader__title-row">
+        <h2 class="d-page-subheader__title">{{@titleLabel}}</h2>
+        {{#if (has-block "actions")}}
+          <div class="d-page-subheader__actions">
+            {{#if this.site.mobileView}}
+              <DMenu
+                @identifier="d-page-subheader-mobile-actions"
+                @title={{i18n "more_options"}}
+                @icon="ellipsis-vertical"
+                class="btn-small"
+              >
+                <:content>
+                  <DropdownMenu class="d-page-subheader__mobile-actions">
+                    {{yield
+                      (hash
+                        Primary=DefaultActionListItem
+                        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 @descriptionLabel}}
+        <p class="d-page-subheader__description">
+          {{htmlSafe @descriptionLabel}}
+          {{#if @learnMoreUrl}}
+            <span class="d-page-subheader__learn-more">
+              {{htmlSafe
+                (i18n "learn_more_with_link" url=@learnMoreUrl)
+              }}</span>
+          {{/if}}
+        </p>
+      {{/if}}
+    </div>
+  </template>
+}
diff --git a/app/assets/javascripts/discourse/app/lib/plugin-api.gjs b/app/assets/javascripts/discourse/app/lib/plugin-api.gjs
index 0ffb4e1cf24..774b755570e 100644
--- a/app/assets/javascripts/discourse/app/lib/plugin-api.gjs
+++ b/app/assets/javascripts/discourse/app/lib/plugin-api.gjs
@@ -3337,7 +3337,7 @@ class PluginApi {
   }
 
   /**
-   * Registers a component class that will be rendered within the AdminPageHeader component
+   * Registers a component class that will be rendered within the DPageHeader 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,
diff --git a/app/assets/javascripts/discourse/tests/acceptance/admin-users-list-test.js b/app/assets/javascripts/discourse/tests/acceptance/admin-users-list-test.js
index 1fa73fb3d91..8bfb4c8c75e 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/admin-users-list-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/admin-users-list-test.js
@@ -71,28 +71,28 @@ acceptance("Admin - Users List", function (needs) {
 
     await visit("/admin/users/list/active");
 
-    assert.dom(".admin-page-subheader__title").hasText(activeTitle);
+    assert.dom(".d-page-subheader__title").hasText(activeTitle);
     assert
       .dom(".users-list .user:nth-child(1) .username")
       .includesText(activeUser);
 
     await click('a[href="/admin/users/list/new"]');
 
-    assert.dom(".admin-page-subheader__title").hasText(suspectTitle);
+    assert.dom(".d-page-subheader__title").hasText(suspectTitle);
     assert
       .dom(".users-list .user:nth-child(1) .username")
       .includesText(suspectUser);
 
     await click(".users-list .sortable:nth-child(4)");
 
-    assert.dom(".admin-page-subheader__title").hasText(suspectTitle);
+    assert.dom(".d-page-subheader__title").hasText(suspectTitle);
     assert
       .dom(".users-list .user:nth-child(1) .username")
       .includesText(suspectUser);
 
     await click('a[href="/admin/users/list/active"]');
 
-    assert.dom(".admin-page-subheader__title").hasText(activeTitle);
+    assert.dom(".d-page-subheader__title").hasText(activeTitle);
     assert
       .dom(".users-list .user:nth-child(1) .username")
       .includesText(activeUser);
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
deleted file mode 100644
index f15536dd794..00000000000
--- a/app/assets/javascripts/discourse/tests/integration/components/admin-page-subheader-test.gjs
+++ /dev/null
@@ -1,177 +0,0 @@
-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-i18n";
-import AdminPageSubheader from "admin/components/admin-page-subheader";
-
-module("Integration | Component | AdminPageSubheader", function (hooks) {
-  setupRenderingTest(hooks);
-
-  test("@titleLabel", async function (assert) {
-    await render(<template>
-      <AdminPageSubheader @titleLabel="admin.title" />
-    </template>);
-    assert
-      .dom(".admin-page-subheader__title")
-      .exists()
-      .hasText(i18n("admin.title"));
-  });
-
-  test("@titleLabelTranslated", async function (assert) {
-    await render(<template>
-      <AdminPageSubheader @titleLabelTranslated="Wow so cool" />
-    </template>);
-    assert.dom(".admin-page-subheader__title").exists().hasText("Wow so cool");
-  });
-
-  test("no @descriptionLabel and no @descriptionLabelTranslated", async function (assert) {
-    await render(<template><AdminPageSubheader /></template>);
-    assert.dom(".admin-page-subheader__description").doesNotExist();
-  });
-
-  test("@descriptionLabel", async function (assert) {
-    await render(<template>
-      <AdminPageSubheader @descriptionLabel="admin.badges.description" />
-    </template>);
-    assert
-      .dom(".admin-page-subheader__description")
-      .exists()
-      .hasText(i18n("admin.badges.description"));
-  });
-
-  test("@descriptionLabelTranslated", async function (assert) {
-    await render(<template>
-      <AdminPageSubheader
-        @descriptionLabelTranslated="Some description which supports <strong>HTML</strong>"
-      />
-    </template>);
-    assert
-      .dom(".admin-page-subheader__description")
-      .exists()
-      .hasText("Some description which supports HTML");
-    assert.dom(".admin-page-subheader__description strong").exists();
-  });
-
-  test("no @learnMoreUrl", async function (assert) {
-    await render(<template><AdminPageSubheader /></template>);
-    assert.dom(".admin-page-subheader__learn-more").doesNotExist();
-  });
-
-  test("@learnMoreUrl", async function (assert) {
-    await render(<template>
-      <AdminPageSubheader
-        @descriptionLabel="admin.badges.description"
-        @learnMoreUrl="https://meta.discourse.org/t/96331"
-      />
-    </template>);
-    assert.dom(".admin-page-subheader__learn-more").exists();
-    assert
-      .dom(".admin-page-subheader__learn-more a")
-      .hasText("Learn more…")
-      .hasAttribute("href", "https://meta.discourse.org/t/96331");
-  });
-
-  test("renders all types of action buttons in yielded <:actions>", async function (assert) {
-    let actionCalled = false;
-    const someAction = () => {
-      actionCalled = true;
-    };
-
-    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.Danger
-            @action={{someAction}}
-            @title="admin.badges.group_settings"
-            @label="admin.badges.group_settings"
-            @icon="gear"
-            class="edit-groupings-btn"
-          />
-        </:actions>
-      </AdminPageSubheader>
-    </template>);
-
-    assert
-      .dom(
-        ".admin-page-subheader__actions .admin-page-action-button.new-badge.btn.btn-small.btn-primary"
-      )
-      .exists();
-    assert
-      .dom(
-        ".admin-page-subheader__actions .admin-page-action-button.award-badge.btn.btn-small.btn-default"
-      )
-      .exists();
-    assert
-      .dom(
-        ".admin-page-subheader__actions .admin-page-action-button.edit-groupings-btn.btn.btn-small.btn-danger"
-      )
-      .exists();
-
-    await click(".edit-groupings-btn");
-    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/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/d-page-header-test.gjs
similarity index 54%
rename from app/assets/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs
rename to app/assets/javascripts/discourse/tests/integration/components/d-page-header-test.gjs
index 6148162d2e2..76da99bf52f 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/admin-page-header-test.gjs
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-page-header-test.gjs
@@ -1,14 +1,14 @@
 import { click, render } from "@ember/test-helpers";
 import { module, test } from "qunit";
 import DBreadcrumbsItem from "discourse/components/d-breadcrumbs-item";
+import DPageHeader from "discourse/components/d-page-header";
 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-i18n";
-import AdminPageHeader from "admin/components/admin-page-header";
 
-const AdminPageHeaderActionsTestComponent = <template>
-  <div class="admin-page-header-actions-test-component">
+const DPageHeaderActionsTestComponent = <template>
+  <div class="d-page-header-actions-test-component">
     <@actions.Default
       @route="adminBadges.award"
       @routeModels="new"
@@ -19,125 +19,96 @@ const AdminPageHeaderActionsTestComponent = <template>
   </div>
 </template>;
 
-module("Integration | Component | AdminPageHeader", function (hooks) {
+module("Integration | Component | DPageHeader", function (hooks) {
   setupRenderingTest(hooks);
 
-  test("no @titleLabel or @titleLabelTranslated", async function (assert) {
-    await render(<template><AdminPageHeader /></template>);
-    assert.dom(".admin-page-header__title").doesNotExist();
+  test("no @titleLabel", async function (assert) {
+    await render(<template><DPageHeader /></template>);
+    assert.dom(".d-page-header__title").doesNotExist();
   });
 
   test("@titleLabel", async function (assert) {
     await render(<template>
-      <AdminPageHeader @titleLabel="admin.title" />
+      <DPageHeader @titleLabel={{i18n "admin.title"}} />
     </template>);
-    assert
-      .dom(".admin-page-header__title")
-      .exists()
-      .hasText(i18n("admin.title"));
-  });
-
-  test("@titleLabelTranslated", async function (assert) {
-    await render(<template>
-      <AdminPageHeader @titleLabelTranslated="Wow so cool" />
-    </template>);
-    assert.dom(".admin-page-header__title").exists().hasText("Wow so cool");
+    assert.dom(".d-page-header__title").exists().hasText(i18n("admin.title"));
   });
 
   test("@shouldDisplay", async function (assert) {
     await render(<template>
-      <AdminPageHeader
-        @titleLabelTranslated="Wow so cool"
-        @shouldDisplay={{false}}
-      />
+      <DPageHeader @titleLabel="Wow so cool" @shouldDisplay={{false}} />
     </template>);
     assert.dom(".admin-page-header").doesNotExist();
   });
 
   test("renders base breadcrumbs and yielded <:breadcrumbs>", async function (assert) {
     await render(<template>
-      <AdminPageHeader @titleLabel="admin.titile">
+      <DPageHeader @titleLabel={{i18n "admin.titile"}}>
         <:breadcrumbs>
           <DBreadcrumbsItem
             @path="/admin/badges"
             @label={{i18n "admin.badges.title"}}
           />
         </:breadcrumbs>
-      </AdminPageHeader>
+      </DPageHeader>
     </template>);
 
     assert
-      .dom(".admin-page-header__breadcrumbs .d-breadcrumbs__item")
-      .exists({ count: 2 });
+      .dom(".d-page-header__breadcrumbs .d-breadcrumbs__item")
+      .exists({ count: 1 });
     assert
-      .dom(".admin-page-header__breadcrumbs .d-breadcrumbs__item")
-      .hasText(i18n("admin_title"));
-    assert
-      .dom(".admin-page-header__breadcrumbs .d-breadcrumbs__item:last-child")
+      .dom(".d-page-header__breadcrumbs .d-breadcrumbs__item:last-child")
       .hasText(i18n("admin.badges.title"));
   });
 
-  test("no @descriptionLabel and no @descriptionLabelTranslated", async function (assert) {
-    await render(<template><AdminPageHeader /></template>);
-    assert.dom(".admin-page-header__description").doesNotExist();
+  test("no @descriptionLabel", async function (assert) {
+    await render(<template><DPageHeader /></template>);
+    assert.dom(".d-page-header__description").doesNotExist();
   });
 
   test("@descriptionLabel", async function (assert) {
     await render(<template>
-      <AdminPageHeader @descriptionLabel="admin.badges.description" />
+      <DPageHeader @descriptionLabel={{i18n "admin.badges.description"}} />
     </template>);
     assert
-      .dom(".admin-page-header__description")
+      .dom(".d-page-header__description")
       .exists()
       .hasText(i18n("admin.badges.description"));
   });
 
-  test("@descriptionLabelTranslated", async function (assert) {
-    await render(<template>
-      <AdminPageHeader
-        @descriptionLabelTranslated="Some description which supports <strong>HTML</strong>"
-      />
-    </template>);
-    assert
-      .dom(".admin-page-header__description")
-      .exists()
-      .hasText("Some description which supports HTML");
-    assert.dom(".admin-page-header__description strong").exists();
-  });
-
   test("no @learnMoreUrl", async function (assert) {
-    await render(<template><AdminPageHeader /></template>);
-    assert.dom(".admin-page-header__learn-more").doesNotExist();
+    await render(<template><DPageHeader /></template>);
+    assert.dom(".d-page-header__learn-more").doesNotExist();
   });
 
   test("@learnMoreUrl", async function (assert) {
     await render(<template>
-      <AdminPageHeader
-        @descriptionLabel="admin.badges.description"
+      <DPageHeader
+        @descriptionLabel={{i18n "admin.badges.description"}}
         @learnMoreUrl="https://meta.discourse.org/t/96331"
       />
     </template>);
-    assert.dom(".admin-page-header__learn-more").exists();
+    assert.dom(".d-page-header__learn-more").exists();
     assert
-      .dom(".admin-page-header__learn-more a")
+      .dom(".d-page-header__learn-more a")
       .hasText("Learn more…")
       .hasAttribute("href", "https://meta.discourse.org/t/96331");
   });
 
   test("renders nav tabs in yielded <:tabs>", async function (assert) {
     await render(<template>
-      <AdminPageHeader>
+      <DPageHeader>
         <:tabs>
           <NavItem
             @route="admin.backups.settings"
             @label="settings"
-            class="admin-backups-tabs__settings"
+            class="d-backups-tabs__settings"
           />
         </:tabs>
-      </AdminPageHeader>
+      </DPageHeader>
     </template>);
     assert
-      .dom(".admin-nav-submenu__tabs .admin-backups-tabs__settings")
+      .dom(".d-nav-submenu__tabs .d-backups-tabs__settings")
       .exists()
       .hasText(i18n("settings"));
   });
@@ -149,7 +120,7 @@ module("Integration | Component | AdminPageHeader", function (hooks) {
     };
 
     await render(<template>
-      <AdminPageHeader>
+      <DPageHeader>
         <:actions as |actions|>
           <actions.Primary
             @route="adminBadges.show"
@@ -175,22 +146,22 @@ module("Integration | Component | AdminPageHeader", function (hooks) {
             class="edit-groupings-btn"
           />
         </:actions>
-      </AdminPageHeader>
+      </DPageHeader>
     </template>);
 
     assert
       .dom(
-        ".admin-page-header__actions .admin-page-action-button.new-badge.btn.btn-small.btn-primary"
+        ".d-page-header__actions .d-page-action-button.new-badge.btn.btn-small.btn-primary"
       )
       .exists();
     assert
       .dom(
-        ".admin-page-header__actions .admin-page-action-button.award-badge.btn.btn-small.btn-default"
+        ".d-page-header__actions .d-page-action-button.award-badge.btn.btn-small.btn-default"
       )
       .exists();
     assert
       .dom(
-        ".admin-page-header__actions .admin-page-action-button.edit-groupings-btn.btn.btn-small.btn-danger"
+        ".d-page-header__actions .d-page-action-button.edit-groupings-btn.btn.btn-small.btn-danger"
       )
       .exists();
 
@@ -200,18 +171,14 @@ module("Integration | Component | AdminPageHeader", function (hooks) {
 
   test("@headerActionComponent is rendered with actions arg", async function (assert) {
     await render(<template>
-      <AdminPageHeader
-        @headerActionComponent={{AdminPageHeaderActionsTestComponent}}
-      />
+      <DPageHeader @headerActionComponent={{DPageHeaderActionsTestComponent}} />
     </template>);
 
-    assert
-      .dom(".admin-page-header-actions-test-component .award-badge")
-      .exists();
+    assert.dom(".d-page-header-actions-test-component .award-badge").exists();
   });
 });
 
-module("Integration | Component | AdminPageHeader | Mobile", function (hooks) {
+module("Integration | Component | DPageHeader | Mobile", function (hooks) {
   hooks.beforeEach(function () {
     forceMobile();
   });
@@ -220,7 +187,7 @@ module("Integration | Component | AdminPageHeader | Mobile", function (hooks) {
 
   test("action buttons become a dropdown on mobile", async function (assert) {
     await render(<template>
-      <AdminPageHeader>
+      <DPageHeader>
         <:actions as |actions|>
           <actions.Primary
             @route="adminBadges.show"
@@ -238,19 +205,19 @@ module("Integration | Component | AdminPageHeader | Mobile", function (hooks) {
             class="award-badge"
           />
         </:actions>
-      </AdminPageHeader>
+      </DPageHeader>
     </template>);
 
     assert
       .dom(
-        ".admin-page-header__actions .fk-d-menu__trigger.admin-page-header-mobile-actions-trigger"
+        ".d-page-header__actions .fk-d-menu__trigger.d-page-header-mobile-actions-trigger"
       )
       .exists();
 
-    await click(".admin-page-header-mobile-actions-trigger");
+    await click(".d-page-header-mobile-actions-trigger");
 
     assert
-      .dom(".dropdown-menu.admin-page-header__mobile-actions .new-badge")
+      .dom(".dropdown-menu.d-page-header__mobile-actions .new-badge")
       .exists();
   });
 });
diff --git a/app/assets/javascripts/discourse/tests/integration/components/d-page-subheader-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/d-page-subheader-test.gjs
new file mode 100644
index 00000000000..d14b2c09879
--- /dev/null
+++ b/app/assets/javascripts/discourse/tests/integration/components/d-page-subheader-test.gjs
@@ -0,0 +1,154 @@
+import { click, render } from "@ember/test-helpers";
+import { module, test } from "qunit";
+import DPageSubheader from "discourse/components/d-page-subheader";
+import { forceMobile } from "discourse/lib/mobile";
+import { setupRenderingTest } from "discourse/tests/helpers/component-test";
+import { i18n } from "discourse-i18n";
+
+module("Integration | Component | DPageSubheader", function (hooks) {
+  setupRenderingTest(hooks);
+
+  test("@titleLabel", async function (assert) {
+    await render(<template>
+      <DPageSubheader @titleLabel={{i18n "admin.title"}} />
+    </template>);
+    assert
+      .dom(".d-page-subheader__title")
+      .exists()
+      .hasText(i18n("admin.title"));
+  });
+
+  test("no @descriptionLabel", async function (assert) {
+    await render(<template><DPageSubheader /></template>);
+    assert.dom(".d-page-subheader__description").doesNotExist();
+  });
+
+  test("@descriptionLabel", async function (assert) {
+    await render(<template>
+      <DPageSubheader @descriptionLabel={{i18n "admin.badges.description"}} />
+    </template>);
+    assert
+      .dom(".d-page-subheader__description")
+      .exists()
+      .hasText(i18n("admin.badges.description"));
+  });
+
+  test("no @learnMoreUrl", async function (assert) {
+    await render(<template><DPageSubheader /></template>);
+    assert.dom(".d-page-subheader__learn-more").doesNotExist();
+  });
+
+  test("@learnMoreUrl", async function (assert) {
+    await render(<template>
+      <DPageSubheader
+        @descriptionLabel={{i18n "admin.badges.description"}}
+        @learnMoreUrl="https://meta.discourse.org/t/96331"
+      />
+    </template>);
+    assert.dom(".d-page-subheader__learn-more").exists();
+    assert
+      .dom(".d-page-subheader__learn-more a")
+      .hasText("Learn more…")
+      .hasAttribute("href", "https://meta.discourse.org/t/96331");
+  });
+
+  test("renders all types of action buttons in yielded <:actions>", async function (assert) {
+    let actionCalled = false;
+    const someAction = () => {
+      actionCalled = true;
+    };
+
+    await render(<template>
+      <DPageSubheader>
+        <: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.Danger
+            @action={{someAction}}
+            @title="admin.badges.group_settings"
+            @label="admin.badges.group_settings"
+            @icon="gear"
+            class="edit-groupings-btn"
+          />
+        </:actions>
+      </DPageSubheader>
+    </template>);
+
+    assert
+      .dom(
+        ".d-page-subheader__actions .d-page-action-button.new-badge.btn.btn-small.btn-primary"
+      )
+      .exists();
+    assert
+      .dom(
+        ".d-page-subheader__actions .d-page-action-button.award-badge.btn.btn-small.btn-default"
+      )
+      .exists();
+    assert
+      .dom(
+        ".d-page-subheader__actions .d-page-action-button.edit-groupings-btn.btn.btn-small.btn-danger"
+      )
+      .exists();
+
+    await click(".edit-groupings-btn");
+    assert.true(actionCalled);
+  });
+});
+
+module("Integration | Component | DPageSubheader | Mobile", function (hooks) {
+  hooks.beforeEach(function () {
+    forceMobile();
+  });
+
+  setupRenderingTest(hooks);
+
+  test("action buttons become a dropdown on mobile", async function (assert) {
+    await render(<template>
+      <DPageSubheader>
+        <: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>
+      </DPageSubheader>
+    </template>);
+
+    assert
+      .dom(
+        ".d-page-subheader .fk-d-menu__trigger.d-page-subheader-mobile-actions-trigger"
+      )
+      .exists();
+
+    await click(".d-page-subheader-mobile-actions-trigger");
+
+    assert
+      .dom(".dropdown-menu.d-page-subheader__mobile-actions .new-badge")
+      .exists();
+  });
+});
diff --git a/app/assets/stylesheets/common/admin/badges.scss b/app/assets/stylesheets/common/admin/badges.scss
index 2e6675d5a85..5088d6fb559 100644
--- a/app/assets/stylesheets/common/admin/badges.scss
+++ b/app/assets/stylesheets/common/admin/badges.scss
@@ -124,7 +124,7 @@
   float: left;
   max-width: 70%;
 
-  &.admin-page-action-button {
+  &.d-page-action-button {
     margin-top: 0;
 
     @media (max-width: $mobile-breakpoint) {
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 6107e3428f2..99190565463 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -806,6 +806,7 @@
 .admin-permalinks {
   @include breakpoint(tablet) {
     .admin-page-subheader,
+    .d-page-subheader,
     .admin-config-area,
     .admin-config-area__primary-content,
     .loading-container {
diff --git a/app/assets/stylesheets/common/admin/plugins.scss b/app/assets/stylesheets/common/admin/plugins.scss
index 76467d11635..a5cb0147cf4 100644
--- a/app/assets/stylesheets/common/admin/plugins.scss
+++ b/app/assets/stylesheets/common/admin/plugins.scss
@@ -75,7 +75,7 @@
     margin-bottom: var(--space-6);
   }
 
-  .admin-nav-submenu {
+  .d-nav-submenu {
     background: transparent;
     border-bottom: 1px solid var(--primary-low);
 
diff --git a/app/assets/stylesheets/common/components/_index.scss b/app/assets/stylesheets/common/components/_index.scss
index 5935abfb86f..369bb253959 100644
--- a/app/assets/stylesheets/common/components/_index.scss
+++ b/app/assets/stylesheets/common/components/_index.scss
@@ -1,6 +1,7 @@
 @import "badges";
 @import "banner";
 @import "d-breadcrumbs";
+@import "d-page-header";
 @import "d-stat-tiles";
 @import "bookmark-list";
 @import "bookmark-modal";
diff --git a/app/assets/stylesheets/common/components/d-page-header.scss b/app/assets/stylesheets/common/components/d-page-header.scss
new file mode 100644
index 00000000000..b7a43579251
--- /dev/null
+++ b/app/assets/stylesheets/common/components/d-page-header.scss
@@ -0,0 +1,92 @@
+$mobile-breakpoint: 700px;
+
+.d-page-header,
+.d-page-subheader {
+  &__title-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: stretch;
+    margin-bottom: var(--space-2);
+
+    h1,
+    h2 {
+      margin: 0;
+    }
+
+    h2 {
+      font-size: var(--font-up-2);
+    }
+
+    .d-page-header__actions {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+
+      @media (max-width: $mobile-breakpoint) {
+        flex-direction: column;
+      }
+
+      button {
+        margin-left: var(--space-2);
+
+        @media (max-width: $mobile-breakpoint) {
+          width: 100%;
+          margin-bottom: var(--space-2);
+          margin-left: 0;
+        }
+      }
+    }
+  }
+
+  .d-nav-submenu {
+    background: transparent;
+    border-bottom: 1px solid var(--primary-low);
+
+    .horizontal-overflow-nav {
+      background: transparent;
+
+      &:before {
+        display: none;
+      }
+
+      &:after {
+        display: none;
+      }
+    }
+
+    .nav-pills {
+      width: auto;
+      margin: 0;
+    }
+  }
+}
+
+.d-page-header {
+  &__title-row {
+    @media (max-width: $mobile-breakpoint) {
+      flex-direction: row;
+      align-items: center;
+
+      .d-page-header__actions {
+        button {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+}
+
+.d-page-subheader {
+  &__title-row {
+    @media (max-width: $mobile-breakpoint) {
+      flex-direction: row;
+      align-items: center;
+    }
+  }
+}
+
+.d-page-action-list-item {
+  .btn-primary {
+    color: var(--primary);
+  }
+}
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 8f494bde0ad..9de338163f6 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
@@ -4,9 +4,9 @@
 />
 
 <div class="discourse-chat-incoming-webhooks admin-detail">
-  <AdminPageSubheader
-    @titleLabel="chat.incoming_webhooks.title"
-    @descriptionLabel="chat.incoming_webhooks.instructions"
+  <DPageSubheader
+    @titleLabel={{i18n "chat.incoming_webhooks.title"}}
+    @descriptionLabel={{i18n "chat.incoming_webhooks.instructions"}}
   >
     <:actions as |actions|>
       <actions.Primary
@@ -18,7 +18,7 @@
         class="admin-incoming-webhooks-new"
       />
     </:actions>
-  </AdminPageSubheader>
+  </DPageSubheader>
 
   <div class="incoming-chat-webhooks">
     {{#if this.model.incoming_chat_webhooks}}
diff --git a/plugins/chat/spec/system/admin/incoming_webhooks_spec.rb b/plugins/chat/spec/system/admin/incoming_webhooks_spec.rb
index 895d94e68fb..e32966f48d0 100644
--- a/plugins/chat/spec/system/admin/incoming_webhooks_spec.rb
+++ b/plugins/chat/spec/system/admin/incoming_webhooks_spec.rb
@@ -6,7 +6,7 @@ describe "Admin Chat Incoming Webhooks", type: :system do
 
   let(:dialog) { PageObjects::Components::Dialog.new }
   let(:admin_incoming_webhooks_page) { PageObjects::Pages::AdminIncomingWebhooks.new }
-  let(:admin_header) { PageObjects::Components::AdminHeader.new }
+  let(:d_page_header) { PageObjects::Components::DPageHeader.new }
 
   before do
     chat_system_bootstrap(current_user)
@@ -16,11 +16,11 @@ describe "Admin Chat Incoming Webhooks", type: :system do
   it "can create incoming webhooks" do
     admin_incoming_webhooks_page.visit
 
-    expect(admin_header).to be_visible
+    expect(d_page_header).to be_visible
 
     admin_incoming_webhooks_page.click_new
 
-    expect(admin_header).to be_hidden
+    expect(d_page_header).to be_hidden
 
     admin_incoming_webhooks_page.form.field("name").fill_in("Test webhook")
     admin_incoming_webhooks_page.form.field("description").fill_in("Some test content")
diff --git a/spec/system/admin_flags_spec.rb b/spec/system/admin_flags_spec.rb
index cf3eba06d58..790953e3015 100644
--- a/spec/system/admin_flags_spec.rb
+++ b/spec/system/admin_flags_spec.rb
@@ -8,7 +8,7 @@ describe "Admin Flags Page", type: :system do
   let(:admin_flags_page) { PageObjects::Pages::AdminFlags.new }
   let(:admin_flag_form_page) { PageObjects::Pages::AdminFlagForm.new }
   let(:flag_modal) { PageObjects::Modals::Flag.new }
-  let(:admin_header) { PageObjects::Components::AdminHeader.new }
+  let(:d_page_header) { PageObjects::Components::DPageHeader.new }
 
   before do
     sign_in(admin)
@@ -27,7 +27,7 @@ describe "Admin Flags Page", type: :system do
     )
 
     admin_flags_page.visit
-    expect(admin_header).to be_visible
+    expect(d_page_header).to be_visible
 
     admin_flags_page.toggle("spam")
     topic_page.visit_topic(post.topic).open_flag_topic_modal
@@ -81,8 +81,7 @@ describe "Admin Flags Page", type: :system do
     expect(admin_flags_page).to have_add_flag_button_enabled
 
     admin_flags_page.click_add_flag
-
-    expect(admin_header).to be_hidden
+    expect(d_page_header).to be_hidden
 
     admin_flag_form_page
       .fill_in_name("Vulgar")
@@ -115,7 +114,7 @@ describe "Admin Flags Page", type: :system do
 
     # update
     admin_flags_page.visit.click_edit_flag("custom_vulgar")
-    expect(admin_header).to be_hidden
+    expect(d_page_header).to be_hidden
     admin_flag_form_page.fill_in_name("Tasteless").click_save
 
     expect(admin_flags_page).to have_flags(
@@ -158,7 +157,7 @@ describe "Admin Flags Page", type: :system do
   it "has settings tab" do
     admin_flags_page.visit
 
-    expect(admin_header).to have_tabs(
+    expect(d_page_header).to have_tabs(
       [I18n.t("admin_js.settings"), I18n.t("admin_js.admin.config_areas.flags.flags_tab")],
     )
 
diff --git a/spec/system/admin_user_fields_spec.rb b/spec/system/admin_user_fields_spec.rb
index 847463b945f..c40527028aa 100644
--- a/spec/system/admin_user_fields_spec.rb
+++ b/spec/system/admin_user_fields_spec.rb
@@ -6,11 +6,11 @@ describe "Admin User Fields", type: :system do
   before { sign_in(current_user) }
 
   let(:user_fields_page) { PageObjects::Pages::AdminUserFields.new }
-  let(:admin_header) { PageObjects::Components::AdminHeader.new }
+  let(:page_header) { PageObjects::Components::DPageHeader.new }
 
   it "correctly saves user fields" do
     user_fields_page.visit
-    expect(admin_header).to be_visible
+    expect(page_header).to be_visible
     user_fields_page.add_field(name: "Occupation", description: "What you do for work")
 
     expect(user_fields_page).to have_user_field("Occupation")
@@ -32,7 +32,7 @@ describe "Admin User Fields", type: :system do
     user_fields_page.visit
     user_fields_page.click_add_field
 
-    expect(admin_header).to be_hidden
+    expect(page_header).to be_hidden
 
     form = page.find(".user-field")
     editable_label = I18n.t("admin_js.admin.user_fields.editable.title")
@@ -73,7 +73,7 @@ describe "Admin User Fields", type: :system do
 
       form.find(".user-field-name").fill_in(with: "Favourite Transformer")
 
-      expect(admin_header).to be_hidden
+      expect(page_header).to be_hidden
 
       form.find(".btn-primary").click
 
diff --git a/spec/system/page_objects/components/admin-header.rb b/spec/system/page_objects/components/admin_header.rb
similarity index 50%
rename from spec/system/page_objects/components/admin-header.rb
rename to spec/system/page_objects/components/admin_header.rb
index a65243e2392..556211e02e6 100644
--- a/spec/system/page_objects/components/admin-header.rb
+++ b/spec/system/page_objects/components/admin_header.rb
@@ -2,17 +2,18 @@
 
 module PageObjects
   module Components
+    # TODO (martin) Delete this after plugins have been updated to use DPageHeader
     class AdminHeader < PageObjects::Pages::Base
       def has_tabs?(names)
-        expect(page.all(".admin-nav-submenu__tabs a").map(&:text)).to eq(names)
+        expect(page.all(".d-nav-submenu__tabs a").map(&:text)).to eq(names)
       end
 
       def visible?
-        has_css?(".admin-page-header")
+        has_css?(".d-page-header")
       end
 
       def hidden?
-        has_no_css?(".admin-page-header")
+        has_no_css?(".d-page-header")
       end
     end
   end
diff --git a/spec/system/page_objects/components/d_page_header.rb b/spec/system/page_objects/components/d_page_header.rb
new file mode 100644
index 00000000000..58e8950dee3
--- /dev/null
+++ b/spec/system/page_objects/components/d_page_header.rb
@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+module PageObjects
+  module Components
+    class DPageHeader < PageObjects::Pages::Base
+      def has_tabs?(names)
+        expect(page.all(".d-nav-submenu__tabs a").map(&:text)).to eq(names)
+      end
+
+      def visible?
+        has_css?(".d-page-header")
+      end
+
+      def hidden?
+        has_no_css?(".d-page-header")
+      end
+    end
+  end
+end
diff --git a/spec/system/page_objects/pages/admin_plugins_list.rb b/spec/system/page_objects/pages/admin_plugins_list.rb
index bcb3a7ad85f..5b6f82398c2 100644
--- a/spec/system/page_objects/pages/admin_plugins_list.rb
+++ b/spec/system/page_objects/pages/admin_plugins_list.rb
@@ -21,7 +21,7 @@ module PageObjects
       end
 
       def plugin_nav_tab_selector(plugin)
-        ".admin-nav-submenu__tabs .admin-plugin-tab-nav-item[data-plugin-nav-tab-id=\"#{plugin}\"]"
+        ".d-nav-submenu__tabs .admin-plugin-tab-nav-item[data-plugin-nav-tab-id=\"#{plugin}\"]"
       end
     end
   end
diff --git a/spec/system/page_objects/pages/admin_user_fields.rb b/spec/system/page_objects/pages/admin_user_fields.rb
index 297d1e66881..5923465662c 100644
--- a/spec/system/page_objects/pages/admin_user_fields.rb
+++ b/spec/system/page_objects/pages/admin_user_fields.rb
@@ -19,7 +19,7 @@ module PageObjects
       end
 
       def click_add_field
-        page.find(".admin-page-header__actions .btn-primary").click
+        page.find(".d-page-header__actions .btn-primary").click
       end
 
       def click_edit