15 files changed, 236 insertions, 26 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 593149e72..b7f7722dd 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar';
+import injectSheet from 'react-jss';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as DelayApp } from '../../features/delayApp';
@@ -13,6 +14,8 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
+import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
+import { workspaceStore } from '../../features/workspaces';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -45,10 +48,23 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class AppLayout extends Component {
+const styles = theme => ({
+  appContent: {
+    width: `calc(100% + ${theme.workspaces.drawer.width}px)`,
+    transition: 'transform 0.5s ease',
+    transform() {
+      return workspaceStore.isWorkspaceDrawerOpen ? 'translateX(0)' : `translateX(-${theme.workspaces.drawer.width}px)`;
+    },
+  },
+});
+
+@injectSheet(styles) @observer
+class AppLayout extends Component {
   static propTypes = {
+    classes: PropTypes.object.isRequired,
     isFullScreen: PropTypes.bool.isRequired,
     sidebar: PropTypes.element.isRequired,
+    workspacesDrawer: PropTypes.element.isRequired,
     services: PropTypes.element.isRequired,
     children: PropTypes.element,
     news: MobxPropTypes.arrayOrObservableArray.isRequired,
@@ -76,7 +92,9 @@ export default @observer class AppLayout extends Component {
 
   render() {
     const {
+      classes,
       isFullScreen,
+      workspacesDrawer,
       sidebar,
       services,
       children,
@@ -102,9 +120,11 @@ export default @observer class AppLayout extends Component {
         <div className={(darkMode ? 'theme__dark' : '')}>
           <div className="app">
             {isWindows && !isFullScreen && <TitleBar menu={window.franz.menu.template} icon="assets/images/logo.svg" />}
-            <div className="app__content">
+            <div className={`app__content ${classes.appContent}`}>
+              {workspacesDrawer}
               {sidebar}
               <div className="app__service">
+                <WorkspaceSwitchingIndicator />
                 {news.length > 0 && news.map(item => (
                   <InfoBar
                     key={item.id}
@@ -176,3 +196,5 @@ export default @observer class AppLayout extends Component {
     );
   }
 }
+
+export default AppLayout;
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 609a3b604..36c1f2e39 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -6,6 +6,8 @@ import { observer } from 'mobx-react';
 
 import Tabbar from '../services/tabs/Tabbar';
 import { ctrlKey } from '../../environment';
+import { GA_CATEGORY_WORKSPACES, workspaceStore } from '../../features/workspaces';
+import { gaEvent } from '../../lib/analytics';
 
 const messages = defineMessages({
   settings: {
@@ -24,6 +26,14 @@ const messages = defineMessages({
     id: 'sidebar.unmuteApp',
     defaultMessage: '!!!Enable notifications & audio',
   },
+  openWorkspaceDrawer: {
+    id: 'sidebar.openWorkspaceDrawer',
+    defaultMessage: '!!!Open workspace drawer',
+  },
+  closeWorkspaceDrawer: {
+    id: 'sidebar.closeWorkspaceDrawer',
+    defaultMessage: '!!!Close workspace drawer',
+  },
 });
 
 export default @observer class Sidebar extends Component {
@@ -31,7 +41,9 @@ export default @observer class Sidebar extends Component {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
-  }
+    isWorkspaceDrawerOpen: PropTypes.bool.isRequired,
+    toggleWorkspaceDrawer: PropTypes.func.isRequired,
+  };
 
   static contextTypes = {
     intl: intlShape,
@@ -53,9 +65,23 @@ export default @observer class Sidebar extends Component {
     this.setState({ tooltipEnabled: false });
   }
 
+  updateToolTip() {
+    this.disableToolTip();
+    setTimeout(this.enableToolTip.bind(this));
+  }
+
   render() {
-    const { openSettings, toggleMuteApp, isAppMuted } = this.props;
+    const {
+      openSettings,
+      toggleMuteApp,
+      isAppMuted,
+      isWorkspaceDrawerOpen,
+      toggleWorkspaceDrawer,
+    } = this.props;
     const { intl } = this.context;
+    const workspaceToggleMessage = (
+      isWorkspaceDrawerOpen ? messages.closeWorkspaceDrawer : messages.openWorkspaceDrawer
+    );
 
     return (
       <div className="sidebar">
@@ -64,9 +90,26 @@ export default @observer class Sidebar extends Component {
           enableToolTip={() => this.enableToolTip()}
           disableToolTip={() => this.disableToolTip()}
         />
+        {workspaceStore.isFeatureEnabled ? (
+          <button
+            type="button"
+            onClick={() => {
+              toggleWorkspaceDrawer();
+              this.updateToolTip();
+              gaEvent(GA_CATEGORY_WORKSPACES, 'toggleDrawer', 'sidebar');
+            }}
+            className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+            data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+D)`}
+          >
+            <i className="mdi mdi-view-grid" />
+          </button>
+        ) : null}
         <button
           type="button"
-          onClick={toggleMuteApp}
+          onClick={() => {
+            toggleMuteApp();
+            this.updateToolTip();
+          }}
           className={`sidebar__button sidebar__button--audio ${isAppMuted ? 'is-muted' : ''}`}
           data-tip={`${intl.formatMessage(isAppMuted ? messages.unmute : messages.mute)} (${ctrlKey}+Shift+M)`}
         >
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 5afc54f9d..13148b9b3 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -35,11 +35,13 @@ export default @observer class ServiceView extends Component {
 
   autorunDisposer = null;
 
+  forceRepaintTimeout = null;
+
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
       if (this.props.service.isActive) {
         this.setState({ forceRepaint: true });
-        setTimeout(() => {
+        this.forceRepaintTimeout = setTimeout(() => {
           this.setState({ forceRepaint: false });
         }, 100);
       }
@@ -48,6 +50,7 @@ export default @observer class ServiceView extends Component {
 
   componentWillUnmount() {
     this.autorunDisposer();
+    clearTimeout(this.forceRepaintTimeout);
   }
 
   updateTargetUrl = (event) => {
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index dd5c2140f..5e8260ad0 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -19,7 +19,7 @@ export default @observer class TabBar extends Component {
     updateService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
-  }
+  };
 
   onSortEnd = ({ oldIndex, newIndex }) => {
     const {
@@ -45,7 +45,7 @@ export default @observer class TabBar extends Component {
         redirect: false,
       });
     }
-  }
+  };
 
   disableService({ serviceId }) {
     this.toggleService({ serviceId, isEnabled: false });
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 953f702f8..993b0a44a 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -2,8 +2,11 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, intlShape } from 'react-intl';
 import { inject, observer } from 'mobx-react';
+import { ProBadge } from '@meetfranz/ui';
 
 import Link from '../../ui/Link';
+import { workspaceStore } from '../../../features/workspaces';
+import UIStore from '../../../stores/UIStore';
 
 const messages = defineMessages({
   availableServices: {
@@ -14,6 +17,10 @@ const messages = defineMessages({
     id: 'settings.navigation.yourServices',
     defaultMessage: '!!!Your services',
   },
+  yourWorkspaces: {
+    id: 'settings.navigation.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
   account: {
     id: 'settings.navigation.account',
     defaultMessage: '!!!Account',
@@ -34,7 +41,11 @@ const messages = defineMessages({
 
 export default @inject('stores') @observer class SettingsNavigation extends Component {
   static propTypes = {
+    stores: PropTypes.shape({
+      ui: PropTypes.instanceOf(UIStore).isRequired,
+    }).isRequired,
     serviceCount: PropTypes.number.isRequired,
+    workspaceCount: PropTypes.number.isRequired,
   };
 
   static contextTypes = {
@@ -42,7 +53,8 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
   };
 
   render() {
-    const { serviceCount } = this.props;
+    const { serviceCount, workspaceCount, stores } = this.props;
+    const { isDarkThemeActive } = stores.ui;
     const { intl } = this.context;
 
     return (
@@ -63,6 +75,21 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           {' '}
           <span className="badge">{serviceCount}</span>
         </Link>
+        {workspaceStore.isFeatureEnabled ? (
+          <Link
+            to="/settings/workspaces"
+            className="settings-navigation__link"
+            activeClassName="is-active"
+          >
+            {intl.formatMessage(messages.yourWorkspaces)}
+            {' '}
+            {workspaceStore.isPremiumUpgradeRequired ? (
+              <ProBadge inverted={!isDarkThemeActive && workspaceStore.isSettingsRouteActive} />
+            ) : (
+              <span className="badge">{workspaceCount}</span>
+            )}
+          </Link>
+        ) : null}
         <Link
           to="/settings/user"
           className="settings-navigation__link"
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 21616b5de..4ba2eb844 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -341,14 +341,20 @@ export default @observer class EditServiceForm extends Component {
               </div>
             </div>
 
-            <PremiumFeatureContainer condition={isSpellcheckerPremiumFeature}>
+            <PremiumFeatureContainer
+              condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
+            >
               <div className="settings__settings-group">
                 <Select field={form.$('spellcheckerLanguage')} />
               </div>
             </PremiumFeatureContainer>
 
             {isProxyFeatureEnabled && (
-              <PremiumFeatureContainer condition={isProxyPremiumFeature}>
+              <PremiumFeatureContainer
+                condition={isProxyPremiumFeature}
+                gaEventInfo={{ category: 'User', event: 'upgrade', label: 'proxy' }}
+              >
                 <div className="settings__settings-group">
                   <h3>
                     {intl.formatMessage(messages.headlineProxy)}
diff --git a/src/components/settings/services/ServicesDashboard.js b/src/components/settings/services/ServicesDashboard.js
index a12df7372..53bae12df 100644
--- a/src/components/settings/services/ServicesDashboard.js
+++ b/src/components/settings/services/ServicesDashboard.js
@@ -65,7 +65,7 @@ export default @observer class ServicesDashboard extends Component {
 
   static defaultProps = {
     searchNeedle: '',
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index a92e559f3..8429d0ecb 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -170,6 +170,7 @@ export default @observer class EditSettingsForm extends Component {
             <Select field={form.$('locale')} showLabel={false} />
             <PremiumFeatureContainer
               condition={isSpellcheckerPremiumFeature}
+              gaEventInfo={{ category: 'User', event: 'upgrade', label: 'spellchecker' }}
             >
               <Fragment>
                 <Toggle
diff --git a/src/components/ui/AppLoader/index.js b/src/components/ui/AppLoader/index.js
index 61053f6d1..b0c7fed7b 100644
--- a/src/components/ui/AppLoader/index.js
+++ b/src/components/ui/AppLoader/index.js
@@ -23,11 +23,11 @@ export default @injectSheet(styles) @withTheme class AppLoader extends Component
   static propTypes = {
     classes: PropTypes.object.isRequired,
     theme: PropTypes.object.isRequired,
-  }
+  };
 
   state = {
     step: 0,
-  }
+  };
 
   interval = null;
 
diff --git a/src/components/ui/FullscreenLoader/index.js b/src/components/ui/FullscreenLoader/index.js
index 6ecf4d395..06dab1eb6 100644
--- a/src/components/ui/FullscreenLoader/index.js
+++ b/src/components/ui/FullscreenLoader/index.js
@@ -16,13 +16,13 @@ export default @observer @withTheme @injectSheet(styles) class FullscreenLoader
     theme: PropTypes.object.isRequired,
     spinnerColor: PropTypes.string,
     children: PropTypes.node,
-  }
+  };
 
   static defaultProps = {
     className: null,
     spinnerColor: null,
     children: null,
-  }
+  };
 
   render() {
     const {
diff --git a/src/components/ui/Infobox.js b/src/components/ui/Infobox.js
index a33c6474a..0917ee9f0 100644
--- a/src/components/ui/Infobox.js
+++ b/src/components/ui/Infobox.js
@@ -13,6 +13,8 @@ export default @observer class Infobox extends Component {
     ctaLabel: PropTypes.string,
     ctaLoading: PropTypes.bool,
     dismissable: PropTypes.bool,
+    onDismiss: PropTypes.func,
+    onSeen: PropTypes.func,
   };
 
   static defaultProps = {
@@ -22,12 +24,19 @@ export default @observer class Infobox extends Component {
     ctaOnClick: () => null,
     ctaLabel: '',
     ctaLoading: false,
+    onDismiss: () => null,
+    onSeen: () => null,
   };
 
   state = {
     dismissed: false,
   };
 
+  componentDidMount() {
+    const { onSeen } = this.props;
+    if (onSeen) onSeen();
+  }
+
   render() {
     const {
       children,
@@ -37,6 +46,7 @@ export default @observer class Infobox extends Component {
       ctaLoading,
       ctaOnClick,
       dismissable,
+      onDismiss,
     } = this.props;
 
     if (this.state.dismissed) {
@@ -76,9 +86,10 @@ export default @observer class Infobox extends Component {
         {dismissable && (
           <button
             type="button"
-            onClick={() => this.setState({
-              dismissed: true,
-            })}
+            onClick={() => {
+              this.setState({ dismissed: true });
+              if (onDismiss) onDismiss();
+            }}
             className="infobox__delete mdi mdi-close"
           />
         )}
diff --git a/src/components/ui/PremiumFeatureContainer/index.js b/src/components/ui/PremiumFeatureContainer/index.js
index 67cd6af0b..3c1e0fac3 100644
--- a/src/components/ui/PremiumFeatureContainer/index.js
+++ b/src/components/ui/PremiumFeatureContainer/index.js
@@ -9,6 +9,7 @@ import { oneOrManyChildElements } from '../../../prop-types';
 import UserStore from '../../../stores/UserStore';
 
 import styles from './styles';
+import { gaEvent } from '../../../lib/analytics';
 
 const messages = defineMessages({
   action: {
@@ -17,14 +18,21 @@ const messages = defineMessages({
   },
 });
 
-export default @inject('stores', 'actions') @injectSheet(styles) @observer class PremiumFeatureContainer extends Component {
+@inject('stores', 'actions') @injectSheet(styles) @observer
+class PremiumFeatureContainer extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     condition: PropTypes.bool,
+    gaEventInfo: PropTypes.shape({
+      category: PropTypes.string.isRequired,
+      event: PropTypes.string.isRequired,
+      label: PropTypes.string,
+    }),
   };
 
   static defaultProps = {
     condition: true,
+    gaEventInfo: null,
   };
 
   static contextTypes = {
@@ -38,6 +46,7 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
       actions,
       condition,
       stores,
+      gaEventInfo,
     } = this.props;
 
     const { intl } = this.context;
@@ -49,7 +58,13 @@ export default @inject('stores', 'actions') @injectSheet(styles) @observer class
           <button
             className={classes.actionButton}
             type="button"
-            onClick={() => actions.ui.openSettings({ path: 'user' })}
+            onClick={() => {
+              actions.ui.openSettings({ path: 'user' });
+              if (gaEventInfo) {
+                const { category, event, label } = gaEventInfo;
+                gaEvent(category, event, label);
+              }
+            }}
           >
             {intl.formatMessage(messages.action)}
           </button>
@@ -73,3 +88,5 @@ PremiumFeatureContainer.wrappedComponent.propTypes = {
     }).isRequired,
   }).isRequired,
 };
+
+export default PremiumFeatureContainer;
diff --git a/src/components/ui/PremiumFeatureContainer/styles.js b/src/components/ui/PremiumFeatureContainer/styles.js
index 81d6666c6..41881e044 100644
--- a/src/components/ui/PremiumFeatureContainer/styles.js
+++ b/src/components/ui/PremiumFeatureContainer/styles.js
@@ -6,6 +6,7 @@ export default theme => ({
     padding: 20,
     'border-radius': theme.borderRadius,
     pointerEvents: 'none',
+    height: 'auto',
   },
   titleContainer: {
     display: 'flex',
@@ -19,14 +20,14 @@ export default theme => ({
     color: theme.colorSubscriptionContainerActionButtonColor,
     'margin-left': 'auto',
     'border-radius': theme.borderRadiusSmall,
-    padding: [2, 4],
+    padding: [4, 8],
     'font-size': 12,
     pointerEvents: 'initial',
   },
   content: {
     opacity: 0.5,
     'margin-top': 20,
-    '& :last-child': {
+    '& > :last-child': {
       'margin-bottom': 0,
     },
   },
diff --git a/src/components/ui/ServiceIcon.js b/src/components/ui/ServiceIcon.js
new file mode 100644
index 000000000..0b9155a4e
--- /dev/null
+++ b/src/components/ui/ServiceIcon.js
@@ -0,0 +1,67 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+import ServiceModel from '../../models/Service';
+
+const styles = theme => ({
+  root: {
+    height: 'auto',
+  },
+  icon: {
+    width: theme.serviceIcon.width,
+  },
+  isCustomIcon: {
+    width: theme.serviceIcon.isCustom.width,
+    border: theme.serviceIcon.isCustom.border,
+    borderRadius: theme.serviceIcon.isCustom.borderRadius,
+  },
+  isDisabled: {
+    filter: 'grayscale(100%)',
+    opacity: '.5',
+  },
+});
+
+@injectSheet(styles) @observer
+class ServiceIcon extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    service: PropTypes.instanceOf(ServiceModel).isRequired,
+    className: PropTypes.string,
+  };
+
+  static defaultProps = {
+    className: '',
+  };
+
+  render() {
+    const {
+      classes,
+      className,
+      service,
+    } = this.props;
+
+    return (
+      <div
+        className={classnames([
+          classes.root,
+          className,
+        ])}
+      >
+        <img
+          src={service.icon}
+          className={classnames([
+            classes.icon,
+            service.isEnabled ? null : classes.isDisabled,
+            service.hasCustomIcon ? classes.isCustomIcon : null,
+          ])}
+          alt=""
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceIcon;
diff --git a/src/components/ui/WebviewLoader/index.js b/src/components/ui/WebviewLoader/index.js
index 3a3dbbe49..58b6b6f1b 100644
--- a/src/components/ui/WebviewLoader/index.js
+++ b/src/components/ui/WebviewLoader/index.js
@@ -2,23 +2,35 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import injectSheet from 'react-jss';
+import { defineMessages, intlShape } from 'react-intl';
 
 import FullscreenLoader from '../FullscreenLoader';
-
 import styles from './styles';
 
+const messages = defineMessages({
+  loading: {
+    id: 'service.webviewLoader.loading',
+    defaultMessage: '!!!Loading',
+  },
+});
+
 export default @observer @injectSheet(styles) class WebviewLoader extends Component {
   static propTypes = {
     name: PropTypes.string.isRequired,
     classes: PropTypes.object.isRequired,
-  }
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
 
   render() {
     const { classes, name } = this.props;
+    const { intl } = this.context;
     return (
       <FullscreenLoader
         className={classes.component}
-        title={`Loading ${name}`}
+        title={`${intl.formatMessage(messages.loading)} ${name}`}
       />
     );
   }