Adds list of active users in the chat and allows username change

- allows users to update their username and save the new username
- runs a background thread for every user session which emits a
broadcast with the username so every user can build their list of
active users in the frontend via the socket information
- on updating username, stop the old thread and start a new thread
with the new username being emitted. The username is updated in
everyone's list along with a status message for the same.

share/static/css/style.css

@@ -130,9 +130,34 @@ table.file-list td:last-child {
   width: 100%;
 }
 
+.chat-container {
+  display: flex;
+}
+
+.chat-users {
+  width: 20%;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  overflow: auto;
+  background: #f2f2f2;
+}
+
+.chat-users .editable-username {
+  display: flex;
+}
+
+.chat-users input#username {
+  width: 50%;
+}
+
+.chat-users #user-list li {
+  margin-bottom: 1em;
+}
+
 .chat-wrapper {
   display: flex;
   flex-direction: column;
+  flex: 1;
   margin: 0 1rem;
   height: calc(100vh - (45px + 2em));
 }
@@ -150,6 +175,10 @@ table.file-list td:last-child {
   display: flex;
 }
 
+.chat-wrapper input#new-message {
+  height: 100%;
+}
+
 .upload-wrapper {
   align-items: center;
   justify-content: center;