diff --git a/.eslintrc.js b/.eslintrc.js
index 8394d98b9c..9e965791b0 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -4,10 +4,12 @@ module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
     'plugin:jsx-a11y/recommended',
     'plugin:import/recommended',
     'plugin:promise/recommended',
     'plugin:jsdoc/recommended',
+    'plugin:prettier/recommended',
   ],
 
   env: {
@@ -61,20 +63,9 @@ module.exports = {
   },
 
   rules: {
-    'brace-style': 'warn',
-    'comma-dangle': ['error', 'always-multiline'],
-    'comma-spacing': [
-      'warn',
-      {
-        before: false,
-        after: true,
-      },
-    ],
-    'comma-style': ['warn', 'last'],
     'consistent-return': 'error',
     'dot-notation': 'error',
     eqeqeq: ['error', 'always', { 'null': 'ignore' }],
-    indent: ['warn', 2],
     'jsx-quotes': ['error', 'prefer-single'],
     'no-case-declarations': 'off',
     'no-catch-shadow': 'error',
@@ -94,7 +85,6 @@ module.exports = {
       { property: 'substr', message: 'Use .slice instead of .substr.' },
     ],
     'no-self-assign': 'off',
-    'no-trailing-spaces': 'warn',
     'no-unused-expressions': 'error',
     'no-unused-vars': 'off',
     '@typescript-eslint/no-unused-vars': [
@@ -102,32 +92,18 @@ module.exports = {
       {
         vars: 'all',
         args: 'after-used',
+        destructuredArrayIgnorePattern: '^_',
         ignoreRestSiblings: true,
       },
     ],
-    'object-curly-spacing': ['error', 'always'],
-    'padded-blocks': [
-      'error',
-      {
-        classes: 'always',
-      },
-    ],
-    quotes: ['error', 'single'],
-    semi: 'error',
     'valid-typeof': 'error',
 
     'react/jsx-filename-extension': ['error', { extensions: ['.jsx', 'tsx'] }],
     'react/jsx-boolean-value': 'error',
-    'react/jsx-closing-bracket-location': ['error', 'line-aligned'],
-    'react/jsx-curly-spacing': 'error',
     'react/display-name': 'off',
     'react/jsx-equals-spacing': 'error',
-    'react/jsx-first-prop-new-line': ['error', 'multiline-multiprop'],
-    'react/jsx-indent': ['error', 2],
     'react/jsx-no-bind': 'error',
     'react/jsx-no-target-blank': 'off',
-    'react/jsx-tag-spacing': 'error',
-    'react/jsx-wrap-multilines': 'error',
     'react/no-deprecated': 'off',
     'react/no-unknown-property': 'off',
     'react/self-closing-comp': 'error',
@@ -208,6 +184,9 @@ module.exports = {
         ],
       },
     ],
+    'import/no-amd': 'error',
+    'import/no-commonjs': 'error',
+    'import/no-import-module-exports': 'error',
     'import/no-webpack-loader-syntax': 'error',
 
     'promise/always-return': 'off',
@@ -255,6 +234,7 @@ module.exports = {
         '*.config.js',
         '.*rc.js',
         'ide-helper.js',
+        'config/webpack/**/*',
       ],
 
       env: {
@@ -264,6 +244,10 @@ module.exports = {
       parserOptions: {
         sourceType: 'script',
       },
+
+      rules: {
+        'import/no-commonjs': 'off',
+      },
     },
     {
       files: [
@@ -275,17 +259,25 @@ module.exports = {
         'eslint:recommended',
         'plugin:@typescript-eslint/recommended',
         'plugin:react/recommended',
+        'plugin:react-hooks/recommended',
         'plugin:jsx-a11y/recommended',
         'plugin:import/recommended',
         'plugin:import/typescript',
         'plugin:promise/recommended',
         'plugin:jsdoc/recommended',
+        'plugin:prettier/recommended',
       ],
 
       rules: {
         '@typescript-eslint/no-explicit-any': 'off',
 
         'jsdoc/require-jsdoc': 'off',
+
+        // Those rules set stricter rules for TS files
+        // to enforce better practices when converting from JS
+        'import/no-default-export': 'warn',
+        'react/prefer-stateless-function': 'warn',
+        'react/function-component-definition': ['error', { namedComponents: 'arrow-function' }],
       },
     },
     {
@@ -298,5 +290,13 @@ module.exports = {
         jest: true,
       },
     },
+    {
+      files: [
+        'streaming/**/*',
+      ],
+      rules: {
+        'import/no-commonjs': 'off',
+      },
+    },
   ],
 };
diff --git a/.prettierignore b/.prettierignore
index 36ba57bfb5..af0411e9cc 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -70,8 +70,6 @@ app/javascript/styles/mastodon/reset.scss
 # Ignore Javascript pending https://github.com/mastodon/mastodon/pull/23631
 *.js
 *.jsx
-*.ts
-*.tsx
 
 # Ignore HTML till cleaned and included in CI
 *.html
diff --git a/.prettierrc.js b/.prettierrc.js
index 1d70813d51..af39b253f6 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,3 +1,4 @@
 module.exports = {
-  singleQuote: true
+  singleQuote: true,
+  jsxSingleQuote: true
 }
diff --git a/.rubocop.yml b/.rubocop.yml
index 966a2a43db..ceade6e582 100644
--- a/.rubocop.yml
+++ b/.rubocop.yml
@@ -157,7 +157,7 @@ Metrics/MethodLength:
     - 'lib/mastodon/*_cli.rb'
 
 # Reason:
-# https://docs.rubocop.org/rubocop/cops_style.html#stylerescuestandarderror
+# https://docs.rubocop.org/rubocop/cops_metrics.html#metricsmodulelength
 Metrics/ModuleLength:
   CountAsOne: [array, heredoc]
 
diff --git a/app/javascript/core/mailer.js b/app/javascript/core/mailer.js
index a4b6d54464..a2ad5e73ac 100644
--- a/app/javascript/core/mailer.js
+++ b/app/javascript/core/mailer.js
@@ -1,3 +1,3 @@
-require('../styles/mailer.scss');
+import '../styles/mailer.scss';
 
 require.context('../icons');
diff --git a/app/javascript/core/public.js b/app/javascript/core/public.js
index 4fdda5c3e6..01b4157f8c 100644
--- a/app/javascript/core/public.js
+++ b/app/javascript/core/public.js
@@ -2,7 +2,7 @@
 
 import 'packs/public-path';
 
-const { delegate } = require('@rails/ujs');
+import { delegate } from '@rails/ujs';
 
 const getProfileAvatarAnimationHandler = (swapTo) => {
   //animate avatar gifs on the profile page when moused over
diff --git a/app/javascript/core/settings.js b/app/javascript/core/settings.js
index d578463a33..c6cf6704c3 100644
--- a/app/javascript/core/settings.js
+++ b/app/javascript/core/settings.js
@@ -3,7 +3,7 @@
 import 'packs/public-path';
 import escapeTextContentForBrowser from 'escape-html';
 
-const { delegate } = require('@rails/ujs');
+import { delegate } from '@rails/ujs';
 
 import emojify from '../mastodon/features/emoji/emoji';
 
diff --git a/app/javascript/flavours/glitch/actions/app.ts b/app/javascript/flavours/glitch/actions/app.ts
index 1fc4416090..46b2cdf93c 100644
--- a/app/javascript/flavours/glitch/actions/app.ts
+++ b/app/javascript/flavours/glitch/actions/app.ts
@@ -1,7 +1,8 @@
 import { createAction } from '@reduxjs/toolkit';
+import type { LayoutType } from '../is_mobile';
 
 type ChangeLayoutPayload = {
-  layout: 'mobile' | 'single-column' | 'multi-column';
+  layout: LayoutType;
 };
 export const changeLayout =
   createAction<ChangeLayoutPayload>('APP_LAYOUT_CHANGE');
diff --git a/app/javascript/flavours/glitch/actions/markers.js b/app/javascript/flavours/glitch/actions/markers.js
index f826753426..8fd9da405e 100644
--- a/app/javascript/flavours/glitch/actions/markers.js
+++ b/app/javascript/flavours/glitch/actions/markers.js
@@ -1,6 +1,6 @@
 import api from '../api';
 import { debounce } from 'lodash';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 import { List as ImmutableList } from 'immutable';
 
 export const MARKERS_FETCH_REQUEST = 'MARKERS_FETCH_REQUEST';
diff --git a/app/javascript/flavours/glitch/actions/notifications.js b/app/javascript/flavours/glitch/actions/notifications.js
index 989bc41444..c044ea927f 100644
--- a/app/javascript/flavours/glitch/actions/notifications.js
+++ b/app/javascript/flavours/glitch/actions/notifications.js
@@ -13,7 +13,7 @@ import { defineMessages } from 'react-intl';
 import { List as ImmutableList } from 'immutable';
 import { unescapeHTML } from 'flavours/glitch/utils/html';
 import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
-import compareId from 'flavours/glitch/compare_id';
+import { compareId } from 'flavours/glitch/compare_id';
 import { requestNotificationPermission } from 'flavours/glitch/utils/notifications';
 
 export const NOTIFICATIONS_UPDATE = 'NOTIFICATIONS_UPDATE';
diff --git a/app/javascript/flavours/glitch/actions/streaming.js b/app/javascript/flavours/glitch/actions/streaming.js
index dbf668ccbd..b4eb60ad4e 100644
--- a/app/javascript/flavours/glitch/actions/streaming.js
+++ b/app/javascript/flavours/glitch/actions/streaming.js
@@ -52,8 +52,10 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
     /**
      * @param {function(Function, Function): void} fallback
      */
+
     const useFallback = fallback => {
       fallback(dispatch, () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
         pollingId = setTimeout(() => useFallback(fallback), 20000 + randomUpTo(20000));
       });
     };
diff --git a/app/javascript/flavours/glitch/actions/timelines.js b/app/javascript/flavours/glitch/actions/timelines.js
index bde96c504b..603759760b 100644
--- a/app/javascript/flavours/glitch/actions/timelines.js
+++ b/app/javascript/flavours/glitch/actions/timelines.js
@@ -2,7 +2,7 @@ import { importFetchedStatus, importFetchedStatuses } from './importer';
 import { submitMarkers } from './markers';
 import api, { getLinks } from 'flavours/glitch/api';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import compareId from 'flavours/glitch/compare_id';
+import { compareId } from 'flavours/glitch/compare_id';
 import { usePendingItems as preferPendingItems } from 'flavours/glitch/initial_state';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 
diff --git a/app/javascript/flavours/glitch/blurhash.ts b/app/javascript/flavours/glitch/blurhash.ts
index cb1c3b2c82..dadf2b7f2c 100644
--- a/app/javascript/flavours/glitch/blurhash.ts
+++ b/app/javascript/flavours/glitch/blurhash.ts
@@ -98,9 +98,9 @@ export const decode83 = (str: string) => {
 };
 
 export const intToRGB = (int: number) => ({
-  r: Math.max(0, (int >> 16)),
+  r: Math.max(0, int >> 16),
   g: Math.max(0, (int >> 8) & 255),
-  b: Math.max(0, (int & 255)),
+  b: Math.max(0, int & 255),
 });
 
 export const getAverageFromBlurhash = (blurhash: string) => {
diff --git a/app/javascript/flavours/glitch/compare_id.ts b/app/javascript/flavours/glitch/compare_id.ts
index ae4ac6f897..30b0572481 100644
--- a/app/javascript/flavours/glitch/compare_id.ts
+++ b/app/javascript/flavours/glitch/compare_id.ts
@@ -1,4 +1,4 @@
-export default function compareId (id1: string, id2: string) {
+export function compareId(id1: string, id2: string) {
   if (id1 === id2) {
     return 0;
   }
diff --git a/app/javascript/flavours/glitch/components/account.jsx b/app/javascript/flavours/glitch/components/account.jsx
index 7b66d5a6ef..e9f04fcda7 100644
--- a/app/javascript/flavours/glitch/components/account.jsx
+++ b/app/javascript/flavours/glitch/components/account.jsx
@@ -1,14 +1,14 @@
 import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from './avatar';
+import { Avatar } from './avatar';
 import DisplayName from './display_name';
 import Permalink from './permalink';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from 'flavours/glitch/initial_state';
-import RelativeTimestamp from './relative_timestamp';
+import { RelativeTimestamp } from './relative_timestamp';
 import Skeleton from 'flavours/glitch/components/skeleton';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/components/animated_number.tsx b/app/javascript/flavours/glitch/components/animated_number.tsx
index 1673ff41bb..f6c77d35ff 100644
--- a/app/javascript/flavours/glitch/components/animated_number.tsx
+++ b/app/javascript/flavours/glitch/components/animated_number.tsx
@@ -16,13 +16,10 @@ const obfuscatedCount = (count: number) => {
 type Props = {
   value: number;
   obfuscate?: boolean;
-}
-export const AnimatedNumber: React.FC<Props> = ({
-  value,
-  obfuscate,
-})=> {
+};
+export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
   const [previousValue, setPreviousValue] = useState(value);
-  const [direction, setDirection] = useState<1|-1>(1);
+  const [direction, setDirection] = useState<1 | -1>(1);
 
   if (previousValue !== value) {
     setPreviousValue(value);
@@ -30,29 +27,48 @@ export const AnimatedNumber: React.FC<Props> = ({
   }
 
   const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
-  const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]);
+  const willLeave = useCallback(
+    () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }),
+    [direction]
+  );
 
   if (reduceMotion) {
-    return obfuscate ? <>{obfuscatedCount(value)}</> : <ShortNumber value={value} />;
+    return obfuscate ? (
+      <>{obfuscatedCount(value)}</>
+    ) : (
+      <ShortNumber value={value} />
+    );
   }
 
-  const styles = [{
-    key: `${value}`,
-    data: value,
-    style: { y: spring(0, { damping: 35, stiffness: 400 }) },
-  }];
+  const styles = [
+    {
+      key: `${value}`,
+      data: value,
+      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+    },
+  ];
 
   return (
-    <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
-      {items => (
+    <TransitionMotion
+      styles={styles}
+      willEnter={willEnter}
+      willLeave={willLeave}
+    >
+      {(items) => (
         <span className='animated-number'>
           {items.map(({ key, data, style }) => (
-            <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span>
+            <span
+              key={key}
+              style={{
+                position: direction * style.y > 0 ? 'absolute' : 'static',
+                transform: `translateY(${style.y * 100}%)`,
+              }}
+            >
+              {obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}
+            </span>
           ))}
         </span>
       )}
     </TransitionMotion>
   );
 };
-
-export default AnimatedNumber;
diff --git a/app/javascript/flavours/glitch/components/attachment_list.jsx b/app/javascript/flavours/glitch/components/attachment_list.jsx
index 68b80b19fe..92ba98126a 100644
--- a/app/javascript/flavours/glitch/components/attachment_list.jsx
+++ b/app/javascript/flavours/glitch/components/attachment_list.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
 
diff --git a/app/javascript/flavours/glitch/components/avatar.tsx b/app/javascript/flavours/glitch/components/avatar.tsx
index d6a9621462..1bd7739f5f 100644
--- a/app/javascript/flavours/glitch/components/avatar.tsx
+++ b/app/javascript/flavours/glitch/components/avatar.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
-import { useHovering } from 'hooks/useHovering';
+import { useHovering } from 'flavours/glitch/hooks/useHovering';
 import type { Account } from 'flavours/glitch/types/resources';
 
 type Props = {
@@ -10,7 +10,7 @@ type Props = {
   size: number;
   style?: React.CSSProperties;
   inline?: boolean;
-}
+};
 
 export const Avatar: React.FC<Props> = ({
   account,
@@ -19,7 +19,8 @@ export const Avatar: React.FC<Props> = ({
   inline = false,
   style: styleFromParent,
 }) => {
-  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif);
+  const { hovering, handleMouseEnter, handleMouseLeave } =
+    useHovering(autoPlayGif);
 
   const style = {
     ...styleFromParent,
@@ -29,12 +30,18 @@ export const Avatar: React.FC<Props> = ({
   };
 
   if (account) {
-    style.backgroundImage = `url(${account.get(hovering ? 'avatar' : 'avatar_static')})`;
+    style.backgroundImage = `url(${account.get(
+      hovering ? 'avatar' : 'avatar_static'
+    )})`;
   }
 
   return (
     <div
-      className={classNames('account__avatar', { 'account__avatar-inline': inline }, className)}
+      className={classNames(
+        'account__avatar',
+        { 'account__avatar-inline': inline },
+        className
+      )}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       style={style}
@@ -44,5 +51,3 @@ export const Avatar: React.FC<Props> = ({
     />
   );
 };
-
-export default Avatar;
diff --git a/app/javascript/flavours/glitch/components/blurhash.tsx b/app/javascript/flavours/glitch/components/blurhash.tsx
index 6fec6e1ef7..7005136765 100644
--- a/app/javascript/flavours/glitch/components/blurhash.tsx
+++ b/app/javascript/flavours/glitch/components/blurhash.tsx
@@ -8,14 +8,14 @@ type Props = {
   dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
   children?: never;
   [key: string]: any;
-}
-function Blurhash({
+};
+const Blurhash: React.FC<Props> = ({
   hash,
   width = 32,
   height = width,
   dummy = false,
   ...canvasProps
-}: Props) {
+}) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -40,6 +40,8 @@ function Blurhash({
   return (
     <canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
   );
-}
+};
 
-export default React.memo(Blurhash);
+const MemoizedBlurhash = React.memo(Blurhash);
+
+export { MemoizedBlurhash as Blurhash };
diff --git a/app/javascript/flavours/glitch/components/column_back_button.jsx b/app/javascript/flavours/glitch/components/column_back_button.jsx
index e9e2615cbb..9a3afe8b3d 100644
--- a/app/javascript/flavours/glitch/components/column_back_button.jsx
+++ b/app/javascript/flavours/glitch/components/column_back_button.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { createPortal } from 'react-dom';
 
 export default class ColumnBackButton extends React.PureComponent {
diff --git a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
index 4df045b5fb..b27ead1c73 100644
--- a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
+++ b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class ColumnBackButtonSlim extends React.PureComponent {
 
diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx
index 6fbe2955d7..bd26605954 100644
--- a/app/javascript/flavours/glitch/components/column_header.jsx
+++ b/app/javascript/flavours/glitch/components/column_header.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
diff --git a/app/javascript/flavours/glitch/components/dismissable_banner.jsx b/app/javascript/flavours/glitch/components/dismissable_banner.jsx
index 9b3faf6f27..2aed19b88f 100644
--- a/app/javascript/flavours/glitch/components/dismissable_banner.jsx
+++ b/app/javascript/flavours/glitch/components/dismissable_banner.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages } from 'react-intl';
 import { bannerSettings } from 'flavours/glitch/settings';
diff --git a/app/javascript/flavours/glitch/components/domain.jsx b/app/javascript/flavours/glitch/components/domain.jsx
deleted file mode 100644
index 85ebdbde93..0000000000
--- a/app/javascript/flavours/glitch/components/domain.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import IconButton from './icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-const messages = defineMessages({
-  unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
-});
-
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    domain: PropTypes.string,
-    onUnblockDomain: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleDomainUnblock = () => {
-    this.props.onUnblockDomain(this.props.domain);
-  };
-
-  render () {
-    const { domain, intl } = this.props;
-
-    return (
-      <div className='domain'>
-        <div className='domain__wrapper'>
-          <span className='domain__domain-name'>
-            <strong>{domain}</strong>
-          </span>
-
-          <div className='domain__buttons'>
-            <IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(Account);
diff --git a/app/javascript/flavours/glitch/components/domain.tsx b/app/javascript/flavours/glitch/components/domain.tsx
new file mode 100644
index 0000000000..af0fec35af
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/domain.tsx
@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { IconButton } from './icon_button';
+import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  unblockDomain: {
+    id: 'account.unblock_domain',
+    defaultMessage: 'Unblock domain {domain}',
+  },
+});
+
+type Props = {
+  domain: string;
+  onUnblockDomain: (domain: string) => void;
+  intl: InjectedIntl;
+};
+const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
+  const handleDomainUnblock = useCallback(() => {
+    onUnblockDomain(domain);
+  }, [domain, onUnblockDomain]);
+
+  return (
+    <div className='domain'>
+      <div className='domain__wrapper'>
+        <span className='domain__domain-name'>
+          <strong>{domain}</strong>
+        </span>
+
+        <div className='domain__buttons'>
+          <IconButton
+            active
+            icon='unlock'
+            title={intl.formatMessage(messages.unblockDomain, { domain })}
+            onClick={handleDomainUnblock}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Domain = injectIntl(_Domain);
diff --git a/app/javascript/flavours/glitch/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
index 7fb75b59ea..3f17bc1299 100644
--- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/components/dropdown_menu.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import Overlay from 'react-overlays/Overlay';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import classNames from 'classnames';
diff --git a/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx b/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
index 93dfed2f06..5315b812fc 100644
--- a/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
+++ b/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import DropdownMenu from './containers/dropdown_menu_container';
 import { connect } from 'react-redux';
 import { openModal } from 'flavours/glitch/actions/modal';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import InlineAccount from 'flavours/glitch/components/inline_account';
 
 const mapDispatchToProps = (dispatch, { statusId }) => ({
diff --git a/app/javascript/flavours/glitch/components/gifv.tsx b/app/javascript/flavours/glitch/components/gifv.tsx
index 8968170c5f..72914ba741 100644
--- a/app/javascript/flavours/glitch/components/gifv.tsx
+++ b/app/javascript/flavours/glitch/components/gifv.tsx
@@ -8,7 +8,7 @@ type Props = {
   width: number;
   height: number;
   onClick?: () => void;
-}
+};
 
 export const GIFV: React.FC<Props> = ({
   src,
@@ -17,19 +17,23 @@ export const GIFV: React.FC<Props> = ({
   width,
   height,
   onClick,
-})=> {
+}) => {
   const [loading, setLoading] = useState(true);
 
-  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> = useCallback(() => {
-    setLoading(false);
-  }, [setLoading]);
+  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> =
+    useCallback(() => {
+      setLoading(false);
+    }, [setLoading]);
 
-  const handleClick: React.MouseEventHandler = useCallback((e) => {
-    if (onClick) {
-      e.stopPropagation();
-      onClick();
-    }
-  }, [onClick]);
+  const handleClick: React.MouseEventHandler = useCallback(
+    (e) => {
+      if (onClick) {
+        e.stopPropagation();
+        onClick();
+      }
+    },
+    [onClick]
+  );
 
   return (
     <div className='gifv' style={{ position: 'relative' }}>
@@ -64,5 +68,3 @@ export const GIFV: React.FC<Props> = ({
     </div>
   );
 };
-
-export default GIFV;
diff --git a/app/javascript/flavours/glitch/components/icon.tsx b/app/javascript/flavours/glitch/components/icon.tsx
index d85fff6ef6..4eb948dc76 100644
--- a/app/javascript/flavours/glitch/components/icon.tsx
+++ b/app/javascript/flavours/glitch/components/icon.tsx
@@ -7,8 +7,15 @@ type Props = {
   fixedWidth?: boolean;
   children?: never;
   [key: string]: any;
-}
-export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
-  <i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
-
-export default Icon;
+};
+export const Icon: React.FC<Props> = ({
+  id,
+  className,
+  fixedWidth,
+  ...other
+}) => (
+  <i
+    className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+    {...other}
+  />
+);
diff --git a/app/javascript/flavours/glitch/components/icon_button.tsx b/app/javascript/flavours/glitch/components/icon_button.tsx
index 2bda4ddf34..80b20ae1b0 100644
--- a/app/javascript/flavours/glitch/components/icon_button.tsx
+++ b/app/javascript/flavours/glitch/components/icon_button.tsx
@@ -21,18 +21,17 @@ type Props = {
   animate: boolean;
   overlay: boolean;
   tabIndex: number;
-  label: string;
+  label?: string;
   counter?: number;
   obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
-}
+};
 type States = {
-  activate: boolean,
-  deactivate: boolean,
-}
-export default class IconButton extends React.PureComponent<Props, States> {
-
+  activate: boolean;
+  deactivate: boolean;
+};
+export class IconButton extends React.PureComponent<Props, States> {
   static defaultProps = {
     size: 18,
     active: false,
@@ -48,7 +47,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     deactivate: false,
   };
 
-  UNSAFE_componentWillReceiveProps (nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (!nextProps.animate) return;
 
     if (this.props.active && !nextProps.active) {
@@ -58,7 +57,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     }
   }
 
-  handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) =>  {
+  handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
 
     if (!this.props.disabled && this.props.onClick != null) {
@@ -84,7 +83,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     }
   };
 
-  render () {
+  render() {
     // Hack required for some icons which have an overriden size
     let containerSize = '1.28571429em';
     if (this.props.style?.fontSize) {
@@ -120,10 +119,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
       ariaHidden,
     } = this.props;
 
-    const {
-      activate,
-      deactivate,
-    } = this.state;
+    const { activate, deactivate } = this.state;
 
     const classes = classNames(className, 'icon-button', {
       active,
@@ -141,7 +137,12 @@ export default class IconButton extends React.PureComponent<Props, States> {
 
     let contents = (
       <React.Fragment>
-        <Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>}
+        <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
+        {typeof counter !== 'undefined' && (
+          <span className='icon-button__counter'>
+            <AnimatedNumber value={counter} obfuscate={obfuscateCount} />
+          </span>
+        )}
         {this.props.label}
       </React.Fragment>
     );
@@ -174,5 +175,4 @@ export default class IconButton extends React.PureComponent<Props, States> {
       </button>
     );
   }
-
 }
diff --git a/app/javascript/flavours/glitch/components/icon_with_badge.tsx b/app/javascript/flavours/glitch/components/icon_with_badge.tsx
index 487bf326ad..bf86814c03 100644
--- a/app/javascript/flavours/glitch/components/icon_with_badge.tsx
+++ b/app/javascript/flavours/glitch/components/icon_with_badge.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
 import { Icon } from './icon';
 
-const formatNumber = (num: number): number | string => num > 40 ? '40+' : num;
+const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);
 
 type Props = {
   id: string;
   count: number;
   issueBadge: boolean;
   className: string;
-}
-const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => (
+};
+export const IconWithBadge: React.FC<Props> = ({
+  id,
+  count,
+  issueBadge,
+  className,
+}) => (
   <i className='icon-with-badge'>
     <Icon id={id} fixedWidth className={className} />
-    {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+    {count > 0 && (
+      <i className='icon-with-badge__badge'>{formatNumber(count)}</i>
+    )}
     {issueBadge && <i className='icon-with-badge__issue-badge' />}
   </i>
 );
-
-export default IconWithBadge;
diff --git a/app/javascript/flavours/glitch/components/image.jsx b/app/javascript/flavours/glitch/components/image.jsx
deleted file mode 100644
index 6e81ddf082..0000000000
--- a/app/javascript/flavours/glitch/components/image.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Blurhash from './blurhash';
-import classNames from 'classnames';
-
-export default class Image extends React.PureComponent {
-
-  static propTypes = {
-    src: PropTypes.string,
-    srcSet: PropTypes.string,
-    blurhash: PropTypes.string,
-    className: PropTypes.string,
-  };
-
-  state = {
-    loaded: false,
-  };
-
-  handleLoad = () => this.setState({ loaded: true });
-
-  render () {
-    const { src, srcSet, blurhash, className } = this.props;
-    const { loaded } = this.state;
-
-    return (
-      <div className={classNames('image', { loaded }, className)} role='presentation'>
-        {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
-        <img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} />
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/flavours/glitch/components/image.tsx b/app/javascript/flavours/glitch/components/image.tsx
new file mode 100644
index 0000000000..490543424a
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/image.tsx
@@ -0,0 +1,33 @@
+import React, { useCallback, useState } from 'react';
+import { Blurhash } from './blurhash';
+import classNames from 'classnames';
+
+type Props = {
+  src: string;
+  srcSet?: string;
+  blurhash?: string;
+  className?: string;
+};
+
+export const Image: React.FC<Props> = ({
+  src,
+  srcSet,
+  blurhash,
+  className,
+}) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = useCallback(() => {
+    setLoaded(true);
+  }, [setLoaded]);
+
+  return (
+    <div
+      className={classNames('image', { loaded }, className)}
+      role='presentation'
+    >
+      {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
+      <img src={src} srcSet={srcSet} alt='' onLoad={handleLoad} />
+    </div>
+  );
+};
diff --git a/app/javascript/flavours/glitch/components/inline_account.jsx b/app/javascript/flavours/glitch/components/inline_account.jsx
index c04618d66e..eeb58b5533 100644
--- a/app/javascript/flavours/glitch/components/inline_account.jsx
+++ b/app/javascript/flavours/glitch/components/inline_account.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'flavours/glitch/selectors';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
diff --git a/app/javascript/flavours/glitch/components/load_gap.jsx b/app/javascript/flavours/glitch/components/load_gap.jsx
index e70365d9ef..9c81df6323 100644
--- a/app/javascript/flavours/glitch/components/load_gap.jsx
+++ b/app/javascript/flavours/glitch/components/load_gap.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
diff --git a/app/javascript/flavours/glitch/components/media_gallery.jsx b/app/javascript/flavours/glitch/components/media_gallery.jsx
index 9bbde3b5e9..1b4ce05743 100644
--- a/app/javascript/flavours/glitch/components/media_gallery.jsx
+++ b/app/javascript/flavours/glitch/components/media_gallery.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { is } from 'immutable';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 import { debounce } from 'lodash';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 
 const messages = defineMessages({
   hidden: {
diff --git a/app/javascript/flavours/glitch/components/not_signed_in_indicator.jsx b/app/javascript/flavours/glitch/components/not_signed_in_indicator.jsx
deleted file mode 100644
index b440c6be2f..0000000000
--- a/app/javascript/flavours/glitch/components/not_signed_in_indicator.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-const NotSignedInIndicator = () => (
-  <div className='scrollable scrollable--flex'>
-    <div className='empty-column-indicator'>
-      <FormattedMessage id='not_signed_in_indicator.not_signed_in' defaultMessage='You need to sign in to access this resource.' />
-    </div>
-  </div>
-);
-
-export default NotSignedInIndicator;
diff --git a/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx b/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx
new file mode 100644
index 0000000000..53945d6a7a
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/not_signed_in_indicator.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export const NotSignedInIndicator: React.FC = () => (
+  <div className='scrollable scrollable--flex'>
+    <div className='empty-column-indicator'>
+      <FormattedMessage
+        id='not_signed_in_indicator.not_signed_in'
+        defaultMessage='You need to sign in to access this resource.'
+      />
+    </div>
+  </div>
+);
diff --git a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
index 9d1139a051..532eb4358c 100644
--- a/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
+++ b/app/javascript/flavours/glitch/components/notification_purge_buttons.jsx
@@ -10,7 +10,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
index 7e02556749..e8c9611a34 100644
--- a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
+++ b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
diff --git a/app/javascript/flavours/glitch/components/poll.jsx b/app/javascript/flavours/glitch/components/poll.jsx
index fb37612d9c..df23919563 100644
--- a/app/javascript/flavours/glitch/components/poll.jsx
+++ b/app/javascript/flavours/glitch/components/poll.jsx
@@ -8,8 +8,8 @@ import Motion from 'flavours/glitch/features/ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import escapeTextContentForBrowser from 'escape-html';
 import emojify from 'flavours/glitch/features/emoji/emoji';
-import RelativeTimestamp from './relative_timestamp';
-import Icon from 'flavours/glitch/components/icon';
+import { RelativeTimestamp } from './relative_timestamp';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   closed: {
diff --git a/app/javascript/flavours/glitch/components/radio_button.jsx b/app/javascript/flavours/glitch/components/radio_button.jsx
deleted file mode 100644
index 0496fa2868..0000000000
--- a/app/javascript/flavours/glitch/components/radio_button.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class RadioButton extends React.PureComponent {
-
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    checked: PropTypes.bool,
-    name: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    label: PropTypes.node.isRequired,
-  };
-
-  render () {
-    const { name, value, checked, onChange, label } = this.props;
-
-    return (
-      <label className='radio-button'>
-        <input
-          name={name}
-          type='radio'
-          value={value}
-          checked={checked}
-          onChange={onChange}
-        />
-
-        <span className={classNames('radio-button__input', { checked })} />
-
-        <span>{label}</span>
-      </label>
-    );
-  }
-
-}
diff --git a/app/javascript/flavours/glitch/components/radio_button.tsx b/app/javascript/flavours/glitch/components/radio_button.tsx
new file mode 100644
index 0000000000..829f471747
--- /dev/null
+++ b/app/javascript/flavours/glitch/components/radio_button.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+  value: string;
+  checked: boolean;
+  name: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: React.ReactNode;
+};
+
+export const RadioButton: React.FC<Props> = ({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+}) => {
+  return (
+    <label className='radio-button'>
+      <input
+        name={name}
+        type='radio'
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+
+      <span className={classNames('radio-button__input', { checked })} />
+
+      <span>{label}</span>
+    </label>
+  );
+};
diff --git a/app/javascript/flavours/glitch/components/relative_timestamp.tsx b/app/javascript/flavours/glitch/components/relative_timestamp.tsx
index 89cad06658..65d9d27cb2 100644
--- a/app/javascript/flavours/glitch/components/relative_timestamp.tsx
+++ b/app/javascript/flavours/glitch/components/relative_timestamp.tsx
@@ -4,20 +4,50 @@ import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
 const messages = defineMessages({
   today: { id: 'relative_time.today', defaultMessage: 'today' },
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
-  just_now_full: { id: 'relative_time.full.just_now', defaultMessage: 'just now' },
+  just_now_full: {
+    id: 'relative_time.full.just_now',
+    defaultMessage: 'just now',
+  },
   seconds: { id: 'relative_time.seconds', defaultMessage: '{number}s' },
-  seconds_full: { id: 'relative_time.full.seconds', defaultMessage: '{number, plural, one {# second} other {# seconds}} ago' },
+  seconds_full: {
+    id: 'relative_time.full.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} ago',
+  },
   minutes: { id: 'relative_time.minutes', defaultMessage: '{number}m' },
-  minutes_full: { id: 'relative_time.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago' },
+  minutes_full: {
+    id: 'relative_time.full.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago',
+  },
   hours: { id: 'relative_time.hours', defaultMessage: '{number}h' },
-  hours_full: { id: 'relative_time.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} ago' },
+  hours_full: {
+    id: 'relative_time.full.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} ago',
+  },
   days: { id: 'relative_time.days', defaultMessage: '{number}d' },
-  days_full: { id: 'relative_time.full.days', defaultMessage: '{number, plural, one {# day} other {# days}} ago' },
-  moments_remaining: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' },
-  seconds_remaining: { id: 'time_remaining.seconds', defaultMessage: '{number, plural, one {# second} other {# seconds}} left' },
-  minutes_remaining: { id: 'time_remaining.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} left' },
-  hours_remaining: { id: 'time_remaining.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} left' },
-  days_remaining: { id: 'time_remaining.days', defaultMessage: '{number, plural, one {# day} other {# days}} left' },
+  days_full: {
+    id: 'relative_time.full.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}} ago',
+  },
+  moments_remaining: {
+    id: 'time_remaining.moments',
+    defaultMessage: 'Moments remaining',
+  },
+  seconds_remaining: {
+    id: 'time_remaining.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} left',
+  },
+  minutes_remaining: {
+    id: 'time_remaining.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} left',
+  },
+  hours_remaining: {
+    id: 'time_remaining.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} left',
+  },
+  days_remaining: {
+    id: 'time_remaining.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}} left',
+  },
 });
 
 const dateFormatOptions = {
@@ -36,8 +66,8 @@ const shortDateFormatOptions = {
 
 const SECOND = 1000;
 const MINUTE = 1000 * 60;
-const HOUR   = 1000 * 60 * 60;
-const DAY    = 1000 * 60 * 60 * 24;
+const HOUR = 1000 * 60 * 60;
+const DAY = 1000 * 60 * 60 * 24;
 
 const MAX_DELAY = 2147483647;
 
@@ -57,20 +87,27 @@ const selectUnits = (delta: number) => {
 
 const getUnitDelay = (units: string) => {
   switch (units) {
-  case 'second':
-    return SECOND;
-  case 'minute':
-    return MINUTE;
-  case 'hour':
-    return HOUR;
-  case 'day':
-    return DAY;
-  default:
-    return MAX_DELAY;
+    case 'second':
+      return SECOND;
+    case 'minute':
+      return MINUTE;
+    case 'hour':
+      return HOUR;
+    case 'day':
+      return DAY;
+    default:
+      return MAX_DELAY;
   }
 };
 
-export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year: number, timeGiven: boolean, short?: boolean) => {
+export const timeAgoString = (
+  intl: InjectedIntl,
+  date: Date,
+  now: number,
+  year: number,
+  timeGiven: boolean,
+  short?: boolean
+) => {
   const delta = now - date.getTime();
 
   let relativeTime;
@@ -78,27 +115,49 @@ export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year:
   if (delta < DAY && !timeGiven) {
     relativeTime = intl.formatMessage(messages.today);
   } else if (delta < 10 * SECOND) {
-    relativeTime = intl.formatMessage(short ? messages.just_now : messages.just_now_full);
+    relativeTime = intl.formatMessage(
+      short ? messages.just_now : messages.just_now_full
+    );
   } else if (delta < 7 * DAY) {
     if (delta < MINUTE) {
-      relativeTime = intl.formatMessage(short ? messages.seconds : messages.seconds_full, { number: Math.floor(delta / SECOND) });
+      relativeTime = intl.formatMessage(
+        short ? messages.seconds : messages.seconds_full,
+        { number: Math.floor(delta / SECOND) }
+      );
     } else if (delta < HOUR) {
-      relativeTime = intl.formatMessage(short ? messages.minutes : messages.minutes_full, { number: Math.floor(delta / MINUTE) });
+      relativeTime = intl.formatMessage(
+        short ? messages.minutes : messages.minutes_full,
+        { number: Math.floor(delta / MINUTE) }
+      );
     } else if (delta < DAY) {
-      relativeTime = intl.formatMessage(short ? messages.hours : messages.hours_full, { number: Math.floor(delta / HOUR) });
+      relativeTime = intl.formatMessage(
+        short ? messages.hours : messages.hours_full,
+        { number: Math.floor(delta / HOUR) }
+      );
     } else {
-      relativeTime = intl.formatMessage(short ? messages.days : messages.days_full, { number: Math.floor(delta / DAY) });
+      relativeTime = intl.formatMessage(
+        short ? messages.days : messages.days_full,
+        { number: Math.floor(delta / DAY) }
+      );
     }
   } else if (date.getFullYear() === year) {
     relativeTime = intl.formatDate(date, shortDateFormatOptions);
   } else {
-    relativeTime = intl.formatDate(date, { ...shortDateFormatOptions, year: 'numeric' });
+    relativeTime = intl.formatDate(date, {
+      ...shortDateFormatOptions,
+      year: 'numeric',
+    });
   }
 
   return relativeTime;
 };
 
-const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGiven = true) => {
+const timeRemainingString = (
+  intl: InjectedIntl,
+  date: Date,
+  now: number,
+  timeGiven = true
+) => {
   const delta = date.getTime() - now;
 
   let relativeTime;
@@ -108,13 +167,21 @@ const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGi
   } else if (delta < 10 * SECOND) {
     relativeTime = intl.formatMessage(messages.moments_remaining);
   } else if (delta < MINUTE) {
-    relativeTime = intl.formatMessage(messages.seconds_remaining, { number: Math.floor(delta / SECOND) });
+    relativeTime = intl.formatMessage(messages.seconds_remaining, {
+      number: Math.floor(delta / SECOND),
+    });
   } else if (delta < HOUR) {
-    relativeTime = intl.formatMessage(messages.minutes_remaining, { number: Math.floor(delta / MINUTE) });
+    relativeTime = intl.formatMessage(messages.minutes_remaining, {
+      number: Math.floor(delta / MINUTE),
+    });
   } else if (delta < DAY) {
-    relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) });
+    relativeTime = intl.formatMessage(messages.hours_remaining, {
+      number: Math.floor(delta / HOUR),
+    });
   } else {
-    relativeTime = intl.formatMessage(messages.days_remaining, { number: Math.floor(delta / DAY) });
+    relativeTime = intl.formatMessage(messages.days_remaining, {
+      number: Math.floor(delta / DAY),
+    });
   }
 
   return relativeTime;
@@ -126,78 +193,88 @@ type Props = {
   year: number;
   futureDate?: boolean;
   short?: boolean;
-}
+};
 type States = {
   now: number;
-}
+};
 class RelativeTimestamp extends React.Component<Props, States> {
-
   state = {
     now: this.props.intl.now(),
   };
 
   static defaultProps = {
-    year: (new Date()).getFullYear(),
+    year: new Date().getFullYear(),
     short: true,
   };
 
   _timer: number | undefined;
 
-  shouldComponentUpdate (nextProps: Props, nextState: States) {
+  shouldComponentUpdate(nextProps: Props, nextState: States) {
     // As of right now the locale doesn't change without a new page load,
     // but we might as well check in case that ever changes.
-    return this.props.timestamp !== nextProps.timestamp ||
+    return (
+      this.props.timestamp !== nextProps.timestamp ||
       this.props.intl.locale !== nextProps.intl.locale ||
-      this.state.now !== nextState.now;
+      this.state.now !== nextState.now
+    );
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (this.props.timestamp !== nextProps.timestamp) {
       this.setState({ now: this.props.intl.now() });
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this._scheduleNextUpdate(this.props, this.state);
   }
 
-  UNSAFE_componentWillUpdate (nextProps: Props, nextState: States) {
+  UNSAFE_componentWillUpdate(nextProps: Props, nextState: States) {
     this._scheduleNextUpdate(nextProps, nextState);
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.clearTimeout(this._timer);
   }
 
-  _scheduleNextUpdate (props: Props, state: States) {
+  _scheduleNextUpdate(props: Props, state: States) {
     window.clearTimeout(this._timer);
 
-    const { timestamp }  = props;
-    const delta          = (new Date(timestamp)).getTime() - state.now;
-    const unitDelay      = getUnitDelay(selectUnits(delta));
-    const unitRemainder  = Math.abs(delta % unitDelay);
+    const { timestamp } = props;
+    const delta = new Date(timestamp).getTime() - state.now;
+    const unitDelay = getUnitDelay(selectUnits(delta));
+    const unitRemainder = Math.abs(delta % unitDelay);
     const updateInterval = 1000 * 10;
-    const delay          = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
+    const delay =
+      delta < 0
+        ? Math.max(updateInterval, unitDelay - unitRemainder)
+        : Math.max(updateInterval, unitRemainder);
 
     this._timer = window.setTimeout(() => {
       this.setState({ now: this.props.intl.now() });
     }, delay);
   }
 
-  render () {
+  render() {
     const { timestamp, intl, year, futureDate, short } = this.props;
 
-    const timeGiven    = timestamp.includes('T');
-    const date         = new Date(timestamp);
-    const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now, timeGiven) : timeAgoString(intl, date, this.state.now, year, timeGiven, short);
+    const timeGiven = timestamp.includes('T');
+    const date = new Date(timestamp);
+    const relativeTime = futureDate
+      ? timeRemainingString(intl, date, this.state.now, timeGiven)
+      : timeAgoString(intl, date, this.state.now, year, timeGiven, short);
 
     return (
-      <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
+      <time
+        dateTime={timestamp}
+        title={intl.formatDate(date, dateFormatOptions)}
+      >
         {relativeTime}
       </time>
     );
   }
-
 }
 
-export default injectIntl(RelativeTimestamp);
+const RelativeTimestampWithIntl = injectIntl(RelativeTimestamp);
+
+export { RelativeTimestampWithIntl as RelativeTimestamp };
diff --git a/app/javascript/flavours/glitch/components/scrollable_list.jsx b/app/javascript/flavours/glitch/components/scrollable_list.jsx
index c1f511b48d..13701bcd3e 100644
--- a/app/javascript/flavours/glitch/components/scrollable_list.jsx
+++ b/app/javascript/flavours/glitch/components/scrollable_list.jsx
@@ -8,6 +8,7 @@ import IntersectionObserverWrapper from 'flavours/glitch/features/ui/util/inters
 import { throttle } from 'lodash';
 import { List as ImmutableList } from 'immutable';
 import classNames from 'classnames';
+import { supportsPassiveEvents } from 'detect-passive-events';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
 import LoadingIndicator from './loading_indicator';
 import { connect } from 'react-redux';
@@ -236,10 +237,10 @@ class ScrollableList extends PureComponent {
   attachScrollListener () {
     if (this.props.bindToDocument) {
       document.addEventListener('scroll', this.handleScroll);
-      document.addEventListener('wheel', this.handleWheel);
+      document.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : undefined);
     } else {
       this.node.addEventListener('scroll', this.handleScroll);
-      this.node.addEventListener('wheel', this.handleWheel);
+      this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : undefined);
     }
   }
 
diff --git a/app/javascript/flavours/glitch/components/server_banner.jsx b/app/javascript/flavours/glitch/components/server_banner.jsx
index ba84064a8b..8b9c501538 100644
--- a/app/javascript/flavours/glitch/components/server_banner.jsx
+++ b/app/javascript/flavours/glitch/components/server_banner.jsx
@@ -7,7 +7,7 @@ import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';
 import Account from 'flavours/glitch/containers/account_container';
 import { domain } from 'flavours/glitch/initial_state';
-import Image from 'flavours/glitch/components/image';
+import { Image } from 'flavours/glitch/components/image';
 import { Link } from 'react-router-dom';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/components/status_action_bar.jsx b/app/javascript/flavours/glitch/components/status_action_bar.jsx
index 091d0b24be..5b87cd4390 100644
--- a/app/javascript/flavours/glitch/components/status_action_bar.jsx
+++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from 'flavours/glitch/initial_state';
-import RelativeTimestamp from './relative_timestamp';
+import { RelativeTimestamp } from './relative_timestamp';
 import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links';
 import classNames from 'classnames';
 import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions';
diff --git a/app/javascript/flavours/glitch/components/status_content.jsx b/app/javascript/flavours/glitch/components/status_content.jsx
index e66df588a3..3fefef2c93 100644
--- a/app/javascript/flavours/glitch/components/status_content.jsx
+++ b/app/javascript/flavours/glitch/components/status_content.jsx
@@ -5,7 +5,7 @@ import { FormattedMessage, injectIntl } from 'react-intl';
 import Permalink from './permalink';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
 
diff --git a/app/javascript/flavours/glitch/components/status_header.jsx b/app/javascript/flavours/glitch/components/status_header.jsx
index 94c403f169..8813d19b9c 100644
--- a/app/javascript/flavours/glitch/components/status_header.jsx
+++ b/app/javascript/flavours/glitch/components/status_header.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 //  Mastodon imports.
-import Avatar from './avatar';
+import { Avatar } from './avatar';
 import AvatarOverlay from './avatar_overlay';
 import DisplayName from './display_name';
 
diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx
index dd63cbd21c..59912d4391 100644
--- a/app/javascript/flavours/glitch/components/status_icons.jsx
+++ b/app/javascript/flavours/glitch/components/status_icons.jsx
@@ -5,9 +5,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl } from 'react-intl';
 
 //  Mastodon imports.
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import VisibilityIcon from './status_visibility_icon';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { languages } from 'flavours/glitch/initial_state';
 
 //  Messages for use with internationalization stuff.
diff --git a/app/javascript/flavours/glitch/components/status_prepend.jsx b/app/javascript/flavours/glitch/components/status_prepend.jsx
index 8c4343b040..127636c51d 100644
--- a/app/javascript/flavours/glitch/components/status_prepend.jsx
+++ b/app/javascript/flavours/glitch/components/status_prepend.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { me } from 'flavours/glitch/initial_state';
 
 export default class StatusPrepend extends React.PureComponent {
diff --git a/app/javascript/flavours/glitch/components/status_visibility_icon.jsx b/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
index fcedfbfd6b..cee56a2391 100644
--- a/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
+++ b/app/javascript/flavours/glitch/components/status_visibility_icon.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   public: { id: 'privacy.public.short', defaultMessage: 'Public' },
diff --git a/app/javascript/flavours/glitch/containers/compose_container.jsx b/app/javascript/flavours/glitch/containers/compose_container.jsx
index dada4cfed7..9b84ed583d 100644
--- a/app/javascript/flavours/glitch/containers/compose_container.jsx
+++ b/app/javascript/flavours/glitch/containers/compose_container.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import PropTypes from 'prop-types';
-import { store } from 'flavours/glitch/store/configureStore';
+import { store } from 'flavours/glitch/store';
 import { hydrateStore } from 'flavours/glitch/actions/store';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { getLocale } from 'mastodon/locales';
diff --git a/app/javascript/flavours/glitch/containers/domain_container.jsx b/app/javascript/flavours/glitch/containers/domain_container.jsx
index 8a8ba1df12..419d5d29f5 100644
--- a/app/javascript/flavours/glitch/containers/domain_container.jsx
+++ b/app/javascript/flavours/glitch/containers/domain_container.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { blockDomain, unblockDomain } from '../actions/domain_blocks';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Domain from '../components/domain';
+import { Domain } from '../components/domain';
 import { openModal } from '../actions/modal';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/containers/mastodon.jsx b/app/javascript/flavours/glitch/containers/mastodon.jsx
index aca7f4dc59..1044fdd160 100644
--- a/app/javascript/flavours/glitch/containers/mastodon.jsx
+++ b/app/javascript/flavours/glitch/containers/mastodon.jsx
@@ -5,7 +5,7 @@ import { IntlProvider, addLocaleData } from 'react-intl';
 import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ScrollContext } from 'react-router-scroll-4';
-import { store } from 'flavours/glitch/store/configureStore';
+import { store } from 'flavours/glitch/store';
 import UI from 'flavours/glitch/features/ui';
 import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
 import { hydrateStore } from 'flavours/glitch/actions/store';
diff --git a/app/javascript/flavours/glitch/features/about/index.jsx b/app/javascript/flavours/glitch/features/about/index.jsx
index 67d5afbdd1..e2556ec340 100644
--- a/app/javascript/flavours/glitch/features/about/index.jsx
+++ b/app/javascript/flavours/glitch/features/about/index.jsx
@@ -9,9 +9,9 @@ import { Helmet } from 'react-helmet';
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'flavours/glitch/actions/server';
 import Account from 'flavours/glitch/containers/account_container';
 import Skeleton from 'flavours/glitch/components/skeleton';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
-import Image from 'flavours/glitch/components/image';
+import { Image } from 'flavours/glitch/components/image';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
diff --git a/app/javascript/flavours/glitch/features/account/components/account_note.jsx b/app/javascript/flavours/glitch/features/account/components/account_note.jsx
index 8ab00f6d48..a548db2699 100644
--- a/app/javascript/flavours/glitch/features/account/components/account_note.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/account_note.jsx
@@ -3,7 +3,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import Textarea from 'react-textarea-autosize';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
index 7026c9278d..60ac06f910 100644
--- a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { NavLink } from 'react-router-dom';
 import { FormattedMessage, FormattedNumber } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 class ActionBar extends React.PureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
index 73c1737a65..5c2940b749 100644
--- a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class FollowRequestNote extends ImmutablePureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx
index 9fcdb82e70..a447750c2d 100644
--- a/app/javascript/flavours/glitch/features/account/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/account/components/header.jsx
@@ -6,9 +6,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { autoPlayGif, me, domain } from 'flavours/glitch/initial_state';
 import { preferencesLink, profileLink, accountAdminLink } from 'flavours/glitch/utils/backend_links';
 import classNames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
-import IconButton from 'flavours/glitch/components/icon_button';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Icon } from 'flavours/glitch/components/icon';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import Button from 'flavours/glitch/components/button';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import AccountNoteContainer from '../containers/account_note_container';
diff --git a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
index 5fd84996b2..0dfbec30c0 100644
--- a/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
+++ b/app/javascript/flavours/glitch/features/account_gallery/components/media_item.jsx
@@ -1,6 +1,6 @@
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 import classNames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { autoPlayGif, displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
index 40bdc4034e..8f9693f643 100644
--- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
+++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx
@@ -5,7 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import AvatarOverlay from '../../../components/avatar_overlay';
 import DisplayName from '../../../components/display_name';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class MovedNote extends ImmutablePureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx
index c3e4ed5d4f..8c13f6797e 100644
--- a/app/javascript/flavours/glitch/features/audio/index.jsx
+++ b/app/javascript/flavours/glitch/features/audio/index.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'flavours/glitch/features/video';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 import { throttle, debounce } from 'lodash';
 import Visualizer from './visualizer';
 import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { is } from 'immutable';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx
index fb9bb50358..8b79692502 100644
--- a/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/autosuggest_account.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
index d32f3572a5..e791faa6bc 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx
@@ -5,7 +5,7 @@ import React from 'react';
 import Overlay from 'react-overlays/Overlay';
 
 //  Components.
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import DropdownMenu from './dropdown_menu';
 
 //  The component.
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
index de50f566d9..786f593070 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.jsx
@@ -4,7 +4,7 @@ import React from 'react';
 import classNames from 'classnames';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { withPassive } from 'flavours/glitch/utils/dom_helpers';
diff --git a/app/javascript/flavours/glitch/features/compose/components/header.jsx b/app/javascript/flavours/glitch/features/compose/components/header.jsx
index ad58f7ad4c..0a94ca5fc7 100644
--- a/app/javascript/flavours/glitch/features/compose/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/header.jsx
@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { conditionalRender } from 'flavours/glitch/utils/react_helpers';
diff --git a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
index 1a68f1e129..371ad6d245 100644
--- a/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/navigation_bar.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ActionBar from './action_bar';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import Permalink from 'flavours/glitch/components/permalink';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx
index cedb906ca0..079065f8c6 100644
--- a/app/javascript/flavours/glitch/features/compose/components/options.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx
@@ -7,7 +7,7 @@ import Toggle from 'react-toggle';
 import { connect } from 'react-redux';
 
 //  Components.
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import TextIconButton from './text_icon_button';
 import DropdownContainer from '../containers/dropdown_container';
 import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
diff --git a/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx b/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
index 694ee3a04f..8b0f01a9ec 100644
--- a/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/poll_form.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import IconButton from 'flavours/glitch/components/icon_button';
-import Icon from 'flavours/glitch/components/icon';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { Icon } from 'flavours/glitch/components/icon';
 import AutosuggestInput from 'flavours/glitch/components/autosuggest_input';
 import classNames from 'classnames';
 import { pollLimits } from 'flavours/glitch/initial_state';
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.jsx b/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
index a935e82e8e..04c3926abf 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.jsx
@@ -8,7 +8,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
 import Button from 'flavours/glitch/components/button';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { maxChars } from 'flavours/glitch/initial_state';
diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
index 179d85ac3b..4077a29644 100644
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx
@@ -7,7 +7,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
 import AccountContainer from 'flavours/glitch/containers/account_container';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
 
 //  Messages.
diff --git a/app/javascript/flavours/glitch/features/compose/components/search.jsx b/app/javascript/flavours/glitch/features/compose/components/search.jsx
index cd1bd08085..3d1aaf2646 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx
@@ -9,7 +9,7 @@ import {
 import Overlay from 'react-overlays/Overlay';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Utils.
 import { focusRoot } from 'flavours/glitch/utils/dom_helpers';
diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
index 6c1dee454c..8533d4b234 100644
--- a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx
@@ -6,7 +6,7 @@ import AccountContainer from 'flavours/glitch/containers/account_container';
 import StatusContainer from 'flavours/glitch/containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { ImmutableHashtag as Hashtag } from 'flavours/glitch/components/hashtag';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { searchEnabled } from 'flavours/glitch/initial_state';
 import LoadMore from 'flavours/glitch/components/load_more';
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx
index 73281fc746..33e29797dc 100644
--- a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.jsx
@@ -6,7 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
 //  Components.
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  Messages.
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.jsx b/app/javascript/flavours/glitch/features/compose/components/upload.jsx
index 2c74d91f36..4a2c5176b4 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload.jsx
@@ -5,7 +5,7 @@ import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class Upload extends ImmutablePureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
index 39ac310532..61047762d1 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { FormattedMessage } from 'react-intl';
 
 export default class UploadProgress extends React.PureComponent {
diff --git a/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js b/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js
index 66d51947a8..d2fe56103a 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/emoji_picker_dropdown_container.js
@@ -72,6 +72,7 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
   },
 
   onPickEmoji: emoji => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
     dispatch(useEmoji(emoji));
 
     if (onPickEmoji) {
diff --git a/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js b/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js
index 828d08cf58..7f07064c40 100644
--- a/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js
+++ b/app/javascript/flavours/glitch/features/compose/containers/language_dropdown_container.js
@@ -26,6 +26,7 @@ const mapDispatchToProps = dispatch => ({
   },
 
   onClose (value) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
     dispatch(useLanguage(value));
   },
 
diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
index 06984f3ad1..485f2d022e 100644
--- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx
@@ -8,8 +8,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import AvatarComposite from 'flavours/glitch/components/avatar_composite';
 import Permalink from 'flavours/glitch/components/permalink';
-import IconButton from 'flavours/glitch/components/icon_button';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import { HotKeys } from 'react-hotkeys';
 import { autoPlayGif } from 'flavours/glitch/initial_state';
 import classNames from 'classnames';
diff --git a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx
index 663710b063..79543389c6 100644
--- a/app/javascript/flavours/glitch/features/directory/components/account_card.jsx
+++ b/app/javascript/flavours/glitch/features/directory/components/account_card.jsx
@@ -4,10 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'flavours/glitch/selectors';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import Button from 'flavours/glitch/components/button';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
 import { autoPlayGif, me, unfollowModal } from 'flavours/glitch/initial_state';
diff --git a/app/javascript/flavours/glitch/features/directory/index.jsx b/app/javascript/flavours/glitch/features/directory/index.jsx
index 4278a4e719..22280bbfdb 100644
--- a/app/javascript/flavours/glitch/features/directory/index.jsx
+++ b/app/javascript/flavours/glitch/features/directory/index.jsx
@@ -9,7 +9,7 @@ import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'flavour
 import { fetchDirectory, expandDirectory } from 'flavours/glitch/actions/directory';
 import { List as ImmutableList } from 'immutable';
 import AccountCard from './components/account_card';
-import RadioButton from 'flavours/glitch/components/radio_button';
+import { RadioButton } from 'flavours/glitch/components/radio_button';
 import LoadMore from 'flavours/glitch/components/load_more';
 import ScrollContainer from 'flavours/glitch/containers/scroll_container';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
diff --git a/app/javascript/flavours/glitch/features/emoji/emoji_compressed.js b/app/javascript/flavours/glitch/features/emoji/emoji_compressed.js
index 74b53ce5c8..0ed18b6a44 100644
--- a/app/javascript/flavours/glitch/features/emoji/emoji_compressed.js
+++ b/app/javascript/flavours/glitch/features/emoji/emoji_compressed.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here due to preval */
 // @preval
 // http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
 // This file contains the compressed version of the emoji data from
diff --git a/app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.js b/app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.js
index 49813537d7..000aeb0de4 100644
--- a/app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.js
+++ b/app/javascript/flavours/glitch/features/emoji/emoji_mart_data_light.js
@@ -1,8 +1,10 @@
 // The output of this module is designed to mimic emoji-mart's
 // "data" object, such that we can use it for a light version of emoji-mart's
 // emojiIndex.search functionality.
-const { unicodeToUnifiedName } = require('./unicode_to_unified_name');
-const [ shortCodesToEmojiData, skins, categories, short_names ] = require('./emoji_compressed');
+import { unicodeToUnifiedName } from './unicode_to_unified_name';
+import emojiCompressed from './emoji_compressed';
+
+const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
 
 const emojis = {};
 
@@ -33,7 +35,7 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
   };
 });
 
-module.exports = {
+export {
   emojis,
   skins,
   categories,
diff --git a/app/javascript/flavours/glitch/features/emoji/emoji_mart_search_light.js b/app/javascript/flavours/glitch/features/emoji/emoji_mart_search_light.js
index 70694ab6dd..83e154b0b2 100644
--- a/app/javascript/flavours/glitch/features/emoji/emoji_mart_search_light.js
+++ b/app/javascript/flavours/glitch/features/emoji/emoji_mart_search_light.js
@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 import { getData, getSanitizedData, uniq, intersect } from './emoji_utils';
 
 let originalPool = {};
diff --git a/app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js b/app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js
index 1a38fde234..30fbd9e349 100644
--- a/app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js
+++ b/app/javascript/flavours/glitch/features/emoji/emoji_unicode_mapping_light.js
@@ -2,14 +2,17 @@
 // (i.e. the svg filename) and a shortCode intended to be shown
 // as a "title" attribute in an HTML element (aka tooltip).
 
+import emojiCompressed from './emoji_compressed';
+
+import { unicodeToFilename } from './unicode_to_filename';
+
 const [
   shortCodesToEmojiData,
-  skins, // eslint-disable-line @typescript-eslint/no-unused-vars
-  categories, // eslint-disable-line @typescript-eslint/no-unused-vars
-  short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _skins,
+  _categories,
+  _short_names,
   emojisWithoutShortCodes,
-] = require('./emoji_compressed');
-const { unicodeToFilename } = require('./unicode_to_filename');
+] = emojiCompressed;
 
 // decompress
 const unicodeMapping = {};
@@ -32,4 +35,4 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
 });
 emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData));
 
-module.exports = unicodeMapping;
+export default unicodeMapping;
diff --git a/app/javascript/flavours/glitch/features/emoji/emoji_utils.js b/app/javascript/flavours/glitch/features/emoji/emoji_utils.js
index be793526d0..83bcc9d82f 100644
--- a/app/javascript/flavours/glitch/features/emoji/emoji_utils.js
+++ b/app/javascript/flavours/glitch/features/emoji/emoji_utils.js
@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 
 const buildSearch = (data) => {
   const search = [];
diff --git a/app/javascript/flavours/glitch/features/emoji/unicode_to_filename.js b/app/javascript/flavours/glitch/features/emoji/unicode_to_filename.js
index c75c4cd7d0..3395c77174 100644
--- a/app/javascript/flavours/glitch/features/emoji/unicode_to_filename.js
+++ b/app/javascript/flavours/glitch/features/emoji/unicode_to_filename.js
@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 // taken from:
 // https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866
 exports.unicodeToFilename = (str) => {
diff --git a/app/javascript/flavours/glitch/features/emoji/unicode_to_unified_name.js b/app/javascript/flavours/glitch/features/emoji/unicode_to_unified_name.js
index d29550f122..108b911222 100644
--- a/app/javascript/flavours/glitch/features/emoji/unicode_to_unified_name.js
+++ b/app/javascript/flavours/glitch/features/emoji/unicode_to_unified_name.js
@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 function padLeft(str, num) {
   while (str.length < num) {
     str = '0' + str;
diff --git a/app/javascript/flavours/glitch/features/explore/components/story.jsx b/app/javascript/flavours/glitch/features/explore/components/story.jsx
index 8270d3ccbb..d70914d41a 100644
--- a/app/javascript/flavours/glitch/features/explore/components/story.jsx
+++ b/app/javascript/flavours/glitch/features/explore/components/story.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 import { accountsCountRenderer } from 'flavours/glitch/components/hashtag';
 import ShortNumber from 'flavours/glitch/components/short_number';
 import Skeleton from 'flavours/glitch/components/skeleton';
diff --git a/app/javascript/flavours/glitch/features/favourites/index.jsx b/app/javascript/flavours/glitch/features/favourites/index.jsx
index 21ce7fcc7e..8755811d94 100644
--- a/app/javascript/flavours/glitch/features/favourites/index.jsx
+++ b/app/javascript/flavours/glitch/features/favourites/index.jsx
@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { fetchFavourites } from 'flavours/glitch/actions/interactions';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
diff --git a/app/javascript/flavours/glitch/features/filters/select_filter.jsx b/app/javascript/flavours/glitch/features/filters/select_filter.jsx
index a33892f83f..e7cdd4e197 100644
--- a/app/javascript/flavours/glitch/features/filters/select_filter.jsx
+++ b/app/javascript/flavours/glitch/features/filters/select_filter.jsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { toServerSideType } from 'flavours/glitch/utils/filters';
 import { loupeIcon, deleteIcon } from 'flavours/glitch/utils/icons';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import fuzzysort from 'fuzzysort';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx b/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx
index e56af7364b..e15bc14222 100644
--- a/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx
+++ b/app/javascript/flavours/glitch/features/follow_recommendations/components/account.jsx
@@ -4,10 +4,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'flavours/glitch/selectors';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { injectIntl, defineMessages } from 'react-intl';
 import { followAccount, unfollowAccount } from 'flavours/glitch/actions/accounts';
 
diff --git a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
index af8a534fa4..b2dfc5dbb3 100644
--- a/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
+++ b/app/javascript/flavours/glitch/features/follow_requests/components/account_authorize.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import Permalink from 'flavours/glitch/components/permalink';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
diff --git a/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx b/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx
index 29288076b7..fd76f9773d 100644
--- a/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx
+++ b/app/javascript/flavours/glitch/features/getting_started/components/announcements.jsx
@@ -3,15 +3,15 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ReactSwipeableViews from 'react-swipeable-views';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from 'flavours/glitch/components/icon_button';
-import Icon from 'flavours/glitch/components/icon';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { Icon } from 'flavours/glitch/components/icon';
 import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
 import { autoPlayGif, reduceMotion, disableSwiping, mascot } from 'flavours/glitch/initial_state';
 import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
 import unicodeMapping from 'flavours/glitch/features/emoji/emoji_unicode_mapping_light';
 import classNames from 'classnames';
 import EmojiPickerDropdown from 'flavours/glitch/features/compose/containers/emoji_picker_dropdown_container';
-import AnimatedNumber from 'flavours/glitch/components/animated_number';
+import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
 import { assetHost } from 'flavours/glitch/utils/config';
diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx b/app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx
index fe5afa2406..cd3639d968 100644
--- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx
@@ -12,7 +12,7 @@ import { connectHashtagStream } from 'flavours/glitch/actions/streaming';
 import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { isEqual } from 'lodash';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'flavours/glitch/actions/tags';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 
diff --git a/app/javascript/flavours/glitch/features/home_timeline/index.jsx b/app/javascript/flavours/glitch/features/home_timeline/index.jsx
index 71619394b6..a8dfa1d08f 100644
--- a/app/javascript/flavours/glitch/features/home_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/home_timeline/index.jsx
@@ -12,8 +12,8 @@ import { Link } from 'react-router-dom';
 import { fetchAnnouncements, toggleShowAnnouncements } from 'flavours/glitch/actions/announcements';
 import AnnouncementsContainer from 'flavours/glitch/features/getting_started/containers/announcements_container';
 import classNames from 'classnames';
-import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
-import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
+import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
+import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
index 20e4959e6f..380edee659 100644
--- a/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
+++ b/app/javascript/flavours/glitch/features/interaction_modal/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen } from 'flavours/glitch/initial_state';
 import { connect } from 'react-redux';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 import { openModal, closeModal } from 'flavours/glitch/actions/modal';
 
diff --git a/app/javascript/flavours/glitch/features/list_adder/components/account.jsx b/app/javascript/flavours/glitch/features/list_adder/components/account.jsx
index 034ed0edc9..64522a3a86 100644
--- a/app/javascript/flavours/glitch/features/list_adder/components/account.jsx
+++ b/app/javascript/flavours/glitch/features/list_adder/components/account.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { makeGetAccount } from '../../../selectors';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import { injectIntl } from 'react-intl';
 
diff --git a/app/javascript/flavours/glitch/features/list_adder/components/list.jsx b/app/javascript/flavours/glitch/features/list_adder/components/list.jsx
index 1957bbe420..587a953b01 100644
--- a/app/javascript/flavours/glitch/features/list_adder/components/list.jsx
+++ b/app/javascript/flavours/glitch/features/list_adder/components/list.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
diff --git a/app/javascript/flavours/glitch/features/list_editor/components/account.jsx b/app/javascript/flavours/glitch/features/list_editor/components/account.jsx
index 71a8b76736..69fbaf5042 100644
--- a/app/javascript/flavours/glitch/features/list_editor/components/account.jsx
+++ b/app/javascript/flavours/glitch/features/list_editor/components/account.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.jsx b/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.jsx
index b4886ef0ed..3f4e9ded60 100644
--- a/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.jsx
+++ b/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { changeListEditorTitle, submitListEditor } from 'flavours/glitch/actions/lists';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/list_editor/components/search.jsx b/app/javascript/flavours/glitch/features/list_editor/components/search.jsx
index 3b66bc325d..3a51a7b4e5 100644
--- a/app/javascript/flavours/glitch/features/list_editor/components/search.jsx
+++ b/app/javascript/flavours/glitch/features/list_editor/components/search.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages } from 'react-intl';
 import classNames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.jsx b/app/javascript/flavours/glitch/features/list_timeline/index.jsx
index ef1dbaae78..f7abe248d4 100644
--- a/app/javascript/flavours/glitch/features/list_timeline/index.jsx
+++ b/app/javascript/flavours/glitch/features/list_timeline/index.jsx
@@ -11,9 +11,9 @@ import { connectListStream } from 'flavours/glitch/actions/streaming';
 import { expandListTimeline } from 'flavours/glitch/actions/timelines';
 import Column from 'flavours/glitch/components/column';
 import ColumnHeader from 'flavours/glitch/components/column_header';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
-import RadioButton from 'flavours/glitch/components/radio_button';
+import { RadioButton } from 'flavours/glitch/components/radio_button';
 import StatusListContainer from 'flavours/glitch/features/ui/containers/status_list_container';
 import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
diff --git a/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx b/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx
index be94ff5595..aa743dea4a 100644
--- a/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx
+++ b/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { changeListEditorTitle, submitListEditor } from 'flavours/glitch/actions/lists';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
index 9ac6d9b73d..2de7c952c8 100644
--- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
+++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 //  * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx
index 436f64b5d2..3d5f67a178 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/admin_report.jsx
@@ -10,7 +10,7 @@ import classNames from 'classnames';
 // Our imports.
 import Permalink from 'flavours/glitch/components/permalink';
 import NotificationOverlayContainer from '../containers/overlay_container';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import Report from './report';
 
 export default class AdminReport extends ImmutablePureComponent {
diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx
index d982108e92..7c872e182f 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import Permalink from 'flavours/glitch/components/permalink';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import NotificationOverlayContainer from '../containers/overlay_container';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class NotificationFollow extends ImmutablePureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx b/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx
index cd150314b7..0602b4cf00 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/clear_column_button.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class ClearColumnButton extends React.Component {
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
index 7f36fb8135..cc83fa5cfd 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const tooltips = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx
index e9ef70911e..88c90f3ce6 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/follow.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import Permalink from 'flavours/glitch/components/permalink';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import NotificationOverlayContainer from '../containers/overlay_container';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class NotificationFollow extends ImmutablePureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
index 2b985bc085..d7c229404b 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/follow_request.jsx
@@ -1,15 +1,15 @@
 import React, { Fragment } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import Permalink from 'flavours/glitch/components/permalink';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import NotificationOverlayContainer from '../containers/overlay_container';
 import { HotKeys } from 'react-hotkeys';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
index 5a12191a51..8868cc0cb4 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import Button from 'flavours/glitch/components/button';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { requestBrowserPermission } from 'flavours/glitch/actions/notifications';
 import { changeSetting } from 'flavours/glitch/actions/settings';
 import { connect } from 'react-redux';
diff --git a/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx b/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx
index 554a7a668e..00e6257380 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx
@@ -9,7 +9,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 const messages = defineMessages({
   markForDeletion: { id: 'notification.markForDeletion', defaultMessage: 'Mark for deletion' },
diff --git a/app/javascript/flavours/glitch/features/notifications/components/report.jsx b/app/javascript/flavours/glitch/features/notifications/components/report.jsx
index 5cff01dacd..b2e795b2d1 100644
--- a/app/javascript/flavours/glitch/features/notifications/components/report.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/components/report.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import AvatarOverlay from 'flavours/glitch/components/avatar_overlay';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 
 const messages = defineMessages({
   openReport: { id: 'report_notification.open', defaultMessage: 'Open report' },
diff --git a/app/javascript/flavours/glitch/features/notifications/index.jsx b/app/javascript/flavours/glitch/features/notifications/index.jsx
index b9c9d82031..c1042c1367 100644
--- a/app/javascript/flavours/glitch/features/notifications/index.jsx
+++ b/app/javascript/flavours/glitch/features/notifications/index.jsx
@@ -25,10 +25,10 @@ import { List as ImmutableList } from 'immutable';
 import { debounce } from 'lodash';
 import ScrollableList from 'flavours/glitch/components/scrollable_list';
 import LoadGap from 'flavours/glitch/components/load_gap';
-import Icon from 'flavours/glitch/components/icon';
-import compareId from 'flavours/glitch/compare_id';
+import { Icon } from 'flavours/glitch/components/icon';
+import { compareId } from 'flavours/glitch/compare_id';
 import NotificationsPermissionBanner from './components/notifications_permission_banner';
-import NotSignedInIndicator from 'flavours/glitch/components/not_signed_in_indicator';
+import { NotSignedInIndicator } from 'flavours/glitch/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
 
 import NotificationPurgeButtonsContainer from 'flavours/glitch/containers/notification_purge_buttons_container';
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
index 51fe023d32..01a823f173 100644
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/footer.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import classNames from 'classnames';
 import { me, boostModal } from 'flavours/glitch/initial_state';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx
index b9b90f1d8f..b9c72c276c 100644
--- a/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/picture_in_picture/components/header.jsx
@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { Link } from 'react-router-dom';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import { defineMessages, injectIntl } from 'react-intl';
 
diff --git a/app/javascript/flavours/glitch/features/reblogs/index.jsx b/app/javascript/flavours/glitch/features/reblogs/index.jsx
index 34fe24d3fe..fe74f1fbcc 100644
--- a/app/javascript/flavours/glitch/features/reblogs/index.jsx
+++ b/app/javascript/flavours/glitch/features/reblogs/index.jsx
@@ -6,7 +6,7 @@ import LoadingIndicator from 'flavours/glitch/components/loading_indicator';
 import { fetchReblogs } from 'flavours/glitch/actions/interactions';
 import AccountContainer from 'flavours/glitch/containers/account_container';
 import Column from 'flavours/glitch/features/ui/components/column';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import ColumnHeader from 'flavours/glitch/components/column_header';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx b/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx
index 2231fc0ce2..6b74aafeea 100644
--- a/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx
+++ b/app/javascript/flavours/glitch/features/report/components/status_check_box.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusContent from 'flavours/glitch/components/status_content';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import Option from './option';
 import MediaAttachments from 'flavours/glitch/components/media_attachments';
 import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
diff --git a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
index d5ab730d65..b1998a8fce 100644
--- a/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/action_bar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/app/javascript/flavours/glitch/features/status/components/card.jsx b/app/javascript/flavours/glitch/features/status/components/card.jsx
index af3fe4bf09..9b84da06e5 100644
--- a/app/javascript/flavours/glitch/features/status/components/card.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/card.jsx
@@ -5,9 +5,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import classnames from 'classnames';
 import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { useBlurhash } from 'flavours/glitch/initial_state';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 
 const getHostname = url => {
   const parser = document.createElement('a');
diff --git a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
index 3f5b119444..26f40c3e05 100644
--- a/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
+++ b/app/javascript/flavours/glitch/features/status/components/detailed_status.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import DisplayName from 'flavours/glitch/components/display_name';
 import StatusContent from 'flavours/glitch/components/status_content';
 import MediaGallery from 'flavours/glitch/components/media_gallery';
@@ -16,8 +16,8 @@ import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
 import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import classNames from 'classnames';
 import PollContainer from 'flavours/glitch/containers/poll_container';
-import Icon from 'flavours/glitch/components/icon';
-import AnimatedNumber from 'flavours/glitch/components/animated_number';
+import { Icon } from 'flavours/glitch/components/icon';
+import { AnimatedNumber } from 'flavours/glitch/components/animated_number';
 import PictureInPicturePlaceholder from 'flavours/glitch/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'flavours/glitch/components/edited_timestamp';
 
diff --git a/app/javascript/flavours/glitch/features/status/index.jsx b/app/javascript/flavours/glitch/features/status/index.jsx
index 54e6691beb..46e49177ec 100644
--- a/app/javascript/flavours/glitch/features/status/index.jsx
+++ b/app/javascript/flavours/glitch/features/status/index.jsx
@@ -52,7 +52,7 @@ import { boostModal, favouriteModal, deleteModal } from 'flavours/glitch/initial
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 import { autoUnfoldCW } from 'flavours/glitch/utils/content_warning';
 import { textForScreenReader, defaultMediaVisibility } from 'flavours/glitch/components/status';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import { Helmet } from 'react-helmet';
 import BundleColumnError from 'flavours/glitch/features/ui/components/bundle_column_error';
 
diff --git a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
index 85144a191e..5fa0053b22 100644
--- a/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
+++ b/app/javascript/flavours/glitch/features/subscribed_languages_modal/index.jsx
@@ -8,7 +8,7 @@ import { is, List as ImmutableList, Set as ImmutableSet } from 'immutable';
 import { languages as preloadedLanguages } from 'flavours/glitch/initial_state';
 import Option from 'flavours/glitch/features/report/components/option';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import Button from 'flavours/glitch/components/button';
 import { followAccount } from 'flavours/glitch/actions/accounts';
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
index 9a9b1a3f1f..6a98e8b533 100644
--- a/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/actions_modal.jsx
@@ -3,11 +3,11 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import StatusContent from 'flavours/glitch/components/status_content';
-import Avatar from 'flavours/glitch/components/avatar';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { Avatar } from 'flavours/glitch/components/avatar';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import DisplayName from 'flavours/glitch/components/display_name';
 import classNames from 'classnames';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 
 export default class ActionsModal extends ImmutablePureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx
index d9523a26ed..939e9765e8 100644
--- a/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/boost_modal.jsx
@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Button from 'flavours/glitch/components/button';
 import StatusContent from 'flavours/glitch/components/status_content';
-import Avatar from 'flavours/glitch/components/avatar';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { Avatar } from 'flavours/glitch/components/avatar';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import DisplayName from 'flavours/glitch/components/display_name';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import PrivacyDropdown from 'flavours/glitch/features/compose/components/privacy_dropdown';
 import classNames from 'classnames';
diff --git a/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx b/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx
index b791054503..53a51967ae 100644
--- a/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/bundle_modal_error.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 
 const messages = defineMessages({
   error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
diff --git a/app/javascript/flavours/glitch/features/ui/components/column_header.jsx b/app/javascript/flavours/glitch/features/ui/components/column_header.jsx
index 151476f8ba..2b5d7abe28 100644
--- a/app/javascript/flavours/glitch/features/ui/components/column_header.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/column_header.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 
 export default class ColumnHeader extends React.PureComponent {
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/column_link.jsx b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx
index 10b46f93d1..4b02c9befc 100644
--- a/app/javascript/flavours/glitch/features/ui/components/column_link.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/column_link.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import classNames from 'classnames';
 
 const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent, ...other }) => {
diff --git a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
index cc3a16d170..e0083e3f11 100644
--- a/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/compare_history_modal.jsx
@@ -7,8 +7,8 @@ import { closeModal } from 'flavours/glitch/actions/modal';
 import emojify from 'flavours/glitch/features/emoji/emoji';
 import escapeTextContentForBrowser from 'escape-html';
 import InlineAccount from 'flavours/glitch/components/inline_account';
-import IconButton from 'flavours/glitch/components/icon_button';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { IconButton } from 'flavours/glitch/components/icon_button';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import MediaAttachments from 'flavours/glitch/components/media_attachments';
 
 const mapStateToProps = (state, { statusId }) => ({
diff --git a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx
index 3face11463..d90cb920c4 100644
--- a/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/deprecated_settings_modal.jsx
@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { preferenceLink } from 'flavours/glitch/utils/backend_links';
 import Button from 'flavours/glitch/components/button';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import illustration from 'flavours/glitch/images/logo_warn_glitch.svg';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx
index 0b66ad09d2..7891cfa948 100644
--- a/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx
@@ -6,7 +6,7 @@ import Atrament from 'atrament'; // the doodling library
 import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { doodleSet, uploadCompose } from 'flavours/glitch/actions/compose';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { debounce, mapValues } from 'lodash';
 import classNames from 'classnames';
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx
index 4f1173fd56..1c83517a17 100644
--- a/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/embed_modal.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import api from 'flavours/glitch/api';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
diff --git a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx
index fa6f117925..03e93cd27c 100644
--- a/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/favourite_modal.jsx
@@ -4,11 +4,11 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Button from 'flavours/glitch/components/button';
 import StatusContent from 'flavours/glitch/components/status_content';
-import Avatar from 'flavours/glitch/components/avatar';
-import RelativeTimestamp from 'flavours/glitch/components/relative_timestamp';
+import { Avatar } from 'flavours/glitch/components/avatar';
+import { RelativeTimestamp } from 'flavours/glitch/components/relative_timestamp';
 import DisplayName from 'flavours/glitch/components/display_name';
 import AttachmentList from 'flavours/glitch/components/attachment_list';
-import Icon from 'flavours/glitch/components/icon';
+import { Icon } from 'flavours/glitch/components/icon';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import classNames from 'classnames';
 import VisibilityIcon from 'flavours/glitch/components/status_visibility_icon';
diff --git a/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx
index 440a6ac4b2..27d2bada2d 100644
--- a/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/filter_modal.jsx
@@ -5,7 +5,7 @@ import { fetchFilters, createFilter, createFilterStatus } from 'flavours/glitch/
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import SelectFilter from 'flavours/glitch/features/filters/select_filter';
 import AddedToFilter from 'flavours/glitch/features/filters/added_to_filter';
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
index 78aee8dfe0..2b61bad70e 100644
--- a/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/focal_point_modal.jsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from 'flavours/glitch/actions/compose';
 import Video, { getPointerPosition } from 'flavours/glitch/features/video';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import Button from 'flavours/glitch/components/button';
 import Audio from 'flavours/glitch/features/audio';
 import Textarea from 'react-textarea-autosize';
@@ -15,7 +15,7 @@ import UploadProgress from 'flavours/glitch/features/compose/components/upload_p
 import CharacterCounter from 'flavours/glitch/features/compose/components/character_counter';
 import { length } from 'stringz';
 import { Tesseract as fetchTesseract } from 'flavours/glitch/features/ui/util/async-components';
-import GIFV from 'flavours/glitch/components/gifv';
+import { GIFV } from 'flavours/glitch/components/gifv';
 import { me } from 'flavours/glitch/initial_state';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js';
diff --git a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx
index f3e3b78ed9..1a5f4418cd 100644
--- a/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/follow_requests_column_link.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { fetchFollowRequests } from 'flavours/glitch/actions/accounts';
 import { connect } from 'react-redux';
 import ColumnLink from 'flavours/glitch/features/ui/components/column_link';
-import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
+import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
 import { List as ImmutableList } from 'immutable';
 import { injectIntl, defineMessages } from 'react-intl';
 
diff --git a/app/javascript/flavours/glitch/features/ui/components/header.jsx b/app/javascript/flavours/glitch/features/ui/components/header.jsx
index 42ed4d9013..519f917caa 100644
--- a/app/javascript/flavours/glitch/features/ui/components/header.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/header.jsx
@@ -3,7 +3,7 @@ import { WordmarkLogo, SymbolLogo } from 'flavours/glitch/components/logo';
 import { Link, withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen, me } from 'flavours/glitch/initial_state';
-import Avatar from 'flavours/glitch/components/avatar';
+import { Avatar } from 'flavours/glitch/components/avatar';
 import Permalink from 'flavours/glitch/components/permalink';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
diff --git a/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx
index 5198b88092..21d7ae8f38 100644
--- a/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/image_modal.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import ImageLoader from './image_loader';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
index 6ca96b743e..1e51db0099 100644
--- a/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/media_modal.jsx
@@ -6,11 +6,11 @@ import Video from 'flavours/glitch/features/video';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImageLoader from './image_loader';
-import Icon from 'flavours/glitch/components/icon';
-import GIFV from 'flavours/glitch/components/gifv';
+import { Icon } from 'flavours/glitch/components/icon';
+import { GIFV } from 'flavours/glitch/components/gifv';
 import Footer from 'flavours/glitch/features/picture_in_picture/components/footer';
 import { getAverageFromBlurhash } from 'flavours/glitch/blurhash';
 import { disableSwiping } from 'flavours/glitch/initial_state';
diff --git a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
index 6b52ef9b46..db54c16185 100644
--- a/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/flavours/glitch/features/ui/components/notifications_counter_icon.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import IconWithBadge from 'flavours/glitch/components/icon_with_badge';
+import { IconWithBadge } from 'flavours/glitch/components/icon_with_badge';
 
 const mapStateToProps = state => ({
   count: state.getIn(['local_settings', 'notifications', 'tab_badge']) ? state.getIn(['notifications', 'unread']) : 0,
diff --git a/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx b/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx
index 79b4958771..b27e69230c 100644
--- a/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/report_modal.jsx
@@ -10,7 +10,7 @@ import { makeGetAccount } from 'flavours/glitch/selectors';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { OrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import Category from 'flavours/glitch/features/report/category';
 import Statuses from 'flavours/glitch/features/report/statuses';
 import Rules from 'flavours/glitch/features/report/rules';
diff --git a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
index 47401cfe4c..51defec512 100644
--- a/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
+++ b/app/javascript/flavours/glitch/features/ui/components/zoomable_image.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from 'flavours/glitch/components/icon_button';
+import { IconButton } from 'flavours/glitch/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/app/javascript/flavours/glitch/features/ui/index.jsx b/app/javascript/flavours/glitch/features/ui/index.jsx
index cc7937e5e2..a29070bc7a 100644
--- a/app/javascript/flavours/glitch/features/ui/index.jsx
+++ b/app/javascript/flavours/glitch/features/ui/index.jsx
@@ -58,7 +58,7 @@ import {
 } from './util/async-components';
 import { HotKeys } from 'react-hotkeys';
 import initialState, { me, owner, singleUserMode, showTrends, trendsAsLanding } from '../../initial_state';
-import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
+// TODO: import { closeOnboarding, INTRODUCTION_VERSION } from 'flavours/glitch/actions/onboarding';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import Header from './components/header';
 
@@ -82,7 +82,7 @@ const mapStateToProps = state => ({
   showFaviconBadge: state.getIn(['local_settings', 'notifications', 'favicon_badge']),
   hicolorPrivacyIcons: state.getIn(['local_settings', 'hicolor_privacy_icons']),
   moved: state.getIn(['accounts', me, 'moved']) && state.getIn(['accounts', state.getIn(['accounts', me, 'moved'])]),
-  firstLaunch: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
+  firstLaunch: false, // TODO: state.getIn(['settings', 'introductionVersion'], 0) < INTRODUCTION_VERSION,
   username: state.getIn(['accounts', me, 'username']),
 });
 
@@ -405,7 +405,7 @@ class UI extends React.Component {
     // On first launch, redirect to the follow recommendations page
     if (signedIn && this.props.firstLaunch) {
       this.context.router.history.replace('/start');
-      this.props.dispatch(closeOnboarding());
+      // TODO: this.props.dispatch(closeOnboarding());
     }
 
     if (signedIn) {
diff --git a/app/javascript/flavours/glitch/features/video/index.jsx b/app/javascript/flavours/glitch/features/video/index.jsx
index 78d36edb70..fb791fa9f3 100644
--- a/app/javascript/flavours/glitch/features/video/index.jsx
+++ b/app/javascript/flavours/glitch/features/video/index.jsx
@@ -6,8 +6,8 @@ import { throttle } from 'lodash';
 import classNames from 'classnames';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
-import Icon from 'flavours/glitch/components/icon';
-import Blurhash from 'flavours/glitch/components/blurhash';
+import { Icon } from 'flavours/glitch/components/icon';
+import { Blurhash } from 'flavours/glitch/components/blurhash';
 
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
diff --git a/app/javascript/flavours/glitch/hooks/useHovering.ts b/app/javascript/flavours/glitch/hooks/useHovering.ts
new file mode 100644
index 0000000000..2062e70d26
--- /dev/null
+++ b/app/javascript/flavours/glitch/hooks/useHovering.ts
@@ -0,0 +1,17 @@
+import { useCallback, useState } from 'react';
+
+export const useHovering = (animate?: boolean) => {
+  const [hovering, setHovering] = useState<boolean>(animate ?? false);
+
+  const handleMouseEnter = useCallback(() => {
+    if (animate) return;
+    setHovering(true);
+  }, [animate]);
+
+  const handleMouseLeave = useCallback(() => {
+    if (animate) return;
+    setHovering(false);
+  }, [animate]);
+
+  return { hovering, handleMouseEnter, handleMouseLeave };
+};
diff --git a/app/javascript/flavours/glitch/is_mobile.ts b/app/javascript/flavours/glitch/is_mobile.ts
index d33246882d..c91ba4d53d 100644
--- a/app/javascript/flavours/glitch/is_mobile.ts
+++ b/app/javascript/flavours/glitch/is_mobile.ts
@@ -6,31 +6,27 @@ const LAYOUT_BREAKPOINT = 630;
 export const isMobile = (width: number) => width <= LAYOUT_BREAKPOINT;
 
 export type LayoutType = 'mobile' | 'single-column' | 'multi-column';
-export const layoutFromWindow = (layout_local_setting : string): LayoutType => {
+export const layoutFromWindow = (layout_local_setting: string): LayoutType => {
   switch (layout_local_setting) {
-  case 'multiple':
-    return 'multi-column';
-  case 'single':
-    if (isMobile(window.innerWidth)) {
-      return 'mobile';
-    } else {
-      return 'single-column';
-    }
-  default:
-    if (isMobile(window.innerWidth)) {
-      return 'mobile';
-    } else if (forceSingleColumn) {
-      return 'single-column';
-    } else {
+    case 'multiple':
       return 'multi-column';
-    }
+    case 'single':
+      if (isMobile(window.innerWidth)) {
+        return 'mobile';
+      } else {
+        return 'single-column';
+      }
+    default:
+      if (isMobile(window.innerWidth)) {
+        return 'mobile';
+      } else if (forceSingleColumn) {
+        return 'single-column';
+      } else {
+        return 'multi-column';
+      }
   }
 };
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && window.MSStream != null;
-
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
 let userTouching = false;
@@ -44,5 +40,3 @@ const touchListener = () => {
 window.addEventListener('touchstart', touchListener, listenerOptions);
 
 export const isUserTouching = () => userTouching;
-
-export const isIOS = () => iOS;
diff --git a/app/javascript/flavours/glitch/main.jsx b/app/javascript/flavours/glitch/main.jsx
index e3a98b4843..1ac7d579ec 100644
--- a/app/javascript/flavours/glitch/main.jsx
+++ b/app/javascript/flavours/glitch/main.jsx
@@ -2,11 +2,11 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { setupBrowserNotifications } from 'flavours/glitch/actions/notifications';
 import Mastodon from 'flavours/glitch/containers/mastodon';
-import { store } from 'flavours/glitch/store/configureStore';
+import { store } from 'flavours/glitch/store';
 import { me } from 'flavours/glitch/initial_state';
 import ready from 'flavours/glitch/ready';
 
-const perf = require('flavours/glitch/performance');
+import * as perf from 'flavours/glitch/performance';
 
 /**
  * @returns {Promise<void>}
diff --git a/app/javascript/flavours/glitch/middleware/loading_bar.js b/app/javascript/flavours/glitch/middleware/loading_bar.js
deleted file mode 100644
index da8cc4c7d3..0000000000
--- a/app/javascript/flavours/glitch/middleware/loading_bar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { showLoading, hideLoading } from 'react-redux-loading-bar';
-
-const defaultTypeSuffixes = ['PENDING', 'FULFILLED', 'REJECTED'];
-
-export default function loadingBarMiddleware(config = {}) {
-  const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
-
-  return ({ dispatch }) => next => (action) => {
-    if (action.type && !action.skipLoading) {
-      const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;
-
-      const isPending = new RegExp(`${PENDING}$`, 'g');
-      const isFulfilled = new RegExp(`${FULFILLED}$`, 'g');
-      const isRejected = new RegExp(`${REJECTED}$`, 'g');
-
-      if (action.type.match(isPending)) {
-        dispatch(showLoading());
-      } else if (action.type.match(isFulfilled) || action.type.match(isRejected)) {
-        dispatch(hideLoading());
-      }
-    }
-
-    return next(action);
-  };
-}
diff --git a/app/javascript/flavours/glitch/packs/admin.jsx b/app/javascript/flavours/glitch/packs/admin.jsx
index 56cdfc30a3..7544ae4e97 100644
--- a/app/javascript/flavours/glitch/packs/admin.jsx
+++ b/app/javascript/flavours/glitch/packs/admin.jsx
@@ -1,10 +1,9 @@
 import 'packs/public-path';
 import ready from 'flavours/glitch/ready';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 ready(() => {
-  const React    = require('react');
-  const ReactDOM = require('react-dom');
-
   [].forEach.call(document.querySelectorAll('[data-admin-component]'), element => {
     const componentName  = element.getAttribute('data-admin-component');
     const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));
diff --git a/app/javascript/flavours/glitch/packs/home.js b/app/javascript/flavours/glitch/packs/home.js
index ace9dc3c4f..a28625d33b 100644
--- a/app/javascript/flavours/glitch/packs/home.js
+++ b/app/javascript/flavours/glitch/packs/home.js
@@ -1,5 +1,5 @@
 import 'packs/public-path';
-import loadPolyfills from 'flavours/glitch/load_polyfills';
+import { loadPolyfills } from 'flavours/glitch/polyfills';
 
 loadPolyfills().then(async () => {
   const { default: main } = await import('flavours/glitch/main');
diff --git a/app/javascript/flavours/glitch/packs/public.jsx b/app/javascript/flavours/glitch/packs/public.jsx
index 93b249bb41..34a8f35133 100644
--- a/app/javascript/flavours/glitch/packs/public.jsx
+++ b/app/javascript/flavours/glitch/packs/public.jsx
@@ -1,10 +1,18 @@
 import 'packs/public-path';
-import loadPolyfills from 'flavours/glitch/load_polyfills';
+import { loadPolyfills } from 'flavours/glitch/polyfills';
 import ready from 'flavours/glitch/ready';
 import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
 import axios from 'axios';
 import { throttle } from 'lodash';
 import { defineMessages } from 'react-intl';
+import * as IntlMessageFormat  from 'intl-messageformat';
+import { timeAgoString }  from 'flavours/glitch/components/relative_timestamp';
+import { delegate }  from '@rails/ujs';
+import emojify  from 'flavours/glitch/features/emoji/emoji';
+import { getLocale }  from 'locales';
+import React  from 'react';
+import ReactDOM  from 'react-dom';
+import { createBrowserHistory }  from 'history';
 
 const messages = defineMessages({
   usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
@@ -13,15 +21,7 @@ const messages = defineMessages({
 });
 
 function main() {
-  const IntlMessageFormat = require('intl-messageformat').default;
-  const { timeAgoString } = require('flavours/glitch/components/relative_timestamp');
-  const { delegate } = require('@rails/ujs');
-  const emojify = require('flavours/glitch/features/emoji/emoji').default;
-  const { getLocale } = require('locales');
   const { localeData } = getLocale();
-  const React = require('react');
-  const ReactDOM = require('react-dom');
-  const { createBrowserHistory } = require('history');
 
   const scrollToDetailedStatus = () => {
     const history = createBrowserHistory();
diff --git a/app/javascript/flavours/glitch/packs/settings.js b/app/javascript/flavours/glitch/packs/settings.js
index 55a8ae1c65..891b49337a 100644
--- a/app/javascript/flavours/glitch/packs/settings.js
+++ b/app/javascript/flavours/glitch/packs/settings.js
@@ -1,11 +1,10 @@
 import 'packs/public-path';
-import loadPolyfills from 'flavours/glitch/load_polyfills';
+import { loadPolyfills } from 'flavours/glitch/polyfills';
 import loadKeyboardExtensions from 'flavours/glitch/load_keyboard_extensions';
+import { delegate }  from '@rails/ujs';
 import 'cocoon-js-vanilla';
 
 function main() {
-  const { delegate } = require('@rails/ujs');
-
   const toggleSidebar = () => {
     const sidebar = document.querySelector('.sidebar ul');
     const toggleButton = document.querySelector('.sidebar__toggle__icon');
diff --git a/app/javascript/flavours/glitch/packs/share.jsx b/app/javascript/flavours/glitch/packs/share.jsx
index e5a79849aa..47a51a5b01 100644
--- a/app/javascript/flavours/glitch/packs/share.jsx
+++ b/app/javascript/flavours/glitch/packs/share.jsx
@@ -1,20 +1,23 @@
 import 'packs/public-path';
-import loadPolyfills from 'flavours/glitch/load_polyfills';
+import { loadPolyfills } from 'flavours/glitch/polyfills';
+import ComposeContainer from 'flavours/glitch/containers/compose_container';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import ready from 'flavours/glitch/ready';
 
 function loaded() {
-  const ComposeContainer = require('flavours/glitch/containers/compose_container').default;
-  const React = require('react');
-  const ReactDOM = require('react-dom');
   const mountNode = document.getElementById('mastodon-compose');
 
-  if (mountNode !== null) {
-    const props = JSON.parse(mountNode.getAttribute('data-props'));
+  if (mountNode) {
+    const attr = mountNode.getAttribute('data-props');
+    if(!attr) return;
+
+    const props = JSON.parse(attr);
     ReactDOM.render(<ComposeContainer {...props} />, mountNode);
   }
 }
 
 function main() {
-  const ready = require('flavours/glitch/ready').default;
   ready(loaded);
 }
 
diff --git a/app/javascript/flavours/glitch/performance.js b/app/javascript/flavours/glitch/performance.js
index 2b7e1bda84..42849c82b1 100644
--- a/app/javascript/flavours/glitch/performance.js
+++ b/app/javascript/flavours/glitch/performance.js
@@ -2,9 +2,8 @@
 // Tools for performance debugging, only enabled in development mode.
 // Open up Chrome Dev Tools, then Timeline, then User Timing to see output.
 // Also see config/webpack/loaders/mark.js for the webpack loader marks.
-//
 
-let marky;
+import * as marky from 'marky';
 
 if (process.env.NODE_ENV === 'development') {
   if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
@@ -12,8 +11,7 @@ if (process.env.NODE_ENV === 'development') {
     // See: https://bugzilla.mozilla.org/show_bug.cgi?id=1331135
     performance.setResourceTimingBufferSize(Infinity);
   }
-  // eslint-disable-next-line import/no-extraneous-dependencies
-  marky = require('marky');
+
   // allows us to easily do e.g. ReactPerf.printWasted() while debugging
   //window.ReactPerf = require('react-addons-perf');
   //window.ReactPerf.start();
diff --git a/app/javascript/flavours/glitch/permissions.ts b/app/javascript/flavours/glitch/permissions.ts
index 9ea149e5f8..b583535c00 100644
--- a/app/javascript/flavours/glitch/permissions.ts
+++ b/app/javascript/flavours/glitch/permissions.ts
@@ -1,4 +1,4 @@
-export const PERMISSION_INVITE_USERS      = 0x0000000000010000;
-export const PERMISSION_MANAGE_USERS      = 0x0000000000000400;
+export const PERMISSION_INVITE_USERS = 0x0000000000010000;
+export const PERMISSION_MANAGE_USERS = 0x0000000000000400;
 export const PERMISSION_MANAGE_FEDERATION = 0x0000000000000020;
-export const PERMISSION_MANAGE_REPORTS    = 0x0000000000000010;
+export const PERMISSION_MANAGE_REPORTS = 0x0000000000000010;
diff --git a/app/javascript/flavours/glitch/base_polyfills.js b/app/javascript/flavours/glitch/polyfills/base_polyfills.ts
similarity index 58%
rename from app/javascript/flavours/glitch/base_polyfills.js
rename to app/javascript/flavours/glitch/polyfills/base_polyfills.ts
index 91bc5d6dc8..64211c11e9 100644
--- a/app/javascript/flavours/glitch/base_polyfills.js
+++ b/app/javascript/flavours/glitch/polyfills/base_polyfills.ts
@@ -1,26 +1,16 @@
 import 'intl';
 import 'intl/locale-data/jsonp/en';
-import 'es6-symbol/implement';
-import assign from 'object-assign';
-import values from 'object.values';
-import { decode as decodeBase64 } from './utils/base64';
-import promiseFinally from 'promise.prototype.finally';
-
-if (!Object.assign) {
-  Object.assign = assign;
-}
-
-if (!Object.values) {
-  values.shim();
-}
-
-promiseFinally.shim();
+import 'core-js/features/object/assign';
+import 'core-js/features/object/values';
+import 'core-js/features/symbol';
+import 'core-js/features/promise/finally';
+import { decode as decodeBase64 } from '../utils/base64';
 
 if (!HTMLCanvasElement.prototype.toBlob) {
   const BASE64_MARKER = ';base64,';
 
   Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-    value(callback, type = 'image/png', quality) {
+    value(callback: BlobCallback, type = 'image/png', quality: any) {
       const dataURL = this.toDataURL(type, quality);
       let data;
 
diff --git a/app/javascript/flavours/glitch/extra_polyfills.js b/app/javascript/flavours/glitch/polyfills/extra_polyfills.ts
similarity index 100%
rename from app/javascript/flavours/glitch/extra_polyfills.js
rename to app/javascript/flavours/glitch/polyfills/extra_polyfills.ts
diff --git a/app/javascript/flavours/glitch/load_polyfills.js b/app/javascript/flavours/glitch/polyfills/index.ts
similarity index 82%
rename from app/javascript/flavours/glitch/load_polyfills.js
rename to app/javascript/flavours/glitch/polyfills/index.ts
index 7909dc4ea3..6d2e5426e4 100644
--- a/app/javascript/flavours/glitch/load_polyfills.js
+++ b/app/javascript/flavours/glitch/polyfills/index.ts
@@ -10,14 +10,14 @@ function importExtraPolyfills() {
   return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills');
 }
 
-function loadPolyfills() {
+export function loadPolyfills() {
   const needsBasePolyfills = !(
-    HTMLCanvasElement.prototype.toBlob &&
-    window.Intl &&
-    Object.assign &&
-    Object.values &&
-    window.Symbol &&
-    Promise.prototype.finally
+    'toBlob' in HTMLCanvasElement.prototype &&
+    'Intl' in window &&
+    'assign' in Object &&
+    'values' in Object &&
+    'Symbol' in window &&
+    'finally' in Promise.prototype
   );
 
   // Latest version of Firefox and Safari do not have IntersectionObserver.
@@ -36,5 +36,3 @@ function loadPolyfills() {
     needsExtraPolyfills && importExtraPolyfills(),
   ]);
 }
-
-export default loadPolyfills;
diff --git a/app/javascript/flavours/glitch/reducers/compose.js b/app/javascript/flavours/glitch/reducers/compose.js
index 6e3bdda633..d95d0c9780 100644
--- a/app/javascript/flavours/glitch/reducers/compose.js
+++ b/app/javascript/flavours/glitch/reducers/compose.js
@@ -54,7 +54,7 @@ import { TIMELINE_DELETE } from 'flavours/glitch/actions/timelines';
 import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
 import { REDRAFT } from 'flavours/glitch/actions/statuses';
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
-import uuid from '../uuid';
+import { uuid } from '../uuid';
 import { privacyPreference } from 'flavours/glitch/utils/privacy_preference';
 import { me, defaultContentType } from 'flavours/glitch/initial_state';
 import { overwrite } from 'flavours/glitch/utils/js_helpers';
diff --git a/app/javascript/flavours/glitch/reducers/contexts.js b/app/javascript/flavours/glitch/reducers/contexts.js
index aea77ae41e..020a84dec1 100644
--- a/app/javascript/flavours/glitch/reducers/contexts.js
+++ b/app/javascript/flavours/glitch/reducers/contexts.js
@@ -5,7 +5,7 @@ import {
 import { CONTEXT_FETCH_SUCCESS } from 'flavours/glitch/actions/statuses';
 import { TIMELINE_DELETE, TIMELINE_UPDATE } from 'flavours/glitch/actions/timelines';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap({
   inReplyTos: ImmutableMap(),
diff --git a/app/javascript/flavours/glitch/reducers/conversations.js b/app/javascript/flavours/glitch/reducers/conversations.js
index 48b70cc33e..149d210398 100644
--- a/app/javascript/flavours/glitch/reducers/conversations.js
+++ b/app/javascript/flavours/glitch/reducers/conversations.js
@@ -11,7 +11,7 @@ import {
 } from '../actions/conversations';
 import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'flavours/glitch/actions/accounts';
 import { DOMAIN_BLOCK_SUCCESS } from 'flavours/glitch/actions/domain_blocks';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap({
   items: ImmutableList(),
diff --git a/app/javascript/flavours/glitch/reducers/index.js b/app/javascript/flavours/glitch/reducers/index.ts
similarity index 97%
rename from app/javascript/flavours/glitch/reducers/index.js
rename to app/javascript/flavours/glitch/reducers/index.ts
index 5b7bdbf699..da2174fc2c 100644
--- a/app/javascript/flavours/glitch/reducers/index.js
+++ b/app/javascript/flavours/glitch/reducers/index.ts
@@ -91,4 +91,6 @@ const reducers = {
   followed_tags,
 };
 
-export default combineReducers(reducers);
+const rootReducer = combineReducers(reducers);
+
+export { rootReducer };
diff --git a/app/javascript/flavours/glitch/reducers/notifications.js b/app/javascript/flavours/glitch/reducers/notifications.js
index d5b1568e90..ccd715a22e 100644
--- a/app/javascript/flavours/glitch/reducers/notifications.js
+++ b/app/javascript/flavours/glitch/reducers/notifications.js
@@ -32,7 +32,7 @@ import {
 import { DOMAIN_BLOCK_SUCCESS } from 'flavours/glitch/actions/domain_blocks';
 import { TIMELINE_DELETE, TIMELINE_DISCONNECT } from 'flavours/glitch/actions/timelines';
 import { fromJS, Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap({
   pendingItems: ImmutableList(),
diff --git a/app/javascript/flavours/glitch/reducers/settings.js b/app/javascript/flavours/glitch/reducers/settings.js
index e69eee9660..0e52762f25 100644
--- a/app/javascript/flavours/glitch/reducers/settings.js
+++ b/app/javascript/flavours/glitch/reducers/settings.js
@@ -6,7 +6,7 @@ import { EMOJI_USE } from 'flavours/glitch/actions/emojis';
 import { LANGUAGE_USE } from 'flavours/glitch/actions/languages';
 import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists';
 import { Map as ImmutableMap, fromJS } from 'immutable';
-import uuid from '../uuid';
+import { uuid } from '../uuid';
 
 const initialState = ImmutableMap({
   saved: true,
diff --git a/app/javascript/flavours/glitch/reducers/timelines.js b/app/javascript/flavours/glitch/reducers/timelines.js
index 96a6ca961f..1c0b1187e6 100644
--- a/app/javascript/flavours/glitch/reducers/timelines.js
+++ b/app/javascript/flavours/glitch/reducers/timelines.js
@@ -17,7 +17,7 @@ import {
   ACCOUNT_UNFOLLOW_SUCCESS,
 } from 'flavours/glitch/actions/accounts';
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap();
 
diff --git a/app/javascript/flavours/glitch/scroll.ts b/app/javascript/flavours/glitch/scroll.ts
index 1e509c4175..625aab0c04 100644
--- a/app/javascript/flavours/glitch/scroll.ts
+++ b/app/javascript/flavours/glitch/scroll.ts
@@ -1,13 +1,23 @@
-const easingOutQuint = (x: number, t: number, b: number, c: number, d: number) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
-const scroll = (node: Element, key: 'scrollTop' | 'scrollLeft', target: number) => {
+const easingOutQuint = (
+  x: number,
+  t: number,
+  b: number,
+  c: number,
+  d: number
+) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+const scroll = (
+  node: Element,
+  key: 'scrollTop' | 'scrollLeft',
+  target: number
+) => {
   const startTime = Date.now();
-  const offset    = node[key];
-  const gap       = target - offset;
-  const duration  = 1000;
-  let interrupt   = false;
+  const offset = node[key];
+  const gap = target - offset;
+  const duration = 1000;
+  let interrupt = false;
 
   const step = () => {
-    const elapsed    = Date.now() - startTime;
+    const elapsed = Date.now() - startTime;
     const percentage = elapsed / duration;
 
     if (percentage > 1 || interrupt) {
@@ -25,7 +35,14 @@ const scroll = (node: Element, key: 'scrollTop' | 'scrollLeft', target: number)
   };
 };
 
-const isScrollBehaviorSupported = 'scrollBehavior' in document.documentElement.style;
+const isScrollBehaviorSupported =
+  'scrollBehavior' in document.documentElement.style;
 
-export const scrollRight = (node: Element, position: number) => isScrollBehaviorSupported ? node.scrollTo({ left: position, behavior: 'smooth' }) : scroll(node, 'scrollLeft', position);
-export const scrollTop = (node: Element) => isScrollBehaviorSupported ? node.scrollTo({ top: 0, behavior: 'smooth' }) : scroll(node, 'scrollTop', 0);
+export const scrollRight = (node: Element, position: number) =>
+  isScrollBehaviorSupported
+    ? node.scrollTo({ left: position, behavior: 'smooth' })
+    : scroll(node, 'scrollLeft', position);
+export const scrollTop = (node: Element) =>
+  isScrollBehaviorSupported
+    ? node.scrollTo({ top: 0, behavior: 'smooth' })
+    : scroll(node, 'scrollTop', 0);
diff --git a/app/javascript/flavours/glitch/store/configureStore.js b/app/javascript/flavours/glitch/store/configureStore.js
deleted file mode 100644
index cb17dd9ce8..0000000000
--- a/app/javascript/flavours/glitch/store/configureStore.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-import thunk from 'redux-thunk';
-import appReducer from '../reducers';
-import loadingBarMiddleware from '../middleware/loading_bar';
-import errorsMiddleware from '../middleware/errors';
-import soundsMiddleware from '../middleware/sounds';
-
-export const store = configureStore({
-  reducer: appReducer,
-  middleware: [
-    thunk,
-    loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }),
-    errorsMiddleware(),
-    soundsMiddleware(),
-  ],
-});
diff --git a/app/javascript/flavours/glitch/store/index.ts b/app/javascript/flavours/glitch/store/index.ts
new file mode 100644
index 0000000000..6c3e963d9e
--- /dev/null
+++ b/app/javascript/flavours/glitch/store/index.ts
@@ -0,0 +1,27 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { rootReducer } from '../reducers';
+import { loadingBarMiddleware } from './middlewares/loading_bar';
+import { errorsMiddleware } from './middlewares/errors';
+import { soundsMiddleware } from './middlewares/sounds';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware()
+      .concat(
+        loadingBarMiddleware({
+          promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
+        })
+      )
+      .concat(errorsMiddleware)
+      .concat(soundsMiddleware()),
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof rootReducer>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/app/javascript/flavours/glitch/middleware/errors.js b/app/javascript/flavours/glitch/store/middlewares/errors.ts
similarity index 65%
rename from app/javascript/flavours/glitch/middleware/errors.js
rename to app/javascript/flavours/glitch/store/middlewares/errors.ts
index 3639a59512..5dec423af7 100644
--- a/app/javascript/flavours/glitch/middleware/errors.js
+++ b/app/javascript/flavours/glitch/store/middlewares/errors.ts
@@ -1,9 +1,13 @@
+import { Middleware } from 'redux';
 import { showAlertForError } from 'flavours/glitch/actions/alerts';
+import { RootState } from '..';
 
 const defaultFailSuffix = 'FAIL';
 
-export default function errorsMiddleware() {
-  return ({ dispatch }) => next => action => {
+export const errorsMiddleware: Middleware<Record<string, never>, RootState> =
+  ({ dispatch }) =>
+  (next) =>
+  (action) => {
     if (action.type && !action.skipAlert) {
       const isFail = new RegExp(`${defaultFailSuffix}$`, 'g');
 
@@ -14,4 +18,3 @@ export default function errorsMiddleware() {
 
     return next(action);
   };
-}
diff --git a/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts b/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts
new file mode 100644
index 0000000000..183c0cf9d6
--- /dev/null
+++ b/app/javascript/flavours/glitch/store/middlewares/loading_bar.ts
@@ -0,0 +1,42 @@
+import { showLoading, hideLoading } from 'react-redux-loading-bar';
+import { Middleware } from 'redux';
+import { RootState } from '..';
+
+interface Config {
+  promiseTypeSuffixes?: string[];
+}
+
+const defaultTypeSuffixes: Config['promiseTypeSuffixes'] = [
+  'PENDING',
+  'FULFILLED',
+  'REJECTED',
+];
+
+export const loadingBarMiddleware = (
+  config: Config = {}
+): Middleware<Record<string, never>, RootState> => {
+  const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
+
+  return ({ dispatch }) =>
+    (next) =>
+    (action) => {
+      if (action.type && !action.skipLoading) {
+        const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;
+
+        const isPending = new RegExp(`${PENDING}$`, 'g');
+        const isFulfilled = new RegExp(`${FULFILLED}$`, 'g');
+        const isRejected = new RegExp(`${REJECTED}$`, 'g');
+
+        if (action.type.match(isPending)) {
+          dispatch(showLoading());
+        } else if (
+          action.type.match(isFulfilled) ||
+          action.type.match(isRejected)
+        ) {
+          dispatch(hideLoading());
+        }
+      }
+
+      return next(action);
+    };
+};
diff --git a/app/javascript/mastodon/middleware/sounds.js b/app/javascript/flavours/glitch/store/middlewares/sounds.ts
similarity index 54%
rename from app/javascript/mastodon/middleware/sounds.js
rename to app/javascript/flavours/glitch/store/middlewares/sounds.ts
index 7f23889836..e7c87df7ec 100644
--- a/app/javascript/mastodon/middleware/sounds.js
+++ b/app/javascript/flavours/glitch/store/middlewares/sounds.ts
@@ -1,4 +1,12 @@
-const createAudio = sources => {
+import { Middleware, AnyAction } from 'redux';
+import { RootState } from '..';
+
+interface AudioSource {
+  src: string;
+  type: string;
+}
+
+const createAudio = (sources: AudioSource[]) => {
   const audio = new Audio();
   sources.forEach(({ type, src }) => {
     const source = document.createElement('source');
@@ -9,7 +17,7 @@ const createAudio = sources => {
   return audio;
 };
 
-const play = audio => {
+const play = (audio: HTMLAudioElement) => {
   if (!audio.paused) {
     audio.pause();
     if (typeof audio.fastSeek === 'function') {
@@ -22,8 +30,11 @@ const play = audio => {
   audio.play();
 };
 
-export default function soundsMiddleware() {
-  const soundCache = {
+export const soundsMiddleware = (): Middleware<
+  Record<string, never>,
+  RootState
+> => {
+  const soundCache: { [key: string]: HTMLAudioElement } = {
     boop: createAudio([
       {
         src: '/sounds/boop.ogg',
@@ -36,11 +47,13 @@ export default function soundsMiddleware() {
     ]),
   };
 
-  return () => next => action => {
-    if (action.meta && action.meta.sound && soundCache[action.meta.sound]) {
-      play(soundCache[action.meta.sound]);
+  return () => (next) => (action: AnyAction) => {
+    const sound = action?.meta?.sound;
+
+    if (sound && soundCache[sound]) {
+      play(soundCache[sound]);
     }
 
     return next(action);
   };
-}
+};
diff --git a/app/javascript/flavours/glitch/types/resources.ts b/app/javascript/flavours/glitch/types/resources.ts
index 28fad2719a..0906504150 100644
--- a/app/javascript/flavours/glitch/types/resources.ts
+++ b/app/javascript/flavours/glitch/types/resources.ts
@@ -1,10 +1,54 @@
 import type { Record } from 'immutable';
 
-type AccountValues = {
-  id: number;
+type CustomEmoji = Record<{
+  shortcode: string;
+  static_url: string;
+  url: string;
+}>;
+
+type AccountField = Record<{
+  name: string;
+  value: string;
+  verified_at: string | null;
+}>;
+
+type AccountApiResponseValues = {
+  acct: string;
   avatar: string;
   avatar_static: string;
-  [key: string]: any;
+  bot: boolean;
+  created_at: string;
+  discoverable: boolean;
+  display_name: string;
+  emojis: CustomEmoji[];
+  fields: AccountField[];
+  followers_count: number;
+  following_count: number;
+  group: boolean;
+  header: string;
+  header_static: string;
+  id: string;
+  last_status_at: string;
+  locked: boolean;
+  note: string;
+  statuses_count: number;
+  url: string;
+  username: string;
+};
+
+type NormalizedAccountField = Record<{
+  name_emojified: string;
+  value_emojified: string;
+  value_plain: string;
+}>;
+
+type NormalizedAccountValues = {
+  display_name_html: string;
+  fields: NormalizedAccountField[];
+  note_emojified: string;
+  note_plain: string;
 };
 
-export type Account = Record<AccountValues>;
+export type Account = Record<
+  AccountApiResponseValues & NormalizedAccountValues
+>;
diff --git a/app/javascript/flavours/glitch/utils/filters.ts b/app/javascript/flavours/glitch/utils/filters.ts
index 5af2aa96a4..e5c6422e0a 100644
--- a/app/javascript/flavours/glitch/utils/filters.ts
+++ b/app/javascript/flavours/glitch/utils/filters.ts
@@ -1,16 +1,16 @@
 export const toServerSideType = (columnType: string) => {
   switch (columnType) {
-  case 'home':
-  case 'notifications':
-  case 'public':
-  case 'thread':
-  case 'account':
-    return columnType;
-  default:
-    if (columnType.indexOf('list:') > -1) {
-      return 'home';
-    } else {
-      return 'public'; // community, account, hashtag
-    }
+    case 'home':
+    case 'notifications':
+    case 'public':
+    case 'thread':
+    case 'account':
+      return columnType;
+    default:
+      if (columnType.indexOf('list:') > -1) {
+        return 'home';
+      } else {
+        return 'public'; // community, account, hashtag
+      }
   }
 };
diff --git a/app/javascript/flavours/glitch/utils/numbers.ts b/app/javascript/flavours/glitch/utils/numbers.ts
index 128ba72f9b..2bd88406e0 100644
--- a/app/javascript/flavours/glitch/utils/numbers.ts
+++ b/app/javascript/flavours/glitch/utils/numbers.ts
@@ -21,7 +21,7 @@ const TEN_MILLIONS = DECIMAL_UNITS.MILLION * 10;
  * shortNumber(5936);
  * // => [5.936, 1000, 1]
  */
-export type ShortNumber = [number, DecimalUnits, 0 | 1] // Array of: shorten number, unit of shorten number and maximum fraction digits
+export type ShortNumber = [number, DecimalUnits, 0 | 1]; // Array of: shorten number, unit of shorten number and maximum fraction digits
 export function toShortNumber(sourceNumber: number): ShortNumber {
   if (sourceNumber < DECIMAL_UNITS.THOUSAND) {
     return [sourceNumber, DECIMAL_UNITS.ONE, 0];
@@ -38,11 +38,7 @@ export function toShortNumber(sourceNumber: number): ShortNumber {
       sourceNumber < TEN_MILLIONS ? 1 : 0,
     ];
   } else if (sourceNumber < DECIMAL_UNITS.TRILLION) {
-    return [
-      sourceNumber / DECIMAL_UNITS.BILLION,
-      DECIMAL_UNITS.BILLION,
-      0,
-    ];
+    return [sourceNumber / DECIMAL_UNITS.BILLION, DECIMAL_UNITS.BILLION, 0];
   }
 
   return [sourceNumber, DECIMAL_UNITS.ONE, 0];
@@ -56,7 +52,10 @@ export function toShortNumber(sourceNumber: number): ShortNumber {
  * pluralReady(1793, DECIMAL_UNITS.THOUSAND)
  * // => 1790
  */
-export function pluralReady(sourceNumber: number, division: DecimalUnits): number {
+export function pluralReady(
+  sourceNumber: number,
+  division: DecimalUnits
+): number {
   if (division == null || division < DECIMAL_UNITS.HUNDRED) {
     return sourceNumber;
   }
diff --git a/app/javascript/flavours/glitch/uuid.ts b/app/javascript/flavours/glitch/uuid.ts
index 655bcf78c6..6cadbd6bb0 100644
--- a/app/javascript/flavours/glitch/uuid.ts
+++ b/app/javascript/flavours/glitch/uuid.ts
@@ -1,3 +1,8 @@
-export default function uuid(a?: string): string {
-  return a ? ((a as any as number) ^ Math.random() * 16 >> (a as any as number) / 4).toString(16) : ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid);
+export function uuid(a?: string): string {
+  return a
+    ? (
+        (a as any as number) ^
+        ((Math.random() * 16) >> ((a as any as number) / 4))
+      ).toString(16)
+    : ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid);
 }
diff --git a/app/javascript/mastodon/actions/app.ts b/app/javascript/mastodon/actions/app.ts
index 0acfbfae7a..50fd317a65 100644
--- a/app/javascript/mastodon/actions/app.ts
+++ b/app/javascript/mastodon/actions/app.ts
@@ -1,10 +1,11 @@
 import { createAction } from '@reduxjs/toolkit';
+import type { LayoutType } from '../is_mobile';
 
 export const focusApp = createAction('APP_FOCUS');
 export const unfocusApp = createAction('APP_UNFOCUS');
 
 type ChangeLayoutPayload = {
-  layout: 'mobile' | 'single-column' | 'multi-column';
+  layout: LayoutType;
 };
 export const changeLayout =
   createAction<ChangeLayoutPayload>('APP_LAYOUT_CHANGE');
diff --git a/app/javascript/mastodon/actions/markers.js b/app/javascript/mastodon/actions/markers.js
index ca246dce78..b23ecccc39 100644
--- a/app/javascript/mastodon/actions/markers.js
+++ b/app/javascript/mastodon/actions/markers.js
@@ -1,6 +1,6 @@
 import api from '../api';
 import { debounce } from 'lodash';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 import { List as ImmutableList } from 'immutable';
 
 export const MARKERS_FETCH_REQUEST = 'MARKERS_FETCH_REQUEST';
diff --git a/app/javascript/mastodon/actions/notifications.js b/app/javascript/mastodon/actions/notifications.js
index 93588d3c0c..0c58f8d159 100644
--- a/app/javascript/mastodon/actions/notifications.js
+++ b/app/javascript/mastodon/actions/notifications.js
@@ -13,7 +13,7 @@ import { defineMessages } from 'react-intl';
 import { List as ImmutableList } from 'immutable';
 import { unescapeHTML } from '../utils/html';
 import { usePendingItems as preferPendingItems } from 'mastodon/initial_state';
-import compareId from 'mastodon/compare_id';
+import { compareId } from 'mastodon/compare_id';
 import { requestNotificationPermission } from '../utils/notifications';
 
 export const NOTIFICATIONS_UPDATE      = 'NOTIFICATIONS_UPDATE';
diff --git a/app/javascript/mastodon/actions/streaming.js b/app/javascript/mastodon/actions/streaming.js
index 41cb99e2dd..7831f261e6 100644
--- a/app/javascript/mastodon/actions/streaming.js
+++ b/app/javascript/mastodon/actions/streaming.js
@@ -52,8 +52,10 @@ export const connectTimelineStream = (timelineId, channelName, params = {}, opti
     /**
      * @param {function(Function, Function): void} fallback
      */
+
     const useFallback = fallback => {
       fallback(dispatch, () => {
+        // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
         pollingId = setTimeout(() => useFallback(fallback), 20000 + randomUpTo(20000));
       });
     };
diff --git a/app/javascript/mastodon/actions/timelines.js b/app/javascript/mastodon/actions/timelines.js
index 4f772a55f0..e9e3a8e240 100644
--- a/app/javascript/mastodon/actions/timelines.js
+++ b/app/javascript/mastodon/actions/timelines.js
@@ -2,7 +2,7 @@ import { importFetchedStatus, importFetchedStatuses } from './importer';
 import { submitMarkers } from './markers';
 import api, { getLinks } from 'mastodon/api';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import compareId from 'mastodon/compare_id';
+import { compareId } from 'mastodon/compare_id';
 import { usePendingItems as preferPendingItems } from 'mastodon/initial_state';
 
 export const TIMELINE_UPDATE  = 'TIMELINE_UPDATE';
diff --git a/app/javascript/mastodon/blurhash.ts b/app/javascript/mastodon/blurhash.ts
index cb1c3b2c82..dadf2b7f2c 100644
--- a/app/javascript/mastodon/blurhash.ts
+++ b/app/javascript/mastodon/blurhash.ts
@@ -98,9 +98,9 @@ export const decode83 = (str: string) => {
 };
 
 export const intToRGB = (int: number) => ({
-  r: Math.max(0, (int >> 16)),
+  r: Math.max(0, int >> 16),
   g: Math.max(0, (int >> 8) & 255),
-  b: Math.max(0, (int & 255)),
+  b: Math.max(0, int & 255),
 });
 
 export const getAverageFromBlurhash = (blurhash: string) => {
diff --git a/app/javascript/mastodon/common.js b/app/javascript/mastodon/common.js
index 8f35053036..0ec8449343 100644
--- a/app/javascript/mastodon/common.js
+++ b/app/javascript/mastodon/common.js
@@ -1,7 +1,7 @@
 import Rails from '@rails/ujs';
+import 'font-awesome/css/font-awesome.css';
 
 export function start() {
-  require('font-awesome/css/font-awesome.css');
   require.context('../images/', true);
 
   try {
diff --git a/app/javascript/mastodon/compare_id.ts b/app/javascript/mastodon/compare_id.ts
index ae4ac6f897..30b0572481 100644
--- a/app/javascript/mastodon/compare_id.ts
+++ b/app/javascript/mastodon/compare_id.ts
@@ -1,4 +1,4 @@
-export default function compareId (id1: string, id2: string) {
+export function compareId(id1: string, id2: string) {
   if (id1 === id2) {
     return 0;
   }
diff --git a/app/javascript/mastodon/components/__tests__/avatar-test.jsx b/app/javascript/mastodon/components/__tests__/avatar-test.jsx
index dd3f7b7d21..5a72fc19a1 100644
--- a/app/javascript/mastodon/components/__tests__/avatar-test.jsx
+++ b/app/javascript/mastodon/components/__tests__/avatar-test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
-import Avatar from '../avatar';
+import { Avatar } from '../avatar';
 
 describe('<Avatar />', () => {
   const account = fromJS({
diff --git a/app/javascript/mastodon/components/__tests__/avatar_overlay-test.jsx b/app/javascript/mastodon/components/__tests__/avatar_overlay-test.jsx
index 44addea832..ea75dab574 100644
--- a/app/javascript/mastodon/components/__tests__/avatar_overlay-test.jsx
+++ b/app/javascript/mastodon/components/__tests__/avatar_overlay-test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { fromJS } from 'immutable';
-import AvatarOverlay from '../avatar_overlay';
+import { AvatarOverlay } from '../avatar_overlay';
 
 describe('<AvatarOverlay', () => {
   const account = fromJS({
diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx
index 0e2295e3a9..b0bbea7ce4 100644
--- a/app/javascript/mastodon/components/account.jsx
+++ b/app/javascript/mastodon/components/account.jsx
@@ -1,19 +1,19 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from './avatar';
+import { Avatar } from './avatar';
 import DisplayName from './display_name';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from '../initial_state';
-import RelativeTimestamp from './relative_timestamp';
+import { RelativeTimestamp } from './relative_timestamp';
 import Skeleton from 'mastodon/components/skeleton';
 import { Link } from 'react-router-dom';
 import { counterRenderer } from 'mastodon/components/common_counter';
 import ShortNumber from 'mastodon/components/short_number';
 import classNames from 'classnames';
-import VerifiedBadge from 'mastodon/components/verified_badge';
+import { VerifiedBadge } from 'mastodon/components/verified_badge';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -151,7 +151,7 @@ class Account extends ImmutablePureComponent {
     const firstVerifiedField = account.get('fields').find(item => !!item.get('verified_at'));
 
     if (firstVerifiedField) {
-      verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} verifiedAt={firstVerifiedField.get('verified_at')} /></>;
+      verification = <>· <VerifiedBadge link={firstVerifiedField.get('value')} /></>;
     }
 
     return (
diff --git a/app/javascript/mastodon/components/animated_number.tsx b/app/javascript/mastodon/components/animated_number.tsx
index 1673ff41bb..f6c77d35ff 100644
--- a/app/javascript/mastodon/components/animated_number.tsx
+++ b/app/javascript/mastodon/components/animated_number.tsx
@@ -16,13 +16,10 @@ const obfuscatedCount = (count: number) => {
 type Props = {
   value: number;
   obfuscate?: boolean;
-}
-export const AnimatedNumber: React.FC<Props> = ({
-  value,
-  obfuscate,
-})=> {
+};
+export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
   const [previousValue, setPreviousValue] = useState(value);
-  const [direction, setDirection] = useState<1|-1>(1);
+  const [direction, setDirection] = useState<1 | -1>(1);
 
   if (previousValue !== value) {
     setPreviousValue(value);
@@ -30,29 +27,48 @@ export const AnimatedNumber: React.FC<Props> = ({
   }
 
   const willEnter = useCallback(() => ({ y: -1 * direction }), [direction]);
-  const willLeave = useCallback(() => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }), [direction]);
+  const willLeave = useCallback(
+    () => ({ y: spring(1 * direction, { damping: 35, stiffness: 400 }) }),
+    [direction]
+  );
 
   if (reduceMotion) {
-    return obfuscate ? <>{obfuscatedCount(value)}</> : <ShortNumber value={value} />;
+    return obfuscate ? (
+      <>{obfuscatedCount(value)}</>
+    ) : (
+      <ShortNumber value={value} />
+    );
   }
 
-  const styles = [{
-    key: `${value}`,
-    data: value,
-    style: { y: spring(0, { damping: 35, stiffness: 400 }) },
-  }];
+  const styles = [
+    {
+      key: `${value}`,
+      data: value,
+      style: { y: spring(0, { damping: 35, stiffness: 400 }) },
+    },
+  ];
 
   return (
-    <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
-      {items => (
+    <TransitionMotion
+      styles={styles}
+      willEnter={willEnter}
+      willLeave={willLeave}
+    >
+      {(items) => (
         <span className='animated-number'>
           {items.map(({ key, data, style }) => (
-            <span key={key} style={{ position: (direction * style.y) > 0 ? 'absolute' : 'static', transform: `translateY(${style.y * 100}%)` }}>{obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}</span>
+            <span
+              key={key}
+              style={{
+                position: direction * style.y > 0 ? 'absolute' : 'static',
+                transform: `translateY(${style.y * 100}%)`,
+              }}
+            >
+              {obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}
+            </span>
           ))}
         </span>
       )}
     </TransitionMotion>
   );
 };
-
-export default AnimatedNumber;
diff --git a/app/javascript/mastodon/components/attachment_list.jsx b/app/javascript/mastodon/components/attachment_list.jsx
index 0e23889ded..3354025c4a 100644
--- a/app/javascript/mastodon/components/attachment_list.jsx
+++ b/app/javascript/mastodon/components/attachment_list.jsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const filename = url => url.split('/').pop().split('#')[0].split('?')[0];
 
diff --git a/app/javascript/mastodon/components/avatar.tsx b/app/javascript/mastodon/components/avatar.tsx
index e64a8af742..8be94d3f53 100644
--- a/app/javascript/mastodon/components/avatar.tsx
+++ b/app/javascript/mastodon/components/avatar.tsx
@@ -45,5 +45,3 @@ export const Avatar: React.FC<Props> = ({
     </div>
   );
 };
-
-export default Avatar;
diff --git a/app/javascript/mastodon/components/avatar_composite.jsx b/app/javascript/mastodon/components/avatar_composite.jsx
index 220bf5b4f8..e1fae95dc0 100644
--- a/app/javascript/mastodon/components/avatar_composite.jsx
+++ b/app/javascript/mastodon/components/avatar_composite.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { autoPlayGif } from '../initial_state';
-import Avatar from './avatar';
+import { Avatar } from './avatar';
 
 export default class AvatarComposite extends React.PureComponent {
 
diff --git a/app/javascript/mastodon/components/avatar_overlay.tsx b/app/javascript/mastodon/components/avatar_overlay.tsx
index 5c65a928c5..1dbd533230 100644
--- a/app/javascript/mastodon/components/avatar_overlay.tsx
+++ b/app/javascript/mastodon/components/avatar_overlay.tsx
@@ -18,13 +18,19 @@ export const AvatarOverlay: React.FC<Props> = ({
   baseSize = 36,
   overlaySize = 24,
 }) => {
-  const { hovering, handleMouseEnter, handleMouseLeave } = useHovering(autoPlayGif);
-  const accountSrc = hovering ? account?.get('avatar') : account?.get('avatar_static');
-  const friendSrc = hovering ? friend?.get('avatar') : friend?.get('avatar_static');
+  const { hovering, handleMouseEnter, handleMouseLeave } =
+    useHovering(autoPlayGif);
+  const accountSrc = hovering
+    ? account?.get('avatar')
+    : account?.get('avatar_static');
+  const friendSrc = hovering
+    ? friend?.get('avatar')
+    : friend?.get('avatar_static');
 
   return (
     <div
-      className='account__avatar-overlay' style={{ width: size, height: size }}
+      className='account__avatar-overlay'
+      style={{ width: size, height: size }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
@@ -47,5 +53,3 @@ export const AvatarOverlay: React.FC<Props> = ({
     </div>
   );
 };
-
-export default AvatarOverlay;
diff --git a/app/javascript/mastodon/components/blurhash.tsx b/app/javascript/mastodon/components/blurhash.tsx
index 6fec6e1ef7..7005136765 100644
--- a/app/javascript/mastodon/components/blurhash.tsx
+++ b/app/javascript/mastodon/components/blurhash.tsx
@@ -8,14 +8,14 @@ type Props = {
   dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
   children?: never;
   [key: string]: any;
-}
-function Blurhash({
+};
+const Blurhash: React.FC<Props> = ({
   hash,
   width = 32,
   height = width,
   dummy = false,
   ...canvasProps
-}: Props) {
+}) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -40,6 +40,8 @@ function Blurhash({
   return (
     <canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
   );
-}
+};
 
-export default React.memo(Blurhash);
+const MemoizedBlurhash = React.memo(Blurhash);
+
+export { MemoizedBlurhash as Blurhash };
diff --git a/app/javascript/mastodon/components/check.jsx b/app/javascript/mastodon/components/check.jsx
deleted file mode 100644
index 2fd0af7401..0000000000
--- a/app/javascript/mastodon/components/check.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-
-const Check = () => (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'>
-    <path fillRule='evenodd' d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z' clipRule='evenodd' />
-  </svg>
-);
-
-export default Check;
diff --git a/app/javascript/mastodon/components/check.tsx b/app/javascript/mastodon/components/check.tsx
new file mode 100644
index 0000000000..73d65595ea
--- /dev/null
+++ b/app/javascript/mastodon/components/check.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const Check: React.FC = () => (
+  <svg
+    xmlns='http://www.w3.org/2000/svg'
+    viewBox='0 0 20 20'
+    fill='currentColor'
+  >
+    <path
+      fillRule='evenodd'
+      d='M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z'
+      clipRule='evenodd'
+    />
+  </svg>
+);
diff --git a/app/javascript/mastodon/components/column_back_button.jsx b/app/javascript/mastodon/components/column_back_button.jsx
index faa800b2ad..19e2cb3637 100644
--- a/app/javascript/mastodon/components/column_back_button.jsx
+++ b/app/javascript/mastodon/components/column_back_button.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { createPortal } from 'react-dom';
 
 export default class ColumnBackButton extends React.PureComponent {
diff --git a/app/javascript/mastodon/components/column_back_button_slim.jsx b/app/javascript/mastodon/components/column_back_button_slim.jsx
index 46ac23736b..f2c8642eae 100644
--- a/app/javascript/mastodon/components/column_back_button_slim.jsx
+++ b/app/javascript/mastodon/components/column_back_button_slim.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import ColumnBackButton from './column_back_button';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 export default class ColumnBackButtonSlim extends ColumnBackButton {
 
diff --git a/app/javascript/mastodon/components/column_header.jsx b/app/javascript/mastodon/components/column_header.jsx
index afc526f27f..794ea9738a 100644
--- a/app/javascript/mastodon/components/column_header.jsx
+++ b/app/javascript/mastodon/components/column_header.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import { FormattedMessage, injectIntl, defineMessages } from 'react-intl';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   show: { id: 'column_header.show_settings', defaultMessage: 'Show settings' },
diff --git a/app/javascript/mastodon/components/dismissable_banner.jsx b/app/javascript/mastodon/components/dismissable_banner.jsx
index 242021e764..c433d95324 100644
--- a/app/javascript/mastodon/components/dismissable_banner.jsx
+++ b/app/javascript/mastodon/components/dismissable_banner.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages } from 'react-intl';
 import { bannerSettings } from 'mastodon/settings';
diff --git a/app/javascript/mastodon/components/domain.jsx b/app/javascript/mastodon/components/domain.jsx
deleted file mode 100644
index 85ebdbde93..0000000000
--- a/app/javascript/mastodon/components/domain.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import IconButton from './icon_button';
-import { defineMessages, injectIntl } from 'react-intl';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-const messages = defineMessages({
-  unblockDomain: { id: 'account.unblock_domain', defaultMessage: 'Unblock domain {domain}' },
-});
-
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    domain: PropTypes.string,
-    onUnblockDomain: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleDomainUnblock = () => {
-    this.props.onUnblockDomain(this.props.domain);
-  };
-
-  render () {
-    const { domain, intl } = this.props;
-
-    return (
-      <div className='domain'>
-        <div className='domain__wrapper'>
-          <span className='domain__domain-name'>
-            <strong>{domain}</strong>
-          </span>
-
-          <div className='domain__buttons'>
-            <IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-export default injectIntl(Account);
diff --git a/app/javascript/mastodon/components/domain.tsx b/app/javascript/mastodon/components/domain.tsx
new file mode 100644
index 0000000000..af0fec35af
--- /dev/null
+++ b/app/javascript/mastodon/components/domain.tsx
@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { IconButton } from './icon_button';
+import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
+
+const messages = defineMessages({
+  unblockDomain: {
+    id: 'account.unblock_domain',
+    defaultMessage: 'Unblock domain {domain}',
+  },
+});
+
+type Props = {
+  domain: string;
+  onUnblockDomain: (domain: string) => void;
+  intl: InjectedIntl;
+};
+const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
+  const handleDomainUnblock = useCallback(() => {
+    onUnblockDomain(domain);
+  }, [domain, onUnblockDomain]);
+
+  return (
+    <div className='domain'>
+      <div className='domain__wrapper'>
+        <span className='domain__domain-name'>
+          <strong>{domain}</strong>
+        </span>
+
+        <div className='domain__buttons'>
+          <IconButton
+            active
+            icon='unlock'
+            title={intl.formatMessage(messages.unblockDomain, { domain })}
+            onClick={handleDomainUnblock}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const Domain = injectIntl(_Domain);
diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx
index eaaa72fd83..0ed3e904f5 100644
--- a/app/javascript/mastodon/components/dropdown_menu.jsx
+++ b/app/javascript/mastodon/components/dropdown_menu.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import Overlay from 'react-overlays/Overlay';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import classNames from 'classnames';
diff --git a/app/javascript/mastodon/components/edited_timestamp/index.jsx b/app/javascript/mastodon/components/edited_timestamp/index.jsx
index 8a5417a7d9..745d8a4b6f 100644
--- a/app/javascript/mastodon/components/edited_timestamp/index.jsx
+++ b/app/javascript/mastodon/components/edited_timestamp/index.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage, injectIntl } from 'react-intl';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import DropdownMenu from './containers/dropdown_menu_container';
 import { connect } from 'react-redux';
 import { openModal } from 'mastodon/actions/modal';
-import RelativeTimestamp from 'mastodon/components/relative_timestamp';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import InlineAccount from 'mastodon/components/inline_account';
 
 const mapDispatchToProps = (dispatch, { statusId }) => ({
diff --git a/app/javascript/mastodon/components/gifv.tsx b/app/javascript/mastodon/components/gifv.tsx
index 8968170c5f..72914ba741 100644
--- a/app/javascript/mastodon/components/gifv.tsx
+++ b/app/javascript/mastodon/components/gifv.tsx
@@ -8,7 +8,7 @@ type Props = {
   width: number;
   height: number;
   onClick?: () => void;
-}
+};
 
 export const GIFV: React.FC<Props> = ({
   src,
@@ -17,19 +17,23 @@ export const GIFV: React.FC<Props> = ({
   width,
   height,
   onClick,
-})=> {
+}) => {
   const [loading, setLoading] = useState(true);
 
-  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> = useCallback(() => {
-    setLoading(false);
-  }, [setLoading]);
+  const handleLoadedData: React.ReactEventHandler<HTMLVideoElement> =
+    useCallback(() => {
+      setLoading(false);
+    }, [setLoading]);
 
-  const handleClick: React.MouseEventHandler = useCallback((e) => {
-    if (onClick) {
-      e.stopPropagation();
-      onClick();
-    }
-  }, [onClick]);
+  const handleClick: React.MouseEventHandler = useCallback(
+    (e) => {
+      if (onClick) {
+        e.stopPropagation();
+        onClick();
+      }
+    },
+    [onClick]
+  );
 
   return (
     <div className='gifv' style={{ position: 'relative' }}>
@@ -64,5 +68,3 @@ export const GIFV: React.FC<Props> = ({
     </div>
   );
 };
-
-export default GIFV;
diff --git a/app/javascript/mastodon/components/hashtag.jsx b/app/javascript/mastodon/components/hashtag.jsx
index 254fae2fe0..d03b1a45a7 100644
--- a/app/javascript/mastodon/components/hashtag.jsx
+++ b/app/javascript/mastodon/components/hashtag.jsx
@@ -5,9 +5,7 @@ import { FormattedMessage } from 'react-intl';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router-dom';
-// @ts-expect-error
 import ShortNumber from 'mastodon/components/short_number';
-// @ts-expect-error
 import Skeleton from 'mastodon/components/skeleton';
 import classNames from 'classnames';
 
diff --git a/app/javascript/mastodon/components/icon.tsx b/app/javascript/mastodon/components/icon.tsx
index d85fff6ef6..4eb948dc76 100644
--- a/app/javascript/mastodon/components/icon.tsx
+++ b/app/javascript/mastodon/components/icon.tsx
@@ -7,8 +7,15 @@ type Props = {
   fixedWidth?: boolean;
   children?: never;
   [key: string]: any;
-}
-export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
-  <i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
-
-export default Icon;
+};
+export const Icon: React.FC<Props> = ({
+  id,
+  className,
+  fixedWidth,
+  ...other
+}) => (
+  <i
+    className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+    {...other}
+  />
+);
diff --git a/app/javascript/mastodon/components/icon_button.tsx b/app/javascript/mastodon/components/icon_button.tsx
index ec11ab7011..1786414009 100644
--- a/app/javascript/mastodon/components/icon_button.tsx
+++ b/app/javascript/mastodon/components/icon_button.tsx
@@ -25,13 +25,12 @@ type Props = {
   obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
-}
+};
 type States = {
-  activate: boolean,
-  deactivate: boolean,
-}
-export default class IconButton extends React.PureComponent<Props, States> {
-
+  activate: boolean;
+  deactivate: boolean;
+};
+export class IconButton extends React.PureComponent<Props, States> {
   static defaultProps = {
     size: 18,
     active: false,
@@ -47,7 +46,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     deactivate: false,
   };
 
-  UNSAFE_componentWillReceiveProps (nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (!nextProps.animate) return;
 
     if (this.props.active && !nextProps.active) {
@@ -57,7 +56,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     }
   }
 
-  handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) =>  {
+  handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
     e.preventDefault();
 
     if (!this.props.disabled && this.props.onClick != null) {
@@ -83,7 +82,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
     }
   };
 
-  render () {
+  render() {
     const style = {
       fontSize: `${this.props.size}px`,
       width: `${this.props.size * 1.28571429}px`,
@@ -109,10 +108,7 @@ export default class IconButton extends React.PureComponent<Props, States> {
       ariaHidden,
     } = this.props;
 
-    const {
-      activate,
-      deactivate,
-    } = this.state;
+    const { activate, deactivate } = this.state;
 
     const classes = classNames(className, 'icon-button', {
       active,
@@ -130,7 +126,12 @@ export default class IconButton extends React.PureComponent<Props, States> {
 
     let contents = (
       <React.Fragment>
-        <Icon id={icon} fixedWidth aria-hidden='true' /> {typeof counter !== 'undefined' && <span className='icon-button__counter'><AnimatedNumber value={counter} obfuscate={obfuscateCount} /></span>}
+        <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
+        {typeof counter !== 'undefined' && (
+          <span className='icon-button__counter'>
+            <AnimatedNumber value={counter} obfuscate={obfuscateCount} />
+          </span>
+        )}
       </React.Fragment>
     );
 
@@ -162,5 +163,4 @@ export default class IconButton extends React.PureComponent<Props, States> {
       </button>
     );
   }
-
 }
diff --git a/app/javascript/mastodon/components/icon_with_badge.tsx b/app/javascript/mastodon/components/icon_with_badge.tsx
index 487bf326ad..bf86814c03 100644
--- a/app/javascript/mastodon/components/icon_with_badge.tsx
+++ b/app/javascript/mastodon/components/icon_with_badge.tsx
@@ -1,20 +1,25 @@
 import React from 'react';
 import { Icon } from './icon';
 
-const formatNumber = (num: number): number | string => num > 40 ? '40+' : num;
+const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);
 
 type Props = {
   id: string;
   count: number;
   issueBadge: boolean;
   className: string;
-}
-const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => (
+};
+export const IconWithBadge: React.FC<Props> = ({
+  id,
+  count,
+  issueBadge,
+  className,
+}) => (
   <i className='icon-with-badge'>
     <Icon id={id} fixedWidth className={className} />
-    {count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
+    {count > 0 && (
+      <i className='icon-with-badge__badge'>{formatNumber(count)}</i>
+    )}
     {issueBadge && <i className='icon-with-badge__issue-badge' />}
   </i>
 );
-
-export default IconWithBadge;
diff --git a/app/javascript/mastodon/components/image.jsx b/app/javascript/mastodon/components/image.jsx
deleted file mode 100644
index 6e81ddf082..0000000000
--- a/app/javascript/mastodon/components/image.jsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Blurhash from './blurhash';
-import classNames from 'classnames';
-
-export default class Image extends React.PureComponent {
-
-  static propTypes = {
-    src: PropTypes.string,
-    srcSet: PropTypes.string,
-    blurhash: PropTypes.string,
-    className: PropTypes.string,
-  };
-
-  state = {
-    loaded: false,
-  };
-
-  handleLoad = () => this.setState({ loaded: true });
-
-  render () {
-    const { src, srcSet, blurhash, className } = this.props;
-    const { loaded } = this.state;
-
-    return (
-      <div className={classNames('image', { loaded }, className)} role='presentation'>
-        {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
-        <img src={src} srcSet={srcSet} alt='' onLoad={this.handleLoad} />
-      </div>
-    );
-  }
-
-}
diff --git a/app/javascript/mastodon/components/image.tsx b/app/javascript/mastodon/components/image.tsx
new file mode 100644
index 0000000000..490543424a
--- /dev/null
+++ b/app/javascript/mastodon/components/image.tsx
@@ -0,0 +1,33 @@
+import React, { useCallback, useState } from 'react';
+import { Blurhash } from './blurhash';
+import classNames from 'classnames';
+
+type Props = {
+  src: string;
+  srcSet?: string;
+  blurhash?: string;
+  className?: string;
+};
+
+export const Image: React.FC<Props> = ({
+  src,
+  srcSet,
+  blurhash,
+  className,
+}) => {
+  const [loaded, setLoaded] = useState(false);
+
+  const handleLoad = useCallback(() => {
+    setLoaded(true);
+  }, [setLoaded]);
+
+  return (
+    <div
+      className={classNames('image', { loaded }, className)}
+      role='presentation'
+    >
+      {blurhash && <Blurhash hash={blurhash} className='image__preview' />}
+      <img src={src} srcSet={srcSet} alt='' onLoad={handleLoad} />
+    </div>
+  );
+};
diff --git a/app/javascript/mastodon/components/inline_account.jsx b/app/javascript/mastodon/components/inline_account.jsx
index 31dc63f93f..ca11f8b1bc 100644
--- a/app/javascript/mastodon/components/inline_account.jsx
+++ b/app/javascript/mastodon/components/inline_account.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'mastodon/selectors';
-import Avatar from 'mastodon/components/avatar';
+import { Avatar } from 'mastodon/components/avatar';
 
 const makeMapStateToProps = () => {
   const getAccount = makeGetAccount();
diff --git a/app/javascript/mastodon/components/load_gap.jsx b/app/javascript/mastodon/components/load_gap.jsx
index 2c91d37be7..2637bdbbc4 100644
--- a/app/javascript/mastodon/components/load_gap.jsx
+++ b/app/javascript/mastodon/components/load_gap.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages } from 'react-intl';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
diff --git a/app/javascript/mastodon/components/media_gallery.jsx b/app/javascript/mastodon/components/media_gallery.jsx
index 54470f9402..54b414de20 100644
--- a/app/javascript/mastodon/components/media_gallery.jsx
+++ b/app/javascript/mastodon/components/media_gallery.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { is } from 'immutable';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
 import { autoPlayGif, cropImages, displayMedia, useBlurhash } from '../initial_state';
 import { debounce } from 'lodash';
-import Blurhash from 'mastodon/components/blurhash';
+import { Blurhash } from 'mastodon/components/blurhash';
 
 const messages = defineMessages({
   toggle_visible: { id: 'media_gallery.toggle_visible', defaultMessage: '{number, plural, one {Hide image} other {Hide images}}' },
diff --git a/app/javascript/mastodon/components/not_signed_in_indicator.jsx b/app/javascript/mastodon/components/not_signed_in_indicator.jsx
deleted file mode 100644
index b440c6be2f..0000000000
--- a/app/javascript/mastodon/components/not_signed_in_indicator.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-const NotSignedInIndicator = () => (
-  <div className='scrollable scrollable--flex'>
-    <div className='empty-column-indicator'>
-      <FormattedMessage id='not_signed_in_indicator.not_signed_in' defaultMessage='You need to sign in to access this resource.' />
-    </div>
-  </div>
-);
-
-export default NotSignedInIndicator;
diff --git a/app/javascript/mastodon/components/not_signed_in_indicator.tsx b/app/javascript/mastodon/components/not_signed_in_indicator.tsx
new file mode 100644
index 0000000000..53945d6a7a
--- /dev/null
+++ b/app/javascript/mastodon/components/not_signed_in_indicator.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+export const NotSignedInIndicator: React.FC = () => (
+  <div className='scrollable scrollable--flex'>
+    <div className='empty-column-indicator'>
+      <FormattedMessage
+        id='not_signed_in_indicator.not_signed_in'
+        defaultMessage='You need to sign in to access this resource.'
+      />
+    </div>
+  </div>
+);
diff --git a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx b/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx
index a51c974017..4763a28d10 100644
--- a/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx
+++ b/app/javascript/mastodon/components/picture_in_picture_placeholder.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
 import { connect } from 'react-redux';
 import { FormattedMessage } from 'react-intl';
diff --git a/app/javascript/mastodon/components/poll.jsx b/app/javascript/mastodon/components/poll.jsx
index b9b96a7005..0ccdf472eb 100644
--- a/app/javascript/mastodon/components/poll.jsx
+++ b/app/javascript/mastodon/components/poll.jsx
@@ -8,8 +8,8 @@ import Motion from 'mastodon/features/ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import escapeTextContentForBrowser from 'escape-html';
 import emojify from 'mastodon/features/emoji/emoji';
-import RelativeTimestamp from './relative_timestamp';
-import Icon from 'mastodon/components/icon';
+import { RelativeTimestamp } from './relative_timestamp';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   closed: {
diff --git a/app/javascript/mastodon/components/radio_button.jsx b/app/javascript/mastodon/components/radio_button.jsx
deleted file mode 100644
index 0496fa2868..0000000000
--- a/app/javascript/mastodon/components/radio_button.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-export default class RadioButton extends React.PureComponent {
-
-  static propTypes = {
-    value: PropTypes.string.isRequired,
-    checked: PropTypes.bool,
-    name: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    label: PropTypes.node.isRequired,
-  };
-
-  render () {
-    const { name, value, checked, onChange, label } = this.props;
-
-    return (
-      <label className='radio-button'>
-        <input
-          name={name}
-          type='radio'
-          value={value}
-          checked={checked}
-          onChange={onChange}
-        />
-
-        <span className={classNames('radio-button__input', { checked })} />
-
-        <span>{label}</span>
-      </label>
-    );
-  }
-
-}
diff --git a/app/javascript/mastodon/components/radio_button.tsx b/app/javascript/mastodon/components/radio_button.tsx
new file mode 100644
index 0000000000..829f471747
--- /dev/null
+++ b/app/javascript/mastodon/components/radio_button.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import classNames from 'classnames';
+
+type Props = {
+  value: string;
+  checked: boolean;
+  name: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  label: React.ReactNode;
+};
+
+export const RadioButton: React.FC<Props> = ({
+  name,
+  value,
+  checked,
+  onChange,
+  label,
+}) => {
+  return (
+    <label className='radio-button'>
+      <input
+        name={name}
+        type='radio'
+        value={value}
+        checked={checked}
+        onChange={onChange}
+      />
+
+      <span className={classNames('radio-button__input', { checked })} />
+
+      <span>{label}</span>
+    </label>
+  );
+};
diff --git a/app/javascript/mastodon/components/relative_timestamp.tsx b/app/javascript/mastodon/components/relative_timestamp.tsx
index 89cad06658..65d9d27cb2 100644
--- a/app/javascript/mastodon/components/relative_timestamp.tsx
+++ b/app/javascript/mastodon/components/relative_timestamp.tsx
@@ -4,20 +4,50 @@ import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
 const messages = defineMessages({
   today: { id: 'relative_time.today', defaultMessage: 'today' },
   just_now: { id: 'relative_time.just_now', defaultMessage: 'now' },
-  just_now_full: { id: 'relative_time.full.just_now', defaultMessage: 'just now' },
+  just_now_full: {
+    id: 'relative_time.full.just_now',
+    defaultMessage: 'just now',
+  },
   seconds: { id: 'relative_time.seconds', defaultMessage: '{number}s' },
-  seconds_full: { id: 'relative_time.full.seconds', defaultMessage: '{number, plural, one {# second} other {# seconds}} ago' },
+  seconds_full: {
+    id: 'relative_time.full.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} ago',
+  },
   minutes: { id: 'relative_time.minutes', defaultMessage: '{number}m' },
-  minutes_full: { id: 'relative_time.full.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago' },
+  minutes_full: {
+    id: 'relative_time.full.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} ago',
+  },
   hours: { id: 'relative_time.hours', defaultMessage: '{number}h' },
-  hours_full: { id: 'relative_time.full.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} ago' },
+  hours_full: {
+    id: 'relative_time.full.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} ago',
+  },
   days: { id: 'relative_time.days', defaultMessage: '{number}d' },
-  days_full: { id: 'relative_time.full.days', defaultMessage: '{number, plural, one {# day} other {# days}} ago' },
-  moments_remaining: { id: 'time_remaining.moments', defaultMessage: 'Moments remaining' },
-  seconds_remaining: { id: 'time_remaining.seconds', defaultMessage: '{number, plural, one {# second} other {# seconds}} left' },
-  minutes_remaining: { id: 'time_remaining.minutes', defaultMessage: '{number, plural, one {# minute} other {# minutes}} left' },
-  hours_remaining: { id: 'time_remaining.hours', defaultMessage: '{number, plural, one {# hour} other {# hours}} left' },
-  days_remaining: { id: 'time_remaining.days', defaultMessage: '{number, plural, one {# day} other {# days}} left' },
+  days_full: {
+    id: 'relative_time.full.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}} ago',
+  },
+  moments_remaining: {
+    id: 'time_remaining.moments',
+    defaultMessage: 'Moments remaining',
+  },
+  seconds_remaining: {
+    id: 'time_remaining.seconds',
+    defaultMessage: '{number, plural, one {# second} other {# seconds}} left',
+  },
+  minutes_remaining: {
+    id: 'time_remaining.minutes',
+    defaultMessage: '{number, plural, one {# minute} other {# minutes}} left',
+  },
+  hours_remaining: {
+    id: 'time_remaining.hours',
+    defaultMessage: '{number, plural, one {# hour} other {# hours}} left',
+  },
+  days_remaining: {
+    id: 'time_remaining.days',
+    defaultMessage: '{number, plural, one {# day} other {# days}} left',
+  },
 });
 
 const dateFormatOptions = {
@@ -36,8 +66,8 @@ const shortDateFormatOptions = {
 
 const SECOND = 1000;
 const MINUTE = 1000 * 60;
-const HOUR   = 1000 * 60 * 60;
-const DAY    = 1000 * 60 * 60 * 24;
+const HOUR = 1000 * 60 * 60;
+const DAY = 1000 * 60 * 60 * 24;
 
 const MAX_DELAY = 2147483647;
 
@@ -57,20 +87,27 @@ const selectUnits = (delta: number) => {
 
 const getUnitDelay = (units: string) => {
   switch (units) {
-  case 'second':
-    return SECOND;
-  case 'minute':
-    return MINUTE;
-  case 'hour':
-    return HOUR;
-  case 'day':
-    return DAY;
-  default:
-    return MAX_DELAY;
+    case 'second':
+      return SECOND;
+    case 'minute':
+      return MINUTE;
+    case 'hour':
+      return HOUR;
+    case 'day':
+      return DAY;
+    default:
+      return MAX_DELAY;
   }
 };
 
-export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year: number, timeGiven: boolean, short?: boolean) => {
+export const timeAgoString = (
+  intl: InjectedIntl,
+  date: Date,
+  now: number,
+  year: number,
+  timeGiven: boolean,
+  short?: boolean
+) => {
   const delta = now - date.getTime();
 
   let relativeTime;
@@ -78,27 +115,49 @@ export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year:
   if (delta < DAY && !timeGiven) {
     relativeTime = intl.formatMessage(messages.today);
   } else if (delta < 10 * SECOND) {
-    relativeTime = intl.formatMessage(short ? messages.just_now : messages.just_now_full);
+    relativeTime = intl.formatMessage(
+      short ? messages.just_now : messages.just_now_full
+    );
   } else if (delta < 7 * DAY) {
     if (delta < MINUTE) {
-      relativeTime = intl.formatMessage(short ? messages.seconds : messages.seconds_full, { number: Math.floor(delta / SECOND) });
+      relativeTime = intl.formatMessage(
+        short ? messages.seconds : messages.seconds_full,
+        { number: Math.floor(delta / SECOND) }
+      );
     } else if (delta < HOUR) {
-      relativeTime = intl.formatMessage(short ? messages.minutes : messages.minutes_full, { number: Math.floor(delta / MINUTE) });
+      relativeTime = intl.formatMessage(
+        short ? messages.minutes : messages.minutes_full,
+        { number: Math.floor(delta / MINUTE) }
+      );
     } else if (delta < DAY) {
-      relativeTime = intl.formatMessage(short ? messages.hours : messages.hours_full, { number: Math.floor(delta / HOUR) });
+      relativeTime = intl.formatMessage(
+        short ? messages.hours : messages.hours_full,
+        { number: Math.floor(delta / HOUR) }
+      );
     } else {
-      relativeTime = intl.formatMessage(short ? messages.days : messages.days_full, { number: Math.floor(delta / DAY) });
+      relativeTime = intl.formatMessage(
+        short ? messages.days : messages.days_full,
+        { number: Math.floor(delta / DAY) }
+      );
     }
   } else if (date.getFullYear() === year) {
     relativeTime = intl.formatDate(date, shortDateFormatOptions);
   } else {
-    relativeTime = intl.formatDate(date, { ...shortDateFormatOptions, year: 'numeric' });
+    relativeTime = intl.formatDate(date, {
+      ...shortDateFormatOptions,
+      year: 'numeric',
+    });
   }
 
   return relativeTime;
 };
 
-const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGiven = true) => {
+const timeRemainingString = (
+  intl: InjectedIntl,
+  date: Date,
+  now: number,
+  timeGiven = true
+) => {
   const delta = date.getTime() - now;
 
   let relativeTime;
@@ -108,13 +167,21 @@ const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGi
   } else if (delta < 10 * SECOND) {
     relativeTime = intl.formatMessage(messages.moments_remaining);
   } else if (delta < MINUTE) {
-    relativeTime = intl.formatMessage(messages.seconds_remaining, { number: Math.floor(delta / SECOND) });
+    relativeTime = intl.formatMessage(messages.seconds_remaining, {
+      number: Math.floor(delta / SECOND),
+    });
   } else if (delta < HOUR) {
-    relativeTime = intl.formatMessage(messages.minutes_remaining, { number: Math.floor(delta / MINUTE) });
+    relativeTime = intl.formatMessage(messages.minutes_remaining, {
+      number: Math.floor(delta / MINUTE),
+    });
   } else if (delta < DAY) {
-    relativeTime = intl.formatMessage(messages.hours_remaining, { number: Math.floor(delta / HOUR) });
+    relativeTime = intl.formatMessage(messages.hours_remaining, {
+      number: Math.floor(delta / HOUR),
+    });
   } else {
-    relativeTime = intl.formatMessage(messages.days_remaining, { number: Math.floor(delta / DAY) });
+    relativeTime = intl.formatMessage(messages.days_remaining, {
+      number: Math.floor(delta / DAY),
+    });
   }
 
   return relativeTime;
@@ -126,78 +193,88 @@ type Props = {
   year: number;
   futureDate?: boolean;
   short?: boolean;
-}
+};
 type States = {
   now: number;
-}
+};
 class RelativeTimestamp extends React.Component<Props, States> {
-
   state = {
     now: this.props.intl.now(),
   };
 
   static defaultProps = {
-    year: (new Date()).getFullYear(),
+    year: new Date().getFullYear(),
     short: true,
   };
 
   _timer: number | undefined;
 
-  shouldComponentUpdate (nextProps: Props, nextState: States) {
+  shouldComponentUpdate(nextProps: Props, nextState: States) {
     // As of right now the locale doesn't change without a new page load,
     // but we might as well check in case that ever changes.
-    return this.props.timestamp !== nextProps.timestamp ||
+    return (
+      this.props.timestamp !== nextProps.timestamp ||
       this.props.intl.locale !== nextProps.intl.locale ||
-      this.state.now !== nextState.now;
+      this.state.now !== nextState.now
+    );
   }
 
-  UNSAFE_componentWillReceiveProps (nextProps: Props) {
+  UNSAFE_componentWillReceiveProps(nextProps: Props) {
     if (this.props.timestamp !== nextProps.timestamp) {
       this.setState({ now: this.props.intl.now() });
     }
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this._scheduleNextUpdate(this.props, this.state);
   }
 
-  UNSAFE_componentWillUpdate (nextProps: Props, nextState: States) {
+  UNSAFE_componentWillUpdate(nextProps: Props, nextState: States) {
     this._scheduleNextUpdate(nextProps, nextState);
   }
 
-  componentWillUnmount () {
+  componentWillUnmount() {
     window.clearTimeout(this._timer);
   }
 
-  _scheduleNextUpdate (props: Props, state: States) {
+  _scheduleNextUpdate(props: Props, state: States) {
     window.clearTimeout(this._timer);
 
-    const { timestamp }  = props;
-    const delta          = (new Date(timestamp)).getTime() - state.now;
-    const unitDelay      = getUnitDelay(selectUnits(delta));
-    const unitRemainder  = Math.abs(delta % unitDelay);
+    const { timestamp } = props;
+    const delta = new Date(timestamp).getTime() - state.now;
+    const unitDelay = getUnitDelay(selectUnits(delta));
+    const unitRemainder = Math.abs(delta % unitDelay);
     const updateInterval = 1000 * 10;
-    const delay          = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
+    const delay =
+      delta < 0
+        ? Math.max(updateInterval, unitDelay - unitRemainder)
+        : Math.max(updateInterval, unitRemainder);
 
     this._timer = window.setTimeout(() => {
       this.setState({ now: this.props.intl.now() });
     }, delay);
   }
 
-  render () {
+  render() {
     const { timestamp, intl, year, futureDate, short } = this.props;
 
-    const timeGiven    = timestamp.includes('T');
-    const date         = new Date(timestamp);
-    const relativeTime = futureDate ? timeRemainingString(intl, date, this.state.now, timeGiven) : timeAgoString(intl, date, this.state.now, year, timeGiven, short);
+    const timeGiven = timestamp.includes('T');
+    const date = new Date(timestamp);
+    const relativeTime = futureDate
+      ? timeRemainingString(intl, date, this.state.now, timeGiven)
+      : timeAgoString(intl, date, this.state.now, year, timeGiven, short);
 
     return (
-      <time dateTime={timestamp} title={intl.formatDate(date, dateFormatOptions)}>
+      <time
+        dateTime={timestamp}
+        title={intl.formatDate(date, dateFormatOptions)}
+      >
         {relativeTime}
       </time>
     );
   }
-
 }
 
-export default injectIntl(RelativeTimestamp);
+const RelativeTimestampWithIntl = injectIntl(RelativeTimestamp);
+
+export { RelativeTimestampWithIntl as RelativeTimestamp };
diff --git a/app/javascript/mastodon/components/scrollable_list.jsx b/app/javascript/mastodon/components/scrollable_list.jsx
index 57bc881218..3f4e4a59c6 100644
--- a/app/javascript/mastodon/components/scrollable_list.jsx
+++ b/app/javascript/mastodon/components/scrollable_list.jsx
@@ -8,6 +8,7 @@ import IntersectionObserverWrapper from '../features/ui/util/intersection_observ
 import { throttle } from 'lodash';
 import { List as ImmutableList } from 'immutable';
 import classNames from 'classnames';
+import { supportsPassiveEvents } from 'detect-passive-events';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../features/ui/util/fullscreen';
 import LoadingIndicator from './loading_indicator';
 import { connect } from 'react-redux';
@@ -236,10 +237,10 @@ class ScrollableList extends PureComponent {
   attachScrollListener () {
     if (this.props.bindToDocument) {
       document.addEventListener('scroll', this.handleScroll);
-      document.addEventListener('wheel', this.handleWheel);
+      document.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : undefined);
     } else {
       this.node.addEventListener('scroll', this.handleScroll);
-      this.node.addEventListener('wheel', this.handleWheel);
+      this.node.addEventListener('wheel', this.handleWheel, supportsPassiveEvents ? { passive: true } : undefined);
     }
   }
 
diff --git a/app/javascript/mastodon/components/server_banner.jsx b/app/javascript/mastodon/components/server_banner.jsx
index e5f5aa8ee2..991907a3f0 100644
--- a/app/javascript/mastodon/components/server_banner.jsx
+++ b/app/javascript/mastodon/components/server_banner.jsx
@@ -7,7 +7,7 @@ import ShortNumber from 'mastodon/components/short_number';
 import Skeleton from 'mastodon/components/skeleton';
 import Account from 'mastodon/containers/account_container';
 import { domain } from 'mastodon/initial_state';
-import Image from 'mastodon/components/image';
+import { Image } from 'mastodon/components/image';
 import { Link } from 'react-router-dom';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/components/status.jsx b/app/javascript/mastodon/components/status.jsx
index b5242e7691..3ca840b720 100644
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from './avatar';
-import AvatarOverlay from './avatar_overlay';
-import RelativeTimestamp from './relative_timestamp';
+import { Avatar } from './avatar';
+import { AvatarOverlay } from './avatar_overlay';
+import { RelativeTimestamp } from './relative_timestamp';
 import DisplayName from './display_name';
 import StatusContent from './status_content';
 import StatusActionBar from './status_action_bar';
@@ -14,7 +14,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
 import { HotKeys } from 'react-hotkeys';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { displayMedia } from '../initial_state';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 
diff --git a/app/javascript/mastodon/components/status_action_bar.jsx b/app/javascript/mastodon/components/status_action_bar.jsx
index 7b4031b68e..aee9cc19e8 100644
--- a/app/javascript/mastodon/components/status_action_bar.jsx
+++ b/app/javascript/mastodon/components/status_action_bar.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import IconButton from './icon_button';
+import { IconButton } from './icon_button';
 import DropdownMenuContainer from '../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/javascript/mastodon/components/status_content.jsx b/app/javascript/mastodon/components/status_content.jsx
index dd589dac6d..cece3ffc25 100644
--- a/app/javascript/mastodon/components/status_content.jsx
+++ b/app/javascript/mastodon/components/status_content.jsx
@@ -6,7 +6,7 @@ import { Link } from 'react-router-dom';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 import PollContainer from 'mastodon/containers/poll_container';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { autoPlayGif, languages as preloadedLanguages } from 'mastodon/initial_state';
 
 const MAX_HEIGHT = 706; // 22px * 32 (+ 2px padding at the top)
diff --git a/app/javascript/mastodon/components/verified_badge.jsx b/app/javascript/mastodon/components/verified_badge.jsx
deleted file mode 100644
index 3d878d5dd1..0000000000
--- a/app/javascript/mastodon/components/verified_badge.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'mastodon/components/icon';
-
-class VerifiedBadge extends React.PureComponent {
-
-  static propTypes = {
-    link: PropTypes.string.isRequired,
-    verifiedAt: PropTypes.string.isRequired,
-  };
-
-  render () {
-    const { link } = this.props;
-
-    return (
-      <span className='verified-badge'>
-        <Icon id='check' className='verified-badge__mark' />
-        <span dangerouslySetInnerHTML={{ __html: link }} />
-      </span>
-    );
-  }
-
-}
-
-export default VerifiedBadge;
\ No newline at end of file
diff --git a/app/javascript/mastodon/components/verified_badge.tsx b/app/javascript/mastodon/components/verified_badge.tsx
new file mode 100644
index 0000000000..da3cab9fe5
--- /dev/null
+++ b/app/javascript/mastodon/components/verified_badge.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Icon } from './icon';
+
+type Props = {
+  link: string;
+};
+export const VerifiedBadge: React.FC<Props> = ({ link }) => (
+  <span className='verified-badge'>
+    <Icon id='check' className='verified-badge__mark' />
+    <span dangerouslySetInnerHTML={{ __html: link }} />
+  </span>
+);
diff --git a/app/javascript/mastodon/containers/compose_container.jsx b/app/javascript/mastodon/containers/compose_container.jsx
index a4c5f3cb49..9213c5614e 100644
--- a/app/javascript/mastodon/containers/compose_container.jsx
+++ b/app/javascript/mastodon/containers/compose_container.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import PropTypes from 'prop-types';
-import { store } from '../store/configureStore';
+import { store } from '../store';
 import { hydrateStore } from '../actions/store';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { getLocale } from '../locales';
diff --git a/app/javascript/mastodon/containers/domain_container.jsx b/app/javascript/mastodon/containers/domain_container.jsx
index 8a8ba1df12..419d5d29f5 100644
--- a/app/javascript/mastodon/containers/domain_container.jsx
+++ b/app/javascript/mastodon/containers/domain_container.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { blockDomain, unblockDomain } from '../actions/domain_blocks';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Domain from '../components/domain';
+import { Domain } from '../components/domain';
 import { openModal } from '../actions/modal';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/containers/mastodon.jsx b/app/javascript/mastodon/containers/mastodon.jsx
index 256ea8e2d9..9c6c9e5920 100644
--- a/app/javascript/mastodon/containers/mastodon.jsx
+++ b/app/javascript/mastodon/containers/mastodon.jsx
@@ -5,7 +5,7 @@ import { IntlProvider, addLocaleData } from 'react-intl';
 import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter, Route } from 'react-router-dom';
 import { ScrollContext } from 'react-router-scroll-4';
-import { store } from 'mastodon/store/configureStore';
+import { store } from 'mastodon/store';
 import UI from 'mastodon/features/ui';
 import { fetchCustomEmojis } from 'mastodon/actions/custom_emojis';
 import { hydrateStore } from 'mastodon/actions/store';
diff --git a/app/javascript/mastodon/features/about/index.jsx b/app/javascript/mastodon/features/about/index.jsx
index bb35f3203b..11aff67c67 100644
--- a/app/javascript/mastodon/features/about/index.jsx
+++ b/app/javascript/mastodon/features/about/index.jsx
@@ -9,9 +9,9 @@ import { Helmet } from 'react-helmet';
 import { fetchServer, fetchExtendedDescription, fetchDomainBlocks } from 'mastodon/actions/server';
 import Account from 'mastodon/containers/account_container';
 import Skeleton from 'mastodon/components/skeleton';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
-import Image from 'mastodon/components/image';
+import { Image } from 'mastodon/components/image';
 
 const messages = defineMessages({
   title: { id: 'column.about', defaultMessage: 'About' },
diff --git a/app/javascript/mastodon/features/account/components/follow_request_note.jsx b/app/javascript/mastodon/features/account/components/follow_request_note.jsx
index 300ae42660..7972515af5 100644
--- a/app/javascript/mastodon/features/account/components/follow_request_note.jsx
+++ b/app/javascript/mastodon/features/account/components/follow_request_note.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 export default class FollowRequestNote extends ImmutablePureComponent {
 
diff --git a/app/javascript/mastodon/features/account/components/header.jsx b/app/javascript/mastodon/features/account/components/header.jsx
index ff8dc5fa9f..bb0982b5e4 100644
--- a/app/javascript/mastodon/features/account/components/header.jsx
+++ b/app/javascript/mastodon/features/account/components/header.jsx
@@ -6,9 +6,9 @@ import Button from 'mastodon/components/button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { autoPlayGif, me, domain } from 'mastodon/initial_state';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
-import IconButton from 'mastodon/components/icon_button';
-import Avatar from 'mastodon/components/avatar';
+import { Icon }  from 'mastodon/components/icon';
+import { IconButton } from 'mastodon/components/icon_button';
+import { Avatar } from 'mastodon/components/avatar';
 import { counterRenderer } from 'mastodon/components/common_counter';
 import ShortNumber from 'mastodon/components/short_number';
 import { NavLink } from 'react-router-dom';
diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
index 00526016d7..9e9b9e6e16 100644
--- a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
+++ b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx
@@ -1,6 +1,6 @@
-import Blurhash from 'mastodon/components/blurhash';
+import { Blurhash } from 'mastodon/components/blurhash';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/javascript/mastodon/features/account_timeline/components/moved_note.jsx b/app/javascript/mastodon/features/account_timeline/components/moved_note.jsx
index daff47a9d6..273583c0ad 100644
--- a/app/javascript/mastodon/features/account_timeline/components/moved_note.jsx
+++ b/app/javascript/mastodon/features/account_timeline/components/moved_note.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import AvatarOverlay from '../../../components/avatar_overlay';
+import { AvatarOverlay } from '../../../components/avatar_overlay';
 import DisplayName from '../../../components/display_name';
 import { Link } from 'react-router-dom';
 
diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx
index e8fe2c4d9a..56e913ae3a 100644
--- a/app/javascript/mastodon/features/audio/index.jsx
+++ b/app/javascript/mastodon/features/audio/index.jsx
@@ -2,12 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { formatTime, getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { throttle, debounce } from 'lodash';
 import Visualizer from './visualizer';
 import { displayMedia, useBlurhash } from '../../initial_state';
-import Blurhash from '../../components/blurhash';
+import { Blurhash } from '../../components/blurhash';
 import { is } from 'immutable';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx b/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx
index 1451be0e64..2c92016e86 100644
--- a/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx
+++ b/app/javascript/mastodon/features/compose/components/autosuggest_account.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/javascript/mastodon/features/compose/components/compose_form.jsx b/app/javascript/mastodon/features/compose/components/compose_form.jsx
index df11d2c97e..42bba5cdf0 100644
--- a/app/javascript/mastodon/features/compose/components/compose_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/compose_form.jsx
@@ -19,7 +19,7 @@ import LanguageDropdown from '../containers/language_dropdown_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { length } from 'stringz';
 import { countableText } from '../util/counter';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { maxChars } from '../../../initial_state';
 
diff --git a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
index be979af505..b5a7b6bda2 100644
--- a/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
+++ b/app/javascript/mastodon/features/compose/components/navigation_bar.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ActionBar from './action_bar';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import { Link } from 'react-router-dom';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import { FormattedMessage } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
diff --git a/app/javascript/mastodon/features/compose/components/poll_button.jsx b/app/javascript/mastodon/features/compose/components/poll_button.jsx
index 6ad689ccc8..5d90564bd1 100644
--- a/app/javascript/mastodon/features/compose/components/poll_button.jsx
+++ b/app/javascript/mastodon/features/compose/components/poll_button.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
diff --git a/app/javascript/mastodon/features/compose/components/poll_form.jsx b/app/javascript/mastodon/features/compose/components/poll_form.jsx
index f81d7355ae..6bee97935d 100644
--- a/app/javascript/mastodon/features/compose/components/poll_form.jsx
+++ b/app/javascript/mastodon/features/compose/components/poll_form.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import IconButton from 'mastodon/components/icon_button';
-import Icon from 'mastodon/components/icon';
+import { IconButton } from 'mastodon/components/icon_button';
+import { Icon }  from 'mastodon/components/icon';
 import AutosuggestInput from 'mastodon/components/autosuggest_input';
 import classNames from 'classnames';
 
diff --git a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx b/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
index e65c9cb726..ecb7accad9 100644
--- a/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
+++ b/app/javascript/mastodon/features/compose/components/privacy_dropdown.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, defineMessages } from 'react-intl';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import Overlay from 'react-overlays/Overlay';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
diff --git a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
index 81de4ea765..68cd7b0804 100644
--- a/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
+++ b/app/javascript/mastodon/features/compose/components/reply_indicator.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from '../../../components/avatar';
-import IconButton from '../../../components/icon_button';
+import { Avatar } from '../../../components/avatar';
+import { IconButton } from '../../../components/icon_button';
 import DisplayName from '../../../components/display_name';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/javascript/mastodon/features/compose/components/search.jsx b/app/javascript/mastodon/features/compose/components/search.jsx
index 7fff587d68..d20908b9df 100644
--- a/app/javascript/mastodon/features/compose/components/search.jsx
+++ b/app/javascript/mastodon/features/compose/components/search.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { searchEnabled } from 'mastodon/initial_state';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { HASHTAG_REGEX } from 'mastodon/utils/hashtags';
 
diff --git a/app/javascript/mastodon/features/compose/components/search_results.jsx b/app/javascript/mastodon/features/compose/components/search_results.jsx
index 8fafd88b07..9a44e2eaf7 100644
--- a/app/javascript/mastodon/features/compose/components/search_results.jsx
+++ b/app/javascript/mastodon/features/compose/components/search_results.jsx
@@ -6,7 +6,7 @@ import AccountContainer from '../../../containers/account_container';
 import StatusContainer from '../../../containers/status_container';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { ImmutableHashtag as Hashtag } from '../../../components/hashtag';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { searchEnabled } from '../../../initial_state';
 import LoadMore from 'mastodon/components/load_more';
 
diff --git a/app/javascript/mastodon/features/compose/components/upload.jsx b/app/javascript/mastodon/features/compose/components/upload.jsx
index e3651c2290..d667f5ef71 100644
--- a/app/javascript/mastodon/features/compose/components/upload.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload.jsx
@@ -5,7 +5,7 @@ import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 export default class Upload extends ImmutablePureComponent {
 
diff --git a/app/javascript/mastodon/features/compose/components/upload_button.jsx b/app/javascript/mastodon/features/compose/components/upload_button.jsx
index f2e6ff85c3..3870997c3d 100644
--- a/app/javascript/mastodon/features/compose/components/upload_button.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload_button.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
diff --git a/app/javascript/mastodon/features/compose/components/upload_progress.jsx b/app/javascript/mastodon/features/compose/components/upload_progress.jsx
index cabf520fd9..c5740d9bf5 100644
--- a/app/javascript/mastodon/features/compose/components/upload_progress.jsx
+++ b/app/javascript/mastodon/features/compose/components/upload_progress.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { FormattedMessage } from 'react-intl';
 
 export default class UploadProgress extends React.PureComponent {
diff --git a/app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js b/app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js
index 5ec937a393..9d9a59c414 100644
--- a/app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js
+++ b/app/javascript/mastodon/features/compose/containers/emoji_picker_dropdown_container.js
@@ -72,6 +72,7 @@ const mapDispatchToProps = (dispatch, { onPickEmoji }) => ({
   },
 
   onPickEmoji: emoji => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
     dispatch(useEmoji(emoji));
 
     if (onPickEmoji) {
diff --git a/app/javascript/mastodon/features/compose/containers/language_dropdown_container.js b/app/javascript/mastodon/features/compose/containers/language_dropdown_container.js
index 2a040a13f4..5560fe6093 100644
--- a/app/javascript/mastodon/features/compose/containers/language_dropdown_container.js
+++ b/app/javascript/mastodon/features/compose/containers/language_dropdown_container.js
@@ -26,6 +26,7 @@ const mapDispatchToProps = dispatch => ({
   },
 
   onClose (value) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- this is not a react hook
     dispatch(useLanguage(value));
   },
 
diff --git a/app/javascript/mastodon/features/compose/index.jsx b/app/javascript/mastodon/features/compose/index.jsx
index 6cba1e9ad8..df60d4347e 100644
--- a/app/javascript/mastodon/features/compose/index.jsx
+++ b/app/javascript/mastodon/features/compose/index.jsx
@@ -14,7 +14,7 @@ import SearchResultsContainer from './containers/search_results_container';
 import { openModal } from 'mastodon/actions/modal';
 import elephantUIPlane from '../../../images/elephant_ui_plane.svg';
 import { mascot } from '../../initial_state';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { logOut } from 'mastodon/utils/log_out';
 import Column from 'mastodon/components/column';
 import { Helmet } from 'react-helmet';
diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
index 11f2790bff..452de11619 100644
--- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
+++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx
@@ -8,8 +8,8 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import DropdownMenuContainer from 'mastodon/containers/dropdown_menu_container';
 import AvatarComposite from 'mastodon/components/avatar_composite';
 import { Link } from 'react-router-dom';
-import IconButton from 'mastodon/components/icon_button';
-import RelativeTimestamp from 'mastodon/components/relative_timestamp';
+import { IconButton } from 'mastodon/components/icon_button';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import { HotKeys } from 'react-hotkeys';
 import { autoPlayGif } from 'mastodon/initial_state';
 import classNames from 'classnames';
diff --git a/app/javascript/mastodon/features/directory/components/account_card.jsx b/app/javascript/mastodon/features/directory/components/account_card.jsx
index 1cee3a4e4e..4951427151 100644
--- a/app/javascript/mastodon/features/directory/components/account_card.jsx
+++ b/app/javascript/mastodon/features/directory/components/account_card.jsx
@@ -4,7 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { makeGetAccount } from 'mastodon/selectors';
-import Avatar from 'mastodon/components/avatar';
+import { Avatar } from 'mastodon/components/avatar';
 import DisplayName from 'mastodon/components/display_name';
 import { Link } from 'react-router-dom';
 import Button from 'mastodon/components/button';
diff --git a/app/javascript/mastodon/features/directory/index.jsx b/app/javascript/mastodon/features/directory/index.jsx
index afaf39b773..d98a0665ac 100644
--- a/app/javascript/mastodon/features/directory/index.jsx
+++ b/app/javascript/mastodon/features/directory/index.jsx
@@ -9,7 +9,7 @@ import { addColumn, removeColumn, moveColumn, changeColumnParams } from 'mastodo
 import { fetchDirectory, expandDirectory } from 'mastodon/actions/directory';
 import { List as ImmutableList } from 'immutable';
 import AccountCard from './components/account_card';
-import RadioButton from 'mastodon/components/radio_button';
+import { RadioButton } from 'mastodon/components/radio_button';
 import LoadMore from 'mastodon/components/load_more';
 import ScrollContainer from 'mastodon/containers/scroll_container';
 import LoadingIndicator from 'mastodon/components/loading_indicator';
diff --git a/app/javascript/mastodon/features/emoji/emoji_compressed.js b/app/javascript/mastodon/features/emoji/emoji_compressed.js
index 6a402f2d4b..e1bee1655d 100644
--- a/app/javascript/mastodon/features/emoji/emoji_compressed.js
+++ b/app/javascript/mastodon/features/emoji/emoji_compressed.js
@@ -1,3 +1,5 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here due to preval */
 // @preval
 // http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
 // This file contains the compressed version of the emoji data from
diff --git a/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js b/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js
index 49813537d7..000aeb0de4 100644
--- a/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js
+++ b/app/javascript/mastodon/features/emoji/emoji_mart_data_light.js
@@ -1,8 +1,10 @@
 // The output of this module is designed to mimic emoji-mart's
 // "data" object, such that we can use it for a light version of emoji-mart's
 // emojiIndex.search functionality.
-const { unicodeToUnifiedName } = require('./unicode_to_unified_name');
-const [ shortCodesToEmojiData, skins, categories, short_names ] = require('./emoji_compressed');
+import { unicodeToUnifiedName } from './unicode_to_unified_name';
+import emojiCompressed from './emoji_compressed';
+
+const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
 
 const emojis = {};
 
@@ -33,7 +35,7 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
   };
 });
 
-module.exports = {
+export {
   emojis,
   skins,
   categories,
diff --git a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js
index 70694ab6dd..83e154b0b2 100644
--- a/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js
+++ b/app/javascript/mastodon/features/emoji/emoji_mart_search_light.js
@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 import { getData, getSanitizedData, uniq, intersect } from './emoji_utils';
 
 let originalPool = {};
diff --git a/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js b/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js
index 1a38fde234..30fbd9e349 100644
--- a/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js
+++ b/app/javascript/mastodon/features/emoji/emoji_unicode_mapping_light.js
@@ -2,14 +2,17 @@
 // (i.e. the svg filename) and a shortCode intended to be shown
 // as a "title" attribute in an HTML element (aka tooltip).
 
+import emojiCompressed from './emoji_compressed';
+
+import { unicodeToFilename } from './unicode_to_filename';
+
 const [
   shortCodesToEmojiData,
-  skins, // eslint-disable-line @typescript-eslint/no-unused-vars
-  categories, // eslint-disable-line @typescript-eslint/no-unused-vars
-  short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
+  _skins,
+  _categories,
+  _short_names,
   emojisWithoutShortCodes,
-] = require('./emoji_compressed');
-const { unicodeToFilename } = require('./unicode_to_filename');
+] = emojiCompressed;
 
 // decompress
 const unicodeMapping = {};
@@ -32,4 +35,4 @@ Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
 });
 emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData));
 
-module.exports = unicodeMapping;
+export default unicodeMapping;
diff --git a/app/javascript/mastodon/features/emoji/emoji_utils.js b/app/javascript/mastodon/features/emoji/emoji_utils.js
index be793526d0..83bcc9d82f 100644
--- a/app/javascript/mastodon/features/emoji/emoji_utils.js
+++ b/app/javascript/mastodon/features/emoji/emoji_utils.js
@@ -1,7 +1,7 @@
 // This code is largely borrowed from:
 // https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js
 
-import data from './emoji_mart_data_light';
+import * as data from './emoji_mart_data_light';
 
 const buildSearch = (data) => {
   const search = [];
diff --git a/app/javascript/mastodon/features/emoji/unicode_to_filename.js b/app/javascript/mastodon/features/emoji/unicode_to_filename.js
index c75c4cd7d0..3395c77174 100644
--- a/app/javascript/mastodon/features/emoji/unicode_to_filename.js
+++ b/app/javascript/mastodon/features/emoji/unicode_to_filename.js
@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 // taken from:
 // https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866
 exports.unicodeToFilename = (str) => {
diff --git a/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js b/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js
index d29550f122..108b911222 100644
--- a/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js
+++ b/app/javascript/mastodon/features/emoji/unicode_to_unified_name.js
@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 function padLeft(str, num) {
   while (str.length < num) {
     str = '0' + str;
diff --git a/app/javascript/mastodon/features/explore/components/story.jsx b/app/javascript/mastodon/features/explore/components/story.jsx
index 5631280297..c7320c886d 100644
--- a/app/javascript/mastodon/features/explore/components/story.jsx
+++ b/app/javascript/mastodon/features/explore/components/story.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Blurhash from 'mastodon/components/blurhash';
+import { Blurhash } from 'mastodon/components/blurhash';
 import { accountsCountRenderer } from 'mastodon/components/hashtag';
 import ShortNumber from 'mastodon/components/short_number';
 import Skeleton from 'mastodon/components/skeleton';
diff --git a/app/javascript/mastodon/features/favourites/index.jsx b/app/javascript/mastodon/features/favourites/index.jsx
index b1e81debd5..4a8c1deb6f 100644
--- a/app/javascript/mastodon/features/favourites/index.jsx
+++ b/app/javascript/mastodon/features/favourites/index.jsx
@@ -5,7 +5,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import ColumnHeader from 'mastodon/components/column_header';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { fetchFavourites } from 'mastodon/actions/interactions';
 import LoadingIndicator from 'mastodon/components/loading_indicator';
 import ScrollableList from 'mastodon/components/scrollable_list';
diff --git a/app/javascript/mastodon/features/filters/select_filter.jsx b/app/javascript/mastodon/features/filters/select_filter.jsx
index 5778eec8e9..618f875dbe 100644
--- a/app/javascript/mastodon/features/filters/select_filter.jsx
+++ b/app/javascript/mastodon/features/filters/select_filter.jsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { toServerSideType } from 'mastodon/utils/filters';
 import { loupeIcon, deleteIcon } from 'mastodon/utils/icons';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import fuzzysort from 'fuzzysort';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx b/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
index 0bd45592c9..b370b33ecb 100644
--- a/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
+++ b/app/javascript/mastodon/features/follow_requests/components/account_authorize.jsx
@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Link } from 'react-router-dom';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
diff --git a/app/javascript/mastodon/features/getting_started/components/announcements.jsx b/app/javascript/mastodon/features/getting_started/components/announcements.jsx
index 5f993d2c55..ab29e3dc86 100644
--- a/app/javascript/mastodon/features/getting_started/components/announcements.jsx
+++ b/app/javascript/mastodon/features/getting_started/components/announcements.jsx
@@ -3,15 +3,15 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ReactSwipeableViews from 'react-swipeable-views';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from 'mastodon/components/icon_button';
-import Icon from 'mastodon/components/icon';
+import { IconButton } from 'mastodon/components/icon_button';
+import { Icon }  from 'mastodon/components/icon';
 import { defineMessages, injectIntl, FormattedMessage, FormattedDate } from 'react-intl';
 import { autoPlayGif, reduceMotion, disableSwiping, mascot } from 'mastodon/initial_state';
 import elephantUIPlane from 'mastodon/../images/elephant_ui_plane.svg';
 import unicodeMapping from 'mastodon/features/emoji/emoji_unicode_mapping_light';
 import classNames from 'classnames';
 import EmojiPickerDropdown from 'mastodon/features/compose/containers/emoji_picker_dropdown_container';
-import AnimatedNumber from 'mastodon/components/animated_number';
+import { AnimatedNumber } from 'mastodon/components/animated_number';
 import TransitionMotion from 'react-motion/lib/TransitionMotion';
 import spring from 'react-motion/lib/spring';
 import { assetHost } from 'mastodon/utils/config';
diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.jsx b/app/javascript/mastodon/features/hashtag_timeline/index.jsx
index a244dbdb22..116a5921c1 100644
--- a/app/javascript/mastodon/features/hashtag_timeline/index.jsx
+++ b/app/javascript/mastodon/features/hashtag_timeline/index.jsx
@@ -12,7 +12,7 @@ import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { connectHashtagStream } from 'mastodon/actions/streaming';
 import { isEqual } from 'lodash';
 import { fetchHashtag, followHashtag, unfollowHashtag } from 'mastodon/actions/tags';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { Helmet } from 'react-helmet';
 
diff --git a/app/javascript/mastodon/features/home_timeline/index.jsx b/app/javascript/mastodon/features/home_timeline/index.jsx
index 9aa4c6d821..26166b254c 100644
--- a/app/javascript/mastodon/features/home_timeline/index.jsx
+++ b/app/javascript/mastodon/features/home_timeline/index.jsx
@@ -12,8 +12,8 @@ import { Link } from 'react-router-dom';
 import { fetchAnnouncements, toggleShowAnnouncements } from 'mastodon/actions/announcements';
 import AnnouncementsContainer from 'mastodon/features/getting_started/containers/announcements_container';
 import classNames from 'classnames';
-import IconWithBadge from 'mastodon/components/icon_with_badge';
-import NotSignedInIndicator from 'mastodon/components/not_signed_in_indicator';
+import { IconWithBadge } from 'mastodon/components/icon_with_badge';
+import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/features/interaction_modal/index.jsx b/app/javascript/mastodon/features/interaction_modal/index.jsx
index 5742f11042..f3db2c78d5 100644
--- a/app/javascript/mastodon/features/interaction_modal/index.jsx
+++ b/app/javascript/mastodon/features/interaction_modal/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen } from 'mastodon/initial_state';
 import { connect } from 'react-redux';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
 import { openModal, closeModal } from 'mastodon/actions/modal';
 
diff --git a/app/javascript/mastodon/features/list_adder/components/account.jsx b/app/javascript/mastodon/features/list_adder/components/account.jsx
index 786af3bb1c..410f1537a5 100644
--- a/app/javascript/mastodon/features/list_adder/components/account.jsx
+++ b/app/javascript/mastodon/features/list_adder/components/account.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import { makeGetAccount } from '../../../selectors';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import { injectIntl } from 'react-intl';
 
diff --git a/app/javascript/mastodon/features/list_adder/components/list.jsx b/app/javascript/mastodon/features/list_adder/components/list.jsx
index 34ccf8451d..954a4a5cfe 100644
--- a/app/javascript/mastodon/features/list_adder/components/list.jsx
+++ b/app/javascript/mastodon/features/list_adder/components/list.jsx
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import IconButton from '../../../components/icon_button';
+import { IconButton }  from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
diff --git a/app/javascript/mastodon/features/list_editor/components/account.jsx b/app/javascript/mastodon/features/list_editor/components/account.jsx
index 86209bb3cb..b46d0504a4 100644
--- a/app/javascript/mastodon/features/list_editor/components/account.jsx
+++ b/app/javascript/mastodon/features/list_editor/components/account.jsx
@@ -4,9 +4,9 @@ import { connect } from 'react-redux';
 import { makeGetAccount } from '../../../selectors';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
 
diff --git a/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx b/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx
index 9c1c244cbc..65bfe7f94a 100644
--- a/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx
+++ b/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
 import { changeListEditorTitle, submitListEditor } from '../../../actions/lists';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/features/list_editor/components/search.jsx b/app/javascript/mastodon/features/list_editor/components/search.jsx
index f70e272f79..59e4c7d939 100644
--- a/app/javascript/mastodon/features/list_editor/components/search.jsx
+++ b/app/javascript/mastodon/features/list_editor/components/search.jsx
@@ -4,7 +4,7 @@ import { connect } from 'react-redux';
 import { defineMessages, injectIntl } from 'react-intl';
 import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
diff --git a/app/javascript/mastodon/features/list_timeline/index.jsx b/app/javascript/mastodon/features/list_timeline/index.jsx
index 8297c2748d..c93305341a 100644
--- a/app/javascript/mastodon/features/list_timeline/index.jsx
+++ b/app/javascript/mastodon/features/list_timeline/index.jsx
@@ -11,9 +11,9 @@ import { connectListStream } from 'mastodon/actions/streaming';
 import { expandListTimeline } from 'mastodon/actions/timelines';
 import Column from 'mastodon/components/column';
 import ColumnHeader from 'mastodon/components/column_header';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import LoadingIndicator from 'mastodon/components/loading_indicator';
-import RadioButton from 'mastodon/components/radio_button';
+import { RadioButton } from 'mastodon/components/radio_button';
 import StatusListContainer from 'mastodon/features/ui/containers/status_list_container';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 
diff --git a/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx b/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx
index 9a076ce5ed..e043f5ee1e 100644
--- a/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx
+++ b/app/javascript/mastodon/features/notifications/components/clear_column_button.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 export default class ClearColumnButton extends React.PureComponent {
 
diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.jsx b/app/javascript/mastodon/features/notifications/components/filter_bar.jsx
index 88e95cf48f..f16c84f97a 100644
--- a/app/javascript/mastodon/features/notifications/components/filter_bar.jsx
+++ b/app/javascript/mastodon/features/notifications/components/filter_bar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const tooltips = defineMessages({
   mentions: { id: 'notifications.filter.mentions', defaultMessage: 'Mentions' },
diff --git a/app/javascript/mastodon/features/notifications/components/follow_request.jsx b/app/javascript/mastodon/features/notifications/components/follow_request.jsx
index 01bf670650..0d930f0b1f 100644
--- a/app/javascript/mastodon/features/notifications/components/follow_request.jsx
+++ b/app/javascript/mastodon/features/notifications/components/follow_request.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import Avatar from 'mastodon/components/avatar';
+import { Avatar } from 'mastodon/components/avatar';
 import DisplayName from 'mastodon/components/display_name';
 import { Link } from 'react-router-dom';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
diff --git a/app/javascript/mastodon/features/notifications/components/notification.jsx b/app/javascript/mastodon/features/notifications/components/notification.jsx
index f3104cee05..0f1aef8db1 100644
--- a/app/javascript/mastodon/features/notifications/components/notification.jsx
+++ b/app/javascript/mastodon/features/notifications/components/notification.jsx
@@ -9,7 +9,7 @@ import StatusContainer from 'mastodon/containers/status_container';
 import AccountContainer from 'mastodon/containers/account_container';
 import Report from './report';
 import FollowRequestContainer from '../containers/follow_request_container';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { Link } from 'react-router-dom';
 import classNames from 'classnames';
 
diff --git a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx
index c54137e60c..a1b4248e7c 100644
--- a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx
+++ b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import Button from 'mastodon/components/button';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import { requestBrowserPermission } from 'mastodon/actions/notifications';
 import { changeSetting } from 'mastodon/actions/settings';
 import { connect } from 'react-redux';
diff --git a/app/javascript/mastodon/features/notifications/components/report.jsx b/app/javascript/mastodon/features/notifications/components/report.jsx
index a9decdc8e9..1c0e1a7750 100644
--- a/app/javascript/mastodon/features/notifications/components/report.jsx
+++ b/app/javascript/mastodon/features/notifications/components/report.jsx
@@ -3,8 +3,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import AvatarOverlay from 'mastodon/components/avatar_overlay';
-import RelativeTimestamp from 'mastodon/components/relative_timestamp';
+import { AvatarOverlay } from 'mastodon/components/avatar_overlay';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 
 const messages = defineMessages({
   openReport: { id: 'report_notification.open', defaultMessage: 'Open report' },
diff --git a/app/javascript/mastodon/features/notifications/index.jsx b/app/javascript/mastodon/features/notifications/index.jsx
index bb8852abf1..8a31c5db6c 100644
--- a/app/javascript/mastodon/features/notifications/index.jsx
+++ b/app/javascript/mastodon/features/notifications/index.jsx
@@ -23,10 +23,10 @@ import { List as ImmutableList } from 'immutable';
 import { debounce } from 'lodash';
 import ScrollableList from '../../components/scrollable_list';
 import LoadGap from '../../components/load_gap';
-import Icon from 'mastodon/components/icon';
-import compareId from 'mastodon/compare_id';
+import { Icon }  from 'mastodon/components/icon';
+import { compareId } from 'mastodon/compare_id';
 import NotificationsPermissionBanner from './components/notifications_permission_banner';
-import NotSignedInIndicator from 'mastodon/components/not_signed_in_indicator';
+import { NotSignedInIndicator } from 'mastodon/components/not_signed_in_indicator';
 import { Helmet } from 'react-helmet';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx b/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
index 97134c0c9c..7d75e50edb 100644
--- a/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
+++ b/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Check from 'mastodon/components/check';
+import { Check } from 'mastodon/components/check';
 import classNames from 'classnames';
 
 const ProgressIndicator = ({ steps, completed }) => (
@@ -22,4 +22,4 @@ ProgressIndicator.propTypes = {
   completed: PropTypes.number,
 };
 
-export default ProgressIndicator;
\ No newline at end of file
+export default ProgressIndicator;
diff --git a/app/javascript/mastodon/features/onboarding/components/step.jsx b/app/javascript/mastodon/features/onboarding/components/step.jsx
index 6f376e5d55..38e4b564a8 100644
--- a/app/javascript/mastodon/features/onboarding/components/step.jsx
+++ b/app/javascript/mastodon/features/onboarding/components/step.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import Icon from 'mastodon/components/icon';
-import Check from 'mastodon/components/check';
+import { Icon }  from 'mastodon/components/icon';
+import { Check } from 'mastodon/components/check';
 
 const Step = ({ label, description, icon, completed, onClick, href }) => {
   const content = (
@@ -47,4 +47,4 @@ Step.propTypes = {
   onClick: PropTypes.func,
 };
 
-export default Step;
\ No newline at end of file
+export default Step;
diff --git a/app/javascript/mastodon/features/onboarding/share.jsx b/app/javascript/mastodon/features/onboarding/share.jsx
index 9555a3a43a..5f7cfb8a6b 100644
--- a/app/javascript/mastodon/features/onboarding/share.jsx
+++ b/app/javascript/mastodon/features/onboarding/share.jsx
@@ -7,7 +7,7 @@ import { connect } from 'react-redux';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage, FormattedHTMLMessage } from 'react-intl';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import ArrowSmallRight from './components/arrow_small_right';
 import { Link } from 'react-router-dom';
 import SwipeableViews from 'react-swipeable-views';
@@ -190,4 +190,4 @@ class Share extends React.PureComponent {
 
 }
 
-export default connect(mapStateToProps)(injectIntl(Share));
\ No newline at end of file
+export default connect(mapStateToProps)(injectIntl(Share));
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
index 66124f3311..5c60284d65 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
+++ b/app/javascript/mastodon/features/picture_in_picture/components/footer.jsx
@@ -3,7 +3,7 @@ import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import classNames from 'classnames';
 import { me, boostModal } from 'mastodon/initial_state';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/app/javascript/mastodon/features/picture_in_picture/components/header.jsx b/app/javascript/mastodon/features/picture_in_picture/components/header.jsx
index 100f9db7ac..c6d2a103dc 100644
--- a/app/javascript/mastodon/features/picture_in_picture/components/header.jsx
+++ b/app/javascript/mastodon/features/picture_in_picture/components/header.jsx
@@ -3,9 +3,9 @@ import { connect } from 'react-redux';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import PropTypes from 'prop-types';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import { Link } from 'react-router-dom';
-import Avatar from 'mastodon/components/avatar';
+import { Avatar } from 'mastodon/components/avatar';
 import DisplayName from 'mastodon/components/display_name';
 import { defineMessages, injectIntl } from 'react-intl';
 
diff --git a/app/javascript/mastodon/features/reblogs/index.jsx b/app/javascript/mastodon/features/reblogs/index.jsx
index 35edb0d6af..fb503f40f1 100644
--- a/app/javascript/mastodon/features/reblogs/index.jsx
+++ b/app/javascript/mastodon/features/reblogs/index.jsx
@@ -9,7 +9,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import AccountContainer from '../../containers/account_container';
 import Column from '../ui/components/column';
 import ScrollableList from '../../components/scrollable_list';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import ColumnHeader from '../../components/column_header';
 import { Helmet } from 'react-helmet';
 
diff --git a/app/javascript/mastodon/features/report/components/option.jsx b/app/javascript/mastodon/features/report/components/option.jsx
index 342204e22f..34df4d73b3 100644
--- a/app/javascript/mastodon/features/report/components/option.jsx
+++ b/app/javascript/mastodon/features/report/components/option.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Check from 'mastodon/components/check';
+import { Check } from 'mastodon/components/check';
 
 export default class Option extends React.PureComponent {
 
diff --git a/app/javascript/mastodon/features/report/components/status_check_box.jsx b/app/javascript/mastodon/features/report/components/status_check_box.jsx
index 28d572e898..003cdc8e3a 100644
--- a/app/javascript/mastodon/features/report/components/status_check_box.jsx
+++ b/app/javascript/mastodon/features/report/components/status_check_box.jsx
@@ -2,13 +2,13 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import StatusContent from 'mastodon/components/status_content';
-import Avatar from 'mastodon/components/avatar';
+import { Avatar } from 'mastodon/components/avatar';
 import DisplayName from 'mastodon/components/display_name';
-import RelativeTimestamp from 'mastodon/components/relative_timestamp';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import Option from './option';
 import MediaAttachments from 'mastodon/components/media_attachments';
 import { injectIntl, defineMessages } from 'react-intl';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 const messages = defineMessages({
   public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
diff --git a/app/javascript/mastodon/features/status/components/action_bar.jsx b/app/javascript/mastodon/features/status/components/action_bar.jsx
index 0c74c4cc4d..e5b08ff285 100644
--- a/app/javascript/mastodon/features/status/components/action_bar.jsx
+++ b/app/javascript/mastodon/features/status/components/action_bar.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/app/javascript/mastodon/features/status/components/card.jsx b/app/javascript/mastodon/features/status/components/card.jsx
index 88b38c65ad..1d5edfc173 100644
--- a/app/javascript/mastodon/features/status/components/card.jsx
+++ b/app/javascript/mastodon/features/status/components/card.jsx
@@ -5,9 +5,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { FormattedMessage } from 'react-intl';
 import punycode from 'punycode';
 import classnames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { useBlurhash } from 'mastodon/initial_state';
-import Blurhash from 'mastodon/components/blurhash';
+import { Blurhash } from 'mastodon/components/blurhash';
 
 const IDNA_PREFIX = 'xn--';
 
diff --git a/app/javascript/mastodon/features/status/components/detailed_status.jsx b/app/javascript/mastodon/features/status/components/detailed_status.jsx
index e4e5720268..72c9021242 100644
--- a/app/javascript/mastodon/features/status/components/detailed_status.jsx
+++ b/app/javascript/mastodon/features/status/components/detailed_status.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import Avatar from '../../../components/avatar';
+import { Avatar } from '../../../components/avatar';
 import DisplayName from '../../../components/display_name';
 import StatusContent from '../../../components/status_content';
 import MediaGallery from '../../../components/media_gallery';
@@ -13,8 +13,8 @@ import Video from '../../video';
 import Audio from '../../audio';
 import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
-import AnimatedNumber from 'mastodon/components/animated_number';
+import { Icon }  from 'mastodon/components/icon';
+import { AnimatedNumber } from 'mastodon/components/animated_number';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 import EditedTimestamp from 'mastodon/components/edited_timestamp';
 
diff --git a/app/javascript/mastodon/features/status/index.jsx b/app/javascript/mastodon/features/status/index.jsx
index 7f1896aedb..0c0b557487 100644
--- a/app/javascript/mastodon/features/status/index.jsx
+++ b/app/javascript/mastodon/features/status/index.jsx
@@ -58,7 +58,7 @@ import { HotKeys } from 'react-hotkeys';
 import { boostModal, deleteModal } from '../../initial_state';
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import { Helmet } from 'react-helmet';
 import BundleColumnError from 'mastodon/features/ui/components/bundle_column_error';
 
diff --git a/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx b/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx
index 04fe31b5c1..a9dd1e0720 100644
--- a/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx
+++ b/app/javascript/mastodon/features/subscribed_languages_modal/index.jsx
@@ -8,7 +8,7 @@ import { is, List as ImmutableList, Set as ImmutableSet } from 'immutable';
 import { languages as preloadedLanguages } from 'mastodon/initial_state';
 import Option from 'mastodon/features/report/components/option';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import Button from 'mastodon/components/button';
 import { followAccount } from 'mastodon/actions/accounts';
 
diff --git a/app/javascript/mastodon/features/ui/components/actions_modal.jsx b/app/javascript/mastodon/features/ui/components/actions_modal.jsx
index 35090e2426..9d11da6085 100644
--- a/app/javascript/mastodon/features/ui/components/actions_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/actions_modal.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 import classNames from 'classnames';
 
 export default class ActionsModal extends ImmutablePureComponent {
diff --git a/app/javascript/mastodon/features/ui/components/boost_modal.jsx b/app/javascript/mastodon/features/ui/components/boost_modal.jsx
index fe55c963a8..1f28927d60 100644
--- a/app/javascript/mastodon/features/ui/components/boost_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/boost_modal.jsx
@@ -5,11 +5,11 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import Button from '../../../components/button';
 import StatusContent from '../../../components/status_content';
-import Avatar from '../../../components/avatar';
-import RelativeTimestamp from '../../../components/relative_timestamp';
+import { Avatar } from '../../../components/avatar';
+import { RelativeTimestamp } from '../../../components/relative_timestamp';
 import DisplayName from '../../../components/display_name';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import AttachmentList from 'mastodon/components/attachment_list';
 import PrivacyDropdown from 'mastodon/features/compose/components/privacy_dropdown';
 import classNames from 'classnames';
diff --git a/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx b/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx
index d79d0ca4a0..6ddf2ae7ac 100644
--- a/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx
+++ b/app/javascript/mastodon/features/ui/components/bundle_modal_error.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 
-import IconButton from '../../../components/icon_button';
+import { IconButton } from '../../../components/icon_button';
 
 const messages = defineMessages({
   error: { id: 'bundle_modal_error.message', defaultMessage: 'Something went wrong while loading this component.' },
diff --git a/app/javascript/mastodon/features/ui/components/column_header.jsx b/app/javascript/mastodon/features/ui/components/column_header.jsx
index 4ceef59570..a2d3a38710 100644
--- a/app/javascript/mastodon/features/ui/components/column_header.jsx
+++ b/app/javascript/mastodon/features/ui/components/column_header.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 
 export default class ColumnHeader extends React.PureComponent {
 
diff --git a/app/javascript/mastodon/features/ui/components/column_link.jsx b/app/javascript/mastodon/features/ui/components/column_link.jsx
index 8eebbf5260..4e9164afb7 100644
--- a/app/javascript/mastodon/features/ui/components/column_link.jsx
+++ b/app/javascript/mastodon/features/ui/components/column_link.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
-import Icon from 'mastodon/components/icon';
+import { Icon }  from 'mastodon/components/icon';
 import classNames from 'classnames';
 
 const ColumnLink = ({ icon, text, to, href, method, badge, transparent, ...other }) => {
diff --git a/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx b/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
index 1802c167c1..8e4c4d1368 100644
--- a/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/compare_history_modal.jsx
@@ -7,8 +7,8 @@ import { closeModal } from 'mastodon/actions/modal';
 import emojify from 'mastodon/features/emoji/emoji';
 import escapeTextContentForBrowser from 'escape-html';
 import InlineAccount from 'mastodon/components/inline_account';
-import IconButton from 'mastodon/components/icon_button';
-import RelativeTimestamp from 'mastodon/components/relative_timestamp';
+import { IconButton } from 'mastodon/components/icon_button';
+import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import MediaAttachments from 'mastodon/components/media_attachments';
 
 const mapStateToProps = (state, { statusId }) => ({
diff --git a/app/javascript/mastodon/features/ui/components/embed_modal.jsx b/app/javascript/mastodon/features/ui/components/embed_modal.jsx
index baf6be411f..3e0bcc93cb 100644
--- a/app/javascript/mastodon/features/ui/components/embed_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/embed_modal.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import api from 'mastodon/api';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
diff --git a/app/javascript/mastodon/features/ui/components/filter_modal.jsx b/app/javascript/mastodon/features/ui/components/filter_modal.jsx
index 8d77fb3dfe..473fe4b360 100644
--- a/app/javascript/mastodon/features/ui/components/filter_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/filter_modal.jsx
@@ -5,7 +5,7 @@ import { fetchFilters, createFilter, createFilterStatus } from 'mastodon/actions
 import PropTypes from 'prop-types';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import SelectFilter from 'mastodon/features/filters/select_filter';
 import AddedToFilter from 'mastodon/features/filters/added_to_filter';
 
diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
index 2a1e4c8bbc..eda550b04d 100644
--- a/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.jsx
@@ -7,7 +7,7 @@ import classNames from 'classnames';
 import { changeUploadCompose, uploadThumbnail, onChangeMediaDescription, onChangeMediaFocus } from '../../../actions/compose';
 import { getPointerPosition } from '../../video';
 import { FormattedMessage, defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import Button from 'mastodon/components/button';
 import Video from 'mastodon/features/video';
 import Audio from 'mastodon/features/audio';
@@ -16,7 +16,7 @@ import UploadProgress from 'mastodon/features/compose/components/upload_progress
 import CharacterCounter from 'mastodon/features/compose/components/character_counter';
 import { length } from 'stringz';
 import { Tesseract as fetchTesseract } from 'mastodon/features/ui/util/async-components';
-import GIFV from 'mastodon/components/gifv';
+import { GIFV } from 'mastodon/components/gifv';
 import { me } from 'mastodon/initial_state';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import tesseractCorePath from 'tesseract.js-core/tesseract-core.wasm.js';
diff --git a/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx
index 1cd1b79bce..9c8ebd13cd 100644
--- a/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx
+++ b/app/javascript/mastodon/features/ui/components/follow_requests_column_link.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { fetchFollowRequests } from 'mastodon/actions/accounts';
 import { connect } from 'react-redux';
 import ColumnLink from 'mastodon/features/ui/components/column_link';
-import IconWithBadge from 'mastodon/components/icon_with_badge';
+import { IconWithBadge } from 'mastodon/components/icon_with_badge';
 import { List as ImmutableList } from 'immutable';
 import { injectIntl, defineMessages } from 'react-intl';
 
diff --git a/app/javascript/mastodon/features/ui/components/header.jsx b/app/javascript/mastodon/features/ui/components/header.jsx
index a4def456b4..af18ac3310 100644
--- a/app/javascript/mastodon/features/ui/components/header.jsx
+++ b/app/javascript/mastodon/features/ui/components/header.jsx
@@ -3,7 +3,7 @@ import { WordmarkLogo, SymbolLogo } from 'mastodon/components/logo';
 import { Link, withRouter } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
 import { registrationsOpen, me } from 'mastodon/initial_state';
-import Avatar from 'mastodon/components/avatar';
+import { Avatar } from 'mastodon/components/avatar';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { openModal } from 'mastodon/actions/modal';
diff --git a/app/javascript/mastodon/features/ui/components/image_modal.jsx b/app/javascript/mastodon/features/ui/components/image_modal.jsx
index ca93d7b4ed..31c5ab37ad 100644
--- a/app/javascript/mastodon/features/ui/components/image_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/image_modal.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import ImageLoader from './image_loader';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.jsx b/app/javascript/mastodon/features/ui/components/media_modal.jsx
index ec6ddc0e11..e8293c2e78 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/media_modal.jsx
@@ -6,11 +6,11 @@ import Video from 'mastodon/features/video';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
 import { defineMessages, injectIntl } from 'react-intl';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import ImageLoader from './image_loader';
-import Icon from 'mastodon/components/icon';
-import GIFV from 'mastodon/components/gifv';
+import { Icon }  from 'mastodon/components/icon';
+import { GIFV } from 'mastodon/components/gifv';
 import { disableSwiping } from 'mastodon/initial_state';
 import Footer from 'mastodon/features/picture_in_picture/components/footer';
 import { getAverageFromBlurhash } from 'mastodon/blurhash';
diff --git a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
index da553cd9f0..7ef251603c 100644
--- a/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
+++ b/app/javascript/mastodon/features/ui/components/notifications_counter_icon.js
@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import IconWithBadge from 'mastodon/components/icon_with_badge';
+import { IconWithBadge } from 'mastodon/components/icon_with_badge';
 
 const mapStateToProps = state => ({
   count: state.getIn(['notifications', 'unread']),
diff --git a/app/javascript/mastodon/features/ui/components/report_modal.jsx b/app/javascript/mastodon/features/ui/components/report_modal.jsx
index 8b505b8bd8..f3ada9c07b 100644
--- a/app/javascript/mastodon/features/ui/components/report_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/report_modal.jsx
@@ -9,7 +9,7 @@ import { makeGetAccount } from 'mastodon/selectors';
 import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { OrderedSet } from 'immutable';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import Category from 'mastodon/features/report/category';
 import Statuses from 'mastodon/features/report/statuses';
 import Rules from 'mastodon/features/report/rules';
diff --git a/app/javascript/mastodon/features/ui/components/zoomable_image.jsx b/app/javascript/mastodon/features/ui/components/zoomable_image.jsx
index b41d0fe316..49be6d5c3b 100644
--- a/app/javascript/mastodon/features/ui/components/zoomable_image.jsx
+++ b/app/javascript/mastodon/features/ui/components/zoomable_image.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import IconButton from 'mastodon/components/icon_button';
+import { IconButton } from 'mastodon/components/icon_button';
 import { defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx
index d76d34546b..8b57cf3d10 100644
--- a/app/javascript/mastodon/features/video/index.jsx
+++ b/app/javascript/mastodon/features/video/index.jsx
@@ -6,8 +6,8 @@ import { throttle } from 'lodash';
 import classNames from 'classnames';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 import { displayMedia, useBlurhash } from '../../initial_state';
-import Icon from 'mastodon/components/icon';
-import Blurhash from 'mastodon/components/blurhash';
+import { Icon }  from 'mastodon/components/icon';
+import { Blurhash } from 'mastodon/components/blurhash';
 
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
diff --git a/app/javascript/mastodon/is_mobile.ts b/app/javascript/mastodon/is_mobile.ts
index 43819f85db..b2918eb4bf 100644
--- a/app/javascript/mastodon/is_mobile.ts
+++ b/app/javascript/mastodon/is_mobile.ts
@@ -16,10 +16,6 @@ export const layoutFromWindow = (): LayoutType => {
   }
 };
 
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
-const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && window.MSStream != null;
-
 const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
 
 let userTouching = false;
@@ -33,5 +29,3 @@ const touchListener = () => {
 window.addEventListener('touchstart', touchListener, listenerOptions);
 
 export const isUserTouching = () => userTouching;
-
-export const isIOS = () => iOS;
diff --git a/app/javascript/mastodon/main.jsx b/app/javascript/mastodon/main.jsx
index 88a205dd24..c5960477db 100644
--- a/app/javascript/mastodon/main.jsx
+++ b/app/javascript/mastodon/main.jsx
@@ -2,11 +2,10 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { setupBrowserNotifications } from 'mastodon/actions/notifications';
 import Mastodon from 'mastodon/containers/mastodon';
-import { store } from 'mastodon/store/configureStore';
+import { store } from 'mastodon/store';
 import { me } from 'mastodon/initial_state';
 import ready from 'mastodon/ready';
-
-const perf = require('mastodon/performance');
+import * as perf from 'mastodon/performance';
 
 /**
  * @returns {Promise<void>}
diff --git a/app/javascript/mastodon/middleware/loading_bar.js b/app/javascript/mastodon/middleware/loading_bar.js
deleted file mode 100644
index da8cc4c7d3..0000000000
--- a/app/javascript/mastodon/middleware/loading_bar.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { showLoading, hideLoading } from 'react-redux-loading-bar';
-
-const defaultTypeSuffixes = ['PENDING', 'FULFILLED', 'REJECTED'];
-
-export default function loadingBarMiddleware(config = {}) {
-  const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
-
-  return ({ dispatch }) => next => (action) => {
-    if (action.type && !action.skipLoading) {
-      const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;
-
-      const isPending = new RegExp(`${PENDING}$`, 'g');
-      const isFulfilled = new RegExp(`${FULFILLED}$`, 'g');
-      const isRejected = new RegExp(`${REJECTED}$`, 'g');
-
-      if (action.type.match(isPending)) {
-        dispatch(showLoading());
-      } else if (action.type.match(isFulfilled) || action.type.match(isRejected)) {
-        dispatch(hideLoading());
-      }
-    }
-
-    return next(action);
-  };
-}
diff --git a/app/javascript/mastodon/performance.js b/app/javascript/mastodon/performance.js
index 95cf962d6b..42849c82b1 100644
--- a/app/javascript/mastodon/performance.js
+++ b/app/javascript/mastodon/performance.js
@@ -2,9 +2,8 @@
 // Tools for performance debugging, only enabled in development mode.
 // Open up Chrome Dev Tools, then Timeline, then User Timing to see output.
 // Also see config/webpack/loaders/mark.js for the webpack loader marks.
-//
 
-let marky;
+import * as marky from 'marky';
 
 if (process.env.NODE_ENV === 'development') {
   if (typeof performance !== 'undefined' && performance.setResourceTimingBufferSize) {
@@ -13,7 +12,6 @@ if (process.env.NODE_ENV === 'development') {
     performance.setResourceTimingBufferSize(Infinity);
   }
 
-  marky = require('marky');
   // allows us to easily do e.g. ReactPerf.printWasted() while debugging
   //window.ReactPerf = require('react-addons-perf');
   //window.ReactPerf.start();
diff --git a/app/javascript/mastodon/permissions.ts b/app/javascript/mastodon/permissions.ts
index 9ea149e5f8..b583535c00 100644
--- a/app/javascript/mastodon/permissions.ts
+++ b/app/javascript/mastodon/permissions.ts
@@ -1,4 +1,4 @@
-export const PERMISSION_INVITE_USERS      = 0x0000000000010000;
-export const PERMISSION_MANAGE_USERS      = 0x0000000000000400;
+export const PERMISSION_INVITE_USERS = 0x0000000000010000;
+export const PERMISSION_MANAGE_USERS = 0x0000000000000400;
 export const PERMISSION_MANAGE_FEDERATION = 0x0000000000000020;
-export const PERMISSION_MANAGE_REPORTS    = 0x0000000000000010;
+export const PERMISSION_MANAGE_REPORTS = 0x0000000000000010;
diff --git a/app/javascript/mastodon/base_polyfills.js b/app/javascript/mastodon/polyfills/base_polyfills.ts
similarity index 58%
rename from app/javascript/mastodon/base_polyfills.js
rename to app/javascript/mastodon/polyfills/base_polyfills.ts
index 91bc5d6dc8..64211c11e9 100644
--- a/app/javascript/mastodon/base_polyfills.js
+++ b/app/javascript/mastodon/polyfills/base_polyfills.ts
@@ -1,26 +1,16 @@
 import 'intl';
 import 'intl/locale-data/jsonp/en';
-import 'es6-symbol/implement';
-import assign from 'object-assign';
-import values from 'object.values';
-import { decode as decodeBase64 } from './utils/base64';
-import promiseFinally from 'promise.prototype.finally';
-
-if (!Object.assign) {
-  Object.assign = assign;
-}
-
-if (!Object.values) {
-  values.shim();
-}
-
-promiseFinally.shim();
+import 'core-js/features/object/assign';
+import 'core-js/features/object/values';
+import 'core-js/features/symbol';
+import 'core-js/features/promise/finally';
+import { decode as decodeBase64 } from '../utils/base64';
 
 if (!HTMLCanvasElement.prototype.toBlob) {
   const BASE64_MARKER = ';base64,';
 
   Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-    value(callback, type = 'image/png', quality) {
+    value(callback: BlobCallback, type = 'image/png', quality: any) {
       const dataURL = this.toDataURL(type, quality);
       let data;
 
diff --git a/app/javascript/mastodon/extra_polyfills.js b/app/javascript/mastodon/polyfills/extra_polyfills.ts
similarity index 100%
rename from app/javascript/mastodon/extra_polyfills.js
rename to app/javascript/mastodon/polyfills/extra_polyfills.ts
diff --git a/app/javascript/mastodon/load_polyfills.js b/app/javascript/mastodon/polyfills/index.ts
similarity index 82%
rename from app/javascript/mastodon/load_polyfills.js
rename to app/javascript/mastodon/polyfills/index.ts
index 7909dc4ea3..6d2e5426e4 100644
--- a/app/javascript/mastodon/load_polyfills.js
+++ b/app/javascript/mastodon/polyfills/index.ts
@@ -10,14 +10,14 @@ function importExtraPolyfills() {
   return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills');
 }
 
-function loadPolyfills() {
+export function loadPolyfills() {
   const needsBasePolyfills = !(
-    HTMLCanvasElement.prototype.toBlob &&
-    window.Intl &&
-    Object.assign &&
-    Object.values &&
-    window.Symbol &&
-    Promise.prototype.finally
+    'toBlob' in HTMLCanvasElement.prototype &&
+    'Intl' in window &&
+    'assign' in Object &&
+    'values' in Object &&
+    'Symbol' in window &&
+    'finally' in Promise.prototype
   );
 
   // Latest version of Firefox and Safari do not have IntersectionObserver.
@@ -36,5 +36,3 @@ function loadPolyfills() {
     needsExtraPolyfills && importExtraPolyfills(),
   ]);
 }
-
-export default loadPolyfills;
diff --git a/app/javascript/mastodon/reducers/compose.js b/app/javascript/mastodon/reducers/compose.js
index 65f439e03c..3e750c4cfa 100644
--- a/app/javascript/mastodon/reducers/compose.js
+++ b/app/javascript/mastodon/reducers/compose.js
@@ -52,7 +52,7 @@ import { TIMELINE_DELETE } from '../actions/timelines';
 import { STORE_HYDRATE } from '../actions/store';
 import { REDRAFT } from '../actions/statuses';
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
-import uuid from '../uuid';
+import { uuid } from '../uuid';
 import { me } from '../initial_state';
 import { unescapeHTML } from '../utils/html';
 
diff --git a/app/javascript/mastodon/reducers/contexts.js b/app/javascript/mastodon/reducers/contexts.js
index 7aa95b5d50..8772e175ea 100644
--- a/app/javascript/mastodon/reducers/contexts.js
+++ b/app/javascript/mastodon/reducers/contexts.js
@@ -5,7 +5,7 @@ import {
 import { CONTEXT_FETCH_SUCCESS } from '../actions/statuses';
 import { TIMELINE_DELETE, TIMELINE_UPDATE } from '../actions/timelines';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap({
   inReplyTos: ImmutableMap(),
diff --git a/app/javascript/mastodon/reducers/conversations.js b/app/javascript/mastodon/reducers/conversations.js
index feccf18f03..942c6941b6 100644
--- a/app/javascript/mastodon/reducers/conversations.js
+++ b/app/javascript/mastodon/reducers/conversations.js
@@ -11,7 +11,7 @@ import {
 } from '../actions/conversations';
 import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'mastodon/actions/accounts';
 import { DOMAIN_BLOCK_SUCCESS } from 'mastodon/actions/domain_blocks';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap({
   items: ImmutableList(),
diff --git a/app/javascript/mastodon/reducers/index.js b/app/javascript/mastodon/reducers/index.ts
similarity index 92%
rename from app/javascript/mastodon/reducers/index.js
rename to app/javascript/mastodon/reducers/index.ts
index 69771ad1b3..518d8cd792 100644
--- a/app/javascript/mastodon/reducers/index.js
+++ b/app/javascript/mastodon/reducers/index.ts
@@ -33,7 +33,7 @@ import conversations from './conversations';
 import suggestions from './suggestions';
 import polls from './polls';
 import trends from './trends';
-import missed_updates from './missed_updates';
+import { missedUpdatesReducer } from './missed_updates';
 import announcements from './announcements';
 import markers from './markers';
 import picture_in_picture from './picture_in_picture';
@@ -79,7 +79,7 @@ const reducers = {
   suggestions,
   polls,
   trends,
-  missed_updates,
+  missed_updates: missedUpdatesReducer,
   markers,
   picture_in_picture,
   history,
@@ -87,4 +87,6 @@ const reducers = {
   followed_tags,
 };
 
-export default combineReducers(reducers);
+const rootReducer = combineReducers(reducers);
+
+export { rootReducer };
diff --git a/app/javascript/mastodon/reducers/missed_updates.ts b/app/javascript/mastodon/reducers/missed_updates.ts
index 043fe93faf..9c1a5cbd26 100644
--- a/app/javascript/mastodon/reducers/missed_updates.ts
+++ b/app/javascript/mastodon/reducers/missed_updates.ts
@@ -12,20 +12,20 @@ const initialState = Record<MissedUpdatesState>({
   unread: 0,
 })();
 
-export default function missed_updates(
+export function missedUpdatesReducer(
   state = initialState,
-  action: Action<string>,
+  action: Action<string>
 ) {
   switch (action.type) {
-  case focusApp.type:
-    return state.set('focused', true).set('unread', 0);
-  case unfocusApp.type:
-    return state.set('focused', false);
-  case NOTIFICATIONS_UPDATE:
-    return state.get('focused')
-      ? state
-      : state.update('unread', (x) => x + 1);
-  default:
-    return state;
+    case focusApp.type:
+      return state.set('focused', true).set('unread', 0);
+    case unfocusApp.type:
+      return state.set('focused', false);
+    case NOTIFICATIONS_UPDATE:
+      return state.get('focused')
+        ? state
+        : state.update('unread', (x) => x + 1);
+    default:
+      return state;
   }
 }
diff --git a/app/javascript/mastodon/reducers/notifications.js b/app/javascript/mastodon/reducers/notifications.js
index 0530a52b4c..77e64284b1 100644
--- a/app/javascript/mastodon/reducers/notifications.js
+++ b/app/javascript/mastodon/reducers/notifications.js
@@ -29,7 +29,7 @@ import {
 import { DOMAIN_BLOCK_SUCCESS } from 'mastodon/actions/domain_blocks';
 import { TIMELINE_DELETE, TIMELINE_DISCONNECT } from '../actions/timelines';
 import { fromJS, Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap({
   pendingItems: ImmutableList(),
diff --git a/app/javascript/mastodon/reducers/settings.js b/app/javascript/mastodon/reducers/settings.js
index f48d58bdc5..c8fdf1bc86 100644
--- a/app/javascript/mastodon/reducers/settings.js
+++ b/app/javascript/mastodon/reducers/settings.js
@@ -6,7 +6,7 @@ import { EMOJI_USE } from '../actions/emojis';
 import { LANGUAGE_USE } from '../actions/languages';
 import { LIST_DELETE_SUCCESS, LIST_FETCH_FAIL } from '../actions/lists';
 import { Map as ImmutableMap, fromJS } from 'immutable';
-import uuid from '../uuid';
+import { uuid } from '../uuid';
 
 const initialState = ImmutableMap({
   saved: true,
diff --git a/app/javascript/mastodon/reducers/timelines.js b/app/javascript/mastodon/reducers/timelines.js
index 973e3cf184..41892ae462 100644
--- a/app/javascript/mastodon/reducers/timelines.js
+++ b/app/javascript/mastodon/reducers/timelines.js
@@ -17,7 +17,7 @@ import {
   ACCOUNT_UNFOLLOW_SUCCESS,
 } from '../actions/accounts';
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
-import compareId from '../compare_id';
+import { compareId } from '../compare_id';
 
 const initialState = ImmutableMap();
 
diff --git a/app/javascript/mastodon/scroll.ts b/app/javascript/mastodon/scroll.ts
index 1e509c4175..625aab0c04 100644
--- a/app/javascript/mastodon/scroll.ts
+++ b/app/javascript/mastodon/scroll.ts
@@ -1,13 +1,23 @@
-const easingOutQuint = (x: number, t: number, b: number, c: number, d: number) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
-const scroll = (node: Element, key: 'scrollTop' | 'scrollLeft', target: number) => {
+const easingOutQuint = (
+  x: number,
+  t: number,
+  b: number,
+  c: number,
+  d: number
+) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+const scroll = (
+  node: Element,
+  key: 'scrollTop' | 'scrollLeft',
+  target: number
+) => {
   const startTime = Date.now();
-  const offset    = node[key];
-  const gap       = target - offset;
-  const duration  = 1000;
-  let interrupt   = false;
+  const offset = node[key];
+  const gap = target - offset;
+  const duration = 1000;
+  let interrupt = false;
 
   const step = () => {
-    const elapsed    = Date.now() - startTime;
+    const elapsed = Date.now() - startTime;
     const percentage = elapsed / duration;
 
     if (percentage > 1 || interrupt) {
@@ -25,7 +35,14 @@ const scroll = (node: Element, key: 'scrollTop' | 'scrollLeft', target: number)
   };
 };
 
-const isScrollBehaviorSupported = 'scrollBehavior' in document.documentElement.style;
+const isScrollBehaviorSupported =
+  'scrollBehavior' in document.documentElement.style;
 
-export const scrollRight = (node: Element, position: number) => isScrollBehaviorSupported ? node.scrollTo({ left: position, behavior: 'smooth' }) : scroll(node, 'scrollLeft', position);
-export const scrollTop = (node: Element) => isScrollBehaviorSupported ? node.scrollTo({ top: 0, behavior: 'smooth' }) : scroll(node, 'scrollTop', 0);
+export const scrollRight = (node: Element, position: number) =>
+  isScrollBehaviorSupported
+    ? node.scrollTo({ left: position, behavior: 'smooth' })
+    : scroll(node, 'scrollLeft', position);
+export const scrollTop = (node: Element) =>
+  isScrollBehaviorSupported
+    ? node.scrollTo({ top: 0, behavior: 'smooth' })
+    : scroll(node, 'scrollTop', 0);
diff --git a/app/javascript/mastodon/service_worker/web_push_locales.js b/app/javascript/mastodon/service_worker/web_push_locales.js
index 7d713cd378..3912f75c7d 100644
--- a/app/javascript/mastodon/service_worker/web_push_locales.js
+++ b/app/javascript/mastodon/service_worker/web_push_locales.js
@@ -1,3 +1,6 @@
+/* eslint-disable import/no-commonjs --
+   We need to use CommonJS here as its imported into a preval file (`emoji_compressed.js`) */
+
 /* @preval */
 
 const fs   = require('fs');
diff --git a/app/javascript/mastodon/store/configureStore.js b/app/javascript/mastodon/store/configureStore.js
deleted file mode 100644
index cb17dd9ce8..0000000000
--- a/app/javascript/mastodon/store/configureStore.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { configureStore } from '@reduxjs/toolkit';
-import thunk from 'redux-thunk';
-import appReducer from '../reducers';
-import loadingBarMiddleware from '../middleware/loading_bar';
-import errorsMiddleware from '../middleware/errors';
-import soundsMiddleware from '../middleware/sounds';
-
-export const store = configureStore({
-  reducer: appReducer,
-  middleware: [
-    thunk,
-    loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }),
-    errorsMiddleware(),
-    soundsMiddleware(),
-  ],
-});
diff --git a/app/javascript/mastodon/store/index.ts b/app/javascript/mastodon/store/index.ts
new file mode 100644
index 0000000000..6c3e963d9e
--- /dev/null
+++ b/app/javascript/mastodon/store/index.ts
@@ -0,0 +1,27 @@
+import { configureStore } from '@reduxjs/toolkit';
+import { rootReducer } from '../reducers';
+import { loadingBarMiddleware } from './middlewares/loading_bar';
+import { errorsMiddleware } from './middlewares/errors';
+import { soundsMiddleware } from './middlewares/sounds';
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+
+export const store = configureStore({
+  reducer: rootReducer,
+  middleware: (getDefaultMiddleware) =>
+    getDefaultMiddleware()
+      .concat(
+        loadingBarMiddleware({
+          promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'],
+        })
+      )
+      .concat(errorsMiddleware)
+      .concat(soundsMiddleware()),
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof rootReducer>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
+
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/app/javascript/mastodon/middleware/errors.js b/app/javascript/mastodon/store/middlewares/errors.ts
similarity index 54%
rename from app/javascript/mastodon/middleware/errors.js
rename to app/javascript/mastodon/store/middlewares/errors.ts
index 708df6bb8d..a5e99d04e6 100644
--- a/app/javascript/mastodon/middleware/errors.js
+++ b/app/javascript/mastodon/store/middlewares/errors.ts
@@ -1,9 +1,13 @@
-import { showAlertForError } from '../actions/alerts';
+import { Middleware } from 'redux';
+import { showAlertForError } from '../../actions/alerts';
+import { RootState } from '..';
 
 const defaultFailSuffix = 'FAIL';
 
-export default function errorsMiddleware() {
-  return ({ dispatch }) => next => action => {
+export const errorsMiddleware: Middleware<Record<string, never>, RootState> =
+  ({ dispatch }) =>
+  (next) =>
+  (action) => {
     if (action.type && !action.skipAlert) {
       const isFail = new RegExp(`${defaultFailSuffix}$`, 'g');
 
@@ -14,4 +18,3 @@ export default function errorsMiddleware() {
 
     return next(action);
   };
-}
diff --git a/app/javascript/mastodon/store/middlewares/loading_bar.ts b/app/javascript/mastodon/store/middlewares/loading_bar.ts
new file mode 100644
index 0000000000..183c0cf9d6
--- /dev/null
+++ b/app/javascript/mastodon/store/middlewares/loading_bar.ts
@@ -0,0 +1,42 @@
+import { showLoading, hideLoading } from 'react-redux-loading-bar';
+import { Middleware } from 'redux';
+import { RootState } from '..';
+
+interface Config {
+  promiseTypeSuffixes?: string[];
+}
+
+const defaultTypeSuffixes: Config['promiseTypeSuffixes'] = [
+  'PENDING',
+  'FULFILLED',
+  'REJECTED',
+];
+
+export const loadingBarMiddleware = (
+  config: Config = {}
+): Middleware<Record<string, never>, RootState> => {
+  const promiseTypeSuffixes = config.promiseTypeSuffixes || defaultTypeSuffixes;
+
+  return ({ dispatch }) =>
+    (next) =>
+    (action) => {
+      if (action.type && !action.skipLoading) {
+        const [PENDING, FULFILLED, REJECTED] = promiseTypeSuffixes;
+
+        const isPending = new RegExp(`${PENDING}$`, 'g');
+        const isFulfilled = new RegExp(`${FULFILLED}$`, 'g');
+        const isRejected = new RegExp(`${REJECTED}$`, 'g');
+
+        if (action.type.match(isPending)) {
+          dispatch(showLoading());
+        } else if (
+          action.type.match(isFulfilled) ||
+          action.type.match(isRejected)
+        ) {
+          dispatch(hideLoading());
+        }
+      }
+
+      return next(action);
+    };
+};
diff --git a/app/javascript/flavours/glitch/middleware/sounds.js b/app/javascript/mastodon/store/middlewares/sounds.ts
similarity index 54%
rename from app/javascript/flavours/glitch/middleware/sounds.js
rename to app/javascript/mastodon/store/middlewares/sounds.ts
index 7f23889836..e7c87df7ec 100644
--- a/app/javascript/flavours/glitch/middleware/sounds.js
+++ b/app/javascript/mastodon/store/middlewares/sounds.ts
@@ -1,4 +1,12 @@
-const createAudio = sources => {
+import { Middleware, AnyAction } from 'redux';
+import { RootState } from '..';
+
+interface AudioSource {
+  src: string;
+  type: string;
+}
+
+const createAudio = (sources: AudioSource[]) => {
   const audio = new Audio();
   sources.forEach(({ type, src }) => {
     const source = document.createElement('source');
@@ -9,7 +17,7 @@ const createAudio = sources => {
   return audio;
 };
 
-const play = audio => {
+const play = (audio: HTMLAudioElement) => {
   if (!audio.paused) {
     audio.pause();
     if (typeof audio.fastSeek === 'function') {
@@ -22,8 +30,11 @@ const play = audio => {
   audio.play();
 };
 
-export default function soundsMiddleware() {
-  const soundCache = {
+export const soundsMiddleware = (): Middleware<
+  Record<string, never>,
+  RootState
+> => {
+  const soundCache: { [key: string]: HTMLAudioElement } = {
     boop: createAudio([
       {
         src: '/sounds/boop.ogg',
@@ -36,11 +47,13 @@ export default function soundsMiddleware() {
     ]),
   };
 
-  return () => next => action => {
-    if (action.meta && action.meta.sound && soundCache[action.meta.sound]) {
-      play(soundCache[action.meta.sound]);
+  return () => (next) => (action: AnyAction) => {
+    const sound = action?.meta?.sound;
+
+    if (sound && soundCache[sound]) {
+      play(soundCache[sound]);
     }
 
     return next(action);
   };
-}
+};
diff --git a/app/javascript/mastodon/utils/filters.ts b/app/javascript/mastodon/utils/filters.ts
index 5af2aa96a4..e5c6422e0a 100644
--- a/app/javascript/mastodon/utils/filters.ts
+++ b/app/javascript/mastodon/utils/filters.ts
@@ -1,16 +1,16 @@
 export const toServerSideType = (columnType: string) => {
   switch (columnType) {
-  case 'home':
-  case 'notifications':
-  case 'public':
-  case 'thread':
-  case 'account':
-    return columnType;
-  default:
-    if (columnType.indexOf('list:') > -1) {
-      return 'home';
-    } else {
-      return 'public'; // community, account, hashtag
-    }
+    case 'home':
+    case 'notifications':
+    case 'public':
+    case 'thread':
+    case 'account':
+      return columnType;
+    default:
+      if (columnType.indexOf('list:') > -1) {
+        return 'home';
+      } else {
+        return 'public'; // community, account, hashtag
+      }
   }
 };
diff --git a/app/javascript/mastodon/utils/hashtags.ts b/app/javascript/mastodon/utils/hashtags.ts
index 358ce37f54..4c76cd7ded 100644
--- a/app/javascript/mastodon/utils/hashtags.ts
+++ b/app/javascript/mastodon/utils/hashtags.ts
@@ -5,17 +5,8 @@ const WORD = '\\p{L}\\p{M}\\p{N}\\p{Pc}';
 const buildHashtagPatternRegex = () => {
   try {
     return new RegExp(
-      '(?:^|[^\\/\\)\\w])#((' +
-      '[' + WORD + '_]' +
-      '[' + WORD + HASHTAG_SEPARATORS + ']*' +
-      '[' + ALPHA + HASHTAG_SEPARATORS + ']' +
-      '[' + WORD + HASHTAG_SEPARATORS +']*' +
-      '[' + WORD + '_]' +
-      ')|(' +
-      '[' + WORD + '_]*' +
-      '[' + ALPHA + ']' +
-      '[' + WORD + '_]*' +
-      '))', 'iu',
+      `(?:^|[^\\/\\)\\w])#(([${WORD}_][${WORD}${HASHTAG_SEPARATORS}]*[${ALPHA}${HASHTAG_SEPARATORS}][${WORD}${HASHTAG_SEPARATORS}]*[${WORD}_])|([${WORD}_]*[${ALPHA}][${WORD}_]*))`,
+      'iu'
     );
   } catch {
     return /(?:^|[^/)\w])#(\w*[a-zA-Z·]\w*)/i;
@@ -25,17 +16,8 @@ const buildHashtagPatternRegex = () => {
 const buildHashtagRegex = () => {
   try {
     return new RegExp(
-      '^((' +
-      '[' + WORD + '_]' +
-      '[' + WORD + HASHTAG_SEPARATORS + ']*' +
-      '[' + ALPHA + HASHTAG_SEPARATORS + ']' +
-      '[' + WORD + HASHTAG_SEPARATORS +']*' +
-      '[' + WORD + '_]' +
-      ')|(' +
-      '[' + WORD + '_]*' +
-      '[' + ALPHA + ']' +
-      '[' + WORD + '_]*' +
-      '))$', 'iu',
+      `^(([${WORD}_][${WORD}${HASHTAG_SEPARATORS}]*[${ALPHA}${HASHTAG_SEPARATORS}][${WORD}${HASHTAG_SEPARATORS}]*[${WORD}_])|([${WORD}_]*[${ALPHA}][${WORD}_]*))$`,
+      'iu'
     );
   } catch {
     return /^(\w*[a-zA-Z·]\w*)$/i;
diff --git a/app/javascript/mastodon/utils/numbers.ts b/app/javascript/mastodon/utils/numbers.ts
index 35af8a973c..a4a028c30e 100644
--- a/app/javascript/mastodon/utils/numbers.ts
+++ b/app/javascript/mastodon/utils/numbers.ts
@@ -21,7 +21,7 @@ const TEN_MILLIONS = DECIMAL_UNITS.MILLION * 10;
  * shortNumber(5936);
  * // => [5.936, 1000, 1]
  */
-export type ShortNumber = [number, DecimalUnits, 0 | 1] // Array of: shorten number, unit of shorten number and maximum fraction digits
+export type ShortNumber = [number, DecimalUnits, 0 | 1]; // Array of: shorten number, unit of shorten number and maximum fraction digits
 export function toShortNumber(sourceNumber: number): ShortNumber {
   if (sourceNumber < DECIMAL_UNITS.THOUSAND) {
     return [sourceNumber, DECIMAL_UNITS.ONE, 0];
@@ -38,11 +38,7 @@ export function toShortNumber(sourceNumber: number): ShortNumber {
       sourceNumber < TEN_MILLIONS ? 1 : 0,
     ];
   } else if (sourceNumber < DECIMAL_UNITS.TRILLION) {
-    return [
-      sourceNumber / DECIMAL_UNITS.BILLION,
-      DECIMAL_UNITS.BILLION,
-      0,
-    ];
+    return [sourceNumber / DECIMAL_UNITS.BILLION, DECIMAL_UNITS.BILLION, 0];
   }
 
   return [sourceNumber, DECIMAL_UNITS.ONE, 0];
@@ -56,7 +52,10 @@ export function toShortNumber(sourceNumber: number): ShortNumber {
  * pluralReady(1793, DECIMAL_UNITS.THOUSAND)
  * // => 1790
  */
-export function pluralReady(sourceNumber: number, division: DecimalUnits): number {
+export function pluralReady(
+  sourceNumber: number,
+  division: DecimalUnits
+): number {
   if (division == null || division < DECIMAL_UNITS.HUNDRED) {
     return sourceNumber;
   }
diff --git a/app/javascript/mastodon/uuid.ts b/app/javascript/mastodon/uuid.ts
index 01b57ee996..6cadbd6bb0 100644
--- a/app/javascript/mastodon/uuid.ts
+++ b/app/javascript/mastodon/uuid.ts
@@ -1,8 +1,8 @@
-export default function uuid(a?: string): string {
+export function uuid(a?: string): string {
   return a
     ? (
-      (a as any as number) ^
+        (a as any as number) ^
         ((Math.random() * 16) >> ((a as any as number) / 4))
-    ).toString(16)
+      ).toString(16)
     : ('' + 1e7 + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, uuid);
 }
diff --git a/app/javascript/packs/admin.jsx b/app/javascript/packs/admin.jsx
index 5990150001..52311af50e 100644
--- a/app/javascript/packs/admin.jsx
+++ b/app/javascript/packs/admin.jsx
@@ -1,10 +1,9 @@
 import './public-path';
 import ready from '../mastodon/ready';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 ready(() => {
-  const React    = require('react');
-  const ReactDOM = require('react-dom');
-
   [].forEach.call(document.querySelectorAll('[data-admin-component]'), element => {
     const componentName  = element.getAttribute('data-admin-component');
     const { locale, ...componentProps } = JSON.parse(element.getAttribute('data-props'));
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 020f2b4a0e..ab87083659 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -1,5 +1,5 @@
 import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
+import { loadPolyfills } from '../mastodon/polyfills';
 import { start } from '../mastodon/common';
 
 start();
diff --git a/app/javascript/packs/public.jsx b/app/javascript/packs/public.jsx
index 606ddc3bf7..c8c3bd31e3 100644
--- a/app/javascript/packs/public.jsx
+++ b/app/javascript/packs/public.jsx
@@ -1,12 +1,24 @@
 import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
+
+import { loadPolyfills } from '../mastodon/polyfills';
 import ready from '../mastodon/ready';
 import { start } from '../mastodon/common';
+
 import loadKeyboardExtensions from '../mastodon/load_keyboard_extensions';
 import 'cocoon-js-vanilla';
 import axios from 'axios';
 import { throttle } from 'lodash';
 import { defineMessages } from 'react-intl';
+import * as IntlMessageFormat  from 'intl-messageformat';
+import { timeAgoString }  from '../mastodon/components/relative_timestamp';
+import { delegate }  from '@rails/ujs';
+import emojify  from '../mastodon/features/emoji/emoji';
+import { getLocale }  from '../mastodon/locales';
+import React  from 'react';
+import ReactDOM  from 'react-dom';
+import { createBrowserHistory }  from 'history';
+
+start();
 
 const messages = defineMessages({
   usernameTaken: { id: 'username.taken', defaultMessage: 'That username is taken. Try another' },
@@ -14,18 +26,8 @@ const messages = defineMessages({
   passwordDoesNotMatch: { id: 'password_confirmation.mismatching', defaultMessage: 'Password confirmation does not match' },
 });
 
-start();
-
-function main() {
-  const IntlMessageFormat = require('intl-messageformat').default;
-  const { timeAgoString } = require('../mastodon/components/relative_timestamp');
-  const { delegate } = require('@rails/ujs');
-  const emojify = require('../mastodon/features/emoji/emoji').default;
-  const { getLocale } = require('../mastodon/locales');
+function loaded() {
   const { localeData } = getLocale();
-  const React = require('react');
-  const ReactDOM = require('react-dom');
-  const { createBrowserHistory } = require('history');
 
   const scrollToDetailedStatus = () => {
     const history = createBrowserHistory();
@@ -238,6 +240,11 @@ function main() {
   });
 }
 
+
+function main() {
+  ready(loaded);
+}
+
 loadPolyfills()
   .then(main)
   .then(loadKeyboardExtensions)
diff --git a/app/javascript/packs/share.jsx b/app/javascript/packs/share.jsx
index 1225d7b529..542a2f3ae8 100644
--- a/app/javascript/packs/share.jsx
+++ b/app/javascript/packs/share.jsx
@@ -1,23 +1,26 @@
 import './public-path';
-import loadPolyfills from '../mastodon/load_polyfills';
+import { loadPolyfills } from '../mastodon/polyfills';
 import { start } from '../mastodon/common';
+import ready from '../mastodon/ready';
+import ComposeContainer  from '../mastodon/containers/compose_container';
+import React from 'react';
+import ReactDOM from 'react-dom';
 
 start();
 
 function loaded() {
-  const ComposeContainer = require('../mastodon/containers/compose_container').default;
-  const React = require('react');
-  const ReactDOM = require('react-dom');
   const mountNode = document.getElementById('mastodon-compose');
 
-  if (mountNode !== null) {
-    const props = JSON.parse(mountNode.getAttribute('data-props'));
+  if (mountNode) {
+    const attr = mountNode.getAttribute('data-props');
+    if(!attr) return;
+
+    const props = JSON.parse(attr);
     ReactDOM.render(<ComposeContainer {...props} />, mountNode);
   }
 }
 
 function main() {
-  const ready = require('../mastodon/ready').default;
   ready(loaded);
 }
 
diff --git a/app/javascript/types/image.d.ts b/app/javascript/types/image.d.ts
new file mode 100644
index 0000000000..fae2ed7014
--- /dev/null
+++ b/app/javascript/types/image.d.ts
@@ -0,0 +1,35 @@
+/* eslint-disable import/no-default-export */
+declare module '*.avif' {
+  const path: string;
+  export default path;
+}
+
+declare module '*.gif' {
+  const path: string;
+  export default path;
+}
+
+declare module '*.jpg' {
+  const path: string;
+  export default path;
+}
+
+declare module '*.jpg' {
+  const path: string;
+  export default path;
+}
+
+declare module '*.png' {
+  const path: string;
+  export default path;
+}
+
+declare module '*.svg' {
+  const path: string;
+  export default path;
+}
+
+declare module '*.webp' {
+  const path: string;
+  export default path;
+}
diff --git a/app/javascript/types/resources.ts b/app/javascript/types/resources.ts
index 28fad2719a..0906504150 100644
--- a/app/javascript/types/resources.ts
+++ b/app/javascript/types/resources.ts
@@ -1,10 +1,54 @@
 import type { Record } from 'immutable';
 
-type AccountValues = {
-  id: number;
+type CustomEmoji = Record<{
+  shortcode: string;
+  static_url: string;
+  url: string;
+}>;
+
+type AccountField = Record<{
+  name: string;
+  value: string;
+  verified_at: string | null;
+}>;
+
+type AccountApiResponseValues = {
+  acct: string;
   avatar: string;
   avatar_static: string;
-  [key: string]: any;
+  bot: boolean;
+  created_at: string;
+  discoverable: boolean;
+  display_name: string;
+  emojis: CustomEmoji[];
+  fields: AccountField[];
+  followers_count: number;
+  following_count: number;
+  group: boolean;
+  header: string;
+  header_static: string;
+  id: string;
+  last_status_at: string;
+  locked: boolean;
+  note: string;
+  statuses_count: number;
+  url: string;
+  username: string;
+};
+
+type NormalizedAccountField = Record<{
+  name_emojified: string;
+  value_emojified: string;
+  value_plain: string;
+}>;
+
+type NormalizedAccountValues = {
+  display_name_html: string;
+  fields: NormalizedAccountField[];
+  note_emojified: string;
+  note_plain: string;
 };
 
-export type Account = Record<AccountValues>;
+export type Account = Record<
+  AccountApiResponseValues & NormalizedAccountValues
+>;
diff --git a/config/webpack/shared.js b/config/webpack/shared.js
index 9bdb60bad5..e85a2546fe 100644
--- a/config/webpack/shared.js
+++ b/config/webpack/shared.js
@@ -89,6 +89,7 @@ module.exports = {
 
   module: {
     rules: Object.keys(rules).map(key => rules[key]),
+    strictExportPresence: true,
   },
 
   plugins: [
diff --git a/lib/mastodon/ip_blocks_cli.rb b/lib/mastodon/ip_blocks_cli.rb
index 3b99595857..82a08753bc 100644
--- a/lib/mastodon/ip_blocks_cli.rb
+++ b/lib/mastodon/ip_blocks_cli.rb
@@ -11,7 +11,7 @@ module Mastodon
       true
     end
 
-    option :severity, required: true, enum: %w(no_access sign_up_requires_approval), desc: 'Severity of the block'
+    option :severity, required: true, enum: %w(no_access sign_up_requires_approval sign_up_block), desc: 'Severity of the block'
     option :comment, aliases: [:c], desc: 'Optional comment'
     option :duration, aliases: [:d], type: :numeric, desc: 'Duration of the block in seconds'
     option :force, type: :boolean, aliases: [:f], desc: 'Overwrite existing blocks'
@@ -36,6 +36,12 @@ module Mastodon
       failed    = 0
 
       addresses.each do |address|
+        unless valid_ip_address?(address)
+          say("#{address} is invalid", :red)
+          failed += 1
+          next
+        end
+
         ip_block = IpBlock.find_by(ip: address)
 
         if ip_block.present? && !options[:force]
@@ -79,6 +85,12 @@ module Mastodon
       skipped   = 0
 
       addresses.each do |address|
+        unless valid_ip_address?(address)
+          say("#{address} is invalid", :yellow)
+          skipped += 1
+          next
+        end
+
         ip_blocks = if options[:force]
                       IpBlock.where('ip >>= ?', address)
                     else
@@ -126,5 +138,12 @@ module Mastodon
         :red
       end
     end
+
+    def valid_ip_address?(ip_address)
+      IPAddr.new(ip_address)
+      true
+    rescue IPAddr::InvalidAddressError
+      false
+    end
   end
 end
diff --git a/package.json b/package.json
index f5db9e94f2..08a5c7a641 100644
--- a/package.json
+++ b/package.json
@@ -53,13 +53,13 @@
     "cocoon-js-vanilla": "^1.3.0",
     "color-blend": "^4.0.0",
     "compression-webpack-plugin": "^6.1.1",
+    "core-js": "^3.30.2",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.7",
     "cssnano": "^6.0.1",
     "detect-passive-events": "^2.0.3",
     "dotenv": "^16.0.3",
     "emoji-mart": "npm:emoji-mart-lazyload@latest",
-    "es6-symbol": "^3.1.3",
     "escape-html": "^1.0.3",
     "exif-js": "^2.3.0",
     "express": "^4.18.2",
@@ -79,17 +79,15 @@
     "jsdom": "^21.1.2",
     "lodash": "^4.17.21",
     "mark-loader": "^0.1.6",
+    "marky": "^1.2.5",
     "mini-css-extract-plugin": "^1.6.2",
     "mkdirp": "^2.1.6",
     "npmlog": "^7.0.1",
-    "object-assign": "^4.1.1",
-    "object.values": "^1.1.6",
     "path-complete-extname": "^1.0.0",
     "pg": "^8.5.0",
     "pg-connection-string": "^2.5.0",
     "postcss": "^8.4.23",
     "postcss-loader": "^4.3.0",
-    "promise.prototype.finally": "^3.1.4",
     "prop-types": "^15.8.1",
     "punycode": "^2.3.0",
     "react": "^16.14.0",
@@ -128,7 +126,7 @@
     "tesseract.js": "^2.1.5",
     "tiny-queue": "^0.2.1",
     "twitter-text": "3.1.0",
-    "uuid": "^8.3.1",
+    "uuid": "^9.0.0",
     "webpack": "^4.46.0",
     "webpack-assets-manifest": "^4.0.6",
     "webpack-bundle-analyzer": "^4.8.0",
@@ -178,24 +176,26 @@
     "@types/react-toggle": "^4.0.3",
     "@types/redux-immutable": "^4.0.3",
     "@types/requestidlecallback": "^0.3.5",
-    "@types/uuid": "^8.3.4",
+    "@types/uuid": "^9.0.0",
     "@types/webpack": "^4.41.33",
     "@types/yargs": "^17.0.24",
-    "@typescript-eslint/eslint-plugin": "^5.59.2",
-    "@typescript-eslint/parser": "^5.59.2",
+    "@typescript-eslint/eslint-plugin": "^5.59.5",
+    "@typescript-eslint/parser": "^5.59.5",
     "babel-jest": "^29.5.0",
     "eslint": "^8.39.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-formatjs": "^4.10.1",
     "eslint-plugin-import": "~2.27.5",
     "eslint-plugin-jsdoc": "^43.1.1",
     "eslint-plugin-jsx-a11y": "~6.7.1",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-promise": "~6.1.1",
     "eslint-plugin-react": "~7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.3",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.2.2",
-    "marky": "^1.2.5",
     "prettier": "^2.8.8",
     "raf": "^3.4.1",
     "react-intl-translations-manager": "^5.0.3",
diff --git a/tsconfig.json b/tsconfig.json
index 7c6529d48c..022ab1f71e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -2,20 +2,26 @@
   "compilerOptions": {
     "jsx": "react",
     "target": "esnext",
+    "module": "CommonJS",
     "moduleResolution": "node",
     "allowJs": true,
     "noEmit": true,
     "strict": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-    "baseUrl": ".",
+    "baseUrl": "./",
     "paths": {
-      "*": ["app/javascript/*"]
+      "locales": ["app/javascript/locales"],
+      "flavours/glitch": ["app/javascript/flavours/glitch"],
+      "flavours/glitch/*": ["app/javascript/flavours/glitch/*"],
+      "mastodon": ["app/javascript/mastodon"],
+      "mastodon/*": ["app/javascript/mastodon/*"]
     }
   },
   "include": [
     "app/javascript/mastodon",
-    "app/javascript/flavours/glitch",
-    "app/javascript/packs"
+    "app/javascript/packs",
+    "app/javascript/types",
+    "app/javascript/flavours/glitch"
   ]
 }
diff --git a/yarn.lock b/yarn.lock
index 239c13a3e7..9c51955da3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2425,10 +2425,10 @@
   dependencies:
     source-map "^0.6.1"
 
-"@types/uuid@^8.3.4":
-  version "8.3.4"
-  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.4.tgz#bd86a43617df0594787d38b735f55c805becf1bc"
-  integrity sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==
+"@types/uuid@^9.0.0":
+  version "9.0.1"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-9.0.1.tgz#98586dc36aee8dacc98cc396dbca8d0429647aa6"
+  integrity sha512-rFT3ak0/2trgvp4yYZo5iKFEPsET7vKydKF+VRCxlQ9bpheehyAJH89dAkaLEq/j/RZXJIqcgsmPJKUP1Z28HA==
 
 "@types/warning@^3.0.0":
   version "3.0.0"
@@ -2475,15 +2475,15 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.2.tgz#684a2ce7182f3b4dac342eef7caa1c2bae476abd"
-  integrity sha512-yVrXupeHjRxLDcPKL10sGQ/QlVrA8J5IYOEWVqk0lJaSZP7X5DfnP7Ns3cc74/blmbipQ1htFNVGsHX6wsYm0A==
+"@typescript-eslint/eslint-plugin@^5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.59.5.tgz#f156827610a3f8cefc56baeaa93cd4a5f32966b4"
+  integrity sha512-feA9xbVRWJZor+AnLNAr7A8JRWeZqHUf4T9tlP+TN04b05pFVhO5eN7/O93Y/1OUlLMHKbnJisgDURs/qvtqdg==
   dependencies:
     "@eslint-community/regexpp" "^4.4.0"
-    "@typescript-eslint/scope-manager" "5.59.2"
-    "@typescript-eslint/type-utils" "5.59.2"
-    "@typescript-eslint/utils" "5.59.2"
+    "@typescript-eslint/scope-manager" "5.59.5"
+    "@typescript-eslint/type-utils" "5.59.5"
+    "@typescript-eslint/utils" "5.59.5"
     debug "^4.3.4"
     grapheme-splitter "^1.0.4"
     ignore "^5.2.0"
@@ -2491,31 +2491,31 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/parser@^5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.2.tgz#c2c443247901d95865b9f77332d9eee7c55655e8"
-  integrity sha512-uq0sKyw6ao1iFOZZGk9F8Nro/8+gfB5ezl1cA06SrqbgJAt0SRoFhb9pXaHvkrxUpZaoLxt8KlovHNk8Gp6/HQ==
+"@typescript-eslint/parser@^5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.59.5.tgz#63064f5eafbdbfb5f9dfbf5c4503cdf949852981"
+  integrity sha512-NJXQC4MRnF9N9yWqQE2/KLRSOLvrrlZb48NGVfBa+RuPMN6B7ZcK5jZOvhuygv4D64fRKnZI4L4p8+M+rfeQuw==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.59.2"
-    "@typescript-eslint/types" "5.59.2"
-    "@typescript-eslint/typescript-estree" "5.59.2"
+    "@typescript-eslint/scope-manager" "5.59.5"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/typescript-estree" "5.59.5"
     debug "^4.3.4"
 
-"@typescript-eslint/scope-manager@5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.2.tgz#f699fe936ee4e2c996d14f0fdd3a7da5ba7b9a4c"
-  integrity sha512-dB1v7ROySwQWKqQ8rEWcdbTsFjh2G0vn8KUyvTXdPoyzSL6lLGkiXEV5CvpJsEe9xIdKV+8Zqb7wif2issoOFA==
+"@typescript-eslint/scope-manager@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.59.5.tgz#33ffc7e8663f42cfaac873de65ebf65d2bce674d"
+  integrity sha512-jVecWwnkX6ZgutF+DovbBJirZcAxgxC0EOHYt/niMROf8p4PwxxG32Qdhj/iIQQIuOflLjNkxoXyArkcIP7C3A==
   dependencies:
-    "@typescript-eslint/types" "5.59.2"
-    "@typescript-eslint/visitor-keys" "5.59.2"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/visitor-keys" "5.59.5"
 
-"@typescript-eslint/type-utils@5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.2.tgz#0729c237503604cd9a7084b5af04c496c9a4cdcf"
-  integrity sha512-b1LS2phBOsEy/T381bxkkywfQXkV1dWda/z0PhnIy3bC5+rQWQDS7fk9CSpcXBccPY27Z6vBEuaPBCKCgYezyQ==
+"@typescript-eslint/type-utils@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.59.5.tgz#485b0e2c5b923460bc2ea6b338c595343f06fc9b"
+  integrity sha512-4eyhS7oGym67/pSxA2mmNq7X164oqDYNnZCUayBwJZIRVvKpBCMBzFnFxjeoDeShjtO6RQBHBuwybuX3POnDqg==
   dependencies:
-    "@typescript-eslint/typescript-estree" "5.59.2"
-    "@typescript-eslint/utils" "5.59.2"
+    "@typescript-eslint/typescript-estree" "5.59.5"
+    "@typescript-eslint/utils" "5.59.5"
     debug "^4.3.4"
     tsutils "^3.21.0"
 
@@ -2524,10 +2524,10 @@
   resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.0.tgz#3fcdac7dbf923ec5251545acdd9f1d42d7c4fe32"
   integrity sha512-yR2h1NotF23xFFYKHZs17QJnB51J/s+ud4PYU4MqdZbzeNxpgUr05+dNeCN/bb6raslHvGdd6BFCkVhpPk/ZeA==
 
-"@typescript-eslint/types@5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.2.tgz#b511d2b9847fe277c5cb002a2318bd329ef4f655"
-  integrity sha512-LbJ/HqoVs2XTGq5shkiKaNTuVv5tTejdHgfdjqRUGdYhjW1crm/M7og2jhVskMt8/4wS3T1+PfFvL1K3wqYj4w==
+"@typescript-eslint/types@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.59.5.tgz#e63c5952532306d97c6ea432cee0981f6d2258c7"
+  integrity sha512-xkfRPHbqSH4Ggx4eHRIO/eGL8XL4Ysb4woL8c87YuAo8Md7AUjyWKa9YMwTL519SyDPrfEgKdewjkxNCVeJW7w==
 
 "@typescript-eslint/typescript-estree@5.59.0":
   version "5.59.0"
@@ -2542,30 +2542,30 @@
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/typescript-estree@5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.2.tgz#6e2fabd3ba01db5d69df44e0b654c0b051fe9936"
-  integrity sha512-+j4SmbwVmZsQ9jEyBMgpuBD0rKwi9RxRpjX71Brr73RsYnEr3Lt5QZ624Bxphp8HUkSKfqGnPJp1kA5nl0Sh7Q==
+"@typescript-eslint/typescript-estree@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.59.5.tgz#9b252ce55dd765e972a7a2f99233c439c5101e42"
+  integrity sha512-+XXdLN2CZLZcD/mO7mQtJMvCkzRfmODbeSKuMY/yXbGkzvA9rJyDY5qDYNoiz2kP/dmyAxXquL2BvLQLJFPQIg==
   dependencies:
-    "@typescript-eslint/types" "5.59.2"
-    "@typescript-eslint/visitor-keys" "5.59.2"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/visitor-keys" "5.59.5"
     debug "^4.3.4"
     globby "^11.1.0"
     is-glob "^4.0.3"
     semver "^7.3.7"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.2.tgz#0c45178124d10cc986115885688db6abc37939f4"
-  integrity sha512-kSuF6/77TZzyGPhGO4uVp+f0SBoYxCDf+lW3GKhtKru/L8k/Hd7NFQxyWUeY7Z/KGB2C6Fe3yf2vVi4V9TsCSQ==
+"@typescript-eslint/utils@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.59.5.tgz#15b3eb619bb223302e60413adb0accd29c32bcae"
+  integrity sha512-sCEHOiw+RbyTii9c3/qN74hYDPNORb8yWCoPLmB7BIflhplJ65u2PBpdRla12e3SSTJ2erRkPjz7ngLHhUegxA==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
     "@types/json-schema" "^7.0.9"
     "@types/semver" "^7.3.12"
-    "@typescript-eslint/scope-manager" "5.59.2"
-    "@typescript-eslint/types" "5.59.2"
-    "@typescript-eslint/typescript-estree" "5.59.2"
+    "@typescript-eslint/scope-manager" "5.59.5"
+    "@typescript-eslint/types" "5.59.5"
+    "@typescript-eslint/typescript-estree" "5.59.5"
     eslint-scope "^5.1.1"
     semver "^7.3.7"
 
@@ -2577,12 +2577,12 @@
     "@typescript-eslint/types" "5.59.0"
     eslint-visitor-keys "^3.3.0"
 
-"@typescript-eslint/visitor-keys@5.59.2":
-  version "5.59.2"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.2.tgz#37a419dc2723a3eacbf722512b86d6caf7d3b750"
-  integrity sha512-EEpsO8m3RASrKAHI9jpavNv9NlEUebV4qmF1OWxSTtKSFBpC1NCmWazDQHFivRf0O1DV11BA645yrLEVQ0/Lig==
+"@typescript-eslint/visitor-keys@5.59.5":
+  version "5.59.5"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.59.5.tgz#ba5b8d6791a13cf9fea6716af1e7626434b29b9b"
+  integrity sha512-qL+Oz+dbeBRTeyJTIy0eniD3uvqU7x+y1QceBismZ41hd4aBSRh8UAw4pZP0+XzLuPZmx4raNMq/I+59W2lXKA==
   dependencies:
-    "@typescript-eslint/types" "5.59.2"
+    "@typescript-eslint/types" "5.59.5"
     eslint-visitor-keys "^3.3.0"
 
 "@webassemblyjs/ast@1.9.0":
@@ -4140,6 +4140,11 @@ core-js@^2.5.0:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
   integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
 
+core-js@^3.30.2:
+  version "3.30.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.30.2.tgz#6528abfda65e5ad728143ea23f7a14f0dcf503fc"
+  integrity sha512-uBJiDmwqsbJCWHAwjrx3cvjbMXP7xD72Dmsn5LOJpiRmE3WbBbN5rCqQ2Qh6Ek6/eOrjlWngEynBWo4VxerQhg==
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -4414,14 +4419,6 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.6.tgz#865d0b5833d7d8d40f4e5b8a6d76aea3de4725ef"
   integrity sha512-+ZAmfyWMT7TiIlzdqJgjMb7S4f1beorDbWbsocyK4RaiqA5RTX3K14bnBWmmA9QEM0gRdsjyyrEmcyga8Zsxmw==
 
-d@1, d@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-1.0.1.tgz#8698095372d58dbee346ffd0c7093f99f8f9eb5a"
-  integrity sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==
-  dependencies:
-    es5-ext "^0.10.50"
-    type "^1.0.1"
-
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -4972,32 +4969,6 @@ es-to-primitive@^1.2.1:
     is-date-object "^1.0.1"
     is-symbol "^1.0.2"
 
-es5-ext@^0.10.35, es5-ext@^0.10.50:
-  version "0.10.53"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.53.tgz#93c5a3acfdbef275220ad72644ad02ee18368de1"
-  integrity sha512-Xs2Stw6NiNHWypzRTY1MtaG/uJlwCk8kH81920ma8mvN8Xq1gsfhZvpkImLQArw8AHnv8MT2I45J3c0R8slE+Q==
-  dependencies:
-    es6-iterator "~2.0.3"
-    es6-symbol "~3.1.3"
-    next-tick "~1.0.0"
-
-es6-iterator@~2.0.3:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
-  integrity sha1-p96IkUGgWpSwhUQDstCg+/qY87c=
-  dependencies:
-    d "1"
-    es5-ext "^0.10.35"
-    es6-symbol "^3.1.1"
-
-es6-symbol@^3.1.1, es6-symbol@^3.1.3, es6-symbol@~3.1.3:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.3.tgz#bad5d3c1bcdac28269f4cb331e431c78ac705d18"
-  integrity sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==
-  dependencies:
-    d "^1.0.1"
-    ext "^1.1.2"
-
 escalade@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
@@ -5035,6 +5006,11 @@ escodegen@^2.0.0:
   optionalDependencies:
     source-map "~0.6.1"
 
+eslint-config-prettier@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz#bfda738d412adc917fd7b038857110efe98c9348"
+  integrity sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA==
+
 eslint-import-resolver-node@^0.3.7:
   version "0.3.7"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz#83b375187d412324a1963d84fa664377a23eb4d7"
@@ -5125,11 +5101,23 @@ eslint-plugin-jsx-a11y@~6.7.1:
     object.fromentries "^2.0.6"
     semver "^6.3.0"
 
+eslint-plugin-prettier@^4.2.1:
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz#651cbb88b1dab98bfd42f017a12fa6b2d993f94b"
+  integrity sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==
+  dependencies:
+    prettier-linter-helpers "^1.0.0"
+
 eslint-plugin-promise@~6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-6.1.1.tgz#269a3e2772f62875661220631bd4dafcb4083816"
   integrity sha512-tjqWDwVZQo7UIPMeDReOpUgHCmCiH+ePnVT+5zVapL0uuHnegBUs2smM13CzOs2Xb5+MHMRFTs9v24yjba4Oig==
 
+eslint-plugin-react-hooks@^4.6.0:
+  version "4.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz#4c3e697ad95b77e93f8646aaa1630c1ba607edd3"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
 eslint-plugin-react@~7.32.2:
   version "7.32.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz#e71f21c7c265ebce01bcbc9d0955170c55571f10"
@@ -5430,13 +5418,6 @@ express@^4.17.1, express@^4.18.2:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-ext@^1.1.2:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/ext/-/ext-1.4.0.tgz#89ae7a07158f79d35517882904324077e4379244"
-  integrity sha512-Key5NIsUxdqKg3vIsdw9dSuXpPCQ297y6wBjL30edxwPgt2E44WcWBZey/ZvUc6sERLTxKdyCu4gZFmUbk1Q7A==
-  dependencies:
-    type "^2.0.0"
-
 extend-shallow@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f"
@@ -5471,6 +5452,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@^1.1.2:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.2.0.tgz#73ee11982d86caaf7959828d519cfe927fac5f03"
+  integrity sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==
+
 fast-glob@^3.2.12, fast-glob@^3.2.9:
   version "3.2.12"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.12.tgz#7f39ec99c2e6ab030337142da9e0c18f37afae80"
@@ -8244,11 +8230,6 @@ neo-async@^2.5.0, neo-async@^2.6.1, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-next-tick@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c"
-  integrity sha1-yobR/ogoFpsBICCOPchCS524NCw=
-
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -9250,6 +9231,13 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
+prettier-linter-helpers@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz#d23d41fe1375646de2d0104d3454a3008802cf7b"
+  integrity sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==
+  dependencies:
+    fast-diff "^1.1.2"
+
 prettier@^2.8.8:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
@@ -9294,15 +9282,6 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-promise.prototype.finally@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/promise.prototype.finally/-/promise.prototype.finally-3.1.4.tgz#4e756a154e4db27fae24c6b18703495c31da3927"
-  integrity sha512-nNc3YbgMfLzqtqvO/q5DP6RR0SiHI9pUPGzyDf1q+usTwCN2kjvAnJkBb7bHe3o+fFSBPpsGMoYtaSi+LTNqng==
-  dependencies:
-    call-bind "^1.0.2"
-    define-properties "^1.1.4"
-    es-abstract "^1.20.4"
-
 prompts@^2.0.1:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
@@ -11436,16 +11415,6 @@ type-is@~1.6.18:
     media-typer "0.3.0"
     mime-types "~2.1.24"
 
-type@^1.0.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-1.2.0.tgz#848dd7698dafa3e54a6c479e759c4bc3f18847a0"
-  integrity sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==
-
-type@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/type/-/type-2.0.0.tgz#5f16ff6ef2eb44f260494dae271033b29c09a9c3"
-  integrity sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==
-
 "typescript@^4.7 || 5", typescript@^5.0.4:
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.0.4.tgz#b217fd20119bd61a94d4011274e0ab369058da3b"
@@ -11664,10 +11633,10 @@ uuid@^3.3.2, uuid@^3.4.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
-uuid@^8.3.1:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+uuid@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5"
+  integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==
 
 v8-compile-cache@^2.1.1, v8-compile-cache@^2.3.0:
   version "2.3.0"