implements basic release announcement feature

22 files changed, 416 insertions, 66 deletions

diff --git a/.eslintrc b/.eslintrc
index 743946d35..a4ffd505c 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -14,7 +14,7 @@
     "react/jsx-filename-extension": [1, {
       "extensions": [".js", ".jsx"]
     }],
-    "react/forbid-prop-types": 1,
+    "react/forbid-prop-types": 0,
     "react/destructuring-assignment": 1,
     "prefer-destructuring": 1,
     "no-underscore-dangle": 0,
diff --git a/package-lock.json b/package-lock.json
index 8499abda9..bc333ae50 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12094,6 +12094,11 @@
         "object-visit": "^1.0.0"
       }
     },
+    "marked": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.6.1.tgz",
+      "integrity": "sha512-+H0L3ibcWhAZE02SKMqmvYsErLo4EAVJxu5h3bHBBDvvjeWXtl92rGUSBYHL2++5Y+RSNgl8dYOAXcYe7lp1fA=="
+    },
     "matchdep": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
diff --git a/package.json b/package.json
index 14e0df7ca..4ddc83777 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
     "hex-to-rgba": "1.0.2",
     "jsonwebtoken": "^7.4.1",
     "lodash": "^4.17.4",
+    "marked": "0.6.1",
     "mdi": "^1.9.33",
     "mime-types": "2.1.21",
     "mobx": "5.7.0",
