Fix some settings, move them back to Settings page

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

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}>
-          <Text theme='primary' weight='bold' size='sm'>
-            {shortNumberFormat(account.followers_count)}
-          </Text>
+          {!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}>
-          <Text theme='primary' weight='bold' size='sm'>
-            {shortNumberFormat(account.following_count)}
-          </Text>
+          {!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,33 +77,35 @@ const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain })
           </HStack>
         </Stack>
 
-        <HStack alignItems='center' space={3}>
-          {account.followers_count >= 0 && (
-            <Link to={`/@${account.acct}/followers`} title={intl.formatNumber(account.followers_count)}>
-              <HStack alignItems='center' space={1}>
-                <Text theme='primary' weight='bold' size='sm'>
-                  {shortNumberFormat(account.followers_count)}
-                </Text>
-                <Text weight='bold' size='sm'>
-                  <FormattedMessage id='account.followers' defaultMessage='Followers' />
-                </Text>
-              </HStack>
-            </Link>
-          )}
+        {!demetricator && (
+          <HStack alignItems='center' space={3}>
+            {account.followers_count >= 0 && (
+              <Link to={`/@${account.acct}/followers`} title={intl.formatNumber(account.followers_count)}>
+                <HStack alignItems='center' space={1}>
+                  <Text theme='primary' weight='bold' size='sm'>
+                    {shortNumberFormat(account.followers_count)}
+                  </Text>
+                  <Text weight='bold' size='sm'>
+                    <FormattedMessage id='account.followers' defaultMessage='Followers' />
+                  </Text>
+                </HStack>
+              </Link>
+            )}
 
-          {account.following_count >= 0 && (
-            <Link to={`/@${account.acct}/following`} title={intl.formatNumber(account.following_count)}>
-              <HStack alignItems='center' space={1}>
-                <Text theme='primary' weight='bold' size='sm'>
-                  {shortNumberFormat(account.following_count)}
-                </Text>
-                <Text weight='bold' size='sm'>
-                  <FormattedMessage id='account.follows' defaultMessage='Following' />
-                </Text>
-              </HStack>
-            </Link>
-          )}
-        </HStack>
+            {account.following_count >= 0 && (
+              <Link to={`/@${account.acct}/following`} title={intl.formatNumber(account.following_count)}>
+                <HStack alignItems='center' space={1}>
+                  <Text theme='primary' weight='bold' size='sm'>
+                    {shortNumberFormat(account.following_count)}
+                  </Text>
+                  <Text weight='bold' size='sm'>
+                    <FormattedMessage id='account.follows' defaultMessage='Following' />
+                  </Text>
+                </HStack>
+              </Link>
+            )}
+          </HStack>
+        )}
       </Stack>
     </div>
   );