Profile editing: Adds bot toggle (#38581)

app/javascript/mastodon/features/account_edit/index.tsx

@@ -13,11 +13,15 @@ import { Button } from '@/mastodon/components/button';
 import { DismissibleCallout } from '@/mastodon/components/callout/dismissible';
 import { CustomEmojiProvider } from '@/mastodon/components/emoji/context';
 import { EmojiHTML } from '@/mastodon/components/emoji/html';
+import { ToggleField } from '@/mastodon/components/form_fields';
 import { useElementHandledLink } from '@/mastodon/components/status/handled_link';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
 import { autoPlayGif } from '@/mastodon/initial_state';
-import { fetchProfile } from '@/mastodon/reducers/slices/profile_edit';
+import {
+  fetchProfile,
+  patchProfile,
+} from '@/mastodon/reducers/slices/profile_edit';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 
 import { AccountEditColumn, AccountEditEmptyColumn } from './components/column';
@@ -108,6 +112,10 @@ export const messages = defineMessages({
     id: 'account_edit.profile_tab.subtitle',
     defaultMessage: 'Customize the tabs on your profile and what they display.',
   },
+  advancedSettingsTitle: {
+    id: 'account_edit.advanced_settings.title',
+    defaultMessage: 'Advanced settings',
+  },
 });
 
 export const AccountEdit: FC = () => {
@@ -117,7 +125,7 @@ export const AccountEdit: FC = () => {
 
   const dispatch = useAppDispatch();
 
-  const { profile } = useAppSelector((state) => state.profileEdit);
+  const { profile, isPending } = useAppSelector((state) => state.profileEdit);
   useEffect(() => {
     void dispatch(fetchProfile());
   }, [dispatch]);
@@ -162,6 +170,10 @@ export const AccountEdit: FC = () => {
     history.push('/profile/featured_tags');
   }, [history]);
 
+  const handleBotToggle = useCallback(() => {
+    void dispatch(patchProfile({ bot: !profile?.bot }));
+  }, [dispatch, profile?.bot]);
+
   // Normally we would use the account emoji, but we want all custom emojis to be available to render after editing.
   const emojis = useAppSelector((state) => state.custom_emojis);
   const htmlHandlers = useElementHandledLink({
@@ -327,6 +339,26 @@ export const AccountEdit: FC = () => {
             </Button>
           }
         />
+
+        <AccountEditSection title={messages.advancedSettingsTitle}>
+          <ToggleField
+            checked={profile.bot}
+            onChange={handleBotToggle}
+            disabled={isPending}
+            label={
+              <FormattedMessage
+                id='account_edit.advanced_settings.bot_label'
+                defaultMessage='Automated account'
+              />
+            }
+            hint={
+              <FormattedMessage
+                id='account_edit.advanced_settings.bot_hint'
+                defaultMessage='Signal to others that the account mainly performs automated actions and might not be monitored'
+              />
+            }
+          />
+        </AccountEditSection>
       </CustomEmojiProvider>
     </AccountEditColumn>
   );

app/javascript/mastodon/locales/en.json

@@ -139,6 +139,9 @@
   "account.unmute": "Unmute @{name}",
   "account.unmute_notifications_short": "Unmute notifications",
   "account.unmute_short": "Unmute",
+  "account_edit.advanced_settings.bot_hint": "Signal to others that the account mainly performs automated actions and might not be monitored",
+  "account_edit.advanced_settings.bot_label": "Automated account",
+  "account_edit.advanced_settings.title": "Advanced settings",
   "account_edit.bio.add_label": "Add bio",
   "account_edit.bio.edit_label": "Edit bio",
   "account_edit.bio.placeholder": "Add a short introduction to help others identify you.",