UX: improve nav for user messages on small screens (#19362)

This prevents long inbox names from causing issues in the dropdown on /my/messages and tries a new mobile layout that makes better use of the available space:

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

@@ -13,17 +13,21 @@
 
     <HorizontalOverflowNav @className="messages-nav" id="user-navigation-secondary__horizontal-nav" />
 
-    {{#if this.site.desktopView}}
-      <div class="navigation-controls">
-        {{#if this.isGroup}}
-          <GroupNotificationsButton @value={{this.group.group_user.notification_level}} @onChange={{this.changeGroupNotificationLevel}} />
+    <div class="navigation-controls">
+      {{#if this.site.mobileView}}
+        {{#if this.currentUser.admin}}
+          <BulkSelectToggle @parentController={{"user-topics-list"}} @tagName=""/>
         {{/if}}
+      {{/if}}
 
-        {{#if this.showNewPM}}
-          <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
-        {{/if}}
-      </div>
-    {{/if}}
+      {{#if this.isGroup}}
+        <GroupNotificationsButton @value={{this.group.group_user.notification_level}} @onChange={{this.changeGroupNotificationLevel}} />
+      {{/if}}
+
+      {{#if this.showNewPM}}
+        <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
+      {{/if}}
+    </div>
   </div>
 {{else}}
   <DSection @class="user-secondary-navigation" @pageClass="user-messages">
@@ -127,16 +131,17 @@
 {{/if}}
 
 <section class="user-content">
-  <div class="list-actions">
-    {{#if this.site.mobileView}}
-      {{#if this.showNewPM}}
-        <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
+  {{#unless this.currentUser.redesigned_user_page_nav_enabled}}
+    <div class="list-actions">
+      {{#if this.site.mobileView}}
+        {{#if this.showNewPM}}
+          <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
+        {{/if}}
+        {{#if this.currentUser.admin}}
+          <BulkSelectToggle @parentController={{"user-topics-list"}} @tagName=""/>
+        {{/if}}
       {{/if}}
-      {{#if this.currentUser.admin}}
-        <BulkSelectToggle @parentController={{"user-topics-list"}} @tagName=""/>
-      {{/if}}
-    {{/if}}
-  </div>
-
+    </div>
+  {{/unless}}
   {{outlet}}
 </section>

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

@@ -102,9 +102,23 @@
       padding: 0.5em 1em;
     }
 
+    .user-nav-messages-dropdown {
+      // manage long group names
+      max-width: 20vw;
+      min-width: 7em;
+      .select-kit-selected-name,
+      .name {
+        @include ellipsis;
+      }
+      .name {
+        min-width: 0;
+      }
+    }
+
     .category-breadcrumb {
+      width: auto;
       padding-top: var(--navigation-secondary-padding-top);
-      @include breakpoint(large) {
+      @include breakpoint(extra-large) {
         font-size: var(--font-down-1);
       }
       > li {
@@ -115,7 +129,7 @@
     .navigation-controls {
       padding-top: var(--navigation-secondary-padding-top);
       flex-wrap: nowrap;
-      @include breakpoint(large) {
+      @include breakpoint(extra-large) {
         font-size: var(--font-down-1);
       }
     }

app/assets/stylesheets/mobile/new-user.scss

@@ -28,6 +28,62 @@
     }
   }
 
+  .user-messages-page & {
+    .user-navigation-secondary {
+      display: grid;
+      grid-template-areas:
+        "dropdown controls"
+        "nav-pills nav-pills";
+      grid-template-columns: 1fr auto;
+      font-size: var(--font-up-1);
+      gap: 0.5em;
+
+      .category-breadcrumb {
+        grid-area: dropdown;
+      }
+
+      .horizontal-overflow-nav {
+        grid-area: nav-pills;
+      }
+
+      .navigation-controls {
+        grid-area: controls;
+        font-size: var(--font-down-2);
+
+        .btn {
+          padding: 0.5em 1em;
+        }
+
+        .d-button-label,
+        .select-kit-header-wrapper .name {
+          display: none;
+        }
+        .d-icon {
+          margin: 0;
+        }
+      }
+
+      .user-nav-messages-dropdown {
+        max-width: unset;
+      }
+
+      .combo-box-header {
+        font-size: var(--font-0);
+      }
+    }
+
+    tbody {
+      border-top-width: 1px;
+    }
+
+    .user-content {
+      margin: 0;
+      table {
+        margin-top: -1px; // align under nav border
+      }
+    }
+  }
+
   .user-nav-dropdown-list-item {
     flex-direction: column;
   }