5 files changed, 103 insertions, 37 deletions

diff --git a/src/components/settings/navigation/SettingsNavigation.js b/src/components/settings/navigation/SettingsNavigation.js
index 3b21a7765..fea8d682d 100644
--- a/src/components/settings/navigation/SettingsNavigation.js
+++ b/src/components/settings/navigation/SettingsNavigation.js
@@ -74,7 +74,6 @@ export default class SettingsNavigation extends Component {
         <Link
           to="/auth/logout"
           className="settings-navigation__link"
-          activeClassName="is-active"
         >
           {intl.formatMessage(messages.logout)}
         </Link>
diff --git a/src/components/settings/recipes/RecipesDashboard.js b/src/components/settings/recipes/RecipesDashboard.js
index 02ea04e35..b6ade5da4 100644
--- a/src/components/settings/recipes/RecipesDashboard.js
+++ b/src/components/settings/recipes/RecipesDashboard.js
@@ -9,6 +9,7 @@ import Infobox from '../../ui/Infobox';
 import RecipeItem from './RecipeItem';
 import Loader from '../../ui/Loader';
 import Appear from '../../ui/effects/Appear';
+import { FRANZ_SERVICE_REQUEST } from '../../../config';
 
 const messages = defineMessages({
   headline: {
@@ -35,6 +36,10 @@ const messages = defineMessages({
     id: 'settings.recipes.servicesSuccessfulAddedInfo',
     defaultMessage: '!!!Service successfully added',
   },
+  missingService: {
+    id: 'settings.recipes.missingService',
+    defaultMessage: '!!!Missing a service?',
+  },
 });
 
 @observer
@@ -96,33 +101,39 @@ export default class RecipesDashboard extends Component {
               </Infobox>
             </Appear>
           )}
-          {!searchNeedle && (
-            <div className="recipes__navigation">
-              <Link
-                to="/settings/recipes"
-                className="badge"
-                activeClassName="badge--primary"
-              >
-                {intl.formatMessage(messages.mostPopularRecipes)}
-              </Link>
+          {/* {!searchNeedle && ( */}
+          <div className="recipes__navigation">
+            <Link
+              to="/settings/recipes"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.mostPopularRecipes)}
+            </Link>
+            <Link
+              to="/settings/recipes/all"
+              className="badge"
+              activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+              onClick={() => resetSearch()}
+            >
+              {intl.formatMessage(messages.allRecipes)}
+            </Link>
+            {devRecipesCount > 0 && (
               <Link
-                to="/settings/recipes/all"
+                to="/settings/recipes/dev"
                 className="badge"
-                activeClassName="badge--primary"
+                activeClassName={`${!searchNeedle ? 'badge--primary' : ''}`}
+                onClick={() => resetSearch()}
               >
-                {intl.formatMessage(messages.allRecipes)}
+                {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
               </Link>
-              {devRecipesCount > 0 && (
-                <Link
-                  to="/settings/recipes/dev"
-                  className="badge"
-                  activeClassName="badge--primary"
-                >
-                  {intl.formatMessage(messages.devRecipes)} ({devRecipesCount})
-                </Link>
-              )}
-            </div>
-          )}
+            )}
+            <a href={FRANZ_SERVICE_REQUEST} target="_blank" className="link recipes__service-request">
+              {intl.formatMessage(messages.missingService)} <i className="mdi mdi-open-in-new" />
+            </a>
+          </div>
+          {/* )} */}
           {isLoading ? (
             <Loader />
           ) : (
diff --git a/src/components/settings/services/EditServiceForm.js b/src/components/settings/services/EditServiceForm.js
index 9b359a78e..36cefe87c 100644
--- a/src/components/settings/services/EditServiceForm.js
+++ b/src/components/settings/services/EditServiceForm.js
@@ -61,7 +61,11 @@ const messages = defineMessages({
   },
   indirectMessageInfo: {
     id: 'settings.service.form.indirectMessageInfo',
-    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...', // eslint-disable-line
+    defaultMessage: '!!!You will be notified about all new messages in a channel, not just @username, @channel, @here, ...',
+  },
+  isMutedInfo: {
+    id: 'settings.service.form.isMutedInfo',
+    defaultMessage: '!!!When disabled, all notification sounds and audio playback are muted',
   },
 });
 
@@ -110,7 +114,7 @@ export default class EditServiceForm extends Component {
         if (recipe.validateUrl && values.customUrl) {
           this.setState({ isValidatingCustomUrl: true });
           try {
-            values.customUrl = normalizeUrl(values.customUrl);
+            values.customUrl = normalizeUrl(values.customUrl, { stripWWW: false });
             isValid = await recipe.validateUrl(values.customUrl);
           } catch (err) {
             console.warn('ValidateURL', err);
@@ -231,11 +235,15 @@ export default class EditServiceForm extends Component {
               {recipe.hasIndirectMessages && (
                 <div>
                   <Toggle field={form.$('isIndirectMessageBadgeEnabled')} />
-                  <p className="settings__indirect-message-help">
+                  <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>
             {recipe.message && (
diff --git a/src/components/settings/services/ServiceItem.js b/src/components/settings/services/ServiceItem.js
index 20d8581d0..9743315b0 100644
--- a/src/components/settings/services/ServiceItem.js
+++ b/src/components/settings/services/ServiceItem.js
@@ -16,6 +16,10 @@ const messages = defineMessages({
     id: 'settings.services.tooltip.notificationsDisabled',
     defaultMessage: '!!!Notifications are disabled',
   },
+  tooltipIsMuted: {
+    id: 'settings.services.tooltip.isMuted',
+    defaultMessage: '!!!All sounds are muted',
+  },
 });
 
 @observer
@@ -66,6 +70,17 @@ export default class ServiceItem extends Component {
           className="service-table__column-info"
           onClick={goToServiceForm}
         >
+          {service.isMuted && (
+            <span
+              className="mdi mdi-bell-off"
+              data-tip={intl.formatMessage(messages.tooltipIsMuted)}
+            />
+          )}
+        </td>
+        <td
+          className="service-table__column-info"
+          onClick={goToServiceForm}
+        >
           {!service.isEnabled && (
             <span
               className="mdi mdi-power"
@@ -85,13 +100,6 @@ export default class ServiceItem extends Component {
           )}
           <ReactTooltip place="top" type="dark" effect="solid" />
         </td>
-        {/* <td className="service-table__column-action">
-          <input
-            type="checkbox"
-            onChange={toggleAction}
-            checked={service.isEnabled}
-          />
-        </td> */}
       </tr>
     );
   }
diff --git a/src/components/settings/settings/EditSettingsForm.js b/src/components/settings/settings/EditSettingsForm.js
index 5675fecf4..4ce9b7ab2 100644
--- a/src/components/settings/settings/EditSettingsForm.js
+++ b/src/components/settings/settings/EditSettingsForm.js
@@ -9,6 +9,8 @@ import Button from '../../ui/Button';
 import Toggle from '../../ui/Toggle';
 import Select from '../../ui/Select';
 
+import { FRANZ_TRANSLATION } from '../../../config';
+
 const messages = defineMessages({
   headline: {
     id: 'settings.app.headline',
@@ -26,6 +28,18 @@ const messages = defineMessages({
     id: 'settings.app.headlineUpdates',
     defaultMessage: '!!!Updates',
   },
+  headlineAppearance: {
+    id: 'settings.app.headlineAppearance',
+    defaultMessage: '!!!Appearance',
+  },
+  headlineAdvanced: {
+    id: 'settings.app.headlineAdvanced',
+    defaultMessage: '!!!Advanced',
+  },
+  translationHelp: {
+    id: 'settings.app.translationHelp',
+    defaultMessage: '!!!Help us to translate Franz into your language.',
+  },
   buttonSearchForUpdate: {
     id: 'settings.app.buttonSearchForUpdate',
     defaultMessage: '!!!Check for updates',
@@ -50,6 +64,10 @@ const messages = defineMessages({
     id: 'settings.app.currentVersion',
     defaultMessage: '!!!Current version:',
   },
+  restartRequired: {
+    id: 'settings.app.restartRequired',
+    defaultMessage: '!!!Changes require restart',
+  },
 });
 
 @observer
@@ -112,16 +130,38 @@ export default class EditSettingsForm extends Component {
             onChange={e => this.submit(e)}
             id="form"
           >
-            <h2>{intl.formatMessage(messages.headlineGeneral)}</h2>
+            {/* General */}
+            <h2 id="general">{intl.formatMessage(messages.headlineGeneral)}</h2>
             <Toggle field={form.$('autoLaunchOnStart')} />
             <Toggle field={form.$('runInBackground')} />
             <Toggle field={form.$('enableSystemTray')} />
             {process.platform === 'win32' && (
               <Toggle field={form.$('minimizeToSystemTray')} />
             )}
-            <h2>{intl.formatMessage(messages.headlineLanguage)}</h2>
+
+            {/* Appearance */}
+            <h2 id="apperance">{intl.formatMessage(messages.headlineAppearance)}</h2>
+            <Toggle field={form.$('showDisabledServices')} />
+
+            {/* Language */}
+            <h2 id="language">{intl.formatMessage(messages.headlineLanguage)}</h2>
             <Select field={form.$('locale')} showLabel={false} />
-            <h2>{intl.formatMessage(messages.headlineUpdates)}</h2>
+            <a
+              href={FRANZ_TRANSLATION}
+              target="_blank"
+              className="link"
+            >
+              {intl.formatMessage(messages.translationHelp)} <i className="mdi mdi-open-in-new" />
+            </a>
+
+            {/* 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 */}
+            <h2 id="updates">{intl.formatMessage(messages.headlineUpdates)}</h2>
             {updateIsReadyToInstall ? (
               <Button
                 label={intl.formatMessage(messages.buttonInstallUpdate)}