DEV: Convert messages user page nav to experimental redesign (#18456)

No tests are written for now as we're still in a highly iterative stage

app/assets/javascripts/discourse/app/components/user-nav/messages-groups-dropdown.js

@@ -0,0 +1,53 @@
+import { gte, reads } from "@ember/object/computed";
+import ComboBoxComponent from "select-kit/components/combo-box";
+import DiscourseURL from "discourse/lib/url";
+import I18n from "I18n";
+import { computed } from "@ember/object";
+
+export default ComboBoxComponent.extend({
+  pluginApiIdentifiers: ["messages-dropdown"],
+  classNames: ["message-dropdown"],
+  content: reads("groupsWithMessages"),
+  valueProperty: "name",
+  hasManyGroups: gte("content.length", 10),
+
+  selectKitOptions: {
+    caretDownIcon: "caret-right",
+    caretUpIcon: "caret-down",
+    filterable: "hasManyGroups",
+  },
+
+  groupsWithMessages: computed(function () {
+    const groups = [
+      {
+        name: I18n.t("user.messages.inbox"),
+      },
+    ];
+
+    this.user.groupsWithMessages.forEach((group) => {
+      groups.push({ name: group.name, icon: "inbox" });
+    });
+
+    if (this.pmTaggingEnabled) {
+      groups.push({ name: I18n.t("user.messages.tags") });
+    }
+
+    return groups;
+  }),
+
+  actions: {
+    onChange(item) {
+      let url;
+
+      if (this.user.groups.some((g) => g.name === item)) {
+        url = `/u/${this.user.username}/messages/group/${item}`;
+      } else if (item === I18n.t("user.messages.tags")) {
+        url = `/u/${this.user.username}/messages/tags`;
+      } else {
+        url = `/u/${this.user.username}/messages`;
+      }
+
+      DiscourseURL.routeToUrl(url);
+    },
+  },
+});

app/assets/javascripts/discourse/app/components/user-nav/messages-nav.hbs

@@ -0,0 +1,105 @@
+<div class="user-navigation-container">
+  {{#if (gt @user.groupsWithMessages.length 0)}}
+    <ol class="category-breadcrumb">
+      <li>
+        <UserNav::MessagesGroupsDropdown @user={{@user}} @pmTaggingEnabled={{@pmTaggingEnabled}} @value={{this.messagesDropdownvalue}} />
+      </li>
+    </ol>
+  {{/if}}
+
+  <ul id="navigation-bar" class="messages-nav nav-pills action-list">
+    {{#if @isPersonal}}
+      <li>
+        <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
+          {{i18n "categories.latest"}}
+        </LinkTo>
+      </li>
+
+      <li class="archive">
+        <LinkTo @route="userPrivateMessages.sent" @model={{@user}}>
+          {{i18n "user.messages.sent"}}
+        </LinkTo>
+      </li>
+
+      {{#if @viewingSelf}}
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.new" @model={{@user}} class="new">
+            {{@newLinkText}}
+          </LinkTo>
+        </li>
+
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.unread" @model={{@user}} class="unread">
+            {{@unreadLinkText}}
+          </LinkTo>
+        </li>
+      {{/if}}
+
+      <li class="archive">
+        <LinkTo @route="userPrivateMessages.archive" @model={{@user}}>
+          {{i18n "user.messages.archive"}}
+        </LinkTo>
+      </li>
+    {{/if}}
+
+    {{#each @user.groups as |group|}}
+      {{#if (and @isGroup (eq @groupFilter group.name))}}
+        {{#if @viewingSelf}}
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.group" @model={{group.name}}>
+              {{i18n "categories.latest"}}
+            </LinkTo>
+          </li>
+
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.groupNew" @model={{group.name}} class="new">
+              {{@newLinkText}}
+            </LinkTo>
+          </li>
+
+          <li class="archive">
+            <LinkTo @route="userPrivateMessages.groupUnread" @model={{group.name}} class="unread">
+              {{@unreadLinkText}}
+            </LinkTo>
+          </li>
+        {{/if}}
+
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.groupArchive" @model={{group.name}}>
+            {{i18n "user.messages.archive"}}
+          </LinkTo>
+        </li>
+      {{/if}}
+    {{/each}}
+
+    {{#if this.displayTags}}
+      <li class="tags">
+        <LinkTo @route="userPrivateMessages.tags" @model={{@user}}>
+          {{i18n "user.messages.all_tags"}}
+        </LinkTo>
+      </li>
+
+      {{#if @tagId}}
+        <li class="archive">
+          <LinkTo @route="userPrivateMessages.tagsShow" @model={{@tagId}}>
+            {{@tagId}}
+          </LinkTo>
+        </li>
+      {{/if}}
+    {{/if}}
+
+    <PluginOutlet @name="user-messages-nav" @tagName="span" @connectorTagName="li" @args={{hash model=@user}} />
+  </ul>
+
+  {{#if this.site.desktopView}}
+    <div class="navigation-controls">
+      {{#if @isGroup}}
+        <GroupNotificationsButton @value={{@group.group_user.notification_level}} @onChange={{action @changeGroupNotificationLevel}} />
+      {{/if}}
+
+      {{#if @showNewPM}}
+        <DButton @class="btn-primary new-private-message" @action={{route-action "composePrivateMessage"}} @icon="envelope" @label="user.new_private_message" />
+      {{/if}}
+    </div>
+  {{/if}}
+</div>

app/assets/javascripts/discourse/app/components/user-nav/messages-nav.js

@@ -0,0 +1,24 @@
+import Component from "@glimmer/component";
+import { inject as service } from "@ember/service";
+
+export default class UserNavMessagesNav extends Component {
+  @service site;
+
+  get messagesDropdownvalue() {
+    switch (this.args.currentRouteName) {
+      case "userPrivateMessages.tags":
+      case "userPrivateMessages.tagsShow":
+        return "tags";
+      default:
+        if (this.args.groupFilter) {
+          return this.args.groupFilter;
+        } else {
+          return "inbox";
+        }
+    }
+  }
+
+  get displayTags() {
+    return this.args.pmTaggingEnabled && this.messagesDropdownvalue === "tags";
+  }
+}

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

@@ -1,6 +1,7 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { action } from "@ember/object";
-import { alias, and, equal } from "@ember/object/computed";
+import { inject as service } from "@ember/service";
+import { alias, and, equal, readOnly } from "@ember/object/computed";
 import discourseComputed from "discourse-common/utils/decorators";
 import { VIEW_NAME_WARNINGS } from "discourse/routes/user-private-messages-warnings";
 import I18n from "I18n";
@@ -9,6 +10,7 @@ export const PERSONAL_INBOX = "__personal_inbox__";
 
 export default Controller.extend({
   user: controller(),
+  router: service(),
 
   pmView: false,
   viewingSelf: alias("user.viewingSelf"),
@@ -17,6 +19,7 @@ export default Controller.extend({
   group: null,
   groupFilter: alias("group.name"),
   currentPath: alias("router._router.currentPath"),
+  currentRouteName: readOnly("router.currentRouteName"),
   pmTaggingEnabled: alias("site.can_tag_pms"),
   tagId: null,
 

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

@@ -1,3 +1,23 @@
+{{#if this.currentUser.redesigned_user_page_nav_enabled}}
+  <DSection @pageClass="user-messages" />
+
+  <UserNav::MessagesNav
+    @user={{this.model}}
+    @isPersonal={{this.isPersonal}}
+    @viewingSelf={{this.viewingSelf}}
+    @isGroup={{this.isGroup}}
+    @groupFilter={{this.groupFilter}}
+    @newLinkText={{this.newLinkText}}
+    @unreadLinkText={{this.unreadLinkText}}
+    @archiveLinkText={{this.archiveLinkText}}
+    @pmTaggingEnabled={{this.pmTaggingEnabled}}
+    @tagId={{this.tagId}}
+    @showNewPM={{this.showNewPM}}
+    @group={{this.group}}
+    @changeGroupNotificationLevel={{action "changeGroupNotificationLevel"}}
+    @currentRouteName={{this.currentRouteName}}
+  />
+{{else}}
   <DSection @class="user-secondary-navigation" @pageClass="user-messages">
     <MobileNav @class="messages-nav" @desktopClass="nav-stacked action-list">
       <li>
@@ -98,6 +118,7 @@
       {{/if}}
     </section>
   {{/unless}}
+{{/if}}
 
 <section class="user-content">
   <div class="list-actions">

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

@@ -14,6 +14,23 @@
       grid-row-end: 2;
     }
 
+    .user-navigation-container {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 1;
+      grid-row-end: 2;
+
+      display: flex;
+      flex-direction: row;
+    }
+
+    .user-navigation-container ~ .user-content {
+      grid-column-start: 1;
+      grid-column-end: 3;
+      grid-row-start: 2;
+      grid-row-end: 3;
+    }
+
     .user-content {
       grid-column-start: 1;
       grid-column-end: 3;

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

@@ -49,4 +49,17 @@
       @include ellipsis;
     }
   }
+
+  #navigation-bar {
+    margin-top: 1em;
+    display: flex;
+    flex-wrap: nowrap;
+    width: 100%;
+    overflow-x: scroll;
+    margin-bottom: 0;
+    padding-bottom: 0.5em;
+    a {
+      white-space: nowrap;
+    }
+  }
 }

config/locales/client.en.yml

@@ -1275,6 +1275,7 @@ en:
         move_to_archive: "Archive"
         failed_to_move: "Failed to move selected messages (perhaps your network is down)"
         tags: "Tags"
+        all_tags: "All Tags"
         warnings: "Official Warnings"
         read_more_in_group: "Want to read more? Browse other messages in %{groupLink}."
         read_more: "Want to read more? Browse other messages in <a href='%{basePath}/u/%{username}/messages'>personal messages</a>."