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>
-  );
 };