SettingsStore: add advanced settings toggles

app/soapbox/features/developers/settings-store.tsx

@@ -3,10 +3,20 @@ import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 
 import { showAlertForError } from 'soapbox/actions/alerts';
 import { patchMe } from 'soapbox/actions/me';
-import { FE_NAME, SETTINGS_UPDATE } from 'soapbox/actions/settings';
+import { FE_NAME, SETTINGS_UPDATE, changeSetting } from 'soapbox/actions/settings';
-import { Button, Form, FormActions, FormGroup, Textarea } from 'soapbox/components/ui';
+import List, { ListItem } from 'soapbox/components/list';
-import Column from 'soapbox/features/ui/components/column';
+import {
-import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+  CardHeader,
+  CardTitle,
+  Column,
+  Button,
+  Form,
+  FormActions,
+  FormGroup,
+  Textarea,
+} from 'soapbox/components/ui';
+import SettingToggle from 'soapbox/features/notifications/components/setting_toggle';
+import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
 
 const isJSONValid = (text: any): boolean => {
   try {
@@ -25,6 +35,7 @@ const messages = defineMessages({
 const SettingsStore: React.FC = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const settings = useSettings();
   const settingsStore = useAppSelector(state => state.get('settings'));
 
   const [rawJSON, setRawJSON] = useState<string>(JSON.stringify(settingsStore, null, 2));
@@ -37,6 +48,10 @@ const SettingsStore: React.FC = () => {
     setJsonValid(isJSONValid(rawJSON));
   };
 
+  const onToggleChange = (key: string[], checked: boolean) => {
+    dispatch(changeSetting(key, checked, { showAlert: true }));
+  };
+
   const handleSubmit: React.FormEventHandler = e => {
     const settings = JSON.parse(rawJSON);
 
@@ -81,6 +96,52 @@ const SettingsStore: React.FC = () => {
           </Button>
         </FormActions>
       </Form>
+
+      <CardHeader>
+        <CardTitle title='Advanced settings' />
+      </CardHeader>
+
+      <List>
+        <ListItem label={<FormattedMessage id='preferences.fields.unfollow_modal_label' defaultMessage='Show confirmation dialog before unfollowing someone' />}>
+          <SettingToggle settings={settings} settingPath={['unfollowModal']} onChange={onToggleChange} />
+        </ListItem>
+
+        <ListItem label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}>
+          <SettingToggle settings={settings} settingPath={['missingDescriptionModal']} onChange={onToggleChange} />
+        </ListItem>
+
+        <ListItem label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}>
+          <SettingToggle settings={settings} settingPath={['reduceMotion']} onChange={onToggleChange} />
+        </ListItem>
+
+        <ListItem label={<FormattedMessage id='preferences.fields.underline_links_label' defaultMessage='Always underline links in posts' />}>
+          <SettingToggle settings={settings} settingPath={['underlineLinks']} onChange={onToggleChange} />
+        </ListItem>
+
+        <ListItem label={<FormattedMessage id='preferences.fields.system_font_label' defaultMessage="Use system's default font" />}>
+          <SettingToggle settings={settings} settingPath={['systemFont']} onChange={onToggleChange} />
+        </ListItem>
+
+        <div className='dyslexic'>
+          <ListItem label={<FormattedMessage id='preferences.fields.dyslexic_font_label' defaultMessage='Dyslexic mode' />}>
+            <SettingToggle settings={settings} settingPath={['dyslexicFont']} onChange={onToggleChange} />
+          </ListItem>
+        </div>
+
+        {/* <ListItem
+          label={<FormattedMessage id='preferences.fields.halloween_label' defaultMessage='Halloween mode' />}
+          hint={<FormattedMessage id='preferences.hints.halloween' defaultMessage='Beware: SPOOKY! Supports light/dark toggle.' />}
+        >
+          <SettingToggle settings={settings} settingPath={['halloween']} onChange={onToggleChange} />
+        </ListItem> */}
+
+        <ListItem
+          label={<FormattedMessage id='preferences.fields.demetricator_label' defaultMessage='Use Demetricator' />}
+          hint={<FormattedMessage id='preferences.hints.demetricator' defaultMessage='Decrease social media anxiety by hiding all numbers from the site.' />}
+        >
+          <SettingToggle settings={settings} settingPath={['demetricator']} onChange={onToggleChange} />
+        </ListItem>
+      </List>
     </Column>
   );
 };

app/soapbox/features/preferences/index.tsx

@@ -157,75 +157,28 @@ const Preferences = () => {
           />
         </ListItem>
 
-        {features.privacyScopes && <ListItem label={<FormattedMessage id='preferences.fields.privacy_label' defaultMessage='Default post privacy' />}>
+        {features.privacyScopes && (
-          <SelectDropdown
+          <ListItem label={<FormattedMessage id='preferences.fields.privacy_label' defaultMessage='Default post privacy' />}>
-            items={defaultPrivacyOptions}
+            <SelectDropdown
-            defaultValue={settings.get('defaultPrivacy') as string | undefined}
+              items={defaultPrivacyOptions}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultPrivacy'])}
+              defaultValue={settings.get('defaultPrivacy') as string | undefined}
-          />
+              onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultPrivacy'])}
-        </ListItem>}
+            />
+          </ListItem>
+        )}
 
-        {features.richText && <ListItem label={<FormattedMessage id='preferences.fields.content_type_label' defaultMessage='Default post format' />}>
+        {features.richText && (
-          <SelectDropdown
+          <ListItem label={<FormattedMessage id='preferences.fields.content_type_label' defaultMessage='Default post format' />}>
-            items={defaultContentTypeOptions}
+            <SelectDropdown
-            defaultValue={settings.get('defaultContentType') as string | undefined}
+              items={defaultContentTypeOptions}
-            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultContentType'])}
+              defaultValue={settings.get('defaultContentType') as string | undefined}
-          />
+              onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultContentType'])}
-        </ListItem>}
+            />
+          </ListItem>
+        )}
       </List>
 
-      {/* <FieldsGroup>
-          <RadioGroup
-            label={<FormattedMessage id='preferences.fields.privacy_label' defaultMessage='Post privacy' />}
-            onChange={this.onDefaultPrivacyChange}
-          >
-            <RadioItem
-              label={<FormattedMessage id='preferences.options.privacy_public' defaultMessage='Public' />}
-              hint={<FormattedMessage id='preferences.hints.privacy_public' defaultMessage='Everyone can see' />}
-              checked={settings.get('defaultPrivacy') === 'public'}
-              value='public'
-            />
-            <RadioItem
-              label={<FormattedMessage id='preferences.options.privacy_unlisted' defaultMessage='Unlisted' />}
-              hint={<FormattedMessage id='preferences.hints.privacy_unlisted' defaultMessage='Everyone can see, but not listed on public timelines' />}
-              checked={settings.get('defaultPrivacy') === 'unlisted'}
-              value='unlisted'
-            />
-            <RadioItem
-              label={<FormattedMessage id='preferences.options.privacy_followers_only' defaultMessage='Followers-only' />}
-              hint={<FormattedMessage id='preferences.hints.privacy_followers_only' defaultMessage='Only show to followers' />}
-              checked={settings.get('defaultPrivacy') === 'private'}
-              value='private'
-            />
-          </RadioGroup>
-        </FieldsGroup> */}
-
-      {/* {features.richText && (
-        <FieldsGroup>
-          <RadioGroup
-            label={<FormattedMessage id='preferences.fields.content_type_label' defaultMessage='Post format' />}
-            onChange={onDefaultContentTypeChange}
-          >
-            <RadioItem
-              label={<FormattedMessage id='preferences.options.content_type_plaintext' defaultMessage='Plain text' />}
-              checked={settings.get('defaultContentType') === 'text/plain'}
-              value='text/plain'
-            />
-            <RadioItem
-              label={<FormattedMessage id='preferences.options.content_type_markdown' defaultMessage='Markdown' />}
-              hint={<FormattedMessage id='preferences.hints.content_type_markdown' defaultMessage='Warning: experimental!' />}
-              checked={settings.get('defaultContentType') === 'text/markdown'}
-              value='text/markdown'
-            />
-          </RadioGroup>
-        </FieldsGroup>
-      )} */}
-
       <List>
-        {/* <ListItem label={<FormattedMessage id='preferences.fields.unfollow_modal_label' defaultMessage='Show confirmation dialog before unfollowing someone' />}>
-          <SettingToggle settings={settings} settingPath={['unfollowModal']} onChange={onToggleChange} />
-        </ListItem> */}
-
         <ListItem label={<FormattedMessage id='preferences.fields.boost_modal_label' defaultMessage='Show confirmation dialog before reposting' />}>
           <SettingToggle settings={settings} settingPath={['boostModal']} onChange={onToggleChange} />
         </ListItem>
@@ -233,10 +186,6 @@ const Preferences = () => {
         <ListItem label={<FormattedMessage id='preferences.fields.delete_modal_label' defaultMessage='Show confirmation dialog before deleting a post' />}>
           <SettingToggle settings={settings} settingPath={['deleteModal']} onChange={onToggleChange} />
         </ListItem>
-
-        {/* <ListItem label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}>
-          <SettingToggle settings={settings} settingPath={['missingDescriptionModal']} onChange={onToggleChange} />
-        </ListItem> */}
       </List>
 
       <List>
@@ -248,10 +197,6 @@ const Preferences = () => {
           <SettingToggle settings={settings} settingPath={['expandSpoilers']} onChange={onToggleChange} />
         </ListItem>}
 
-        {/* <ListItem label={<FormattedMessage id='preferences.fields.reduce_motion_label' defaultMessage='Reduce motion in animations' />}>
-          <SettingToggle settings={settings} settingPath={['reduceMotion']} onChange={onToggleChange} />
-        </ListItem> */}
-
         <ListItem label={<FormattedMessage id='preferences.fields.autoload_timelines_label' defaultMessage='Automatically load new posts when scrolled to the top of the page' />}>
           <SettingToggle settings={settings} settingPath={['autoloadTimelines']} onChange={onToggleChange} />
         </ListItem>
@@ -259,32 +204,6 @@ const Preferences = () => {
         <ListItem label={<FormattedMessage id='preferences.fields.autoload_more_label' defaultMessage='Automatically load more items when scrolled to the bottom of the page' />}>
           <SettingToggle settings={settings} settingPath={['autoloadMore']} onChange={onToggleChange} />
         </ListItem>
-
-        {/* <ListItem label={<FormattedMessage id='preferences.fields.underline_links_label' defaultMessage='Always underline links in posts' />}>
-          <SettingToggle settings={settings} settingPath={['underlineLinks']} onChange={onToggleChange} />
-        </ListItem> */}
-
-        {/* <ListItem label={<FormattedMessage id='preferences.fields.system_font_label' defaultMessage="Use system's default font" />}>
-          <SettingToggle settings={settings} settingPath={['systemFont']} onChange={onToggleChange} />
-        </ListItem> */}
-
-        {/* <div className='dyslexic'>
-            <SettingsCheckbox
-              label={<FormattedMessage id='preferences.fields.dyslexic_font_label' defaultMessage='Dyslexic mode' />}
-              path={['dyslexicFont']}
-            />
-          </div> */}
-        {/* <SettingsCheckbox
-            label={<FormattedMessage id='preferences.fields.halloween_label' defaultMessage='Halloween mode' />}
-            hint={<FormattedMessage id='preferences.hints.halloween' defaultMessage='Beware: SPOOKY! Supports light/dark toggle.' />}
-            path={['halloween']}
-          /> */}
-        {/* <ListItem
-          label={<FormattedMessage id='preferences.fields.demetricator_label' defaultMessage='Use Demetricator' />}
-          hint={<FormattedMessage id='preferences.hints.demetricator' defaultMessage='Decrease social media anxiety by hiding all numbers from the site.' />}
-        >
-          <SettingToggle settings={settings} settingPath={['demetricator']} onChange={onToggleChange} />
-        </ListItem> */}
       </List>
     </Form>
   );