Added title bar and basic message and command input

client/src/js/components/App.jsx

@@ -1,15 +1,14 @@
 var React = require('react');
+
 var TabList = require('./TabList.jsx');
-var MessageBox = require('./MessageBox.jsx');
-var UserList = require('./UserList.jsx');
+var Chat = require('./Chat.jsx');
 
 var App = React.createClass({
 	render: function() {
 		return (
 			<div>
 				<TabList />
-				<MessageBox />
-				<UserList />
+				<Chat />
 			</div>
 		);
 	}

client/src/js/components/Chat.jsx

@@ -0,0 +1,21 @@
+var React = require('react');
+
+var ChatTitle = require('./ChatTitle.jsx');
+var MessageBox = require('./MessageBox.jsx');
+var MessageInput = require('./MessageInput.jsx');
+var UserList = require('./UserList.jsx');
+
+var Chat = React.createClass({
+    render: function() {
+        return (
+            <div>
+                <ChatTitle />
+                <MessageBox />
+                <MessageInput />
+                <UserList />
+            </div>
+        )
+    }
+});
+
+module.exports = Chat;

client/src/js/components/ChatTitle.jsx

@@ -0,0 +1,48 @@
+var React = require('react');
+var Reflux = require('reflux');
+
+var channelStore = require('../stores/channel.js');
+var selectedTabStore = require('../stores/selectedTab.js');
+
+var ChatTitle = React.createClass({
+    mixins: [
+        Reflux.connect(channelStore, 'channels'),
+        Reflux.connect(selectedTabStore, 'selectedTab')
+    ],
+
+    getInitialState: function() {
+        return {
+            channels: channelStore.getState(),
+            selectedTab: selectedTabStore.getState()
+        };
+    },
+
+    render: function() {
+        var tab = this.state.selectedTab;
+        var title;
+
+        if (tab.channel) {
+            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;
+                }
+            }
+        } else {
+            title = tab.server;
+        }
+
+        return (
+            <div className="chat-title-bar">
+                <span className="chat-title" title={title}>{title}</span>
+            </div>
+        );
+    }
+});
+
+module.exports = ChatTitle;

client/src/js/components/MessageBox.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var Reflux = require('reflux');
 var _ = require('lodash');
+
 var messageStore = require('../stores/message.js');
 var selectedTabStore = require('../stores/selectedTab.js');
 
@@ -32,7 +33,13 @@ var MessageBox = React.createClass({
 	render: function() {
 		var tab = this.state.selectedTab.channel || this.state.selectedTab.server;
 		var messages = _.map(this.state.messages[tab], function(message) {
-			return <p>{message.from ? message.from + ': ' : null}{message.message}</p>;
+			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 (

client/src/js/components/MessageInput.jsx

@@ -0,0 +1,65 @@
+var React = require('react');
+var Reflux = require('reflux');
+
+var selectedTabStore = require('../stores/selectedTab.js');
+var messageActions = require('../actions/message.js');
+var channelActions = require('../actions/channel.js');
+
+function dispatchCommand(cmd, channel, server) {
+	var params = cmd.slice(1).split(' ');
+
+	switch (params[0].toLowerCase()) {
+		case 'join':
+			if (params[1]) {
+				channelActions.join({
+					server: server,
+					channels: [params[1]]
+				});
+			}
+			break;
+
+		case 'part':
+			if (channel) {
+				channelActions.part({
+					server: server,
+					channels: [channel]
+				});
+			}
+			break;
+	}
+}
+
+var MessageInput = React.createClass({
+	mixins: [
+		Reflux.connect(selectedTabStore, 'selectedTab')
+	],
+
+	getInitialState: function() {
+		return {
+			selectedTab: selectedTabStore.getState()
+		};
+	},
+
+	handleKey: function(e) {
+		if (e.which === 13 && e.target.value) {
+			var tab = this.state.selectedTab;
+
+			if (e.target.value.charAt(0) === '/') {
+				dispatchCommand(e.target.value, tab.channel, tab.server);
+			} else {
+				messageActions.send(e.target.value, tab.channel, tab.server);
+			}
+			e.target.value = '';
+		}
+	},
+
+	render: function() {
+		return (
+			<div className="message-input-wrap">
+				<input className="message-input" type="text" onKeyDown={this.handleKey} />
+			</div>
+		);
+	}
+});
+
+module.exports = MessageInput;

client/src/js/components/UserList.jsx

@@ -1,6 +1,7 @@
 var React = require('react');
 var Reflux = require('reflux');
 var _ = require('lodash');
+
 var channelStore = require('../stores/channel.js');
 var selectedTabStore = require('../stores/selectedTab.js');
 
@@ -20,11 +21,14 @@ var UserList = React.createClass({
 	render: function() {
 		var users = null;
 		var tab = this.state.selectedTab;
-		
+
 		if (tab.channel) {
-			users = _.map(this.state.channels[tab.server][tab.channel].users, function(user) {
-				return <p>{user}</p>;
-			});
+			var channel = this.state.channels[tab.server][tab.channel];
+			if (channel) {
+				users = _.map(channel.users, function(user) {
+					return <p>{user}</p>;
+				});
+			}
 		}
 
 		return (