DEV: Refactor `GroupNotificationsButton` into `userPrivateMessages.group` route (#21930)

Why this change?

Before this change, the `GroupNotificationsButton` is rendered in the
template of `userPrivateMessages` route based on a conditional that
checks if the `isGroup` property is true. However, the `isGroup`
property is determined based on the child route that is rendered.
However, this leads to "jankiness" in the UI because the
`GroupNotificationsButton` will be rendered once the route is entered
even if the model for the child route has not been resolved yet.

What is the solution?

In order to avoid this, we move the rendering of the
`GroupNotificationsButton` into the template of the
`userPrivateMessages.group` route and rely on the `in-element` helper to
render it into the right spot in the template of the
`userPrivateMessages` route.

app/assets/javascripts/discourse/app/controllers/user-private-messages-group.js

@@ -1,6 +1,6 @@
 import I18n from "I18n";
 import Controller, { inject as controller } from "@ember/controller";
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
 
 export default class extends Controller {
   @controller user;
@@ -25,10 +25,14 @@ export default class extends Controller {
     return this.#linkText("unread");
   }
 
+  get navigationControlsButton() {
+    return document.getElementById("navigation-controls__button");
+  }
+
   #linkText(type) {
     const count = this.pmTopicTrackingState?.lookupCount(type, {
       inboxFilter: "group",
-      groupName: this.groupName,
+      groupName: this.group.name,
     });
 
     if (count === 0) {
@@ -37,4 +41,9 @@ export default class extends Controller {
       return I18n.t(`user.messages.${type}_with_count`, { count });
     }
   }
+
+  @action
+  changeGroupNotificationLevel(notificationLevel) {
+    this.group.setNotification(notificationLevel, this.get("user.model.id"));
+  }
 }

app/assets/javascripts/discourse/app/controllers/user-private-messages.js

@@ -97,11 +97,6 @@ export default class extends Controller {
     return content;
   }
 
-  @action
-  changeGroupNotificationLevel(notificationLevel) {
-    this.group.setNotification(notificationLevel, this.get("user.model.id"));
-  }
-
   @action
   onMessagesDropdownChange(item) {
     return DiscourseURL.routeTo(item);

app/assets/javascripts/discourse/app/routes/build-private-messages-group-route.js

@@ -23,7 +23,7 @@ export default (inboxType, filter) => {
 
     model() {
       const username = this.modelFor("user").get("username_lower");
-      const groupName = this.modelFor("userPrivateMessages.group");
+      const groupName = this.modelFor("userPrivateMessages.group").name;
 
       let topicListFilter = `topics/private-messages-group/${username}/${groupName}`;
 
@@ -60,9 +60,7 @@ export default (inboxType, filter) => {
         groupName = filters.pop();
       }
 
-      const group = this.modelFor("user")
-        .get("groups")
-        .filterBy("name", groupName)[0];
+      const group = this.modelFor("userPrivateMessages.group");
 
       this.setProperties({ groupName, group });
     },

app/assets/javascripts/discourse/app/routes/user-private-messages-group.js

@@ -2,10 +2,12 @@ import DiscourseRoute from "discourse/routes/discourse";
 
 export default class extends DiscourseRoute {
   model(params) {
-    return params.name;
+    return this.modelFor("user")
+      .get("groups")
+      .filterBy("name", params.name.toLowerCase())[0];
   }
 
   setupController(controller, model) {
-    controller.set("groupName", model);
+    controller.set("group", model);
   }
 }

app/assets/javascripts/discourse/app/templates/user-private-messages-group.hbs

@@ -3,7 +3,7 @@
   <DNavigationItem
     @route="userPrivateMessages.group.index"
     @class="user-nav__messages-group-latest"
-    @model={{this.groupName}}
+    @model={{this.group.name}}
     @ariaCurrentContext="subNav"
   >
     {{d-icon "envelope"}}
@@ -13,7 +13,7 @@
   {{#if this.viewingSelf}}
     <DNavigationItem
       @route="userPrivateMessages.group.new"
-      @model={{this.groupName}}
+      @model={{this.group.name}}
       @class="user-nav__messages-group-new"
       @ariaCurrentContext="subNav"
     >
@@ -23,7 +23,7 @@
 
     <DNavigationItem
       @route="userPrivateMessages.group.unread"
-      @model={{this.groupName}}
+      @model={{this.group.name}}
       @class="user-nav__messages-group-unread"
       @ariaCurrentContext="subNav"
     >
@@ -34,7 +34,7 @@
     <DNavigationItem
       @route="userPrivateMessages.group.archive"
       @class="user-nav__messages-group-archive"
-      @model={{this.groupName}}
+      @model={{this.group.name}}
       @ariaCurrentContext="subNav"
     >
       {{d-icon "archive"}}
@@ -43,4 +43,11 @@
   {{/if}}
 </UserNav::MessagesSecondaryNav>
 
+{{#in-element this.navigationControlsButton}}
+  <GroupNotificationsButton
+    @value={{this.group.group_user.notification_level}}
+    @onChange={{this.changeGroupNotificationLevel}}
+  />
+{{/in-element}}
+
 {{outlet}}

app/assets/javascripts/discourse/app/templates/user/messages.hbs

@@ -27,12 +27,7 @@
       {{/if}}
     {{/if}}
 
-    {{#if this.isGroup}}
-      <GroupNotificationsButton
-        @value={{this.group.group_user.notification_level}}
-        @onChange={{this.changeGroupNotificationLevel}}
-      />
-    {{/if}}
+    <span id="navigation-controls__button"></span>
 
     {{#if this.showNewPM}}
       <DButton

app/assets/stylesheets/common/base/new-user.scss

@@ -131,6 +131,10 @@
       @include breakpoint(extra-large) {
         font-size: var(--font-down-1);
       }
+
+      span {
+        display: inline-flex;
+      }
     }
 
     .nav-pills {