Merge branch 'release/5.4.0' into i18n

28 files changed, 711 insertions, 111 deletions

diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index ab1604a27..383f38b16 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -45,13 +45,13 @@ export default class LocalApi {
     const s = session.fromPartition(`persist:service-${serviceId}`);
 
     debug('LocalApi::clearCache resolves', serviceId);
-    return new Promise(resolve => s.clearCache(resolve));
+    return s.clearCache();
   }
 
   async clearAppCache() {
     const s = session.defaultSession;
 
     debug('LocalApi::clearCache clearAppCache');
-    return new Promise(resolve => s.clearCache(resolve));
+    return s.clearCache();
   }
 }
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index bac57d4dc..918298011 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -112,7 +112,7 @@ export default @observer class Sidebar extends Component {
               this.updateToolTip();
               gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'sidebar');
             }}
-            className="sidebar__button sidebar__button--workspaces"
+            className={`sidebar__button sidebar__button--todos  ${todosStore.isTodosPanelVisible ? 'is-active' : ''}`}
             data-tip={`${intl.formatMessage(todosToggleMessage)} (${ctrlKey}+T)`}
           >
             <i className="mdi mdi-check-all" />
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index f65f51346..e8df58a1e 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -12,6 +12,7 @@ import WebviewErrorHandler from './ErrorHandlers/WebviewErrorHandler';
 import ServiceDisabled from './ServiceDisabled';
 import ServiceRestricted from './ServiceRestricted';
 import ServiceWebview from './ServiceWebview';
+import WebControlsScreen from '../../../features/webControls/containers/WebControlsScreen';
 
 export default @observer class ServiceView extends Component {
   static propTypes = {
@@ -137,11 +138,16 @@ export default @observer class ServiceView extends Component {
                 type={service.restrictionType}
               />
             ) : (
-              <ServiceWebview
-                service={service}
-                setWebviewReference={setWebviewReference}
-                detachService={detachService}
-              />
+              <>
+                {service.recipe.id === 'franz-custom-website' && (
+                  <WebControlsScreen service={service} />
+                )}
+                <ServiceWebview
+                  service={service}
+                  setWebviewReference={setWebviewReference}
+                  detachService={detachService}
+                />
+              </>
             )}
           </>
         )}
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 7252c695f..b3198d36a 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -20,6 +20,13 @@ class ServiceWebview extends Component {
     detachService({ service });
   }
 
