From 4f319747c5caaf61a9e904108c01c2af88a5c7c4 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Thu, 30 Apr 2026 16:16:30 +0200
Subject: [PATCH] [Glitch] Profile editing: Control follower/following list
 visibility

Port c270634565a3dcf311857bfac6d59c27ac67e9be to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
---
 .../glitch/features/account_edit/index.tsx    |  4 +--
 .../modals/profile_display_modal.tsx          | 22 +++++++++++-
 .../features/followers/components/header.tsx  | 34 +++++++++++++++++++
 .../features/followers/styles.module.scss     |  6 +++-
 4 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/app/javascript/flavours/glitch/features/account_edit/index.tsx b/app/javascript/flavours/glitch/features/account_edit/index.tsx
index efacb06d38..5d4d663e42 100644
--- a/app/javascript/flavours/glitch/features/account_edit/index.tsx
+++ b/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',
diff --git a/app/javascript/flavours/glitch/features/account_edit/modals/profile_display_modal.tsx b/app/javascript/flavours/glitch/features/account_edit/modals/profile_display_modal.tsx
index 9ce05fc579..a5c7a27cdb 100644
--- a/app/javascript/flavours/glitch/features/account_edit/modals/profile_display_modal.tsx
+++ b/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
diff --git a/app/javascript/flavours/glitch/features/followers/components/header.tsx b/app/javascript/flavours/glitch/features/followers/components/header.tsx
index 9d912af98c..fee79ad937 100644
--- a/app/javascript/flavours/glitch/features/followers/components/header.tsx
+++ b/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>
+      )}
     </>
   );
 };
diff --git a/app/javascript/flavours/glitch/features/followers/styles.module.scss b/app/javascript/flavours/glitch/features/followers/styles.module.scss
index f58b345bec..6294044c3b 100644
--- a/app/javascript/flavours/glitch/features/followers/styles.module.scss
+++ b/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;
 }