Merge branch 'ts' into 'develop'

TypeScript, FC

See merge request soapbox-pub/soapbox-fe!1474

app/soapbox/actions/aliases.js

@@ -93,7 +93,7 @@ export const changeAliasesSuggestions = value => ({
   value,
 });
 
-export const addToAliases = (intl, account) => (dispatch, getState) => {
+export const addToAliases = (account) => (dispatch, getState) => {
   if (!isLoggedIn(getState)) return;
   const state = getState();
 
@@ -108,7 +108,7 @@ export const addToAliases = (intl, account) => (dispatch, getState) => {
 
     api(getState).patch('/api/v1/accounts/update_credentials', { also_known_as: [...alsoKnownAs, account.getIn(['pleroma', 'ap_id'])] })
       .then((response => {
-        dispatch(snackbar.success(intl.formatMessage(messages.createSuccess)));
+        dispatch(snackbar.success(messages.createSuccess));
         dispatch(addToAliasesSuccess);
         dispatch(patchMeSuccess(response.data));
       }))
@@ -123,7 +123,7 @@ export const addToAliases = (intl, account) => (dispatch, getState) => {
     alias: account.get('acct'),
   })
     .then(response => {
-      dispatch(snackbar.success(intl.formatMessage(messages.createSuccess)));
+      dispatch(snackbar.success(messages.createSuccess));
       dispatch(addToAliasesSuccess);
       dispatch(fetchAliases);
     })
@@ -143,7 +143,7 @@ export const addToAliasesFail = error => ({
   error,
 });
 
-export const removeFromAliases = (intl, account) => (dispatch, getState) => {
+export const removeFromAliases = (account) => (dispatch, getState) => {
   if (!isLoggedIn(getState)) return;
   const state = getState();
 
@@ -158,7 +158,7 @@ export const removeFromAliases = (intl, account) => (dispatch, getState) => {
 
     api(getState).patch('/api/v1/accounts/update_credentials', { also_known_as: alsoKnownAs.filter(id => id !== account) })
       .then(response => {
-        dispatch(snackbar.success(intl.formatMessage(messages.removeSuccess)));
+        dispatch(snackbar.success(messages.removeSuccess));
         dispatch(removeFromAliasesSuccess);
         dispatch(patchMeSuccess(response.data));
       })
@@ -175,7 +175,7 @@ export const removeFromAliases = (intl, account) => (dispatch, getState) => {
     },
   })
     .then(response => {
-      dispatch(snackbar.success(intl.formatMessage(messages.removeSuccess)));
+      dispatch(snackbar.success(messages.removeSuccess));
       dispatch(removeFromAliasesSuccess);
       dispatch(fetchAliases);
     })

app/soapbox/actions/push_notifications/registerer.js

@@ -1,8 +1,7 @@
 import { createPushSubsription, updatePushSubscription } from 'soapbox/actions/push_subscriptions';
+import { pushNotificationsSetting } from 'soapbox/settings';
 import { getVapidKey } from 'soapbox/utils/auth';
-
+import { decode as decodeBase64 } from 'soapbox/utils/base64';
-import { pushNotificationsSetting } from '../../settings';
-import { decode as decodeBase64 } from '../../utils/base64';
 
 import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
 

app/soapbox/features/account_gallery/index.js

@@ -10,6 +10,7 @@ import {
   fetchAccountByUsername,
 } from 'soapbox/actions/accounts';
 import { openModal } from 'soapbox/actions/modals';
+import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
 import LoadMore from 'soapbox/components/load_more';
 import MissingIndicator from 'soapbox/components/missing_indicator';
 import { Column } from 'soapbox/components/ui';
@@ -17,8 +18,6 @@ import { Spinner } from 'soapbox/components/ui';
 import { getAccountGallery, findAccountByUsername } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { expandAccountMediaTimeline } from '../../actions/timelines';
-
 import MediaItem from './components/media_item';
 
 const mapStateToProps = (state, { params, withReplies = false }) => {

app/soapbox/features/account_timeline/index.js

@@ -6,18 +6,17 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts';
+import { fetchPatronAccount } from 'soapbox/actions/patron';
 import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
+import { expandAccountFeaturedTimeline, expandAccountTimeline } from 'soapbox/actions/timelines';
 import MissingIndicator from 'soapbox/components/missing_indicator';
+import StatusList from 'soapbox/components/status_list';
+import { Card, CardBody, Spinner, Text } from 'soapbox/components/ui';
 import { makeGetStatusIds, findAccountByUsername } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts';
-import { fetchPatronAccount } from '../../actions/patron';
-import { expandAccountFeaturedTimeline, expandAccountTimeline } from '../../actions/timelines';
-import StatusList from '../../components/status_list';
-import { Card, CardBody, Spinner, Text } from '../../components/ui';
-
 const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
 

app/soapbox/features/admin/moderation_log.js

@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedDate } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchModerationLog } from 'soapbox/actions/admin';
-import ScrollableList from 'soapbox/components/scrollable_list';
-
-import Column from '../ui/components/column';
-
-const messages = defineMessages({
-  heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' },
-  emptyMessage: { id: 'admin.moderation_log.empty_message', defaultMessage: 'You have not performed any moderation actions yet. When you do, a history will be shown here.' },
-});
-
-const mapStateToProps = state => ({
-  items: state.getIn(['admin_log', 'index']).map(i => state.getIn(['admin_log', 'items', String(i)])),
-  hasMore: state.getIn(['admin_log', 'total'], 0) - state.getIn(['admin_log', 'index']).count() > 0,
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class ModerationLog extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    list: ImmutablePropTypes.list,
-  };
-
-  state = {
-    isLoading: true,
-    lastPage: 0,
-  }
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(fetchModerationLog())
-      .then(data => this.setState({
-        isLoading: false,
-        lastPage: 1,
-      }))
-      .catch(() => {});
-  }
-
-  handleLoadMore = () => {
-    const page = this.state.lastPage + 1;
-
-    this.setState({ isLoading: true });
-    this.props.dispatch(fetchModerationLog({ page }))
-      .then(data => this.setState({
-        isLoading: false,
-        lastPage: page,
-      }))
-      .catch(() => {});
-  }
-
-  render() {
-    const { intl, items, hasMore } = this.props;
-    const { isLoading } = this.state;
-    const showLoading = isLoading && items.count() === 0;
-
-    return (
-      <Column icon='balance-scale' label={intl.formatMessage(messages.heading)}>
-        <ScrollableList
-          isLoading={isLoading}
-          showLoading={showLoading}
-          scrollKey='moderation-log'
-          emptyMessage={intl.formatMessage(messages.emptyMessage)}
-          hasMore={hasMore}
-          onLoadMore={this.handleLoadMore}
-        >
-          {items.map((item, i) => (
-            <div className='logentry' key={i}>
-              <div className='logentry__message'>{item.get('message')}</div>
-              <div className='logentry__timestamp'>
-                <FormattedDate
-                  value={new Date(item.get('time') * 1000)}
-                  hour12={false}
-                  year='numeric'
-                  month='short'
-                  day='2-digit'
-                  hour='2-digit'
-                  minute='2-digit'
-                />
-              </div>
-            </div>
-          ))}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}

app/soapbox/features/admin/moderation_log.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+import { defineMessages, FormattedDate, useIntl } from 'react-intl';
+
+import { fetchModerationLog } from 'soapbox/actions/admin';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import Column from '../ui/components/column';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+const messages = defineMessages({
+  heading: { id: 'column.admin.moderation_log', defaultMessage: 'Moderation Log' },
+  emptyMessage: { id: 'admin.moderation_log.empty_message', defaultMessage: 'You have not performed any moderation actions yet. When you do, a history will be shown here.' },
+});
+
+const ModerationLog = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const items = useAppSelector((state) => state.admin_log.get('index').map((i: number) => state.admin_log.getIn(['items', String(i)]))) as ImmutableMap<string, any>;
+  const hasMore = useAppSelector((state) => state.admin_log.get('total', 0) - state.admin_log.get('index').count() > 0);
+
+  const [isLoading, setIsLoading] = useState(true);
+  const [lastPage, setLastPage] = useState(0);
+
+  const showLoading = isLoading && items.count() === 0;
+
+  useEffect(() => {
+    dispatch(fetchModerationLog())
+      .then(() => {
+        setIsLoading(false);
+        setLastPage(1);
+      })
+      .catch(() => {});
+  }, []);
+
+  const handleLoadMore = () => {
+    const page = lastPage + 1;
+
+    setIsLoading(true);
+    dispatch(fetchModerationLog({ page }))
+      .then(() => {
+        setIsLoading(false);
+        setLastPage(page);
+      }).catch(() => {});
+  };
+
+  return (
+    <Column icon='balance-scale' label={intl.formatMessage(messages.heading)}>
+      <ScrollableList
+        isLoading={isLoading}
+        showLoading={showLoading}
+        scrollKey='moderation-log'
+        emptyMessage={intl.formatMessage(messages.emptyMessage)}
+        hasMore={hasMore}
+        onLoadMore={handleLoadMore}
+      >
+        {items.map((item, i) => (
+          <div className='logentry' key={i}>
+            <div className='logentry__message'>{item.get('message')}</div>
+            <div className='logentry__timestamp'>
+              <FormattedDate
+                value={new Date(item.get('time') * 1000)}
+                hour12={false}
+                year='numeric'
+                month='short'
+                day='2-digit'
+                hour='2-digit'
+                minute='2-digit'
+              />
+            </div>
+          </div>
+        ))}
+      </ScrollableList>
+    </Column>
+  );
+};
+
+export default ModerationLog;

app/soapbox/features/aliases/components/account.js

@@ -1,92 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { addToAliases } from 'soapbox/actions/aliases';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
-import IconButton from 'soapbox/components/icon_button';
-import { makeGetAccount } from 'soapbox/selectors';
-import { getFeatures } from 'soapbox/utils/features';
-
-const messages = defineMessages({
-  add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
-});
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, { accountId, added, aliases }) => {
-    const me = state.get('me');
-
-    const instance = state.get('instance');
-    const features = getFeatures(instance);
-
-    const account = getAccount(state, accountId);
-    const apId = account.getIn(['pleroma', 'ap_id']);
-    const name = features.accountMoving ? account.get('acct') : apId;
-
-    return {
-      account,
-      apId,
-      added: typeof added === 'undefined' ? aliases.includes(name) : added,
-      me,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch) => ({
-  onAdd: (intl, apId) => dispatch(addToAliases(intl, apId)),
-});
-
-export default @connect(makeMapStateToProps, mapDispatchToProps)
-@injectIntl
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    apId: PropTypes.string.isRequired,
-    intl: PropTypes.object.isRequired,
-    onAdd: PropTypes.func.isRequired,
-    added: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    added: false,
-  };
-
-  handleOnAdd = () => this.props.onAdd(this.props.intl, this.props.account);
-
-  render() {
-    const { account, accountId, intl, added, me } = this.props;
-
-    let button;
-
-    if (!added && accountId !== me) {
-      button = (
-        <div className='account__relationship'>
-          <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={this.handleOnAdd} />
-        </div>
-      );
-    }
-
-    return (
-      <div className='account'>
-        <div className='account__wrapper'>
-          <div className='account__display-name'>
-            <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
-            <DisplayName account={account} />
-          </div>
-
-          {button}
-        </div>
-      </div>
-    );
-  }
-
-}

