feat: Move editor apperance preferences to "Appearance" tab

packages/web/src/javascripts/Components/Preferences/Panes/Appearance.tsx

@@ -14,6 +14,7 @@ import PreferencesGroup from '../PreferencesComponents/PreferencesGroup'
 import PreferencesSegment from '../PreferencesComponents/PreferencesSegment'
 import { PremiumFeatureIconName } from '@/Components/Icon/PremiumFeatureIcon'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
+import EditorAppearance from './Appearance/EditorAppearance'
 
 type Props = {
   application: WebApplication
@@ -145,6 +146,7 @@ const Appearance: FunctionComponent<Props> = ({ application }) => {
           </div>
         </PreferencesSegment>
       </PreferencesGroup>
+      <EditorAppearance application={application} />
     </PreferencesPane>
   )
 }

packages/web/src/javascripts/Components/Preferences/Panes/Appearance/EditorAppearance.tsx

@@ -3,7 +3,7 @@ import Dropdown from '@/Components/Dropdown/Dropdown'
 import HorizontalSeparator from '@/Components/Shared/HorizontalSeparator'
 import Switch from '@/Components/Switch/Switch'
 import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { EditorFontSize, PrefKey } from '@standardnotes/snjs'
+import { EditorFontSize, EditorLineHeight, PrefKey } from '@standardnotes/snjs'
 import { useMemo, useState } from 'react'
 import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
 import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
@@ -13,7 +13,25 @@ type Props = {
   application: WebApplication
 }
 
-const PlaintextDefaults = ({ application }: Props) => {
+const EditorDefaults = ({ application }: Props) => {
+  const [lineHeight, setLineHeight] = useState(() =>
+    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
+  )
+
+  const handleLineHeightChange = (value: string) => {
+    setLineHeight(value as EditorLineHeight)
+    void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
+  }
+
+  const lineHeightDropdownOptions = useMemo(
+    () =>
+      Object.values(EditorLineHeight).map((lineHeight) => ({
+        label: lineHeight,
+        value: lineHeight,
+      })),
+    [],
+  )
+
   const [monospaceFont, setMonospaceFont] = useState(() =>
     application.getPreference(PrefKey.EditorMonospaceEnabled, PrefDefaults[PrefKey.EditorMonospaceEnabled]),
   )
@@ -41,11 +59,28 @@ const PlaintextDefaults = ({ application }: Props) => {
     [],
   )
 
+  const [marginResizers, setMarginResizers] = useState(() =>
+    application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled]),
+  )
+
+  const toggleMarginResizers = () => {
+    setMarginResizers(!marginResizers)
+    application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
+  }
+
   return (
     <PreferencesGroup>
       <PreferencesSegment>
-        <Title>Plaintext Note Defaults</Title>
-        <div>
+        <Title>Editor Appearance</Title>
+        <div className="mt-2">
+          <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="my-4" />
           <div className="flex items-center justify-between">
             <div className="flex flex-col">
               <Subtitle>Monospace Font</Subtitle>
@@ -67,10 +102,24 @@ const PlaintextDefaults = ({ application }: Props) => {
               />
             </div>
           </div>
+          <HorizontalSeparator classes="my-4" />
+          <div>
+            <Subtitle>Line height</Subtitle>
+            <Text>Sets the line height (leading) in plaintext & Super notes</Text>
+            <div className="mt-2">
+              <Dropdown
+                id="def-line-height"
+                label="Select the line height for plaintext notes"
+                items={lineHeightDropdownOptions}
+                value={lineHeight}
+                onChange={handleLineHeightChange}
+              />
+            </div>
+          </div>
         </div>
       </PreferencesSegment>
     </PreferencesGroup>
   )
 }
 
-export default PlaintextDefaults
+export default EditorDefaults

packages/web/src/javascripts/Components/Preferences/Panes/General/EditorDefaults.tsx