diff --git a/src/actions/index.js b/src/actions/index.js
index 59acabb0b..dc1d3b6b2 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 announcements from '../features/announcements/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),
+  { announcements },
+);
diff --git a/src/actions/service.js b/src/actions/service.js
index ceaabc31e..ce62560a9 100644
--- a/src/actions/service.js
+++ b/src/actions/service.js
@@ -5,6 +5,7 @@ export default {
   setActive: {
     serviceId: PropTypes.string.isRequired,
   },
+  blurActive: {},
   setActiveNext: {},
   setActivePrev: {},
   showAddServiceInterface: {
diff --git a/src/components/layout/AppLayout.js b/src/components/layout/AppLayout.js
index 593149e72..2bda91f73 100644
--- a/src/components/layout/AppLayout.js
+++ b/src/components/layout/AppLayout.js
@@ -13,6 +13,7 @@ import ErrorBoundary from '../util/ErrorBoundary';
 // import globalMessages from '../../i18n/globalMessages';
 
 import { isWindows } from '../../environment';
+import AnnouncementScreen from '../../features/announcements/Component';
 
 function createMarkup(HTMLString) {
   return { __html: HTMLString };
@@ -64,6 +65,7 @@ export default @observer class AppLayout extends Component {
     areRequiredRequestsLoading: PropTypes.bool.isRequired,
     darkMode: PropTypes.bool.isRequired,
     isDelayAppScreenVisible: PropTypes.bool.isRequired,
+    isAnnouncementVisible: PropTypes.bool.isRequired,
   };
 
   static defaultProps = {
@@ -93,6 +95,7 @@ export default @observer class AppLayout extends Component {
       areRequiredRequestsLoading,
       darkMode,
       isDelayAppScreenVisible,
+      isAnnouncementVisible,
     } = this.props;
 
     const { intl } = this.context;
@@ -166,6 +169,7 @@ export default @observer class AppLayout extends Component {
                 {isDelayAppScreenVisible && (<DelayApp />)}
                 <BasicAuth />
                 <ShareFranz />
+                {isAnnouncementVisible && (<AnnouncementScreen />)}
                 {services}
               </div>
             </div>
diff --git a/src/config.js b/src/config.js
index 479572edb..47d22ca7d 100644
--- a/src/config.js
+++ b/src/config.js
@@ -41,6 +41,7 @@ export const DEFAULT_FEATURES_CONFIG = {
   },
   isServiceProxyEnabled: false,
   isServiceProxyPremiumFeature: true,
+  isAnnouncementsEnabled: true,
 };
 
 export const DEFAULT_WINDOW_OPTIONS = {
diff --git a/src/containers/layout/AppLayoutContainer.js b/src/containers/layout/AppLayoutContainer.js
index 5a05ce431..f26e51517 100644
--- a/src/containers/layout/AppLayoutContainer.js
+++ b/src/containers/layout/AppLayoutContainer.js
@@ -20,6 +20,7 @@ import Services from '../../components/services/content/Services';
 import AppLoader from '../../components/ui/AppLoader';
 
 import { state as delayAppState } from '../../features/delayApp';
+import { announcementsState } from '../../features/announcements/state';
 
 export default @inject('stores', 'actions') @observer class AppLayoutContainer extends Component {
   static defaultProps = {
@@ -134,6 +135,7 @@ export default @inject('stores', 'actions') @observer class AppLayoutContainer e
           areRequiredRequestsLoading={requests.areRequiredRequestsLoading}
           darkMode={settings.all.app.darkMode}
           isDelayAppScreenVisible={delayAppState.isDelayAppScreenVisible}
+          isAnnouncementVisible={announcementsState.isAnnouncementVisible}
         >
           {React.Children.count(children) > 0 ? children : null}
         </AppLayout>
diff --git a/src/features/announcements/Component.js b/src/features/announcements/Component.js
new file mode 100644
index 000000000..5d95f5d84
--- /dev/null
+++ b/src/features/announcements/Component.js
@@ -0,0 +1,77 @@
+import React, { Component } from 'react';
+import marked from 'marked';
+import PropTypes from 'prop-types';
+import { inject, observer } from 'mobx-react';
+import { defineMessages, intlShape } from 'react-intl';
+import injectSheet from 'react-jss';
+import { themeSidebarWidth } from '@meetfranz/theme/lib/themes/legacy';
+import state from './state';
+
+const messages = defineMessages({
+  headline: {
+    id: 'feature.announcements.headline',
+    defaultMessage: '!!!What\'s new in Franz {version}?',
+  },
+});
+
+const styles = theme => ({
+  container: {
+    background: theme.colorBackground,
+    position: 'absolute',
+    top: 0,
+    zIndex: 140,
+    width: `calc(100% - ${themeSidebarWidth})`,
+    display: 'flex',
+    'flex-direction': 'column',
+    'align-items': 'center',
+    'justify-content': 'center',
+  },
+  headline: {
+    color: theme.colorHeadline,
+    margin: [25, 0, 40],
+    'max-width': 500,
+    'text-align': 'center',
+    'line-height': '1.3em',
+  },
+  body: {
+    '& h3': {
+      fontSize: '24px',
+      margin: '1.5em 0 1em 0',
+    },
+    '& li': {
+      marginBottom: '1em',
+    },
+  },
+});
+
+
+@inject('actions') @injectSheet(styles) @observer
+class AnnouncementScreen extends Component {
+  static propTypes = {
+    classes: PropTypes.object.isRequired,
+  };
+
+  static contextTypes = {
+    intl: intlShape,
+  };
+
+  render() {
+    const { classes } = this.props;
+    const { intl } = this.context;
+    return (
+      <div className={`${classes.container}`}>
+        <h1 className={classes.headline}>
+          {intl.formatMessage(messages.headline, { version: state.currentVersion })}
+        </h1>
+        <div
+          className={classes.body}
+          dangerouslySetInnerHTML={{
+            __html: marked(state.announcement, { sanitize: true }),
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+export default AnnouncementScreen;
diff --git a/src/features/announcements/actions.js b/src/features/announcements/actions.js
new file mode 100644
index 000000000..68b262ded
--- /dev/null
+++ b/src/features/announcements/actions.js
@@ -0,0 +1,8 @@
+import PropTypes from 'prop-types';
+import { createActionsFromDefinitions } from '../../actions/lib/actions';
+
+export const announcementActions = createActionsFromDefinitions({
+  show: {},
+}, PropTypes.checkPropTypes);
+
+export default announcementActions;
diff --git a/src/features/announcements/api.js b/src/features/announcements/api.js
new file mode 100644
index 000000000..ec16066a6
--- /dev/null
+++ b/src/features/announcements/api.js
@@ -0,0 +1,19 @@
+import { remote } from 'electron';
+
+const debug = require('debug')('Franz:feature:announcements:api');
+
+export default {
+  async getCurrentVersion() {
+    debug('getting current version of electron app');
+    return Promise.resolve(remote.app.getVersion());
+  },
+
+  async getAnnouncementForVersion(version) {
+    debug('fetching release announcement from Github');
+    const url = `https://api.github.com/repos/meetfranz/franz/releases/tags/v${version}`;
+    const request = await window.fetch(url, { method: 'GET' });
+    if (!request.ok) throw request;
+    const data = await request.json();
+    return data.body;
+  },
+};
diff --git a/src/features/announcements/index.js b/src/features/announcements/index.js
new file mode 100644
index 000000000..5ea74e0af
--- /dev/null
+++ b/src/features/announcements/index.js
@@ -0,0 +1,37 @@
+import { reaction, runInAction } from 'mobx';
+import { AnnouncementsStore } from './store';
+import api from './api';
+import state, { resetState } from './state';
+
+const debug = require('debug')('Franz:feature:announcements');
+
+let store = null;
+
+export default function initAnnouncements(stores, actions) {
+  // const { features } = stores;
+
+  // Toggle workspace feature
+  reaction(
+    () => (
+      true
+      // features.features.isAnnouncementsEnabled
+    ),
+    (isEnabled) => {
+      if (isEnabled) {
+        debug('Initializing `announcements` feature');
+        store = new AnnouncementsStore(stores, api, actions, state);
+        store.initialize();
+        runInAction(() => { state.isFeatureActive = true; });
+      } else if (store) {
+        debug('Disabling `announcements` feature');
+        runInAction(() => { state.isFeatureActive = false; });
+        store.teardown();
+        store = null;
+        resetState(); // Reset state to default
+      }
+    },
+    {
+      fireImmediately: true,
+    },
+  );
+}
diff --git a/src/features/announcements/state.js b/src/features/announcements/state.js
new file mode 100644
index 000000000..81b632253
--- /dev/null
+++ b/src/features/announcements/state.js
@@ -0,0 +1,17 @@
+import { observable } from 'mobx';
+
+const defaultState = {
+  announcement: null,
+  currentVersion: null,
+  lastUsedVersion: null,
+  isAnnouncementVisible: false,
+  isFeatureActive: false,
+};
+
+export const announcementsState = observable(defaultState);
+
+export function resetState() {
+  Object.assign(announcementsState, defaultState);
+}
+
+export default announcementsState;
diff --git a/src/features/announcements/store.js b/src/features/announcements/store.js
new file mode 100644
index 000000000..004a44062
--- /dev/null
+++ b/src/features/announcements/store.js
@@ -0,0 +1,95 @@
+import { action, observable, reaction } from 'mobx';
+import semver from 'semver';
+
+import Request from '../../stores/lib/Request';
+import Store from '../../stores/lib/Store';
+
+const debug = require('debug')('Franz:feature:announcements:store');
+
+export class AnnouncementsStore extends Store {
+  @observable getCurrentVersion = new Request(this.api, 'getCurrentVersion');
+
+  @observable getAnnouncement = new Request(this.api, 'getAnnouncementForVersion');
+
+  constructor(stores, api, actions, state) {
+    super(stores, api, actions);
+    this.state = state;
+  }
+
+  async setup() {
+    await this.fetchLastUsedVersion();
+    await this.fetchCurrentVersion();
+    await this.fetchReleaseAnnouncement();
+    this.showAnnouncementIfNotSeenYet();
+
+    this.actions.announcements.show.listen(this._showAnnouncement.bind(this));
+  }
+
+  // ====== PUBLIC ======
+
+  async fetchLastUsedVersion() {
+    debug('getting last used version from local storage');
+    const lastUsedVersion = window.localStorage.getItem('lastUsedVersion');
+    this._setLastUsedVersion(lastUsedVersion == null ? '0.0.0' : lastUsedVersion);
+  }
+
+  async fetchCurrentVersion() {
+    debug('getting current version from api');
+    const version = await this.getCurrentVersion.execute();
+    this._setCurrentVersion(version);
+  }
+
+  async fetchReleaseAnnouncement() {
+    debug('getting release announcement from api');
+    try {
+      const announcement = await this.getAnnouncement.execute(this.state.currentVersion);
+      this._setAnnouncement(announcement);
+    } catch (error) {
+      this._setAnnouncement(null);
+    }
+  }
+
+  showAnnouncementIfNotSeenYet() {
+    const { announcement, currentVersion, lastUsedVersion } = this.state;
+    if (announcement && semver.gt(currentVersion, lastUsedVersion)) {
+      debug(`${currentVersion} < ${lastUsedVersion}: announcement is shown`);
+      this._showAnnouncement();
+    } else {
+      debug(`${currentVersion} >= ${lastUsedVersion}: announcement is hidden`);
+      this._hideAnnouncement();
+    }
+  }
+
+  // ====== PRIVATE ======
+
+  @action _setCurrentVersion(version) {
+    debug(`setting current version to ${version}`);
+    this.state.currentVersion = version;
+  }
+
+  @action _setLastUsedVersion(version) {
+    debug(`setting last used version to ${version}`);
+    this.state.lastUsedVersion = version;
+  }
+
+  @action _setAnnouncement(announcement) {
+    debug(`setting announcement to ${announcement}`);
+    this.state.announcement = announcement;
+  }
+
+  @action _showAnnouncement() {
+    this.state.isAnnouncementVisible = true;
+    this.actions.service.blurActive();
+    const dispose = reaction(
+      () => this.stores.services.active,
+      () => {
+        this._hideAnnouncement();
+        dispose();
+      },
+    );
+  }
+
+  @action _hideAnnouncement() {
+    this.state.isAnnouncementVisible = false;
+  }
+}
diff --git a/src/i18n/locales/defaultMessages.json b/src/i18n/locales/defaultMessages.json
index 0641c510c..fcd24c7ef 100644
--- a/src/i18n/locales/defaultMessages.json
+++ b/src/i18n/locales/defaultMessages.json
@@ -625,78 +625,78 @@
         "defaultMessage": "!!!Your services have been updated.",
         "end": {
           "column": 3,
-          "line": 25
+          "line": 26
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.servicesUpdated",
         "start": {
           "column": 19,
-          "line": 22
+          "line": 23
         }
       },
       {
         "defaultMessage": "!!!A new update for Franz is available.",
         "end": {
           "column": 3,
-          "line": 29
+          "line": 30
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.updateAvailable",
         "start": {
           "column": 19,
-          "line": 26
+          "line": 27
         }
       },
       {
         "defaultMessage": "!!!Reload services",
         "end": {
           "column": 3,
-          "line": 33
+          "line": 34
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonReloadServices",
         "start": {
           "column": 24,
-          "line": 30
+          "line": 31
         }
       },
       {
         "defaultMessage": "!!!Changelog",
         "end": {
           "column": 3,
-          "line": 37
+          "line": 38
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonChangelog",
         "start": {
           "column": 13,
-          "line": 34
+          "line": 35
         }
       },
       {
         "defaultMessage": "!!!Restart & install update",
         "end": {
           "column": 3,
-          "line": 41
+          "line": 42
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.buttonInstallUpdate",
         "start": {
           "column": 23,
-          "line": 38
+          "line": 39
         }
       },
       {
         "defaultMessage": "!!!Could not load services and user information",
         "end": {
           "column": 3,
-          "line": 45
+          "line": 46
         },
         "file": "src/components/layout/AppLayout.js",
         "id": "infobar.requiredRequestsFailed",
         "start": {
           "column": 26,
-          "line": 42
+          "line": 43
         }
       }
     ],
@@ -3025,6 +3025,24 @@
   {
     "descriptors": [
       {
+        "defaultMessage": "!!!What's new in Franz {version}?",
+        "end": {
+          "column": 3,
+          "line": 14
+        },
+        "file": "src/features/announcements/Component.js",
+        "id": "feature.announcements.headline",
+        "start": {
+          "column": 12,
+          "line": 11
+        }
+      }
+    ],
+    "path": "src/features/announcements/Component.json"
+  },
+  {
+    "descriptors": [
+      {
         "defaultMessage": "!!!Please purchase license to skip waiting",
         "end": {
           "column": 3,
@@ -3799,133 +3817,146 @@
         }
       },
       {
-        "defaultMessage": "!!!Settings",
+        "defaultMessage": "!!!What's new in Franz?",
         "end": {
           "column": 3,
           "line": 161
         },
         "file": "src/lib/Menu.js",
+        "id": "menu.app.announcement",
+        "start": {
+          "column": 16,
+          "line": 158
+        }
+      },
+      {
+        "defaultMessage": "!!!Settings",
+        "end": {
+          "column": 3,
+          "line": 165
+        },
+        "file": "src/lib/Menu.js",
         "id": "menu.app.settings",
         "start": {
           "column": 12,
-          "line": 158
+          "line": 162
         }
       },
       {
         "defaultMessage": "!!!Hide",
         "end": {
           "column": 3,
-          "line": 165
+          "line": 169
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hide",
         "start": {
           "column": 8,
-          "line": 162
+          "line": 166
         }
       },
       {
         "defaultMessage": "!!!Hide Others",
         "end": {
           "column": 3,
-          "line": 169
+          "line": 173
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.hideOthers",
         "start": {
           "column": 14,
-          "line": 166
+          "line": 170
         }
       },
       {
         "defaultMessage": "!!!Unhide",
         "end": {
           "column": 3,
-          "line": 173
+          "line": 177
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.unhide",
         "start": {
           "column": 10,
-          "line": 170
+          "line": 174
         }
       },
       {
         "defaultMessage": "!!!Quit",
         "end": {
           "column": 3,
-          "line": 177
+          "line": 181
         },
         "file": "src/lib/Menu.js",
         "id": "menu.app.quit",
         "start": {
           "column": 8,
-          "line": 174
+          "line": 178
         }
       },
       {
         "defaultMessage": "!!!Add New Service...",
         "end": {
           "column": 3,
-          "line": 181
+          "line": 185
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.addNewService",
         "start": {
           "column": 17,
-          "line": 178
+          "line": 182
         }
       },
       {
         "defaultMessage": "!!!Activate next service...",
         "end": {
           "column": 3,
-          "line": 185
+          "line": 189
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.setNextServiceActive",
         "start": {
           "column": 23,
-          "line": 182
+          "line": 186
         }
       },
       {
         "defaultMessage": "!!!Activate previous service...",
         "end": {
           "column": 3,
-          "line": 189
+          "line": 193
         },
         "file": "src/lib/Menu.js",
         "id": "menu.services.activatePreviousService",
         "start": {
           "column": 27,
-          "line": 186
+          "line": 190
         }
       },
       {
         "defaultMessage": "!!!Disable notifications & audio",
         "end": {
           "column": 3,
-          "line": 193
+          "line": 197
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.muteApp",
         "start": {
           "column": 11,
-          "line": 190
+          "line": 194
         }
       },
       {
         "defaultMessage": "!!!Enable notifications & audio",
         "end": {
           "column": 3,
-          "line": 197
+          "line": 201
         },
         "file": "src/lib/Menu.js",
         "id": "sidebar.unmuteApp",
         "start": {
           "column": 13,
-          "line": 194
+          "line": 198
         }
       }
     ],
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 7543d38bd..573231c45 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -1,6 +1,7 @@
 {
   "app.errorHandler.action": "Reload",
   "app.errorHandler.headline": "Something went wrong",
+  "feature.announcements.headline": "What's new in Franz {version}?",
   "feature.delayApp.action": "Get a Franz Supporter License",
   "feature.delayApp.headline": "Please purchase a Franz Supporter License to skip waiting",
   "feature.delayApp.text": "Franz will continue in {seconds} seconds.",
@@ -43,6 +44,7 @@
   "login.submit.label": "Sign in",
   "login.tokenExpired": "Your session expired, please login again.",
   "menu.app.about": "About Franz",
+  "menu.app.announcement": "What's new in Franz?",
   "menu.app.hide": "Hide",
   "menu.app.hideOthers": "Hide Others",
   "menu.app.quit": "Quit",
diff --git a/src/i18n/messages/src/components/layout/AppLayout.json b/src/i18n/messages/src/components/layout/AppLayout.json
index 07603d062..384d4b441 100644
--- a/src/i18n/messages/src/components/layout/AppLayout.json
+++ b/src/i18n/messages/src/components/layout/AppLayout.json
@@ -4,11 +4,11 @@
     "defaultMessage": "!!!Your services have been updated.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 22,
+      "line": 23,
       "column": 19
     },
     "end": {
-      "line": 25,
+      "line": 26,
       "column": 3
     }
   },
@@ -17,11 +17,11 @@
     "defaultMessage": "!!!A new update for Franz is available.",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 26,
+      "line": 27,
       "column": 19
     },
     "end": {
-      "line": 29,
+      "line": 30,
       "column": 3
     }
   },
@@ -30,11 +30,11 @@
     "defaultMessage": "!!!Reload services",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 30,
+      "line": 31,
       "column": 24
     },
     "end": {
-      "line": 33,
+      "line": 34,
       "column": 3
     }
   },
@@ -43,11 +43,11 @@
     "defaultMessage": "!!!Changelog",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 34,
+      "line": 35,
       "column": 13
     },
     "end": {
-      "line": 37,
+      "line": 38,
       "column": 3
     }
   },
@@ -56,11 +56,11 @@
     "defaultMessage": "!!!Restart & install update",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 38,
+      "line": 39,
       "column": 23
     },
     "end": {
-      "line": 41,
+      "line": 42,
       "column": 3
     }
   },
@@ -69,11 +69,11 @@
     "defaultMessage": "!!!Could not load services and user information",
     "file": "src/components/layout/AppLayout.js",
     "start": {
-      "line": 42,
+      "line": 43,
       "column": 26
     },
     "end": {
-      "line": 45,
+      "line": 46,
       "column": 3
     }
   }
diff --git a/src/i18n/messages/src/features/announcements/Component.json b/src/i18n/messages/src/features/announcements/Component.json
new file mode 100644
index 000000000..18e1b84c5
--- /dev/null
+++ b/src/i18n/messages/src/features/announcements/Component.json
@@ -0,0 +1,15 @@
+[
+  {
+    "id": "feature.announcements.headline",
+    "defaultMessage": "!!!What's new in Franz {version}?",
+    "file": "src/features/announcements/Component.js",
+    "start": {
+      "line": 11,
+      "column": 12
+    },
+    "end": {
+      "line": 14,
+      "column": 3
+    }
+  }
+]
\ No newline at end of file
diff --git a/src/i18n/messages/src/lib/Menu.json b/src/i18n/messages/src/lib/Menu.json
index 9314f5cce..0db994871 100644
--- a/src/i18n/messages/src/lib/Menu.json
+++ b/src/i18n/messages/src/lib/Menu.json
@@ -481,15 +481,28 @@
     }
   },
   {
+    "id": "menu.app.announcement",
+    "defaultMessage": "!!!What's new in Franz?",
+    "file": "src/lib/Menu.js",
+    "start": {
+      "line": 158,
+      "column": 16
+    },
+    "end": {
+      "line": 161,
+      "column": 3
+    }
+  },
+  {
     "id": "menu.app.settings",
     "defaultMessage": "!!!Settings",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 158,
+      "line": 162,
       "column": 12
     },
     "end": {
-      "line": 161,
+      "line": 165,
       "column": 3
     }
   },
@@ -498,11 +511,11 @@
     "defaultMessage": "!!!Hide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 162,
+      "line": 166,
       "column": 8
     },
     "end": {
-      "line": 165,
+      "line": 169,
       "column": 3
     }
   },
@@ -511,11 +524,11 @@
     "defaultMessage": "!!!Hide Others",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 166,
+      "line": 170,
       "column": 14
     },
     "end": {
-      "line": 169,
+      "line": 173,
       "column": 3
     }
   },
@@ -524,11 +537,11 @@
     "defaultMessage": "!!!Unhide",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 170,
+      "line": 174,
       "column": 10
     },
     "end": {
-      "line": 173,
+      "line": 177,
       "column": 3
     }
   },
@@ -537,11 +550,11 @@
     "defaultMessage": "!!!Quit",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 174,
+      "line": 178,
       "column": 8
     },
     "end": {
-      "line": 177,
+      "line": 181,
       "column": 3
     }
   },
@@ -550,11 +563,11 @@
     "defaultMessage": "!!!Add New Service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 178,
+      "line": 182,
       "column": 17
     },
     "end": {
-      "line": 181,
+      "line": 185,
       "column": 3
     }
   },
