DEV: Switch to new API to render into plugin outlet

Why this change?

The `renderInOutlet` plugin API was introduced in Discourse core which
we will prefer to use going forward.

.discourse-compatibility

@@ -1,3 +1,4 @@
 3.1.999: e2cc21b33261ffeb32030e8ab5ea92775c911fbc
 < 3.2.0.beta1-dev: b36e2a5199db23e5f05374640b9690573a08b352
+< 3.2.0.beta2-dev: 12e6f76e0508b262517efd5db2d7feca261dff86
 2.6.0.beta3: 79d57c32d579d85590ef50344edf236cad52f9de

javascripts/discourse/components/brand-header-container.gjs

@@ -0,0 +1,21 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+import BrandHeaderContents from "./brand-header-contents";
+import or from "truth-helpers/helpers/or";
+import not from "truth-helpers/helpers/not";
+
+export default class BrandHeaderContainer extends Component {
+  @service site;
+
+  <template>
+    {{#if (or (not this.site.mobileView) settings.show_bar_on_mobile)}}
+      <header class="b-header">
+        <div class="wrap">
+          <div class="contents">
+            <BrandHeaderContents />
+          </div>
+        </div>
+      </header>
+    {{/if}}
+  </template>
+}

javascripts/discourse/initializers/initialize-widget-shim.js → javascripts/discourse/initializers/initialize-brand-header.js

@@ -1,14 +1,20 @@
+import { withPluginApi } from "discourse/lib/plugin-api";
 import { registerWidgetShim } from "discourse/widgets/render-glimmer";
 import { hbs } from "ember-cli-htmlbars";
+import BrandHeaderContainer from "../components/brand-header-container";
 
 export default {
-  name: "brand-header-widgetized",
+  name: "brand-header",
 
   initialize() {
     registerWidgetShim(
       "brand-header-widgetized",
       "div.brand-header-widgetized",
       hbs`<BrandHeaderContents />`
     );
+
+    withPluginApi("1.14.0", (api) => {
+      api.renderInOutlet("above-site-header", BrandHeaderContainer);
+    });
   },
 };