DEV: Add before / after header-buttons plugin outlets (#25887)

app/assets/javascripts/discourse/app/components/glimmer-header.gjs

@@ -17,6 +17,7 @@ import HamburgerDropdownWrapper from "./glimmer-header/hamburger-dropdown-wrappe
 import Icons from "./glimmer-header/icons";
 import SearchMenuWrapper from "./glimmer-header/search-menu-wrapper";
 import UserMenuWrapper from "./glimmer-header/user-menu-wrapper";
+import PluginOutlet from "./plugin-outlet";
 
 const SEARCH_BUTTON_ID = "search-button";
 
@@ -177,6 +178,10 @@ export default class GlimmerHeader extends Component {
           @toggleHamburger={{this.toggleHamburger}}
           @showSidebar={{@showSidebar}}
         >
+
+          <span class="header-buttons">
+            <PluginOutlet @name="before-header-buttons" />
+
             {{#unless this.currentUser}}
               <AuthButtons
                 @showCreateAccount={{@showCreateAccount}}
@@ -184,6 +189,10 @@ export default class GlimmerHeader extends Component {
                 @canSignUp={{@canSignUp}}
               />
             {{/unless}}
+
+            <PluginOutlet @name="after-header-buttons" />
+          </span>
+
           {{#if
             (not (and this.siteSettings.login_required (not this.currentUser)))
           }}

app/assets/javascripts/discourse/app/components/glimmer-header/auth-buttons.gjs

@@ -8,7 +8,7 @@ export default class AuthButtons extends Component {
   @service header;
 
   <template>
-    <span class="header-buttons">
+    <span class="auth-buttons">
       {{#if (and @canSignUp (not this.header.topic))}}
         <DButton
           class="btn-primary btn-small sign-up-button"

app/assets/javascripts/discourse/app/widgets/header.js

@@ -300,7 +300,7 @@ createWidget("header-icons", {
 });
 
 createWidget("header-buttons", {
-  tagName: "span.header-buttons",
+  tagName: "span.auth-buttons",
 
   html(attrs) {
     if (this.currentUser) {
@@ -535,7 +535,22 @@ export default createWidget("header", {
         return headerIcons;
       }
 
-      const panels = [this.attach("header-buttons", attrs), headerIcons];
+      const panels = [
+        h("span.header-buttons", [
+          new RenderGlimmer(
+            this,
+            "span.before-header-buttons",
+            hbs`<PluginOutlet @name="before-header-buttons"/>`
+          ),
+          this.attach("header-buttons", attrs),
+          new RenderGlimmer(
+            this,
+            "span.after-header-buttons",
+            hbs`<PluginOutlet @name="after-header-buttons"/>`
+          ),
+        ]),
+        headerIcons,
+      ];
 
       if (this.search.visible) {
         this.search.inTopicContext = this.search.inTopicContext && inTopicRoute;

app/assets/stylesheets/common/base/header.scss

@@ -106,6 +106,10 @@
     align-items: center;
     margin-top: 0.2em;
     white-space: nowrap;
+
+    .auth-buttons {
+      display: flex;
+    }
   }
 
   .login-button,