feat: separate section for protections

src/screens/Settings/Sections/PasscodeSection.styled.ts

@@ -1,21 +1,6 @@
-import { SectionedTableCell } from '@Components/SectionedTableCell';
 import styled from 'styled-components/native';
 
-export const BaseView = styled.View``;
-
-export const StyledSectionedTableCell = styled(SectionedTableCell)`
-  padding-top: 12px;
-`;
-
-export const Subtitle = styled.Text`
+export const Title = styled.Text`
   color: ${({ theme }) => theme.stylekitNeutralColor};
-  font-size: 14px;
-  margin-top: 4px;
-`;
-
-export const Title = styled.Text<{ first?: boolean }>`
-  margin-top: ${({ first }) => (first ? '0px' : '8px')};
-  color: ${({ theme }) => theme.stylekitForegroundColor};
-  font-size: 14px;
-  font-weight: bold;
+  margin-top: 2px;
 `;

src/screens/Settings/Sections/PasscodeSection.tsx

@@ -7,19 +7,13 @@ import { SectionHeader } from '@Components/SectionHeader';
 import { TableSection } from '@Components/TableSection';
 import { UnlockTiming } from '@Lib/application_state';
 import { MobileDeviceInterface } from '@Lib/interface';
-import { useProtectionSessionExpiry } from '@Lib/snjs_helper_hooks';
 import { useFocusEffect, useNavigation } from '@react-navigation/native';
 import { ApplicationContext } from '@Root/ApplicationContext';
 import { ModalStackNavigationProp } from '@Root/ModalStack';
 import { SCREEN_INPUT_MODAL_PASSCODE, SCREEN_SETTINGS } from '@Screens/screens';
 import { StorageEncryptionPolicies } from '@standardnotes/snjs';
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import {
-  BaseView,
-  StyledSectionedTableCell,
-  Subtitle,
-  Title,
-} from './PasscodeSection.styled';
+import { Title } from './PasscodeSection.styled';
 
 type Props = {
   title: string;
@@ -50,7 +44,6 @@ export const PasscodeSection = (props: Props) => {
     encryptionPolictChangeInProgress,
     setEncryptionPolictChangeInProgress,
   ] = useState(false);
-  const [protectionsDisabledUntil] = useProtectionSessionExpiry();
 
   useEffect(() => {
     let mounted = true;
@@ -129,13 +122,6 @@ export const PasscodeSection = (props: Props) => {
     storageSubText = 'Applying changes...';
   }
 
-  const protectionsEnabledTitle = protectionsDisabledUntil
-    ? `Protections are disabled until ${protectionsDisabledUntil}`
-    : 'Protections are enabled';
-
-  const protectionsEnabledSubtitle =
-    'Actions like viewing protected notes, exporting decrypted backups, or revoking an active session, require additional authentication like entering your account password or application passcode.';
-
   const passcodeTitle = props.hasPasscode
     ? 'Disable Passcode Lock'
     : 'Enable Passcode Lock';
@@ -218,10 +204,6 @@ export const PasscodeSection = (props: Props) => {
     [disableBiometrics, disablePasscode]
   );
 
-  const enableProtections = () => {
-    application?.clearProtectionSession();
-  };
-
   let biometricTitle = hasBiometrics
     ? 'Disable Biometrics Lock'
     : 'Enable Biometrics Lock';
@@ -235,27 +217,9 @@ export const PasscodeSection = (props: Props) => {
         title={storageEncryptionTitle}
         onPress={toggleEncryptionPolicy}
       >
-        <Subtitle>{storageSubText}</Subtitle>
+        <Title>{storageSubText}</Title>
       </ButtonCell>
 
-      {protectionsDisabledUntil ? (
-        <ButtonCell
-          leftAligned
-          title={'Enable Protections'}
-          onPress={enableProtections}
-        >
-          <Title>{protectionsEnabledTitle}</Title>
-          <Subtitle>{protectionsEnabledSubtitle}</Subtitle>
-        </ButtonCell>
-      ) : (
-        <StyledSectionedTableCell>
-          <BaseView>
-            <Title first>{protectionsEnabledTitle}</Title>
-            <Subtitle>{protectionsEnabledSubtitle}</Subtitle>
-          </BaseView>
-        </StyledSectionedTableCell>
-      )}
-
       <ButtonCell leftAligned title={passcodeTitle} onPress={passcodeOnPress} />
 
       <ButtonCell

src/screens/Settings/Sections/ProtectionsSection.styled.ts

@@ -0,0 +1,26 @@
+import { SectionedTableCell } from '@Components/SectionedTableCell';
+import styled from 'styled-components/native';
+
+export const BaseView = styled.View``;
+
+export const StyledSectionedTableCell = styled(SectionedTableCell)`
+  padding-top: 12px;
+`;
+
+export const SubText = styled.Text`
+  color: ${({ theme }) => theme.stylekitNeutralColor};
+  font-size: 14px;
+  padding: 12px 14px;
+`;
+
+export const Subtitle = styled.Text`
+  color: ${({ theme }) => theme.stylekitNeutralColor};
+  font-size: 14px;
+  margin-top: 4px;
+`;
+
+export const Title = styled.Text`
+  color: ${({ theme }) => theme.stylekitForegroundColor};
+  font-size: 16px;
+  font-weight: bold;
+`;

src/screens/Settings/Sections/ProtectionsSection.tsx

@@ -0,0 +1,56 @@
+import { ButtonCell } from '@Components/ButtonCell';
+import { SectionHeader } from '@Components/SectionHeader';
+import { TableSection } from '@Components/TableSection';
+import { useProtectionSessionExpiry } from '@Lib/snjs_helper_hooks';
+import { ApplicationContext } from '@Root/ApplicationContext';
+import React, { useContext } from 'react';
+import {
+  BaseView,
+  StyledSectionedTableCell,
+  SubText,
+  Subtitle,
+  Title,
+} from './ProtectionsSection.styled';
+
+type Props = {
+  title: string;
+};
+
+export const ProtectionsSection = (props: Props) => {
+  // Context
+  const application = useContext(ApplicationContext);
+
+  // State
+  const [protectionsDisabledUntil] = useProtectionSessionExpiry();
+
+  const protectionsEnabledSubtitle = protectionsDisabledUntil
+    ? `Disabled until ${protectionsDisabledUntil}`
+    : 'Enabled';
+
+  const protectionsEnabledSubtext =
+    'Actions like viewing protected notes, exporting decrypted backups, or revoking an active session, require additional authentication like entering your account password or application passcode.';
+
+  const enableProtections = () => {
+    application?.clearProtectionSession();
+  };
+
+  return (
+    <TableSection>
+      <SectionHeader title={props.title} />
+      <StyledSectionedTableCell first>
+        <BaseView>
+          <Title>Status</Title>
+          <Subtitle>{protectionsEnabledSubtitle}</Subtitle>
+        </BaseView>
+      </StyledSectionedTableCell>
+      {protectionsDisabledUntil && (
+        <ButtonCell
+          leftAligned
+          title={'Enable Protections'}
+          onPress={enableProtections}
+        />
+      )}
+      <SubText>{protectionsEnabledSubtext}</SubText>
+    </TableSection>
+  );
+};

src/screens/Settings/Settings.tsx

@@ -10,6 +10,7 @@ import { EncryptionSection } from './Sections/EncryptionSection';
 import { OptionsSection } from './Sections/OptionsSection';
 import { PasscodeSection } from './Sections/PasscodeSection';
 import { PreferencesSection } from './Sections/PreferencesSection';
+import { ProtectionsSection } from './Sections/ProtectionsSection';
 import { Container } from './Settings.styled';
 
 type Props = ModalStackNavigationProp<typeof SCREEN_SETTINGS>;
@@ -61,6 +62,9 @@ export const Settings = (props: Props) => {
         hasPasscode={hasPasscode}
         title="Security"
       />
+      <ProtectionsSection
+        title="Protections"
+      />
       <EncryptionSection
         encryptionAvailable={!!encryptionAvailable}
         title={'Encryption Status'}