14 files changed, 150 insertions, 66 deletions

diff --git a/src/api/server/LocalApi.js b/src/api/server/LocalApi.js
index eba236f16..79ac6e12f 100644
--- a/src/api/server/LocalApi.js
+++ b/src/api/server/LocalApi.js
@@ -1,5 +1,3 @@
-import SettingsModel from '../../models/Settings';
-
 export default class LocalApi {
   // App
   async updateAppSettings(data) {
@@ -15,7 +13,7 @@ export default class LocalApi {
   async getAppSettings() {
     const settingsString = localStorage.getItem('app');
     try {
-      const settings = new SettingsModel(JSON.parse(settingsString) || {});
+      const settings = JSON.parse(settingsString) || {};
       console.debug('LocalApi::getAppSettings resolves', settings);
 
       return settings;
diff --git a/src/components/services/tabs/TabItem.js b/src/components/services/tabs/TabItem.js
index 8403d9462..7aed8fda7 100644
--- a/src/components/services/tabs/TabItem.js
+++ b/src/components/services/tabs/TabItem.js
@@ -126,7 +126,7 @@ class TabItem extends Component {
     const menu = Menu.buildFromTemplate(menuTemplate);
 
     let notificationBadge = null;
-    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted) {
+    if ((showMessageBadgeWhenMutedSetting || service.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && service.isBadgeEnabled) {
       notificationBadge = (
         <span>
           {service.unreadDirectMessageCount > 0 && (
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index f689dd5c4..4458c4c5a 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -71,6 +71,18 @@ const messages = defineMessages({
     id: 'settings.service.form.isMutedInfo',
     defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
+  headlineNotifications: {
+    id: 'settings.service.form.headlineNotifications',
+    defaultMessage: '!!!Notifications',
+  },
+  headlineBadges: {
+    id: 'settings.service.form.headlineBadges',
+    defaultMessage: '!!!Unread message dadges',
+  },
+  headlineGeneral: {
+    id: 'settings.service.form.headlineGeneral',
+    defaultMessage: '!!!General',
+  },
 });
 
 @observer
@@ -250,20 +262,32 @@ export default class EditServiceForm extends Component {
               </Tabs>
             )}
             <div className="settings__options">
-              <Toggle field={form.$('isNotificationEnabled')} />
-              {recipe.hasIndirectMessages && (
-                <div>
-                  <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                  <p className="settings__help">
-                    {intl.formatMessage(messages.indirectMessageInfo)}
-                  </p>
-                </div>
-              )}
-              <Toggle field={form.$('isMuted')} />
-              <p className="settings__help">
-                {intl.formatMessage(messages.isMutedInfo)}
-              </p>
-              <Toggle field={form.$('isEnabled')} />
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineNotifications)}</h3>
+                <Toggle field={form.$('isNotificationEnabled')} />
+                <Toggle field={form.$('isMuted')} />
+                <p className="settings__help">
+                  {intl.formatMessage(messages.isMutedInfo)}
+                </p>
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineBadges)}</h3>
+                <Toggle field={form.$('isBadgeEnabled')} />
+                {recipe.hasIndirectMessages && form.$('isBadgeEnabled').value && (
+                  <div>
+                    <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
+                    <p className="settings__help">
+                      {intl.formatMessage(messages.indirectMessageInfo)}
+                    </p>
+                  </div>
+                )}
+              </div>
+
+              <div className="settings__settings-group">
+                <h3>{intl.formatMessage(messages.headlineGeneral)}</h3>
+                <Toggle field={form.$('isEnabled')} />
+              </div>
             </div>
             {recipe.message && (
               <p className="settings__message">
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 878e46d6d..ff398aa33 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -64,10 +64,6 @@ const messages = defineMessages({
     id: 'settings.app.currentVersion',
     defaultMessage: '!!!Current version:',
   },
-  restartRequired: {
-    id: 'settings.app.restartRequired',
-    defaultMessage: '!!!Changes require restart',
-  },
 });
 
 @observer
@@ -158,7 +154,6 @@ export default class EditSettingsForm extends Component {
             {/* Advanced */}
             <h2 id="advanced">{intl.formatMessage(messages.headlineAdvanced)}</h2>
             <Toggle field={form.$('enableSpellchecking')} />
-            <p className="settings__help">{intl.formatMessage(messages.restartRequired)}</p>
             {/* <Select field={form.$('spellcheckingLanguage')} /> */}
 
             {/* Updates */}
diff --git a/src/containers/settings/EditServiceScreen.js b/src/containers/settings/EditServiceScreen.js
index c4228ec03..3c52152b1 100644
--- a/src/containers/settings/EditServiceScreen.js
+++ b/src/containers/settings/EditServiceScreen.js
@@ -26,6 +26,10 @@ const messages = defineMessages({
     id: 'settings.service.form.enableNotification',
     defaultMessage: '!!!Enable Notifications',
   },
+  enableBadge: {
+    id: 'settings.service.form.enableBadge',
+    defaultMessage: '!!!Show unread message badges',
+  },
   enableAudio: {
     id: 'settings.service.form.enableAudio',
     defaultMessage: '!!!Enable audio',
@@ -88,6 +92,11 @@ export default class EditServiceScreen extends Component {
           value: service.isNotificationEnabled,
           default: true,
         },
+        isBadgeEnabled: {
+          label: intl.formatMessage(messages.enableBadge),
+          value: service.isBadgeEnabled,
+          default: true,
+        },
         isMuted: {
           label: intl.formatMessage(messages.enableAudio),
           value: !service.isMuted,
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index 9efb36450..567537d75 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -118,11 +118,15 @@
   "settings.service.form.name": "Name",
   "settings.service.form.enableService": "Enable service",
   "settings.service.form.enableNotification": "Enable notifications",
+  "settings.service.form.enableBadge": "Show unread message badges",
   "settings.service.form.team": "Team",
   "settings.service.form.customUrl": "Custom server",
   "settings.service.form.indirectMessages": "Show message badge for all new messages",
   "settings.service.form.enableAudio": "Enable audio",
   "settings.service.form.isMutedInfo": "When disabled, all notification sounds and audio playback are muted",
+  "settings.service.form.headlineNotifications": "Notifications",
+  "settings.service.form.headlineBadges": "Unread message badges",
+  "settings.service.form.headlineGeneral": "General",
   "settings.service.error.headline": "Error",
   "settings.service.error.goBack": "Back to services",
   "settings.service.error.message": "Could not load service recipe.",
diff --git a/src/lib/Menu.js b/src/lib/Menu.js
index d9c30466b..d01666d49 100644
--- a/src/lib/Menu.js
+++ b/src/lib/Menu.js
@@ -167,7 +167,7 @@ export default class FranzMenu {
             label: 'Settings',
             accelerator: 'CmdOrCtrl+,',
             click: () => {
-              this.actions.ui.openSettings({ path: '' });
+              this.actions.ui.openSettings({ path: 'app' });
             },
           },
           {
diff --git a/src/models/Service.js b/src/models/Service.js
index 958e4b11e..0b19440e7 100644
--- a/src/models/Service.js
+++ b/src/models/Service.js
@@ -22,6 +22,7 @@ export default class Service {
   @observable team = '';
   @observable customUrl = '';
   @observable isNotificationEnabled = true;
+  @observable isBadgeEnabled = true;
   @observable isIndirectMessageBadgeEnabled = true;
   @observable customIconUrl = '';
   @observable hasCrashed = false;
@@ -52,6 +53,9 @@ export default class Service {
     this.isNotificationEnabled = data.isNotificationEnabled !== undefined
       ? data.isNotificationEnabled : this.isNotificationEnabled;
 
+    this.isBadgeEnabled = data.isBadgeEnabled !== undefined
+      ? data.isBadgeEnabled : this.isBadgeEnabled;
+
     this.isIndirectMessageBadgeEnabled = data.isIndirectMessageBadgeEnabled !== undefined
       ? data.isIndirectMessageBadgeEnabled : this.isIndirectMessageBadgeEnabled;
 
diff --git a/src/models/Settings.js b/src/models/Settings.js
index 35bfe0d05..ca44da258 100644
--- a/src/models/Settings.js
+++ b/src/models/Settings.js
@@ -1,4 +1,4 @@
-import { observable } from 'mobx';
+import { observable, extendObservable } from 'mobx';
 import { DEFAULT_APP_SETTINGS } from '../config';
 
 export default class Settings {
@@ -17,4 +17,8 @@ export default class Settings {
   constructor(data) {
     Object.assign(this, data);
   }
+
+  update(data) {
+    extendObservable(this, data);
+  }
 }
diff --git a/src/stores/ServicesStore.js b/src/stores/ServicesStore.js
index b04aafd78..66f37af26 100644
--- a/src/stores/ServicesStore.js
+++ b/src/stores/ServicesStore.js
@@ -297,7 +297,7 @@ export default class ServicesStore extends Store {
       });
     } else if (channel === 'notification') {
       const options = args[0].options;
-      if (service.recipe.hasNotificationSound || service.isMuted) {
+      if (service.recipe.hasNotificationSound || service.isMuted || this.stores.settings.all.isAppMuted) {
         Object.assign(options, {
           silent: true,
         });
@@ -491,13 +491,13 @@ export default class ServicesStore extends Store {
     const showMessageBadgeWhenMuted = this.stores.settings.all.showMessageBadgeWhenMuted;
     const showMessageBadgesEvenWhenMuted = this.stores.ui.showMessageBadgesEvenWhenMuted;
 
-    const unreadDirectMessageCount = this.enabled
-      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted)
+    const unreadDirectMessageCount = this.allDisplayed
+      .filter(s => (showMessageBadgeWhenMuted || s.isNotificationEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
       .map(s => s.unreadDirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
-    const unreadIndirectMessageCount = this.enabled
-      .filter(s => (showMessageBadgeWhenMuted || s.isIndirectMessageBadgeEnabled) && showMessageBadgesEvenWhenMuted)
+    const unreadIndirectMessageCount = this.allDisplayed
+      .filter(s => (showMessageBadgeWhenMuted || s.isIndirectMessageBadgeEnabled) && showMessageBadgesEvenWhenMuted && s.isBadgeEnabled)
       .map(s => s.unreadIndirectMessageCount)
       .reduce((a, b) => a + b, 0);
 
diff --git a/src/stores/SettingsStore.js b/src/stores/SettingsStore.js
index 33473f16d..da99a720f 100644
--- a/src/stores/SettingsStore.js
+++ b/src/stores/SettingsStore.js
@@ -26,7 +26,7 @@ export default class SettingsStore extends Store {
   }
 
   @computed get all() {
-    return this.allSettingsRequest.result || new SettingsModel();
+    return new SettingsModel(this.allSettingsRequest.result);
   }
 
   @action async _update({ settings }) {
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 73cef0813..b29ed5468 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -151,8 +151,23 @@
     }
   }
 
-  .settings__options {
-    margin-top: 30px;
+  &__options {
+    margin-top: 20px;
+  }
+
+  &__settings-group {
+    margin-top: 10px;
+
+    h3 {
+      font-weight: bold;
+      margin: 25px 0 15px;
+      color: $theme-gray-light;
+      letter-spacing: -0.1px;
+
+      &:first-of-type {
+        margin-top: 0;
+      }
+    }
   }
 
   .settings__message {
@@ -173,10 +188,6 @@
     margin: -10px 0 20px 55px;;
     font-size: 12px;
     color: $theme-gray-light;
-
-    &:last-of-type {
-      margin-bottom: 30px;
-    }
   }
 
   .settings__controls {
diff --git a/src/webview/plugin.js b/src/webview/plugin.js
index c877132b1..cf38169d3 100644
--- a/src/webview/plugin.js
+++ b/src/webview/plugin.js
@@ -1,14 +1,14 @@
 import { ipcRenderer } from 'electron';
+import { ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
 import path from 'path';
 
+import { isDevMode } from '../environment';
 import RecipeWebview from './lib/RecipeWebview';
 
 import Spellchecker from './spellchecker.js';
 import './notifications.js';
 import './ime.js';
 
-const spellchecker = new Spellchecker();
-
 ipcRenderer.on('initializeRecipe', (e, data) => {
   const modulePath = path.join(data.recipe.path, 'webview.js');
   // Delete module from cache
@@ -21,20 +21,22 @@ ipcRenderer.on('initializeRecipe', (e, data) => {
   }
 });
 
+const spellchecker = new Spellchecker();
+spellchecker.initialize();
+
+const contextMenuBuilder = new ContextMenuBuilder(spellchecker.handler, null, isDevMode);
+
+new ContextMenuListener((info) => { // eslint-disable-line
+  contextMenuBuilder.showPopupMenu(info);
+});
+
 ipcRenderer.on('settings-update', (e, data) => {
-  if (data.enableSpellchecking) {
-    if (!spellchecker.isEnabled) {
-      spellchecker.enable();
-
-      // TODO: this does not work yet, needs more testing
-      // if (data.spellcheckingLanguage !== 'auto') {
-      //   console.log('set spellchecking language to', data.spellcheckingLanguage);
-      //   spellchecker.switchLanguage(data.spellcheckingLanguage);
-      // }
-    }
-  }
+  console.log('settings-update', data);
+  spellchecker.toggleSpellchecker(data.enableSpellchecking);
 });
 
+// initSpellche
+
 document.addEventListener('DOMContentLoaded', () => {
   ipcRenderer.sendToHost('hello');
 }, false);
diff --git a/src/webview/spellchecker.js b/src/webview/spellchecker.js
index 5beb77e03..a504a4039 100644
--- a/src/webview/spellchecker.js
+++ b/src/webview/spellchecker.js
@@ -1,30 +1,63 @@
-import { SpellCheckHandler, ContextMenuListener, ContextMenuBuilder } from 'electron-spellchecker';
+import { SpellCheckHandler } from 'electron-spellchecker';
 
 import { isMac } from '../environment';
 
 export default class Spellchecker {
-  isEnabled = false;
-  spellchecker = null;
+  isInitialized = false;
+  handler = null;
+  initRetries = 0;
+  DOMCheckInterval = null;
+
+  get inputs() {
+    return document.querySelectorAll('input[type="text"], [contenteditable="true"], textarea');
+  }
+
+  initialize() {
+    this.handler = new SpellCheckHandler();
 
-  enable() {
-    this.spellchecker = new SpellCheckHandler();
     if (!isMac) {
-      this.spellchecker.attachToInput();
-      this.spellchecker.switchLanguage(navigator.language);
+      this.attach();
+    } else {
+      this.isInitialized = true;
+    }
+  }
+
+  attach() {
+    let initFailed = false;
+
+    if (this.initRetries > 3) {
+      console.error('Could not initialize spellchecker');
+      return;
     }
 
-    const contextMenuBuilder = new ContextMenuBuilder(this.spellchecker);
+    try {
+      this.handler.attachToInput();
+      this.handler.switchLanguage(navigator.language);
+    } catch (err) {
+      initFailed = true;
+      this.initRetries = +1;
+      setTimeout(() => { this.attach(); console.warn('Spellchecker init failed, trying again in 5s'); }, 5000);
+    }
 
-    new ContextMenuListener((info) => { // eslint-disable-line
-      contextMenuBuilder.showPopupMenu(info);
+    if (!initFailed) {
+      this.isInitialized = true;
+    }
+  }
+
+  toggleSpellchecker(enable = false) {
+    this.inputs.forEach((input) => {
+      input.setAttribute('spellcheck', enable);
     });
+
+    this.intervalHandler(enable);
   }
 
-  // TODO: this does not work yet, needs more testing
-  // switchLanguage(language) {
-  //   if (language !== 'auto') {
-  //     this.spellchecker.switchLanguage(language);
-  //   }
-  // }
+  intervalHandler(enable) {
+    clearInterval(this.DOMCheckInterval);
+
+    if (enable) {
+      this.DOMCheckInterval = setInterval(() => this.toggleSpellchecker(enable), 30000);
+    }
+  }
 }