Allow adding an account to a collection directly from the profile page (#39080)

app/javascript/mastodon/features/collections/components/collection_lockup.tsx

@@ -57,10 +57,45 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
   className,
 }) => {
   const { id, name } = collection;
+
+  return (
+    <ListItemWrapper
+      className={classNames(classes.wrapper, className)}
+      icon={
+        <AvatarGrid
+          accountIds={collection.items.map((item) => item.account_id)}
+          sensitive={collection.sensitive}
+        />
+      }
+      sideContent={sideContent}
+    >
+      <ListItemLink
+        as='h3'
+        to={getCollectionPath(id)}
+        subtitle={
+          <CollectionInfo
+            collection={collection}
+            withAuthorHandle={withAuthorHandle}
+            withTimestamp={withTimestamp}
+          />
+        }
+      >
+        {name}
+      </ListItemLink>
+    </ListItemWrapper>
+  );
+};
+
+export const CollectionInfo: React.FC<
+  Pick<
+    CollectionLockupProps,
+    'collection' | 'withAuthorHandle' | 'withTimestamp'
+  >
+> = ({ collection, withAuthorHandle, withTimestamp }) => {
   const authorAccount = useAccount(collection.account_id);
   const authorHandle = useAccountHandle(authorAccount, domain);
 
-  const collectionInfo = (
+  return (
     <ul>
       {collection.sensitive && (
         <li className='sr-only'>
@@ -98,25 +133,4 @@ export const CollectionLockup: React.FC<CollectionLockupProps> = ({
       )}
     </ul>
   );
-
-  return (
-    <ListItemWrapper
-      className={classNames(classes.wrapper, className)}
-      icon={
-        <AvatarGrid
-          accountIds={collection.items.map((item) => item.account_id)}
-          sensitive={collection.sensitive}
-        />
-      }
-      sideContent={sideContent}
-    >
-      <ListItemLink
-        as='h3'
-        to={getCollectionPath(id)}
-        subtitle={collectionInfo}
-      >
-        {name}
-      </ListItemLink>
-    </ListItemWrapper>
-  );
 };

app/javascript/mastodon/features/collections/editor/accounts.tsx

@@ -39,11 +39,12 @@ import {
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
 import { PendingNote } from '../detail';
+import { canAccountBeAdded, canAccountBeAddedByFollowers } from '../utils';
 
 import classes from './styles.module.scss';
 import { WizardStepTitle } from './wizard_step_title';
 
-const MAX_ACCOUNT_COUNT = 25;
+export const MAX_COLLECTION_ACCOUNT_COUNT = 25;
 
 const AddedAccountItem: React.FC<{
   accountId: string;
@@ -99,9 +100,6 @@ const renderAccountItem = (account: ApiMutedAccountJSON) => (
 
 type GroupKey = 'available' | 'mustFollow' | 'disabled';
 
-const canAccountBeAdded = (account: ApiMutedAccountJSON) =>
-  ['automatic', 'manual'].includes(account.feature_approval.current_user);
-
 function groupSuggestions(
   accounts: ApiMutedAccountJSON[],
   relationships: ImmutableMap<string, Relationship>,
@@ -113,12 +111,8 @@ function groupSuggestions(
         return 'available';
       }
 
-      const canAccountBeAddedByFollowers =
-        account.feature_approval.automatic.includes('followers') ||
-        account.feature_approval.manual.includes('followers');
-
       if (
-        canAccountBeAddedByFollowers &&
+        canAccountBeAddedByFollowers(account) &&
         !relationships.get(account.id)?.following
       ) {
         return 'mustFollow';
@@ -212,7 +206,7 @@ export const CollectionAccounts: React.FC<{
   const [searchValue, setSearchValue] = useState('');
 
   const hasItems = editorItems.length > 0;
-  const hasMaxItems = editorItems.length === MAX_ACCOUNT_COUNT;
+  const hasMaxItems = editorItems.length === MAX_COLLECTION_ACCOUNT_COUNT;
 
   const {
     accounts: suggestedAccounts,
@@ -406,7 +400,10 @@ export const CollectionAccounts: React.FC<{
               <FormattedMessage
                 id='collections.hints.accounts_counter'
                 defaultMessage='{count}/{max} accounts'
-                values={{ count: editorItems.length, max: MAX_ACCOUNT_COUNT }}
+                values={{
+                  count: editorItems.length,
+                  max: MAX_COLLECTION_ACCOUNT_COUNT,
+                }}
               />
             </AccountsHeadingElement>
           )}
@@ -426,7 +423,7 @@ export const CollectionAccounts: React.FC<{
                       id='collections.accounts.empty_description'
                       defaultMessage='Add up to {count} accounts'
                       values={{
-                        count: MAX_ACCOUNT_COUNT,
+                        count: MAX_COLLECTION_ACCOUNT_COUNT,
                       }}
                     />
                   }

app/javascript/mastodon/features/collections/utils.ts

@@ -1,3 +1,5 @@
+import type { ApiMutedAccountJSON } from '@/mastodon/api_types/accounts';
+import type { Account } from '@/mastodon/models/account';
 import { isServerFeatureEnabled } from '@/mastodon/utils/environment';
 
 export function areCollectionsEnabled() {
@@ -5,3 +7,12 @@ export function areCollectionsEnabled() {
 }
 
 export const getCollectionPath = (id: string) => `/collections/${id}`;
+
+export const canAccountBeAdded = (account: ApiMutedAccountJSON | Account) =>
+  ['automatic', 'manual'].includes(account.feature_approval.current_user);
+
+export const canAccountBeAddedByFollowers = (
+  account: ApiMutedAccountJSON | Account,
+) =>
+  account.feature_approval.automatic.includes('followers') ||
+  account.feature_approval.manual.includes('followers');