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/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 {