IRC output gets queued until RPL_WELCOME, added tcp timeouts and error handling, store selected tab in localStorage, more design work, upgraded to lodash 3.0.0

client/src/js/components/ChatTitle.jsx

@@ -20,18 +20,15 @@ var ChatTitle = React.createClass({
     render: function() {
         var tab = this.state.selectedTab;
         var title;
+        var topic;
+        var usercount;
 
-        if (tab.channel) {
+        if (tab.channel && this.state.channels[tab.server]) {
             var channel = this.state.channels[tab.server][tab.channel];
             if (channel) {
                 title = tab.channel
-                title += ' [';
-                title += channel.users.length;
-                title += ']';
-
-                if (channel.topic) {
-                    title += ': ' + channel.topic;
-                }
+                usercount = channel.users.length;
+                topic = channel.topic || '';
             }
         } else {
             title = tab.server;
@@ -39,7 +36,11 @@ var ChatTitle = React.createClass({
 
         return (
             <div className="chat-title-bar">
-                <span className="chat-title" title={title}>{title}</span>
+                <div>
+                    <span className="chat-title">{title}</span>
+                    <span className="chat-topic" title={topic}>{topic}</span>
+                </div>
+                <span className="chat-usercount">{usercount}</span>
             </div>
         );
     }

client/src/js/components/MessageBox.jsx

@@ -2,6 +2,7 @@ var React = require('react');
 var Reflux = require('reflux');
 var _ = require('lodash');
 
+var util = require('../util');
 var messageStore = require('../stores/message');
 var selectedTabStore = require('../stores/selectedTab');
 
@@ -38,12 +39,20 @@ var MessageBox = React.createClass({
 		if (this.state.messages[tab.server] && dest) {
 			messages = _.map(this.state.messages[tab.server][dest], function(message) {
 				var messageClass = 'message';
+
 				switch (message.type) {
 					case 'info':
 						messageClass += ' message-info';
 						break;
 				}
-				return <p className={messageClass}>{message.from ? message.from + ': ' : null}{message.message}</p>;
+
+				return (
+					<p className={messageClass}>
+						<span className="message-time">{util.timestamp(message.time)}</span>
+						{ message.from ? <span className="message-sender">{message.from}</span> : null }
+						{message.message}
+					</p>
+				);
 			});
 		}
 		

client/src/js/components/TabList.jsx

@@ -21,16 +21,41 @@ var TabList = React.createClass({
 
 	render: function() {
 		var self = this;
+		var tabClass;
+		var selected = this.state.selectedTab;
+
 		var tabs = _.map(this.state.channels, function(server, address) {
-			var channels = _.map(server, function(channel, name) {
-				return <p onClick={tabActions.select.bind(null, address, name)}>{name}</p>;
+			var channels = _.map(server, function(channel, name) {				
+				if (address === selected.server &&
+					name === selected.channel) {
+					tabClass = 'selected';
+				} else {
+					tabClass = '';
+				}
+
+				return <p className={tabClass} onClick={tabActions.select.bind(null, address, name)}>{name}</p>;
 			});
-			channels.unshift(<p onClick={tabActions.select.bind(null, address, null)}>{address}</p>);
+
+			if (address === selected.server &&
+				selected.channel === null) {
+				tabClass = 'tab-server selected';
+			} else {
+				tabClass = 'tab-server';
+			}
+
+			channels.unshift(<p className={tabClass} onClick={tabActions.select.bind(null, address, null)}>{address}</p>);
+
 			return channels;
 		});
 
 		return (
-			<div className="tablist">{tabs}</div>
+			<div className="tablist">
+				<button className="button-connect">Add Network</button>
+				{tabs}
+				<div className="side-buttons">
+					<button>Settings</button>
+				</div>
+			</div>
 		);
 	}
 });

client/src/js/components/UserList.jsx

@@ -22,7 +22,7 @@ var UserList = React.createClass({
 		var users = null;
 		var tab = this.state.selectedTab;
 
-		if (tab.channel) {
+		if (tab.channel && this.state.channels[tab.server]) {
 			var channel = this.state.channels[tab.server][tab.channel];
 			if (channel) {
 				users = _.map(channel.users, function(user) {