8 files changed, 80 insertions, 16 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index ebb9849ea..7f2f707fb 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,
@@ -82,6 +85,7 @@ class AppLayout extends Component {
 
   render() {
     const {
+      authToken,
       classes,
       isFullScreen,
       workspacesDrawer,
@@ -169,6 +173,7 @@ class AppLayout extends Component {
               {services}
               {children}
             </div>
+            <TodosWebview authToken={authToken} />
           </div>
         </div>
       </ErrorBoundary>
diff --git a/src/config.js b/src/config.js
index 5bc318545..6968f8500 100644
--- a/src/config.js
+++ b/src/config.js
@@ -24,6 +24,10 @@ export const LIVE_API_WEBSITE = 'https://meetfranz.com';
 
 export const STATS_API = 'https://stats.franzinfra.com';
 
+export const LOCAL_TODOS_FRONTEND_URL = 'http://localhost:4000';
+export const PRODUCTION_TODOS_FRONTEND_URL = 'https://franz-todos.netlify.com';
+export const DEVELOPMENT_TODOS_FRONTEND_URL = 'https://development--franz-todos.netlify.com';
+
 export const GA_ID = !isDevMode ? 'UA-74126766-10' : 'UA-74126766-12';
 
 export const DEFAULT_APP_SETTINGS = {
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index cf3da71e8..8a48f4924 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}
@@ -168,6 +171,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/environment.js b/src/environment.js
index ae7a67e4d..707449e09 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -10,6 +10,9 @@ import {
   LIVE_WS_API,
   LOCAL_WS_API,
   DEV_WS_API,
+  LOCAL_TODOS_FRONTEND_URL,
+  PRODUCTION_TODOS_FRONTEND_URL,
+  DEVELOPMENT_TODOS_FRONTEND_URL,
 } from './config';
 
 export const isDevMode = isDev;
@@ -31,21 +34,26 @@ export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
 let api;
 let wsApi;
 let web;
+let todos;
 if (!isDevMode || (isDevMode && useLiveAPI)) {
   api = LIVE_API;
   wsApi = LIVE_WS_API;
   web = LIVE_API_WEBSITE;
+  todos = PRODUCTION_TODOS_FRONTEND_URL;
 } else if (isDevMode && useLocalAPI) {
   api = LOCAL_API;
   wsApi = LOCAL_WS_API;
   web = LOCAL_API_WEBSITE;
+  todos = LOCAL_TODOS_FRONTEND_URL;
 } else {
   api = DEV_API;
   wsApi = DEV_WS_API;
   web = DEV_API_WEBSITE;
+  todos = DEVELOPMENT_TODOS_FRONTEND_URL;
 }
 
 export const API = api;
 export const API_VERSION = 'v1';
 export const WS_API = wsApi;
 export const WEBSITE = web;
+export const TODOS_FRONTEND = todos;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
new file mode 100644
index 000000000..7e97c7f71
--- /dev/null
+++ b/src/features/todos/components/TodosWebview.js
@@ -0,0 +1,42 @@
+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';
+import * as environment from '../../../environment';
+
+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={`${environment.TODOS_FRONTEND}?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 9f226b61c..739082445 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;