Require following accounts before being able to add them to a collection (#37927)

app/javascript/mastodon/features/ui/components/confirmation_modals/follow_to_collection.tsx

@@ -0,0 +1,43 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { useAccount } from 'mastodon/hooks/useAccount';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  title: {
+    id: 'confirmations.follow_to_collection.title',
+    defaultMessage: 'Follow account?',
+  },
+  confirm: {
+    id: 'confirmations.follow_to_collection.confirm',
+    defaultMessage: 'Follow and add to collection',
+  },
+});
+
+export const ConfirmFollowToCollectionModal: React.FC<
+  {
+    accountId: string;
+    onConfirm: () => void;
+  } & BaseConfirmationModalProps
+> = ({ accountId, onConfirm, onClose }) => {
+  const intl = useIntl();
+  const account = useAccount(accountId);
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.title)}
+      message={
+        <FormattedMessage
+          id='confirmations.follow_to_collection.message'
+          defaultMessage='You need to be following {name} to add them to a collection.'
+          values={{ name: <strong>@{account?.acct}</strong> }}
+        />
+      }
+      confirm={intl.formatMessage(messages.confirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/mastodon/features/ui/components/confirmation_modals/follow_to_list.tsx

@@ -1,6 +1,6 @@
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
-import { useAppSelector } from 'mastodon/store';
+import { useAccount } from 'mastodon/hooks/useAccount';
 
 import type { BaseConfirmationModalProps } from './confirmation_modal';
 import { ConfirmationModal } from './confirmation_modal';
@@ -23,7 +23,7 @@ export const ConfirmFollowToListModal: React.FC<
   } & BaseConfirmationModalProps
 > = ({ accountId, onConfirm, onClose }) => {
   const intl = useIntl();
-  const account = useAppSelector((state) => state.accounts.get(accountId));
+  const account = useAccount(accountId);
 
   return (
     <ConfirmationModal

app/javascript/mastodon/features/ui/components/confirmation_modals/index.ts

@@ -13,6 +13,7 @@ export { ConfirmUnblockModal } from './unblock';
 export { ConfirmClearNotificationsModal } from './clear_notifications';
 export { ConfirmLogOutModal } from './log_out';
 export { ConfirmFollowToListModal } from './follow_to_list';
+export { ConfirmFollowToCollectionModal } from './follow_to_collection';
 export { ConfirmMissingAltTextModal } from './missing_alt_text';
 export { ConfirmRevokeQuoteModal } from './revoke_quote';
 export { QuietPostQuoteInfoModal } from './quiet_post_quote_info';

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -38,6 +38,7 @@ import {
   ConfirmClearNotificationsModal,
   ConfirmLogOutModal,
   ConfirmFollowToListModal,
+  ConfirmFollowToCollectionModal,
   ConfirmMissingAltTextModal,
   ConfirmRevokeQuoteModal,
   QuietPostQuoteInfoModal,
@@ -67,6 +68,7 @@ export const MODAL_COMPONENTS = {
   'CONFIRM_CLEAR_NOTIFICATIONS': () => Promise.resolve({ default: ConfirmClearNotificationsModal }),
   'CONFIRM_LOG_OUT': () => Promise.resolve({ default: ConfirmLogOutModal }),
   'CONFIRM_FOLLOW_TO_LIST': () => Promise.resolve({ default: ConfirmFollowToListModal }),
+  'CONFIRM_FOLLOW_TO_COLLECTION': () => Promise.resolve({ default: ConfirmFollowToCollectionModal }),
   'CONFIRM_MISSING_ALT_TEXT': () => Promise.resolve({ default: ConfirmMissingAltTextModal }),
   'CONFIRM_PRIVATE_QUOTE_NOTIFY': () => Promise.resolve({ default: PrivateQuoteNotify }),
   'CONFIRM_REVOKE_QUOTE': () => Promise.resolve({ default: ConfirmRevokeQuoteModal }),