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

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(() => {
-    void dispatch(fetchLists());
-  }, [dispatch]);
+    if (signedIn) {
+      void dispatch(fetchLists());
+    }
+  }, [signedIn, dispatch]);
 
   const emptyMessage = (
     <>
@@ -112,14 +117,16 @@ const Lists: React.FC<{
         iconComponent={ListAltIcon}
         multiColumn={multiColumn}
         extraButton={
-          <Link
-            to='/lists/new'
-            className='column-header__button'
-            title={intl.formatMessage(messages.create)}
-            aria-label={intl.formatMessage(messages.create)}
-          >
-            <Icon id='plus' icon={AddIcon} />
-          </Link>
+          signedIn && (
+            <Link
+              to='/lists/new'
+              className='column-header__button'
+              title={intl.formatMessage(messages.create)}
+              aria-label={intl.formatMessage(messages.create)}
+            >
+              <Icon id='plus' icon={AddIcon} />
+            </Link>
+          )
         }
       />
 
@@ -128,9 +135,13 @@ const Lists: React.FC<{
         emptyMessage={emptyMessage}
         bindToDocument={!multiColumn}
       >
-        {lists.map((list) => (
-          <ListItem key={list.id} id={list.id} title={list.title} />
-        ))}
+        {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>