Profile editing: Control follower/following list visibility (#38845)

app/javascript/mastodon/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/mastodon/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/mastodon/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 '@/mastodon/components/callout';
 import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import { useAccount } from '@/mastodon/hooks/useAccount';
+import { useCurrentAccountId } from '@/mastodon/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/mastodon/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;
 }

app/javascript/mastodon/locales/en.json

@@ -224,8 +224,10 @@
   "account_edit.profile_tab.show_media.title": "Show ‘Media’ tab",
   "account_edit.profile_tab.show_media_replies.description": "When enabled, Media tab shows both your posts and replies to other people’s posts.",
   "account_edit.profile_tab.show_media_replies.title": "Include replies on ‘Media’ tab",
-  "account_edit.profile_tab.subtitle": "Customize the tabs on your profile and what they display.",
-  "account_edit.profile_tab.title": "Profile tab settings",
+  "account_edit.profile_tab.show_relations.description": "Shows accounts you follow and followers to other users in your profile. People will still be able to see if you are following them.",
+  "account_edit.profile_tab.show_relations.title": "Show ‘Followers’ and ‘Following’",
+  "account_edit.profile_tab.subtitle": "Customize how your profile is displayed.",
+  "account_edit.profile_tab.title": "Profile display settings",
   "account_edit.save": "Save",
   "account_edit.upload_modal.back": "Back",
   "account_edit.upload_modal.done": "Done",
@@ -253,6 +255,7 @@
   "account_edit_tags.search_placeholder": "Enter a hashtag…",
   "account_edit_tags.suggestions": "Suggestions:",
   "account_edit_tags.tag_status_count": "{count, plural, one {# post} other {# posts}}",
+  "account_list.hidden_notice": "This is only visible to you. To show this list to others, go to <link>{page} > {modal} > {field}</link>.",
   "account_list.total": "{total, plural, one {# account} other {# accounts}}",
   "account_note.placeholder": "Click to add note",
   "admin.dashboard.daily_retention": "User retention rate by day after sign-up",

app/views/settings/privacy/show.html.haml

@@ -34,9 +34,6 @@
 
   %p.lead= t('privacy.privacy_hint_html')
 
-  .fields-group
-    = f.input :show_collections, as: :boolean, wrapper: :with_label
-
   = f.simple_fields_for :settings, current_user.settings do |ff|
     .fields-group
       = ff.input :show_application, wrapper: :with_label