diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx index ba52a711898..a218ec1e43e 100644 --- a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx +++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx @@ -27,6 +27,7 @@ import { NavigationAccountCardAndMenu } from './account_card_and_menu'; import { NavigationFooterLinks } from './footer_links'; import { NavigationHeader } from './header'; import { ListSection } from './list_section'; +import { LoggedOutInfo } from './logged_out_info'; import { NavigationLink } from './navigation_link'; import classes from './styles.module.scss'; @@ -41,11 +42,14 @@ const messages = defineMessages({ function useCustomFeeds() { const dispatch = useAppDispatch(); + const { signedIn } = useIdentity(); const customFeeds = useAppSelector((state) => getOrderedLists(state)); useEffect(() => { - void dispatch(fetchLists()); - }, [dispatch]); + if (signedIn) { + void dispatch(fetchLists()); + } + }, [dispatch, signedIn]); return { customFeeds, @@ -54,13 +58,14 @@ function useCustomFeeds() { function useFollowedHashtags() { const dispatch = useAppDispatch(); + const { signedIn } = useIdentity(); const { tags, stale } = useAppSelector((state) => state.followedTags); useEffect(() => { - if (stale) { + if (stale && signedIn) { void dispatch(fetchFollowedHashtags()); } - }, [dispatch, stale]); + }, [dispatch, stale, signedIn]); return { followedHashtags: tags }; } @@ -236,6 +241,12 @@ export const RedesignNavigationPanel: React.FC<{ siteName?: string }> = ({ > )} + {!signedIn && ( + + )} {bottomSensor} ); diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss new file mode 100644 index 00000000000..5954538d100 --- /dev/null +++ b/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss @@ -0,0 +1,15 @@ +@use '@/styles/mastodon/mixins'; + +.description { + margin-bottom: var(--space-md); + + @include mixins.type-body-compact; + + color: var(--color-text-secondary); +} + +.buttons { + display: flex; + flex-direction: column; + gap: var(--space-xs); +} diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.tsx new file mode 100644 index 00000000000..289e5ac40b7 --- /dev/null +++ b/app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.tsx @@ -0,0 +1,50 @@ +import { useEffect } from 'react'; + +import { FormattedMessage } from 'react-intl'; + +import { fetchServer } from '@/mastodon/actions/server'; +import { Button } from '@/mastodon/components/button/redesign'; +import { Skeleton } from '@/mastodon/components/skeleton'; +import { useAppDispatch, useAppSelector } from '@/mastodon/store'; + +import classes from './logged_out_info.module.scss'; + +export const LoggedOutInfo: React.FC = () => { + const dispatch = useAppDispatch(); + const { item: serverItem, isLoading } = useAppSelector( + (state) => state.server.server, + ); + + useEffect(() => { + void dispatch(fetchServer()); + }, [dispatch]); + + return ( + <> +
+ {isLoading ? (
+ <>
+
+
+