Change onboarding flow in web UI (#32998)

app/javascript/mastodon/components/account.jsx

@@ -10,6 +10,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import { EmptyAccount } from 'mastodon/components/empty_account';
+import { FollowButton } from 'mastodon/components/follow_button';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
 
@@ -23,9 +24,6 @@ import { DisplayName } from './display_name';
 import { RelativeTimestamp } from './relative_timestamp';
 
 const messages = defineMessages({
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
   unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
   unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
   mute_notifications: { id: 'account.mute_notifications_short', defaultMessage: 'Mute notifications' },
@@ -35,13 +33,9 @@ const messages = defineMessages({
   more: { id: 'status.more', defaultMessage: 'More' },
 });
 
-const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifications, hidden, minimal, defaultAction, withBio }) => {
+const Account = ({ size = 46, account, onBlock, onMute, onMuteNotifications, hidden, minimal, defaultAction, withBio }) => {
   const intl = useIntl();
 
-  const handleFollow = useCallback(() => {
-    onFollow(account);
-  }, [onFollow, account]);
-
   const handleBlock = useCallback(() => {
     onBlock(account);
   }, [onBlock, account]);
@@ -74,13 +68,12 @@ const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifica
   let buttons;
 
   if (account.get('id') !== me && account.get('relationship', null) !== null) {
-    const following = account.getIn(['relationship', 'following']);
     const requested = account.getIn(['relationship', 'requested']);
     const blocking  = account.getIn(['relationship', 'blocking']);
     const muting  = account.getIn(['relationship', 'muting']);
 
     if (requested) {
-      buttons = <Button text={intl.formatMessage(messages.cancel_follow_request)} onClick={handleFollow} />;
+      buttons = <FollowButton accountId={account.get('id')} />;
     } else if (blocking) {
       buttons = <Button text={intl.formatMessage(messages.unblock)} onClick={handleBlock} />;
     } else if (muting) {
@@ -109,9 +102,11 @@ const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifica
       buttons = <Button text={intl.formatMessage(messages.mute)} onClick={handleMute} />;
     } else if (defaultAction === 'block') {
       buttons = <Button text={intl.formatMessage(messages.block)} onClick={handleBlock} />;
-    } else if (!account.get('suspended') && !account.get('moved') || following) {
-      buttons = <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} onClick={handleFollow} />;
+    } else {
+      buttons = <FollowButton accountId={account.get('id')} />;
     }
+  } else {
+    buttons = <FollowButton accountId={account.get('id')} />;
   }
 
   let muteTimeRemaining;
@@ -168,7 +163,6 @@ const Account = ({ size = 46, account, onFollow, onBlock, onMute, onMuteNotifica
 Account.propTypes = {
   size: PropTypes.number,
   account: ImmutablePropTypes.record,
-  onFollow: PropTypes.func,
   onBlock: PropTypes.func,
   onMute: PropTypes.func,
   onMuteNotifications: PropTypes.func,

app/javascript/mastodon/components/column_back_button.tsx

@@ -24,7 +24,7 @@ function useHandleClick(onClick?: OnClickCallback) {
   }, [history, onClick]);
 }
 
-export const ColumnBackButton: React.FC<{ onClick: OnClickCallback }> = ({
+export const ColumnBackButton: React.FC<{ onClick?: OnClickCallback }> = ({
   onClick,
 }) => {
   const handleClick = useHandleClick(onClick);

app/javascript/mastodon/components/column_search_header.tsx

@@ -0,0 +1,67 @@
+import { useCallback, useState, useEffect, useRef } from 'react';
+
+import { FormattedMessage } from 'react-intl';
+
+export const ColumnSearchHeader: React.FC<{
+  onBack: () => void;
+  onSubmit: (value: string) => void;
+  onActivate: () => void;
+  placeholder: string;
+  active: boolean;
+}> = ({ onBack, onActivate, onSubmit, placeholder, active }) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState('');
+
+  useEffect(() => {
+    if (!active) {
+      setValue('');
+    }
+  }, [active]);
+
+  const handleChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(value);
+      onSubmit(value);
+    },
+    [setValue, onSubmit],
+  );
+
+  const handleKeyUp = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Escape') {
+        e.preventDefault();
+        onBack();
+        inputRef.current?.blur();
+      }
+    },
+    [onBack],
+  );
+
+  const handleFocus = useCallback(() => {
+    onActivate();
+  }, [onActivate]);
+
+  const handleSubmit = useCallback(() => {
+    onSubmit(value);
+  }, [onSubmit, value]);
+
+  return (
+    <form className='column-search-header' onSubmit={handleSubmit}>
+      <input
+        ref={inputRef}
+        type='search'
+        value={value}
+        onChange={handleChange}
+        onKeyUp={handleKeyUp}
+        placeholder={placeholder}
+        onFocus={handleFocus}
+      />
+
+      {active && (
+        <button type='button' className='link-button' onClick={onBack}>
+          <FormattedMessage id='column_search.cancel' defaultMessage='Cancel' />
+        </button>
+      )}
+    </form>
+  );
+};

app/javascript/mastodon/components/follow_button.tsx

@@ -99,7 +99,12 @@ export const FollowButton: React.FC<{
   return (
     <Button
       onClick={handleClick}
-      disabled={relationship?.blocked_by || relationship?.blocking}
+      disabled={
+        relationship?.blocked_by ||
+        relationship?.blocking ||
+        (!(relationship?.following || relationship?.requested) &&
+          (account?.suspended || !!account?.moved))
+      }
       secondary={following}
       className={following ? 'button--destructive' : undefined}
     >