From a596531c576a329fd170cb598e7acea7903e5afa Mon Sep 17 00:00:00 2001
From: Audric Ackermann <audric@loki.network>
Date: Thu, 21 Oct 2021 17:08:38 +1100
Subject: [PATCH] cleanup SessionSettings by making them less a IdoEverything

---
 .../session/LeftPaneSettingSection.tsx        |   2 +-
 ts/components/session/SessionRadio.tsx        |   2 +-
 ts/components/session/SessionToggle.tsx       |  14 +-
 .../conversation/SessionCompositionBox.tsx    |   3 +-
 .../session/settings/BlockedUserSettings.ts   |  58 ---
 .../session/settings/BlockedUserSettings.tsx  |  46 ++
 .../session/settings/LocalSettings.ts         | 388 -----------------
 .../SessionNotificationGroupSettings.tsx      |  42 ++
 .../settings/SessionSettingListItem.tsx       | 133 +++---
 .../session/settings/SessionSettings.tsx      | 409 ++++++++++++++----
 .../settings/SessionSettingsHeader.tsx        |   6 +-
 .../session/settings/ZoomingSessionSlider.tsx |  35 ++
 ts/session/utils/Toast.tsx                    |   2 +-
 ts/state/ducks/section.tsx                    |   3 +-
 ts/state/selectors/conversations.ts           |  11 +-
 ts/state/selectors/section.ts                 |   2 +-
 ts/window.d.ts                                |   8 +-
 17 files changed, 522 insertions(+), 642 deletions(-)
 delete mode 100644 ts/components/session/settings/BlockedUserSettings.ts
 create mode 100644 ts/components/session/settings/BlockedUserSettings.tsx
 delete mode 100644 ts/components/session/settings/LocalSettings.ts
 create mode 100644 ts/components/session/settings/SessionNotificationGroupSettings.tsx
 create mode 100644 ts/components/session/settings/ZoomingSessionSlider.tsx

diff --git a/ts/components/session/LeftPaneSettingSection.tsx b/ts/components/session/LeftPaneSettingSection.tsx
index 011b00d6e..29e87d949 100644
--- a/ts/components/session/LeftPaneSettingSection.tsx
+++ b/ts/components/session/LeftPaneSettingSection.tsx
@@ -7,7 +7,7 @@ import { useDispatch, useSelector } from 'react-redux';
 import { showSettingsSection } from '../../state/ducks/section';
 import { getFocusedSettingsSection } from '../../state/selectors/section';
 import { recoveryPhraseModal, updateDeleteAccountModal } from '../../state/ducks/modalDialog';
