Add empty state to CollectionAdder component (#39372)

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

@@ -3,6 +3,7 @@ import { useCallback, useId, useState } from 'react';
 import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
 
 import type { ApiCollectionJSON } from '@/mastodon/api_types/collections';
+import { EmptyState } from '@/mastodon/components/empty_state';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import { NavigationFocusTarget } from '@/mastodon/components/navigation_focus_target';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
@@ -16,7 +17,10 @@ import { IconButton } from 'mastodon/components/icon_button';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
 import { MAX_COLLECTION_ACCOUNT_COUNT } from '../collections/editor/accounts';
-import { useCollectionsCreatedBy } from '../collections/overview/created_by_account';
+import {
+  NewCollectionButton,
+  useCollectionsCreatedBy,
+} from '../collections/overview/created_by_account';
 
 import { CollectionToggle } from './collection_toggle';
 
@@ -136,6 +140,23 @@ export const CollectionAdder: React.FC<{
         >
           {status === 'loading' || !account ? (
             <LoadingIndicator />
+          ) : collections.length === 0 ? (
+            <EmptyState
+              title={
+                <FormattedMessage
+                  id='empty_column.collections_self'
+                  defaultMessage='You have not created any collections yet.'
+                />
+              }
+              message={
+                <FormattedMessage
+                  id='empty_column.account_featured_self.showcase_accounts_desc'
+                  defaultMessage='Collections are curated lists of accounts to help others discover more of the Fediverse.'
+                />
+              }
+            >
+              <NewCollectionButton onClick={onClose} />
+            </EmptyState>
           ) : (
             collections.map((item) => (
               <ListItem key={item.id} collection={item} account={account} />

app/javascript/mastodon/features/collections/overview/created_by_account.tsx

@@ -26,8 +26,14 @@ import {
 } from '../editor';
 import classes from '../styles.module.scss';
 
-const CreateButton: React.FC = () => (
-  <Link to='/collections/new' className='button button--compact'>
+export const NewCollectionButton: React.FC<{ onClick?: () => void }> = ({
+  onClick,
+}) => (
+  <Link
+    to='/collections/new'
+    className='button button--compact'
+    onClick={onClick}
+  >
     <Icon id='plus' icon={AddIcon} />
     <FormattedMessage {...editorMessages.newCollection} />
   </Link>
@@ -97,7 +103,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
             />
           }
         >
-          <CreateButton />
+          <NewCollectionButton />
         </EmptyState>
       );
     } else {
@@ -129,7 +135,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
             }}
           />
         </h2>
-        {showCreateButton && <CreateButton />}
+        {showCreateButton && <NewCollectionButton />}
       </div>
       <ItemList>
         {isOwnCollectionPage && !canCreateMoreCollections && (

app/javascript/mastodon/locales/en.json

@@ -649,6 +649,7 @@
   "empty_column.collections": "{acct} has not created any collections yet.",
   "empty_column.collections.featured_in": "You have not been added to any collections yet.",
   "empty_column.collections.featured_in_undiscoverable": "In order for people to add you to collections, you need to allow featuring in discovery experiences from <link>Preferences > Privacy and reach</link>",
+  "empty_column.collections_self": "You have not created any collections yet.",
   "empty_column.community": "The local timeline is empty. Write something publicly to get the ball rolling!",
   "empty_column.direct": "You don't have any private mentions yet. When you send or receive one, it will show up here.",
   "empty_column.disabled_feed": "This feed has been disabled by your server administrators.",