@@ -563,11 +576,11 @@
     "defaultMessage": "!!!Activate next service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 182,
+      "line": 186,
       "column": 23
     },
     "end": {
-      "line": 185,
+      "line": 189,
       "column": 3
     }
   },
@@ -576,11 +589,11 @@
     "defaultMessage": "!!!Activate previous service...",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 186,
+      "line": 190,
       "column": 27
     },
     "end": {
-      "line": 189,
+      "line": 193,
       "column": 3
     }
   },
@@ -589,11 +602,11 @@
     "defaultMessage": "!!!Disable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 190,
+      "line": 194,
       "column": 11
     },
     "end": {
-      "line": 193,
+      "line": 197,
       "column": 3
     }
   },
@@ -602,11 +615,11 @@
     "defaultMessage": "!!!Enable notifications & audio",
     "file": "src/lib/Menu.js",
     "start": {
-      "line": 194,
+      "line": 198,
       "column": 13
     },
     "end": {
-      "line": 197,
+      "line": 201,
       "column": 3
     }
   }
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index 7a60c448f..70f3b2877 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -155,6 +155,10 @@ const menuItems = defineMessages({
     id: 'menu.app.about',
     defaultMessage: '!!!About Franz',
   },
+  announcement: {
+    id: 'menu.app.announcement',
+    defaultMessage: '!!!What\'s new in Franz?',
+  },
   settings: {
     id: 'menu.app.settings',
     defaultMessage: '!!!Settings',
@@ -590,6 +594,12 @@ export default class FranzMenu {
           role: 'about',
         },
         {
+          label: intl.formatMessage(menuItems.announcement),
+          click: () => {
+            this.actions.announcements.show();
+          },
+        },
+        {
           type: 'separator',
         },
         {
diff --git a/src/stores/FeaturesStore.js b/src/stores/FeaturesStore.js
index d2842083c..1c9044b07 100644
--- a/src/stores/FeaturesStore.js
+++ b/src/stores/FeaturesStore.js
@@ -8,6 +8,7 @@ import spellchecker from '../features/spellchecker';
 import serviceProxy from '../features/serviceProxy';
 import basicAuth from '../features/basicAuth';
 import shareFranz from '../features/shareFranz';
+import announcements from '../features/announcements';
 
 import { DEFAULT_FEATURES_CONFIG } from '../config';
 
@@ -58,5 +59,6 @@ export default class FeaturesStore extends Store {
     serviceProxy(this.stores, this.actions);
     basicAuth(this.stores, this.actions);
     shareFranz(this.stores, this.actions);
+    announcements(this.stores, this.actions);
   }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index 69e616f0c..88b0331bf 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -35,6 +35,7 @@ export default class ServicesStore extends Store {
 
     // Register action handlers
     this.actions.service.setActive.listen(this._setActive.bind(this));
+    this.actions.service.blurActive.listen(this._blurActive.bind(this));
     this.actions.service.setActiveNext.listen(this._setActiveNext.bind(this));
     this.actions.service.setActivePrev.listen(this._setActivePrev.bind(this));
     this.actions.service.showAddServiceInterface.listen(this._showAddServiceInterface.bind(this));
@@ -298,6 +299,11 @@ export default class ServicesStore extends Store {
     this._focusActiveService();
   }
 
+  @action _blurActive() {
+    if (!this.active) return;
+    this.active.isActive = false;
+  }
+
   @action _setActiveNext() {
     const nextIndex = this._wrapIndex(this.allDisplayed.findIndex(service => service.isActive), 1, this.allDisplayed.length);