Convert <ColumnHeader> to Typescript (#30849)

Co-authored-by: Renaud Chaput <renchap@gmail.com>

app/javascript/hooks/useLinks.ts

@@ -0,0 +1,61 @@
+import { useCallback } from 'react';
+
+import { useHistory } from 'react-router-dom';
+
+import { openURL } from 'mastodon/actions/search';
+import { useAppDispatch } from 'mastodon/store';
+
+const isMentionClick = (element: HTMLAnchorElement) =>
+  element.classList.contains('mention');
+
+const isHashtagClick = (element: HTMLAnchorElement) =>
+  element.textContent?.[0] === '#' ||
+  element.previousSibling?.textContent?.endsWith('#');
+
+export const useLinks = () => {
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+
+  const handleHashtagClick = useCallback(
+    (element: HTMLAnchorElement) => {
+      const { textContent } = element;
+
+      if (!textContent) return;
+
+      history.push(`/tags/${textContent.replace(/^#/, '')}`);
+    },
+    [history],
+  );
+
+  const handleMentionClick = useCallback(
+    (element: HTMLAnchorElement) => {
+      dispatch(
+        openURL(element.href, history, () => {
+          window.location.href = element.href;
+        }),
+      );
+    },
+    [dispatch, history],
+  );
+
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      const target = (e.target as HTMLElement).closest('a');
+
+      if (!target || e.button !== 0 || e.ctrlKey || e.metaKey) {
+        return;
+      }
+
+      if (isMentionClick(target)) {
+        e.preventDefault();
+        handleMentionClick(target);
+      } else if (isHashtagClick(target)) {
+        e.preventDefault();
+        handleHashtagClick(target);
+      }
+    },
+    [handleMentionClick, handleHashtagClick],
+  );
+
+  return handleClick;
+};

app/javascript/hooks/useTimeout.ts

@@ -0,0 +1,29 @@
+import { useRef, useCallback, useEffect } from 'react';
+
+export const useTimeout = () => {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout>>();
+
+  const set = useCallback((callback: () => void, delay: number) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(callback, delay);
+  }, []);
+
+  const cancel = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = undefined;
+    }
+  }, []);
+
+  useEffect(
+    () => () => {
+      cancel();
+    },
+    [cancel],
+  );
+
+  return [set, cancel] as const;
+};

app/javascript/mastodon/actions/directory.js

@@ -1,62 +0,0 @@
-import api from '../api';
-
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
-
-export const DIRECTORY_FETCH_REQUEST = 'DIRECTORY_FETCH_REQUEST';
-export const DIRECTORY_FETCH_SUCCESS = 'DIRECTORY_FETCH_SUCCESS';
-export const DIRECTORY_FETCH_FAIL    = 'DIRECTORY_FETCH_FAIL';
-
-export const DIRECTORY_EXPAND_REQUEST = 'DIRECTORY_EXPAND_REQUEST';
-export const DIRECTORY_EXPAND_SUCCESS = 'DIRECTORY_EXPAND_SUCCESS';
-export const DIRECTORY_EXPAND_FAIL    = 'DIRECTORY_EXPAND_FAIL';
-
-export const fetchDirectory = params => (dispatch) => {
-  dispatch(fetchDirectoryRequest());
-
-  api().get('/api/v1/directory', { params: { ...params, limit: 20 } }).then(({ data }) => {
-    dispatch(importFetchedAccounts(data));
-    dispatch(fetchDirectorySuccess(data));
-    dispatch(fetchRelationships(data.map(x => x.id)));
-  }).catch(error => dispatch(fetchDirectoryFail(error)));
-};
-
-export const fetchDirectoryRequest = () => ({
-  type: DIRECTORY_FETCH_REQUEST,
-});
-
-export const fetchDirectorySuccess = accounts => ({
-  type: DIRECTORY_FETCH_SUCCESS,
-  accounts,
-});
-
-export const fetchDirectoryFail = error => ({
-  type: DIRECTORY_FETCH_FAIL,
-  error,
-});
-
-export const expandDirectory = params => (dispatch, getState) => {
-  dispatch(expandDirectoryRequest());
-
-  const loadedItems = getState().getIn(['user_lists', 'directory', 'items']).size;
-
-  api().get('/api/v1/directory', { params: { ...params, offset: loadedItems, limit: 20 } }).then(({ data }) => {
-    dispatch(importFetchedAccounts(data));
-    dispatch(expandDirectorySuccess(data));
-    dispatch(fetchRelationships(data.map(x => x.id)));
-  }).catch(error => dispatch(expandDirectoryFail(error)));
-};
-
-export const expandDirectoryRequest = () => ({
-  type: DIRECTORY_EXPAND_REQUEST,
-});
-
-export const expandDirectorySuccess = accounts => ({
-  type: DIRECTORY_EXPAND_SUCCESS,
-  accounts,
-});
-
-export const expandDirectoryFail = error => ({
-  type: DIRECTORY_EXPAND_FAIL,
-  error,
-});

app/javascript/mastodon/actions/directory.ts

@@ -0,0 +1,37 @@
+import type { List as ImmutableList } from 'immutable';
+
+import { apiGetDirectory } from 'mastodon/api/directory';
+import { createDataLoadingThunk } from 'mastodon/store/typed_functions';
+
+import { fetchRelationships } from './accounts';
+import { importFetchedAccounts } from './importer';
+
+export const fetchDirectory = createDataLoadingThunk(
+  'directory/fetch',
+  async (params: Parameters<typeof apiGetDirectory>[0]) =>
+    apiGetDirectory(params),
+  (data, { dispatch }) => {
+    dispatch(importFetchedAccounts(data));
+    dispatch(fetchRelationships(data.map((x) => x.id)));
+
+    return { accounts: data };
+  },
+);
+
+export const expandDirectory = createDataLoadingThunk(
+  'directory/expand',
+  async (params: Parameters<typeof apiGetDirectory>[0], { getState }) => {
+    const loadedItems = getState().user_lists.getIn([
+      'directory',
+      'items',
+    ]) as ImmutableList<unknown>;
+
+    return apiGetDirectory({ ...params, offset: loadedItems.size }, 20);
+  },
+  (data, { dispatch }) => {
+    dispatch(importFetchedAccounts(data));
+    dispatch(fetchRelationships(data.map((x) => x.id)));
+
+    return { accounts: data };
+  },
+);

app/javascript/mastodon/api/directory.ts

@@ -0,0 +1,15 @@
+import { apiRequestGet } from 'mastodon/api';
+import type { ApiAccountJSON } from 'mastodon/api_types/accounts';
+
+export const apiGetDirectory = (
+  params: {
+    order: string;
+    local: boolean;
+    offset?: number;
+  },
+  limit = 20,
+) =>
+  apiRequestGet<ApiAccountJSON[]>('v1/directory', {
+    ...params,
+    limit,
+  });

app/javascript/mastodon/components/account_bio.tsx

@@ -0,0 +1,20 @@
+import { useLinks } from 'mastodon/../hooks/useLinks';
+
+export const AccountBio: React.FC<{
+  note: string;
+  className: string;
+}> = ({ note, className }) => {
+  const handleClick = useLinks();
+
+  if (note.length === 0 || note === '<p></p>') {
+    return null;
+  }
+
+  return (
+    <div
+      className={`${className} translate`}
+      dangerouslySetInnerHTML={{ __html: note }}
+      onClickCapture={handleClick}
+    />
+  );
+};

app/javascript/mastodon/components/account_fields.tsx

@@ -0,0 +1,42 @@
+import classNames from 'classnames';
+
+import CheckIcon from '@/material-icons/400-24px/check.svg?react';
+import { useLinks } from 'mastodon/../hooks/useLinks';
+import { Icon } from 'mastodon/components/icon';
+import type { Account } from 'mastodon/models/account';
+
+export const AccountFields: React.FC<{
+  fields: Account['fields'];
+  limit: number;
+}> = ({ fields, limit = -1 }) => {
+  const handleClick = useLinks();
+
+  if (fields.size === 0) {
+    return null;
+  }
+
+  return (
+    <div className='account-fields' onClickCapture={handleClick}>
+      {fields.take(limit).map((pair, i) => (
+        <dl
+          key={i}
+          className={classNames({ verified: pair.get('verified_at') })}
+        >
+          <dt
+            dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }}
+            className='translate'
+          />
+
+          <dd className='translate' title={pair.get('value_plain') ?? ''}>
+            {pair.get('verified_at') && (
+              <Icon id='check' icon={CheckIcon} className='verified__mark' />
+            )}
+            <span
+              dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }}
+            />
+          </dd>
+        </dl>
+      ))}
+    </div>
+  );
+};

app/javascript/mastodon/components/column_header.jsx

