add workspace drawer

16 files changed, 416 insertions, 25 deletions

diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 593149e72..e06192f87 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,7 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
+import { workspacesState } from '../../features/workspaces/state';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -45,10 +47,23 @@ const messages = defineMessages({
   },
 });
 
-export default @observer class AppLayout extends Component {
+const styles = theme => ({
+  appContent: {
+    width: `calc(100% + ${theme.workspaceDrawerWidth})`,
+    transition: 'transform 0.5s ease',
+    transform() {
+      return workspacesState.isWorkspaceDrawerOpen ? 'translateX(0)' : 'translateX(-220px)';
+    },
+  },
+});
+
+@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 +91,9 @@ export default @observer class AppLayout extends Component {
 
   render() {
     const {
+      classes,
       isFullScreen,
+      workspacesDrawer,
       sidebar,
       services,
       children,
@@ -102,7 +119,8 @@ 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">
                 {news.length > 0 && news.map(item => (
@@ -176,3 +194,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 fcc5b0001..de379875e 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -24,6 +24,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,6 +39,8 @@ 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 = {
@@ -53,9 +63,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">
@@ -66,7 +90,21 @@ export default @observer class Sidebar extends Component {
         />
         <button
           type="button"
-          onClick={toggleMuteApp}
+          onClick={() => {
+            toggleWorkspaceDrawer();
+            this.updateToolTip();
+          }}
+          className={`sidebar__button sidebar__button--workspaces ${isWorkspaceDrawerOpen ? 'is-active' : ''}`}
+          data-tip={`${intl.formatMessage(workspaceToggleMessage)} (${ctrlKey}+Shift+D)`}
+        >
+          <i className="mdi mdi-view-grid" />
+        </button>
+        <button
+          type="button"
+          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..ada920cb6 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -37,6 +37,7 @@ export default @observer class ServiceView extends Component {
 
   componentDidMount() {
     this.autorunDisposer = autorun(() => {
+      if (!this.isMounted) return;
       if (this.props.service.isActive) {
         this.setState({ forceRepaint: true });
         setTimeout(() => {
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 5a05ce431..772458eab 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -20,6 +20,9 @@ import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
 
 import { state as delayAppState } from '../../features/delayApp';
+import { workspacesState } from '../../features/workspaces/state';
+import { workspaceActions } from '../../features/workspaces/actions';
+import WorkspaceDrawer from '../../features/workspaces/components/WorkspaceDrawer';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -82,6 +85,14 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
       );
     }
 
+    const workspacesDrawer = (
+      <WorkspaceDrawer
+        getServicesForWorkspace={workspace => (
+          workspace ? workspace.services.map(id => services.one(id).name) : services.all.map(s => s.name)
+        )}
+      />
+    );
+
     const sidebar = (
       <Sidebar
         services={services.allDisplayed}
@@ -96,6 +107,8 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
         deleteService={deleteService}
         updateService={updateService}
         toggleMuteApp={toggleMuteApp}
+        toggleWorkspaceDrawer={workspaceActions.toggleWorkspaceDrawer}
+        isWorkspaceDrawerOpen={workspacesState.isWorkspaceDrawerOpen}
         showMessageBadgeWhenMutedSetting={settings.all.app.showMessageBadgeWhenMuted}
         showMessageBadgesEvenWhenMuted={ui.showMessageBadgesEvenWhenMuted}
       />
@@ -122,6 +135,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           showServicesUpdatedInfoBar={ui.showServicesUpdatedInfoBar}
           appUpdateIsDownloaded={app.updateStatus === app.updateStatusTypes.DOWNLOADED}
           sidebar={sidebar}
+          workspacesDrawer={workspacesDrawer}
           services={servicesContainer}
           news={news.latest}
           removeNewsItem={hide}
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
index 25246de09..a85f8f57f 100644
--- a/src/features/workspaces/actions.js
+++ b/src/features/workspaces/actions.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import Workspace from './models/Workspace';
 import { createActionsFromDefinitions } from '../../actions/lib/actions';
 
-export default createActionsFromDefinitions({
+export const workspaceActions = createActionsFromDefinitions({
   edit: {
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
@@ -19,4 +19,8 @@ export default createActionsFromDefinitions({
     workspace: PropTypes.instanceOf(Workspace).isRequired,
   },
   deactivate: {},
+  toggleWorkspaceDrawer: {},
+  openWorkspaceSettings: {},
 }, PropTypes.checkPropTypes);
+
+export default workspaceActions;
diff --git a/src/features/workspaces/components/WorkspaceDrawer.js b/src/features/workspaces/components/WorkspaceDrawer.js
new file mode 100644
index 000000000..27bf08361
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceDrawer.js
@@ -0,0 +1,94 @@
+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 { H1, Icon } from '@meetfranz/ui';
+import { workspacesState } from '../state';
+import WorkspaceDrawerItem from './WorkspaceDrawerItem';
+import { workspaceActions } from '../actions';
+
+const messages = defineMessages({
+  headline: {
+    id: 'workspaceDrawer.headline',
+    defaultMessage: '!!!Workspaces',
+  },
+  allServices: {
+    id: 'workspaceDrawer.allServices',
+    defaultMessage: '!!!All services',
+  },
+});
+
+const styles = theme => ({
+  drawer: {
+    backgroundColor: theme.workspaceDrawerBackground,
+    width: theme.workspaceDrawerWidth,
+  },
+  headline: {
+    fontSize: '24px',
+    marginTop: '38px',
+    marginBottom: '25px',
+    marginLeft: '10px',
+  },
+  addWorkspaceButton: {
+    float: 'right',
+    marginRight: '10px',
+    marginTop: '2px',
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceDrawer extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    getServicesForWorkspace: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      classes,
+      getServicesForWorkspace,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className={classes.drawer}>
+        <H1 className={classes.headline}>
+          {intl.formatMessage(messages.headline)}
+          <span
+            className={classes.addWorkspaceButton}
+            onClick={workspaceActions.openWorkspaceSettings}
+          >
+            <Icon
+              icon="mdiPlusBox"
+              size={1.5}
+            />
+          </span>
+        </H1>
+        <div className={classes.workspaces}>
+          <WorkspaceDrawerItem
+            name={intl.formatMessage(messages.allServices)}
+            onClick={() => workspaceActions.deactivate()}
+            services={getServicesForWorkspace(null)}
+            isActive={workspacesState.activeWorkspace == null}
+          />
+          {workspacesState.workspaces.map(workspace => (
+            <WorkspaceDrawerItem
+              key={workspace.id}
+              name={workspace.name}
+              isActive={workspacesState.activeWorkspace === workspace}
+              onClick={() => workspaceActions.activate({ workspace })}
+              services={getServicesForWorkspace(workspace)}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceDrawer;
diff --git a/src/features/workspaces/components/WorkspaceDrawerItem.js b/src/features/workspaces/components/WorkspaceDrawerItem.js
new file mode 100644
index 000000000..00207d323
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceDrawerItem.js
@@ -0,0 +1,88 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import classnames from 'classnames';
+
+const styles = theme => ({
+  item: {
+    height: '67px',
+    padding: '15px 10px',
+    borderBottom: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    '&:first-child': {
+      borderTop: `1px solid ${theme.workspaceDrawerItemBorder}`,
+    },
+  },
+  isActiveItem: {
+    backgroundColor: theme.workspaceDrawerItemActiveBackground,
+  },
+  name: {
+    marginTop: '4px',
+    color: theme.workspaceDrawerNameColor,
+  },
+  activeName: {
+    color: theme.workspaceDrawerNameActiveColor,
+  },
+  services: {
+    display: 'block',
+    fontSize: '11px',
+    marginTop: '5px',
+    color: theme.workspaceDrawerServicesColor,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    lineHeight: '15px',
+  },
+  activeServices: {
+    color: theme.workspaceDrawerServicesActiveColor,
+  },
+});
+
+@injectSheet(styles) @observer
+class WorkspaceDrawerItem extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isActive: PropTypes.bool.isRequired,
+    name: PropTypes.string.isRequired,
+    onClick: PropTypes.func.isRequired,
+    services: PropTypes.arrayOf(PropTypes.string).isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+      isActive,
+      name,
+      onClick,
+      services,
+    } = this.props;
+    return (
+      <div
+        className={classnames([
+          classes.item,
+          isActive ? classes.isActiveItem : null,
+        ])}
+        onClick={onClick}
+      >
+        <span
+          className={classnames([
+            classes.name,
+            isActive ? classes.activeName : null,
+          ])}
+        >
+          {name}
+        </span>
+        <span
+          className={classnames([
+            classes.services,
+            isActive ? classes.activeServices : null,
+          ])}
+        >
+          {services.join(', ')}
+        </span>
+      </div>
+    );
+  }
+}
+
+export default WorkspaceDrawerItem;
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
index 963b96f81..68a7d8d91 100644
--- a/src/features/workspaces/state.js
+++ b/src/features/workspaces/state.js
@@ -4,6 +4,7 @@ const defaultState = {
   activeWorkspace: null,
   isLoading: false,
   isFeatureActive: false,
+  isWorkspaceDrawerOpen: false,
   workspaces: [],
   workspaceBeingEdited: null,
 };
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
index a2997a0d2..1b57ba2da 100644
--- a/src/features/workspaces/store.js
+++ b/src/features/workspaces/store.js
@@ -3,7 +3,7 @@ import Store from '../../stores/lib/Store';
 import CachedRequest from '../../stores/lib/CachedRequest';
 import Workspace from './models/Workspace';
 import { matchRoute } from '../../helpers/routing-helpers';
-import workspaceActions from './actions';
+import { workspaceActions } from './actions';
 
 const debug = require('debug')('Franz:feature:workspaces');
 
@@ -55,6 +55,8 @@ export default class WorkspacesStore extends Store {
     workspaceActions.update.listen(this._update);
     workspaceActions.activate.listen(this._setActiveWorkspace);
     workspaceActions.deactivate.listen(this._deactivateActiveWorkspace);
+    workspaceActions.toggleWorkspaceDrawer.listen(this._toggleWorkspaceDrawer);
+    workspaceActions.openWorkspaceSettings.listen(this._openWorkspaceSettings);
   }
 
   _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
@@ -111,4 +113,12 @@ export default class WorkspacesStore extends Store {
   @action _deactivateActiveWorkspace = () => {
     this.state.activeWorkspace = null;
   };
+
+  @action _toggleWorkspaceDrawer = () => {
+    this.state.isWorkspaceDrawerOpen = !this.state.isWorkspaceDrawerOpen;
+  };
+
+  @action _openWorkspaceSettings = () => {
+    this.actions.ui.openSettings({ path: 'workspaces' });
+  };
 }
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index c8bb03ded..4bf9a8c0a 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -755,6 +755,32 @@
           "column": 10,
           "line": 23
         }
+      },
+      {
+        "defaultMessage": "!!!Open workspace drawer",
+        "end": {
+          "column": 3,
+          "line": 30
+        },
+        "file": "src/components/layout/Sidebar.js",
+        "id": "sidebar.openWorkspaceDrawer",
+        "start": {
+          "column": 23,
+          "line": 27
+        }
+      },
+      {
+        "defaultMessage": "!!!Close workspace drawer",
+        "end": {
+          "column": 3,
+          "line": 34
+        },
+        "file": "src/components/layout/Sidebar.js",
+        "id": "sidebar.closeWorkspaceDrawer",
+        "start": {
+          "column": 24,
+          "line": 31
+        }
       }
     ],
     "path": "src/components/layout/Sidebar.json"
@@ -3279,6 +3305,37 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!Workspaces",
+        "end": {
+          "column": 3,
+          "line": 15
+        },
+        "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+        "id": "workspaceDrawer.headline",
+        "start": {
+          "column": 12,
+          "line": 12
+        }
+      },
+      {
+        "defaultMessage": "!!!All services",
+        "end": {
+          "column": 3,
+          "line": 19
+        },
+        "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+        "id": "workspaceDrawer.allServices",
+        "start": {
+          "column": 15,
+          "line": 16
+        }
+      }
+    ],
+    "path": "src/features/workspaces/components/WorkspaceDrawer.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Your workspaces",
         "end": {
           "column": 3,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 1041a8b5f..94c6fcf32 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -249,7 +249,9 @@
   "settings.workspaces.headline": "Your workspaces",
   "settings.workspaces.noWorkspacesAdded": "You haven't added any workspaces yet.",
   "sidebar.addNewService": "Add new service",
+  "sidebar.closeWorkspaceDrawer": "Close workspace drawer",
   "sidebar.muteApp": "Disable notifications & audio",
+  "sidebar.openWorkspaceDrawer": "Open workspace drawer",
   "sidebar.settings": "Settings",
   "sidebar.unmuteApp": "Enable notifications & audio",
   "signup.company.label": "Company",
@@ -294,5 +296,7 @@
   "validation.required": "{field} is required",
   "validation.url": "{field} is not a valid URL",
   "welcome.loginButton": "Login to your account",
-  "welcome.signupButton": "Create a free account"
-}
\ No newline at end of file
+  "welcome.signupButton": "Create a free account",
+  "workspaceDrawer.allServices": "All services",
+  "workspaceDrawer.headline": "Workspaces"
+}
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 07603d062..85d3e8696 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": 22,
+      "line": 24,
       "column": 19
     },
     "end": {
-      "line": 25,
+      "line": 27,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 26,
+      "line": 28,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 31,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 32,
       "column": 24
     },
     "end": {
-      "line": 33,
+      "line": 35,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 36,
       "column": 13
     },
     "end": {
-      "line": 37,
+      "line": 39,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 38,
+      "line": 40,
       "column": 23
     },
     "end": {
-      "line": 41,
+      "line": 43,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 42,
+      "line": 44,
       "column": 26
     },
     "end": {
-      "line": 45,
+      "line": 47,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/components/layout/Sidebar.json b/src/i18n/messages/src/components/layout/Sidebar.json
index 7aa00a186..0254af8da 100644
--- a/src/i18n/messages/src/components/layout/Sidebar.json
+++ b/src/i18n/messages/src/components/layout/Sidebar.json
@@ -50,5 +50,31 @@
       "line": 26,
       "column": 3
     }
+  },
+  {
+    "id": "sidebar.openWorkspaceDrawer",
+    "defaultMessage": "!!!Open workspace drawer",
+    "file": "src/components/layout/Sidebar.js",
+    "start": {
+      "line": 27,
+      "column": 23
+    },
+    "end": {
+      "line": 30,
+      "column": 3
+    }
+  },
+  {
+    "id": "sidebar.closeWorkspaceDrawer",
+    "defaultMessage": "!!!Close workspace drawer",
+    "file": "src/components/layout/Sidebar.js",
+    "start": {
+      "line": 31,
+      "column": 24
+    },
+    "end": {
+      "line": 34,
+      "column": 3
+    }
   }
 ]
\ No newline at end of file
diff --git a/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
new file mode 100644
index 000000000..c875b82cb
--- /dev/null
+++ b/src/i18n/messages/src/features/workspaces/components/WorkspaceDrawer.json
@@ -0,0 +1,28 @@
+[
+  {
+    "id": "workspaceDrawer.headline",
+    "defaultMessage": "!!!Workspaces",
+    "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+    "start": {
+      "line": 12,
+      "column": 12
+    },
+    "end": {
+      "line": 15,
+      "column": 3
+    }
+  },
+  {
+    "id": "workspaceDrawer.allServices",
+    "defaultMessage": "!!!All services",
+    "file": "src/features/workspaces/components/WorkspaceDrawer.js",
+    "start": {
+      "line": 16,
+      "column": 15
+    },
+    "end": {
+      "line": 19,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index b21a62b4d..7b224802f 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -4,7 +4,7 @@ import { defineMessages } from 'react-intl';
 
 import { isMac, ctrlKey, cmdKey } from '../environment';
 import { workspacesState } from '../features/workspaces/state';
-import workspaceActions from '../features/workspaces/actions';
+import { workspaceActions } from '../features/workspaces/actions';
 
 const { app, Menu, dialog } = remote;
 
@@ -785,7 +785,7 @@ export default class FranzMenu {
       label: intl.formatMessage(menuItems.addNewWorkspace),
       accelerator: `${cmdKey}+Shift+N`,
       click: () => {
-        this.actions.ui.openSettings({ path: 'workspaces' });
+        workspaceActions.openWorkspaceSettings();
       },
       enabled: this.stores.user.isLoggedIn,
     }, {
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
index 9a003a922..78e9e68f1 100644
--- a/src/styles/layout.scss
+++ b/src/styles/layout.scss
@@ -18,8 +18,14 @@ html { overflow: hidden; }
       font-size: 22px;
 
       &:hover,
-      &:active { color: $dark-theme-gray-smoke; }
-      &.is-muted { color: $theme-brand-primary; }
+      &:active {
+        color: $dark-theme-gray-smoke;
+      }
+
+      &.is-muted,
+      &.is-active {
+        color: $theme-brand-primary;
+      }
     }
   }
 
@@ -84,7 +90,7 @@ html { overflow: hidden; }
 
     &:hover,
     &:active { color: lighten($theme-gray-light, 10%); }
-    &.is-muted { color: $theme-brand-primary; }
+    &.is-muted, &.is-active { color: $theme-brand-primary; }
     &--new-service { padding-bottom: 6px; }
   }