We'll want to start off by modifying the UI to allow for the display of users and write in a couple of examples of what different join, leave, or status change messages might look like. We'll make a couple of assumptions in doing this, and this is the kind of thing where if you were building this as a fully-fledged startup or anything like that, you'd likely want to clean up the design and UI of all of this. That's okay, though—we're interested in quick results! Besides, after we launch and get our 10 million dollar valuation, then we can go back and hire a designer to make everything look beautiful!

The few assumptions that we're going to be making throughout this process are as follows:

• Users will have three statuses: active, idle, and leaving
• Users will be displayed on the user list if they're active or idle
• If users leave, we'll display a notification in the chat window that they left
• If users join, we'll display a notification in the chat window that they joined
• If users go idle, we'll display a notification in the chat window that they are now idle
• Status change messages will not be recorded by the server
• If a user is idle, their username will be grayed out
• Status change messages will be grayed out

The end result will look something like the following:

Nothing too complicated here. We'll need to refactor our chat window a little bit to use a few different CSS classes and fix up a few little implementation details with the chat window. Open up lib/vocial_web/templates/shared/_chat.html.eex and we'll start stepping through the changes line by line:

<div class="chat-window container well" id="enable-chat-channel" data-chatroom="<%= @chatroom %>">

We don't need the original spacer at the top (since that is a problem that we can and should solve via CSS), and the first div on the page will remain otherwise unchanged. We will need to change our username input, however, since we need it to store its own class. We're also going to use Bootstrap's grid to space things out a little more. One of the things we're going to need here is a button that tells our application when it is safe to attempt to connect to the socket and display the chat window:

  <div class="row">
    <div class="col-sm-2">
      <h4>Name:</h4>
    </div>
    <div class="col-sm-8 name-input">
      <input type="text" class="form-control author-input" placeholder="Name" />
    </div>
    <div class="col-sm-2">
      <button class="btn btn-primary join-chat">Join</button>
    </div>
  </div>

Next, we need to wrap the chat display in a row, since we're going to offset it a little bit to display our list of users. In addition, we're going to give it a class to denote that it's part of the main chat user interface. Finally, we're going to add a special utility class that we'll expand on a little bit later called hidden. Essentially, we want anything that is marked as hidden to—you guessed it—be hidden by default! Let's start off by entering the first part of our UI:

<div class="row chat-ui hidden">

Now it's time to write up the mockup for our user list. This is actually a pretty straightforward thing that we're building, so there's not a ton of UI work that we need to do for all of this. It is just going to be another unstyled list. We're going to include an example of an idle user as well, so that we can get a feel for what things might look like:

<div class="col-sm-2 user-list">
  <strong>Users</strong>
  <ul class="username-list list-unstyled">
    <li>User 1</li>
    <li>User 2</li>
    <li>User 3</li>
    <li class="idle">User 4</li>
    <li>Usernametha...</li>
  </ul>
</div>

Since we've created our list of users and given it a size of two columns, we'll need to adjust our chat display to only be 10 columns instead of the full 12. We'll also want to include a couple of examples of users either leaving or changing status, so we'll just include a few mock status messages at the end of our message list for now:

<div class="col-md-10 chat-display">
  <strong>Messages</strong>
  <ul class="list-unstyled chat-messages">
    <%= for message <- @messages do %>
      <li><span class="author">&lt;<%= message.author %>&gt;</span> <span class="message"><%= message.message %></span>
    <% end %>
    <li class="status">User 2 has left...</li>
    <li class="status">User 3 is now away...</li>
  </ul>
</div>

Of course, we'll need to close out the row div that we opened up:

</div>

Finally, we have the code for our chat input and the closing of our wrapper chat-window div:

  <div class="row chat-ui hidden">
    <div class="col-md-10">
      <input type="text" class="form-control chat-input"/>
    </div>
    <div class="col-md-2">
      <button class="btn btn-primary chat-send">Send</button>
    </div>
  </div>
</div>

We'll also need to add some CSS to style our chat window appropriately. Open up assets/css/app.css; the contents should currently be as follows:

/* This file is for your main application css. */
span.help-block {
  color: #f00;
}
.user-list {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 500px;
}
.chat-window {
  min-height: 200px;
  margin-top: 20px;
}
.chat-display {
  overflow-y: scroll;
  max-height: 500px;
}
.user-list .idle {
  color: #888;
}
.chat-display .author {
  color: #f00;
}
.name-input {
  margin-bottom: 10px;
}
.chat-display .status {
  color: #888;
  font-style: italic;
}
.hidden {
  display: none !important;
}

This should give us all of the baseline stylings that we need to make this at least somewhat presentable. It's ultimately okay if it's not the most amazing thing in the world in terms of its aesthetics. That's the easiest thing to fix up later. When we open up our page, before doing anything else, we should see a screen that looks similar to the following screenshot. Note the lack of message and user list display; we'll work on what we need to do to display those later!

Let's move on to actually coding this thing!