@@ -1,57 +0,0 @@
-import { WebApplication } from '@/Application/Application'
-import Dropdown from '@/Components/Dropdown/Dropdown'
-import { PrefDefaults } from '@/Constants/PrefDefaults'
-import { EditorLineHeight, PrefKey } from '@standardnotes/snjs'
-import { useMemo, useState } from 'react'
-import { Subtitle, Title, Text } from '../../PreferencesComponents/Content'
-import PreferencesGroup from '../../PreferencesComponents/PreferencesGroup'
-import PreferencesSegment from '../../PreferencesComponents/PreferencesSegment'
-
-type Props = {
-  application: WebApplication
-}
-
-const EditorDefaults = ({ application }: Props) => {
-  const [lineHeight, setLineHeight] = useState(() =>
-    application.getPreference(PrefKey.EditorLineHeight, PrefDefaults[PrefKey.EditorLineHeight]),
-  )
-
-  const handleLineHeightChange = (value: string) => {
-    setLineHeight(value as EditorLineHeight)
-    void application.setPreference(PrefKey.EditorLineHeight, value as EditorLineHeight)
-  }
-
-  const lineHeightDropdownOptions = useMemo(
-    () =>
-      Object.values(EditorLineHeight).map((lineHeight) => ({
-        label: lineHeight,
-        value: lineHeight,
-      })),
-    [],
-  )
-
-  return (
-    <PreferencesGroup>
-      <PreferencesSegment>
-        <Title>Editor Defaults</Title>
-        <div>
-          <div>
-            <Subtitle>Line height</Subtitle>
-            <Text>Sets the line height (leading) in plaintext & Super notes</Text>
-            <div className="mt-2">
-              <Dropdown
-                id="def-line-height"
-                label="Select the line height for plaintext notes"
-                items={lineHeightDropdownOptions}
-                value={lineHeight}
-                onChange={handleLineHeightChange}
-              />
-            </div>
-          </div>
-        </div>
-      </PreferencesSegment>
-    </PreferencesGroup>
-  )
-}
-
-export default EditorDefaults

packages/web/src/javascripts/Components/Preferences/Panes/General/General.tsx

@@ -8,10 +8,8 @@ import Defaults from './Defaults'
 import LabsPane from './Labs/Labs'
 import Advanced from '@/Components/Preferences/Panes/General/Advanced/AdvancedSection'
 import PreferencesPane from '../../PreferencesComponents/PreferencesPane'
-import PlaintextDefaults from './PlaintextDefaults'
 import Persistence from './Persistence'
 import SmartViews from './SmartViews/SmartViews'
-import EditorDefaults from './EditorDefaults'
 
 type Props = {
   viewControllerManager: ViewControllerManager
@@ -22,8 +20,6 @@ type Props = {
 const General: FunctionComponent<Props> = ({ viewControllerManager, application, extensionsLatestVersions }) => (
   <PreferencesPane>
     <Persistence application={application} />
-    <PlaintextDefaults application={application} />
-    <EditorDefaults application={application} />
     <Defaults application={application} />
     <Tools application={application} />
     <SmartViews application={application} featuresController={viewControllerManager.featuresController} />

packages/web/src/javascripts/Components/Preferences/Panes/General/Tools.tsx

@@ -14,15 +14,6 @@ type Props = {
 }
 
 const Tools: FunctionComponent<Props> = ({ application }: Props) => {
-  const [marginResizers, setMarginResizers] = useState(() =>
-    application.getPreference(PrefKey.EditorResizersEnabled, PrefDefaults[PrefKey.EditorResizersEnabled]),
-  )
-
-  const toggleMarginResizers = () => {
-    setMarginResizers(!marginResizers)
-    application.setPreference(PrefKey.EditorResizersEnabled, !marginResizers).catch(console.error)
-  }
-
   const [updateSavingIndicator, setUpdateSavingIndicator] = useState(() =>
     application.getPreference(PrefKey.UpdateSavingStatusIndicator, PrefDefaults[PrefKey.UpdateSavingStatusIndicator]),
   )
@@ -37,13 +28,6 @@ const Tools: FunctionComponent<Props> = ({ application }: Props) => {
       <PreferencesSegment>
         <Title>Tools</Title>
         <div>
-          <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="my-4" />
           <div className="flex items-center justify-between">
             <div className="flex flex-col">