Add IRC connection status indicator

client/src/css/style.css

@@ -61,6 +61,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 
 .tablist p {
   padding: 3px 15px;
+  padding-right: 10px;
   cursor: pointer;
 }
 
@@ -77,11 +78,30 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   border-left: 5px solid #6BB758;
 }
 
+.tab-content {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .tab-server {
+  display: flex;
+  align-items: center;
   color: #999;
   margin-top: 10px !important;
 }
 
+.tab-server .tab-content {
+  flex: 1;
+  margin-right: 5px;
+}
+
+.tab-indicator {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
 .button-connect {
   width: 100%;
   height: 50px;

client/src/js/actions.js

@@ -26,6 +26,7 @@ export const SET_NICK = 'SET_NICK';
 export const SOCKET_CERT_FAIL = 'SOCKET_CERT_FAIL';
 export const SOCKET_CERT_SUCCESS = 'SOCKET_CERT_SUCCESS';
 export const SOCKET_CHANNELS = 'SOCKET_CHANNELS';
+export const SOCKET_CONNECTION_UPDATE = 'SOCKET_CONNECTION_UPDATE';
 export const SOCKET_JOIN = 'SOCKET_JOIN';
 export const SOCKET_MESSAGE = 'SOCKET_MESSAGE';
 export const SOCKET_MODE = 'SOCKET_MODE';

client/src/js/components/TabList.js

@@ -35,6 +35,7 @@ export default class TabList extends Component {
             selected.channel === null &&
             selected.user === null
           }
+          connected={servers.getIn([address, 'connected'])}
           onClick={this.handleTabClick}
         />
       );

client/src/js/components/TabListItem.js

@@ -20,8 +20,24 @@ export default class TabListItem extends Component {
       classes.push('selected');
     }
 
+    let indicator = null;
+    if (this.props.connected !== undefined) {
+      const style = {};
+
+      if (this.props.connected) {
+        style.background = '#6BB758';
+      } else {
+        style.background = '#F6546A';
+      }
+
+      indicator = <i className="tab-indicator" style={style}></i>;
+    }
+
     return (
-      <p className={classes.join(' ')} onClick={this.handleClick}>{content}</p>
+      <p className={classes.join(' ')} onClick={this.handleClick}>
+        <span className="tab-content">{content}</span>
+        {indicator}
+      </p>
     );
   }
 }

client/src/js/reducers/servers.js

@@ -1,10 +1,12 @@
 import { Map, Record } from 'immutable';
 import createReducer from '../util/createReducer';
 import * as actions from '../actions';
+import forEach from 'lodash/collection/forEach';
 
 const Server = Record({
   nick: null,
-  name: null
+  name: null,
+  connected: false
 });
 
 export default createReducer(Map(), {
@@ -42,5 +44,13 @@ export default createReducer(Map(), {
         s.set(server.address, new Server(server));
       });
     });
+  },
+
+  [actions.SOCKET_CONNECTION_UPDATE](state, action) {
+    return state.withMutations(s => forEach(action, (connected, server) => {
+      if (s.has(server)) {
+        s.setIn([server, 'connected'], connected);
+      }
+    }));
   }
 });