@@ -1,233 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent, useCallback } from 'react';
-
-import { FormattedMessage, injectIntl, defineMessages, useIntl } from 'react-intl';
-
-import classNames from 'classnames';
-import { withRouter } from 'react-router-dom';
-
-import AddIcon from '@/material-icons/400-24px/add.svg?react';
-import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
-import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
-import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
-import { Icon }  from 'mastodon/components/icon';
-import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
-import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
-import { WithRouterPropTypes } from 'mastodon/utils/react_router';
-
-
-import { useAppHistory } from './router';
-
-const messages = defineMessages({
-  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
-  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
-  moveLeft: { id: 'column_header.moveLeft_settings', defaultMessage: 'Move column to the left' },
-  moveRight: { id: 'column_header.moveRight_settings', defaultMessage: 'Move column to the right' },
-  back: { id: 'column_back_button.label', defaultMessage: 'Back' },
-});
-
-const BackButton = ({ onlyIcon }) => {
-  const history = useAppHistory();
-  const intl = useIntl();
-
-  const handleBackClick = useCallback(() => {
-    if (history.location?.state?.fromMastodon) {
-      history.goBack();
-    } else {
-      history.push('/');
-    }
-  }, [history]);
-
-  return (
-    <button onClick={handleBackClick} className={classNames('column-header__back-button', { 'compact': onlyIcon })} aria-label={intl.formatMessage(messages.back)}>
-      <Icon id='chevron-left' icon={ArrowBackIcon} className='column-back-button__icon' />
-      {!onlyIcon && <FormattedMessage id='column_back_button.label' defaultMessage='Back' />}
-    </button>
-  );
-};
-
-BackButton.propTypes = {
-  onlyIcon: PropTypes.bool,
-};
-
-class ColumnHeader extends PureComponent {
-  static propTypes = {
-    identity: identityContextPropShape,
-    intl: PropTypes.object.isRequired,
-    title: PropTypes.node,
-    icon: PropTypes.string,
-    iconComponent: PropTypes.func,
-    active: PropTypes.bool,
-    multiColumn: PropTypes.bool,
-    extraButton: PropTypes.node,
-    showBackButton: PropTypes.bool,
-    children: PropTypes.node,
-    pinned: PropTypes.bool,
-    placeholder: PropTypes.bool,
-    onPin: PropTypes.func,
-    onMove: PropTypes.func,
-    onClick: PropTypes.func,
-    appendContent: PropTypes.node,
-    collapseIssues: PropTypes.bool,
-    ...WithRouterPropTypes,
-  };
-
-  state = {
-    collapsed: true,
-    animating: false,
-  };
-
-  handleToggleClick = (e) => {
-    e.stopPropagation();
-    this.setState({ collapsed: !this.state.collapsed, animating: true });
-  };
-
-  handleTitleClick = () => {
-    this.props.onClick?.();
-  };
-
-  handleMoveLeft = () => {
-    this.props.onMove(-1);
-  };
-
-  handleMoveRight = () => {
-    this.props.onMove(1);
-  };
-
-  handleTransitionEnd = () => {
-    this.setState({ animating: false });
-  };
-
-  handlePin = () => {
-    if (!this.props.pinned) {
-      this.props.history.replace('/');
-    }
-
-    this.props.onPin();
-  };
-
-  render () {
-    const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props;
-    const { collapsed, animating } = this.state;
-
-    const wrapperClassName = classNames('column-header__wrapper', {
-      'active': active,
-    });
-
-    const buttonClassName = classNames('column-header', {
-      'active': active,
-    });
-
-    const collapsibleClassName = classNames('column-header__collapsible', {
-      'collapsed': collapsed,
-      'animating': animating,
-    });
-
-    const collapsibleButtonClassName = classNames('column-header__button', {
-      'active': !collapsed,
-    });
-
-    let extraContent, pinButton, moveButtons, backButton, collapseButton;
-
-    if (children) {
-      extraContent = (
-        <div key='extra-content' className='column-header__collapsible__extra'>
-          {children}
-        </div>
-      );
-    }
-
-    if (multiColumn && pinned) {
-      pinButton = <button className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='times' icon={CloseIcon} /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
-
-      moveButtons = (
-        <div className='column-header__setting-arrows'>
-          <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='icon-button column-header__setting-btn' onClick={this.handleMoveLeft}><Icon id='chevron-left' icon={ChevronLeftIcon} /></button>
-          <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='icon-button column-header__setting-btn' onClick={this.handleMoveRight}><Icon id='chevron-right' icon={ChevronRightIcon} /></button>
-        </div>
-      );
-    } else if (multiColumn && this.props.onPin) {
-      pinButton = <button className='text-btn column-header__setting-btn' onClick={this.handlePin}><Icon id='plus' icon={AddIcon} /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
-    }
-
-    if (history && !pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) {
-      backButton = <BackButton onlyIcon={!!title} />;
-    }
-
-    const collapsedContent = [
-      extraContent,
-    ];
-
-    if (multiColumn) {
-      collapsedContent.push(
-        <div key='buttons' className='column-header__advanced-buttons'>
-          {pinButton}
-          {moveButtons}
-        </div>
-      );
-    }
-
-    if (this.props.identity.signedIn && (children || (multiColumn && this.props.onPin))) {
-      collapseButton = (
-        <button
-          className={collapsibleButtonClassName}
-          title={formatMessage(collapsed ? messages.show : messages.hide)}
-          aria-label={formatMessage(collapsed ? messages.show : messages.hide)}
-          onClick={this.handleToggleClick}
-        >
-          <i className='icon-with-badge'>
-            <Icon id='sliders' icon={SettingsIcon} />
-            {collapseIssues && <i className='icon-with-badge__issue-badge' />}
-          </i>
-        </button>
-      );
-    }
-
-    const hasTitle = (icon || iconComponent) && title;
-
-    const component = (
-      <div className={wrapperClassName}>
-        <h1 className={buttonClassName}>
-          {hasTitle && (
-            <>
-              {backButton}
-
-              <button onClick={this.handleTitleClick} className='column-header__title'>
-                {!backButton && <Icon id={icon} icon={iconComponent} className='column-header__icon' />}
-                {title}
-              </button>
-            </>
-          )}
-
-          {!hasTitle && backButton}
-
-          <div className='column-header__buttons'>
-            {extraButton}
-            {collapseButton}
-          </div>
-        </h1>
-
-        <div className={collapsibleClassName} tabIndex={collapsed ? -1 : null} onTransitionEnd={this.handleTransitionEnd}>
-          <div className='column-header__collapsible-inner'>
-            {(!collapsed || animating) && collapsedContent}
-          </div>
-        </div>
-
-        {appendContent}
-      </div>
-    );
-
-    if (placeholder) {
-      return component;
-    } else {
-      return (<ButtonInTabsBar>
-        {component}
-      </ButtonInTabsBar>);
-    }
-  }
-
-}
-
-export default injectIntl(withIdentity(withRouter(ColumnHeader)));

app/javascript/mastodon/components/column_header.tsx

