12 files changed, 191 insertions, 129 deletions

diff --git a/src/components/auth/AuthLayout.js b/src/components/auth/AuthLayout.js
index 00eded728..047b10775 100644
--- a/src/components/auth/AuthLayout.js
+++ b/src/components/auth/AuthLayout.js
@@ -54,7 +54,7 @@ class AuthLayout extends Component {
       <>
         {isWindows && !isFullScreen && (
           <TitleBar
-            menu={window.ferdi.menu.template}
+            menu={window['ferdi'].menu.template}
             icon="assets/images/logo.svg"
           />
         )}
diff --git a/src/components/auth/Login.js b/src/components/auth/Login.js
index 9f3f636e3..6ed89afb6 100644
--- a/src/components/auth/Login.js
+++ b/src/components/auth/Login.js
@@ -168,12 +168,12 @@ class Login extends Component {
               <p className="error-message center">
                 {intl.formatMessage(messages.invalidCredentials)}
               </p>
-              {window.ferdi.stores.settings.all.app.server !==
+              {window['ferdi'].stores.settings.all.app.server !==
                 LIVE_FRANZ_API && (
                 <p className="error-message center">
                   {intl.formatMessage(messages.customServerQuestion)}{' '}
                   <Link
-                    to={`${window.ferdi.stores.settings.all.app.server.replace(
+                    to={`${window['ferdi'].stores.settings.all.app.server.replace(
                       API_VERSION,
                       '',
                     )}/import`}
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 4bacc547b..af27e8854 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -4,6 +4,7 @@ import { observer } from 'mobx-react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { TitleBar } from 'electron-react-titlebar/renderer';
 import injectSheet from 'react-jss';
+import { ipcRenderer } from 'electron';
 
 import InfoBar from '../ui/InfoBar';
 import { Component as BasicAuth } from '../../features/basicAuth';
@@ -14,7 +15,7 @@ import ErrorBoundary from '../util/ErrorBoundary';
 
 // import globalMessages from '../../i18n/globalMessages';
 
-import { isWindows } from '../../environment';
+import { isWindows, isMac } from '../../environment';
 import WorkspaceSwitchingIndicator from '../../features/workspaces/components/WorkspaceSwitchingIndicator';
 import { workspaceStore } from '../../features/workspaces';
 import AppUpdateInfoBar from '../AppUpdateInfoBar';
@@ -57,8 +58,20 @@ const styles = theme => ({
         : `translateX(-${theme.workspaces.drawer.width}px)`;
     },
   },
+  titleBar: {
+    display: 'block',
+    zIndex: 1,
+    width: '100%',
+    height: '23px',
+    position: 'absolute',
+    top: 0,
+  },
 });
 
+const toggleFullScreen = () => {
+  ipcRenderer.send('window.toolbar-double-clicked');
+};
+
 @injectSheet(styles)
 @observer
 class AppLayout extends Component {
@@ -115,10 +128,16 @@ class AppLayout extends Component {
         <div className="app">
           {isWindows && !isFullScreen && (
             <TitleBar
-              menu={window.ferdi.menu.template}
+              menu={window['ferdi'].menu.template}
               icon="assets/images/logo.svg"
             />
           )}
+          {isMac && !isFullScreen && (
+            <span
+              onDoubleClick={toggleFullScreen}
+              className={classes.titleBar}
+            />
+          )}
           <div className={`app__content ${classes.appContent}`}>
             {workspacesDrawer}
             {sidebar}
diff --git a/src/components/layout/Sidebar.js b/src/components/layout/Sidebar.js
index fc33a3c58..18492be80 100644
--- a/src/components/layout/Sidebar.js
+++ b/src/components/layout/Sidebar.js
@@ -14,7 +14,6 @@ import {
   addNewServiceShortcutKey,
   muteFerdiShortcutKey,
 } from '../../environment';
-import { workspaceStore } from '../../features/workspaces';
 import { todosStore } from '../../features/todos';
 import { todoActions } from '../../features/todos/actions';
 import AppStore from '../../stores/AppStore';
@@ -69,6 +68,7 @@ class Sidebar extends Component {
     toggleAudio: PropTypes.func.isRequired,
     toggleDarkMode: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
@@ -159,8 +159,7 @@ class Sidebar extends Component {
                 <i className="mdi mdi-lock" />
               </button>
             ) : null}
-            {todosStore.isFeatureEnabled &&
-            todosStore.isFeatureEnabledByUser ? (
+            {todosStore.isFeatureEnabledByUser ? (
               <button
                 type="button"
                 onClick={() => {
@@ -178,23 +177,21 @@ class Sidebar extends Component {
                 <i className="mdi mdi-check-all" />
               </button>
             ) : null}
-            {workspaceStore.isFeatureEnabled ? (
-              <button
-                type="button"
-                onClick={() => {
-                  toggleWorkspaceDrawer();
-                  this.updateToolTip();
-                }}
-                className={`sidebar__button sidebar__button--workspaces ${
-                  isWorkspaceDrawerOpen ? 'is-active' : ''
-                }`}
-                data-tip={`${intl.formatMessage(
-                  workspaceToggleMessage,
-                )} (${workspaceToggleShortcutKey(false)})`}
-              >
-                <i className="mdi mdi-view-grid" />
-              </button>
-            ) : null}
+            <button
+              type="button"
+              onClick={() => {
+                toggleWorkspaceDrawer();
+                this.updateToolTip();
+              }}
+              className={`sidebar__button sidebar__button--workspaces ${
+                isWorkspaceDrawerOpen ? 'is-active' : ''
+              }`}
+              data-tip={`${intl.formatMessage(
+                workspaceToggleMessage,
+              )} (${workspaceToggleShortcutKey(false)})`}
+            >
+              <i className="mdi mdi-view-grid" />
+            </button>
             <button
               type="button"
               onClick={() => {
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 185d41175..2562c09ce 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -30,9 +30,14 @@ class ServiceWebview extends Component {
           this.webview.view.addEventListener('console-message', e => {
             debug('Service logged a message:', e.message);
           });
+          this.webview.view.addEventListener('did-navigate', () => {
+            document.title = `Ferdi - ${this.props.service.name} ${this.props.service.dialogTitle
+              ? ` - ${this.props.service.dialogTitle}`
+              : ''
+              } ${`- ${this.props.service._webview.getTitle()}`}`;
+          })
         }
-      },
-    );
+      })
   }
 
   componentWillUnmount() {
@@ -47,6 +52,12 @@ class ServiceWebview extends Component {
     if (this.props.service.isActive) {
       webview.view.blur();
       webview.view.focus();
+      window.setTimeout(() => {
+        document.title = `Ferdi - ${this.props.service.name} ${this.props.service.dialogTitle
+          ? ` - ${this.props.service.dialogTitle}`
+          : ''
+          } ${`- ${this.props.service._webview.getTitle()}`}`;
+      }, 100);
     } else {
       debug('Refocus not required - Not active service');
     }
@@ -92,9 +103,8 @@ class ServiceWebview extends Component {
         }
         allowpopups
         nodeintegration
-        webpreferences={`spellcheck=${
-          isSpellcheckerEnabled ? 1 : 0
-        }, contextIsolation=1, enableRemoteModule=1`}
+        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0
+          }, contextIsolation=1, enableRemoteModule=1`}
       />
     );
   }
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 69a12e982..3049b6efa 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -21,6 +21,7 @@ class TabBarSortableList extends Component {
     hibernateService: PropTypes.func.isRequired,
     wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
@@ -39,6 +40,7 @@ class TabBarSortableList extends Component {
       wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
+      showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
 
@@ -65,6 +67,7 @@ class TabBarSortableList extends Component {
             openSettings={openSettings}
             showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
             showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
+            showServiceNameSetting={showServiceNameSetting}
           />
         ))}
       </ul>
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index ed8430b89..3ea6c5da2 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -132,6 +132,7 @@ class TabItem extends Component {
     hibernateService: PropTypes.func.isRequired,
     wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
     stores: PropTypes.shape({
       settings: PropTypes.instanceOf(SettingsStore).isRequired,
@@ -219,6 +220,7 @@ class TabItem extends Component {
       wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
+      showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
     const { intl } = this.props;
@@ -331,6 +333,13 @@ class TabItem extends Component {
       );
     }
 
+    let errorBadge = null;
+    if ( service.isError ) {
+      errorBadge=(
+        <i className = " mdi mdi-exclamation tab-item__error-icon"/>
+      )
+    }
+
     return (
       <li
         className={classnames({
@@ -340,6 +349,7 @@ class TabItem extends Component {
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
           'is-disabled': !service.isEnabled,
+          'is-label-enabled': showServiceNameSetting,
         })}
         onClick={clickHandler}
         onContextMenu={() => menu.popup()}
@@ -349,8 +359,14 @@ class TabItem extends Component {
             : ''
         }`}
       >
-        <img src={service.icon} className="tab-item__icon" alt="" />
+
+        {showServiceNameSetting? <div>
+          <img src={service.icon} className="tab-item__icon" alt="" />
+          <span className="tab-item__label">{service.name}</span>
+        </div> : <img src={service.icon} className="tab-item__icon" alt="" />}
+
         {notificationBadge}
+        {errorBadge}
         {IS_SERVICE_DEBUGGING_ENABLED && (
           <>
             <div
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 4ab0e8611..94d6f33c1 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -23,6 +23,7 @@ class TabBar extends Component {
     wakeUpService: PropTypes.func.isRequired,
     useVerticalStyle: PropTypes.bool.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
+    showServiceNameSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
 
@@ -82,6 +83,7 @@ class TabBar extends Component {
       deleteService,
       useVerticalStyle,
       showMessageBadgeWhenMutedSetting,
+      showServiceNameSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
 
@@ -110,6 +112,7 @@ class TabBar extends Component {
           lockAxis={axis}
           helperClass="is-reordering"
           showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
+          showServiceNameSetting={showServiceNameSetting}
           showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
         />
       </div>
diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 18a71fdeb..dbb1365b0 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -6,7 +6,6 @@ import { RouterStore } from 'mobx-react-router';
 
 import { LOCAL_SERVER, LIVE_FERDI_API, LIVE_FRANZ_API } from '../../../config';
 import Link from '../../ui/Link';
-import { workspaceStore } from '../../../features/workspaces';
 import UIStore from '../../../stores/UIStore';
 import SettingsStore from '../../../stores/SettingsStore';
 import UserStore from '../../../stores/UserStore';
@@ -117,17 +116,15 @@ class SettingsNavigation extends Component {
           {intl.formatMessage(messages.yourServices)}{' '}
           <span className="badge">{serviceCount}</span>
         </Link>
-        {workspaceStore.isFeatureEnabled ? (
-          <Link
-            to="/settings/workspaces"
-            className="settings-navigation__link"
-            activeClassName="is-active"
-            disabled={!isLoggedIn}
-          >
-            {intl.formatMessage(messages.yourWorkspaces)}{' '}
-            <span className="badge">{workspaceCount}</span>
-          </Link>
-        ) : null}
+        <Link
+          to="/settings/workspaces"
+          className="settings-navigation__link"
+          activeClassName="is-active"
+          disabled={!isLoggedIn}
+        >
+          {intl.formatMessage(messages.yourWorkspaces)}{' '}
+          <span className="badge">{workspaceCount}</span>
+        </Link>
         {!isUsingWithoutAccount && (
           <Link
             to="/settings/user"
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 948e9ccd5..54f2025e5 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -194,9 +194,7 @@ class EditSettingsForm extends Component {
     isClearingAllCache: PropTypes.bool.isRequired,
     onClearAllCache: PropTypes.func.isRequired,
     getCacheSize: PropTypes.func.isRequired,
-    isTodosEnabled: PropTypes.bool.isRequired,
     isTodosActivated: PropTypes.bool.isRequired,
-    isWorkspaceEnabled: PropTypes.bool.isRequired,
     automaticUpdates: PropTypes.bool.isRequired,
     isDarkmodeEnabled: PropTypes.bool.isRequired,
     isAdaptableDarkModeEnabled: PropTypes.bool.isRequired,
@@ -244,8 +242,6 @@ class EditSettingsForm extends Component {
       isClearingAllCache,
       onClearAllCache,
       getCacheSize,
-      isTodosEnabled,
-      isWorkspaceEnabled,
       automaticUpdates,
       isDarkmodeEnabled,
       isTodosActivated,
@@ -265,7 +261,7 @@ class EditSettingsForm extends Component {
     }
 
     const { lockingFeatureEnabled, scheduledDNDEnabled } =
-      window.ferdi.stores.settings.all.app;
+      window['ferdi'].stores.settings.all.app;
 
     let cacheSize;
     let notCleared;
@@ -414,14 +410,12 @@ class EditSettingsForm extends Component {
 
                 <Hr />
 
-                {isWorkspaceEnabled && (
-                  <>
-                    <Toggle field={form.$('keepAllWorkspacesLoaded')} />
-                    <Hr />
-                  </>
-                )}
+                <>
+                  <Toggle field={form.$('keepAllWorkspacesLoaded')} />
+                  <Hr />
+                </>
 
-                {isTodosEnabled && !hasAddedTodosAsService && (
+                {!hasAddedTodosAsService && (
                   <>
                     <Toggle field={form.$('enableTodos')} />
                     {isTodosActivated && (
@@ -511,6 +505,7 @@ class EditSettingsForm extends Component {
             {this.state.activeSetttingsTab === 'appearance' && (
               <div>
                 <Toggle field={form.$('showDisabledServices')} />
+                <Toggle field={form.$('showServiceName')} />
                 <Toggle field={form.$('showMessageBadgeWhenMuted')} />
 
                 {isMac && <Toggle field={form.$('showDragArea')} />}
@@ -768,7 +763,7 @@ class EditSettingsForm extends Component {
                         name: 'Nightly builds',
                       }}
                       onChange={
-                        window.ferdi.features.nightlyBuilds.toggleFeature
+                        window['ferdi'].features.nightlyBuilds.toggleFeature
                       }
                     />
                     {updateIsReadyToInstall ? (
diff --git a/src/components/ui/Button.js b/src/components/ui/Button.js
new file mode 100644
index 000000000..67c801d98
--- /dev/null
+++ b/src/components/ui/Button.js
@@ -0,0 +1,95 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { observer, inject } from 'mobx-react';
+import Loader from 'react-loader';
+import classnames from 'classnames';
+
+@inject('stores')
+@observer
+class Button extends Component {
+  static propTypes = {
+    className: PropTypes.string,
+    label: PropTypes.string.isRequired,
+    disabled: PropTypes.bool,
+    onClick: PropTypes.func,
+    type: PropTypes.string,
+    buttonType: PropTypes.string,
+    loaded: PropTypes.bool,
+    htmlForm: PropTypes.string,
+    stores: PropTypes.shape({
+      settings: PropTypes.shape({
+        app: PropTypes.shape({
+          accentColor: PropTypes.string.isRequired,
+        }).isRequired,
+      }).isRequired,
+    }).isRequired,
+  };
+
+  static defaultProps = {
+    className: null,
+    disabled: false,
+    onClick: () => {},
+    type: 'button',
+    buttonType: '',
+    loaded: true,
+    htmlForm: '',
+  };
+
+  element = null;
+
+  render() {
+    const {
+      label,
+      className,
+      disabled,
+      onClick,
+      type,
+      buttonType,
+      loaded,
+      htmlForm,
+    } = this.props;
+
+    const buttonProps = {
+      className: classnames({
+        'franz-form__button': true,
+        [`franz-form__button--${buttonType}`]: buttonType,
+        [`${className}`]: className,
+      }),
+      type,
+    };
+
+    if (disabled) {
+      buttonProps.disabled = true;
+    }
+
+    if (onClick) {
+      buttonProps.onClick = onClick;
+    }
+
+    if (htmlForm) {
+      buttonProps.form = htmlForm;
+    }
+
+    return (
+      // disabling rule as button has type defined in `buttonProps`
+      /* eslint-disable react/button-has-type */
+      <button {...buttonProps}>
+        <Loader
+          loaded={loaded}
+          lines={10}
+          scale={0.4}
+          color={
+            buttonType !== 'secondary'
+              ? '#FFF'
+              : this.props.stores.settings.app.accentColor
+          }
+          component="span"
+        />
+        {label}
+      </button>
+      /* eslint-enable react/button-has-type */
+    );
+  }
+}
+
+export default Button;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
deleted file mode 100644
index aac080fda..000000000
--- a/src/components/ui/Button.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Component } from 'react';
-import { observer, inject } from 'mobx-react';
-import Loader from 'react-loader';
-import classnames from 'classnames';
-import { FerdiStores } from '../../stores.types';
-
-type Props = {
-  className: string;
-  label: string;
-  disabled: boolean;
-  onClick: () => void;
-  type: 'button' | 'submit' | 'reset';
-  buttonType: string;
-  loaded: boolean;
-  htmlForm: string;
-  stores: FerdiStores;
-};
-
-@inject('stores')
-@observer
-class Button extends Component<Props> {
-  static defaultProps = {
-    className: null,
-    disabled: false,
-    onClick: () => {},
-    type: 'button',
-    buttonType: '',
-    loaded: true,
-    htmlForm: '',
-  };
-
-  render() {
-    const {
-      label,
-      className,
-      disabled,
-      onClick,
-      type,
-      buttonType,
-      loaded,
-      htmlForm,
-    } = this.props;
-
-    return (
-      <button
-        className={classnames({
-          'franz-form__button': true,
-          [`franz-form__button--${buttonType}`]: buttonType,
-          [`${className}`]: className,
-        })}
-        disabled={disabled}
-        type={type}
-        onClick={onClick}
-        form={htmlForm}
-      >
-        <Loader
-          loaded={loaded}
-          lines={10}
-          scale={0.4}
-          color={
-            buttonType !== 'secondary'
-              ? '#FFF'
-              : this.props.stores.settings.app.accentColor
-          }
-          component="span"
-        />
-        {label}
-      </button>
-    );
-  }
-}
-
-export default Button;