Redesign: Fix column headers on profile subpages (#40704)

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

@@ -11,6 +11,8 @@ import { AccountHeader } from '@/mastodon/components/account_header';
 import { AccountListItem } from '@/mastodon/components/account_list_item';
 import { Column } from '@/mastodon/components/column';
 import { ColumnBackButton } from '@/mastodon/components/column/back_button';
+import { ColumnHeader } from '@/mastodon/components/column_header';
+import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import { RemoteHint } from '@/mastodon/components/remote_hint';
 import {
@@ -26,6 +28,7 @@ import { useAccountId } from '@/mastodon/hooks/useAccountId';
 import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
 import { me } from '@/mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 import AddIcon from '@/material-icons/400-24px/add.svg?react';
 
 import { CollectionListItem } from '../collections/components/collection_list_item';
@@ -129,7 +132,14 @@ const AccountFeatured: React.FC<{ multiColumn: boolean }> = ({
 
   return (
     <Column>
-      <ColumnBackButton />
+      {isRedesignEnabled() ? (
+        <ColumnHeader
+          withBackButton
+          title={<DisplayNameSimple account={account} />}
+        />
+      ) : (
+        <ColumnBackButton />
+      )}
 
       <Scrollable>
         {accountId && (
@@ -218,9 +228,17 @@ const AccountFeaturedWrapper = ({
   children,
   accountId,
 }: React.PropsWithChildren<{ accountId?: string }>) => {
+  const account = useAccount(accountId);
   return (
     <Column>
-      <ColumnBackButton />
+      {isRedesignEnabled() ? (
+        <ColumnHeader
+          withBackButton
+          title={<DisplayNameSimple account={account} />}
+        />
+      ) : (
+        <ColumnBackButton />
+      )}
       <div className='scrollable scrollable--flex'>
         {accountId && <AccountHeader accountId={accountId} />}
         {children}

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

@@ -9,10 +9,13 @@ import { expandAccountMediaTimeline } from '@/mastodon/actions/timelines';
 import { AccountHeader } from '@/mastodon/components/account_header';
 import { Column } from '@/mastodon/components/column';
 import { ColumnBackButton } from '@/mastodon/components/column/back_button';
+import { ColumnHeader } from '@/mastodon/components/column_header';
+import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import { LimitedAccountHint } from '@/mastodon/components/limited_account_hint';
 import { RemoteHint } from '@/mastodon/components/remote_hint';
 import ScrollableList from '@/mastodon/components/scrollable_list';
 import { BundleColumnError } from '@/mastodon/features/ui/components/bundle_column_error';
+import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountId } from '@/mastodon/hooks/useAccountId';
 import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
 import type { MediaAttachment } from '@/mastodon/models/media_attachment';
@@ -21,6 +24,7 @@ import {
   useAppDispatch,
   createAppSelector,
 } from '@/mastodon/store';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 
 import { MediaItem } from './components/media_item';
 
@@ -96,6 +100,7 @@ export const AccountGallery: React.FC<{
 }> = ({ multiColumn }) => {
   const dispatch = useAppDispatch();
   const accountId = useAccountId();
+  const account = useAccount(accountId);
   const {
     isLoading,
     items: attachments,
@@ -211,7 +216,14 @@ export const AccountGallery: React.FC<{
 
   return (
     <Column>
-      <ColumnBackButton />
+      {isRedesignEnabled() ? (
+        <ColumnHeader
+          withBackButton
+          title={<DisplayNameSimple account={account} />}
+        />
+      ) : (
+        <ColumnBackButton />
+      )}
 
       <ScrollableList
         className='account-gallery__container'

app/javascript/mastodon/features/followers/components/header.tsx

@@ -9,6 +9,7 @@ import { Callout } from '@/mastodon/components/callout';
 import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useCurrentAccountId } from '@/mastodon/hooks/useAccountId';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 
 import classes from '../styles.module.scss';
 
@@ -22,11 +23,13 @@ export const AccountListHeader: FC<{
   const currentId = useCurrentAccountId();
   return (
     <>
-      <h1 className={classes.title}>
-        {intl.formatMessage(titleText, {
-          name: <DisplayNameSimple account={account} />,
-        })}
-      </h1>
+      {!isRedesignEnabled() && (
+        <h1 className={classes.title}>
+          {intl.formatMessage(titleText, {
+            name: <DisplayNameSimple account={account} />,
+          })}
+        </h1>
+      )}
       {!!total && (
         <h2 className={classes.subtitle}>
           <FormattedMessage

app/javascript/mastodon/features/followers/components/list.tsx

@@ -4,12 +4,14 @@ import type { FC, ReactNode } from 'react';
 import { AccountListItem } from '@/mastodon/components/account_list_item';
 import { Column } from '@/mastodon/components/column';
 import { ColumnBackButton } from '@/mastodon/components/column/back_button';
+import { ColumnHeader } from '@/mastodon/components/column_header';
 import { LoadingIndicator } from '@/mastodon/components/loading_indicator';
 import ScrollableList from '@/mastodon/components/scrollable_list';
 import { BundleColumnError } from '@/mastodon/features/ui/components/bundle_column_error';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
 import { useLayout } from '@/mastodon/hooks/useLayout';
+import { isRedesignEnabled } from '@/mastodon/utils/environment';
 
 import { RemoteHint } from './remote';
 
@@ -23,6 +25,7 @@ interface AccountListProps {
   accountId?: string | null;
   append?: ReactNode;
   emptyMessage: ReactNode;
+  title: ReactNode;
   header?: ReactNode;
   footer?: ReactNode;
   list?: AccountList | null;
@@ -36,6 +39,7 @@ export const AccountList: FC<AccountListProps> = ({
   accountId,
   append,
   emptyMessage,
+  title,
   header,
   footer,
   list,
@@ -97,7 +101,11 @@ export const AccountList: FC<AccountListProps> = ({
 
   return (
     <Column>
-      <ColumnBackButton />
+      {isRedesignEnabled() ? (
+        <ColumnHeader withBackButton title={title} />
+      ) : (
+        <ColumnBackButton />
+      )}
 
       <ScrollableList
         scrollKey={scrollKey}

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

@@ -6,6 +6,7 @@ import { defineMessage, FormattedMessage } from 'react-intl';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { expandFollowers, fetchFollowers } from '@/mastodon/actions/accounts';
+import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountId } from '@/mastodon/hooks/useAccountId';
 import { useRelationship } from '@/mastodon/hooks/useRelationship';
@@ -71,6 +72,12 @@ const Followers: FC = () => {
 
   return (
     <AccountList
+      title={
+        <FormattedMessage
+          {...titleText}
+          values={{ name: <DisplayNameSimple account={account} /> }}
+        />
+      }
       accountId={accountId}
       header={
         accountId && (

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

@@ -6,6 +6,7 @@ import { defineMessage, FormattedMessage } from 'react-intl';
 import { useDebouncedCallback } from 'use-debounce';
 
 import { expandFollowing, fetchFollowing } from '@/mastodon/actions/accounts';
+import { DisplayNameSimple } from '@/mastodon/components/display_name/simple';
 import { useAccount } from '@/mastodon/hooks/useAccount';
 import { useAccountId } from '@/mastodon/hooks/useAccountId';
 import { useRelationship } from '@/mastodon/hooks/useRelationship';
@@ -73,6 +74,12 @@ const Followers: FC = () => {
   const domain = account?.acct.split('@')[1];
   return (
     <AccountList
+      title={
+        <FormattedMessage
+          {...titleText}
+          values={{ name: <DisplayNameSimple account={account} /> }}
+        />
+      }
       accountId={accountId}
       append={domain && <RemoteHint domain={domain} url={account.url} />}
       emptyMessage={<EmptyMessage account={account} />}