[Glitch] Profile editing: Control follower/following list visibility

Port c270634565a3dcf311857bfac6d59c27ac67e9be to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/account_edit/index.tsx

@@ -107,11 +107,11 @@ export const messages = defineMessages({
   },
   profileTabTitle: {
     id: 'account_edit.profile_tab.title',
-    defaultMessage: 'Profile tab settings',
+    defaultMessage: 'Profile display settings',
   },
   profileTabSubtitle: {
     id: 'account_edit.profile_tab.subtitle',
-    defaultMessage: 'Customize the tabs on your profile and what they display.',
+    defaultMessage: 'Customize how your profile is displayed.',
   },
   advancedSettingsTitle: {
     id: 'account_edit.advanced_settings.title',

app/javascript/flavours/glitch/features/account_edit/modals/profile_display_modal.tsx

@@ -27,7 +27,8 @@ export const ProfileDisplayModal: FC<DialogModalProps> = ({ onClose }) => {
   const handleToggleChange: ChangeEventHandler<HTMLInputElement> = useCallback(
     (event) => {
       const { name, checked } = event.target;
-      void dispatch(patchProfile({ [name]: checked }));
+      const targetChecked = name === 'hide_collections' ? !checked : checked;
+      void dispatch(patchProfile({ [name]: targetChecked }));
     },
     [dispatch],
   );
@@ -101,6 +102,25 @@ export const ProfileDisplayModal: FC<DialogModalProps> = ({ onClose }) => {
             />
           }
         />
+
+        <ToggleField
+          checked={!profile.hideCollections}
+          onChange={handleToggleChange}
+          disabled={isPending}
+          name='hide_collections'
+          label={
+            <FormattedMessage
+              id='account_edit.profile_tab.show_relations.title'
+              defaultMessage='Show ‘Followers’ and ‘Following’'
+            />
+          }
+          hint={
+            <FormattedMessage
+              id='account_edit.profile_tab.show_relations.description'
+              defaultMessage='Shows accounts you follow and follows you to other users in your profile. People will still be able to see if you are following them.'
+            />
+          }
+        />
       </div>
 
       <Callout

app/javascript/flavours/glitch/features/followers/components/header.tsx

@@ -3,8 +3,12 @@ import type { FC } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import type { MessageDescriptor } from 'react-intl';
 
+import { Link } from 'react-router-dom';
+
+import { Callout } from '@/flavours/glitch/components/callout';
 import { DisplayNameSimple } from '@/flavours/glitch/components/display_name/simple';
 import { useAccount } from '@/flavours/glitch/hooks/useAccount';
+import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId';
 
 import classes from '../styles.module.scss';
 
@@ -15,6 +19,7 @@ export const AccountListHeader: FC<{
 }> = ({ accountId, total, titleText }) => {
   const intl = useIntl();
   const account = useAccount(accountId);
+  const currentId = useCurrentAccountId();
   return (
     <>
       <h1 className={classes.title}>
@@ -31,6 +36,35 @@ export const AccountListHeader: FC<{
           />
         </h2>
       )}
+      {accountId === currentId && account?.hide_collections && (
+        <Callout className={classes.callout}>
+          <FormattedMessage
+            id='account_list.hidden_notice'
+            defaultMessage='This is only visible to you. To show this list to others, go to <link>{page} > {modal} > {field}</link>.'
+            values={{
+              link: (chunks) => <Link to='/profile/edit'>{chunks}</Link>,
+              page: (
+                <FormattedMessage
+                  id='account.edit_profile'
+                  defaultMessage='Edit profile'
+                />
+              ),
+              modal: (
+                <FormattedMessage
+                  id='account_edit.profile_tab.title'
+                  defaultMessage='Profile display settings'
+                />
+              ),
+              field: (
+                <FormattedMessage
+                  id='account_edit.profile_tab.show_relations.title'
+                  defaultMessage='Show ‘Followers’ and ‘Following’'
+                />
+              ),
+            }}
+          />
+        </Callout>
+      )}
     </>
   );
 };

app/javascript/flavours/glitch/features/followers/styles.module.scss

@@ -4,8 +4,12 @@
   margin: 20px 16px 10px;
 }
 
+.subtitle,
+.callout {
+  margin: 10px 16px;
+}
+
 .subtitle {
   font-size: 14px;
   color: var(--color-text-secondary);
-  margin: 10px 16px;
 }