Redesign: Show more server info in navigation when logged out (#40802)

app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.module.scss

@@ -1,5 +1,31 @@
 @use '@/styles/mastodon/mixins';
 
+.meta {
+  display: flex;
+  gap: var(--space-4);
+  flex-wrap: wrap;
+  padding-top: var(--space-4);
+
+  @include mixins.type-caption;
+
+  dd {
+    @include mixins.type-label;
+
+    padding-top: var(--space-1);
+  }
+}
+
+.adminLink {
+  --lockup-padding: 0;
+  --lockup-gap: var(--space-1);
+
+  font: inherit;
+
+  :any-link {
+    font-size: var(--fs-13);
+  }
+}
+
 .description {
   margin-bottom: var(--space-4);
 

app/javascript/mastodon/features/navigation_panel/redesign/logged_out_info.tsx

@@ -8,9 +8,15 @@ import { WarningIcon } from '@phosphor-icons/react';
 
 import { openModal } from '@/mastodon/actions/modal';
 import { fetchServer } from '@/mastodon/actions/server';
+import type { ApiInstanceJSON } from '@/mastodon/api_types/instance';
+import { Avatar } from '@/mastodon/components/avatar';
 import { Button } from '@/mastodon/components/button/redesign';
 import { Callout } from '@/mastodon/components/callout/redesign';
+import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
+import { LockupLink, LockupWrapper } from '@/mastodon/components/lockup';
+import { ShortNumber } from '@/mastodon/components/short_number';
 import { Skeleton } from '@/mastodon/components/skeleton';
+import { useAccount } from '@/mastodon/hooks/useAccount';
 import {
   disabledAccountId,
   domain,
@@ -55,7 +61,12 @@ export const LoggedOutInfo: React.FC = () => {
 
   return (
     <NavigationFooterLayout
-      description={<p>{serverItem?.description ?? ''}</p>}
+      description={
+        <>
+          <p>{serverItem?.description ?? ''}</p>
+          <ServerMeta serverItem={serverItem} />
+        </>
+      }
       isLoading={isLoading}
     >
       <Button
@@ -77,6 +88,61 @@ export const LoggedOutInfo: React.FC = () => {
   );
 };
 
+const ServerMeta: React.FC<{ serverItem: ApiInstanceJSON | undefined }> = ({
+  serverItem,
+}) => {
+  const adminId = serverItem?.contact.account?.id;
+  const adminAccount = useAccount(adminId);
+  const activeUserCount = serverItem?.usage.users.active_month;
+
+  if (!adminId && !activeUserCount) {
+    return null;
+  }
+
+  return (
+    <dl className={classes.meta}>
+      {adminId && adminAccount && (
+        <div>
+          <dt>
+            <FormattedMessage
+              id='server_banner.administered_by'
+              defaultMessage='Administered by:'
+            />
+          </dt>
+
+          <dd>
+            <LockupWrapper
+              icon={<Avatar account={adminAccount} size={20} />}
+              className={classes.adminLink}
+            >
+              <LockupLink
+                to={`/@${adminAccount.acct}`}
+                data-hover-card-account={adminId}
+                as='span' // changes lockup title element, not link
+              >
+                <DisplayNameSimple account={adminAccount} />
+              </LockupLink>
+            </LockupWrapper>
+          </dd>
+        </div>
+      )}
+      {activeUserCount && (
+        <div>
+          <dt>
+            <FormattedMessage
+              id='server_banner.active_users_title'
+              defaultMessage='Active users'
+            />
+          </dt>
+          <dd>
+            <ShortNumber value={activeUserCount} />
+          </dd>
+        </div>
+      )}
+    </dl>
+  );
+};
+
 export const DisabledAccountBanner: React.FC = () => {
   const disabledAccount = useAppSelector((state) =>
     disabledAccountId ? state.accounts.get(disabledAccountId) : undefined,

app/javascript/mastodon/locales/en.json

@@ -1373,6 +1373,7 @@
   "search_results.title": "Search for \"{q}\"",
   "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.active_users_title": "Active users",
   "server_banner.administered_by": "Administered by:",
   "server_banner.create_account": "Create an account",
   "server_banner.info": "Info",