Merge commit '877090518682b6c77ba9bdfa0231afd56daec44d' into glitch-soc/merge-upstream

Conflicts:
- `app/models/concerns/user/has_settings.rb`:
  Not a real conflict, upstream added a setting textually close to a glitch-soc one.
  Added upstream's new setting.
- `app/views/settings/preferences/appearance/show.html.haml`:
  Not a real conflict, upstream added a setting textually close to a glitch-soc one.
  Added upstream's new setting.
- `config/routes.rb`:
  Upstream moved web app routes to `config/routes/web_app.rb`, while glitch-soc had
  an extra route.
  Moved the extra route to `config/routes/web_app.rb`.
- `spec/controllers/settings/preferences/appearance_controller_spec.rb`:
  This spec got converted to a system spec upstream.
  However, the theme setting works differently in glitch-soc, so the spec had been
  changed.
  Changed the corresponding system spec as well.

app/javascript/mastodon/features/about/index.jsx

@@ -13,12 +13,12 @@ import { connect } from 'react-redux';
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import ExpandMoreIcon from '@/material-icons/400-24px/expand_more.svg?react';
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks  } from 'mastodon/actions/server';
+import { Account } from 'mastodon/components/account';
 import Column from 'mastodon/components/column';
 import { Icon  }  from 'mastodon/components/icon';
 import { ServerHeroImage } from 'mastodon/components/server_hero_image';
 import { Skeleton } from 'mastodon/components/skeleton';
-import Account from 'mastodon/containers/account_container';
-import LinkFooter from 'mastodon/features/ui/components/link_footer';
+import { LinkFooter} from 'mastodon/features/ui/components/link_footer';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
@@ -123,7 +123,7 @@ class About extends PureComponent {
           <div className='about__header'>
             <ServerHeroImage blurhash={server.getIn(['thumbnail', 'blurhash'])} src={server.getIn(['thumbnail', 'url'])} srcSet={server.getIn(['thumbnail', 'versions'])?.map((value, key) => `${value} ${key.replace('@', '')}`).join(', ')} className='about__header__hero' />
             <h1>{isLoading ? <Skeleton width='10ch' /> : server.get('domain')}</h1>
-            <p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank'>Mastodon</a> }} /></p>
+            <p><FormattedMessage id='about.powered_by' defaultMessage='Decentralized social media powered by {mastodon}' values={{ mastodon: <a href='https://joinmastodon.org' className='about__mail' target='_blank' rel='noopener'>Mastodon</a> }} /></p>
           </div>
 
           <div className='about__meta'>

app/javascript/mastodon/features/account/components/header.jsx

@@ -6,6 +6,7 @@ import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 import { NavLink, withRouter } from 'react-router-dom';
 
+import { isFulfilled, isRejected } from '@reduxjs/toolkit';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
@@ -215,8 +216,20 @@ class Header extends ImmutablePureComponent {
 
       const link = e.currentTarget;
 
-      onOpenURL(link.href, history, () => {
-        window.location = link.href;
+      onOpenURL(link.href).then((result) => {
+        if (isFulfilled(result)) {
+          if (result.payload.accounts[0]) {
+            history.push(`/@${result.payload.accounts[0].acct}`);
+          } else if (result.payload.statuses[0]) {
+            history.push(`/@${result.payload.statuses[0].account.acct}/${result.payload.statuses[0].id}`);
+          } else {
+            window.location = link.href;
+          }
+        } else if (isRejected(result)) {
+          window.location = link.href;
+        }
+      }).catch(() => {
+        // Nothing
       });
     }
   };
@@ -421,7 +434,7 @@ class Header extends ImmutablePureComponent {
 
         <div className='account__header__bar'>
           <div className='account__header__tabs'>
-            <a className='avatar' href={account.get('avatar')} rel='noopener noreferrer' target='_blank' onClick={this.handleAvatarClick}>
+            <a className='avatar' href={account.get('avatar')} rel='noopener' target='_blank' onClick={this.handleAvatarClick}>
               <Avatar account={suspended || hidden ? undefined : account} size={90} />
             </a>
 

app/javascript/mastodon/features/account_timeline/containers/header_container.jsx

@@ -144,8 +144,8 @@ const mapDispatchToProps = (dispatch) => ({
     }));
   },
 
-  onOpenURL (url, routerHistory, onFailure) {
-    dispatch(openURL(url, routerHistory, onFailure));
+  onOpenURL (url) {
+    return dispatch(openURL({ url }));
   },
 
 });

app/javascript/mastodon/features/annual_report/percentile.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-no-useless-fragment */
 import { FormattedMessage, FormattedNumber } from 'react-intl';
 
