feat: add 'Services' tab to settings (#495)

2 files changed, 48 insertions, 29 deletions

diff --git a/src/components/settings/settings/EditSettingsForm.jsx b/src/components/settings/settings/EditSettingsForm.jsx
index a10d89570..0e5be38ed 100644
--- a/src/components/settings/settings/EditSettingsForm.jsx
+++ b/src/components/settings/settings/EditSettingsForm.jsx
@@ -46,6 +46,10 @@ const messages = defineMessages({
     id: 'settings.app.headlineGeneral',
     defaultMessage: 'General',
   },
+  headlineServices: {
+    id: 'settings.app.headlineServices',
+    defaultMessage: 'Services',
+  },
   hibernateInfo: {
     id: 'settings.app.hibernateInfo',
     defaultMessage:
@@ -416,6 +420,19 @@ class EditSettingsForm extends Component {
                 {intl.formatMessage(messages.headlineGeneral)}
               </H5>
               <H5
+                id="services"
+                className={
+                  this.state.activeSetttingsTab === 'services'
+                    ? 'badge badge--primary'
+                    : 'badge'
+                }
+                onClick={() => {
+                  this.setActiveSettingsTab('services');
+                }}
+              >
+                {intl.formatMessage(messages.headlineServices)}
+              </H5>
+              <H5
                 id="appearance"
                 className={
                   this.state.activeSetttingsTab === 'appearance'
@@ -594,8 +611,37 @@ class EditSettingsForm extends Component {
                 >
                   <span>{intl.formatMessage(messages.scheduledDNDInfo)}</span>
                 </p>
+              </div>
+            )}
 
-                <Hr />
+            {/* Services */}
+            {this.state.activeSetttingsTab === 'services' && (
+              <div>
+                <H2 className="settings__section_header">
+                  {intl.formatMessage(messages.sectionServiceIconsSettings)}
+                </H2>
+
+                <Toggle field={form.$('showDisabledServices')} />
+                <Toggle field={form.$('showServiceName')} />
+
+                {isUseGrayscaleServicesEnabled && <Hr />}
+
+                <Toggle field={form.$('useGrayscaleServices')} />
+
+                {isUseGrayscaleServicesEnabled && (
+                  <>
+                    <Slider
+                      type="number"
+                      onChange={e => this.submit(e)}
+                      field={form.$('grayscaleServicesDim')}
+                    />
+                    <Hr />
+                  </>
+                )}
+
+                <Toggle field={form.$('showMessageBadgeWhenMuted')} />
+                <Toggle field={form.$('enableLongPressServiceHint')} />
+                <Select field={form.$('iconSize')} />
 
                 <Select field={form.$('navigationBarBehaviour')} />
 
@@ -734,34 +780,6 @@ class EditSettingsForm extends Component {
                 <Toggle field={form.$('hideSettingsButton')} />
 
                 <Toggle field={form.$('alwaysShowWorkspaces')} />
-
-                <HrSections />
-
-                <H2 className="settings__section_header">
-                  {intl.formatMessage(messages.sectionServiceIconsSettings)}
-                </H2>
-
-                <Toggle field={form.$('showDisabledServices')} />
-                <Toggle field={form.$('showServiceName')} />
-
-                {isUseGrayscaleServicesEnabled && <Hr />}
-
-                <Toggle field={form.$('useGrayscaleServices')} />
-
-                {isUseGrayscaleServicesEnabled && (
-                  <>
-                    <Slider
-                      type="number"
-                      onChange={e => this.submit(e)}
-                      field={form.$('grayscaleServicesDim')}
-                    />
-                    <Hr />
-                  </>
-                )}
-
-                <Toggle field={form.$('showMessageBadgeWhenMuted')} />
-                <Toggle field={form.$('enableLongPressServiceHint')} />
-                <Select field={form.$('iconSize')} />
               </div>
             )}
 
diff --git a/src/i18n/locales/en-US.json b/src/i18n/locales/en-US.json
index d45ab5c3c..a98bc2f77 100644
--- a/src/i18n/locales/en-US.json
+++ b/src/i18n/locales/en-US.json
@@ -268,6 +268,7 @@
   "settings.app.headlineGeneral": "General",
   "settings.app.headlineLanguage": "Language",
   "settings.app.headlinePrivacy": "Privacy",
+  "settings.app.headlineServices": "Services",
   "settings.app.headlineUpdates": "Updates",
   "settings.app.hibernateInfo": "By default, Ferdium will keep all your services open and loaded in the background so they are ready when you want to use them. Service Hibernation will unload your services after a specified amount. This is useful to save RAM or keeping services from slowing down your computer.",
   "settings.app.inactivityLockInfo": "Minutes of inactivity, after which Ferdium should automatically lock. Use 0 to disable",