fix: Show Follow account modal before allowing adding to list, #34468 (#34709)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Matt Jankowski <matt@jankowski.online>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: GitHub Actions <noreply@github.com>

app/javascript/mastodon/components/account.tsx

@@ -11,9 +11,12 @@ import {
   unblockAccount,
   muteAccount,
   unmuteAccount,
+  followAccountSuccess,
 } from 'mastodon/actions/accounts';
+import { showAlertForError } from 'mastodon/actions/alerts';
 import { openModal } from 'mastodon/actions/modal';
 import { initMuteModal } from 'mastodon/actions/mutes';
+import { apiFollowAccount } from 'mastodon/api/accounts';
 import { Avatar } from 'mastodon/components/avatar';
 import { Button } from 'mastodon/components/button';
 import { FollowersCounter } from 'mastodon/components/counters';
@@ -24,6 +27,7 @@ import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { Skeleton } from 'mastodon/components/skeleton';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { me } from 'mastodon/initial_state';
 import type { MenuItem } from 'mastodon/models/dropdown_menu';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
@@ -113,14 +117,43 @@ export const Account: React.FC<{
       ];
     } else if (defaultAction !== 'block') {
       const handleAddToLists = () => {
-        dispatch(
+        const openAddToListModal = () => {
-          openModal({
+          dispatch(
-            modalType: 'LIST_ADDER',
+            openModal({
-            modalProps: {
+              modalType: 'LIST_ADDER',
-              accountId: id,
+              modalProps: {
-            },
+                accountId: id,
-          }),
+              },
-        );
+            }),
+          );
+        };
+        if (relationship?.following || relationship?.requested || id === me) {
+          openAddToListModal();
+        } else {
+          dispatch(
+            openModal({
+              modalType: 'CONFIRM_FOLLOW_TO_LIST',
+              modalProps: {
+                accountId: id,
+                onConfirm: () => {
+                  apiFollowAccount(id)
+                    .then((relationship) => {
+                      dispatch(
+                        followAccountSuccess({
+                          relationship,
+                          alreadyFollowing: false,
+                        }),
+                      );
+                      openAddToListModal();
+                    })
+                    .catch((err: unknown) => {
+                      dispatch(showAlertForError(err));
+                    });
+                },
+              },
+            }),
+          );
+        }
       };
 
       arr = [