15 files changed, 373 insertions, 28 deletions

diff --git a/package-lock.json b/package-lock.json
index b4d86c5e1..17513869a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "franz",
-  "version": "5.2.0-beta.3",
+  "version": "5.2.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/theme/src/themes/default/index.ts b/packages/theme/src/themes/default/index.ts
index 0f02fa3c8..4a49a4de0 100644
--- a/packages/theme/src/themes/default/index.ts
+++ b/packages/theme/src/themes/default/index.ts
@@ -207,3 +207,10 @@ export const announcements = {
     background: legacyStyles.themeGrayLightest,
   },
 };
+
+// Todos
+export const todos = {
+  dragIndicator: {
+    background: legacyStyles.themeGrayLight,
+  },
+};
diff --git a/src/actions/index.js b/src/actions/index.js
index fc525afeb..336344d76 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -13,6 +13,7 @@ import settings from './settings';
 import requests from './requests';
 import announcements from '../features/announcements/actions';
 import workspaces from '../features/workspaces/actions';
+import todos from '../features/todos/actions';
 
 const actions = Object.assign({}, {
   service,
@@ -31,4 +32,5 @@ export default Object.assign(
   defineActions(actions, PropTypes.checkPropTypes),
   { announcements },
   { workspaces },
+  { todos },
 );
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index ebb9849ea..dbf7d3c21 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 Todos from '../../features/todos/containers/TodosScreen';
 
 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)`;
@@ -57,7 +59,6 @@ class AppLayout extends Component {
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
-    // isOnline: PropTypes.bool.isRequired,
     showServicesUpdatedInfoBar: PropTypes.bool.isRequired,
     appUpdateIsDownloaded: PropTypes.bool.isRequired,
     nextAppReleaseVersion: PropTypes.string,
@@ -125,15 +126,6 @@ class AppLayout extends Component {
                   <span dangerouslySetInnerHTML={createMarkup(item.message)} />
                 </InfoBar>
               ))}
-              {/* {!isOnline && (
-                <InfoBar
-                  type="danger"
-                  sticky
-                >
-                  <span className="mdi mdi-flash" />
-                  {intl.formatMessage(globalMessages.notConnectedToTheInternet)}
-                </InfoBar>
-              )} */}
               {!areRequiredRequestsSuccessful && showRequiredRequestsError && (
                 <InfoBar
                   type="danger"
@@ -169,6 +161,7 @@ class AppLayout extends Component {
               {services}
               {children}
             </div>
+            <Todos />
           </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/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/actions.js b/src/features/todos/actions.js
new file mode 100644
index 000000000..673ce8531
--- /dev/null
+++ b/src/features/todos/actions.js
@@ -0,0 +1,10 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const todoActions = createActionsFromDefinitions({
+  resize: {
+    width: PropTypes.number.isRequired,
+  },
+}, PropTypes.checkPropTypes);
+
+export default todoActions;
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
new file mode 100644
index 000000000..1d99b9388
--- /dev/null
+++ b/src/features/todos/components/TodosWebview.js
@@ -0,0 +1,149 @@
+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,
+    position: 'relative',
+  },
+  webview: {
+    height: '100%',
+  },
+  resizeHandler: {
+    position: 'absolute',
+    left: 0,
+    marginLeft: -5,
+    width: 10,
+    zIndex: 400,
+    cursor: 'col-resize',
+  },
+  dragIndicator: {
+    position: 'absolute',
+    left: 0,
+    width: 5,
+    zIndex: 400,
+    background: theme.todos.dragIndicator.background,
+  },
+});
+
+@injectSheet(styles) @observer
+class TodosWebview extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    authToken: PropTypes.string.isRequired,
+    resize: PropTypes.func.isRequired,
+    width: PropTypes.number.isRequired,
+    minWidth: PropTypes.number.isRequired,
+  };
+
+  state = {
+    isDragging: false,
+    width: 300,
+  }
+
+  componentWillMount() {
+    const { width } = this.props;
+
+    this.setState({
+      width,
+    });
+  }
+
+  componentDidMount() {
+    this.node.addEventListener('mousemove', this.resizePanel.bind(this));
+    this.node.addEventListener('mouseup', this.stopResize.bind(this));
+    this.node.addEventListener('mouseleave', this.stopResize.bind(this));
+  }
+
+  startResize = (event) => {
+    this.setState({
+      isDragging: true,
+      initialPos: event.clientX,
+      delta: 0,
+    });
+  }
+
+  resizePanel(e) {
+    const { minWidth } = this.props;
+
+    const {
+      isDragging,
+      initialPos,
+    } = this.state;
+
+    if (isDragging && Math.abs(e.clientX - window.innerWidth) > minWidth) {
+      const delta = e.clientX - initialPos;
+
+      this.setState({
+        delta,
+      });
+    }
+  }
+
+  stopResize() {
+    const {
+      resize,
+      minWidth,
+    } = this.props;
+
+    const {
+      isDragging,
+      delta,
+      width,
+    } = this.state;
+
+    if (isDragging) {
+      let newWidth = width + (delta < 0 ? Math.abs(delta) : -Math.abs(delta));
+
+      if (newWidth < minWidth) {
+        newWidth = minWidth;
+      }
+
+      this.setState({
+        isDragging: false,
+        delta: 0,
+        width: newWidth,
+      });
+
+      resize(newWidth);
+    }
+  }
+
+  render() {
+    const { authToken, classes } = this.props;
+    const { width, delta, isDragging } = this.state;
+
+    return (
+      <>
+        <div
+          className={classes.root}
+          style={{ width }}
+          onMouseUp={() => this.stopResize()}
+          ref={(node) => { this.node = node; }}
+        >
+          <div
+            className={classes.resizeHandler}
+            style={Object.assign({ left: delta }, isDragging ? { width: 600, marginLeft: -200 } : {})} // This hack is required as resizing with webviews beneath behaves quite bad
+            onMouseDown={e => this.startResize(e)}
+          />
+          {isDragging && (
+            <div
+              className={classes.dragIndicator}
+              style={{ left: delta }} // This hack is required as resizing with webviews beneath behaves quite bad
+            />
+          )}
+          <Webview
+            className={classes.webview}
+            src={`${environment.TODOS_FRONTEND}?authToken=${authToken}`}
+          />
+        </div>
+      </>
+    );
+  }
+}
+
+export default TodosWebview;
diff --git a/src/features/todos/containers/TodosScreen.js b/src/features/todos/containers/TodosScreen.js
new file mode 100644
index 000000000..0759c22db
--- /dev/null
+++ b/src/features/todos/containers/TodosScreen.js
@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import TodosWebview from '../components/TodosWebview';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import UserStore from '../../../stores/UserStore';
+import TodoStore from '../store';
+import { TODOS_MIN_WIDTH } from '..';
+
+@inject('stores', 'actions') @observer
+class TodosScreen extends Component {
+  static propTypes = {
+    stores: PropTypes.shape({
+      user: PropTypes.instanceOf(UserStore).isRequired,
+      todos: PropTypes.instanceOf(TodoStore).isRequired,
+    }).isRequired,
+    actions: PropTypes.shape({
+      todos: PropTypes.shape({
+        resize: PropTypes.func.isRequired,
+      }),
+    }).isRequired,
+  };
+
+  render() {
+    const { stores, actions } = this.props;
+
+    if (!stores.todos || !stores.todos.isFeatureActive) {
+      return null;
+    }
+
+    return (
+      <ErrorBoundary>
+        <TodosWebview
+          authToken={stores.user.authToken}
+          width={stores.todos.width}
+          minWidth={TODOS_MIN_WIDTH}
+          resize={width => actions.todos.resize({ width })}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default TodosScreen;
diff --git a/src/features/todos/index.js b/src/features/todos/index.js
new file mode 100644
index 000000000..0dfd35c78
--- /dev/null
+++ b/src/features/todos/index.js
@@ -0,0 +1,33 @@
+import { reaction } from 'mobx';
+import TodoStore from './store';
+
+const debug = require('debug')('Franz:feature:todos');
+
+export const GA_CATEGORY_TODOS = 'Todos';
+
+export const DEFAULT_TODOS_WIDTH = 300;
+export const TODOS_MIN_WIDTH = 200;
+
+export const todoStore = new TodoStore();
+
+export default function initTodos(stores, actions) {
+  stores.todos = todoStore;
+  const { features } = stores;
+
+  // Toggle todos feature
+  reaction(
+    () => features.features.isTodosEnabled,
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `todos` feature');
+        todoStore.start(stores, actions);
+      } else if (todoStore.isFeatureActive) {
+        debug('Disabling `todos` feature');
+        todoStore.stop();
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
new file mode 100644
index 000000000..e7e13b37f
--- /dev/null
+++ b/src/features/todos/store.js
@@ -0,0 +1,86 @@
+import {
+  computed,
+  action,
+  observable,
+} from 'mobx';
+import localStorage from 'mobx-localstorage';
+
+import { todoActions } from './actions';
+import { FeatureStore } from '../utils/FeatureStore';
+import { createReactions } from '../../stores/lib/Reaction';
+import { createActionBindings } from '../utils/ActionBinding';
+import { DEFAULT_TODOS_WIDTH, TODOS_MIN_WIDTH } from '.';
+
+const debug = require('debug')('Franz:feature:todos:store');
+
+export default class TodoStore extends FeatureStore {
+  @observable isFeatureEnabled = false;
+
+  @observable isFeatureActive = false;
+
+  @computed get width() {
+    const width = this.settings.width || DEFAULT_TODOS_WIDTH;
+
+    return width < TODOS_MIN_WIDTH ? TODOS_MIN_WIDTH : width;
+  }
+
+  @computed get settings() {
+    return localStorage.getItem('todos') || {};
+  }
+
+  // ========== PUBLIC API ========= //
+
+  @action start(stores, actions) {
+    debug('TodoStore::start');
+    this.stores = stores;
+    this.actions = actions;
+
+    // ACTIONS
+
+    this._registerActions(createActionBindings([
+      [todoActions.resize, this._resize],
+    ]));
+
+    // REACTIONS
+
+    this._allReactions = createReactions([
+      this._setFeatureEnabledReaction,
+    ]);
+
+    this._registerReactions(this._allReactions);
+
+    this.isFeatureActive = true;
+  }
+
+  @action stop() {
+    super.stop();
+    debug('TodoStore::stop');
+    this.reset();
+    this.isFeatureActive = false;
+  }
+
+  // ========== PRIVATE METHODS ========= //
+
+  _updateSettings = (changes) => {
+    localStorage.setItem('todos', {
+      ...this.settings,
+      ...changes,
+    });
+  };
+
+  // Actions
+
+  @action _resize = ({ width }) => {
+    this._updateSettings({
+      width,
+    });
+  };
+
+  // Reactions
+
+  _setFeatureEnabledReaction = () => {
+    const { isTodosEnabled } = this.stores.features.features;
+
+    this.isFeatureEnabled = isTodosEnabled;
+  };
+}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index eca3062c2..015987b8a 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/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index e7832088b..35a050c67 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -16,6 +16,7 @@ import workspaces from '../features/workspaces';
 import shareFranz from '../features/shareFranz';
 import announcements from '../features/announcements';
 import settingsWS from '../features/settingsWS';
+import todos from '../features/todos';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -75,5 +76,6 @@ export default class FeaturesStore extends Store {
     shareFranz(this.stores, this.actions);
     announcements(this.stores, this.actions);
     settingsWS(this.stores, this.actions);
+    todos(this.stores, this.actions);
   }
 }
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 9f226b61c..10027da60 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -33,13 +33,19 @@ html { overflow: hidden; }
 }
 
 .app {
-  display: flex;
-  flex-direction: column;
+  //display: flex;
 
-  .app__content { display: flex; }
+  .app__content {
+    display: flex;
+    width: calc(100% + 300px);
+  }
+
+  .app__main-content {
+    display: flex;
+    width: 100%;
+  }
 
   .app__service {
-    // position: relative;
     display: flex;
     flex: 1;
     flex-direction: column;