Show current nick in MessageInput

client/src/css/style.css

@@ -443,13 +443,27 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   right: 0;
   height: 50px;
   z-index: 1;
+  display: flex;
+  border-top: 1px solid #DDD;
+  background: #FFF;
+}
+
+.message-input-nick {
+  margin: 10px;
+  line-height: 30px;
+  height: 30px;
+  padding: 0 10px;
+  background: #6BB758;
+  color: #FFF;
+  font-family: Montserrat, sans-serif;
+  margin-right: 0;
 }
 
 .message-input {
+  flex: 1;
   width: 100%;
   height: 100%;
-  padding: 15px;
-  border-top: 1px solid #DDD;
+  padding: 0 15px;
 }
 
 .userlist {

client/src/js/components/MessageInput.js

@@ -37,8 +37,10 @@ export default class MessageInput extends PureComponent {
   };
 
   render() {
+    const { nick } = this.props;
     return (
       <div className="message-input-wrap">
+        <span className="message-input-nick">{nick}</span>
         <input
           className="message-input"
           type="text"

client/src/js/containers/Chat.js

@@ -18,6 +18,7 @@ import { toggleUserList } from '../actions/ui';
 import * as inputHistoryActions from '../actions/inputHistory';
 import { getSelectedTab } from '../reducers/tab';
 import { getSelectedMessages } from '../reducers/messages';
+import { getCurrentNick } from '../reducers/servers';
 
 class Chat extends PureComponent {
   handleSearch = phrase => {
@@ -38,7 +39,7 @@ class Chat extends PureComponent {
 
   render() {
     const { title, tab, channel, search, history,
-      messages, hasMoreMessages, users, showUserList, inputActions } = this.props;
+      messages, hasMoreMessages, users, showUserList, nick, inputActions } = this.props;
 
     let chatClass;
     if (tab.isChannel()) {
@@ -76,6 +77,7 @@ class Chat extends PureComponent {
           tab={tab}
           channel={channel}
           history={history}
+          nick={nick}
           runCommand={this.props.runCommand}
           sendMessage={this.props.sendMessage}
           {...inputActions}
@@ -138,7 +140,8 @@ const mapStateToProps = createStructuredSelector({
   users: usersSelector,
   showUserList: showUserListSelector,
   search: searchSelector,
-  history: historySelector
+  history: historySelector,
+  nick: getCurrentNick
 });
 
 function mapDispatchToProps(dispatch) {

client/src/js/reducers/servers.js

@@ -1,6 +1,8 @@
 import { Map, Record } from 'immutable';
+import { createSelector } from 'reselect';
 import createReducer from '../util/createReducer';
 import * as actions from '../actions';
+import { getSelectedTab } from './tab';
 
 const Server = Record({
   nick: null,
@@ -8,6 +10,14 @@ const Server = Record({
   connected: false
 });
 
+export const getServers = state => state.servers;
+
+export const getCurrentNick = createSelector(
+  getServers,
+  getSelectedTab,
+  (servers, tab) => servers.getIn([tab.server, 'nick'], '')
+);
+
 export default createReducer(Map(), {
   [actions.CONNECT](state, action) {
     const { host, nick, options } = action;