UX: extend horizontal user nav to all user pages (#18674)

app/assets/javascripts/discourse/app/components/horizontal-overflow-nav.js

@@ -4,7 +4,7 @@ import { bind } from "discourse-common/utils/decorators";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
 
-export default class UserNavPreferencesNav extends Component {
+export default class HorizontalOverflowNav extends Component {
   @service site;
   @tracked hasScroll;
   @tracked hideRightScroll = false;
@@ -13,9 +13,14 @@ export default class UserNavPreferencesNav extends Component {
 
   @bind
   scrollToActive() {
-    document
+    const activeElement = document.querySelector(
-      .querySelector(".user-navigation-secondary a.active")
+      ".user-navigation-secondary a.active"
-      .scrollIntoView({ inline: "center" });
+    );
+
+    activeElement?.scrollIntoView({
+      block: "nearest",
+      inline: "center",
+    });
   }
 
   @bind
@@ -60,7 +65,7 @@ export default class UserNavPreferencesNav extends Component {
 
   @action
   horizScroll(element) {
-    let scrollSpeed = 50;
+    let scrollSpeed = 100;
     let siblingTarget = element.target.previousElementSibling;
 
     if (element.target.dataset.direction === "left") {
@@ -72,8 +77,6 @@ export default class UserNavPreferencesNav extends Component {
       siblingTarget.scrollLeft += scrollSpeed;
     }, 50);
 
-    this.scrollTimer;
-
     element.target.addEventListener("mouseup", this.stopScroll);
     element.target.addEventListener("mouseleave", this.stopScroll);
   }

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

@@ -0,0 +1,47 @@
+<DNavigationItem @route="userActivity.index">
+  {{d-icon "stream"}}
+  <span>{{i18n "user.filters.all"}}</span>
+</DNavigationItem>
+<DNavigationItem @route="userActivity.topics">
+  {{d-icon "list-ul"}}
+  <span>{{i18n "user_action_groups.4"}}</span>
+</DNavigationItem>
+<DNavigationItem @route="userActivity.replies">
+  {{d-icon "reply"}}
+  <span>{{i18n "user_action_groups.5"}}</span>
+</DNavigationItem>
+
+{{#if @user.showRead}}
+  <DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
+    {{d-icon "history"}}
+    <span>{{i18n "user.read"}}</span>
+  </DNavigationItem>
+{{/if}}
+
+{{#if @user.showDrafts}}
+  <DNavigationItem @route="userActivity.drafts">
+    {{d-icon "pencil-alt"}}
+    <span>{{@draftLabel}}</span>
+  </DNavigationItem>
+{{/if}}
+
+{{#if (gt @model.pending_posts_count 0)}}
+  <DNavigationItem @route="userActivity.pending">
+    {{d-icon "clock"}}
+    <span>{{@pendingLabel}}</span>
+  </DNavigationItem>
+{{/if}}
+
+<DNavigationItem @route="userActivity.likesGiven">
+  {{d-icon "heart"}}
+  <span>{{i18n "user_action_groups.1"}}</span>
+</DNavigationItem>
+
+{{#if @user.showBookmarks}}
+  <DNavigationItem @route="userActivity.bookmarks">
+    {{d-icon "bookmark"}}
+    <span>{{i18n "user_action_groups.3"}}</span>
+  </DNavigationItem>
+{{/if}}
+
+<PluginOutlet @name="user-activity-bottom" @connectorTagName="li" @args={{hash model=@model}} />

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

@@ -7,7 +7,7 @@
     </ol>
   {{/if}}
 
-  <ul class="messages-nav nav-pills action-list">
+  <HorizontalOverflowNav>
     {{#if @isPersonal}}
       <li class="messages-latest">
         <LinkTo @route="userPrivateMessages.index" @model={{@user}}>
@@ -99,7 +99,7 @@
     {{/if}}
 
     <PluginOutlet @name="user-messages-nav" @connectorTagName="li" @args={{hash model=@user}} />
-  </ul>
+  </HorizontalOverflowNav>
 
   {{#if this.site.desktopView}}
     <div class="navigation-controls">

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

@@ -0,0 +1,38 @@
+<li>
+  <LinkTo @route="userNotifications.index">
+    {{d-icon "bell"}}
+    <span>{{i18n "user.filters.all"}}</span>
+  </LinkTo>
+</li>
+
+<li>
+  <LinkTo @route="userNotifications.responses">
+    {{d-icon "reply"}}
+    <span>{{i18n "user_action_groups.6"}}</span>
+  </LinkTo>
+</li>
+
+<li>
+  <LinkTo @route="userNotifications.likesReceived">
+    {{d-icon "heart"}}
+    <span>{{i18n "user_action_groups.2"}}</span>
+  </LinkTo>
+</li>
+
+{{#if this.siteSettings.enable_mentions}}
+  <li>
+    <LinkTo @route="userNotifications.mentions">
+      {{d-icon "at"}}
+      <span>{{i18n "user_action_groups.7"}}</span>
+    </LinkTo>
+  </li>
+{{/if}}
+
+<li>
+  <LinkTo @route="userNotifications.edits">
+    {{d-icon "pencil-alt"}}
+    <span>{{i18n "user_action_groups.11"}}</span>
+  </LinkTo>
+</li>
+
+<PluginOutlet @name="user-notifications-bottom" @connectorTagName="li" @args={{hash model=@model}} />

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

@@ -1,23 +1,3 @@
-{{!-- template-lint-disable no-down-event-binding --}}
-
-<div class="user-navigation user-navigation-secondary {{if this.hasScroll "has-scroll"}}">
-  {{#if this.hasScroll}}
-    <a
-      role="button"
-      {{on "mousedown" this.horizScroll}}
-      data-direction="left"
-      class="nav-overflow__scroll-left btn-flat {{if this.hideLeftScroll "transparent"}}"
-    >
-      {{d-icon "chevron-left"}}
-    </a>
-  {{/if}}
-
-  <ul
-    {{did-insert this.scrollToActive}}
-    {{on-resize this.checkScroll}}
-    {{on "scroll" this.watchScroll}}
-    class="nav-pills action-list"
-  >
 <li class="nav-account">
   <LinkTo @route="preferences.account">
     {{d-icon "user"}}
@@ -92,15 +72,3 @@
   </LinkTo>
 </li>
 <PluginOutlet @name="user-preferences-nav" @connectorTagName="li" @args={{hash model=@model}} />
-  </ul>
-
-  {{#if this.hasScroll}}
-    <a
-      role="button"
-      {{on "mousedown" this.horizScroll}}
-      class="nav-overflow__scroll-right btn-flat {{if this.hideRightScroll "transparent"}}"
-    >
-      {{d-icon "chevron-right"}}
-    </a>
-  {{/if}}
-</div>

app/assets/javascripts/discourse/app/templates/components/horizontal-overflow-nav.hbs

@@ -0,0 +1,33 @@
+{{!-- template-lint-disable no-down-event-binding --}}
+
+<div class="horizontal-overflow-nav {{if this.hasScroll "has-scroll"}}">
+  {{#if this.hasScroll}}
+    <a
+      role="button"
+      {{on "mousedown" this.horizScroll}}
+      data-direction="left"
+      class="nav-overflow__scroll-left btn-flat {{if this.hideLeftScroll "transparent"}}"
+    >
+      {{d-icon "chevron-left"}}
+    </a>
+  {{/if}}
+
+  <ul
+    {{on-resize this.checkScroll}}
+    {{on "scroll" this.watchScroll}}
+    {{did-insert this.scrollToActive}}
+    class="nav-pills action-list"
+  >
+    {{yield}}
+  </ul>
+
+  {{#if this.hasScroll}}
+    <a
+      role="button"
+      {{on "mousedown" this.horizScroll}}
+      class="nav-overflow__scroll-right btn-flat {{if this.hideRightScroll "transparent"}}"
+    >
+      {{d-icon "chevron-right"}}
+    </a>
+  {{/if}}
+</div>

app/assets/javascripts/discourse/app/templates/preferences.hbs

@@ -1,12 +1,14 @@
 {{#if this.currentUser.redesigned_user_page_nav_enabled}}
   <DSection @pageClass="user-preferences" />
-
+  <div class="user-navigation user-navigation-secondary">
+    <HorizontalOverflowNav>
       <UserNav::PreferencesNav
           @user={{this.model}}
           @viewingSelf={{this.viewingSelf}}
           @model={{this.model}}
-    @siteSettings={{this.siteSettings}}
+          @siteSettings={{this.siteSettings}}/>
-  />
+    </HorizontalOverflowNav>
+  </div>
 {{else}}
   <DSection @pageClass="user-preferences" @class="user-secondary-navigation">
     <MobileNav @class="preferences-nav" @desktopClass="preferences-list action-list nav-stacked">

app/assets/javascripts/discourse/app/templates/user-invited.hbs

@@ -3,11 +3,11 @@
     <DSection @pageClass="user-invites" />
 
     <div class="user-navigation user-navigation-secondary">
-      <ul id="navigation-bar" class="nav-pills action-list">
+      <HorizontalOverflowNav>
         <NavItem @route="userInvited.show" @routeParam="pending" @i18nLabel={{this.pendingLabel}} />
         <NavItem @route="userInvited.show" @routeParam="expired" @i18nLabel={{this.expiredLabel}} />
         <NavItem @route="userInvited.show" @routeParam="redeemed" @i18nLabel={{this.redeemedLabel}} />
-      </ul>
+      </HorizontalOverflowNav>
     </div>
   {{else}}
     <DSection @class="user-secondary-navigation" @pageClass="user-invites">

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

@@ -2,56 +2,17 @@
   <DSection @pageClass="user-activity" />
 
   <div class="user-navigation user-navigation-secondary">
-    <ul class="nav-pills action-list">
+    <HorizontalOverflowNav>
-      <DNavigationItem @route="userActivity.index">
+      <UserNav::ActivityNav
-        {{d-icon "stream"}}
+        @user={{this.user}}
-        <span>{{i18n "user.filters.all"}}</span>
+        @viewingSelf={{this.viewingSelf}}
-      </DNavigationItem>
+        @model={{this.model}}
-      <DNavigationItem @route="userActivity.topics">
+        @siteSettings={{this.siteSettings}}
-        {{d-icon "list-ul"}}
+        @draftLabel={{this.draftLabel}}
-        <span>{{i18n "user_action_groups.4"}}</span>
+        @pendingLabel={{this.pendingLabel}}/>
-      </DNavigationItem>
+    </HorizontalOverflowNav>
-      <DNavigationItem @route="userActivity.replies">
-        {{d-icon "reply"}}
-        <span>{{i18n "user_action_groups.5"}}</span>
-      </DNavigationItem>
-
-      {{#if this.user.showRead}}
-        <DNavigationItem @route="userActivity.read" @title={{i18n "user.read_help"}}>
-          {{d-icon "history"}}
-          <span>{{i18n "user.read"}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      {{#if this.user.showDrafts}}
-        <DNavigationItem @route="userActivity.drafts">
-          {{d-icon "pencil-alt"}}
-          <span>{{this.draftLabel}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      {{#if (gt this.model.pending_posts_count 0)}}
-        <DNavigationItem @route="userActivity.pending">
-          {{d-icon "clock"}}
-          <span>{{this.pendingLabel}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      <DNavigationItem @route="userActivity.likesGiven">
-        {{d-icon "heart"}}
-        <span>{{i18n "user_action_groups.1"}}</span>
-      </DNavigationItem>
-
-      {{#if this.user.showBookmarks}}
-        <DNavigationItem @route="userActivity.bookmarks">
-          {{d-icon "bookmark"}}
-          <span>{{i18n "user_action_groups.3"}}</span>
-        </DNavigationItem>
-      {{/if}}
-
-      <PluginOutlet @name="user-activity-bottom" @connectorTagName="li" @args={{hash model=this.model}} />
-    </ul>
   </div>
+
 {{else}}
   <DSection @pageClass="user-activity" @class="user-secondary-navigation" @scrollTop={{false}}>
     <nav role="navigation">

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

@@ -1,54 +1,18 @@
 {{#if this.currentUser.redesigned_user_page_nav_enabled}}
   <DSection @pageClass="user-notifications" />
-
   <div class="user-navigation user-navigation-secondary">
-    <ul id="navigation-bar" class="notifications-nav nav-pills action-list">
+    <HorizontalOverflowNav>
-      <li>
+      <UserNav::NotificationsNav
-        <LinkTo @route="userNotifications.index">
+          @model={{this.model}}
-          {{d-icon "bell"}}
+          @siteSettings={{this.siteSettings}}/>
-          <span>{{i18n "user.filters.all"}}</span>
+    </HorizontalOverflowNav>
-        </LinkTo>
+  </div>
-      </li>
-
-      <li>
-        <LinkTo @route="userNotifications.responses">
-          {{d-icon "reply"}}
-          <span>{{i18n "user_action_groups.6"}}</span>
-        </LinkTo>
-      </li>
-
-      <li>
-        <LinkTo @route="userNotifications.likesReceived">
-          {{d-icon "heart"}}
-          <span>{{i18n "user_action_groups.2"}}</span>
-        </LinkTo>
-      </li>
-
-      {{#if this.siteSettings.enable_mentions}}
-        <li>
-          <LinkTo @route="userNotifications.mentions">
-            {{d-icon "at"}}
-            <span>{{i18n "user_action_groups.7"}}</span>
-          </LinkTo>
-        </li>
-      {{/if}}
-
-      <li>
-        <LinkTo @route="userNotifications.edits">
-          {{d-icon "pencil-alt"}}
-          <span>{{i18n "user_action_groups.11"}}</span>
-        </LinkTo>
-      </li>
-
-      <PluginOutlet @name="user-notifications-bottom" @connectorTagName="li" @args={{hash model=this.model}} />
-    </ul>
-
   {{#if this.model}}
     <div class="navigation-controls">
       <DButton @title="user.dismiss_notifications_tooltip" @class="btn btn-default dismiss-notifications" @action={{action "resetNew"}} @label="user.dismiss_notifications" @icon="check" @disabled={{this.allNotificationsRead}} />
     </div>
   {{/if}}
-  </div>
+
 {{else}}
   <DSection @pageClass="user-notifications" @class="user-secondary-navigation">
     <MobileNav @class="notifications-nav" @desktopClass="notification-list action-list nav-stacked">

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

@@ -89,17 +89,25 @@
     gap: 0 0.5em;
     border-bottom: 1px solid var(--primary-low);
 
+    .horizontal-overflow-nav {
+      position: relative;
+      min-width: 0;
+      width: 100%;
+    }
+
     .select-kit .select-kit-header {
       height: 100%;
       padding: 0.5em 1em;
+    }
+
+    .category-breadcrumb {
       @include breakpoint(large) {
         font-size: var(--font-down-1);
       }
-    }
+      > li {
-
-    .category-breadcrumb > li {
         margin: 0;
       }
+    }
 
     .navigation-controls {
       flex-wrap: nowrap;
@@ -123,7 +131,7 @@
       .d-icon {
         pointer-events: none;
         margin-bottom: 0.2em;
-        color: var(--tertiary);
+        color: var(--quaternary);
       }
       &.transparent {
         // hiding with opacity so we can transition visibility