@@ -0,0 +1,301 @@
+import { useCallback, useState } from 'react';
+
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+import AddIcon from '@/material-icons/400-24px/add.svg?react';
+import ArrowBackIcon from '@/material-icons/400-24px/arrow_back.svg?react';
+import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
+import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import SettingsIcon from '@/material-icons/400-24px/settings.svg?react';
+import type { IconProp } from 'mastodon/components/icon';
+import { Icon } from 'mastodon/components/icon';
+import { ButtonInTabsBar } from 'mastodon/features/ui/util/columns_context';
+import { useIdentity } from 'mastodon/identity_context';
+
+import { useAppHistory } from './router';
+
+const messages = defineMessages({
+  show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
+  hide: { id: 'column_header.hide_settings', defaultMessage: 'Hide settings' },
+  moveLeft: {
+    id: 'column_header.moveLeft_settings',
+    defaultMessage: 'Move column to the left',
+  },
+  moveRight: {
+    id: 'column_header.moveRight_settings',
+    defaultMessage: 'Move column to the right',
+  },
+  back: { id: 'column_back_button.label', defaultMessage: 'Back' },
+});
+
+const BackButton: React.FC<{
+  onlyIcon: boolean;
+}> = ({ onlyIcon }) => {
+  const history = useAppHistory();
+  const intl = useIntl();
+
+  const handleBackClick = useCallback(() => {
+    if (history.location.state?.fromMastodon) {
+      history.goBack();
+    } else {
+      history.push('/');
+    }
+  }, [history]);
+
+  return (
+    <button
+      onClick={handleBackClick}
+      className={classNames('column-header__back-button', {
+        compact: onlyIcon,
+      })}
+      aria-label={intl.formatMessage(messages.back)}
+    >
+      <Icon
+        id='chevron-left'
+        icon={ArrowBackIcon}
+        className='column-back-button__icon'
+      />
+      {!onlyIcon && (
+        <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
+      )}
+    </button>
+  );
+};
+
+export interface Props {
+  title?: string;
+  icon?: string;
+  iconComponent?: IconProp;
+  active?: boolean;
+  children?: React.ReactNode;
+  pinned?: boolean;
+  multiColumn?: boolean;
+  extraButton?: React.ReactNode;
+  showBackButton?: boolean;
+  placeholder?: boolean;
+  appendContent?: React.ReactNode;
+  collapseIssues?: boolean;
+  onClick?: () => void;
+  onMove?: (arg0: number) => void;
+  onPin?: () => void;
+}
+
+export const ColumnHeader: React.FC<Props> = ({
+  title,
+  icon,
+  iconComponent,
+  active,
+  children,
+  pinned,
+  multiColumn,
+  extraButton,
+  showBackButton,
+  placeholder,
+  appendContent,
+  collapseIssues,
+  onClick,
+  onMove,
+  onPin,
+}) => {
+  const intl = useIntl();
+  const { signedIn } = useIdentity();
+  const history = useAppHistory();
+  const [collapsed, setCollapsed] = useState(true);
+  const [animating, setAnimating] = useState(false);
+
+  const handleToggleClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      setCollapsed((value) => !value);
+      setAnimating(true);
+    },
+    [setCollapsed, setAnimating],
+  );
+
+  const handleTitleClick = useCallback(() => {
+    onClick?.();
+  }, [onClick]);
+
+  const handleMoveLeft = useCallback(() => {
+    onMove?.(-1);
+  }, [onMove]);
+
+  const handleMoveRight = useCallback(() => {
+    onMove?.(1);
+  }, [onMove]);
+
+  const handleTransitionEnd = useCallback(() => {
+    setAnimating(false);
+  }, [setAnimating]);
+
+  const handlePin = useCallback(() => {
+    if (!pinned) {
+      history.replace('/');
+    }
+
+    onPin?.();
+  }, [history, pinned, onPin]);
+
+  const wrapperClassName = classNames('column-header__wrapper', {
+    active,
+  });
+
+  const buttonClassName = classNames('column-header', {
+    active,
+  });
+
+  const collapsibleClassName = classNames('column-header__collapsible', {
+    collapsed,
+    animating,
+  });
+
+  const collapsibleButtonClassName = classNames('column-header__button', {
+    active: !collapsed,
+  });
+
+  let extraContent, pinButton, moveButtons, backButton, collapseButton;
+
+  if (children) {
+    extraContent = (
+      <div key='extra-content' className='column-header__collapsible__extra'>
+        {children}
+      </div>
+    );
+  }
+
+  if (multiColumn && pinned) {
+    pinButton = (
+      <button
+        className='text-btn column-header__setting-btn'
+        onClick={handlePin}
+      >
+        <Icon id='times' icon={CloseIcon} />{' '}
+        <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' />
+      </button>
+    );
+
+    moveButtons = (
+      <div className='column-header__setting-arrows'>
+        <button
+          title={intl.formatMessage(messages.moveLeft)}
+          aria-label={intl.formatMessage(messages.moveLeft)}
+          className='icon-button column-header__setting-btn'
+          onClick={handleMoveLeft}
+        >
+          <Icon id='chevron-left' icon={ChevronLeftIcon} />
+        </button>
+        <button
+          title={intl.formatMessage(messages.moveRight)}
+          aria-label={intl.formatMessage(messages.moveRight)}
+          className='icon-button column-header__setting-btn'
+          onClick={handleMoveRight}
+        >
+          <Icon id='chevron-right' icon={ChevronRightIcon} />
+        </button>
+      </div>
+    );
+  } else if (multiColumn && onPin) {
+    pinButton = (
+      <button
+        className='text-btn column-header__setting-btn'
+        onClick={handlePin}
+      >
+        <Icon id='plus' icon={AddIcon} />{' '}
+        <FormattedMessage id='column_header.pin' defaultMessage='Pin' />
+      </button>
+    );
+  }
+
+  if (
+    !pinned &&
+    ((multiColumn && history.location.state?.fromMastodon) || showBackButton)
+  ) {
+    backButton = <BackButton onlyIcon={!!title} />;
+  }
+
+  const collapsedContent = [extraContent];
+
+  if (multiColumn) {
+    collapsedContent.push(
+      <div key='buttons' className='column-header__advanced-buttons'>
+        {pinButton}
+        {moveButtons}
+      </div>,
+    );
+  }
+
+  if (signedIn && (children || (multiColumn && onPin))) {
+    collapseButton = (
+      <button
+        className={collapsibleButtonClassName}
+        title={intl.formatMessage(collapsed ? messages.show : messages.hide)}
+        aria-label={intl.formatMessage(
+          collapsed ? messages.show : messages.hide,
+        )}
+        onClick={handleToggleClick}
+      >
+        <i className='icon-with-badge'>
+          <Icon id='sliders' icon={SettingsIcon} />
+          {collapseIssues && <i className='icon-with-badge__issue-badge' />}
+        </i>
+      </button>
+    );
+  }
+
+  const hasIcon = icon && iconComponent;
+  const hasTitle = hasIcon && title;
+
+  const component = (
+    <div className={wrapperClassName}>
+      <h1 className={buttonClassName}>
+        {hasTitle && (
+          <>
+            {backButton}
+
+            <button onClick={handleTitleClick} className='column-header__title'>
+              {!backButton && (
+                <Icon
+                  id={icon}
+                  icon={iconComponent}
+                  className='column-header__icon'
+                />
+              )}
+              {title}
+            </button>
+          </>
+        )}
+
+        {!hasTitle && backButton}
+
+        <div className='column-header__buttons'>
+          {extraButton}
+          {collapseButton}
+        </div>
+      </h1>
+
+      <div
+        className={collapsibleClassName}
+        tabIndex={collapsed ? -1 : undefined}
+        onTransitionEnd={handleTransitionEnd}
+      >
+        <div className='column-header__collapsible-inner'>
+          {(!collapsed || animating) && collapsedContent}
+        </div>
+      </div>
+
+      {appendContent}
+    </div>
+  );
+
+  if (placeholder) {
+    return component;
+  } else {
+    return <ButtonInTabsBar>{component}</ButtonInTabsBar>;
+  }
+};
+
+// eslint-disable-next-line import/no-default-export
+export default ColumnHeader;

app/javascript/mastodon/components/follow_button.tsx

@@ -0,0 +1,93 @@
+import { useCallback, useEffect } from 'react';
+
+import { useIntl, defineMessages } from 'react-intl';
+
+import {
+  fetchRelationships,
+  followAccount,
+  unfollowAccount,
+} from 'mastodon/actions/accounts';
+import { Button } from 'mastodon/components/button';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { me } from 'mastodon/initial_state';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+const messages = defineMessages({
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  followBack: { id: 'account.follow_back', defaultMessage: 'Follow back' },
+  mutual: { id: 'account.mutual', defaultMessage: 'Mutual' },
+  cancel_follow_request: {
+    id: 'account.cancel_follow_request',
+    defaultMessage: 'Withdraw follow request',
+  },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+});
+
+export const FollowButton: React.FC<{
+  accountId: string;
+}> = ({ accountId }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const relationship = useAppSelector((state) =>
+    state.relationships.get(accountId),
+  );
+  const following = relationship?.following || relationship?.requested;
+
+  useEffect(() => {
+    dispatch(fetchRelationships([accountId]));
+  }, [dispatch, accountId]);
+
+  const handleClick = useCallback(() => {
+    if (!relationship) return;
+    if (accountId === me) {
+      return;
+    } else if (relationship.following || relationship.requested) {
+      dispatch(unfollowAccount(accountId));
+    } else {
+      dispatch(followAccount(accountId));
+    }
+  }, [dispatch, accountId, relationship]);
+
+  let label;
+
+  if (accountId === me) {
+    label = intl.formatMessage(messages.edit_profile);
+  } else if (!relationship) {
+    label = <LoadingIndicator />;
+  } else if (relationship.requested) {
+    label = intl.formatMessage(messages.cancel_follow_request);
+  } else if (relationship.following && relationship.followed_by) {
+    label = intl.formatMessage(messages.mutual);
+  } else if (!relationship.following && relationship.followed_by) {
+    label = intl.formatMessage(messages.followBack);
+  } else if (relationship.following) {
+    label = intl.formatMessage(messages.unfollow);
+  } else {
+    label = intl.formatMessage(messages.follow);
+  }
+
+  if (accountId === me) {
+    return (
+      <a
+        href='/settings/profile'
+        target='_blank'
+        rel='noreferrer noopener'
+        className='button button-secondary'
+      >
+        {label}
+      </a>
+    );
+  }
+
+  return (
+    <Button
+      onClick={handleClick}
+      disabled={relationship?.blocked_by || relationship?.blocking}
+      secondary={following}
+      className={following ? 'button--destructive' : undefined}
+    >
+      {label}
+    </Button>
+  );
+};

app/javascript/mastodon/components/hover_card_account.tsx

@@ -0,0 +1,74 @@
+import { useEffect, forwardRef } from 'react';
+
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import { fetchAccount } from 'mastodon/actions/accounts';
+import { AccountBio } from 'mastodon/components/account_bio';
+import { AccountFields } from 'mastodon/components/account_fields';
+import { Avatar } from 'mastodon/components/avatar';
+import { FollowersCounter } from 'mastodon/components/counters';
+import { DisplayName } from 'mastodon/components/display_name';
+import { FollowButton } from 'mastodon/components/follow_button';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+import { ShortNumber } from 'mastodon/components/short_number';
+import { domain } from 'mastodon/initial_state';
+import { useAppSelector, useAppDispatch } from 'mastodon/store';
+
+export const HoverCardAccount = forwardRef<
+  HTMLDivElement,
+  { accountId: string }
+>(({ accountId }, ref) => {
+  const dispatch = useAppDispatch();
+
+  const account = useAppSelector((state) =>
+    accountId ? state.accounts.get(accountId) : undefined,
+  );
+
+  useEffect(() => {
+    if (accountId && !account) {
+      dispatch(fetchAccount(accountId));
+    }
+  }, [dispatch, accountId, account]);
+
+  return (
+    <div
+      ref={ref}
+      id='hover-card'
+      role='tooltip'
+      className={classNames('hover-card dropdown-animation', {
+        'hover-card--loading': !account,
+      })}
+    >
+      {account ? (
+        <>
+          <Link to={`/@${account.acct}`} className='hover-card__name'>
+            <Avatar account={account} size={46} />
+            <DisplayName account={account} localDomain={domain} />
+          </Link>
+
+          <div className='hover-card__text-row'>
+            <AccountBio
+              note={account.note_emojified}
+              className='hover-card__bio'
+            />
+            <AccountFields fields={account.fields} limit={2} />
+          </div>
+
+          <div className='hover-card__number'>
+            <ShortNumber
+              value={account.followers_count}
+              renderer={FollowersCounter}
+            />
+          </div>
+
+          <FollowButton accountId={accountId} />
+        </>
+      ) : (
+        <LoadingIndicator />
+      )}
+    </div>
+  );
+});
+
+HoverCardAccount.displayName = 'HoverCardAccount';

