[Glitch] Fix selected account being lost when creating a collection

Port f6969f71f886d24f13e182a31209a8cab3735787 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/features/collection_adder/index.tsx

@@ -10,6 +10,7 @@ import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId';
 import type { Account } from '@/flavours/glitch/models/account';
 import {
   addCollectionItem,
+  collectionEditorActions,
   removeCollectionItem,
 } from '@/flavours/glitch/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/flavours/glitch/features/collection_adder/styles.module.scss

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