From 415740330857a3ddfa352aacd173e6b31a1eae08 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 25 Apr 2022 16:02:41 -0400
Subject: [PATCH] UX: organize topic admin menu into groups (#16489)

---
 .../discourse/app/widgets/topic-admin-menu.js | 43 ++++++++++++++++---
 .../common/base/topic-admin-menu.scss         | 26 +++++++++++
 config/locales/client.en.yml                  |  4 +-
 3 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js b/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js
index 7df1138ffe0..064d790e3e3 100644
--- a/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js
+++ b/app/assets/javascripts/discourse/app/widgets/topic-admin-menu.js
@@ -150,6 +150,7 @@ export default createWidget("topic-admin-menu", {
         action: "toggleMultiSelect",
         icon: "tasks",
         label: "actions.multi_select",
+        button_group: "topic",
       });
     }
 
@@ -164,6 +165,7 @@ export default createWidget("topic-admin-menu", {
           action: "deleteTopic",
           icon: "far-trash-alt",
           label: "actions.delete",
+          button_group: "topic",
         });
       }
 
@@ -174,6 +176,7 @@ export default createWidget("topic-admin-menu", {
           action: "recoverTopic",
           icon: "undo",
           label: "actions.recover",
+          button_group: "topic",
         });
       }
     }
@@ -186,6 +189,7 @@ export default createWidget("topic-admin-menu", {
           action: "toggleClosed",
           icon: "unlock",
           label: "actions.open",
+          button_group: "topic",
         });
       } else {
         this.addActionButton({
@@ -194,6 +198,7 @@ export default createWidget("topic-admin-menu", {
           action: "toggleClosed",
           icon: "lock",
           label: "actions.close",
+          button_group: "topic",
         });
       }
     }
@@ -205,6 +210,7 @@ export default createWidget("topic-admin-menu", {
         action: "showTopicTimerModal",
         icon: "far-clock",
         label: "actions.timed_update",
+        button_group: "time",
       });
     }
 
@@ -219,6 +225,7 @@ export default createWidget("topic-admin-menu", {
         action: "showFeatureTopic",
         icon: "thumbtack",
         label: featured ? "actions.unpin" : "actions.pin",
+        button_group: "topic",
       });
     }
 
@@ -230,6 +237,7 @@ export default createWidget("topic-admin-menu", {
           action: "showChangeTimestamp",
           icon: "calendar-alt",
           label: "change_timestamp.title",
+          button_group: "time",
         });
       }
 
@@ -239,6 +247,7 @@ export default createWidget("topic-admin-menu", {
         action: "resetBumpDate",
         icon: "anchor",
         label: "actions.reset_bump_date",
+        button_group: "time",
       });
     }
 
@@ -252,6 +261,7 @@ export default createWidget("topic-admin-menu", {
           label: topic.get("archived")
             ? "actions.unarchive"
             : "actions.archive",
+          button_group: "topic",
         });
       }
     }
@@ -263,6 +273,7 @@ export default createWidget("topic-admin-menu", {
         action: "toggleVisibility",
         icon: visible ? "far-eye-slash" : "far-eye",
         label: visible ? "actions.invisible" : "actions.visible",
+        button_group: "topic",
       });
     }
 
@@ -278,6 +289,7 @@ export default createWidget("topic-admin-menu", {
           label: isPrivateMessage
             ? "actions.make_public"
             : "actions.make_private",
+          button_group: "topic",
         });
       }
 
@@ -287,6 +299,7 @@ export default createWidget("topic-admin-menu", {
         action: "showTopicSlowModeUpdate",
         icon: "hourglass-start",
         label: "actions.slow_mode",
+        button_group: "time",
       });
 
       if (this.currentUser.get("staff")) {
@@ -343,13 +356,31 @@ export default createWidget("topic-admin-menu", {
       this.attrs,
       this.state
     );
-    return h(
-      "ul",
-      attrs.actionButtons
-        .concat(extraButtons)
-        .filter(Boolean)
-        .map((b) => this.attach("admin-menu-button", b))
+
+    const actionButtons = attrs.actionButtons
+      .concat(extraButtons)
+      .filter(Boolean);
+
+    const buttonMap = actionButtons.reduce(
+      (prev, current) =>
+        prev.set(current.button_group, [
+          ...(prev.get(current.button_group) || []),
+          current,
+        ]),
+      new Map()
     );
+
+    let combinedButtonLists = [];
+
+    for (const [group, buttons] of buttonMap.entries()) {
+      let buttonList = [];
+      buttons.forEach((button) => {
+        buttonList.push(this.attach("admin-menu-button", button));
+      });
+      combinedButtonLists.push(h(`ul.topic-admin-menu-${group}`, buttonList));
+    }
+
+    return h("ul", combinedButtonLists);
   },
 
   clickOutside() {
diff --git a/app/assets/stylesheets/common/base/topic-admin-menu.scss b/app/assets/stylesheets/common/base/topic-admin-menu.scss
index bdd2f5a9408..f0ae372ca5e 100644
--- a/app/assets/stylesheets/common/base/topic-admin-menu.scss
+++ b/app/assets/stylesheets/common/base/topic-admin-menu.scss
@@ -22,6 +22,32 @@
   .mobile-view & {
     z-index: z("modal", "popover");
   }
+
+  .btn {
+    padding-top: 0.5em;
+    padding-bottom: 0.5em;
+
+    .d-icon {
+      font-size: var(--font-down-1);
+      margin-top: 1px; // vertical alignment
+    }
+  }
+
+  ul {
+    li {
+      border: none;
+      &:not(:last-of-type) {
+        // so buttons don't appear "stuck" together when multiple are highlighted
+        margin-bottom: 2px;
+      }
+    }
+    ul {
+      padding: 0.5em;
+      &:not(:last-of-type) {
+        border-bottom: 1px solid var(--primary-low);
+      }
+    }
+  }
 }
 
 .modal-body.feature-topic {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index f7f578556eb..0b5cb0279eb 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -2835,8 +2835,8 @@ en:
         unpin: "Un-Pin Topic…"
         unarchive: "Unarchive Topic"
         archive: "Archive Topic"
-        invisible: "Make Unlisted"
-        visible: "Make Listed"
+        invisible: "Unlist Topic"
+        visible: "List Topic"
         reset_read: "Reset Read Data"
         make_public: "Make Public Topic..."
         make_private: "Make Personal Message"