Prevent logged out users from accessing collection & list creation routes (#39282)

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

@@ -29,7 +29,7 @@ import { useAppDispatch, useAppSelector } from '@/mastodon/store';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 
 import { CollectionListItem } from '../collections/components/collection_list_item';
-import { useCollectionsCreatedBy } from '../collections/overview/created_by_you';
+import { useCollectionsCreatedBy } from '../collections/overview/created_by_account';
 
 import { EmptyMessage } from './components/empty_message';
 import { Subheading, SubheadingLink } from './components/subheading';

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

@@ -15,7 +15,7 @@ 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_you';
+import { useCollectionsCreatedBy } from '../collections/overview/created_by_account';
 
 import { CollectionToggle } from './collection_toggle';
 

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

@@ -13,20 +13,21 @@ import {
 
 import { Helmet } from '@unhead/react/helmet';
 
-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 { Callout } from 'mastodon/components/callout';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
+import { useIdentity } from 'mastodon/identity_context';
+import { initialState } from 'mastodon/initial_state';
 import {
   collectionEditorActions,
   fetchCollection,
 } from 'mastodon/reducers/slices/collections';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
-import { useCollectionsCreatedBy } from '../overview/created_by_you';
+import { useCollectionsCreatedBy } from '../overview/created_by_account';
 
 import { CollectionAccounts } from './accounts';
 import { CollectionDetails } from './details';
@@ -75,7 +76,7 @@ export const CollectionEditorPage: React.FC<{
 }> = ({ multiColumn }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
-  const accountId = useCurrentAccountId();
+  const { accountId, signedIn } = useIdentity();
   const { id = null } = useParams<{ id?: string }>();
   const { path } = useRouteMatch();
   const collection = useAppSelector((state) =>
@@ -94,13 +95,13 @@ export const CollectionEditorPage: React.FC<{
     (!isEditMode && collectionListStatus === 'loading');
 
   const canCreateMoreCollections =
-    isEditMode || collectionList.length < userCollectionLimit;
+    signedIn && (isEditMode || collectionList.length < userCollectionLimit);
 
   useEffect(() => {
-    if (id) {
+    if (id && signedIn) {
       void dispatch(fetchCollection({ collectionId: id }));
     }
-  }, [dispatch, id]);
+  }, [dispatch, id, signedIn]);
 
   useEffect(() => {
     if (id !== editorStateId) {
@@ -129,6 +130,8 @@ export const CollectionEditorPage: React.FC<{
       <div className='scrollable'>
         {isLoading ? (
           <LoadingIndicator />
+        ) : !signedIn ? (
+          <NotSignedInIndicator />
         ) : canCreateMoreCollections ? (
           <Switch>
             <Route

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

@@ -4,15 +4,15 @@ import { Route, Switch, useRouteMatch } from 'react-router-dom';
 
 import { Helmet } from '@unhead/react/helmet';
 
-import { TabLink, TabList } from '@/mastodon/components/tab_list';
 import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { DisplayNameSimple } from 'mastodon/components/display_name/simple';
 import { Scrollable } from 'mastodon/components/scrollable_list/components';
+import { TabLink, TabList } from 'mastodon/components/tab_list';
 import { useAccount } from 'mastodon/hooks/useAccount';
 import { useAccountId, useCurrentAccountId } from 'mastodon/hooks/useAccountId';
 
-import { CollectionsCreatedByYou } from './overview/created_by_you';
+import { CollectionsCreatedByAccount } from './overview/created_by_account';
 import { CollectionsFeaturingYou } from './overview/featuring_you';
 import classes from './styles.module.scss';
 
@@ -89,7 +89,7 @@ export const Collections: React.FC<{
           </TabList>
         </header>
         <Switch>
-          <Route exact path={path} component={CollectionsCreatedByYou} />
+          <Route exact path={path} component={CollectionsCreatedByAccount} />
           <Route
             exact
             path={`${path}/featuring-you`}

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

@@ -5,10 +5,12 @@ import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
 
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
+import { DisplayName } from 'mastodon/components/display_name';
 import { EmptyState } from 'mastodon/components/empty_state';
 import { Icon } from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { ItemList } from 'mastodon/components/scrollable_list/components';
+import { useAccount } from 'mastodon/hooks/useAccount';
 import { useAccountId, useCurrentAccountId } from 'mastodon/hooks/useAccountId';
 import {
   fetchCollectionsCreatedByAccount,
@@ -58,9 +60,10 @@ export function useCollectionsCreatedBy(accountId: string | null | undefined) {
   );
 }
 
-export const CollectionsCreatedByYou: React.FC = () => {
+export const CollectionsCreatedByAccount: React.FC = () => {
   const me = useCurrentAccountId();
   const accountId = useAccountId();
+  const account = useAccount(accountId);
 
   const { collections, status } = useCollectionsCreatedBy(accountId);
 
@@ -78,6 +81,7 @@ export const CollectionsCreatedByYou: React.FC = () => {
   }
 
   if (collections.length === 0) {
+    if (isOwnCollectionPage) {
       return (
         <EmptyState
           title={
@@ -96,6 +100,21 @@ export const CollectionsCreatedByYou: React.FC = () => {
           <CreateButton />
         </EmptyState>
       );
+    } else {
+      return (
+        <EmptyState
+          title={
+            <FormattedMessage
+              id='empty_column.collections'
+              defaultMessage='{acct} has not created any collections yet.'
+              values={{
+                acct: <DisplayName variant='simple' account={account} />,
+              }}
+            />
+          }
+        />
+      );
+    }
   }
 
   return (
@@ -113,7 +132,7 @@ export const CollectionsCreatedByYou: React.FC = () => {
         {showCreateButton && <CreateButton />}
       </div>
       <ItemList>
-        {!canCreateMoreCollections && (
+        {isOwnCollectionPage && !canCreateMoreCollections && (
           <MaxCollectionsCallout className={classes.maxCollectionsError} />
         )}
         {collections.map((item, index) => (

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

@@ -16,7 +16,7 @@ import { useAppSelector, useAppDispatch } from 'mastodon/store';
 import { CollectionListItem } from '../components/collection_list_item';
 import classes from '../styles.module.scss';
 
-import { CollectionListError } from './created_by_you';
+import { CollectionListError } from './created_by_account';
 
 function useCollectionsFeaturing(accountId: string | null | undefined) {
   const dispatch = useAppDispatch();

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

@@ -6,6 +6,8 @@ import { Link } from 'react-router-dom';
 
 import { Helmet } from '@unhead/react/helmet';
 
+import { NotSignedInIndicator } from '@/mastodon/components/not_signed_in_indicator';
+import { useIdentity } from '@/mastodon/identity_context';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
@@ -78,10 +80,13 @@ const Lists: React.FC<{
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const lists = useAppSelector((state) => getOrderedLists(state));
+  const { signedIn } = useIdentity();
 
   useEffect(() => {
+    if (signedIn) {
       void dispatch(fetchLists());
-  }, [dispatch]);
+    }
+  }, [signedIn, dispatch]);
 
   const emptyMessage = (
     <>
@@ -112,6 +117,7 @@ const Lists: React.FC<{
         iconComponent={ListAltIcon}
         multiColumn={multiColumn}
         extraButton={
+          signedIn && (
             <Link
               to='/lists/new'
               className='column-header__button'
@@ -120,6 +126,7 @@ const Lists: React.FC<{
             >
               <Icon id='plus' icon={AddIcon} />
             </Link>
+          )
         }
       />
 
@@ -128,9 +135,13 @@ const Lists: React.FC<{
         emptyMessage={emptyMessage}
         bindToDocument={!multiColumn}
       >
-        {lists.map((list) => (
+        {signedIn ? (
+          lists.map((list) => (
             <ListItem key={list.id} id={list.id} title={list.title} />
-        ))}
+          ))
+        ) : (
+          <NotSignedInIndicator />
+        )}
       </ScrollableList>
 
       <Helmet>

app/javascript/mastodon/features/lists/new.tsx

@@ -8,6 +8,8 @@ import { isFulfilled } from '@reduxjs/toolkit';
 
 import { Helmet } from '@unhead/react/helmet';
 
+import { NotSignedInIndicator } from '@/mastodon/components/not_signed_in_indicator';
+import { useIdentity } from '@/mastodon/identity_context';
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import { fetchList } from 'mastodon/actions/lists';
@@ -250,16 +252,17 @@ const NewListWrapper: React.FC<{
 }> = ({ multiColumn }) => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const { signedIn } = useIdentity();
   const { id } = useParams<{ id?: string }>();
   const list = useAppSelector((state) =>
     id ? state.lists.get(id) : undefined,
   );
 
   useEffect(() => {
-    if (id) {
+    if (signedIn && id) {
       dispatch(fetchList(id));
     }
-  }, [dispatch, id]);
+  }, [dispatch, signedIn, id]);
 
   const isLoading = id && !list;
 
@@ -277,7 +280,13 @@ const NewListWrapper: React.FC<{
       />
 
       <div className='scrollable'>
-        {isLoading ? <LoadingIndicator /> : <NewList list={list} />}
+        {!signedIn ? (
+          <NotSignedInIndicator />
+        ) : isLoading ? (
+          <LoadingIndicator />
+        ) : (
+          <NewList list={list} />
+        )}
       </div>
 
       <Helmet>

app/javascript/mastodon/locales/en.json

@@ -646,6 +646,7 @@
   "empty_column.account_unavailable": "Profile unavailable",
   "empty_column.blocks": "You haven't blocked any users yet.",
   "empty_column.bookmarked_statuses": "You don't have any bookmarked posts yet. When you bookmark one, it will show up here.",
+  "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.community": "The local timeline is empty. Write something publicly to get the ball rolling!",