app/soapbox/features/aliases/components/account.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { addToAliases } from 'soapbox/actions/aliases';
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display-name';
+import IconButton from 'soapbox/components/icon_button';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+import { getFeatures } from 'soapbox/utils/features';
+
+import type { List as ImmutableList } from 'immutable';
+
+const messages = defineMessages({
+  add: { id: 'aliases.account.add', defaultMessage: 'Create alias' },
+});
+
+const getAccount = makeGetAccount();
+
+interface IAccount {
+  accountId: string,
+  aliases: ImmutableList<string>
+}
+
+const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const account = useAppSelector((state) => getAccount(state, accountId));
+  const added = useAppSelector((state) => {
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    const account = getAccount(state, accountId);
+    const apId = account?.pleroma.get('ap_id');
+    const name = features.accountMoving ? account?.acct : apId;
+
+    return aliases.includes(name);
+  });
+  const me = useAppSelector((state) => state.me);
+
+  const handleOnAdd = () => dispatch(addToAliases(account));
+
+  if (!account) return null;
+
+  let button;
+
+  if (!added && accountId !== me) {
+    button = (
+      <div className='account__relationship'>
+        <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+      </div>
+    );
+  }
+
+  return (
+    <div className='account'>
+      <div className='account__wrapper'>
+        <div className='account__display-name'>
+          <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+          <DisplayName account={account} />
+        </div>
+
+        {button}
+      </div>
+    </div>
+  );
+};
+
+export default Account;

app/soapbox/features/aliases/index.js

