Show warning when disconnected

client/src/css/style.css

@@ -39,8 +39,33 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   margin: 0;
 }
 
-.tablist {
+.wrap {
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.app-info {
+  width: 100%;
+  font-family: Montserrat, sans-serif;
+  background: #F6546A;
+  color: #FFF;
+  height: 50px;
+  line-height: 50px;
+  text-align: center;
+}
+
+.app-container {
+  position: relative;
+  flex: 1;
+}
+
+.tablist {
+  position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
@@ -120,7 +145,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .side-buttons {
-  position: fixed;
+  position: absolute;
   bottom: 0;
   height: 50px;
   width: 200px;
@@ -147,7 +172,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .main-container {
-  position: fixed;
+  position: absolute;
   left: 200px;
   top: 0;
   bottom: 0;
@@ -166,7 +191,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 .connect .navicon, .settings .navicon {
-  position: absolute;
+  position: fixed;
   top: 0;
   left: 0;
 }
@@ -581,6 +606,10 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
 }
 
 @media (max-width: 600px) {
+  .app-info {
+    font-size: 12px;
+  }
+
   .tablist {
     width: 200px;
     transform: translateX(-200px);

client/src/js/components/App.js

@@ -14,14 +14,29 @@ export default class App extends Component {
   };
 
   render() {
-    const mainClass = this.props.showTabList ? 'main-container off-canvas' : 'main-container';
+    const { connected, tab, channels, servers,
+      privateChats, showTabList, select, push } = this.props;
+    const mainClass = showTabList ? 'main-container off-canvas' : 'main-container';
     return (
-      <div onClick={this.handleClick}>
+      <div className="wrap">
-        <TabList {...this.props} />
+        {!connected &&
-        <div className={mainClass}>
+          <div className="app-info">Connection lost, attempting to reconnect...</div>
-          <Route name="chat"><Chat /></Route>
+        }
-          <Route name="connect"><Connect /></Route>
+        <div className="app-container" onClick={this.handleClick}>
-          <Route name="settings"><Settings /></Route>
+          <TabList
+            tab={tab}
+            channels={channels}
+            servers={servers}
+            privateChats={privateChats}
+            showTabList={showTabList}
+            select={select}
+            push={push}
+          />
+          <div className={mainClass}>
+            <Route name="chat"><Chat /></Route>
+            <Route name="connect"><Connect /></Route>
+            <Route name="settings"><Settings /></Route>
+          </div>
         </div>
       </div>
     );

client/src/js/containers/App.js

@@ -10,6 +10,7 @@ import { push } from '../util/router';
 
 const mapState = createStructuredSelector({
   channels: getChannels,
+  connected: state => state.environment.get('connected'),
   privateChats: getPrivateChats,
   servers: getServers,
   showTabList: getShowTabList,

client/src/js/modules/socket.js

@@ -1,4 +1,5 @@
 import { socketAction } from '../state/actions';
+import { setEnvironment } from '../state/environment';
 import { broadcast, inform, print, addMessage, addMessages } from '../state/messages';
 import { select } from '../state/tab';
 import { normalizeChannel } from '../util';
@@ -102,6 +103,10 @@ export default function handleSocket({ socket, store: { dispatch, getState } })
     print(message) {
       const tab = getState().tab.selected;
       dispatch(addMessage(message, tab.server, tab.name));
+    },
+
+    _connected(connected) {
+      dispatch(setEnvironment('connected', connected));
     }
   };
 

client/src/js/state/environment.js

@@ -10,7 +10,11 @@ export const getWindowWidth = state => state.environment.get('windowWidth');
 
 export const getConnectDefaults = state => state.environment.get('connect_defaults');
 
-export default createReducer(Map(), {
+const initialState = Map({
+  connected: true
+});
+
+export default createReducer(initialState, {
   [actions.SET_ENVIRONMENT](state, action) {
     return state.set(action.key, action.value);
   },

client/src/js/util/Socket.js

@@ -26,12 +26,14 @@ export default class Socket {
     }, this.connectTimeout);
 
     this.ws.onopen = () => {
+      this.emit('_connected', true);
       clearTimeout(this.timeoutConnect);
       this.backoff.reset();
       this.setTimeoutPing();
     };
 
     this.ws.onclose = () => {
+      this.emit('_connected', false);
       clearTimeout(this.timeoutConnect);
       clearTimeout(this.timeoutPing);
       if (!this.closing) {