diff --git a/app/javascript/flavours/glitch/features/collection_adder/index.tsx b/app/javascript/flavours/glitch/features/collection_adder/index.tsx
index 13672adc5a..0fa131579c 100644
--- a/app/javascript/flavours/glitch/features/collection_adder/index.tsx
+++ b/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 ? (
+ ) : collections.length === 0 ? (
+
+ }
+ message={
+
+ }
+ >
+
+
) : (
collections.map((item) => (
diff --git a/app/javascript/flavours/glitch/features/collections/overview/created_by_account.tsx b/app/javascript/flavours/glitch/features/collections/overview/created_by_account.tsx
index 8e72335d34..7ac5f89307 100644
--- a/app/javascript/flavours/glitch/features/collections/overview/created_by_account.tsx
+++ b/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 }> = ({
+ onClick,
+}) => (
+
@@ -100,7 +106,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
/>
}
>
-
+
);
} else {
@@ -132,7 +138,7 @@ export const CollectionsCreatedByAccount: React.FC = () => {
}}
/>
- {showCreateButton && }
+ {showCreateButton && }
{isOwnCollectionPage && !canCreateMoreCollections && (