Redesign: Add logged-out state for navigation (#40288)

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 }> = ({
           </footer>
         </>
       )}
+      {!signedIn && (
+        <footer className={classes.footer} data-stuck={!isScrolledToBottom}>
+          <LoggedOutInfo />
+          <NavigationFooterLinks siteName={siteName} />
+        </footer>
+      )}
       {bottomSensor}
     </nav>
   );

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);
+}

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 (
+    <>
+      <p className={classes.description}>
+        {isLoading ? (
+          <>
+            <Skeleton width='100%' />
+            <br />
+            <Skeleton width='100%' />
+            <br />
+            <Skeleton width='70%' />
+          </>
+        ) : (
+          serverItem?.description
+        )}
+      </p>
+      <div className={classes.buttons}>
+        <Button as='a' href='/auth/sign_up' variant='solid'>
+          <FormattedMessage
+            id='server_banner.create_account'
+            defaultMessage='Create an account'
+          />
+        </Button>
+        <Button as='a' href='/auth/sign_in'>
+          <FormattedMessage id='server_banner.log_in' defaultMessage='Log in' />
+        </Button>
+      </div>
+    </>
+  );
+};

app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss

@@ -41,6 +41,7 @@
 
 .main {
   box-sizing: border-box;
+  grid-column: 2;
   display: flex;
   flex-direction: column;
   flex: 0 1 auto;

app/javascript/mastodon/locales/en.json

@@ -1288,7 +1288,9 @@
   "server_banner.about_active_users": "People using this server during the last 30 days (Monthly Active Users)",
   "server_banner.active_users": "active users",
   "server_banner.administered_by": "Administered by:",
+  "server_banner.create_account": "Create an account",
   "server_banner.is_one_of_many": "{domain} is one of the many independent Mastodon servers you can use to participate in the fediverse.",
+  "server_banner.log_in": "Log in",
   "server_banner.more_about_this_server": "More about this server",
   "server_banner.server_stats": "Server stats:",
   "sign_in_banner.create_account": "Create account",