From b1d2681115bb5f01f47d1de225da30eac9ff1240 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 29 Mar 2022 15:17:39 -0500
Subject: [PATCH 01/29] WIP emoji reacts

---
 app/soapbox/components/emoji_selector.js    |  2 +-
 app/soapbox/components/status_action_bar.js | 14 ++++++++------
 app/styles/components/emoji-reacts.scss     |  4 ++--
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/components/emoji_selector.js b/app/soapbox/components/emoji_selector.js
index 73db189a3..f41f23f41 100644
--- a/app/soapbox/components/emoji_selector.js
+++ b/app/soapbox/components/emoji_selector.js
@@ -102,7 +102,7 @@ class EmojiSelector extends ImmutablePureComponent {
         className='emoji-react-selector-container'
       >
         <div
-          className={classNames('emoji-react-selector', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
+          className={classNames('emoji-react-selector w-max', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
           onBlur={this.handleBlur}
           ref={this.setRef}
         >
diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index b3bc4786c..5844ac41f 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -9,6 +9,7 @@ import { connect } from 'react-redux';
 import { Link, withRouter } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
+import EmojiSelector from 'soapbox/components/emoji_selector';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { isStaff, isAdmin } from 'soapbox/utils/accounts';
@@ -541,7 +542,8 @@ class StatusActionBar extends ImmutablePureComponent {
   }
 
   render() {
-    const { status, intl, allowedEmoji, features, me } = this.props;
+    const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features, me } = this.props;
+    const { emojiSelectorVisible } = this.state;
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
 
@@ -660,16 +662,16 @@ class StatusActionBar extends ImmutablePureComponent {
 
         <div
           ref={this.setRef}
-          className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
-          // onMouseEnter={this.handleLikeButtonHover}
-          // onMouseLeave={this.handleLikeButtonLeave}
+          className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
+          onMouseEnter={this.handleLikeButtonHover}
+          onMouseLeave={this.handleLikeButtonLeave}
         >
-          {/* <EmojiSelector
+          <EmojiSelector
             onReact={this.handleReactClick}
             visible={features.emojiReacts && emojiSelectorVisible}
             focused={emojiSelectorFocused}
             onUnfocus={handleEmojiSelectorUnfocus}
-          /> */}
+          />
           <IconButton
             className={classNames({
               'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index a423a22eb..0d4d14e3e 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -125,8 +125,8 @@
     background: transparent;
 
     img {
-      width: 30px;
-      height: 30px;
+      width: 36px;
+      height: 36px;
       padding: 3px;
       transition: 0.1s;
     }

From c4dd3c65f9f8109835d41c5a950213dda6335d06 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 14:13:43 -0500
Subject: [PATCH 02/29] Convert components/status to Typescript

---
 app/soapbox/components/scrollable_list.js     |   4 +-
 .../components/{status.js => status.tsx}      | 398 ++++++++++--------
 app/soapbox/normalizers/account.ts            |   2 +-
 app/soapbox/normalizers/status.ts             |   2 +
 app/soapbox/types/entities.ts                 |  14 +-
 5 files changed, 236 insertions(+), 184 deletions(-)
 rename app/soapbox/components/{status.js => status.tsx} (54%)

diff --git a/app/soapbox/components/scrollable_list.js b/app/soapbox/components/scrollable_list.js
index 5e2f150d9..c1b8c1a52 100644
--- a/app/soapbox/components/scrollable_list.js
+++ b/app/soapbox/components/scrollable_list.js
@@ -107,7 +107,7 @@ class ScrollableList extends PureComponent {
 
     this.attachScrollListener();
     this.attachIntersectionObserver();
-    // Handle initial scroll posiiton
+    // Handle initial scroll position
     this.handleScroll();
   }
 
@@ -115,7 +115,7 @@ class ScrollableList extends PureComponent {
     if (this.documentElement && (this.documentElement.scrollTop > 0 || this.mouseMovedRecently)) {
       return { height: this.documentElement.scrollHeight, top: this.documentElement.scrollTop };
     } else {
-      return null;
+      return undefined;
     }
   }
 
diff --git a/app/soapbox/components/status.js b/app/soapbox/components/status.tsx
similarity index 54%
rename from app/soapbox/components/status.js
rename to app/soapbox/components/status.tsx
index 214daf6f6..2c5a2097d 100644
--- a/app/soapbox/components/status.js
+++ b/app/soapbox/components/status.tsx
@@ -1,10 +1,8 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, FormattedMessage } from 'react-intl';
+import { injectIntl, FormattedMessage, IntlShape } from 'react-intl';
 import { NavLink, withRouter } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
@@ -22,13 +20,27 @@ import StatusContent from './status_content';
 import StatusReplyMentions from './status_reply_mentions';
 import { HStack, Text } from './ui';
 
-export const textForScreenReader = (intl, status, rebloggedByText = false) => {
-  const displayName = status.getIn(['account', 'display_name']);
+import type { History } from 'history';
+import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+import type {
+  Account as AccountEntity,
+  Attachment as AttachmentEntity,
+  Status as StatusEntity,
+} from 'soapbox/types/entities';
+
+// Defined in components/scrollable_list
+type ScrollPosition = { height: number, top: number };
+
+export const textForScreenReader = (intl: IntlShape, status: StatusEntity, rebloggedByText?: string): string => {
+  const { account } = status;
+  if (!account || typeof account !== 'object') return '';
+
+  const displayName = account.display_name;
 
   const values = [
-    displayName.length === 0 ? status.getIn(['account', 'acct']).split('@')[0] : displayName,
-    status.get('spoiler_text') && status.get('hidden') ? status.get('spoiler_text') : status.get('search_index').slice(status.get('spoiler_text').length),
-    intl.formatDate(status.get('created_at'), { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
+    displayName.length === 0 ? account.acct.split('@')[0] : displayName,
+    status.spoiler_text && status.hidden ? status.spoiler_text : status.search_index.slice(status.spoiler_text.length),
+    intl.formatDate(status.created_at, { hour: '2-digit', minute: '2-digit', month: 'short', day: 'numeric' }),
     status.getIn(['account', 'acct']),
   ];
 
@@ -39,96 +51,106 @@ export const textForScreenReader = (intl, status, rebloggedByText = false) => {
   return values.join(', ');
 };
 
-export const defaultMediaVisibility = (status, displayMedia) => {
-  if (!status) {
-    return undefined;
+export const defaultMediaVisibility = (status: StatusEntity, displayMedia: string): boolean => {
+  if (!status) return false;
+
+  if (status.reblog && typeof status.reblog === 'object') {
+    status = status.reblog;
   }
 
-  if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
-    status = status.get('reblog');
-  }
-
-  return (displayMedia !== 'hide_all' && !status.get('sensitive') || displayMedia === 'show_all');
+  return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
 };
 
-export default @injectIntl @withRouter
-class Status extends ImmutablePureComponent {
+interface IStatus {
+  intl: IntlShape,
+  status: StatusEntity,
+  account: AccountEntity,
+  otherAccounts: ImmutableList<AccountEntity>,
+  onClick: () => void,
+  onReply: (status: StatusEntity, history: History) => void,
+  onFavourite: (status: StatusEntity) => void,
+  onReblog: (status: StatusEntity, e?: KeyboardEvent) => void,
+  onQuote: (status: StatusEntity) => void,
+  onDelete: (status: StatusEntity) => void,
+  onDirect: (status: StatusEntity) => void,
+  onChat: (status: StatusEntity) => void,
+  onMention: (account: StatusEntity['account'], history: History) => void,
+  onPin: (status: StatusEntity) => void,
+  onOpenMedia: (media: ImmutableList<AttachmentEntity>, index: number) => void,
+  onOpenVideo: (media: ImmutableMap<string, any> | AttachmentEntity, startTime: number) => void,
+  onOpenAudio: (media: ImmutableMap<string, any>, startTime: number) => void,
+  onBlock: (status: StatusEntity) => void,
+  onEmbed: (status: StatusEntity) => void,
+  onHeightChange: (status: StatusEntity) => void,
+  onToggleHidden: (status: StatusEntity) => void,
+  onShowHoverProfileCard: (status: StatusEntity) => void,
+  muted: boolean,
+  hidden: boolean,
+  unread: boolean,
+  onMoveUp: (statusId: string, featured: string) => void,
+  onMoveDown: (statusId: string, featured: string) => void,
+  getScrollPosition?: () => ScrollPosition | undefined,
+  updateScrollBottom?: (bottom: number) => void,
+  cacheMediaWidth: () => void,
+  cachedMediaWidth: number,
+  group: ImmutableMap<string, any>,
+  displayMedia: string,
+  allowedEmoji: ImmutableList<string>,
+  focusable: boolean,
+  history: History,
+  featured?: string,
+}
 
-  static propTypes = {
-    status: ImmutablePropTypes.record,
-    account: ImmutablePropTypes.record,
-    otherAccounts: ImmutablePropTypes.list,
-    onClick: PropTypes.func,
-    onReply: PropTypes.func,
-    onFavourite: PropTypes.func,
-    onReblog: PropTypes.func,
-    onQuote: PropTypes.func,
-    onDelete: PropTypes.func,
-    onDirect: PropTypes.func,
-    onChat: PropTypes.func,
-    onMention: PropTypes.func,
-    onPin: PropTypes.func,
-    onOpenMedia: PropTypes.func,
-    onOpenVideo: PropTypes.func,
-    onOpenAudio: PropTypes.func,
-    onBlock: PropTypes.func,
-    onEmbed: PropTypes.func,
-    onHeightChange: PropTypes.func,
-    onToggleHidden: PropTypes.func,
-    onShowHoverProfileCard: PropTypes.func,
-    muted: PropTypes.bool,
-    hidden: PropTypes.bool,
-    unread: PropTypes.bool,
-    onMoveUp: PropTypes.func,
-    onMoveDown: PropTypes.func,
-    getScrollPosition: PropTypes.func,
-    updateScrollBottom: PropTypes.func,
-    cacheMediaWidth: PropTypes.func,
-    cachedMediaWidth: PropTypes.number,
-    group: ImmutablePropTypes.map,
-    displayMedia: PropTypes.string,
-    allowedEmoji: ImmutablePropTypes.list,
-    focusable: PropTypes.bool,
-    history: PropTypes.object,
-  };
+interface IStatusState {
+  showMedia: boolean,
+  statusId?: string,
+  emojiSelectorFocused: boolean,
+  mediaWrapperWidth?: number,
+}
+
+class Status extends ImmutablePureComponent<IStatus, IStatusState> {
 
   static defaultProps = {
     focusable: true,
   };
 
+  didShowCard = false;
+  node?: HTMLDivElement = undefined;
+  height?: number = undefined;
+
   // Avoid checking props that are functions (and whose equality will always
   // evaluate to false. See react-immutable-pure-component for usage.
-  updateOnProps = [
+  updateOnProps: any[] = [
     'status',
     'account',
     'muted',
     'hidden',
   ];
 
-  state = {
+  state: IStatusState = {
     showMedia: defaultMediaVisibility(this.props.status, this.props.displayMedia),
     statusId: undefined,
     emojiSelectorFocused: false,
   };
 
   // Track height changes we know about to compensate scrolling
-  componentDidMount() {
-    this.didShowCard = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
+  componentDidMount(): void {
+    this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
   }
 
-  getSnapshotBeforeUpdate() {
+  getSnapshotBeforeUpdate(): ScrollPosition | undefined {
     if (this.props.getScrollPosition) {
       return this.props.getScrollPosition();
     } else {
-      return null;
+      return undefined;
     }
   }
 
-  static getDerivedStateFromProps(nextProps, prevState) {
-    if (nextProps.status && nextProps.status.get('id') !== prevState.statusId) {
+  static getDerivedStateFromProps(nextProps: IStatus, prevState: IStatusState) {
+    if (nextProps.status && nextProps.status.id !== prevState.statusId) {
       return {
         showMedia: defaultMediaVisibility(nextProps.status, nextProps.displayMedia),
-        statusId: nextProps.status.get('id'),
+        statusId: nextProps.status.id,
       };
     } else {
       return null;
@@ -136,13 +158,13 @@ class Status extends ImmutablePureComponent {
   }
 
   // Compensate height changes
-  componentDidUpdate(prevProps, prevState, snapshot) {
-    const doShowCard  = !this.props.muted && !this.props.hidden && this.props.status && this.props.status.get('card');
+  componentDidUpdate(_prevProps: IStatus, _prevState: IStatusState, snapshot?: ScrollPosition): void {
+    const doShowCard: boolean  = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
 
     if (doShowCard && !this.didShowCard) {
       this.didShowCard = true;
 
-      if (snapshot !== null && this.props.updateScrollBottom) {
+      if (snapshot && this.props.updateScrollBottom) {
         if (this.node && this.node.offsetTop < snapshot.top) {
           this.props.updateScrollBottom(snapshot.height - snapshot.top);
         }
@@ -150,24 +172,26 @@ class Status extends ImmutablePureComponent {
     }
   }
 
-  componentWillUnmount() {
+  componentWillUnmount(): void {
     // FIXME: Run this code only when a status is being deleted.
     //
-    // if (this.node && this.props.getScrollPosition) {
-    //   const position = this.props.getScrollPosition();
-    //   if (position !== null && this.node.offsetTop < position.top) {
+    // const { getScrollPosition, updateScrollBottom } = this.props;
+    //
+    // if (this.node && getScrollPosition && updateScrollBottom) {
+    //   const position = getScrollPosition();
+    //   if (position && this.node.offsetTop < position.top) {
     //     requestAnimationFrame(() => {
-    //       this.props.updateScrollBottom(position.height - position.top);
+    //       updateScrollBottom(position.height - position.top);
     //     });
     //   }
     // }
   }
 
-  handleToggleMediaVisibility = () => {
+  handleToggleMediaVisibility = (): void => {
     this.setState({ showMedia: !this.state.showMedia });
   }
 
-  handleClick = () => {
+  handleClick = (): void => {
     if (this.props.onClick) {
       this.props.onClick();
       return;
@@ -177,136 +201,139 @@ class Status extends ImmutablePureComponent {
       return;
     }
 
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`);
+    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
   }
 
-  handleExpandClick = (e) => {
+  handleExpandClick: React.EventHandler<React.MouseEvent> = (e) => {
     if (e.button === 0) {
       if (!this.props.history) {
         return;
       }
 
-      this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`);
+      this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
     }
   }
 
-  handleExpandedToggle = () => {
+  handleExpandedToggle = (): void => {
     this.props.onToggleHidden(this._properStatus());
   };
 
-  renderLoadingMediaGallery() {
+  renderLoadingMediaGallery(): JSX.Element {
     return <div className='media_gallery' style={{ height: '285px' }} />;
   }
 
-  renderLoadingVideoPlayer() {
+  renderLoadingVideoPlayer(): JSX.Element {
     return <div className='media-spoiler-video' style={{ height: '285px' }} />;
   }
 
-  renderLoadingAudioPlayer() {
+  renderLoadingAudioPlayer(): JSX.Element {
     return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
   }
 
-  handleOpenVideo = (media, startTime) => {
+  handleOpenVideo = (media: ImmutableMap<string, any>, startTime: number): void => {
     this.props.onOpenVideo(media, startTime);
   }
 
-  handleOpenAudio = (media, startTime) => {
-    this.props.OnOpenAudio(media, startTime);
+  handleOpenAudio = (media: ImmutableMap<string, any>, startTime: number): void => {
+    this.props.onOpenAudio(media, startTime);
   }
 
-  handleHotkeyOpenMedia = e => {
+  handleHotkeyOpenMedia = (e?: KeyboardEvent): void => {
     const { onOpenMedia, onOpenVideo } = this.props;
     const status = this._properStatus();
+    const firstAttachment = status.media_attachments.first();
 
-    e.preventDefault();
+    e?.preventDefault();
 
-    if (status.get('media_attachments').size > 0) {
-      if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        onOpenVideo(status.getIn(['media_attachments', 0]), 0);
+    if (firstAttachment) {
+      if (firstAttachment.type === 'video') {
+        onOpenVideo(firstAttachment, 0);
       } else {
-        onOpenMedia(status.get('media_attachments'), 0);
+        onOpenMedia(status.media_attachments, 0);
       }
     }
   }
 
-  handleHotkeyReply = e => {
-    e.preventDefault();
+  handleHotkeyReply = (e?: KeyboardEvent): void => {
+    e?.preventDefault();
     this.props.onReply(this._properStatus(), this.props.history);
   }
 
-  handleHotkeyFavourite = () => {
+  handleHotkeyFavourite = (): void => {
     this.props.onFavourite(this._properStatus());
   }
 
-  handleHotkeyBoost = e => {
+  handleHotkeyBoost = (e?: KeyboardEvent): void => {
     this.props.onReblog(this._properStatus(), e);
   }
 
-  handleHotkeyMention = e => {
-    e.preventDefault();
-    this.props.onMention(this._properStatus().get('account'), this.props.history);
+  handleHotkeyMention = (e?: KeyboardEvent): void => {
+    e?.preventDefault();
+    this.props.onMention(this._properStatus().account, this.props.history);
   }
 
-  handleHotkeyOpen = () => {
-    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().get('id')}`);
+  handleHotkeyOpen = (): void => {
+    this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}/posts/${this._properStatus().id}`);
   }
 
-  handleHotkeyOpenProfile = () => {
+  handleHotkeyOpenProfile = (): void => {
     this.props.history.push(`/@${this._properStatus().getIn(['account', 'acct'])}`);
   }
 
-  handleHotkeyMoveUp = e => {
-    this.props.onMoveUp(this.props.status.get('id'), e.target.getAttribute('data-featured'));
+  handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
+    // FIXME: what's going on here?
+    // this.props.onMoveUp(this.props.status.id, e?.target?.getAttribute('data-featured'));
   }
 
-  handleHotkeyMoveDown = e => {
-    this.props.onMoveDown(this.props.status.get('id'), e.target.getAttribute('data-featured'));
+  handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
+    // FIXME: what's going on here?
+    // this.props.onMoveDown(this.props.status.id, e?.target?.getAttribute('data-featured'));
   }
 
-  handleHotkeyToggleHidden = () => {
+  handleHotkeyToggleHidden = (): void => {
     this.props.onToggleHidden(this._properStatus());
   }
 
-  handleHotkeyToggleSensitive = () => {
+  handleHotkeyToggleSensitive = (): void => {
     this.handleToggleMediaVisibility();
   }
 
-  handleHotkeyReact = () => {
+  handleHotkeyReact = (): void => {
     this._expandEmojiSelector();
   }
 
-  handleEmojiSelectorExpand = e => {
+  handleEmojiSelectorExpand: React.EventHandler<React.KeyboardEvent> = e => {
     if (e.key === 'Enter') {
       this._expandEmojiSelector();
     }
     e.preventDefault();
   }
 
-  handleEmojiSelectorUnfocus = () => {
+  handleEmojiSelectorUnfocus = (): void => {
     this.setState({ emojiSelectorFocused: false });
   }
 
-  _expandEmojiSelector = () => {
+  _expandEmojiSelector = (): void => {
     this.setState({ emojiSelectorFocused: true });
-    const firstEmoji = this.node.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
-    firstEmoji.focus();
+    const firstEmoji: HTMLDivElement | null | undefined = this.node?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
+    firstEmoji?.focus();
   };
 
-  _properStatus() {
+  _properStatus(): StatusEntity {
     const { status } = this.props;
 
-    if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
-      return status.get('reblog');
+    if (status.reblog && typeof status.reblog === 'object') {
+      return status.reblog;
     } else {
       return status;
     }
   }
 
-  handleRef = c => {
+  handleRef = (c: HTMLDivElement): void => {
     this.node = c;
   }
 
-  setRef = c => {
+  setRef = (c: HTMLDivElement): void => {
     if (c) {
       this.setState({ mediaWrapperWidth: c.offsetWidth });
     }
@@ -322,28 +349,26 @@ class Status extends ImmutablePureComponent {
     // FIXME: why does this need to reassign status and account??
     let { status, account, ...other } = this.props; // eslint-disable-line prefer-const
 
-    if (status === null) {
-      return null;
-    }
+    if (!status) return null;
 
     if (hidden) {
       return (
         <div ref={this.handleRef}>
           {status.getIn(['account', 'display_name']) || status.getIn(['account', 'username'])}
-          {status.get('content')}
+          {status.content}
         </div>
       );
     }
 
-    if (status.get('filtered') || status.getIn(['reblog', 'filtered'])) {
-      const minHandlers = this.props.muted ? {} : {
+    if (status.filtered || status.getIn(['reblog', 'filtered'])) {
+      const minHandlers = this.props.muted ? undefined : {
         moveUp: this.handleHotkeyMoveUp,
         moveDown: this.handleHotkeyMoveDown,
       };
 
       return (
         <HotKeys handlers={minHandlers}>
-          <div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable: this.props.focusable })} tabIndex={this.props.focusable ? 0 : null} ref={this.handleRef}>
+          <div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable: this.props.focusable })} tabIndex={this.props.focusable ? 0 : undefined} ref={this.handleRef}>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
           </div>
         </HotKeys>
@@ -364,8 +389,8 @@ class Status extends ImmutablePureComponent {
       );
     }
 
-    if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
-      const displayNameHtml = { __html: status.getIn(['account', 'display_name_html']) };
+    if (status.reblog && typeof status.reblog === 'object') {
+      const displayNameHtml = { __html: String(status.getIn(['account', 'display_name_html'])) };
 
       reblogElement = (
         <NavLink
@@ -417,55 +442,66 @@ class Status extends ImmutablePureComponent {
         id: 'status.reblogged_by',
         defaultMessage: '{name} reposted',
       }, {
-        name: status.getIn(['account', 'acct']),
+        name: String(status.getIn(['account', 'acct'])),
       });
 
-      account = status.get('account');
-      reblogContent = status.get('contentHtml');
-      status = status.get('reblog');
+      // @ts-ignore what the FUCK
+      account = status.account;
+      reblogContent = status.contentHtml;
+      status = status.reblog;
     }
 
-    const size = status.get('media_attachments').size;
+    const size = status.media_attachments.size;
+    const firstAttachment = status.media_attachments.first();
 
-    if (size > 0) {
+    if (size > 0 && firstAttachment) {
       if (this.props.muted) {
         media = (
           <AttachmentThumbs
-            media={status.get('media_attachments')}
+            media={status.media_attachments}
             onClick={this.handleClick}
-            sensitive={status.get('sensitive')}
+            sensitive={status.sensitive}
           />
         );
-      } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        const video = status.getIn(['media_attachments', 0]);
+      } else if (size === 1 && firstAttachment.type === 'video') {
+        const video = firstAttachment;
+        const html = String(status.getIn(['card', 'html']));
 
-        if (video.external_video_id && status.card?.html) {
+        if (video.external_video_id && html) {
           const { mediaWrapperWidth } = this.state;
-          const height = mediaWrapperWidth / (video.getIn(['meta', 'original', 'width']) / video.getIn(['meta', 'original', 'height']));
+
+          const getHeight = (): number => {
+            const width = Number(video.meta.getIn(['original', 'width']));
+            const height = Number(video.meta.getIn(['original', 'height']));
+            return Number(mediaWrapperWidth) / (width / height);
+          };
+
+          const height = getHeight();
+
           media = (
             <div className='status-card horizontal compact interactive status-card--video'>
               <div
                 ref={this.setRef}
                 className='status-card__image status-card-video'
-                style={height ? { height } : {}}
-                dangerouslySetInnerHTML={{ __html: status.card.html }}
+                style={height ? { height } : undefined}
+                dangerouslySetInnerHTML={{ __html: html }}
               />
             </div>
           );
         } else {
           media = (
             <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
-              {Component => (
+              {(Component: any) => (
                 <Component
-                  preview={video.get('preview_url')}
-                  blurhash={video.get('blurhash')}
-                  src={video.get('url')}
-                  alt={video.get('description')}
-                  aspectRatio={video.getIn(['meta', 'original', 'aspect'])}
+                  preview={video.preview_url}
+                  blurhash={video.blurhash}
+                  src={video.url}
+                  alt={video.description}
+                  aspectRatio={video.meta.getIn(['original', 'aspect'])}
                   width={this.props.cachedMediaWidth}
                   height={285}
                   inline
-                  sensitive={status.get('sensitive')}
+                  sensitive={status.sensitive}
                   onOpenVideo={this.handleOpenVideo}
                   cacheWidth={this.props.cacheMediaWidth}
                   visible={this.state.showMedia}
@@ -475,20 +511,20 @@ class Status extends ImmutablePureComponent {
             </Bundle>
           );
         }
-      } else if (size === 1 && status.getIn(['media_attachments', 0, 'type']) === 'audio' && status.get('media_attachments').size === 1) {
-        const attachment = status.getIn(['media_attachments', 0]);
+      } else if (size === 1 && firstAttachment.type === 'audio') {
+        const attachment = firstAttachment;
 
         media = (
           <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
-            {Component => (
+            {(Component: any) => (
               <Component
-                src={attachment.get('url')}
-                alt={attachment.get('description')}
-                poster={attachment.get('preview_url') !== attachment.get('url') ? attachment.get('preview_url') : status.getIn(['account', 'avatar_static'])}
-                backgroundColor={attachment.getIn(['meta', 'colors', 'background'])}
-                foregroundColor={attachment.getIn(['meta', 'colors', 'foreground'])}
-                accentColor={attachment.getIn(['meta', 'colors', 'accent'])}
-                duration={attachment.getIn(['meta', 'original', 'duration'], 0)}
+                src={attachment.url}
+                alt={attachment.description}
+                poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static'])}
+                backgroundColor={attachment.meta.getIn(['colors', 'background'])}
+                foregroundColor={attachment.meta.getIn(['colors', 'foreground'])}
+                accentColor={attachment.meta.getIn(['colors', 'accent'])}
+                duration={attachment.meta.getIn(['original', 'duration'], 0)}
                 width={this.props.cachedMediaWidth}
                 height={263}
                 cacheWidth={this.props.cacheMediaWidth}
@@ -499,10 +535,10 @@ class Status extends ImmutablePureComponent {
       } else {
         media = (
           <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
-            {Component => (
+            {(Component: any) => (
               <Component
-                media={status.get('media_attachments')}
-                sensitive={status.get('sensitive')}
+                media={status.media_attachments}
+                sensitive={status.sensitive}
                 height={285}
                 onOpenMedia={this.props.onOpenMedia}
                 cacheWidth={this.props.cacheMediaWidth}
@@ -514,17 +550,17 @@ class Status extends ImmutablePureComponent {
           </Bundle>
         );
       }
-    } else if (status.get('spoiler_text').length === 0 && !status.get('quote') && status.get('card')) {
+    } else if (status.spoiler_text.length === 0 && !status.quote && status.card) {
       media = (
         <Card
           onOpenMedia={this.props.onOpenMedia}
-          card={status.get('card')}
+          card={status.card}
           compact
           cacheWidth={this.props.cacheMediaWidth}
           defaultWidth={this.props.cachedMediaWidth}
         />
       );
-    } else if (status.get('expectsCard', false)) {
+    } else if (status.expectsCard) {
       media = (
         <PlaceholderCard />
       );
@@ -532,19 +568,19 @@ class Status extends ImmutablePureComponent {
 
     let quote;
 
-    if (status.get('quote')) {
-      if (status.getIn(['pleroma', 'quote_visible'], true) === false) {
+    if (status.quote) {
+      if (status.pleroma.get('quote_visible', true) === false) {
         quote = (
           <div className='quoted-status-tombstone'>
             <p><FormattedMessage id='statuses.quote_tombstone' defaultMessage='Post is unavailable.' /></p>
           </div>
         );
       } else {
-        quote = <QuotedStatus statusId={status.get('quote')} />;
+        quote = <QuotedStatus statusId={status.quote} />;
       }
     }
 
-    const handlers = this.props.muted ? {} : {
+    const handlers = this.props.muted ? undefined : {
       reply: this.handleHotkeyReply,
       favourite: this.handleHotkeyFavourite,
       boost: this.handleHotkeyBoost,
@@ -559,15 +595,15 @@ class Status extends ImmutablePureComponent {
       react: this.handleHotkeyReact,
     };
 
-    const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
+    const statusUrl = `/@${status.getIn(['account', 'acct'])}/posts/${status.id}`;
     // const favicon = status.getIn(['account', 'pleroma', 'favicon']);
-    // const domain = getDomain(status.get('account'));
+    // const domain = getDomain(status.account);
 
     return (
       <HotKeys handlers={handlers}>
         <div
           className='status cursor-pointer'
-          tabIndex={this.props.focusable && !this.props.muted ? 0 : null}
+          tabIndex={this.props.focusable && !this.props.muted ? 0 : undefined}
           data-featured={featured ? 'true' : null}
           aria-label={textForScreenReader(intl, status, rebloggedByText)}
           ref={this.handleRef}
@@ -580,19 +616,19 @@ class Status extends ImmutablePureComponent {
           <div
             className={classNames({
               'status__wrapper': true,
-              [`status-${status.get('visibility')}`]: true,
-              'status-reply': !!status.get('in_reply_to_id'),
+              [`status-${status.visibility}`]: true,
+              'status-reply': !!status.in_reply_to_id,
               muted: this.props.muted,
               read: unread === false,
             })}
-            data-id={status.get('id')}
+            data-id={status.id}
           >
             <div className='mb-4'>
               <HStack justifyContent='between' alignItems='start'>
                 <AccountContainer
-                  key={status.getIn(['account', 'id'])}
-                  id={status.getIn(['account', 'id'])}
-                  timestamp={status.get('created_at')}
+                  key={String(status.getIn(['account', 'id']))}
+                  id={String(status.getIn(['account', 'id']))}
+                  timestamp={status.created_at}
                   timestampUrl={statusUrl}
                   action={reblogElement}
                   hideActions={!reblogElement}
@@ -601,9 +637,9 @@ class Status extends ImmutablePureComponent {
             </div>
 
             <div className='status__content-wrapper'>
-              {!group && status.get('group') && (
+              {!group && status.group && (
                 <div className='status__meta'>
-                  Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{status.getIn(['group', 'title'])}</NavLink>
+                  Posted in <NavLink to={`/groups/${status.getIn(['group', 'id'])}`}>{String(status.getIn(['group', 'title']))}</NavLink>
                 </div>
               )}
 
@@ -613,7 +649,7 @@ class Status extends ImmutablePureComponent {
                 status={status}
                 reblogContent={reblogContent}
                 onClick={this.handleClick}
-                expanded={!status.get('hidden')}
+                expanded={!status.hidden}
                 onExpandedToggle={this.handleExpandedToggle}
                 collapsable
               />
@@ -623,6 +659,7 @@ class Status extends ImmutablePureComponent {
               {quote}
 
               <StatusActionBar
+                // @ts-ignore what?
                 status={status}
                 account={account}
                 emojiSelectorFocused={this.state.emojiSelectorFocused}
@@ -637,3 +674,6 @@ class Status extends ImmutablePureComponent {
   }
 
 }
+
+// @ts-ignore WHY
+export default withRouter(injectIntl(Status));
diff --git a/app/soapbox/normalizers/account.ts b/app/soapbox/normalizers/account.ts
index 333e151a8..e6b6608a1 100644
--- a/app/soapbox/normalizers/account.ts
+++ b/app/soapbox/normalizers/account.ts
@@ -39,7 +39,7 @@ export const AccountRecord = ImmutableRecord({
   last_status_at: new Date(),
   location: '',
   locked: false,
-  moved: null as EmbeddedEntity<any> | null,
+  moved: null as EmbeddedEntity<any>,
   note: '',
   pleroma: ImmutableMap<string, any>(),
   source: ImmutableMap<string, any>(),
diff --git a/app/soapbox/normalizers/status.ts b/app/soapbox/normalizers/status.ts
index c69354c79..4d1260ffe 100644
--- a/app/soapbox/normalizers/status.ts
+++ b/app/soapbox/normalizers/status.ts
@@ -31,6 +31,7 @@ export const StatusRecord = ImmutableRecord({
   emojis: ImmutableList<Emoji>(),
   favourited: false,
   favourites_count: 0,
+  group: null as EmbeddedEntity<any>,
   in_reply_to_account_id: null as string | null,
   in_reply_to_id: null as string | null,
   id: '',
@@ -55,6 +56,7 @@ export const StatusRecord = ImmutableRecord({
 
   // Internal fields
   contentHtml: '',
+  expectsCard: false,
   filtered: false,
   hidden: false,
   search_index: '',
diff --git a/app/soapbox/types/entities.ts b/app/soapbox/types/entities.ts
index cecdf235d..942e5f4f8 100644
--- a/app/soapbox/types/entities.ts
+++ b/app/soapbox/types/entities.ts
@@ -14,7 +14,6 @@ import {
 
 import type { Record as ImmutableRecord } from 'immutable';
 
-type Account = ReturnType<typeof AccountRecord>;
 type Attachment = ReturnType<typeof AttachmentRecord>;
 type Card = ReturnType<typeof CardRecord>;
 type Emoji = ReturnType<typeof EmojiRecord>;
@@ -24,7 +23,18 @@ type Mention = ReturnType<typeof MentionRecord>;
 type Notification = ReturnType<typeof NotificationRecord>;
 type Poll = ReturnType<typeof PollRecord>;
 type PollOption = ReturnType<typeof PollOptionRecord>;
-type Status = ReturnType<typeof StatusRecord>;
+
+interface Account extends ReturnType<typeof AccountRecord> {
+  // HACK: we can't do a circular reference in the Record definition itself,
+  // so do it here.
+  moved: EmbeddedEntity<Account>;
+}
+
+interface Status extends ReturnType<typeof StatusRecord> {
+  // HACK: same as above
+  quote: EmbeddedEntity<Status>;
+  reblog: EmbeddedEntity<Status>;
+}
 
 // Utility types
 type APIEntity = Record<string, any>;

From c077a4ea5881caab40baa6047a3ab077402b904e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 14:27:44 -0500
Subject: [PATCH 03/29] Improve status.card normalization (it will never be a
 string)

---
 app/soapbox/components/status.tsx | 5 ++---
 app/soapbox/normalizers/status.ts | 2 +-
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 2c5a2097d..473d12eb3 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -465,9 +465,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         );
       } else if (size === 1 && firstAttachment.type === 'video') {
         const video = firstAttachment;
-        const html = String(status.getIn(['card', 'html']));
 
-        if (video.external_video_id && html) {
+        if (video.external_video_id && status.card) {
           const { mediaWrapperWidth } = this.state;
 
           const getHeight = (): number => {
@@ -484,7 +483,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                 ref={this.setRef}
                 className='status-card__image status-card-video'
                 style={height ? { height } : undefined}
-                dangerouslySetInnerHTML={{ __html: html }}
+                dangerouslySetInnerHTML={{ __html: status.card.html }}
               />
             </div>
           );
diff --git a/app/soapbox/normalizers/status.ts b/app/soapbox/normalizers/status.ts
index 4d1260ffe..6496111fd 100644
--- a/app/soapbox/normalizers/status.ts
+++ b/app/soapbox/normalizers/status.ts
@@ -25,7 +25,7 @@ export const StatusRecord = ImmutableRecord({
   account: null as EmbeddedEntity<Account>,
   application: null as ImmutableMap<string, any> | null,
   bookmarked: false,
-  card: null as EmbeddedEntity<Card>,
+  card: null as Card | null,
   content: '',
   created_at: new Date(),
   emojis: ImmutableList<Emoji>(),

From 830fb67215c7a4a7c4ded6452d9a370f2678e6a7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 14:29:04 -0500
Subject: [PATCH 04/29] Fix Jest snapshot

---
 .../__tests__/__snapshots__/emoji_selector-test.js.snap         | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
index 0ff8f9961..154cc5603 100644
--- a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
+++ b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
@@ -8,7 +8,7 @@ exports[`<EmojiSelector /> renders correctly 1`] = `
   tabIndex="-1"
 >
   <div
-    className="emoji-react-selector"
+    className="emoji-react-selector w-max"
     onBlur={[Function]}
   >
     <button

From dddba516fb921d479f780e2a1831666ae02c7820 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 17:00:31 -0500
Subject: [PATCH 05/29] Convert selectors/index to Typescript

---
 app/soapbox/normalizers/account.ts           |  24 +-
 app/soapbox/normalizers/attachment.ts        |   4 +-
 app/soapbox/normalizers/notification.ts      |  26 +-
 app/soapbox/normalizers/status.ts            |   3 +-
 app/soapbox/reducers/accounts.ts             |  16 +-
 app/soapbox/reducers/filters.js              |  12 -
 app/soapbox/reducers/filters.tsx             |  25 ++
 app/soapbox/reducers/statuses.ts             |  17 +-
 app/soapbox/selectors/index.js               | 332 -----------------
 app/soapbox/selectors/index.ts               | 359 +++++++++++++++++++
 app/soapbox/utils/__tests__/accounts-test.js |  23 --
 app/soapbox/utils/accounts.ts                |  19 +-
 12 files changed, 456 insertions(+), 404 deletions(-)
 delete mode 100644 app/soapbox/reducers/filters.js
 create mode 100644 app/soapbox/reducers/filters.tsx
 delete mode 100644 app/soapbox/selectors/index.js
 create mode 100644 app/soapbox/selectors/index.ts

diff --git a/app/soapbox/normalizers/account.ts b/app/soapbox/normalizers/account.ts
index e6b6608a1..8bdc11681 100644
--- a/app/soapbox/normalizers/account.ts
+++ b/app/soapbox/normalizers/account.ts
@@ -13,7 +13,6 @@ import {
 
 import emojify from 'soapbox/features/emoji/emoji';
 import { normalizeEmoji } from 'soapbox/normalizers/emoji';
-import { acctFull } from 'soapbox/utils/accounts';
 import { unescapeHTML } from 'soapbox/utils/html';
 import { mergeDefined, makeEmojiMap } from 'soapbox/utils/normalizers';
 
@@ -197,8 +196,29 @@ const addInternalFields = (account: ImmutableMap<string, any>) => {
   });
 };
 
+const getDomainFromURL = (account: ImmutableMap<string, any>): string => {
+  try {
+    const url = account.get('url');
+    return new URL(url).host;
+  } catch {
+    return '';
+  }
+};
+
+export const guessFqn = (account: ImmutableMap<string, any>): string => {
+  const acct = account.get('acct', '');
+  const [user, domain] = acct.split('@');
+
+  if (domain) {
+    return acct;
+  } else {
+    return [user, getDomainFromURL(account)].join('@');
+  }
+};
+
 const normalizeFqn = (account: ImmutableMap<string, any>) => {
-  return account.set('fqn', acctFull(account));
+  const fqn = account.get('fqn') || guessFqn(account);
+  return account.set('fqn', fqn);
 };
 
 export const normalizeAccount = (account: Record<string, any>) => {
diff --git a/app/soapbox/normalizers/attachment.ts b/app/soapbox/normalizers/attachment.ts
index de960d258..06fba73ad 100644
--- a/app/soapbox/normalizers/attachment.ts
+++ b/app/soapbox/normalizers/attachment.ts
@@ -26,8 +26,8 @@ export const AttachmentRecord = ImmutableRecord({
 
   // Internal fields
   // TODO: Remove these? They're set in selectors/index.js
-  account: null,
-  status: null,
+  account: null as any,
+  status: null as any,
 });
 
 // Ensure attachments have required fields
diff --git a/app/soapbox/normalizers/notification.ts b/app/soapbox/normalizers/notification.ts
index defd51215..ea2f922e9 100644
--- a/app/soapbox/normalizers/notification.ts
+++ b/app/soapbox/normalizers/notification.ts
@@ -9,16 +9,30 @@ import {
   fromJS,
 } from 'immutable';
 
+import type { Account, Status, EmbeddedEntity } from 'soapbox/types/entities';
+
+type NotificationType = ''
+  | 'follow'
+  | 'follow_request'
+  | 'mention'
+  | 'reblog'
+  | 'favourite'
+  | 'poll'
+  | 'status'
+  | 'move'
+  | 'pleroma:chat_mention'
+  | 'pleroma:emoji_reaction';
+
 // https://docs.joinmastodon.org/entities/notification/
 export const NotificationRecord = ImmutableRecord({
-  account: null,
-  chat_message: null, // pleroma:chat_mention
+  account: null as EmbeddedEntity<Account>,
+  chat_message: null as ImmutableMap<string, any> | string | null, // pleroma:chat_mention
   created_at: new Date(),
-  emoji: null, // pleroma:emoji_reaction
+  emoji: null as string | null, // pleroma:emoji_reaction
   id: '',
-  status: null,
-  target: null, // move
-  type: '',
+  status: null as EmbeddedEntity<Status>,
+  target: null as EmbeddedEntity<Account>, // move
+  type: '' as NotificationType,
 });
 
 export const normalizeNotification = (notification: Record<string, any>) => {
diff --git a/app/soapbox/normalizers/status.ts b/app/soapbox/normalizers/status.ts
index 6496111fd..8f1c27c1e 100644
--- a/app/soapbox/normalizers/status.ts
+++ b/app/soapbox/normalizers/status.ts
@@ -16,13 +16,14 @@ import { normalizeEmoji } from 'soapbox/normalizers/emoji';
 import { normalizeMention } from 'soapbox/normalizers/mention';
 import { normalizePoll } from 'soapbox/normalizers/poll';
 
+import type { ReducerAccount } from 'soapbox/reducers/accounts';
 import type { Account, Attachment, Card, Emoji, Mention, Poll, EmbeddedEntity } from 'soapbox/types/entities';
 
 type StatusVisibility = 'public' | 'unlisted' | 'private' | 'direct';
 
 // https://docs.joinmastodon.org/entities/status/
 export const StatusRecord = ImmutableRecord({
-  account: null as EmbeddedEntity<Account>,
+  account: null as EmbeddedEntity<Account | ReducerAccount>,
   application: null as ImmutableMap<string, any> | null,
   bookmarked: false,
   card: null as Card | null,
diff --git a/app/soapbox/reducers/accounts.ts b/app/soapbox/reducers/accounts.ts
index 444d7ac97..781385858 100644
--- a/app/soapbox/reducers/accounts.ts
+++ b/app/soapbox/reducers/accounts.ts
@@ -45,14 +45,18 @@ type AccountMap = ImmutableMap<string, any>;
 type APIEntity = Record<string, any>;
 type APIEntities = Array<APIEntity>;
 
-type State = ImmutableMap<string | number, AccountRecord>;
+export interface ReducerAccount extends AccountRecord {
+  moved: string | null,
+}
+
+type State = ImmutableMap<string | number, ReducerAccount>;
 
 const initialState: State = ImmutableMap();
 
-const minifyAccount = (account: AccountRecord): AccountRecord => {
+const minifyAccount = (account: AccountRecord): ReducerAccount => {
   return account.mergeWith((o, n) => n || o, {
     moved: normalizeId(account.getIn(['moved', 'id'])),
-  });
+  }) as ReducerAccount;
 };
 
 const fixAccount = (state: State, account: APIEntity) => {
@@ -194,9 +198,9 @@ const importAdminUser = (state: State, adminUser: ImmutableMap<string, any>): St
   const account = state.get(id);
 
   if (!account) {
-    return state.set(id, buildAccount(adminUser));
+    return state.set(id, minifyAccount(buildAccount(adminUser)));
   } else {
-    return state.set(id, mergeAdminUser(account, adminUser));
+    return state.set(id, minifyAccount(mergeAdminUser(account, adminUser)));
   }
 };
 
@@ -223,7 +227,7 @@ export default function accounts(state: State = initialState, action: AnyAction)
   case ACCOUNTS_IMPORT:
     return normalizeAccounts(state, action.accounts);
   case ACCOUNT_FETCH_FAIL_FOR_USERNAME_LOOKUP:
-    return state.set(-1, normalizeAccount({ username: action.username }));
+    return fixAccount(state, { id: -1, username: action.username });
   case CHATS_FETCH_SUCCESS:
   case CHATS_EXPAND_SUCCESS:
     return importAccountsFromChats(state, action.chats);
diff --git a/app/soapbox/reducers/filters.js b/app/soapbox/reducers/filters.js
deleted file mode 100644
index 488706573..000000000
--- a/app/soapbox/reducers/filters.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import { List as ImmutableList, fromJS } from 'immutable';
-
-import { FILTERS_FETCH_SUCCESS } from '../actions/filters';
-
-export default function filters(state = ImmutableList(), action) {
-  switch(action.type) {
-  case FILTERS_FETCH_SUCCESS:
-    return fromJS(action.filters);
-  default:
-    return state;
-  }
-}
diff --git a/app/soapbox/reducers/filters.tsx b/app/soapbox/reducers/filters.tsx
new file mode 100644
index 000000000..484b2b80a
--- /dev/null
+++ b/app/soapbox/reducers/filters.tsx
@@ -0,0 +1,25 @@
+import {
+  Map as ImmutableMap,
+  List as ImmutableList,
+  fromJS,
+} from 'immutable';
+
+import { FILTERS_FETCH_SUCCESS } from '../actions/filters';
+
+import type { AnyAction } from 'redux';
+
+type Filter = ImmutableMap<string, any>;
+type State = ImmutableList<Filter>;
+
+const importFilters = (_state: State, filters: unknown): State => {
+  return ImmutableList(fromJS(filters)).map(filter => ImmutableMap(fromJS(filter)));
+};
+
+export default function filters(state: State = ImmutableList<Filter>(), action: AnyAction): State {
+  switch(action.type) {
+  case FILTERS_FETCH_SUCCESS:
+    return importFilters(state, action.filters);
+  default:
+    return state;
+  }
+}
diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index 37d78e2c7..869b9de61 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -39,15 +39,22 @@ type StatusRecord = ReturnType<typeof normalizeStatus>;
 type APIEntity = Record<string, any>;
 type APIEntities = Array<APIEntity>;
 
-type State = ImmutableMap<string, StatusRecord>;
+type State = ImmutableMap<string, ReducerStatus>;
 
-const minifyStatus = (status: StatusRecord): StatusRecord => {
+export interface ReducerStatus extends StatusRecord {
+  account: string | null,
+  reblog: string | null,
+  poll: string | null,
+  quote: string | null,
+}
+
+const minifyStatus = (status: StatusRecord): ReducerStatus => {
   return status.mergeWith((o, n) => n || o, {
     account: normalizeId(status.getIn(['account', 'id'])),
     reblog: normalizeId(status.getIn(['reblog', 'id'])),
     poll: normalizeId(status.getIn(['poll', 'id'])),
     quote: normalizeId(status.getIn(['quote', 'id'])),
-  });
+  }) as ReducerStatus;
 };
 
 // Gets titles of poll options from status
@@ -121,14 +128,14 @@ const fixQuote = (status: StatusRecord, oldStatus?: StatusRecord): StatusRecord
   }
 };
 
-const fixStatus = (state: State, status: APIEntity, expandSpoilers: boolean): StatusRecord => {
+const fixStatus = (state: State, status: APIEntity, expandSpoilers: boolean): ReducerStatus => {
   const oldStatus = state.get(status.id);
 
   return normalizeStatus(status).withMutations(status => {
     fixQuote(status, oldStatus);
     calculateStatus(status, oldStatus, expandSpoilers);
     minifyStatus(status);
-  });
+  }) as ReducerStatus;
 };
 
 const importStatus = (state: State, status: APIEntity, expandSpoilers: boolean): State =>
diff --git a/app/soapbox/selectors/index.js b/app/soapbox/selectors/index.js
deleted file mode 100644
index 2db849b3e..000000000
--- a/app/soapbox/selectors/index.js
+++ /dev/null
@@ -1,332 +0,0 @@
-import {
-  Map as ImmutableMap,
-  List as ImmutableList,
-  OrderedSet as ImmutableOrderedSet,
-} from 'immutable';
-import { createSelector } from 'reselect';
-
-import { getSettings } from 'soapbox/actions/settings';
-import { getDomain } from 'soapbox/utils/accounts';
-import { validId } from 'soapbox/utils/auth';
-import ConfigDB from 'soapbox/utils/config_db';
-import { shouldFilter } from 'soapbox/utils/timelines';
-
-const getAccountBase         = (state, id) => state.getIn(['accounts', id], null);
-const getAccountCounters     = (state, id) => state.getIn(['accounts_counters', id], null);
-const getAccountRelationship = (state, id) => state.getIn(['relationships', id], null);
-const getAccountMoved        = (state, id) => state.getIn(['accounts', state.getIn(['accounts', id, 'moved'])]);
-const getAccountMeta         = (state, id) => state.getIn(['accounts_meta', id], ImmutableMap());
-const getAccountAdminData    = (state, id) => state.getIn(['admin', 'users', id]);
-const getAccountPatron       = (state, id) => {
-  const url = state.getIn(['accounts', id, 'url']);
-  return state.getIn(['patron', 'accounts', url]);
-};
-
-export const makeGetAccount = () => {
-  return createSelector([
-    getAccountBase,
-    getAccountCounters,
-    getAccountRelationship,
-    getAccountMoved,
-    getAccountMeta,
-    getAccountAdminData,
-    getAccountPatron,
-  ], (base, counters, relationship, moved, meta, admin, patron) => {
-    if (base === null) {
-      return null;
-    }
-
-    return base.withMutations(map => {
-      map.merge(counters);
-      map.merge(meta);
-      map.set('pleroma', meta.get('pleroma', ImmutableMap()).merge(base.get('pleroma', ImmutableMap()))); // Lol, thanks Pleroma
-      map.set('relationship', relationship);
-      map.set('moved', moved);
-      map.set('patron', patron);
-      map.setIn(['pleroma', 'admin'], admin);
-    });
-  });
-};
-
-const findAccountsByUsername = (state, username) => {
-  const accounts = state.get('accounts');
-
-  return accounts.filter(account => {
-    return username.toLowerCase() === account.getIn(['acct'], '').toLowerCase();
-  });
-};
-
-export const findAccountByUsername = (state, username) => {
-  const accounts = findAccountsByUsername(state, username);
-
-  if (accounts.size > 1) {
-    const me = state.get('me');
-    const meURL = state.getIn(['accounts', me, 'url']);
-
-    return accounts.find(account => {
-      try {
-        // If more than one account has the same username, try matching its host
-        const { host } = new URL(account.get('url'));
-        const { host: meHost } = new URL(meURL);
-        return host === meHost;
-      } catch {
-        return false;
-      }
-    });
-  } else {
-    return accounts.first();
-  }
-};
-
-const toServerSideType = columnType => {
-  switch (columnType) {
-  case 'home':
-  case 'notifications':
-  case 'public':
-  case 'thread':
-    return columnType;
-  default:
-    if (columnType.indexOf('list:') > -1) {
-      return 'home';
-    } else {
-      return 'public'; // community, account, hashtag
-    }
-  }
-};
-
-export const getFilters = (state, { contextType }) => state.get('filters', ImmutableList()).filter(filter => contextType && filter.get('context').includes(toServerSideType(contextType)) && (filter.get('expires_at') === null || Date.parse(filter.get('expires_at')) > (new Date())));
-
-const escapeRegExp = string =>
-  string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
-
-export const regexFromFilters = filters => {
-  if (filters.size === 0) {
-    return null;
-  }
-
-  return new RegExp(filters.map(filter => {
-    let expr = escapeRegExp(filter.get('phrase'));
-
-    if (filter.get('whole_word')) {
-      if (/^[\w]/.test(expr)) {
-        expr = `\\b${expr}`;
-      }
-
-      if (/[\w]$/.test(expr)) {
-        expr = `${expr}\\b`;
-      }
-    }
-
-    return expr;
-  }).join('|'), 'i');
-};
-
-export const makeGetStatus = () => {
-  return createSelector(
-    [
-      (state, { id }) => state.getIn(['statuses', id]),
-      (state, { id }) => state.getIn(['statuses', state.getIn(['statuses', id, 'reblog'])]),
-      (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', id, 'account'])]),
-      (state, { id }) => state.getIn(['accounts', state.getIn(['statuses', state.getIn(['statuses', id, 'reblog']), 'account'])]),
-      (state, { username }) => username,
-      getFilters,
-      (state)         => state.get('me'),
-    ],
-
-    (statusBase, statusReblog, accountBase, accountReblog, username, filters, me) => {
-      if (!statusBase) {
-        return null;
-      }
-
-      const accountUsername = accountBase.get('acct');
-      //Must be owner of status if username exists
-      if (accountUsername !== username && username !== undefined) {
-        return null;
-      }
-
-      if (statusReblog) {
-        statusReblog = statusReblog.set('account', accountReblog);
-      } else {
-        statusReblog = null;
-      }
-
-      const regex    = (accountReblog || accountBase).get('id') !== me && regexFromFilters(filters);
-      const filtered = regex && regex.test(statusBase.get('reblog') ? statusReblog.get('search_index') : statusBase.get('search_index'));
-
-      return statusBase.withMutations(map => {
-        map.set('reblog', statusReblog);
-        map.set('account', accountBase);
-        map.set('filtered', filtered);
-      });
-    },
-  );
-};
-
-const getAlertsBase = state => state.get('alerts');
-
-export const getAlerts = createSelector([getAlertsBase], (base) => {
-  const arr = [];
-
-  base.forEach(item => {
-    arr.push({
-      message: item.get('message'),
-      title: item.get('title'),
-      actionLabel: item.get('actionLabel'),
-      actionLink: item.get('actionLink'),
-      key: item.get('key'),
-      className: `notification-bar-${item.get('severity', 'info')}`,
-      activeClassName: 'snackbar--active',
-      dismissAfter: 6000,
-      style: false,
-    });
-  });
-
-  return arr;
-});
-
-export const makeGetNotification = () => {
-  return createSelector([
-    (state, notification) => notification,
-    (state, notification) => state.getIn(['accounts', notification.get('account')]),
-    (state, notification) => state.getIn(['accounts', notification.get('target')]),
-    (state, notification) => state.getIn(['statuses', notification.get('status')]),
-  ], (notification, account, target, status) => {
-    return notification.merge({ account, target, status });
-  });
-};
-
-export const getAccountGallery = createSelector([
-  (state, id) => state.getIn(['timelines', `account:${id}:media`, 'items'], ImmutableList()),
-  state       => state.get('statuses'),
-  state       => state.get('accounts'),
-], (statusIds, statuses, accounts) => {
-
-  return statusIds.reduce((medias, statusId) => {
-    const status = statuses.get(statusId);
-    const account = accounts.get(status.get('account'));
-    if (status.get('reblog')) return medias;
-    return medias.concat(status.get('media_attachments')
-      .map(media => media.merge({ status, account })));
-  }, ImmutableList());
-});
-
-export const makeGetChat = () => {
-  return createSelector(
-    [
-      (state, { id }) => state.getIn(['chats', 'items', id]),
-      (state, { id }) => state.getIn(['accounts', state.getIn(['chats', 'items', id, 'account'])]),
-      (state, { last_message }) => state.getIn(['chat_messages', last_message]),
-    ],
-
-    (chat, account, lastMessage) => {
-      if (!chat) return null;
-
-      return chat.withMutations(map => {
-        map.set('account', account);
-        map.set('last_message', lastMessage);
-      });
-    },
-  );
-};
-
-export const makeGetReport = () => {
-  const getStatus = makeGetStatus();
-
-  return createSelector(
-    [
-      (state, id) => state.getIn(['admin', 'reports', id]),
-      (state, id) => state.getIn(['admin', 'reports', id, 'statuses']).map(
-        statusId => state.getIn(['statuses', statusId]))
-        .filter(s => s)
-        .map(s => getStatus(state, s.toJS())),
-    ],
-
-    (report, statuses) => {
-      if (!report) return null;
-      return report.set('statuses', statuses);
-    },
-  );
-};
-
-const getAuthUserIds = createSelector([
-  state => state.getIn(['auth', 'users'], ImmutableMap()),
-], authUsers => {
-  return authUsers.reduce((ids, authUser) => {
-    try {
-      const id = authUser.get('id');
-      return validId(id) ? ids.add(id) : ids;
-    } catch {
-      return ids;
-    }
-  }, ImmutableOrderedSet());
-});
-
-export const makeGetOtherAccounts = () => {
-  return createSelector([
-    state => state.get('accounts'),
-    getAuthUserIds,
-    state => state.get('me'),
-  ],
-  (accounts, authUserIds, me) => {
-    return authUserIds
-      .reduce((list, id) => {
-        if (id === me) return list;
-        const account = accounts.get(id);
-        return account ? list.push(account) : list;
-      }, ImmutableList());
-  });
-};
-
-const getSimplePolicy = createSelector([
-  state => state.getIn(['admin', 'configs'], ImmutableMap()),
-  state => state.getIn(['instance', 'pleroma', 'metadata', 'federation', 'mrf_simple'], ImmutableMap()),
-], (configs, instancePolicy) => {
-  return instancePolicy.merge(ConfigDB.toSimplePolicy(configs));
-});
-
-const getRemoteInstanceFavicon = (state, host) => (
-  state.get('accounts')
-    .find(account => getDomain(account) === host, null, ImmutableMap())
-    .getIn(['pleroma', 'favicon'])
-);
-
-const getRemoteInstanceFederation = (state, host) => (
-  getSimplePolicy(state)
-    .map(hosts => hosts.includes(host))
-);
-
-export const makeGetHosts = () => {
-  return createSelector([getSimplePolicy], (simplePolicy) => {
-    return simplePolicy
-      .deleteAll(['accept', 'reject_deletes', 'report_removal'])
-      .reduce((acc, hosts) => acc.union(hosts), ImmutableOrderedSet())
-      .sort();
-  });
-};
-
-export const makeGetRemoteInstance = () => {
-  return createSelector([
-    (state, host) => host,
-    getRemoteInstanceFavicon,
-    getRemoteInstanceFederation,
-  ], (host, favicon, federation) => {
-    return ImmutableMap({
-      host,
-      favicon,
-      federation,
-    });
-  });
-};
-
-export const makeGetStatusIds = () => createSelector([
-  (state, { type, prefix }) => getSettings(state).get(prefix || type, ImmutableMap()),
-  (state, { type }) => state.getIn(['timelines', type, 'items'], ImmutableOrderedSet()),
-  (state)           => state.get('statuses'),
-  (state)           => state.get('me'),
-], (columnSettings, statusIds, statuses, me) => {
-  return statusIds.filter(id => {
-    const status = statuses.get(id);
-    if (!status) return true;
-    return !shouldFilter(status, columnSettings);
-  });
-});
diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts
new file mode 100644
index 000000000..2eb21744e
--- /dev/null
+++ b/app/soapbox/selectors/index.ts
@@ -0,0 +1,359 @@
+import {
+  Map as ImmutableMap,
+  List as ImmutableList,
+  OrderedSet as ImmutableOrderedSet,
+} from 'immutable';
+import { createSelector } from 'reselect';
+
+import { getSettings } from 'soapbox/actions/settings';
+import { getDomain } from 'soapbox/utils/accounts';
+import { validId } from 'soapbox/utils/auth';
+import ConfigDB from 'soapbox/utils/config_db';
+import { shouldFilter } from 'soapbox/utils/timelines';
+
+import type { RootState } from 'soapbox/store';
+import type { Notification } from 'soapbox/types/entities';
+
+const normalizeId = (id: any): string => typeof id === 'string' ? id : '';
+
+const getAccountBase         = (state: RootState, id: string) => state.accounts.get(id);
+const getAccountCounters     = (state: RootState, id: string) => state.accounts_counters.get(id);
+const getAccountRelationship = (state: RootState, id: string) => state.relationships.get(id);
+const getAccountMoved        = (state: RootState, id: string) => state.accounts.get(state.accounts.get(id)?.moved || '');
+const getAccountMeta         = (state: RootState, id: string) => state.accounts_meta.get(id, ImmutableMap());
+const getAccountAdminData    = (state: RootState, id: string) => state.admin.users.get(id);
+const getAccountPatron       = (state: RootState, id: string) => {
+  const url = state.accounts.get(id)?.url;
+  return state.patron.getIn(['accounts', url]);
+};
+
+export const makeGetAccount = () => {
+  return createSelector([
+    getAccountBase,
+    getAccountCounters,
+    getAccountRelationship,
+    getAccountMoved,
+    getAccountMeta,
+    getAccountAdminData,
+    getAccountPatron,
+  ], (base, counters, relationship, moved, meta, admin, patron) => {
+    if (!base) return null;
+
+    return base.withMutations(map => {
+      map.merge(counters);
+      map.merge(meta);
+      map.set('pleroma', meta.get('pleroma', ImmutableMap()).merge(base.get('pleroma', ImmutableMap()))); // Lol, thanks Pleroma
+      map.set('relationship', relationship);
+      map.set('moved', moved || null);
+      map.set('patron', patron);
+      map.setIn(['pleroma', 'admin'], admin);
+    });
+  });
+};
+
+const findAccountsByUsername = (state: RootState, username: string) => {
+  const accounts = state.accounts;
+
+  return accounts.filter(account => {
+    return username.toLowerCase() === account.acct.toLowerCase();
+  });
+};
+
+export const findAccountByUsername = (state: RootState, username: string) => {
+  const accounts = findAccountsByUsername(state, username);
+
+  if (accounts.size > 1) {
+    const me = state.me;
+    const meURL = state.accounts.get(me)?.url || '';
+
+    return accounts.find(account => {
+      try {
+        // If more than one account has the same username, try matching its host
+        const { host } = new URL(account.url);
+        const { host: meHost } = new URL(meURL);
+        return host === meHost;
+      } catch {
+        return false;
+      }
+    });
+  } else {
+    return accounts.first();
+  }
+};
+
+const toServerSideType = (columnType: string): string => {
+  switch (columnType) {
+  case 'home':
+  case 'notifications':
+  case 'public':
+  case 'thread':
+    return columnType;
+  default:
+    if (columnType.indexOf('list:') > -1) {
+      return 'home';
+    } else {
+      return 'public'; // community, account, hashtag
+    }
+  }
+};
+
+type FilterContext = { contextType: string };
+
+export const getFilters = (state: RootState, { contextType }: FilterContext) => {
+  return state.filters.filter((filter): boolean => {
+    return contextType
+      && filter.get('context').includes(toServerSideType(contextType))
+      && (filter.get('expires_at') === null
+      || Date.parse(filter.get('expires_at')) > new Date().getTime());
+  });
+};
+
+const escapeRegExp = (string: string) =>
+  string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // $& means the whole matched string
+
+export const regexFromFilters = (filters: ImmutableList<ImmutableMap<string, any>>) => {
+  if (filters.size === 0) return null;
+
+  return new RegExp(filters.map(filter => {
+    let expr = escapeRegExp(filter.get('phrase'));
+
+    if (filter.get('whole_word')) {
+      if (/^[\w]/.test(expr)) {
+        expr = `\\b${expr}`;
+      }
+
+      if (/[\w]$/.test(expr)) {
+        expr = `${expr}\\b`;
+      }
+    }
+
+    return expr;
+  }).join('|'), 'i');
+};
+
+type APIStatus = { id: string, username: string };
+
+export const makeGetStatus = () => {
+  return createSelector(
+    [
+      (state: RootState, { id }: APIStatus) => state.statuses.get(id),
+      (state: RootState, { id }: APIStatus) => state.statuses.get(state.statuses.get(id)?.reblog || ''),
+      (state: RootState, { id }: APIStatus) => state.accounts.get(state.statuses.get(id)?.account || ''),
+      (state: RootState, { id }: APIStatus) => state.accounts.get(state.statuses.get(state.statuses.get(id)?.reblog || '')?.account || ''),
+      (_state: RootState, { username }: APIStatus) => username,
+      getFilters,
+      (state: RootState) => state.me,
+    ],
+
+    (statusBase, statusReblog, accountBase, accountReblog, username, filters, me) => {
+      if (!statusBase || !accountBase) return null;
+
+      const accountUsername = accountBase.acct;
+      //Must be owner of status if username exists
+      if (accountUsername !== username && username !== undefined) {
+        return null;
+      }
+
+      if (statusReblog && accountReblog) {
+        // @ts-ignore AAHHHHH
+        statusReblog = statusReblog.set('account', accountReblog);
+      } else {
+        statusReblog = undefined;
+      }
+
+      const regex    = (accountReblog || accountBase).id !== me && regexFromFilters(filters);
+      const filtered = regex && regex.test(statusReblog?.search_index || statusBase.search_index);
+
+      return statusBase.withMutations(map => {
+        map.set('reblog', statusReblog || null);
+        // @ts-ignore :(
+        map.set('account', accountBase || null);
+        map.set('filtered', Boolean(filtered));
+      });
+    },
+  );
+};
+
+const getAlertsBase = (state: RootState) => state.alerts;
+
+const buildAlert = (item: any) => {
+  return {
+    message: item.message,
+    title: item.title,
+    actionLabel: item.actionLabel,
+    actionLink: item.actionLink,
+    key: item.key,
+    className: `notification-bar-${item.severity}`,
+    activeClassName: 'snackbar--active',
+    dismissAfter: 6000,
+    style: false,
+  };
+};
+
+type Alert = ReturnType<typeof buildAlert>;
+
+export const getAlerts = createSelector([getAlertsBase], (base): Alert[] => {
+  const arr: Alert[] = [];
+  base.forEach((item: any) => arr.push(buildAlert(item)));
+  return arr;
+});
+
+export const makeGetNotification = () => {
+  return createSelector([
+    (_state: RootState, notification: Notification) => notification,
+    (state: RootState, notification: Notification) => state.accounts.get(normalizeId(notification.account)),
+    (state: RootState, notification: Notification) => state.accounts.get(normalizeId(notification.target)),
+    (state: RootState, notification: Notification) => state.statuses.get(normalizeId(notification.status)),
+  ], (notification, account, target, status) => {
+    return notification.merge({
+      // @ts-ignore
+      account: account || null,
+      // @ts-ignore
+      target: target || null,
+      // @ts-ignore
+      status: status || null,
+    });
+  });
+};
+
+export const getAccountGallery = createSelector([
+  (state: RootState, id: string) => state.timelines.getIn([`account:${id}:media`, 'items'], ImmutableList()),
+  (state: RootState)       => state.statuses,
+  (state: RootState)       => state.accounts,
+], (statusIds, statuses, accounts) => {
+
+  return statusIds.reduce((medias: ImmutableList<any>, statusId: string) => {
+    const status = statuses.get(statusId);
+    if (!status) return medias;
+    if (status.reblog) return medias;
+    if (typeof status.account !== 'string') return medias;
+
+    const account = accounts.get(status.account);
+
+    return medias.concat(
+      status.media_attachments.map(media => media.merge({ status, account })));
+  }, ImmutableList());
+});
+
+type APIChat = { id: string, last_message: string };
+
+export const makeGetChat = () => {
+  return createSelector(
+    [
+      (state: RootState, { id }: APIChat) => state.chats.getIn(['items', id]),
+      (state: RootState, { id }: APIChat) => state.accounts.get(state.chats.getIn(['items', id, 'account'])),
+      (state: RootState, { last_message }: APIChat) => state.chat_messages.get(last_message),
+    ],
+
+    (chat, account, lastMessage: string) => {
+      if (!chat) return null;
+
+      return chat.withMutations((map: ImmutableMap<string, any>) => {
+        map.set('account', account);
+        map.set('last_message', lastMessage);
+      });
+    },
+  );
+};
+
+export const makeGetReport = () => {
+  const getStatus = makeGetStatus();
+
+  return createSelector(
+    [
+      (state: RootState, id: string) => state.admin.getIn(['reports', id]),
+      (state: RootState, id: string) => state.admin.getIn(['reports', id, 'statuses']).map(
+        (statusId: string) => state.statuses.get(statusId))
+        .filter((s: any) => s)
+        .map((s: any) => getStatus(state, s.toJS())),
+    ],
+
+    (report, statuses) => {
+      if (!report) return null;
+      return report.set('statuses', statuses);
+    },
+  );
+};
+
+const getAuthUserIds = createSelector([
+  (state: RootState) => state.auth.get('users', ImmutableMap()),
+], authUsers => {
+  return authUsers.reduce((ids: ImmutableOrderedSet<string>, authUser: ImmutableMap<string, any>) => {
+    try {
+      const id = authUser.get('id');
+      return validId(id) ? ids.add(id) : ids;
+    } catch {
+      return ids;
+    }
+  }, ImmutableOrderedSet());
+});
+
+export const makeGetOtherAccounts = () => {
+  return createSelector([
+    (state: RootState) => state.accounts,
+    getAuthUserIds,
+    (state: RootState) => state.me,
+  ],
+  (accounts, authUserIds, me) => {
+    return authUserIds
+      .reduce((list: ImmutableList<any>, id: string) => {
+        if (id === me) return list;
+        const account = accounts.get(id);
+        return account ? list.push(account) : list;
+      }, ImmutableList());
+  });
+};
+
+const getSimplePolicy = createSelector([
+  (state: RootState) => state.admin.configs,
+  (state: RootState) => state.instance.pleroma.getIn(['metadata', 'federation', 'mrf_simple'], ImmutableMap()),
+], (configs, instancePolicy: ImmutableMap<string, any>) => {
+  return instancePolicy.merge(ConfigDB.toSimplePolicy(configs));
+});
+
+const getRemoteInstanceFavicon = (state: RootState, host: string) => (
+  (state.accounts.find(account => getDomain(account) === host, null) || ImmutableMap())
+    .getIn(['pleroma', 'favicon'])
+);
+
+const getRemoteInstanceFederation = (state: RootState, host: string) => (
+  getSimplePolicy(state)
+    .map(hosts => hosts.includes(host))
+);
+
+export const makeGetHosts = () => {
+  return createSelector([getSimplePolicy], (simplePolicy) => {
+    return simplePolicy
+      .deleteAll(['accept', 'reject_deletes', 'report_removal'])
+      .reduce((acc, hosts) => acc.union(hosts), ImmutableOrderedSet())
+      .sort();
+  });
+};
+
+export const makeGetRemoteInstance = () => {
+  return createSelector([
+    (_state: RootState, host: string) => host,
+    getRemoteInstanceFavicon,
+    getRemoteInstanceFederation,
+  ], (host, favicon, federation) => {
+    return ImmutableMap({
+      host,
+      favicon,
+      federation,
+    });
+  });
+};
+
+type ColumnQuery = { type: string, prefix?: string };
+
+export const makeGetStatusIds = () => createSelector([
+  (state: RootState, { type, prefix }: ColumnQuery) => getSettings(state).get(prefix || type, ImmutableMap()),
+  (state: RootState, { type }: ColumnQuery) => state.timelines.getIn([type, 'items'], ImmutableOrderedSet()),
+  (state: RootState)           => state.statuses,
+], (columnSettings, statusIds: string[], statuses) => {
+  return statusIds.filter((id: string) => {
+    const status = statuses.get(id);
+    if (!status) return true;
+    return !shouldFilter(status, columnSettings);
+  });
+});
diff --git a/app/soapbox/utils/__tests__/accounts-test.js b/app/soapbox/utils/__tests__/accounts-test.js
index 15a42ec57..ddf38adde 100644
--- a/app/soapbox/utils/__tests__/accounts-test.js
+++ b/app/soapbox/utils/__tests__/accounts-test.js
@@ -2,7 +2,6 @@ import { fromJS } from 'immutable';
 
 import {
   getDomain,
-  acctFull,
   isStaff,
   isAdmin,
   isModerator,
@@ -18,28 +17,6 @@ describe('getDomain', () => {
   });
 });
 
-describe('acctFull', () => {
-  describe('with a local user', () => {
-    const account = fromJS({
-      acct: 'alice',
-      url: 'https://party.com/users/alice',
-    });
-    it('returns the full acct', () => {
-      expect(acctFull(account)).toEqual('alice@party.com');
-    });
-  });
-
-  describe('with a remote user', () => {
-    const account = fromJS({
-      acct: 'bob@pool.com',
-      url: 'https://pool.com/users/bob',
-    });
-    it('returns the full acct', () => {
-      expect(acctFull(account)).toEqual('bob@pool.com');
-    });
-  });
-});
-
 describe('isStaff', () => {
   describe('with empty user', () => {
     const account = fromJS({});
diff --git a/app/soapbox/utils/accounts.ts b/app/soapbox/utils/accounts.ts
index 34e4429f9..3536cc966 100644
--- a/app/soapbox/utils/accounts.ts
+++ b/app/soapbox/utils/accounts.ts
@@ -2,26 +2,20 @@ import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutabl
 
 import { Account } from 'soapbox/types/entities';
 
-const getDomainFromURL = (account: ImmutableMap<string, any>): string => {
+const getDomainFromURL = (account: Account): string => {
   try {
-    const url = account.get('url');
+    const url = account.url;
     return new URL(url).host;
   } catch {
     return '';
   }
 };
 
-export const getDomain = (account: ImmutableMap<string, any>): string => {
-  const domain = account.get('acct', '').split('@')[1];
+export const getDomain = (account: Account): string => {
+  const domain = account.acct.split('@')[1];
   return domain ? domain : getDomainFromURL(account);
 };
 
-export const guessFqn = (account: ImmutableMap<string, any>): string => {
-  const [user, domain] = account.get('acct', '').split('@');
-  if (!domain) return [user, getDomainFromURL(account)].join('@');
-  return account.get('acct', '');
-};
-
 export const getBaseURL = (account: ImmutableMap<string, any>): string => {
   try {
     const url = account.get('url');
@@ -31,11 +25,6 @@ export const getBaseURL = (account: ImmutableMap<string, any>): string => {
   }
 };
 
-// user@domain even for local users
-export const acctFull = (account: ImmutableMap<string, any>): string => (
-  account.get('fqn') || guessFqn(account) || ''
-);
-
 export const getAcct = (account: Account, displayFqn: boolean): string => (
   displayFqn === true ? account.fqn : account.acct
 );

From 7efa10e7e06cb0a99c9288909f49f231cf745d70 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 18:10:34 -0500
Subject: [PATCH 06/29] Convert reducers/admin to Typescript

---
 app/soapbox/reducers/{admin.js => admin.ts} | 77 +++++++++++++++------
 app/soapbox/selectors/index.ts              |  9 +--
 app/soapbox/utils/config_db.ts              |  4 +-
 3 files changed, 61 insertions(+), 29 deletions(-)
 rename app/soapbox/reducers/{admin.js => admin.ts} (54%)

diff --git a/app/soapbox/reducers/admin.js b/app/soapbox/reducers/admin.ts
similarity index 54%
rename from app/soapbox/reducers/admin.js
rename to app/soapbox/reducers/admin.ts
index 6a75e2c5b..90cb10a4f 100644
--- a/app/soapbox/reducers/admin.js
+++ b/app/soapbox/reducers/admin.ts
@@ -21,33 +21,54 @@ import {
   ADMIN_USERS_APPROVE_SUCCESS,
 } from '../actions/admin';
 
+import type { AnyAction } from 'redux';
+import type { Config } from 'soapbox/utils/config_db';
+
 const ReducerRecord = ImmutableRecord({
-  reports: ImmutableMap(),
-  openReports: ImmutableOrderedSet(),
-  users: ImmutableMap(),
-  latestUsers: ImmutableOrderedSet(),
-  awaitingApproval: ImmutableOrderedSet(),
-  configs: ImmutableList(),
+  reports: ImmutableMap<string, any>(),
+  openReports: ImmutableOrderedSet<string>(),
+  users: ImmutableMap<string, any>(),
+  latestUsers: ImmutableOrderedSet<string>(),
+  awaitingApproval: ImmutableOrderedSet<string>(),
+  configs: ImmutableList<Config>(),
   needsReboot: false,
 });
 
-const FILTER_UNAPPROVED = ['local', 'need_approval'];
-const FILTER_LATEST     = ['local', 'active'];
+type State = ReturnType<typeof ReducerRecord>;
 
-const filtersMatch = (f1, f2) => is(ImmutableSet(f1), ImmutableSet(f2));
-const toIds = items => items.map(item => item.id);
+// Umm... based?
+// https://itnext.io/typescript-extract-unpack-a-type-from-a-generic-baca7af14e51
+type InnerRecord<R> = R extends ImmutableRecord<infer TProps> ? TProps : never;
 
-const mergeSet = (state, key, users) => {
+type InnerState = InnerRecord<State>;
+
+// Lol https://javascript.plainenglish.io/typescript-essentials-conditionally-filter-types-488705bfbf56
+type FilterConditionally<Source, Condition> = Pick<Source, {[K in keyof Source]: Source[K] extends Condition ? K : never}[keyof Source]>;
+
+type SetKeys = keyof FilterConditionally<InnerState, ImmutableOrderedSet<string>>;
+
+type APIReport = { id: string, state: string, statuses: any[] };
+type APIUser = { id: string, email: string, nickname: string, registration_reason: string };
+
+type Filter = 'local' | 'need_approval' | 'active';
+
+const FILTER_UNAPPROVED: Filter[] = ['local', 'need_approval'];
+const FILTER_LATEST: Filter[]     = ['local', 'active'];
+
+const filtersMatch = (f1: string[], f2: string[]) => is(ImmutableSet(f1), ImmutableSet(f2));
+const toIds = (items: any[]) => items.map(item => item.id);
+
+const mergeSet = (state: State, key: SetKeys, users: APIUser[]): State => {
   const newIds = toIds(users);
-  return state.update(key, ImmutableOrderedSet(), ids => ids.union(newIds));
+  return state.update(key, (ids: ImmutableOrderedSet<string>) => ids.union(newIds));
 };
 
-const replaceSet = (state, key, users) => {
+const replaceSet = (state: State, key: SetKeys, users: APIUser[]): State => {
   const newIds = toIds(users);
   return state.set(key, ImmutableOrderedSet(newIds));
 };
 
-const maybeImportUnapproved = (state, users, filters) => {
+const maybeImportUnapproved = (state: State, users: APIUser[], filters: Filter[]): State => {
   if (filtersMatch(FILTER_UNAPPROVED, filters)) {
     return mergeSet(state, 'awaitingApproval', users);
   } else {
@@ -55,7 +76,7 @@ const maybeImportUnapproved = (state, users, filters) => {
   }
 };
 
-const maybeImportLatest = (state, users, filters, page) => {
+const maybeImportLatest = (state: State, users: APIUser[], filters: Filter[], page: number): State => {
   if (page === 1 && filtersMatch(FILTER_LATEST, filters)) {
     return replaceSet(state, 'latestUsers', users);
   } else {
@@ -63,14 +84,14 @@ const maybeImportLatest = (state, users, filters, page) => {
   }
 };
 
-const importUser = (state, user) => (
+const importUser = (state: State, user: APIUser): State => (
   state.setIn(['users', user.id], ImmutableMap({
     email: user.email,
     registration_reason: user.registration_reason,
   }))
 );
 
-function importUsers(state, users, filters, page) {
+function importUsers(state: State, users: APIUser[], filters: Filter[], page: number): State {
   return state.withMutations(state => {
     maybeImportUnapproved(state, users, filters);
     maybeImportLatest(state, users, filters, page);
@@ -81,7 +102,7 @@ function importUsers(state, users, filters, page) {
   });
 }
 
-function deleteUsers(state, accountIds) {
+function deleteUsers(state: State, accountIds: string[]): State {
   return state.withMutations(state => {
     accountIds.forEach(id => {
       state.update('awaitingApproval', orderedSet => orderedSet.delete(id));
@@ -90,7 +111,7 @@ function deleteUsers(state, accountIds) {
   });
 }
 
-function approveUsers(state, users) {
+function approveUsers(state: State, users: APIUser[]): State {
   return state.withMutations(state => {
     users.forEach(user => {
       state.update('awaitingApproval', orderedSet => orderedSet.delete(user.nickname));
@@ -99,7 +120,7 @@ function approveUsers(state, users) {
   });
 }
 
-function importReports(state, reports) {
+function importReports(state: State, reports: APIReport[]): State {
   return state.withMutations(state => {
     reports.forEach(report => {
       report.statuses = report.statuses.map(status => status.id);
@@ -111,7 +132,7 @@ function importReports(state, reports) {
   });
 }
 
-function handleReportDiffs(state, reports) {
+function handleReportDiffs(state: State, reports: APIReport[]) {
   // Note: the reports here aren't full report objects
   // hence the need for a new function.
   return state.withMutations(state => {
@@ -127,11 +148,21 @@ function handleReportDiffs(state, reports) {
   });
 }
 
-export default function admin(state = ReducerRecord(), action) {
+const normalizeConfig = (config: any): Config => ImmutableMap(fromJS(config));
+
+const normalizeConfigs = (configs: any): ImmutableList<Config> => {
+  return ImmutableList(fromJS(configs)).map(normalizeConfig);
+};
+
+const importConfigs = (state: State, configs: any): State => {
+  return state.set('configs', normalizeConfigs(configs));
+};
+
+export default function admin(state: State = ReducerRecord(), action: AnyAction): State {
   switch(action.type) {
   case ADMIN_CONFIG_FETCH_SUCCESS:
   case ADMIN_CONFIG_UPDATE_SUCCESS:
-    return state.set('configs', fromJS(action.configs));
+    return importConfigs(state, action.configs);
   case ADMIN_REPORTS_FETCH_SUCCESS:
     return importReports(state, action.reports);
   case ADMIN_REPORTS_PATCH_REQUEST:
diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts
index 2eb21744e..ee5f526c4 100644
--- a/app/soapbox/selectors/index.ts
+++ b/app/soapbox/selectors/index.ts
@@ -2,6 +2,7 @@ import {
   Map as ImmutableMap,
   List as ImmutableList,
   OrderedSet as ImmutableOrderedSet,
+  fromJS,
 } from 'immutable';
 import { createSelector } from 'reselect';
 
@@ -261,9 +262,9 @@ export const makeGetReport = () => {
 
   return createSelector(
     [
-      (state: RootState, id: string) => state.admin.getIn(['reports', id]),
-      (state: RootState, id: string) => state.admin.getIn(['reports', id, 'statuses']).map(
-        (statusId: string) => state.statuses.get(statusId))
+      (state: RootState, id: string) => state.admin.reports.get(id),
+      (state: RootState, id: string) => ImmutableList(fromJS(state.admin.reports.getIn([id, 'statuses']))).map(
+        statusId => state.statuses.get(normalizeId(statusId)))
         .filter((s: any) => s)
         .map((s: any) => getStatus(state, s.toJS())),
     ],
@@ -306,7 +307,7 @@ export const makeGetOtherAccounts = () => {
 
 const getSimplePolicy = createSelector([
   (state: RootState) => state.admin.configs,
-  (state: RootState) => state.instance.pleroma.getIn(['metadata', 'federation', 'mrf_simple'], ImmutableMap()),
+  (state: RootState) => state.instance.pleroma.getIn(['metadata', 'federation', 'mrf_simple'], ImmutableMap()) as ImmutableMap<string, any>,
 ], (configs, instancePolicy: ImmutableMap<string, any>) => {
   return instancePolicy.merge(ConfigDB.toSimplePolicy(configs));
 });
diff --git a/app/soapbox/utils/config_db.ts b/app/soapbox/utils/config_db.ts
index deb5d048a..48f3118b5 100644
--- a/app/soapbox/utils/config_db.ts
+++ b/app/soapbox/utils/config_db.ts
@@ -6,8 +6,8 @@ import {
 } from 'immutable';
 import { trimStart } from 'lodash';
 
-type Config = ImmutableMap<string, any>;
-type Policy = ImmutableMap<string, any>;
+export type Config = ImmutableMap<string, any>;
+export type Policy = ImmutableMap<string, any>;
 
 const find = (
   configs: ImmutableList<Config>,

From 836c02b388f4fc2d70d2e093c2d4a6b782d2ff84 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 18:18:39 -0500
Subject: [PATCH 07/29] Convert reducers/alerts to Typescript

---
 app/soapbox/reducers/{alerts.js => alerts.ts} | 17 ++++++++++++-----
 app/soapbox/selectors/index.ts                |  2 +-
 2 files changed, 13 insertions(+), 6 deletions(-)
 rename app/soapbox/reducers/{alerts.js => alerts.ts} (61%)

diff --git a/app/soapbox/reducers/alerts.js b/app/soapbox/reducers/alerts.ts
similarity index 61%
rename from app/soapbox/reducers/alerts.js
rename to app/soapbox/reducers/alerts.ts
index 31428d402..f8219d199 100644
--- a/app/soapbox/reducers/alerts.js
+++ b/app/soapbox/reducers/alerts.ts
@@ -15,24 +15,31 @@ const AlertRecord = ImmutableRecord({
   actionLink: '',
 });
 
-const initialState = ImmutableList();
+import type { AnyAction } from 'redux';
+
+type PlainAlert = Record<string, any>;
+type Alert = ReturnType<typeof AlertRecord>;
+type State = ImmutableList<Alert>;
 
 // Get next key based on last alert
-const getNextKey = state => state.size > 0 ? state.last().get('key') + 1 : 0;
+const getNextKey = (state: State): number => {
+  const last = state.last();
+  return last ? last.key + 1 : 0;
+};
 
 // Import the alert
-const importAlert = (state, alert) => {
+const importAlert = (state: State, alert: PlainAlert): State => {
   const key = getNextKey(state);
   const record = AlertRecord({ ...alert, key });
   return state.push(record);
 };
 
 // Delete an alert by its key
-const deleteAlert = (state, alert) => {
+const deleteAlert = (state: State, alert: PlainAlert): State => {
   return state.filterNot(item => item.key === alert.key);
 };
 
-export default function alerts(state = initialState, action) {
+export default function alerts(state: State = ImmutableList<Alert>(), action: AnyAction): State {
   switch(action.type) {
   case ALERT_SHOW:
     return importAlert(state, action);
diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts
index ee5f526c4..f0ba336b3 100644
--- a/app/soapbox/selectors/index.ts
+++ b/app/soapbox/selectors/index.ts
@@ -195,7 +195,7 @@ type Alert = ReturnType<typeof buildAlert>;
 
 export const getAlerts = createSelector([getAlertsBase], (base): Alert[] => {
   const arr: Alert[] = [];
-  base.forEach((item: any) => arr.push(buildAlert(item)));
+  base.forEach(item => arr.push(buildAlert(item)));
   return arr;
 });
 

From ee1ef09201cf4a5cbacf250ec27811487aa9c4a1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 19:01:20 -0500
Subject: [PATCH 08/29] EmojiSelector: convert to tsx

---
 .../{emoji_selector.js => emoji_selector.tsx} | 64 +++++++++++--------
 1 file changed, 39 insertions(+), 25 deletions(-)
 rename app/soapbox/components/{emoji_selector.js => emoji_selector.tsx} (55%)

diff --git a/app/soapbox/components/emoji_selector.js b/app/soapbox/components/emoji_selector.tsx
similarity index 55%
rename from app/soapbox/components/emoji_selector.js
rename to app/soapbox/components/emoji_selector.tsx
index f41f23f41..fa3004c19 100644
--- a/app/soapbox/components/emoji_selector.js
+++ b/app/soapbox/components/emoji_selector.tsx
@@ -1,5 +1,4 @@
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -8,51 +7,64 @@ import { connect } from 'react-redux';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import emojify from 'soapbox/features/emoji/emoji';
 
-const mapStateToProps = state => ({
-  allowedEmoji: getSoapboxConfig(state).get('allowedEmoji'),
+import type { List as ImmutableList } from 'immutable';
+import type { RootState } from 'soapbox/store';
+
+const mapStateToProps = (state: RootState) => ({
+  allowedEmoji: getSoapboxConfig(state).allowedEmoji,
 });
 
-export default @connect(mapStateToProps)
-class EmojiSelector extends ImmutablePureComponent {
+interface IEmojiSelector {
+  allowedEmoji: ImmutableList<string>,
+  onReact: (emoji: string) => (e?: MouseEvent) => void,
+  onUnfocus: () => void,
+  visible: boolean,
+  focused?: boolean,
+}
 
-  static propTypes = {
-    onReact: PropTypes.func.isRequired,
-    onUnfocus: PropTypes.func,
-    visible: PropTypes.bool,
-    focused: PropTypes.bool,
-  }
+class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
 
-  static defaultProps = {
-    onReact: () => {},
+  static defaultProps: Partial<IEmojiSelector> = {
+    onReact: () => () => {},
     onUnfocus: () => {},
     visible: false,
   }
 
-  handleBlur = e => {
+  node?: HTMLDivElement = undefined;
+
+  handleBlur: React.FocusEventHandler<HTMLDivElement> = e => {
     const { focused, onUnfocus } = this.props;
 
-    if (focused && (!e.relatedTarget || !e.relatedTarget.classList.contains('emoji-react-selector__emoji'))) {
+    if (focused && (!e.currentTarget || !e.currentTarget.classList.contains('emoji-react-selector__emoji'))) {
       onUnfocus();
     }
   }
 
-  _selectPreviousEmoji = i => {
+  _selectPreviousEmoji = (i: number): void => {
+    if (!this.node) return;
+
     if (i !== 0) {
-      this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`).focus();
+      const button: HTMLButtonElement | null = this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`);
+      button?.focus();
     } else {
-      this.node.querySelector('.emoji-react-selector__emoji:last-child').focus();
+      const button: HTMLButtonElement | null = this.node.querySelector('.emoji-react-selector__emoji:last-child');
+      button?.focus();
     }
   };
 
-  _selectNextEmoji = i => {
+  _selectNextEmoji = (i: number) => {
+    if (!this.node) return;
+
     if (i !== this.props.allowedEmoji.size - 1) {
-      this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`).focus();
+      const button: HTMLButtonElement | null = this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`);
+      button?.focus();
     } else {
-      this.node.querySelector('.emoji-react-selector__emoji:first-child').focus();
+      const button: HTMLButtonElement | null = this.node.querySelector('.emoji-react-selector__emoji:first-child');
+      button?.focus();
     }
   };
 
-  handleKeyDown = i => e => {
+  handleKeyDown = (i: number): React.KeyboardEventHandler => e => {
     const { onUnfocus } = this.props;
 
     switch (e.key) {
@@ -75,7 +87,7 @@ class EmojiSelector extends ImmutablePureComponent {
     }
   }
 
-  handleReact = emoji => () => {
+  handleReact = (emoji: string) => () => {
     const { onReact, focused, onUnfocus } = this.props;
 
     onReact(emoji)();
@@ -89,7 +101,7 @@ class EmojiSelector extends ImmutablePureComponent {
     open: () => {},
   };
 
-  setRef = c => {
+  setRef = (c: HTMLDivElement): void => {
     this.node = c;
   }
 
@@ -112,7 +124,7 @@ class EmojiSelector extends ImmutablePureComponent {
               className='emoji-react-selector__emoji'
               dangerouslySetInnerHTML={{ __html: emojify(emoji) }}
               onClick={this.handleReact(emoji)}
-              onKeyDown={this.handleKeyDown(i, emoji)}
+              onKeyDown={this.handleKeyDown(i)}
               tabIndex={(visible || focused) ? 0 : -1}
             />
           ))}
@@ -122,3 +134,5 @@ class EmojiSelector extends ImmutablePureComponent {
   }
 
 }
+
+export default connect(mapStateToProps)(EmojiSelector);

From 52982706fe5a6bd61665c3f5ef12ba513748fe61 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 20:32:53 -0500
Subject: [PATCH 09/29] Add Emoji functional component

---
 app/soapbox/components/emoji_selector.tsx | 14 +++---
 app/soapbox/components/ui/emoji/emoji.tsx | 54 +++++++++++++++++++++++
 app/soapbox/components/ui/index.ts        |  1 +
 3 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 app/soapbox/components/ui/emoji/emoji.tsx

diff --git a/app/soapbox/components/emoji_selector.tsx b/app/soapbox/components/emoji_selector.tsx
index fa3004c19..8e8c94d49 100644
--- a/app/soapbox/components/emoji_selector.tsx
+++ b/app/soapbox/components/emoji_selector.tsx
@@ -5,7 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import emojify from 'soapbox/features/emoji/emoji';
+import { Emoji } from 'soapbox/components/ui';
 
 import type { List as ImmutableList } from 'immutable';
 import type { RootState } from 'soapbox/store';
@@ -109,12 +109,9 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
     const { visible, focused, allowedEmoji } = this.props;
 
     return (
-      <HotKeys
-        handlers={this.handlers}
-        className='emoji-react-selector-container'
-      >
+      <HotKeys handlers={this.handlers}>
         <div
-          className={classNames('emoji-react-selector w-max', { 'emoji-react-selector--visible': visible, 'emoji-react-selector--focused': focused })}
+          className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', { 'opacity-100 pointer-events-auto z-[999]': visible || focused })}
           onBlur={this.handleBlur}
           ref={this.setRef}
         >
@@ -122,11 +119,12 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
             <button
               key={i}
               className='emoji-react-selector__emoji'
-              dangerouslySetInnerHTML={{ __html: emojify(emoji) }}
               onClick={this.handleReact(emoji)}
               onKeyDown={this.handleKeyDown(i)}
               tabIndex={(visible || focused) ? 0 : -1}
-            />
+            >
+              <Emoji emoji={emoji} />
+            </button>
           ))}
         </div>
       </HotKeys>
diff --git a/app/soapbox/components/ui/emoji/emoji.tsx b/app/soapbox/components/ui/emoji/emoji.tsx
new file mode 100644
index 000000000..d06b44d15
--- /dev/null
+++ b/app/soapbox/components/ui/emoji/emoji.tsx
@@ -0,0 +1,54 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { joinPublicPath } from 'soapbox/utils/static';
+
+// Taken from twemoji-parser
+// https://github.com/twitter/twemoji-parser/blob/a97ef3994e4b88316812926844d51c296e889f76/src/index.js
+const removeVS16s = (rawEmoji: string): string => {
+  const vs16RegExp = /\uFE0F/g;
+  const zeroWidthJoiner = String.fromCharCode(0x200d);
+  return rawEmoji.indexOf(zeroWidthJoiner) < 0 ? rawEmoji.replace(vs16RegExp, '') : rawEmoji;
+};
+
+const toCodePoints = (unicodeSurrogates: string): string[] => {
+  const points = [];
+  let char = 0;
+  let previous = 0;
+  let i = 0;
+  while (i < unicodeSurrogates.length) {
+    char = unicodeSurrogates.charCodeAt(i++);
+    if (previous) {
+      points.push((0x10000 + ((previous - 0xd800) << 10) + (char - 0xdc00)).toString(16));
+      previous = 0;
+    } else if (char > 0xd800 && char <= 0xdbff) {
+      previous = char;
+    } else {
+      points.push(char.toString(16));
+    }
+  }
+  return points;
+};
+
+interface IEmoji {
+  className?: string,
+  emoji: string,
+}
+
+const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
+  const codepoints = toCodePoints(removeVS16s(emoji));
+  const filename = codepoints.join('-');
+
+  if (!filename) return null;
+
+  return (
+    <img
+      draggable='false'
+      className={classNames('emojione', className)}
+      alt={emoji}
+      src={joinPublicPath(`packs/emoji/${filename}.svg`)}
+    />
+  );
+};
+
+export default Emoji;
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 302738ed9..d9cd27fb0 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -2,6 +2,7 @@ export { default as Avatar } from './avatar/avatar';
 export { default as Button } from './button/button';
 export { Card, CardBody, CardHeader, CardTitle } from './card/card';
 export { default as Column } from './column/column';
+export { default as Emoji } from './emoji/emoji';
 export { default as Form } from './form/form';
 export { default as FormActions } from './form-actions/form-actions';
 export { default as FormGroup } from './form-group/form-group';

From 5e8472e29d89f379ee4c47fe26b5eaaae7264ea8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 20:47:28 -0500
Subject: [PATCH 10/29] EmojiSelector: fix onReact prop

---
 app/soapbox/components/emoji_selector.tsx   |  8 +++----
 app/soapbox/components/status_action_bar.js | 24 ++++++++++++---------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/components/emoji_selector.tsx b/app/soapbox/components/emoji_selector.tsx
index 8e8c94d49..15a0146c5 100644
--- a/app/soapbox/components/emoji_selector.tsx
+++ b/app/soapbox/components/emoji_selector.tsx
@@ -16,7 +16,7 @@ const mapStateToProps = (state: RootState) => ({
 
 interface IEmojiSelector {
   allowedEmoji: ImmutableList<string>,
-  onReact: (emoji: string) => (e?: MouseEvent) => void,
+  onReact: (emoji: string) => void,
   onUnfocus: () => void,
   visible: boolean,
   focused?: boolean,
@@ -25,7 +25,7 @@ interface IEmojiSelector {
 class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
 
   static defaultProps: Partial<IEmojiSelector> = {
-    onReact: () => () => {},
+    onReact: () => {},
     onUnfocus: () => {},
     visible: false,
   }
@@ -87,10 +87,10 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
     }
   }
 
-  handleReact = (emoji: string) => () => {
+  handleReact = (emoji: string) => (): void => {
     const { onReact, focused, onUnfocus } = this.props;
 
-    onReact(emoji)();
+    onReact(emoji);
 
     if (focused) {
       onUnfocus();
diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 5844ac41f..367ae7b04 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -168,24 +168,28 @@ class StatusActionBar extends ImmutablePureComponent {
 
     if (features.emojiReacts && isUserTouching()) {
       if (this.state.emojiSelectorVisible) {
-        this.handleReactClick(meEmojiReact)();
+        this.handleReact(meEmojiReact);
       } else {
         this.setState({ emojiSelectorVisible: true });
       }
     } else {
-      this.handleReactClick(meEmojiReact)();
+      this.handleReact(meEmojiReact);
     }
   }
 
+  handleReact = emoji => {
+    const { me, dispatch, onOpenUnauthorizedModal, status } = this.props;
+    if (me) {
+      dispatch(simpleEmojiReact(status, emoji));
+    } else {
+      onOpenUnauthorizedModal('FAVOURITE');
+    }
+    this.setState({ emojiSelectorVisible: false });
+  }
+
   handleReactClick = emoji => {
     return e => {
-      const { me, dispatch, onOpenUnauthorizedModal, status } = this.props;
-      if (me) {
-        dispatch(simpleEmojiReact(status, emoji));
-      } else {
-        onOpenUnauthorizedModal('FAVOURITE');
-      }
-      this.setState({ emojiSelectorVisible: false });
+      this.handleReact(emoji);
     };
   }
 
@@ -667,7 +671,7 @@ class StatusActionBar extends ImmutablePureComponent {
           onMouseLeave={this.handleLikeButtonLeave}
         >
           <EmojiSelector
-            onReact={this.handleReactClick}
+            onReact={this.handleReact}
             visible={features.emojiReacts && emojiSelectorVisible}
             focused={emojiSelectorFocused}
             onUnfocus={handleEmojiSelectorUnfocus}

From f03fb5b73ced21419fae2a59a29f070de9556a7d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 31 Mar 2022 21:17:29 -0500
Subject: [PATCH 11/29] Create now emoji-selector functional component (wip)

---
 app/soapbox/components/emoji_selector.tsx     | 16 ++++--
 .../ui/emoji-selector/emoji-selector.tsx      | 56 +++++++++++++++++++
 app/soapbox/components/ui/index.ts            |  1 +
 3 files changed, 68 insertions(+), 5 deletions(-)
 create mode 100644 app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

diff --git a/app/soapbox/components/emoji_selector.tsx b/app/soapbox/components/emoji_selector.tsx
index 15a0146c5..0533f6a69 100644
--- a/app/soapbox/components/emoji_selector.tsx
+++ b/app/soapbox/components/emoji_selector.tsx
@@ -1,11 +1,11 @@
-import classNames from 'classnames';
+// import classNames from 'classnames';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import { Emoji } from 'soapbox/components/ui';
+import { EmojiSelector as RealEmojiSelector } from 'soapbox/components/ui';
 
 import type { List as ImmutableList } from 'immutable';
 import type { RootState } from 'soapbox/store';
@@ -106,11 +106,11 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
   }
 
   render() {
-    const { visible, focused, allowedEmoji } = this.props;
+    const { visible, focused, allowedEmoji, onReact } = this.props;
 
     return (
       <HotKeys handlers={this.handlers}>
-        <div
+        {/*<div
           className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', { 'opacity-100 pointer-events-auto z-[999]': visible || focused })}
           onBlur={this.handleBlur}
           ref={this.setRef}
@@ -126,7 +126,13 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
               <Emoji emoji={emoji} />
             </button>
           ))}
-        </div>
+        </div>*/}
+        <RealEmojiSelector
+          emojis={allowedEmoji.toArray()}
+          onReact={onReact}
+          visible={visible}
+          focused={focused}
+        />
       </HotKeys>
     );
   }
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
new file mode 100644
index 000000000..15fbe595a
--- /dev/null
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -0,0 +1,56 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import { Emoji } from 'soapbox/components/ui';
+
+interface IEmojiButton {
+  emoji: string,
+  onClick: React.EventHandler<React.MouseEvent>,
+  className?: string,
+  tabIndex?: number,
+}
+
+const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
+  return (
+    <button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
+      <Emoji className='w-8 h-8' emoji={emoji} />
+    </button>
+  );
+};
+
+interface IEmojiSelector {
+  emojis: string[],
+  onReact: (emoji: string) => void,
+  visible?: boolean,
+  focused?: boolean,
+}
+
+const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = false, focused = false }): JSX.Element => {
+
+  const handleReact = (emoji: string): React.EventHandler<React.MouseEvent> => {
+    return (e) => {
+      onReact(emoji);
+      e.preventDefault();
+      e.stopPropagation();
+    };
+  };
+
+  return (
+    <div
+      className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', {
+        'opacity-100 pointer-events-auto z-[999]': visible || focused,
+      })}
+    >
+      {emojis.map((emoji, i) => (
+        <EmojiButton
+          key={i}
+          emoji={emoji}
+          onClick={handleReact(emoji)}
+          tabIndex={(visible || focused) ? 0 : -1}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default EmojiSelector;
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index d9cd27fb0..fa60595f5 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -3,6 +3,7 @@ export { default as Button } from './button/button';
 export { Card, CardBody, CardHeader, CardTitle } from './card/card';
 export { default as Column } from './column/column';
 export { default as Emoji } from './emoji/emoji';
+export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as Form } from './form/form';
 export { default as FormActions } from './form-actions/form-actions';
 export { default as FormGroup } from './form-group/form-group';

From 69de2aad552a02a003d00deeef5f1895aa0091cb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 11:42:07 -0500
Subject: [PATCH 12/29] Restyle emoji components

---
 .../components/ui/emoji-selector/emoji-selector.tsx | 13 ++++++-------
 app/soapbox/components/ui/emoji/emoji.tsx           |  3 +--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 15fbe595a..d4006562e 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { Emoji } from 'soapbox/components/ui';
+import { Emoji, HStack } from 'soapbox/components/ui';
 
 interface IEmojiButton {
   emoji: string,
@@ -13,7 +13,7 @@ interface IEmojiButton {
 const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
   return (
     <button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
-      <Emoji className='w-8 h-8' emoji={emoji} />
+      <Emoji className='w-8 h-8 duration-100 hover:scale-125' emoji={emoji} />
     </button>
   );
 };
@@ -36,10 +36,9 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
   };
 
   return (
-    <div
-      className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', {
-        'opacity-100 pointer-events-auto z-[999]': visible || focused,
-      })}
+    <HStack
+      space={2}
+      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md w-max')}
     >
       {emojis.map((emoji, i) => (
         <EmojiButton
@@ -49,7 +48,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
           tabIndex={(visible || focused) ? 0 : -1}
         />
       ))}
-    </div>
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/components/ui/emoji/emoji.tsx b/app/soapbox/components/ui/emoji/emoji.tsx
index d06b44d15..9bbaa0dec 100644
--- a/app/soapbox/components/ui/emoji/emoji.tsx
+++ b/app/soapbox/components/ui/emoji/emoji.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import React from 'react';
 
 import { joinPublicPath } from 'soapbox/utils/static';
@@ -44,7 +43,7 @@ const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
   return (
     <img
       draggable='false'
-      className={classNames('emojione', className)}
+      className={className}
       alt={emoji}
       src={joinPublicPath(`packs/emoji/${filename}.svg`)}
     />

From 1742236074ee0d409a1d0914b99811d68574674e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 13:31:08 -0500
Subject: [PATCH 13/29] First pass at Hoverable component

---
 app/soapbox/components/status_action_bar.js   | 22 ++++-----
 .../components/ui/hoverable/hoverable.tsx     | 49 +++++++++++++++++++
 app/soapbox/components/ui/index.ts            |  1 +
 3 files changed, 60 insertions(+), 12 deletions(-)
 create mode 100644 app/soapbox/components/ui/hoverable/hoverable.tsx

diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 367ae7b04..fc85da343 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -19,7 +19,7 @@ import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 
 import { openModal } from '../actions/modals';
 
-import { IconButton, Text } from './ui';
+import { IconButton, Text, Hoverable } from './ui';
 
 
 const messages = defineMessages({
@@ -547,7 +547,6 @@ class StatusActionBar extends ImmutablePureComponent {
 
   render() {
     const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features, me } = this.props;
-    const { emojiSelectorVisible } = this.state;
 
     const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
 
@@ -664,18 +663,17 @@ class StatusActionBar extends ImmutablePureComponent {
           {reblogCount !== 0 && <Text size='xs' theme='muted' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</Text>}
         </div>
 
-        <div
+        <Hoverable
           ref={this.setRef}
           className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
-          onMouseEnter={this.handleLikeButtonHover}
-          onMouseLeave={this.handleLikeButtonLeave}
+          component={(
+            <EmojiSelector
+              onReact={this.handleReact}
+              focused={emojiSelectorFocused}
+              onUnfocus={handleEmojiSelectorUnfocus}
+            />
+          )}
         >
-          <EmojiSelector
-            onReact={this.handleReact}
-            visible={features.emojiReacts && emojiSelectorVisible}
-            focused={emojiSelectorFocused}
-            onUnfocus={handleEmojiSelectorUnfocus}
-          />
           <IconButton
             className={classNames({
               'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
@@ -698,7 +696,7 @@ class StatusActionBar extends ImmutablePureComponent {
               <span className='detailed-status__link'>{emojiReactCount}</span>
             )
           )}
-        </div>
+        </Hoverable>
 
         {shareButton}
 
diff --git a/app/soapbox/components/ui/hoverable/hoverable.tsx b/app/soapbox/components/ui/hoverable/hoverable.tsx
new file mode 100644
index 000000000..cca3cd6df
--- /dev/null
+++ b/app/soapbox/components/ui/hoverable/hoverable.tsx
@@ -0,0 +1,49 @@
+import Portal from '@reach/portal';
+import React, { useState, useRef } from 'react';
+
+interface IHoverable {
+  component: React.Component,
+}
+
+/** Wrapper to render a given component when hovered */
+const Hoverable: React.FC<IHoverable> = ({
+  component,
+  children,
+}): JSX.Element => {
+
+  const [portalActive, setPortalActive] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  const handleMouseEnter = () => {
+    setPortalActive(true);
+  };
+
+  const handleMouseLeave = () => {
+    setPortalActive(false);
+  };
+
+  const setPortalPosition = (): React.CSSProperties => {
+    if (!ref.current) return {};
+
+    const { top, height, left, width } = ref.current.getBoundingClientRect();
+
+    return {
+      top: top + height,
+      left,
+      width,
+    };
+  };
+
+  return (
+    <div
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
+      ref={ref}
+    >
+      {children}
+      {portalActive && <Portal><div className='fixed' style={setPortalPosition()}>{component}</div></Portal>}
+    </div>
+  );
+};
+
+export default Hoverable;
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index fa60595f5..3aa272def 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -7,6 +7,7 @@ export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as Form } from './form/form';
 export { default as FormActions } from './form-actions/form-actions';
 export { default as FormGroup } from './form-group/form-group';
+export { default as Hoverable } from './hoverable/hoverable';
 export { default as HStack } from './hstack/hstack';
 export { default as Icon } from './icon/icon';
 export { default as IconButton } from './icon-button/icon-button';

From 6c8bc3f329e80d07c286d84454f7095c70a20ed8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 14:55:42 -0500
Subject: [PATCH 14/29] Hoverable component: we've come full circle

---
 app/soapbox/components/status_action_bar.js   | 48 ++++++++++---------
 .../ui/emoji-selector/emoji-selector.tsx      |  2 +-
 .../components/ui/hoverable/hoverable.tsx     | 40 +++++++++++-----
 3 files changed, 54 insertions(+), 36 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index fc85da343..6f144953a 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -663,30 +663,34 @@ class StatusActionBar extends ImmutablePureComponent {
           {reblogCount !== 0 && <Text size='xs' theme='muted' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</Text>}
         </div>
 
-        <Hoverable
+        <div
           ref={this.setRef}
           className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
-          component={(
-            <EmojiSelector
-              onReact={this.handleReact}
-              focused={emojiSelectorFocused}
-              onUnfocus={handleEmojiSelectorUnfocus}
-            />
-          )}
         >
-          <IconButton
-            className={classNames({
-              'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
-              'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
-            })}
-            title={meEmojiTitle}
-            src={require('@tabler/icons/icons/heart.svg')}
-            iconClassName={classNames({
-              'fill-accent-300': Boolean(meEmojiReact),
-            })}
-            // emoji={meEmojiReact}
-            onClick={this.handleLikeButtonClick}
-          />
+          <Hoverable
+            component={(
+              <EmojiSelector
+                onReact={this.handleReact}
+                focused={emojiSelectorFocused}
+                onUnfocus={handleEmojiSelectorUnfocus}
+              />
+            )}
+          >
+            <IconButton
+              className={classNames({
+                'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
+                'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
+              })}
+              title={meEmojiTitle}
+              src={require('@tabler/icons/icons/heart.svg')}
+              iconClassName={classNames({
+                'fill-accent-300': Boolean(meEmojiReact),
+              })}
+              // emoji={meEmojiReact}
+              onClick={this.handleLikeButtonClick}
+            />
+          </Hoverable>
+
           {emojiReactCount !== 0 && (
             (features.exposableReactions && !features.emojiReacts) ? (
               <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`} className='pointer-events-none'>
@@ -696,7 +700,7 @@ class StatusActionBar extends ImmutablePureComponent {
               <span className='detailed-status__link'>{emojiReactCount}</span>
             )
           )}
-        </Hoverable>
+        </div>
 
         {shareButton}
 
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index d4006562e..aaa5b9349 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -38,7 +38,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
   return (
     <HStack
       space={2}
-      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md w-max')}
+      className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md z-[999] w-max')}
     >
       {emojis.map((emoji, i) => (
         <EmojiButton
diff --git a/app/soapbox/components/ui/hoverable/hoverable.tsx b/app/soapbox/components/ui/hoverable/hoverable.tsx
index cca3cd6df..c7d884dc7 100644
--- a/app/soapbox/components/ui/hoverable/hoverable.tsx
+++ b/app/soapbox/components/ui/hoverable/hoverable.tsx
@@ -1,5 +1,6 @@
-import Portal from '@reach/portal';
+import classNames from 'classnames';
 import React, { useState, useRef } from 'react';
+import { usePopper } from 'react-popper';
 
 interface IHoverable {
   component: React.Component,
@@ -12,7 +13,9 @@ const Hoverable: React.FC<IHoverable> = ({
 }): JSX.Element => {
 
   const [portalActive, setPortalActive] = useState(false);
+
   const ref = useRef<HTMLDivElement>(null);
+  const popperRef = useRef<HTMLDivElement>(null);
 
   const handleMouseEnter = () => {
     setPortalActive(true);
@@ -22,17 +25,18 @@ const Hoverable: React.FC<IHoverable> = ({
     setPortalActive(false);
   };
 
-  const setPortalPosition = (): React.CSSProperties => {
-    if (!ref.current) return {};
-
-    const { top, height, left, width } = ref.current.getBoundingClientRect();
-
-    return {
-      top: top + height,
-      left,
-      width,
-    };
-  };
+  const { styles, attributes } = usePopper(ref.current, popperRef.current, {
+    placement: 'top-start',
+    strategy: 'fixed',
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [-10, 0],
+        },
+      },
+    ],
+  });
 
   return (
     <div
@@ -41,7 +45,17 @@ const Hoverable: React.FC<IHoverable> = ({
       ref={ref}
     >
       {children}
-      {portalActive && <Portal><div className='fixed' style={setPortalPosition()}>{component}</div></Portal>}
+
+      <div
+        className={classNames('fixed z-50 transition-opacity duration-100', {
+          'opacity-0 pointer-events-none': !portalActive,
+        })}
+        ref={popperRef}
+        style={styles.popper}
+        {...attributes.popper}
+      >
+        {component}
+      </div>
     </div>
   );
 };

From 0f044ad8e85116bb431ffac1d2e6a5f72ead7a9d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 15:45:48 -0500
Subject: [PATCH 15/29] Create StatusActionButton component

---
 .../components/status-action-button.tsx       | 64 +++++++++++++++++++
 app/soapbox/components/status_action_bar.js   | 30 ++++-----
 .../components/ui/icon-button/icon-button.tsx |  2 +-
 3 files changed, 77 insertions(+), 19 deletions(-)
 create mode 100644 app/soapbox/components/status-action-button.tsx

diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
new file mode 100644
index 000000000..826df3f62
--- /dev/null
+++ b/app/soapbox/components/status-action-button.tsx
@@ -0,0 +1,64 @@
+import classNames from 'classnames';
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+import { IconButton, Text } from 'soapbox/components/ui';
+
+interface IStatusActionCounter {
+  count: number,
+  to?: string,
+}
+
+/** Action button numerical counter, eg "5" likes */
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to, count = 0 }): JSX.Element => {
+  const text = <Text size='xs' theme='muted'>{count}</Text>;
+  return to ? <Link to={to}>{text}</Link> : text;
+};
+
+interface IStatusActionButton {
+  icon: string,
+  onClick: () => void,
+  count: number,
+  active?: boolean,
+  title?: string,
+  to?: string,
+}
+
+/** Status action container element */
+const StatusAction: React.FC = ({ children }) => {
+  return (
+    <div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+      {children}
+    </div>
+  );
+};
+
+/** Action button (eg "Like") for a Status */
+const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, active = false, onClick, count = 0 }): JSX.Element => {
+
+  const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
+    onClick();
+    e.stopPropagation();
+    e.preventDefault();
+  };
+
+  return (
+    <StatusAction>
+      <IconButton
+        title={title}
+        src={icon}
+        onClick={handleClick}
+        className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
+          'text-success-600 hover:text-success-600': active,
+        })}
+      />
+
+      {count ? (
+        <StatusActionCounter to={to} count={count} />
+      ) : null}
+    </StatusAction>
+  );
+};
+
+export { StatusAction, StatusActionButton, StatusActionCounter };
+export default StatusActionButton;
diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 6f144953a..45331fb38 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -10,6 +10,7 @@ import { Link, withRouter } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import EmojiSelector from 'soapbox/components/emoji_selector';
+import { StatusAction, StatusActionButton } from 'soapbox/components/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { isStaff, isAdmin } from 'soapbox/utils/accounts';
@@ -643,25 +644,18 @@ class StatusActionBar extends ImmutablePureComponent {
 
     return (
       <div className='pt-4 flex flex-row space-x-2'>
-        <div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
-          <IconButton
-            title={replyTitle}
-            src={require('@tabler/icons/icons/message-circle.svg')}
-            onClick={this.handleReplyClick}
-            className='text-gray-400 hover:text-gray-600 dark:hover:text-white'
-          />
+        <StatusActionButton
+          title={replyTitle}
+          icon={require('@tabler/icons/icons/message-circle.svg')}
+          onClick={this.handleReplyClick}
+          to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`}
+          count={replyCount}
+        />
 
-          {replyCount !== 0 ? (
-            <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`}>
-              <Text size='xs' theme='muted'>{replyCount}</Text>
-            </Link>
-          ) : null}
-        </div>
-
-        <div className='flex items-center space-x-0.5 p-1 text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+        <StatusAction>
           {reblogButton}
           {reblogCount !== 0 && <Text size='xs' theme='muted' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</Text>}
-        </div>
+        </StatusAction>
 
         <div
           ref={this.setRef}
@@ -704,9 +698,9 @@ class StatusActionBar extends ImmutablePureComponent {
 
         {shareButton}
 
-        <div className='flex items-center space-x-0.5 p-1 text-gray-400 hover:text-gray-600 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+        <StatusAction>
           <DropdownMenuContainer items={menu} title={intl.formatMessage(messages.more)} status={status} src={require('@tabler/icons/icons/dots.svg')} direction='right' />
-        </div>
+        </StatusAction>
       </div>
     );
   }
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index 467c8e4cd..2d8c27b7f 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -10,7 +10,7 @@ interface IIconButton {
   iconClassName?: string,
   disabled?: boolean,
   src: string,
-  onClick?: () => void,
+  onClick?: React.EventHandler<React.MouseEvent>,
   text?: string,
   title?: string,
   transparent?: boolean

From 6cb04965a2b6f7b4f125a1f5a8b50ef98e4eab5c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 16:16:10 -0500
Subject: [PATCH 16/29] StatusActionBar: refactor buttons

---
 app/soapbox/components/status_action_bar.js   | 48 +++++++++----------
 .../{ => ui/status}/status-action-button.tsx  | 20 ++++++--
 2 files changed, 40 insertions(+), 28 deletions(-)
 rename app/soapbox/components/{ => ui/status}/status-action-button.tsx (81%)

diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index 45331fb38..e098713df 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -6,11 +6,15 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
-import { Link, withRouter } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import EmojiSelector from 'soapbox/components/emoji_selector';
-import { StatusAction, StatusActionButton } from 'soapbox/components/status-action-button';
+import {
+  StatusAction,
+  StatusActionButton,
+  StatusActionCounter,
+} from 'soapbox/components/ui/status/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { isStaff, isAdmin } from 'soapbox/utils/accounts';
@@ -20,7 +24,7 @@ import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 
 import { openModal } from '../actions/modals';
 
-import { IconButton, Text, Hoverable } from './ui';
+import { IconButton, Hoverable } from './ui';
 
 
 const messages = defineMessages({
@@ -345,11 +349,9 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onToggleStatusSensitivity(this.props.status);
   }
 
-  handleOpenReblogsModal = (event) => {
+  handleOpenReblogsModal = () => {
     const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
 
-    event.stopPropagation();
-
     if (!me) onOpenUnauthorizedModal();
     else onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id'));
   }
@@ -631,17 +633,6 @@ class StatusActionBar extends ImmutablePureComponent {
 
     const canShare = ('share' in navigator) && status.get('visibility') === 'public';
 
-    const shareButton = canShare && (
-      <div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
-        <IconButton
-          title={intl.formatMessage(messages.share)}
-          src={require('@tabler/icons/icons/upload.svg')}
-          onClick={this.handleShareClick}
-          className='text-gray-400 hover:text-gray-600 dark:hover:text-white'
-        />
-      </div>
-    );
-
     return (
       <div className='pt-4 flex flex-row space-x-2'>
         <StatusActionButton
@@ -654,7 +645,9 @@ class StatusActionBar extends ImmutablePureComponent {
 
         <StatusAction>
           {reblogButton}
-          {reblogCount !== 0 && <Text size='xs' theme='muted' role='presentation' onClick={this.handleOpenReblogsModal}>{reblogCount}</Text>}
+          {reblogCount > 0 && (
+            <StatusActionCounter onClick={this.handleOpenReblogsModal} count={reblogCount} />
+          )}
         </StatusAction>
 
         <div
@@ -685,18 +678,25 @@ class StatusActionBar extends ImmutablePureComponent {
             />
           </Hoverable>
 
-          {emojiReactCount !== 0 && (
+          {emojiReactCount > 0 && (
             (features.exposableReactions && !features.emojiReacts) ? (
-              <Link to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`} className='pointer-events-none'>
-                <Text size='xs' theme='muted'>{emojiReactCount}</Text>
-              </Link>
+              <StatusActionCounter
+                to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`}
+                count={emojiReactCount}
+              />
             ) : (
-              <span className='detailed-status__link'>{emojiReactCount}</span>
+              <StatusActionCounter count={emojiReactCount} />
             )
           )}
         </div>
 
-        {shareButton}
+        {canShare && (
+          <StatusActionButton
+            title={intl.formatMessage(messages.share)}
+            icon={require('@tabler/icons/icons/upload.svg')}
+            onClick={this.handleShareClick}
+          />
+        )}
 
         <StatusAction>
           <DropdownMenuContainer items={menu} title={intl.formatMessage(messages.more)} status={status} src={require('@tabler/icons/icons/dots.svg')} direction='right' />
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx
similarity index 81%
rename from app/soapbox/components/status-action-button.tsx
rename to app/soapbox/components/ui/status/status-action-button.tsx
index 826df3f62..79a7bedba 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/ui/status/status-action-button.tsx
@@ -6,13 +6,26 @@ import { IconButton, Text } from 'soapbox/components/ui';
 
 interface IStatusActionCounter {
   count: number,
+  onClick?: () => void,
   to?: string,
 }
 
 /** Action button numerical counter, eg "5" likes */
-const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to, count = 0 }): JSX.Element => {
-  const text = <Text size='xs' theme='muted'>{count}</Text>;
-  return to ? <Link to={to}>{text}</Link> : text;
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to = '#', onClick, count = 0 }): JSX.Element => {
+
+  const handleClick: React.EventHandler<React.MouseEvent> = e => {
+    if (onClick) {
+      onClick();
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  return (
+    <Link to={to} onClick={handleClick}>
+      <Text size='xs' theme='muted'>{count}</Text>
+    </Link>
+  );
 };
 
 interface IStatusActionButton {
@@ -61,4 +74,3 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
 };
 
 export { StatusAction, StatusActionButton, StatusActionCounter };
-export default StatusActionButton;

From 3fe21ce268e429138af9c1714b42ba87c8533f29 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 17:38:36 -0500
Subject: [PATCH 17/29] StatusActionBar: conditionally render dumb Like button

---
 app/soapbox/components/status_action_bar.js   | 87 ++++++++++---------
 .../ui/status/status-action-button.tsx        |  7 +-
 2 files changed, 54 insertions(+), 40 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.js
index e098713df..6f9dfe35d 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.js
@@ -167,8 +167,6 @@ class StatusActionBar extends ImmutablePureComponent {
   handleLikeButtonClick = e => {
     const { features } = this.props;
 
-    e.stopPropagation();
-
     const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
 
     if (features.emojiReacts && isUserTouching()) {
@@ -650,45 +648,56 @@ class StatusActionBar extends ImmutablePureComponent {
           )}
         </StatusAction>
 
-        <div
-          ref={this.setRef}
-          className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
-        >
-          <Hoverable
-            component={(
-              <EmojiSelector
-                onReact={this.handleReact}
-                focused={emojiSelectorFocused}
-                onUnfocus={handleEmojiSelectorUnfocus}
-              />
-            )}
+        {features.emojiReacts ? (
+          <div
+            ref={this.setRef}
+            className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
           >
-            <IconButton
-              className={classNames({
-                'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
-                'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
-              })}
-              title={meEmojiTitle}
-              src={require('@tabler/icons/icons/heart.svg')}
-              iconClassName={classNames({
-                'fill-accent-300': Boolean(meEmojiReact),
-              })}
-              // emoji={meEmojiReact}
-              onClick={this.handleLikeButtonClick}
-            />
-          </Hoverable>
-
-          {emojiReactCount > 0 && (
-            (features.exposableReactions && !features.emojiReacts) ? (
-              <StatusActionCounter
-                to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`}
-                count={emojiReactCount}
+            <Hoverable
+              component={(
+                <EmojiSelector
+                  onReact={this.handleReact}
+                  focused={emojiSelectorFocused}
+                  onUnfocus={handleEmojiSelectorUnfocus}
+                />
+              )}
+            >
+              <IconButton
+                className={classNames({
+                  'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
+                  'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
+                })}
+                title={meEmojiTitle}
+                src={require('@tabler/icons/icons/heart.svg')}
+                iconClassName={classNames({
+                  'fill-accent-300': Boolean(meEmojiReact),
+                })}
+                // emoji={meEmojiReact}
+                onClick={this.handleLikeButtonClick}
               />
-            ) : (
-              <StatusActionCounter count={emojiReactCount} />
-            )
-          )}
-        </div>
+            </Hoverable>
+
+            {emojiReactCount > 0 && (
+              (features.exposableReactions && !features.emojiReacts) ? (
+                <StatusActionCounter
+                  to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`}
+                  count={emojiReactCount}
+                />
+              ) : (
+                <StatusActionCounter count={emojiReactCount} />
+              )
+            )}
+          </div>
+        ): (
+          <StatusActionButton
+            title={intl.formatMessage(messages.favourite)}
+            icon={require('@tabler/icons/icons/heart.svg')}
+            onClick={this.handleLikeButtonClick}
+            active={Boolean(meEmojiReact)}
+            to={features.exposableReactions ? `/@${status.getIn(['account', 'acct'])}/posts/${status.id}/likes`: undefined}
+            count={favouriteCount}
+          />
+        )}
 
         {canShare && (
           <StatusActionButton
diff --git a/app/soapbox/components/ui/status/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx
index 79a7bedba..7244bafed 100644
--- a/app/soapbox/components/ui/status/status-action-button.tsx
+++ b/app/soapbox/components/ui/status/status-action-button.tsx
@@ -62,7 +62,12 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
         src={icon}
         onClick={handleClick}
         className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
-          'text-success-600 hover:text-success-600': active,
+          'text-accent-300 hover:text-accent-300': active,
+          // TODO: repost button
+          // 'text-success-600 hover:text-success-600': active,
+        })}
+        iconClassName={classNames({
+          'fill-accent-300': active,
         })}
       />
 

From c59ff4e822afe8a3d5d87f3afbd58684b563307d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 17:45:09 -0500
Subject: [PATCH 18/29] StatusActionCounter: use shortNumberFormat

---
 app/soapbox/components/ui/status/status-action-button.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/ui/status/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx
index 7244bafed..350e84851 100644
--- a/app/soapbox/components/ui/status/status-action-button.tsx
+++ b/app/soapbox/components/ui/status/status-action-button.tsx
@@ -3,6 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 
 import { IconButton, Text } from 'soapbox/components/ui';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IStatusActionCounter {
   count: number,
@@ -23,7 +24,7 @@ const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to = '#', onClick
 
   return (
     <Link to={to} onClick={handleClick}>
-      <Text size='xs' theme='muted'>{count}</Text>
+      <Text size='xs' theme='muted'>{shortNumberFormat(count)}</Text>
     </Link>
   );
 };

From 4a8f08e3131c86ca09239d12ae6a96106127aa5d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 18:39:27 -0500
Subject: [PATCH 19/29] StatusActionBar: convert to tsx

---
 ...us_action_bar.js => status_action_bar.tsx} | 285 ++++++++++--------
 .../ui/status/status-action-button.tsx        |   2 +-
 app/soapbox/reducers/statuses.ts              |   4 +-
 app/soapbox/types/soapbox.ts                  |   3 +
 app/soapbox/utils/accounts.ts                 |   6 +-
 .../{emoji_reacts.js => emoji_reacts.ts}      |  53 ++--
 6 files changed, 191 insertions(+), 162 deletions(-)
 rename app/soapbox/components/{status_action_bar.js => status_action_bar.tsx} (74%)
 rename app/soapbox/utils/{emoji_reacts.js => emoji_reacts.ts} (57%)

diff --git a/app/soapbox/components/status_action_bar.js b/app/soapbox/components/status_action_bar.tsx
similarity index 74%
rename from app/soapbox/components/status_action_bar.js
rename to app/soapbox/components/status_action_bar.tsx
index 6f9dfe35d..047544567 100644
--- a/app/soapbox/components/status_action_bar.js
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -1,10 +1,8 @@
 import classNames from 'classnames';
 import { List as ImmutableList } from 'immutable';
-import PropTypes from 'prop-types';
 import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, IntlShape } from 'react-intl';
 import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 
@@ -20,12 +18,16 @@ import { isUserTouching } from 'soapbox/is_mobile';
 import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
-import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
 
 import { openModal } from '../actions/modals';
 
 import { IconButton, Hoverable } from './ui';
 
+import type { History } from 'history';
+import type { AnyAction, Dispatch } from 'redux';
+import type { RootState } from 'soapbox/store';
+import type { Status } from 'soapbox/types/entities';
+import type { Features } from 'soapbox/utils/features';
 
 const messages = defineMessages({
   delete: { id: 'status.delete', defaultMessage: 'Delete' },
@@ -72,63 +74,70 @@ const messages = defineMessages({
   quotePost: { id: 'status.quote', defaultMessage: 'Quote post' },
 });
 
-class StatusActionBar extends ImmutablePureComponent {
+interface IStatusActionBar {
+  status: Status,
+  onOpenUnauthorizedModal: (modalType?: string) => void,
+  onOpenReblogsModal: (acct: string, statusId: string) => void,
+  onReply: (status: Status, history: History) => void,
+  onFavourite: (status: Status) => void,
+  onBookmark: (status: Status) => void,
+  onReblog: (status: Status, e: React.MouseEvent) => void,
+  onQuote: (status: Status, history: History) => void,
+  onDelete: (status: Status, history: History, redraft?: boolean) => void,
+  onDirect: (account: any, history: History) => void,
+  onChat: (account: any, history: History) => void,
+  onMention: (account: any, history: History) => void,
+  onMute: (account: any) => void,
+  onBlock: (status: Status) => void,
+  onReport: (status: Status) => void,
+  onEmbed: (status: Status) => void,
+  onDeactivateUser: (status: Status) => void,
+  onDeleteUser: (status: Status) => void,
+  onToggleStatusSensitivity: (status: Status) => void,
+  onDeleteStatus: (status: Status) => void,
+  onMuteConversation: (status: Status) => void,
+  onPin: (status: Status) => void,
+  withDismiss: boolean,
+  withGroupAdmin: boolean,
+  intl: IntlShape,
+  me: string | null | false | undefined,
+  isStaff: boolean,
+  isAdmin: boolean,
+  allowedEmoji: ImmutableList<string>,
+  emojiSelectorFocused: boolean,
+  handleEmojiSelectorUnfocus: () => void,
+  features: Features,
+  history: History,
+  dispatch: Dispatch,
+}
 
-  static propTypes = {
-    status: ImmutablePropTypes.record.isRequired,
-    onOpenUnauthorizedModal: PropTypes.func.isRequired,
-    onOpenReblogsModal: PropTypes.func.isRequired,
-    onReply: PropTypes.func,
-    onFavourite: PropTypes.func,
-    onBookmark: PropTypes.func,
-    onReblog: PropTypes.func,
-    onQuote: PropTypes.func,
-    onDelete: PropTypes.func,
-    onDirect: PropTypes.func,
-    onChat: PropTypes.func,
-    onMention: PropTypes.func,
-    onMute: PropTypes.func,
-    onBlock: PropTypes.func,
-    onReport: PropTypes.func,
-    onEmbed: PropTypes.func,
-    onDeactivateUser: PropTypes.func,
-    onDeleteUser: PropTypes.func,
-    onToggleStatusSensitivity: PropTypes.func,
-    onDeleteStatus: PropTypes.func,
-    onMuteConversation: PropTypes.func,
-    onPin: PropTypes.func,
-    withDismiss: PropTypes.bool,
-    withGroupAdmin: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    me: SoapboxPropTypes.me,
-    isStaff: PropTypes.bool.isRequired,
-    isAdmin: PropTypes.bool.isRequired,
-    allowedEmoji: ImmutablePropTypes.list,
-    emojiSelectorFocused: PropTypes.bool,
-    handleEmojiSelectorUnfocus: PropTypes.func.isRequired,
-    features: PropTypes.object.isRequired,
-    history: PropTypes.object,
-  };
+interface IStatusActionBarState {
+  emojiSelectorVisible: boolean,
+}
 
-  static defaultProps = {
+class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusActionBarState> {
+
+  static defaultProps: Partial<IStatusActionBar> = {
     isStaff: false,
   }
 
+  node?: HTMLDivElement = undefined;
+
   state = {
     emojiSelectorVisible: false,
   }
 
   // Avoid checking props that are functions (and whose equality will always
   // evaluate to false. See react-immutable-pure-component for usage.
+  // @ts-ignore: the type checker is wrong.
   updateOnProps = [
     'status',
     'withDismiss',
     'emojiSelectorFocused',
   ]
 
-  handleReplyClick = (event) => {
+  handleReplyClick = () => {
     const { me, onReply, onOpenUnauthorizedModal, status } = this.props;
-    event.stopPropagation();
 
     if (me) {
       onReply(status, this.props.history);
@@ -137,9 +146,7 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleShareClick = (e) => {
-    e.stopPropagation();
-
+  handleShareClick = () => {
     navigator.share({
       text: this.props.status.get('search_index'),
       url: this.props.status.get('url'),
@@ -148,7 +155,7 @@ class StatusActionBar extends ImmutablePureComponent {
     });
   }
 
-  handleLikeButtonHover = e => {
+  handleLikeButtonHover: React.EventHandler<React.MouseEvent> = () => {
     const { features } = this.props;
 
     if (features.emojiReacts && !isUserTouching()) {
@@ -156,7 +163,7 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleLikeButtonLeave = e => {
+  handleLikeButtonLeave: React.EventHandler<React.MouseEvent> = () => {
     const { features } = this.props;
 
     if (features.emojiReacts && !isUserTouching()) {
@@ -164,10 +171,11 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleLikeButtonClick = e => {
+  handleLikeButtonClick = () => {
     const { features } = this.props;
 
-    const meEmojiReact = getReactForStatus(this.props.status, this.props.allowedEmoji) || '👍';
+    const reactForStatus = getReactForStatus(this.props.status, this.props.allowedEmoji);
+    const meEmojiReact = typeof reactForStatus === 'string' ? reactForStatus : '👍';
 
     if (features.emojiReacts && isUserTouching()) {
       if (this.state.emojiSelectorVisible) {
@@ -180,23 +188,23 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleReact = emoji => {
+  handleReact = (emoji: string): void => {
     const { me, dispatch, onOpenUnauthorizedModal, status } = this.props;
     if (me) {
-      dispatch(simpleEmojiReact(status, emoji));
+      dispatch(simpleEmojiReact(status, emoji) as any);
     } else {
       onOpenUnauthorizedModal('FAVOURITE');
     }
     this.setState({ emojiSelectorVisible: false });
   }
 
-  handleReactClick = emoji => {
-    return e => {
+  handleReactClick = (emoji: string): React.EventHandler<React.MouseEvent> => {
+    return () => {
       this.handleReact(emoji);
     };
   }
 
-  handleFavouriteClick = () => {
+  handleFavouriteClick: React.EventHandler<React.MouseEvent> = () => {
     const { me, onFavourite, onOpenUnauthorizedModal, status } = this.props;
     if (me) {
       onFavourite(status);
@@ -205,12 +213,12 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleBookmarkClick = (e) => {
+  handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onBookmark(this.props.status);
   }
 
-  handleReblogClick = e => {
+  handleReblogClick: React.EventHandler<React.MouseEvent> = e => {
     const { me, onReblog, onOpenUnauthorizedModal, status } = this.props;
     e.stopPropagation();
 
@@ -221,7 +229,7 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleQuoteClick = (e) => {
+  handleQuoteClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     const { me, onQuote, onOpenUnauthorizedModal, status } = this.props;
     if (me) {
@@ -231,47 +239,47 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleDeleteClick = (e) => {
+  handleDeleteClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onDelete(this.props.status, this.props.history);
   }
 
-  handleRedraftClick = (e) => {
+  handleRedraftClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onDelete(this.props.status, this.props.history, true);
   }
 
-  handlePinClick = (e) => {
+  handlePinClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onPin(this.props.status);
   }
 
-  handleMentionClick = (e) => {
+  handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onMention(this.props.status.get('account'), this.props.history);
   }
 
-  handleDirectClick = (e) => {
+  handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onDirect(this.props.status.get('account'), this.props.history);
   }
 
-  handleChatClick = (e) => {
+  handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onChat(this.props.status.get('account'), this.props.history);
   }
 
-  handleMuteClick = (e) => {
+  handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onMute(this.props.status.get('account'));
   }
 
-  handleBlockClick = (e) => {
+  handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onBlock(this.props.status);
   }
 
-  handleOpen = (e) => {
+  handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
   }
@@ -280,17 +288,17 @@ class StatusActionBar extends ImmutablePureComponent {
     this.props.onEmbed(this.props.status);
   }
 
-  handleReport = (e) => {
+  handleReport: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onReport(this.props.status);
   }
 
-  handleConversationMuteClick = (e) => {
+  handleConversationMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onMuteConversation(this.props.status);
   }
 
-  handleCopy = (e) => {
+  handleCopy: React.EventHandler<React.MouseEvent> = (e) => {
     const url      = this.props.status.get('url');
     const textarea = document.createElement('textarea');
 
@@ -311,38 +319,38 @@ class StatusActionBar extends ImmutablePureComponent {
     }
   }
 
-  handleGroupRemoveAccount = (e) => {
-    const { status } = this.props;
+  // handleGroupRemoveAccount: React.EventHandler<React.MouseEvent> = (e) => {
+  //   const { status } = this.props;
+  //
+  //   e.stopPropagation();
+  //
+  //   this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
+  // }
+  //
+  // handleGroupRemovePost: React.EventHandler<React.MouseEvent> = (e) => {
+  //   const { status } = this.props;
+  //
+  //   e.stopPropagation();
+  //
+  //   this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
+  // }
 
-    e.stopPropagation();
-
-    this.props.onGroupRemoveAccount(status.getIn(['group', 'id']), status.getIn(['account', 'id']));
-  }
-
-  handleGroupRemovePost = (e) => {
-    const { status } = this.props;
-
-    e.stopPropagation();
-
-    this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
-  }
-
-  handleDeactivateUser = (e) => {
+  handleDeactivateUser: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onDeactivateUser(this.props.status);
   }
 
-  handleDeleteUser = (e) => {
+  handleDeleteUser: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onDeleteUser(this.props.status);
   }
 
-  handleDeleteStatus = (e) => {
+  handleDeleteStatus: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onDeleteStatus(this.props.status);
   }
 
-  handleToggleStatusSensitivity = (e) => {
+  handleToggleStatusSensitivity: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
     this.props.onToggleStatusSensitivity(this.props.status);
   }
@@ -351,13 +359,14 @@ class StatusActionBar extends ImmutablePureComponent {
     const { me, status, onOpenUnauthorizedModal, onOpenReblogsModal } = this.props;
 
     if (!me) onOpenUnauthorizedModal();
-    else onOpenReblogsModal(status.getIn(['account', 'acct']), status.get('id'));
+    else onOpenReblogsModal(String(status.getIn(['account', 'acct'])), status.id);
   }
 
-  _makeMenu = (publicStatus) => {
-    const { status, intl, withDismiss, withGroupAdmin, me, features, isStaff, isAdmin } = this.props;
+  _makeMenu = (publicStatus: boolean) => {
+    const { status, intl, withDismiss, me, features, isStaff, isAdmin } = this.props;
     const mutingConversation = status.get('muted');
     const ownAccount = status.getIn(['account', 'id']) === me;
+    const username = String(status.getIn(['account', 'username']));
 
     const menu = [];
 
@@ -434,20 +443,20 @@ class StatusActionBar extends ImmutablePureComponent {
       });
     } else {
       menu.push({
-        text: intl.formatMessage(messages.mention, { name: status.getIn(['account', 'username']) }),
+        text: intl.formatMessage(messages.mention, { name: username }),
         action: this.handleMentionClick,
         icon: require('@tabler/icons/icons/at.svg'),
       });
 
       // if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
       //   menu.push({
-      //     text: intl.formatMessage(messages.chat, { name: status.getIn(['account', 'username']) }),
+      //     text: intl.formatMessage(messages.chat, { name: username }),
       //     action: this.handleChatClick,
       //     icon: require('@tabler/icons/icons/messages.svg'),
       //   });
       // } else {
       //   menu.push({
-      //     text: intl.formatMessage(messages.direct, { name: status.getIn(['account', 'username']) }),
+      //     text: intl.formatMessage(messages.direct, { name: username }),
       //     action: this.handleDirectClick,
       //     icon: require('@tabler/icons/icons/mail.svg'),
       //   });
@@ -455,17 +464,17 @@ class StatusActionBar extends ImmutablePureComponent {
 
       menu.push(null);
       menu.push({
-        text: intl.formatMessage(messages.mute, { name: status.getIn(['account', 'username']) }),
+        text: intl.formatMessage(messages.mute, { name: username }),
         action: this.handleMuteClick,
         icon: require('@tabler/icons/icons/circle-x.svg'),
       });
       menu.push({
-        text: intl.formatMessage(messages.block, { name: status.getIn(['account', 'username']) }),
+        text: intl.formatMessage(messages.block, { name: username }),
         action: this.handleBlockClick,
         icon: require('@tabler/icons/icons/ban.svg'),
       });
       menu.push({
-        text: intl.formatMessage(messages.report, { name: status.getIn(['account', 'username']) }),
+        text: intl.formatMessage(messages.report, { name: username }),
         action: this.handleReport,
         icon: require('@tabler/icons/icons/flag.svg'),
       });
@@ -476,16 +485,16 @@ class StatusActionBar extends ImmutablePureComponent {
 
       if (isAdmin) {
         menu.push({
-          text: intl.formatMessage(messages.admin_account, { name: status.getIn(['account', 'username']) }),
+          text: intl.formatMessage(messages.admin_account, { name: username }),
           href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
           icon: require('@tabler/icons/icons/gavel.svg'),
-          action: (event) => event.stopPropagation(),
+          action: (event: Event) => event.stopPropagation(),
         });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
           icon: require('@tabler/icons/icons/pencil.svg'),
-          action: (event) => event.stopPropagation(),
+          action: (event: Event) => event.stopPropagation(),
         });
       }
 
@@ -497,12 +506,12 @@ class StatusActionBar extends ImmutablePureComponent {
 
       if (!ownAccount) {
         menu.push({
-          text: intl.formatMessage(messages.deactivateUser, { name: status.getIn(['account', 'username']) }),
+          text: intl.formatMessage(messages.deactivateUser, { name: username }),
           action: this.handleDeactivateUser,
           icon: require('@tabler/icons/icons/user-off.svg'),
         });
         menu.push({
-          text: intl.formatMessage(messages.deleteUser, { name: status.getIn(['account', 'username']) }),
+          text: intl.formatMessage(messages.deleteUser, { name: username }),
           action: this.handleDeleteUser,
           icon: require('@tabler/icons/icons/user-minus.svg'),
           destructive: true,
@@ -516,32 +525,32 @@ class StatusActionBar extends ImmutablePureComponent {
       }
     }
 
-    if (!ownAccount && withGroupAdmin) {
-      menu.push(null);
-      menu.push({
-        text: intl.formatMessage(messages.group_remove_account),
-        action: this.handleGroupRemoveAccount,
-        icon: require('@tabler/icons/icons/user-x.svg'),
-        destructive: true,
-      });
-      menu.push({
-        text: intl.formatMessage(messages.group_remove_post),
-        action: this.handleGroupRemovePost,
-        icon: require('@tabler/icons/icons/trash.svg'),
-        destructive: true,
-      });
-    }
+    // if (!ownAccount && withGroupAdmin) {
+    //   menu.push(null);
+    //   menu.push({
+    //     text: intl.formatMessage(messages.group_remove_account),
+    //     action: this.handleGroupRemoveAccount,
+    //     icon: require('@tabler/icons/icons/user-x.svg'),
+    //     destructive: true,
+    //   });
+    //   menu.push({
+    //     text: intl.formatMessage(messages.group_remove_post),
+    //     action: this.handleGroupRemovePost,
+    //     icon: require('@tabler/icons/icons/trash.svg'),
+    //     destructive: true,
+    //   });
+    // }
 
     return menu;
   }
 
-  setRef = c => {
+  setRef = (c: HTMLDivElement) => {
     this.node = c;
   }
 
   componentDidMount() {
-    document.addEventListener('click', e => {
-      if (this.node && !this.node.contains(e.target))
+    document.addEventListener('click', (e) => {
+      if (this.node && !this.node.contains(e.target as Node))
         this.setState({ emojiSelectorVisible: false });
     });
   }
@@ -555,9 +564,9 @@ class StatusActionBar extends ImmutablePureComponent {
     const reblogCount = status.get('reblogs_count');
     const favouriteCount = status.get('favourites_count');
     const emojiReactCount = reduceEmoji(
-      status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()),
+      (status.getIn(['pleroma', 'emoji_reactions']) || ImmutableList()) as ImmutableList<any>,
       favouriteCount,
-      status.get('favourited'),
+      status.favourited,
       allowedEmoji,
     ).reduce((acc, cur) => acc + cur.get('count'), 0);
     const meEmojiReact = getReactForStatus(status, allowedEmoji);
@@ -599,6 +608,7 @@ class StatusActionBar extends ImmutablePureComponent {
       reblogButton = (
         <DropdownMenuContainer
           items={reblogMenu}
+          // @ts-ignore
           disabled={!publicStatus}
           active={status.get('reblogged')}
           pressed={status.get('reblogged')}
@@ -659,7 +669,7 @@ class StatusActionBar extends ImmutablePureComponent {
                   onReact={this.handleReact}
                   focused={emojiSelectorFocused}
                   onUnfocus={handleEmojiSelectorUnfocus}
-                />
+                /> as any
               )}
             >
               <IconButton
@@ -708,7 +718,14 @@ class StatusActionBar extends ImmutablePureComponent {
         )}
 
         <StatusAction>
-          <DropdownMenuContainer items={menu} title={intl.formatMessage(messages.more)} status={status} src={require('@tabler/icons/icons/dots.svg')} direction='right' />
+          <DropdownMenuContainer
+            items={menu}
+            // @ts-ignore
+            title={intl.formatMessage(messages.more)}
+            status={status}
+            src={require('@tabler/icons/icons/dots.svg')}
+            direction='right'
+          />
         </StatusAction>
       </div>
     );
@@ -716,10 +733,9 @@ class StatusActionBar extends ImmutablePureComponent {
 
 }
 
-const mapStateToProps = state => {
-  const me = state.get('me');
-  const account = state.getIn(['accounts', me]);
-  const instance = state.get('instance');
+const mapStateToProps = (state: RootState) => {
+  const { me, instance } = state;
+  const account = state.accounts.get(me);
 
   return {
     me,
@@ -729,15 +745,15 @@ const mapStateToProps = state => {
   };
 };
 
-const mapDispatchToProps = (dispatch, { status }) => ({
+const mapDispatchToProps = (dispatch: Dispatch, { status }: { status: Status}) => ({
   dispatch,
-  onOpenUnauthorizedModal(action) {
+  onOpenUnauthorizedModal(action: AnyAction) {
     dispatch(openModal('UNAUTHORIZED', {
       action,
-      ap_id: status.get('url'),
+      ap_id: status.url,
     }));
   },
-  onOpenReblogsModal(username, statusId) {
+  onOpenReblogsModal(username: string, statusId: string) {
     dispatch(openModal('REBLOGS', {
       username,
       statusId,
@@ -745,6 +761,9 @@ const mapDispatchToProps = (dispatch, { status }) => ({
   },
 });
 
+// @ts-ignore
 export default withRouter(injectIntl(
+  // @ts-ignore
   connect(mapStateToProps, mapDispatchToProps, null, { forwardRef: true },
+  // @ts-ignore
   )(StatusActionBar)));
diff --git a/app/soapbox/components/ui/status/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx
index 350e84851..210829a97 100644
--- a/app/soapbox/components/ui/status/status-action-button.tsx
+++ b/app/soapbox/components/ui/status/status-action-button.tsx
@@ -32,7 +32,7 @@ const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to = '#', onClick
 interface IStatusActionButton {
   icon: string,
   onClick: () => void,
-  count: number,
+  count?: number,
   active?: boolean,
   title?: string,
   to?: string,
diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index 869b9de61..cd3316a16 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -211,13 +211,13 @@ export default function statuses(state = initialState, action: AnyAction): State
     return state
       .updateIn(
         [action.status.get('id'), 'pleroma', 'emoji_reactions'],
-        emojiReacts => simulateEmojiReact(emojiReacts, action.emoji),
+        emojiReacts => simulateEmojiReact(emojiReacts as any, action.emoji),
       );
   case UNEMOJI_REACT_REQUEST:
     return state
       .updateIn(
         [action.status.get('id'), 'pleroma', 'emoji_reactions'],
-        emojiReacts => simulateUnEmojiReact(emojiReacts, action.emoji),
+        emojiReacts => simulateUnEmojiReact(emojiReacts as any, action.emoji),
       );
   case FAVOURITE_FAIL:
     return state.get(action.status.get('id')) === undefined ? state : state.setIn([action.status.get('id'), 'favourited'], false);
diff --git a/app/soapbox/types/soapbox.ts b/app/soapbox/types/soapbox.ts
index 386734d3b..32c2f681c 100644
--- a/app/soapbox/types/soapbox.ts
+++ b/app/soapbox/types/soapbox.ts
@@ -5,12 +5,15 @@ import {
   SoapboxConfigRecord,
 } from 'soapbox/normalizers/soapbox/soapbox_config';
 
+type Me = string | null | false | undefined;
+
 type PromoPanelItem = ReturnType<typeof PromoPanelItemRecord>;
 type FooterItem = ReturnType<typeof FooterItemRecord>;
 type CryptoAddress = ReturnType<typeof CryptoAddressRecord>;
 type SoapboxConfig = ReturnType<typeof SoapboxConfigRecord>;
 
 export {
+  Me,
   PromoPanelItem,
   FooterItem,
   CryptoAddress,
diff --git a/app/soapbox/utils/accounts.ts b/app/soapbox/utils/accounts.ts
index 3536cc966..aec0159e7 100644
--- a/app/soapbox/utils/accounts.ts
+++ b/app/soapbox/utils/accounts.ts
@@ -29,15 +29,15 @@ export const getAcct = (account: Account, displayFqn: boolean): string => (
   displayFqn === true ? account.fqn : account.acct
 );
 
-export const isStaff = (account: ImmutableMap<any, any> = ImmutableMap()): boolean => (
+export const isStaff = (account: Account): boolean => (
   [isAdmin, isModerator].some(f => f(account) === true)
 );
 
-export const isAdmin = (account: ImmutableMap<string, any>): boolean => (
+export const isAdmin = (account: Account): boolean => (
   account.getIn(['pleroma', 'is_admin']) === true
 );
 
-export const isModerator = (account: ImmutableMap<string, any>): boolean => (
+export const isModerator = (account: Account): boolean => (
   account.getIn(['pleroma', 'is_moderator']) === true
 );
 
diff --git a/app/soapbox/utils/emoji_reacts.js b/app/soapbox/utils/emoji_reacts.ts
similarity index 57%
rename from app/soapbox/utils/emoji_reacts.js
rename to app/soapbox/utils/emoji_reacts.ts
index 788c9c867..3b3fc05d9 100644
--- a/app/soapbox/utils/emoji_reacts.js
+++ b/app/soapbox/utils/emoji_reacts.ts
@@ -3,31 +3,36 @@ import {
   List as ImmutableList,
 } from 'immutable';
 
+import type { Me } from 'soapbox/types/soapbox';
+
 // https://emojipedia.org/facebook
 // I've customized them.
-export const ALLOWED_EMOJI = [
+export const ALLOWED_EMOJI = ImmutableList([
   '👍',
   '❤️',
   '😆',
   '😮',
   '😢',
   '😩',
-];
+]);
 
-export const sortEmoji = emojiReacts => (
+type Account = ImmutableMap<string, any>;
+type EmojiReact = ImmutableMap<string, any>;
+
+export const sortEmoji = (emojiReacts: ImmutableList<EmojiReact>): ImmutableList<EmojiReact> => (
   emojiReacts.sortBy(emojiReact => -emojiReact.get('count'))
 );
 
-export const mergeEmoji = emojiReacts => (
+export const mergeEmoji = (emojiReacts: ImmutableList<EmojiReact>): ImmutableList<EmojiReact> => (
   emojiReacts // TODO: Merge similar emoji
 );
 
-export const mergeEmojiFavourites = (emojiReacts = ImmutableList(), favouritesCount, favourited) => {
+export const mergeEmojiFavourites = (emojiReacts = ImmutableList<EmojiReact>(), favouritesCount: number, favourited: boolean) => {
   if (!favouritesCount) return emojiReacts;
   const likeIndex = emojiReacts.findIndex(emojiReact => emojiReact.get('name') === '👍');
   if (likeIndex > -1) {
-    const likeCount = emojiReacts.getIn([likeIndex, 'count']);
-    favourited = favourited || emojiReacts.getIn([likeIndex, 'me'], false);
+    const likeCount = Number(emojiReacts.getIn([likeIndex, 'count']));
+    favourited = favourited || Boolean(emojiReacts.getIn([likeIndex, 'me'], false));
     return emojiReacts
       .setIn([likeIndex, 'count'], likeCount + favouritesCount)
       .setIn([likeIndex, 'me'], favourited);
@@ -36,24 +41,24 @@ export const mergeEmojiFavourites = (emojiReacts = ImmutableList(), favouritesCo
   }
 };
 
-const hasMultiReactions = (emojiReacts, account) => (
+const hasMultiReactions = (emojiReacts: ImmutableList<EmojiReact>, account: Account): boolean => (
   emojiReacts.filter(
     e => e.get('accounts').filter(
-      a => a.get('id') === account.get('id'),
+      (a: Account) => a.get('id') === account.get('id'),
     ).count() > 0,
   ).count() > 1
 );
 
-const inAccounts = (accounts, id) => (
+const inAccounts = (accounts: ImmutableList<Account>, id: string): boolean => (
   accounts.filter(a => a.get('id') === id).count() > 0
 );
 
-export const oneEmojiPerAccount = (emojiReacts, me) => {
+export const oneEmojiPerAccount = (emojiReacts: ImmutableList<EmojiReact>, me: Me) => {
   emojiReacts = emojiReacts.reverse();
 
   return emojiReacts.reduce((acc, cur, idx) => {
     const accounts = cur.get('accounts', ImmutableList())
-      .filter(a => !hasMultiReactions(acc, a));
+      .filter((a: Account) => !hasMultiReactions(acc, a));
 
     return acc.set(idx, cur.merge({
       accounts: accounts,
@@ -65,30 +70,31 @@ export const oneEmojiPerAccount = (emojiReacts, me) => {
     .reverse();
 };
 
-export const filterEmoji = (emojiReacts, allowedEmoji=ALLOWED_EMOJI) => (
+export const filterEmoji = (emojiReacts: ImmutableList<EmojiReact>, allowedEmoji=ALLOWED_EMOJI): ImmutableList<EmojiReact> => (
   emojiReacts.filter(emojiReact => (
     allowedEmoji.includes(emojiReact.get('name'))
   )));
 
-export const reduceEmoji = (emojiReacts, favouritesCount, favourited, allowedEmoji=ALLOWED_EMOJI) => (
+export const reduceEmoji = (emojiReacts: ImmutableList<EmojiReact>, favouritesCount: number, favourited: boolean, allowedEmoji=ALLOWED_EMOJI): ImmutableList<EmojiReact> => (
   filterEmoji(sortEmoji(mergeEmoji(mergeEmojiFavourites(
     emojiReacts, favouritesCount, favourited,
   ))), allowedEmoji));
 
-export const getReactForStatus = (status, allowedEmoji=ALLOWED_EMOJI) => {
-  return reduceEmoji(
+export const getReactForStatus = (status: any, allowedEmoji=ALLOWED_EMOJI): string => {
+  return String(reduceEmoji(
     status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()),
     status.get('favourites_count', 0),
     status.get('favourited'),
     allowedEmoji,
   ).filter(e => e.get('me') === true)
-    .getIn([0, 'name']);
+    .getIn([0, 'name'], ''));
 };
 
-export const simulateEmojiReact = (emojiReacts, emoji) => {
+export const simulateEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji: string) => {
   const idx = emojiReacts.findIndex(e => e.get('name') === emoji);
-  if (idx > -1) {
-    const emojiReact = emojiReacts.get(idx);
+  const emojiReact = emojiReacts.get(idx);
+
+  if (emojiReact) {
     return emojiReacts.set(idx, emojiReact.merge({
       count: emojiReact.get('count') + 1,
       me: true,
@@ -102,12 +108,13 @@ export const simulateEmojiReact = (emojiReacts, emoji) => {
   }
 };
 
-export const simulateUnEmojiReact = (emojiReacts, emoji) => {
+export const simulateUnEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji: string) => {
   const idx = emojiReacts.findIndex(e =>
     e.get('name') === emoji && e.get('me') === true);
 
-  if (idx > -1) {
-    const emojiReact = emojiReacts.get(idx);
+  const emojiReact = emojiReacts.get(idx);
+
+  if (emojiReact) {
     const newCount = emojiReact.get('count') - 1;
     if (newCount < 1) return emojiReacts.delete(idx);
     return emojiReacts.set(idx, emojiReact.merge({

From 1e3c6d943058d6cb1cf7e28c24771404b5c9b278 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 19:35:57 -0500
Subject: [PATCH 20/29] Remove staff util functions, normalize account staff
 fields

---
 .../__snapshots__/emoji_selector-test.js.snap | 106 +++++++++--------
 app/soapbox/components/profile_hover_card.js  |   5 +-
 app/soapbox/components/sidebar-navigation.tsx |   2 +-
 app/soapbox/components/sidebar_menu.js        |   5 +-
 app/soapbox/components/status_action_bar.tsx  |   5 +-
 app/soapbox/components/thumb_navigation.tsx   |   4 +-
 .../features/account/components/header.js     |  18 ++-
 .../containers/header_container.js            |   3 +-
 app/soapbox/features/admin/index.js           |   5 +-
 .../features/status/components/action_bar.js  |   5 +-
 .../components/instance_moderation_panel.js   |   9 +-
 .../ui/components/profile-dropdown.tsx        |   5 +-
 .../ui/components/profile_info_panel.js       |  10 +-
 app/soapbox/features/ui/index.js              |   5 +-
 .../features/ui/util/react_router_helpers.js  |   5 +-
 .../normalizers/__tests__/account-test.js     |   9 ++
 app/soapbox/normalizers/account.ts            |  16 +++
 app/soapbox/pages/remote_instance_page.js     |   7 +-
 app/soapbox/utils/__tests__/accounts-test.js  | 109 +++---------------
 app/soapbox/utils/accounts.ts                 |  14 +--
 20 files changed, 135 insertions(+), 212 deletions(-)

diff --git a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
index 154cc5603..f5ca74772 100644
--- a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
+++ b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap
@@ -2,81 +2,85 @@
 
 exports[`<EmojiSelector /> renders correctly 1`] = `
 <div
-  className="emoji-react-selector-container"
   onBlur={[Function]}
   onFocus={[Function]}
   tabIndex="-1"
 >
   <div
-    className="emoji-react-selector w-max"
-    onBlur={[Function]}
+    className="flex space-x-2 bg-white dark:bg-slate-900 p-3 rounded-full shadow-md z-[999] w-max"
   >
     <button
-      className="emoji-react-selector__emoji"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/packs/emoji/1f44d.svg\\" />",
-        }
-      }
+      className=""
       onClick={[Function]}
-      onKeyDown={[Function]}
       tabIndex={-1}
-    />
+    >
+      <img
+        alt="👍"
+        className="w-8 h-8 duration-100 hover:scale-125"
+        draggable="false"
+        src="/packs/emoji/1f44d.svg"
+      />
+    </button>
     <button
-      className="emoji-react-selector__emoji"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/packs/emoji/2764.svg\\" />",
-        }
-      }
+      className=""
       onClick={[Function]}
-      onKeyDown={[Function]}
       tabIndex={-1}
-    />
+    >
+      <img
+        alt="❤"
+        className="w-8 h-8 duration-100 hover:scale-125"
+        draggable="false"
+        src="/packs/emoji/2764.svg"
+      />
+    </button>
     <button
-      className="emoji-react-selector__emoji"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/packs/emoji/1f606.svg\\" />",
-        }
-      }
+      className=""
       onClick={[Function]}
-      onKeyDown={[Function]}
       tabIndex={-1}
-    />
+    >
+      <img
+        alt="😆"
+        className="w-8 h-8 duration-100 hover:scale-125"
+        draggable="false"
+        src="/packs/emoji/1f606.svg"
+      />
+    </button>
     <button
-      className="emoji-react-selector__emoji"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/packs/emoji/1f62e.svg\\" />",
-        }
-      }
+      className=""
       onClick={[Function]}
-      onKeyDown={[Function]}
       tabIndex={-1}
-    />
+    >
+      <img
+        alt="😮"
+        className="w-8 h-8 duration-100 hover:scale-125"
+        draggable="false"
+        src="/packs/emoji/1f62e.svg"
+      />
+    </button>
     <button
-      className="emoji-react-selector__emoji"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/packs/emoji/1f622.svg\\" />",
-        }
-      }
+      className=""
       onClick={[Function]}
-      onKeyDown={[Function]}
       tabIndex={-1}
-    />
+    >
+      <img
+        alt="😢"
+        className="w-8 h-8 duration-100 hover:scale-125"
+        draggable="false"
+        src="/packs/emoji/1f622.svg"
+      />
+    </button>
     <button
-      className="emoji-react-selector__emoji"
-      dangerouslySetInnerHTML={
-        Object {
-          "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/packs/emoji/1f629.svg\\" />",
-        }
-      }
+      className=""
       onClick={[Function]}
-      onKeyDown={[Function]}
       tabIndex={-1}
-    />
+    >
+      <img
+        alt="😩"
+        className="w-8 h-8 duration-100 hover:scale-125"
+        draggable="false"
+        src="/packs/emoji/1f629.svg"
+      />
+    </button>
   </div>
 </div>
 `;
diff --git a/app/soapbox/components/profile_hover_card.js b/app/soapbox/components/profile_hover_card.js
index a1da1e435..c435261a4 100644
--- a/app/soapbox/components/profile_hover_card.js
+++ b/app/soapbox/components/profile_hover_card.js
@@ -17,7 +17,6 @@ import ActionButton from 'soapbox/features/ui/components/action_button';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { UserPanel } from 'soapbox/features/ui/util/async-components';
 import { makeGetAccount } from 'soapbox/selectors';
-import { isAdmin, isModerator } from 'soapbox/utils/accounts';
 
 import { showProfileHoverCard } from './hover_ref_wrapper';
 import { Card, CardBody, Stack, Text } from './ui';
@@ -27,9 +26,9 @@ const getAccount = makeGetAccount();
 const getBadges = (account) => {
   const badges = [];
 
-  if (isAdmin(account)) {
+  if (account.admin) {
     badges.push(<Badge key='admin' slug='admin' title='Admin' />);
-  } else if (isModerator(account)) {
+  } else if (account.moderator) {
     badges.push(<Badge key='moderator' slug='moderator' title='Moderator' />);
   }
 
diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index 4b34161df..3d069d10e 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -70,7 +70,7 @@ const SidebarNavigation = () => {
           )
         )}
 
-        {/* {(account && isStaff(account)) && (
+        {/* {(account && account.staff) && (
           <SidebarNavigationLink
             to='/admin'
             icon={location.pathname.startsWith('/admin') ? require('icons/dashboard-filled.svg') : require('@tabler/icons/icons/dashboard.svg')}
diff --git a/app/soapbox/components/sidebar_menu.js b/app/soapbox/components/sidebar_menu.js
index 4a3f96a77..bba7d06ce 100644
--- a/app/soapbox/components/sidebar_menu.js
+++ b/app/soapbox/components/sidebar_menu.js
@@ -15,7 +15,6 @@ import { getFeatures } from 'soapbox/utils/features';
 
 import { closeSidebar } from '../actions/sidebar';
 import { makeGetAccount, makeGetOtherAccounts } from '../selectors';
-import { isAdmin, isStaff } from '../utils/accounts';
 
 import { HStack, Icon, IconButton, Text } from './ui';
 
@@ -155,7 +154,7 @@ const SidebarMenu = () => {
                   <Account account={account} showProfileHoverCard={false} />
                 </Link>
 
-                {isStaff(account) && (
+                {account.staff && (
                   <Stack>
                     <button type='button' onClick={handleSwitcherClick} className='py-1'>
                       <HStack alignItems='center' justifyContent='between'>
@@ -232,7 +231,7 @@ const SidebarMenu = () => {
                   />
                 )}
 
-                {isAdmin(account) && (
+                {account.admin && (
                   <SidebarLink
                     to='/soapbox/config'
                     icon={require('@tabler/icons/icons/settings.svg')}
diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index 047544567..fb27f06f9 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -15,7 +15,6 @@ import {
 } from 'soapbox/components/ui/status/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
-import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
 
@@ -739,8 +738,8 @@ const mapStateToProps = (state: RootState) => {
 
   return {
     me,
-    isStaff: account ? isStaff(account) : false,
-    isAdmin: account ? isAdmin(account) : false,
+    isStaff: account ? account.staff : false,
+    isAdmin: account ? account.admin : false,
     features: getFeatures(instance),
   };
 };
diff --git a/app/soapbox/components/thumb_navigation.tsx b/app/soapbox/components/thumb_navigation.tsx
index 7e1debc61..0af978943 100644
--- a/app/soapbox/components/thumb_navigation.tsx
+++ b/app/soapbox/components/thumb_navigation.tsx
@@ -55,9 +55,9 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
             paths={['/messages', '/conversations']}
           />
         )
-      )} 
+      )}
 
-      {/* (account && isStaff(account)) && (
+      {/* (account && account.staff && (
         <ThumbNavigationLink
           src={require('@tabler/icons/icons/dashboard.svg')}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 65c2160c0..9ccbd204f 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -18,12 +18,8 @@ import StillImage from 'soapbox/components/still_image';
 import { HStack, IconButton, Menu, MenuButton, MenuItem, MenuList, MenuLink, MenuDivider } from 'soapbox/components/ui';
 import ActionButton from 'soapbox/features/ui/components/action_button';
 import {
-  isStaff,
-  isAdmin,
-  isModerator,
   isLocal,
   isRemote,
-  getDomain,
 } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 
@@ -322,7 +318,7 @@ class Header extends ImmutablePureComponent {
     }
 
     if (isRemote(account)) {
-      const domain = getDomain(account);
+      const domain = account.fqn.split('@')[1];
 
       menu.push(null);
 
@@ -341,10 +337,10 @@ class Header extends ImmutablePureComponent {
       }
     }
 
-    if (isStaff(meAccount)) {
+    if (meAccount.staff) {
       menu.push(null);
 
-      if (isAdmin(meAccount)) {
+      if (meAccount.admin) {
         menu.push({
           text: intl.formatMessage(messages.admin_account, { name: account.get('username') }),
           to: `/pleroma/admin/#/users/${account.id}/`,
@@ -353,8 +349,8 @@ class Header extends ImmutablePureComponent {
         });
       }
 
-      if (account.get('id') !== me && isLocal(account) && isAdmin(meAccount)) {
-        if (isAdmin(account)) {
+      if (account.id !== me && isLocal(account) && meAccount.admin) {
+        if (account.admin) {
           menu.push({
             text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }),
             action: this.props.onPromoteToModerator,
@@ -365,7 +361,7 @@ class Header extends ImmutablePureComponent {
             action: this.props.onDemoteToUser,
             icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
           });
-        } else if (isModerator(account)) {
+        } else if (account.moderator) {
           menu.push({
             text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
             action: this.props.onPromoteToAdmin,
@@ -404,7 +400,7 @@ class Header extends ImmutablePureComponent {
         });
       }
 
-      if (features.suggestionsV2 && isAdmin(meAccount)) {
+      if (features.suggestionsV2 && meAccount.admin) {
         if (account.getIn(['pleroma', 'is_suggested'])) {
           menu.push({
             text: intl.formatMessage(messages.unsuggestUser, { name: account.get('username') }),
diff --git a/app/soapbox/features/account_timeline/containers/header_container.js b/app/soapbox/features/account_timeline/containers/header_container.js
index 6087217ca..6b4ff5e6a 100644
--- a/app/soapbox/features/account_timeline/containers/header_container.js
+++ b/app/soapbox/features/account_timeline/containers/header_container.js
@@ -37,7 +37,6 @@ import { initReport } from 'soapbox/actions/reports';
 import { getSettings } from 'soapbox/actions/settings';
 import snackbar from 'soapbox/actions/snackbar';
 import { makeGetAccount } from 'soapbox/selectors';
-import { isAdmin } from 'soapbox/utils/accounts';
 
 import Header from '../components/header';
 
@@ -216,7 +215,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   },
 
   onPromoteToModerator(account) {
-    const messageType = isAdmin(account) ? messages.demotedToModerator : messages.promotedToModerator;
+    const messageType = account.admin ? messages.demotedToModerator : messages.promotedToModerator;
     const message = intl.formatMessage(messageType, { acct: account.get('acct') });
 
     dispatch(promoteToModerator(account.get('id')))
diff --git a/app/soapbox/features/admin/index.js b/app/soapbox/features/admin/index.js
index 9ca0264a4..09f626f0e 100644
--- a/app/soapbox/features/admin/index.js
+++ b/app/soapbox/features/admin/index.js
@@ -7,7 +7,6 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { getSubscribersCsv, getUnsubscribersCsv, getCombinedCsv } from 'soapbox/actions/email_list';
-import { isAdmin } from 'soapbox/utils/accounts';
 import sourceCode from 'soapbox/utils/code';
 import { parseVersion } from 'soapbox/utils/features';
 import { getFeatures } from 'soapbox/utils/features';
@@ -139,7 +138,7 @@ class Dashboard extends ImmutablePureComponent {
             </div>
           </div>
         </div>
-        {isAdmin(account) && <RegistrationModePicker />}
+        {account.admin && <RegistrationModePicker />}
         <div className='dashwidgets'>
           <div className='dashwidget'>
             <h4><FormattedMessage id='admin.dashwidgets.software_header' defaultMessage='Software' /></h4>
@@ -148,7 +147,7 @@ class Dashboard extends ImmutablePureComponent {
               <li>{v.software} <span className='pull-right'>{v.version}</span></li>
             </ul>
           </div>
-          {supportsEmailList && isAdmin(account) && <div className='dashwidget'>
+          {supportsEmailList && account.admin && <div className='dashwidget'>
             <h4><FormattedMessage id='admin.dashwidgets.email_list_header' defaultMessage='Email list' /></h4>
             <ul>
               <li><a href='#' onClick={this.handleSubscribersClick} target='_blank'>subscribers.csv</a></li>
diff --git a/app/soapbox/features/status/components/action_bar.js b/app/soapbox/features/status/components/action_bar.js
index b3af67ca2..929a20b53 100644
--- a/app/soapbox/features/status/components/action_bar.js
+++ b/app/soapbox/features/status/components/action_bar.js
@@ -7,7 +7,6 @@ import { connect } from 'react-redux';
 import { withRouter } from 'react-router-dom';
 
 import { isUserTouching } from 'soapbox/is_mobile';
-import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
 import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
@@ -65,8 +64,8 @@ const mapStateToProps = state => {
 
   return {
     me,
-    isStaff: account ? isStaff(account) : false,
-    isAdmin: account ? isAdmin(account) : false,
+    isStaff: account ? account.staff : false,
+    isAdmin: account ? account.admin : false,
     features: getFeatures(instance),
   };
 };
diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.js b/app/soapbox/features/ui/components/instance_moderation_panel.js
index ad54c4db1..2f18ba887 100644
--- a/app/soapbox/features/ui/components/instance_moderation_panel.js
+++ b/app/soapbox/features/ui/components/instance_moderation_panel.js
@@ -11,7 +11,6 @@ import { openModal } from 'soapbox/actions/modals';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
-import { isAdmin } from 'soapbox/utils/accounts';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
@@ -20,13 +19,13 @@ const messages = defineMessages({
 });
 
 const mapStateToProps = (state, { host }) => {
-  const me = state.get('me');
-  const account = state.getIn(['accounts', me]);
+  const { me, instance } = state;
+  const account = state.accounts.get(me);
 
   return {
-    instance: state.get('instance'),
+    instance,
     remoteInstance: getRemoteInstance(state, host),
-    isAdmin: isAdmin(account),
+    isAdmin: account.admin,
   };
 };
 
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index 0887afe61..b69f19314 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -9,7 +9,6 @@ import { fetchOwnAccounts } from 'soapbox/actions/auth';
 import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
-import { isStaff } from 'soapbox/utils/accounts';
 
 import Account from '../../../components/account';
 
@@ -31,7 +30,7 @@ type IMenuItem = {
   action?: (event: React.MouseEvent) => void
 }
 
-const getAccount: any = makeGetAccount();
+const getAccount = makeGetAccount();
 
 const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const dispatch = useDispatch();
@@ -40,7 +39,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
   const me = useAppSelector((state) => state.me);
   const currentAccount = useAppSelector((state) => getAccount(state, me));
   const authUsers = useAppSelector((state) => state.auth.get('users'));
-  const isCurrentAccountStaff = isStaff(currentAccount) || false;
+  const isCurrentAccountStaff = Boolean(currentAccount?.staff);
   const otherAccounts = useAppSelector((state) => authUsers.map((authUser: any) => getAccount(state, authUser.get('id'))));
 
   const handleLogOut = () => {
diff --git a/app/soapbox/features/ui/components/profile_info_panel.js b/app/soapbox/features/ui/components/profile_info_panel.js
index 1f57ed483..ce89ee6cb 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.js
+++ b/app/soapbox/features/ui/components/profile_info_panel.js
@@ -12,7 +12,7 @@ import { initAccountNoteModal } from 'soapbox/actions/account_notes';
 import Badge from 'soapbox/components/badge';
 import { Icon, HStack, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
-import { getAcct, isAdmin, isModerator, isLocal } from 'soapbox/utils/accounts';
+import { isLocal } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import ProfileStats from './profile_stats';
@@ -48,9 +48,9 @@ class ProfileInfoPanel extends ImmutablePureComponent {
   getStaffBadge = () => {
     const { account } = this.props;
 
-    if (isAdmin(account)) {
+    if (account?.admin) {
       return <Badge slug='admin' title='Admin' key='staff' />;
-    } else if (isModerator(account)) {
+    } else if (account?.moderator) {
       return <Badge slug='moderator' title='Moderator' key='staff' />;
     } else {
       return null;
@@ -155,7 +155,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
               {verified && <VerificationBadge />}
 
-              {account.get('bot') && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
+              {account.bot && <Badge slug='bot' title={intl.formatMessage(messages.bot)} />}
 
               {badges.length > 0 && (
                 <HStack space={1} alignItems='center'>
@@ -166,7 +166,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
 
             <HStack alignItems='center' space={0.5}>
               <Text size='sm' theme='muted'>
-                @{getAcct(account, displayFqn)}
+                @{displayFqn ? account.fqn : account.acct}
               </Text>
 
               {account.get('locked') && (
diff --git a/app/soapbox/features/ui/index.js b/app/soapbox/features/ui/index.js
index 8f3caa2f5..8b09aef4b 100644
--- a/app/soapbox/features/ui/index.js
+++ b/app/soapbox/features/ui/index.js
@@ -26,7 +26,6 @@ import HomePage from 'soapbox/pages/home_page';
 import ProfilePage from 'soapbox/pages/profile_page';
 import RemoteInstancePage from 'soapbox/pages/remote_instance_page';
 import StatusPage from 'soapbox/pages/status_page';
-import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 import { getAccessToken } from 'soapbox/utils/auth';
 import { getVapidKey } from 'soapbox/utils/auth';
 import { getFeatures } from 'soapbox/utils/features';
@@ -495,12 +494,12 @@ class UI extends React.PureComponent {
       dispatch(fetchChats());
     }
 
-    if (isStaff(account)) {
+    if (account.staff) {
       dispatch(fetchReports({ state: 'open' }));
       dispatch(fetchUsers(['local', 'need_approval']));
     }
 
-    if (isAdmin(account)) {
+    if (account.admin) {
       dispatch(fetchConfig());
     }
 
diff --git a/app/soapbox/features/ui/util/react_router_helpers.js b/app/soapbox/features/ui/util/react_router_helpers.js
index 295e20019..8a7e7ed87 100644
--- a/app/soapbox/features/ui/util/react_router_helpers.js
+++ b/app/soapbox/features/ui/util/react_router_helpers.js
@@ -5,7 +5,6 @@ import { connect } from 'react-redux';
 import { Redirect, Route } from 'react-router-dom';
 
 import { getSettings } from 'soapbox/actions/settings';
-import { isStaff, isAdmin } from 'soapbox/utils/accounts';
 
 import BundleColumnError from '../components/bundle_column_error';
 import ColumnForbidden from '../components/column_forbidden';
@@ -111,8 +110,8 @@ class WrappedRoute extends React.Component {
     const authorized = [
       account || publicRoute,
       developerOnly ? settings.get('isDeveloper') : true,
-      staffOnly ? account && isStaff(account) : true,
-      adminOnly ? account && isAdmin(account) : true,
+      staffOnly ? account && account.staff : true,
+      adminOnly ? account && account.admin : true,
     ].every(c => c);
 
     if (!authorized) {
diff --git a/app/soapbox/normalizers/__tests__/account-test.js b/app/soapbox/normalizers/__tests__/account-test.js
index 8d12a935d..1735d0628 100644
--- a/app/soapbox/normalizers/__tests__/account-test.js
+++ b/app/soapbox/normalizers/__tests__/account-test.js
@@ -168,4 +168,13 @@ describe('normalizeAccount()', () => {
 
     expect(result.fqn).toEqual('benis911@mastodon.social');
   });
+
+  it('normalizes Pleroma staff', () => {
+    const account = require('soapbox/__fixtures__/pleroma-account.json');
+    const result = normalizeAccount(account);
+
+    expect(result.admin).toBe(true);
+    expect(result.staff).toBe(true);
+    expect(result.moderator).toBe(false);
+  });
 });
diff --git a/app/soapbox/normalizers/account.ts b/app/soapbox/normalizers/account.ts
index 8bdc11681..679dd770d 100644
--- a/app/soapbox/normalizers/account.ts
+++ b/app/soapbox/normalizers/account.ts
@@ -50,12 +50,15 @@ export const AccountRecord = ImmutableRecord({
   verified: false,
 
   // Internal fields
+  admin: false,
   display_name_html: '',
+  moderator: false,
   note_emojified: '',
   note_plain: '',
   patron: ImmutableMap<string, any>(),
   relationship: ImmutableList<ImmutableMap<string, any>>(),
   should_refetch: false,
+  staff: false,
 });
 
 // https://docs.joinmastodon.org/entities/field/
@@ -221,6 +224,18 @@ const normalizeFqn = (account: ImmutableMap<string, any>) => {
   return account.set('fqn', fqn);
 };
 
+const addStaffFields = (account: ImmutableMap<string, any>) => {
+  const admin = account.getIn(['pleroma', 'is_admin']) === true;
+  const moderator = account.getIn(['pleroma', 'is_moderator']) === true;
+  const staff = admin || moderator;
+
+  return account.merge({
+    admin,
+    moderator,
+    staff,
+  });
+};
+
 export const normalizeAccount = (account: Record<string, any>) => {
   return AccountRecord(
     ImmutableMap(fromJS(account)).withMutations(account => {
@@ -233,6 +248,7 @@ export const normalizeAccount = (account: Record<string, any>) => {
       normalizeBirthday(account);
       normalizeLocation(account);
       normalizeFqn(account);
+      addStaffFields(account);
       fixUsername(account);
       fixDisplayName(account);
       addInternalFields(account);
diff --git a/app/soapbox/pages/remote_instance_page.js b/app/soapbox/pages/remote_instance_page.js
index 1733d7738..c922be6a5 100644
--- a/app/soapbox/pages/remote_instance_page.js
+++ b/app/soapbox/pages/remote_instance_page.js
@@ -11,19 +11,18 @@ import {
   InstanceInfoPanel,
   InstanceModerationPanel,
 } from 'soapbox/features/ui/util/async-components';
-import { isAdmin } from 'soapbox/utils/accounts';
 import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
 
 import { Layout } from '../components/ui';
 
 const mapStateToProps = state => {
-  const me = state.get('me');
-  const account = state.getIn(['accounts', me]);
+  const me = state.me;
+  const account = state.accounts.get(me);
 
   return {
     me,
     disclosed: federationRestrictionsDisclosed(state),
-    isAdmin: isAdmin(account),
+    isAdmin: Boolean(account?.admin),
   };
 };
 
diff --git a/app/soapbox/utils/__tests__/accounts-test.js b/app/soapbox/utils/__tests__/accounts-test.js
index ddf38adde..6d0d3cedd 100644
--- a/app/soapbox/utils/__tests__/accounts-test.js
+++ b/app/soapbox/utils/__tests__/accounts-test.js
@@ -1,94 +1,15 @@
-import { fromJS } from 'immutable';
-
-import {
-  getDomain,
-  isStaff,
-  isAdmin,
-  isModerator,
-} from '../accounts';
-
-describe('getDomain', () => {
-  const account = fromJS({
-    acct: 'alice',
-    url: 'https://party.com/users/alice',
-  });
-  it('returns the domain', () => {
-    expect(getDomain(account)).toEqual('party.com');
-  });
-});
-
-describe('isStaff', () => {
-  describe('with empty user', () => {
-    const account = fromJS({});
-    it('returns false', () => {
-      expect(isStaff(account)).toBe(false);
-    });
-  });
-
-  describe('with Pleroma admin', () => {
-    const admin = fromJS({ pleroma: { is_admin: true } });
-    it('returns true', () => {
-      expect(isStaff(admin)).toBe(true);
-    });
-  });
-
-  describe('with Pleroma moderator', () => {
-    const mod = fromJS({ pleroma: { is_moderator: true } });
-    it('returns true', () => {
-      expect(isStaff(mod)).toBe(true);
-    });
-  });
-
-  describe('with undefined', () => {
-    const account = undefined;
-    it('returns false', () => {
-      expect(isStaff(account)).toBe(false);
-    });
-  });
-});
-
-describe('isAdmin', () => {
-  describe('with empty user', () => {
-    const account = fromJS({});
-    it('returns false', () => {
-      expect(isAdmin(account)).toBe(false);
-    });
-  });
-
-  describe('with Pleroma admin', () => {
-    const admin = fromJS({ pleroma: { is_admin: true } });
-    it('returns true', () => {
-      expect(isAdmin(admin)).toBe(true);
-    });
-  });
-
-  describe('with Pleroma moderator', () => {
-    const mod = fromJS({ pleroma: { is_moderator: true } });
-    it('returns false', () => {
-      expect(isAdmin(mod)).toBe(false);
-    });
-  });
-});
-
-describe('isModerator', () => {
-  describe('with empty user', () => {
-    const account = fromJS({});
-    it('returns false', () => {
-      expect(isModerator(account)).toBe(false);
-    });
-  });
-
-  describe('with Pleroma admin', () => {
-    const admin = fromJS({ pleroma: { is_admin: true } });
-    it('returns false', () => {
-      expect(isModerator(admin)).toBe(false);
-    });
-  });
-
-  describe('with Pleroma moderator', () => {
-    const mod = fromJS({ pleroma: { is_moderator: true } });
-    it('returns true', () => {
-      expect(isModerator(mod)).toBe(true);
-    });
-  });
-});
+// import { fromJS } from 'immutable';
+//
+// import {
+//   getDomain,
+// } from '../accounts';
+//
+// describe('getDomain', () => {
+//   const account = fromJS({
+//     acct: 'alice',
+//     url: 'https://party.com/users/alice',
+//   });
+//   it('returns the domain', () => {
+//     expect(getDomain(account)).toEqual('party.com');
+//   });
+// });
diff --git a/app/soapbox/utils/accounts.ts b/app/soapbox/utils/accounts.ts
index aec0159e7..2c942eeaa 100644
--- a/app/soapbox/utils/accounts.ts
+++ b/app/soapbox/utils/accounts.ts
@@ -1,6 +1,6 @@
 import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet } from 'immutable';
 
-import { Account } from 'soapbox/types/entities';
+import type { Account } from 'soapbox/types/entities';
 
 const getDomainFromURL = (account: Account): string => {
   try {
@@ -29,18 +29,6 @@ export const getAcct = (account: Account, displayFqn: boolean): string => (
   displayFqn === true ? account.fqn : account.acct
 );
 
-export const isStaff = (account: Account): boolean => (
-  [isAdmin, isModerator].some(f => f(account) === true)
-);
-
-export const isAdmin = (account: Account): boolean => (
-  account.getIn(['pleroma', 'is_admin']) === true
-);
-
-export const isModerator = (account: Account): boolean => (
-  account.getIn(['pleroma', 'is_moderator']) === true
-);
-
 export const getFollowDifference = (state: ImmutableMap<string, any>, accountId: string, type: string): number => {
   const items: any = state.getIn(['user_lists', type, accountId, 'items'], ImmutableOrderedSet());
   const counter: number = Number(state.getIn(['accounts_counters', accountId, `${type}_count`], 0));

From dfb5e7f41b52048fa58dd30d3496b4cddd03006b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 20:41:00 -0500
Subject: [PATCH 21/29] SidebarNavigationLink: set parent height for before svg
 is loaded

---
 .../components/sidebar-navigation-link.tsx     | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index bd0567c03..4d031d5fd 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -37,14 +37,16 @@ const SidebarNavigationLink = ({ icon, text, to, count }: ISidebarNavigationLink
           </span>
         ) : null}
 
-        <Icon
-          src={icon}
-          className={classNames({
-            'h-5 w-5': true,
-            'text-primary-700 dark:text-white': !isActive,
-            'text-white': isActive,
-          })}
-        />
+        <div className='h-5 w-5'>
+          <Icon
+            src={icon}
+            className={classNames({
+              'h-full w-full': true,
+              'text-primary-700 dark:text-white': !isActive,
+              'text-white': isActive,
+            })}
+          />
+        </div>
       </span>
 
       <Text weight='semibold' theme='inherit'>{text}</Text>

From 883545b3b3e7f688ce77c78c970e1d04bb0df39a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 21:55:29 -0500
Subject: [PATCH 22/29] StatusActionButton: treat element as a group

---
 app/soapbox/components/status_action_bar.tsx  | 15 ++----
 .../ui/status/status-action-button.tsx        | 51 +++++++------------
 2 files changed, 23 insertions(+), 43 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index fb27f06f9..35b5dd6d9 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -646,21 +646,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           title={replyTitle}
           icon={require('@tabler/icons/icons/message-circle.svg')}
           onClick={this.handleReplyClick}
-          to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`}
           count={replyCount}
         />
 
         <StatusAction>
           {reblogButton}
           {reblogCount > 0 && (
-            <StatusActionCounter onClick={this.handleOpenReblogsModal} count={reblogCount} />
+            <StatusActionCounter count={reblogCount} />
           )}
         </StatusAction>
 
         {features.emojiReacts ? (
           <div
             ref={this.setRef}
-            className='flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
+            className='group flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
           >
             <Hoverable
               component={(
@@ -673,8 +672,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
             >
               <IconButton
                 className={classNames({
-                  'text-gray-400 hover:text-gray-600 dark:hover:text-white': !meEmojiReact,
-                  'text-accent-300 hover:text-accent-300': Boolean(meEmojiReact),
+                  'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !meEmojiReact,
+                  'text-accent-300 group-hover:text-accent-300': Boolean(meEmojiReact),
                 })}
                 title={meEmojiTitle}
                 src={require('@tabler/icons/icons/heart.svg')}
@@ -688,10 +687,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
 
             {emojiReactCount > 0 && (
               (features.exposableReactions && !features.emojiReacts) ? (
-                <StatusActionCounter
-                  to={`/@${status.getIn(['account', 'acct'])}/posts/${status.get('id')}/likes`}
-                  count={emojiReactCount}
-                />
+                <StatusActionCounter count={emojiReactCount} />
               ) : (
                 <StatusActionCounter count={emojiReactCount} />
               )
@@ -703,7 +699,6 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
             icon={require('@tabler/icons/icons/heart.svg')}
             onClick={this.handleLikeButtonClick}
             active={Boolean(meEmojiReact)}
-            to={features.exposableReactions ? `/@${status.getIn(['account', 'acct'])}/posts/${status.id}/likes`: undefined}
             count={favouriteCount}
           />
         )}
diff --git a/app/soapbox/components/ui/status/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx
index 210829a97..635b891df 100644
--- a/app/soapbox/components/ui/status/status-action-button.tsx
+++ b/app/soapbox/components/ui/status/status-action-button.tsx
@@ -1,31 +1,26 @@
 import classNames from 'classnames';
 import React from 'react';
-import { Link } from 'react-router-dom';
 
-import { IconButton, Text } from 'soapbox/components/ui';
+import { IconButton } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IStatusActionCounter {
   count: number,
-  onClick?: () => void,
-  to?: string,
 }
 
 /** Action button numerical counter, eg "5" likes */
-const StatusActionCounter: React.FC<IStatusActionCounter> = ({ to = '#', onClick, count = 0 }): JSX.Element => {
-
-  const handleClick: React.EventHandler<React.MouseEvent> = e => {
-    if (onClick) {
-      onClick();
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  };
-
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
   return (
-    <Link to={to} onClick={handleClick}>
-      <Text size='xs' theme='muted'>{shortNumberFormat(count)}</Text>
-    </Link>
+    <span className='text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white'>{shortNumberFormat(count)}</span>
+  );
+};
+
+/** Status action container element */
+const StatusAction: React.FC = ({ children }) => {
+  return (
+    <div className='group flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+      {children}
+    </div>
   );
 };
 
@@ -35,20 +30,10 @@ interface IStatusActionButton {
   count?: number,
   active?: boolean,
   title?: string,
-  to?: string,
 }
 
-/** Status action container element */
-const StatusAction: React.FC = ({ children }) => {
-  return (
-    <div className='flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
-      {children}
-    </div>
-  );
-};
-
 /** Action button (eg "Like") for a Status */
-const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, active = false, onClick, count = 0 }): JSX.Element => {
+const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active = false, onClick, count = 0 }): JSX.Element => {
 
   const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
     onClick();
@@ -62,8 +47,8 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
         title={title}
         src={icon}
         onClick={handleClick}
-        className={classNames('text-gray-400 hover:text-gray-600 dark:hover:text-white', {
-          'text-accent-300 hover:text-accent-300': active,
+        className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
+          'text-accent-300 group-hover:text-accent-300': active,
           // TODO: repost button
           // 'text-success-600 hover:text-success-600': active,
         })}
@@ -72,9 +57,9 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, to, ac
         })}
       />
 
-      {count ? (
-        <StatusActionCounter to={to} count={count} />
-      ) : null}
+      {(count || null) && (
+        <StatusActionCounter count={count} />
+      )}
     </StatusAction>
   );
 };

From a045ec45df92dd5a9eb46af0b3b86139dcc812bb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 22:28:46 -0500
Subject: [PATCH 23/29] StatusActionButton improvements

---
 app/soapbox/components/status_action_bar.tsx  |  4 ++--
 .../ui/status/status-action-button.tsx        | 24 +++++++++++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index 35b5dd6d9..b98f017a9 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -622,8 +622,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         <IconButton
           disabled={!publicStatus}
           className={classNames({
-            'text-gray-400 hover:text-gray-600 dark:hover:text-white': !status.get('reblogged'),
-            'text-success-600 hover:text-success-600': status.get('reblogged'),
+            'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !status.reblogged,
+            'text-success-600 group-hover:text-success-600': status.reblogged,
           })}
           title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
           src={reblogIcon}
diff --git a/app/soapbox/components/ui/status/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx
index 635b891df..635e0dbe9 100644
--- a/app/soapbox/components/ui/status/status-action-button.tsx
+++ b/app/soapbox/components/ui/status/status-action-button.tsx
@@ -6,19 +6,26 @@ import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 interface IStatusActionCounter {
   count: number,
+  className?: string,
 }
 
 /** Action button numerical counter, eg "5" likes */
-const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0, className }): JSX.Element => {
   return (
-    <span className='text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white'>{shortNumberFormat(count)}</span>
+    <span className={classNames('text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', className)}>
+      {shortNumberFormat(count)}
+    </span>
   );
 };
 
+interface IStatusAction {
+  title?: string,
+}
+
 /** Status action container element */
-const StatusAction: React.FC = ({ children }) => {
+const StatusAction: React.FC<IStatusAction> = ({ title, children }) => {
   return (
-    <div className='group flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
+    <div title={title} className='group flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
       {children}
     </div>
   );
@@ -42,13 +49,13 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
   };
 
   return (
-    <StatusAction>
+    <StatusAction title={title}>
       <IconButton
         title={title}
         src={icon}
         onClick={handleClick}
         className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
-          'text-accent-300 group-hover:text-accent-300': active,
+          'text-accent-300 group-hover:text-accent-300 dark:group-hover:text-accent-300': active,
           // TODO: repost button
           // 'text-success-600 hover:text-success-600': active,
         })}
@@ -58,7 +65,10 @@ const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active
       />
 
       {(count || null) && (
-        <StatusActionCounter count={count} />
+        <StatusActionCounter
+          className={classNames({ 'text-accent-300 group-hover:text-accent-300': active })}
+          count={count}
+        />
       )}
     </StatusAction>
   );

From a080ed864714e1f8c8461b87b8be4314eac2280e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Apr 2022 11:55:54 -0500
Subject: [PATCH 24/29] status.tsx: extend withRouter props

---
 app/soapbox/components/status.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 473d12eb3..8276bed34 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl, FormattedMessage, IntlShape } from 'react-intl';
-import { NavLink, withRouter } from 'react-router-dom';
+import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
@@ -61,7 +61,7 @@ export const defaultMediaVisibility = (status: StatusEntity, displayMedia: strin
   return (displayMedia !== 'hide_all' && !status.sensitive || displayMedia === 'show_all');
 };
 
-interface IStatus {
+interface IStatus extends RouteComponentProps {
   intl: IntlShape,
   status: StatusEntity,
   account: AccountEntity,
@@ -674,5 +674,4 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
 
 }
 
-// @ts-ignore WHY
 export default withRouter(injectIntl(Status));

From 96ccc666411738efa6bc1315b22437ff8138017c Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Apr 2022 13:03:12 -0500
Subject: [PATCH 25/29] Convert DropdownMenu to typescript

---
 .../{dropdown_menu.js => dropdown_menu.tsx}   | 213 +++++++++++-------
 app/soapbox/components/status_action_bar.tsx  |  15 +-
 .../components/ui/icon-button/icon-button.tsx |   7 +-
 .../containers/dropdown_menu_container.js     |  29 ---
 .../containers/dropdown_menu_container.ts     |  38 ++++
 5 files changed, 175 insertions(+), 127 deletions(-)
 rename app/soapbox/components/{dropdown_menu.js => dropdown_menu.tsx} (56%)
 delete mode 100644 app/soapbox/containers/dropdown_menu_container.js
 create mode 100644 app/soapbox/containers/dropdown_menu_container.ts

diff --git a/app/soapbox/components/dropdown_menu.js b/app/soapbox/components/dropdown_menu.tsx
similarity index 56%
rename from app/soapbox/components/dropdown_menu.js
rename to app/soapbox/components/dropdown_menu.tsx
index c471ac27b..7d13d6829 100644
--- a/app/soapbox/components/dropdown_menu.js
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -1,36 +1,51 @@
 import classNames from 'classnames';
 import { supportsPassiveEvents } from 'detect-passive-events';
-import PropTypes from 'prop-types';
 import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import spring from 'react-motion/lib/spring';
+import { spring } from 'react-motion';
+// @ts-ignore: TODO: upgrade react-overlays. v3.1 and above have TS definitions
 import Overlay from 'react-overlays/lib/Overlay';
-import { withRouter } from 'react-router-dom';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
+import { IconButton } from 'soapbox/components/ui';
+import Motion from 'soapbox/features/ui/util/optional_motion';
 
-import Motion from '../features/ui/util/optional_motion';
-
-import { IconButton } from './ui';
+import type { Status } from 'soapbox/types/entities';
 
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 let id = 0;
 
-@withRouter
-class DropdownMenu extends React.PureComponent {
+export interface MenuItem {
+  action: React.EventHandler<React.KeyboardEvent | React.MouseEvent>,
+  middleClick?: React.EventHandler<React.MouseEvent>,
+  text: string,
+  href?: string,
+  to?: string,
+  newTab?: boolean,
+  isLogout?: boolean,
+  icon: string,
+  destructive?: boolean,
+}
 
-  static propTypes = {
-    items: PropTypes.array.isRequired,
-    onClose: PropTypes.func.isRequired,
-    style: PropTypes.object,
-    placement: PropTypes.string,
-    arrowOffsetLeft: PropTypes.string,
-    arrowOffsetTop: PropTypes.string,
-    openedViaKeyboard: PropTypes.bool,
-    history: PropTypes.object,
-  };
+export type Menu = Array<MenuItem | null>;
 
-  static defaultProps = {
+interface IDropdownMenu extends RouteComponentProps {
+  items: Menu,
+  onClose: () => void,
+  style?: React.CSSProperties,
+  placement?: DropdownPlacement,
+  arrowOffsetLeft?: string,
+  arrowOffsetTop?: string,
+  openedViaKeyboard: boolean,
+}
+
+interface IDropdownMenuState {
+  mounted: boolean,
+}
+
+class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState> {
+
+  static defaultProps: Partial<IDropdownMenu> = {
     style: {},
     placement: 'bottom',
   };
@@ -39,8 +54,11 @@ class DropdownMenu extends React.PureComponent {
     mounted: false,
   };
 
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
+  node: HTMLDivElement | null = null;
+  focusedItem: HTMLAnchorElement | null = null;
+
+  handleDocumentClick = (e: Event) => {
+    if (this.node && !this.node.contains(e.target as Node)) {
       this.props.onClose();
     }
   }
@@ -56,22 +74,24 @@ class DropdownMenu extends React.PureComponent {
   }
 
   componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('keydown', this.handleKeyDown, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
+    document.removeEventListener('click', this.handleDocumentClick);
+    document.removeEventListener('keydown', this.handleKeyDown);
+    document.removeEventListener('touchend', this.handleDocumentClick);
   }
 
-  setRef = c => {
+  setRef: React.RefCallback<HTMLDivElement> = c => {
     this.node = c;
   }
 
-  setFocusRef = c => {
+  setFocusRef: React.RefCallback<HTMLAnchorElement> = c => {
     this.focusedItem = c;
   }
 
-  handleKeyDown = e => {
+  handleKeyDown = (e: KeyboardEvent) => {
+    if (!this.node) return;
+
     const items = Array.from(this.node.getElementsByTagName('a'));
-    const index = items.indexOf(document.activeElement);
+    const index = items.indexOf(document.activeElement as any);
     let element = null;
 
     switch(e.key) {
@@ -106,15 +126,17 @@ class DropdownMenu extends React.PureComponent {
     }
   }
 
-  handleItemKeyPress = e => {
+  handleItemKeyPress: React.EventHandler<React.KeyboardEvent> = e => {
     if (e.key === 'Enter' || e.key === ' ') {
       this.handleClick(e);
     }
   }
 
-  handleClick = e => {
+  handleClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = e => {
     const i = Number(e.currentTarget.getAttribute('data-index'));
-    const { action, to } = this.props.items[i];
+    const item = this.props.items[i];
+    if (!item) return;
+    const { action, to } = item;
 
     this.props.onClose();
 
@@ -127,9 +149,11 @@ class DropdownMenu extends React.PureComponent {
     }
   }
 
-  handleMiddleClick = e => {
+  handleMiddleClick: React.EventHandler<React.MouseEvent> = e => {
     const i = Number(e.currentTarget.getAttribute('data-index'));
-    const { middleClick } = this.props.items[i];
+    const item = this.props.items[i];
+    if (!item) return;
+    const { middleClick } = item;
 
     this.props.onClose();
 
@@ -139,13 +163,13 @@ class DropdownMenu extends React.PureComponent {
     }
   }
 
-  handleAuxClick = e => {
+  handleAuxClick: React.EventHandler<React.MouseEvent> = e => {
     if (e.button === 1) {
       this.handleMiddleClick(e);
     }
   }
 
-  renderItem(option, i) {
+  renderItem(option: MenuItem | null, i: number): JSX.Element {
     if (option === null) {
       return <li key={`sep-${i}`} className='dropdown-menu__separator' />;
     }
@@ -157,14 +181,14 @@ class DropdownMenu extends React.PureComponent {
         <a
           href={href || to || '#'}
           role='button'
-          tabIndex='0'
+          tabIndex={0}
           ref={i === 0 ? this.setFocusRef : null}
           onClick={this.handleClick}
           onAuxClick={this.handleAuxClick}
           onKeyPress={this.handleItemKeyPress}
           data-index={i}
-          target={newTab ? '_blank' : null}
-          data-method={isLogout ? 'delete' : null}
+          target={newTab ? '_blank' : undefined}
+          data-method={isLogout ? 'delete' : undefined}
         >
           {icon && <Icon src={icon} />}
           {text}
@@ -182,7 +206,7 @@ class DropdownMenu extends React.PureComponent {
           // It should not be transformed when mounting because the resulting
           // size will be used to determine the coordinate of the menu by
           // react-overlays
-          <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} ref={this.setRef}>
+          <div className={`dropdown-menu ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} ref={this.setRef}>
             <div className={`dropdown-menu__arrow ${placement}`} style={{ left: arrowOffsetLeft, top: arrowOffsetTop }} />
             <ul>
               {items.map((option, i) => this.renderItem(option, i))}
@@ -195,40 +219,56 @@ class DropdownMenu extends React.PureComponent {
 
 }
 
-export default @withRouter
-class Dropdown extends React.PureComponent {
+const RouterDropdownMenu = withRouter(DropdownMenu);
 
-  static propTypes = {
-    icon: PropTypes.string,
-    src: PropTypes.string,
-    items: PropTypes.array.isRequired,
-    size: PropTypes.number,
-    active: PropTypes.bool,
-    pressed: PropTypes.bool,
-    title: PropTypes.string,
-    disabled: PropTypes.bool,
-    status: ImmutablePropTypes.record,
-    isUserTouching: PropTypes.func,
-    isModalOpen: PropTypes.bool.isRequired,
-    onOpen: PropTypes.func.isRequired,
-    onClose: PropTypes.func.isRequired,
-    dropdownPlacement: PropTypes.string,
-    openDropdownId: PropTypes.number,
-    openedViaKeyboard: PropTypes.bool,
-    text: PropTypes.string,
-    onShiftClick: PropTypes.func,
-    history: PropTypes.object,
-  };
+export interface IDropdown extends RouteComponentProps {
+  icon?: string,
+  src: string,
+  items: Menu,
+  size?: number,
+  active?: boolean,
+  pressed?: boolean,
+  title: string,
+  disabled?: boolean,
+  status?: Status,
+  isUserTouching?: () => boolean,
+  isModalOpen?: boolean,
+  onOpen?: (
+    id: number,
+    onItemClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
+    dropdownPlacement: DropdownPlacement,
+    keyboard: boolean,
+  ) => void,
+  onClose?: (id: number) => void,
+  dropdownPlacement?: string,
+  openDropdownId?: number,
+  openedViaKeyboard?: boolean,
+  text?: string,
+  onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
+}
 
-  static defaultProps = {
+interface IDropdownState {
+  id: number,
+  open: boolean,
+}
+
+export type DropdownPlacement = 'top' | 'bottom';
+
+class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
+
+  static defaultProps: Partial<IDropdown> = {
     title: 'Menu',
   };
 
   state = {
     id: id++,
+    open: false,
   };
 
-  handleClick = e => {
+  target: HTMLButtonElement | null = null;
+  activeElement: Element | null = null;
+
+  handleClick: React.EventHandler<React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement>> = e => {
     const { onOpen, onShiftClick, openDropdownId } = this.props;
     e.stopPropagation();
 
@@ -237,38 +277,41 @@ class Dropdown extends React.PureComponent {
       onShiftClick(e);
     } else if (this.state.id === openDropdownId) {
       this.handleClose();
-    } else {
-      const { top } = e.target.getBoundingClientRect();
-      const placement = top * 2 < innerHeight ? 'bottom' : 'top';
+    } else if(onOpen) {
+      const { top } = e.currentTarget.getBoundingClientRect();
+      const placement: DropdownPlacement = top * 2 < innerHeight ? 'bottom' : 'top';
 
       onOpen(this.state.id, this.handleItemClick, placement, e.type !== 'click');
     }
   }
 
   handleClose = () => {
-    if (this.activeElement) {
-      this.activeElement.focus();
+    if (this.activeElement && this.activeElement === this.target) {
+      (this.activeElement as HTMLButtonElement).focus();
       this.activeElement = null;
     }
-    this.props.onClose(this.state.id);
+
+    if (this.props.onClose) {
+      this.props.onClose(this.state.id);
+    }
   }
 
-  handleMouseDown = () => {
+  handleMouseDown: React.EventHandler<React.MouseEvent | React.KeyboardEvent> = () => {
     if (!this.state.open) {
       this.activeElement = document.activeElement;
     }
   }
 
-  handleButtonKeyDown = (e) => {
+  handleButtonKeyDown: React.EventHandler<React.KeyboardEvent> = (e) => {
     switch(e.key) {
     case ' ':
     case 'Enter':
-      this.handleMouseDown();
+      this.handleMouseDown(e);
       break;
     }
   }
 
-  handleKeyPress = (e) => {
+  handleKeyPress: React.EventHandler<React.KeyboardEvent<HTMLButtonElement>> = (e) => {
     switch(e.key) {
     case ' ':
     case 'Enter':
@@ -279,9 +322,12 @@ class Dropdown extends React.PureComponent {
     }
   }
 
-  handleItemClick = e => {
+  handleItemClick: React.EventHandler<React.MouseEvent> = e => {
     const i = Number(e.currentTarget.getAttribute('data-index'));
-    const { action, to } = this.props.items[i];
+    const item = this.props.items[i];
+    if (!item) return;
+
+    const { action, to } = item;
 
     this.handleClose();
     e.preventDefault();
@@ -290,11 +336,11 @@ class Dropdown extends React.PureComponent {
     if (typeof action === 'function') {
       action(e);
     } else if (to) {
-      this.props.history.push(to);
+      this.props.history?.push(to);
     }
   }
 
-  setTargetRef = c => {
+  setTargetRef: React.RefCallback<HTMLButtonElement> = c => {
     this.target = c;
   }
 
@@ -309,7 +355,7 @@ class Dropdown extends React.PureComponent {
   }
 
   render() {
-    const { src, items, size, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard, pressed, text } = this.props;
+    const { src, items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
@@ -322,8 +368,7 @@ class Dropdown extends React.PureComponent {
           })}
           title={title}
           src={src}
-          pressed={pressed}
-          size={size}
+          aria-pressed={pressed}
           text={text}
           onClick={this.handleClick}
           onMouseDown={this.handleMouseDown}
@@ -333,10 +378,12 @@ class Dropdown extends React.PureComponent {
         />
 
         <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
-          <DropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
+          <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
         </Overlay>
       </>
     );
   }
 
 }
+
+export default withRouter(Dropdown);
diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index b98f017a9..558d96bb7 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -24,6 +24,7 @@ import { IconButton, Hoverable } from './ui';
 
 import type { History } from 'history';
 import type { AnyAction, Dispatch } from 'redux';
+import type { Menu } from 'soapbox/components/dropdown_menu';
 import type { RootState } from 'soapbox/store';
 import type { Status } from 'soapbox/types/entities';
 import type { Features } from 'soapbox/utils/features';
@@ -367,7 +368,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     const ownAccount = status.getIn(['account', 'id']) === me;
     const username = String(status.getIn(['account', 'username']));
 
-    const menu = [];
+    const menu: Menu = [];
 
     menu.push({
       text: intl.formatMessage(messages.open),
@@ -487,13 +488,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           text: intl.formatMessage(messages.admin_account, { name: username }),
           href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
           icon: require('@tabler/icons/icons/gavel.svg'),
-          action: (event: Event) => event.stopPropagation(),
+          action: (event) => event.stopPropagation(),
         });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
           icon: require('@tabler/icons/icons/pencil.svg'),
-          action: (event: Event) => event.stopPropagation(),
+          action: (event) => event.stopPropagation(),
         });
       }
 
@@ -607,13 +608,11 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       reblogButton = (
         <DropdownMenuContainer
           items={reblogMenu}
-          // @ts-ignore
           disabled={!publicStatus}
-          active={status.get('reblogged')}
-          pressed={status.get('reblogged')}
+          active={status.reblogged}
+          pressed={status.reblogged}
           title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
           src={reblogIcon}
-          direction='right'
           onShiftClick={this.handleReblogClick}
         />
       );
@@ -714,11 +713,9 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         <StatusAction>
           <DropdownMenuContainer
             items={menu}
-            // @ts-ignore
             title={intl.formatMessage(messages.more)}
             status={status}
             src={require('@tabler/icons/icons/dots.svg')}
-            direction='right'
           />
         </StatusAction>
       </div>
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index 2d8c27b7f..291b0b4f8 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -4,15 +4,10 @@ import InlineSVG from 'react-inlinesvg';
 
 import Text from '../text/text';
 
-interface IIconButton {
-  alt?: string,
-  className?: string,
+interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   iconClassName?: string,
-  disabled?: boolean,
   src: string,
-  onClick?: React.EventHandler<React.MouseEvent>,
   text?: string,
-  title?: string,
   transparent?: boolean
 }
 
diff --git a/app/soapbox/containers/dropdown_menu_container.js b/app/soapbox/containers/dropdown_menu_container.js
deleted file mode 100644
index 57f4d5468..000000000
--- a/app/soapbox/containers/dropdown_menu_container.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import { connect } from 'react-redux';
-
-import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
-import { openModal, closeModal } from '../actions/modals';
-import DropdownMenu from '../components/dropdown_menu';
-import { isUserTouching } from '../is_mobile';
-
-const mapStateToProps = state => ({
-  isModalOpen: Boolean(state.get('modals').size && state.get('modals').last().modalType === 'ACTIONS'),
-  dropdownPlacement: state.getIn(['dropdown_menu', 'placement']),
-  openDropdownId: state.getIn(['dropdown_menu', 'openId']),
-  openedViaKeyboard: state.getIn(['dropdown_menu', 'keyboard']),
-});
-
-const mapDispatchToProps = (dispatch, { status, items }) => ({
-  onOpen(id, onItemClick, dropdownPlacement, keyboard) {
-    dispatch(isUserTouching() ? openModal('ACTIONS', {
-      status,
-      actions: items,
-      onClick: onItemClick,
-    }) : openDropdownMenu(id, dropdownPlacement, keyboard));
-  },
-  onClose(id) {
-    dispatch(closeModal('ACTIONS'));
-    dispatch(closeDropdownMenu(id));
-  },
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu);
diff --git a/app/soapbox/containers/dropdown_menu_container.ts b/app/soapbox/containers/dropdown_menu_container.ts
new file mode 100644
index 000000000..fa149d0f4
--- /dev/null
+++ b/app/soapbox/containers/dropdown_menu_container.ts
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux';
+
+import { openDropdownMenu, closeDropdownMenu } from '../actions/dropdown_menu';
+import { openModal, closeModal } from '../actions/modals';
+import DropdownMenu from '../components/dropdown_menu';
+import { isUserTouching } from '../is_mobile';
+
+import type { Dispatch } from 'redux';
+import type { DropdownPlacement, IDropdown } from 'soapbox/components/dropdown_menu';
+import type { RootState } from 'soapbox/store';
+
+const mapStateToProps = (state: RootState) => ({
+  isModalOpen: Boolean(state.modals.size && state.modals.last().modalType === 'ACTIONS'),
+  dropdownPlacement: state.dropdown_menu.get('placement'),
+  openDropdownId: state.dropdown_menu.get('openId'),
+  openedViaKeyboard: state.dropdown_menu.get('keyboard'),
+});
+
+const mapDispatchToProps = (dispatch: Dispatch, { status, items }: Partial<IDropdown>) => ({
+  onOpen(
+    id: number,
+    onItemClick: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
+    dropdownPlacement: DropdownPlacement,
+    keyboard: boolean,
+  ) {
+    dispatch(isUserTouching() ? openModal('ACTIONS', {
+      status,
+      actions: items,
+      onClick: onItemClick,
+    }) : openDropdownMenu(id, dropdownPlacement, keyboard));
+  },
+  onClose(id: number) {
+    dispatch(closeModal('ACTIONS'));
+    dispatch(closeDropdownMenu(id));
+  },
+});
+
+export default connect(mapStateToProps, mapDispatchToProps)(DropdownMenu);

From 82130a1612854a213f0a5faba9b7eaed04d0c60e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Apr 2022 13:07:12 -0500
Subject: [PATCH 26/29] StatusActionBar: remove a bunch of .get() calls

---
 app/soapbox/components/status_action_bar.tsx | 52 ++++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index 558d96bb7..3900118e9 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -148,8 +148,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
 
   handleShareClick = () => {
     navigator.share({
-      text: this.props.status.get('search_index'),
-      url: this.props.status.get('url'),
+      text: this.props.status.search_index,
+      url: this.props.status.url,
     }).catch((e) => {
       if (e.name !== 'AbortError') console.error(e);
     });
@@ -256,22 +256,22 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
 
   handleMentionClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-    this.props.onMention(this.props.status.get('account'), this.props.history);
+    this.props.onMention(this.props.status.account, this.props.history);
   }
 
   handleDirectClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-    this.props.onDirect(this.props.status.get('account'), this.props.history);
+    this.props.onDirect(this.props.status.account, this.props.history);
   }
 
   handleChatClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-    this.props.onChat(this.props.status.get('account'), this.props.history);
+    this.props.onChat(this.props.status.account, this.props.history);
   }
 
   handleMuteClick: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-    this.props.onMute(this.props.status.get('account'));
+    this.props.onMute(this.props.status.account);
   }
 
   handleBlockClick: React.EventHandler<React.MouseEvent> = (e) => {
@@ -281,7 +281,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
 
   handleOpen: React.EventHandler<React.MouseEvent> = (e) => {
     e.stopPropagation();
-    this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.get('id')}`);
+    this.props.history.push(`/@${this.props.status.getIn(['account', 'acct'])}/posts/${this.props.status.id}`);
   }
 
   handleEmbed = () => {
@@ -299,7 +299,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
   }
 
   handleCopy: React.EventHandler<React.MouseEvent> = (e) => {
-    const url      = this.props.status.get('url');
+    const { url }  = this.props.status;
     const textarea = document.createElement('textarea');
 
     e.stopPropagation();
@@ -332,7 +332,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
   //
   //   e.stopPropagation();
   //
-  //   this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.get('id'));
+  //   this.props.onGroupRemoveStatus(status.getIn(['group', 'id']), status.id);
   // }
 
   handleDeactivateUser: React.EventHandler<React.MouseEvent> = (e) => {
@@ -364,7 +364,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
 
   _makeMenu = (publicStatus: boolean) => {
     const { status, intl, withDismiss, me, features, isStaff, isAdmin } = this.props;
-    const mutingConversation = status.get('muted');
+    const mutingConversation = status.muted;
     const ownAccount = status.getIn(['account', 'id']) === me;
     const username = String(status.getIn(['account', 'username']));
 
@@ -395,9 +395,9 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
 
     if (features.bookmarks) {
       menu.push({
-        text: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark),
+        text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: this.handleBookmarkClick,
-        icon: require(status.get('bookmarked') ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
+        icon: require(status.bookmarked ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
       });
     }
 
@@ -415,14 +415,14 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     if (ownAccount) {
       if (publicStatus) {
         menu.push({
-          text: intl.formatMessage(status.get('pinned') ? messages.unpin : messages.pin),
+          text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: this.handlePinClick,
           icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
         });
       } else {
-        if (status.get('visibility') === 'private') {
+        if (status.visibility === 'private') {
           menu.push({
-            text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog_private),
+            text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: this.handleReblogClick,
             icon: require('@tabler/icons/icons/repeat.svg'),
           });
@@ -492,14 +492,14 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
-          href: `/pleroma/admin/#/statuses/${status.get('id')}/`,
+          href: `/pleroma/admin/#/statuses/${status.id}/`,
           icon: require('@tabler/icons/icons/pencil.svg'),
           action: (event) => event.stopPropagation(),
         });
       }
 
       menu.push({
-        text: intl.formatMessage(status.get('sensitive') === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
+        text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: this.handleToggleStatusSensitivity,
         icon: require('@tabler/icons/icons/alert-triangle.svg'),
       });
@@ -558,11 +558,11 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
   render() {
     const { status, intl, allowedEmoji, emojiSelectorFocused, handleEmojiSelectorUnfocus, features, me } = this.props;
 
-    const publicStatus = ['public', 'unlisted'].includes(status.get('visibility'));
+    const publicStatus = ['public', 'unlisted'].includes(status.visibility);
 
-    const replyCount = status.get('replies_count');
-    const reblogCount = status.get('reblogs_count');
-    const favouriteCount = status.get('favourites_count');
+    const replyCount = status.replies_count;
+    const reblogCount = status.reblogs_count;
+    const favouriteCount = status.favourites_count;
     const emojiReactCount = reduceEmoji(
       (status.getIn(['pleroma', 'emoji_reactions']) || ImmutableList()) as ImmutableList<any>,
       favouriteCount,
@@ -583,9 +583,9 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     let reblogIcon = require('@tabler/icons/icons/repeat.svg');
     let replyTitle;
 
-    if (status.get('visibility') === 'direct') {
+    if (status.visibility === 'direct') {
       reblogIcon = require('@tabler/icons/icons/mail.svg');
-    } else if (status.get('visibility') === 'private') {
+    } else if (status.visibility === 'private') {
       reblogIcon = require('@tabler/icons/icons/lock.svg');
     }
 
@@ -594,7 +594,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     if (me && features.quotePosts) {
       const reblogMenu = [
         {
-          text: intl.formatMessage(status.get('reblogged') ? messages.cancel_reblog_private : messages.reblog),
+          text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
           action: this.handleReblogClick,
           icon: require('@tabler/icons/icons/repeat.svg'),
         },
@@ -631,13 +631,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       );
     }
 
-    if (status.get('in_reply_to_id', null) === null) {
+    if (!status.in_reply_to_id) {
       replyTitle = intl.formatMessage(messages.reply);
     } else {
       replyTitle = intl.formatMessage(messages.replyAll);
     }
 
-    const canShare = ('share' in navigator) && status.get('visibility') === 'public';
+    const canShare = ('share' in navigator) && status.visibility === 'public';
 
     return (
       <div className='pt-4 flex flex-row space-x-2'>

From bd98842434dc32f8cc2fdb166e67ff5ac346d759 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Apr 2022 18:43:34 -0500
Subject: [PATCH 27/29] Refactor StatusActionButton

---
 app/soapbox/components/dropdown_menu.tsx      |  50 +++---
 .../{ui/hoverable => }/hoverable.tsx          |   2 +-
 .../components/status-action-button.tsx       |  81 +++++++++
 app/soapbox/components/status_action_bar.tsx  | 158 +++++++-----------
 app/soapbox/components/ui/index.ts            |   1 -
 .../ui/status/status-action-button.tsx        |  77 ---------
 6 files changed, 174 insertions(+), 195 deletions(-)
 rename app/soapbox/components/{ui/hoverable => }/hoverable.tsx (97%)
 create mode 100644 app/soapbox/components/status-action-button.tsx
 delete mode 100644 app/soapbox/components/ui/status/status-action-button.tsx

diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index 7d13d6829..d3efa6865 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -223,12 +223,12 @@ const RouterDropdownMenu = withRouter(DropdownMenu);
 
 export interface IDropdown extends RouteComponentProps {
   icon?: string,
-  src: string,
+  src?: string,
   items: Menu,
   size?: number,
   active?: boolean,
   pressed?: boolean,
-  title: string,
+  title?: string,
   disabled?: boolean,
   status?: Status,
   isUserTouching?: () => boolean,
@@ -245,6 +245,7 @@ export interface IDropdown extends RouteComponentProps {
   openedViaKeyboard?: boolean,
   text?: string,
   onShiftClick?: React.EventHandler<React.MouseEvent | React.KeyboardEvent>,
+  children?: JSX.Element,
 }
 
 interface IDropdownState {
@@ -355,27 +356,38 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
   }
 
   render() {
-    const { src, items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text } = this.props;
+    const { src = require('@tabler/icons/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (
       <>
-        <IconButton
-          disabled={disabled}
-          className={classNames({
-            'text-gray-400 hover:text-gray-600': true,
-            'text-gray-600': open,
-          })}
-          title={title}
-          src={src}
-          aria-pressed={pressed}
-          text={text}
-          onClick={this.handleClick}
-          onMouseDown={this.handleMouseDown}
-          onKeyDown={this.handleButtonKeyDown}
-          onKeyPress={this.handleKeyPress}
-          ref={this.setTargetRef}
-        />
+        {children ? (
+          React.cloneElement(children, {
+            disabled,
+            onClick: this.handleClick,
+            onMouseDown: this.handleMouseDown,
+            onKeyDown: this.handleButtonKeyDown,
+            onKeyPress: this.handleKeyPress,
+            ref: this.setTargetRef,
+          })
+        ) : (
+          <IconButton
+            disabled={disabled}
+            className={classNames({
+              'text-gray-400 hover:text-gray-600': true,
+              'text-gray-600': open,
+            })}
+            title={title}
+            src={src}
+            aria-pressed={pressed}
+            text={text}
+            onClick={this.handleClick}
+            onMouseDown={this.handleMouseDown}
+            onKeyDown={this.handleButtonKeyDown}
+            onKeyPress={this.handleKeyPress}
+            ref={this.setTargetRef}
+          />
+        )}
 
         <Overlay show={open} placement={dropdownPlacement} target={this.findTarget}>
           <RouterDropdownMenu items={items} onClose={this.handleClose} openedViaKeyboard={openedViaKeyboard} />
diff --git a/app/soapbox/components/ui/hoverable/hoverable.tsx b/app/soapbox/components/hoverable.tsx
similarity index 97%
rename from app/soapbox/components/ui/hoverable/hoverable.tsx
rename to app/soapbox/components/hoverable.tsx
index c7d884dc7..751c413c1 100644
--- a/app/soapbox/components/ui/hoverable/hoverable.tsx
+++ b/app/soapbox/components/hoverable.tsx
@@ -3,7 +3,7 @@ import React, { useState, useRef } from 'react';
 import { usePopper } from 'react-popper';
 
 interface IHoverable {
-  component: React.Component,
+  component: JSX.Element,
 }
 
 /** Wrapper to render a given component when hovered */
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
new file mode 100644
index 000000000..0a07feb66
--- /dev/null
+++ b/app/soapbox/components/status-action-button.tsx
@@ -0,0 +1,81 @@
+import classNames from 'classnames';
+import React from 'react';
+import InlineSVG from 'react-inlinesvg';
+
+import { Text } from 'soapbox/components/ui';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+
+const COLORS = {
+  accent: 'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300',
+  success: 'text-success-600 hover:text-success-600 dark:hover:text-success-600',
+  '': '',
+};
+
+const FILL_COLORS = {
+  accent: 'fill-accent-300 hover:fill-accent-300',
+  '': '',
+};
+
+type Color = keyof typeof COLORS;
+type FillColor = keyof typeof FILL_COLORS;
+
+interface IStatusActionCounter {
+  count: number,
+}
+
+/** Action button numerical counter, eg "5" likes */
+const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
+  return (
+    <Text size='xs' weight='semibold' theme='inherit'>
+      {shortNumberFormat(count)}
+    </Text>
+  );
+};
+
+interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  iconClassName?: string,
+  icon: string,
+  count?: number,
+  active?: boolean,
+  color?: Color,
+  fill?: FillColor,
+}
+
+const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
+  const { icon, className, iconClassName, active, color = '', fill = '', count = 0, ...filteredProps } = props;
+
+  return (
+    <button
+      ref={ref}
+      type='button'
+      className={classNames(
+        'group flex items-center p-1 space-x-0.5 rounded-full',
+        'text-gray-400 hover:text-gray-600 dark:hover:text-white',
+        'bg-white dark:bg-transparent',
+        {
+          [COLORS[color]]: active,
+        },
+        className,
+      )}
+      {...filteredProps}
+    >
+      <InlineSVG
+        src={icon}
+        className={classNames(
+          'p-1 rounded-full box-content',
+          'group-focus:outline-none group-focus:ring-2 group-focus:ring-offset-2 dark:ring-offset-0 group-focus:ring-primary-500',
+          {
+            [FILL_COLORS[fill]]: active,
+          },
+          iconClassName,
+        )}
+      />
+
+      {(count || null) && (
+        <StatusActionCounter count={count} />
+      )}
+    </button>
+  );
+});
+
+export default StatusActionButton;
diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index 3900118e9..013ba980e 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -1,4 +1,3 @@
-import classNames from 'classnames';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -8,11 +7,8 @@ import { withRouter } from 'react-router-dom';
 
 import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import EmojiSelector from 'soapbox/components/emoji_selector';
-import {
-  StatusAction,
-  StatusActionButton,
-  StatusActionCounter,
-} from 'soapbox/components/ui/status/status-action-button';
+import Hoverable from 'soapbox/components/hoverable';
+import StatusActionButton from 'soapbox/components/status-action-button';
 import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { getReactForStatus, reduceEmoji } from 'soapbox/utils/emoji_reacts';
@@ -20,8 +16,6 @@ import { getFeatures } from 'soapbox/utils/features';
 
 import { openModal } from '../actions/modals';
 
-import { IconButton, Hoverable } from './ui';
-
 import type { History } from 'history';
 import type { AnyAction, Dispatch } from 'redux';
 import type { Menu } from 'soapbox/components/dropdown_menu';
@@ -171,7 +165,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     }
   }
 
-  handleLikeButtonClick = () => {
+  handleLikeButtonClick: React.EventHandler<React.MouseEvent> = (e) => {
     const { features } = this.props;
 
     const reactForStatus = getReactForStatus(this.props.status, this.props.allowedEmoji);
@@ -186,6 +180,8 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     } else {
       this.handleReact(meEmojiReact);
     }
+
+    e.stopPropagation();
   }
 
   handleReact = (emoji: string): void => {
@@ -204,13 +200,15 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     };
   }
 
-  handleFavouriteClick: React.EventHandler<React.MouseEvent> = () => {
+  handleFavouriteClick: React.EventHandler<React.MouseEvent> = (e) => {
     const { me, onFavourite, onOpenUnauthorizedModal, status } = this.props;
     if (me) {
       onFavourite(status);
     } else {
       onOpenUnauthorizedModal('FAVOURITE');
     }
+
+    e.stopPropagation();
   }
 
   handleBookmarkClick: React.EventHandler<React.MouseEvent> = (e) => {
@@ -589,47 +587,30 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       reblogIcon = require('@tabler/icons/icons/lock.svg');
     }
 
-    let reblogButton;
+    const reblogMenu = [
+      {
+        text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
+        action: this.handleReblogClick,
+        icon: require('@tabler/icons/icons/repeat.svg'),
+      },
+      {
+        text: intl.formatMessage(messages.quotePost),
+        action: this.handleQuoteClick,
+        icon: require('@tabler/icons/icons/quote.svg'),
+      },
+    ];
 
-    if (me && features.quotePosts) {
-      const reblogMenu = [
-        {
-          text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
-          action: this.handleReblogClick,
-          icon: require('@tabler/icons/icons/repeat.svg'),
-        },
-        {
-          text: intl.formatMessage(messages.quotePost),
-          action: this.handleQuoteClick,
-          icon: require('@tabler/icons/icons/quote.svg'),
-        },
-      ];
-
-      reblogButton = (
-        <DropdownMenuContainer
-          items={reblogMenu}
-          disabled={!publicStatus}
-          active={status.reblogged}
-          pressed={status.reblogged}
-          title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
-          src={reblogIcon}
-          onShiftClick={this.handleReblogClick}
-        />
-      );
-    } else {
-      reblogButton = (
-        <IconButton
-          disabled={!publicStatus}
-          className={classNames({
-            'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !status.reblogged,
-            'text-success-600 group-hover:text-success-600': status.reblogged,
-          })}
-          title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
-          src={reblogIcon}
-          onClick={this.handleReblogClick}
-        />
-      );
-    }
+    const reblogButton = (
+      <StatusActionButton
+        icon={reblogIcon}
+        color='success'
+        disabled={!publicStatus}
+        title={!publicStatus ? intl.formatMessage(messages.cannot_reblog) : intl.formatMessage(messages.reblog)}
+        active={status.reblogged}
+        onClick={this.handleReblogClick}
+        count={reblogCount}
+      />
+    );
 
     if (!status.in_reply_to_id) {
       replyTitle = intl.formatMessage(messages.reply);
@@ -648,55 +629,40 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           count={replyCount}
         />
 
-        <StatusAction>
-          {reblogButton}
-          {reblogCount > 0 && (
-            <StatusActionCounter count={reblogCount} />
-          )}
-        </StatusAction>
+        {features.quotePosts && me ? (
+          <DropdownMenuContainer items={reblogMenu} onShiftClick={this.handleReblogClick}>
+            {reblogButton}
+          </DropdownMenuContainer>
+        ) : (
+          reblogButton
+        )}
 
         {features.emojiReacts ? (
-          <div
-            ref={this.setRef}
-            className='group flex relative items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'
-          >
-            <Hoverable
-              component={(
-                <EmojiSelector
-                  onReact={this.handleReact}
-                  focused={emojiSelectorFocused}
-                  onUnfocus={handleEmojiSelectorUnfocus}
-                /> as any
-              )}
-            >
-              <IconButton
-                className={classNames({
-                  'text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white': !meEmojiReact,
-                  'text-accent-300 group-hover:text-accent-300': Boolean(meEmojiReact),
-                })}
-                title={meEmojiTitle}
-                src={require('@tabler/icons/icons/heart.svg')}
-                iconClassName={classNames({
-                  'fill-accent-300': Boolean(meEmojiReact),
-                })}
-                // emoji={meEmojiReact}
-                onClick={this.handleLikeButtonClick}
+          <Hoverable
+            component={(
+              <EmojiSelector
+                onReact={this.handleReact}
+                focused={emojiSelectorFocused}
+                onUnfocus={handleEmojiSelectorUnfocus}
               />
-            </Hoverable>
-
-            {emojiReactCount > 0 && (
-              (features.exposableReactions && !features.emojiReacts) ? (
-                <StatusActionCounter count={emojiReactCount} />
-              ) : (
-                <StatusActionCounter count={emojiReactCount} />
-              )
             )}
-          </div>
+          >
+            <StatusActionButton
+              title={meEmojiTitle}
+              icon={require('@tabler/icons/icons/thumb-up.svg')}
+              color='accent'
+              onClick={this.handleLikeButtonClick}
+              active={Boolean(meEmojiReact)}
+              count={emojiReactCount}
+            />
+          </Hoverable>
         ): (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
             icon={require('@tabler/icons/icons/heart.svg')}
-            onClick={this.handleLikeButtonClick}
+            color='accent'
+            fill='accent'
+            onClick={this.handleFavouriteClick}
             active={Boolean(meEmojiReact)}
             count={favouriteCount}
           />
@@ -710,14 +676,12 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           />
         )}
 
-        <StatusAction>
-          <DropdownMenuContainer
-            items={menu}
+        <DropdownMenuContainer items={menu} status={status}>
+          <StatusActionButton
             title={intl.formatMessage(messages.more)}
-            status={status}
-            src={require('@tabler/icons/icons/dots.svg')}
+            icon={require('@tabler/icons/icons/dots.svg')}
           />
-        </StatusAction>
+        </DropdownMenuContainer>
       </div>
     );
   }
diff --git a/app/soapbox/components/ui/index.ts b/app/soapbox/components/ui/index.ts
index 3aa272def..fa60595f5 100644
--- a/app/soapbox/components/ui/index.ts
+++ b/app/soapbox/components/ui/index.ts
@@ -7,7 +7,6 @@ export { default as EmojiSelector } from './emoji-selector/emoji-selector';
 export { default as Form } from './form/form';
 export { default as FormActions } from './form-actions/form-actions';
 export { default as FormGroup } from './form-group/form-group';
-export { default as Hoverable } from './hoverable/hoverable';
 export { default as HStack } from './hstack/hstack';
 export { default as Icon } from './icon/icon';
 export { default as IconButton } from './icon-button/icon-button';
diff --git a/app/soapbox/components/ui/status/status-action-button.tsx b/app/soapbox/components/ui/status/status-action-button.tsx
deleted file mode 100644
index 635e0dbe9..000000000
--- a/app/soapbox/components/ui/status/status-action-button.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-
-import { IconButton } from 'soapbox/components/ui';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
-
-interface IStatusActionCounter {
-  count: number,
-  className?: string,
-}
-
-/** Action button numerical counter, eg "5" likes */
-const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0, className }): JSX.Element => {
-  return (
-    <span className={classNames('text-xs font-semibold text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', className)}>
-      {shortNumberFormat(count)}
-    </span>
-  );
-};
-
-interface IStatusAction {
-  title?: string,
-}
-
-/** Status action container element */
-const StatusAction: React.FC<IStatusAction> = ({ title, children }) => {
-  return (
-    <div title={title} className='group flex items-center space-x-0.5 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500'>
-      {children}
-    </div>
-  );
-};
-
-interface IStatusActionButton {
-  icon: string,
-  onClick: () => void,
-  count?: number,
-  active?: boolean,
-  title?: string,
-}
-
-/** Action button (eg "Like") for a Status */
-const StatusActionButton: React.FC<IStatusActionButton> = ({ icon, title, active = false, onClick, count = 0 }): JSX.Element => {
-
-  const handleClick: React.EventHandler<React.MouseEvent> = (e) => {
-    onClick();
-    e.stopPropagation();
-    e.preventDefault();
-  };
-
-  return (
-    <StatusAction title={title}>
-      <IconButton
-        title={title}
-        src={icon}
-        onClick={handleClick}
-        className={classNames('text-gray-400 group-hover:text-gray-600 dark:group-hover:text-white', {
-          'text-accent-300 group-hover:text-accent-300 dark:group-hover:text-accent-300': active,
-          // TODO: repost button
-          // 'text-success-600 hover:text-success-600': active,
-        })}
-        iconClassName={classNames({
-          'fill-accent-300': active,
-        })}
-      />
-
-      {(count || null) && (
-        <StatusActionCounter
-          className={classNames({ 'text-accent-300 group-hover:text-accent-300': active })}
-          count={count}
-        />
-      )}
-    </StatusAction>
-  );
-};
-
-export { StatusAction, StatusActionButton, StatusActionCounter };

From cc1b478e3f80b950fc578ef5b5c45b2ab9a9a8b0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Apr 2022 20:14:46 -0500
Subject: [PATCH 28/29] StatusActionButton: change the way color props work

---
 .../components/status-action-button.tsx       | 20 +++++++------------
 app/soapbox/components/status_action_bar.tsx  |  2 +-
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 0a07feb66..8095e4c7a 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -6,18 +6,11 @@ import { Text } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 const COLORS = {
-  accent: 'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300',
-  success: 'text-success-600 hover:text-success-600 dark:hover:text-success-600',
-  '': '',
-};
-
-const FILL_COLORS = {
-  accent: 'fill-accent-300 hover:fill-accent-300',
-  '': '',
+  accent: 'accent',
+  success: 'success',
 };
 
 type Color = keyof typeof COLORS;
-type FillColor = keyof typeof FILL_COLORS;
 
 interface IStatusActionCounter {
   count: number,
@@ -38,11 +31,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   count?: number,
   active?: boolean,
   color?: Color,
-  fill?: FillColor,
+  filled?: boolean,
 }
 
 const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
-  const { icon, className, iconClassName, active, color = '', fill = '', count = 0, ...filteredProps } = props;
+  const { icon, className, iconClassName, active, color, filled = false, count = 0, ...filteredProps } = props;
 
   return (
     <button
@@ -53,7 +46,8 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
         'text-gray-400 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
         {
-          [COLORS[color]]: active,
+          'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && color === COLORS.accent,
+          'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && color === COLORS.success,
         },
         className,
       )}
@@ -65,7 +59,7 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
           'p-1 rounded-full box-content',
           'group-focus:outline-none group-focus:ring-2 group-focus:ring-offset-2 dark:ring-offset-0 group-focus:ring-primary-500',
           {
-            [FILL_COLORS[fill]]: active,
+            'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
           },
           iconClassName,
         )}
diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index 013ba980e..0b9bc9f9c 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -661,7 +661,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
             title={intl.formatMessage(messages.favourite)}
             icon={require('@tabler/icons/icons/heart.svg')}
             color='accent'
-            fill='accent'
+            filled
             onClick={this.handleFavouriteClick}
             active={Boolean(meEmojiReact)}
             count={favouriteCount}

From d738e7d5bfafa6b19488059cb7d411e15aefd671 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 2 Apr 2022 21:40:47 -0500
Subject: [PATCH 29/29] Fix tests

---
 app/soapbox/components/status_action_bar.tsx  | 32 ++++++++++---------
 app/soapbox/utils/__tests__/accounts-test.js  | 30 ++++++++---------
 .../utils/__tests__/emoji_reacts-test.js      |  6 ++--
 app/soapbox/utils/emoji_reacts.ts             | 10 +++---
 4 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/app/soapbox/components/status_action_bar.tsx b/app/soapbox/components/status_action_bar.tsx
index 0b9bc9f9c..d2d3855bb 100644
--- a/app/soapbox/components/status_action_bar.tsx
+++ b/app/soapbox/components/status_action_bar.tsx
@@ -561,21 +561,26 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     const replyCount = status.replies_count;
     const reblogCount = status.reblogs_count;
     const favouriteCount = status.favourites_count;
+
     const emojiReactCount = reduceEmoji(
       (status.getIn(['pleroma', 'emoji_reactions']) || ImmutableList()) as ImmutableList<any>,
       favouriteCount,
       status.favourited,
       allowedEmoji,
     ).reduce((acc, cur) => acc + cur.get('count'), 0);
-    const meEmojiReact = getReactForStatus(status, allowedEmoji);
-    const meEmojiTitle = intl.formatMessage({
+
+    const meEmojiReact = getReactForStatus(status, allowedEmoji) as keyof typeof reactMessages | undefined;
+
+    const reactMessages = {
       '👍': messages.reactionLike,
       '❤️': messages.reactionHeart,
       '😆': messages.reactionLaughing,
       '😮': messages.reactionOpenMouth,
       '😢': messages.reactionCry,
       '😩': messages.reactionWeary,
-    }[meEmojiReact] || messages.favourite);
+    };
+
+    const meEmojiTitle = intl.formatMessage(meEmojiReact ? reactMessages[meEmojiReact] : messages.favourite);
 
     const menu = this._makeMenu(publicStatus);
     let reblogIcon = require('@tabler/icons/icons/repeat.svg');
@@ -587,18 +592,15 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       reblogIcon = require('@tabler/icons/icons/lock.svg');
     }
 
-    const reblogMenu = [
-      {
-        text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
-        action: this.handleReblogClick,
-        icon: require('@tabler/icons/icons/repeat.svg'),
-      },
-      {
-        text: intl.formatMessage(messages.quotePost),
-        action: this.handleQuoteClick,
-        icon: require('@tabler/icons/icons/quote.svg'),
-      },
-    ];
+    const reblogMenu = [{
+      text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
+      action: this.handleReblogClick,
+      icon: require('@tabler/icons/icons/repeat.svg'),
+    }, {
+      text: intl.formatMessage(messages.quotePost),
+      action: this.handleQuoteClick,
+      icon: require('@tabler/icons/icons/quote.svg'),
+    }];
 
     const reblogButton = (
       <StatusActionButton
diff --git a/app/soapbox/utils/__tests__/accounts-test.js b/app/soapbox/utils/__tests__/accounts-test.js
index 6d0d3cedd..cafedce35 100644
--- a/app/soapbox/utils/__tests__/accounts-test.js
+++ b/app/soapbox/utils/__tests__/accounts-test.js
@@ -1,15 +1,15 @@
-// import { fromJS } from 'immutable';
-//
-// import {
-//   getDomain,
-// } from '../accounts';
-//
-// describe('getDomain', () => {
-//   const account = fromJS({
-//     acct: 'alice',
-//     url: 'https://party.com/users/alice',
-//   });
-//   it('returns the domain', () => {
-//     expect(getDomain(account)).toEqual('party.com');
-//   });
-// });
+import { AccountRecord } from 'soapbox/normalizers';
+
+import {
+  getDomain,
+} from '../accounts';
+
+describe('getDomain', () => {
+  const account = AccountRecord({
+    acct: 'alice',
+    url: 'https://party.com/users/alice',
+  });
+  it('returns the domain', () => {
+    expect(getDomain(account)).toEqual('party.com');
+  });
+});
diff --git a/app/soapbox/utils/__tests__/emoji_reacts-test.js b/app/soapbox/utils/__tests__/emoji_reacts-test.js
index c4b05960c..d67744fef 100644
--- a/app/soapbox/utils/__tests__/emoji_reacts-test.js
+++ b/app/soapbox/utils/__tests__/emoji_reacts-test.js
@@ -11,14 +11,14 @@ import {
   simulateUnEmojiReact,
 } from '../emoji_reacts';
 
-const ALLOWED_EMOJI = [
+const ALLOWED_EMOJI = fromJS([
   '👍',
   '❤',
   '😂',
   '😯',
   '😢',
   '😡',
-];
+]);
 
 describe('filterEmoji', () => {
   describe('with a mix of allowed and disallowed emoji', () => {
@@ -168,7 +168,7 @@ describe('getReactForStatus', () => {
   });
 
   it('returns undefined when a status has no reacts (or favourites)', () => {
-    const status = fromJS([]);
+    const status = fromJS({});
     expect(getReactForStatus(status)).toEqual(undefined);
   });
 
diff --git a/app/soapbox/utils/emoji_reacts.ts b/app/soapbox/utils/emoji_reacts.ts
index 3b3fc05d9..9662c8458 100644
--- a/app/soapbox/utils/emoji_reacts.ts
+++ b/app/soapbox/utils/emoji_reacts.ts
@@ -80,21 +80,23 @@ export const reduceEmoji = (emojiReacts: ImmutableList<EmojiReact>, favouritesCo
     emojiReacts, favouritesCount, favourited,
   ))), allowedEmoji));
 
-export const getReactForStatus = (status: any, allowedEmoji=ALLOWED_EMOJI): string => {
-  return String(reduceEmoji(
+export const getReactForStatus = (status: any, allowedEmoji=ALLOWED_EMOJI): string | undefined => {
+  const result = reduceEmoji(
     status.getIn(['pleroma', 'emoji_reactions'], ImmutableList()),
     status.get('favourites_count', 0),
     status.get('favourited'),
     allowedEmoji,
   ).filter(e => e.get('me') === true)
-    .getIn([0, 'name'], ''));
+    .getIn([0, 'name']);
+
+  return typeof result === 'string' ? result : undefined;
 };
 
 export const simulateEmojiReact = (emojiReacts: ImmutableList<EmojiReact>, emoji: string) => {
   const idx = emojiReacts.findIndex(e => e.get('name') === emoji);
   const emojiReact = emojiReacts.get(idx);
 
-  if (emojiReact) {
+  if (idx > -1 && emojiReact) {
     return emojiReacts.set(idx, emojiReact.merge({
       count: emojiReact.get('count') + 1,
       me: true,