UX: Use `DPageHeader` on the Email Style page (#30784)

Update the header of the admin Email Style page to be more consistent with the rest of the admin UI.

The HTML/CSS tabs have also been updated, which required an extra check being added to the NavItem component.

app/assets/javascripts/admin/addon/components/email-styles-editor.hbs

@@ -1,30 +1,3 @@
-<div class="row">
-  <div class="admin-controls">
-    <nav>
-      <ul class="nav nav-pills">
-        <li>
-          <LinkTo
-            @route="adminCustomizeEmailStyle.edit"
-            @model="html"
-            @replace={{true}}
-          >
-            {{i18n "admin.customize.email_style.html"}}
-          </LinkTo>
-        </li>
-        <li>
-          <LinkTo
-            @route="adminCustomizeEmailStyle.edit"
-            @model="css"
-            @replace={{true}}
-          >
-            {{i18n "admin.customize.email_style.css"}}
-          </LinkTo>
-        </li>
-      </ul>
-    </nav>
-  </div>
-</div>
-
 <AceEditor
   @content={{this.editorContents}}
   @onChange={{fn (mut this.editorContents)}}

app/assets/javascripts/admin/addon/templates/customize-email-style.hbs

@@ -1,7 +1,29 @@
-<div class="row">
-  <h2>{{i18n "admin.customize.email_style.heading"}}</h2>
+<DPageHeader
+  @titleLabel={{i18n "admin.customize.email_style.heading"}}
+  @descriptionLabel={{i18n "admin.customize.email_style.instructions"}}
+  @shouldDisplay={{true}}
+>
+  <:breadcrumbs>
+    <DBreadcrumbsItem @path="/admin" @label={{i18n "admin_title"}} />
+    <DBreadcrumbsItem
+      @path="/admin/customize/email_style"
+      @label={{i18n "admin.customize.email_style.heading"}}
+    />
+  </:breadcrumbs>
+  <:tabs>
+    <NavItem
+      @label="admin.customize.email_style.html"
+      @route="adminCustomizeEmailStyle.edit"
+      @routeParam="html"
+    />
+    <NavItem
+      @label="admin.customize.email_style.css"
+      @route="adminCustomizeEmailStyle.edit"
+      @routeParam="css"
+    />
+  </:tabs>
+</DPageHeader>
 
-  <p>{{i18n "admin.customize.email_style.instructions"}}</p>
-</div>
-
-{{outlet}}
+<div class="admin-container">
+  {{outlet}}
+</div>

app/assets/javascripts/discourse/app/components/nav-item.gjs

@@ -24,22 +24,26 @@ export default class NavItem extends Component {
       return;
     }
 
-    // This is needed because the setting route is underneath /admin/plugins/:plugin_id,
-    // but is not a child route of the plugin routes themselves. E.g. discourse-ai
-    // for the plugin ID has its own nested routes defined in the plugin.
-    if (this.router.currentRoute.name === "adminPlugins.show.settings") {
-      return (
-        this.router.currentRoute.parent.params.plugin_id ===
-        this.args.routeParam
-      );
-    }
+    if (this.args.routeParam) {
+      // This is needed because the setting route is underneath /admin/plugins/:plugin_id,
+      // but is not a child route of the plugin routes themselves. E.g. discourse-ai
+      // for the plugin ID has its own nested routes defined in the plugin.
+      if (this.router.currentRoute.name === "adminPlugins.show.settings") {
+        return (
+          this.router.currentRoute.parent.params.plugin_id ===
+          this.args.routeParam
+        );
+      }
 
-    if (
-      this.args.routeParam &&
-      this.router.currentRoute &&
-      this.router.currentRoute.params.filter
-    ) {
-      return this.router.currentRoute.params.filter === this.args.routeParam;
+      if (this.router.currentRoute.params.filter) {
+        return this.router.currentRoute.params.filter === this.args.routeParam;
+      }
+
+      if (this.router.currentRoute.params.field_name) {
+        return (
+          this.router.currentRoute.params.field_name === this.args.routeParam
+        );
+      }
     }
 
     return this.router.isActive(this.args.route);

config/locales/client.en.yml

@@ -6324,8 +6324,8 @@ en:
           overridden: Your site's default robots.txt file is overridden.
         email_style:
           title: "Email Style"
-          heading: "Customize Email Style"
-          html: "HTML Template"
+          heading: "Customize email style"
+          html: "HTML"
           css: "CSS"
           reset: "Reset to default"
           reset_confirm: "Are you sure you want to reset to the default %{fieldName} and lose all your changes?"