chore: merge from nightly branch into release branch in prep for next beta

10 files changed, 204 insertions, 207 deletions

diff --git a/src/components/services/content/ConnectionLostBanner.js b/src/components/services/content/ConnectionLostBanner.js
index e54a88faa..ebe863333 100644
--- a/src/components/services/content/ConnectionLostBanner.js
+++ b/src/components/services/content/ConnectionLostBanner.js
@@ -5,9 +5,7 @@ import injectSheet from 'react-jss';
 import { Icon } from '@meetfranz/ui';
 import { intlShape, defineMessages } from 'react-intl';
 
-import {
-  mdiAlert,
-} from '@mdi/js';
+import { mdiAlert } from '@mdi/js';
 import { LIVE_API_FERDI_WEBSITE } from '../../../config';
 // import { Button } from '@meetfranz/forms';
 
@@ -26,6 +24,12 @@ const messages = defineMessages({
   },
 });
 
+let buttonTransition = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  buttonTransition = 'opacity 0.25s';
+}
+
 const styles = theme => ({
   root: {
     background: theme.colorBackground,
@@ -47,7 +51,7 @@ const styles = theme => ({
     opacity: 0.7,
   },
   button: {
-    transition: 'opacity 0.25s',
+    transition: buttonTransition,
     color: theme.colorText,
     border: [1, 'solid', theme.colorText],
     borderRadius: theme.borderRadiusSmall,
@@ -65,13 +69,14 @@ const styles = theme => ({
   },
 });
 
-@injectSheet(styles) @observer
+@injectSheet(styles)
+@observer
 class ConnectionLostBanner extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     name: PropTypes.string.isRequired,
     reload: PropTypes.func.isRequired,
-  }
+  };
 
   static contextTypes = {
     intl: intlShape,
@@ -80,20 +85,13 @@ class ConnectionLostBanner extends Component {
   inputRef = React.createRef();
 
   render() {
-    const {
-      classes,
-      name,
-      reload,
-    } = this.props;
+    const { classes, name, reload } = this.props;
 
     const { intl } = this.context;
 
     return (
       <div className={classes.root}>
-        <Icon
-          icon={mdiAlert}
-          className={classes.icon}
-        />
+        <Icon icon={mdiAlert} className={classes.icon} />
         <p>
           {intl.formatMessage(messages.text, { name })}
           <br />
@@ -104,11 +102,7 @@ class ConnectionLostBanner extends Component {
             {intl.formatMessage(messages.moreInformation)}
           </a>
         </p>
-        <button
-          type="button"
-          className={classes.button}
-          onClick={reload}
-        >
+        <button type="button" className={classes.button} onClick={reload}>
           {intl.formatMessage(messages.cta)}
         </button>
       </div>
diff --git a/src/components/services/content/ErrorHandlers/styles.js b/src/components/services/content/ErrorHandlers/styles.js
index 9e2509ee5..72d62f5e3 100644
--- a/src/components/services/content/ErrorHandlers/styles.js
+++ b/src/components/services/content/ErrorHandlers/styles.js
@@ -1,4 +1,4 @@
-export default theme => ({
+export default (theme) => ({
   component: {
     left: 0,
     position: 'absolute',
diff --git a/src/components/services/content/ServiceRestricted.js b/src/components/services/content/ServiceRestricted.js
deleted file mode 100644
index 4b8d926aa..000000000
--- a/src/components/services/content/ServiceRestricted.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { observer } from 'mobx-react';
-import { defineMessages, intlShape } from 'react-intl';
-
-import { serviceLimitStore } from '../../../features/serviceLimit';
-import Button from '../../ui/Button';
-import { RESTRICTION_TYPES } from '../../../models/Service';
-
-const messages = defineMessages({
-  headlineServiceLimit: {
-    id: 'service.restrictedHandler.serviceLimit.headline',
-    defaultMessage: '!!!You have reached your service limit.',
-  },
-  textServiceLimit: {
-    id: 'service.restrictedHandler.serviceLimit.text',
-    defaultMessage: '!!!Please upgrade your account to use more than {count} services.',
-  },
-  headlineCustomUrl: {
-    id: 'service.restrictedHandler.customUrl.headline',
-    defaultMessage: '!!!Franz Professional Plan required',
-  },
-  textCustomUrl: {
-    id: 'service.restrictedHandler.customUrl.text',
-    defaultMessage: '!!!Please upgrade to the Franz Professional plan to use custom urls & self hosted services.',
-  },
-  action: {
-    id: 'service.restrictedHandler.action',
-    defaultMessage: '!!!Upgrade Account',
-  },
-});
-
-export default @observer class ServiceRestricted extends Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    upgrade: PropTypes.func.isRequired,
-    type: PropTypes.number.isRequired,
-  };
-
-  static contextTypes = {
-    intl: intlShape,
-  };
-
-  countdownInterval = null;
-
-  countdownIntervalTimeout = 1000;
-
-  render() {
-    const {
-      name,
-      upgrade,
-      type,
-    } = this.props;
-    const { intl } = this.context;
-
-    return (
-      <div className="services__info-layer">
-        {type === RESTRICTION_TYPES.SERVICE_LIMIT && (
-          <>
-            <h1>{intl.formatMessage(messages.headlineServiceLimit)}</h1>
-            <p>{intl.formatMessage(messages.textServiceLimit, { count: serviceLimitStore.serviceLimit })}</p>
-          </>
-        )}
-        {type === RESTRICTION_TYPES.CUSTOM_URL && (
-          <>
-            <h1>{intl.formatMessage(messages.headlineCustomUrl)}</h1>
-            <p>{intl.formatMessage(messages.textCustomUrl)}</p>
-          </>
-        )}
-        <Button
-          label={intl.formatMessage(messages.action, { name })}
-          buttonType="inverted"
-          onClick={() => upgrade()}
-        />
-      </div>
-    );
-  }
-}
diff --git a/src/components/services/content/ServiceView.js b/src/components/services/content/ServiceView.js
index 17d2db5a0..3fc084ff0 100644
--- a/src/components/services/content/ServiceView.js
+++ b/src/components/services/content/ServiceView.js
@@ -145,19 +145,17 @@ export default @inject('stores', 'actions') @observer class ServiceView extends
           </>
         ) : (
           <>
-            {(!service.isHibernating || service.isHibernationEnabled) ? (
+            {!service.isHibernating ? (
               <>
                 {showNavBar && (
                   <WebControlsScreen service={service} />
                 )}
-                {!service.isHibernating && (
-                  <ServiceWebview
-                    service={service}
-                    setWebviewReference={setWebviewReference}
-                    detachService={detachService}
-                    isSpellcheckerEnabled={isSpellcheckerEnabled}
-                  />
-                )}
+                <ServiceWebview
+                  service={service}
+                  setWebviewReference={setWebviewReference}
+                  detachService={detachService}
+                  isSpellcheckerEnabled={isSpellcheckerEnabled}
+                />
               </>
             ) : (
               <div>
diff --git a/src/components/services/content/ServiceWebview.js b/src/components/services/content/ServiceWebview.js
index 9e5fed996..3b499a5db 100644
--- a/src/components/services/content/ServiceWebview.js
+++ b/src/components/services/content/ServiceWebview.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { observer } from 'mobx-react';
 import { observable, reaction } from 'mobx';
 import ElectronWebView from 'react-electron-web-view';
-import path from 'path';
+import { join } from 'path';
 
 import ServiceModel from '../../../models/Service';
 
@@ -59,7 +59,7 @@ class ServiceWebview extends Component {
       isSpellcheckerEnabled,
     } = this.props;
 
-    const preloadScript = path.join(__dirname, '../../../', 'webview', 'recipe.js');
+    const preloadScript = join(__dirname, '..', '..', '..', 'webview', 'recipe.js');
 
     return (
       <ElectronWebView
@@ -83,7 +83,7 @@ class ServiceWebview extends Component {
         useragent={service.userAgent}
         disablewebsecurity={service.recipe.disablewebsecurity ? true : undefined}
         allowpopups
-        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}, contextIsolation=false`}
+        webpreferences={`spellcheck=${isSpellcheckerEnabled ? 1 : 0}`}
       />
     );
   }
diff --git a/src/components/services/content/Services.js b/src/components/services/content/Services.js
index caa3cf9aa..bb93ff7d4 100644
--- a/src/components/services/content/Services.js
+++ b/src/components/services/content/Services.js
@@ -30,7 +30,7 @@ const messages = defineMessages({
   },
   serverInfo: {
     id: 'services.serverInfo',
-    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner.',
+    defaultMessage: '!!!Optionally, you can change your Ferdi server by clicking the cog in the bottom left corner. If you are switching over (from one of the hosted servers) to using Ferdi without an account, please be informed that you can export your data from that server and subsequently import it using the Help menu to resurrect all your workspaces and configured services!',
   },
 });
 
@@ -54,7 +54,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
     openSettings: PropTypes.func.isRequired,
     update: PropTypes.func.isRequired,
     userHasCompletedSignup: PropTypes.bool.isRequired,
-    hasActivatedTrial: PropTypes.bool.isRequired,
     classes: PropTypes.object.isRequired,
     actions: PropTypes.object.isRequired,
     isSpellcheckerEnabled: PropTypes.bool.isRequired,
@@ -109,7 +108,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
       openSettings,
       update,
       userHasCompletedSignup,
-      hasActivatedTrial,
       classes,
       isSpellcheckerEnabled,
     } = this.props;
@@ -123,7 +121,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
 
     return (
       <div className="services">
-        {(userHasCompletedSignup || hasActivatedTrial) && (
+        {userHasCompletedSignup && (
           <div className={classes.confettiContainer}>
             <Confetti
               width={window.width}
@@ -169,7 +167,7 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
             </div>
           </Appear>
         )}
-        {services.filter(service => !service.isTodosService).map(service => (
+        {services.filter((service) => !service.isTodosService).map((service) => (
           <ServiceView
             key={service.id}
             service={service}
@@ -186,7 +184,6 @@ export default @injectSheet(styles) @inject('actions') @observer class Services
               },
               redirect: false,
             })}
-            upgrade={() => openSettings({ path: 'user' })}
             isSpellcheckerEnabled={isSpellcheckerEnabled}
           />
         ))}
diff --git a/src/components/services/content/WebviewCrashHandler.js b/src/components/services/content/WebviewCrashHandler.js
index b62940c06..10ff0bbbb 100644
--- a/src/components/services/content/WebviewCrashHandler.js
+++ b/src/components/services/content/WebviewCrashHandler.js
@@ -47,7 +47,7 @@ export default @observer class WebviewCrashHandler extends Component {
     const { reload } = this.props;
 
     this.countdownInterval = setInterval(() => {
-      this.setState(prevState => ({
+      this.setState((prevState) => ({
         countdown: prevState.countdown - this.countdownIntervalTimeout,
       }));
 
diff --git a/src/components/services/tabs/TabBarSortableList.js b/src/components/services/tabs/TabBarSortableList.js
index 489027d57..1a389991d 100644
--- a/src/components/services/tabs/TabBarSortableList.js
+++ b/src/components/services/tabs/TabBarSortableList.js
@@ -14,9 +14,12 @@ class TabBarSortableList extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    hibernateService: PropTypes.func.isRequired,
+    wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   }
@@ -28,9 +31,12 @@ class TabBarSortableList extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       disableService,
       enableService,
+      hibernateService,
+      wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
@@ -50,23 +56,17 @@ class TabBarSortableList extends Component {
             reload={() => reload({ serviceId: service.id })}
             toggleNotifications={() => toggleNotifications({ serviceId: service.id })}
             toggleAudio={() => toggleAudio({ serviceId: service.id })}
+            toggleDarkMode={() => toggleDarkMode({ serviceId: service.id })}
             deleteService={() => deleteService({ serviceId: service.id })}
             disableService={() => disableService({ serviceId: service.id })}
             enableService={() => enableService({ serviceId: service.id })}
+            hibernateService={() => hibernateService({ serviceId: service.id })}
+            wakeUpService={() => wakeUpService({ serviceId: service.id })}
             openSettings={openSettings}
             showMessageBadgeWhenMutedSetting={showMessageBadgeWhenMutedSetting}
             showMessageBadgesEvenWhenMuted={showMessageBadgesEvenWhenMuted}
           />
         ))}
-        {/* <li>
-          <button
-            className="sidebar__add-service"
-            onClick={() => openSettings({ path: 'recipes' })}
-            data-tip={`${intl.formatMessage(messages.addNewService)} (${ctrlKey}+N)`}
-          >
-            <span className="mdi mdi-plus" />
-          </button>
-        </li> */}
       </ul>
     );
   }
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 5c3149a11..6a6d2c8c5 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -1,6 +1,4 @@
-import {
-  Menu, dialog, app, getCurrentWindow,
-} from '@electron/remote';
+import { Menu, dialog, app, getCurrentWindow } from '@electron/remote';
 import React, { Component } from 'react';
 import { defineMessages, intlShape } from 'react-intl';
 import PropTypes from 'prop-types';
@@ -12,9 +10,11 @@ import ms from 'ms';
 
 import { observable, autorun } from 'mobx';
 import ServiceModel from '../../../models/Service';
-import { ctrlKey, cmdKey } from '../../../environment';
+import { shortcutKey } from '../../../environment';
 
-const IS_SERVICE_DEBUGGING_ENABLED = (localStorage.getItem('debug') || '').includes('Ferdi:Service');
+const IS_SERVICE_DEBUGGING_ENABLED = (
+  localStorage.getItem('debug') || ''
+).includes('Ferdi:Service');
 
 const messages = defineMessages({
   reload: {
@@ -41,6 +41,14 @@ const messages = defineMessages({
     id: 'tabs.item.enableAudio',
     defaultMessage: '!!!Enable audio',
   },
+  enableDarkMode: {
+    id: 'tabs.item.enableDarkMode',
+    defaultMessage: '!!!Enable Dark mode',
+  },
+  disableDarkMode: {
+    id: 'tabs.item.disableDarkMode',
+    defaultMessage: '!!!Disable Dark mode',
+  },
   disableService: {
     id: 'tabs.item.disableService',
     defaultMessage: '!!!Disable Service',
@@ -49,16 +57,35 @@ const messages = defineMessages({
     id: 'tabs.item.enableService',
     defaultMessage: '!!!Enable Service',
   },
+  hibernateService: {
+    id: 'tabs.item.hibernateService',
+    defaultMessage: '!!!Hibernate Service',
+  },
+  wakeUpService: {
+    id: 'tabs.item.wakeUpService',
+    defaultMessage: '!!!Wake Up Service',
+  },
   deleteService: {
     id: 'tabs.item.deleteService',
     defaultMessage: '!!!Delete Service',
   },
   confirmDeleteService: {
     id: 'tabs.item.confirmDeleteService',
-    defaultMessage: '!!!Do you really want to delete the {serviceName} service?',
+    defaultMessage:
+      '!!!Do you really want to delete the {serviceName} service?',
   },
 });
 
+let pollIndicatorTransition = 'none';
+let polledTransition = 'none';
+let pollAnsweredTransition = 'none';
+
+if (window && window.matchMedia('(prefers-reduced-motion: no-preference)')) {
+  pollIndicatorTransition = 'background 0.5s';
+  polledTransition = 'background 0.1s';
+  pollAnsweredTransition = 'background 0.1s';
+}
+
 const styles = {
   pollIndicator: {
     position: 'absolute',
@@ -67,7 +94,7 @@ const styles = {
     height: 10,
     borderRadius: 5,
     background: 'gray',
-    transition: 'background 0.5s',
+    transition: pollIndicatorTransition,
   },
   pollIndicatorPoll: {
     left: 2,
@@ -77,18 +104,20 @@ const styles = {
   },
   polled: {
     background: 'yellow !important',
-    transition: 'background 0.1s',
+    transition: polledTransition,
   },
   pollAnswered: {
     background: 'green !important',
-    transition: 'background 0.1s',
+    transition: pollAnsweredTransition,
   },
   stale: {
     background: 'red !important',
   },
 };
 
-@injectSheet(styles) @observer class TabItem extends Component {
+@injectSheet(styles)
+@observer
+class TabItem extends Component {
   static propTypes = {
     classes: PropTypes.object.isRequired,
     service: PropTypes.instanceOf(ServiceModel).isRequired,
@@ -97,10 +126,13 @@ const styles = {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     openSettings: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     disableService: PropTypes.func.isRequired,
     enableService: PropTypes.func.isRequired,
+    hibernateService: PropTypes.func.isRequired,
+    wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
@@ -121,13 +153,17 @@ const styles = {
         if (Date.now() - service.lastPoll < ms('0.2s')) {
           this.isPolled = true;
 
-          setTimeout(() => { this.isPolled = false; }, ms('1s'));
+          setTimeout(() => {
+            this.isPolled = false;
+          }, ms('1s'));
         }
 
         if (Date.now() - service.lastPollAnswer < ms('0.2s')) {
           this.isPollAnswered = true;
 
-          setTimeout(() => { this.isPollAnswered = false; }, ms('1s'));
+          setTimeout(() => {
+            this.isPollAnswered = false;
+          }, ms('1s'));
         }
       });
     }
@@ -142,67 +178,103 @@ const styles = {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       disableService,
       enableService,
+      hibernateService,
+      wakeUpService,
       openSettings,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
     } = this.props;
     const { intl } = this.context;
 
-    const menuTemplate = [{
-      label: service.name || service.recipe.name,
-      enabled: false,
-    }, {
-      type: 'separator',
-    }, {
-      label: intl.formatMessage(messages.reload),
-      click: reload,
-      accelerator: `${cmdKey}+R`,
-    }, {
-      label: intl.formatMessage(messages.edit),
-      click: () => openSettings({
-        path: `services/edit/${service.id}`,
-      }),
-    }, {
-      type: 'separator',
-    }, {
-      label: service.isNotificationEnabled
-        ? intl.formatMessage(messages.disableNotifications)
-        : intl.formatMessage(messages.enableNotifications),
-      click: () => toggleNotifications(),
-    }, {
-      label: service.isMuted
-        ? intl.formatMessage(messages.enableAudio)
-        : intl.formatMessage(messages.disableAudio),
-      click: () => toggleAudio(),
-    }, {
-      label: intl.formatMessage(service.isEnabled ? messages.disableService : messages.enableService),
-      click: () => (service.isEnabled ? disableService() : enableService()),
-    }, {
-      type: 'separator',
-    }, {
-      label: intl.formatMessage(messages.deleteService),
-      click: () => {
-        const selection = dialog.showMessageBoxSync(app.mainWindow, {
-          type: 'question',
-          message: intl.formatMessage(messages.deleteService),
-          detail: intl.formatMessage(messages.confirmDeleteService, { serviceName: service.name || service.recipe.name }),
-          buttons: [
-            'Yes',
-            'No',
-          ],
-        });
-        if (selection === 0) {
-          deleteService();
-        }
+    const menuTemplate = [
+      {
+        label: service.name || service.recipe.name,
+        enabled: false,
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: intl.formatMessage(messages.reload),
+        click: reload,
+        accelerator: `${shortcutKey()}+R`,
+      },
+      {
+        label: intl.formatMessage(messages.edit),
+        click: () =>
+          openSettings({
+            path: `services/edit/${service.id}`,
+          }),
       },
-    }];
+      {
+        type: 'separator',
+      },
+      {
+        label: service.isNotificationEnabled
+          ? intl.formatMessage(messages.disableNotifications)
+          : intl.formatMessage(messages.enableNotifications),
+        click: () => toggleNotifications(),
+      },
+      {
+        label: service.isMuted
+          ? intl.formatMessage(messages.enableAudio)
+          : intl.formatMessage(messages.disableAudio),
+        click: () => toggleAudio(),
+      },
+      {
+        label: service.isDarkModeEnabled
+          ? intl.formatMessage(messages.enableDarkMode)
+          : intl.formatMessage(messages.disableDarkMode),
+        click: () => toggleDarkMode(),
+      },
+      {
+        label: intl.formatMessage(
+          service.isEnabled ? messages.disableService : messages.enableService,
+        ),
+        click: () => (service.isEnabled ? disableService() : enableService()),
+      },
+      {
+        label: intl.formatMessage(
+          service.isHibernating
+            ? messages.wakeUpService
+            : messages.hibernateService,
+        ),
+        click: () =>
+          (service.isHibernating ? wakeUpService() : hibernateService()),
+        enabled: service.canHibernate,
+      },
+      {
+        type: 'separator',
+      },
+      {
+        label: intl.formatMessage(messages.deleteService),
+        click: () => {
+          const selection = dialog.showMessageBoxSync(app.mainWindow, {
+            type: 'question',
+            message: intl.formatMessage(messages.deleteService),
+            detail: intl.formatMessage(messages.confirmDeleteService, {
+              serviceName: service.name || service.recipe.name,
+            }),
+            buttons: ['Yes', 'No'],
+          });
+          if (selection === 0) {
+            deleteService();
+          }
+        },
+      },
+    ];
     const menu = Menu.buildFromTemplate(menuTemplate);
 
     let notificationBadge = null;
-    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) {
+    if (
+      (showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) &&
+      showMessageBadgesEvenWhenMuted &&
+      service.isBadgeEnabled
+    ) {
       notificationBadge = (
         <span>
           {service.unreadDirectMessageCount > 0 && (
@@ -210,17 +282,13 @@ const styles = {
               {service.unreadDirectMessageCount}
             </span>
           )}
-          {service.unreadIndirectMessageCount > 0
-            && service.unreadDirectMessageCount === 0
-            && service.isIndirectMessageBadgeEnabled && (
-            <span className="tab-item__message-count is-indirect">
-              •
-            </span>
+          {service.unreadIndirectMessageCount > 0 &&
+            service.unreadDirectMessageCount === 0 &&
+            service.isIndirectMessageBadgeEnabled && (
+              <span className="tab-item__message-count is-indirect">•</span>
           )}
-          {service.isHibernating && !service.isHibernationEnabled && (
-            <span className="tab-item__message-count hibernating">
-              •
-            </span>
+          {service.isHibernating && (
+            <span className="tab-item__message-count hibernating">•</span>
           )}
         </span>
       );
@@ -229,7 +297,8 @@ const styles = {
     return (
       <li
         className={classnames({
-          [classes.stale]: IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection,
+          [classes.stale]:
+            IS_SERVICE_DEBUGGING_ENABLED && service.lostRecipeConnection,
           'tab-item': true,
           'is-active': service.isActive,
           'has-custom-icon': service.hasCustomIcon,
@@ -237,13 +306,11 @@ const styles = {
         })}
         onClick={clickHandler}
         onContextMenu={() => menu.popup(getCurrentWindow())}
-        data-tip={`${service.name} ${shortcutIndex <= 9 ? `(${ctrlKey}+${shortcutIndex})` : ''}`}
+        data-tip={`${service.name} ${
+          shortcutIndex <= 9 ? `(${shortcutKey(false)}+${shortcutIndex})` : ''
+        }`}
       >
-        <img
-          src={service.icon}
-          className="tab-item__icon"
-          alt=""
-        />
+        <img src={service.icon} className="tab-item__icon" alt="" />
         {notificationBadge}
         {IS_SERVICE_DEBUGGING_ENABLED && (
           <>
diff --git a/src/components/services/tabs/Tabbar.js b/src/components/services/tabs/Tabbar.js
index 5e8260ad0..ab1e46c9f 100644
--- a/src/components/services/tabs/Tabbar.js
+++ b/src/components/services/tabs/Tabbar.js
@@ -15,8 +15,11 @@ export default @observer class TabBar extends Component {
     reload: PropTypes.func.isRequired,
     toggleNotifications: PropTypes.func.isRequired,
     toggleAudio: PropTypes.func.isRequired,
+    toggleDarkMode: PropTypes.func.isRequired,
     deleteService: PropTypes.func.isRequired,
     updateService: PropTypes.func.isRequired,
+    hibernateService: PropTypes.func.isRequired,
+    wakeUpService: PropTypes.func.isRequired,
     showMessageBadgeWhenMutedSetting: PropTypes.bool.isRequired,
     showMessageBadgesEvenWhenMuted: PropTypes.bool.isRequired,
   };
@@ -31,7 +34,7 @@ export default @observer class TabBar extends Component {
     reorder({ oldIndex, newIndex });
   };
 
-  shouldPreventSorting = event => event.target.tagName !== 'LI';
+  shouldPreventSorting = (event) => event.target.tagName !== 'LI';
 
   toggleService = ({ serviceId, isEnabled }) => {
     const { updateService } = this.props;
@@ -55,6 +58,18 @@ export default @observer class TabBar extends Component {
     this.toggleService({ serviceId, isEnabled: true });
   }
 
+  hibernateService({ serviceId }) {
+    if (serviceId) {
+      this.props.hibernateService({ serviceId });
+    }
+  }
+
+  wakeUpService({ serviceId }) {
+    if (serviceId) {
+      this.props.wakeUpService({ serviceId });
+    }
+  }
+
   render() {
     const {
       services,
@@ -64,6 +79,7 @@ export default @observer class TabBar extends Component {
       reload,
       toggleNotifications,
       toggleAudio,
+      toggleDarkMode,
       deleteService,
       showMessageBadgeWhenMutedSetting,
       showMessageBadgesEvenWhenMuted,
@@ -80,9 +96,12 @@ export default @observer class TabBar extends Component {
           reload={reload}
           toggleNotifications={toggleNotifications}
           toggleAudio={toggleAudio}
+          toggleDarkMode={toggleDarkMode}
           deleteService={deleteService}
-          disableService={args => this.disableService(args)}
-          enableService={args => this.enableService(args)}
+          disableService={(args) => this.disableService(args)}
+          enableService={(args) => this.enableService(args)}
+          hibernateService={(args) => this.hibernateService(args)}
+          wakeUpService={(args) => this.wakeUpService(args)}
           openSettings={openSettings}
           distance={20}
           axis="y"