ensl.org/app/views/messages/index.html.erb

<div id="messages" class="tabbed">
  <h1>Private Messages</h1>

  <ul id="messages-nav" class="tabs">
    <li>
      <a href="#inbox">
        Inbox (<%= cuser.new_messages.count %>/<%= cuser.received_messages.count %>)
      </a>
    </li>
    <li>
      <a href="#sent">
        Sent (<%= cuser.sent_messages.count %>)
      </a>
    </li>
  </ul>

  <div class="tabbed-contents">
    <div id="inbox" class="tab">
      <% if cuser.received_messages.any? %>
        <% cuser.received_messages.reverse_each do |message| %>
          <div class="message <% 'highlight' if cuser.new_messages.include?(message) %>">
            <%= render partial: 'message', locals: { message: message } %>
          </div>
        <% end %>
      <% else %>
        <p>You have no incoming messages.</p>
      <% end %>
    </div>
    <div id="sent" class="tab">
      <% if cuser.sent_messages.any? %>
        <% cuser.sent_messages.reverse_each do |message| %>
          <div class="message">
            <%= render partial: 'message', locals: { message: message } %>
          </div>
        <% end %>
      <% else %>
        <p>You have no sent messages.</p>
      <% end %>
    </div>
  </div>
</div>

<script type="text/javascript">
  new Yetii({
    id: 'messages'
  });
</script>