feat(notif): allow users to enable/disable specific agents (#1172)

* refactor(ui): add tabs to user notification settings

* feat(notif): allow users to enable/disable specific agents

* fix(ui): only enforce required fields when agent is enabled

* fix(ui): hide unavailable notification agents

* feat(notif): mention admin users for admin Discord notifications

* fix(ui): modify styling of PGP key textareas to suit expected input

* fix(notif): mention all admins when there are multiple and fix rebase error

* fix: add missing form values, and fix Yup validation

* refactor: reduce repeated logic/code in email notif agent

* refactor: move 'Notification Types' label into NotificationTypeSelector component

* fix(email): correct inconsistencies in email template formatting

* refactor: use bitfields for storing user-enabled notif agent types

* feat: improve notification agent logging

* fix(ui): mark string fields as nullable so empty values are not type errors

* fix: add validation for PGP-related inputs

* fix: correctly fetch user in user settings & log mentioned IDs for Discord notifs

* fix(ui): fix mobile nav dropdown text & add hover effect to button-style tabs

* fix(notif): process admin email notifications asynchronously

* fix(logging): log name of notification type instead of its enum value

* fix: mark required fields and pass all user settings values to API

* fix(frontend): call mutate after changing email/Discord/Telegram global notif settings

* refactor: get global notif settings from relevant API endpoints instead of adding to public settings

* fix(notif): fall back to email notifications being enabled (default) if user settings do not exist

* fix(notif): do not set notifyUser for MEDIA_PENDING or MEDIA_AUTO_APPROVED

* fix: expose notif enabled settings in user notif endpoints & remove global enable notif setting

* fix(notif): remove unnecessary allowed_mentions object from Discord payload

* fix(notif): use form values for email test notification

* fix: make suggested changes and regenerate DB migration

* fix: loosen validation of PGP keys

* fix: fix user profile settings routes

* fix: remove route guard from profile pages

src/components/Common/SettingsTabs/index.tsx

@@ -0,0 +1,173 @@
+import Link from 'next/link';
+import { useRouter } from 'next/router';
+import React from 'react';
+import { hasPermission, Permission } from '../../../../server/lib/permissions';
+import { useUser } from '../../../hooks/useUser';
+
+export interface SettingsRoute {
+  text: string;
+  content?: React.ReactNode;
+  route: string;
+  regex: RegExp;
+  requiredPermission?: Permission | Permission[];
+  permissionType?: { type: 'and' | 'or' };
+  hidden?: boolean;
+}
+
+const SettingsLink: React.FC<{
+  tabType: 'default' | 'button';
+  currentPath: string;
+  route: string;
+  regex: RegExp;
+  hidden?: boolean;
+  isMobile?: boolean;
+}> = ({
+  children,
+  tabType,
+  currentPath,
+  route,
+  regex,
+  hidden = false,
+  isMobile = false,
+}) => {
+  if (hidden) {
+    return null;
+  }
+
+  if (isMobile) {
+    return <option value={route}>{children}</option>;
+  }
+
+  let linkClasses =
+    'px-1 py-4 ml-8 text-sm font-medium leading-5 transition duration-300 border-b-2 border-transparent whitespace-nowrap first:ml-0';
+  let activeLinkColor = 'text-indigo-500 border-indigo-600';
+  let inactiveLinkColor =
+    'text-gray-500 border-transparent hover:text-gray-300 hover:border-gray-400 focus:text-gray-300 focus:border-gray-400';
+
+  if (tabType === 'button') {
+    linkClasses =
+      'px-3 py-2 ml-8 text-sm font-medium transition duration-300 rounded-md whitespace-nowrap first:ml-0';
+    activeLinkColor = 'bg-indigo-700';
+    inactiveLinkColor = 'bg-gray-800 hover:bg-gray-700 focus:bg-gray-700';
+  }
+
+  return (
+    <Link href={route}>
+      <a
+        className={`${linkClasses} ${
+          currentPath.match(regex) ? activeLinkColor : inactiveLinkColor
+        }`}
+        aria-current="page"
+      >
+        {children}
+      </a>
+    </Link>
+  );
+};
+
+const SettingsTabs: React.FC<{
+  tabType?: 'default' | 'button';
+  settingsRoutes: SettingsRoute[];
+}> = ({ tabType = 'default', settingsRoutes }) => {
+  const router = useRouter();
+  const { user: currentUser } = useUser();
+
+  return (
+    <>
+      <div className="sm:hidden">
+        <label htmlFor="tabs" className="sr-only">
+          Select a Tab
+        </label>
+        <select
+          onChange={(e) => {
+            router.push(e.target.value);
+          }}
+          onBlur={(e) => {
+            router.push(e.target.value);
+          }}
+          defaultValue={
+            settingsRoutes.find((route) => !!router.pathname.match(route.regex))
+              ?.route
+          }
+          aria-label="Selected Tab"
+        >
+          {settingsRoutes
+            .filter(
+              (route) =>
+                !route.hidden &&
+                (route.requiredPermission
+                  ? hasPermission(
+                      route.requiredPermission,
+                      currentUser?.permissions ?? 0,
+                      route.permissionType
+                    )
+                  : true)
+            )
+            .map((route, index) => (
+              <SettingsLink
+                tabType={tabType}
+                currentPath={router.pathname}
+                route={route.route}
+                regex={route.regex}
+                hidden={route.hidden ?? false}
+                isMobile
+                key={`mobile-settings-link-${index}`}
+              >
+                {route.text}
+              </SettingsLink>
+            ))}
+        </select>
+      </div>
+      {tabType === 'button' ? (
+        <div className="hidden overflow-x-scroll overflow-y-hidden sm:block hide-scrollbar">
+          <nav className="flex space-x-4" aria-label="Tabs">
+            {settingsRoutes.map((route, index) => (
+              <SettingsLink
+                tabType={tabType}
+                currentPath={router.pathname}
+                route={route.route}
+                regex={route.regex}
+                hidden={route.hidden ?? false}
+                key={`button-settings-link-${index}`}
+              >
+                {route.content ?? route.text}
+              </SettingsLink>
+            ))}
+          </nav>
+        </div>
+      ) : (
+        <div className="hidden sm:block">
+          <div className="border-b border-gray-600">
+            <nav className="flex -mb-px">
+              {settingsRoutes
+                .filter(
+                  (route) =>
+                    !route.hidden &&
+                    (route.requiredPermission
+                      ? hasPermission(
+                          route.requiredPermission,
+                          currentUser?.permissions ?? 0,
+                          route.permissionType
+                        )
+                      : true)
+                )
+                .map((route, index) => (
+                  <SettingsLink
+                    tabType={tabType}
+                    currentPath={router.pathname}
+                    route={route.route}
+                    regex={route.regex}
+                    key={`standard-settings-link-${index}`}
+                  >
+                    {route.text}
+                  </SettingsLink>
+                ))}
+            </nav>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default SettingsTabs;

src/components/NotificationTypeSelector/NotificationType/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { NotificationItem, hasNotificationType } from '..';
+import { hasNotificationType, NotificationItem } from '..';
 
 interface NotificationTypeProps {
   option: NotificationItem;
@@ -46,7 +46,7 @@ const NotificationType: React.FC<NotificationTypeProps> = ({
           />
         </div>
         <div className="ml-3 text-sm leading-6">
-          <label htmlFor={option.id} className="font-medium">
+          <label htmlFor={option.id} className="font-medium text-white">
             {option.name}
           </label>
           <p className="text-gray-500">{option.description}</p>

src/components/NotificationTypeSelector/index.tsx

@@ -3,6 +3,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import NotificationType from './NotificationType';
 
 const messages = defineMessages({
+  notificationTypes: 'Notification Types',
   mediarequested: 'Media Requested',
   mediarequestedDescription:
     'Sends a notification when media is requested and requires approval.',
@@ -111,16 +112,26 @@ const NotificationTypeSelector: React.FC<NotificationTypeSelectorProps> = ({
   ];
 
   return (
-    <>
-      {types.map((type) => (
-        <NotificationType
-          key={`notification-type-${type.id}`}
-          option={type}
-          currentTypes={currentTypes}
-          onUpdate={onUpdate}
-        />
-      ))}
-    </>
+    <div role="group" aria-labelledby="group-label" className="form-group">
+      <div className="form-row">
+        <span id="group-label" className="group-label">
+          {intl.formatMessage(messages.notificationTypes)}
+          <span className="label-required">*</span>
+        </span>
+        <div className="form-input">
+          <div className="max-w-lg">
+            {types.map((type) => (
+              <NotificationType
+                key={`notification-type-${type.id}`}
+                option={type}
+                currentTypes={currentTypes}
+                onUpdate={onUpdate}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
   );
 };
 

src/components/Settings/Notifications/NotificationsDiscord.tsx

@@ -18,8 +18,7 @@ const messages = defineMessages({
   webhookUrlPlaceholder: 'Server Settings → Integrations → Webhooks',
   discordsettingssaved: 'Discord notification settings saved successfully!',
   discordsettingsfailed: 'Discord notification settings failed to save.',
-  testsent: 'Test notification sent!',
-  notificationtypes: 'Notification Types',
+  testsent: 'Discord test notification sent!',
   validationUrl: 'You must provide a valid URL',
 });
 
@@ -35,7 +34,13 @@ const NotificationsDiscord: React.FC = () => {
       .nullable()
       .url(intl.formatMessage(messages.validationUrl)),
     webhookUrl: Yup.string()
-      .required(intl.formatMessage(messages.validationUrl))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationUrl)),
+        otherwise: Yup.string().nullable(),
+      })
       .url(intl.formatMessage(messages.validationUrl)),
   });
 
@@ -64,6 +69,7 @@ const NotificationsDiscord: React.FC = () => {
               webhookUrl: values.webhookUrl,
             },
           });
+
           addToast(intl.formatMessage(messages.discordsettingssaved), {
             appearance: 'success',
             autoDismiss: true,
@@ -163,26 +169,10 @@ const NotificationsDiscord: React.FC = () => {
                 )}
               </div>
             </div>
-            <div
-              role="group"
-              aria-labelledby="group-label"
-              className="form-group"
-            >
-              <div className="form-row">
-                <span id="group-label" className="group-label">
-                  {intl.formatMessage(messages.notificationtypes)}
-                  <span className="label-required">*</span>
-                </span>
-                <div className="form-input">
-                  <div className="max-w-lg">
-                    <NotificationTypeSelector
-                      currentTypes={values.types}
-                      onUpdate={(newTypes) => setFieldValue('types', newTypes)}
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
+            <NotificationTypeSelector
+              currentTypes={values.types}
+              onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+            />
             <div className="actions">
               <div className="flex justify-end">
                 <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/Notifications/NotificationsEmail.tsx

@@ -13,7 +13,7 @@ import LoadingSpinner from '../../Common/LoadingSpinner';
 import NotificationTypeSelector from '../../NotificationTypeSelector';
 
 const messages = defineMessages({
-  validationSmtpHostRequired: 'You must provide a hostname or IP address',
+  validationSmtpHostRequired: 'You must provide a valid hostname or IP address',
   validationSmtpPortRequired: 'You must provide a valid port number',
   agentenabled: 'Enable Agent',
   emailsender: 'Sender Address',
@@ -24,34 +24,32 @@ const messages = defineMessages({
   authPass: 'SMTP Password',
   emailsettingssaved: 'Email notification settings saved successfully!',
   emailsettingsfailed: 'Email notification settings failed to save.',
-  testsent: 'Test notification sent!',
+  testsent: 'Email test notification sent!',
   allowselfsigned: 'Allow Self-Signed Certificates',
   ssldisabletip:
     'SSL should be disabled on standard TLS connections (port 587)',
   senderName: 'Sender Name',
-  notificationtypes: 'Notification Types',
   validationEmail: 'You must provide a valid email address',
   emailNotificationTypesAlert: 'Email Notification Recipients',
   emailNotificationTypesAlertDescription:
     '<strong>Media Requested</strong>, <strong>Media Automatically Approved</strong>, and <strong>Media Failed</strong> email notifications are sent to all users with the <strong>Manage Requests</strong> permission.',
   emailNotificationTypesAlertDescriptionPt2:
     '<strong>Media Approved</strong>, <strong>Media Declined</strong>, and <strong>Media Available</strong> email notifications are sent to the user who submitted the request.',
-  pgpPrivateKey: '<PgpLink>PGP</PgpLink> Private Key',
+  pgpPrivateKey: 'PGP Private Key',
   pgpPrivateKeyTip:
-    'Sign encrypted email messages (PGP password is also required)',
-  pgpPassword: '<PgpLink>PGP</PgpLink> Password',
+    'Sign encrypted email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>',
+  validationPgpPrivateKey:
+    'You must provide a valid PGP private key if a PGP password is entered',
+  pgpPassword: 'PGP Password',
   pgpPasswordTip:
-    'Sign encrypted email messages (PGP private key is also required)',
+    'Sign encrypted email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>',
+  validationPgpPassword:
+    'You must provide a PGP password if a PGP private key is entered',
 });
 
-export function PgpLink(msg: string): JSX.Element {
+export function OpenPgpLink(msg: string): JSX.Element {
   return (
-    <a
-      href="https://www.openpgp.org/"
-      target="_blank"
-      rel="noreferrer"
-      className="text-gray-100 underline transition duration-300 hover:text-white"
-    >
+    <a href="https://www.openpgp.org/" target="_blank" rel="noreferrer">
       {msg}
     </a>
   );
@@ -64,21 +62,60 @@ const NotificationsEmail: React.FC = () => {
     '/api/v1/settings/notifications/email'
   );
 
-  const NotificationsEmailSchema = Yup.object().shape({
-    emailFrom: Yup.string()
-      .required(intl.formatMessage(messages.validationEmail))
-      .email(intl.formatMessage(messages.validationEmail)),
-    smtpHost: Yup.string()
-      .required(intl.formatMessage(messages.validationSmtpHostRequired))
-      .matches(
-        // eslint-disable-next-line
-        /^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
-        intl.formatMessage(messages.validationSmtpHostRequired)
-      ),
-    smtpPort: Yup.number()
-      .typeError(intl.formatMessage(messages.validationSmtpPortRequired))
-      .required(intl.formatMessage(messages.validationSmtpPortRequired)),
-  });
+  const NotificationsEmailSchema = Yup.object().shape(
+    {
+      emailFrom: Yup.string()
+        .when('enabled', {
+          is: true,
+          then: Yup.string()
+            .nullable()
+            .required(intl.formatMessage(messages.validationEmail)),
+          otherwise: Yup.string().nullable(),
+        })
+        .email(intl.formatMessage(messages.validationEmail)),
+      smtpHost: Yup.string()
+        .when('enabled', {
+          is: true,
+          then: Yup.string()
+            .nullable()
+            .required(intl.formatMessage(messages.validationSmtpHostRequired)),
+          otherwise: Yup.string().nullable(),
+        })
+        .matches(
+          /^(([a-z]|\d|_|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])$/i,
+          intl.formatMessage(messages.validationSmtpHostRequired)
+        ),
+      smtpPort: Yup.number()
+        .typeError(intl.formatMessage(messages.validationSmtpPortRequired))
+        .when('enabled', {
+          is: true,
+          then: Yup.number().required(
+            intl.formatMessage(messages.validationSmtpPortRequired)
+          ),
+          otherwise: Yup.number().nullable(),
+        }),
+      pgpPrivateKey: Yup.string()
+        .when('pgpPassword', {
+          is: (value: unknown) => !!value,
+          then: Yup.string()
+            .nullable()
+            .required(intl.formatMessage(messages.validationPgpPrivateKey)),
+          otherwise: Yup.string().nullable(),
+        })
+        .matches(
+          /^-----BEGIN PGP PRIVATE KEY BLOCK-----.+-----END PGP PRIVATE KEY BLOCK-----$/,
+          intl.formatMessage(messages.validationPgpPrivateKey)
+        ),
+      pgpPassword: Yup.string().when('pgpPrivateKey', {
+        is: (value: unknown) => !!value,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationPgpPassword)),
+        otherwise: Yup.string().nullable(),
+      }),
+    },
+    [['pgpPrivateKey', 'pgpPassword']]
+  );
 
   if (!data && !error) {
     return <LoadingSpinner />;
@@ -119,6 +156,7 @@ const NotificationsEmail: React.FC = () => {
               pgpPassword: values.pgpPassword,
             },
           });
+
           addToast(intl.formatMessage(messages.emailsettingssaved), {
             appearance: 'success',
             autoDismiss: true,
@@ -323,15 +361,15 @@ const NotificationsEmail: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="pgpPrivateKey" className="text-label">
                   <span className="mr-2">
-                    {intl.formatMessage(messages.pgpPrivateKey, {
-                      PgpLink: PgpLink,
-                    })}
+                    {intl.formatMessage(messages.pgpPrivateKey)}
                   </span>
                   <Badge badgeType="danger">
                     {intl.formatMessage(globalMessages.advanced)}
                   </Badge>
                   <span className="label-tip">
-                    {intl.formatMessage(messages.pgpPrivateKeyTip)}
+                    {intl.formatMessage(messages.pgpPrivateKeyTip, {
+                      OpenPgpLink: OpenPgpLink,
+                    })}
                   </span>
                 </label>
                 <div className="form-input">
@@ -340,23 +378,27 @@ const NotificationsEmail: React.FC = () => {
                       id="pgpPrivateKey"
                       name="pgpPrivateKey"
                       as="textarea"
-                      rows="3"
+                      rows="10"
+                      className="font-mono text-xs"
                     />
                   </div>
+                  {errors.pgpPrivateKey && touched.pgpPrivateKey && (
+                    <div className="error">{errors.pgpPrivateKey}</div>
+                  )}
                 </div>
               </div>
               <div className="form-row">
                 <label htmlFor="pgpPassword" className="text-label">
                   <span className="mr-2">
-                    {intl.formatMessage(messages.pgpPassword, {
-                      PgpLink: PgpLink,
-                    })}
+                    {intl.formatMessage(messages.pgpPassword)}
                   </span>
                   <Badge badgeType="danger">
                     {intl.formatMessage(globalMessages.advanced)}
                   </Badge>
                   <span className="label-tip">
-                    {intl.formatMessage(messages.pgpPasswordTip)}
+                    {intl.formatMessage(messages.pgpPasswordTip, {
+                      OpenPgpLink: OpenPgpLink,
+                    })}
                   </span>
                 </label>
                 <div className="form-input">
@@ -368,30 +410,15 @@ const NotificationsEmail: React.FC = () => {
                       autoComplete="off"
                     />
                   </div>
+                  {errors.pgpPassword && touched.pgpPassword && (
+                    <div className="error">{errors.pgpPassword}</div>
+                  )}
                 </div>
               </div>
-              <div
-                role="group"
-                aria-labelledby="group-label"
-                className="form-group"
-              >
-                <div className="form-row">
-                  <span id="group-label" className="group-label">
-                    {intl.formatMessage(messages.notificationtypes)}
-                    <span className="label-required">*</span>
-                  </span>
-                  <div className="form-input">
-                    <div className="max-w-lg">
-                      <NotificationTypeSelector
-                        currentTypes={values.types}
-                        onUpdate={(newTypes) =>
-                          setFieldValue('types', newTypes)
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <NotificationTypeSelector
+                currentTypes={values.types}
+                onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+              />
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/Notifications/NotificationsPushbullet/index.tsx

@@ -18,11 +18,10 @@ const messages = defineMessages({
   pushbulletSettingsSaved:
     'Pushbullet notification settings saved successfully!',
   pushbulletSettingsFailed: 'Pushbullet notification settings failed to save.',
-  testSent: 'Test notification sent!',
+  testSent: 'Pushbullet test notification sent!',
   settingUpPushbullet: 'Setting Up Pushbullet Notifications',
   settingUpPushbulletDescription:
-    'To configure Pushbullet notifications, you will need to <CreateAccessTokenLink>create an access token</CreateAccessTokenLink> and enter it below.',
-  notificationTypes: 'Notification Types',
+    'To configure Pushbullet notifications, you will need to <CreateAccessTokenLink>create an access token</CreateAccessTokenLink>.',
 });
 
 const NotificationsPushbullet: React.FC = () => {
@@ -33,9 +32,13 @@ const NotificationsPushbullet: React.FC = () => {
   );
 
   const NotificationsPushbulletSchema = Yup.object().shape({
-    accessToken: Yup.string().required(
-      intl.formatMessage(messages.validationAccessTokenRequired)
-    ),
+    accessToken: Yup.string().when('enabled', {
+      is: true,
+      then: Yup.string()
+        .nullable()
+        .required(intl.formatMessage(messages.validationAccessTokenRequired)),
+      otherwise: Yup.string().nullable(),
+    }),
   });
 
   if (!data && !error) {
@@ -138,28 +141,10 @@ const NotificationsPushbullet: React.FC = () => {
                   )}
                 </div>
               </div>
-              <div
-                role="group"
-                aria-labelledby="group-label"
-                className="form-group"
-              >
-                <div className="form-row">
-                  <span id="group-label" className="group-label">
-                    {intl.formatMessage(messages.notificationTypes)}
-                    <span className="label-required">*</span>
-                  </span>
-                  <div className="form-input">
-                    <div className="max-w-lg">
-                      <NotificationTypeSelector
-                        currentTypes={values.types}
-                        onUpdate={(newTypes) =>
-                          setFieldValue('types', newTypes)
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <NotificationTypeSelector
+                currentTypes={values.types}
+                onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+              />
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/Notifications/NotificationsPushover/index.tsx

@@ -14,16 +14,15 @@ import NotificationTypeSelector from '../../../NotificationTypeSelector';
 const messages = defineMessages({
   agentenabled: 'Enable Agent',
   accessToken: 'Application/API Token',
-  userToken: 'User Key',
+  userToken: 'User or Group Key',
   validationAccessTokenRequired: 'You must provide a valid application token',
   validationUserTokenRequired: 'You must provide a valid user key',
   pushoversettingssaved: 'Pushover notification settings saved successfully!',
   pushoversettingsfailed: 'Pushover notification settings failed to save.',
-  testsent: 'Test notification sent!',
+  testsent: 'Pushover test notification sent!',
   settinguppushover: 'Setting Up Pushover Notifications',
   settinguppushoverDescription:
-    'To configure Pushover notifications, you will need to <RegisterApplicationLink>register an application</RegisterApplicationLink> and enter the API token below. (You can use one of our <IconLink>official icons on GitHub</IconLink>.) You will also need your user key.',
-  notificationtypes: 'Notification Types',
+    'To configure Pushover notifications, you will need to <RegisterApplicationLink>register an application</RegisterApplicationLink> and enter the API token below. (You can use one of the <IconLink>official Overseerr icons on GitHub</IconLink>.)',
 });
 
 const NotificationsPushover: React.FC = () => {
@@ -35,13 +34,25 @@ const NotificationsPushover: React.FC = () => {
 
   const NotificationsPushoverSchema = Yup.object().shape({
     accessToken: Yup.string()
-      .required(intl.formatMessage(messages.validationAccessTokenRequired))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationAccessTokenRequired)),
+        otherwise: Yup.string().nullable(),
+      })
       .matches(
         /^[a-z\d]{30}$/i,
         intl.formatMessage(messages.validationAccessTokenRequired)
       ),
     userToken: Yup.string()
-      .required(intl.formatMessage(messages.validationUserTokenRequired))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationUserTokenRequired)),
+        otherwise: Yup.string().nullable(),
+      })
       .matches(
         /^[a-z\d]{30}$/i,
         intl.formatMessage(messages.validationUserTokenRequired)
@@ -182,28 +193,10 @@ const NotificationsPushover: React.FC = () => {
                   )}
                 </div>
               </div>
-              <div
-                role="group"
-                aria-labelledby="group-label"
-                className="form-group"
-              >
-                <div className="form-row">
-                  <span id="group-label" className="group-label">
-                    {intl.formatMessage(messages.notificationtypes)}
-                    <span className="label-required">*</span>
-                  </span>
-                  <div className="form-input">
-                    <div className="max-w-lg">
-                      <NotificationTypeSelector
-                        currentTypes={values.types}
-                        onUpdate={(newTypes) =>
-                          setFieldValue('types', newTypes)
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <NotificationTypeSelector
+                currentTypes={values.types}
+                onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+              />
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/Notifications/NotificationsSlack/index.tsx

@@ -16,11 +16,10 @@ const messages = defineMessages({
   webhookUrl: 'Webhook URL',
   slacksettingssaved: 'Slack notification settings saved successfully!',
   slacksettingsfailed: 'Slack notification settings failed to save.',
-  testsent: 'Test notification sent!',
+  testsent: 'Slack test notification sent!',
   settingupslack: 'Setting Up Slack Notifications',
   settingupslackDescription:
     'To configure Slack notifications, you will need to create an <WebhookLink>Incoming Webhook</WebhookLink> integration and enter the webhook URL below.',
-  notificationtypes: 'Notification Types',
   validationWebhookUrl: 'You must provide a valid URL',
 });
 
@@ -33,7 +32,13 @@ const NotificationsSlack: React.FC = () => {
 
   const NotificationsSlackSchema = Yup.object().shape({
     webhookUrl: Yup.string()
-      .required(intl.formatMessage(messages.validationWebhookUrl))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationWebhookUrl)),
+        otherwise: Yup.string().nullable(),
+      })
       .url(intl.formatMessage(messages.validationWebhookUrl)),
   });
 
@@ -136,28 +141,10 @@ const NotificationsSlack: React.FC = () => {
                   )}
                 </div>
               </div>
-              <div
-                role="group"
-                aria-labelledby="group-label"
-                className="form-group"
-              >
-                <div className="form-row">
-                  <span id="group-label" className="group-label">
-                    {intl.formatMessage(messages.notificationtypes)}
-                    <span className="label-required">*</span>
-                  </span>
-                  <div className="form-input">
-                    <div className="max-w-lg">
-                      <NotificationTypeSelector
-                        currentTypes={values.types}
-                        onUpdate={(newTypes) =>
-                          setFieldValue('types', newTypes)
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <NotificationTypeSelector
+                currentTypes={values.types}
+                onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+              />
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/Notifications/NotificationsTelegram.tsx

@@ -14,17 +14,18 @@ import NotificationTypeSelector from '../../NotificationTypeSelector';
 const messages = defineMessages({
   agentenabled: 'Enable Agent',
   botUsername: 'Bot Username',
+  botUsernameTip:
+    'Allow users to start a chat with the bot and configure their own personal notifications',
   botAPI: 'Bot Authentication Token',
   chatId: 'Chat ID',
   validationBotAPIRequired: 'You must provide a bot authentication token',
   validationChatIdRequired: 'You must provide a valid chat ID',
   telegramsettingssaved: 'Telegram notification settings saved successfully!',
   telegramsettingsfailed: 'Telegram notification settings failed to save.',
-  testsent: 'Test notification sent!',
+  testsent: 'Telegram test notification sent!',
   settinguptelegram: 'Setting Up Telegram Notifications',
   settinguptelegramDescription:
     'To configure Telegram notifications, you will need to <CreateBotLink>create a bot</CreateBotLink> and get the bot API key. Additionally, you will need the chat ID for the chat to which you would like to send notifications. You can find this by adding <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat and issuing the <code>/my_id</code> command.',
-  notificationtypes: 'Notification Types',
   sendSilently: 'Send Silently',
   sendSilentlyTip: 'Send notifications with no sound',
 });
@@ -37,13 +38,23 @@ const NotificationsTelegram: React.FC = () => {
   );
 
   const NotificationsTelegramSchema = Yup.object().shape({
-    botAPI: Yup.string().required(
-      intl.formatMessage(messages.validationBotAPIRequired)
-    ),
+    botAPI: Yup.string().when('enabled', {
+      is: true,
+      then: Yup.string()
+        .nullable()
+        .required(intl.formatMessage(messages.validationBotAPIRequired)),
+      otherwise: Yup.string().nullable(),
+    }),
     chatId: Yup.string()
-      .required(intl.formatMessage(messages.validationChatIdRequired))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationChatIdRequired)),
+        otherwise: Yup.string().nullable(),
+      })
       .matches(
-        /^[-]?\d+$/,
+        /^-?\d+$/,
         intl.formatMessage(messages.validationChatIdRequired)
       ),
   });
@@ -75,6 +86,7 @@ const NotificationsTelegram: React.FC = () => {
               botUsername: values.botUsername,
             },
           });
+
           addToast(intl.formatMessage(messages.telegramsettingssaved), {
             appearance: 'success',
             autoDismiss: true,
@@ -156,6 +168,9 @@ const NotificationsTelegram: React.FC = () => {
               <div className="form-row">
                 <label htmlFor="botUsername" className="text-label">
                   {intl.formatMessage(messages.botUsername)}
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.botUsernameTip)}
+                  </span>
                 </label>
                 <div className="form-input">
                   <div className="form-input-field">
@@ -224,28 +239,10 @@ const NotificationsTelegram: React.FC = () => {
                   />
                 </div>
               </div>
-              <div
-                role="group"
-                aria-labelledby="group-label"
-                className="form-group"
-              >
-                <div className="form-row">
-                  <span id="group-label" className="group-label">
-                    {intl.formatMessage(messages.notificationtypes)}
-                    <span className="label-required">*</span>
-                  </span>
-                  <div className="form-input">
-                    <div className="max-w-lg">
-                      <NotificationTypeSelector
-                        currentTypes={values.types}
-                        onUpdate={(newTypes) =>
-                          setFieldValue('types', newTypes)
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
+              <NotificationTypeSelector
+                currentTypes={values.types}
+                onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+              />
               <div className="actions">
                 <div className="flex justify-end">
                   <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/Notifications/NotificationsWebhook/index.tsx

@@ -45,8 +45,7 @@ const messages = defineMessages({
   validationJsonPayloadRequired: 'You must provide a valid JSON payload',
   webhooksettingssaved: 'Webhook notification settings saved successfully!',
   webhooksettingsfailed: 'Webhook notification settings failed to save.',
-  testsent: 'Test notification sent!',
-  notificationtypes: 'Notification Types',
+  testsent: 'Webhook test notification sent!',
   resetPayload: 'Reset to Default',
   resetPayloadSuccess: 'JSON payload reset successfully!',
   customJson: 'JSON Payload',
@@ -63,14 +62,26 @@ const NotificationsWebhook: React.FC = () => {
 
   const NotificationsWebhookSchema = Yup.object().shape({
     webhookUrl: Yup.string()
-      .required(intl.formatMessage(messages.validationWebhookUrl))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationWebhookUrl)),
+        otherwise: Yup.string().nullable(),
+      })
       .matches(
         // eslint-disable-next-line
         /^(https?:)?\/\/(((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:)*@)?(((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5]))|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*)?([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))(:\d*)?)(\/((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)+(\/(([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)*)*)?)?(\?((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|[\uE000-\uF8FF]|\/|\?)*)?(\#((([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(%[\da-f]{2})|[!\$&'\(\)\*\+,;=]|:|@)|\/|\?)*)?$/i,
         intl.formatMessage(messages.validationWebhookUrl)
       ),
     jsonPayload: Yup.string()
-      .required(intl.formatMessage(messages.validationJsonPayloadRequired))
+      .when('enabled', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationJsonPayloadRequired)),
+        otherwise: Yup.string().nullable(),
+      })
       .test(
         'validate-json',
         intl.formatMessage(messages.validationJsonPayloadRequired),
@@ -258,32 +269,10 @@ const NotificationsWebhook: React.FC = () => {
                 </div>
               </div>
             </div>
-            <div className="mt-8">
-              <div
-                role="group"
-                aria-labelledby="group-label"
-                className="form-group"
-              >
-                <div className="sm:grid sm:grid-cols-4 sm:gap-4">
-                  <div>
-                    <div id="group-label" className="group-label">
-                      {intl.formatMessage(messages.notificationtypes)}
-                      <span className="label-required">*</span>
-                    </div>
-                  </div>
-                  <div className="form-input">
-                    <div className="max-w-lg">
-                      <NotificationTypeSelector
-                        currentTypes={values.types}
-                        onUpdate={(newTypes) =>
-                          setFieldValue('types', newTypes)
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
+            <NotificationTypeSelector
+              currentTypes={values.types}
+              onUpdate={(newTypes) => setFieldValue('types', newTypes)}
+            />
             <div className="actions">
               <div className="flex justify-end">
                 <span className="inline-flex ml-3 rounded-md shadow-sm">

src/components/Settings/SettingsLayout.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import { defineMessages, useIntl } from 'react-intl';
-import PageTitle from '../Common/PageTitle';
 import globalMessages from '../../i18n/globalMessages';
+import PageTitle from '../Common/PageTitle';
+import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
 
 const messages = defineMessages({
   menuGeneralSettings: 'General',
@@ -16,14 +15,7 @@ const messages = defineMessages({
   menuAbout: 'About',
 });
 
-interface SettingsRoute {
-  text: string;
-  route: string;
-  regex: RegExp;
-}
-
 const SettingsLayout: React.FC = ({ children }) => {
-  const router = useRouter();
   const intl = useIntl();
 
   const settingsRoutes: SettingsRoute[] = [
@@ -69,78 +61,11 @@ const SettingsLayout: React.FC = ({ children }) => {
     },
   ];
 
-  const activeLinkColor =
-    'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
-
-  const inactiveLinkColor =
-    'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
-
-  const SettingsLink: React.FC<{
-    route: string;
-    regex: RegExp;
-    isMobile?: boolean;
-  }> = ({ children, route, regex, isMobile = false }) => {
-    if (isMobile) {
-      return <option value={route}>{children}</option>;
-    }
-
-    return (
-      <Link href={route}>
-        <a
-          className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
-            router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
-          }`}
-          aria-current="page"
-        >
-          {children}
-        </a>
-      </Link>
-    );
-  };
   return (
     <>
       <PageTitle title={intl.formatMessage(globalMessages.settings)} />
       <div className="mt-6">
-        <div className="sm:hidden">
-          <select
-            onChange={(e) => {
-              router.push(e.target.value);
-            }}
-            onBlur={(e) => {
-              router.push(e.target.value);
-            }}
-            defaultValue={
-              settingsRoutes.find(
-                (route) => !!router.pathname.match(route.regex)
-              )?.route
-            }
-            aria-label="Selected tab"
-          >
-            {settingsRoutes.map((route, index) => (
-              <SettingsLink
-                route={route.route}
-                regex={route.regex}
-                isMobile
-                key={`mobile-settings-link-${index}`}
-              >
-                {route.text}
-              </SettingsLink>
-            ))}
-          </select>
-        </div>
-        <div className="hidden overflow-x-scroll overflow-y-hidden border-b border-gray-600 sm:block hide-scrollbar">
-          <nav className="flex -mb-px">
-            {settingsRoutes.map((route, index) => (
-              <SettingsLink
-                route={route.route}
-                regex={route.regex}
-                key={`standard-settings-link-${index}`}
-              >
-                {route.text}
-              </SettingsLink>
-            ))}
-          </nav>
-        </div>
+        <SettingsTabs settingsRoutes={settingsRoutes} />
       </div>
       <div className="mt-10 text-white">{children}</div>
     </>

src/components/Settings/SettingsNotifications.tsx

@@ -1,11 +1,5 @@
-import axios from 'axios';
-import { Field, Form, Formik } from 'formik';
-import Link from 'next/link';
-import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useToasts } from 'react-toast-notifications';
-import useSWR from 'swr';
 import Bolt from '../../assets/bolt.svg';
 import DiscordLogo from '../../assets/extlogos/discord.svg';
 import PushbulletLogo from '../../assets/extlogos/pushbullet.svg';
@@ -13,38 +7,22 @@ import PushoverLogo from '../../assets/extlogos/pushover.svg';
 import SlackLogo from '../../assets/extlogos/slack.svg';
 import TelegramLogo from '../../assets/extlogos/telegram.svg';
 import globalMessages from '../../i18n/globalMessages';
-import Error from '../../pages/_error';
-import Button from '../Common/Button';
-import LoadingSpinner from '../Common/LoadingSpinner';
 import PageTitle from '../Common/PageTitle';
+import SettingsTabs, { SettingsRoute } from '../Common/SettingsTabs';
 
 const messages = defineMessages({
   notifications: 'Notifications',
   notificationsettings: 'Notification Settings',
-  notificationsettingsDescription:
-    'Configure global notification settings. The options below will apply to all notification agents.',
-  notificationAgentsSettings: 'Notification Agents',
   notificationAgentSettingsDescription:
-    'Choose the types of notifications to send, and which notification agents to use.',
+    'Configure and enable notification agents.',
   notificationsettingssaved: 'Notification settings saved successfully!',
   notificationsettingsfailed: 'Notification settings failed to save.',
-  enablenotifications: 'Enable Notifications',
   email: 'Email',
   webhook: 'Webhook',
 });
 
-interface SettingsRoute {
-  text: string;
-  content: React.ReactNode;
-  route: string;
-  regex: RegExp;
-}
-
 const SettingsNotifications: React.FC = ({ children }) => {
-  const router = useRouter();
   const intl = useIntl();
-  const { addToast } = useToasts();
-  const { data, error, revalidate } = useSWR('/api/v1/settings/notifications');
 
   const settingsRoutes: SettingsRoute[] = [
     {
@@ -139,40 +117,6 @@ const SettingsNotifications: React.FC = ({ children }) => {
     },
   ];
 
-  const activeLinkColor = 'bg-indigo-700';
-  const inactiveLinkColor = 'bg-gray-800';
-
-  const SettingsLink: React.FC<{
-    route: string;
-    regex: RegExp;
-    isMobile?: boolean;
-  }> = ({ children, route, regex, isMobile = false }) => {
-    if (isMobile) {
-      return <option value={route}>{children}</option>;
-    }
-
-    return (
-      <Link href={route}>
-        <a
-          className={`whitespace-nowrap ml-8 first:ml-0 px-3 py-2 font-medium text-sm rounded-md ${
-            router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
-          }`}
-          aria-current="page"
-        >
-          {children}
-        </a>
-      </Link>
-    );
-  };
-
-  if (!data && !error) {
-    return <LoadingSpinner />;
-  }
-
-  if (!data) {
-    return <Error statusCode={500} />;
-  }
-
   return (
     <>
       <PageTitle
@@ -185,131 +129,11 @@ const SettingsNotifications: React.FC = ({ children }) => {
         <h3 className="heading">
           {intl.formatMessage(messages.notificationsettings)}
         </h3>
-        <p className="description">
-          {intl.formatMessage(messages.notificationsettingsDescription)}
-        </p>
-      </div>
-      <div className="section">
-        <Formik
-          initialValues={{
-            enabled: data.enabled,
-          }}
-          enableReinitialize
-          onSubmit={async (values) => {
-            try {
-              await axios.post('/api/v1/settings/notifications', {
-                enabled: values.enabled,
-              });
-              addToast(intl.formatMessage(messages.notificationsettingssaved), {
-                appearance: 'success',
-                autoDismiss: true,
-              });
-            } catch (e) {
-              addToast(
-                intl.formatMessage(messages.notificationsettingsfailed),
-                {
-                  appearance: 'error',
-                  autoDismiss: true,
-                }
-              );
-            } finally {
-              revalidate();
-            }
-          }}
-        >
-          {({ isSubmitting, values, setFieldValue }) => {
-            return (
-              <Form className="section">
-                <div className="form-row">
-                  <label htmlFor="name" className="checkbox-label">
-                    <span>
-                      {intl.formatMessage(messages.enablenotifications)}
-                    </span>
-                  </label>
-                  <div className="form-input">
-                    <Field
-                      type="checkbox"
-                      id="enabled"
-                      name="enabled"
-                      onChange={() => {
-                        setFieldValue('enabled', !values.enabled);
-                      }}
-                    />
-                  </div>
-                </div>
-                <div className="actions">
-                  <div className="flex justify-end">
-                    <span className="inline-flex ml-3 rounded-md shadow-sm">
-                      <Button
-                        buttonType="primary"
-                        type="submit"
-                        disabled={isSubmitting}
-                      >
-                        {isSubmitting
-                          ? intl.formatMessage(globalMessages.saving)
-                          : intl.formatMessage(globalMessages.save)}
-                      </Button>
-                    </span>
-                  </div>
-                </div>
-              </Form>
-            );
-          }}
-        </Formik>
-      </div>
-      <div className="mt-10 mb-6">
-        <h3 className="heading">
-          {intl.formatMessage(messages.notificationAgentsSettings)}
-        </h3>
         <p className="description">
           {intl.formatMessage(messages.notificationAgentSettingsDescription)}
         </p>
       </div>
-      <div>
-        <div className="sm:hidden">
-          <label htmlFor="tabs" className="sr-only">
-            Select a tab
-          </label>
-          <select
-            onChange={(e) => {
-              router.push(e.target.value);
-            }}
-            onBlur={(e) => {
-              router.push(e.target.value);
-            }}
-            defaultValue={
-              settingsRoutes.find(
-                (route) => !!router.pathname.match(route.regex)
-              )?.route
-            }
-            aria-label="Selected tab"
-          >
-            {settingsRoutes.map((route, index) => (
-              <SettingsLink
-                route={route.route}
-                regex={route.regex}
-                isMobile
-                key={`mobile-settings-link-${index}`}
-              >
-                {route.text}
-              </SettingsLink>
-            ))}
-          </select>
-        </div>
-        <div className="hidden overflow-x-scroll overflow-y-hidden sm:block hide-scrollbar">
-          <nav className="flex space-x-4" aria-label="Tabs">
-            {settingsRoutes.map((route, index) => (
-              <SettingsLink
-                route={route.route}
-                regex={route.regex}
-                key={`standard-settings-link-${index}`}
-              >
-                {route.content}
-              </SettingsLink>
-            ))}
-          </nav>
-        </div>
-      </div>
+      <SettingsTabs tabType="button" settingsRoutes={settingsRoutes} />
       <div className="section">{children}</div>
     </>
   );

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsDiscord.tsx

@@ -0,0 +1,178 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import * as Yup from 'yup';
+import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import {
+  hasNotificationAgentEnabled,
+  NotificationAgentType,
+} from '../../../../../server/lib/notifications/agenttypes';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+
+const messages = defineMessages({
+  discordsettingssaved: 'Discord notification settings saved successfully!',
+  discordsettingsfailed: 'Discord notification settings failed to save.',
+  enableDiscord: 'Enable Mentions',
+  discordId: 'User ID',
+  discordIdTip:
+    'The <FindDiscordIdLink>ID number</FindDiscordIdLink> for your user account',
+  validationDiscordId: 'You must provide a valid user ID',
+});
+
+const UserNotificationsDiscord: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const [notificationAgents, setNotificationAgents] = useState(0);
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  useEffect(() => {
+    setNotificationAgents(
+      data?.notificationAgents ?? NotificationAgentType.EMAIL
+    );
+  }, [data]);
+
+  const UserNotificationsDiscordSchema = Yup.object().shape({
+    discordId: Yup.string()
+      .when('enableDiscord', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationDiscordId)),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(/^\d{17,18}$/, intl.formatMessage(messages.validationDiscordId)),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enableDiscord: hasNotificationAgentEnabled(
+          NotificationAgentType.DISCORD,
+          data?.notificationAgents ?? NotificationAgentType.EMAIL
+        ),
+        discordId: data?.discordId,
+      }}
+      validationSchema={UserNotificationsDiscordSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            notificationAgents,
+            pgpKey: data?.pgpKey,
+            discordId: values.discordId,
+            telegramChatId: data?.telegramChatId,
+            telegramSendSilently: data?.telegramSendSilently,
+          });
+          addToast(intl.formatMessage(messages.discordsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.discordsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+        return (
+          <Form className="section">
+            {data?.discordEnabled && (
+              <div className="form-row">
+                <label htmlFor="enableDiscord" className="checkbox-label">
+                  {intl.formatMessage(messages.enableDiscord)}
+                </label>
+                <div className="form-input">
+                  <Field
+                    type="checkbox"
+                    id="enableDiscord"
+                    name="enableDiscord"
+                    checked={hasNotificationAgentEnabled(
+                      NotificationAgentType.DISCORD,
+                      notificationAgents
+                    )}
+                    onChange={() => {
+                      setNotificationAgents(
+                        hasNotificationAgentEnabled(
+                          NotificationAgentType.DISCORD,
+                          notificationAgents
+                        )
+                          ? notificationAgents - NotificationAgentType.DISCORD
+                          : notificationAgents + NotificationAgentType.DISCORD
+                      );
+                      setFieldValue('enableDiscord', !values.enableDiscord);
+                    }}
+                  />
+                </div>
+              </div>
+            )}
+            <div className="form-row">
+              <label htmlFor="discordId" className="text-label">
+                <span>{intl.formatMessage(messages.discordId)}</span>
+                <span className="label-required">*</span>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.discordIdTip, {
+                    FindDiscordIdLink: function FindDiscordIdLink(msg) {
+                      return (
+                        <a
+                          href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
+                          target="_blank"
+                          rel="noreferrer"
+                        >
+                          {msg}
+                        </a>
+                      );
+                    },
+                  })}
+                </span>
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field id="discordId" name="discordId" type="text" />
+                </div>
+                {errors.discordId && touched.discordId && (
+                  <div className="error">{errors.discordId}</div>
+                )}
+              </div>
+            </div>
+            <div className="actions">
+              <div className="flex justify-end">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(globalMessages.saving)
+                      : intl.formatMessage(globalMessages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default UserNotificationsDiscord;

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsEmail.tsx

@@ -0,0 +1,175 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import * as Yup from 'yup';
+import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import {
+  hasNotificationAgentEnabled,
+  NotificationAgentType,
+} from '../../../../../server/lib/notifications/agenttypes';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Badge from '../../../Common/Badge';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+import { OpenPgpLink } from '../../../Settings/Notifications/NotificationsEmail';
+
+const messages = defineMessages({
+  emailsettingssaved: 'Email notification settings saved successfully!',
+  emailsettingsfailed: 'Email notification settings failed to save.',
+  enableEmail: 'Enable Notifications',
+  pgpPublicKey: 'PGP Public Key',
+  pgpPublicKeyTip:
+    'Encrypt email messages using <OpenPgpLink>OpenPGP</OpenPgpLink>',
+  validationPgpPublicKey: 'You must provide a valid PGP public key',
+});
+
+const UserEmailSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const [notificationAgents, setNotificationAgents] = useState(0);
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  useEffect(() => {
+    setNotificationAgents(
+      data?.notificationAgents ?? NotificationAgentType.EMAIL
+    );
+  }, [data]);
+
+  const UserNotificationsEmailSchema = Yup.object().shape({
+    pgpKey: Yup.string()
+      .nullable()
+      .matches(
+        /^-----BEGIN PGP PUBLIC KEY BLOCK-----.+-----END PGP PUBLIC KEY BLOCK-----$/,
+        intl.formatMessage(messages.validationPgpPublicKey)
+      ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enableEmail: hasNotificationAgentEnabled(
+          NotificationAgentType.EMAIL,
+          data?.notificationAgents ?? NotificationAgentType.EMAIL
+        ),
+        pgpKey: data?.pgpKey,
+      }}
+      validationSchema={UserNotificationsEmailSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            notificationAgents,
+            pgpKey: values.pgpKey,
+            discordId: data?.discordId,
+            telegramChatId: data?.telegramChatId,
+            telegramSendSilently: data?.telegramSendSilently,
+          });
+          addToast(intl.formatMessage(messages.emailsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.emailsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="enableEmail" className="checkbox-label">
+                {intl.formatMessage(messages.enableEmail)}
+              </label>
+              <div className="form-input">
+                <Field
+                  type="checkbox"
+                  id="enableEmail"
+                  name="enableEmail"
+                  checked={hasNotificationAgentEnabled(
+                    NotificationAgentType.EMAIL,
+                    notificationAgents
+                  )}
+                  onChange={() => {
+                    setNotificationAgents(
+                      hasNotificationAgentEnabled(
+                        NotificationAgentType.EMAIL,
+                        notificationAgents
+                      )
+                        ? notificationAgents - NotificationAgentType.EMAIL
+                        : notificationAgents + NotificationAgentType.EMAIL
+                    );
+                    setFieldValue('enableEmail', !values.enableEmail);
+                  }}
+                />
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="pgpKey" className="text-label">
+                <span className="mr-2">
+                  {intl.formatMessage(messages.pgpPublicKey)}
+                </span>
+                <Badge badgeType="danger">
+                  {intl.formatMessage(globalMessages.advanced)}
+                </Badge>
+                <span className="label-tip">
+                  {intl.formatMessage(messages.pgpPublicKeyTip, {
+                    OpenPgpLink: OpenPgpLink,
+                  })}
+                </span>
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    as="textarea"
+                    id="pgpKey"
+                    name="pgpKey"
+                    rows="10"
+                    className="font-mono text-xs"
+                  />
+                </div>
+                {errors.pgpKey && touched.pgpKey && (
+                  <div className="error">{errors.pgpKey}</div>
+                )}
+              </div>
+            </div>
+            <div className="actions">
+              <div className="flex justify-end">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(globalMessages.saving)
+                      : intl.formatMessage(globalMessages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default UserEmailSettings;

src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsTelegram.tsx

@@ -0,0 +1,217 @@
+import axios from 'axios';
+import { Field, Form, Formik } from 'formik';
+import { useRouter } from 'next/router';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useToasts } from 'react-toast-notifications';
+import useSWR from 'swr';
+import * as Yup from 'yup';
+import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import {
+  hasNotificationAgentEnabled,
+  NotificationAgentType,
+} from '../../../../../server/lib/notifications/agenttypes';
+import { useUser } from '../../../../hooks/useUser';
+import globalMessages from '../../../../i18n/globalMessages';
+import Button from '../../../Common/Button';
+import LoadingSpinner from '../../../Common/LoadingSpinner';
+
+const messages = defineMessages({
+  telegramsettingssaved: 'Telegram notification settings saved successfully!',
+  telegramsettingsfailed: 'Telegram notification settings failed to save.',
+  enableTelegram: 'Enable Notifications',
+  telegramChatId: 'Chat ID',
+  telegramChatIdTipLong:
+    '<TelegramBotLink>Start a chat</TelegramBotLink>, add <GetIdBotLink>@get_id_bot</GetIdBotLink>, and issue the <code>/my_id</code> command',
+  sendSilently: 'Send Silently',
+  sendSilentlyDescription: 'Send notifications with no sound',
+  validationTelegramChatId: 'You must provide a valid chat ID',
+});
+
+const UserTelegramSettings: React.FC = () => {
+  const intl = useIntl();
+  const { addToast } = useToasts();
+  const router = useRouter();
+  const [notificationAgents, setNotificationAgents] = useState(0);
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
+
+  useEffect(() => {
+    setNotificationAgents(
+      data?.notificationAgents ?? NotificationAgentType.EMAIL
+    );
+  }, [data]);
+
+  const UserNotificationsTelegramSchema = Yup.object().shape({
+    telegramChatId: Yup.string()
+      .when('enableTelegram', {
+        is: true,
+        then: Yup.string()
+          .nullable()
+          .required(intl.formatMessage(messages.validationTelegramChatId)),
+        otherwise: Yup.string().nullable(),
+      })
+      .matches(
+        /^-?\d+$/,
+        intl.formatMessage(messages.validationTelegramChatId)
+      ),
+  });
+
+  if (!data && !error) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <Formik
+      initialValues={{
+        enableTelegram: hasNotificationAgentEnabled(
+          NotificationAgentType.TELEGRAM,
+          data?.notificationAgents ?? NotificationAgentType.EMAIL
+        ),
+        telegramChatId: data?.telegramChatId,
+        telegramSendSilently: data?.telegramSendSilently,
+      }}
+      validationSchema={UserNotificationsTelegramSchema}
+      enableReinitialize
+      onSubmit={async (values) => {
+        try {
+          await axios.post(`/api/v1/user/${user?.id}/settings/notifications`, {
+            notificationAgents,
+            pgpKey: data?.pgpKey,
+            discordId: data?.discordId,
+            telegramChatId: values.telegramChatId,
+            telegramSendSilently: values.telegramSendSilently,
+          });
+          addToast(intl.formatMessage(messages.telegramsettingssaved), {
+            appearance: 'success',
+            autoDismiss: true,
+          });
+        } catch (e) {
+          addToast(intl.formatMessage(messages.telegramsettingsfailed), {
+            appearance: 'error',
+            autoDismiss: true,
+          });
+        } finally {
+          revalidate();
+        }
+      }}
+    >
+      {({ errors, touched, isSubmitting, isValid, values, setFieldValue }) => {
+        return (
+          <Form className="section">
+            <div className="form-row">
+              <label htmlFor="enableTelegram" className="checkbox-label">
+                {intl.formatMessage(messages.enableTelegram)}
+              </label>
+              <div className="form-input">
+                <Field
+                  type="checkbox"
+                  id="enableTelegram"
+                  name="enableTelegram"
+                  checked={hasNotificationAgentEnabled(
+                    NotificationAgentType.TELEGRAM,
+                    notificationAgents
+                  )}
+                  onChange={() => {
+                    setNotificationAgents(
+                      hasNotificationAgentEnabled(
+                        NotificationAgentType.TELEGRAM,
+                        notificationAgents
+                      )
+                        ? notificationAgents - NotificationAgentType.TELEGRAM
+                        : notificationAgents + NotificationAgentType.TELEGRAM
+                    );
+                    setFieldValue('enableTelegram', !values.enableTelegram);
+                  }}
+                />
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="telegramChatId" className="text-label">
+                {intl.formatMessage(messages.telegramChatId)}
+                <span className="label-required">*</span>
+                {data?.telegramBotUsername && (
+                  <span className="label-tip">
+                    {intl.formatMessage(messages.telegramChatIdTipLong, {
+                      TelegramBotLink: function TelegramBotLink(msg) {
+                        return (
+                          <a
+                            href={`https://telegram.me/${data.telegramBotUsername}`}
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                      GetIdBotLink: function GetIdBotLink(msg) {
+                        return (
+                          <a
+                            href="https://telegram.me/get_id_bot"
+                            target="_blank"
+                            rel="noreferrer"
+                          >
+                            {msg}
+                          </a>
+                        );
+                      },
+                      code: function code(msg) {
+                        return <code>{msg}</code>;
+                      },
+                    })}
+                  </span>
+                )}
+              </label>
+              <div className="form-input">
+                <div className="form-input-field">
+                  <Field
+                    id="telegramChatId"
+                    name="telegramChatId"
+                    type="text"
+                  />
+                </div>
+                {errors.telegramChatId && touched.telegramChatId && (
+                  <div className="error">{errors.telegramChatId}</div>
+                )}
+              </div>
+            </div>
+            <div className="form-row">
+              <label htmlFor="telegramSendSilently" className="checkbox-label">
+                {intl.formatMessage(messages.sendSilently)}
+                <span className="label-tip">
+                  {intl.formatMessage(messages.sendSilentlyDescription)}
+                </span>
+              </label>
+              <div className="form-input">
+                <Field
+                  type="checkbox"
+                  id="telegramSendSilently"
+                  name="telegramSendSilently"
+                />
+              </div>
+            </div>
+            <div className="actions">
+              <div className="flex justify-end">
+                <span className="inline-flex ml-3 rounded-md shadow-sm">
+                  <Button
+                    buttonType="primary"
+                    type="submit"
+                    disabled={isSubmitting || !isValid}
+                  >
+                    {isSubmitting
+                      ? intl.formatMessage(globalMessages.saving)
+                      : intl.formatMessage(globalMessages.save)}
+                  </Button>
+                </span>
+              </div>
+            </div>
+          </Form>
+        );
+      }}
+    </Formik>
+  );
+};
+
+export default UserTelegramSettings;

src/components/UserProfile/UserSettings/UserNotificationSettings/index.tsx

@@ -1,61 +1,88 @@
-import axios from 'axios';
-import { Field, Form, Formik } from 'formik';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useToasts } from 'react-toast-notifications';
 import useSWR from 'swr';
-import * as Yup from 'yup';
 import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
+import DiscordLogo from '../../../../assets/extlogos/discord.svg';
+import TelegramLogo from '../../../../assets/extlogos/telegram.svg';
 import { useUser } from '../../../../hooks/useUser';
 import globalMessages from '../../../../i18n/globalMessages';
 import Error from '../../../../pages/_error';
-import Badge from '../../../Common/Badge';
-import Button from '../../../Common/Button';
 import LoadingSpinner from '../../../Common/LoadingSpinner';
 import PageTitle from '../../../Common/PageTitle';
-import { PgpLink } from '../../../Settings/Notifications/NotificationsEmail';
+import SettingsTabs, { SettingsRoute } from '../../../Common/SettingsTabs';
 
 const messages = defineMessages({
   notifications: 'Notifications',
   notificationsettings: 'Notification Settings',
-  enableNotifications: 'Enable Notifications',
-  discordId: 'Discord ID',
-  discordIdTip:
-    'The <FindDiscordIdLink>ID number</FindDiscordIdLink> for your Discord user account',
-  validationDiscordId: 'You must provide a valid Discord user ID',
-  telegramChatId: 'Telegram Chat ID',
-  telegramChatIdTip: 'Add <GetIdBotLink>@get_id_bot</GetIdBotLink> to the chat',
-  telegramChatIdTipLong:
-    '<TelegramBotLink>Start a chat</TelegramBotLink>, add <GetIdBotLink>@get_id_bot</GetIdBotLink>, and issue the <code>/my_id</code> command',
-  sendSilently: 'Send Telegram Messages Silently',
-  sendSilentlyDescription: 'Send notifications with no sound',
-  validationTelegramChatId: 'You must provide a valid Telegram chat ID',
+  email: 'Email',
   toastSettingsSuccess: 'Notification settings saved successfully!',
   toastSettingsFailure: 'Something went wrong while saving settings.',
-  pgpKey: '<PgpLink>PGP</PgpLink> Public Key',
-  pgpKeyTip: 'Encrypt email messages',
 });
 
-const UserNotificationSettings: React.FC = () => {
+const UserNotificationSettings: React.FC = ({ children }) => {
   const intl = useIntl();
-  const { addToast } = useToasts();
   const router = useRouter();
-  const { user, mutate } = useUser({ id: Number(router.query.userId) });
-  const { data, error, revalidate } = useSWR<UserSettingsNotificationsResponse>(
+  const { user } = useUser({ id: Number(router.query.userId) });
+  const { data, error } = useSWR<UserSettingsNotificationsResponse>(
     user ? `/api/v1/user/${user?.id}/settings/notifications` : null
   );
 
-  const UserNotificationSettingsSchema = Yup.object().shape({
-    discordId: Yup.string()
-      .nullable()
-      .matches(/^\d{17,18}$/, intl.formatMessage(messages.validationDiscordId)),
-    telegramChatId: Yup.string()
-      .nullable()
-      .matches(
-        /^[-]?\d+$/,
-        intl.formatMessage(messages.validationTelegramChatId)
+  const settingsRoutes: SettingsRoute[] = [
+    {
+      text: intl.formatMessage(messages.email),
+      content: (
+        <span className="flex items-center">
+          <svg
+            className="h-4 mr-2"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207"
+            />
+          </svg>
+          {intl.formatMessage(messages.email)}
+        </span>
       ),
+      route: '/settings/notifications/email',
+      regex: /\/settings\/notifications\/email/,
+      hidden: !data?.emailEnabled,
+    },
+    {
+      text: 'Discord',
+      content: (
+        <span className="flex items-center">
+          <DiscordLogo className="h-4 mr-2" />
+          Discord
+        </span>
+      ),
+      route: '/settings/notifications/discord',
+      regex: /\/settings\/notifications\/discord/,
+    },
+    {
+      text: 'Telegram',
+      content: (
+        <span className="flex items-center">
+          <TelegramLogo className="h-4 mr-2" />
+          Telegram
+        </span>
+      ),
+      route: '/settings/notifications/telegram',
+      regex: /\/settings\/notifications\/telegram/,
+      hidden: !data?.telegramEnabled || !data?.telegramBotUsername,
+    },
+  ];
+
+  settingsRoutes.forEach((settingsRoute) => {
+    settingsRoute.route = router.asPath.includes('/profile')
+      ? `/profile${settingsRoute.route}`
+      : `/users/${user?.id}${settingsRoute.route}`;
   });
 
   if (!data && !error) {
@@ -80,215 +107,8 @@ const UserNotificationSettings: React.FC = () => {
           {intl.formatMessage(messages.notificationsettings)}
         </h3>
       </div>
-      <Formik
-        initialValues={{
-          enableNotifications: data?.enableNotifications,
-          discordId: data?.discordId,
-          telegramChatId: data?.telegramChatId,
-          telegramSendSilently: data?.telegramSendSilently,
-          pgpKey: data?.pgpKey,
-        }}
-        validationSchema={UserNotificationSettingsSchema}
-        enableReinitialize
-        onSubmit={async (values) => {
-          try {
-            await axios.post(
-              `/api/v1/user/${user?.id}/settings/notifications`,
-              {
-                enableNotifications: values.enableNotifications,
-                discordId: values.discordId,
-                telegramChatId: values.telegramChatId,
-                telegramSendSilently: values.telegramSendSilently,
-                pgpKey: values.pgpKey,
-              }
-            );
-
-            addToast(intl.formatMessage(messages.toastSettingsSuccess), {
-              autoDismiss: true,
-              appearance: 'success',
-            });
-          } catch (e) {
-            addToast(intl.formatMessage(messages.toastSettingsFailure), {
-              autoDismiss: true,
-              appearance: 'error',
-            });
-          } finally {
-            revalidate();
-            mutate();
-          }
-        }}
-      >
-        {({ errors, touched, isSubmitting }) => {
-          return (
-            <Form className="section">
-              <div className="form-row">
-                <label htmlFor="enableNotifications" className="checkbox-label">
-                  <span className="mr-2">
-                    {intl.formatMessage(messages.enableNotifications)}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <Field
-                    type="checkbox"
-                    id="enableNotifications"
-                    name="enableNotifications"
-                  />
-                </div>
-              </div>
-              <div className="form-row">
-                <label htmlFor="pgpKey" className="text-label">
-                  <span className="mr-2">
-                    {intl.formatMessage(messages.pgpKey, {
-                      PgpLink: PgpLink,
-                    })}
-                  </span>
-                  <Badge badgeType="danger">
-                    {intl.formatMessage(globalMessages.advanced)}
-                  </Badge>
-                  <span className="label-tip">
-                    {intl.formatMessage(messages.pgpKeyTip)}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <div className="form-input-field">
-                    <Field id="pgpKey" name="pgpKey" as="textarea" rows="3" />
-                  </div>
-                  {errors.pgpKey && touched.pgpKey && (
-                    <div className="error">{errors.pgpKey}</div>
-                  )}
-                </div>
-              </div>
-              <div className="form-row">
-                <label htmlFor="discordId" className="text-label">
-                  <span>{intl.formatMessage(messages.discordId)}</span>
-                  <span className="label-tip">
-                    {intl.formatMessage(messages.discordIdTip, {
-                      FindDiscordIdLink: function FindDiscordIdLink(msg) {
-                        return (
-                          <a
-                            href="https://support.discord.com/hc/en-us/articles/206346498-Where-can-I-find-my-User-Server-Message-ID-"
-                            target="_blank"
-                            rel="noreferrer"
-                            className="text-gray-100 underline transition duration-300 hover:text-white"
-                          >
-                            {msg}
-                          </a>
-                        );
-                      },
-                    })}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <div className="form-input-field">
-                    <Field id="discordId" name="discordId" type="text" />
-                  </div>
-                  {errors.discordId && touched.discordId && (
-                    <div className="error">{errors.discordId}</div>
-                  )}
-                </div>
-              </div>
-              <div className="form-row">
-                <label htmlFor="telegramChatId" className="text-label">
-                  <span>{intl.formatMessage(messages.telegramChatId)}</span>
-                  <span className="label-tip">
-                    {data?.telegramBotUsername
-                      ? intl.formatMessage(messages.telegramChatIdTipLong, {
-                          TelegramBotLink: function TelegramBotLink(msg) {
-                            return (
-                              <a
-                                href={`https://telegram.me/${data.telegramBotUsername}`}
-                                target="_blank"
-                                rel="noreferrer"
-                                className="text-gray-100 underline transition duration-300 hover:text-white"
-                              >
-                                {msg}
-                              </a>
-                            );
-                          },
-                          GetIdBotLink: function GetIdBotLink(msg) {
-                            return (
-                              <a
-                                href="https://telegram.me/get_id_bot"
-                                className="text-gray-100 underline transition duration-300 hover:text-white"
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                {msg}
-                              </a>
-                            );
-                          },
-                          code: function code(msg) {
-                            return <code>{msg}</code>;
-                          },
-                        })
-                      : intl.formatMessage(messages.telegramChatIdTip, {
-                          GetIdBotLink: function GetIdBotLink(msg) {
-                            return (
-                              <a
-                                href="https://telegram.me/get_id_bot"
-                                className="text-gray-100 underline transition duration-300 hover:text-white"
-                                target="_blank"
-                                rel="noreferrer"
-                              >
-                                {msg}
-                              </a>
-                            );
-                          },
-                        })}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <div className="form-input-field">
-                    <Field
-                      id="telegramChatId"
-                      name="telegramChatId"
-                      type="text"
-                    />
-                  </div>
-                  {errors.telegramChatId && touched.telegramChatId && (
-                    <div className="error">{errors.telegramChatId}</div>
-                  )}
-                </div>
-              </div>
-              <div className="form-row">
-                <label
-                  htmlFor="telegramSendSilently"
-                  className="checkbox-label"
-                >
-                  <span className="mr-2">
-                    {intl.formatMessage(messages.sendSilently)}
-                  </span>
-                  <span className="label-tip">
-                    {intl.formatMessage(messages.sendSilentlyDescription)}
-                  </span>
-                </label>
-                <div className="form-input">
-                  <Field
-                    type="checkbox"
-                    id="telegramSendSilently"
-                    name="telegramSendSilently"
-                  />
-                </div>
-              </div>
-              <div className="actions">
-                <div className="flex justify-end">
-                  <span className="inline-flex ml-3 rounded-md shadow-sm">
-                    <Button
-                      buttonType="primary"
-                      type="submit"
-                      disabled={isSubmitting}
-                    >
-                      {isSubmitting
-                        ? intl.formatMessage(globalMessages.saving)
-                        : intl.formatMessage(globalMessages.save)}
-                    </Button>
-                  </span>
-                </div>
-              </div>
-            </Form>
-          );
-        }}
-      </Formik>
+      <SettingsTabs tabType="button" settingsRoutes={settingsRoutes} />
+      <div className="section">{children}</div>
     </>
   );
 };

src/components/UserProfile/UserSettings/index.tsx

@@ -1,7 +1,8 @@
-import Link from 'next/link';
 import { useRouter } from 'next/router';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
+import useSWR from 'swr';
+import { UserSettingsNotificationsResponse } from '../../../../server/interfaces/api/userSettingsInterfaces';
 import { hasPermission, Permission } from '../../../../server/lib/permissions';
 import useSettings from '../../../hooks/useSettings';
 import { useUser } from '../../../hooks/useUser';
@@ -10,6 +11,7 @@ import Error from '../../../pages/_error';
 import Alert from '../../Common/Alert';
 import LoadingSpinner from '../../Common/LoadingSpinner';
 import PageTitle from '../../Common/PageTitle';
+import SettingsTabs, { SettingsRoute } from '../../Common/SettingsTabs';
 import ProfileHeader from '../ProfileHeader';
 
 const messages = defineMessages({
@@ -21,21 +23,15 @@ const messages = defineMessages({
     "You do not have permission to modify this user's settings.",
 });
 
-interface SettingsRoute {
-  text: string;
-  route: string;
-  regex: RegExp;
-  requiredPermission?: Permission | Permission[];
-  permissionType?: { type: 'and' | 'or' };
-  hidden?: boolean;
-}
-
 const UserSettings: React.FC = ({ children }) => {
   const router = useRouter();
   const settings = useSettings();
   const { user: currentUser } = useUser();
   const { user, error } = useUser({ id: Number(router.query.userId) });
   const intl = useIntl();
+  const { data } = useSWR<UserSettingsNotificationsResponse>(
+    user ? `/api/v1/user/${user?.id}/settings/notifications` : null
+  );
 
   if (!user && !error) {
     return <LoadingSpinner />;
@@ -67,7 +63,9 @@ const UserSettings: React.FC = ({ children }) => {
     },
     {
       text: intl.formatMessage(messages.menuNotifications),
-      route: '/settings/notifications',
+      route: data?.emailEnabled
+        ? '/settings/notifications/email'
+        : '/settings/notifications/discord',
       regex: /\/settings\/notifications/,
     },
     {
@@ -79,38 +77,6 @@ const UserSettings: React.FC = ({ children }) => {
     },
   ];
 
-  const activeLinkColor =
-    'border-indigo-600 text-indigo-500 focus:outline-none focus:text-indigo-500 focus:border-indigo-500';
-
-  const inactiveLinkColor =
-    'border-transparent text-gray-500 hover:text-gray-400 hover:border-gray-300 focus:outline-none focus:text-gray-4700 focus:border-gray-300';
-
-  const SettingsLink: React.FC<{
-    route: string;
-    regex: RegExp;
-    isMobile?: boolean;
-  }> = ({ children, route, regex, isMobile = false }) => {
-    const finalRoute = router.asPath.includes('/profile')
-      ? `/profile${route}`
-      : `/users/${user.id}${route}`;
-    if (isMobile) {
-      return <option value={finalRoute}>{children}</option>;
-    }
-
-    return (
-      <Link href={finalRoute}>
-        <a
-          className={`whitespace-nowrap ml-8 first:ml-0 py-4 px-1 border-b-2 border-transparent font-medium text-sm leading-5 ${
-            router.pathname.match(regex) ? activeLinkColor : inactiveLinkColor
-          }`}
-          aria-current="page"
-        >
-          {children}
-        </a>
-      </Link>
-    );
-  };
-
   if (currentUser?.id !== 1 && user.id === 1) {
     return (
       <>
@@ -133,13 +99,11 @@ const UserSettings: React.FC = ({ children }) => {
     );
   }
 
-  const currentRoute = settingsRoutes.find(
-    (route) => !!router.pathname.match(route.regex)
-  )?.route;
-
-  const finalRoute = router.asPath.includes('/profile')
-    ? `/profile${currentRoute}`
-    : `/users/${user.id}${currentRoute}`;
+  settingsRoutes.forEach((settingsRoute) => {
+    settingsRoute.route = router.asPath.includes('/profile')
+      ? `/profile${settingsRoute.route}`
+      : `/users/${user.id}${settingsRoute.route}`;
+  });
 
   return (
     <>
@@ -151,68 +115,7 @@ const UserSettings: React.FC = ({ children }) => {
       />
       <ProfileHeader user={user} isSettingsPage />
       <div className="mt-6">
-        <div className="sm:hidden">
-          <select
-            onChange={(e) => {
-              router.push(e.target.value);
-            }}
-            onBlur={(e) => {
-              router.push(e.target.value);
-            }}
-            defaultValue={finalRoute}
-            aria-label="Selected tab"
-          >
-            {settingsRoutes
-              .filter(
-                (route) =>
-                  !route.hidden &&
-                  (route.requiredPermission
-                    ? hasPermission(
-                        route.requiredPermission,
-                        currentUser?.permissions ?? 0,
-                        route.permissionType
-                      )
-                    : true)
-              )
-              .map((route, index) => (
-                <SettingsLink
-                  route={route.route}
-                  regex={route.regex}
-                  isMobile
-                  key={`mobile-settings-link-${index}`}
-                >
-                  {route.text}
-                </SettingsLink>
-              ))}
-          </select>
-        </div>
-        <div className="hidden sm:block">
-          <div className="border-b border-gray-600">
-            <nav className="flex -mb-px">
-              {settingsRoutes
-                .filter(
-                  (route) =>
-                    !route.hidden &&
-                    (route.requiredPermission
-                      ? hasPermission(
-                          route.requiredPermission,
-                          currentUser?.permissions ?? 0,
-                          route.permissionType
-                        )
-                      : true)
-                )
-                .map((route, index) => (
-                  <SettingsLink
-                    route={route.route}
-                    regex={route.regex}
-                    key={`standard-settings-link-${index}`}
-                  >
-                    {route.text}
-                  </SettingsLink>
-                ))}
-            </nav>
-          </div>
-        </div>
+        <SettingsTabs settingsRoutes={settingsRoutes} />
       </div>
       <div className="mt-10 text-white">{children}</div>
     </>