Implement collection limit on frontend (#38786)

app/javascript/mastodon/features/collections/editor/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { Helmet } from 'react-helmet';
 import {
@@ -12,6 +12,9 @@ import {
   useLocation,
 } from 'react-router-dom';
 
+import { Callout } from '@/mastodon/components/callout';
+import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
+import { initialState } from '@/mastodon/initial_state';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
@@ -22,8 +25,11 @@ import {
 } from 'mastodon/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
+import { useAccountCollections } from '..';
+
 import { CollectionAccounts } from './accounts';
 import { CollectionDetails } from './details';
+import classes from './styles.module.scss';
 
 export const messages = defineMessages({
   create: {
@@ -61,11 +67,14 @@ function usePageTitle(id: string | null) {
   }
 }
 
+export const userCollectionLimit = initialState?.role?.collection_limit ?? 0;
+
 export const CollectionEditorPage: React.FC<{
   multiColumn?: boolean;
 }> = ({ multiColumn }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const accountId = useCurrentAccountId();
   const { id = null } = useParams<{ id?: string }>();
   const { path } = useRouteMatch();
   const collection = useAppSelector((state) =>
@@ -73,7 +82,18 @@ export const CollectionEditorPage: React.FC<{
   );
   const editorStateId = useAppSelector((state) => state.collections.editor.id);
   const isEditMode = !!id;
-  const isLoading = isEditMode && !collection;
+
+  // When creating a new collection, we load the current account's collections
+  // to determine if they're allowed to create more.
+  const { collections: collectionList, status: collectionListStatus } =
+    useAccountCollections(isEditMode ? null : accountId);
+
+  const isLoading =
+    (isEditMode && !collection) ||
+    (!isEditMode && collectionListStatus === 'loading');
+
+  const canCreateMoreCollections =
+    isEditMode || collectionList.length < userCollectionLimit;
 
   useEffect(() => {
     if (id) {
@@ -108,7 +128,7 @@ export const CollectionEditorPage: React.FC<{
       <div className='scrollable'>
         {isLoading ? (
           <LoadingIndicator />
-        ) : (
+        ) : canCreateMoreCollections ? (
           <Switch>
             <Route
               exact
@@ -123,6 +143,8 @@ export const CollectionEditorPage: React.FC<{
               render={() => <CollectionDetails />}
             />
           </Switch>
+        ) : (
+          <MaxCollectionsCallout />
         )}
       </div>
 
@@ -133,3 +155,21 @@ export const CollectionEditorPage: React.FC<{
     </Column>
   );
 };
+
+export const MaxCollectionsCallout: React.FC = () => (
+  <Callout
+    className={classes.maxCollectionsError}
+    title={
+      <FormattedMessage
+        id='collections.maximum_collection_count_reached'
+        defaultMessage='You have created the maximum number of collections'
+      />
+    }
+  >
+    <FormattedMessage
+      id='collections.maximum_collection_count_description'
+      defaultMessage='Your server allows creation of up to {count} collections.'
+      values={{ count: userCollectionLimit }}
+    />
+  </Callout>
+);

app/javascript/mastodon/features/collections/editor/styles.module.scss

@@ -77,3 +77,7 @@
 .suggestionGroup {
   padding-bottom: 4px;
 }
+
+.maxCollectionsError {
+  margin: 16px;
+}