Group staff members by role in the About page

CHANGELOG.md

@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 - Added some missing unicode emoji
 - Added the upload limit to the Features panel in the About page
 - Support for solid color wallpaper, instance doesn't have to define a wallpaper anymore
+- Group staff members by role in the About page
 
 ### Fixed
 - Fixed the occasional bug where screen would scroll 1px when typing into a reply form

src/components/staff_panel/staff_panel.js

 import map from 'lodash/map'
+import groupBy from 'lodash/groupBy'
+import { mapGetters, mapState } from 'vuex'
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const StaffPanel = {
@@ -10,9 +12,21 @@ const StaffPanel = {
     BasicUserCard
   },
   computed: {
-    staffAccounts () {
-      return map(this.$store.state.instance.staffAccounts, nickname => this.$store.getters.findUser(nickname)).filter(_ => _)
-    }
+    groupedStaffAccounts () {
+      const staffAccounts = map(this.staffAccounts, this.findUser).filter(_ => _)
+      const groupedStaffAccounts = groupBy(staffAccounts, 'role')
+
+      return [
+        { role: 'admin', users: groupedStaffAccounts['admin'] },
+        { role: 'moderator', users: groupedStaffAccounts['moderator'] }
+      ].filter(group => group.users)
+    },
+    ...mapGetters([
+      'findUser'
+    ]),
+    ...mapState({
+      staffAccounts: state => state.instance.staffAccounts
+    })
   }
 }
 

src/components/staff_panel/staff_panel.vue

@@ -7,11 +7,18 @@
         </div>
       </div>
       <div class="panel-body">
-        <basic-user-card
-          v-for="user in staffAccounts"
-          :key="user.screen_name"
-          :user="user"
-        />
+        <div
+          v-for="group in groupedStaffAccounts"
+          :key="group.role"
+          class="staff-group"
+        >
+          <h4>{{ $t('general.role.' + group.role) }}</h4>
+          <basic-user-card
+            v-for="user in group.users"
+            :key="user.screen_name"
+            :user="user"
+          />
+        </div>
       </div>
     </div>
   </div>
@@ -20,4 +27,14 @@
 <script src="./staff_panel.js" ></script>
 
 <style lang="scss">
+
+.staff-group {
+  padding-left: 1em;
+  padding-top: 1em;
+
+  .basic-user-card {
+    padding-left: 0;
+  }
+}
+
 </style>

src/i18n/en.json

@@ -75,7 +75,11 @@
     "confirm": "Confirm",
     "verify": "Verify",
     "close": "Close",
-    "peek": "Peek"
+    "peek": "Peek",
+    "role": {
+      "admin": "Admin",
+      "moderator": "Moderator"
+    }
   },
   "image_cropper": {
     "crop_picture": "Crop picture",