app/javascript/mastodon/components/hover_card_controller.tsx

@@ -0,0 +1,117 @@
+import { useEffect, useRef, useState, useCallback } from 'react';
+
+import { useLocation } from 'react-router-dom';
+
+import Overlay from 'react-overlays/Overlay';
+import type {
+  OffsetValue,
+  UsePopperOptions,
+} from 'react-overlays/esm/usePopper';
+
+import { useTimeout } from 'mastodon/../hooks/useTimeout';
+import { HoverCardAccount } from 'mastodon/components/hover_card_account';
+
+const offset = [-12, 4] as OffsetValue;
+const enterDelay = 650;
+const leaveDelay = 250;
+const popperConfig = { strategy: 'fixed' } as UsePopperOptions;
+
+const isHoverCardAnchor = (element: HTMLElement) =>
+  element.matches('[data-hover-card-account]');
+
+export const HoverCardController: React.FC = () => {
+  const [open, setOpen] = useState(false);
+  const [accountId, setAccountId] = useState<string | undefined>();
+  const [anchor, setAnchor] = useState<HTMLElement | null>(null);
+  const cardRef = useRef<HTMLDivElement>(null);
+  const [setLeaveTimeout, cancelLeaveTimeout] = useTimeout();
+  const [setEnterTimeout, cancelEnterTimeout] = useTimeout();
+  const location = useLocation();
+
+  const handleAnchorMouseEnter = useCallback(
+    (e: MouseEvent) => {
+      const { target } = e;
+
+      if (target instanceof HTMLElement && isHoverCardAnchor(target)) {
+        cancelLeaveTimeout();
+
+        setEnterTimeout(() => {
+          target.setAttribute('aria-describedby', 'hover-card');
+          setAnchor(target);
+          setOpen(true);
+          setAccountId(
+            target.getAttribute('data-hover-card-account') ?? undefined,
+          );
+        }, enterDelay);
+      }
+
+      if (target === cardRef.current?.parentNode) {
+        cancelLeaveTimeout();
+      }
+    },
+    [cancelLeaveTimeout, setEnterTimeout, setOpen, setAccountId, setAnchor],
+  );
+
+  const handleAnchorMouseLeave = useCallback(
+    (e: MouseEvent) => {
+      if (e.target === anchor || e.target === cardRef.current?.parentNode) {
+        cancelEnterTimeout();
+
+        setLeaveTimeout(() => {
+          anchor?.removeAttribute('aria-describedby');
+          setOpen(false);
+          setAnchor(null);
+        }, leaveDelay);
+      }
+    },
+    [cancelEnterTimeout, setLeaveTimeout, setOpen, setAnchor, anchor],
+  );
+
+  const handleClose = useCallback(() => {
+    cancelEnterTimeout();
+    cancelLeaveTimeout();
+    setOpen(false);
+    setAnchor(null);
+  }, [cancelEnterTimeout, cancelLeaveTimeout, setOpen, setAnchor]);
+
+  useEffect(() => {
+    handleClose();
+  }, [handleClose, location]);
+
+  useEffect(() => {
+    document.body.addEventListener('mouseenter', handleAnchorMouseEnter, {
+      passive: true,
+      capture: true,
+    });
+    document.body.addEventListener('mouseleave', handleAnchorMouseLeave, {
+      passive: true,
+      capture: true,
+    });
+
+    return () => {
+      document.body.removeEventListener('mouseenter', handleAnchorMouseEnter);
+      document.body.removeEventListener('mouseleave', handleAnchorMouseLeave);
+    };
+  }, [handleAnchorMouseEnter, handleAnchorMouseLeave]);
+
+  if (!accountId) return null;
+
+  return (
+    <Overlay
+      rootClose
+      onHide={handleClose}
+      show={open}
+      target={anchor}
+      placement='bottom-start'
+      flip
+      offset={offset}
+      popperConfig={popperConfig}
+    >
+      {({ props }) => (
+        <div {...props} className='hover-card-controller'>
+          <HoverCardAccount accountId={accountId} ref={cardRef} />
+        </div>
+      )}
+    </Overlay>
+  );
+};

app/javascript/mastodon/components/status.jsx

