30 files changed, 1069 insertions, 25 deletions

diff --git a/src/actions/index.js b/src/actions/index.js
index 59acabb0b..00f843cd6 100644
--- a/src/actions/index.js
+++ b/src/actions/index.js
@@ -11,6 +11,7 @@ import payment from './payment';
 import news from './news';
 import settings from './settings';
 import requests from './requests';
+import workspaces from '../features/workspaces/actions';
 
 const actions = Object.assign({}, {
   service,
@@ -25,4 +26,7 @@ const actions = Object.assign({}, {
   requests,
 });
 
-export default defineActions(actions, PropTypes.checkPropTypes);
+export default Object.assign(
+  defineActions(actions, PropTypes.checkPropTypes),
+  { workspaces },
+);
diff --git a/src/actions/lib/actions.js b/src/actions/lib/actions.js
index 499018d70..6571e9441 100644
--- a/src/actions/lib/actions.js
+++ b/src/actions/lib/actions.js
@@ -1,18 +1,23 @@
+export const createActionsFromDefinitions = (actionDefinitions, validate) => {
+  const actions = {};
+  Object.keys(actionDefinitions).forEach((actionName) => {
+    const action = (params) => {
+      const schema = actionDefinitions[actionName];
+      validate(schema, params, actionName);
+      action.notify(params);
+    };
+    actions[actionName] = action;
+    action.listeners = [];
+    action.listen = listener => action.listeners.push(listener);
+    action.notify = params => action.listeners.forEach(listener => listener(params));
+  });
+  return actions;
+};
+
 export default (definitions, validate) => {
   const newActions = {};
   Object.keys(definitions).forEach((scopeName) => {
-    newActions[scopeName] = {};
-    Object.keys(definitions[scopeName]).forEach((actionName) => {
-      const action = (params) => {
-        const schema = definitions[scopeName][actionName];
-        validate(schema, params, actionName);
-        action.notify(params);
-      };
-      newActions[scopeName][actionName] = action;
-      action.listeners = [];
-      action.listen = listener => action.listeners.push(listener);
-      action.notify = params => action.listeners.forEach(listener => listener(params));
-    });
+    newActions[scopeName] = createActionsFromDefinitions(definitions[scopeName], validate);
   });
   return newActions;
 };
diff --git a/src/api/utils/auth.js b/src/api/utils/auth.js
new file mode 100644
index 000000000..d469853a5
--- /dev/null
+++ b/src/api/utils/auth.js
@@ -0,0 +1,28 @@
+import { remote } from 'electron';
+import localStorage from 'mobx-localstorage';
+
+const { app } = remote;
+
+export const prepareAuthRequest = (options, auth = true) => {
+  const request = Object.assign(options, {
+    mode: 'cors',
+    headers: Object.assign({
+      'Content-Type': 'application/json',
+      'X-Franz-Source': 'desktop',
+      'X-Franz-Version': app.getVersion(),
+      'X-Franz-platform': process.platform,
+      'X-Franz-Timezone-Offset': new Date().getTimezoneOffset(),
+      'X-Franz-System-Locale': app.getLocale(),
+    }, options.headers),
+  });
+
+  if (auth) {
+    request.headers.Authorization = `Bearer ${localStorage.getItem('authToken')}`;
+  }
+
+  return request;
+};
+
+export const sendAuthRequest = (url, options) => (
+  window.fetch(url, prepareAuthRequest(options))
+);
diff --git a/src/app.js b/src/app.js
index 6660feb46..d3b540f62 100644
--- a/src/app.js
+++ b/src/app.js
@@ -39,6 +39,8 @@ import PricingScreen from './containers/auth/PricingScreen';
 import InviteScreen from './containers/auth/InviteScreen';
 import AuthLayoutContainer from './containers/auth/AuthLayoutContainer';
 import SubscriptionPopupScreen from './containers/subscription/SubscriptionPopupScreen';
+import WorkspacesScreen from './features/workspaces/containers/WorkspacesScreen';
+import EditWorkspaceScreen from './features/workspaces/containers/EditWorkspaceScreen';
 
 // Add Polyfills
 smoothScroll.polyfill();
@@ -75,6 +77,8 @@ window.addEventListener('load', () => {
                   <Route path="/settings/recipes/:filter" component={RecipesScreen} />
                   <Route path="/settings/services" component={ServicesScreen} />
                   <Route path="/settings/services/:action/:id" component={EditServiceScreen} />
+                  <Route path="/settings/workspaces" component={WorkspacesScreen} />
+                  <Route path="/settings/workspaces/:action/:id" component={EditWorkspaceScreen} />
                   <Route path="/settings/user" component={AccountScreen} />
                   <Route path="/settings/user/edit" component={EditUserScreen} />
                   <Route path="/settings/app" component={EditSettingsScreen} />
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index 609a3b604..fcc5b0001 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -31,7 +31,7 @@ export default @observer class Sidebar extends Component {
     openSettings: PropTypes.func.isRequired,
     toggleMuteApp: PropTypes.func.isRequired,
     isAppMuted: PropTypes.bool.isRequired,
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
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..4a80bb126 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -14,6 +14,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',
@@ -64,6 +68,14 @@ export default @inject('stores') @observer class SettingsNavigation extends Comp
           <span className="badge">{serviceCount}</span>
         </Link>
         <Link
+          to="/settings/workspaces"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+        >
+          {intl.formatMessage(messages.yourWorkspaces)}
+          {' '}
+        </Link>
+        <Link
           to="/settings/user"
           className="settings-navigation__link"
           activeClassName="is-active"
diff --git a/src/config.js b/src/config.js
index a782ad667..30a5a5cc0 100644
--- a/src/config.js
+++ b/src/config.js
@@ -41,6 +41,8 @@ export const DEFAULT_FEATURES_CONFIG = {
   },
   isServiceProxyEnabled: false,
   isServiceProxyPremiumFeature: true,
+  isWorkspacePremiumFeature: true,
+  isWorkspaceEnabled: true,
 };
 
 export const DEFAULT_WINDOW_OPTIONS = {
diff --git a/src/environment.js b/src/environment.js
index 73b1c7ab2..d67fd6adb 100644
--- a/src/environment.js
+++ b/src/environment.js
@@ -28,3 +28,4 @@ if (!isDevMode || (isDevMode && useLiveAPI)) {
 }
 
 export const API = api;
+export const API_VERSION = 'v1';
diff --git a/src/features/delayApp/Component.js b/src/features/delayApp/Component.js
index ff84510e8..ff0f1f2f8 100644
--- a/src/features/delayApp/Component.js
+++ b/src/features/delayApp/Component.js
@@ -38,7 +38,7 @@ export default @inject('actions') @injectSheet(styles) @observer class DelayApp
 
   state = {
     countdown: config.delayDuration,
-  }
+  };
 
   countdownInterval = null;
 
diff --git a/src/features/workspaces/actions.js b/src/features/workspaces/actions.js
new file mode 100644
index 000000000..25246de09
--- /dev/null
+++ b/src/features/workspaces/actions.js
@@ -0,0 +1,22 @@
+import PropTypes from 'prop-types';
+import Workspace from './models/Workspace';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export default createActionsFromDefinitions({
+  edit: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+  create: {
+    name: PropTypes.string.isRequired,
+  },
+  delete: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+  update: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+  activate: {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  },
+  deactivate: {},
+}, PropTypes.checkPropTypes);
diff --git a/src/features/workspaces/api.js b/src/features/workspaces/api.js
new file mode 100644
index 000000000..733cb5593
--- /dev/null
+++ b/src/features/workspaces/api.js
@@ -0,0 +1,39 @@
+import { pick } from 'lodash';
+import { sendAuthRequest } from '../../api/utils/auth';
+import { API, API_VERSION } from '../../environment';
+
+export default {
+  getUserWorkspaces: async () => {
+    const url = `${API}/${API_VERSION}/workspace`;
+    const request = await sendAuthRequest(url, { method: 'GET' });
+    if (!request.ok) throw request;
+    return request.json();
+  },
+
+  createWorkspace: async (name) => {
+    const url = `${API}/${API_VERSION}/workspace`;
+    const request = await sendAuthRequest(url, {
+      method: 'POST',
+      body: JSON.stringify({ name }),
+    });
+    if (!request.ok) throw request;
+    return request.json();
+  },
+
+  deleteWorkspace: async (workspace) => {
+    const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
+    const request = await sendAuthRequest(url, { method: 'DELETE' });
+    if (!request.ok) throw request;
+    return request.json();
+  },
+
+  updateWorkspace: async (workspace) => {
+    const url = `${API}/${API_VERSION}/workspace/${workspace.id}`;
+    const request = await sendAuthRequest(url, {
+      method: 'PUT',
+      body: JSON.stringify(pick(workspace, ['name', 'services'])),
+    });
+    if (!request.ok) throw request;
+    return request.json();
+  },
+};
diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
new file mode 100644
index 000000000..83f6e07f7
--- /dev/null
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -0,0 +1,93 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Input, Button } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+import Form from '../../../lib/Form';
+import { required } from '../../../helpers/validation-helpers';
+
+const messages = defineMessages({
+  submitButton: {
+    id: 'settings.workspace.add.form.submitButton',
+    defaultMessage: '!!!Save workspace',
+  },
+  name: {
+    id: 'settings.workspace.add.form.name',
+    defaultMessage: '!!!Name',
+  },
+});
+
+const styles = () => ({
+  form: {
+    display: 'flex',
+  },
+  input: {
+    flexGrow: 1,
+    marginRight: '10px',
+  },
+  submitButton: {
+    height: 'inherit',
+    marginTop: '3px',
+  },
+});
+
+@injectSheet(styles) @observer
+class CreateWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    onSubmit: PropTypes.func.isRequired,
+  };
+
+  form = (() => {
+    const { intl } = this.context;
+    return new Form({
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: '',
+          validators: [required],
+        },
+      },
+    });
+  })();
+
+  submitForm() {
+    const { form } = this;
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSubmit } = this.props;
+        onSubmit(f.values());
+      },
+    });
+  }
+
+  render() {
+    const { intl } = this.context;
+    const { classes } = this.props;
+    const { form } = this;
+    return (
+      <div className={classes.form}>
+        <Input
+          className={classes.input}
+          {...form.$('name').bind()}
+          showLabel={false}
+          onEnterKey={this.submitForm.bind(this, form)}
+        />
+        <Button
+          className={classes.submitButton}
+          type="submit"
+          label={intl.formatMessage(messages.submitButton)}
+          onClick={this.submitForm.bind(this, form)}
+        />
+      </div>
+    );
+  }
+}
+
+export default CreateWorkspaceForm;
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
new file mode 100644
index 000000000..48090f608
--- /dev/null
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -0,0 +1,192 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import { Link } from 'react-router';
+import { Input, Button } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
+
+import Workspace from '../models/Workspace';
+import Service from '../../../models/Service';
+import Form from '../../../lib/Form';
+import { required } from '../../../helpers/validation-helpers';
+import ServiceListItem from './ServiceListItem';
+
+const messages = defineMessages({
+  buttonDelete: {
+    id: 'settings.workspace.form.buttonDelete',
+    defaultMessage: '!!!Delete workspace',
+  },
+  buttonSave: {
+    id: 'settings.workspace.form.buttonSave',
+    defaultMessage: '!!!Save workspace',
+  },
+  name: {
+    id: 'settings.workspace.form.name',
+    defaultMessage: '!!!Name',
+  },
+  yourWorkspaces: {
+    id: 'settings.workspace.form.yourWorkspaces',
+    defaultMessage: '!!!Your workspaces',
+  },
+  servicesInWorkspaceHeadline: {
+    id: 'settings.workspace.form.servicesInWorkspaceHeadline',
+    defaultMessage: '!!!Services in this Workspace',
+  },
+});
+
+const styles = () => ({
+  nameInput: {
+    height: 'auto',
+  },
+  serviceList: {
+    height: 'auto',
+  },
+});
+
+@injectSheet(styles) @observer
+class EditWorkspaceForm extends Component {
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isDeleting: PropTypes.bool.isRequired,
+    isSaving: PropTypes.bool.isRequired,
+    onDelete: PropTypes.func.isRequired,
+    onSave: PropTypes.func.isRequired,
+    services: PropTypes.arrayOf(PropTypes.instanceOf(Service)).isRequired,
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+  };
+
+  form = this.prepareWorkspaceForm(this.props.workspace);
+
+  componentWillReceiveProps(nextProps) {
+    const { workspace } = this.props;
+    if (workspace.id !== nextProps.workspace.id) {
+      this.form = this.prepareWorkspaceForm(nextProps.workspace);
+    }
+  }
+
+  prepareWorkspaceForm(workspace) {
+    const { intl } = this.context;
+    return new Form({
+      fields: {
+        name: {
+          label: intl.formatMessage(messages.name),
+          placeholder: intl.formatMessage(messages.name),
+          value: workspace.name,
+          validators: [required],
+        },
+        services: {
+          value: workspace.services.slice(),
+        },
+      },
+    });
+  }
+
+  submitForm(form) {
+    form.submit({
+      onSuccess: async (f) => {
+        const { onSave } = this.props;
+        const values = f.values();
+        onSave(values);
+      },
+      onError: async () => {},
+    });
+  }
+
+  toggleService(service) {
+    const servicesField = this.form.$('services');
+    const serviceIds = servicesField.value;
+    if (serviceIds.includes(service.id)) {
+      serviceIds.splice(serviceIds.indexOf(service.id), 1);
+    } else {
+      serviceIds.push(service.id);
+    }
+    servicesField.set(serviceIds);
+  }
+
+  render() {
+    const { intl } = this.context;
+    const {
+      classes,
+      isDeleting,
+      isSaving,
+      onDelete,
+      workspace,
+      services,
+    } = this.props;
+    const { form } = this;
+    const workspaceServices = form.$('services').value;
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <span className="settings__header-item">
+            <Link to="/settings/workspaces">
+              {intl.formatMessage(messages.yourWorkspaces)}
+            </Link>
+          </span>
+          <span className="separator" />
+          <span className="settings__header-item">
+            {workspace.name}
+          </span>
+        </div>
+        <div className="settings__body">
+          <div className={classes.nameInput}>
+            <Input {...form.$('name').bind()} />
+          </div>
+          <h2>{intl.formatMessage(messages.servicesInWorkspaceHeadline)}</h2>
+          <div className={classes.serviceList}>
+            {services.map(s => (
+              <ServiceListItem
+                key={s.id}
+                service={s}
+                isInWorkspace={workspaceServices.includes(s.id)}
+                onToggle={() => this.toggleService(s)}
+              />
+            ))}
+          </div>
+        </div>
+        <div className="settings__controls">
+          {/* ===== Delete Button ===== */}
+          {isDeleting ? (
+            <Button
+              label={intl.formatMessage(messages.buttonDelete)}
+              loaded={false}
+              buttonType="secondary"
+              className="settings__delete-button"
+              disabled
+            />
+          ) : (
+            <Button
+              buttonType="danger"
+              label={intl.formatMessage(messages.buttonDelete)}
+              className="settings__delete-button"
+              onClick={onDelete}
+            />
+          )}
+          {/* ===== Save Button ===== */}
+          {isSaving ? (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              loaded={!isSaving}
+              buttonType="secondary"
+              disabled
+            />
+          ) : (
+            <Button
+              type="submit"
+              label={intl.formatMessage(messages.buttonSave)}
+              onClick={this.submitForm.bind(this, form)}
+            />
+          )}
+        </div>
+      </div>
+    );
+  }
+}
+
+export default EditWorkspaceForm;
diff --git a/src/features/workspaces/components/ServiceListItem.js b/src/features/workspaces/components/ServiceListItem.js
new file mode 100644
index 000000000..146cc5a36
--- /dev/null
+++ b/src/features/workspaces/components/ServiceListItem.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer } from 'mobx-react';
+import injectSheet from 'react-jss';
+import { Toggle } from '@meetfranz/forms';
+
+import Service from '../../../models/Service';
+
+const styles = () => ({
+  service: {
+    height: 'auto',
+    display: 'flex',
+  },
+  name: {
+    marginTop: '4px',
+  },
+});
+
+@injectSheet(styles) @observer
+class ServiceListItem extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isInWorkspace: PropTypes.bool.isRequired,
+    onToggle: PropTypes.func.isRequired,
+    service: PropTypes.instanceOf(Service).isRequired,
+  };
+
+  render() {
+    const {
+      classes,
+      isInWorkspace,
+      onToggle,
+      service,
+    } = this.props;
+
+    return (
+      <div className={classes.service}>
+        <Toggle
+          checked={isInWorkspace}
+          onChange={onToggle}
+          label={service.name}
+        />
+      </div>
+    );
+  }
+}
+
+export default ServiceListItem;
diff --git a/src/features/workspaces/components/WorkspaceItem.js b/src/features/workspaces/components/WorkspaceItem.js
new file mode 100644
index 000000000..b2c2a4830
--- /dev/null
+++ b/src/features/workspaces/components/WorkspaceItem.js
@@ -0,0 +1,42 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { intlShape } from 'react-intl';
+import { observer } from 'mobx-react';
+import classnames from 'classnames';
+import Workspace from '../models/Workspace';
+
+// const messages = defineMessages({});
+
+@observer
+class WorkspaceItem extends Component {
+  static propTypes = {
+    workspace: PropTypes.instanceOf(Workspace).isRequired,
+    onItemClick: PropTypes.func.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { workspace, onItemClick } = this.props;
+    // const { intl } = this.context;
+
+    return (
+      <tr
+        className={classnames({
+          'workspace-table__row': true,
+        })}
+      >
+        <td
+          className="workspace-table__column-name"
+          onClick={() => onItemClick(workspace)}
+        >
+          {workspace.name}
+        </td>
+      </tr>
+    );
+  }
+}
+
+export default WorkspaceItem;
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
new file mode 100644
index 000000000..917807302
--- /dev/null
+++ b/src/features/workspaces/components/WorkspacesDashboard.js
@@ -0,0 +1,85 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, PropTypes as MobxPropTypes } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+
+import Loader from '../../../components/ui/Loader';
+import WorkspaceItem from './WorkspaceItem';
+import CreateWorkspaceForm from './CreateWorkspaceForm';
+
+const messages = defineMessages({
+  headline: {
+    id: 'settings.workspaces.headline',
+    defaultMessage: '!!!Your workspaces',
+  },
+  noServicesAdded: {
+    id: 'settings.workspaces.noWorkspacesAdded',
+    defaultMessage: '!!!You haven\'t added any workspaces yet.',
+  },
+});
+
+const styles = () => ({
+  createForm: {
+    height: 'auto',
+    marginBottom: '20px',
+  },
+});
+
+@observer @injectSheet(styles)
+class WorkspacesDashboard extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+    onCreateWorkspaceSubmit: PropTypes.func.isRequired,
+    onWorkspaceClick: PropTypes.func.isRequired,
+    workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const {
+      workspaces,
+      isLoading,
+      onCreateWorkspaceSubmit,
+      onWorkspaceClick,
+      classes,
+    } = this.props;
+    const { intl } = this.context;
+
+    return (
+      <div className="settings__main">
+        <div className="settings__header">
+          <h1>{intl.formatMessage(messages.headline)}</h1>
+        </div>
+        <div className="settings__body">
+          <div className={classes.body}>
+            <div className={classes.createForm}>
+              <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} />
+            </div>
+            {isLoading ? (
+              <Loader />
+            ) : (
+              <table className="workspace-table">
+                <tbody>
+                  {workspaces.map(workspace => (
+                    <WorkspaceItem
+                      key={workspace.id}
+                      workspace={workspace}
+                      onItemClick={w => onWorkspaceClick(w)}
+                    />
+                  ))}
+                </tbody>
+              </table>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default WorkspacesDashboard;
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
new file mode 100644
index 000000000..1b13bc2d4
--- /dev/null
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -0,0 +1,59 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+import EditWorkspaceForm from '../components/EditWorkspaceForm';
+import { workspacesState } from '../state';
+import ServicesStore from '../../../stores/ServicesStore';
+import Workspace from '../models/Workspace';
+
+@inject('stores', 'actions') @observer
+class EditWorkspaceScreen extends Component {
+  static propTypes = {
+    actions: PropTypes.shape({
+      workspace: PropTypes.shape({
+        delete: PropTypes.func.isRequired,
+      }),
+    }).isRequired,
+    stores: PropTypes.shape({
+      services: PropTypes.instanceOf(ServicesStore).isRequired,
+    }).isRequired,
+  };
+
+  onDelete = () => {
+    const { workspaceBeingEdited } = workspacesState;
+    const { actions } = this.props;
+    if (!workspaceBeingEdited) return null;
+    actions.workspaces.delete({ workspace: workspaceBeingEdited });
+  };
+
+  onSave = (values) => {
+    const { workspaceBeingEdited } = workspacesState;
+    const { actions } = this.props;
+    const workspace = new Workspace(
+      Object.assign({}, workspaceBeingEdited, values),
+    );
+    actions.workspaces.update({ workspace });
+  };
+
+  render() {
+    const { workspaceBeingEdited } = workspacesState;
+    const { stores } = this.props;
+    if (!workspaceBeingEdited) return null;
+    return (
+      <ErrorBoundary>
+        <EditWorkspaceForm
+          workspace={workspaceBeingEdited}
+          services={stores.services.all}
+          onDelete={this.onDelete}
+          onSave={this.onSave}
+          isDeleting={false}
+          isSaving={false}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default EditWorkspaceScreen;
diff --git a/src/features/workspaces/containers/WorkspacesScreen.js b/src/features/workspaces/containers/WorkspacesScreen.js
new file mode 100644
index 000000000..94e714255
--- /dev/null
+++ b/src/features/workspaces/containers/WorkspacesScreen.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { inject, observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import { workspacesState } from '../state';
+import WorkspacesDashboard from '../components/WorkspacesDashboard';
+import ErrorBoundary from '../../../components/util/ErrorBoundary';
+
+@inject('actions') @observer
+class WorkspacesScreen extends Component {
+  static propTypes = {
+    actions: PropTypes.shape({
+      workspace: PropTypes.shape({
+        edit: PropTypes.func.isRequired,
+      }),
+    }).isRequired,
+  };
+
+  render() {
+    const { actions } = this.props;
+    return (
+      <ErrorBoundary>
+        <WorkspacesDashboard
+          workspaces={workspacesState.workspaces}
+          isLoading={workspacesState.isLoading}
+          onCreateWorkspaceSubmit={data => actions.workspaces.create(data)}
+          onWorkspaceClick={w => actions.workspaces.edit({ workspace: w })}
+        />
+      </ErrorBoundary>
+    );
+  }
+}
+
+export default WorkspacesScreen;
diff --git a/src/features/workspaces/index.js b/src/features/workspaces/index.js
new file mode 100644
index 000000000..8091f49fc
--- /dev/null
+++ b/src/features/workspaces/index.js
@@ -0,0 +1,68 @@
+import { reaction, runInAction } from 'mobx';
+import WorkspacesStore from './store';
+import api from './api';
+import { workspacesState, resetState } from './state';
+
+const debug = require('debug')('Franz:feature:workspaces');
+
+let store = null;
+
+export const filterServicesByActiveWorkspace = (services) => {
+  const { isFeatureActive, activeWorkspace } = workspacesState;
+  if (isFeatureActive && activeWorkspace) {
+    return services.filter(s => activeWorkspace.services.includes(s.id));
+  }
+  return services;
+};
+
+export const getActiveWorkspaceServices = (services) => {
+  return filterServicesByActiveWorkspace(services);
+};
+
+export default function initWorkspaces(stores, actions) {
+  const { features, user } = stores;
+
+  // Toggle workspace feature
+  reaction(
+    () => (
+      features.features.isWorkspaceEnabled && (
+        !features.features.isWorkspacePremiumFeature || user.data.isPremium
+      )
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `workspaces` feature');
+        store = new WorkspacesStore(stores, api, actions, workspacesState);
+        store.initialize();
+        runInAction(() => { workspacesState.isFeatureActive = true; });
+      } else if (store) {
+        debug('Disabling `workspaces` feature');
+        runInAction(() => { workspacesState.isFeatureActive = false; });
+        store.teardown();
+        store = null;
+        resetState(); // Reset state to default
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+
+  // Update active service on workspace switches
+  reaction(() => ({
+    isFeatureActive: workspacesState.isFeatureActive,
+    activeWorkspace: workspacesState.activeWorkspace,
+  }), ({ isFeatureActive, activeWorkspace }) => {
+    if (!isFeatureActive) return;
+    if (activeWorkspace) {
+      const services = stores.services.allDisplayed;
+      const activeService = services.find(s => s.isActive);
+      const workspaceServices = filterServicesByActiveWorkspace(services);
+      const isActiveServiceInWorkspace = workspaceServices.includes(activeService);
+      if (!isActiveServiceInWorkspace) {
+        console.log(workspaceServices[0].id);
+        actions.service.setActive({ serviceId: workspaceServices[0].id });
+      }
+    }
+  });
+}
diff --git a/src/features/workspaces/models/Workspace.js b/src/features/workspaces/models/Workspace.js
new file mode 100644
index 000000000..6c73d7095
--- /dev/null
+++ b/src/features/workspaces/models/Workspace.js
@@ -0,0 +1,25 @@
+import { observable } from 'mobx';
+
+export default class Workspace {
+  id = null;
+
+  @observable name = null;
+
+  @observable order = null;
+
+  @observable services = [];
+
+  @observable userId = null;
+
+  constructor(data) {
+    if (!data.id) {
+      throw Error('Workspace requires Id');
+    }
+
+    this.id = data.id;
+    this.name = data.name;
+    this.order = data.order;
+    this.services.replace(data.services);
+    this.userId = data.userId;
+  }
+}
diff --git a/src/features/workspaces/state.js b/src/features/workspaces/state.js
new file mode 100644
index 000000000..963b96f81
--- /dev/null
+++ b/src/features/workspaces/state.js
@@ -0,0 +1,15 @@
+import { observable } from 'mobx';
+
+const defaultState = {
+  activeWorkspace: null,
+  isLoading: false,
+  isFeatureActive: false,
+  workspaces: [],
+  workspaceBeingEdited: null,
+};
+
+export const workspacesState = observable(defaultState);
+
+export function resetState() {
+  Object.assign(workspacesState, defaultState);
+}
diff --git a/src/features/workspaces/store.js b/src/features/workspaces/store.js
new file mode 100644
index 000000000..a2997a0d2
--- /dev/null
+++ b/src/features/workspaces/store.js
@@ -0,0 +1,114 @@
+import { observable, reaction, action } from 'mobx';
+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';
+
+const debug = require('debug')('Franz:feature:workspaces');
+
+export default class WorkspacesStore extends Store {
+  @observable allWorkspacesRequest = new CachedRequest(this.api, 'getUserWorkspaces');
+
+  constructor(stores, api, actions, state) {
+    super(stores, api, actions);
+    this.state = state;
+  }
+
+  setup() {
+    debug('fetching workspaces');
+    this.allWorkspacesRequest.execute();
+
+    /**
+     * Update the state workspaces array when workspaces request has results.
+     */
+    reaction(
+      () => this.allWorkspacesRequest.result,
+      workspaces => this._setWorkspaces(workspaces),
+    );
+    /**
+     * Update the loading state when workspace request is executing.
+     */
+    reaction(
+      () => this.allWorkspacesRequest.isExecuting,
+      isExecuting => this._setIsLoading(isExecuting),
+    );
+    /**
+     * Update the state with the workspace to be edited when route matches.
+     */
+    reaction(
+      () => ({
+        pathname: this.stores.router.location.pathname,
+        workspaces: this.state.workspaces,
+      }),
+      ({ pathname }) => {
+        const match = matchRoute('/settings/workspaces/edit/:id', pathname);
+        if (match) {
+          this.state.workspaceBeingEdited = this._getWorkspaceById(match.id);
+        }
+      },
+    );
+
+    workspaceActions.edit.listen(this._edit);
+    workspaceActions.create.listen(this._create);
+    workspaceActions.delete.listen(this._delete);
+    workspaceActions.update.listen(this._update);
+    workspaceActions.activate.listen(this._setActiveWorkspace);
+    workspaceActions.deactivate.listen(this._deactivateActiveWorkspace);
+  }
+
+  _getWorkspaceById = id => this.state.workspaces.find(w => w.id === id);
+
+  @action _setWorkspaces = (workspaces) => {
+    debug('setting user workspaces', workspaces.slice());
+    this.state.workspaces = workspaces.map(data => new Workspace(data));
+  };
+
+  @action _setIsLoading = (isLoading) => {
+    this.state.isLoading = isLoading;
+  };
+
+  @action _edit = ({ workspace }) => {
+    this.stores.router.push(`/settings/workspaces/edit/${workspace.id}`);
+  };
+
+  @action _create = async ({ name }) => {
+    try {
+      const result = await this.api.createWorkspace(name);
+      const workspace = new Workspace(result);
+      this.state.workspaces.push(workspace);
+      this._edit({ workspace });
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  @action _delete = async ({ workspace }) => {
+    try {
+      await this.api.deleteWorkspace(workspace);
+      this.state.workspaces.remove(workspace);
+      this.stores.router.push('/settings/workspaces');
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  @action _update = async ({ workspace }) => {
+    try {
+      await this.api.updateWorkspace(workspace);
+      const localWorkspace = this.state.workspaces.find(ws => ws.id === workspace.id);
+      Object.assign(localWorkspace, workspace);
+      this.stores.router.push('/settings/workspaces');
+    } catch (error) {
+      throw error;
+    }
+  };
+
+  @action _setActiveWorkspace = ({ workspace }) => {
+    this.state.activeWorkspace = workspace;
+  };
+
+  @action _deactivateActiveWorkspace = () => {
+    this.state.activeWorkspace = null;
+  };
+}
diff --git a/src/features/workspaces/styles/workspaces-table.scss b/src/features/workspaces/styles/workspaces-table.scss
new file mode 100644
index 000000000..6d0e7b4f5
--- /dev/null
+++ b/src/features/workspaces/styles/workspaces-table.scss
@@ -0,0 +1,53 @@
+@import '../../../styles/config';
+
+.theme__dark .workspace-table {
+  .workspace-table__column-info .mdi { color: $dark-theme-gray-lightest; }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $dark-theme-gray-darker;
+
+    &:hover { background: $dark-theme-gray-darker; }
+    &.workspace-table__row--disabled { color: $dark-theme-gray; }
+  }
+}
+
+.workspace-table {
+  width: 100%;
+
+  .workspace-table__toggle {
+    width: 60px;
+
+    .franz-form__field {
+      margin-bottom: 0;
+    }
+  }
+
+  .workspace-table__column-action {
+    width: 40px
+  }
+
+  .workspace-table__column-info {
+    width: 40px;
+
+    .mdi {
+      color: $theme-gray-light;
+      display: block;
+      font-size: 18px;
+    }
+  }
+
+  .workspace-table__row {
+    border-bottom: 1px solid $theme-gray-lightest;
+
+    &:hover {
+      cursor: initial;
+      background: $theme-gray-lightest;
+    }
+
+    &.workspace-table__row--disabled {
+      color: $theme-gray-light;
+    }
+  }
+
+  td { padding: 10px; }
+}
diff --git a/src/i18n/locales/de.json b/src/i18n/locales/de.json
index b5abb56d4..0c1fb8aa6 100644
--- a/src/i18n/locales/de.json
+++ b/src/i18n/locales/de.json
@@ -74,6 +74,9 @@
    "menu.window" : "Fenster",
    "menu.window.close" : "Schließen",
    "menu.window.minimize" : "Minimieren",
+   "menu.workspaces": "Workspaces",
+   "menu.workspaces.defaultWorkspace": "All services",
+   "menu.workspaces.addNewWorkspace": "Add New Workspace",
    "password.email.label" : "E-Mail Adresse",
    "password.headline" : "Passwort zurücksetzen",
    "password.link.login" : "An Deinem Konto anmelden",
@@ -158,6 +161,7 @@
    "settings.navigation.logout" : "Abmelden",
    "settings.navigation.settings" : "Einstellungen",
    "settings.navigation.yourServices" : "Deine Dienste",
+   "settings.navigation.yourWorkspaces": "Deine Workspaces",
    "settings.recipes.all" : "Alle Dienste",
    "settings.recipes.dev" : "Entwicklung",
    "settings.recipes.headline" : "Verfügbare Dienste",
@@ -216,6 +220,14 @@
    "settings.services.tooltip.isMuted" : "Alle Töne sind deaktiviert",
    "settings.services.tooltip.notificationsDisabled" : "Benachrichtigungen deaktiviert",
    "settings.services.updatedInfo" : "Deine Änderungen wurden gespeichert",
+   "settings.workspaces.headline": "Deine Workspaces",
+   "settings.workspace.add.form.submitButton": "Workspace erstellen",
+   "settings.workspace.add.form.name": "Name",
+   "settings.workspace.form.yourWorkspaces": "Deine Workspaces",
+   "settings.workspace.form.name": "Name",
+   "settings.workspace.form.buttonDelete": "Workspace löschen",
+   "settings.workspace.form.buttonSave": "Workspace speichern",
+   "settings.workspace.form.servicesInWorkspaceHeadline": "Services in diesem Workspace",
    "settings.user.form.accountType.company" : "Firma",
    "settings.user.form.accountType.individual" : "Einzelperson",
    "settings.user.form.accountType.label" : "Konto-Typ",
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 25ec027d8..2a51662a2 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -97,6 +97,7 @@
   "settings.invite.headline": "Invite Friends",
   "settings.navigation.availableServices": "Available services",
   "settings.navigation.yourServices": "Your services",
+  "settings.navigation.yourWorkspaces": "Your workspaces",
   "settings.navigation.account": "Account",
   "settings.navigation.settings": "Settings",
   "settings.navigation.inviteFriends": "Invite Friends",
@@ -199,6 +200,14 @@
   "settings.user.form.accountType.individual": "Individual",
   "settings.user.form.accountType.non-profit": "Non-Profit",
   "settings.user.form.accountType.company": "Company",
+  "settings.workspaces.headline": "Your workspaces",
+  "settings.workspace.add.form.submitButton": "Create Workspace",
+  "settings.workspace.add.form.name": "Name",
+  "settings.workspace.form.yourWorkspaces": "Your workspaces",
+  "settings.workspace.form.name": "Name",
+  "settings.workspace.form.buttonDelete": "Delete Workspace",
+  "settings.workspace.form.buttonSave": "Save Workspace",
+  "settings.workspace.form.servicesInWorkspaceHeadline": "Services in this Workspace",
   "subscription.type.free": "free",
   "subscription.type.month": "month",
   "subscription.type.year": "year",
@@ -267,7 +276,10 @@
   "menu.app.hideOthers": "Hide Others",
   "menu.app.unhide": "Unhide",
   "menu.app.quit": "Quit",
-  "menu.services.addNewService": "Add New Service...",
+  "menu.services.addNewService": "Add New Service",
+  "menu.workspaces": "Workspaces",
+  "menu.workspaces.defaultWorkspace": "All services",
+  "menu.workspaces.addNewWorkspace": "Add New Workspace",
   "validation.required": "{field} is required",
   "validation.email": "{field} is not valid",
   "validation.url": "{field} is not a valid URL",
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index c378619ad..1560dd285 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -3,6 +3,8 @@ import { observable, autorun, computed } from 'mobx';
 import { defineMessages } from 'react-intl';
 
 import { isMac, ctrlKey, cmdKey } from '../environment';
+import { workspacesState } from '../features/workspaces/state';
+import workspaceActions from '../features/workspaces/actions';
 
 const { app, Menu, dialog } = remote;
 
@@ -179,6 +181,18 @@ const menuItems = defineMessages({
     id: 'menu.services.addNewService',
     defaultMessage: '!!!Add New Service...',
   },
+  workspaces: {
+    id: 'menu.workspaces',
+    defaultMessage: '!!!Workspaces',
+  },
+  defaultWorkspace: {
+    id: 'menu.workspaces.defaultWorkspace',
+    defaultMessage: '!!!Default',
+  },
+  addNewWorkspace: {
+    id: 'menu.workspaces.addNewWorkspace',
+    defaultMessage: '!!!Add New Workspace...',
+  },
 });
 
 function getActiveWebview() {
@@ -266,6 +280,10 @@ const _templateFactory = intl => [
     submenu: [],
   },
   {
+    label: intl.formatMessage(menuItems.workspaces),
+    submenu: [],
+  },
+  {
     label: intl.formatMessage(menuItems.window),
     role: 'window',
     submenu: [
@@ -499,7 +517,9 @@ export default class FranzMenu {
   }
 
   _build() {
-    const serviceTpl = Object.assign([], this.serviceTpl); // need to clone object so we don't modify computed (cached) object
+    // need to clone object so we don't modify computed (cached) object
+    const serviceTpl = Object.assign([], this.serviceTpl);
+    const workspacesMenu = Object.assign([], this.workspacesMenu);
 
     if (window.franz === undefined) {
       return;
@@ -632,7 +652,7 @@ export default class FranzMenu {
         },
       );
 
-      tpl[4].submenu.unshift(about, {
+      tpl[5].submenu.unshift(about, {
         type: 'separator',
       });
     } else {
@@ -678,6 +698,8 @@ export default class FranzMenu {
       tpl[3].submenu = serviceTpl;
     }
 
+    tpl[4].submenu = workspacesMenu;
+
     this.currentTemplate = tpl;
     const menu = Menu.buildFromTemplate(tpl);
     Menu.setApplicationMenu(menu);
@@ -701,6 +723,51 @@ export default class FranzMenu {
     return [];
   }
 
+  @computed get workspacesMenu() {
+    const { workspaces, activeWorkspace } = workspacesState;
+    const { intl } = window.franz;
+    const menu = [];
+
+    // Add new workspace item:
+    menu.push({
+      label: intl.formatMessage(menuItems.addNewWorkspace),
+      accelerator: `${cmdKey}+Shift+N`,
+      click: () => {
+        this.actions.ui.openSettings({ path: 'workspaces' });
+      },
+      enabled: this.stores.user.isLoggedIn,
+    }, {
+      type: 'separator',
+    });
+
+    // Default workspace
+    menu.push({
+      label: intl.formatMessage(menuItems.defaultWorkspace),
+      accelerator: `${cmdKey}+Alt+1`,
+      type: 'radio',
+      checked: !activeWorkspace,
+      click: () => {
+        workspaceActions.deactivate();
+      },
+    });
+
+    // Workspace items
+    if (this.stores.user.isLoggedIn) {
+      workspaces.forEach((workspace, i) => menu.push({
+        label: workspace.name,
+        accelerator: i < 9 ? `${cmdKey}+Alt+${i + 2}` : null,
+        type: 'radio',
+        checked: activeWorkspace ? workspace.id === activeWorkspace.id : false,
+        click: () => {
+          workspaceActions.activate({ workspace });
+        },
+      }));
+    }
+
+    console.log(menu);
+    return menu;
+  }
+
   _getServiceName(service) {
     if (service.name) {
       return service.name;
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index d2842083c..b7130904b 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -7,6 +7,7 @@ import delayApp from '../features/delayApp';
 import spellchecker from '../features/spellchecker';
 import serviceProxy from '../features/serviceProxy';
 import basicAuth from '../features/basicAuth';
+import workspaces from '../features/workspaces';
 import shareFranz from '../features/shareFranz';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
@@ -38,7 +39,7 @@ export default class FeaturesStore extends Store {
 
   @computed get features() {
     if (this.stores.user.isLoggedIn) {
-      return this.featuresRequest.execute().result || DEFAULT_FEATURES_CONFIG;
+      return Object.assign({}, DEFAULT_FEATURES_CONFIG, this.featuresRequest.execute().result);
     }
 
     return DEFAULT_FEATURES_CONFIG;
@@ -57,6 +58,7 @@ export default class FeaturesStore extends Store {
     spellchecker(this.stores, this.actions);
     serviceProxy(this.stores, this.actions);
     basicAuth(this.stores, this.actions);
+    workspaces(this.stores, this.actions);
     shareFranz(this.stores, this.actions);
   }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index c63bef196..a86db8103 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -2,7 +2,7 @@ import {
   action,
   reaction,
   computed,
-  observable,
+  observable, runInAction,
 } from 'mobx';
 import { debounce, remove } from 'lodash';
 import ms from 'ms';
@@ -12,6 +12,8 @@ import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { matchRoute } from '../helpers/routing-helpers';
 import { gaEvent } from '../lib/analytics';
+import { workspacesState } from '../features/workspaces/state';
+import { filterServicesByActiveWorkspace, getActiveWorkspaceServices } from '../features/workspaces';
 
 const debug = require('debug')('Franz:ServiceStore');
 
@@ -98,7 +100,6 @@ export default class ServicesStore extends Store {
         return observable(services.slice().slice().sort((a, b) => a.order - b.order));
       }
     }
-
     return [];
   }
 
@@ -107,13 +108,16 @@ export default class ServicesStore extends Store {
   }
 
   @computed get allDisplayed() {
-    return this.stores.settings.all.app.showDisabledServices ? this.all : this.enabled;
+    const services = this.stores.settings.all.app.showDisabledServices ? this.all : this.enabled;
+    return filterServicesByActiveWorkspace(services);
   }
 
   // This is just used to avoid unnecessary rerendering of resource-heavy webviews
   @computed get allDisplayedUnordered() {
+    const { showDisabledServices } = this.stores.settings.all.app;
     const services = this.allServicesRequest.execute().result || [];
-    return this.stores.settings.all.app.showDisabledServices ? services : services.filter(service => service.isEnabled);
+    const filteredServices = showDisabledServices ? services : services.filter(service => service.isEnabled);
+    return getActiveWorkspaceServices(filteredServices);
   }
 
   @computed get filtered() {
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 784a04d3d..9ba7f5827 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -31,6 +31,9 @@ $mdi-font-path: '../node_modules/mdi/fonts';
 @import './invite.scss';
 @import './title-bar.scss';
 
+// Workspaces legacy css
+@import '../features/workspaces/styles/workspaces-table';
+
 // form
 @import './input.scss';
 @import './radio.scss';