Refactor account header banners (#38921)

app/javascript/mastodon/components/account_header/banners.tsx

@@ -0,0 +1,140 @@
+import { useCallback } from 'react';
+import type { FC, ReactElement, ReactNode } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import {
+  authorizeFollowRequest,
+  rejectFollowRequest,
+} from '@/mastodon/actions/accounts';
+import { useAccountVisibility } from '@/mastodon/hooks/useAccountVisibility';
+import { useRelationship } from '@/mastodon/hooks/useRelationship';
+import type { Account } from '@/mastodon/models/account';
+import { useAppDispatch, useAppSelector } from '@/mastodon/store';
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+
+import { AvatarOverlay } from '../avatar_overlay';
+import { Button } from '../button';
+import { DisplayName } from '../display_name';
+import { Icon } from '../icon';
+
+import classes from './styles.module.scss';
+
+export const AccountBanners: FC<{ account: Account }> = ({ account }) => {
+  const { suspended, hidden } = useAccountVisibility(account.id);
+  const relationship = useRelationship(account.id);
+
+  if (hidden) {
+    return null;
+  }
+
+  let banner: ReactNode = null;
+
+  if (account.memorial) {
+    banner = (
+      <MessageText>
+        <FormattedMessage
+          id='account.in_memoriam'
+          defaultMessage='In Memoriam.'
+        />
+      </MessageText>
+    );
+  }
+
+  if (account.moved) {
+    banner = <MovedNote account={account} targetAccountId={account.moved} />;
+  }
+
+  if (!suspended && relationship?.requested_by) {
+    banner = <FollowRequestNote account={account} />;
+  }
+
+  if (!banner) {
+    return null;
+  }
+
+  return <div className={classes.bannerWrapper}>{banner}</div>;
+};
+
+const FollowRequestNote: FC<{ account: Account }> = ({ account }) => {
+  const accountId = account.id;
+  const dispatch = useAppDispatch();
+  const handleAuthorize = useCallback(() => {
+    dispatch(authorizeFollowRequest(accountId));
+  }, [accountId, dispatch]);
+  const handleReject = useCallback(() => {
+    dispatch(rejectFollowRequest(accountId));
+  }, [accountId, dispatch]);
+
+  return (
+    <>
+      <MessageText>
+        <FormattedMessage
+          id='account.requested_follow'
+          defaultMessage='{name} has requested to follow you'
+          values={{ name: <DisplayName account={account} variant='simple' /> }}
+        />
+      </MessageText>
+
+      <div className={classes.bannerActions}>
+        <Button secondary onClick={handleAuthorize}>
+          <Icon id='check' icon={CheckIcon} />
+          <FormattedMessage
+            id='follow_request.authorize'
+            defaultMessage='Authorize'
+          />
+        </Button>
+
+        <Button secondary onClick={handleReject}>
+          <Icon id='times' icon={CloseIcon} />
+          <FormattedMessage
+            id='follow_request.reject'
+            defaultMessage='Reject'
+          />
+        </Button>
+      </div>
+    </>
+  );
+};
+
+const MovedNote: React.FC<{
+  account: Account;
+  targetAccountId: string;
+}> = ({ account: from, targetAccountId }) => {
+  const to = useAppSelector((state) => state.accounts.get(targetAccountId));
+
+  return (
+    <>
+      <MessageText>
+        <FormattedMessage
+          id='account.moved_to'
+          defaultMessage='{name} has indicated that their new account is now:'
+          values={{
+            name: <DisplayName account={from} variant='simple' />,
+          }}
+        />
+      </MessageText>
+
+      <div className={classes.bannerActions}>
+        <Link to={`/@${to?.acct}`} className={classes.bannerActionsDisplayName}>
+          <AvatarOverlay account={to} friend={from} />
+          <DisplayName account={to} />
+        </Link>
+
+        <Link to={`/@${to?.acct}`} className='button'>
+          <FormattedMessage
+            id='account.go_to_profile'
+            defaultMessage='Go to profile'
+          />
+        </Link>
+      </div>
+    </>
+  );
+};
+
+const MessageText: React.FC<{ children: ReactElement }> = ({ children }) => (
+  <div className={classes.bannerText}>{children}</div>
+);

app/javascript/mastodon/components/account_header/index.tsx

@@ -5,7 +5,6 @@ import classNames from 'classnames';
 import { Helmet } from '@unhead/react/helmet';
 
 import { openModal } from '@/mastodon/actions/modal';
-import FollowRequestNoteContainer from '@/mastodon/features/account/containers/follow_request_note_container';
 import { useLayout } from '@/mastodon/hooks/useLayout';
 import { useVisibility } from '@/mastodon/hooks/useVisibility';
 import {
@@ -22,10 +21,9 @@ import { Avatar } from '../avatar';
 import { AnimateEmojiProvider } from '../emoji/context';
 import { FamiliarFollowers } from '../familiar_followers';
 
+import { AccountBanners } from './banners';
 import { AccountButtons } from './buttons';
 import { AccountHeaderFields } from './fields';
-import { MemorialNote } from './memorial_note';
-import { MovedNote } from './moved_note';
 import { AccountName } from './name';
 import { AccountNote } from './note';
 import { AccountNumberFields } from './number_fields';
@@ -51,9 +49,6 @@ export const AccountHeader: React.FC<{
 }> = ({ accountId, hideTabs }) => {
   const dispatch = useAppDispatch();
   const account = useAppSelector((state) => state.accounts.get(accountId));
-  const relationship = useAppSelector((state) =>
-    state.relationships.get(accountId),
-  );
   const hidden = useAppSelector((state) => getAccountHidden(state, accountId));
 
   const handleOpenAvatar = useCallback(
@@ -98,18 +93,11 @@ export const AccountHeader: React.FC<{
 
   return (
     <div>
-      {!hidden && account.memorial && <MemorialNote />}
-      {!hidden && account.moved && (
-        <MovedNote accountId={account.id} targetAccountId={account.moved} />
-      )}
+      <AccountBanners account={account} />
 
       <AnimateEmojiProvider
         className={classNames(!!account.moved && classes.moved)}
       >
-        {!suspendedOrHidden && !account.moved && relationship?.requested_by && (
-          <FollowRequestNoteContainer account={account} />
-        )}
-
         <div className={classes.header}>
           {!suspendedOrHidden && (
             <img

app/javascript/mastodon/components/account_header/memorial_note.tsx

@@ -1,12 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-export const MemorialNote: React.FC = () => (
-  <div className='account-memorial-banner'>
-    <div className='account-memorial-banner__message'>
-      <FormattedMessage
-        id='account.in_memoriam'
-        defaultMessage='In Memoriam.'
-      />
-    </div>
-  </div>
-);

app/javascript/mastodon/components/account_header/moved_note.tsx

@@ -1,46 +0,0 @@
-import { FormattedMessage } from 'react-intl';
-
-import { Link } from 'react-router-dom';
-
-import { useAppSelector } from '@/mastodon/store';
-
-import { AvatarOverlay } from '../avatar_overlay';
-import { DisplayName } from '../display_name';
-
-export const MovedNote: React.FC<{
-  accountId: string;
-  targetAccountId: string;
-}> = ({ accountId, targetAccountId }) => {
-  const from = useAppSelector((state) => state.accounts.get(accountId));
-  const to = useAppSelector((state) => state.accounts.get(targetAccountId));
-
-  return (
-    <div className='moved-account-banner'>
-      <div className='moved-account-banner__message'>
-        <FormattedMessage
-          id='account.moved_to'
-          defaultMessage='{name} has indicated that their new account is now:'
-          values={{
-            name: <DisplayName account={from} variant='simple' />,
-          }}
-        />
-      </div>
-
-      <div className='moved-account-banner__action'>
-        <Link to={`/@${to?.acct}`} className='detailed-status__display-name'>
-          <div className='detailed-status__display-avatar'>
-            <AvatarOverlay account={to} friend={from} />
-          </div>
-          <DisplayName account={to} />
-        </Link>
-
-        <Link to={`/@${to?.acct}`} className='button'>
-          <FormattedMessage
-            id='account.go_to_profile'
-            defaultMessage='Go to profile'
-          />
-        </Link>
-      </div>
-    </div>
-  );
-};

app/javascript/mastodon/components/account_header/styles.module.scss

@@ -453,13 +453,24 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   border-bottom: 1px solid var(--color-border-primary);
 }
 
+// Banners
+
+.bannerWrapper,
 .bannerBase {
   box-sizing: border-box;
-  padding: 16px;
-  border-radius: 12px;
-  background: var(--color-bg-secondary);
   display: flex;
   flex-direction: column;
+}
+
+.bannerWrapper {
+  background: var(--color-bg-tertiary);
+  padding: 16px;
+  align-items: center;
+}
+
+.bannerBase {
+  border-radius: 12px;
+  background: var(--color-bg-secondary);
   gap: 12px;
   justify-content: center;
   align-items: flex-start;
@@ -475,6 +486,13 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
+.bannerText {
+  color: var(--color-text-secondary);
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+}
+
 .bannerTextAndActions {
   display: flex;
   flex-direction: column;
@@ -489,6 +507,19 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
+.bannerActions {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 15px;
+  width: 100%;
+  margin-top: 16px;
+
+  button {
+    width: 100%;
+  }
+}
+
 .bannerDisclaimer {
   a {
     color: inherit;
@@ -519,6 +550,32 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
   }
 }
 
+.bannerActionsDisplayName {
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 15px;
+  line-height: 22px;
+  overflow: hidden;
+  text-decoration: none;
+
+  &:hover strong {
+    text-decoration: underline;
+  }
+
+  strong,
+  span {
+    display: block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  strong {
+    color: var(--color-text-primary);
+  }
+}
+
 // Buttons
 
 .followButton {

app/javascript/mastodon/components/account_header/subscription_form.tsx

@@ -104,8 +104,6 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
         .then(() => {
           setSubmitting(false);
           setSubmitted(true);
-
-          return '';
         })
         .catch((err: unknown) => {
           setSubmitting(false);
@@ -133,12 +131,11 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
         className={classNames(classes.bannerBase, classes.bannerBaseCentered)}
       >
         <div className={classes.bannerTextAndActions}>
-          <h2>
-            <FormattedMessage
-              id='email_subscriptions.submitted.title'
-              defaultMessage='One more step'
-            />
-          </h2>
+          <FormattedMessage
+            id='email_subscriptions.submitted.title'
+            defaultMessage='One more step'
+            tagName='h2'
+          />
           <FormattedMessage
             id='email_subscriptions.submitted.lead'
             defaultMessage='Check your inbox for an email to finish signing up for email updates.'
@@ -151,15 +148,14 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
   return (
     <form onSubmit={handleSubmit} className={classes.bannerBase} noValidate>
       <div className={classes.bannerTextAndActions}>
-        <h2>
-          <FormattedMessage
-            id='email_subscriptions.form.title'
-            defaultMessage='Sign up for email updates from {name}'
-            values={{
-              name: <DisplayName account={account} variant='simple' />,
-            }}
-          />
-        </h2>
+        <FormattedMessage
+          id='email_subscriptions.form.title'
+          defaultMessage='Sign up for email updates from {name}'
+          tagName='h2'
+          values={{
+            name: <DisplayName account={account} variant='simple' />,
+          }}
+        />
       </div>
 
       <div className={classes.bannerInputButton}>