Fix selected account being lost when creating a collection (#39897)

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

@@ -10,6 +10,7 @@ import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
 import type { Account } from '@/mastodon/models/account';
 import {
   addCollectionItem,
+  collectionEditorActions,
   removeCollectionItem,
 } from '@/mastodon/reducers/slices/collections';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
@@ -23,6 +24,7 @@ import {
 } from '../collections/overview/created_by_account';
 
 import { CollectionToggle } from './collection_toggle';
+import classes from './styles.module.scss';
 
 const messages = defineMessages({
   close: {
@@ -107,6 +109,23 @@ export const CollectionAdder: React.FC<{
   const account = useAppSelector((state) => state.accounts.get(accountId));
   const currentAccountId = useCurrentAccountId();
   const { collections, status } = useCollectionsCreatedBy(currentAccountId);
+  const dispatch = useAppDispatch();
+
+  const handleNewCollection = useCallback(() => {
+    if (account) {
+      dispatch(
+        collectionEditorActions.reset({
+          account_id: account.id,
+          state:
+            account.feature_approval.current_user === 'manual'
+              ? 'pending'
+              : 'accepted',
+        }),
+      );
+    }
+
+    onClose();
+  }, [account, dispatch, onClose]);
 
   return (
     <div className='modal-root__modal dialog-modal'>
@@ -155,12 +174,17 @@ export const CollectionAdder: React.FC<{
                 />
               }
             >
-              <NewCollectionButton onClick={onClose} />
+              <NewCollectionButton onClick={handleNewCollection} />
             </EmptyState>
           ) : (
-            collections.map((item) => (
-              <ListItem key={item.id} collection={item} account={account} />
-            ))
+            <>
+              <div className={classes.newCollection}>
+                <NewCollectionButton onClick={handleNewCollection} />
+              </div>
+              {collections.map((item) => (
+                <ListItem key={item.id} collection={item} account={account} />
+              ))}
+            </>
           )}
         </div>
       </div>

app/javascript/mastodon/features/collection_adder/styles.module.scss

@@ -0,0 +1,5 @@
+.newCollection {
+  display: flex;
+  justify-content: center;
+  padding-block: 16px;
+}

app/javascript/mastodon/reducers/slices/collections.ts

@@ -111,8 +111,11 @@ const collectionSlice = createSlice({
         items: getEditorCollectionItems(collection.items),
       };
     },
-    reset(state) {
-      state.editor = initialCollectionState.editor;
+    reset(state, action: PayloadAction<EditorCollectionItem | undefined>) {
+      state.editor =
+        action.payload !== undefined
+          ? { ...initialCollectionState.editor, items: [action.payload] }
+          : initialCollectionState.editor;
     },
     updateEditorField<K extends keyof EditorState>(
       state: CollectionState,