Make userlist responsive

client/src/js/containers/App.js

@@ -3,13 +3,14 @@ import { connect } from 'react-redux';
 import { pushPath } from 'redux-simple-router';
 import pure from 'pure-render-decorator';
 import TabList from '../components/TabList';
-import * as actions from '../actions/tab';
+import { select } from '../actions/tab';
+import { hideMenu } from '../actions/ui';
 
 @pure
 class App extends Component {
   render() {
-    const { showMenu, children } = this.props;
-    const mainClass = showMenu ? 'main-container off-canvas' : 'main-container';
+    const { showTabList, children } = this.props;
+    const mainClass = showTabList ? 'main-container off-canvas' : 'main-container';
     return (
       <div>
         <TabList {...this.props} />
@@ -26,9 +27,9 @@ function mapStateToProps(state) {
     servers: state.servers,
     channels: state.channels,
     privateChats: state.privateChats,
-    showMenu: state.showMenu,
+    showTabList: state.ui.showTabList,
     selected: state.tab.selected
   };
 }
 
-export default connect(mapStateToProps, { pushPath, ...actions })(App);
+export default connect(mapStateToProps, { pushPath, select, hideMenu })(App);

client/src/js/containers/Chat.js

@@ -15,9 +15,10 @@ import { searchMessages, toggleSearch } from '../actions/search';
 import { select, setSelectedChannel, setSelectedUser } from '../actions/tab';
 import { runCommand, sendMessage } from '../actions/message';
 import { disconnect } from '../actions/server';
-import * as inputHistoryActions from '../actions/inputHistory';
 import { setWrapWidth, setCharWidth } from '../actions/environment';
 import { stringWidth, wrapMessages } from '../util';
+import { toggleUserList } from '../actions/ui';
+import * as inputHistoryActions from '../actions/inputHistory';
 
 function updateSelected({ params, dispatch }) {
   if (params.channel) {
@@ -134,6 +135,7 @@ function mapStateToProps(state) {
     users: channel.get('users', List()),
     history: state.input.index === -1 ? null : state.input.history.get(state.input.index),
     messages: wrappedMessagesSelector(state),
+    showUserList: state.ui.showUserList,
     channel,
     tab
   };
@@ -145,6 +147,7 @@ function mapDispatchToProps(dispatch) {
     ...bindActionCreators({
       select,
       toggleSearch,
+      toggleUserList,
       searchMessages,
       runCommand,
       sendMessage,

client/src/js/containers/DevTools.js

@@ -4,7 +4,7 @@ import DockMonitor from 'redux-devtools-dock-monitor';
 import LogMonitor from 'redux-devtools-log-monitor';
 
 export default createDevTools(
-  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
     <LogMonitor theme="tomorrow" />
   </DockMonitor>
 );