@@ -425,7 +425,7 @@ class Status extends ImmutablePureComponent {
       prepend = (
         <div className='status__prepend'>
           <div className='status__prepend-icon-wrapper'><Icon id='retweet' icon={RepeatIcon} className='status__prepend-icon' /></div>
-          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
+          <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
         </div>
       );
 
@@ -446,7 +446,7 @@ class Status extends ImmutablePureComponent {
       prepend = (
         <div className='status__prepend'>
           <div className='status__prepend-icon-wrapper'><Icon id='reply' icon={ReplyIcon} className='status__prepend-icon' /></div>
-          <FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
+          <FormattedMessage id='status.replied_to' defaultMessage='Replied to {name}' values={{ name: <a onClick={this.handlePrependAccountClick} data-id={status.getIn(['account', 'id'])} data-hover-card-account={status.getIn(['account', 'id'])} href={`/@${status.getIn(['account', 'acct'])}`} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
         </div>
       );
     }
@@ -562,7 +562,7 @@ class Status extends ImmutablePureComponent {
                 <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
               </a>
 
-              <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
+              <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
                 <div className='status__avatar'>
                   {statusAvatar}
                 </div>

app/javascript/mastodon/components/status_content.jsx

@@ -116,8 +116,9 @@ class StatusContent extends PureComponent {
 
       if (mention) {
         link.addEventListener('click', this.onMentionClick.bind(this, mention), false);
-        link.setAttribute('title', `@${mention.get('acct')}`);
+        link.removeAttribute('title');
         link.setAttribute('href', `/@${mention.get('acct')}`);
+        link.setAttribute('data-hover-card-account', mention.get('id'));
       } else if (link.textContent[0] === '#' || (link.previousSibling && link.previousSibling.textContent && link.previousSibling.textContent[link.previousSibling.textContent.length - 1] === '#')) {
         link.addEventListener('click', this.onHashtagClick.bind(this, link.text), false);
         link.setAttribute('href', `/tags/${link.text.replace(/^#/, '')}`);

app/javascript/mastodon/features/directory/components/account_card.jsx

@@ -1,234 +0,0 @@
-import PropTypes from 'prop-types';
-
-import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-
-import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import {
-  followAccount,
-  unfollowAccount,
-  unblockAccount,
-  unmuteAccount,
-} from 'mastodon/actions/accounts';
-import { openModal } from 'mastodon/actions/modal';
-import { Avatar } from 'mastodon/components/avatar';
-import { Button } from 'mastodon/components/button';
-import { DisplayName } from 'mastodon/components/display_name';
-import { ShortNumber } from 'mastodon/components/short_number';
-import { autoPlayGif, me } from 'mastodon/initial_state';
-import { makeGetAccount } from 'mastodon/selectors';
-
-const messages = defineMessages({
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  cancel_follow_request: { id: 'account.cancel_follow_request', defaultMessage: 'Withdraw follow request' },
-  cancelFollowRequestConfirm: { id: 'confirmations.cancel_follow_request.confirm', defaultMessage: 'Withdraw request' },
-  requested: { id: 'account.requested', defaultMessage: 'Awaiting approval. Click to cancel follow request' },
-  unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
-  unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
-  unfollowConfirm: { id: 'confirmations.unfollow.confirm', defaultMessage: 'Unfollow' },
-  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
-});
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, { id }) => ({
-    account: getAccount(state, id),
-  });
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onFollow(account) {
-    if (account.getIn(['relationship', 'following'])) {
-      dispatch(
-        openModal({
-          modalType: 'CONFIRM',
-          modalProps: {
-            message: (
-              <FormattedMessage
-                id='confirmations.unfollow.message'
-                defaultMessage='Are you sure you want to unfollow {name}?'
-                values={{ name: <strong>@{account.get('acct')}</strong> }}
-              />
-            ),
-            confirm: intl.formatMessage(messages.unfollowConfirm),
-            onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-          } }),
-      );
-    } else if (account.getIn(['relationship', 'requested'])) {
-      dispatch(openModal({
-        modalType: 'CONFIRM',
-        modalProps: {
-          message: <FormattedMessage id='confirmations.cancel_follow_request.message' defaultMessage='Are you sure you want to withdraw your request to follow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
-          confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
-          onConfirm: () => dispatch(unfollowAccount(account.get('id'))),
-        },
-      }));
-    } else {
-      dispatch(followAccount(account.get('id')));
-    }
-  },
-
-  onBlock(account) {
-    if (account.getIn(['relationship', 'blocking'])) {
-      dispatch(unblockAccount(account.get('id')));
-    }
-  },
-
-  onMute(account) {
-    if (account.getIn(['relationship', 'muting'])) {
-      dispatch(unmuteAccount(account.get('id')));
-    }
-  },
-
-});
-
-class AccountCard extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    intl: PropTypes.object.isRequired,
-    onFollow: PropTypes.func.isRequired,
-    onBlock: PropTypes.func.isRequired,
-    onMute: PropTypes.func.isRequired,
-  };
-
-  handleMouseEnter = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-original');
-    }
-  };
-
-  handleMouseLeave = ({ currentTarget }) => {
-    if (autoPlayGif) {
-      return;
-    }
-
-    const emojis = currentTarget.querySelectorAll('.custom-emoji');
-
-    for (var i = 0; i < emojis.length; i++) {
-      let emoji = emojis[i];
-      emoji.src = emoji.getAttribute('data-static');
-    }
-  };
-
-  handleFollow = () => {
-    this.props.onFollow(this.props.account);
-  };
-
-  handleBlock = () => {
-    this.props.onBlock(this.props.account);
-  };
-
-  handleMute = () => {
-    this.props.onMute(this.props.account);
-  };
-
-  handleEditProfile = () => {
-    window.open('/settings/profile', '_blank');
-  };
-
-  render() {
-    const { account, intl } = this.props;
-
-    let actionBtn;
-
-    if (me !== account.get('id')) {
-      if (!account.get('relationship')) { // Wait until the relationship is loaded
-        actionBtn = '';
-      } else if (account.getIn(['relationship', 'requested'])) {
-        actionBtn = <Button  text={intl.formatMessage(messages.cancel_follow_request)} title={intl.formatMessage(messages.requested)} onClick={this.handleFollow} />;
-      } else if (account.getIn(['relationship', 'muting'])) {
-        actionBtn = <Button  text={intl.formatMessage(messages.unmute)} onClick={this.handleMute} />;
-      } else if (!account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button disabled={account.getIn(['relationship', 'blocked_by'])} className={classNames({ 'button--destructive': account.getIn(['relationship', 'following']) })} text={intl.formatMessage(account.getIn(['relationship', 'following']) ? messages.unfollow : messages.follow)} onClick={this.handleFollow} />;
-      } else if (account.getIn(['relationship', 'blocking'])) {
-        actionBtn = <Button  text={intl.formatMessage(messages.unblock)} onClick={this.handleBlock} />;
-      }
-    } else {
-      actionBtn = <Button  text={intl.formatMessage(messages.edit_profile)} onClick={this.handleEditProfile} />;
-    }
-
-    return (
-      <div className='account-card'>
-        <Link to={`/@${account.get('acct')}`} className='account-card__permalink'>
-          <div className='account-card__header'>
-            <img
-              src={
-                autoPlayGif ? account.get('header') : account.get('header_static')
-              }
-              alt=''
-            />
-          </div>
-
-          <div className='account-card__title'>
-            <div className='account-card__title__avatar'><Avatar account={account} size={56} /></div>
-            <DisplayName account={account} />
-          </div>
-        </Link>
-
-        {account.get('note').length > 0 && (
-          <div
-            className='account-card__bio translate'
-            onMouseEnter={this.handleMouseEnter}
-            onMouseLeave={this.handleMouseLeave}
-            dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
-          />
-        )}
-
-        <div className='account-card__actions'>
-          <div className='account-card__counters'>
-            <div className='account-card__counters__item'>
-              <ShortNumber value={account.get('statuses_count')} />
-              <small>
-                <FormattedMessage id='account.posts' defaultMessage='Posts' />
-              </small>
-            </div>
-
-            <div className='account-card__counters__item'>
-              <ShortNumber value={account.get('followers_count')} />{' '}
-              <small>
-                <FormattedMessage
-                  id='account.followers'
-                  defaultMessage='Followers'
-                />
-              </small>
-            </div>
-
-            <div className='account-card__counters__item'>
-              <ShortNumber value={account.get('following_count')} />{' '}
-              <small>
-                <FormattedMessage
-                  id='account.following'
-                  defaultMessage='Following'
-                />
-              </small>
-            </div>
-          </div>
-
-          <div className='account-card__actions__button'>
-            {actionBtn}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(AccountCard));

app/javascript/mastodon/features/directory/components/account_card.tsx

@@ -0,0 +1,269 @@
+import type { MouseEventHandler } from 'react';
+import { useCallback } from 'react';
+
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+
+import {
+  followAccount,
+  unfollowAccount,
+  unblockAccount,
+  unmuteAccount,
+} from 'mastodon/actions/accounts';
+import { openModal } from 'mastodon/actions/modal';
+import { Avatar } from 'mastodon/components/avatar';
+import { Button } from 'mastodon/components/button';
+import { DisplayName } from 'mastodon/components/display_name';
+import { ShortNumber } from 'mastodon/components/short_number';
+import { autoPlayGif, me } from 'mastodon/initial_state';
+import type { Account } from 'mastodon/models/account';
+import { makeGetAccount } from 'mastodon/selectors';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+const messages = defineMessages({
+  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
+  follow: { id: 'account.follow', defaultMessage: 'Follow' },
+  cancel_follow_request: {
+    id: 'account.cancel_follow_request',
+    defaultMessage: 'Withdraw follow request',
+  },
+  cancelFollowRequestConfirm: {
+    id: 'confirmations.cancel_follow_request.confirm',
+    defaultMessage: 'Withdraw request',
+  },
+  requested: {
+    id: 'account.requested',
+    defaultMessage: 'Awaiting approval. Click to cancel follow request',
+  },
+  unblock: { id: 'account.unblock_short', defaultMessage: 'Unblock' },
+  unmute: { id: 'account.unmute_short', defaultMessage: 'Unmute' },
+  unfollowConfirm: {
+    id: 'confirmations.unfollow.confirm',
+    defaultMessage: 'Unfollow',
+  },
+  edit_profile: { id: 'account.edit_profile', defaultMessage: 'Edit profile' },
+});
+
+const getAccount = makeGetAccount();
+
+export const AccountCard: React.FC<{ accountId: string }> = ({ accountId }) => {
+  const intl = useIntl();
+  const account = useAppSelector((s) => getAccount(s, accountId));
+  const dispatch = useAppDispatch();
+
+  const handleMouseEnter = useCallback<MouseEventHandler>(
+    ({ currentTarget }) => {
+      if (autoPlayGif) {
+        return;
+      }
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      emojis.forEach((emoji) => {
+        const original = emoji.getAttribute('data-original');
+        if (original) emoji.src = original;
+      });
+    },
+    [],
+  );
+
+  const handleMouseLeave = useCallback<MouseEventHandler>(
+    ({ currentTarget }) => {
+      if (autoPlayGif) {
+        return;
+      }
+
+      const emojis =
+        currentTarget.querySelectorAll<HTMLImageElement>('.custom-emoji');
+
+      emojis.forEach((emoji) => {
+        const staticUrl = emoji.getAttribute('data-static');
+        if (staticUrl) emoji.src = staticUrl;
+      });
+    },
+    [],
+  );
+
+  const handleFollow = useCallback(() => {
+    if (!account) return;
+
+    if (account.getIn(['relationship', 'following'])) {
+      dispatch(
+        openModal({
+          modalType: 'CONFIRM',
+          modalProps: {
+            message: (
+              <FormattedMessage
+                id='confirmations.unfollow.message'
+                defaultMessage='Are you sure you want to unfollow {name}?'
+                values={{ name: <strong>@{account.get('acct')}</strong> }}
+              />
+            ),
+            confirm: intl.formatMessage(messages.unfollowConfirm),
+            onConfirm: () => {
+              dispatch(unfollowAccount(account.get('id')));
+            },
+          },
+        }),
+      );
+    } else if (account.getIn(['relationship', 'requested'])) {
+      dispatch(
+        openModal({
+          modalType: 'CONFIRM',
+          modalProps: {
+            message: (
+              <FormattedMessage
+                id='confirmations.cancel_follow_request.message'
+                defaultMessage='Are you sure you want to withdraw your request to follow {name}?'
+                values={{ name: <strong>@{account.get('acct')}</strong> }}
+              />
+            ),
+            confirm: intl.formatMessage(messages.cancelFollowRequestConfirm),
+            onConfirm: () => {
+              dispatch(unfollowAccount(account.get('id')));
+            },
+          },
+        }),
+      );
+    } else {
+      dispatch(followAccount(account.get('id')));
+    }
+  }, [account, dispatch, intl]);
+
+  const handleBlock = useCallback(() => {
+    if (account?.relationship?.blocking) {
+      dispatch(unblockAccount(account.get('id')));
+    }
+  }, [account, dispatch]);
+
+  const handleMute = useCallback(() => {
+    if (account?.relationship?.muting) {
+      dispatch(unmuteAccount(account.get('id')));
+    }
+  }, [account, dispatch]);
+
+  const handleEditProfile = useCallback(() => {
+    window.open('/settings/profile', '_blank');
+  }, []);
+
+  if (!account) return null;
+
+  let actionBtn;
+
+  if (me !== account.get('id')) {
+    if (!account.get('relationship')) {
+      // Wait until the relationship is loaded
+      actionBtn = '';
+    } else if (account.getIn(['relationship', 'requested'])) {
+      actionBtn = (
+        <Button
+          text={intl.formatMessage(messages.cancel_follow_request)}
+          title={intl.formatMessage(messages.requested)}
+          onClick={handleFollow}
+        />
+      );
+    } else if (account.getIn(['relationship', 'muting'])) {
+      actionBtn = (
+        <Button
+          text={intl.formatMessage(messages.unmute)}
+          onClick={handleMute}
+        />
+      );
+    } else if (!account.getIn(['relationship', 'blocking'])) {
+      actionBtn = (
+        <Button
+          disabled={account.relationship?.blocked_by}
+          className={classNames({
+            'button--destructive': account.getIn(['relationship', 'following']),
+          })}
+          text={intl.formatMessage(
+            account.getIn(['relationship', 'following'])
+              ? messages.unfollow
+              : messages.follow,
+          )}
+          onClick={handleFollow}
+        />
+      );
+    } else if (account.getIn(['relationship', 'blocking'])) {
+      actionBtn = (
+        <Button
+          text={intl.formatMessage(messages.unblock)}
+          onClick={handleBlock}
+        />
+      );
+    }
+  } else {
+    actionBtn = (
+      <Button
+        text={intl.formatMessage(messages.edit_profile)}
+        onClick={handleEditProfile}
+      />
+    );
+  }
+
+  return (
+    <div className='account-card'>
+      <Link to={`/@${account.get('acct')}`} className='account-card__permalink'>
+        <div className='account-card__header'>
+          <img
+            src={
+              autoPlayGif ? account.get('header') : account.get('header_static')
+            }
+            alt=''
+          />
+        </div>
+
+        <div className='account-card__title'>
+          <div className='account-card__title__avatar'>
+            <Avatar account={account as Account} size={56} />
+          </div>
+          <DisplayName account={account as Account} />
+        </div>
+      </Link>
+
+      {account.get('note').length > 0 && (
+        <div
+          className='account-card__bio translate'
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+          dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
+        />
+      )}
+
+      <div className='account-card__actions'>
+        <div className='account-card__counters'>
+          <div className='account-card__counters__item'>
+            <ShortNumber value={account.get('statuses_count')} />
+            <small>
+              <FormattedMessage id='account.posts' defaultMessage='Posts' />
+            </small>
+          </div>
+
+          <div className='account-card__counters__item'>
+            <ShortNumber value={account.get('followers_count')} />{' '}
+            <small>
+              <FormattedMessage
+                id='account.followers'
+                defaultMessage='Followers'
+              />
+            </small>
+          </div>
+
+          <div className='account-card__counters__item'>
+            <ShortNumber value={account.get('following_count')} />{' '}
+            <small>
+              <FormattedMessage
+                id='account.following'
+                defaultMessage='Following'
+              />
+            </small>
+          </div>
+        </div>
+
+        <div className='account-card__actions__button'>{actionBtn}</div>
+      </div>
+    </div>
+  );
+};

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

@@ -1,181 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { defineMessages, injectIntl } 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 PeopleIcon from '@/material-icons/400-24px/group.svg?react';
-import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'mastodon/actions/columns';
-import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
-import Column 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';
-import { RadioButton } from 'mastodon/components/radio_button';
-import ScrollContainer from 'mastodon/containers/scroll_container';
-
-import AccountCard from './components/account_card';
-
-const messages = defineMessages({
-  title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
-  recentlyActive: { id: 'directory.recently_active', defaultMessage: 'Recently active' },
-  newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
-  local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
-  federated: { id: 'directory.federated', defaultMessage: 'From known fediverse' },
-});
-
-const mapStateToProps = state => ({
-  accountIds: state.getIn(['user_lists', 'directory', 'items'], ImmutableList()),
-  isLoading: state.getIn(['user_lists', 'directory', 'isLoading'], true),
-  domain: state.getIn(['meta', 'domain']),
-});
-
-class Directory extends PureComponent {
-
-  static propTypes = {
-    isLoading: PropTypes.bool,
-    accountIds: ImmutablePropTypes.list.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    columnId: PropTypes.string,
-    intl: PropTypes.object.isRequired,
-    multiColumn: PropTypes.bool,
-    domain: PropTypes.string.isRequired,
-    params: PropTypes.shape({
-      order: PropTypes.string,
-      local: PropTypes.bool,
-    }),
-  };
-
-  state = {
-    order: null,
-    local: null,
-  };
-
-  handlePin = () => {
-    const { columnId, dispatch } = this.props;
-
-    if (columnId) {
-      dispatch(removeColumn(columnId));
-    } else {
-      dispatch(addColumn('DIRECTORY', this.getParams(this.props, this.state)));
-    }
-  };
-
-  getParams = (props, state) => ({
-    order: state.order === null ? (props.params.order || 'active') : state.order,
-    local: state.local === null ? (props.params.local || false) : state.local,
-  });
-
-  handleMove = dir => {
-    const { columnId, dispatch } = this.props;
-    dispatch(moveColumn(columnId, dir));
-  };
-
-  handleHeaderClick = () => {
-    this.column.scrollTop();
-  };
-
-  componentDidMount () {
-    const { dispatch } = this.props;
-    dispatch(fetchDirectory(this.getParams(this.props, this.state)));
-  }
-
-  componentDidUpdate (prevProps, prevState) {
-    const { dispatch } = this.props;
-    const paramsOld = this.getParams(prevProps, prevState);
-    const paramsNew = this.getParams(this.props, this.state);
-
-    if (paramsOld.order !== paramsNew.order || paramsOld.local !== paramsNew.local) {
-      dispatch(fetchDirectory(paramsNew));
-    }
-  }
-
-  setRef = c => {
-    this.column = c;
-  };
-
-  handleChangeOrder = e => {
-    const { dispatch, columnId } = this.props;
-
-    if (columnId) {
-      dispatch(changeColumnParams(columnId, ['order'], e.target.value));
-    } else {
-      this.setState({ order: e.target.value });
-    }
-  };
-
-  handleChangeLocal = e => {
-    const { dispatch, columnId } = this.props;
-
-    if (columnId) {
-      dispatch(changeColumnParams(columnId, ['local'], e.target.value === '1'));
-    } else {
-      this.setState({ local: e.target.value === '1' });
-    }
-  };
-
-  handleLoadMore = () => {
-    const { dispatch } = this.props;
-    dispatch(expandDirectory(this.getParams(this.props, this.state)));
-  };
-
-  render () {
-    const { isLoading, accountIds, intl, columnId, multiColumn, domain } = this.props;
-    const { order, local }  = this.getParams(this.props, this.state);
-    const pinned = !!columnId;
-
-    const scrollableArea = (
-      <div className='scrollable'>
-        <div className='filter-form'>
-          <div className='filter-form__column' role='group'>
-            <RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={this.handleChangeOrder} />
-            <RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={this.handleChangeOrder} />
-          </div>
-
-          <div className='filter-form__column' role='group'>
-            <RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain })} checked={local} onChange={this.handleChangeLocal} />
-            <RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={this.handleChangeLocal} />
-          </div>
-        </div>
-
-        <div className='directory__list'>
-          {isLoading ? <LoadingIndicator /> : accountIds.map(accountId => (
-            <AccountCard id={accountId} key={accountId} />
-          ))}
-        </div>
-
-        <LoadMore onClick={this.handleLoadMore} visible={!isLoading} />
-      </div>
-    );
-
-    return (
-      <Column bindToDocument={!multiColumn} ref={this.setRef} label={intl.formatMessage(messages.title)}>
-        <ColumnHeader
-          icon='address-book-o'
-          iconComponent={PeopleIcon}
-          title={intl.formatMessage(messages.title)}
-          onPin={this.handlePin}
-          onMove={this.handleMove}
-          onClick={this.handleHeaderClick}
-          pinned={pinned}
-          multiColumn={multiColumn}
-        />
-
-        {multiColumn && !pinned ? <ScrollContainer scrollKey='directory'>{scrollableArea}</ScrollContainer> : scrollableArea}
-
-        <Helmet>
-          <title>{intl.formatMessage(messages.title)}</title>
-          <meta name='robots' content='noindex' />
-        </Helmet>
-      </Column>
-    );
-  }
-
-}
-
-export default connect(mapStateToProps)(injectIntl(Directory));

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

