From e09fd7cde2d7162d55511ba40b59150ab03c7419 Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Thu, 4 Aug 2022 13:41:08 +0800
Subject: [PATCH] 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.
---
 .../components/sidebar/community-section.js   | 38 ++++++++++---------
 .../components/sidebar/more-section-links.js  | 18 +++++++--
 .../components/sidebar/community-section.hbs  |  2 +-
 .../components/sidebar/more-section-link.hbs  | 11 ++++++
 .../components/sidebar/more-section-links.hbs | 37 +++++++-----------
 .../base/sidebar-more-section-links.scss      |  4 ++
 6 files changed, 65 insertions(+), 45 deletions(-)
 create mode 100644 app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-link.hbs

diff --git a/app/assets/javascripts/discourse/app/components/sidebar/community-section.js b/app/assets/javascripts/discourse/app/components/sidebar/community-section.js
index 16b68f9ef10..ff6b9626b8e 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/community-section.js
+++ b/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 = [
-  GroupsSectionLink,
-  UsersSectionLink,
-  AboutSectionLink,
-  FAQSectionLink,
-];
+const MORE_SECTION_LINKS = [GroupsSectionLink, UsersSectionLink];
+const MORE_SECONDARY_SECTION_LINKS = [AboutSectionLink, FAQSectionLink];
 
 export default class SidebarCommunitySection extends GlimmerComponent {
   @service router;
 
   moreSectionLinks = [...MORE_SECTION_LINKS, ...customSectionLinks].map(
     (sectionLinkClass) => {
-      return new sectionLinkClass({
-        topicTrackingState: this.topicTrackingState,
-        currentUser: this.currentUser,
-        appEvents: this.appEvents,
-        router: this.router,
-        siteSettings: this.siteSettings,
-      });
+      return this.#initializeSectionLink(sectionLinkClass);
+    }
+  );
+
+  moreSecondarySectionLinks = MORE_SECONDARY_SECTION_LINKS.map(
+    (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({
-      topicTrackingState: this.topicTrackingState,
-      currentUser: this.currentUser,
-      appEvents: this.appEvents,
-    });
+    return this.#initializeSectionLink(sectionLinkClass);
   });
 
   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,
+    });
+  }
 }
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js b/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js
index 6ae9ac39e87..c2c5939e0eb 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/more-section-links.js
+++ b/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 sectionLink.name !== this.activeSectionLink.name;
-      });
+      return this.#filterActiveSectionLink(this.args.sectionLinks);
     } 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) {
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/community-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/community-section.hbs
index 405ce9729cf..94696fa6487 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar/community-section.hbs
+++ b/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>
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-link.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-link.hbs
new file mode 100644
index 00000000000..2958b613652
--- /dev/null
+++ b/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}} />
diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-links.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-links.hbs
index b0d929f0cf7..41d3ef7fdbb 100644
--- a/app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-links.hbs
+++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/more-section-links.hbs
@@ -1,14 +1,5 @@
 {{#if this.activeSectionLink}}
-  <Sidebar::SectionLink
-    @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}} />
+  <Sidebar::MoreSectionLink @sectionLink={{this.activeSectionLink}} />
 {{/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|}}
-        <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}} />
-      {{/each}}
+      <div class="sidebar-more-section-links-details-content-main">
+        {{#each this.sectionLinks as |sectionLink|}}
+          <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
+        {{/each}}
+      </div>
+
+      {{#if (gt this.secondarySectionLinks.length 0)}}
+        <div class="sidebar-more-section-links-details-content-secondary">
+          {{#each this.secondarySectionLinks as |sectionLink|}}
+            <Sidebar::MoreSectionLink @sectionLink={{sectionLink}} />
+          {{/each}}
+        </div>
+      {{/if}}
     </div>
   {{/if}}
 </details>
diff --git a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss b/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
index 0c9f74cb83e..5585da35da2 100644
--- a/app/assets/stylesheets/common/base/sidebar-more-section-links.scss
+++ b/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);
+  }
 }