+  refocusWebview = () => {
+    const { webview } = this;
+    if (!webview) return;
+    webview.view.blur();
+    webview.view.focus();
+  };
+
   render() {
     const {
       service,
@@ -28,7 +35,10 @@ class ServiceWebview extends Component {
 
     return (
       <ElectronWebView
-        ref={(webview) => { this.webview = webview; }}
+        ref={(webview) => {
+          this.webview = webview;
+          webview.view.addEventListener('did-stop-loading', this.refocusWebview);
+        }}
         autosize
         src={service.url}
         preload="./webview/recipe.js"
@@ -41,6 +51,7 @@ class ServiceWebview extends Component {
         }}
         onUpdateTargetUrl={this.updateTargetUrl}
         useragent={service.userAgent}
+        disablewebsecurity={service.recipe.disablewebsecurity}
         allowpopups
       />
     );
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index 73c27bfb6..b6291666b 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -56,16 +56,24 @@ export default @observer @injectSheet(styles) class Services extends Component {
 
   state = {
     showConfetti: true,
-  }
+  };
+
+  _confettiTimeout = null;
 
   componentDidMount() {
-    window.setTimeout(() => {
+    this._confettiTimeout = window.setTimeout(() => {
       this.setState({
         showConfetti: false,
       });
     }, ms('8s'));
   }
 
+  componentWillUnmount() {
+    if (this._confettiTimeout) {
+      clearTimeout(this._confettiTimeout);
+    }
+  }
+
   render() {
     const {
       services,
diff --git a/src/components/ui/Modal/styles.js b/src/components/ui/Modal/styles.js
index 49b970c97..c2bebf9bb 100644
--- a/src/components/ui/Modal/styles.js
+++ b/src/components/ui/Modal/styles.js
@@ -13,7 +13,7 @@ export default theme => ({
     display: 'flex',
   },
   modal: {
-    background: '#FFF',
+    background: theme.colorModalBackground,
     maxWidth: '90%',
     height: 'auto',
     margin: 'auto auto',
diff --git a/src/features/spellchecker/index.js b/src/features/spellchecker/index.js
index a07f9f63a..fd8bc738a 100644
--- a/src/features/spellchecker/index.js
+++ b/src/features/spellchecker/index.js
@@ -16,7 +16,7 @@ export default function init(stores) {
 
     config.isIncludedInCurrentPlan = isSpellcheckerIncludedInCurrentPlan !== undefined ? isSpellcheckerIncludedInCurrentPlan : DEFAULT_FEATURES_CONFIG.isSpellcheckerIncludedInCurrentPlan;
 
-    if (!stores.user.data.isPremium && config.isIncludedInCurrentPlan && stores.settings.app.enableSpellchecking) {
+    if (!stores.user.data.isPremium && !config.isIncludedInCurrentPlan && stores.settings.app.enableSpellchecking) {
       debug('Override settings.spellcheckerEnabled flag to false');
 
       Object.assign(stores.settings.app, {
diff --git a/src/features/todos/components/TodosWebview.js b/src/features/todos/components/TodosWebview.js
index d052da6f2..f24c0b044 100644
--- a/src/features/todos/components/TodosWebview.js
+++ b/src/features/todos/components/TodosWebview.js
@@ -35,9 +35,6 @@ const styles = theme => ({
 
     transform: ({ isVisible, width }) => `translateX(${isVisible ? 0 : width}px)`,
 
-    '&:hover $closeTodosButton': {
-      opacity: 1,
-    },
     '& webview': {
       height: '100%',
     },
diff --git a/src/features/todos/store.js b/src/features/todos/store.js
index abf176604..4480b2545 100644
--- a/src/features/todos/store.js
+++ b/src/features/todos/store.js
@@ -162,6 +162,10 @@ export default class TodoStore extends FeatureStore {
         theme: isDarkThemeActive ? ThemeType.dark : ThemeType.default,
       },
     });
+
+    this.webview.addEventListener('new-window', ({ url }) => {
+      this.actions.app.openExternalUrl({ url });
+    });
   };
 
   _goToService = ({ url, serviceId }) => {
diff --git a/src/features/webControls/components/WebControls.js b/src/features/webControls/components/WebControls.js
new file mode 100644
index 000000000..a39fcfe0e
--- /dev/null
+++ b/src/features/webControls/components/WebControls.js
@@ -0,0 +1,239 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { Icon } from '@meetfranz/ui';
+import { defineMessages, intlShape } from 'react-intl';
+
+import {
+  mdiReload, mdiArrowRight, mdiArrowLeft, mdiHomeOutline, mdiEarth,
+} from '@mdi/js';
+
+const messages = defineMessages({
+  goHome: {
+    id: 'webControls.goHome',
+    defaultMessage: '!!!Home',
+  },
+  openInBrowser: {
+    id: 'webControls.openInBrowser',
+    defaultMessage: '!!!Open in Browser',
+  },
+  back: {
+    id: 'webControls.back',
+    defaultMessage: '!!!Back',
+  },
+  forward: {
+    id: 'webControls.forward',
+    defaultMessage: '!!!Forward',
+  },
+  reload: {
+    id: 'webControls.reload',
+    defaultMessage: '!!!Reload',
+  },
+});
+
+const styles = theme => ({
+  root: {
+    background: theme.colorBackground,
+    position: 'relative',
+    borderLeft: [1, 'solid', theme.todos.todosLayer.borderLeftColor],
+    zIndex: 300,
+    height: 50,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: [0, 10],
+
+    '& + div': {
+      height: 'calc(100% - 50px)',
+    },
+  },
+  button: {
+    width: 30,
+    height: 50,
+    transition: 'opacity 0.25s',
+
+    '&:hover': {
+      opacity: 0.8,
+    },
+
+    '&:disabled': {
+      opacity: 0.5,
+    },
+  },
+  icon: {
+    width: '20px !important',
+    height: 20,
+    marginTop: 5,
+  },
+  input: {
+    marginBottom: 0,
+    height: 'auto',
+    margin: [0, 10],
+    flex: 1,
+    border: 0,
+    padding: [4, 10],
+    borderRadius: theme.borderRadius,
+    background: theme.inputBackground,
+    color: theme.inputColor,
+  },
+  inputButton: {
+    color: theme.colorText,
+  },
+});
+
+@injectSheet(styles) @observer
+class WebControls extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    goHome: PropTypes.func.isRequired,
+    canGoBack: PropTypes.bool.isRequired,
+    goBack: PropTypes.func.isRequired,
+    canGoForward: PropTypes.bool.isRequired,
+    goForward: PropTypes.func.isRequired,
+    reload: PropTypes.func.isRequired,
+    openInBrowser: PropTypes.func.isRequired,
+    url: PropTypes.string.isRequired,
+    navigate: PropTypes.func.isRequired,
+  }
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static getDerivedStateFromProps(props, state) {
+    const { url } = props;
+    const { editUrl } = state;
+
+    if (!editUrl) {
+      return {
+        inputUrl: url,
+        editUrl: state.editUrl,
+      };
+    }
+  }
+
+  inputRef = React.createRef();
+
+  state = {
+    inputUrl: '',
+    editUrl: false,
+  }
+
+  render() {
+    const {
+      classes,
+      goHome,
+      canGoBack,
+      goBack,
+      canGoForward,
+      goForward,
+      reload,
+      openInBrowser,
+      url,
+      navigate,
+    } = this.props;
+
+    const {
+      inputUrl,
+      editUrl,
+    } = this.state;
+
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.root}>
+        <button
+          onClick={goHome}
+          type="button"
+          className={classes.button}
+          data-tip={intl.formatMessage(messages.goHome)}
+        >
+          <Icon
+            icon={mdiHomeOutline}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={goBack}
+          type="button"
+          className={classes.button}
+          disabled={!canGoBack}
+          data-tip={intl.formatMessage(messages.back)}
+        >
+          <Icon
+            icon={mdiArrowLeft}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={goForward}
+          type="button"
+          className={classes.button}
+          disabled={!canGoForward}
+          data-tip={intl.formatMessage(messages.forward)}
+        >
+          <Icon
+            icon={mdiArrowRight}
+            className={classes.icon}
+          />
+        </button>
+        <button
+          onClick={reload}
+          type="button"
+          className={classes.button}
+          data-tip={intl.formatMessage(messages.reload)}
+        >
+          <Icon
+            icon={mdiReload}
+            className={classes.icon}
+          />
+        </button>
+        <input
+          value={editUrl ? inputUrl : url}
+          className={classes.input}
+          onChange={event => this.setState({
+            inputUrl: event.target.value,
+          })}
+          onFocus={(event) => {
+            event.target.select();
+            this.setState({
+              editUrl: true,
+            });
+          }}
+          onKeyDown={(event) => {
+            if (event.key === 'Enter') {
+              this.setState({
+                editUrl: false,
+              });
+              navigate(inputUrl);
+              this.inputRef.current.blur();
+            } else if (event.key === 'Escape') {
+              this.setState({
+                editUrl: false,
+                inputUrl: url,
+              });
+              event.target.blur();
+            }
+          }}
+          ref={this.inputRef}
+        />
+        <button
+          onClick={openInBrowser}
+          type="button"
+          className={classes.button}
+          data-tip={intl.formatMessage(messages.openInBrowser)}
+          data-place="left"
+        >
+          <Icon
+            icon={mdiEarth}
+            className={classes.icon}
+          />
+        </button>
+        {/* <ReactTooltip place="bottom" type="dark" effect="solid" /> */}
+      </div>
+    );
+  }
+}
+
+export default WebControls;
diff --git a/src/features/webControls/containers/WebControlsScreen.js b/src/features/webControls/containers/WebControlsScreen.js
new file mode 100644
index 000000000..cada01a6f
--- /dev/null
+++ b/src/features/webControls/containers/WebControlsScreen.js
@@ -0,0 +1,139 @@
+import React, { Component } from 'react';
+import { observer, inject } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import { autorun, observable } from 'mobx';
+import WebControls from '../components/WebControls';
+import ServicesStore from '../../../stores/ServicesStore';
+import Service from '../../../models/Service';
+
+const URL_EVENTS = [
+  'load-commit',
+  'will-navigate',
+  'did-navigate',
+  'did-navigate-in-page',
+];
+
+@inject('stores', 'actions') @observer
+class WebControlsScreen extends Component {
+  @observable url = '';
+
+  @observable canGoBack = false;
+
+  @observable canGoForward = false;
+
+  webview = null;
+
+  autorunDisposer = null;
+
+  componentDidMount() {
+    const { service } = this.props;
+
+    this.autorunDisposer = autorun(() => {
+      if (service.isAttached) {
+        this.webview = service.webview;
+
+        URL_EVENTS.forEach((event) => {
+          this.webview.addEventListener(event, (e) => {
+            if (!e.isMainFrame) return;
+
+            this.url = e.url;
+            this.canGoBack = this.webview.canGoBack();
+            this.canGoForward = this.webview.canGoForward();
+          });
+        });
+      }
+    });
+  }
+
+  componentWillUnmount() {
+    this.autorunDisposer();
+  }
+
+  goHome() {
+    const { reloadActive } = this.props.actions.service;
+
+    if (!this.webview) return;
+
+    reloadActive();
+  }
+
+  reload() {
+    if (!this.webview) return;
+
+    this.webview.reload();
+  }
+
+  goBack() {
+    if (!this.webview) return;
+
+    this.webview.goBack();
+  }
+
+  goForward() {
+    if (!this.webview) return;
+
+    this.webview.goForward();
+  }
+
+  navigate(newUrl) {
+    if (!this.webview) return;
+
+    let url = newUrl;
+
+    try {
+      url = new URL(url).toString();
+    } catch (err) {
+      // eslint-disable-next-line no-useless-escape
+      if (url.match(/^((?!-))(xn--)?[a-z0-9][a-z0-9-_]{0,61}[a-z0-9]{0,1}\.(xn--)?([a-z0-9\-]{1,61}|[a-z0-9-]{1,30}\.[a-z]{2,})$/)) {
+        url = `http://${url}`;
+      } else {
+        url = `https://www.google.com/search?query=${url}`;
+      }
+    }
+
+    this.webview.loadURL(url);
+    this.url = url;
+  }
+
+  openInBrowser() {
+    const { openExternalUrl } = this.props.actions.app;
+
+    if (!this.webview) return;
+
+    openExternalUrl({ url: this.url });
+  }
+
+  render() {
+    return (
+      <WebControls
+        goHome={() => this.goHome()}
+        reload={() => this.reload()}
+        openInBrowser={() => this.openInBrowser()}
+        canGoBack={this.canGoBack}
+        goBack={() => this.goBack()}
+        canGoForward={this.canGoForward}
+        goForward={() => this.goForward()}
+        navigate={url => this.navigate(url)}
+        url={this.url}
+      />
+    );
+  }
+}
+
+export default WebControlsScreen;
+
+WebControlsScreen.wrappedComponent.propTypes = {
+  service: PropTypes.instanceOf(Service).isRequired,
+  stores: PropTypes.shape({
+    services: PropTypes.instanceOf(ServicesStore).isRequired,
+  }).isRequired,
+  actions: PropTypes.shape({
+    app: PropTypes.shape({
+      openExternalUrl: PropTypes.func.isRequired,
+    }).isRequired,
+    service: PropTypes.shape({
+      reloadActive: PropTypes.func.isRequired,
+    }).isRequired,
+  }).isRequired,
+};
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
index e7bc0b157..ee6f8416c 100644
--- a/src/features/workspaces/components/WorkspaceDrawer.js
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -204,8 +204,9 @@ class WorkspaceDrawer extends Component {
               }}
               services={getServicesForWorkspace(null)}
               isActive={actualWorkspace == null}
+              shortcutIndex={0}
             />
-            {workspaces.map(workspace => (
+            {workspaces.map((workspace, index) => (
               <WorkspaceDrawerItem
                 key={workspace.id}
                 name={workspace.name}
@@ -218,6 +219,7 @@ class WorkspaceDrawer extends Component {
                 }}
                 onContextMenuEditClick={() => workspaceActions.edit({ workspace })}
                 services={getServicesForWorkspace(workspace)}
+                shortcutIndex={index + 1}
               />
             ))}
             <div
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
index 59a2144d3..18f424d8a 100644
--- a/src/features/workspaces/components/WorkspaceDrawerItem.js
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -5,6 +5,7 @@ import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
 import classnames from 'classnames';
 import { defineMessages, intlShape } from 'react-intl';
+import { ctrlKey } from '../../../environment';
 
 const { Menu } = remote;
 
@@ -69,6 +70,7 @@ class WorkspaceDrawerItem extends Component {
     onClick: PropTypes.func.isRequired,
     services: PropTypes.arrayOf(PropTypes.string).isRequired,
     onContextMenuEditClick: PropTypes.func,
+    shortcutIndex: PropTypes.number.isRequired,
   };
 
   static defaultProps = {
@@ -87,6 +89,7 @@ class WorkspaceDrawerItem extends Component {
       onClick,
       onContextMenuEditClick,
       services,
+      shortcutIndex,
     } = this.props;
     const { intl } = this.context;
 
@@ -112,6 +115,7 @@ class WorkspaceDrawerItem extends Component {
         onContextMenu={() => (
           onContextMenuEditClick && contextMenu.popup(remote.getCurrentWindow())
         )}
+        data-tip={`${shortcutIndex <= 9 ? `(${ctrlKey}+Alt+${shortcutIndex})` : ''}`}
       >
         <span
           className={classnames([
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 0dfe2055a..e12b6b49b 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -4023,6 +4023,76 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Home",
+        "end": {
+          "column": 3,
+          "line": 16
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.goHome",
+        "start": {
+          "column": 10,
+          "line": 13
+        }
+      },
+      {
+        "defaultMessage": "!!!Open in Browser",
+        "end": {
+          "column": 3,
+          "line": 20
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.openInBrowser",
+        "start": {
+          "column": 17,
+          "line": 17
+        }
+      },
+      {
+        "defaultMessage": "!!!Back",
+        "end": {
+          "column": 3,
+          "line": 24
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.back",
+        "start": {
+          "column": 8,
+          "line": 21
+        }
+      },
+      {
+        "defaultMessage": "!!!Forward",
+        "end": {
+          "column": 3,
+          "line": 28
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.forward",
+        "start": {
+          "column": 11,
+          "line": 25
+        }
+      },
+      {
+        "defaultMessage": "!!!Reload",
+        "end": {
+          "column": 3,
+          "line": 32
+        },
+        "file": "src/features/webControls/components/WebControls.js",
+        "id": "webControls.reload",
+        "start": {
+          "column": 10,
+          "line": 29
+        }
+      }
+    ],
+    "path": "src/features/webControls/components/WebControls.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Create workspace",
         "end": {
           "column": 3,
@@ -4262,26 +4332,26 @@
         "defaultMessage": "!!!No services added yet",
         "end": {
           "column": 3,
-          "line": 15
+          "line": 16
         },
         "file": "src/features/workspaces/components/WorkspaceDrawerItem.js",
         "id": "workspaceDrawer.item.noServicesAddedYet",
         "start": {
           "column": 22,
-          "line": 12
+          "line": 13
         }
       },
       {
         "defaultMessage": "!!!edit",
         "end": {
           "column": 3,
-          "line": 19
+          "line": 20
         },
         "file": "src/features/workspaces/components/WorkspaceDrawerItem.js",
         "id": "workspaceDrawer.item.contextMenuEdit",
         "start": {
           "column": 19,
-          "line": 16
+          "line": 17
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index dcb9d92a2..c2c6a9863 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -370,6 +370,11 @@
   "validation.oneRequired": "At least one is required",
   "validation.required": "{field} is required",
   "validation.url": "{field} is not a valid URL",
+  "webControls.back": "Back",
+  "webControls.forward": "Forward",
+  "webControls.goHome": "Home",
+  "webControls.openInBrowser": "Open in Browser",
+  "webControls.reload": "Reload",
   "welcome.loginButton": "Login to your account",
   "welcome.signupButton": "Create a free account",
   "workspaceDrawer.addNewWorkspaceLabel": "Add new workspace",
diff --git a/src/i18n/messages/src/features/webControls/components/WebControls.json b/src/i18n/messages/src/features/webControls/components/WebControls.json
new file mode 100644
index 000000000..969437e98
--- /dev/null
+++ b/src/i18n/messages/src/features/webControls/components/WebControls.json
@@ -0,0 +1,67 @@
+[
+  {
+    "id": "webControls.goHome",
+    "defaultMessage": "!!!Home",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 13,
+      "column": 10
+    },
+    "end": {
+      "line": 16,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.openInBrowser",
+    "defaultMessage": "!!!Open in Browser",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 17,
+      "column": 17
+    },
+    "end": {
+      "line": 20,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.back",
+    "defaultMessage": "!!!Back",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 21,
+      "column": 8
+    },
+    "end": {
+      "line": 24,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.forward",
+    "defaultMessage": "!!!Forward",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 25,
+      "column": 11
+    },
+    "end": {
+      "line": 28,
+      "column": 3
+    }
+  },
+  {
+    "id": "webControls.reload",
+    "defaultMessage": "!!!Reload",
+    "file": "src/features/webControls/components/WebControls.js",
+    "start": {
+      "line": 29,
+      "column": 10
+    },
+    "end": {
+      "line": 32,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json
index 4ff190606..1b6664787 100644
--- a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawerItem.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!No services added yet",
     "file": "src/features/workspaces/components/WorkspaceDrawerItem.js",
     "start": {
-      "line": 12,
+      "line": 13,
       "column": 22
     },
     "end": {
-      "line": 15,
+      "line": 16,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!edit",
     "file": "src/features/workspaces/components/WorkspaceDrawerItem.js",
     "start": {
-      "line": 16,
+      "line": 17,
       "column": 19
     },
     "end": {
-      "line": 19,
+      "line": 20,
       "column": 3
     }
   }
diff --git a/src/index.js b/src/index.js
index d9d51fd5b..7de7a5e1c 100644
--- a/src/index.js
+++ b/src/index.js
@@ -331,22 +331,7 @@ app.on('login', (event, webContents, request, authInfo, callback) => {
   debug('browser login event', authInfo);
   event.preventDefault();
 
-  if (authInfo.isProxy && authInfo.scheme === 'basic') {
-    debug('Sending service echo ping');
-    webContents.send('get-service-id');
-
-    ipcMain.once('service-id', (e, id) => {
-      debug('Received service id', id);
-
-      const ps = proxySettings.get(id);
-      if (ps) {
-        debug('Sending proxy auth callback for service', id);
-        callback(ps.user, ps.password);
-      } else {
-        debug('No proxy auth config found for', id);
-      }
-    });
-  } else if (authInfo.scheme === 'basic') {
+  if (!authInfo.isProxy && authInfo.scheme === 'basic') {
     debug('basic auth handler', authInfo);
     basicAuthHandler(mainWindow, authInfo);
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 4aa2edaba..32bd1644b 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -302,6 +302,9 @@ const _templateFactory = intl => [
         label: intl.formatMessage(menuItems.pasteAndMatchStyle),
         accelerator: 'Cmd+Shift+V',
         selector: 'pasteAndMatchStyle:',
+        click() {
+          getActiveWebview().pasteAndMatchStyle();
+        },
       },
       {
         label: intl.formatMessage(menuItems.delete),
@@ -548,6 +551,11 @@ const _titleBarTemplateFactory = intl => [
     visible: workspaceStore.isFeatureEnabled,
   },
   {
+    label: intl.formatMessage(menuItems.todos),
+    submenu: [],
+    visible: todosStore.isFeatureEnabled,
+  },
+  {
     label: intl.formatMessage(menuItems.window),
     submenu: [
       {
@@ -862,6 +870,10 @@ export default class FranzMenu {
       checked: service.isActive,
       click: () => {
         this.actions.service.setActive({ serviceId: service.id });
+
+        if (isMac && i === 0) {
+          app.mainWindow.restore();
+        }
       },
     })));
 
@@ -943,12 +955,12 @@ export default class FranzMenu {
         gaEvent(GA_CATEGORY_TODOS, 'toggleDrawer', 'menu');
       },
       enabled: this.stores.user.isLoggedIn && isFeatureEnabledByUser,
-    }, {
-      type: 'separator',
     });
 
     if (!isFeatureEnabledByUser) {
       menu.push({
+        type: 'separator',
+      }, {
         label: intl.formatMessage(menuItems.enableTodos),
         click: () => {
           todoActions.toggleTodosFeatureVisibility();
diff --git a/src/lib/TouchBar.js b/src/lib/TouchBar.js
index 97c02d194..1de46d2a3 100644
--- a/src/lib/TouchBar.js
+++ b/src/lib/TouchBar.js
@@ -29,7 +29,7 @@ export default class FranzTouchBar {
       const { TouchBarButton, TouchBarSpacer } = TouchBar;
 
       const buttons = [];
-      this.stores.services.enabled.forEach(((service) => {
+      this.stores.services.allDisplayed.forEach(((service) => {
         buttons.push(new TouchBarButton({
           label: `${service.name}${service.unreadDirectMessageCount > 0
             ? ' 🔴' : ''} ${service.unreadDirectMessageCount === 0
@@ -42,7 +42,7 @@ export default class FranzTouchBar {
         }), new TouchBarSpacer({ size: 'small' }));
       }));
 
-      const touchBar = new TouchBar(buttons);
+      const touchBar = new TouchBar({ items: buttons });
       currentWindow.setTouchBar(touchBar);
     } else {
       currentWindow.setTouchBar(null);
diff --git a/src/models/Recipe.js b/src/models/Recipe.js
index b0d60e75e..00c0f699f 100644
--- a/src/models/Recipe.js
+++ b/src/models/Recipe.js
@@ -36,6 +36,8 @@ export default class Recipe {
 
   message = '';
 
+  disablewebsecurity = false;
+
   constructor(data) {
     if (!data) {
       throw Error('Recipe config not valid');
@@ -74,6 +76,8 @@ export default class Recipe {
     this.urlInputPrefix = data.config.urlInputPrefix || this.urlInputPrefix;
     this.urlInputSuffix = data.config.urlInputSuffix || this.urlInputSuffix;
 
+    this.disablewebsecurity = data.config.disablewebsecurity || this.disablewebsecurity;
+
     this.message = data.config.message || this.message;
   }
 
diff --git a/src/models/Service.js b/src/models/Service.js
index 848a84aa2..e45c39564 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -134,6 +134,9 @@ export default class Service {
       id: this.id,
       spellcheckerLanguage: this.spellcheckerLanguage,
       isDarkModeEnabled: this.isDarkModeEnabled,
+      team: this.team,
+      url: this.url,
+      hasCustomIcon: this.hasCustomIcon,
     };
   }
 
@@ -185,19 +188,24 @@ export default class Service {
     return userAgent;
   }
 
-  initializeWebViewEvents({ handleIPCMessage, openWindow }) {
+  initializeWebViewEvents({ handleIPCMessage, openWindow, stores }) {
+    const webContents = this.webview.getWebContents();
+
     this.webview.addEventListener('ipc-message', e => handleIPCMessage({
       serviceId: this.id,
       channel: e.channel,
       args: e.args,
     }));
 
-    this.webview.addEventListener('new-window', (event, url, frameName, options) => openWindow({
-      event,
-      url,
-      frameName,
-      options,
-    }));
+    this.webview.addEventListener('new-window', (event, url, frameName, options) => {
+      console.log('open window', event, url, frameName, options);
+      openWindow({
+        event,
+        url,
+        frameName,
+        options,
+      });
+    });
 
     this.webview.addEventListener('did-start-loading', (event) => {
       debug('Did start load', this.name, event);
@@ -231,6 +239,28 @@ export default class Service {
       debug('Service crashed', this.name);
       this.hasCrashed = true;
     });
+
+    webContents.on('login', (event, request, authInfo, callback) => {
+      // const authCallback = callback;
+      debug('browser login event', authInfo);
+      event.preventDefault();
+
+      if (authInfo.isProxy && authInfo.scheme === 'basic') {
+        debug('Sending service echo ping');
+        webContents.send('get-service-id');
+
+        debug('Received service id', this.id);
+
+        const ps = stores.settings.proxy[this.id];
+
+        if (ps) {
+          debug('Sending proxy auth callback for service', this.id);
+          callback(ps.user, ps.password);
+        } else {
+          debug('No proxy auth config found for', this.id);
+        }
+      }
+    });
   }
 
   initializeWebViewListener() {
diff --git a/src/stores/AppStore.js b/src/stores/AppStore.js
index 315235ba4..0398b7533 100644
--- a/src/stores/AppStore.js
+++ b/src/stores/AppStore.js
@@ -23,6 +23,7 @@ import { getLocale } from '../helpers/i18n-helpers';
 
 import { getServiceIdsFromPartitions, removeServicePartitionDirectory } from '../helpers/service-helpers.js';
 import { isValidExternalURL } from '../helpers/url-helpers';
+import { sleep } from '../helpers/async-helpers';
 
 const debug = require('debug')('Franz:AppStore');
 
@@ -327,6 +328,8 @@ export default class AppStore extends Store {
 
     await clearAppCache._promise;
 
+    await sleep(ms('1s'));
+
     this.getAppCacheSizeRequest.execute();
 
     this.isClearingAllCache = false;
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index d1fd2be3d..70b775503 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -345,6 +345,7 @@ export default class ServicesStore extends Store {
       service.initializeWebViewEvents({
         handleIPCMessage: this.actions.service.handleIPCMessage,
         openWindow: this.actions.service.openWindow,
+        stores: this.stores,
       });
       service.initializeWebViewListener();
     }
@@ -683,6 +684,8 @@ export default class ServicesStore extends Store {
     const serviceData = data;
     const recipe = this.stores.recipes.one(recipeId);
 
+    if (!recipe) return;
+
     if (recipe.hasTeamId && recipe.hasCustomUrl && data.team && data.customUrl) {
       delete serviceData.team;
     }
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index a456195bf..75bb38fe0 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -1,12 +1,11 @@
 import { ipcRenderer } from 'electron';
 import {
-  action, computed, observable, set,
+  action, computed, observable,
 } from 'mobx';
 import localStorage from 'mobx-localstorage';
 
 import Store from './lib/Store';
 import Request from './lib/Request';
-import CachedRequest from './lib/CachedRequest';
 import { getLocale } from '../helpers/i18n-helpers';
 
 import { DEFAULT_APP_SETTINGS, FILE_SYSTEM_SETTINGS_TYPES } from '../config';
@@ -15,12 +14,8 @@ import { SPELLCHECKER_LOCALES } from '../i18n/languages';
 const debug = require('debug')('Franz:SettingsStore');
 
 export default class SettingsStore extends Store {
-  @observable appSettingsRequest = new CachedRequest(this.api.local, 'getAppSettings');
-
   @observable updateAppSettingsRequest = new Request(this.api.local, 'updateAppSettings');
 
-  fileSystemSettingsRequests = [];
-
   fileSystemSettingsTypes = FILE_SYSTEM_SETTINGS_TYPES;
 
   @observable _fileSystemSettingsCache = {
@@ -35,14 +30,10 @@ export default class SettingsStore extends Store {
     this.actions.settings.update.listen(this._update.bind(this));
     this.actions.settings.remove.listen(this._remove.bind(this));
 
-    this.fileSystemSettingsTypes.forEach((type) => {
-      this.fileSystemSettingsRequests[type] = new CachedRequest(this.api.local, 'getAppSettings');
-    });
-
     ipcRenderer.on('appSettings', (event, resp) => {
       debug('Get appSettings resolves', resp.type, resp.data);
 
-      this._fileSystemSettingsCache[resp.type] = resp.data;
+      Object.assign(this._fileSystemSettingsCache[resp.type], resp.data);
     });
 
     this.fileSystemSettingsTypes.forEach((type) => {
@@ -51,8 +42,6 @@ export default class SettingsStore extends Store {
   }
 
   async setup() {
-    // We need to wait until `appSettingsRequest` has been executed once, otherwise we can't patch the result. If we don't wait we'd run into an issue with mobx not reacting to changes of previously not existing keys
-    await this.appSettingsRequest._promise;
     await this._migrate();
   }
 
@@ -61,21 +50,6 @@ export default class SettingsStore extends Store {
   }
 
   @computed get proxy() {
-    // // We need to provide the final data structure as mobx autoruns won't work
-    // const proxySettings = observable({});
-    // this.stores.services.all.forEach((service) => {
-    //   proxySettings[service.id] = {
-    //     isEnabled: false,
-    //     host: null,
-    //     user: null,
-    //     password: null,
-    //   };
-    // });
-
-    // debug('this._fileSystemSettingsCache.proxy', this._fileSystemSettingsCache.proxy, proxySettings);
-
-    // return Object.assign(proxySettings, this._fileSystemSettingsCache.proxy);
-
     return this._fileSystemSettingsCache.proxy || {};
   }
 
@@ -117,7 +91,7 @@ export default class SettingsStore extends Store {
         data,
       });
 
-      set(this._fileSystemSettingsCache[type], data);
+      Object.assign(this._fileSystemSettingsCache[type], data);
     }
   }
 
@@ -197,8 +171,4 @@ export default class SettingsStore extends Store {
       });
     }
   }
-
-  _getFileBasedSettings(type) {
-    ipcRenderer.send('getAppSettings', type);
-  }
 }
diff --git a/src/webview/contextMenu.js b/src/webview/contextMenu.js
index 83914f581..d3b976554 100644
--- a/src/webview/contextMenu.js
+++ b/src/webview/contextMenu.js
@@ -255,9 +255,9 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
       },
       {
         id: 'resetToDefault',
-        label: `Reset to system default (${SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
+        label: `Reset to system default (${defaultSpellcheckerLanguage === 'automatic' ? 'Automatic' : SPELLCHECKER_LOCALES[defaultSpellcheckerLanguage]})`,
         type: 'radio',
-        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage,
+        visible: defaultSpellcheckerLanguage !== spellcheckerLanguage || (defaultSpellcheckerLanguage !== 'automatic' && spellcheckerLanguage === 'automatic'),
         click() {
           debug('Resetting service spellchecker to system default');
           ipcRenderer.sendToHost('set-service-spellchecker-language', 'reset');
@@ -297,12 +297,13 @@ const buildMenuTpl = (props, suggestions, isSpellcheckEnabled, defaultSpellcheck
 };
 
 export default function contextMenu(spellcheckProvider, isSpellcheckEnabled, getDefaultSpellcheckerLanguage, getSpellcheckerLanguage) {
-  webContents.on('context-menu', (e, props) => {
+  webContents.on('context-menu', async (e, props) => {
     e.preventDefault();
 
     let suggestions = [];
     if (spellcheckProvider && props.misspelledWord) {
-      suggestions = spellcheckProvider.getSuggestion(props.misspelledWord);
+      debug('Mispelled word', props.misspelledWord);
+      suggestions = await spellcheckProvider.getSuggestion(props.misspelledWord);
 
       debug('Suggestions', suggestions);
     }
diff --git a/src/webview/recipe.js b/src/webview/recipe.js
index c223b73de..e3e13b726 100644
--- a/src/webview/recipe.js
+++ b/src/webview/recipe.js
@@ -12,6 +12,7 @@ import contextMenu from './contextMenu';
 import './notifications';
 
 import { DEFAULT_APP_SETTINGS } from '../config';
+import { isDevMode } from '../environment';
 
 const debug = require('debug')('Franz:Plugin');
 
@@ -32,7 +33,7 @@ class RecipeController {
     'settings-update': 'updateAppSettings',
     'service-settings-update': 'updateServiceSettings',
     'get-service-id': 'serviceIdEcho',
-  }
+  };
 
   constructor() {
     this.initialize();
@@ -173,11 +174,42 @@ new RecipeController();
 // Patching window.open
 const originalWindowOpen = window.open;
 
+
 window.open = (url, frameName, features) => {
+  if (!url && !frameName && !features) {
+    // The service hasn't yet supplied a URL (as used in Skype).
+    // Return a new dummy window object and wait for the service to change the properties
+    const newWindow = {
+      location: {
+        href: '',
+      },
+    };
+
+    const checkInterval = setInterval(() => {
+      // Has the service changed the URL yet?
+      if (newWindow.location.href !== '') {
+        // Open the new URL
+        ipcRenderer.sendToHost('new-window', newWindow.location.href);
+        clearInterval(checkInterval);
+      }
+    }, 0);
+
+    setTimeout(() => {
+      // Stop checking for location changes after 1 second
+      clearInterval(checkInterval);
+    }, 1000);
+
+    return newWindow;
+  }
+
   // We need to differentiate if the link should be opened in a popup or in the systems default browser
-  if (!frameName && !features) {
+  if (!frameName && !features && typeof features !== 'string') {
     return ipcRenderer.sendToHost('new-window', url);
   }
 
   return originalWindowOpen(url, frameName, features);
 };
+
+if (isDevMode) {
+  window.log = console.log;
+}
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 9158b3b94..06cbd283a 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,6 +1,7 @@
 import { webFrame } from 'electron';
-import { SpellCheckerProvider } from 'electron-hunspell';
+import { attachSpellCheckProvider, SpellCheckerProvider } from 'electron-hunspell';
 import path from 'path';
+import { readFileSync } from 'fs';
 
 import { DICTIONARY_PATH } from '../config';
 import { SPELLCHECKER_LOCALES } from '../i18n/languages';
@@ -10,18 +11,21 @@ const debug = require('debug')('Franz:spellchecker');
 let provider;
 let currentDict;
 let _isEnabled = false;
+let attached;
+
+const DEFAULT_LOCALE = 'en-us';
 
 async function loadDictionary(locale) {
   try {
     const fileLocation = path.join(DICTIONARY_PATH, `hunspell-dict-${locale}/${locale}`);
-    await provider.loadDictionary(locale, `${fileLocation}.dic`, `${fileLocation}.aff`);
     debug('Loaded dictionary', locale, 'from', fileLocation);
+    return provider.loadDictionary(locale, readFileSync(`${fileLocation}.dic`), readFileSync(`${fileLocation}.aff`));
   } catch (err) {
     console.error('Could not load dictionary', err);
   }
 }
 
-export async function switchDict(locale) {
+export async function switchDict(locale = DEFAULT_LOCALE) {
   try {
     debug('Trying to load dictionary', locale);
 
@@ -40,8 +44,8 @@ export async function switchDict(locale) {
     if (currentDict) {
       provider.unloadDictionary(locale);
     }
-    loadDictionary(locale);
-    provider.switchDictionary(locale);
+    await loadDictionary(locale);
+    await attached.switchLanguage(locale);
 
     debug('Switched dictionary to', locale);
 
@@ -52,18 +56,32 @@ export async function switchDict(locale) {
   }
 }
 
-export default async function initialize(languageCode = 'en-us') {
+export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
+  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
+
+  if (locales.length >= 1) {
+    return locales[0];
+  }
+
+  return null;
+}
+
+export default async function initialize(languageCode = DEFAULT_LOCALE) {
   try {
     provider = new SpellCheckerProvider();
-    const locale = languageCode.toLowerCase();
+    const locale = getSpellcheckerLocaleByFuzzyIdentifier(languageCode);
 
     debug('Init spellchecker');
     await provider.initialize();
-    // await loadDictionaries();
 
-    debug('Available spellchecker dictionaries', provider.availableDictionaries);
+    debug('Attaching spellcheck provider');
+    attached = await attachSpellCheckProvider(provider);
+
+    const availableDictionaries = await provider.getAvailableDictionaries();
 
-    switchDict(locale);
+    debug('Available spellchecker dictionaries', availableDictionaries);
+
+    await switchDict(locale);
 
     return provider;
   } catch (err) {
@@ -83,13 +101,3 @@ export function disable() {
     currentDict = null;
   }
 }
-
-export function getSpellcheckerLocaleByFuzzyIdentifier(identifier) {
-  const locales = Object.keys(SPELLCHECKER_LOCALES).filter(key => key === identifier.toLowerCase() || key.split('-')[0] === identifier.toLowerCase());
-
-  if (locales.length >= 1) {
-    return locales[0];
-  }
-
-  return null;
-}