@@ -1,115 +0,0 @@
-import { List as ImmutableList } from 'immutable';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
-import Icon from 'soapbox/components/icon';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui';
-import { makeGetAccount } from 'soapbox/selectors';
-import { getFeatures } from 'soapbox/utils/features';
-
-
-import Account from './components/account';
-import Search from './components/search';
-
-const messages = defineMessages({
-  heading: { id: 'column.aliases', defaultMessage: 'Account aliases' },
-  subheading_add_new: { id: 'column.aliases.subheading_add_new', defaultMessage: 'Add New Alias' },
-  create_error: { id: 'column.aliases.create_error', defaultMessage: 'Error creating alias' },
-  delete_error: { id: 'column.aliases.delete_error', defaultMessage: 'Error deleting alias' },
-  subheading_aliases: { id: 'column.aliases.subheading_aliases', defaultMessage: 'Current aliases' },
-  delete: { id: 'column.aliases.delete', defaultMessage: 'Delete' },
-});
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = state => {
-    const me = state.get('me');
-    const account = getAccount(state, me);
-
-    const instance = state.get('instance');
-    const features = getFeatures(instance);
-
-    let aliases;
-
-    if (features.accountMoving) aliases = state.getIn(['aliases', 'aliases', 'items'], ImmutableList());
-    else aliases = account.getIn(['pleroma', 'also_known_as']);
-
-    return {
-      aliases,
-      searchAccountIds: state.getIn(['aliases', 'suggestions', 'items']),
-      loaded: state.getIn(['aliases', 'suggestions', 'loaded']),
-    };
-  };
-
-  return mapStateToProps;
-};
-
-export default @connect(makeMapStateToProps)
-@injectIntl
-class Aliases extends ImmutablePureComponent {
-
-  componentDidMount = e => {
-    const { dispatch } = this.props;
-    dispatch(fetchAliases);
-  }
-
-  handleFilterDelete = e => {
-    const { dispatch, intl } = this.props;
-    dispatch(removeFromAliases(intl, e.currentTarget.dataset.value));
-  }
-
-  render() {
-    const { intl, aliases, searchAccountIds, loaded } = this.props;
-
-    const emptyMessage = <FormattedMessage id='empty_column.aliases' defaultMessage="You haven't created any account alias yet." />;
-
-    return (
-      <Column className='aliases-settings-panel' icon='suitcase' label={intl.formatMessage(messages.heading)}>
-        <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
-        </CardHeader>
-        <Search />
-        {
-          loaded && searchAccountIds.size === 0 ? (
-            <div className='aliases__accounts empty-column-indicator'>
-              <FormattedMessage id='empty_column.aliases.suggestions' defaultMessage='There are no account suggestions available for the provided term.' />
-            </div>
-          ) : (
-            <div className='aliases__accounts'>
-              {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} aliases={aliases} />)}
-            </div>
-          )
-        }
-        <CardHeader>
-          <CardTitle title={intl.formatMessage(messages.subheading_aliases)} />
-        </CardHeader>
-        <div className='aliases-settings-panel'>
-          <ScrollableList
-            scrollKey='aliases'
-            emptyMessage={emptyMessage}
-          >
-            {aliases.map((alias, i) => (
-              <HStack alignItems='center' justifyContent='between' space={1} key={i} className='p-2'>
-                <div>
-                  <Text tag='span' theme='muted'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></Text>
-                  {' '}
-                  <Text tag='span'>{alias}</Text>
-                </div>
-                <div className='flex items-center' role='button' tabIndex='0' onClick={this.handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                  <Icon className='pr-1.5 text-lg' id='times' size={40} />
-                  <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
-                </div>
-              </HStack>
-            ))}
-          </ScrollableList>
-        </div>
-      </Column>
-    );
-  }
-
-}

app/soapbox/features/aliases/index.tsx

@@ -0,0 +1,98 @@
+import { List as ImmutableList } from 'immutable';
+import React, { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { fetchAliases, removeFromAliases } from 'soapbox/actions/aliases';
+import Icon from 'soapbox/components/icon';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { CardHeader, CardTitle, Column, HStack, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+import { getFeatures } from 'soapbox/utils/features';
+
+import Account from './components/account';
+import Search from './components/search';
+
+const messages = defineMessages({
+  heading: { id: 'column.aliases', defaultMessage: 'Account aliases' },
+  subheading_add_new: { id: 'column.aliases.subheading_add_new', defaultMessage: 'Add New Alias' },
+  create_error: { id: 'column.aliases.create_error', defaultMessage: 'Error creating alias' },
+  delete_error: { id: 'column.aliases.delete_error', defaultMessage: 'Error deleting alias' },
+  subheading_aliases: { id: 'column.aliases.subheading_aliases', defaultMessage: 'Current aliases' },
+  delete: { id: 'column.aliases.delete', defaultMessage: 'Delete' },
+});
+
+const getAccount = makeGetAccount();
+
+const Aliases = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const aliases = useAppSelector((state) => {
+    const me = state.me as string;
+    const account = getAccount(state, me);
+
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.accountMoving) return state.aliases.getIn(['aliases', 'items'], ImmutableList());
+    return account!.pleroma.get('also_known_as');
+  }) as ImmutableList<string>;
+  const searchAccountIds = useAppSelector((state) => state.aliases.getIn(['suggestions', 'items'])) as ImmutableList<string>;
+  const loaded = useAppSelector((state) => state.aliases.getIn(['suggestions', 'loaded']));
+
+  useEffect(() => {
+    dispatch(fetchAliases);
+  }, []);
+
+  const handleFilterDelete: React.MouseEventHandler<HTMLDivElement> = e => {
+    dispatch(removeFromAliases(e.currentTarget.dataset.value));
+  };
+
+  const emptyMessage = <FormattedMessage id='empty_column.aliases' defaultMessage="You haven't created any account alias yet." />;
+
+  return (
+    <Column className='aliases-settings-panel' label={intl.formatMessage(messages.heading)}>
+      <CardHeader>
+        <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
+      </CardHeader>
+      <Search />
+      {
+        loaded && searchAccountIds.size === 0 ? (
+          <div className='aliases__accounts empty-column-indicator'>
+            <FormattedMessage id='empty_column.aliases.suggestions' defaultMessage='There are no account suggestions available for the provided term.' />
+          </div>
+        ) : (
+          <div className='aliases__accounts'>
+            {searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} aliases={aliases} />)}
+          </div>
+        )
+      }
+      <CardHeader>
+        <CardTitle title={intl.formatMessage(messages.subheading_aliases)} />
+      </CardHeader>
+      <div className='aliases-settings-panel'>
+        <ScrollableList
+          scrollKey='aliases'
+          emptyMessage={emptyMessage}
+        >
+          {aliases.map((alias, i) => (
+            <HStack alignItems='center' justifyContent='between' space={1} key={i} className='p-2'>
+              <div>
+                <Text tag='span' theme='muted'><FormattedMessage id='aliases.account_label' defaultMessage='Old account:' /></Text>
+                {' '}
+                <Text tag='span'>{alias}</Text>
+              </div>
+              <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
+                <Icon className='pr-1.5 text-lg' id='times' size={40} />
+                <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
+              </div>
+            </HStack>
+          ))}
+        </ScrollableList>
+      </div>
+    </Column>
+  );
+};
+
+export default Aliases;

