message: refactor and sort
diff: @@ -695,26 +695,51 @@ module.exports = React.createClass({
  relatedGroupsEvent={this.props.room.currentState.getStateEvents('m.room.related_groups', '')}
  />;
  - let userLevelsSection;
  + let privilegedUsersSection = <div>{ _t('No users have specific privileges in this room') }.</div>; // default
  + let mutedUsersSection;
  if (Object.keys(userLevels).length) {
  - userLevelsSection =
  - <div>
  - <h3>{ _t('Privileged Users') }</h3>
  - <ul className="mx_RoomSettings_userLevels">
  - { Object.keys(userLevels).map(function(user, i) {
  - return (
  - <li className="mx_RoomSettings_userLevel" key={user}>
  + const privilegedUsers = [];
  + const mutedUsers = [];
  +
  + Object.keys(userLevels).forEach(function(user) {
  + if (userLevels[user] > defaultUserLevel) { // privileged
  + privilegedUsers.push(<li className="mx_RoomSettings_userLevel" key={user}>
  { _t("%(user)s is a %(userRole)s", {
  user: user,
  userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
  }) }
  - </li>
  - );
  + </li>);
  + } else if (userLevels[user] < defaultUserLevel) { // muted
  + mutedUsers.push(<li className="mx_RoomSettings_userLevel" key={user}>
  + { _t("%(user)s is a %(userRole)s", {
  + user: user,
  + userRole: <PowerSelector value={userLevels[user]} disabled={true} />,
  }) }
  + </li>);
  + }
  + });
  +
  + privilegedUsers.sort((a, b) => userLevels[b.key] - userLevels[a.key]);
  + mutedUsers.sort((a, b) => userLevels[a.key] - userLevels[b.key]);
  +
  + if (privilegedUsers.length) {
  + privilegedUsersSection =
  + <div>
  + <h3>{ _t('Privileged Users') }</h3>
  + <ul className="mx_RoomSettings_userLevels">
  + { privilegedUsers }
  </ul>
  </div>;
  - } else {
  - userLevelsSection = <div>{ _t('No users have specific privileges in this room') }.</div>;
  + }
  + if (mutedUsers.length) {
  + mutedUsersSection =
  + <div>
  + <h3>{ _t('Muted Users') }</h3>
  + <ul className="mx_RoomSettings_userLevels">
  + { mutedUsers }
  + </ul>
  + </div>;
  + }
  }
  const banned = this.props.room.getMembersWithMembership("ban");
  @@ -979,8 +1004,8 @@ module.exports = React.createClass({
  { unfederatableSection }
  </div>
  - { userLevelsSection }
  -
  + { privilegedUsersSection }
  + { mutedUsersSection }
  { bannedUsersSection }
  <h3>{ _t('Advanced') }</h3>
  