Add channel topic to ChatTitle, improve TabList layout

client/src/css/style.css

@@ -36,17 +36,28 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 	top: 0;
 	bottom: 0;
 	width: 200px;
-	overflow: auto;
 	background: #222;
 	color: #FFF;
 	font-family: Montserrat, sans-serif;
 }
 
+.tab-container {
+	position: absolute;
+	top: 50px;
+	bottom: 50px;
+	width: 100%;
+	overflow: auto;
+}
+
 .tablist p {
 	padding: 3px 15px;
 	cursor: pointer;
 }
 
+.tablist p:last-child {
+	margin-bottom: 10px;
+}
+
 .tablist p:hover {
 	background: #111;
 }
@@ -57,8 +68,8 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .tab-server {
-	color: #AAA;
-	margin-top: 15px !important;
+	color: #999;
+	margin-top: 10px !important;
 }
 
 .button-connect {
@@ -85,15 +96,22 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .side-buttons i {
+	display: inline-block;
 	color: #999;
-	margin: 25px;
-	line-height: 40px;
+	width: 50%;
+	line-height: 50px;
 	cursor: pointer;
 	font-size: 20px;
+	border-top: 1px solid #1D1D1D;
+}
+
+.side-buttons i:not(:first-child) {
+	border-left: 1px solid #1D1D1D;
 }
 
 .side-buttons i:hover {
-	color: #FFF;
+	color: #CCC;
+	background: #1D1D1D;
 }
 
 .connect {
@@ -205,8 +223,34 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .chat-title {
-	font-size: 28px;
+	font-size: 24px;
+	white-space: nowrap;
+}
+
+.chat-topic-wrap {
 	flex: 1;
+	position: relative;
+	margin: 0 15px;
+}
+
+.chat-topic {
+	position: absolute;
+	width: 100%;
+	bottom: -4px;
+	font-size: 16px;
+	color: #999;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.chat-topic a {
+	color: #999;
+	text-decoration: none;
+}
+
+.chat-topic a:hover {
+	text-decoration: underline;
 }
 
 .userlist-bar {

client/src/js/components/ChatTitle.jsx

@@ -1,5 +1,6 @@
 var React = require('react');
 var Reflux = require('reflux');
+var Autolinker = require('autolinker');
 
 var channelStore = require('../stores/channel');
 var selectedTabStore = require('../stores/selectedTab');
@@ -9,6 +10,14 @@ var searchActions = require('../actions/search');
 var privateChatActions = require('../actions/privateChat');
 var PureMixin = require('../mixins/pure');
 
+function buildState(tab) {
+    return {
+        selectedTab: tab,
+        usercount: channelStore.getUsers(tab.server, tab.channel).size,
+        topic: channelStore.getTopic(tab.server, tab.channel)
+    };
+}
+
 var ChatTitle = React.createClass({
     mixins: [
         PureMixin,
@@ -17,25 +26,15 @@ var ChatTitle = React.createClass({
     ],
 
     getInitialState() {
-        var tab = selectedTabStore.getState();
-
-        return {
-            usercount: channelStore.getUsers(tab.server, tab.channel).size,
-            selectedTab: tab
-        };
+        return buildState(selectedTabStore.getState());
     },
 
     channelsChanged() {
-        var tab = this.state.selectedTab;
-        
-        this.setState({ usercount: channelStore.getUsers(tab.server, tab.channel).size });
+        this.setState(buildState(this.state.selectedTab));
     },
 
     selectedTabChanged(tab) {
-        this.setState({
-            selectedTab: tab,
-            usercount: channelStore.getUsers(tab.server, tab.channel).size
-        });
+        this.setState(buildState(tab));
     },
 
     handleLeaveClick() {
@@ -52,6 +51,7 @@ var ChatTitle = React.createClass({
 
     render() {
         var tab = this.state.selectedTab;
+        var topic = Autolinker.link(this.state.topic || '', { keepOriginalText: true });
         var leaveTitle;
 
         if (!tab.channel) {
@@ -66,6 +66,9 @@ var ChatTitle = React.createClass({
             <div>
                 <div className="chat-title-bar">
                     <span className="chat-title">{tab.name}</span>
+                    <div className="chat-topic-wrap">
+                        <span className="chat-topic" dangerouslySetInnerHTML={{ __html: topic }}></span>
+                    </div>
                     <i className="icon-search" title="Search" onClick={searchActions.toggle}></i>
                     <i 
                         className="icon-logout button-leave" 

client/src/js/components/TabList.jsx

@@ -66,7 +66,7 @@ var TabList = React.createClass({
 		return (
 			<div className="tablist">
 				<button className="button-connect" onClick={this.handleConnectClick}>Connect</button>
-				{tabs}
+				<div className="tab-container">{tabs}</div>
 				<div className="side-buttons">
 					<i className="icon-user"></i>
 					<i className="icon-cog" onClick={this.handleSettingsClick}></i>