@@ -0,0 +1,216 @@
+import type { ChangeEventHandler } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import { Helmet } from 'react-helmet';
+
+import { List as ImmutableList } from 'immutable';
+
+import PeopleIcon from '@/material-icons/400-24px/group.svg?react';
+import {
+  addColumn,
+  removeColumn,
+  moveColumn,
+  changeColumnParams,
+} from 'mastodon/actions/columns';
+import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
+import Column 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';
+import { RadioButton } from 'mastodon/components/radio_button';
+import ScrollContainer from 'mastodon/containers/scroll_container';
+import { useAppDispatch, useAppSelector } from 'mastodon/store';
+
+import { AccountCard } from './components/account_card';
+
+const messages = defineMessages({
+  title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
+  recentlyActive: {
+    id: 'directory.recently_active',
+    defaultMessage: 'Recently active',
+  },
+  newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
+  local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
+  federated: {
+    id: 'directory.federated',
+    defaultMessage: 'From known fediverse',
+  },
+});
+
+export const Directory: React.FC<{
+  columnId?: string;
+  multiColumn?: boolean;
+  params?: { order: string; local?: boolean };
+}> = ({ columnId, multiColumn, params }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const [state, setState] = useState<{
+    order: string | null;
+    local: boolean | null;
+  }>({
+    order: null,
+    local: null,
+  });
+
+  const column = useRef<Column>(null);
+
+  const order = state.order ?? params?.order ?? 'active';
+  const local = state.local ?? params?.local ?? false;
+
+  const handlePin = useCallback(() => {
+    if (columnId) {
+      dispatch(removeColumn(columnId));
+    } else {
+      dispatch(addColumn('DIRECTORY', { order, local }));
+    }
+  }, [dispatch, columnId, order, local]);
+
+  const domain = useAppSelector((s) => s.meta.get('domain') as string);
+  const accountIds = useAppSelector(
+    (state) =>
+      state.user_lists.getIn(
+        ['directory', 'items'],
+        ImmutableList(),
+      ) as ImmutableList<string>,
+  );
+  const isLoading = useAppSelector(
+    (state) =>
+      state.user_lists.getIn(['directory', 'isLoading'], true) as boolean,
+  );
+
+  useEffect(() => {
+    void dispatch(fetchDirectory({ order, local }));
+  }, [dispatch, order, local]);
+
+  const handleMove = useCallback(
+    (dir: number) => {
+      dispatch(moveColumn(columnId, dir));
+    },
+    [dispatch, columnId],
+  );
+
+  const handleHeaderClick = useCallback(() => {
+    column.current?.scrollTop();
+  }, []);
+
+  const handleChangeOrder = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      if (columnId) {
+        dispatch(changeColumnParams(columnId, ['order'], e.target.value));
+      } else {
+        setState((s) => ({ order: e.target.value, local: s.local }));
+      }
+    },
+    [dispatch, columnId],
+  );
+
+  const handleChangeLocal = useCallback<ChangeEventHandler<HTMLInputElement>>(
+    (e) => {
+      if (columnId) {
+        dispatch(
+          changeColumnParams(columnId, ['local'], e.target.value === '1'),
+        );
+      } else {
+        setState((s) => ({ local: e.target.value === '1', order: s.order }));
+      }
+    },
+    [dispatch, columnId],
+  );
+
+  const handleLoadMore = useCallback(() => {
+    void dispatch(expandDirectory({ order, local }));
+  }, [dispatch, order, local]);
+
+  const pinned = !!columnId;
+
+  const scrollableArea = (
+    <div className='scrollable'>
+      <div className='filter-form'>
+        <div className='filter-form__column' role='group'>
+          <RadioButton
+            name='order'
+            value='active'
+            label={intl.formatMessage(messages.recentlyActive)}
+            checked={order === 'active'}
+            onChange={handleChangeOrder}
+          />
+          <RadioButton
+            name='order'
+            value='new'
+            label={intl.formatMessage(messages.newArrivals)}
+            checked={order === 'new'}
+            onChange={handleChangeOrder}
+          />
+        </div>
+
+        <div className='filter-form__column' role='group'>
+          <RadioButton
+            name='local'
+            value='1'
+            label={intl.formatMessage(messages.local, { domain })}
+            checked={local}
+            onChange={handleChangeLocal}
+          />
+          <RadioButton
+            name='local'
+            value='0'
+            label={intl.formatMessage(messages.federated)}
+            checked={!local}
+            onChange={handleChangeLocal}
+          />
+        </div>
+      </div>
+
+      <div className='directory__list'>
+        {isLoading ? (
+          <LoadingIndicator />
+        ) : (
+          accountIds.map((accountId) => (
+            <AccountCard accountId={accountId} key={accountId} />
+          ))
+        )}
+      </div>
+
+      <LoadMore onClick={handleLoadMore} visible={!isLoading} />
+    </div>
+  );
+
+  return (
+    <Column
+      bindToDocument={!multiColumn}
+      ref={column}
+      label={intl.formatMessage(messages.title)}
+    >
+      <ColumnHeader
+        icon='address-book-o'
+        iconComponent={PeopleIcon}
+        title={intl.formatMessage(messages.title)}
+        onPin={handlePin}
+        onMove={handleMove}
+        onClick={handleHeaderClick}
+        pinned={pinned}
+        multiColumn={multiColumn}
+      />
+
+      {multiColumn && !pinned ? (
+        // @ts-expect-error ScrollContainer is not properly typed yet
+        <ScrollContainer scrollKey='directory'>
+          {scrollableArea}
+        </ScrollContainer>
+      ) : (
+        scrollableArea
+      )}
+
+      <Helmet>
+        <title>{intl.formatMessage(messages.title)}</title>
+        <meta name='robots' content='noindex' />
+      </Helmet>
+    </Column>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export -- Needed because this is called as an async components
+export default Directory;

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

@@ -9,7 +9,7 @@ export const AuthorLink = ({ accountId }) => {
   const account = useAppSelector(state => state.getIn(['accounts', accountId]));
 
   return (
-    <Link to={`/@${account.get('acct')}`} className='story__details__shared__author-link'>
+    <Link to={`/@${account.get('acct')}`} className='story__details__shared__author-link' data-hover-card-account={accountId}>
       <Avatar account={account} size={16} />
       <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
     </Link>

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

@@ -8,34 +8,21 @@ import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { followAccount, unfollowAccount } from 'mastodon/actions/accounts';
 import { dismissSuggestion } from 'mastodon/actions/suggestions';
 import { Avatar } from 'mastodon/components/avatar';
-import { Button } from 'mastodon/components/button';
 import { DisplayName } from 'mastodon/components/display_name';
+import { FollowButton } from 'mastodon/components/follow_button';
 import { IconButton } from 'mastodon/components/icon_button';
 import { domain } from 'mastodon/initial_state';
 
 const messages = defineMessages({
-  follow: { id: 'account.follow', defaultMessage: 'Follow' },
-  unfollow: { id: 'account.unfollow', defaultMessage: 'Unfollow' },
   dismiss: { id: 'follow_suggestions.dismiss', defaultMessage: "Don't show again" },
 });
 
 export const Card = ({ id, source }) => {
   const intl = useIntl();
   const account = useSelector(state => state.getIn(['accounts', id]));
-  const relationship = useSelector(state => state.getIn(['relationships', id]));
   const dispatch = useDispatch();
-  const following = relationship?.get('following') ?? relationship?.get('requested');
-
-  const handleFollow = useCallback(() => {
-    if (following) {
-      dispatch(unfollowAccount(id));
-    } else {
-      dispatch(followAccount(id));
-    }
-  }, [id, following, dispatch]);
 
   const handleDismiss = useCallback(() => {
     dispatch(dismissSuggestion(id));
@@ -74,7 +61,7 @@ export const Card = ({ id, source }) => {
           <div className='explore__suggestions__card__body__main__name-button'>
             <Link className='explore__suggestions__card__body__main__name-button__name' to={`/@${account.get('acct')}`}><DisplayName account={account} /></Link>
             <IconButton iconComponent={CloseIcon} onClick={handleDismiss} title={intl.formatMessage(messages.dismiss)} />
-            <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} secondary={following} onClick={handleFollow} />
+            <FollowButton accountId={account.get('id')} />
           </div>
         </div>
       </div>

app/javascript/mastodon/features/home_timeline/components/inline_follow_suggestions.jsx

@@ -12,12 +12,11 @@ import ChevronLeftIcon from '@/material-icons/400-24px/chevron_left.svg?react';
 import ChevronRightIcon from '@/material-icons/400-24px/chevron_right.svg?react';
 import CloseIcon from '@/material-icons/400-24px/close.svg?react';
 import InfoIcon from '@/material-icons/400-24px/info.svg?react';
-import { followAccount, unfollowAccount } from 'mastodon/actions/accounts';
 import { changeSetting } from 'mastodon/actions/settings';
 import { fetchSuggestions, dismissSuggestion } from 'mastodon/actions/suggestions';
 import { Avatar } from 'mastodon/components/avatar';
-import { Button } from 'mastodon/components/button';
 import { DisplayName } from 'mastodon/components/display_name';
+import { FollowButton } from 'mastodon/components/follow_button';
 import { Icon } from 'mastodon/components/icon';
 import { IconButton } from 'mastodon/components/icon_button';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
@@ -79,18 +78,8 @@ Source.propTypes = {
 const Card = ({ id, sources }) => {
   const intl = useIntl();
   const account = useSelector(state => state.getIn(['accounts', id]));
-  const relationship = useSelector(state => state.getIn(['relationships', id]));
   const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
   const dispatch = useDispatch();
-  const following = relationship?.get('following') ?? relationship?.get('requested');
-
-  const handleFollow = useCallback(() => {
-    if (following) {
-      dispatch(unfollowAccount(id));
-    } else {
-      dispatch(followAccount(id));
-    }
-  }, [id, following, dispatch]);
 
   const handleDismiss = useCallback(() => {
     dispatch(dismissSuggestion(id));
@@ -109,7 +98,7 @@ const Card = ({ id, sources }) => {
         {firstVerifiedField ? <VerifiedBadge link={firstVerifiedField.get('value')} /> : <Source id={sources.get(0)} />}
       </div>
 
-      <Button text={intl.formatMessage(following ? messages.unfollow : messages.follow)} secondary={following} onClick={handleFollow} />
+      <FollowButton accountId={id} />
     </div>
   );
 };

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

@@ -435,7 +435,7 @@ class Notification extends ImmutablePureComponent {
 
     const targetAccount = report.get('target_account');
     const targetDisplayNameHtml = { __html: targetAccount.get('display_name_html') };
-    const targetLink = <bdi><Link className='notification__display-name' title={targetAccount.get('acct')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
+    const targetLink = <bdi><Link className='notification__display-name' data-hover-card-account={targetAccount.get('id')} to={`/@${targetAccount.get('acct')}`} dangerouslySetInnerHTML={targetDisplayNameHtml} /></bdi>;
 
     return (
       <HotKeys handlers={this.getHandlers()}>
@@ -458,7 +458,7 @@ class Notification extends ImmutablePureComponent {
     const { notification } = this.props;
     const account          = notification.get('account');
     const displayNameHtml  = { __html: account.get('display_name_html') };
-    const link             = <bdi><Link className='notification__display-name' href={`/@${account.get('acct')}`} title={account.get('acct')} to={`/@${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
+    const link             = <bdi><Link className='notification__display-name' href={`/@${account.get('acct')}`} data-hover-card-account={account.get('id')} to={`/@${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
 
     switch(notification.get('type')) {
     case 'follow':

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

@@ -272,7 +272,7 @@ class DetailedStatus extends ImmutablePureComponent {
               <FormattedMessage id='status.direct_indicator' defaultMessage='Private mention' />
             </div>
           )}
-          <a href={`/@${status.getIn(['account', 'acct'])}`} onClick={this.handleAccountClick} className='detailed-status__display-name'>
+          <a href={`/@${status.getIn(['account', 'acct'])}`} data-hover-card-account={status.getIn(['account', 'id'])} onClick={this.handleAccountClick} className='detailed-status__display-name'>
             <div className='detailed-status__display-avatar'><Avatar account={status.get('account')} size={46} /></div>
             <DisplayName account={status.get('account')} localDomain={this.props.domain} />
           </a>

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

@@ -1,11 +1,8 @@
-import Column from '../../../components/column';
-import ColumnHeader from '../../../components/column_header';
+import Column from 'mastodon/components/column';
+import { ColumnHeader } from 'mastodon/components/column_header';
+import type { Props as ColumnHeaderProps } from 'mastodon/components/column_header';
 
-interface Props {
-  multiColumn?: boolean;
-}
-
-export const ColumnLoading: React.FC<Props> = (otherProps) => (
+export const ColumnLoading: React.FC<ColumnHeaderProps> = (otherProps) => (
   <Column>
     <ColumnHeader {...otherProps} />
     <div className='scrollable' />

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

@@ -14,6 +14,7 @@ import { HotKeys } from 'react-hotkeys';
 import { focusApp, unfocusApp, changeLayout } from 'mastodon/actions/app';
 import { synchronouslySubmitMarkers, submitMarkers, fetchMarkers } from 'mastodon/actions/markers';
 import { INTRODUCTION_VERSION } from 'mastodon/actions/onboarding';
+import { HoverCardController } from 'mastodon/components/hover_card_controller';
 import { PictureInPicture } from 'mastodon/features/picture_in_picture';
 import { identityContextPropShape, withIdentity } from 'mastodon/identity_context';
 import { layoutFromWindow } from 'mastodon/is_mobile';
@@ -585,6 +586,7 @@ class UI extends PureComponent {
 
           {layout !== 'mobile' && <PictureInPicture />}
           <NotificationsContainer />
+          <HoverCardController />
           <LoadingBarContainer className='loading-bar' />
           <ModalContainer />
           <UploadArea active={draggingOver} onClose={this.closeUploadModal} />

app/javascript/mastodon/locales/en.json

@@ -35,9 +35,9 @@
   "account.follow_back": "Follow back",
   "account.followers": "Followers",
   "account.followers.empty": "No one follows this user yet.",
-  "account.followers_counter": "{count, plural, one {{counter} Follower} other {{counter} Followers}}",
+  "account.followers_counter": "{count, plural, one {{counter} follower} other {{counter} followers}}",
   "account.following": "Following",
-  "account.following_counter": "{count, plural, one {{counter} Following} other {{counter} Following}}",
+  "account.following_counter": "{count, plural, one {{counter} following} other {{counter} following}}",
   "account.follows.empty": "This user doesn't follow anyone yet.",
   "account.go_to_profile": "Go to profile",
   "account.hide_reblogs": "Hide boosts from @{name}",
@@ -63,7 +63,7 @@
   "account.requested_follow": "{name} has requested to follow you",
   "account.share": "Share @{name}'s profile",
   "account.show_reblogs": "Show boosts from @{name}",
-  "account.statuses_counter": "{count, plural, one {{counter} Post} other {{counter} Posts}}",
+  "account.statuses_counter": "{count, plural, one {{counter} post} other {{counter} posts}}",
   "account.unblock": "Unblock @{name}",
   "account.unblock_domain": "Unblock domain {domain}",
   "account.unblock_short": "Unblock",

app/javascript/mastodon/reducers/user_lists.js

@@ -1,12 +1,8 @@
 import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
 
 import {
-  DIRECTORY_FETCH_REQUEST,
-  DIRECTORY_FETCH_SUCCESS,
-  DIRECTORY_FETCH_FAIL,
-  DIRECTORY_EXPAND_REQUEST,
-  DIRECTORY_EXPAND_SUCCESS,
-  DIRECTORY_EXPAND_FAIL,
+  expandDirectory,
+  fetchDirectory
 } from 'mastodon/actions/directory';
 import {
   FEATURED_TAGS_FETCH_REQUEST,
@@ -117,6 +113,7 @@ const normalizeFeaturedTags = (state, path, featuredTags, accountId) => {
   }));
 };
 
+/** @type {import('@reduxjs/toolkit').Reducer<typeof initialState>} */
 export default function userLists(state = initialState, action) {
   switch(action.type) {
   case FOLLOWERS_FETCH_SUCCESS:
@@ -194,16 +191,6 @@ export default function userLists(state = initialState, action) {
   case MUTES_FETCH_FAIL:
   case MUTES_EXPAND_FAIL:
     return state.setIn(['mutes', 'isLoading'], false);
-  case DIRECTORY_FETCH_SUCCESS:
-    return normalizeList(state, ['directory'], action.accounts, action.next);
-  case DIRECTORY_EXPAND_SUCCESS:
-    return appendToList(state, ['directory'], action.accounts, action.next);
-  case DIRECTORY_FETCH_REQUEST:
-  case DIRECTORY_EXPAND_REQUEST:
-    return state.setIn(['directory', 'isLoading'], true);
-  case DIRECTORY_FETCH_FAIL:
-  case DIRECTORY_EXPAND_FAIL:
-    return state.setIn(['directory', 'isLoading'], false);
   case FEATURED_TAGS_FETCH_SUCCESS:
     return normalizeFeaturedTags(state, ['featured_tags', action.id], action.tags, action.id);
   case FEATURED_TAGS_FETCH_REQUEST:
@@ -211,6 +198,17 @@ export default function userLists(state = initialState, action) {
   case FEATURED_TAGS_FETCH_FAIL:
     return state.setIn(['featured_tags', action.id, 'isLoading'], false);
   default:
+    if(fetchDirectory.fulfilled.match(action))
+      return normalizeList(state, ['directory'], action.payload.accounts, undefined);
+    else if( expandDirectory.fulfilled.match(action))
+      return appendToList(state, ['directory'], action.payload.accounts, undefined);
+    else if(fetchDirectory.pending.match(action) ||
+     expandDirectory.pending.match(action))
+      return state.setIn(['directory', 'isLoading'], true);
+    else if(fetchDirectory.rejected.match(action) ||
+     expandDirectory.rejected.match(action))
+      return state.setIn(['directory', 'isLoading'], false);
+    else
       return state;
   }
 }

app/javascript/styles/mastodon-light/variables.scss

@@ -59,6 +59,8 @@ $emojis-requiring-inversion: 'chains';
 body {
   --dropdown-border-color: #d9e1e8;
   --dropdown-background-color: #fff;
+  --modal-border-color: #d9e1e8;
+  --modal-background-color: var(--background-color-tint);
   --background-border-color: #d9e1e8;
   --background-color: #fff;
   --background-color-tint: rgba(255, 255, 255, 80%);

app/javascript/styles/mastodon/components.scss

@@ -120,8 +120,27 @@
       text-decoration: none;
     }
 
-    &:disabled {
-      opacity: 0.5;
+    &.button--destructive {
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: $ui-button-destructive-focus-background-color;
+        color: $ui-button-destructive-focus-background-color;
+      }
+    }
+
+    &:disabled,
+    &.disabled {
+      opacity: 0.7;
+      border-color: $ui-primary-color;
+      color: $ui-primary-color;
+
+      &:active,
+      &:focus,
+      &:hover {
+        border-color: $ui-primary-color;
+        color: $ui-primary-color;
+      }
     }
   }
 
@@ -2420,7 +2439,7 @@ a.account__display-name {
 }
 
 .dropdown-animation {
-  animation: dropdown 150ms cubic-bezier(0.1, 0.7, 0.1, 1);
+  animation: dropdown 250ms cubic-bezier(0.1, 0.7, 0.1, 1);
 
   @keyframes dropdown {
     from {
@@ -10325,3 +10344,156 @@ noscript {
     }
   }
 }
+
+.hover-card-controller[data-popper-reference-hidden='true'] {
+  opacity: 0;
+  pointer-events: none;
+}
+
+.hover-card {
+  box-shadow: var(--dropdown-shadow);
+  background: var(--modal-background-color);
+  backdrop-filter: var(--background-filter);
+  border: 1px solid var(--modal-border-color);
+  border-radius: 8px;
+  padding: 16px;
+  width: 270px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
+  &--loading {
+    position: relative;
+    min-height: 100px;
+  }
+
+  &__name {
+    display: flex;
+    gap: 12px;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  &__number {
+    font-size: 15px;
+    line-height: 22px;
+    color: $secondary-text-color;
+
+    strong {
+      font-weight: 700;
+    }
+  }
+
+  &__text-row {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__bio {
+    color: $secondary-text-color;
+    font-size: 14px;
+    line-height: 20px;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    max-height: 2 * 20px;
+    overflow: hidden;
+
+    p {
+      margin-bottom: 0;
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: none;
+      }
+    }
+  }
+
+  .display-name {
+    font-size: 15px;
+    line-height: 22px;
+
+    bdi {
+      font-weight: 500;
+      color: $primary-text-color;
+    }
+
+    &__account {
+      display: block;
+      color: $dark-text-color;
+    }
+  }
+
+  .account-fields {
+    color: $secondary-text-color;
+    font-size: 14px;
+    line-height: 20px;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+
+      &:focus,
+      &:hover,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+
+    dl {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      dt {
+        flex: 0 0 auto;
+        color: $dark-text-color;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      dd {
+        flex: 1 1 auto;
+        font-weight: 500;
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      &.verified {
+        dd {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          overflow: hidden;
+          white-space: nowrap;
+          color: $valid-value-color;
+
+          & > span {
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+
+          a {
+            font-weight: 500;
+          }
+
+          .icon {
+            width: 16px;
+            height: 16px;
+          }
+        }
+      }
+    }
+  }
+}