6 files changed, 67 insertions, 16 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 499bc097a..797db6eb5 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -17,6 +17,7 @@ import { isWindows } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
+import TodosWebview from '../../features/todos/components/TodosWebview';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -39,7 +40,8 @@ const messages = defineMessages({
 
 const styles = theme => ({
   appContent: {
-    width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
+    // width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
+    width: '100%',
     transition: 'transform 0.5s ease',
     transform() {
       return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
@@ -50,6 +52,7 @@ const styles = theme => ({
 @injectSheet(styles) @observer
 class AppLayout extends Component {
   static propTypes = {
+    authToken: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
     isFullScreen: PropTypes.bool.isRequired,
     sidebar: PropTypes.element.isRequired,
@@ -83,6 +86,7 @@ class AppLayout extends Component {
 
   render() {
     const {
+      authToken,
       classes,
       isFullScreen,
       workspacesDrawer,
@@ -173,6 +177,7 @@ class AppLayout extends Component {
                 {children}
               </div>
             </div>
+            <TodosWebview authToken={authToken} />
           </div>
         </div>
       </ErrorBoundary>
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index d290a6094..473280c54 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -12,6 +12,7 @@ import NewsStore from '../../stores/NewsStore';
 import SettingsStore from '../../stores/SettingsStore';
 import RequestStore from '../../stores/RequestStore';
 import GlobalErrorStore from '../../stores/GlobalErrorStore';
+import UserStore from '../../stores/UserStore';
 
 import { oneOrManyChildElements } from '../../prop-types';
 import AppLayout from '../../components/layout/AppLayout';
@@ -39,6 +40,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       settings,
       globalError,
       requests,
+      user,
     } = this.props.stores;
 
     const {
@@ -131,6 +133,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
     return (
       <ThemeProvider theme={ui.theme}>
         <AppLayout
+          authToken={user.authToken}
           isFullScreen={app.isFullScreen}
           isOnline={app.isOnline}
           showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
@@ -169,6 +172,7 @@ AppLayoutContainer.wrappedComponent.propTypes = {
     settings: PropTypes.instanceOf(SettingsStore).isRequired,
     requests: PropTypes.instanceOf(RequestStore).isRequired,
     globalError: PropTypes.instanceOf(GlobalErrorStore).isRequired,
+    user: PropTypes.instanceOf(UserStore).isRequired,
   }).isRequired,
   actions: PropTypes.shape({
     service: PropTypes.shape({
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
new file mode 100644
index 000000000..54208d7ad
--- /dev/null
+++ b/src/features/todos/components/TodosWebview.js
@@ -0,0 +1,41 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import Webview from 'react-electron-web-view';
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    height: '100%',
+    width: 300,
+    position: 'absolute',
+    top: 0,
+    right: 0,
+  },
+  webview: {
+    height: '100%',
+  },
+});
+
+@injectSheet(styles) @observer
+class TodosWebview extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    authToken: PropTypes.string.isRequired,
+  };
+
+  render() {
+    const { authToken, classes } = this.props;
+    return (
+      <div className={classes.root}>
+        <Webview
+          className={classes.webview}
+          src={`http://localhost:4000?authToken=${authToken}`}
+        />
+      </div>
+    );
+  }
+}
+
+export default TodosWebview;
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index d517b456b..1c7f5a7dd 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -669,39 +669,39 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 26
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 34
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 30
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 38
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 34
+          "line": 35
         }
       }
     ],
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 190c5dff7..b71889155 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 31,
       "column": 24
     },
     "end": {
-      "line": 33,
+      "line": 34,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 35,
       "column": 26
     },
     "end": {
-      "line": 37,
+      "line": 38,
       "column": 3
     }
   }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index e858b7904..c9cc94e15 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -33,10 +33,11 @@ html { overflow: hidden; }
 }
 
 .app {
-  display: flex;
-  flex-direction: column;
+  //display: flex;
 
-  .app__content { display: flex; }
+  .app__content {
+    display: flex;
+  }
 
   .app__service {
     position: relative;