app/soapbox/features/bookmarks/index.tsx

@@ -3,13 +3,12 @@ import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
+import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'soapbox/actions/bookmarks';
+import StatusList from 'soapbox/components/status_list';
 import SubNavigation from 'soapbox/components/sub_navigation';
 import { Column } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
-import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from '../../actions/bookmarks';
-import StatusList from '../../components/status_list';
-
 const messages = defineMessages({
   heading: { id: 'column.bookmarks', defaultMessage: 'Bookmarks' },
 });

app/soapbox/features/community_timeline/index.js

@@ -4,11 +4,11 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import { getSettings } from 'soapbox/actions/settings';
+import { connectCommunityStream } from 'soapbox/actions/streaming';
+import { expandCommunityTimeline } from 'soapbox/actions/timelines';
 import SubNavigation from 'soapbox/components/sub_navigation';
+import { Column } from 'soapbox/components/ui';
 
-import { connectCommunityStream } from '../../actions/streaming';
-import { expandCommunityTimeline } from '../../actions/timelines';
-import { Column } from '../../components/ui';
 import StatusListContainer from '../ui/containers/status_list_container';
 
 import ColumnSettings from './containers/column_settings_container';

app/soapbox/features/compose/components/compose_form.js

@@ -8,12 +8,12 @@ import { defineMessages, FormattedMessage } from 'react-intl';
 import { Link, withRouter } from 'react-router-dom';
 import { length } from 'stringz';
 
+import AutosuggestInput from 'soapbox/components/autosuggest_input';
+import AutosuggestTextarea from 'soapbox/components/autosuggest_textarea';
 import Icon from 'soapbox/components/icon';
+import { Button } from 'soapbox/components/ui';
+import { isMobile } from 'soapbox/is_mobile';
 
-import AutosuggestInput from '../../../components/autosuggest_input';
-import AutosuggestTextarea from '../../../components/autosuggest_textarea';
-import { Button } from '../../../components/ui';
-import { isMobile } from '../../../is_mobile';
 import ReplyMentions from '../components/reply_mentions';
 import UploadForm from '../components/upload_form';
 import Warning from '../components/warning';

app/soapbox/features/compose/components/privacy_dropdown.js

@@ -7,8 +7,8 @@ import spring from 'react-motion/lib/spring';
 import Overlay from 'react-overlays/lib/Overlay';
 
 import Icon from 'soapbox/components/icon';
+import { IconButton } from 'soapbox/components/ui';
 
