⚡ pseudo code for messaging box

app/javascript/mastodon/features/compose/components/compose_form.js

@@ -69,13 +69,13 @@ class ComposeForm extends ImmutablePureComponent {
 
   handleChange = (e) => {
     this.props.onChange(e.target.value);
-  }
+  };
 
   handleKeyDown = (e) => {
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
       this.handleSubmit();
     }
-  }
+  };
 
   handleSubmit = () => {
     if (this.props.text !== this.autosuggestTextarea.textarea.value) {
@@ -93,27 +93,27 @@ class ComposeForm extends ImmutablePureComponent {
     }
 
     this.props.onSubmit(this.context.router ? this.context.router.history : null);
-  }
+  };
 
   onSuggestionsClearRequested = () => {
     this.props.onClearSuggestions();
-  }
+  };
 
   onSuggestionsFetchRequested = (token) => {
     this.props.onFetchSuggestions(token);
-  }
+  };
 
   onSuggestionSelected = (tokenStart, token, value) => {
     this.props.onSuggestionSelected(tokenStart, token, value, ['text']);
-  }
+  };
 
   onSpoilerSuggestionSelected = (tokenStart, token, value) => {
     this.props.onSuggestionSelected(tokenStart, token, value, ['spoiler_text']);
-  }
+  };
 
   handleChangeSpoilerText = (e) => {
     this.props.onChangeSpoilerText(e.target.value);
-  }
+  };
 
   handleFocus = () => {
     if (this.composeForm && !this.props.singleColumn) {
@@ -122,7 +122,7 @@ class ComposeForm extends ImmutablePureComponent {
         this.composeForm.scrollIntoView();
       }
     }
-  }
+  };
 
   componentDidUpdate(prevProps) {
     // This statement does several things:
@@ -159,11 +159,11 @@ class ComposeForm extends ImmutablePureComponent {
 
   setAutosuggestTextarea = (c) => {
     this.autosuggestTextarea = c;
-  }
+  };
 
   setSpoilerText = (c) => {
     this.spoilerText = c;
-  }
+  };
 
   setRef = c => {
     this.composeForm = c;
@@ -175,7 +175,7 @@ class ComposeForm extends ImmutablePureComponent {
     const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
 
     this.props.onPickEmoji(position, data, needsSpace);
-  }
+  };
 
   render() {
     const { intl, onPaste, showSearch, anyMedia } = this.props;
@@ -185,7 +185,8 @@ class ComposeForm extends ImmutablePureComponent {
     let publishText = '';
 
     if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
-      publishText = <span className='compose-form__publish-private'><Icon id='lock' /> {intl.formatMessage(messages.publish)}</span>;
+      publishText =
+        <span className='compose-form__publish-private'><Icon id='lock'/> {intl.formatMessage(messages.publish)}</span>;
     } else {
       publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
     }
@@ -247,7 +248,26 @@ class ComposeForm extends ImmutablePureComponent {
         </div>
 
         <div className='compose-form__publish'>
-          <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit} disabled={disabledButton} block /></div>
+          <div className='compose-form__publish-button-wrapper'><Button text={publishText} onClick={this.handleSubmit}
+                                                                        disabled={disabledButton} block/></div>
+        </div>
+        <div className="messaging-box">
+          Messaging box
+          <div className="user-list">
+            <h2>User list</h2>
+            <ul>
+              <li>
+                someone is logged in, click on me
+              </li>
+              <li>
+                wulfila is here, click on me
+              </li>
+              <li>
+                chuck norris is here, click on me
+              </li>
+            </ul>
+          </div>
+
         </div>
       </div>
     );

app/javascript/styles/bliss/messaging.scss

@@ -0,0 +1,8 @@
+.messaging-box {
+  border: solid 1px white;
+  padding: 1em;
+  position: fixed;
+  bottom: 0;
+  right: 1em;
+  background: grey;
+}