Inline chat moderation UI (#1331)

* - mock detect when user turns into moderator
- add moderator indicator to display on messages and username changer

* also mock moderator flag in message payload about user to display indicator

* add some menu looking icons and a menu of actions

* WIP chat moderators

* Add support for admin promoting a user to moderator

* WIP-
open a more info panel of user+message info; add some a11y to buttons

* style the details panel

* adjust positioning of menus

* Merge fixes. ChatClient->Client ChatServer->Server

* Remove moderator bool placeholders to use real state

* Support inline hiding of messages by moderators

* Support inline banning of chat users

* Cleanup linter warnings

* Puppeteer tests fail after typing take place

* Manually resolve conflicts in chat between moderator feature and develop

Co-authored-by: Gabe Kangas <gabek@real-ity.com>

webroot/js/app.js

@@ -51,6 +51,7 @@ import {
   URL_VIEWER_PING,
   WIDTH_SINGLE_COL,
 } from './utils/constants.js';
+import { checkIsModerator } from './utils/chat.js';
 
 export default class App extends Component {
   constructor(props, context) {
@@ -67,6 +68,8 @@ export default class App extends Component {
       chatInputEnabled: false, // chat input box state
       accessToken: null,
       username: getLocalStorage(KEY_USERNAME),
+      isModerator: false,
+
       isRegistering: false,
       touchKeyboardActive: false,
 
@@ -558,7 +561,10 @@ export default class App extends Component {
       const { user } = e;
       const { displayName } = user;
 
-      this.setState({ username: displayName });
+      this.setState({
+        username: displayName,
+        isModerator: checkIsModerator(e),
+      });
     }
   }
 
@@ -627,6 +633,7 @@ export default class App extends Component {
       configData,
       displayChatPanel,
       canChat,
+      isModerator,
 
       isPlaying,
       orientation,
@@ -769,6 +776,7 @@ export default class App extends Component {
             >
               <${UsernameForm}
                 username=${username}
+                isModerator=${isModerator}
                 onUsernameChange=${this.handleUsernameChange}
                 onFocus=${this.handleFormFocus}
                 onBlur=${this.handleFormBlur}