-import { SessionSettingCategory } from './settings/LocalSettings';
+import { SessionSettingCategory } from './settings/SessionSettings';
 
 const getCategories = () => {
   return [
diff --git a/ts/components/session/SessionRadio.tsx b/ts/components/session/SessionRadio.tsx
index d858e4c94..3831dfe4e 100644
--- a/ts/components/session/SessionRadio.tsx
+++ b/ts/components/session/SessionRadio.tsx
@@ -26,7 +26,7 @@ export const SessionRadio = (props: Props) => {
         value={value}
         aria-checked={active}
         checked={active}
-        onClick={clickHandler}
+        onChange={clickHandler}
       />
       <label role="button" onClick={clickHandler}>
         {label}
diff --git a/ts/components/session/SessionToggle.tsx b/ts/components/session/SessionToggle.tsx
index 231488ac3..e26125e4d 100644
--- a/ts/components/session/SessionToggle.tsx
+++ b/ts/components/session/SessionToggle.tsx
@@ -45,12 +45,14 @@ export const SessionToggle = (props: Props) => {
   };
 
   return (
-    <div
-      className={classNames('session-toggle', props.active ? 'active' : '')}
-      role="button"
-      onClick={clickHandler}
-    >
-      <div className="knob" />
+    <div className="session-settings-item__selection">
+      <div
+        className={classNames('session-toggle', props.active ? 'active' : '')}
+        role="button"
+        onClick={clickHandler}
+      >
+        <div className="knob" />
+      </div>
     </div>
   );
 };
diff --git a/ts/components/session/conversation/SessionCompositionBox.tsx b/ts/components/session/conversation/SessionCompositionBox.tsx
index 27f2d87f6..c65b52b76 100644
--- a/ts/components/session/conversation/SessionCompositionBox.tsx
+++ b/ts/components/session/conversation/SessionCompositionBox.tsx
@@ -28,7 +28,7 @@ import { getConversationController } from '../../../session/conversations';
 import { ReduxConversationType } from '../../../state/ducks/conversations';
 import { SessionMemberListItem } from '../SessionMemberListItem';
 import autoBind from 'auto-bind';
-import { getMediaPermissionsSettings } from '../settings/SessionSettings';
+import { getMediaPermissionsSettings, SessionSettingCategory } from '../settings/SessionSettings';
 import { updateConfirmModal } from '../../../state/ducks/modalDialog';
 import {
   SectionType,
@@ -51,7 +51,6 @@ import { connect } from 'react-redux';
 import { StateType } from '../../../state/reducer';
 import { getTheme } from '../../../state/selectors/theme';
 import { removeAllStagedAttachmentsInConversation } from '../../../state/ducks/stagedAttachments';
-import { SessionSettingCategory } from '../settings/LocalSettings';
 
 export interface ReplyingToMessageProps {
   convoId: string;
diff --git a/ts/components/session/settings/BlockedUserSettings.ts b/ts/components/session/settings/BlockedUserSettings.ts
deleted file mode 100644
index dd74609ae..000000000
--- a/ts/components/session/settings/BlockedUserSettings.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { unblockConvoById } from '../../../interactions/conversationInteractions';
-import { getConversationController } from '../../../session/conversations';
-import { BlockedNumberController } from '../../../util';
-import { SessionButtonColor } from '../SessionButton';
-import { LocalSettingType, SessionSettingType, SessionSettingCategory } from './LocalSettings';
-
-export function getBlockedUserSettings(): Array<LocalSettingType> {
-  const results: Array<LocalSettingType> = [];
-  const blockedNumbers = BlockedNumberController.getBlockedNumbers();
-
-  for (const blockedNumber of blockedNumbers) {
-    let title: string;
-
-    const currentModel = getConversationController().get(blockedNumber);
-    if (currentModel) {
-      title = currentModel.getProfileName() || currentModel.getName() || window.i18n('anonymous');
-    } else {
-      title = window.i18n('anonymous');
-    }
-
-    results.push({
-      id: blockedNumber,
-      title,
-      description: '',
-      type: SessionSettingType.Button,
-      category: SessionSettingCategory.Blocked,
-      content: {
-        buttonColor: SessionButtonColor.Danger,
-        buttonText: window.i18n('unblockUser'),
-      },
-      comparisonValue: undefined,
-      setFn: async () => {
-        await unblockConvoById(blockedNumber);
-      },
-      hidden: false,
-      onClick: undefined,
-    });
-  }
-
-  if (blockedNumbers.length === 0) {
-    return [
-      {
-        id: 'noBlockedContacts',
-        title: '',
-        description: window.i18n('noBlockedContacts'),
-        type: undefined,
-        category: SessionSettingCategory.Blocked,
-        content: undefined,
-        comparisonValue: undefined,
-        setFn: undefined,
-        hidden: false,
-        onClick: undefined,
-      },
-    ];
-  }
-
-  return results;
-}
diff --git a/ts/components/session/settings/BlockedUserSettings.tsx b/ts/components/session/settings/BlockedUserSettings.tsx
new file mode 100644
index 000000000..06723fa26
--- /dev/null
+++ b/ts/components/session/settings/BlockedUserSettings.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { unblockConvoById } from '../../../interactions/conversationInteractions';
+import { getConversationController } from '../../../session/conversations';
+import { getBlockedPubkeys } from '../../../state/selectors/conversations';
+import { SessionButtonColor } from '../SessionButton';
+import { SessionSettingButtonItem, SessionSettingsItemWrapper } from './SessionSettingListItem';
+
+export const BlockedUserSettings = () => {
+  const blockedNumbers = useSelector(getBlockedPubkeys);
+
+  if (!blockedNumbers || blockedNumbers.length === 0) {
+    return (
+      <SessionSettingsItemWrapper
+        inline={true}
+        description={window.i18n('noBlockedContacts')}
+        title={''}
+      >
+        {' '}
+      </SessionSettingsItemWrapper>
+    );
+  }
+  const blockedEntries = blockedNumbers.map(blockedEntry => {
+    const currentModel = getConversationController().get(blockedEntry);
+    let title: string;
+
+    if (currentModel) {
+      title = currentModel.getProfileName() || currentModel.getName() || window.i18n('anonymous');
+    } else {
+      title = window.i18n('anonymous');
+    }
+    return (
+      <SessionSettingButtonItem
+        key={blockedEntry}
+        buttonColor={SessionButtonColor.Danger}
+        buttonText={window.i18n('unblockUser')}
+        title={title}
+        onClick={async () => {
+          await unblockConvoById(blockedEntry);
+        }}
+      />
+    );
+  });
+
+  return <>{blockedEntries}</>;
+};
diff --git a/ts/components/session/settings/LocalSettings.ts b/ts/components/session/settings/LocalSettings.ts
deleted file mode 100644
index f42167af0..000000000
--- a/ts/components/session/settings/LocalSettings.ts
+++ /dev/null
@@ -1,388 +0,0 @@
-import { shell } from 'electron';
-import { createOrUpdateItem, hasLinkPreviewPopupBeenDisplayed } from '../../../data/data';
-import { ToastUtils } from '../../../session/utils';
-import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
-import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
-import { PasswordAction } from '../../dialog/SessionPasswordDialog';
-import { SessionButtonColor } from '../SessionButton';
-
-export enum SessionSettingCategory {
-  Appearance = 'appearance',
-  Account = 'account',
-  Privacy = 'privacy',
-  Permissions = 'permissions',
-  Notifications = 'notifications',
-  Blocked = 'blocked',
-}
-
-export enum SessionSettingType {
-  Toggle = 'toggle',
-  Options = 'options',
-  Button = 'button',
-  Slider = 'slider',
-}
-
-export type LocalSettingType = {
-  category: SessionSettingCategory;
-  description: string | undefined;
-  comparisonValue: string | undefined;
-  id: any;
-  value?: any;
-  content: any | undefined;
-  hidden: any;
-  title?: string;
-  type: SessionSettingType | undefined;
-  setFn: any;
-  onClick: any;
-};
-
-function setNotificationSetting(settingID: string, selectedValue: string) {
-  window.setSettingValue(settingID, selectedValue);
-}
-
-function displayPasswordModal(
-  passwordAction: PasswordAction,
-  onPasswordUpdated: (action: string) => void
-) {
-  window.inboxStore?.dispatch(
-    sessionPassword({
-      passwordAction,
-      onOk: () => {
-        onPasswordUpdated(passwordAction);
-      },
-    })
-  );
-}
-
-// tslint:disable-next-line: max-func-body-length
-export function getLocalSettings(
-  hasPassword: boolean | null,
-  onPasswordUpdated: (action: string) => void,
-  forceUpdate: () => void
-): Array<LocalSettingType> {
-  const { Settings } = window.Signal.Types;
-
-  return [
-    {
-      id: 'hide-menu-bar',
-      title: window.i18n('hideMenuBarTitle'),
-      description: window.i18n('hideMenuBarDescription'),
-      hidden: !Settings.isHideMenuBarSupported(),
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Appearance,
-      setFn: window.toggleMenuBar,
-      content: { defaultValue: true },
-      comparisonValue: undefined,
-      onClick: undefined,
-    },
-    {
-      id: 'spell-check',
-      title: window.i18n('spellCheckTitle'),
-      description: window.i18n('spellCheckDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Appearance,
-      setFn: window.toggleSpellCheck,
-      content: { defaultValue: true },
-      comparisonValue: undefined,
-      onClick: undefined,
-    },
-    {
-      id: 'link-preview-setting',
-      title: window.i18n('linkPreviewsTitle'),
-      description: window.i18n('linkPreviewDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Appearance,
-      setFn: async () => {
-        const newValue = !window.getSettingValue('link-preview-setting');
-        window.setSettingValue('link-preview-setting', newValue);
-        if (!newValue) {
-          await createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: false });
-        } else {
-          window.inboxStore?.dispatch(
-            updateConfirmModal({
-              title: window.i18n('linkPreviewsTitle'),
-              message: window.i18n('linkPreviewsConfirmMessage'),
-              okTheme: SessionButtonColor.Danger,
-              // onClickOk:
-            })
-          );
-        }
-      },
-      content: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-    },
-
-    {
-      id: 'start-in-tray-setting',
-      title: window.i18n('startInTrayTitle'),
-      description: window.i18n('startInTrayDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Appearance,
-      setFn: async () => {
-        try {
-          const newValue = !(await window.getStartInTray());
-
-          // make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false
-          window.setSettingValue('start-in-tray-setting', newValue);
-          await window.setStartInTray(newValue);
-          if (!newValue) {
-            ToastUtils.pushRestartNeeded();
-          }
-        } catch (e) {
-          window.log.warn('start in tray change error:', e);
-        }
-      },
-      content: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-    },
-    {
-      id: 'audio-message-autoplay-setting',
-      title: window.i18n('audioMessageAutoplayTitle'),
-      description: window.i18n('audioMessageAutoplayDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Appearance,
-      setFn: () => {
-        window.inboxStore?.dispatch(toggleAudioAutoplay());
-      },
-      content: {
-        defaultValue: window.inboxStore?.getState().userConfig.audioAutoplay,
-      },
-      comparisonValue: undefined,
-      onClick: undefined,
-    },
-
-    {
-      id: 'notification-setting',
-      title: window.i18n('notificationSettingsDialog'),
-      type: SessionSettingType.Options,
-      category: SessionSettingCategory.Notifications,
-      comparisonValue: undefined,
-      description: undefined,
-      hidden: undefined,
-      onClick: undefined,
-      setFn: (selectedValue: string) => {
-        setNotificationSetting('notification-setting', selectedValue);
-        forceUpdate();
-      },
-      content: {
-        options: {
-          group: 'notification-setting',
-          initialItem: window.getSettingValue('notification-setting') || 'message',
-          items: [
-            {
-              label: window.i18n('nameAndMessage'),
-              value: 'message',
-            },
-            {
-              label: window.i18n('nameOnly'),
-              value: 'name',
-            },
-            {
-              label: window.i18n('noNameOrMessage'),
-              value: 'count',
-            },
-            {
-              label: window.i18n('disableNotifications'),
-              value: 'off',
-            },
-          ],
-        },
-      },
-    },
-    {
-      id: 'zoom-factor-setting',
-      title: window.i18n('zoomFactorSettingTitle'),
-      description: undefined,
-      hidden: false,
-      type: SessionSettingType.Slider,
-      category: SessionSettingCategory.Appearance,
-      setFn: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-      content: {
-        dotsEnabled: true,
-        step: 20,
-        min: 60,
-        max: 200,
-        defaultValue: 100,
-        info: (value: number) => `${value}%`,
-      },
-    },
-    {
-      id: 'session-survey',
-      title: window.i18n('surveyTitle'),
-      description: undefined,
-      hidden: false,
-      type: SessionSettingType.Button,
-      category: SessionSettingCategory.Appearance,
-      setFn: undefined,
-      comparisonValue: undefined,
-      onClick: () => {
-        void shell.openExternal('https://getsession.org/survey');
-      },
-      content: {
-        buttonText: window.i18n('goToOurSurvey'),
-        buttonColor: SessionButtonColor.Primary,
-      },
-    },
-    {
-      id: 'help-translation',
-      title: window.i18n('translation'),
-      description: undefined,
-      hidden: false,
-      type: SessionSettingType.Button,
-      category: SessionSettingCategory.Appearance,
-      setFn: undefined,
-      comparisonValue: undefined,
-      onClick: () => {
-        void shell.openExternal('https://crowdin.com/project/session-desktop/');
-      },
-      content: {
-        buttonText: window.i18n('helpUsTranslateSession'),
-        buttonColor: SessionButtonColor.Primary,
-      },
-    },
-    {
-      id: 'media-permissions',
-      title: window.i18n('mediaPermissionsTitle'),
-      description: window.i18n('mediaPermissionsDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Privacy,
-      setFn: async () => {
-        await window.toggleMediaPermissions();
-        forceUpdate();
-      },
-      content: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-    },
-    {
-      id: 'call-media-permissions',
-      title: window.i18n('callMediaPermissionsTitle'),
-      description: window.i18n('callMediaPermissionsDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Privacy,
-      setFn: async () => {
-        const currentValue = window.getCallMediaPermissions();
-        if (!currentValue) {
-          window.inboxStore?.dispatch(
-            updateConfirmModal({
-              message: window.i18n('callMediaPermissionsDialogContent'),
-              okTheme: SessionButtonColor.Green,
-              onClickOk: async () => {
-                await window.toggleCallMediaPermissionsTo(true);
-                forceUpdate();
-              },
-              onClickCancel: async () => {
-                await window.toggleCallMediaPermissionsTo(false);
-                forceUpdate();
-              },
-            })
-          );
-        } else {
-          await window.toggleCallMediaPermissionsTo(false);
-          forceUpdate();
-        }
-      },
-
-      content: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-    },
-    {
-      id: 'read-receipt-setting',
-      title: window.i18n('readReceiptSettingTitle'),
-      description: window.i18n('readReceiptSettingDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Privacy,
-      setFn: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-      content: {},
-    },
-    {
-      id: 'typing-indicators-setting',
-      title: window.i18n('typingIndicatorsSettingTitle'),
-      description: window.i18n('typingIndicatorsSettingDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Privacy,
-      setFn: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-      content: {},
-    },
-    {
-      id: 'auto-update',
-      title: window.i18n('autoUpdateSettingTitle'),
-      description: window.i18n('autoUpdateSettingDescription'),
-      hidden: false,
-      type: SessionSettingType.Toggle,
-      category: SessionSettingCategory.Privacy,
-      setFn: undefined,
-      comparisonValue: undefined,
-      onClick: undefined,
-      content: {},
-    },
-    {
-      id: 'set-password',
-      title: window.i18n('setAccountPasswordTitle'),
-      description: window.i18n('setAccountPasswordDescription'),
-      hidden: hasPassword,
-      type: SessionSettingType.Button,
-      category: SessionSettingCategory.Privacy,
-      setFn: undefined,
-      comparisonValue: undefined,
-      content: {
-        buttonText: window.i18n('setPassword'),
-        buttonColor: SessionButtonColor.Primary,
-      },
-      onClick: () => {
-        displayPasswordModal('set', onPasswordUpdated);
-      },
-    },
-    {
-      id: 'change-password',
-      title: window.i18n('changeAccountPasswordTitle'),
-      description: window.i18n('changeAccountPasswordDescription'),
-      hidden: !hasPassword,
-      type: SessionSettingType.Button,
-      category: SessionSettingCategory.Privacy,
-      setFn: undefined,
-      comparisonValue: undefined,
-      content: {
-        buttonText: window.i18n('changePassword'),
-        buttonColor: SessionButtonColor.Primary,
-      },
-      onClick: () => {
-        displayPasswordModal('change', onPasswordUpdated);
-      },
-    },
-    {
-      id: 'remove-password',
-      title: window.i18n('removeAccountPasswordTitle'),
-      description: window.i18n('removeAccountPasswordDescription'),
-      hidden: !hasPassword,
-      type: SessionSettingType.Button,
-      category: SessionSettingCategory.Privacy,
-      setFn: undefined,
-      comparisonValue: undefined,
-      content: {
-        buttonText: window.i18n('removePassword'),
-        buttonColor: SessionButtonColor.Danger,
-      },
-      onClick: () => {
-        displayPasswordModal('remove', onPasswordUpdated);
-      },
-    },
-  ];
-}
diff --git a/ts/components/session/settings/SessionNotificationGroupSettings.tsx b/ts/components/session/settings/SessionNotificationGroupSettings.tsx
new file mode 100644
index 000000000..48e4236bc
--- /dev/null
+++ b/ts/components/session/settings/SessionNotificationGroupSettings.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { SessionRadioGroup } from '../SessionRadioGroup';
+import { SessionSettingsItemWrapper } from './SessionSettingListItem';
+
+export const SessionNotificationGroupSettings = (props: { hasPassword: boolean | null }) => {
+  if (props.hasPassword === null) {
+    return null;
+  }
+
+  const initialItem = window.getSettingValue('notification-setting') || 'message';
+
+  const items = [
+    {
+      label: window.i18n('nameAndMessage'),
+      value: 'message',
+    },
+    {
+      label: window.i18n('nameOnly'),
+      value: 'name',
+    },
+    {
+      label: window.i18n('noNameOrMessage'),
+      value: 'count',
+    },
+    {
+      label: window.i18n('disableNotifications'),
+      value: 'off',
+    },
+  ];
+  return (
+    <SessionSettingsItemWrapper title={window.i18n('notificationSettingsDialog')} inline={false}>
+      <SessionRadioGroup
+        initialItem={initialItem}
+        group={'notification-setting'}
+        items={items}
+        onClick={(selectedRadioValue: string) => {
+          window.setSettingValue('notification-setting', selectedRadioValue);
+        }}
+      />
+    </SessionSettingsItemWrapper>
+  );
+};
diff --git a/ts/components/session/settings/SessionSettingListItem.tsx b/ts/components/session/settings/SessionSettingListItem.tsx
index 4f36063cb..410229297 100644
--- a/ts/components/session/settings/SessionSettingListItem.tsx
+++ b/ts/components/session/settings/SessionSettingListItem.tsx
@@ -1,97 +1,74 @@
-import React, { useState } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 
-import Slider from 'rc-slider';
-
 import { SessionToggle } from '../SessionToggle';
-import { SessionButton } from '../SessionButton';
-import { SessionRadioGroup } from '../SessionRadioGroup';
+import { SessionButton, SessionButtonColor } from '../SessionButton';
 import { SessionConfirmDialogProps } from '../../dialog/SessionConfirm';
-import { SessionSettingType } from './LocalSettings';
 
-type Props = {
+type ButtonSettingsProps = {
   title?: string;
   description?: string;
-  type: SessionSettingType | undefined;
-  value: any;
-  options?: Array<any>;
-  onClick?: any;
-  onSliderChange?: any;
-  content: any;
-  confirmationDialogParams?: SessionConfirmDialogProps;
+  buttonColor: SessionButtonColor;
+  buttonText: string;
+  onClick: () => void;
 };
 
-export const SessionSettingListItem = (props: Props) => {
-  const handleSlider = (valueToForward: any) => {
-    if (props.onSliderChange) {
-      props.onSliderChange(valueToForward);
-    }
-
-    setSliderValue(valueToForward);
-  };
-
-  const [sliderValue, setSliderValue] = useState(null);
+const SettingsTitleAndDescription = (props: { title?: string; description?: string }) => {
+  return (
+    <div className="session-settings-item__info">
+      <div className="session-settings-item__title">{props.title}</div>
 
-  const { title, description, type, value, content } = props;
-  const inline = !!type && ![SessionSettingType.Options, SessionSettingType.Slider].includes(type);
+      {props.description && (
+        <div className="session-settings-item__description">{props.description}</div>
+      )}
+    </div>
+  );
+};
 
-  const currentSliderValue = type === SessionSettingType.Slider && (sliderValue || value);
+const SessionSettingsContent = (props: { children: React.ReactNode }) => {
+  return <div className="session-settings-item__content">{props.children}</div>;
+};
 
+export const SessionSettingsItemWrapper = (props: {
+  inline: boolean;
+  title?: string;
+  description?: string;
+  children: React.ReactNode;
+}) => {
   return (
-    <div className={classNames('session-settings-item', inline && 'inline')}>
-      <div className="session-settings-item__info">
-        <div className="session-settings-item__title">{title}</div>
-
-        {description && <div className="session-settings-item__description">{description}</div>}
-      </div>
-
-      <div className="session-settings-item__content">
-        {type === SessionSettingType.Toggle && (
-          <div className="session-settings-item__selection">
-            <SessionToggle
-              active={Boolean(value)}
-              onClick={() => props.onClick?.()}
-              confirmationDialogParams={props.confirmationDialogParams}
-            />
-          </div>
-        )}
+    <div className={classNames('session-settings-item', props.inline && 'inline')}>
+      <SettingsTitleAndDescription title={props.title} description={props.description} />
+      <SessionSettingsContent>{props.children}</SessionSettingsContent>
+    </div>
+  );
+};
 
-        {type === SessionSettingType.Button && (
-          <SessionButton
-            text={content.buttonText}
-            buttonColor={content.buttonColor}
-            onClick={() => props.onClick?.()}
-          />
-        )}
+export const SessionToggleWithDescription = (props: {
+  title?: string;
+  description?: string;
+  active: boolean;
+  onClickToggle: () => void;
+  confirmationDialogParams?: SessionConfirmDialogProps;
+}) => {
+  const { title, description, active, onClickToggle, confirmationDialogParams } = props;
 
-        {type === SessionSettingType.Options && (
-          <SessionRadioGroup
-            initialItem={content.options.initialItem}
-            group={content.options.group}
-            items={content.options.items}
-            onClick={(selectedRadioValue: string) => {
-              props.onClick(selectedRadioValue);
-            }}
-          />
-        )}
+  return (
+    <SessionSettingsItemWrapper title={title} description={description} inline={true}>
+      <SessionToggle
+        active={active}
+        onClick={onClickToggle}
+        confirmationDialogParams={confirmationDialogParams}
+      />
+    </SessionSettingsItemWrapper>
+  );
+};
 
-        {type === SessionSettingType.Slider && (
-          <div className="slider-wrapper">
-            <Slider
-              dots={true}
-              step={content.step}
-              min={content.min}
-              max={content.max}
-              defaultValue={currentSliderValue}
-              onAfterChange={handleSlider}
-            />
+export const SessionSettingButtonItem = (props: ButtonSettingsProps) => {
+  const { title, description, buttonColor, buttonText, onClick } = props;
 
-            <div className="slider-info">
-              <p>{content.info(currentSliderValue)}</p>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
+  return (
+    <SessionSettingsItemWrapper title={title} description={description} inline={true}>
+      <SessionButton text={buttonText} buttonColor={buttonColor} onClick={onClick} />
+    </SessionSettingsItemWrapper>
   );
 };
diff --git a/ts/components/session/settings/SessionSettings.tsx b/ts/components/session/settings/SessionSettings.tsx
index b5141c089..e01174e11 100644
--- a/ts/components/session/settings/SessionSettings.tsx
+++ b/ts/components/session/settings/SessionSettings.tsx
@@ -1,24 +1,28 @@
 import React from 'react';
 
 import { SettingsHeader } from './SessionSettingsHeader';
-import { SessionSettingListItem } from './SessionSettingListItem';
+import { SessionSettingButtonItem, SessionToggleWithDescription } from './SessionSettingListItem';
 import { SessionButton, SessionButtonColor, SessionButtonType } from '../SessionButton';
 import { PasswordUtil } from '../../../util';
-import { StateType } from '../../../state/reducer';
-import { getBlockedPubkeys } from '../../../state/selectors/conversations';
-import { connect } from 'react-redux';
-import { getPasswordHash } from '../../../../ts/data/data';
-import { shell } from 'electron';
-import { mapDispatchToProps } from '../../../state/actions';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  createOrUpdateItem,
+  getPasswordHash,
+  hasLinkPreviewPopupBeenDisplayed,
+} from '../../../../ts/data/data';
+import { ipcRenderer, shell } from 'electron';
 import { SessionIconButton } from '../icon';
 import autoBind from 'auto-bind';
-import {
-  getLocalSettings,
-  LocalSettingType,
-  SessionSettingCategory,
-  SessionSettingType,
-} from './LocalSettings';
-import { getBlockedUserSettings } from './BlockedUserSettings';
+import { SessionNotificationGroupSettings } from './SessionNotificationGroupSettings';
+import { sessionPassword, updateConfirmModal } from '../../../state/ducks/modalDialog';
+import { ToastUtils } from '../../../session/utils';
+import { getAudioAutoplay } from '../../../state/selectors/userConfig';
+import { toggleAudioAutoplay } from '../../../state/ducks/userConfig';
+// tslint:disable-next-line: no-submodule-imports
+import useUpdate from 'react-use/lib/useUpdate';
+import { PasswordAction } from '../../dialog/SessionPasswordDialog';
+import { BlockedUserSettings } from './BlockedUserSettings';
+import { ZoomingSessionSlider } from './ZoomingSessionSlider';
 
 export function getMediaPermissionsSettings() {
   return window.getSettingValue('media-permissions');
@@ -28,9 +32,15 @@ export function getCallMediaPermissionsSettings() {
   return window.getSettingValue('call-media-permissions');
 }
 
+export enum SessionSettingCategory {
+  Appearance = 'appearance',
+  Privacy = 'privacy',
+  Notifications = 'notifications',
+  Blocked = 'blocked',
+}
+
 export interface SettingsViewProps {
   category: SessionSettingCategory;
-  blockedNumbers: Array<string>;
 }
 
 interface State {
@@ -82,7 +92,253 @@ const SessionInfo = () => {
   );
 };
 
-class SettingsViewInner extends React.Component<SettingsViewProps, State> {
+async function toggleLinkPreviews() {
+  const newValue = !window.getSettingValue('link-preview-setting');
+  window.setSettingValue('link-preview-setting', newValue);
+  if (!newValue) {
+    await createOrUpdateItem({ id: hasLinkPreviewPopupBeenDisplayed, value: false });
+  } else {
+    window.inboxStore?.dispatch(
+      updateConfirmModal({
+        title: window.i18n('linkPreviewsTitle'),
+        message: window.i18n('linkPreviewsConfirmMessage'),
+        okTheme: SessionButtonColor.Danger,
+      })
+    );
+  }
+}
+
+async function toggleStartInTray() {
+  try {
+    const newValue = !(await window.getStartInTray());
+
+    // make sure to write it here too, as this is the value used on the UI to mark the toggle as true/false
+    window.setSettingValue('start-in-tray-setting', newValue);
+    await window.setStartInTray(newValue);
+    if (!newValue) {
+      ToastUtils.pushRestartNeeded();
+    }
+  } catch (e) {
+    window.log.warn('start in tray change error:', e);
+  }
+}
+
+const toggleCallMediaPermissions = async (triggerUIUpdate: () => void) => {
+  const currentValue = window.getCallMediaPermissions();
+  if (!currentValue) {
+    window.inboxStore?.dispatch(
+      updateConfirmModal({
+        message: window.i18n('callMediaPermissionsDialogContent'),
+        okTheme: SessionButtonColor.Green,
+        onClickOk: async () => {
+          await window.toggleCallMediaPermissionsTo(true);
+          triggerUIUpdate();
+        },
+        onClickCancel: async () => {
+          await window.toggleCallMediaPermissionsTo(false);
+          triggerUIUpdate();
+        },
+      })
+    );
+  } else {
+    await window.toggleCallMediaPermissionsTo(false);
+    triggerUIUpdate();
+  }
+};
+
+const SettingsCategoryAppearance = (props: { hasPassword: boolean | null }) => {
+  const dispatch = useDispatch();
+  const forceUpdate = useUpdate();
+  const audioAutoPlay = useSelector(getAudioAutoplay);
+
+  if (props.hasPassword !== null) {
+    const isHideMenuBarActive =
+      window.getSettingValue('hide-menu-bar') === undefined
+        ? true
+        : window.getSettingValue('hide-menu-bar');
+
+    const isSpellCheckActive =
+      window.getSettingValue('spell-check') === undefined
+        ? true
+        : window.getSettingValue('spell-check');
+
+    const isLinkPreviewsOn = Boolean(window.getSettingValue('link-preview-setting'));
+    const isStartInTrayActive = Boolean(window.getSettingValue('start-in-tray-setting'));
+
+    return (
+      <>
+        {window.Signal.Types.Settings.isHideMenuBarSupported() && (
+          <SessionToggleWithDescription
+            onClickToggle={() => {
+              window.toggleMenuBar();
+              forceUpdate();
+            }}
+            title={window.i18n('hideMenuBarTitle')}
+            description={window.i18n('hideMenuBarDescription')}
+            active={isHideMenuBarActive}
+          />
+        )}
+        <SessionToggleWithDescription
+          onClickToggle={() => {
+            window.toggleSpellCheck();
+            forceUpdate();
+          }}
+          title={window.i18n('spellCheckTitle')}
+          description={window.i18n('spellCheckDescription')}
+          active={isSpellCheckActive}
+        />
+
+        <SessionToggleWithDescription
+          onClickToggle={async () => {
+            await toggleLinkPreviews();
+            forceUpdate();
+          }}
+          title={window.i18n('linkPreviewsTitle')}
+          description={window.i18n('linkPreviewDescription')}
+          active={isLinkPreviewsOn}
+        />
+        <SessionToggleWithDescription
+          onClickToggle={async () => {
+            await toggleStartInTray();
+            forceUpdate();
+          }}
+          title={window.i18n('startInTrayTitle')}
+          description={window.i18n('startInTrayDescription')}
+          active={isStartInTrayActive}
+        />
+        <SessionToggleWithDescription
+          onClickToggle={() => {
+            dispatch(toggleAudioAutoplay());
+            forceUpdate();
+          }}
+          title={window.i18n('audioMessageAutoplayTitle')}
+          description={window.i18n('audioMessageAutoplayDescription')}
+          active={audioAutoPlay}
+        />
+        <ZoomingSessionSlider />
+        <SessionSettingButtonItem
+          title={window.i18n('surveyTitle')}
+          onClick={() => void shell.openExternal('https://getsession.org/survey')}
+          buttonColor={SessionButtonColor.Primary}
+          buttonText={window.i18n('goToOurSurvey')}
+        />
+        <SessionSettingButtonItem
+          title={window.i18n('helpUsTranslateSession')}
+          onClick={() => void shell.openExternal('https://crowdin.com/project/session-desktop/')}
+          buttonColor={SessionButtonColor.Primary}
+          buttonText={window.i18n('translation')}
+        />
+        <SessionSettingButtonItem
+          onClick={() => {
+            ipcRenderer.send('show-debug-log');
+          }}
+          buttonColor={SessionButtonColor.Primary}
+          buttonText={window.i18n('showDebugLog')}
+        />
+      </>
+    );
+  }
+  return null;
+};
+
+const SettingsCategoryPrivacy = (props: {
+  hasPassword: boolean | null;
+  onPasswordUpdated: (action: string) => void;
+}) => {
+  const forceUpdate = useUpdate();
+
+  if (props.hasPassword !== null) {
+    return (
+      <>
+        <SessionToggleWithDescription
+          onClickToggle={async () => {
+            await window.toggleMediaPermissions();
+            forceUpdate();
+          }}
+          title={window.i18n('mediaPermissionsTitle')}
+          description={window.i18n('mediaPermissionsDescription')}
+          active={Boolean(window.getSettingValue('media-permissions'))}
+        />
+
+        <SessionToggleWithDescription
+          onClickToggle={async () => {
+            await toggleCallMediaPermissions(forceUpdate);
+            forceUpdate();
+          }}
+          title={window.i18n('callMediaPermissionsTitle')}
+          description={window.i18n('callMediaPermissionsDescription')}
+          active={Boolean(window.getCallMediaPermissions())}
+        />
+        <SessionToggleWithDescription
+          onClickToggle={() => {
+            const old = Boolean(window.getSettingValue('read-receipt-setting'));
+            window.setSettingValue('read-receipt-setting', !old);
+            forceUpdate();
+          }}
+          title={window.i18n('readReceiptSettingTitle')}
+          description={window.i18n('readReceiptSettingDescription')}
+          active={window.getSettingValue('read-receipt-setting')}
+        />
+        <SessionToggleWithDescription
+          onClickToggle={() => {
+            const old = Boolean(window.getSettingValue('typing-indicators-setting'));
+            window.setSettingValue('typing-indicators-setting', !old);
+            forceUpdate();
+          }}
+          title={window.i18n('typingIndicatorsSettingTitle')}
+          description={window.i18n('typingIndicatorsSettingDescription')}
+          active={Boolean(window.getSettingValue('typing-indicators-setting'))}
+        />
+        <SessionToggleWithDescription
+          onClickToggle={() => {
+            const old = Boolean(window.getSettingValue('auto-update'));
+            window.setSettingValue('auto-update', !old);
+            forceUpdate();
+          }}
+          title={window.i18n('autoUpdateSettingTitle')}
+          description={window.i18n('autoUpdateSettingDescription')}
+          active={Boolean(window.getSettingValue('auto-update'))}
+        />
+        {!props.hasPassword && (
+          <SessionSettingButtonItem
+            title={window.i18n('setAccountPasswordTitle')}
+            description={window.i18n('setAccountPasswordDescription')}
+            onClick={() => {
+              displayPasswordModal('set', props.onPasswordUpdated);
+            }}
+            buttonColor={SessionButtonColor.Primary}
+            buttonText={window.i18n('setPassword')}
+          />
+        )}
+        {props.hasPassword && (
+          <SessionSettingButtonItem
+            title={window.i18n('changeAccountPasswordTitle')}
+            description={window.i18n('changeAccountPasswordDescription')}
+            onClick={() => {
+              displayPasswordModal('change', props.onPasswordUpdated);
+            }}
+            buttonColor={SessionButtonColor.Primary}
+            buttonText={window.i18n('changePassword')}
+          />
+        )}
+        {props.hasPassword && (
+          <SessionSettingButtonItem
+            title={window.i18n('removeAccountPasswordTitle')}
+            description={window.i18n('removeAccountPasswordDescription')}
+            onClick={() => {
+              displayPasswordModal('remove', props.onPasswordUpdated);
+            }}
+            buttonColor={SessionButtonColor.Danger}
+            buttonText={window.i18n('removePassword')}
+          />
+        )}
+      </>
+    );
+  }
+  return null;
+};
+
+export class SmartSettingsView extends React.Component<SettingsViewProps, State> {
   public settingsViewRef: React.RefObject<HTMLDivElement>;
 
   public constructor(props: any) {
@@ -116,67 +372,42 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
     window.removeEventListener('keyup', this.onKeyUp);
   }
 
+  public renderSettingsPrivacy() {
+    if (this.state.hasPassword !== null) {
+      return <SessionNotificationGroupSettings hasPassword={this.state.hasPassword} />;
+    }
+    return null;
+  }
+
   /* tslint:disable-next-line:max-func-body-length */
   public renderSettingInCategory() {
-    const { category, blockedNumbers } = this.props;
-
-    let settings: Array<LocalSettingType>;
+    const { category } = this.props;
 
+    if (this.state.hasPassword === null) {
+      return null;
+    }
     if (category === SessionSettingCategory.Blocked) {
       // special case for blocked user
-      settings = getBlockedUserSettings(blockedNumbers);
-    } else {
-      // Grab initial values from database on startup
-      // ID corresponds to installGetter parameters in preload.js
-      // They are NOT arbitrary; add with caution
+      return <BlockedUserSettings />;
+    }
 
-      settings = getLocalSettings(this.state.hasPassword, this.onPasswordUpdated, this.forceUpdate);
+    if (category === SessionSettingCategory.Appearance) {
+      return <SettingsCategoryAppearance hasPassword={this.state.hasPassword} />;
     }
 
-    return (
-      <>
-        {this.state.hasPassword !== null &&
-          settings.map(setting => {
-            const content = setting.content || undefined;
-            const shouldRenderSettings = setting.category === category;
-            const description = setting.description || '';
-
-            const comparisonValue = setting.comparisonValue || null;
-            const storedSetting = window.getSettingValue(setting.id, comparisonValue);
-            const value =
-              storedSetting !== undefined
-                ? storedSetting
-                : setting.content && setting.content.defaultValue;
-
-            const sliderFn =
-              setting.type === SessionSettingType.Slider
-                ? (settingValue: any) => window.setSettingValue(setting.id, settingValue)
-                : () => null;
-
-            const onClickFn =
-              setting.onClick ||
-              ((settingValue?: string) => {
-                this.updateSetting(setting, settingValue);
-              });
-
-            return (
-              <div key={setting.id}>
-                {shouldRenderSettings && !setting.hidden && (
-                  <SessionSettingListItem
-                    title={setting.title}
-                    description={description}
-                    type={setting.type}
-                    value={value}
-                    onClick={onClickFn}
-                    onSliderChange={sliderFn}
-                    content={content}
-                  />
-                )}
-              </div>
-            );
-          })}
-      </>
-    );
+    if (category === SessionSettingCategory.Notifications) {
+      return <SessionNotificationGroupSettings hasPassword={this.state.hasPassword} />;
+    }
+
+    if (category === SessionSettingCategory.Privacy) {
+      return (
+        <SettingsCategoryPrivacy
+          onPasswordUpdated={this.onPasswordUpdated}
+          hasPassword={this.state.hasPassword}
+        />
+      );
+    }
+    return <SessionNotificationGroupSettings hasPassword={this.state.hasPassword} />;
   }
 
   public async validatePasswordLock() {
@@ -245,25 +476,6 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
     });
   }
 
-  /**
-   * If there's a custom afterClick function, execute it instead of automatically updating settings
-   * @param item setting item
-   * @param value new value to set
-   */
-  public updateSetting(item: any, value?: string) {
-    if (item.setFn) {
-      item.setFn(value);
-      this.forceUpdate();
-    } else if (item.type === SessionSettingType.Toggle) {
-      // If no custom afterClick function given, alter values in storage here
-
-      // Switch to opposite state
-      const newValue = !window.getSettingValue(item.id);
-      window.setSettingValue(item.id, newValue);
-      this.forceUpdate();
-    }
-  }
-
   public onPasswordUpdated(action: string) {
     if (action === 'set' || action === 'change') {
       this.setState({
@@ -291,11 +503,16 @@ class SettingsViewInner extends React.Component<SettingsViewProps, State> {
   }
 }
 
-const mapStateToProps = (state: StateType) => {
-  return {
-    blockedNumbers: getBlockedPubkeys(state),
-  };
-};
-
-const smart = connect(mapStateToProps, mapDispatchToProps);
-export const SmartSettingsView = smart(SettingsViewInner);
+function displayPasswordModal(
+  passwordAction: PasswordAction,
+  onPasswordUpdated: (action: string) => void
+) {
+  window.inboxStore?.dispatch(
+    sessionPassword({
+      passwordAction,
+      onOk: () => {
+        onPasswordUpdated(passwordAction);
+      },
+    })
+  );
+}
diff --git a/ts/components/session/settings/SessionSettingsHeader.tsx b/ts/components/session/settings/SessionSettingsHeader.tsx
index 81343a280..9a71e3ab9 100644
--- a/ts/components/session/settings/SessionSettingsHeader.tsx
+++ b/ts/components/session/settings/SessionSettingsHeader.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { SettingsViewProps } from './SessionSettings';
 
-interface Props extends SettingsViewProps {
-  // tslint:disable-next-line: react-unused-props-and-state
+type Props = Pick<SettingsViewProps, 'category'> & {
   categoryTitle: string;
-  // tslint:disable-next-line: react-unused-props-and-state
-}
+};
 
 export const SettingsHeader = (props: Props) => {
   const { categoryTitle } = props;
diff --git a/ts/components/session/settings/ZoomingSessionSlider.tsx b/ts/components/session/settings/ZoomingSessionSlider.tsx
new file mode 100644
index 000000000..5878259a9
--- /dev/null
+++ b/ts/components/session/settings/ZoomingSessionSlider.tsx
@@ -0,0 +1,35 @@
+import Slider from 'rc-slider';
+import React from 'react';
+// tslint:disable-next-line: no-submodule-imports
+import useUpdate from 'react-use/lib/useUpdate';
+import { SessionSettingsItemWrapper } from './SessionSettingListItem';
+
+export const ZoomingSessionSlider = (props: { onSliderChange?: (value: number) => void }) => {
+  const forceUpdate = useUpdate();
+  const handleSlider = (valueToForward: number) => {
+    props?.onSliderChange?.(valueToForward);
+    window.setSettingValue('zoom-factor-setting', valueToForward);
+    window.updateZoomFactor();
+    forceUpdate();
+  };
+  const currentValueFromSettings = window.getSettingValue('zoom-factor-setting') || 100;
+
+  return (
+    <SessionSettingsItemWrapper title={window.i18n('zoomFactorSettingTitle')} inline={false}>
+      <div className="slider-wrapper">
+        <Slider
+          dots={true}
+          step={20}
+          min={60}
+          max={200}
+          defaultValue={currentValueFromSettings}
+          onAfterChange={handleSlider}
+        />
+
+        <div className="slider-info">
+          <p>{currentValueFromSettings}%`</p>
+        </div>
+      </div>
+    </SessionSettingsItemWrapper>
+  );
+};
diff --git a/ts/session/utils/Toast.tsx b/ts/session/utils/Toast.tsx
index 77ce284ba..a90146fbb 100644
--- a/ts/session/utils/Toast.tsx
+++ b/ts/session/utils/Toast.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { toast } from 'react-toastify';
 import { SessionIconType } from '../../components/session/icon';
 import { SessionToast, SessionToastType } from '../../components/session/SessionToast';
-import { SessionSettingCategory } from '../../components/session/settings/LocalSettings';
+import { SessionSettingCategory } from '../../components/session/settings/SessionSettings';
 import { SectionType, showLeftPaneSection, showSettingsSection } from '../../state/ducks/section';
 
 // if you push a toast manually with toast...() be sure to set the type attribute of the SessionToast component
diff --git a/ts/state/ducks/section.tsx b/ts/state/ducks/section.tsx
index 9db8e810a..e5332d8f8 100644
--- a/ts/state/ducks/section.tsx
+++ b/ts/state/ducks/section.tsx
@@ -1,5 +1,4 @@
-import { SessionSettingCategory } from '../../components/session/settings/LocalSettings';
-
+import { SessionSettingCategory } from '../../components/session/settings/SessionSettings';
 export const FOCUS_SECTION = 'FOCUS_SECTION';
 export const FOCUS_SETTINGS_SECTION = 'FOCUS_SETTINGS_SECTION';
 export const IS_APP_FOCUSED = 'IS_APP_FOCUSED';
diff --git a/ts/state/selectors/conversations.ts b/ts/state/selectors/conversations.ts
index 1e2783942..dd6694d2e 100644
--- a/ts/state/selectors/conversations.ts
+++ b/ts/state/selectors/conversations.ts
@@ -49,6 +49,14 @@ export const getConversationLookup = createSelector(
 export const getConversationsCount = createSelector(getConversationLookup, (state): number => {
   return Object.values(state).length;
 });
+export const getBlockedPubkeys = createSelector(
+  // make sure to extends this selector to we are rerun on conversation changes
+  getConversationLookup,
+
+  (_state): Array<string> => {
+    return BlockedNumberController.getBlockedNumbers();
+  }
+);
 
 export const getSelectedConversationKey = createSelector(
   getConversations,
@@ -998,11 +1006,12 @@ export const getMessageContentWithStatusesSelectorProps = createSelector(
       return undefined;
     }
 
-    const { direction, isDeleted } = props.propsForMessage;
+    const { direction, isDeleted, attachments } = props.propsForMessage;
 
     const msgProps: MessageContentWithStatusSelectorProps = {
       direction,
       isDeleted,
+      hasAttachments: Boolean(attachments?.length) || false,
     };
 
     return msgProps;
diff --git a/ts/state/selectors/section.ts b/ts/state/selectors/section.ts
index 20c1a9411..65558bd8c 100644
--- a/ts/state/selectors/section.ts
+++ b/ts/state/selectors/section.ts
@@ -2,7 +2,7 @@ import { createSelector } from 'reselect';
 
 import { StateType } from '../reducer';
 import { SectionStateType, SectionType } from '../ducks/section';
-import { SessionSettingCategory } from '../../components/session/settings/LocalSettings';
+import { SessionSettingCategory } from '../../components/session/settings/SessionSettings';
 
 export const getSection = (state: StateType): SectionStateType => state.section;
 
diff --git a/ts/window.d.ts b/ts/window.d.ts
index 55518cd8c..cf4c3fc50 100644
--- a/ts/window.d.ts
+++ b/ts/window.d.ts
@@ -35,7 +35,9 @@ declare global {
     friends: any;
     getConversations: any;
     getFriendsFromContacts: any;
-    getSettingValue: any;
+    getSettingValue: (id: string) => any;
+    setSettingValue: (id: string, value: any) => void;
+
     i18n: LocalizerType;
     libsignal: LibsignalProtocol;
     log: any;
@@ -54,13 +56,13 @@ declare global {
     restart: any;
     getSeedNodeList: () => Array<any> | undefined;
     setPassword: any;
-    setSettingValue: any;
     storage: any;
     textsecure: LibTextsecure;
     toggleMediaPermissions: () => Promise<void>;
     toggleCallMediaPermissionsTo: (enabled: boolean) => Promise<void>;
     getCallMediaPermissions: () => boolean;
-    toggleMenuBar: any;
+    updateZoomFactor: () => boolean;
+    toggleMenuBar: () => void;
     toggleSpellCheck: any;
     setTheme: (newTheme: string) => any;
     isDev?: () => boolean;