+import { domain } from 'mastodon/initial_state';
 import type { Percentiles } from 'mastodon/models/annual_report';
 
 export const Percentile: React.FC<{
@@ -12,7 +13,7 @@ export const Percentile: React.FC<{
     <div className='annual-report__bento__box annual-report__summary__percentile'>
       <FormattedMessage
         id='annual_report.summary.percentile.text'
-        defaultMessage='<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of Mastodon users.</bottomLabel>'
+        defaultMessage='<topLabel>That puts you in the top</topLabel><percentage></percentage><bottomLabel>of {domain} users.</bottomLabel>'
         values={{
           topLabel: (str) => (
             <div className='annual-report__summary__percentile__label'>
@@ -44,6 +45,8 @@ export const Percentile: React.FC<{
               )}
             </div>
           ),
+
+          domain,
         }}
       >
         {(message) => <>{message}</>}

app/javascript/mastodon/features/blocks/index.jsx

@@ -9,11 +9,11 @@ import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
 import BlockIcon from '@/material-icons/400-24px/block-fill.svg?react';
+import { Account } from 'mastodon/components/account';
 
 import { fetchBlocks, expandBlocks } from '../../actions/blocks';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
-import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({
@@ -70,7 +70,7 @@ class Blocks extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {accountIds.map(id =>
-            <AccountContainer key={id} id={id} defaultAction='block' />,
+            <Account key={id} id={id} defaultAction='block' />,
           )}
         </ScrollableList>
       </Column>

app/javascript/mastodon/features/compose/components/navigation_bar.jsx

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import { cancelReplyCompose } from 'mastodon/actions/compose';
-import Account from 'mastodon/components/account';
+import { Account } from 'mastodon/components/account';
 import { IconButton } from 'mastodon/components/icon_button';
 import { me } from 'mastodon/initial_state';
 
@@ -20,7 +20,6 @@ const messages = defineMessages({
 export const NavigationBar = () => {
   const dispatch = useDispatch();
   const intl = useIntl();
-  const account = useSelector(state => state.getIn(['accounts', me]));
   const isReplying = useSelector(state => !!state.getIn(['compose', 'in_reply_to']));
 
   const handleCancelClick = useCallback(() => {
@@ -29,7 +28,7 @@ export const NavigationBar = () => {
 
   return (
     <div className='navigation-bar'>
-      <Account account={account} minimal />
+      <Account id={me} minimal />
       {isReplying ? <IconButton title={intl.formatMessage(messages.cancel)} iconComponent={CloseIcon} onClick={handleCancelClick} /> : <ActionBar />}
     </div>
   );

app/javascript/mastodon/features/compose/components/search.jsx

@@ -1,402 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { defineMessages, injectIntl, FormattedMessage, FormattedList } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import CancelIcon from '@/material-icons/400-24px/cancel-fill.svg?react';
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import SearchIcon from '@/material-icons/400-24px/search.svg?react';
-import { Icon }  from 'mastodon/components/icon';
-import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { domain, searchEnabled } from 'mastodon/initial_state';
-import { HASHTAG_REGEX } from 'mastodon/utils/hashtags';
-import { WithRouterPropTypes } from 'mastodon/utils/react_router';
-
-const messages = defineMessages({
-  placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
-  placeholderSignedIn: { id: 'search.search_or_paste', defaultMessage: 'Search or paste URL' },
-});
-
-const labelForRecentSearch = search => {
-  switch(search.get('type')) {
-  case 'account':
-    return `@${search.get('q')}`;
-  case 'hashtag':
-    return `#${search.get('q')}`;
-  default:
-    return search.get('q');
-  }
-};
-
-class Search extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    value: PropTypes.string.isRequired,
-    recent: ImmutablePropTypes.orderedSet,
-    submitted: PropTypes.bool,
-    onChange: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    onOpenURL: PropTypes.func.isRequired,
-    onClickSearchResult: PropTypes.func.isRequired,
-    onForgetSearchResult: PropTypes.func.isRequired,
-    onClear: PropTypes.func.isRequired,
-    onShow: PropTypes.func.isRequired,
-    openInRoute: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    singleColumn: PropTypes.bool,
-    ...WithRouterPropTypes,
-  };
-
-  state = {
-    expanded: false,
-    selectedOption: -1,
-    options: [],
-  };
-
-  defaultOptions = [
-    { key: 'prompt-has', label: <><mark>has:</mark> <FormattedList type='disjunction' value={['media', 'poll', 'embed']} /></>, action: e => { e.preventDefault(); this._insertText('has:'); } },
-    { key: 'prompt-is', label: <><mark>is:</mark> <FormattedList type='disjunction' value={['reply', 'sensitive']} /></>, action: e => { e.preventDefault(); this._insertText('is:'); } },
-    { key: 'prompt-language', label: <><mark>language:</mark> <FormattedMessage id='search_popout.language_code' defaultMessage='ISO language code' /></>, action: e => { e.preventDefault(); this._insertText('language:'); } },
-    { key: 'prompt-from', label: <><mark>from:</mark> <FormattedMessage id='search_popout.user' defaultMessage='user' /></>, action: e => { e.preventDefault(); this._insertText('from:'); } },
-    { key: 'prompt-before', label: <><mark>before:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('before:'); } },
-    { key: 'prompt-during', label: <><mark>during:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('during:'); } },
-    { key: 'prompt-after', label: <><mark>after:</mark> <FormattedMessage id='search_popout.specific_date' defaultMessage='specific date' /></>, action: e => { e.preventDefault(); this._insertText('after:'); } },
-    { key: 'prompt-in', label: <><mark>in:</mark> <FormattedList type='disjunction' value={['all', 'library', 'public']} /></>, action: e => { e.preventDefault(); this._insertText('in:'); } }
-  ];
-
-  setRef = c => {
-    this.searchForm = c;
-  };
-
-  handleChange = ({ target }) => {
-    const { onChange } = this.props;
-
-    onChange(target.value);
-
-    this._calculateOptions(target.value);
-  };
-
-  handleClear = e => {
-    const { value, submitted, onClear } = this.props;
-
-    e.preventDefault();
-
-    if (value.length > 0 || submitted) {
-      onClear();
-      this.setState({ options: [], selectedOption: -1 });
-    }
-  };
-
-  handleKeyDown = (e) => {
-    const { selectedOption } = this.state;
-    const options = searchEnabled ? this._getOptions().concat(this.defaultOptions) : this._getOptions();
-
-    switch(e.key) {
-    case 'Escape':
-      e.preventDefault();
-      this._unfocus();
-
-      break;
-    case 'ArrowDown':
-      e.preventDefault();
-
-      if (options.length > 0) {
-        this.setState({ selectedOption: Math.min(selectedOption + 1, options.length - 1) });
-      }
-
-      break;
-    case 'ArrowUp':
-      e.preventDefault();
-
-      if (options.length > 0) {
-        this.setState({ selectedOption: Math.max(selectedOption - 1, -1) });
-      }
-
-      break;
-    case 'Enter':
-      e.preventDefault();
-
-      if (selectedOption === -1) {
-        this._submit();
-      } else if (options.length > 0) {
-        options[selectedOption].action(e);
-      }
-
-      break;
-    case 'Delete':
-      if (selectedOption > -1 && options.length > 0) {
-        const search = options[selectedOption];
-
-        if (typeof search.forget === 'function') {
-          e.preventDefault();
-          search.forget(e);
-        }
-      }
-
-      break;
-    }
-  };
-
-  handleFocus = () => {
-    const { onShow, singleColumn } = this.props;
-
-    this.setState({ expanded: true, selectedOption: -1 });
-    onShow();
-
-    if (this.searchForm && !singleColumn) {
-      const { left, right } = this.searchForm.getBoundingClientRect();
-
-      if (left < 0 || right > (window.innerWidth || document.documentElement.clientWidth)) {
-        this.searchForm.scrollIntoView();
-      }
-    }
-  };
-
-  handleBlur = () => {
-    this.setState({ expanded: false, selectedOption: -1 });
-  };
-
-  handleHashtagClick = () => {
-    const { value, onClickSearchResult, history } = this.props;
-
-    const query = value.trim().replace(/^#/, '');
-
-    history.push(`/tags/${query}`);
-    onClickSearchResult(query, 'hashtag');
-    this._unfocus();
-  };
-
-  handleAccountClick = () => {
-    const { value, onClickSearchResult, history } = this.props;
-
-    const query = value.trim().replace(/^@/, '');
-
-    history.push(`/@${query}`);
-    onClickSearchResult(query, 'account');
-    this._unfocus();
-  };
-
-  handleURLClick = () => {
-    const { value, onOpenURL, history } = this.props;
-
-    onOpenURL(value, history);
-    this._unfocus();
-  };
-
-  handleStatusSearch = () => {
-    this._submit('statuses');
-  };
-
-  handleAccountSearch = () => {
-    this._submit('accounts');
-  };
-
-  handleRecentSearchClick = search => {
-    const { onChange, history } = this.props;
-
-    if (search.get('type') === 'account') {
-      history.push(`/@${search.get('q')}`);
-    } else if (search.get('type') === 'hashtag') {
-      history.push(`/tags/${search.get('q')}`);
-    } else {
-      onChange(search.get('q'));
-      this._submit(search.get('type'));
-    }
-
-    this._unfocus();
-  };
-
-  handleForgetRecentSearchClick = search => {
-    const { onForgetSearchResult } = this.props;
-
-    onForgetSearchResult(search.get('q'));
-  };
-
-  _unfocus () {
-    document.querySelector('.ui').parentElement.focus();
-  }
-
-  _insertText (text) {
-    const { value, onChange } = this.props;
-
-    if (value === '') {
-      onChange(text);
-    } else if (value[value.length - 1] === ' ') {
-      onChange(`${value}${text}`);
-    } else {
-      onChange(`${value} ${text}`);
-    }
-  }
-
-  _submit (type) {
-    const { onSubmit, openInRoute, value, onClickSearchResult, history } = this.props;
-
-    onSubmit(type);
-
-    if (value) {
-      onClickSearchResult(value, type);
-    }
-
-    if (openInRoute) {
-      history.push('/search');
-    }
-
-    this._unfocus();
-  }
-
-  _getOptions () {
-    const { options } = this.state;
-
-    if (options.length > 0) {
-      return options;
-    }
-
-    const { recent } = this.props;
-
-    return recent.toArray().map(search => ({
-      key: `${search.get('type')}/${search.get('q')}`,
-
-      label: labelForRecentSearch(search),
-
-      action: () => this.handleRecentSearchClick(search),
-
-      forget: e => {
-        e.stopPropagation();
-        this.handleForgetRecentSearchClick(search);
-      },
-    }));
-  }
-
-  _calculateOptions (value) {
-    const { signedIn } = this.props.identity;
-    const trimmedValue = value.trim();
-    const options = [];
-
-    if (trimmedValue.length > 0) {
-      const couldBeURL = trimmedValue.startsWith('https://') && !trimmedValue.includes(' ');
-
-      if (couldBeURL) {
-        options.push({ key: 'open-url', label: <FormattedMessage id='search.quick_action.open_url' defaultMessage='Open URL in Mastodon' />, action: this.handleURLClick });
-      }
-
-      const couldBeHashtag = (trimmedValue.startsWith('#') && trimmedValue.length > 1) || trimmedValue.match(HASHTAG_REGEX);
-
-      if (couldBeHashtag) {
-        options.push({ key: 'go-to-hashtag', label: <FormattedMessage id='search.quick_action.go_to_hashtag' defaultMessage='Go to hashtag {x}' values={{ x: <mark>#{trimmedValue.replace(/^#/, '')}</mark> }} />, action: this.handleHashtagClick });
-      }
-
-      const couldBeUsername = trimmedValue.match(/^@?[a-z0-9_-]+(@[^\s]+)?$/i);
-
-      if (couldBeUsername) {
-        options.push({ key: 'go-to-account', label: <FormattedMessage id='search.quick_action.go_to_account' defaultMessage='Go to profile {x}' values={{ x: <mark>@{trimmedValue.replace(/^@/, '')}</mark> }} />, action: this.handleAccountClick });
-      }
-
-      const couldBeStatusSearch = searchEnabled;
-
-      if (couldBeStatusSearch && signedIn) {
-        options.push({ key: 'status-search', label: <FormattedMessage id='search.quick_action.status_search' defaultMessage='Posts matching {x}' values={{ x: <mark>{trimmedValue}</mark> }} />, action: this.handleStatusSearch });
-      }
-
-      const couldBeUserSearch = true;
-
-      if (couldBeUserSearch) {
-        options.push({ key: 'account-search', label: <FormattedMessage id='search.quick_action.account_search' defaultMessage='Profiles matching {x}' values={{ x: <mark>{trimmedValue}</mark> }} />, action: this.handleAccountSearch });
-      }
-    }
-
-    this.setState({ options });
-  }
-
-  render () {
-    const { intl, value, submitted, recent } = this.props;
-    const { expanded, options, selectedOption } = this.state;
-    const { signedIn } = this.props.identity;
-
-    const hasValue = value.length > 0 || submitted;
-
-    return (
-      <div className={classNames('search', { active: expanded })}>
-        <input
-          ref={this.setRef}
-          className='search__input'
-          type='text'
-          placeholder={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
-          aria-label={intl.formatMessage(signedIn ? messages.placeholderSignedIn : messages.placeholder)}
-          value={value}
-          onChange={this.handleChange}
-          onKeyDown={this.handleKeyDown}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
-        />
-
-        <div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' icon={SearchIcon} className={hasValue ? '' : 'active'} />
-          <Icon id='times-circle' icon={CancelIcon} className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} />
-        </div>
-
-        <div className='search__popout'>
-          {options.length === 0 && (
-            <>
-              <h4><FormattedMessage id='search_popout.recent' defaultMessage='Recent searches' /></h4>
-
-              <div className='search__popout__menu'>
-                {recent.size > 0 ? this._getOptions().map(({ label, key, action, forget }, i) => (
-                  <button key={key} onMouseDown={action} className={classNames('search__popout__menu__item search__popout__menu__item--flex', { selected: selectedOption === i })}>
-                    <span>{label}</span>
-                    <button className='icon-button' onMouseDown={forget}><Icon id='times' icon={CloseIcon} /></button>
-                  </button>
-                )) : (
-                  <div className='search__popout__menu__message'>
-                    <FormattedMessage id='search.no_recent_searches' defaultMessage='No recent searches' />
-                  </div>
-                )}
-              </div>
-            </>
-          )}
-
-          {options.length > 0 && (
-            <>
-              <h4><FormattedMessage id='search_popout.quick_actions' defaultMessage='Quick actions' /></h4>
-
-              <div className='search__popout__menu'>
-                {options.map(({ key, label, action }, i) => (
-                  <button key={key} onMouseDown={action} className={classNames('search__popout__menu__item', { selected: selectedOption === i })}>
-                    {label}
-                  </button>
-                ))}
-              </div>
-            </>
-          )}
-
-          <h4><FormattedMessage id='search_popout.options' defaultMessage='Search options' /></h4>
-
-          {searchEnabled && signedIn ? (
-            <div className='search__popout__menu'>
-              {this.defaultOptions.map(({ key, label, action }, i) => (
-                <button key={key} onMouseDown={action} className={classNames('search__popout__menu__item', { selected: selectedOption === ((options.length || recent.size) + i) })}>
-                  {label}
-                </button>
-              ))}
-            </div>
-          ) : (
-            <div className='search__popout__menu__message'>
-              {searchEnabled ? (
-                <FormattedMessage id='search_popout.full_text_search_logged_out_message' defaultMessage='Only available when logged in.' />
-              ) : (
-                <FormattedMessage id='search_popout.full_text_search_disabled_message' defaultMessage='Not available on {domain}.' values={{ domain }} />
-              )}
-            </div>
-          )}
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default withRouter(withIdentity(injectIntl(Search)));

app/javascript/mastodon/features/compose/components/search.tsx

@@ -0,0 +1,593 @@
+import { useCallback, useState, useRef } from 'react';
+
+import {
+  defineMessages,
+  useIntl,
+  FormattedMessage,
+  FormattedList,
+} from 'react-intl';
+
+import classNames from 'classnames';
+import { useHistory } from 'react-router-dom';
+
+import { isFulfilled } from '@reduxjs/toolkit';
+
+import CancelIcon from '@/material-icons/400-24px/cancel-fill.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
+import {
+  clickSearchResult,
+  forgetSearchResult,
+  openURL,
+} from 'mastodon/actions/search';
+import { Icon } from 'mastodon/components/icon';
+import { useIdentity } from 'mastodon/identity_context';
+import { domain, searchEnabled } from 'mastodon/initial_state';
+import type { RecentSearch, SearchType } from 'mastodon/models/search';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+import { HASHTAG_REGEX } from 'mastodon/utils/hashtags';
+
+const messages = defineMessages({
+  placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
+  placeholderSignedIn: {
+    id: 'search.search_or_paste',
+    defaultMessage: 'Search or paste URL',
+  },
+});
+
+const labelForRecentSearch = (search: RecentSearch) => {
+  switch (search.type) {
+    case 'account':
+      return `@${search.q}`;
+    case 'hashtag':
+      return `#${search.q}`;
+    default:
+      return search.q;
+  }
+};
+
+const unfocus = () => {
+  document.querySelector('.ui')?.parentElement?.focus();
+};
+
+interface SearchOption {
+  key: string;
+  label: React.ReactNode;
+  action: (e: React.MouseEvent | React.KeyboardEvent) => void;
+  forget?: (e: React.MouseEvent | React.KeyboardEvent) => void;
+}
+
+export const Search: React.FC<{
+  singleColumn: boolean;
+  initialValue?: string;
+}> = ({ singleColumn, initialValue }) => {
+  const intl = useIntl();
+  const recent = useAppSelector((state) => state.search.recent);
+  const { signedIn } = useIdentity();
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+  const searchInputRef = useRef<HTMLInputElement>(null);
+  const [value, setValue] = useState(initialValue ?? '');
+  const hasValue = value.length > 0;
+  const [expanded, setExpanded] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(-1);
+  const [quickActions, setQuickActions] = useState<SearchOption[]>([]);
+  const searchOptions: SearchOption[] = [];
+
+  if (searchEnabled) {
+    searchOptions.push(
+      {
+        key: 'prompt-has',
+        label: (
+          <>
+            <mark>has:</mark>{' '}
+            <FormattedList
+              type='disjunction'
+              value={['media', 'poll', 'embed']}
+            />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('has:');
+        },
+      },
+      {
+        key: 'prompt-is',
+        label: (
+          <>
+            <mark>is:</mark>{' '}
+            <FormattedList type='disjunction' value={['reply', 'sensitive']} />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('is:');
+        },
+      },
+      {
+        key: 'prompt-language',
+        label: (
+          <>
+            <mark>language:</mark>{' '}
+            <FormattedMessage
+              id='search_popout.language_code'
+              defaultMessage='ISO language code'
+            />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('language:');
+        },
+      },
+      {
+        key: 'prompt-from',
+        label: (
+          <>
+            <mark>from:</mark>{' '}
+            <FormattedMessage id='search_popout.user' defaultMessage='user' />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('from:');
+        },
+      },
+      {
+        key: 'prompt-before',
+        label: (
+          <>
+            <mark>before:</mark>{' '}
+            <FormattedMessage
+              id='search_popout.specific_date'
+              defaultMessage='specific date'
+            />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('before:');
+        },
+      },
+      {
+        key: 'prompt-during',
+        label: (
+          <>
+            <mark>during:</mark>{' '}
+            <FormattedMessage
+              id='search_popout.specific_date'
+              defaultMessage='specific date'
+            />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('during:');
+        },
+      },
+      {
+        key: 'prompt-after',
+        label: (
+          <>
+            <mark>after:</mark>{' '}
+            <FormattedMessage
+              id='search_popout.specific_date'
+              defaultMessage='specific date'
+            />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('after:');
+        },
+      },
+      {
+        key: 'prompt-in',
+        label: (
+          <>
+            <mark>in:</mark>{' '}
+            <FormattedList
+              type='disjunction'
+              value={['all', 'library', 'public']}
+            />
+          </>
+        ),
+        action: (e) => {
+          e.preventDefault();
+          insertText('in:');
+        },
+      },
+    );
+  }
+
+  const recentOptions: SearchOption[] = recent.map((search) => ({
+    key: `${search.type}/${search.q}`,
+    label: labelForRecentSearch(search),
+    action: () => {
+      setValue(search.q);
+
+      if (search.type === 'account') {
+        history.push(`/@${search.q}`);
+      } else if (search.type === 'hashtag') {
+        history.push(`/tags/${search.q}`);
+      } else {
+        const queryParams = new URLSearchParams({ q: search.q });
+        if (search.type) queryParams.set('type', search.type);
+        history.push({ pathname: '/search', search: queryParams.toString() });
+      }
+
+      unfocus();
+    },
+    forget: (e) => {
+      e.stopPropagation();
+      void dispatch(forgetSearchResult(search.q));
+    },
+  }));
+
+  const navigableOptions = hasValue
+    ? quickActions.concat(searchOptions)
+    : recentOptions.concat(quickActions, searchOptions);
+
+  const insertText = (text: string) => {
+    setValue((currentValue) => {
+      if (currentValue === '') {
+        return text;
+      } else if (currentValue.endsWith(' ')) {
+        return `${currentValue}${text}`;
+      } else {
+        return `${currentValue} ${text}`;
+      }
+    });
+  };
+
+  const submit = useCallback(
+    (q: string, type?: SearchType) => {
+      void dispatch(clickSearchResult({ q, type }));
+      const queryParams = new URLSearchParams({ q });
+      if (type) queryParams.set('type', type);
+      history.push({ pathname: '/search', search: queryParams.toString() });
+      unfocus();
+    },
+    [dispatch, history],
+  );
+
+  const handleChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(value);
+
+      const trimmedValue = value.trim();
+      const newQuickActions = [];
+
+      if (trimmedValue.length > 0) {
+        const couldBeURL =
+          trimmedValue.startsWith('https://') && !trimmedValue.includes(' ');
+
+        if (couldBeURL) {
+          newQuickActions.push({
+            key: 'open-url',
+            label: (
+              <FormattedMessage
+                id='search.quick_action.open_url'
+                defaultMessage='Open URL in Mastodon'
+              />
+            ),
+            action: async () => {
+              const result = await dispatch(openURL({ url: trimmedValue }));
+
+              if (isFulfilled(result)) {
+                if (result.payload.accounts[0]) {
+                  history.push(`/@${result.payload.accounts[0].acct}`);
+                } else if (result.payload.statuses[0]) {
+                  history.push(
+                    `/@${result.payload.statuses[0].account.acct}/${result.payload.statuses[0].id}`,
+                  );
+                }
+              }
+
+              unfocus();
+            },
+          });
+        }
+
+        const couldBeHashtag =
+          (trimmedValue.startsWith('#') && trimmedValue.length > 1) ||
+          trimmedValue.match(HASHTAG_REGEX);
+
+        if (couldBeHashtag) {
+          newQuickActions.push({
+            key: 'go-to-hashtag',
+            label: (
+              <FormattedMessage
+                id='search.quick_action.go_to_hashtag'
+                defaultMessage='Go to hashtag {x}'
+                values={{ x: <mark>#{trimmedValue.replace(/^#/, '')}</mark> }}
+              />
+            ),
+            action: () => {
+              const query = trimmedValue.replace(/^#/, '');
+              history.push(`/tags/${query}`);
+              void dispatch(clickSearchResult({ q: query, type: 'hashtag' }));
+              unfocus();
+            },
+          });
+        }
+
+        const couldBeUsername = /^@?[a-z0-9_-]+(@[^\s]+)?$/i.exec(trimmedValue);
+
+        if (couldBeUsername) {
+          newQuickActions.push({
+            key: 'go-to-account',
+            label: (
+              <FormattedMessage
+                id='search.quick_action.go_to_account'
+                defaultMessage='Go to profile {x}'
+                values={{ x: <mark>@{trimmedValue.replace(/^@/, '')}</mark> }}
+              />
+            ),
+            action: () => {
+              const query = trimmedValue.replace(/^@/, '');
+              history.push(`/@${query}`);
+              void dispatch(clickSearchResult({ q: query, type: 'account' }));
+              unfocus();
+            },
+          });
+        }
+
+        const couldBeStatusSearch = searchEnabled;
+
+        if (couldBeStatusSearch && signedIn) {
+          newQuickActions.push({
+            key: 'status-search',
+            label: (
+              <FormattedMessage
+                id='search.quick_action.status_search'
+                defaultMessage='Posts matching {x}'
+                values={{ x: <mark>{trimmedValue}</mark> }}
+              />
+            ),
+            action: () => {
+              submit(trimmedValue, 'statuses');
+            },
+          });
+        }
+
+        newQuickActions.push({
+          key: 'account-search',
+          label: (
+            <FormattedMessage
+              id='search.quick_action.account_search'
+              defaultMessage='Profiles matching {x}'
+              values={{ x: <mark>{trimmedValue}</mark> }}
+            />
+          ),
+          action: () => {
+            submit(trimmedValue, 'accounts');
+          },
+        });
+      }
+
+      setQuickActions(newQuickActions);
+    },
+    [dispatch, history, signedIn, setValue, setQuickActions, submit],
+  );
+
+  const handleClear = useCallback(() => {
+    setValue('');
+    setQuickActions([]);
+    setSelectedOption(-1);
+  }, [setValue, setQuickActions, setSelectedOption]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case 'Escape':
+          e.preventDefault();
+          unfocus();
+
+          break;
+        case 'ArrowDown':
+          e.preventDefault();
+
+          if (navigableOptions.length > 0) {
+            setSelectedOption(
+              Math.min(selectedOption + 1, navigableOptions.length - 1),
+            );
+          }
+
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+
+          if (navigableOptions.length > 0) {
+            setSelectedOption(Math.max(selectedOption - 1, -1));
+          }
+
+          break;
+        case 'Enter':
+          e.preventDefault();
+
+          if (selectedOption === -1) {
+            submit(value);
+          } else if (navigableOptions.length > 0) {
+            navigableOptions[selectedOption]?.action(e);
+          }
+
+          break;
+        case 'Delete':
+          if (selectedOption > -1 && navigableOptions.length > 0) {
+            const search = navigableOptions[selectedOption];
+
+            if (typeof search?.forget === 'function') {
+              e.preventDefault();
+              search.forget(e);
+            }
+          }
+
+          break;
+      }
+    },
+    [navigableOptions, value, selectedOption, setSelectedOption, submit],
+  );
+
+  const handleFocus = useCallback(() => {
+    setExpanded(true);
+    setSelectedOption(-1);
+
+    if (searchInputRef.current && !singleColumn) {
+      const { left, right } = searchInputRef.current.getBoundingClientRect();
+
+      if (
+        left < 0 ||
+        right > (window.innerWidth || document.documentElement.clientWidth)
+      ) {
+        searchInputRef.current.scrollIntoView();
+      }
+    }
+  }, [setExpanded, setSelectedOption, singleColumn]);
+
+  const handleBlur = useCallback(() => {
+    setExpanded(false);
+    setSelectedOption(-1);
+  }, [setExpanded, setSelectedOption]);
+
+  return (
+    <form className={classNames('search', { active: expanded })}>
+      <input
+        ref={searchInputRef}
+        className='search__input'
+        type='text'
+        placeholder={intl.formatMessage(
+          signedIn ? messages.placeholderSignedIn : messages.placeholder,
+        )}
+        aria-label={intl.formatMessage(
+          signedIn ? messages.placeholderSignedIn : messages.placeholder,
+        )}
+        value={value}
+        onChange={handleChange}
+        onKeyDown={handleKeyDown}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+      />
+
+      <button type='button' className='search__icon' onClick={handleClear}>
+        <Icon
+          id='search'
+          icon={SearchIcon}
+          className={hasValue ? '' : 'active'}
+        />
+        <Icon
+          id='times-circle'
+          icon={CancelIcon}
+          className={hasValue ? 'active' : ''}
+          aria-label={intl.formatMessage(messages.placeholder)}
+        />
+      </button>
+
+      <div className='search__popout'>
+        {!hasValue && (
+          <>
+            <h4>
+              <FormattedMessage
+                id='search_popout.recent'
+                defaultMessage='Recent searches'
+              />
+            </h4>
+
+            <div className='search__popout__menu'>
+              {recentOptions.length > 0 ? (
+                recentOptions.map(({ label, key, action, forget }, i) => (
+                  <button
+                    key={key}
+                    onMouseDown={action}
+                    className={classNames(
+                      'search__popout__menu__item search__popout__menu__item--flex',
+                      { selected: selectedOption === i },
+                    )}
+                  >
+                    <span>{label}</span>
+                    <button className='icon-button' onMouseDown={forget}>
+                      <Icon id='times' icon={CloseIcon} />
+                    </button>
+                  </button>
+                ))
+              ) : (
+                <div className='search__popout__menu__message'>
+                  <FormattedMessage
+                    id='search.no_recent_searches'
+                    defaultMessage='No recent searches'
+                  />
+                </div>
+              )}
+            </div>
+          </>
+        )}
+
+        {quickActions.length > 0 && (
+          <>
+            <h4>
+              <FormattedMessage
+                id='search_popout.quick_actions'
+                defaultMessage='Quick actions'
+              />
+            </h4>
+
+            <div className='search__popout__menu'>
+              {quickActions.map(({ key, label, action }, i) => (
+                <button
+                  key={key}
+                  onMouseDown={action}
+                  className={classNames('search__popout__menu__item', {
+                    selected: selectedOption === i,
+                  })}
+                >
+                  {label}
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+
+        <h4>
+          <FormattedMessage
+            id='search_popout.options'
+            defaultMessage='Search options'
+          />
+        </h4>
+
+        {searchEnabled && signedIn ? (
+          <div className='search__popout__menu'>
+            {searchOptions.map(({ key, label, action }, i) => (
+              <button
+                key={key}
+                onMouseDown={action}
+                className={classNames('search__popout__menu__item', {
+                  selected:
+                    selectedOption ===
+                    (quickActions.length || recent.length) + i,
+                })}
+              >
+                {label}
+              </button>
+            ))}
+          </div>
+        ) : (
+          <div className='search__popout__menu__message'>
+            {searchEnabled ? (
+              <FormattedMessage
+                id='search_popout.full_text_search_logged_out_message'
+                defaultMessage='Only available when logged in.'
+              />
+            ) : (
+              <FormattedMessage
+                id='search_popout.full_text_search_disabled_message'
+                defaultMessage='Not available on {domain}.'
+                values={{ domain }}
+              />
+            )}
+          </div>
+        )}
+      </div>
+    </form>
+  );
+};

app/javascript/mastodon/features/compose/components/search_results.jsx

@@ -1,93 +0,0 @@
-import { useCallback } from 'react';
-
-import { FormattedMessage } from 'react-intl';
-
-import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
-import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import TagIcon from '@/material-icons/400-24px/tag.svg?react';
-import { expandSearch } from 'mastodon/actions/search';
-import { Icon }  from 'mastodon/components/icon';
-import { LoadMore } from 'mastodon/components/load_more';
-import { LoadingIndicator } from 'mastodon/components/loading_indicator';
-import { SearchSection } from 'mastodon/features/explore/components/search_section';
-import { useAppDispatch, useAppSelector } from 'mastodon/store';
-
-import { ImmutableHashtag as Hashtag } from '../../../components/hashtag';
-import AccountContainer from '../../../containers/account_container';
-import StatusContainer from '../../../containers/status_container';
-
-const INITIAL_PAGE_LIMIT = 10;
-
-const withoutLastResult = list => {
-  if (list.size > INITIAL_PAGE_LIMIT && list.size % INITIAL_PAGE_LIMIT === 1) {
-    return list.skipLast(1);
-  } else {
-    return list;
-  }
-};
-
-export const SearchResults = () => {
-  const results = useAppSelector((state) => state.getIn(['search', 'results']));
-  const isLoading = useAppSelector((state) => state.getIn(['search', 'isLoading']));
-
-  const dispatch = useAppDispatch();
-
-  const handleLoadMoreAccounts = useCallback(() => {
-    dispatch(expandSearch('accounts'));
-  }, [dispatch]);
-
-  const handleLoadMoreStatuses = useCallback(() => {
-    dispatch(expandSearch('statuses'));
-  }, [dispatch]);
-
-  const handleLoadMoreHashtags = useCallback(() => {
-    dispatch(expandSearch('hashtags'));
-  }, [dispatch]);
-
-  let accounts, statuses, hashtags;
-
-  if (results.get('accounts') && results.get('accounts').size > 0) {
-    accounts = (
-      <SearchSection title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>}>
-        {withoutLastResult(results.get('accounts')).map(accountId => <AccountContainer key={accountId} id={accountId} />)}
-        {(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreAccounts} />}
-      </SearchSection>
-    );
-  }
-
-  if (results.get('hashtags') && results.get('hashtags').size > 0) {
-    hashtags = (
-      <SearchSection title={<><Icon id='hashtag' icon={TagIcon} /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>}>
-        {withoutLastResult(results.get('hashtags')).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
-        {(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreHashtags} />}
-      </SearchSection>
-    );
-  }
-
-  if (results.get('statuses') && results.get('statuses').size > 0) {
-    statuses = (
-      <SearchSection title={<><Icon id='quote-right' icon={FindInPageIcon} /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>}>
-        {withoutLastResult(results.get('statuses')).map(statusId => <StatusContainer key={statusId} id={statusId} />)}
-        {(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && <LoadMore visible onClick={handleLoadMoreStatuses} />}
-      </SearchSection>
-    );
-  }
-
-  return (
-    <div className='search-results'>
-      {!accounts && !hashtags && !statuses && (
-        isLoading ? (
-          <LoadingIndicator />
-        ) : (
-          <div className='empty-column-indicator'>
-            <FormattedMessage id='search_results.nothing_found' defaultMessage='Could not find anything for these search terms' />
-          </div>
-        )
-      )}
-      {accounts}
-      {hashtags}
-      {statuses}
-    </div>
-  );
-
-};

app/javascript/mastodon/features/compose/containers/search_container.js

@@ -1,59 +0,0 @@
-import { createSelector } from '@reduxjs/toolkit';
-import { connect } from 'react-redux';
-
-import {
-  changeSearch,
-  clearSearch,
-  submitSearch,
-  showSearch,
-  openURL,
-  clickSearchResult,
-  forgetSearchResult,
-} from 'mastodon/actions/search';
-
-import Search from '../components/search';
-
-const getRecentSearches = createSelector(
-  state => state.getIn(['search', 'recent']),
-  recent => recent.reverse(),
-);
-
-const mapStateToProps = state => ({
-  value: state.getIn(['search', 'value']),
-  submitted: state.getIn(['search', 'submitted']),
-  recent: getRecentSearches(state),
-});
-
-const mapDispatchToProps = dispatch => ({
-
-  onChange (value) {
-    dispatch(changeSearch(value));
-  },
-
-  onClear () {
-    dispatch(clearSearch());
-  },
-
-  onSubmit (type) {
-    dispatch(submitSearch(type));
-  },
-
-  onShow () {
-    dispatch(showSearch());
-  },
-
-  onOpenURL (q, routerHistory) {
-    dispatch(openURL(q, routerHistory));
-  },
-
-  onClickSearchResult (q, type) {
-    dispatch(clickSearchResult(q, type));
-  },
-
-  onForgetSearchResult (q) {
-    dispatch(forgetSearchResult(q));
-  },
-
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Search);

app/javascript/mastodon/features/compose/index.jsx

@@ -9,8 +9,6 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
-import spring from 'react-motion/lib/spring';
-
 import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
 import HomeIcon from '@/material-icons/400-24px/home-fill.svg?react';
 import LogoutIcon from '@/material-icons/400-24px/logout.svg?react';
@@ -26,11 +24,9 @@ import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
 import { changeComposing, mountCompose, unmountCompose } from '../../actions/compose';
 import { mascot } from '../../initial_state';
 import { isMobile } from '../../is_mobile';
-import Motion from '../ui/util/optional_motion';
 
-import { SearchResults } from './components/search_results';
+import { Search } from './components/search';
 import ComposeFormContainer from './containers/compose_form_container';
-import SearchContainer from './containers/search_container';
 
 const messages = defineMessages({
   start: { id: 'getting_started.heading', defaultMessage: 'Getting started' },
@@ -43,9 +39,8 @@ const messages = defineMessages({
   compose: { id: 'navigation_bar.compose', defaultMessage: 'Compose new post' },
 });
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = (state) => ({
   columns: state.getIn(['settings', 'columns']),
-  showSearch: ownProps.multiColumn ? state.getIn(['search', 'submitted']) && !state.getIn(['search', 'hidden']) : false,
 });
 
 class Compose extends PureComponent {
@@ -54,7 +49,6 @@ class Compose extends PureComponent {
     dispatch: PropTypes.func.isRequired,
     columns: ImmutablePropTypes.list.isRequired,
     multiColumn: PropTypes.bool,
-    showSearch: PropTypes.bool,
     intl: PropTypes.object.isRequired,
   };
 
@@ -88,7 +82,7 @@ class Compose extends PureComponent {
   };
 
   render () {
-    const { multiColumn, showSearch, intl } = this.props;
+    const { multiColumn, intl } = this.props;
 
     if (multiColumn) {
       const { columns } = this.props;
@@ -113,7 +107,7 @@ class Compose extends PureComponent {
             <a href='/auth/sign_out' className='drawer__tab' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)} onClick={this.handleLogoutClick}><Icon id='sign-out' icon={LogoutIcon} /></a>
           </nav>
 
-          {multiColumn && <SearchContainer /> }
+          {multiColumn && <Search /> }
 
           <div className='drawer__pager'>
             <div className='drawer__inner' onFocus={this.onFocus}>
@@ -123,14 +117,6 @@ class Compose extends PureComponent {
                 <img alt='' draggable='false' src={mascot || elephantUIPlane} />
               </div>
             </div>
-
-            <Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
-              {({ x }) => (
-                <div className='drawer__inner darker' style={{ transform: `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
-                  <SearchResults />
-                </div>
-              )}
-            </Motion>
           </div>
         </div>
       );

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

@@ -15,7 +15,8 @@ import {
   changeColumnParams,
 } from 'mastodon/actions/columns';
 import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
-import Column from 'mastodon/components/column';
+import { Column } from 'mastodon/components/column';
+import type { ColumnRef } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { LoadMore } from 'mastodon/components/load_more';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
@@ -49,7 +50,7 @@ export const Directory: React.FC<{
   const intl = useIntl();
   const dispatch = useAppDispatch();
 
-  const column = useRef<Column>(null);
+  const column = useRef<ColumnRef>(null);
 
   const [orderParam, setOrderParam] = useSearchParam('order');
   const [localParam, setLocalParam] = useSearchParam('local');

app/javascript/mastodon/features/emoji/__tests__/emoji-test.js

@@ -90,8 +90,8 @@ describe('emoji', () => {
     });
 
     it('keeps ordering as expected (issue fixed by PR 20677)', () => {
-      expect(emojify('<p>💕 <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>'))
-        .toEqual('<p><picture><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg"></picture> <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener noreferrer" target="_blank">#<span>foo</span></a> test: foo.</p>');
+      expect(emojify('<p>💕 <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener" target="_blank">#<span>foo</span></a> test: foo.</p>'))
+        .toEqual('<p><picture><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg"></picture> <a class="hashtag" href="https://example.com/tags/foo" rel="nofollow noopener" target="_blank">#<span>foo</span></a> test: foo.</p>');
     });
   });
 });

app/javascript/mastodon/features/explore/components/search_section.jsx

@@ -1,20 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage } from 'react-intl';
-
-export const SearchSection = ({ title, onClickMore, children }) => (
-  <div className='search-results__section'>
-    <div className='search-results__section__header'>
-      <h3>{title}</h3>
-      {onClickMore && <button onClick={onClickMore}><FormattedMessage id='search_results.see_all' defaultMessage='See all' /></button>}
-    </div>
-
-    {children}
-  </div>
-);
-
-SearchSection.propTypes = {
-  title: PropTypes.node.isRequired,
-  onClickMore: PropTypes.func,
-  children: PropTypes.children,
-};

app/javascript/mastodon/features/explore/index.jsx

@@ -1,114 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-import { NavLink, Switch, Route } from 'react-router-dom';
-
-import { connect } from 'react-redux';
-
-import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
-import SearchIcon from '@/material-icons/400-24px/search.svg?react';
-import Column from 'mastodon/components/column';
-import ColumnHeader from 'mastodon/components/column_header';
-import Search from 'mastodon/features/compose/containers/search_container';
-import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { trendsEnabled } from 'mastodon/initial_state';
-
-import Links from './links';
-import SearchResults from './results';
-import Statuses from './statuses';
-import Suggestions from './suggestions';
-import Tags from './tags';
-
-const messages = defineMessages({
-  title: { id: 'explore.title', defaultMessage: 'Explore' },
-  searchResults: { id: 'explore.search_results', defaultMessage: 'Search results' },
-});
-
-const mapStateToProps = state => ({
-  layout: state.getIn(['meta', 'layout']),
-  isSearching: state.getIn(['search', 'submitted']) || !trendsEnabled,
-});
-
-class Explore extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    intl: PropTypes.object.isRequired,
-    multiColumn: PropTypes.bool,
-    isSearching: PropTypes.bool,
-  };
-
-  handleHeaderClick = () => {
-    this.column.scrollTop();
-  };
-
-  setRef = c => {
-    this.column = c;
-  };
-
-  render() {
-    const { intl, multiColumn, isSearching } = this.props;
-    const { signedIn } = this.props.identity;
-
-    return (
-      <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
-        <ColumnHeader
-          icon={isSearching ? 'search' : 'explore'}
-          iconComponent={isSearching ? SearchIcon : ExploreIcon}
-          title={intl.formatMessage(isSearching ? messages.searchResults : messages.title)}
-          onClick={this.handleHeaderClick}
-          multiColumn={multiColumn}
-        />
-
-        <div className='explore__search-header'>
-          <Search />
-        </div>
-
-        {isSearching ? (
-          <SearchResults />
-        ) : (
-          <>
-            <div className='account__section-headline'>
-              <NavLink exact to='/explore'>
-                <FormattedMessage tagName='div' id='explore.trending_statuses' defaultMessage='Posts' />
-              </NavLink>
-
-              <NavLink exact to='/explore/tags'>
-                <FormattedMessage tagName='div' id='explore.trending_tags' defaultMessage='Hashtags' />
-              </NavLink>
-
-              {signedIn && (
-                <NavLink exact to='/explore/suggestions'>
-                  <FormattedMessage tagName='div' id='explore.suggested_follows' defaultMessage='People' />
-                </NavLink>
-              )}
-
-              <NavLink exact to='/explore/links'>
-                <FormattedMessage tagName='div' id='explore.trending_links' defaultMessage='News' />
-              </NavLink>
-            </div>
-
-            <Switch>
-              <Route path='/explore/tags' component={Tags} />
-              <Route path='/explore/links' component={Links} />
-              <Route path='/explore/suggestions' component={Suggestions} />
-              <Route exact path={['/explore', '/explore/posts', '/search']}>
-                <Statuses multiColumn={multiColumn} />
-              </Route>
-            </Switch>
-
-            <Helmet>
-              <title>{intl.formatMessage(messages.title)}</title>
-              <meta name='robots' content={isSearching ? 'noindex' : 'all'} />
-            </Helmet>
-          </>
-        )}
-      </Column>
-    );
-  }
-
-}
-
-export default withIdentity(connect(mapStateToProps)(injectIntl(Explore)));

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

@@ -0,0 +1,105 @@
+import { useCallback, useRef } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+import { NavLink, Switch, Route } from 'react-router-dom';
+
+import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
+import { Column } from 'mastodon/components/column';
+import type { ColumnRef } from 'mastodon/components/column';
+import { ColumnHeader } from 'mastodon/components/column_header';
+import { Search } from 'mastodon/features/compose/components/search';
+import { useIdentity } from 'mastodon/identity_context';
+
+import Links from './links';
+import Statuses from './statuses';
+import Suggestions from './suggestions';
+import Tags from './tags';
+
+const messages = defineMessages({
+  title: { id: 'explore.title', defaultMessage: 'Explore' },
+});
+
+const Explore: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
+  const { signedIn } = useIdentity();
+  const intl = useIntl();
+  const columnRef = useRef<ColumnRef>(null);
+
+  const handleHeaderClick = useCallback(() => {
+    columnRef.current?.scrollTop();
+  }, []);
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      ref={columnRef}
+      label={intl.formatMessage(messages.title)}
+    >
+      <ColumnHeader
+        icon={'explore'}
+        iconComponent={ExploreIcon}
+        title={intl.formatMessage(messages.title)}
+        onClick={handleHeaderClick}
+        multiColumn={multiColumn}
+      />
+
+      <div className='explore__search-header'>
+        <Search singleColumn />
+      </div>
+
+      <div className='account__section-headline'>
+        <NavLink exact to='/explore'>
+          <FormattedMessage
+            tagName='div'
+            id='explore.trending_statuses'
+            defaultMessage='Posts'
+          />
+        </NavLink>
+
+        <NavLink exact to='/explore/tags'>
+          <FormattedMessage
+            tagName='div'
+            id='explore.trending_tags'
+            defaultMessage='Hashtags'
+          />
+        </NavLink>
+
+        {signedIn && (
+          <NavLink exact to='/explore/suggestions'>
+            <FormattedMessage
+              tagName='div'
+              id='explore.suggested_follows'
+              defaultMessage='People'
+            />
+          </NavLink>
+        )}
+
+        <NavLink exact to='/explore/links'>
+          <FormattedMessage
+            tagName='div'
+            id='explore.trending_links'
+            defaultMessage='News'
+          />
+        </NavLink>
+      </div>
+
+      <Switch>
+        <Route path='/explore/tags' component={Tags} />
+        <Route path='/explore/links' component={Links} />
+        <Route path='/explore/suggestions' component={Suggestions} />
+        <Route exact path={['/explore', '/explore/posts']}>
+          <Statuses multiColumn={multiColumn} />
+        </Route>
+      </Switch>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='all' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Explore;

app/javascript/mastodon/features/explore/results.jsx

@@ -1,232 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { injectIntl, defineMessages, FormattedMessage } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-
-import { List as ImmutableList } from 'immutable';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { connect } from 'react-redux';
-
-import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
-import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import TagIcon from '@/material-icons/400-24px/tag.svg?react';
-import { submitSearch, expandSearch } from 'mastodon/actions/search';
-import { ImmutableHashtag as Hashtag } from 'mastodon/components/hashtag';
-import { Icon } from 'mastodon/components/icon';
-import ScrollableList from 'mastodon/components/scrollable_list';
-import Account from 'mastodon/containers/account_container';
-import Status from 'mastodon/containers/status_container';
-
-import { SearchSection } from './components/search_section';
-
-const messages = defineMessages({
-  title: { id: 'search_results.title', defaultMessage: 'Search for {q}' },
-});
-
-const mapStateToProps = state => ({
-  isLoading: state.getIn(['search', 'isLoading']),
-  results: state.getIn(['search', 'results']),
-  q: state.getIn(['search', 'searchTerm']),
-  submittedType: state.getIn(['search', 'type']),
-});
-
-const INITIAL_PAGE_LIMIT = 10;
-const INITIAL_DISPLAY = 4;
-
-const hidePeek = list => {
-  if (list.size > INITIAL_PAGE_LIMIT && list.size % INITIAL_PAGE_LIMIT === 1) {
-    return list.skipLast(1);
-  } else {
-    return list;
-  }
-};
-
-const renderAccounts = accounts => hidePeek(accounts).map(id => (
-  <Account key={id} id={id} />
-));
-
-const renderHashtags = hashtags => hidePeek(hashtags).map(hashtag => (
-  <Hashtag key={hashtag.get('name')} hashtag={hashtag} />
-));
-
-const renderStatuses = statuses => hidePeek(statuses).map(id => (
-  <Status key={id} id={id} />
-));
-
-class Results extends PureComponent {
-
-  static propTypes = {
-    results: ImmutablePropTypes.contains({
-      accounts: ImmutablePropTypes.orderedSet,
-      statuses: ImmutablePropTypes.orderedSet,
-      hashtags: ImmutablePropTypes.orderedSet,
-    }),
-    isLoading: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-    dispatch: PropTypes.func.isRequired,
-    q: PropTypes.string,
-    intl: PropTypes.object,
-    submittedType: PropTypes.oneOf(['accounts', 'statuses', 'hashtags']),
-  };
-
-  state = {
-    type: this.props.submittedType || 'all',
-  };
-
-  static getDerivedStateFromProps(props, state) {
-    if (props.submittedType !== state.type) {
-      return {
-        type: props.submittedType || 'all',
-      };
-    }
-
-    return null;
-  }
-
-  handleSelectAll = () => {
-    const { submittedType, dispatch } = this.props;
-
-    // If we originally searched for a specific type, we need to resubmit
-    // the query to get all types of results
-    if (submittedType) {
-      dispatch(submitSearch());
-    }
-
-    this.setState({ type: 'all' });
-  };
-
-  handleSelectAccounts = () => {
-    const { submittedType, dispatch } = this.props;
-
-    // If we originally searched for something else (but not everything),
-    // we need to resubmit the query for this specific type
-    if (submittedType !== 'accounts') {
-      dispatch(submitSearch('accounts'));
-    }
-
-    this.setState({ type: 'accounts' });
-  };
-
-  handleSelectHashtags = () => {
-    const { submittedType, dispatch } = this.props;
-
-    // If we originally searched for something else (but not everything),
-    // we need to resubmit the query for this specific type
-    if (submittedType !== 'hashtags') {
-      dispatch(submitSearch('hashtags'));
-    }
-
-    this.setState({ type: 'hashtags' });
-  };
-
-  handleSelectStatuses = () => {
-    const { submittedType, dispatch } = this.props;
-
-    // If we originally searched for something else (but not everything),
-    // we need to resubmit the query for this specific type
-    if (submittedType !== 'statuses') {
-      dispatch(submitSearch('statuses'));
-    }
-
-    this.setState({ type: 'statuses' });
-  };
-
-  handleLoadMoreAccounts = () => this._loadMore('accounts');
-  handleLoadMoreStatuses = () => this._loadMore('statuses');
-  handleLoadMoreHashtags = () => this._loadMore('hashtags');
-
-  _loadMore (type) {
-    const { dispatch } = this.props;
-    dispatch(expandSearch(type));
-  }
-
-  handleLoadMore = () => {
-    const { type } = this.state;
-
-    if (type !== 'all') {
-      this._loadMore(type);
-    }
-  };
-
-  render () {
-    const { intl, isLoading, q, results } = this.props;
-    const { type } = this.state;
-
-    // We request 1 more result than we display so we can tell if there'd be a next page
-    const hasMore = type !== 'all' ? results.get(type, ImmutableList()).size > INITIAL_PAGE_LIMIT && results.get(type).size % INITIAL_PAGE_LIMIT === 1 : false;
-
-    let filteredResults;
-
-    const accounts = results.get('accounts', ImmutableList());
-    const hashtags = results.get('hashtags', ImmutableList());
-    const statuses = results.get('statuses', ImmutableList());
-
-    switch(type) {
-    case 'all':
-      filteredResults = (accounts.size + hashtags.size + statuses.size) > 0 ? (
-        <>
-          {accounts.size > 0 && (
-            <SearchSection key='accounts' title={<><Icon id='users' icon={PeopleIcon} /><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></>} onClickMore={this.handleLoadMoreAccounts}>
-              {accounts.take(INITIAL_DISPLAY).map(id => <Account key={id} id={id} />)}
-            </SearchSection>
-          )}
-
-          {hashtags.size > 0 && (
-            <SearchSection key='hashtags' title={<><Icon id='hashtag' icon={TagIcon} /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></>} onClickMore={this.handleLoadMoreHashtags}>
-              {hashtags.take(INITIAL_DISPLAY).map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
-            </SearchSection>
-          )}
-
-          {statuses.size > 0 && (
-            <SearchSection key='statuses' title={<><Icon id='quote-right' icon={FindInPageIcon} /><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></>} onClickMore={this.handleLoadMoreStatuses}>
-              {statuses.take(INITIAL_DISPLAY).map(id => <Status key={id} id={id} />)}
-            </SearchSection>
-          )}
-        </>
-      ) : [];
-      break;
-    case 'accounts':
-      filteredResults = renderAccounts(accounts);
-      break;
-    case 'hashtags':
-      filteredResults = renderHashtags(hashtags);
-      break;
-    case 'statuses':
-      filteredResults = renderStatuses(statuses);
-      break;
-    }
-
-    return (
-      <>
-        <div className='account__section-headline'>
-          <button onClick={this.handleSelectAll} className={type === 'all' ? 'active' : undefined}><FormattedMessage id='search_results.all' defaultMessage='All' /></button>
-          <button onClick={this.handleSelectAccounts} className={type === 'accounts' ? 'active' : undefined}><FormattedMessage id='search_results.accounts' defaultMessage='Profiles' /></button>
-          <button onClick={this.handleSelectHashtags} className={type === 'hashtags' ? 'active' : undefined}><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></button>
-          <button onClick={this.handleSelectStatuses} className={type === 'statuses' ? 'active' : undefined}><FormattedMessage id='search_results.statuses' defaultMessage='Posts' /></button>
-        </div>
-
-        <div className='explore__search-results' data-nosnippet>
-          <ScrollableList
-            scrollKey='search-results'
-            isLoading={isLoading}
-            onLoadMore={this.handleLoadMore}
-            hasMore={hasMore}
-            emptyMessage={<FormattedMessage id='search_results.nothing_found' defaultMessage='Could not find anything for these search terms' />}
-            bindToDocument
-          >
-            {filteredResults}
-          </ScrollableList>
-        </div>
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.title, { q })}</title>
-        </Helmet>
-      </>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps)(injectIntl(Results));

app/javascript/mastodon/features/favourites/index.jsx

@@ -12,11 +12,11 @@ import { debounce } from 'lodash';
 
 import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
 import { fetchFavourites, expandFavourites } from 'mastodon/actions/interactions';
+import { Account } from 'mastodon/components/account';
 import ColumnHeader from 'mastodon/components/column_header';
 import { Icon }  from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import ScrollableList from 'mastodon/components/scrollable_list';
-import AccountContainer from 'mastodon/containers/account_container';
 import Column from 'mastodon/features/ui/components/column';
 
 const messages = defineMessages({
@@ -87,7 +87,7 @@ class Favourites extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
+            <Account key={id} id={id} />,
           )}
         </ScrollableList>
 

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

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
+import { Account } from 'mastodon/components/account';
 import { TimelineHint } from 'mastodon/components/timeline_hint';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 import { normalizeForLookup } from 'mastodon/reducers/accounts_map';
@@ -23,7 +24,6 @@ import {
 import { ColumnBackButton } from '../../components/column_back_button';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
-import AccountContainer from '../../containers/account_container';
 import { LimitedAccountHint } from '../account_timeline/components/limited_account_hint';
 import HeaderContainer from '../account_timeline/containers/header_container';
 import Column from '../ui/components/column';
@@ -175,7 +175,7 @@ class Followers extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {forceEmptyState ? [] : accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
+            <Account key={id} id={id} />,
           )}
         </ScrollableList>
       </Column>

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

@@ -8,6 +8,7 @@ import { connect } from 'react-redux';
 
 import { debounce } from 'lodash';
 
+import { Account } from 'mastodon/components/account';
 import { TimelineHint } from 'mastodon/components/timeline_hint';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 import { normalizeForLookup } from 'mastodon/reducers/accounts_map';
@@ -23,7 +24,6 @@ import {
 import { ColumnBackButton } from '../../components/column_back_button';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
-import AccountContainer from '../../containers/account_container';
 import { LimitedAccountHint } from '../account_timeline/components/limited_account_hint';
 import HeaderContainer from '../account_timeline/containers/header_container';
 import Column from '../ui/components/column';
@@ -175,7 +175,7 @@ class Following extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {forceEmptyState ? [] : accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
+            <Account key={id} id={id} />,
           )}
         </ScrollableList>
       </Column>

app/javascript/mastodon/features/getting_started/components/announcements.jsx

@@ -85,7 +85,7 @@ class ContentWithRouter extends ImmutablePureComponent {
       }
 
       link.setAttribute('target', '_blank');
-      link.setAttribute('rel', 'noopener noreferrer');
+      link.setAttribute('rel', 'noopener');
     }
   }
 

app/javascript/mastodon/features/getting_started/index.jsx

@@ -25,7 +25,7 @@ import StarIcon from '@/material-icons/400-24px/star.svg?react';
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
-import LinkFooter from 'mastodon/features/ui/components/link_footer';
+import { LinkFooter } from 'mastodon/features/ui/components/link_footer';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { canManageReports, canViewAdminDashboard } from 'mastodon/permissions';
 

app/javascript/mastodon/features/hashtag_timeline/components/hashtag_header.jsx

@@ -1,94 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
-import { Button } from 'mastodon/components/button';
-import { ShortNumber } from 'mastodon/components/short_number';
-import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
-import { withIdentity } from 'mastodon/identity_context';
-import { PERMISSION_MANAGE_TAXONOMIES } from 'mastodon/permissions';
-
-const messages = defineMessages({
-  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
-  unfollowHashtag: { id: 'hashtag.unfollow', defaultMessage: 'Unfollow hashtag' },
-  adminModeration: { id: 'hashtag.admin_moderation', defaultMessage: 'Open moderation interface for #{name}' },
-});
-
-const usesRenderer = (displayNumber, pluralReady) => (
-  <FormattedMessage
-    id='hashtag.counter_by_uses'
-    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}}'
-    values={{
-      count: pluralReady,
-      counter: <strong>{displayNumber}</strong>,
-    }}
-  />
-);
-
-const peopleRenderer = (displayNumber, pluralReady) => (
-  <FormattedMessage
-    id='hashtag.counter_by_accounts'
-    defaultMessage='{count, plural, one {{counter} participant} other {{counter} participants}}'
-    values={{
-      count: pluralReady,
-      counter: <strong>{displayNumber}</strong>,
-    }}
-  />
-);
-
-const usesTodayRenderer = (displayNumber, pluralReady) => (
-  <FormattedMessage
-    id='hashtag.counter_by_uses_today'
-    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}} today'
-    values={{
-      count: pluralReady,
-      counter: <strong>{displayNumber}</strong>,
-    }}
-  />
-);
-
-export const HashtagHeader = withIdentity(injectIntl(({ tag, intl, disabled, onClick, identity }) => {
-  if (!tag) {
-    return null;
-  }
-
-  const { signedIn, permissions } = identity;
-  const menu = [];
-
-  if (signedIn && (permissions & PERMISSION_MANAGE_TAXONOMIES) === PERMISSION_MANAGE_TAXONOMIES ) {
-    menu.push({ text: intl.formatMessage(messages.adminModeration, { name: tag.get("name") }), href: `/admin/tags/${tag.get('id')}` });
-  }
-
-  const [uses, people] = tag.get('history').reduce((arr, day) => [arr[0] + day.get('uses') * 1, arr[1] + day.get('accounts') * 1], [0, 0]);
-  const dividingCircle = <span aria-hidden>{' · '}</span>;
-
-  return (
-    <div className='hashtag-header'>
-      <div className='hashtag-header__header'>
-        <h1>#{tag.get('name')}</h1>
-        <div className='hashtag-header__header__buttons'>
-          { menu.length > 0 && <DropdownMenuContainer disabled={menu.length === 0} items={menu} icon='ellipsis-v' iconComponent={MoreHorizIcon} size={24} direction='right' /> }
-          <Button onClick={onClick} text={intl.formatMessage(tag.get('following') ? messages.unfollowHashtag : messages.followHashtag)} disabled={disabled} />
-        </div>
-      </div>
-
-      <div>
-        <ShortNumber value={uses} renderer={usesRenderer} />
-        {dividingCircle}
-        <ShortNumber value={people} renderer={peopleRenderer} />
-        {dividingCircle}
-        <ShortNumber value={tag.getIn(['history', 0, 'uses']) * 1} renderer={usesTodayRenderer} />
-      </div>
-    </div>
-  );
-}));
-
-HashtagHeader.propTypes = {
-  tag: ImmutablePropTypes.map,
-  disabled: PropTypes.bool,
-  onClick: PropTypes.func,
-  intl: PropTypes.object,
-};

app/javascript/mastodon/features/hashtag_timeline/components/hashtag_header.tsx

@@ -0,0 +1,188 @@
+import { useCallback, useMemo, useState, useEffect } from 'react';
+
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+
+import { isFulfilled } from '@reduxjs/toolkit';
+
+import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
+import {
+  fetchHashtag,
+  followHashtag,
+  unfollowHashtag,
+} from 'mastodon/actions/tags_typed';
+import type { ApiHashtagJSON } from 'mastodon/api_types/tags';
+import { Button } from 'mastodon/components/button';
+import { ShortNumber } from 'mastodon/components/short_number';
+import DropdownMenu from 'mastodon/containers/dropdown_menu_container';
+import { useIdentity } from 'mastodon/identity_context';
+import { PERMISSION_MANAGE_TAXONOMIES } from 'mastodon/permissions';
+import { useAppDispatch } from 'mastodon/store';
+
+const messages = defineMessages({
+  followHashtag: { id: 'hashtag.follow', defaultMessage: 'Follow hashtag' },
+  unfollowHashtag: {
+    id: 'hashtag.unfollow',
+    defaultMessage: 'Unfollow hashtag',
+  },
+  adminModeration: {
+    id: 'hashtag.admin_moderation',
+    defaultMessage: 'Open moderation interface for #{name}',
+  },
+});
+
+const usesRenderer = (displayNumber: React.ReactNode, pluralReady: number) => (
+  <FormattedMessage
+    id='hashtag.counter_by_uses'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+const peopleRenderer = (
+  displayNumber: React.ReactNode,
+  pluralReady: number,
+) => (
+  <FormattedMessage
+    id='hashtag.counter_by_accounts'
+    defaultMessage='{count, plural, one {{counter} participant} other {{counter} participants}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+const usesTodayRenderer = (
+  displayNumber: React.ReactNode,
+  pluralReady: number,
+) => (
+  <FormattedMessage
+    id='hashtag.counter_by_uses_today'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}} today'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
+
+export const HashtagHeader: React.FC<{
+  tagId: string;
+}> = ({ tagId }) => {
+  const intl = useIntl();
+  const { signedIn, permissions } = useIdentity();
+  const dispatch = useAppDispatch();
+  const [tag, setTag] = useState<ApiHashtagJSON>();
+
+  useEffect(() => {
+    void dispatch(fetchHashtag({ tagId })).then((result) => {
+      if (isFulfilled(result)) {
+        setTag(result.payload);
+      }
+
+      return '';
+    });
+  }, [dispatch, tagId, setTag]);
+
+  const menu = useMemo(() => {
+    const tmp = [];
+
+    if (
+      tag &&
+      signedIn &&
+      (permissions & PERMISSION_MANAGE_TAXONOMIES) ===
+        PERMISSION_MANAGE_TAXONOMIES
+    ) {
+      tmp.push({
+        text: intl.formatMessage(messages.adminModeration, { name: tag.id }),
+        href: `/admin/tags/${tag.id}`,
+      });
+    }
+
+    return tmp;
+  }, [signedIn, permissions, intl, tag]);
+
+  const handleFollow = useCallback(() => {
+    if (!signedIn || !tag) {
+      return;
+    }
+
+    if (tag.following) {
+      setTag((hashtag) => hashtag && { ...hashtag, following: false });
+
+      void dispatch(unfollowHashtag({ tagId })).then((result) => {
+        if (isFulfilled(result)) {
+          setTag(result.payload);
+        }
+
+        return '';
+      });
+    } else {
+      setTag((hashtag) => hashtag && { ...hashtag, following: true });
+
+      void dispatch(followHashtag({ tagId })).then((result) => {
+        if (isFulfilled(result)) {
+          setTag(result.payload);
+        }
+
+        return '';
+      });
+    }
+  }, [dispatch, setTag, signedIn, tag, tagId]);
+
+  if (!tag) {
+    return null;
+  }
+
+  const [uses, people] = tag.history.reduce(
+    (arr, day) => [
+      arr[0] + parseInt(day.uses),
+      arr[1] + parseInt(day.accounts),
+    ],
+    [0, 0],
+  );
+  const dividingCircle = <span aria-hidden>{' · '}</span>;
+
+  return (
+    <div className='hashtag-header'>
+      <div className='hashtag-header__header'>
+        <h1>#{tag.name}</h1>
+
+        <div className='hashtag-header__header__buttons'>
+          {menu.length > 0 && (
+            <DropdownMenu
+              disabled={menu.length === 0}
+              items={menu}
+              icon='ellipsis-v'
+              iconComponent={MoreHorizIcon}
+              size={24}
+              direction='right'
+            />
+          )}
+
+          <Button
+            onClick={handleFollow}
+            text={intl.formatMessage(
+              tag.following ? messages.unfollowHashtag : messages.followHashtag,
+            )}
+            disabled={!signedIn}
+          />
+        </div>
+      </div>
+
+      <div>
+        <ShortNumber value={uses} renderer={usesRenderer} />
+        {dividingCircle}
+        <ShortNumber value={people} renderer={peopleRenderer} />
+        {dividingCircle}
+        <ShortNumber
+          value={parseInt(tag.history[0].uses)}
+          renderer={usesTodayRenderer}
+        />
+      </div>
+    </div>
+  );
+};

app/javascript/mastodon/features/hashtag_timeline/index.jsx

@@ -5,7 +5,6 @@ import { FormattedMessage } from 'react-intl';
 
 import { Helmet } from 'react-helmet';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
 import { isEqual } from 'lodash';
@@ -13,7 +12,6 @@ import { isEqual } from 'lodash';
 import TagIcon from '@/material-icons/400-24px/tag.svg?react';
 import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns';
 import { connectHashtagStream } from 'mastodon/actions/streaming';
-import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/tags';
 import { expandHashtagTimeline, clearTimeline } from 'mastodon/actions/timelines';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
@@ -26,7 +24,6 @@ import ColumnSettingsContainer from './containers/column_settings_container';
 
 const mapStateToProps = (state, props) => ({
   hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}${props.params.local ? ':local' : ''}`, 'unread']) > 0,
-  tag: state.getIn(['tags', props.params.id]),
 });
 
 class HashtagTimeline extends PureComponent {
@@ -38,7 +35,6 @@ class HashtagTimeline extends PureComponent {
     columnId: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
     hasUnread: PropTypes.bool,
-    tag: ImmutablePropTypes.map,
     multiColumn: PropTypes.bool,
   };
 
@@ -130,7 +126,6 @@ class HashtagTimeline extends PureComponent {
 
     this._subscribe(dispatch, id, tags, local);
     dispatch(expandHashtagTimeline(id, { tags, local }));
-    dispatch(fetchHashtag(id));
   }
 
   componentDidMount () {
@@ -162,27 +157,10 @@ class HashtagTimeline extends PureComponent {
     dispatch(expandHashtagTimeline(id, { maxId, tags, local }));
   };
 
-  handleFollow = () => {
-    const { dispatch, params, tag } = this.props;
-    const { id } = params;
-    const { signedIn } = this.props.identity;
-
-    if (!signedIn) {
-      return;
-    }
-
-    if (tag.get('following')) {
-      dispatch(unfollowHashtag(id));
-    } else {
-      dispatch(followHashtag(id));
-    }
-  };
-
   render () {
-    const { hasUnread, columnId, multiColumn, tag } = this.props;
+    const { hasUnread, columnId, multiColumn } = this.props;
     const { id, local } = this.props.params;
     const pinned = !!columnId;
-    const { signedIn } = this.props.identity;
 
     return (
       <Column bindToDocument={!multiColumn} ref={this.setRef} label={`#${id}`}>
@@ -202,7 +180,7 @@ class HashtagTimeline extends PureComponent {
         </ColumnHeader>
 
         <StatusListContainer
-          prepend={pinned ? null : <HashtagHeader tag={tag} disabled={!signedIn} onClick={this.handleFollow} />}
+          prepend={pinned ? null : <HashtagHeader tagId={id} />}
           alwaysPrepend
           trackScroll={!pinned}
           scrollKey={`hashtag_timeline-${columnId}`}

app/javascript/mastodon/features/interaction_modal/index.jsx

@@ -1,427 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-
-import classNames from 'classnames';
-
-import { connect } from 'react-redux';
-
-import { throttle, escapeRegExp } from 'lodash';
-
-import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
-import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
-import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
-import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
-import StarIcon from '@/material-icons/400-24px/star.svg?react';
-import { openModal, closeModal } from 'mastodon/actions/modal';
-import api from 'mastodon/api';
-import { Button } from 'mastodon/components/button';
-import { Icon }  from 'mastodon/components/icon';
-import { registrationsOpen, sso_redirect } from 'mastodon/initial_state';
-
-const messages = defineMessages({
-  loginPrompt: { id: 'interaction_modal.login.prompt', defaultMessage: 'Domain of your home server, e.g. mastodon.social' },
-});
-
-const mapStateToProps = (state, { accountId }) => ({
-  displayNameHtml: state.getIn(['accounts', accountId, 'display_name_html']),
-  signupUrl: state.getIn(['server', 'server', 'registrations', 'url'], null) || '/auth/sign_up',
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  onSignupClick() {
-    dispatch(closeModal({
-      modalType: undefined,
-      ignoreFocus: false,
-    }));
-    dispatch(openModal({ modalType: 'CLOSED_REGISTRATIONS' }));
-  },
-});
-
-const PERSISTENCE_KEY = 'mastodon_home';
-
-const isValidDomain = value => {
-  const url = new URL('https:///path');
-  url.hostname = value;
-  return url.hostname === value;
-};
-
-const valueToDomain = value => {
-  // If the user starts typing an URL
-  if (/^https?:\/\//.test(value)) {
-    try {
-      const url = new URL(value);
-
-      // Consider that if there is a path, the URL is more meaningful than a bare domain
-      if (url.pathname.length > 1) {
-        return '';
-      }
-
-      return url.host;
-    } catch {
-      return undefined;
-    }
-  // If the user writes their full handle including username
-  } else if (value.includes('@')) {
-    if (value.replace(/^@/, '').split('@').length > 2) {
-      return undefined;
-    }
-    return '';
-  }
-
-  return value;
-};
-
-const addInputToOptions = (value, options) => {
-  value = value.trim();
-
-  if (value.includes('.') && isValidDomain(value)) {
-    return [value].concat(options.filter((x) => x !== value));
-  }
-
-  return options;
-};
-
-class LoginForm extends React.PureComponent {
-
-  static propTypes = {
-    resourceUrl: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-  };
-
-  state = {
-    value: localStorage ? (localStorage.getItem(PERSISTENCE_KEY) || '') : '',
-    expanded: false,
-    selectedOption: -1,
-    isLoading: false,
-    isSubmitting: false,
-    error: false,
-    options: [],
-    networkOptions: [],
-  };
-
-  setRef = c => {
-    this.input = c;
-  };
-
-  isValueValid = (value) => {
-    let likelyAcct = false;
-    let url = null;
-
-    if (value.startsWith('/')) {
-      return false;
-    }
-
-    if (value.startsWith('@')) {
-      value = value.slice(1);
-      likelyAcct = true;
-    }
-
-    // The user is in the middle of typing something, do not error out
-    if (value === '') {
-      return true;
-    }
-
-    if (/^https?:\/\//.test(value) && !likelyAcct) {
-      url = value;
-    } else {
-      url = `https://${value}`;
-    }
-
-    try {
-      new URL(url);
-      return true;
-    } catch {
-      return false;
-    }
-  };
-
-  handleChange = ({ target }) => {
-    const error = !this.isValueValid(target.value);
-    this.setState(state => ({ error, value: target.value, isLoading: true, options: addInputToOptions(target.value, state.networkOptions) }), () => this._loadOptions());
-  };
-
-  handleMessage = (event) => {
-    const { resourceUrl } = this.props;
-
-    if (event.origin !== window.origin || event.source !== this.iframeRef.contentWindow) {
-      return;
-    }
-
-    if (event.data?.type === 'fetchInteractionURL-failure') {
-      this.setState({ isSubmitting: false, error: true });
-    } else if (event.data?.type === 'fetchInteractionURL-success') {
-      if (/^https?:\/\//.test(event.data.template)) {
-        try {
-          const url = new URL(event.data.template.replace('{uri}', encodeURIComponent(resourceUrl)));
-
-          if (localStorage) {
-            localStorage.setItem(PERSISTENCE_KEY, event.data.uri_or_domain);
-          }
-
-          window.location.href = url;
-        } catch (e) {
-          console.error(e);
-          this.setState({ isSubmitting: false, error: true });
-        }
-      } else {
-        this.setState({ isSubmitting: false, error: true });
-      }
-    }
-  };
-
-  componentDidMount () {
-    window.addEventListener('message', this.handleMessage);
-  }
-
-  componentWillUnmount () {
-    window.removeEventListener('message', this.handleMessage);
-  }
-
-  handleSubmit = () => {
-    const { value } = this.state;
-
-    this.setState({ isSubmitting: true });
-
-    this.iframeRef.contentWindow.postMessage({
-      type: 'fetchInteractionURL',
-      uri_or_domain: value.trim(),
-    }, window.origin);
-  };
-
-  setIFrameRef = (iframe) => {
-    this.iframeRef = iframe;
-  };
-
-  handleFocus = () => {
-    this.setState({ expanded: true });
-  };
-
-  handleBlur = () => {
-    this.setState({ expanded: false });
-  };
-
-  handleKeyDown = (e) => {
-    const { options, selectedOption } = this.state;
-
-    switch(e.key) {
-    case 'ArrowDown':
-      e.preventDefault();
-
-      if (options.length > 0) {
-        this.setState({ selectedOption: Math.min(selectedOption + 1, options.length - 1) });
-      }
-
-      break;
-    case 'ArrowUp':
-      e.preventDefault();
-
-      if (options.length > 0) {
-        this.setState({ selectedOption: Math.max(selectedOption - 1, -1) });
-      }
-
-      break;
-    case 'Enter':
-      e.preventDefault();
-
-      if (selectedOption === -1) {
-        this.handleSubmit();
-      } else if (options.length > 0) {
-        this.setState({ value: options[selectedOption], error: false }, () => this.handleSubmit());
-      }
-
-      break;
-    }
-  };
-
-  handleOptionClick = e => {
-    const index  = Number(e.currentTarget.getAttribute('data-index'));
-    const option = this.state.options[index];
-
-    e.preventDefault();
-    this.setState({ selectedOption: index, value: option, error: false }, () => this.handleSubmit());
-  };
-
-  _loadOptions = throttle(() => {
-    const { value } = this.state;
-
-    const domain = valueToDomain(value.trim());
-
-    if (typeof domain === 'undefined') {
-      this.setState({ options: [], networkOptions: [], isLoading: false, error: true });
-      return;
-    }
-
-    if (domain.length === 0) {
-      this.setState({ options: [], networkOptions: [], isLoading: false });
-      return;
-    }
-
-    api().get('/api/v1/peers/search', { params: { q: domain } }).then(({ data }) => {
-      if (!data) {
-        data = [];
-      }
-
-      this.setState((state) => ({ networkOptions: data, options: addInputToOptions(state.value, data), isLoading: false }));
-    }).catch(() => {
-      this.setState({ isLoading: false });
-    });
-  }, 200, { leading: true, trailing: true });
-
-  render () {
-    const { intl } = this.props;
-    const { value, expanded, options, selectedOption, error, isSubmitting } = this.state;
-    const domain = (valueToDomain(value) || '').trim();
-    const domainRegExp = new RegExp(`(${escapeRegExp(domain)})`, 'gi');
-    const hasPopOut = domain.length > 0 && options.length > 0;
-
-    return (
-      <div className={classNames('interaction-modal__login', { focused: expanded, expanded: hasPopOut, invalid: error })}>
-
-        <iframe
-          ref={this.setIFrameRef}
-          style={{display: 'none'}}
-          src='/remote_interaction_helper'
-          sandbox='allow-scripts allow-same-origin'
-          title='remote interaction helper'
-        />
-
-        <div className='interaction-modal__login__input'>
-          <input
-            ref={this.setRef}
-            type='text'
-            value={value}
-            placeholder={intl.formatMessage(messages.loginPrompt)}
-            aria-label={intl.formatMessage(messages.loginPrompt)}
-            autoFocus
-            onChange={this.handleChange}
-            onFocus={this.handleFocus}
-            onBlur={this.handleBlur}
-            onKeyDown={this.handleKeyDown}
-            autoComplete='off'
-            autoCapitalize='off'
-            spellCheck='false'
-          />
-
-          <Button onClick={this.handleSubmit} disabled={isSubmitting || error}><FormattedMessage id='interaction_modal.login.action' defaultMessage='Take me home' /></Button>
-        </div>
-
-        {hasPopOut && (
-          <div className='search__popout'>
-            <div className='search__popout__menu'>
-              {options.map((option, i) => (
-                <button key={option} onMouseDown={this.handleOptionClick} data-index={i} className={classNames('search__popout__menu__item', { selected: selectedOption === i })}>
-                  {option.split(domainRegExp).map((part, i) => (
-                    part.toLowerCase() === domain.toLowerCase() ? (
-                      <mark key={i}>
-                        {part}
-                      </mark>
-                    ) : (
-                      <span key={i}>
-                        {part}
-                      </span>
-                    )
-                  ))}
-                </button>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-
-}
-
-const IntlLoginForm = injectIntl(LoginForm);
-
-class InteractionModal extends React.PureComponent {
-
-  static propTypes = {
-    displayNameHtml: PropTypes.string,
-    url: PropTypes.string,
-    type: PropTypes.oneOf(['reply', 'reblog', 'favourite', 'follow', 'vote']),
-    onSignupClick: PropTypes.func.isRequired,
-    signupUrl: PropTypes.string.isRequired,
-  };
-
-  handleSignupClick = () => {
-    this.props.onSignupClick();
-  };
-
-  render () {
-    const { url, type, displayNameHtml, signupUrl } = this.props;
-
-    const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
-
-    let title, actionDescription, icon;
-
-    switch(type) {
-    case 'reply':
-      icon = <Icon id='reply' icon={ReplyIcon} />;
-      title = <FormattedMessage id='interaction_modal.title.reply' defaultMessage="Reply to {name}'s post" values={{ name }} />;
-      actionDescription = <FormattedMessage id='interaction_modal.description.reply' defaultMessage='With an account on Mastodon, you can respond to this post.' />;
-      break;
-    case 'reblog':
-      icon = <Icon id='retweet' icon={RepeatIcon} />;
-      title = <FormattedMessage id='interaction_modal.title.reblog' defaultMessage="Boost {name}'s post" values={{ name }} />;
-      actionDescription = <FormattedMessage id='interaction_modal.description.reblog' defaultMessage='With an account on Mastodon, you can boost this post to share it with your own followers.' />;
-      break;
-    case 'favourite':
-      icon = <Icon id='star' icon={StarIcon} />;
-      title = <FormattedMessage id='interaction_modal.title.favourite' defaultMessage="Favorite {name}'s post" values={{ name }} />;
-      actionDescription = <FormattedMessage id='interaction_modal.description.favourite' defaultMessage='With an account on Mastodon, you can favorite this post to let the author know you appreciate it and save it for later.' />;
-      break;
-    case 'follow':
-      icon = <Icon id='user-plus' icon={PersonAddIcon} />;
-      title = <FormattedMessage id='interaction_modal.title.follow' defaultMessage='Follow {name}' values={{ name }} />;
-      actionDescription = <FormattedMessage id='interaction_modal.description.follow' defaultMessage='With an account on Mastodon, you can follow {name} to receive their posts in your home feed.' values={{ name }} />;
-      break;
-    case 'vote':
-      icon = <Icon id='tasks' icon={InsertChartIcon} />;
-      title = <FormattedMessage id='interaction_modal.title.vote' defaultMessage="Vote in {name}'s poll" values={{ name }} />;
-      actionDescription = <FormattedMessage id='interaction_modal.description.vote' defaultMessage='With an account on Mastodon, you can vote in this poll.' />;
-      break;
-    }
-
-    let signupButton;
-
-    if (sso_redirect) {
-      signupButton = (
-        <a href={sso_redirect} data-method='post' className='link-button'>
-          <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-        </a>
-      );
-    } else if (registrationsOpen) {
-      signupButton = (
-        <a href={signupUrl} className='link-button'>
-          <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-        </a>
-      );
-    } else {
-      signupButton = (
-        <button className='link-button' onClick={this.handleSignupClick}>
-          <FormattedMessage id='sign_in_banner.create_account' defaultMessage='Create account' />
-        </button>
-      );
-    }
-
-    return (
-      <div className='modal-root__modal interaction-modal'>
-        <div className='interaction-modal__lead'>
-          <h3><span className='interaction-modal__icon'>{icon}</span> {title}</h3>
-          <p>{actionDescription} <strong><FormattedMessage id='interaction_modal.sign_in' defaultMessage='You are not logged in to this server. Where is your account hosted?' /></strong></p>
-        </div>
-
-        <IntlLoginForm resourceUrl={url} />
-
-        <p className='hint'><FormattedMessage id='interaction_modal.sign_in_hint' defaultMessage="Tip: That's the website where you signed up. If you don't remember, look for the welcome e-mail in your inbox. You can also enter your full username! (e.g. @Mastodon@mastodon.social)" /></p>
-        <p><FormattedMessage id='interaction_modal.no_account_yet' defaultMessage='Not on Mastodon?' /> {signupButton}</p>
-      </div>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(InteractionModal);

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

@@ -0,0 +1,581 @@
+import { useCallback, useEffect, useState, useRef } from 'react';
+
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+import { escapeRegExp } from 'lodash';
+import { useDebouncedCallback } from 'use-debounce';
+
+import InsertChartIcon from '@/material-icons/400-24px/insert_chart.svg?react';
+import PersonAddIcon from '@/material-icons/400-24px/person_add.svg?react';
+import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
+import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
+import StarIcon from '@/material-icons/400-24px/star.svg?react';
+import { openModal, closeModal } from 'mastodon/actions/modal';
+import { apiRequest } from 'mastodon/api';
+import { Button } from 'mastodon/components/button';
+import { Icon } from 'mastodon/components/icon';
+import {
+  domain as localDomain,
+  registrationsOpen,
+  sso_redirect,
+} from 'mastodon/initial_state';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+const messages = defineMessages({
+  loginPrompt: {
+    id: 'interaction_modal.username_prompt',
+    defaultMessage: 'E.g. {example}',
+  },
+});
+
+interface LoginFormMessage {
+  type:
+    | 'fetchInteractionURL'
+    | 'fetchInteractionURL-failure'
+    | 'fetchInteractionURL-success';
+  uri_or_domain: string;
+  template?: string;
+}
+
+const PERSISTENCE_KEY = 'mastodon_home';
+
+const EXAMPLE_VALUE = 'username@mastodon.social';
+
+const isValidDomain = (value: string) => {
+  const url = new URL('https:///path');
+  url.hostname = value;
+  return url.hostname === value;
+};
+
+const valueToDomain = (value: string): string | null => {
+  // If the user starts typing an URL
+  if (/^https?:\/\//.test(value)) {
+    try {
+      const url = new URL(value);
+
+      return url.host;
+    } catch {
+      return null;
+    }
+    // If the user writes their full handle including username
+  } else if (value.includes('@')) {
+    const [_, domain, ...other] = value.replace(/^@/, '').split('@');
+
+    if (!domain || other.length > 0) {
+      return null;
+    }
+
+    return valueToDomain(domain);
+  }
+
+  return value;
+};
+
+const addInputToOptions = (value: string, options: string[]) => {
+  value = value.trim();
+
+  if (value.includes('.') && isValidDomain(value)) {
+    return [value].concat(options.filter((x) => x !== value));
+  }
+
+  return options;
+};
+
+const isValueValid = (value: string) => {
+  let likelyAcct = false;
+  let url = null;
+
+  if (value.startsWith('/')) {
+    return false;
+  }
+
+  if (value.startsWith('@')) {
+    value = value.slice(1);
+    likelyAcct = true;
+  }
+
+  // The user is in the middle of typing something, do not error out
+  if (value === '') {
+    return true;
+  }
+
+  if (/^https?:\/\//.test(value) && !likelyAcct) {
+    url = value;
+  } else {
+    url = `https://${value}`;
+  }
+
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const sendToFrame = (frame: HTMLIFrameElement | null, value: string): void => {
+  if (valueToDomain(value.trim()) === localDomain) {
+    window.location.href = '/auth/sign_in';
+    return;
+  }
+
+  frame?.contentWindow?.postMessage(
+    {
+      type: 'fetchInteractionURL',
+      uri_or_domain: value.trim(),
+    },
+    window.origin,
+  );
+};
+
+const LoginForm: React.FC<{
+  resourceUrl: string;
+}> = ({ resourceUrl }) => {
+  const intl = useIntl();
+  const [value, setValue] = useState(
+    localStorage.getItem(PERSISTENCE_KEY) ?? '',
+  );
+  const [expanded, setExpanded] = useState(false);
+  const [selectedOption, setSelectedOption] = useState(-1);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState(false);
+  const [options, setOptions] = useState<string[]>([]);
+  const [networkOptions, setNetworkOptions] = useState<string[]>([]);
+  const [valueChanged, setValueChanged] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+  const searchRequestRef = useRef<AbortController | null>(null);
+
+  useEffect(() => {
+    const handleMessage = (event: MessageEvent<LoginFormMessage>) => {
+      if (
+        event.origin !== window.origin ||
+        event.source !== iframeRef.current?.contentWindow
+      ) {
+        return;
+      }
+
+      if (event.data.type === 'fetchInteractionURL-failure') {
+        setIsSubmitting(false);
+        setError(true);
+      } else if (event.data.type === 'fetchInteractionURL-success') {
+        if (event.data.template && /^https?:\/\//.test(event.data.template)) {
+          try {
+            const url = new URL(
+              event.data.template.replace(
+                '{uri}',
+                encodeURIComponent(resourceUrl),
+              ),
+            );
+
+            localStorage.setItem(PERSISTENCE_KEY, event.data.uri_or_domain);
+
+            window.location.href = url.toString();
+          } catch {
+            setIsSubmitting(false);
+            setError(true);
+          }
+        } else {
+          setIsSubmitting(false);
+          setError(true);
+        }
+      }
+    };
+
+    window.addEventListener('message', handleMessage);
+
+    return () => {
+      window.removeEventListener('message', handleMessage);
+    };
+  }, [resourceUrl, setIsSubmitting, setError]);
+
+  const handleSearch = useDebouncedCallback(
+    (value: string) => {
+      if (searchRequestRef.current) {
+        searchRequestRef.current.abort();
+      }
+
+      const domain = valueToDomain(value.trim());
+
+      if (domain === null || domain.length === 0) {
+        setOptions([]);
+        setNetworkOptions([]);
+        return;
+      }
+
+      searchRequestRef.current = new AbortController();
+
+      void apiRequest<string[] | null>('GET', 'v1/peers/search', {
+        signal: searchRequestRef.current.signal,
+        params: {
+          q: domain,
+        },
+      })
+        .then((data) => {
+          setNetworkOptions(data ?? []);
+          setOptions(addInputToOptions(value, data ?? []));
+          return '';
+        })
+        .catch(() => {
+          // Nothing
+        });
+    },
+    500,
+    { leading: true, trailing: true },
+  );
+
+  const handleChange = useCallback(
+    ({ target: { value } }: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(value);
+      setValueChanged(true);
+      setError(!isValueValid(value));
+      setOptions(addInputToOptions(value, networkOptions));
+      handleSearch(value);
+    },
+    [
+      setError,
+      setValue,
+      setValueChanged,
+      setOptions,
+      networkOptions,
+      handleSearch,
+    ],
+  );
+
+  const handleSubmit = useCallback(() => {
+    setIsSubmitting(true);
+    sendToFrame(iframeRef.current, value);
+  }, [setIsSubmitting, value]);
+
+  const handleFocus = useCallback(() => {
+    setExpanded(true);
+  }, [setExpanded]);
+
+  const handleBlur = useCallback(() => {
+    setExpanded(false);
+  }, [setExpanded]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      const selectedOptionValue = options[selectedOption];
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+
+          if (options.length > 0) {
+            setSelectedOption((selectedOption) =>
+              Math.min(selectedOption + 1, options.length - 1),
+            );
+          }
+
+          break;
+        case 'ArrowUp':
+          e.preventDefault();
+
+          if (options.length > 0) {
+            setSelectedOption((selectedOption) =>
+              Math.max(selectedOption - 1, -1),
+            );
+          }
+
+          break;
+        case 'Enter':
+          e.preventDefault();
+
+          if (selectedOption === -1) {
+            handleSubmit();
+          } else if (options.length > 0 && selectedOptionValue) {
+            setError(false);
+            setValue(selectedOptionValue);
+            setIsSubmitting(true);
+            sendToFrame(iframeRef.current, selectedOptionValue);
+          }
+
+          break;
+      }
+    },
+    [
+      handleSubmit,
+      setSelectedOption,
+      setError,
+      setValue,
+      selectedOption,
+      options,
+    ],
+  );
+
+  const handleOptionClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault();
+
+      const index = Number(e.currentTarget.getAttribute('data-index'));
+      const option = options[index];
+
+      if (!option) {
+        return;
+      }
+
+      setSelectedOption(index);
+      setValue(option);
+      setError(false);
+      setIsSubmitting(true);
+      sendToFrame(iframeRef.current, option);
+    },
+    [options, setSelectedOption, setValue, setError],
+  );
+
+  const domain = (valueToDomain(value) ?? '').trim();
+  const domainRegExp = new RegExp(`(${escapeRegExp(domain)})`, 'gi');
+  const hasPopOut = valueChanged && domain.length > 0 && options.length > 0;
+
+  return (
+    <div
+      className={classNames('interaction-modal__login', {
+        focused: expanded,
+        expanded: hasPopOut,
+        invalid: error,
+      })}
+    >
+      <iframe
+        ref={iframeRef}
+        style={{ display: 'none' }}
+        src='/remote_interaction_helper'
+        sandbox='allow-scripts allow-same-origin'
+        title='remote interaction helper'
+      />
+
+      <div className='interaction-modal__login__input'>
+        <input
+          ref={inputRef}
+          type='text'
+          value={value}
+          placeholder={intl.formatMessage(messages.loginPrompt, {
+            example: EXAMPLE_VALUE,
+          })}
+          aria-label={intl.formatMessage(messages.loginPrompt, {
+            example: EXAMPLE_VALUE,
+          })}
+          // eslint-disable-next-line jsx-a11y/no-autofocus
+          autoFocus
+          onChange={handleChange}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          onKeyDown={handleKeyDown}
+          autoComplete='off'
+          autoCapitalize='off'
+          spellCheck='false'
+        />
+
+        <Button onClick={handleSubmit} disabled={isSubmitting || error}>
+          <FormattedMessage id='interaction_modal.go' defaultMessage='Go' />
+        </Button>
+      </div>
+
+      {hasPopOut && (
+        <div className='search__popout'>
+          <div className='search__popout__menu'>
+            {options.map((option, i) => (
+              <button
+                key={option}
+                onMouseDown={handleOptionClick}
+                data-index={i}
+                className={classNames('search__popout__menu__item', {
+                  selected: selectedOption === i,
+                })}
+              >
+                {option
+                  .split(domainRegExp)
+                  .map((part, i) =>
+                    part.toLowerCase() === domain.toLowerCase() ? (
+                      <mark key={i}>{part}</mark>
+                    ) : (
+                      <span key={i}>{part}</span>
+                    ),
+                  )}
+              </button>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const InteractionModal: React.FC<{
+  accountId: string;
+  url: string;
+  type: 'reply' | 'reblog' | 'favourite' | 'follow' | 'vote';
+}> = ({ accountId, url, type }) => {
+  const dispatch = useAppDispatch();
+  const displayNameHtml = useAppSelector(
+    (state) => state.accounts.get(accountId)?.display_name_html ?? '',
+  );
+  const signupUrl = useAppSelector(
+    (state) =>
+      (state.server.getIn(['server', 'registrations', 'url'], null) ||
+        '/auth/sign_up') as string,
+  );
+  const name = <bdi dangerouslySetInnerHTML={{ __html: displayNameHtml }} />;
+
+  const handleSignupClick = useCallback(() => {
+    dispatch(
+      closeModal({
+        modalType: undefined,
+        ignoreFocus: false,
+      }),
+    );
+
+    dispatch(
+      openModal({
+        modalType: 'CLOSED_REGISTRATIONS',
+        modalProps: {},
+      }),
+    );
+  }, [dispatch]);
+
+  let title: React.ReactNode,
+    icon: React.ReactNode,
+    actionPrompt: React.ReactNode;
+
+  switch (type) {
+    case 'reply':
+      icon = <Icon id='reply' icon={ReplyIcon} />;
+      title = (
+        <FormattedMessage
+          id='interaction_modal.title.reply'
+          defaultMessage="Reply to {name}'s post"
+          values={{ name }}
+        />
+      );
+      actionPrompt = (
+        <FormattedMessage
+          id='interaction_modal.action.reply'
+          defaultMessage='To continue, you need to reply from your account.'
+        />
+      );
+      break;
+    case 'reblog':
+      icon = <Icon id='retweet' icon={RepeatIcon} />;
+      title = (
+        <FormattedMessage
+          id='interaction_modal.title.reblog'
+          defaultMessage="Boost {name}'s post"
+          values={{ name }}
+        />
+      );
+      actionPrompt = (
+        <FormattedMessage
+          id='interaction_modal.action.reblog'
+          defaultMessage='To continue, you need to reblog from your account.'
+        />
+      );
+      break;
+    case 'favourite':
+      icon = <Icon id='star' icon={StarIcon} />;
+      title = (
+        <FormattedMessage
+          id='interaction_modal.title.favourite'
+          defaultMessage="Favorite {name}'s post"
+          values={{ name }}
+        />
+      );
+      actionPrompt = (
+        <FormattedMessage
+          id='interaction_modal.action.favourite'
+          defaultMessage='To continue, you need to favorite from your account.'
+        />
+      );
+      break;
+    case 'follow':
+      icon = <Icon id='user-plus' icon={PersonAddIcon} />;
+      title = (
+        <FormattedMessage
+          id='interaction_modal.title.follow'
+          defaultMessage='Follow {name}'
+          values={{ name }}
+        />
+      );
+      actionPrompt = (
+        <FormattedMessage
+          id='interaction_modal.action.follow'
+          defaultMessage='To continue, you need to follow from your account.'
+        />
+      );
+      break;
+    case 'vote':
+      icon = <Icon id='tasks' icon={InsertChartIcon} />;
+      title = (
+        <FormattedMessage
+          id='interaction_modal.title.vote'
+          defaultMessage="Vote in {name}'s poll"
+          values={{ name }}
+        />
+      );
+      actionPrompt = (
+        <FormattedMessage
+          id='interaction_modal.action.vote'
+          defaultMessage='To continue, you need to vote from your account.'
+        />
+      );
+      break;
+  }
+
+  let signupButton;
+
+  if (sso_redirect) {
+    signupButton = (
+      <a href={sso_redirect} data-method='post' className='link-button'>
+        <FormattedMessage
+          id='sign_in_banner.create_account'
+          defaultMessage='Create account'
+        />
+      </a>
+    );
+  } else if (registrationsOpen) {
+    signupButton = (
+      <a href={signupUrl} className='link-button'>
+        <FormattedMessage
+          id='sign_in_banner.create_account'
+          defaultMessage='Create account'
+        />
+      </a>
+    );
+  } else {
+    signupButton = (
+      <button className='link-button' onClick={handleSignupClick}>
+        <FormattedMessage
+          id='sign_in_banner.create_account'
+          defaultMessage='Create account'
+        />
+      </button>
+    );
+  }
+
+  return (
+    <div className='modal-root__modal interaction-modal'>
+      <div className='interaction-modal__lead'>
+        <h3>
+          <span className='interaction-modal__icon'>{icon}</span> {title}
+        </h3>
+        <p>{actionPrompt}</p>
+      </div>
+
+      <LoginForm resourceUrl={url} />
+
+      <p>
+        <FormattedMessage
+          id='interaction_modal.no_account_yet'
+          defaultMessage="Don't have an account yet?"
+        />{' '}
+        {signupButton}
+      </p>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default InteractionModal;

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

@@ -5,7 +5,8 @@ import { useParams } from 'react-router-dom';
 
 import ExploreIcon from '@/material-icons/400-24px/explore.svg?react';
 import { expandLinkTimeline } from 'mastodon/actions/timelines';
-import Column from 'mastodon/components/column';
+import { Column } from 'mastodon/components/column';
+import type { ColumnRef } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import StatusListContainer from 'mastodon/features/ui/containers/status_list_container';
 import type { Card } from 'mastodon/models/status';
@@ -17,7 +18,7 @@ export const LinkTimeline: React.FC<{
   const { url } = useParams<{ url: string }>();
   const decodedUrl = url ? decodeURIComponent(url) : undefined;
   const dispatch = useAppDispatch();
-  const columnRef = useRef<Column>(null);
+  const columnRef = useRef<ColumnRef>(null);
   const firstStatusId = useAppSelector((state) =>
     decodedUrl
       ? // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access

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

@@ -11,7 +11,7 @@ import MoreHorizIcon from '@/material-icons/400-24px/more_horiz.svg?react';
 import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
 import { fetchLists } from 'mastodon/actions/lists';
 import { openModal } from 'mastodon/actions/modal';
-import Column from 'mastodon/components/column';
+import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { Icon } from 'mastodon/components/icon';
 import ScrollableList from 'mastodon/components/scrollable_list';

app/javascript/mastodon/features/lists/members.tsx

@@ -9,9 +9,13 @@ import { useDebouncedCallback } from 'use-debounce';
 
 import ListAltIcon from '@/material-icons/400-24px/list_alt.svg?react';
 import SquigglyArrow from '@/svg-icons/squiggly_arrow.svg?react';
+import { fetchRelationships } from 'mastodon/actions/accounts';
+import { showAlertForError } from 'mastodon/actions/alerts';
 import { importFetchedAccounts } from 'mastodon/actions/importer';
 import { fetchList } from 'mastodon/actions/lists';
+import { openModal } from 'mastodon/actions/modal';
 import { apiRequest } from 'mastodon/api';
+import { apiFollowAccount } from 'mastodon/api/accounts';
 import {
   apiGetAccounts,
   apiAddAccountToList,
@@ -20,7 +24,7 @@ import {
 import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
 import { Avatar } from 'mastodon/components/avatar';
 import { Button } from 'mastodon/components/button';
-import Column from 'mastodon/components/column';
+import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { ColumnSearchHeader } from 'mastodon/components/column_search_header';
 import { FollowersCounter } from 'mastodon/components/counters';
@@ -28,13 +32,14 @@ import { DisplayName } from 'mastodon/components/display_name';
 import ScrollableList from 'mastodon/components/scrollable_list';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { me } from 'mastodon/initial_state';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
 const messages = defineMessages({
   heading: { id: 'column.list_members', defaultMessage: 'Manage list members' },
   placeholder: {
-    id: 'lists.search_placeholder',
-    defaultMessage: 'Search people you follow',
+    id: 'lists.search',
+    defaultMessage: 'Search',
   },
   enterSearch: { id: 'lists.add_to_list', defaultMessage: 'Add to list' },
   add: { id: 'lists.add_member', defaultMessage: 'Add' },
@@ -51,17 +56,51 @@ const AccountItem: React.FC<{
   onToggle: (accountId: string) => void;
 }> = ({ accountId, listId, partOfList, onToggle }) => {
   const intl = useIntl();
+  const dispatch = useAppDispatch();
   const account = useAppSelector((state) => state.accounts.get(accountId));
+  const relationship = useAppSelector((state) =>
+    accountId ? state.relationships.get(accountId) : undefined,
+  );
+  const following =
+    accountId === me || relationship?.following || relationship?.requested;
+
+  useEffect(() => {
+    if (accountId) {
+      dispatch(fetchRelationships([accountId]));
+    }
+  }, [dispatch, accountId]);
 
   const handleClick = useCallback(() => {
     if (partOfList) {
       void apiRemoveAccountFromList(listId, accountId);
+      onToggle(accountId);
     } else {
-      void apiAddAccountToList(listId, accountId);
+      if (following) {
+        void apiAddAccountToList(listId, accountId);
+        onToggle(accountId);
+      } else {
+        dispatch(
+          openModal({
+            modalType: 'CONFIRM_FOLLOW_TO_LIST',
+            modalProps: {
+              accountId,
+              onConfirm: () => {
+                apiFollowAccount(accountId)
+                  .then(() => apiAddAccountToList(listId, accountId))
+                  .then(() => {
+                    onToggle(accountId);
+                    return '';
+                  })
+                  .catch((err: unknown) => {
+                    dispatch(showAlertForError(err));
+                  });
+              },
+            },
+          }),
+        );
+      }
     }
-
-    onToggle(accountId);
-  }, [accountId, listId, partOfList, onToggle]);
+  }, [dispatch, accountId, following, listId, partOfList, onToggle]);
 
   if (!account) {
     return null;
@@ -186,8 +225,7 @@ const ListMembers: React.FC<{
         signal: searchRequestRef.current.signal,
         params: {
           q: value,
-          resolve: false,
-          following: true,
+          resolve: true,
         },
       })
         .then((data) => {

app/javascript/mastodon/features/lists/new.tsx

@@ -14,7 +14,7 @@ import { fetchList } from 'mastodon/actions/lists';
 import { createList, updateList } from 'mastodon/actions/lists_typed';
 import { apiGetAccounts } from 'mastodon/api/lists';
 import type { RepliesPolicyType } from 'mastodon/api_types/lists';
-import Column from 'mastodon/components/column';
+import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { useAppDispatch, useAppSelector } from 'mastodon/store';

app/javascript/mastodon/features/mutes/index.jsx

@@ -11,11 +11,11 @@ import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
 import VolumeOffIcon from '@/material-icons/400-24px/volume_off.svg?react';
+import { Account } from 'mastodon/components/account';
 
 import { fetchMutes, expandMutes } from '../../actions/mutes';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
-import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({
@@ -72,7 +72,7 @@ class Mutes extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {accountIds.map(id =>
-            <AccountContainer key={id} id={id} defaultAction='mute' />,
+            <Account key={id} id={id} defaultAction='mute' />,
           )}
         </ScrollableList>
 

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -18,8 +18,8 @@ import PersonIcon from '@/material-icons/400-24px/person-fill.svg?react';
 import PersonAddIcon from '@/material-icons/400-24px/person_add-fill.svg?react';
 import RepeatIcon from '@/material-icons/400-24px/repeat.svg?react';
 import StarIcon from '@/material-icons/400-24px/star-fill.svg?react';
+import { Account } from 'mastodon/components/account';
 import { Icon }  from 'mastodon/components/icon';
-import AccountContainer from 'mastodon/containers/account_container';
 import StatusContainer from 'mastodon/containers/status_container';
 import { me } from 'mastodon/initial_state';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
@@ -147,7 +147,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <Account id={account.get('id')} hidden={this.props.hidden} />
         </div>
       </HotKeys>
     );
@@ -167,7 +167,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <FollowRequestContainer id={account.get('id')} withNote={false} hidden={this.props.hidden} />
+          <FollowRequestContainer id={account.get('id')} hidden={this.props.hidden} />
         </div>
       </HotKeys>
     );
@@ -420,7 +420,7 @@ class Notification extends ImmutablePureComponent {
             </span>
           </div>
 
-          <AccountContainer id={account.get('id')} hidden={this.props.hidden} />
+          <Account id={account.get('id')} hidden={this.props.hidden} />
         </div>
       </HotKeys>
     );

app/javascript/mastodon/features/notifications/components/relationships_severance_event.jsx

@@ -28,7 +28,7 @@ export const RelationshipsSeveranceEvent = ({ type, target, followingCount, foll
 
       <div className='notification-group__main'>
         <p>{intl.formatMessage(messages[type], { from: <strong>{domain}</strong>, target: <strong>{target}</strong>, followingCount, followersCount })}</p>
-        <a href='/severed_relationships' target='_blank' rel='noopener noreferrer' className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></a>
+        <a href='/severed_relationships' target='_blank' rel='noopener' className='link-button'><FormattedMessage id='notification.relationships_severance_event.learn_more' defaultMessage='Learn more' /></a>
       </div>
     </div>
   );

app/javascript/mastodon/features/notifications/components/report.jsx

@@ -55,7 +55,7 @@ class Report extends ImmutablePureComponent {
           </div>
 
           <div className='notification__report__actions'>
-            <a href={`/admin/reports/${report.get('id')}`} className='button' target='_blank' rel='noopener noreferrer'>{intl.formatMessage(messages.openReport)}</a>
+            <a href={`/admin/reports/${report.get('id')}`} className='button' target='_blank' rel='noopener'>{intl.formatMessage(messages.openReport)}</a>
           </div>
         </div>
       </div>

app/javascript/mastodon/features/notifications_v2/components/embedded_status.tsx

@@ -70,7 +70,7 @@ export const EmbeddedStatus: React.FC<{ statusId: string }> = ({
         if (button === 0 && !(ctrlKey || metaKey)) {
           history.push(path);
         } else if (button === 1 || (button === 0 && (ctrlKey || metaKey))) {
-          window.open(path, '_blank', 'noreferrer noopener');
+          window.open(path, '_blank', 'noopener');
         }
       }
 

app/javascript/mastodon/features/notifications_v2/components/notification_favourite.tsx

@@ -33,6 +33,34 @@ const labelRenderer: LabelRenderer = (displayedName, total, seeMoreHref) => {
   );
 };
 
+const privateLabelRenderer: LabelRenderer = (
+  displayedName,
+  total,
+  seeMoreHref,
+) => {
+  if (total === 1)
+    return (
+      <FormattedMessage
+        id='notification.favourite_pm'
+        defaultMessage='{name} favorited your private mention'
+        values={{ name: displayedName }}
+      />
+    );
+
+  return (
+    <FormattedMessage
+      id='notification.favourite_pm.name_and_others_with_link'
+      defaultMessage='{name} and <a>{count, plural, one {# other} other {# others}}</a> favorited your private mention'
+      values={{
+        name: displayedName,
+        count: total - 1,
+        a: (chunks) =>
+          seeMoreHref ? <Link to={seeMoreHref}>{chunks}</Link> : chunks,
+      }}
+    />
+  );
+};
+
 export const NotificationFavourite: React.FC<{
   notification: NotificationGroupFavourite;
   unread: boolean;
@@ -44,6 +72,10 @@ export const NotificationFavourite: React.FC<{
         ?.acct,
   );
 
+  const isPrivateMention = useAppSelector(
+    (state) => state.statuses.getIn([statusId, 'visibility']) === 'direct',
+  );
+
   return (
     <NotificationGroupWithStatus
       type='favourite'
@@ -53,7 +85,7 @@ export const NotificationFavourite: React.FC<{
       statusId={notification.statusId}
       timestamp={notification.latest_page_notification_at}
       count={notification.notifications_count}
-      labelRenderer={labelRenderer}
+      labelRenderer={isPrivateMention ? privateLabelRenderer : labelRenderer}
       labelSeeMoreHref={
         statusAccount ? `/@${statusAccount}/${statusId}/favourites` : undefined
       }

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

@@ -36,7 +36,8 @@ import { useAppDispatch, useAppSelector } from 'mastodon/store';
 
 import { addColumn, removeColumn, moveColumn } from '../../actions/columns';
 import { submitMarkers } from '../../actions/markers';
-import Column from '../../components/column';
+import { Column } from '../../components/column';
+import type { ColumnRef } from '../../components/column';
 import { ColumnHeader } from '../../components/column_header';
 import { LoadGap } from '../../components/load_gap';
 import ScrollableList from '../../components/scrollable_list';
@@ -96,7 +97,7 @@ export const Notifications: React.FC<{
     selectNeedsNotificationPermission,
   );
 
-  const columnRef = useRef<Column>(null);
+  const columnRef = useRef<ColumnRef>(null);
 
   const selectChild = useCallback((index: number, alignTop: boolean) => {
     const container = columnRef.current?.node as HTMLElement | undefined;

app/javascript/mastodon/features/onboarding/follows.tsx

@@ -14,11 +14,11 @@ import { fetchSuggestions } from 'mastodon/actions/suggestions';
 import { markAsPartial } from 'mastodon/actions/timelines';
 import { apiRequest } from 'mastodon/api';
 import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
-import Column from 'mastodon/components/column';
+import { Account } from 'mastodon/components/account';
+import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { ColumnSearchHeader } from 'mastodon/components/column_search_header';
 import ScrollableList from 'mastodon/components/scrollable_list';
-import Account from 'mastodon/containers/account_container';
 import { useAppSelector, useAppDispatch } from 'mastodon/store';
 
 const messages = defineMessages({
@@ -170,12 +170,7 @@ export const Follows: React.FC<{
         }
       >
         {displayedAccountIds.map((accountId) => (
-          <Account
-            /* @ts-expect-error inferred props are wrong */
-            id={accountId}
-            key={accountId}
-            withBio
-          />
+          <Account id={accountId} key={accountId} withBio />
         ))}
       </ScrollableList>
 

app/javascript/mastodon/features/onboarding/profile.tsx

@@ -13,7 +13,7 @@ import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import PersonIcon from '@/material-icons/400-24px/person.svg?react';
 import { updateAccount } from 'mastodon/actions/accounts';
 import { Button } from 'mastodon/components/button';
-import Column from 'mastodon/components/column';
+import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import { Icon } from 'mastodon/components/icon';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';

app/javascript/mastodon/features/privacy_policy/index.jsx

@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage, FormattedDate, injectIntl, defineMessages } from 'react-intl';
-
-import { Helmet } from 'react-helmet';
-
-import api from 'mastodon/api';
-import Column from 'mastodon/components/column';
-import { Skeleton } from 'mastodon/components/skeleton';
-
-const messages = defineMessages({
-  title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },
-});
-
-class PrivacyPolicy extends PureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object,
-    multiColumn: PropTypes.bool,
-  };
-
-  state = {
-    content: null,
-    lastUpdated: null,
-    isLoading: true,
-  };
-
-  componentDidMount () {
-    api().get('/api/v1/instance/privacy_policy').then(({ data }) => {
-      this.setState({ content: data.content, lastUpdated: data.updated_at, isLoading: false });
-    }).catch(() => {
-      this.setState({ isLoading: false });
-    });
-  }
-
-  render () {
-    const { intl, multiColumn } = this.props;
-    const { isLoading, content, lastUpdated } = this.state;
-
-    return (
-      <Column bindToDocument={!multiColumn} label={intl.formatMessage(messages.title)}>
-        <div className='scrollable privacy-policy'>
-          <div className='column-title'>
-            <h3><FormattedMessage id='privacy_policy.title' defaultMessage='Privacy Policy' /></h3>
-            <p><FormattedMessage id='privacy_policy.last_updated' defaultMessage='Last updated {date}' values={{ date: isLoading ? <Skeleton width='10ch' /> : <FormattedDate value={lastUpdated} year='numeric' month='short' day='2-digit' /> }} /></p>
-          </div>
-
-          <div
-            className='privacy-policy__body prose'
-            dangerouslySetInnerHTML={{ __html: content }}
-          />
-        </div>
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.title)}</title>
-          <meta name='robots' content='all' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default injectIntl(PrivacyPolicy);

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

@@ -0,0 +1,90 @@
+import { useState, useEffect } from 'react';
+
+import {
+  FormattedMessage,
+  FormattedDate,
+  useIntl,
+  defineMessages,
+} from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import { apiGetPrivacyPolicy } from 'mastodon/api/instance';
+import type { ApiPrivacyPolicyJSON } from 'mastodon/api_types/instance';
+import { Column } from 'mastodon/components/column';
+import { Skeleton } from 'mastodon/components/skeleton';
+
+const messages = defineMessages({
+  title: { id: 'privacy_policy.title', defaultMessage: 'Privacy Policy' },
+});
+
+const PrivacyPolicy: React.FC<{
+  multiColumn: boolean;
+}> = ({ multiColumn }) => {
+  const intl = useIntl();
+  const [response, setResponse] = useState<ApiPrivacyPolicyJSON>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiGetPrivacyPolicy()
+      .then((data) => {
+        setResponse(data);
+        setLoading(false);
+        return '';
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      label={intl.formatMessage(messages.title)}
+    >
+      <div className='scrollable privacy-policy'>
+        <div className='column-title'>
+          <h3>
+            <FormattedMessage
+              id='privacy_policy.title'
+              defaultMessage='Privacy Policy'
+            />
+          </h3>
+          <p>
+            <FormattedMessage
+              id='privacy_policy.last_updated'
+              defaultMessage='Last updated {date}'
+              values={{
+                date: loading ? (
+                  <Skeleton width='10ch' />
+                ) : (
+                  <FormattedDate
+                    value={response?.updated_at}
+                    year='numeric'
+                    month='short'
+                    day='2-digit'
+                  />
+                ),
+              }}
+            />
+          </p>
+        </div>
+
+        {response && (
+          <div
+            className='privacy-policy__body prose'
+            dangerouslySetInnerHTML={{ __html: response.content }}
+          />
+        )}
+      </div>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='all' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default PrivacyPolicy;

app/javascript/mastodon/features/reblogs/index.jsx

@@ -11,13 +11,13 @@ import { connect } from 'react-redux';
 import { debounce } from 'lodash';
 
 import RefreshIcon from '@/material-icons/400-24px/refresh.svg?react';
+import { Account } from 'mastodon/components/account';
 import { Icon }  from 'mastodon/components/icon';
 
 import { fetchReblogs, expandReblogs } from '../../actions/interactions';
 import ColumnHeader from '../../components/column_header';
 import { LoadingIndicator } from '../../components/loading_indicator';
 import ScrollableList from '../../components/scrollable_list';
-import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({
@@ -88,7 +88,7 @@ class Reblogs extends ImmutablePureComponent {
           bindToDocument={!multiColumn}
         >
           {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
+            <Account key={id} id={id} />,
           )}
         </ScrollableList>
 

app/javascript/mastodon/features/search/components/search_section.tsx

@@ -0,0 +1,23 @@
+import { FormattedMessage } from 'react-intl';
+
+export const SearchSection: React.FC<{
+  title: React.ReactNode;
+  onClickMore?: () => void;
+  children: React.ReactNode;
+}> = ({ title, onClickMore, children }) => (
+  <div className='search-results__section'>
+    <div className='search-results__section__header'>
+      <h3>{title}</h3>
+      {onClickMore && (
+        <button onClick={onClickMore}>
+          <FormattedMessage
+            id='search_results.see_all'
+            defaultMessage='See all'
+          />
+        </button>
+      )}
+    </div>
+
+    {children}
+  </div>
+);

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

@@ -0,0 +1,304 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import { useSearchParam } from '@/hooks/useSearchParam';
+import FindInPageIcon from '@/material-icons/400-24px/find_in_page.svg?react';
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
+import SearchIcon from '@/material-icons/400-24px/search.svg?react';
+import TagIcon from '@/material-icons/400-24px/tag.svg?react';
+import { submitSearch, expandSearch } from 'mastodon/actions/search';
+import type { ApiSearchType } from 'mastodon/api_types/search';
+import { Account } from 'mastodon/components/account';
+import { Column } from 'mastodon/components/column';
+import type { ColumnRef } from 'mastodon/components/column';
+import { ColumnHeader } from 'mastodon/components/column_header';
+import { CompatibilityHashtag as Hashtag } from 'mastodon/components/hashtag';
+import { Icon } from 'mastodon/components/icon';
+import ScrollableList from 'mastodon/components/scrollable_list';
+import Status from 'mastodon/containers/status_container';
+import { Search } from 'mastodon/features/compose/components/search';
+import type { Hashtag as HashtagType } from 'mastodon/models/tags';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+import { SearchSection } from './components/search_section';
+
+const messages = defineMessages({
+  title: { id: 'search_results.title', defaultMessage: 'Search for "{q}"' },
+});
+
+const INITIAL_PAGE_LIMIT = 10;
+const INITIAL_DISPLAY = 4;
+
+const hidePeek = <T,>(list: T[]) => {
+  if (
+    list.length > INITIAL_PAGE_LIMIT &&
+    list.length % INITIAL_PAGE_LIMIT === 1
+  ) {
+    return list.slice(0, -2);
+  } else {
+    return list;
+  }
+};
+
+const renderAccounts = (accountIds: string[]) =>
+  hidePeek<string>(accountIds).map((id) => <Account key={id} id={id} />);
+
+const renderHashtags = (hashtags: HashtagType[]) =>
+  hidePeek<HashtagType>(hashtags).map((hashtag) => (
+    <Hashtag key={hashtag.name} hashtag={hashtag} />
+  ));
+
+const renderStatuses = (statusIds: string[]) =>
+  hidePeek<string>(statusIds).map((id) => (
+    // @ts-expect-error inferred props are wrong
+    <Status key={id} id={id} />
+  ));
+
+type SearchType = 'all' | ApiSearchType;
+
+const typeFromParam = (param?: string): SearchType => {
+  if (param && ['all', 'accounts', 'statuses', 'hashtags'].includes(param)) {
+    return param as SearchType;
+  } else {
+    return 'all';
+  }
+};
+
+export const SearchResults: React.FC<{ multiColumn: boolean }> = ({
+  multiColumn,
+}) => {
+  const columnRef = useRef<ColumnRef>(null);
+  const intl = useIntl();
+  const [q] = useSearchParam('q');
+  const [type, setType] = useSearchParam('type');
+  const isLoading = useAppSelector((state) => state.search.loading);
+  const results = useAppSelector((state) => state.search.results);
+  const dispatch = useAppDispatch();
+  const mappedType = typeFromParam(type);
+  const trimmedValue = q?.trim() ?? '';
+
+  useEffect(() => {
+    if (trimmedValue.length > 0) {
+      void dispatch(
+        submitSearch({
+          q: trimmedValue,
+          type: mappedType === 'all' ? undefined : mappedType,
+        }),
+      );
+    }
+  }, [dispatch, trimmedValue, mappedType]);
+
+  const handleHeaderClick = useCallback(() => {
+    columnRef.current?.scrollTop();
+  }, []);
+
+  const handleSelectAll = useCallback(() => {
+    setType(null);
+  }, [setType]);
+
+  const handleSelectAccounts = useCallback(() => {
+    setType('accounts');
+  }, [setType]);
+
+  const handleSelectHashtags = useCallback(() => {
+    setType('hashtags');
+  }, [setType]);
+
+  const handleSelectStatuses = useCallback(() => {
+    setType('statuses');
+  }, [setType]);
+
+  const handleLoadMore = useCallback(() => {
+    if (mappedType !== 'all') {
+      void dispatch(expandSearch({ type: mappedType }));
+    }
+  }, [dispatch, mappedType]);
+
+  // We request 1 more result than we display so we can tell if there'd be a next page
+  const hasMore =
+    mappedType !== 'all' && results
+      ? results[mappedType].length > INITIAL_PAGE_LIMIT &&
+        results[mappedType].length % INITIAL_PAGE_LIMIT === 1
+      : false;
+
+  let filteredResults;
+
+  if (results) {
+    switch (mappedType) {
+      case 'all':
+        filteredResults =
+          results.accounts.length +
+            results.hashtags.length +
+            results.statuses.length >
+          0 ? (
+            <>
+              {results.accounts.length > 0 && (
+                <SearchSection
+                  key='accounts'
+                  title={
+                    <>
+                      <Icon id='users' icon={PeopleIcon} />
+                      <FormattedMessage
+                        id='search_results.accounts'
+                        defaultMessage='Profiles'
+                      />
+                    </>
+                  }
+                  onClickMore={handleSelectAccounts}
+                >
+                  {results.accounts.slice(0, INITIAL_DISPLAY).map((id) => (
+                    <Account key={id} id={id} />
+                  ))}
+                </SearchSection>
+              )}
+
+              {results.hashtags.length > 0 && (
+                <SearchSection
+                  key='hashtags'
+                  title={
+                    <>
+                      <Icon id='hashtag' icon={TagIcon} />
+                      <FormattedMessage
+                        id='search_results.hashtags'
+                        defaultMessage='Hashtags'
+                      />
+                    </>
+                  }
+                  onClickMore={handleSelectHashtags}
+                >
+                  {results.hashtags.slice(0, INITIAL_DISPLAY).map((hashtag) => (
+                    <Hashtag key={hashtag.name} hashtag={hashtag} />
+                  ))}
+                </SearchSection>
+              )}
+
+              {results.statuses.length > 0 && (
+                <SearchSection
+                  key='statuses'
+                  title={
+                    <>
+                      <Icon id='quote-right' icon={FindInPageIcon} />
+                      <FormattedMessage
+                        id='search_results.statuses'
+                        defaultMessage='Posts'
+                      />
+                    </>
+                  }
+                  onClickMore={handleSelectStatuses}
+                >
+                  {results.statuses.slice(0, INITIAL_DISPLAY).map((id) => (
+                    // @ts-expect-error inferred props are wrong
+                    <Status key={id} id={id} />
+                  ))}
+                </SearchSection>
+              )}
+            </>
+          ) : (
+            []
+          );
+        break;
+      case 'accounts':
+        filteredResults = renderAccounts(results.accounts);
+        break;
+      case 'hashtags':
+        filteredResults = renderHashtags(results.hashtags);
+        break;
+      case 'statuses':
+        filteredResults = renderStatuses(results.statuses);
+        break;
+    }
+  }
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      ref={columnRef}
+      label={intl.formatMessage(messages.title, { q })}
+    >
+      <ColumnHeader
+        icon={'search'}
+        iconComponent={SearchIcon}
+        title={intl.formatMessage(messages.title, { q })}
+        onClick={handleHeaderClick}
+        multiColumn={multiColumn}
+      />
+
+      <div className='explore__search-header'>
+        <Search singleColumn initialValue={trimmedValue} />
+      </div>
+
+      <div className='account__section-headline'>
+        <button
+          onClick={handleSelectAll}
+          className={mappedType === 'all' ? 'active' : undefined}
+        >
+          <FormattedMessage id='search_results.all' defaultMessage='All' />
+        </button>
+        <button
+          onClick={handleSelectAccounts}
+          className={mappedType === 'accounts' ? 'active' : undefined}
+        >
+          <FormattedMessage
+            id='search_results.accounts'
+            defaultMessage='Profiles'
+          />
+        </button>
+        <button
+          onClick={handleSelectHashtags}
+          className={mappedType === 'hashtags' ? 'active' : undefined}
+        >
+          <FormattedMessage
+            id='search_results.hashtags'
+            defaultMessage='Hashtags'
+          />
+        </button>
+        <button
+          onClick={handleSelectStatuses}
+          className={mappedType === 'statuses' ? 'active' : undefined}
+        >
+          <FormattedMessage
+            id='search_results.statuses'
+            defaultMessage='Posts'
+          />
+        </button>
+      </div>
+
+      <div className='explore__search-results' data-nosnippet>
+        <ScrollableList
+          scrollKey='search-results'
+          isLoading={isLoading}
+          showLoading={isLoading && !results}
+          onLoadMore={handleLoadMore}
+          hasMore={hasMore}
+          emptyMessage={
+            trimmedValue.length > 0 ? (
+              <FormattedMessage
+                id='search_results.no_results'
+                defaultMessage='No results.'
+              />
+            ) : (
+              <FormattedMessage
+                id='search_results.no_search_yet'
+                defaultMessage='Try searching for posts, profiles or hashtags.'
+              />
+            )
+          }
+          bindToDocument
+        >
+          {filteredResults}
+        </ScrollableList>
+      </div>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title, { q })}</title>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default SearchResults;

app/javascript/mastodon/features/standalone/status/index.tsx

@@ -61,7 +61,7 @@ const Embed: React.FC<{ id: string }> = ({ id }) => {
         className='embed__overlay'
         href={permalink}
         target='_blank'
-        rel='noreferrer noopener'
+        rel='noopener'
         aria-label=''
       />
     </div>

app/javascript/mastodon/features/status/components/card.jsx

@@ -208,7 +208,7 @@ export default class Card extends PureComponent {
               <div className='status-card__actions' onClick={this.handleEmbedClick} role='none'>
                 <div>
                   <button type='button' onClick={this.handleEmbedClick}><Icon id='play' icon={PlayArrowIcon} /></button>
-                  <a href={card.get('url')} onClick={this.handleExternalLinkClick} target='_blank' rel='noopener noreferrer'><Icon id='external-link' icon={OpenInNewIcon} /></a>
+                  <a href={card.get('url')} onClick={this.handleExternalLinkClick} target='_blank' rel='noopener'><Icon id='external-link' icon={OpenInNewIcon} /></a>
                 </div>
               </div>
             ) : spoilerButton}
@@ -219,7 +219,7 @@ export default class Card extends PureComponent {
       return (
         <div className={classNames('status-card', { expanded: largeImage })} ref={this.setRef} onClick={revealed ? null : this.handleReveal} role={revealed ? 'button' : null}>
           {embed}
-          <a href={card.get('url')} target='_blank' rel='noopener noreferrer'>{description}</a>
+          <a href={card.get('url')} target='_blank' rel='noopener'>{description}</a>
         </div>
       );
     } else if (card.get('image')) {
@@ -239,7 +239,7 @@ export default class Card extends PureComponent {
 
     return (
       <>
-        <a href={card.get('url')} className={classNames('status-card', { expanded: largeImage, bottomless: showAuthor })} target='_blank' rel='noopener noreferrer' ref={this.setRef}>
+        <a href={card.get('url')} className={classNames('status-card', { expanded: largeImage, bottomless: showAuthor })} target='_blank' rel='noopener' ref={this.setRef}>
           {embed}
           {description}
         </a>

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

@@ -0,0 +1,95 @@
+import { useState, useEffect } from 'react';
+
+import {
+  FormattedMessage,
+  FormattedDate,
+  useIntl,
+  defineMessages,
+} from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import { apiGetTermsOfService } from 'mastodon/api/instance';
+import type { ApiTermsOfServiceJSON } from 'mastodon/api_types/instance';
+import { Column } from 'mastodon/components/column';
+import { Skeleton } from 'mastodon/components/skeleton';
+import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
+
+const messages = defineMessages({
+  title: { id: 'terms_of_service.title', defaultMessage: 'Terms of Service' },
+});
+
+const TermsOfService: React.FC<{
+  multiColumn: boolean;
+}> = ({ multiColumn }) => {
+  const intl = useIntl();
+  const [response, setResponse] = useState<ApiTermsOfServiceJSON>();
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    apiGetTermsOfService()
+      .then((data) => {
+        setResponse(data);
+        setLoading(false);
+        return '';
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  }, []);
+
+  if (!loading && !response) {
+    return <BundleColumnError multiColumn={multiColumn} errorType='routing' />;
+  }
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      label={intl.formatMessage(messages.title)}
+    >
+      <div className='scrollable privacy-policy'>
+        <div className='column-title'>
+          <h3>
+            <FormattedMessage
+              id='terms_of_service.title'
+              defaultMessage='Terms of Service'
+            />
+          </h3>
+          <p>
+            <FormattedMessage
+              id='privacy_policy.last_updated'
+              defaultMessage='Last updated {date}'
+              values={{
+                date: loading ? (
+                  <Skeleton width='10ch' />
+                ) : (
+                  <FormattedDate
+                    value={response?.updated_at}
+                    year='numeric'
+                    month='short'
+                    day='2-digit'
+                  />
+                ),
+              }}
+            />
+          </p>
+        </div>
+
+        {response && (
+          <div
+            className='privacy-policy__body prose'
+            dangerouslySetInnerHTML={{ __html: response.content }}
+          />
+        )}
+      </div>
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='all' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default TermsOfService;

app/javascript/mastodon/features/ui/components/actions_modal.jsx

@@ -24,7 +24,7 @@ export default class ActionsModal extends ImmutablePureComponent {
 
     return (
       <li key={`${text}-${i}`}>
-        <a href={href} target='_blank' rel='noopener noreferrer' onClick={this.props.onClick} data-index={i} className={classNames({ active })}>
+        <a href={href} target='_blank' rel='noopener' onClick={this.props.onClick} data-index={i} className={classNames({ active })}>
           {icon && <IconButton title={text} icon={icon} iconComponent={iconComponent} role='presentation' tabIndex={-1} inverted />}
           <div>
             <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>

app/javascript/mastodon/features/ui/components/column_loading.tsx

@@ -1,4 +1,4 @@
-import Column from 'mastodon/components/column';
+import { Column } from 'mastodon/components/column';
 import { ColumnHeader } from 'mastodon/components/column_header';
 import type { Props as ColumnHeaderProps } from 'mastodon/components/column_header';
 

app/javascript/mastodon/features/ui/components/compose_panel.jsx

@@ -5,12 +5,11 @@ import { connect } from 'react-redux';
 
 import { changeComposing, mountCompose, unmountCompose } from 'mastodon/actions/compose';
 import ServerBanner from 'mastodon/components/server_banner';
+import { Search } from 'mastodon/features/compose/components/search';
 import ComposeFormContainer from 'mastodon/features/compose/containers/compose_form_container';
-import SearchContainer from 'mastodon/features/compose/containers/search_container';
+import { LinkFooter } from 'mastodon/features/ui/components/link_footer';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 
-import LinkFooter from './link_footer';
-
 class ComposePanel extends PureComponent {
   static propTypes = {
     identity: identityContextPropShape,
@@ -42,7 +41,7 @@ class ComposePanel extends PureComponent {
 
     return (
       <div className='compose-panel' onFocus={this.onFocus}>
-        <SearchContainer openInRoute />
+        <Search openInRoute />
 
         {!signedIn && (
           <>

app/javascript/mastodon/features/ui/components/confirmation_modals/follow_to_list.tsx

@@ -0,0 +1,43 @@
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { useAppSelector } from 'mastodon/store';
+
+import type { BaseConfirmationModalProps } from './confirmation_modal';
+import { ConfirmationModal } from './confirmation_modal';
+
+const messages = defineMessages({
+  title: {
+    id: 'confirmations.follow_to_list.title',
+    defaultMessage: 'Follow user?',
+  },
+  confirm: {
+    id: 'confirmations.follow_to_list.confirm',
+    defaultMessage: 'Follow and add to list',
+  },
+});
+
+export const ConfirmFollowToListModal: React.FC<
+  {
+    accountId: string;
+    onConfirm: () => void;
+  } & BaseConfirmationModalProps
+> = ({ accountId, onConfirm, onClose }) => {
+  const intl = useIntl();
+  const account = useAppSelector((state) => state.accounts.get(accountId));
+
+  return (
+    <ConfirmationModal
+      title={intl.formatMessage(messages.title)}
+      message={
+        <FormattedMessage
+          id='confirmations.follow_to_list.message'
+          defaultMessage='You need to be following {name} to add them to a list.'
+          values={{ name: <strong>@{account?.acct}</strong> }}
+        />
+      }
+      confirm={intl.formatMessage(messages.confirm)}
+      onConfirm={onConfirm}
+      onClose={onClose}
+    />
+  );
+};

app/javascript/mastodon/features/ui/components/confirmation_modals/index.ts

@@ -6,3 +6,4 @@ export { ConfirmEditStatusModal } from './edit_status';
 export { ConfirmUnfollowModal } from './unfollow';
 export { ConfirmClearNotificationsModal } from './clear_notifications';
 export { ConfirmLogOutModal } from './log_out';
+export { ConfirmFollowToListModal } from './follow_to_list';

app/javascript/mastodon/features/ui/components/link_footer.jsx

@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { FormattedMessage, injectIntl } from 'react-intl';
-
-import { Link } from 'react-router-dom';
-
-import { connect } from 'react-redux';
-
-import { openModal } from 'mastodon/actions/modal';
-import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { domain, version, source_url, statusPageUrl, profile_directory as profileDirectory } from 'mastodon/initial_state';
-import { PERMISSION_INVITE_USERS } from 'mastodon/permissions';
-
-const mapDispatchToProps = (dispatch) => ({
-  onLogout () {
-    dispatch(openModal({ modalType: 'CONFIRM_LOG_OUT' }));
-
-  },
-});
-
-class LinkFooter extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    multiColumn: PropTypes.bool,
-    onLogout: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleLogoutClick = e => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    this.props.onLogout();
-
-    return false;
-  };
-
-  render () {
-    const { signedIn, permissions } = this.props.identity;
-    const { multiColumn } = this.props;
-
-    const canInvite = signedIn && ((permissions & PERMISSION_INVITE_USERS) === PERMISSION_INVITE_USERS);
-    const canProfileDirectory = profileDirectory;
-
-    const DividingCircle = <span aria-hidden>{' · '}</span>;
-
-    return (
-      <div className='link-footer'>
-        <p>
-          <strong>{domain}</strong>:
-          {' '}
-          <Link to='/about' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.about' defaultMessage='About' /></Link>
-          {statusPageUrl && (
-            <>
-              {DividingCircle}
-              <a href={statusPageUrl} target='_blank' rel='noopener'><FormattedMessage id='footer.status' defaultMessage='Status' /></a>
-            </>
-          )}
-          {canInvite && (
-            <>
-              {DividingCircle}
-              <a href='/invites' target='_blank'><FormattedMessage id='footer.invite' defaultMessage='Invite people' /></a>
-            </>
-          )}
-          {canProfileDirectory && (
-            <>
-              {DividingCircle}
-              <Link to='/directory'><FormattedMessage id='footer.directory' defaultMessage='Profiles directory' /></Link>
-            </>
-          )}
-          {DividingCircle}
-          <Link to='/privacy-policy' target={multiColumn ? '_blank' : undefined}><FormattedMessage id='footer.privacy_policy' defaultMessage='Privacy policy' /></Link>
-        </p>
-
-        <p>
-          <strong>Mastodon</strong>:
-          {' '}
-          <a href='https://joinmastodon.org' target='_blank'><FormattedMessage id='footer.about' defaultMessage='About' /></a>
-          {DividingCircle}
-          <a href='https://joinmastodon.org/apps' target='_blank'><FormattedMessage id='footer.get_app' defaultMessage='Get the app' /></a>
-          {DividingCircle}
-          <Link to='/keyboard-shortcuts'><FormattedMessage id='footer.keyboard_shortcuts' defaultMessage='Keyboard shortcuts' /></Link>
-          {DividingCircle}
-          <a href={source_url} rel='noopener noreferrer' target='_blank'><FormattedMessage id='footer.source_code' defaultMessage='View source code' /></a>
-          {DividingCircle}
-          <span className='version'>v{version}</span>
-        </p>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(withIdentity(connect(null, mapDispatchToProps)(LinkFooter)));

app/javascript/mastodon/features/ui/components/link_footer.tsx

@@ -0,0 +1,101 @@
+import { FormattedMessage } from 'react-intl';
+
+import { Link } from 'react-router-dom';
+
+import {
+  domain,
+  version,
+  source_url,
+  statusPageUrl,
+  profile_directory as canProfileDirectory,
+  termsOfServiceEnabled,
+} from 'mastodon/initial_state';
+
+const DividingCircle: React.FC = () => <span aria-hidden>{' · '}</span>;
+
+export const LinkFooter: React.FC<{
+  multiColumn: boolean;
+}> = ({ multiColumn }) => {
+  return (
+    <div className='link-footer'>
+      <p>
+        <strong>{domain}</strong>:{' '}
+        <Link to='/about' target={multiColumn ? '_blank' : undefined}>
+          <FormattedMessage id='footer.about' defaultMessage='About' />
+        </Link>
+        {statusPageUrl && (
+          <>
+            <DividingCircle />
+            <a href={statusPageUrl} target='_blank' rel='noopener'>
+              <FormattedMessage id='footer.status' defaultMessage='Status' />
+            </a>
+          </>
+        )}
+        {canProfileDirectory && (
+          <>
+            <DividingCircle />
+            <Link to='/directory'>
+              <FormattedMessage
+                id='footer.directory'
+                defaultMessage='Profiles directory'
+              />
+            </Link>
+          </>
+        )}
+        <DividingCircle />
+        <Link
+          to='/privacy-policy'
+          target={multiColumn ? '_blank' : undefined}
+          rel='privacy-policy'
+        >
+          <FormattedMessage
+            id='footer.privacy_policy'
+            defaultMessage='Privacy policy'
+          />
+        </Link>
+        {termsOfServiceEnabled && (
+          <>
+            <DividingCircle />
+            <Link
+              to='/terms-of-service'
+              target={multiColumn ? '_blank' : undefined}
+              rel='terms-of-service'
+            >
+              <FormattedMessage
+                id='footer.terms_of_service'
+                defaultMessage='Terms of service'
+              />
+            </Link>
+          </>
+        )}
+      </p>
+
+      <p>
+        <strong>Mastodon</strong>:{' '}
+        <a href='https://joinmastodon.org' target='_blank' rel='noopener'>
+          <FormattedMessage id='footer.about' defaultMessage='About' />
+        </a>
+        <DividingCircle />
+        <a href='https://joinmastodon.org/apps' target='_blank' rel='noopener'>
+          <FormattedMessage id='footer.get_app' defaultMessage='Get the app' />
+        </a>
+        <DividingCircle />
+        <Link to='/keyboard-shortcuts'>
+          <FormattedMessage
+            id='footer.keyboard_shortcuts'
+            defaultMessage='Keyboard shortcuts'
+          />
+        </Link>
+        <DividingCircle />
+        <a href={source_url} rel='noopener' target='_blank'>
+          <FormattedMessage
+            id='footer.source_code'
+            defaultMessage='View source code'
+          />
+        </a>
+        <DividingCircle />
+        <span className='version'>v{version}</span>
+      </p>
+    </div>
+  );
+};

app/javascript/mastodon/features/ui/components/modal_root.jsx

@@ -35,6 +35,7 @@ import {
   ConfirmUnfollowModal,
   ConfirmClearNotificationsModal,
   ConfirmLogOutModal,
+  ConfirmFollowToListModal,
 } from './confirmation_modals';
 import FocalPointModal from './focal_point_modal';
 import ImageModal from './image_modal';
@@ -56,6 +57,7 @@ export const MODAL_COMPONENTS = {
   'CONFIRM_UNFOLLOW': () => Promise.resolve({ default: ConfirmUnfollowModal }),
   'CONFIRM_CLEAR_NOTIFICATIONS': () => Promise.resolve({ default: ConfirmClearNotificationsModal }),
   'CONFIRM_LOG_OUT': () => Promise.resolve({ default: ConfirmLogOutModal }),
+  'CONFIRM_FOLLOW_TO_LIST': () => Promise.resolve({ default: ConfirmFollowToListModal }),
   'MUTE': MuteModal,
   'BLOCK': BlockModal,
   'DOMAIN_BLOCK': DomainBlockModal,

app/javascript/mastodon/features/ui/index.jsx

@@ -69,8 +69,10 @@ import {
   OnboardingProfile,
   OnboardingFollows,
   Explore,
+  Search,
   About,
   PrivacyPolicy,
+  TermsOfService,
 } from './util/async-components';
 import { ColumnsContextProvider } from './util/columns_context';
 import { WrappedSwitch, WrappedRoute } from './util/react_router_helpers';
@@ -198,6 +200,7 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path='/keyboard-shortcuts' component={KeyboardShortcuts} content={children} />
             <WrappedRoute path='/about' component={About} content={children} />
             <WrappedRoute path='/privacy-policy' component={PrivacyPolicy} content={children} />
+            <WrappedRoute path='/terms-of-service' component={TermsOfService} content={children} />
 
             <WrappedRoute path={['/home', '/timelines/home']} component={HomeTimeline} content={children} />
             <Redirect from='/timelines/public' to='/public' exact />
@@ -223,7 +226,8 @@ class SwitchingColumnsArea extends PureComponent {
             <WrappedRoute path={['/start', '/start/profile']} exact component={OnboardingProfile} content={children} />
             <WrappedRoute path='/start/follows' component={OnboardingFollows} content={children} />
             <WrappedRoute path='/directory' component={Directory} content={children} />
-            <WrappedRoute path={['/explore', '/search']} component={Explore} content={children} />
+            <WrappedRoute path='/explore' component={Explore} content={children} />
+            <WrappedRoute path='/search' component={Search} content={children} />
             <WrappedRoute path={['/publish', '/statuses/new']} component={Compose} content={children} />
 
             <WrappedRoute path={['/@:acct', '/accounts/:id']} exact component={AccountTimeline} content={children} />

app/javascript/mastodon/features/ui/util/async-components.js

@@ -174,6 +174,10 @@ export function Explore () {
   return import(/* webpackChunkName: "features/explore" */'../../explore');
 }
 
+export function Search () {
+  return import(/* webpackChunkName: "features/explore" */'../../search');
+}
+
 export function FilterModal () {
   return import(/*webpackChunkName: "modals/filter_modal" */'../components/filter_modal');
 }
@@ -198,6 +202,10 @@ export function PrivacyPolicy () {
   return import(/*webpackChunkName: "features/privacy_policy" */'../../privacy_policy');
 }
 
+export function TermsOfService () {
+  return import(/*webpackChunkName: "features/terms_of_service" */'../../terms_of_service');
+}
+
 export function NotificationRequests () {
   return import(/*webpackChunkName: "features/notifications/requests" */'../../notifications/requests');
 }