-import { IconButton } from '../../../components/ui';
 import Motion from '../../ui/util/optional_motion';
 
 const messages = defineMessages({

app/soapbox/features/compose/components/reply_indicator.js

@@ -6,8 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
-
+import { isRtl } from 'soapbox/rtl';
-import { isRtl } from '../../../rtl';
 
 export default class ReplyIndicator extends ImmutablePureComponent {
 

app/soapbox/features/compose/components/search_results.js

@@ -6,16 +6,15 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { FormattedMessage } from 'react-intl';
 import { defineMessages, injectIntl } from 'react-intl';
 
+import Hashtag from 'soapbox/components/hashtag';
 import ScrollableList from 'soapbox/components/scrollable_list';
+import { Tabs } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import StatusContainer from 'soapbox/containers/status_container';
 import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
 import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder_hashtag';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
 
-import Hashtag from '../../../components/hashtag';
-import { Tabs } from '../../../components/ui';
-import AccountContainer from '../../../containers/account_container';
-import StatusContainer from '../../../containers/status_container';
-
 const messages = defineMessages({
   accounts: { id: 'search_results.accounts', defaultMessage: 'People' },
   statuses: { id: 'search_results.statuses', defaultMessage: 'Posts' },

app/soapbox/features/compose/containers/search_results_container.js

@@ -1,10 +1,10 @@
 import { connect } from 'react-redux';
 
+import { expandSearch, setFilter } from 'soapbox/actions/search';
+import { fetchSuggestions, dismissSuggestion } from 'soapbox/actions/suggestions';
 import { fetchTrendingStatuses } from 'soapbox/actions/trending_statuses';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { expandSearch, setFilter } from '../../../actions/search';
-import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
 import SearchResults from '../components/search_results';
 
 const mapStateToProps = state => {

app/soapbox/features/conversations/components/conversations_list.tsx

@@ -1,6 +1,5 @@
 import { debounce } from 'lodash';
-import React from 'react';
+import React, { useRef } from 'react';
-import { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { expandConversations } from 'soapbox/actions/conversations';

app/soapbox/features/developers/apps/create.js

@@ -8,12 +8,11 @@ import { connect } from 'react-redux';
 
 import { createApp } from 'soapbox/actions/apps';
 import { obtainOAuthToken } from 'soapbox/actions/oauth';
+import { Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from 'soapbox/components/ui';
 import Column from 'soapbox/features/ui/components/column';
 import { getBaseURL } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text, Textarea } from '../../../components/ui';
-
 const messages = defineMessages({
   heading: { id: 'column.app_create', defaultMessage: 'Create app' },
   namePlaceholder: { id: 'app_create.name_placeholder', defaultMessage: 'e.g. \'Soapbox\'' },

app/soapbox/features/developers/settings_store.js

@@ -8,10 +8,9 @@ import { connect } from 'react-redux';
 import { showAlertForError } from 'soapbox/actions/alerts';
 import { patchMe } from 'soapbox/actions/me';
 import { FE_NAME, SETTINGS_UPDATE } from 'soapbox/actions/settings';
+import { Button, Form, FormActions, FormGroup, Textarea } from 'soapbox/components/ui';
 import Column from 'soapbox/features/ui/components/column';
 
-import { Button, Form, FormActions, FormGroup, Textarea } from '../../components/ui';
-
 const isJSONValid = text => {
   try {
     JSON.parse(text);

app/soapbox/features/edit_profile/index.tsx

@@ -6,13 +6,12 @@ import { patchMe } from 'soapbox/actions/me';
 import snackbar from 'soapbox/actions/snackbar';
 import BirthdayInput from 'soapbox/components/birthday_input';
 import List, { ListItem } from 'soapbox/components/list';
+import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack, Toggle, FileInput } from 'soapbox/components/ui';
+import Streamfield, { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
 import resizeImage from 'soapbox/utils/resize_image';
 
-import { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack, Toggle, FileInput } from '../../components/ui';
-import Streamfield, { StreamfieldComponent } from '../../components/ui/streamfield/streamfield';
-
 import ProfilePreview from './components/profile-preview';
 
 import type { Account } from 'soapbox/types/entities';

app/soapbox/features/favourited_statuses/index.js

@@ -6,14 +6,14 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { fetchAccount, fetchAccountByUsername } from 'soapbox/actions/accounts';
+import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from 'soapbox/actions/favourites';
 import MissingIndicator from 'soapbox/components/missing_indicator';
+import StatusList from 'soapbox/components/status_list';
 import { Spinner } from 'soapbox/components/ui';
 import { findAccountByUsername } from 'soapbox/selectors';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { fetchAccount, fetchAccountByUsername } from '../../actions/accounts';
-import { fetchFavouritedStatuses, expandFavouritedStatuses, fetchAccountFavouritedStatuses, expandAccountFavouritedStatuses } from '../../actions/favourites';
-import StatusList from '../../components/status_list';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({

app/soapbox/features/followers/index.js

@@ -6,20 +6,20 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import MissingIndicator from 'soapbox/components/missing_indicator';
-import { Spinner } from 'soapbox/components/ui';
-import { findAccountByUsername } from 'soapbox/selectors';
-import { getFollowDifference } from 'soapbox/utils/accounts';
-import { getFeatures } from 'soapbox/utils/features';
-
 import {
   fetchAccount,
   fetchFollowers,
   expandFollowers,
   fetchAccountByUsername,
-} from '../../actions/accounts';
+} from 'soapbox/actions/accounts';
-import ScrollableList from '../../components/scrollable_list';
+import MissingIndicator from 'soapbox/components/missing_indicator';
-import AccountContainer from '../../containers/account_container';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { findAccountByUsername } from 'soapbox/selectors';
+import { getFollowDifference } from 'soapbox/utils/accounts';
+import { getFeatures } from 'soapbox/utils/features';
+
 import Column from '../ui/components/column';
 
 const messages = defineMessages({

app/soapbox/features/following/index.js

@@ -6,20 +6,20 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import MissingIndicator from 'soapbox/components/missing_indicator';
-import { Spinner } from 'soapbox/components/ui';
-import { findAccountByUsername } from 'soapbox/selectors';
-import { getFollowDifference } from 'soapbox/utils/accounts';
-import { getFeatures } from 'soapbox/utils/features';
-
 import {
   fetchAccount,
   fetchFollowing,
   expandFollowing,
   fetchAccountByUsername,
-} from '../../actions/accounts';
+} from 'soapbox/actions/accounts';
-import ScrollableList from '../../components/scrollable_list';
+import MissingIndicator from 'soapbox/components/missing_indicator';
-import AccountContainer from '../../containers/account_container';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { findAccountByUsername } from 'soapbox/selectors';
+import { getFollowDifference } from 'soapbox/utils/accounts';
+import { getFeatures } from 'soapbox/utils/features';
+
 import Column from '../ui/components/column';
 
 const messages = defineMessages({

app/soapbox/features/landing_page/index.tsx

@@ -1,12 +1,11 @@
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 
+import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
 import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
-import { Button, Card, CardBody, Stack, Text } from '../../components/ui';
-
 const LandingPage = () => {
   const features = useFeatures();
   const soapboxConfig = useSoapboxConfig();

app/soapbox/features/list_adder/components/list.js

@@ -5,10 +5,9 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { removeFromListAdder, addToListAdder } from 'soapbox/actions/lists';
 import Icon from 'soapbox/components/icon';
-
+import IconButton from 'soapbox/components/icon_button';
-import { removeFromListAdder, addToListAdder } from '../../../actions/lists';
-import IconButton from '../../../components/icon_button';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },

app/soapbox/features/list_editor/components/search.js

@@ -4,11 +4,10 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from 'soapbox/actions/lists';
 import Icon from 'soapbox/components/icon';
 import { Button } from 'soapbox/components/ui';
 
-import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists';
-
 const messages = defineMessages({
   search: { id: 'lists.search', defaultMessage: 'Search among people you follow' },
   searchTitle: { id: 'tabs_bar.search', defaultMessage: 'Search' },

app/soapbox/features/notifications/components/filter_bar.js

@@ -3,8 +3,7 @@ import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
-
+import { Tabs } from 'soapbox/components/ui';
-import { Tabs } from '../../../components/ui';
 
 const messages = defineMessages({
   all: { id: 'notifications.filter.all', defaultMessage: 'All' },

app/soapbox/features/notifications/components/notification.tsx

@@ -4,14 +4,13 @@ import { defineMessages, FormattedMessage, IntlShape, MessageDescriptor } from '
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
+import Icon from 'soapbox/components/icon';
+import Permalink from 'soapbox/components/permalink';
+import { HStack, Text, Emoji } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import StatusContainer from 'soapbox/containers/status_container';
 import { useAppSelector } from 'soapbox/hooks';
 
-import Icon from '../../../components/icon';
-import Permalink from '../../../components/permalink';
-import { HStack, Text, Emoji } from '../../../components/ui';
-import AccountContainer from '../../../containers/account_container';
-import StatusContainer from '../../../containers/status_container';
-
 import type { History } from 'history';
 import type { ScrollPosition } from 'soapbox/components/status';
 import type { NotificationType } from 'soapbox/normalizers/notification';

app/soapbox/features/notifications/containers/column_settings_container.js

@@ -1,13 +1,13 @@
 import { defineMessages, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { openModal } from 'soapbox/actions/modals';
+import { setFilter } from 'soapbox/actions/notifications';
+import { clearNotifications } from 'soapbox/actions/notifications';
+import { changeAlerts as changePushNotifications } from 'soapbox/actions/push_notifications';
+import { getSettings, changeSetting } from 'soapbox/actions/settings';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { openModal } from '../../../actions/modals';
-import { setFilter } from '../../../actions/notifications';
-import { clearNotifications } from '../../../actions/notifications';
-import { changeAlerts as changePushNotifications } from '../../../actions/push_notifications';
-import { getSettings, changeSetting } from '../../../actions/settings';
 import ColumnSettings from '../components/column_settings';
 
 const messages = defineMessages({

app/soapbox/features/notifications/containers/filter_bar_container.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 
+import { setFilter } from 'soapbox/actions/notifications';
 import { getSettings } from 'soapbox/actions/settings';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { setFilter } from '../../../actions/notifications';
 import FilterBar from '../components/filter_bar';
 
 const makeMapStateToProps = state => {

app/soapbox/features/notifications/containers/notification_container.js

@@ -1,20 +1,20 @@
 import { connect } from 'react-redux';
 
-import { getSettings } from 'soapbox/actions/settings';
+import { mentionCompose } from 'soapbox/actions/compose';
-
-import { mentionCompose } from '../../../actions/compose';
 import {
   reblog,
   favourite,
   unreblog,
   unfavourite,
-} from '../../../actions/interactions';
+} from 'soapbox/actions/interactions';
-import { openModal } from '../../../actions/modals';
+import { openModal } from 'soapbox/actions/modals';
+import { getSettings } from 'soapbox/actions/settings';
 import {
   hideStatus,
   revealStatus,
-} from '../../../actions/statuses';
+} from 'soapbox/actions/statuses';
-import { makeGetNotification } from '../../../selectors';
+import { makeGetNotification } from 'soapbox/selectors';
+
 import Notification from '../components/notification';
 
 const makeMapStateToProps = () => {

app/soapbox/features/notifications/index.js

@@ -8,17 +8,16 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
-import { getSettings } from 'soapbox/actions/settings';
-import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
-
 import {
   expandNotifications,
   scrollTopNotifications,
   dequeueNotifications,
-} from '../../actions/notifications';
+} from 'soapbox/actions/notifications';
-import ScrollableList from '../../components/scrollable_list';
+import { getSettings } from 'soapbox/actions/settings';
-import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
+import ScrollableList from 'soapbox/components/scrollable_list';
-import { Column } from '../../components/ui';
+import TimelineQueueButtonHeader from  'soapbox/components/timeline_queue_button_header';
+import { Column } from 'soapbox/components/ui';
+import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
 
 import FilterBarContainer from './containers/filter_bar_container';
 import NotificationContainer from './containers/notification_container';

app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx

@@ -4,13 +4,12 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
+import { fetchSuggestions } from 'soapbox/actions/suggestions';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import { useAppSelector } from 'soapbox/hooks';
 
-import { fetchSuggestions } from '../../../actions/suggestions';
-
 const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
   const dispatch = useDispatch();
 

app/soapbox/features/pinned_statuses/index.js

@@ -5,10 +5,10 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
+import { fetchPinnedStatuses } from 'soapbox/actions/pin_statuses';
 import MissingIndicator from 'soapbox/components/missing_indicator';
+import StatusList from 'soapbox/components/status_list';
 
-import { fetchPinnedStatuses } from '../../actions/pin_statuses';
-import StatusList from '../../components/status_list';
 import Column from '../ui/components/column';
 
 const messages = defineMessages({

app/soapbox/features/public_layout/components/footer.js

@@ -8,8 +8,7 @@ import { Link } from 'react-router-dom';
 
 import { getSettings } from 'soapbox/actions/settings';
 import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-
+import { Text } from 'soapbox/components/ui';
-import { Text } from '../../../components/ui';
 
 const mapStateToProps = (state, props) => {
   const soapboxConfig = getSoapboxConfig(state);

app/soapbox/features/public_layout/components/header.tsx

@@ -5,12 +5,11 @@ import { Link, Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
+import { openModal } from 'soapbox/actions/modals';
 import SiteLogo from 'soapbox/components/site-logo';
+import { Button, Form, HStack, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
-import { openModal } from '../../../actions/modals';
-import { Button, Form, HStack, IconButton, Input, Tooltip } from '../../../components/ui';
-
 import Sonar from './sonar';
 
 import type { AxiosError } from 'axios';

app/soapbox/features/public_timeline/index.js

@@ -5,12 +5,12 @@ import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
 import { changeSetting, getSettings } from 'soapbox/actions/settings';
+import { connectPublicStream } from 'soapbox/actions/streaming';
+import { expandPublicTimeline } from 'soapbox/actions/timelines';
 import SubNavigation from 'soapbox/components/sub_navigation';
+import { Column } from 'soapbox/components/ui';
 import Accordion from 'soapbox/features/ui/components/accordion';
 
-import { connectPublicStream } from '../../actions/streaming';
-import { expandPublicTimeline } from '../../actions/timelines';
-import { Column } from '../../components/ui';
 import PinnedHostsPicker from '../remote_timeline/components/pinned_hosts_picker';
 import StatusListContainer from '../ui/containers/status_list_container';
 

app/soapbox/features/remote_timeline/index.tsx

@@ -2,13 +2,13 @@ import React, { useEffect, useRef } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
+import { connectRemoteStream } from 'soapbox/actions/streaming';
+import { expandRemoteTimeline } from 'soapbox/actions/timelines';
 import IconButton from 'soapbox/components/icon_button';
 import { HStack, Text } from 'soapbox/components/ui';
 import Column from 'soapbox/features/ui/components/column';
 import { useAppDispatch, useSettings } from 'soapbox/hooks';
 
-import { connectRemoteStream } from '../../actions/streaming';
-import { expandRemoteTimeline } from '../../actions/timelines';
 import StatusListContainer from '../ui/containers/status_list_container';
 
 import PinnedHostsPicker from './components/pinned_hosts_picker';

app/soapbox/features/security/mfa/disable_otp_form.tsx

@@ -4,10 +4,9 @@ import { useHistory } from 'react-router-dom';
 
 import { disableMfa } from 'soapbox/actions/mfa';
 import snackbar from 'soapbox/actions/snackbar';
+import { Button, Form, FormGroup, Input, FormActions, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
-import { Button, Form, FormGroup, Input, FormActions, Stack, Text } from '../../../components/ui';
-
 const  messages = defineMessages({
   mfa_setup_disable_button: { id: 'column.mfa_disable_button', defaultMessage: 'Disable' },
   disableFail: { id: 'security.disable.fail', defaultMessage: 'Incorrect password. Try again.' },

app/soapbox/features/security/mfa/enable_otp_form.tsx

@@ -4,10 +4,9 @@ import { useHistory } from 'react-router-dom';
 
 import { fetchBackupCodes } from 'soapbox/actions/mfa';
 import snackbar from 'soapbox/actions/snackbar';
+import { Button, FormActions, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
-import { Button, FormActions, Spinner, Stack, Text } from '../../../components/ui';
-
 const  messages = defineMessages({
   mfaCancelButton: { id: 'column.mfa_cancel', defaultMessage: 'Cancel' },
   mfaSetupButton: { id: 'column.mfa_setup', defaultMessage: 'Proceed to Setup' },

app/soapbox/features/security/mfa/otp_confirm_form.tsx

@@ -3,14 +3,13 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
-import snackbar from 'soapbox/actions/snackbar';
-import { useAppDispatch } from 'soapbox/hooks';
-
 import {
   setupMfa,
   confirmMfa,
-} from '../../../actions/mfa';
+} from 'soapbox/actions/mfa';
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from '../../../components/ui';
+import snackbar from 'soapbox/actions/snackbar';
+import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
   mfaCancelButton: { id: 'column.mfa_cancel', defaultMessage: 'Cancel' },

app/soapbox/features/security/mfa_form.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
+import { fetchMfa } from 'soapbox/actions/mfa';
+import { Card, CardBody, CardHeader, CardTitle, Column } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 
-import { fetchMfa } from '../../actions/mfa';
-import { Card, CardBody, CardHeader, CardTitle, Column } from '../../components/ui';
-
 import DisableOtpForm from './mfa/disable_otp_form';
 import EnableOtpForm from './mfa/enable_otp_form';
 import OtpConfirmForm from './mfa/otp_confirm_form';

app/soapbox/features/status/components/action-bar.tsx

@@ -4,15 +4,14 @@ import { defineMessages, injectIntl, WrappedComponentProps as IntlComponentProps
 import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 
+import { openModal } from 'soapbox/actions/modals';
 import EmojiButtonWrapper from 'soapbox/components/emoji-button-wrapper';
+import { HStack, IconButton } from 'soapbox/components/ui';
+import DropdownMenuContainer from 'soapbox/containers/dropdown_menu_container';
 import { isUserTouching } from 'soapbox/is_mobile';
 import { getReactForStatus } from 'soapbox/utils/emoji_reacts';
 import { getFeatures } from 'soapbox/utils/features';
 
-import { openModal } from '../../../actions/modals';
-import { HStack, IconButton } from '../../../components/ui';
-import DropdownMenuContainer from '../../../containers/dropdown_menu_container';
-
 import type { History } from 'history';
 import type { List as ImmutableList } from 'immutable';
 import type { AnyAction } from 'redux';

app/soapbox/features/status/components/status-interaction-bar.tsx

@@ -5,11 +5,10 @@ import { FormattedNumber } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
+import { HStack, IconButton, Text, Emoji } from 'soapbox/components/ui';
 import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import { reduceEmoji } from 'soapbox/utils/emoji_reacts';
 
-import { HStack, IconButton, Text, Emoji } from '../../../components/ui';
-
 import type { Status } from 'soapbox/types/entities';
 
 interface IStatusInteractionBar {

app/soapbox/features/status/index.tsx

@@ -8,30 +8,15 @@ import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import { createSelector } from 'reselect';
 
+import { blockAccount } from 'soapbox/actions/accounts';
 import { launchChat } from 'soapbox/actions/chats';
-import {
-  deactivateUserModal,
-  deleteUserModal,
-  deleteStatusModal,
-  toggleStatusSensitivityModal,
-} from 'soapbox/actions/moderation';
-import { getSettings } from 'soapbox/actions/settings';
-import { getSoapboxConfig } from 'soapbox/actions/soapbox';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import SubNavigation from 'soapbox/components/sub_navigation';
-import Tombstone from 'soapbox/components/tombstone';
-import { Column, Stack } from 'soapbox/components/ui';
-import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
-import PendingStatus from 'soapbox/features/ui/components/pending_status';
-
-import { blockAccount } from '../../actions/accounts';
 import {
   replyCompose,
   mentionCompose,
   directCompose,
   quoteCompose,
-} from '../../actions/compose';
+} from 'soapbox/actions/compose';
-import { simpleEmojiReact } from '../../actions/emoji_reacts';
+import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import {
   favourite,
   unfavourite,
@@ -41,10 +26,18 @@ import {
   unbookmark,
   pin,
   unpin,
-} from '../../actions/interactions';
+} from 'soapbox/actions/interactions';
-import { openModal } from '../../actions/modals';
+import { openModal } from 'soapbox/actions/modals';
-import { initMuteModal } from '../../actions/mutes';
+import {
-import { initReport } from '../../actions/reports';
+  deactivateUserModal,
+  deleteUserModal,
+  deleteStatusModal,
+  toggleStatusSensitivityModal,
+} from 'soapbox/actions/moderation';
+import { initMuteModal } from 'soapbox/actions/mutes';
+import { initReport } from 'soapbox/actions/reports';
+import { getSettings } from 'soapbox/actions/settings';
+import { getSoapboxConfig } from 'soapbox/actions/soapbox';
 import {
   muteStatus,
   unmuteStatus,
@@ -52,11 +45,18 @@ import {
   hideStatus,
   revealStatus,
   editStatus,
-} from '../../actions/statuses';
+} from 'soapbox/actions/statuses';
-import { fetchStatusWithContext, fetchNext } from '../../actions/statuses';
+import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
-import MissingIndicator from '../../components/missing_indicator';
+import MissingIndicator from 'soapbox/components/missing_indicator';
-import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
+import ScrollableList from 'soapbox/components/scrollable_list';
-import { makeGetStatus } from '../../selectors';
+import { textForScreenReader, defaultMediaVisibility } from 'soapbox/components/status';
+import SubNavigation from 'soapbox/components/sub_navigation';
+import Tombstone from 'soapbox/components/tombstone';
+import { Column, Stack } from 'soapbox/components/ui';
+import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
+import PendingStatus from 'soapbox/features/ui/components/pending_status';
+import { makeGetStatus } from 'soapbox/selectors';
+
 import { attachFullscreenListener, detachFullscreenListener, isFullscreen } from '../ui/util/fullscreen';
 
 import ActionBar from './components/action-bar';

app/soapbox/features/ui/components/account_list_panel.js

@@ -5,8 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { Link } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
-
+import AccountContainer from 'soapbox/containers/account_container';
-import AccountContainer from '../../../containers/account_container';
 
 export default class AccountListPanel extends ImmutablePureComponent {
 

app/soapbox/features/ui/components/confirmation_modal.js

@@ -2,10 +2,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { injectIntl, FormattedMessage } from 'react-intl';
 
+import { Modal } from 'soapbox/components/ui';
 import { SimpleForm, FieldsGroup, Checkbox } from 'soapbox/features/forms';
 
-import { Modal } from '../../../components/ui';
-
 export default @injectIntl
 class ConfirmationModal extends React.PureComponent {
 

app/soapbox/features/ui/components/mute_modal.js

@@ -7,9 +7,7 @@ import Toggle from 'react-toggle';
 import { muteAccount } from 'soapbox/actions/accounts';
 import { closeModal } from 'soapbox/actions/modals';
 import { toggleHideNotifications } from 'soapbox/actions/mutes';
-import { Modal, HStack, Stack } from 'soapbox/components/ui';
+import { Modal, HStack, Stack, Text } from 'soapbox/components/ui';
-
-import { Text } from '../../../components/ui';
 
 const mapStateToProps = state => {
   return {

app/soapbox/features/ui/components/navbar.tsx

@@ -7,13 +7,12 @@ import { Link, Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
+import { openSidebar } from 'soapbox/actions/sidebar';
 import SiteLogo from 'soapbox/components/site-logo';
 import { Avatar, Button, Form, IconButton, Input, Tooltip } from 'soapbox/components/ui';
 import Search from 'soapbox/features/compose/components/search';
 import { useOwnAccount, useSoapboxConfig } from 'soapbox/hooks';
 
-import { openSidebar } from '../../../actions/sidebar';
-
 import ProfileDropdown from './profile-dropdown';
 
 const messages = defineMessages({

app/soapbox/features/ui/components/profile-dropdown.tsx

@@ -6,12 +6,11 @@ import { Link } from 'react-router-dom';
 
 import { logOut, switchAccount } from 'soapbox/actions/auth';
 import { fetchOwnAccounts } from 'soapbox/actions/auth';
+import Account from 'soapbox/components/account';
 import { Menu, MenuButton, MenuDivider, MenuItem, MenuLink, MenuList } from 'soapbox/components/ui';
 import { useAppSelector, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
-import Account from '../../../components/account';
-
 import ThemeToggle from './theme-toggle';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';

app/soapbox/features/ui/components/profile_media_panel.tsx

@@ -4,11 +4,11 @@ import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
+import { expandAccountMediaTimeline } from 'soapbox/actions/timelines';
 import { Spinner, Widget } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { getAccountGallery } from 'soapbox/selectors';
 
-import { expandAccountMediaTimeline } from '../../../actions/timelines';
 import MediaItem from '../../account_gallery/components/media_item';
 
 import type { Account, Attachment } from 'soapbox/types/entities';

app/soapbox/features/ui/components/profile_stats.tsx

@@ -2,10 +2,9 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 
+import { HStack, Text } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
-import { HStack, Text } from '../../../components/ui';
-
 import type { Account } from 'soapbox/types/entities';
 
 const messages = defineMessages({

app/soapbox/features/ui/components/trends-panel.tsx

@@ -3,12 +3,11 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
+import { fetchTrends } from 'soapbox/actions/trends';
+import Hashtag from 'soapbox/components/hashtag';
 import { Widget } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 
-import { fetchTrends } from '../../../actions/trends';
-import Hashtag from '../../../components/hashtag';
-
 interface ITrendsPanel {
   limit: number
 }

app/soapbox/features/ui/components/who-to-follow-panel.tsx

@@ -3,12 +3,11 @@ import * as React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
+import { fetchSuggestions, dismissSuggestion } from 'soapbox/actions/suggestions';
 import { Widget } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
 import { useAppSelector } from 'soapbox/hooks';
 
-import { fetchSuggestions, dismissSuggestion } from '../../../actions/suggestions';
-import AccountContainer from '../../../containers/account_container';
-
 const messages = defineMessages({
   dismissSuggestion: { id: 'suggestions.dismiss', defaultMessage: 'Dismiss suggestion' },
 });

app/soapbox/features/ui/containers/modal_container.js

@@ -1,9 +1,9 @@
 import { connect } from 'react-redux';
 
+import { cancelReplyCompose } from 'soapbox/actions/compose';
+import { closeModal } from 'soapbox/actions/modals';
 import { cancelReport } from 'soapbox/actions/reports';
 
-import { cancelReplyCompose } from '../../../actions/compose';
-import { closeModal } from '../../../actions/modals';
 import ModalRoot from '../components/modal_root';
 
 const mapStateToProps = state => {

app/soapbox/features/ui/containers/status_list_container.js

@@ -3,11 +3,10 @@ import { debounce } from 'lodash';
 import { connect } from 'react-redux';
 
 import { dequeueTimeline } from 'soapbox/actions/timelines';
+import { scrollTopTimeline } from 'soapbox/actions/timelines';
+import StatusList from 'soapbox/components/status_list';
 import { makeGetStatusIds } from 'soapbox/selectors';
 
-import { scrollTopTimeline } from '../../../actions/timelines';
-import StatusList from '../../../components/status_list';
-
 const makeMapStateToProps = () => {
   const getStatusIds = makeGetStatusIds();
 

app/soapbox/features/verification/steps/sms-verification.js

@@ -5,10 +5,9 @@ import { useDispatch, useSelector } from 'react-redux';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { confirmPhoneVerification, requestPhoneVerification } from 'soapbox/actions/verification';
+import { Button, Form, FormGroup, Input, Text } from 'soapbox/components/ui';
 import { formatPhoneNumber } from 'soapbox/utils/phone';
 
-import { Button, Form, FormGroup, Input, Text } from '../../../components/ui';
-
 const Statuses = {
   IDLE: 'IDLE',
   REQUESTED: 'REQUESTED',

app/soapbox/features/verification/waitlist_page.tsx

@@ -3,14 +3,13 @@ import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
 
+import { logOut } from 'soapbox/actions/auth';
 import { openModal } from 'soapbox/actions/modals';
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
+import { Button, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 
-import { logOut } from '../../actions/auth';
-import { Button, Stack, Text } from '../../components/ui';
-
 const WaitlistPage = (/* { account } */) => {
   const dispatch = useDispatch();
   const intl = useIntl();

app/soapbox/features/video/index.js

@@ -9,8 +9,8 @@ import { connect } from 'react-redux';
 import { getSettings } from 'soapbox/actions/settings';
 import Blurhash from 'soapbox/components/blurhash';
 import Icon from 'soapbox/components/icon';
+import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media_aspect_ratio';
 
-import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
 import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
 
 const DEFAULT_HEIGHT = 300;