[Glitch] Add empty state to CollectionAdder component

Port 5098b8ccc9d95a866ef109e32b6cc5de069f12b9 to glitch-soc

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

app/javascript/flavours/glitch/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 '@/flavours/glitch/api_types/collections';
+import { EmptyState } from '@/flavours/glitch/components/empty_state';
 import { LoadingIndicator } from '@/flavours/glitch/components/loading_indicator';
 import { NavigationFocusTarget } from '@/flavours/glitch/components/navigation_focus_target';
 import { useCurrentAccountId } from '@/flavours/glitch/hooks/useAccountId';
@@ -16,7 +17,10 @@ import { IconButton } from 'flavours/glitch/components/icon_button';
 import { useAppDispatch, useAppSelector } from 'flavours/glitch/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/flavours/glitch/features/collections/overview/created_by_account.tsx

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