feat(preferences): Tools segment (#657)

app/assets/javascripts/preferences/panes/General.tsx

@@ -3,6 +3,7 @@ import { AppState } from '@/ui_models/app_state';
 import { FunctionComponent } from 'preact';
 import { PreferencesPane } from '../components';
 import { ErrorReporting } from './general-segments';
+import { Tools } from './general-segments/Tools';
 
 interface GeneralProps {
   appState: AppState;
@@ -11,6 +12,7 @@ interface GeneralProps {
 
 export const General: FunctionComponent<GeneralProps> = (props) => (
   <PreferencesPane>
+    <Tools application={props.application} />
     <ErrorReporting appState={props.appState} />
   </PreferencesPane>
 );

app/assets/javascripts/preferences/panes/general-segments/Tools.tsx

@@ -0,0 +1,86 @@
+import { HorizontalSeparator } from '@/components/shared/HorizontalSeparator';
+import { Switch } from '@/components/Switch';
+import {
+  PreferencesGroup,
+  PreferencesSegment,
+  Subtitle,
+  Text,
+  Title,
+} from '@/preferences/components';
+import { WebApplication } from '@/ui_models/application';
+import { PrefKey } from '@standardnotes/snjs';
+import { observer } from 'mobx-react-lite';
+import { FunctionalComponent } from 'preact';
+import { useState } from 'preact/hooks';
+
+type Props = {
+  application: WebApplication;
+};
+
+export const Tools: FunctionalComponent<Props> = observer(
+  ({ application }: Props) => {
+    const [monospaceFont, setMonospaceFont] = useState(() =>
+      application.getPreference(PrefKey.EditorMonospaceEnabled)
+    );
+    const [marginResizers, setMarginResizers] = useState(() =>
+      application.getPreference(PrefKey.EditorResizersEnabled)
+    );
+    const [spellcheck, setSpellcheck] = useState(() =>
+      application.getPreference(PrefKey.EditorSpellcheck)
+    );
+
+    const toggleMonospaceFont = () => {
+      setMonospaceFont(!monospaceFont);
+      application.setPreference(PrefKey.EditorMonospaceEnabled, !monospaceFont);
+    };
+
+    const toggleMarginResizers = () => {
+      setMarginResizers(!marginResizers);
+      application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers);
+    };
+
+    const toggleSpellcheck = () => {
+      setSpellcheck(!spellcheck);
+      application.setPreference(PrefKey.EditorSpellcheck, !spellcheck);
+    };
+
+    return (
+      <PreferencesGroup>
+        <PreferencesSegment>
+          <Title>Tools</Title>
+          <div className="mt-2">
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Monospace Font</Subtitle>
+                <Text>Toggles the font style in the Plain Text editor.</Text>
+              </div>
+              <Switch onChange={toggleMonospaceFont} checked={monospaceFont} />
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Margin Resizers</Subtitle>
+                <Text>Allows left and right editor margins to be resized.</Text>
+              </div>
+              <Switch
+                onChange={toggleMarginResizers}
+                checked={marginResizers}
+              />
+            </div>
+            <HorizontalSeparator classes="mt-5 mb-3" />
+            <div className="flex items-center justify-between">
+              <div className="flex flex-col">
+                <Subtitle>Spellcheck</Subtitle>
+                <Text>
+                  May degrade performance, especially with long notes. Available
+                  in the Plain Text editor and most specialty editors.
+                </Text>
+              </div>
+              <Switch onChange={toggleSpellcheck} checked={spellcheck} />
+            </div>
+          </div>
+        </PreferencesSegment>
+      </PreferencesGroup>
+    );
+  }
+);

app/assets/javascripts/preferences/panes/general-segments/index.ts

@@ -1 +1,2 @@
 export * from './ErrorReporting';
+export * from './Tools';