1 files changed, 26 insertions, 5 deletions

diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index c612702b0..90575ebac 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -5,12 +5,14 @@ import injectSheet from 'react-jss';
 import Webview from 'react-electron-web-view';
 import { Icon } from '@meetfranz/ui';
 import { defineMessages, intlShape } from 'react-intl';
+import classnames from 'classnames';
 
 import { mdiCheckAll } from '@mdi/js';
 import SettingsStore from '../../../stores/SettingsStore';
 
 import Appear from '../../../components/ui/effects/Appear';
 import UpgradeButton from '../../../components/ui/UpgradeButton';
+import { TODOS_PARTITION_ID } from '..';
 
 import userAgent from '../../../helpers/userAgent-helpers';
 
@@ -49,7 +51,7 @@ const styles = theme => ({
     borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
     zIndex: 300,
 
-    transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
+    transform: ({ isVisible, width, isTodosServiceActive }) => `translateX(${isVisible || isTodosServiceActive ? 0 : width}px)`,
 
     '& webview': {
       height: '100%',
@@ -91,12 +93,19 @@ const styles = theme => ({
   premiumCTA: {
     marginTop: 40,
   },
+  isTodosServiceActive: {
+    width: 'calc(100% - 368px)',
+    position: 'absolute',
+    right: 0,
+    zIndex: 0,
+  },
 });
 
 @injectSheet(styles) @inject('stores') @observer
 class TodosWebview extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
+    isTodosServiceActive: PropTypes.bool.isRequired,
     isVisible: PropTypes.bool.isRequired,
     handleClientMessage: PropTypes.func.isRequired,
     setTodosWebview: PropTypes.func.isRequired,
@@ -194,12 +203,16 @@ class TodosWebview extends Component {
   startListeningToIpcMessages() {
     const { handleClientMessage } = this.props;
     if (!this.webview) return;
-    this.webview.addEventListener('ipc-message', e => handleClientMessage(e.args[0]));
+    this.webview.addEventListener('ipc-message', (e) => {
+      // console.log(e);
+      handleClientMessage({ channel: e.channel, message: e.args[0] });
+    });
   }
 
   render() {
     const {
       classes,
+      isTodosServiceActive,
       isVisible,
       isTodosIncludedInCurrentPlan,
       stores,
@@ -222,13 +235,21 @@ class TodosWebview extends Component {
       isTodoUrlValid = validURL(todoUrl);
     }
 
+    let displayedWidth = isVisible ? width : 0;
+    if (isTodosServiceActive) {
+      displayedWidth = null;
+    }
 
     return (
       <div
-        className={classes.root}
-        style={{ width: isVisible ? width : 0 }}
+        className={classnames({
+          [classes.root]: true,
+          [classes.isTodosServiceActive]: isTodosServiceActive,
+        })}
+        style={{ width: displayedWidth }}
         onMouseUp={() => this.stopResize()}
         ref={(node) => { this.node = node; }}
+        id="todos-panel"
       >
         <div
           className={classes.resizeHandler}
@@ -251,7 +272,7 @@ class TodosWebview extends Component {
               setTodosWebview(this.webview);
               this.startListeningToIpcMessages();
             }}
-            partition="persist:todos"
+            partition={TODOS_PARTITION_ID}
             preload="./features/todos/preload.js"
             ref={(webview) => { this.webview = webview ? webview.view : null; }}
             src={todoUrl}