UX: Move About and FAQ links into secondary section in More... dropdown (#17793)

This commit does not change any behaviour of the links and is simply
changing the positions of the links being displayed.

app/assets/javascripts/discourse/app/components/sidebar/community-section.js

@@ -24,25 +24,21 @@ const MAIN_SECTION_LINKS = [
 
 const ADMIN_MAIN_SECTION_LINKS = [AdminSectionLink];
 
-const MORE_SECTION_LINKS = [
+const MORE_SECTION_LINKS = [GroupsSectionLink, UsersSectionLink];
-  GroupsSectionLink,
+const MORE_SECONDARY_SECTION_LINKS = [AboutSectionLink, FAQSectionLink];
-  UsersSectionLink,
-  AboutSectionLink,
-  FAQSectionLink,
-];
 
 export default class SidebarCommunitySection extends GlimmerComponent {
   @service router;
 
   moreSectionLinks = [...MORE_SECTION_LINKS, ...customSectionLinks].map(
     (sectionLinkClass) => {
-      return new sectionLinkClass({
+      return this.#initializeSectionLink(sectionLinkClass);
-        topicTrackingState: this.topicTrackingState,
+    }
-        currentUser: this.currentUser,
+  );
-        appEvents: this.appEvents,
+
-        router: this.router,
+  moreSecondarySectionLinks = MORE_SECONDARY_SECTION_LINKS.map(
-        siteSettings: this.siteSettings,
+    (sectionLinkClass) => {
-      });
+      return this.#initializeSectionLink(sectionLinkClass);
     }
   );
 
@@ -51,11 +47,7 @@ export default class SidebarCommunitySection extends GlimmerComponent {
     : [...MAIN_SECTION_LINKS];
 
   sectionLinks = this.#mainSectionLinks.map((sectionLinkClass) => {
-    return new sectionLinkClass({
+    return this.#initializeSectionLink(sectionLinkClass);
-      topicTrackingState: this.topicTrackingState,
-      currentUser: this.currentUser,
-      appEvents: this.appEvents,
-    });
   });
 
   willDestroy() {
@@ -80,4 +72,14 @@ export default class SidebarCommunitySection extends GlimmerComponent {
       getOwner(this).lookup("controller:composer").open(composerArgs);
     });
   }
+
+  #initializeSectionLink(sectionLinkClass) {
+    return new sectionLinkClass({
+      topicTrackingState: this.topicTrackingState,
+      currentUser: this.currentUser,
+      appEvents: this.appEvents,
+      router: this.router,
+      siteSettings: this.siteSettings,
+    });
+  }
 }

app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js

@@ -24,14 +24,26 @@ export default class SidebarMoreSectionLinks extends GlimmerComponent {
 
   get sectionLinks() {
     if (this.activeSectionLink) {
-      return this.args.sectionLinks.filter((sectionLink) => {
+      return this.#filterActiveSectionLink(this.args.sectionLinks);
-        return sectionLink.name !== this.activeSectionLink.name;
-      });
     } else {
       return this.args.sectionLinks;
     }
   }
 
+  get secondarySectionLinks() {
+    if (this.activeSectionLink) {
+      return this.#filterActiveSectionLink(this.args.secondarySectionLinks);
+    } else {
+      return this.args.secondarySectionLinks;
+    }
+  }
+
+  #filterActiveSectionLink(sectionLinks) {
+    return sectionLinks.filter((sectionLink) => {
+      return sectionLink.name !== this.activeSectionLink.name;
+    });
+  }
+
   @bind
   closeDetails(event) {
     if (this.shouldDisplaySectionLinks) {

app/assets/javascripts/discourse/app/templates/components/sidebar/community-section.hbs

@@ -22,5 +22,5 @@
       @models={{sectionLink.models}} />
   {{/each}}
 
-  <Sidebar::MoreSectionLinks @sectionLinks={{this.moreSectionLinks}} />
+  <Sidebar::MoreSectionLinks @sectionLinks={{this.moreSectionLinks}} @secondarySectionLinks={{this.moreSecondarySectionLinks}} />
 </Sidebar::Section>

app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-link.hbs

@@ -0,0 +1,11 @@
+<Sidebar::SectionLink
+  @linkName={{@sectionLink.name}}
+  @route={{@sectionLink.route}}
+  @href={{@sectionLink.href}}
+  @query={{@sectionLink.query}}
+  @title={{@sectionLink.title}}
+  @content={{@sectionLink.text}}
+  @currentWhen={{@sectionLink.currentWhen}}
+  @badgeText={{@sectionLink.badgeText}}
+  @model={{@sectionLink.model}}
+  @models={{@sectionLink.models}} />

app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-links.hbs

@@ -1,14 +1,5 @@
 {{#if this.activeSectionLink}}
-  <Sidebar::SectionLink
+  <Sidebar::MoreSectionLink @sectionLink={{this.activeSectionLink}} />
-    @linkName={{this.activeSectionLink.name}}
-    @route={{this.activeSectionLink.route}}
-    @query={{this.activeSectionLink.query}}
-    @title={{this.activeSectionLink.title}}
-    @content={{this.activeSectionLink.text}}
-    @currentWhen={{this.activeSectionLink.currentWhen}}
-    @badgeText={{this.activeSectionLink.badgeText}}
-    @model={{this.activeSectionLink.model}}
-    @models={{this.activeSectionLink.models}} />
 {{/if}}
 
 <details class="sidebar-more-section-links-details" {{on "toggle" this.toggleSectionLinks}}>
@@ -21,19 +12,19 @@
       {{did-insert this.registerClickListener}}
       {{will-destroy this.unregisterClickListener}} >
 
-      {{#each this.sectionLinks as |sectionLink|}}
+      <div class="sidebar-more-section-links-details-content-main">
-        <Sidebar::SectionLink
+        {{#each this.sectionLinks as |sectionLink|}}
-          @linkName={{sectionLink.name}}
+          <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
-          @route={{sectionLink.route}}
+        {{/each}}
-          @href={{sectionLink.href}}
+      </div>
-          @query={{sectionLink.query}}
+
-          @title={{sectionLink.title}}
+      {{#if (gt this.secondarySectionLinks.length 0)}}
-          @content={{sectionLink.text}}
+        <div class="sidebar-more-section-links-details-content-secondary">
-          @currentWhen={{sectionLink.currentWhen}}
+          {{#each this.secondarySectionLinks as |sectionLink|}}
-          @badgeText={{sectionLink.badgeText}}
+            <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
-          @model={{sectionLink.model}}
+          {{/each}}
-          @models={{sectionLink.models}} />
+        </div>
-      {{/each}}
+      {{/if}}
     </div>
   {{/if}}
 </details>

app/assets/stylesheets/common/base/sidebar-more-section-links.scss

@@ -36,4 +36,8 @@
       margin-left: none;
     }
   }
+
+  .sidebar-more-section-links-details-content-secondary {
+    border-top: 1.5px solid var(--primary-low);
+  }
 }