Fix some settings, move them back to Settings page

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/actions/settings.ts

@@ -31,10 +31,10 @@ const defaultSettings = ImmutableMap({
   underlineLinks: false,
   autoPlayGif: true,
   displayMedia: 'default',
-  unfollowModal: false,
+  unfollowModal: true,
   boostModal: false,
   deleteModal: true,
-  missingDescriptionModal: false,
+  missingDescriptionModal: true,
   defaultPrivacy: 'public',
   defaultContentType: 'text/plain',
   themeMode: 'system',
@@ -42,8 +42,8 @@ const defaultSettings = ImmutableMap({
   showExplanationBox: true,
   explanationBox: true,
   autoloadTimelines: true,
-  autoloadMore: true,
+  autoloadMore: false,
-  preserveSpoilers: false,
+  preserveSpoilers: true,
 
   systemFont: false,
   demetricator: false,

src/components/sidebar-navigation-link.tsx

@@ -2,6 +2,8 @@ import clsx from 'clsx';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
+import { useSettings } from 'soapbox/hooks';
+
 import { Icon, Text } from './ui';
 
 interface ISidebarNavigationLink {
@@ -26,6 +28,8 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
   const { icon, activeIcon, text, to = '', count, countMax, onClick } = props;
   const isActive = location.pathname === to;
 
+  const { demetricator } = useSettings();
+
   const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
     if (onClick) {
       onClick(e);
@@ -55,7 +59,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       >
         <Icon
           src={(isActive && activeIcon) || icon}
-          count={count}
+          count={demetricator ? undefined : count}
           countMax={countMax}
           className={clsx('h-5 w-5', {
             'text-primary-700 dark:text-white': !isActive,

src/components/status-action-button.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
+import { useSettings } from 'soapbox/hooks';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 import type { EmojiReaction } from 'soapbox/schemas';
@@ -19,9 +20,11 @@ interface IStatusActionCounter {
 
 /** Action button numerical counter, eg "5" likes. */
 const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
+  const { demetricator } = useSettings();
+
   return (
     <Text size='xs' weight='semibold' theme='inherit'>
-      {shortNumberFormat(count)}
+      {demetricator && count > 1 ? '1+' : shortNumberFormat(count)}
     </Text>
   );
 };

src/components/thumb-navigation-link.tsx

@@ -4,6 +4,7 @@ import { NavLink, useLocation } from 'react-router-dom';
 
 import IconWithCounter from 'soapbox/components/icon-with-counter';
 import { Icon, Text } from 'soapbox/components/ui';
+import { useSettings } from 'soapbox/hooks';
 
 interface IThumbNavigationLink {
   count?: number;
@@ -18,6 +19,7 @@ interface IThumbNavigationLink {
 
 const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax, src, activeSrc, text, to, exact, paths }): JSX.Element => {
   const { pathname } = useLocation();
+  const { demetricator } = useSettings();
 
   const isActive = (): boolean => {
     if (paths) {
@@ -33,7 +35,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
 
   return (
     <NavLink to={to} exact={exact} className='thumb-navigation__link'>
-      {count !== undefined ? (
+      {!demetricator && count !== undefined ? (
         <IconWithCounter
           src={icon}
           className={clsx({

src/components/ui/divider/divider.tsx

@@ -18,7 +18,7 @@ const Divider = ({ text, textSize = 'md' }: IDivider) => (
 
     {text && (
       <div className='relative flex justify-center'>
-        <span className='bg-white px-2 text-gray-700 dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
+        <span className='bg-white px-2 text-gray-700 black:bg-black dark:bg-gray-900 dark:text-gray-600' data-testid='divider-text'>
           <Text size={textSize} tag='span' theme='inherit'>{text}</Text>
         </span>
       </div>

src/features/account/components/header.tsx

@@ -618,7 +618,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               <Avatar
                 src={account.avatar}
                 size={96}
-                className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
+                className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white black:ring-black dark:bg-primary-900 dark:ring-primary-900'
               />
             </a>
             {account.verified && (

src/features/chats/components/chat-widget/chat-pane-header.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 
 import { HStack, IconButton, Text } from 'soapbox/components/ui';
+import { useSettings } from 'soapbox/hooks';
 
 interface IChatPaneHeader {
   isOpen: boolean;
@@ -24,6 +25,8 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
     ...rest
   } = props;
 
+  const { demetricator } = useSettings();
+
   const ButtonComp = isToggleable ? 'button' : 'div';
   const buttonProps: HTMLAttributes<HTMLButtonElement | HTMLDivElement> = {};
   if (isToggleable) {
@@ -41,7 +44,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
           {title}
         </Text>
 
-        {(typeof unreadCount !== 'undefined' && unreadCount > 0) && (
+        {(!demetricator && typeof unreadCount !== 'undefined' && unreadCount > 0) && (
           <HStack alignItems='center' space={2}>
             <Text weight='semibold' data-testid='unread-count'>
               ({unreadCount})

src/features/developers/settings-store.tsx

@@ -109,33 +109,6 @@ const SettingsStore: React.FC = () => {
         >
           <SettingToggle settings={settings} settingPath={['demo']} onChange={onToggleChange} />
         </ListItem>
-
-        <ListItem label={<FormattedMessage id='preferences.notifications.advanced' defaultMessage='Show all notification categories' />}>
-          <SettingToggle settings={settings} settingPath={['notifications', 'quickFilter', 'advanced']} onChange={onToggleChange} />
-        </ListItem>
-
-        <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.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>
-
-        <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>
   );

src/features/preferences/index.tsx

@@ -180,6 +180,17 @@ const Preferences = () => {
             <SettingToggle settings={settings} settingPath={['preserveSpoilers']} onChange={onToggleChange} />
           </ListItem>
         )}
+
+        <ListItem label={<FormattedMessage id='preferences.notifications.advanced' defaultMessage='Show all notification categories' />}>
+          <SettingToggle settings={settings} settingPath={['notifications', 'quickFilter', 'advanced']} 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>
 
       <List>
@@ -194,6 +205,10 @@ const Preferences = () => {
         <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.unfollow_modal_label' defaultMessage='Show confirmation dialog before unfollowing someone' />}>
+          <SettingToggle settings={settings} settingPath={['unfollowModal']} onChange={onToggleChange} />
+        </ListItem>
       </List>
 
       <List>
@@ -201,6 +216,18 @@ const Preferences = () => {
           <SettingToggle settings={settings} settingPath={['autoPlayGif']} 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>
+
+        <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.autoload_timelines_label' defaultMessage='Automatically load new posts when scrolled to the top of the page' />}>
           <SettingToggle settings={settings} settingPath={['autoloadTimelines']} onChange={onToggleChange} />
         </ListItem>

src/features/ui/components/profile-stats.tsx

@@ -3,6 +3,7 @@ import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
 import { HStack, Text } from 'soapbox/components/ui';
+import { useSettings } from 'soapbox/hooks';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 import type { Account } from 'soapbox/schemas';
@@ -20,6 +21,7 @@ interface IProfileStats {
 /** Display follower and following counts for an account. */
 const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
   const intl = useIntl();
+  const { demetricator } = useSettings();
 
   if (!account) {
     return null;
@@ -29,9 +31,11 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
     <HStack alignItems='center' space={3}>
       <NavLink to={`/@${account.acct}/followers`} onClick={onClickHandler} title={intl.formatNumber(account.followers_count)} className='hover:underline'>
         <HStack alignItems='center' space={1}>
+          {!demetricator && (
             <Text theme='primary' weight='bold' size='sm'>
               {shortNumberFormat(account.followers_count)}
             </Text>
+          )}
           <Text weight='bold' size='sm'>
             {intl.formatMessage(messages.followers)}
           </Text>
@@ -40,9 +44,11 @@ const ProfileStats: React.FC<IProfileStats> = ({ account, onClickHandler }) => {
 
       <NavLink to={`/@${account.acct}/following`} onClick={onClickHandler} title={intl.formatNumber(account.following_count)} className='hover:underline'>
         <HStack alignItems='center' space={1}>
+          {!demetricator && (
             <Text theme='primary' weight='bold' size='sm'>
               {shortNumberFormat(account.following_count)}
             </Text>
+          )}
           <Text weight='bold' size='sm'>
             {intl.formatMessage(messages.follows)}
           </Text>

src/features/ui/components/user-panel.tsx

@@ -6,7 +6,7 @@ import { useAccount } from 'soapbox/api/hooks';
 import StillImage from 'soapbox/components/still-image';
 import { Avatar, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification-badge';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector, useSettings } from 'soapbox/hooks';
 import { getAcct } from 'soapbox/utils/accounts';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 import { displayFqn } from 'soapbox/utils/state';
@@ -20,6 +20,7 @@ interface IUserPanel {
 
 const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain }) => {
   const intl = useIntl();
+  const { demetricator } = useSettings();
   const { account } = useAccount(accountId);
   const fqn = useAppSelector((state) => displayFqn(state));
 
@@ -76,6 +77,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
           </HStack>
         </Stack>
 
+        {!demetricator && (
           <HStack alignItems='center' space={3}>
             {account.followers_count >= 0 && (
               <Link to={`/@${account.acct}/followers`} title={intl.formatNumber(account.followers_count)}>
@@ -103,6 +105,7 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
               </Link>
             )}
           </HStack>
+        )}
       </Stack>
     </div>
   );

src/init/soapbox-head.tsx

@@ -20,7 +20,7 @@ interface ISoapboxHead {
 /** Injects metadata into site head with Helmet. */
 const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const { locale, direction } = useLocale();
-  const { demo, reduceMotion, underlineLinks, demetricator } = useSettings();
+  const { demo, reduceMotion, underlineLinks, demetricator, systemFont } = useSettings();
   const soapboxConfig = useSoapboxConfig();
   const theme = useTheme();
 
@@ -31,6 +31,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
     'no-reduce-motion': !reduceMotion,
     'underline-links': underlineLinks,
     'demetricator': demetricator,
+    'system-font': systemFont,
   });
 
   useEffect(() => {

src/styles/basics.scss

@@ -31,3 +31,11 @@ noscript {
 div[data-viewport-type='window'] {
   position: static !important;
 }
+
+body.system-font, body.system-font .font-sans {
+  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
+}
+
+body.system-font .font-mono {
+  font-family: ui-monospace, mono;
+}