From 5149ed13426776f3ac56be1498ee861931087e4e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 12 May 2022 19:16:59 +0200
Subject: [PATCH 001/102] Fix external links in sidebar/sidenav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/sidebar-navigation.tsx |  3 ++-
 app/soapbox/components/sidebar_menu.tsx       | 27 ++++++++++++++-----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index 6839ba8a3..39eea4ec4 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -57,9 +57,10 @@ const SidebarNavigation = () => {
 
       if (instance.invites_enabled) {
         menu.push({
-          to: `${baseURL}/invites`,
+          href: `${baseURL}/invites`,
           icon: require('@tabler/icons/icons/mailbox.svg'),
           text: <FormattedMessage id='navigation.invites' defaultMessage='Invites' />,
+          newTab: true,
         });
       }
 
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index 2a0946e6e..15661c017 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -42,14 +42,15 @@ const messages = defineMessages({
 });
 
 interface ISidebarLink {
-  to: string,
+  href?: string,
+  to?: string,
   icon: string,
   text: string | JSX.Element,
   onClick: React.EventHandler<React.MouseEvent>,
 }
 
-const SidebarLink: React.FC<ISidebarLink> = ({ to, icon, text, onClick }) => (
-  <NavLink className='group py-1 rounded-md' to={to} onClick={onClick}>
+const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
+  const body = (
     <HStack space={2} alignItems='center'>
       <div className='bg-primary-50 dark:bg-slate-700 relative rounded inline-flex p-2'>
         <Icon src={icon} className='text-primary-600 h-5 w-5' />
@@ -57,8 +58,22 @@ const SidebarLink: React.FC<ISidebarLink> = ({ to, icon, text, onClick }) => (
 
       <Text tag='span' weight='medium' theme='muted' className='group-hover:text-gray-800 dark:group-hover:text-gray-200'>{text}</Text>
     </HStack>
-  </NavLink>
-);
+  );
+
+  if (to) {
+    return (
+      <NavLink className='group py-1 rounded-md' to={to} onClick={onClick}>
+        {body}
+      </NavLink>
+    );
+  }
+
+  return (
+    <a className='group py-1 rounded-md' href={href} target='_blank' onClick={onClick}>
+      {body}
+    </a>
+  );
+};
 
 const getOtherAccounts = makeGetOtherAccounts();
 
@@ -228,7 +243,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                 {instance.invites_enabled && (
                   <SidebarLink
-                    to={`${baseURL}/invites`}
+                    href={`${baseURL}/invites`}
                     icon={require('@tabler/icons/icons/mailbox.svg')}
                     text={intl.formatMessage(messages.invites)}
                     onClick={onClose}

From 88b91bce3e7a25df7d229ad8980ca83a6c9abf73 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 15 May 2022 15:11:59 +0200
Subject: [PATCH 002/102] Mastodon admin API
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/admin.js                  | 136 ++++++++++++++++--
 .../features/admin/components/report.tsx      |  41 +++---
 .../admin/components/report_status.tsx        |   5 +-
 .../admin/components/unapproved_account.tsx   |   4 +-
 app/soapbox/features/admin/tabs/reports.tsx   |   2 +-
 app/soapbox/features/admin/user_index.js      |  10 +-
 app/soapbox/features/ui/index.tsx             |   2 +-
 app/soapbox/normalizers/admin_account.ts      |  55 +++++++
 app/soapbox/normalizers/admin_report.ts       |  51 +++++++
 app/soapbox/normalizers/index.ts              |   2 +
 app/soapbox/reducers/accounts.ts              |   2 +-
 app/soapbox/reducers/admin.ts                 |  75 +++++++---
 app/soapbox/selectors/index.ts                |  17 ++-
 app/soapbox/types/entities.ts                 |   6 +
 app/soapbox/utils/features.ts                 |  14 ++
 15 files changed, 361 insertions(+), 61 deletions(-)
 create mode 100644 app/soapbox/normalizers/admin_account.ts
 create mode 100644 app/soapbox/normalizers/admin_report.ts

diff --git a/app/soapbox/actions/admin.js b/app/soapbox/actions/admin.js
index 3704e114e..313cf6203 100644
--- a/app/soapbox/actions/admin.js
+++ b/app/soapbox/actions/admin.js
@@ -1,7 +1,8 @@
 import { fetchRelationships } from 'soapbox/actions/accounts';
-import { importFetchedAccount, importFetchedStatuses } from 'soapbox/actions/importer';
+import { importFetchedAccount, importFetchedAccounts, importFetchedStatuses } from 'soapbox/actions/importer';
+import { getFeatures } from 'soapbox/utils/features';
 
-import api from '../api';
+import api, { getLinks } from '../api';
 
 export const ADMIN_CONFIG_FETCH_REQUEST = 'ADMIN_CONFIG_FETCH_REQUEST';
 export const ADMIN_CONFIG_FETCH_SUCCESS = 'ADMIN_CONFIG_FETCH_SUCCESS';
@@ -99,11 +100,36 @@ export function updateConfig(configs) {
   };
 }
 
-export function fetchReports(params) {
+export function fetchReports(params = {}) {
   return (dispatch, getState) => {
+    const state = getState();
+
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
     dispatch({ type: ADMIN_REPORTS_FETCH_REQUEST, params });
+
+    if (features.mastodonAdminApi) {
+      return api(getState)
+        .get('/api/v1/admin/reports', { params })
+        .then(({ data: reports }) => {
+          reports.forEach(report => {
+            dispatch(importFetchedAccount(report.account?.account));
+            dispatch(importFetchedAccount(report.target_account?.account));
+            dispatch(importFetchedStatuses(report.statuses));
+          });
+          dispatch({ type: ADMIN_REPORTS_FETCH_SUCCESS, reports, params });
+        }).catch(error => {
+          dispatch({ type: ADMIN_REPORTS_FETCH_FAIL, error, params });
+        });
+    }
+
+    const { resolved } = params;
+
     return api(getState)
-      .get('/api/pleroma/admin/reports', { params })
+      .get('/api/pleroma/admin/reports', { params: {
+        state: resolved === false ? 'open' : (resolved ? 'resolved' : null),
+      } })
       .then(({ data: { reports } }) => {
         reports.forEach(report => {
           dispatch(importFetchedAccount(report.account));
@@ -118,9 +144,27 @@ export function fetchReports(params) {
 }
 
 function patchReports(ids, state) {
-  const reports = ids.map(id => ({ id, state }));
   return (dispatch, getState) => {
+    const state = getState();
+
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
+    const reports = ids.map(id => ({ id, state }));
+
     dispatch({ type: ADMIN_REPORTS_PATCH_REQUEST, reports });
+
+    if (features.mastodonAdminApi) {
+      return Promise.all(ids.map(id => api(getState)
+        .post(`/api/v1/admin/reports/${id}/${state === 'resolved' ? 'reopen' : 'resolve'}`)
+        .then(({ data }) => {
+          dispatch({ type: ADMIN_REPORTS_PATCH_SUCCESS, reports });
+        }).catch(error => {
+          dispatch({ type: ADMIN_REPORTS_PATCH_FAIL, error, reports });
+        }),
+      ));
+    }
+
     return api(getState)
       .patch('/api/pleroma/admin/reports', { reports })
       .then(() => {
@@ -134,12 +178,45 @@ export function closeReports(ids) {
   return patchReports(ids, 'closed');
 }
 
-export function fetchUsers(filters = [], page = 1, query, pageSize = 50) {
+export function fetchUsers(filters = [], page = 1, query, pageSize = 50, next) {
   return (dispatch, getState) => {
+    const state = getState();
+
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
+    dispatch({ type: ADMIN_USERS_FETCH_REQUEST, filters, page, pageSize });
+
+    if (features.mastodonAdminApi) {
+      const params = {
+        username: query,
+      };
+
+      if (filters.includes('local')) params.local = true;
+      if (filters.includes('active')) params.active = true;
+      if (filters.includes('need_approval')) params.pending = true;
+
+      return api(getState)
+        .get(next || '/api/v1/admin/accounts', { params })
+        .then(({ data: accounts, ...response }) => {
+          const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+          const count = next
+            ? page * pageSize + 1
+            : (page - 1) * pageSize + accounts.length;
+
+          dispatch(importFetchedAccounts(accounts.map(({ account }) => account)));
+          dispatch(fetchRelationships(accounts.map(account => account.id)));
+          dispatch({ type: ADMIN_USERS_FETCH_SUCCESS, users: accounts, count, pageSize, filters, page, next: next?.uri || false });
+          return { users: accounts, count, pageSize, next: next?.uri || false };
+        }).catch(error => {
+          dispatch({ type: ADMIN_USERS_FETCH_FAIL, error, filters, page, pageSize });
+        });
+    }
+
     const params = { filters: filters.join(), page, page_size: pageSize };
     if (query) params.query = query;
 
-    dispatch({ type: ADMIN_USERS_FETCH_REQUEST, filters, page, pageSize });
     return api(getState)
       .get('/api/pleroma/admin/users', { params })
       .then(({ data: { users, count, page_size: pageSize } }) => {
@@ -152,10 +229,31 @@ export function fetchUsers(filters = [], page = 1, query, pageSize = 50) {
   };
 }
 
-export function deactivateUsers(accountIds) {
+export function deactivateUsers(accountIds, reportId) {
   return (dispatch, getState) => {
-    const nicknames = nicknamesFromIds(getState, accountIds);
+    const state = getState();
+
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
     dispatch({ type: ADMIN_USERS_DEACTIVATE_REQUEST, accountIds });
+
+    if (features.mastodonAdminApi) {
+      return Promise.all(accountIds.map(accountId => {
+        api(getState)
+          .post(`/api/v1/admin/accounts/${accountId}/action`, {
+            type: 'disable',
+            report_id: reportId,
+          })
+          .then(() => {
+            dispatch({ type: ADMIN_USERS_DEACTIVATE_SUCCESS, accountIds: [accountId] });
+          }).catch(error => {
+            dispatch({ type: ADMIN_USERS_DEACTIVATE_FAIL, error, accountIds: [accountId] });
+          });
+      }));
+    }
+
+    const nicknames = nicknamesFromIds(getState, accountIds);
     return api(getState)
       .patch('/api/pleroma/admin/users/deactivate', { nicknames })
       .then(({ data: { users } }) => {
@@ -182,8 +280,26 @@ export function deleteUsers(accountIds) {
 
 export function approveUsers(accountIds) {
   return (dispatch, getState) => {
-    const nicknames = nicknamesFromIds(getState, accountIds);
+    const state = getState();
+
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
     dispatch({ type: ADMIN_USERS_APPROVE_REQUEST, accountIds });
+
+    if (features.mastodonAdminApi) {
+      return Promise.all(accountIds.map(accountId => {
+        api(getState)
+          .post(`/api/v1/admin/accounts/${accountId}/approve`)
+          .then(({ data: user }) => {
+            dispatch({ type: ADMIN_USERS_APPROVE_SUCCESS, users: [user], accountIds: [accountId] });
+          }).catch(error => {
+            dispatch({ type: ADMIN_USERS_APPROVE_FAIL, error, accountIds: [accountId] });
+          });
+      }));
+    }
+
+    const nicknames = nicknamesFromIds(getState, accountIds);
     return api(getState)
       .patch('/api/pleroma/admin/users/approve', { nicknames })
       .then(({ data: { users } }) => {
diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index 6d3da6009..82ec5804e 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -14,8 +14,8 @@ import { useAppDispatch } from 'soapbox/hooks';
 
 import ReportStatus from './report_status';
 
-import type { Map as ImmutableMap, List as ImmutableList } from 'immutable';
-import type { Status } from 'soapbox/types/entities';
+import type { List as ImmutableList } from 'immutable';
+import type { Account, AdminReport, Status } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   reportClosed: { id: 'admin.reports.report_closed_message', defaultMessage: 'Report on @{name} was closed' },
@@ -24,7 +24,7 @@ const messages = defineMessages({
 });
 
 interface IReport {
-  report: ImmutableMap<string, any>;
+  report: AdminReport;
 }
 
 const Report: React.FC<IReport> = ({ report }) => {
@@ -33,32 +33,35 @@ const Report: React.FC<IReport> = ({ report }) => {
 
   const [accordionExpanded, setAccordionExpanded] = useState(false);
 
+  const account = report.account as Account;
+  const targetAccount = report.target_account as Account;
+
   const makeMenu = () => {
     return [{
-      text: intl.formatMessage(messages.deactivateUser, { name: report.getIn(['account', 'username']) as string }),
+      text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username as string }),
       action: handleDeactivateUser,
       icon: require('@tabler/icons/icons/user-off.svg'),
     }, {
-      text: intl.formatMessage(messages.deleteUser, { name: report.getIn(['account', 'username']) as string }),
+      text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username as string }),
       action: handleDeleteUser,
       icon: require('@tabler/icons/icons/user-minus.svg'),
     }];
   };
 
   const handleCloseReport = () => {
-    dispatch(closeReports([report.get('id')])).then(() => {
-      const message = intl.formatMessage(messages.reportClosed, { name: report.getIn(['account', 'username']) as string });
+    dispatch(closeReports([report.id])).then(() => {
+      const message = intl.formatMessage(messages.reportClosed, { name: targetAccount.username as string });
       dispatch(snackbar.success(message));
     }).catch(() => {});
   };
 
   const handleDeactivateUser = () => {
-    const accountId = report.getIn(['account', 'id']);
+    const accountId = targetAccount.id;
     dispatch(deactivateUserModal(intl, accountId, () => handleCloseReport()));
   };
 
   const handleDeleteUser = () => {
-    const accountId = report.getIn(['account', 'id']) as string;
+    const accountId = targetAccount.id as string;
     dispatch(deleteUserModal(intl, accountId, () => handleCloseReport()));
   };
 
@@ -67,17 +70,17 @@ const Report: React.FC<IReport> = ({ report }) => {
   };
 
   const menu = makeMenu();
-  const statuses = report.get('statuses') as ImmutableList<Status>;
+  const statuses = report.statuses as ImmutableList<Status>;
   const statusCount = statuses.count();
-  const acct = report.getIn(['account', 'acct']) as string;
-  const reporterAcct = report.getIn(['actor', 'acct']) as string;
+  const acct = targetAccount.acct as string;
+  const reporterAcct = account.acct as string;
 
   return (
-    <div className='admin-report' key={report.get('id')}>
+    <div className='admin-report' key={report.id}>
       <div className='admin-report__avatar'>
-        <HoverRefWrapper accountId={report.getIn(['account', 'id']) as string} inline>
+        <HoverRefWrapper accountId={targetAccount.id as string} inline>
           <Link to={`/@${acct}`} title={acct}>
-            <Avatar account={report.get('account')} size={32} />
+            <Avatar account={targetAccount} size={32} />
           </Link>
         </HoverRefWrapper>
       </div>
@@ -87,7 +90,7 @@ const Report: React.FC<IReport> = ({ report }) => {
             id='admin.reports.report_title'
             defaultMessage='Report on {acct}'
             values={{ acct: (
-              <HoverRefWrapper accountId={report.getIn(['account', 'id']) as string} inline>
+              <HoverRefWrapper accountId={account.id as string} inline>
                 <Link to={`/@${acct}`} title={acct}>@{acct}</Link>
               </HoverRefWrapper>
             ) }}
@@ -105,12 +108,12 @@ const Report: React.FC<IReport> = ({ report }) => {
           )}
         </div>
         <div className='admin-report__quote'>
-          {report.get('content', '').length > 0 && (
-            <blockquote className='md' dangerouslySetInnerHTML={{ __html: report.get('content') }} />
+          {(report.comment || '').length > 0 && (
+            <blockquote className='md' dangerouslySetInnerHTML={{ __html: report.comment }} />
           )}
           <span className='byline'>
             &mdash;
-            <HoverRefWrapper accountId={report.getIn(['actor', 'id']) as string} inline>
+            <HoverRefWrapper accountId={account.id as string} inline>
               <Link to={`/@${reporterAcct}`} title={reporterAcct}>@{reporterAcct}</Link>
             </HoverRefWrapper>
           </span>
diff --git a/app/soapbox/features/admin/components/report_status.tsx b/app/soapbox/features/admin/components/report_status.tsx
index 00755a6c4..c882f0f5a 100644
--- a/app/soapbox/features/admin/components/report_status.tsx
+++ b/app/soapbox/features/admin/components/report_status.tsx
@@ -10,8 +10,7 @@ import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch } from 'soapbox/hooks';
 
-import type { Map as ImmutableMap } from 'immutable';
-import type { Status, Attachment } from 'soapbox/types/entities';
+import type { AdminReport, Attachment, Status } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   viewStatus: { id: 'admin.reports.actions.view_status', defaultMessage: 'View post' },
@@ -20,7 +19,7 @@ const messages = defineMessages({
 
 interface IReportStatus {
   status: Status,
-  report?: ImmutableMap<string, any>,
+  report?: AdminReport,
 }
 
 const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
diff --git a/app/soapbox/features/admin/components/unapproved_account.tsx b/app/soapbox/features/admin/components/unapproved_account.tsx
index f000bb173..5f38684cb 100644
--- a/app/soapbox/features/admin/components/unapproved_account.tsx
+++ b/app/soapbox/features/admin/components/unapproved_account.tsx
@@ -26,6 +26,7 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
   const dispatch = useAppDispatch();
 
   const account = useAppSelector(state => getAccount(state, accountId));
+  const adminAccount = useAppSelector(state => state.admin.users.get(accountId));
 
   if (!account) return null;
 
@@ -45,12 +46,11 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
     }));
   };
 
-
   return (
     <div className='unapproved-account'>
       <div className='unapproved-account__bio'>
         <div className='unapproved-account__nickname'>@{account.get('acct')}</div>
-        <blockquote className='md'>{account.pleroma.getIn(['admin', 'registration_reason'], '') as string}</blockquote>
+        <blockquote className='md'>{adminAccount?.invite_request || ''}</blockquote>
       </div>
       <div className='unapproved-account__actions'>
         <IconButton src={require('@tabler/icons/icons/check.svg')} onClick={handleApprove} />
diff --git a/app/soapbox/features/admin/tabs/reports.tsx b/app/soapbox/features/admin/tabs/reports.tsx
index 78cc7a6de..8a2eca8c7 100644
--- a/app/soapbox/features/admin/tabs/reports.tsx
+++ b/app/soapbox/features/admin/tabs/reports.tsx
@@ -42,7 +42,7 @@ const Reports: React.FC = () => {
       scrollKey='admin-reports'
       emptyMessage={intl.formatMessage(messages.emptyMessage)}
     >
-      {reports.map(report => <Report report={report} key={report.get('id')} />)}
+      {reports.map(report => report && <Report report={report} key={report?.id} />)}
     </ScrollableList>
   );
 };
diff --git a/app/soapbox/features/admin/user_index.js b/app/soapbox/features/admin/user_index.js
index eeeba734a..7c06609a3 100644
--- a/app/soapbox/features/admin/user_index.js
+++ b/app/soapbox/features/admin/user_index.js
@@ -34,6 +34,7 @@ class UserIndex extends ImmutablePureComponent {
     pageSize: 50,
     page: 0,
     query: '',
+    nextLink: undefined,
   }
 
   clearState = callback => {
@@ -45,11 +46,11 @@ class UserIndex extends ImmutablePureComponent {
   }
 
   fetchNextPage = () => {
-    const { filters, page, query, pageSize } = this.state;
+    const { filters, page, query, pageSize, nextLink } = this.state;
     const nextPage = page + 1;
 
-    this.props.dispatch(fetchUsers(filters, nextPage, query, pageSize))
-      .then(({ users, count }) => {
+    this.props.dispatch(fetchUsers(filters, nextPage, query, pageSize, nextLink))
+      .then(({ users, count, next }) => {
         const newIds = users.map(user => user.id);
 
         this.setState({
@@ -57,6 +58,7 @@ class UserIndex extends ImmutablePureComponent {
           accountIds: this.state.accountIds.union(newIds),
           total: count,
           page: nextPage,
+          nextLink: next,
         });
       })
       .catch(() => {});
@@ -97,7 +99,7 @@ class UserIndex extends ImmutablePureComponent {
   render() {
     const { intl } = this.props;
     const { accountIds, isLoading } = this.state;
-    const hasMore = accountIds.count() < this.state.total;
+    const hasMore = accountIds.count() < this.state.total && this.state.nextLink !== false;
 
     const showLoading = isLoading && accountIds.isEmpty();
 
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 6cfab8d89..1a97617cb 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -455,7 +455,7 @@ const UI: React.FC = ({ children }) => {
     }
 
     if (account.staff) {
-      dispatch(fetchReports({ state: 'open' }));
+      dispatch(fetchReports({ resolved: false }));
       dispatch(fetchUsers(['local', 'need_approval']));
     }
 
diff --git a/app/soapbox/normalizers/admin_account.ts b/app/soapbox/normalizers/admin_account.ts
new file mode 100644
index 000000000..4e040dfb1
--- /dev/null
+++ b/app/soapbox/normalizers/admin_account.ts
@@ -0,0 +1,55 @@
+/**
+ * Admin account normalizer:
+ * Converts API admin-level account information into our internal format.
+ */
+import {
+  Map as ImmutableMap,
+  List as ImmutableList,
+  Record as ImmutableRecord,
+  fromJS,
+} from 'immutable';
+
+import type { ReducerAccount } from 'soapbox/reducers/accounts';
+import type { Account, EmbeddedEntity } from 'soapbox/types/entities';
+
+export const AdminAccountRecord = ImmutableRecord({
+  account: null as EmbeddedEntity<Account | ReducerAccount>,
+  approved: false,
+  confirmed: false,
+  created_at: new Date(),
+  disabled: false,
+  domain: '',
+  email: '',
+  id: '',
+  invite_request: null as string | null,
+  ip: null as string | null,
+  ips: ImmutableList<string>(),
+  locale: null as string | null,
+  role: null as 'admin' | 'moderator' | null,
+  sensitized: false,
+  silenced: false,
+  suspended: false,
+  username: '',
+});
+
+const normalizePleromaAccount = (account: ImmutableMap<string, any>) => {
+  if (!account.get('account')) {
+    return account.withMutations(account => {
+      account.set('approved', account.get('is_approved'));
+      account.set('confirmed', account.get('is_confirmed'));
+      account.set('disabled', !account.get('is_active'));
+      account.set('invite_request', account.get('registration_reason'));
+      account.set('role', account.getIn(['roles', 'admin']) ? 'admin' : (account.getIn(['roles', 'moderator']) ? 'moderator' : null));
+    });
+  }
+
+  return account;
+};
+
+export const normalizeAdminAccount = (account: Record<string, any>) => {
+  return AdminAccountRecord(
+    ImmutableMap(fromJS(account)).withMutations((account: ImmutableMap<string, any>) => {
+      normalizePleromaAccount(account);
+    }),
+  );
+};
diff --git a/app/soapbox/normalizers/admin_report.ts b/app/soapbox/normalizers/admin_report.ts
new file mode 100644
index 000000000..23a60bc04
--- /dev/null
+++ b/app/soapbox/normalizers/admin_report.ts
@@ -0,0 +1,51 @@
+/**
+ * Admin report normalizer:
+ * Converts API admin-level report information into our internal format.
+ */
+import {
+  Map as ImmutableMap,
+  List as ImmutableList,
+  Record as ImmutableRecord,
+  fromJS,
+} from 'immutable';
+
+import type { ReducerAccount } from 'soapbox/reducers/accounts';
+import type { Account, EmbeddedEntity, Status } from 'soapbox/types/entities';
+
+export const AdminReportRecord = ImmutableRecord({
+  account: null as EmbeddedEntity<Account | ReducerAccount>,
+  action_taken: false,
+  action_taken_by_account: null as EmbeddedEntity<Account | ReducerAccount> | null,
+  assigned_account: null as EmbeddedEntity<Account | ReducerAccount> | null,
+  category: '',
+  comment: '',
+  created_at: new Date(),
+  id: '',
+  rules: ImmutableList<string>(),
+  statuses: ImmutableList<EmbeddedEntity<Status>>(),
+  target_account: null as EmbeddedEntity<Account | ReducerAccount>,
+  updated_at:  new Date(),
+});
+
+const normalizePleromaReport = (report: ImmutableMap<string, any>) => {
+  if (report.get('actor')){
+    return report.withMutations(report => {
+      report.set('target_account', report.get('account'));
+      report.set('account', report.get('actor'));
+
+      report.set('action_taken', report.get('state') !== 'open');
+      report.set('comment', report.get('content'));
+      report.set('updated_at', report.get('created_at'));
+    });
+  }
+
+  return report;
+};
+
+export const normalizeAdminReport = (report: Record<string, any>) => {
+  return AdminReportRecord(
+    ImmutableMap(fromJS(report)).withMutations((report: ImmutableMap<string, any>) => {
+      normalizePleromaReport(report);
+    }),
+  );
+};
diff --git a/app/soapbox/normalizers/index.ts b/app/soapbox/normalizers/index.ts
index 60802a057..9beba41af 100644
--- a/app/soapbox/normalizers/index.ts
+++ b/app/soapbox/normalizers/index.ts
@@ -1,4 +1,6 @@
 export { AccountRecord, FieldRecord, normalizeAccount } from './account';
+export { AdminAccountRecord, normalizeAdminAccount } from './admin_account';
+export { AdminReportRecord, normalizeAdminReport } from './admin_report';
 export { AttachmentRecord, normalizeAttachment } from './attachment';
 export { CardRecord, normalizeCard } from './card';
 export { ChatRecord, normalizeChat } from './chat';
diff --git a/app/soapbox/reducers/accounts.ts b/app/soapbox/reducers/accounts.ts
index e7f4d4753..5952d2ef1 100644
--- a/app/soapbox/reducers/accounts.ts
+++ b/app/soapbox/reducers/accounts.ts
@@ -228,7 +228,7 @@ const importAdminUser = (state: State, adminUser: ImmutableMap<string, any>): St
 
 const importAdminUsers = (state: State, adminUsers: Array<Record<string, any>>): State => {
   return state.withMutations((state: State) => {
-    adminUsers.forEach(adminUser => {
+    adminUsers.filter(adminUser => !adminUser.account).forEach(adminUser => {
       importAdminUser(state, ImmutableMap(fromJS(adminUser)));
     });
   });
diff --git a/app/soapbox/reducers/admin.ts b/app/soapbox/reducers/admin.ts
index a22650da4..fb2635371 100644
--- a/app/soapbox/reducers/admin.ts
+++ b/app/soapbox/reducers/admin.ts
@@ -19,15 +19,18 @@ import {
   ADMIN_USERS_DELETE_SUCCESS,
   ADMIN_USERS_APPROVE_REQUEST,
   ADMIN_USERS_APPROVE_SUCCESS,
-} from '../actions/admin';
+} from 'soapbox/actions/admin';
+import { normalizeAdminReport, normalizeAdminAccount } from 'soapbox/normalizers';
+import { APIEntity } from 'soapbox/types/entities';
+import { normalizeId } from 'soapbox/utils/normalizers';
 
 import type { AnyAction } from 'redux';
 import type { Config } from 'soapbox/utils/config_db';
 
 const ReducerRecord = ImmutableRecord({
-  reports: ImmutableMap<string, any>(),
+  reports: ImmutableMap<string, ReducerAdminReport>(),
   openReports: ImmutableOrderedSet<string>(),
-  users: ImmutableMap<string, any>(),
+  users: ImmutableMap<string, ReducerAdminAccount>(),
   latestUsers: ImmutableOrderedSet<string>(),
   awaitingApproval: ImmutableOrderedSet<string>(),
   configs: ImmutableList<Config>(),
@@ -36,6 +39,21 @@ const ReducerRecord = ImmutableRecord({
 
 type State = ReturnType<typeof ReducerRecord>;
 
+type AdminAccountRecord = ReturnType<typeof normalizeAdminAccount>;
+type AdminReportRecord = ReturnType<typeof normalizeAdminReport>;
+
+export interface ReducerAdminAccount extends AdminAccountRecord {
+  account: string | null,
+}
+
+export interface ReducerAdminReport extends AdminReportRecord {
+  account: string | null,
+  target_account: string | null,
+  action_taken_by_account: string | null,
+  assigned_account: string | null,
+  statuses: ImmutableList<string | null>,
+}
+
 // Umm... based?
 // https://itnext.io/typescript-extract-unpack-a-type-from-a-generic-baca7af14e51
 type InnerRecord<R> = R extends ImmutableRecord<infer TProps> ? TProps : never;
@@ -46,7 +64,6 @@ type InnerState = InnerRecord<State>;
 type FilterConditionally<Source, Condition> = Pick<Source, {[K in keyof Source]: Source[K] extends Condition ? K : never}[keyof Source]>;
 
 type SetKeys = keyof FilterConditionally<InnerState, ImmutableOrderedSet<string>>;
-
 type APIReport = { id: string, state: string, statuses: any[] };
 type APIUser = { id: string, email: string, nickname: string, registration_reason: string };
 
@@ -84,12 +101,17 @@ const maybeImportLatest = (state: State, users: APIUser[], filters: Filter[], pa
   }
 };
 
-const importUser = (state: State, user: APIUser): State => (
-  state.setIn(['users', user.id], ImmutableMap({
-    email: user.email,
-    registration_reason: user.registration_reason,
-  }))
-);
+const minifyUser = (user: AdminAccountRecord): ReducerAdminAccount => {
+  return user.mergeWith((o, n) => n || o, {
+    account: normalizeId(user.getIn(['account', 'id'])),
+  }) as ReducerAdminAccount;
+};
+
+const fixUser = (user: APIEntity): ReducerAdminAccount => {
+  return normalizeAdminAccount(user).withMutations(user => {
+    minifyUser(user);
+  }) as ReducerAdminAccount;
+};
 
 function importUsers(state: State, users: APIUser[], filters: Filter[], page: number): State {
   return state.withMutations(state => {
@@ -97,7 +119,8 @@ function importUsers(state: State, users: APIUser[], filters: Filter[], page: nu
     maybeImportLatest(state, users, filters, page);
 
     users.forEach(user => {
-      importUser(state, user);
+      const normalizedUser = fixUser(user);
+      state.setIn(['users', user.id], normalizedUser);
     });
   });
 }
@@ -114,20 +137,38 @@ function deleteUsers(state: State, accountIds: string[]): State {
 function approveUsers(state: State, users: APIUser[]): State {
   return state.withMutations(state => {
     users.forEach(user => {
-      state.update('awaitingApproval', orderedSet => orderedSet.delete(user.nickname));
-      state.setIn(['users', user.nickname], fromJS(user));
+      const normalizedUser = fixUser(user);
+      state.update('awaitingApproval', orderedSet => orderedSet.delete(user.id));
+      state.setIn(['users', user.id], normalizedUser);
     });
   });
 }
 
-function importReports(state: State, reports: APIReport[]): State {
+const minifyReport = (report: AdminReportRecord): ReducerAdminReport => {
+  return report.mergeWith((o, n) => n || o, {
+    account: normalizeId(report.getIn(['account', 'id'])),
+    target_account: normalizeId(report.getIn(['target_account', 'id'])),
+    action_taken_by_account: normalizeId(report.getIn(['action_taken_by_account', 'id'])),
+    assigned_account: normalizeId(report.getIn(['assigned_account', 'id'])),
+
+    statuses: report.get('statuses').map((status: any) => normalizeId(status.get('id'))),
+  }) as ReducerAdminReport;
+};
+
+const fixReport = (report: APIEntity): ReducerAdminReport => {
+  return normalizeAdminReport(report).withMutations(report => {
+    minifyReport(report);
+  }) as ReducerAdminReport;
+};
+
+function importReports(state: State, reports: APIEntity[]): State {
   return state.withMutations(state => {
     reports.forEach(report => {
-      report.statuses = report.statuses.map(status => status.id);
-      if (report.state === 'open') {
+      const normalizedReport = fixReport(report);
+      if (!normalizedReport.action_taken) {
         state.update('openReports', orderedSet => orderedSet.add(report.id));
       }
-      state.setIn(['reports', report.id], fromJS(report));
+      state.setIn(['reports', report.id], normalizedReport);
     });
   });
 }
diff --git a/app/soapbox/selectors/index.ts b/app/soapbox/selectors/index.ts
index d6e69e90f..7d77b4891 100644
--- a/app/soapbox/selectors/index.ts
+++ b/app/soapbox/selectors/index.ts
@@ -266,15 +266,26 @@ export const makeGetReport = () => {
   return createSelector(
     [
       (state: RootState, id: string) => state.admin.reports.get(id),
-      (state: RootState, id: string) => ImmutableList(fromJS(state.admin.reports.getIn([id, 'statuses']))).map(
+      (state: RootState, id: string) => state.accounts.get(state.admin.reports.get(id)?.account || ''),
+      (state: RootState, id: string) => state.accounts.get(state.admin.reports.get(id)?.target_account || ''),
+      // (state: RootState, id: string) => state.accounts.get(state.admin.reports.get(id)?.action_taken_by_account || ''),
+      // (state: RootState, id: string) => state.accounts.get(state.admin.reports.get(id)?.assigned_account || ''),
+      (state: RootState, id: string) => ImmutableList(fromJS(state.admin.reports.get(id)?.statuses)).map(
         statusId => state.statuses.get(normalizeId(statusId)))
         .filter((s: any) => s)
         .map((s: any) => getStatus(state, s.toJS())),
     ],
 
-    (report, statuses) => {
+    (report, account, targetAccount, statuses) => {
       if (!report) return null;
-      return report.set('statuses', statuses);
+      return report.withMutations((report) => {
+        // @ts-ignore
+        report.set('account', account);
+        // @ts-ignore
+        report.set('target_account', targetAccount);
+        // @ts-ignore
+        report.set('statuses', statuses);
+      });
     },
   );
 };
diff --git a/app/soapbox/types/entities.ts b/app/soapbox/types/entities.ts
index d01698e46..c65cecaa4 100644
--- a/app/soapbox/types/entities.ts
+++ b/app/soapbox/types/entities.ts
@@ -1,4 +1,6 @@
 import {
+  AdminAccountRecord,
+  AdminReportRecord,
   AccountRecord,
   AttachmentRecord,
   CardRecord,
@@ -17,6 +19,8 @@ import {
 
 import type { Record as ImmutableRecord } from 'immutable';
 
+type AdminAccount = ReturnType<typeof AdminAccountRecord>;
+type AdminReport = ReturnType<typeof AdminReportRecord>;
 type Attachment = ReturnType<typeof AttachmentRecord>;
 type Card = ReturnType<typeof CardRecord>;
 type Chat = ReturnType<typeof ChatRecord>;
@@ -47,6 +51,8 @@ type APIEntity = Record<string, any>;
 type EmbeddedEntity<T extends object> = null | string | ReturnType<ImmutableRecord.Factory<T>>;
 
 export {
+  AdminAccount,
+  AdminReport,
   Account,
   Attachment,
   Card,
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 1e4d76266..2f2a69d32 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -316,6 +316,20 @@ const getInstanceFeatures = (instance: Instance) => {
       v.software === PLEROMA && gte(v.version, '0.9.9'),
     ]),
 
+    /**
+     * Can perform moderation actions with account and reports.
+     * @see {@link https://docs.joinmastodon.org/methods/admin/}
+     * @see GET /api/v1/admin/reports
+     * @see POST /api/v1/admin/reports/:report_id/resolve
+     * @see POST /api/v1/admin/reports/:report_id/reopen
+     * @see POST /api/v1/admin/accounts/:account_id/action
+     * @see POST /api/v1/admin/accounts/:account_id/approve
+     */
+    mastodonAdminApi: any([
+      v.software === MASTODON && gte(v.compatVersion, '2.9.1'),
+      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+    ]),
+
     /**
      * Can upload media attachments to statuses.
      * @see POST /api/v1/media

From f70d44f67cce1573fbebbc63da498b19d1432ad7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 13 May 2022 23:14:55 +0200
Subject: [PATCH 003/102] Display familiar followers on Mastodon
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/familiar_followers.ts     | 59 +++++++++++++
 .../components/status_reply_mentions.js       |  2 +-
 .../ui/components/birthdays_modal.tsx         |  4 +-
 .../components/familiar_followers_modal.tsx   | 57 +++++++++++++
 .../features/ui/components/modal_root.js      |  2 +
 .../components/profile_familiar_followers.tsx | 83 +++++++++++++++++++
 .../ui/components/profile_info_panel.tsx      |  3 +
 .../features/ui/util/async-components.ts      |  4 +
 app/soapbox/locales/pl.json                   |  5 ++
 .../reducers/__tests__/user_lists-test.js     |  1 +
 app/soapbox/reducers/user_lists.js            |  6 ++
 app/soapbox/utils/features.ts                 |  6 ++
 12 files changed, 229 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/actions/familiar_followers.ts
 create mode 100644 app/soapbox/features/ui/components/familiar_followers_modal.tsx
 create mode 100644 app/soapbox/features/ui/components/profile_familiar_followers.tsx

diff --git a/app/soapbox/actions/familiar_followers.ts b/app/soapbox/actions/familiar_followers.ts
new file mode 100644
index 000000000..ec6eca6d8
--- /dev/null
+++ b/app/soapbox/actions/familiar_followers.ts
@@ -0,0 +1,59 @@
+import { RootState } from 'soapbox/store';
+
+import api from '../api';
+
+import { ACCOUNTS_IMPORT, importFetchedAccounts } from './importer';
+
+import type { APIEntity } from 'soapbox/types/entities';
+
+export const FAMILIAR_FOLLOWERS_FETCH_REQUEST = 'FAMILIAR_FOLLOWERS_FETCH_REQUEST';
+export const FAMILIAR_FOLLOWERS_FETCH_SUCCESS = 'FAMILIAR_FOLLOWERS_FETCH_SUCCESS';
+export const FAMILIAR_FOLLOWERS_FETCH_FAIL    = 'FAMILIAR_FOLLOWERS_FETCH_FAIL';
+
+type FamiliarFollowersFetchRequestAction = {
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_REQUEST,
+  id: string,
+}
+
+type FamiliarFollowersFetchRequestSuccessAction = {
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
+  id: string,
+  accounts: Array<APIEntity>,
+}
+
+type FamiliarFollowersFetchRequestFailAction = {
+  type: typeof FAMILIAR_FOLLOWERS_FETCH_FAIL,
+  id: string,
+  error: any,
+}
+
+type AccountsImportAction = {
+  type: typeof ACCOUNTS_IMPORT,
+  accounts: Array<APIEntity>,
+}
+
+export type FamiliarFollowersActions = FamiliarFollowersFetchRequestAction | FamiliarFollowersFetchRequestSuccessAction | FamiliarFollowersFetchRequestFailAction | AccountsImportAction
+
+export const fetchAccountFamiliarFollowers = (accountId: string) => (dispatch: React.Dispatch<FamiliarFollowersActions>, getState: () => RootState) => {
+  dispatch({
+    type: FAMILIAR_FOLLOWERS_FETCH_REQUEST,
+    id: accountId,
+  });
+
+  api(getState).get(`/api/v1/accounts/familiar_followers?id=${accountId}`)
+    .then(({ data }) => {
+      const accounts = data.find(({ id }: { id: string }) => id === accountId).accounts;
+
+      dispatch(importFetchedAccounts(accounts) as AccountsImportAction);
+      dispatch({
+        type: FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
+        id: accountId,
+        accounts,
+      });
+    })
+    .catch(error => dispatch({
+      type: FAMILIAR_FOLLOWERS_FETCH_FAIL,
+      id: accountId,
+      error,
+    }));
+};
diff --git a/app/soapbox/components/status_reply_mentions.js b/app/soapbox/components/status_reply_mentions.js
index 76a48d5df..21b68ff21 100644
--- a/app/soapbox/components/status_reply_mentions.js
+++ b/app/soapbox/components/status_reply_mentions.js
@@ -64,7 +64,7 @@ class StatusReplyMentions extends ImmutablePureComponent {
           id='reply_mentions.reply'
           defaultMessage='Replying to {accounts}{more}'
           values={{
-            accounts: to.slice(0, 2).map(account => (<>
+            accounts: to.slice(0, 2).map((account) => (<>
               <HoverRefWrapper accountId={account.get('id')} inline>
                 <Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('username')}</Link>
               </HoverRefWrapper>
diff --git a/app/soapbox/features/ui/components/birthdays_modal.tsx b/app/soapbox/features/ui/components/birthdays_modal.tsx
index 6c43bd7b4..f0b25f5f4 100644
--- a/app/soapbox/features/ui/components/birthdays_modal.tsx
+++ b/app/soapbox/features/ui/components/birthdays_modal.tsx
@@ -22,11 +22,11 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => {
   if (!accountIds) {
     body = <Spinner />;
   } else {
-    const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this post yet. When someone does, they will show up here.' />;
+    const emptyMessage = <FormattedMessage id='birthdays_modal.empty' defaultMessage='None of your friends have birthday today.' />;
 
     body = (
       <ScrollableList
-        scrollKey='reblogs'
+        scrollKey='birthdays'
         emptyMessage={emptyMessage}
         itemClassName='pb-3'
       >
diff --git a/app/soapbox/features/ui/components/familiar_followers_modal.tsx b/app/soapbox/features/ui/components/familiar_followers_modal.tsx
new file mode 100644
index 000000000..0ec081d58
--- /dev/null
+++ b/app/soapbox/features/ui/components/familiar_followers_modal.tsx
@@ -0,0 +1,57 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Modal, Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const getAccount = makeGetAccount();
+
+interface IFamiliarFollowersModal {
+  accountId: string,
+  onClose: (string: string) => void,
+}
+
+const FamiliarFollowersModal = ({ accountId, onClose }: IFamiliarFollowersModal) => {
+  const account = useAppSelector(state => getAccount(state, accountId));
+  const familiarFollowerIds: ImmutableOrderedSet<string> = useAppSelector(state => state.user_lists.getIn(['familiar_followers', accountId]));
+
+  const onClickClose = () => {
+    onClose('FAMILIAR_FOLLOWERS');
+  };
+
+  let body;
+
+  if (!account || !familiarFollowerIds) {
+    body = <Spinner />;
+  } else {
+    const emptyMessage = <FormattedMessage id='account.familiar_followers.empty' defaultMessage='No one you know follows {name}.' values={{ name: <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} /> }} />;
+
+    body = (
+      <ScrollableList
+        scrollKey='familiar_followers'
+        emptyMessage={emptyMessage}
+        itemClassName='pb-3'
+      >
+        {familiarFollowerIds.map(id =>
+          <AccountContainer key={id} id={id} />,
+        )}
+      </ScrollableList>
+    );
+  }
+
+
+  return (
+    <Modal
+      title={<FormattedMessage id='column.familiar_followers' defaultMessage='People you know following {name}' values={{ name: <span dangerouslySetInnerHTML={{ __html: account?.display_name_html || '' }} /> }} />}
+      onClose={onClickClose}
+    >
+      {body}
+    </Modal>
+  );
+};
+
+export default FamiliarFollowersModal;
diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js
index 78f9ee2a4..98daaa78d 100644
--- a/app/soapbox/features/ui/components/modal_root.js
+++ b/app/soapbox/features/ui/components/modal_root.js
@@ -30,6 +30,7 @@ import {
   BirthdaysModal,
   AccountNoteModal,
   CompareHistoryModal,
+  FamiliarFollowersModal,
 } from 'soapbox/features/ui/util/async-components';
 
 import BundleContainer from '../containers/bundle_container';
@@ -66,6 +67,7 @@ const MODAL_COMPONENTS = {
   'BIRTHDAYS': BirthdaysModal,
   'ACCOUNT_NOTE': AccountNoteModal,
   'COMPARE_HISTORY': CompareHistoryModal,
+  'FAMILIAR_FOLLOWERS': FamiliarFollowersModal,
 };
 
 export default class ModalRoot extends React.PureComponent {
diff --git a/app/soapbox/features/ui/components/profile_familiar_followers.tsx b/app/soapbox/features/ui/components/profile_familiar_followers.tsx
new file mode 100644
index 000000000..a0dcef2c9
--- /dev/null
+++ b/app/soapbox/features/ui/components/profile_familiar_followers.tsx
@@ -0,0 +1,83 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import React from 'react';
+import { useEffect } from 'react';
+import { FormattedList, FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+import { fetchAccountFamiliarFollowers } from 'soapbox/actions/familiar_followers';
+import { openModal } from 'soapbox/actions/modals';
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
+import { Text } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification_badge';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+import { getFeatures } from 'soapbox/utils/features';
+
+import type { Account } from 'soapbox/types/entities';
+
+const getAccount = makeGetAccount();
+
+interface IProfileFamiliarFollowers {
+  account: Account,
+}
+
+const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account }) => {
+  const dispatch = useDispatch();
+  const me = useAppSelector((state) => state.me);
+  const features = useAppSelector((state) => getFeatures(state.instance));
+  const familiarFollowerIds: ImmutableOrderedSet<string> = useAppSelector(state => state.user_lists.getIn(['familiar_followers', account.id], ImmutableOrderedSet()));
+  const familiarFollowers: ImmutableOrderedSet<Account | null> = useAppSelector(state => familiarFollowerIds.slice(0, 2).map(accountId => getAccount(state, accountId)));
+
+  useEffect(() => {
+    if (me && features.familiarFollowers) {
+      dispatch(fetchAccountFamiliarFollowers(account.id));
+    }
+  }, []);
+
+  const openFamiliarFollowersModal = () => {
+    dispatch(openModal('FAMILIAR_FOLLOWERS', {
+      accountId: account.id,
+    }));
+  };
+
+  if (familiarFollowerIds.size === 0) {
+    return null;
+  }
+
+  const accounts: Array<React.ReactNode> = familiarFollowers.map(account => !!account && (
+    <HoverRefWrapper accountId={account.id} inline>
+      <Link className='mention' to={`/@${account.acct}`}>
+        <span dangerouslySetInnerHTML={{ __html: account.display_name_html }} />
+
+        {account.verified && <VerificationBadge />}
+      </Link>
+    </HoverRefWrapper>
+  )).toArray();
+
+  if (familiarFollowerIds.size > 2) {
+    accounts.push(
+      <span className='hover:underline cursor-pointer' role='presentation' onClick={openFamiliarFollowersModal}>
+        <FormattedMessage
+          id='account.familiar_followers.more'
+          defaultMessage='{count} {count, plural, one {other} other {others}} you follow'
+          values={{ count: familiarFollowerIds.size - familiarFollowers.size }}
+        />
+      </span>,
+    );
+  }
+
+  return (
+    <Text theme='muted' size='sm'>
+      <FormattedMessage
+        id='account.familiar_followers'
+        defaultMessage='Followed by {accounts}'
+        values={{
+          accounts: <FormattedList type='conjunction' value={accounts} />,
+        }}
+      />
+    </Text>
+  );
+};
+
+export default ProfileFamiliarFollowers;
\ No newline at end of file
diff --git a/app/soapbox/features/ui/components/profile_info_panel.tsx b/app/soapbox/features/ui/components/profile_info_panel.tsx
index 7fe628ddb..e3d9ac8f4 100644
--- a/app/soapbox/features/ui/components/profile_info_panel.tsx
+++ b/app/soapbox/features/ui/components/profile_info_panel.tsx
@@ -9,6 +9,7 @@ import VerificationBadge from 'soapbox/components/verification_badge';
 import { useSoapboxConfig } from 'soapbox/hooks';
 import { isLocal } from 'soapbox/utils/accounts';
 
+import ProfileFamiliarFollowers from './profile_familiar_followers';
 import ProfileStats from './profile_stats';
 
 import type { Account } from 'soapbox/types/entities';
@@ -222,6 +223,8 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
 
           {renderBirthday()}
         </div>
+
+        <ProfileFamiliarFollowers account={account} />
       </Stack>
     </div>
   );
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index aab5bf76d..ed1abd55e 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -501,3 +501,7 @@ export function CompareHistoryModal() {
 export function AuthTokenList() {
   return import(/* webpackChunkName: "features/auth_token_list" */'../../auth_token_list');
 }
+
+export function FamiliarFollowersModal() {
+  return import(/*webpackChunkName: "modals/familiar_followers_modal" */'../components/familiar_followers_modal');
+}
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index e9a38c69c..7a19661ae 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -16,6 +16,9 @@
   "account.direct": "Wyślij wiadomość bezpośrednią do @{name}",
   "account.edit_profile": "Edytuj profil",
   "account.endorse": "Polecaj na profilu",
+  "account.familiar_followers": "Obserwowany(-a) przez {accounts}",
+  "account.familiar_followers.empty": "Nie znasz nikogo obserwującego {name}.",
+  "account.familiar_followers.more": "{count} {count, plural, one {innego użytkownika, którego obserwujesz} other {innych użytkowników, których obserwujesz}}",
   "account.follow": "Śledź",
   "account.followers": "Śledzący",
   "account.followers.empty": "Nikt jeszcze nie śledzi tego użytkownika.",
@@ -155,6 +158,7 @@
   "backups.empty_message.action": "Chcesz utworzyć?",
   "backups.pending": "Oczekująca",
   "beta.also_available": "Dostępne w językach:",
+  "birthdays_modal.empty": "Nikt kogo znasz nie ma dziś urodzin.",
   "birthday_panel.title": "Birthdays",
   "boost_modal.combo": "Naciśnij {combo}, aby pominąć to następnym razem",
   "bundle_column_error.body": "Coś poszło nie tak podczas ładowania tego składnika.",
@@ -203,6 +207,7 @@
   "column.domain_blocks": "Ukryte domeny",
   "column.edit_profile": "Edytuj profil",
   "column.export_data": "Eksportuj dane",
+  "column.familiar_followers": "Obserwujący {name} których znasz",
   "column.favourited_statuses": "Polubione wpisy",
   "column.favourites": "Polubienia",
   "column.federation_restrictions": "Ograniczenia federacji",
diff --git a/app/soapbox/reducers/__tests__/user_lists-test.js b/app/soapbox/reducers/__tests__/user_lists-test.js
index a168f3cdc..7c5ec7e20 100644
--- a/app/soapbox/reducers/__tests__/user_lists-test.js
+++ b/app/soapbox/reducers/__tests__/user_lists-test.js
@@ -17,6 +17,7 @@ describe('user_lists reducer', () => {
       groups_removed_accounts: ImmutableMap(),
       pinned: ImmutableMap(),
       birthday_reminders: ImmutableMap(),
+      familiar_followers: ImmutableMap(),
     }));
   });
 });
diff --git a/app/soapbox/reducers/user_lists.js b/app/soapbox/reducers/user_lists.js
index 992f930cc..69e8c181c 100644
--- a/app/soapbox/reducers/user_lists.js
+++ b/app/soapbox/reducers/user_lists.js
@@ -27,6 +27,9 @@ import {
   DIRECTORY_EXPAND_SUCCESS,
   DIRECTORY_EXPAND_FAIL,
 } from '../actions/directory';
+import {
+  FAMILIAR_FOLLOWERS_FETCH_SUCCESS,
+} from '../actions/familiar_followers';
 import {
   GROUP_MEMBERS_FETCH_SUCCESS,
   GROUP_MEMBERS_EXPAND_SUCCESS,
@@ -60,6 +63,7 @@ const initialState = ImmutableMap({
   groups_removed_accounts: ImmutableMap(),
   pinned: ImmutableMap(),
   birthday_reminders: ImmutableMap(),
+  familiar_followers: ImmutableMap(),
 });
 
 const normalizeList = (state, type, id, accounts, next) => {
@@ -138,6 +142,8 @@ export default function userLists(state = initialState, action) {
       return normalizeList(state, 'pinned', action.id, action.accounts, action.next);
     case BIRTHDAY_REMINDERS_FETCH_SUCCESS:
       return state.setIn(['birthday_reminders', action.id], ImmutableOrderedSet(action.accounts.map(item => item.id)));
+    case FAMILIAR_FOLLOWERS_FETCH_SUCCESS:
+      return state.setIn(['familiar_followers', action.id], ImmutableOrderedSet(action.accounts.map(item => item.id)));
     default:
       return state;
   }
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 9f60b5a05..45eed8936 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -256,6 +256,12 @@ const getInstanceFeatures = (instance: Instance) => {
       features.includes('exposable_reactions'),
     ]),
 
+    /**
+     * Can see accounts' followers you know
+     * @see GET /api/v1/accounts/familiar_followers
+     */
+    familiarFollowers: v.software === MASTODON && gte(v.version, '3.5.0'),
+
     /** Whether the instance federates. */
     federating: federation.get('enabled', true) === true, // Assume true unless explicitly false
 

From e45cd2d97d0290bcbcbd9e0fc2ef9a68c70ca7ff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 16 May 2022 19:37:10 +0200
Subject: [PATCH 004/102] Update Polish translation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/locales/pl.json | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index 7a19661ae..69b0b6bf9 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -10,8 +10,8 @@
   "account.block_domain": "Blokuj wszystko z {domain}",
   "account.blocked": "Zablokowany(-a)",
   "account.chat": "Napisz do @{name}",
-  "account.column_settings.description": "These settings apply to all account timelines.",
-  "account.column_settings.title": "Account timeline settings",
+  "account.column_settings.description": "Te ustawienia dotyczą wszystkich osi czasu konta.",
+  "account.column_settings.title": "Ustawienia osi czasu",
   "account.deactivated": "Dezaktywowany(-a)",
   "account.direct": "Wyślij wiadomość bezpośrednią do @{name}",
   "account.edit_profile": "Edytuj profil",
@@ -107,14 +107,14 @@
   "admin.users.actions.promote_to_admin_message": "Mianowano @{acct} administratorem",
   "admin.users.actions.promote_to_moderator": "Mianuj @{name} moderatorem",
   "admin.users.actions.promote_to_moderator_message": "Mianowano @{acct} moderatorem",
-  "admin.users.actions.remove_donor": "Remove @{name} as a donor",
-  "admin.users.actions.set_donor": "Set @{name} as a donor",
+  "admin.users.actions.remove_donor": "Usuń @{name} ze wspierających",
+  "admin.users.actions.set_donor": "Ustaw @{name} jako wspierającego",
   "admin.users.actions.suggest_user": "Polecaj @{name}",
   "admin.users.actions.unsuggest_user": "Przestań polecać @{name}",
   "admin.users.actions.unverify_user": "Cofnij weryfikację @{name}",
   "admin.users.actions.verify_user": "Weryfikuj @{name}",
-  "admin.users.remove_donor_message": "@{acct} was removed as a donor",
-  "admin.users.set_donor_message": "@{acct} was set as a donor",
+  "admin.users.remove_donor_message": "Usunięto @{acct} ze wspierających",
+  "admin.users.set_donor_message": "Ustawiono @{acct} jako wspierającego",
   "admin.users.user_deactivated_message": "Zdezaktywowano @{acct}",
   "admin.users.user_deleted_message": "Usunięto @{acct}",
   "admin.users.user_suggested_message": "Zaczęto polecać @{acct}",
@@ -124,12 +124,12 @@
   "admin_nav.awaiting_approval": "Oczekujące zgłoszenia",
   "admin_nav.dashboard": "Panel administracyjny",
   "admin_nav.reports": "Zgłoszenia",
-  "alert.unexpected.body": "We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out).",
-  "alert.unexpected.browser": "Browser",
+  "alert.unexpected.body": "Przepraszamy za niedogodność. Jeśli problem nie zniknie, skontaktuj się z naszym wsparciem technicznym. Możesz też spróbować {clearCookies} (zostaniesz wylogowany(-a) z konta).",
+  "alert.unexpected.browser": "Przeglądarka",
   "alert.unexpected.clear_cookies": "wyczyścić pliki cookies i dane przeglądarki",
-  "alert.unexpected.links.help": "Help Center",
-  "alert.unexpected.links.status": "Status",
-  "alert.unexpected.links.support": "Support",
+  "alert.unexpected.links.help": "Centrum pomocy",
+  "alert.unexpected.links.status": "Stan",
+  "alert.unexpected.links.support": "Wsparcie techniczne",
   "alert.unexpected.message": "Wystąpił nieoczekiwany błąd.",
   "alert.unexpected.return_home": "Wróć na stronę główną",
   "alert.unexpected.title": "O nie!",
@@ -159,7 +159,7 @@
   "backups.pending": "Oczekująca",
   "beta.also_available": "Dostępne w językach:",
   "birthdays_modal.empty": "Nikt kogo znasz nie ma dziś urodzin.",
-  "birthday_panel.title": "Birthdays",
+  "birthday_panel.title": "Urodziny",
   "boost_modal.combo": "Naciśnij {combo}, aby pominąć to następnym razem",
   "bundle_column_error.body": "Coś poszło nie tak podczas ładowania tego składnika.",
   "bundle_column_error.retry": "Spróbuj ponownie",
@@ -747,7 +747,7 @@
   "notifications.column_settings.filter_bar.category": "Szybkie filtrowanie",
   "notifications.column_settings.filter_bar.show": "Pokaż",
   "notifications.column_settings.follow": "Nowi śledzący:",
-  "notifications.column_settings.follow_request": "Nowe prośby o możliwość śledzenia:",
+  "notifications.column_settings.follow_request": "Nowe prośby o możliwość śledzenia:",
   "notifications.column_settings.mention": "Wspomnienia:",
   "notifications.column_settings.move": "Przenoszone konta:",
   "notifications.column_settings.poll": "Wyniki głosowania:",
@@ -773,9 +773,9 @@
   "onboarding.avatar.title": "Wybierz zdjęcie profilowe",
   "onboarding.display_name.subtitle": "Możesz ją zawsze zmienić później.",
   "onboarding.display_name.title": "Wybierz wyświetlaną nazwę",
-  "onboarding.done": "Done",
+  "onboarding.done": "Gotowe",
   "onboarding.finished.message": "Cieszymy się, że możemy powitać Cię w naszej społeczności! Naciśnij poniższy przycisk, aby rozpocząć.",
-  "onboarding.finished.title": "Onboarding complete",
+  "onboarding.finished.title": "Wprowadzenie",
   "onboarding.header.subtitle": "Będzie widoczny w górnej części Twojego profilu",
   "onboarding.header.title": "Wybierz obraz tła",
   "onboarding.next": "Dalej",
@@ -789,8 +789,8 @@
   "password_reset.confirmation": "Sprawdź swoją pocztę e-mail, aby potwierdzić.",
   "password_reset.fields.username_placeholder": "Adres e-mail lub nazwa użytkownika",
   "password_reset.reset": "Resetuj hasło",
-  "patron.donate": "Donate",
-  "patron.title": "Funding Goal",
+  "patron.donate": "Wesprzyj",
+  "patron.title": "Cel  wsparcia",
   "pinned_accounts.title": "Polecani przez {name}",
   "pinned_statuses.none": "Brak przypięć do pokazania.",
   "poll.closed": "Zamknięte",
@@ -827,7 +827,7 @@
   "profile_dropdown.add_account": "Dodaj istniejące konto",
   "profile_dropdown.logout": "Wyloguj @{acct}",
   "profile_dropdown.theme": "Motyw",
-  "profile_fields_panel.title": "Profile fields",
+  "profile_fields_panel.title": "Pola konta",
   "public.column_settings.title": "Ustawienia osi czasu Fediwersum",
   "reactions.all": "Wszystkie",
   "regeneration_indicator.label": "Ładuję…",

From eecbbb839a508cfbc18eabbb7f3d48a87a6e7769 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 16 May 2022 20:30:42 +0200
Subject: [PATCH 005/102] Use FormattedList for 'Replying to'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../components/status_reply_mentions.js       | 33 +++++++++++--------
 .../compose/components/reply_mentions.tsx     | 17 +++++++---
 .../status/components/quoted_status.tsx       | 18 ++++++----
 app/soapbox/locales/ar.json                   |  2 --
 app/soapbox/locales/ast.json                  |  2 --
 app/soapbox/locales/bg.json                   |  2 --
 app/soapbox/locales/bn.json                   |  2 --
 app/soapbox/locales/br.json                   |  2 --
 app/soapbox/locales/ca.json                   |  2 --
 app/soapbox/locales/co.json                   |  2 --
 app/soapbox/locales/cs.json                   |  2 --
 app/soapbox/locales/cy.json                   |  2 --
 app/soapbox/locales/da.json                   |  2 --
 app/soapbox/locales/de.json                   |  4 +--
 app/soapbox/locales/el.json                   |  2 --
 app/soapbox/locales/en-Shaw.json              |  4 +--
 app/soapbox/locales/en.json                   |  2 --
 app/soapbox/locales/eo.json                   |  2 --
 app/soapbox/locales/es-AR.json                |  2 --
 app/soapbox/locales/es.json                   |  2 --
 app/soapbox/locales/et.json                   |  2 --
 app/soapbox/locales/eu.json                   |  2 --
 app/soapbox/locales/fa.json                   |  2 --
 app/soapbox/locales/fi.json                   |  2 --
 app/soapbox/locales/fr.json                   |  2 --
 app/soapbox/locales/ga.json                   |  2 --
 app/soapbox/locales/gl.json                   |  2 --
 app/soapbox/locales/he.json                   |  4 +--
 app/soapbox/locales/hi.json                   |  2 --
 app/soapbox/locales/hr.json                   |  2 --
 app/soapbox/locales/hu.json                   |  2 --
 app/soapbox/locales/hy.json                   |  2 --
 app/soapbox/locales/id.json                   |  2 --
 app/soapbox/locales/io.json                   |  2 --
 app/soapbox/locales/is.json                   |  4 +--
 app/soapbox/locales/it.json                   |  4 +--
 app/soapbox/locales/ja.json                   |  2 --
 app/soapbox/locales/ka.json                   |  2 --
 app/soapbox/locales/kk.json                   |  2 --
 app/soapbox/locales/ko.json                   |  2 --
 app/soapbox/locales/lt.json                   |  2 --
 app/soapbox/locales/lv.json                   |  2 --
 app/soapbox/locales/mk.json                   |  2 --
 app/soapbox/locales/ms.json                   |  2 --
 app/soapbox/locales/nl.json                   |  2 --
 app/soapbox/locales/nn.json                   |  2 --
 app/soapbox/locales/no.json                   |  2 --
 app/soapbox/locales/oc.json                   |  2 --
 app/soapbox/locales/pl.json                   |  4 +--
 app/soapbox/locales/pt-BR.json                |  2 --
 app/soapbox/locales/pt.json                   |  2 --
 app/soapbox/locales/ro.json                   |  2 --
 app/soapbox/locales/ru.json                   |  2 --
 app/soapbox/locales/sk.json                   |  2 --
 app/soapbox/locales/sl.json                   |  2 --
 app/soapbox/locales/sq.json                   |  2 --
 app/soapbox/locales/sr-Latn.json              |  2 --
 app/soapbox/locales/sr.json                   |  2 --
 app/soapbox/locales/sv.json                   |  2 --
 app/soapbox/locales/ta.json                   |  2 --
 app/soapbox/locales/te.json                   |  2 --
 app/soapbox/locales/th.json                   |  2 --
 app/soapbox/locales/tr.json                   |  2 --
 app/soapbox/locales/uk.json                   |  2 --
 app/soapbox/locales/zh-CN.json                |  2 --
 app/soapbox/locales/zh-HK.json                |  2 --
 app/soapbox/locales/zh-TW.json                |  2 --
 67 files changed, 56 insertions(+), 152 deletions(-)

diff --git a/app/soapbox/components/status_reply_mentions.js b/app/soapbox/components/status_reply_mentions.js
index 76a48d5df..0809d6085 100644
--- a/app/soapbox/components/status_reply_mentions.js
+++ b/app/soapbox/components/status_reply_mentions.js
@@ -1,8 +1,9 @@
+import { List as ImmutableList } from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
+import { FormattedList, FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -42,7 +43,7 @@ class StatusReplyMentions extends ImmutablePureComponent {
       return null;
     }
 
-    const to = status.get('mentions', []);
+    const to = status.get('mentions', ImmutableList());
 
     // The post is a reply, but it has no mentions.
     // Rare, but it can happen.
@@ -58,23 +59,27 @@ class StatusReplyMentions extends ImmutablePureComponent {
     }
 
     // The typical case with a reply-to and a list of mentions.
+    const accounts = to.slice(0, 2).map(account => (
+      <HoverRefWrapper accountId={account.get('id')} inline>
+        <Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('username')}</Link>
+      </HoverRefWrapper>
+    )).toArray();
+
+    if (to.size > 2) {
+      accounts.push(
+        <span className='hover:underline cursor-pointer' role='presentation' onClick={this.handleOpenMentionsModal}>
+          <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
+        </span>,
+      );
+    }
+
     return (
       <div className='reply-mentions'>
         <FormattedMessage
           id='reply_mentions.reply'
-          defaultMessage='Replying to {accounts}{more}'
+          defaultMessage='Replying to {accounts}'
           values={{
-            accounts: to.slice(0, 2).map(account => (<>
-              <HoverRefWrapper accountId={account.get('id')} inline>
-                <Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('username')}</Link>
-              </HoverRefWrapper>
-              {' '}
-            </>)),
-            more: to.size > 2 && (
-              <span className='hover:underline cursor-pointer' role='presentation' onClick={this.handleOpenMentionsModal}>
-                <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />
-              </span>
-            ),
+            accounts: <FormattedList type='conjunction' value={accounts} />,
           }}
         />
       </div>
diff --git a/app/soapbox/features/compose/components/reply_mentions.tsx b/app/soapbox/features/compose/components/reply_mentions.tsx
index 2d09134e0..c25c2f3df 100644
--- a/app/soapbox/features/compose/components/reply_mentions.tsx
+++ b/app/soapbox/features/compose/components/reply_mentions.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { FormattedList, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
 import { openModal } from 'soapbox/actions/modals';
@@ -47,14 +47,23 @@ const ReplyMentions: React.FC = () => {
     );
   }
 
+  const accounts = to.slice(0, 2).map((acct: string) => (
+    <span className='reply-mentions__account'>@{acct.split('@')[0]}</span>
+  )).toArray();
+
+  if (to.size > 2) {
+    accounts.push(
+      <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />,
+    );
+  }
+
   return (
     <a href='#' className='reply-mentions' onClick={handleClick}>
       <FormattedMessage
         id='reply_mentions.reply'
-        defaultMessage='Replying to {accounts}{more}'
+        defaultMessage='Replying to {accounts}'
         values={{
-          accounts: to.slice(0, 2).map((acct: string) => <><span className='reply-mentions__account'>@{acct.split('@')[0]}</span>{' '}</>),
-          more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
+          accounts: <FormattedList type='conjunction' value={accounts} />,
         }}
       />
     </a>
diff --git a/app/soapbox/features/status/components/quoted_status.tsx b/app/soapbox/features/status/components/quoted_status.tsx
index aff5940be..c91dd616d 100644
--- a/app/soapbox/features/status/components/quoted_status.tsx
+++ b/app/soapbox/features/status/components/quoted_status.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { History } from 'history';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl, FormattedMessage, IntlShape } from 'react-intl';
+import { defineMessages, injectIntl, FormattedMessage, IntlShape, FormattedList } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 
 import AttachmentThumbs from 'soapbox/components/attachment_thumbs';
@@ -67,10 +67,9 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
           <div className='reply-mentions'>
             <FormattedMessage
               id='reply_mentions.reply'
-              defaultMessage='Replying to {accounts}{more}'
+              defaultMessage='Replying to {accounts}'
               values={{
                 accounts: `@${account.username}`,
-                more: false,
               }}
             />
           </div>
@@ -84,14 +83,21 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
       }
     }
 
+    const accounts = to.slice(0, 2).map(account => <>@{account.username}</>).toArray();
+
+    if (to.size > 2) {
+      accounts.push(
+        <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />,
+      );
+    }
+
     return (
       <div className='reply-mentions'>
         <FormattedMessage
           id='reply_mentions.reply'
-          defaultMessage='Replying to {accounts}{more}'
+          defaultMessage='Replying to {accounts}'
           values={{
-            accounts: to.slice(0, 2).map(account => `@${account.username} `),
-            more: to.size > 2 && <FormattedMessage id='reply_mentions.more' defaultMessage='and {count} more' values={{ count: to.size - 2 }} />,
+            accounts: <FormattedList type='conjunction' value={accounts} />,
           }}
         />
       </div>
diff --git a/app/soapbox/locales/ar.json b/app/soapbox/locales/ar.json
index 5031eb79d..d1e705697 100644
--- a/app/soapbox/locales/ar.json
+++ b/app/soapbox/locales/ar.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "إلغاء",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/ast.json b/app/soapbox/locales/ast.json
index 18f0c07df..ef5c65bd9 100644
--- a/app/soapbox/locales/ast.json
+++ b/app/soapbox/locales/ast.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Encaboxar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/bg.json b/app/soapbox/locales/bg.json
index b9f8ae1e1..7a62a52f0 100644
--- a/app/soapbox/locales/bg.json
+++ b/app/soapbox/locales/bg.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Отказ",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/bn.json b/app/soapbox/locales/bn.json
index 54b6a65eb..c030722fa 100644
--- a/app/soapbox/locales/bn.json
+++ b/app/soapbox/locales/bn.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "বাতিল করতে",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/br.json b/app/soapbox/locales/br.json
index af5a58c8d..1a0d58e9a 100644
--- a/app/soapbox/locales/br.json
+++ b/app/soapbox/locales/br.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/ca.json b/app/soapbox/locales/ca.json
index 0a3b7fa54..e36ad89bc 100644
--- a/app/soapbox/locales/ca.json
+++ b/app/soapbox/locales/ca.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel·lar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Bloquejar {target}",
   "report.block_hint": "També vols bloquejar aquest compte?",
diff --git a/app/soapbox/locales/co.json b/app/soapbox/locales/co.json
index 390ef9764..79214836a 100644
--- a/app/soapbox/locales/co.json
+++ b/app/soapbox/locales/co.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Annullà",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/cs.json b/app/soapbox/locales/cs.json
index 96d275865..155e1fa95 100644
--- a/app/soapbox/locales/cs.json
+++ b/app/soapbox/locales/cs.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Zrušit",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Zablokovat {target}",
   "report.block_hint": "Chcete zablokovat tento účet?",
diff --git a/app/soapbox/locales/cy.json b/app/soapbox/locales/cy.json
index a087fd35c..bfc9c701b 100644
--- a/app/soapbox/locales/cy.json
+++ b/app/soapbox/locales/cy.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Canslo",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/da.json b/app/soapbox/locales/da.json
index b879b4a51..a935d51cf 100644
--- a/app/soapbox/locales/da.json
+++ b/app/soapbox/locales/da.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Annuller",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/de.json b/app/soapbox/locales/de.json
index 95bce86fc..67067f2bf 100644
--- a/app/soapbox/locales/de.json
+++ b/app/soapbox/locales/de.json
@@ -859,8 +859,8 @@
   "reply_indicator.cancel": "Abbrechen",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "und {count, plural, one {einen weiteren Nutzer} other {# weitere Nutzer}}",
-  "reply_mentions.reply": "Antwort an {accounts}{more}",
+  "reply_mentions.more": "{count, plural, one {einen weiteren Nutzer} other {# weitere Nutzer}}",
+  "reply_mentions.reply": "Antwort an {accounts}",
   "reply_mentions.reply_empty": "Antwort auf einen Beitrag",
   "report.block": "{target} blockieren.",
   "report.block_hint": "Soll dieses Konto zusammen mit der Meldung auch gleich blockiert werden?",
diff --git a/app/soapbox/locales/el.json b/app/soapbox/locales/el.json
index 4aba909aa..b601e68e8 100644
--- a/app/soapbox/locales/el.json
+++ b/app/soapbox/locales/el.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Άκυρο",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/en-Shaw.json b/app/soapbox/locales/en-Shaw.json
index 50f8c36ae..a0c457f11 100644
--- a/app/soapbox/locales/en-Shaw.json
+++ b/app/soapbox/locales/en-Shaw.json
@@ -859,8 +859,8 @@
   "reply_indicator.cancel": "𐑒𐑨𐑯𐑕𐑩𐑤",
   "reply_mentions.account.add": "𐑨𐑛 𐑑 𐑥𐑧𐑯𐑖𐑩𐑯𐑟",
   "reply_mentions.account.remove": "𐑮𐑦𐑥𐑵𐑝 𐑓𐑮𐑪𐑥 𐑥𐑧𐑯𐑖𐑩𐑯𐑟",
-  "reply_mentions.more": "𐑯 {count} 𐑥𐑹",
-  "reply_mentions.reply": "𐑮𐑦𐑐𐑤𐑲𐑦𐑙 𐑑 {accounts}{more}",
+  "reply_mentions.more": "{count} 𐑥𐑹",
+  "reply_mentions.reply": "𐑮𐑦𐑐𐑤𐑲𐑦𐑙 𐑑 {accounts}",
   "reply_mentions.reply_empty": "𐑮𐑦𐑐𐑤𐑲𐑦𐑙 𐑑 𐑐𐑴𐑕𐑑",
   "report.block": "𐑚𐑤𐑪𐑒 {target}",
   "report.block_hint": "𐑛𐑵 𐑿 𐑷𐑤𐑕𐑴 𐑢𐑪𐑯𐑑 𐑑 𐑚𐑤𐑪𐑒 𐑞𐑦𐑕 𐑩𐑒𐑬𐑯𐑑?",
diff --git a/app/soapbox/locales/en.json b/app/soapbox/locales/en.json
index a7c1d1ce1..e6267ac94 100644
--- a/app/soapbox/locales/en.json
+++ b/app/soapbox/locales/en.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/eo.json b/app/soapbox/locales/eo.json
index 879fdde3b..4c3bd6166 100644
--- a/app/soapbox/locales/eo.json
+++ b/app/soapbox/locales/eo.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Nuligi",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/es-AR.json b/app/soapbox/locales/es-AR.json
index e1fa60e68..eb56879a0 100644
--- a/app/soapbox/locales/es-AR.json
+++ b/app/soapbox/locales/es-AR.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancelar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/es.json b/app/soapbox/locales/es.json
index 2e0ab4ec9..c4a3e99cb 100644
--- a/app/soapbox/locales/es.json
+++ b/app/soapbox/locales/es.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancelar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/et.json b/app/soapbox/locales/et.json
index 5a4eb43c6..636be30e0 100644
--- a/app/soapbox/locales/et.json
+++ b/app/soapbox/locales/et.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Tühista",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/eu.json b/app/soapbox/locales/eu.json
index 3a3881aca..a16e4332b 100644
--- a/app/soapbox/locales/eu.json
+++ b/app/soapbox/locales/eu.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Utzi",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/fa.json b/app/soapbox/locales/fa.json
index 863046301..b9e9da44d 100644
--- a/app/soapbox/locales/fa.json
+++ b/app/soapbox/locales/fa.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "لغو",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/fi.json b/app/soapbox/locales/fi.json
index 2a29e6c20..d806c2fc6 100644
--- a/app/soapbox/locales/fi.json
+++ b/app/soapbox/locales/fi.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Peruuta",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/fr.json b/app/soapbox/locales/fr.json
index 743341596..373c89021 100644
--- a/app/soapbox/locales/fr.json
+++ b/app/soapbox/locales/fr.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Annuler",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/ga.json b/app/soapbox/locales/ga.json
index 5e6cb3a8b..eec9f2971 100644
--- a/app/soapbox/locales/ga.json
+++ b/app/soapbox/locales/ga.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/gl.json b/app/soapbox/locales/gl.json
index a5a04c57c..3ea35cb9f 100644
--- a/app/soapbox/locales/gl.json
+++ b/app/soapbox/locales/gl.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancelar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/he.json b/app/soapbox/locales/he.json
index 69ae4d20a..21717e89f 100644
--- a/app/soapbox/locales/he.json
+++ b/app/soapbox/locales/he.json
@@ -859,8 +859,8 @@
   "reply_indicator.cancel": "ביטול",
   "reply_mentions.account.add": "הוסף לאזכורים",
   "reply_mentions.account.remove": "הסר מהאזכורים",
-  "reply_mentions.more": "ו-{count} עוד",
-  "reply_mentions.reply": "משיב ל-{accounts}{more}",
+  "reply_mentions.more": "{count} עוד",
+  "reply_mentions.reply": "משיב ל-{accounts}",
   "reply_mentions.reply_empty": "משיב לפוסט",
   "report.block": "חסום {target}",
   "report.block_hint": "האם גם אתה רוצה לחסום את החשבון הזה?",
diff --git a/app/soapbox/locales/hi.json b/app/soapbox/locales/hi.json
index 2080a931a..292d6a033 100644
--- a/app/soapbox/locales/hi.json
+++ b/app/soapbox/locales/hi.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/hr.json b/app/soapbox/locales/hr.json
index e78476954..ca5451121 100644
--- a/app/soapbox/locales/hr.json
+++ b/app/soapbox/locales/hr.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Otkaži",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/hu.json b/app/soapbox/locales/hu.json
index 031c6c0a7..0d5b56411 100644
--- a/app/soapbox/locales/hu.json
+++ b/app/soapbox/locales/hu.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Mégsem",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/hy.json b/app/soapbox/locales/hy.json
index e023bb148..c2638e2d4 100644
--- a/app/soapbox/locales/hy.json
+++ b/app/soapbox/locales/hy.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Չեղարկել",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/id.json b/app/soapbox/locales/id.json
index 92bd85bdd..904f73cc5 100644
--- a/app/soapbox/locales/id.json
+++ b/app/soapbox/locales/id.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Batal",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/io.json b/app/soapbox/locales/io.json
index 0a5bffb3c..f85f36a5a 100644
--- a/app/soapbox/locales/io.json
+++ b/app/soapbox/locales/io.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Nihiligar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/is.json b/app/soapbox/locales/is.json
index e3eea2422..49e906eb5 100644
--- a/app/soapbox/locales/is.json
+++ b/app/soapbox/locales/is.json
@@ -788,8 +788,8 @@
   "reply_indicator.cancel": "Hætta við",
   "reply_mentions.account.add": "Bæta við í tilvísanirnar",
   "reply_mentions.account.remove": "Fjarlægja úr tilvísunum",
-  "reply_mentions.more": "og {count} fleirum",
-  "reply_mentions.reply": "Að svara {accounts}{more}",
+  "reply_mentions.more": "{count} fleirum",
+  "reply_mentions.reply": "Að svara {accounts}",
   "reply_mentions.reply_empty": "Að svara færslu",
   "report.block": "Loka á {target}",
   "report.block_hint": "Viltu líka loka á þennan reikning?",
diff --git a/app/soapbox/locales/it.json b/app/soapbox/locales/it.json
index 57e54f718..e565fb5d6 100644
--- a/app/soapbox/locales/it.json
+++ b/app/soapbox/locales/it.json
@@ -859,8 +859,8 @@
   "reply_indicator.cancel": "Annulla",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "e ancora {count}",
-  "reply_mentions.reply": "Risponde a {accounts}{more}",
+  "reply_mentions.more": "ancora {count}",
+  "reply_mentions.reply": "Risponde a {accounts}",
   "reply_mentions.reply_empty": "Rispondendo al contenuto",
   "report.block": "Blocca {target}",
   "report.block_hint": "Vuoi anche bloccare questa persona?",
diff --git a/app/soapbox/locales/ja.json b/app/soapbox/locales/ja.json
index ea90e3e07..931c89326 100644
--- a/app/soapbox/locales/ja.json
+++ b/app/soapbox/locales/ja.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "キャンセル",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "{target}さんをブロック",
   "report.block_hint": "このアカウントをブロックしますか？",
diff --git a/app/soapbox/locales/ka.json b/app/soapbox/locales/ka.json
index 05f781c9b..950b4e69c 100644
--- a/app/soapbox/locales/ka.json
+++ b/app/soapbox/locales/ka.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "უარყოფა",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/kk.json b/app/soapbox/locales/kk.json
index 0bf4c7faf..40f4f25ac 100644
--- a/app/soapbox/locales/kk.json
+++ b/app/soapbox/locales/kk.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Қайтып алу",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/ko.json b/app/soapbox/locales/ko.json
index 6e56a125d..55bc1e1bb 100644
--- a/app/soapbox/locales/ko.json
+++ b/app/soapbox/locales/ko.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "취소",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/lt.json b/app/soapbox/locales/lt.json
index a369a6ec5..44b913afb 100644
--- a/app/soapbox/locales/lt.json
+++ b/app/soapbox/locales/lt.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/lv.json b/app/soapbox/locales/lv.json
index a8fb3a793..c97bca375 100644
--- a/app/soapbox/locales/lv.json
+++ b/app/soapbox/locales/lv.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/mk.json b/app/soapbox/locales/mk.json
index 501a56cd9..c760d08e0 100644
--- a/app/soapbox/locales/mk.json
+++ b/app/soapbox/locales/mk.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/ms.json b/app/soapbox/locales/ms.json
index 880fd2938..eaafcd52f 100644
--- a/app/soapbox/locales/ms.json
+++ b/app/soapbox/locales/ms.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/nl.json b/app/soapbox/locales/nl.json
index 1c1c00c3f..47795ef3d 100644
--- a/app/soapbox/locales/nl.json
+++ b/app/soapbox/locales/nl.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Annuleren",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/nn.json b/app/soapbox/locales/nn.json
index 41a2b7f85..26e4c3134 100644
--- a/app/soapbox/locales/nn.json
+++ b/app/soapbox/locales/nn.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancel",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/no.json b/app/soapbox/locales/no.json
index 77ac02363..fe86be051 100644
--- a/app/soapbox/locales/no.json
+++ b/app/soapbox/locales/no.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Avbryt",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/oc.json b/app/soapbox/locales/oc.json
index c952d6eea..64b471abc 100644
--- a/app/soapbox/locales/oc.json
+++ b/app/soapbox/locales/oc.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Anullar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/pl.json b/app/soapbox/locales/pl.json
index e9a38c69c..d5c8b15e5 100644
--- a/app/soapbox/locales/pl.json
+++ b/app/soapbox/locales/pl.json
@@ -876,8 +876,8 @@
   "reply_indicator.cancel": "Anuluj",
   "reply_mentions.account.add": "Dodaj do wspomnianych",
   "reply_mentions.account.remove": "Usuń z wspomnianych",
-  "reply_mentions.more": "i {count} więcej",
-  "reply_mentions.reply": "W odpowiedzi do {accounts}{more}",
+  "reply_mentions.more": "{count} więcej",
+  "reply_mentions.reply": "W odpowiedzi do {accounts}",
   "reply_mentions.reply_empty": "W odpowiedzi na wpis",
   "report.block": "Zablokuj {target}",
   "report.block_hint": "Czy chcesz też zablokować to konto?",
diff --git a/app/soapbox/locales/pt-BR.json b/app/soapbox/locales/pt-BR.json
index 79701f4e8..f0b0a19df 100644
--- a/app/soapbox/locales/pt-BR.json
+++ b/app/soapbox/locales/pt-BR.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancelar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/pt.json b/app/soapbox/locales/pt.json
index 6eadee36d..4cc86daad 100644
--- a/app/soapbox/locales/pt.json
+++ b/app/soapbox/locales/pt.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Cancelar",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Bloquear {target}",
   "report.block_hint": "Desejas também bloquear esta conta?",
diff --git a/app/soapbox/locales/ro.json b/app/soapbox/locales/ro.json
index 46c068630..2f49f24ce 100644
--- a/app/soapbox/locales/ro.json
+++ b/app/soapbox/locales/ro.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Anulează",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/ru.json b/app/soapbox/locales/ru.json
index 76e4c0eb2..b4d0b3e2d 100644
--- a/app/soapbox/locales/ru.json
+++ b/app/soapbox/locales/ru.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Отмена",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/sk.json b/app/soapbox/locales/sk.json
index 368c8d9b4..7a81a02c4 100644
--- a/app/soapbox/locales/sk.json
+++ b/app/soapbox/locales/sk.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Zrušiť",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/sl.json b/app/soapbox/locales/sl.json
index 5a5e08eaf..d1710325d 100644
--- a/app/soapbox/locales/sl.json
+++ b/app/soapbox/locales/sl.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Prekliči",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/sq.json b/app/soapbox/locales/sq.json
index ca6dc72cb..1c0a23d21 100644
--- a/app/soapbox/locales/sq.json
+++ b/app/soapbox/locales/sq.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Anuloje",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/sr-Latn.json b/app/soapbox/locales/sr-Latn.json
index f04b9bef5..ccf0c8ef1 100644
--- a/app/soapbox/locales/sr-Latn.json
+++ b/app/soapbox/locales/sr-Latn.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Poništi",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/sr.json b/app/soapbox/locales/sr.json
index efe2c4aa6..140a2738c 100644
--- a/app/soapbox/locales/sr.json
+++ b/app/soapbox/locales/sr.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Поништи",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/sv.json b/app/soapbox/locales/sv.json
index dd56ef574..a57d57e8f 100644
--- a/app/soapbox/locales/sv.json
+++ b/app/soapbox/locales/sv.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Ångra",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/ta.json b/app/soapbox/locales/ta.json
index 189eda2bb..69c44f84f 100644
--- a/app/soapbox/locales/ta.json
+++ b/app/soapbox/locales/ta.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "எதிராணை",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/te.json b/app/soapbox/locales/te.json
index 04f5c1931..6b34989f9 100644
--- a/app/soapbox/locales/te.json
+++ b/app/soapbox/locales/te.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "రద్దు చెయ్యి",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/th.json b/app/soapbox/locales/th.json
index 72d984068..c509dd4a3 100644
--- a/app/soapbox/locales/th.json
+++ b/app/soapbox/locales/th.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "ยกเลิก",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/tr.json b/app/soapbox/locales/tr.json
index 133b7c649..45c7c02b0 100644
--- a/app/soapbox/locales/tr.json
+++ b/app/soapbox/locales/tr.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "İptal",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/uk.json b/app/soapbox/locales/uk.json
index f88236624..bf601a95b 100644
--- a/app/soapbox/locales/uk.json
+++ b/app/soapbox/locales/uk.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "Відмінити",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/zh-CN.json b/app/soapbox/locales/zh-CN.json
index 25d9a28f7..0ec6a2e0f 100644
--- a/app/soapbox/locales/zh-CN.json
+++ b/app/soapbox/locales/zh-CN.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "取消",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "屏蔽帐号 {target}",
   "report.block_hint": "你是否也要屏蔽这个帐号呢？",
diff --git a/app/soapbox/locales/zh-HK.json b/app/soapbox/locales/zh-HK.json
index b4143a647..b163f6675 100644
--- a/app/soapbox/locales/zh-HK.json
+++ b/app/soapbox/locales/zh-HK.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "取消",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",
diff --git a/app/soapbox/locales/zh-TW.json b/app/soapbox/locales/zh-TW.json
index 44db7da27..5eade39d5 100644
--- a/app/soapbox/locales/zh-TW.json
+++ b/app/soapbox/locales/zh-TW.json
@@ -859,8 +859,6 @@
   "reply_indicator.cancel": "取消",
   "reply_mentions.account.add": "Add to mentions",
   "reply_mentions.account.remove": "Remove from mentions",
-  "reply_mentions.more": "and {count} more",
-  "reply_mentions.reply": "Replying to {accounts}{more}",
   "reply_mentions.reply_empty": "Replying to post",
   "report.block": "Block {target}",
   "report.block_hint": "Do you also want to block this account?",

From e21ec04be614597611e1938890d2829db17343d5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 17 May 2022 13:05:01 +0200
Subject: [PATCH 006/102] Add 'Remove from followers'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/accounts.js               | 40 +++++++++++++++++++
 .../features/account/components/header.js     |  9 +++++
 .../account_timeline/components/header.js     |  6 +++
 .../containers/header_container.js            | 17 ++++++++
 app/soapbox/reducers/relationships.js         |  2 +
 app/soapbox/utils/features.ts                 |  9 +++++
 6 files changed, 83 insertions(+)

diff --git a/app/soapbox/actions/accounts.js b/app/soapbox/actions/accounts.js
index 1005af838..4df56417e 100644
--- a/app/soapbox/actions/accounts.js
+++ b/app/soapbox/actions/accounts.js
@@ -57,6 +57,10 @@ export const ACCOUNT_UNPIN_REQUEST = 'ACCOUNT_UNPIN_REQUEST';
 export const ACCOUNT_UNPIN_SUCCESS = 'ACCOUNT_UNPIN_SUCCESS';
 export const ACCOUNT_UNPIN_FAIL    = 'ACCOUNT_UNPIN_FAIL';
 
+export const ACCOUNT_REMOVE_FROM_FOLLOWERS_REQUEST = 'ACCOUNT_REMOVE_FROM_FOLLOWERS_REQUEST';
+export const ACCOUNT_REMOVE_FROM_FOLLOWERS_SUCCESS = 'ACCOUNT_REMOVE_FROM_FOLLOWERS_SUCCESS';
+export const ACCOUNT_REMOVE_FROM_FOLLOWERS_FAIL    = 'ACCOUNT_REMOVE_FROM_FOLLOWERS_FAIL';
+
 export const PINNED_ACCOUNTS_FETCH_REQUEST = 'PINNED_ACCOUNTS_FETCH_REQUEST';
 export const PINNED_ACCOUNTS_FETCH_SUCCESS = 'PINNED_ACCOUNTS_FETCH_SUCCESS';
 export const PINNED_ACCOUNTS_FETCH_FAIL = 'PINNED_ACCOUNTS_FETCH_FAIL';
@@ -520,6 +524,42 @@ export function unsubscribeAccountFail(error) {
   };
 }
 
+
+export function removeFromFollowers(id) {
+  return (dispatch, getState) => {
+    if (!isLoggedIn(getState)) return;
+
+    dispatch(muteAccountRequest(id));
+
+    api(getState).post(`/api/v1/accounts/${id}/remove_from_followers`).then(response => {
+      dispatch(removeFromFollowersSuccess(response.data));
+    }).catch(error => {
+      dispatch(removeFromFollowersFail(id, error));
+    });
+  };
+}
+
+export function removeFromFollowersRequest(id) {
+  return {
+    type: ACCOUNT_REMOVE_FROM_FOLLOWERS_REQUEST,
+    id,
+  };
+}
+
+export function removeFromFollowersSuccess(relationship) {
+  return {
+    type: ACCOUNT_REMOVE_FROM_FOLLOWERS_SUCCESS,
+    relationship,
+  };
+}
+
+export function removeFromFollowersFail(error) {
+  return {
+    type: ACCOUNT_REMOVE_FROM_FOLLOWERS_FAIL,
+    error,
+  };
+}
+
 export function fetchFollowers(id) {
   return (dispatch, getState) => {
     dispatch(fetchFollowersRequest(id));
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 47c1172c7..7a65b0bef 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -48,6 +48,7 @@ const messages = defineMessages({
   mutes: { id: 'navigation_bar.mutes', defaultMessage: 'Muted users' },
   endorse: { id: 'account.endorse', defaultMessage: 'Feature on profile' },
   unendorse: { id: 'account.unendorse', defaultMessage: 'Don\'t feature on profile' },
+  removeFromFollowers: { id: 'account.remove_from_followers', defaultMessage: 'Remove this follower' },
   admin_account: { id: 'status.admin_account', defaultMessage: 'Open moderation interface for @{name}' },
   add_or_remove_from_list: { id: 'account.add_or_remove_from_list', defaultMessage: 'Add or Remove from lists' },
   deactivateUser: { id: 'admin.users.actions.deactivate_user', defaultMessage: 'Deactivate @{name}' },
@@ -283,6 +284,14 @@ class Header extends ImmutablePureComponent {
         });
       }
 
+      if (features.removeFromFollowers && account.getIn(['relationship', 'followed_by'])) {
+        menu.push({
+          text: intl.formatMessage(messages.removeFromFollowers),
+          action: this.props.onRemoveFromFollowers,
+          icon: require('@tabler/icons/icons/user-x.svg'),
+        });
+      }
+
       if (account.getIn(['relationship', 'muting'])) {
         menu.push({
           text: intl.formatMessage(messages.unmute, { name: account.get('username') }),
diff --git a/app/soapbox/features/account_timeline/components/header.js b/app/soapbox/features/account_timeline/components/header.js
index b969e0b61..bba6bbcd5 100644
--- a/app/soapbox/features/account_timeline/components/header.js
+++ b/app/soapbox/features/account_timeline/components/header.js
@@ -25,6 +25,7 @@ class Header extends ImmutablePureComponent {
     onUnblockDomain: PropTypes.func.isRequired,
     onEndorseToggle: PropTypes.func.isRequired,
     onAddToList: PropTypes.func.isRequired,
+    onRemoveFromFollowers: PropTypes.func.isRequired,
     username: PropTypes.string,
     history: PropTypes.object,
   };
@@ -141,6 +142,10 @@ class Header extends ImmutablePureComponent {
     this.props.onShowNote(this.props.account);
   }
 
+  handleRemoveFromFollowers = () => {
+    this.props.onRemoveFromFollowers(this.props.account);
+  }
+
   render() {
     const { account } = this.props;
     const moved = (account) ? account.get('moved') : false;
@@ -177,6 +182,7 @@ class Header extends ImmutablePureComponent {
           onSuggestUser={this.handleSuggestUser}
           onUnsuggestUser={this.handleUnsuggestUser}
           onShowNote={this.handleShowNote}
+          onRemoveFromFollowers={this.handleRemoveFromFollowers}
           username={this.props.username}
         />
       </>
diff --git a/app/soapbox/features/account_timeline/containers/header_container.js b/app/soapbox/features/account_timeline/containers/header_container.js
index 43ceceb2f..baf0ccb17 100644
--- a/app/soapbox/features/account_timeline/containers/header_container.js
+++ b/app/soapbox/features/account_timeline/containers/header_container.js
@@ -13,6 +13,7 @@ import {
   unpinAccount,
   subscribeAccount,
   unsubscribeAccount,
+  removeFromFollowers,
 } from 'soapbox/actions/accounts';
 import {
   verifyUser,
@@ -56,6 +57,7 @@ const messages = defineMessages({
   demotedToUser: { id: 'admin.users.actions.demote_to_user_message', defaultMessage: '@{acct} was demoted to a regular user' },
   userSuggested: { id: 'admin.users.user_suggested_message', defaultMessage: '@{acct} was suggested' },
   userUnsuggested: { id: 'admin.users.user_unsuggested_message', defaultMessage: '@{acct} was unsuggested' },
+  removeFromFollowersConfirm: { id: 'confirmations.remove_from_followers.confirm', defaultMessage: 'Remove' },
 });
 
 const makeMapStateToProps = () => {
@@ -269,6 +271,21 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
   onShowNote(account) {
     dispatch(initAccountNoteModal(account));
   },
+
+  onRemoveFromFollowers(account) {
+    dispatch((_, getState) => {
+      const unfollowModal = getSettings(getState()).get('unfollowModal');
+      if (unfollowModal) {
+        dispatch(openModal('CONFIRM', {
+          message: <FormattedMessage id='confirmations.remove_from_followers.message' defaultMessage='Are you sure you want to remove {name} from your followers?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
+          confirm: intl.formatMessage(messages.removeFromFollowersConfirm),
+          onConfirm: () => dispatch(removeFromFollowers(account.get('id'))),
+        }));
+      } else {
+        dispatch(removeFromFollowers(account.get('id')));
+      }
+    });
+  },
 });
 
 export default injectIntl(connect(makeMapStateToProps, mapDispatchToProps)(Header));
diff --git a/app/soapbox/reducers/relationships.js b/app/soapbox/reducers/relationships.js
index c63ee978e..80754842c 100644
--- a/app/soapbox/reducers/relationships.js
+++ b/app/soapbox/reducers/relationships.js
@@ -19,6 +19,7 @@ import {
   ACCOUNT_UNSUBSCRIBE_SUCCESS,
   ACCOUNT_PIN_SUCCESS,
   ACCOUNT_UNPIN_SUCCESS,
+  ACCOUNT_REMOVE_FROM_FOLLOWERS_SUCCESS,
   RELATIONSHIPS_FETCH_SUCCESS,
 } from '../actions/accounts';
 import {
@@ -108,6 +109,7 @@ export default function relationships(state = initialState, action) {
     case ACCOUNT_PIN_SUCCESS:
     case ACCOUNT_UNPIN_SUCCESS:
     case ACCOUNT_NOTE_SUBMIT_SUCCESS:
+    case ACCOUNT_REMOVE_FROM_FOLLOWERS_SUCCESS:
       return normalizeRelationship(state, action.relationship);
     case RELATIONSHIPS_FETCH_SUCCESS:
       return normalizeRelationships(state, action.relationships);
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index 1e4d76266..7819b2554 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -420,6 +420,15 @@ const getInstanceFeatures = (instance: Instance) => {
      */
     remoteInteractionsAPI: v.software === PLEROMA && gte(v.version, '2.4.50'),
 
+    /**
+     * Ability to remove an account from your followers.
+     * @see POST /api/v1/accounts/:id/remove_from_followers
+     */
+    removeFromFollowers: any([
+      v.software === MASTODON && gte(v.compatVersion, '3.5.0'),
+      v.software === PLEROMA && v.build === SOAPBOX && gte(v.version, '2.4.50'),
+    ]),
+
     reportMultipleStatuses: any([
       v.software === MASTODON,
       v.software === PLEROMA,

From 721772b08f74de8d09e1f4a9c8a85faed0ee0e12 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 17 May 2022 15:09:53 +0200
Subject: [PATCH 007/102] Fix hotkey navigation?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/scrollable_list.tsx    |  3 ++
 app/soapbox/components/status.tsx             |  8 ++---
 app/soapbox/components/status_list.js         | 23 ++++++-------
 .../components/conversations_list.js          | 30 +++++++++--------
 app/soapbox/features/notifications/index.js   | 32 +++++++++++--------
 app/soapbox/features/status/index.tsx         |  2 +-
 6 files changed, 54 insertions(+), 44 deletions(-)

diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx
index cc4b55867..c7a93a880 100644
--- a/app/soapbox/components/scrollable_list.tsx
+++ b/app/soapbox/components/scrollable_list.tsx
@@ -42,6 +42,7 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   onRefresh?: () => Promise<any>,
   className?: string,
   itemClassName?: string,
+  id?: string,
 }
 
 /** Legacy ScrollableList with Virtuoso for backwards-compatibility */
@@ -58,6 +59,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   onLoadMore,
   className,
   itemClassName,
+  id,
   hasMore,
   placeholderComponent: Placeholder,
   placeholderCount = 0,
@@ -130,6 +132,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
     <Virtuoso
       ref={ref}
       useWindowScroll
+      id={id}
       className={className}
       data={data}
       startReached={onScrollToTop}
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index f2b804fbe..57b3bbc6f 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -282,13 +282,11 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
   }
 
   handleHotkeyMoveUp = (e?: KeyboardEvent): void => {
-    // FIXME: what's going on here?
-    // this.props.onMoveUp(this.props.status.id, e?.target?.getAttribute('data-featured'));
+    this.props.onMoveUp(this.props.status.id, this.props.featured);
   }
 
   handleHotkeyMoveDown = (e?: KeyboardEvent): void => {
-    // FIXME: what's going on here?
-    // this.props.onMoveDown(this.props.status.id, e?.target?.getAttribute('data-featured'));
+    this.props.onMoveDown(this.props.status.id, this.props.featured);
   }
 
   handleHotkeyToggleHidden = (): void => {
@@ -601,7 +599,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     return (
       <HotKeys handlers={handlers} data-testid='status'>
         <div
-          className='status cursor-pointer'
+          className={classNames('status cursor-pointer', { focusable: this.props.focusable })}
           tabIndex={this.props.focusable && !this.props.muted ? 0 : undefined}
           data-featured={featured ? 'true' : null}
           aria-label={textForScreenReader(intl, status, rebloggedByText)}
diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index 7df03f365..bfc90869e 100644
--- a/app/soapbox/components/status_list.js
+++ b/app/soapbox/components/status_list.js
@@ -77,18 +77,18 @@ export default class StatusList extends ImmutablePureComponent {
     this.props.onLoadMore(loadMoreID);
   }, 300, { leading: true })
 
-  _selectChild(index, align_top) {
-    const container = this.node.node;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
+  _selectChild(index) {
+    this.node.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const element = document.querySelector(`#status-list [data-index="${index}"] .focusable`);
 
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
-    }
+        if (element) {
+          element.focus();
+        }
+      },
+    });
   }
 
   handleDequeueTimeline = () => {
@@ -216,6 +216,7 @@ export default class StatusList extends ImmutablePureComponent {
         message={messages.queue}
       />,
       <ScrollableList
+        id='status-list'
         key='scrollable-list'
         isLoading={isLoading}
         showLoading={isLoading && statusIds.size === 0}
diff --git a/app/soapbox/features/conversations/components/conversations_list.js b/app/soapbox/features/conversations/components/conversations_list.js
index 95629045d..6e2f751a9 100644
--- a/app/soapbox/features/conversations/components/conversations_list.js
+++ b/app/soapbox/features/conversations/components/conversations_list.js
@@ -20,26 +20,26 @@ export default class ConversationsList extends ImmutablePureComponent {
 
   handleMoveUp = id => {
     const elementIndex = this.getCurrentIndex(id) - 1;
-    this._selectChild(elementIndex, true);
+    this._selectChild(elementIndex);
   }
 
   handleMoveDown = id => {
     const elementIndex = this.getCurrentIndex(id) + 1;
-    this._selectChild(elementIndex, false);
+    this._selectChild(elementIndex);
   }
 
-  _selectChild(index, align_top) {
-    const container = this.node.node;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
+  _selectChild(index) {
+    this.node.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const element = document.querySelector(`#direct-list [data-index="${index}"] .focusable`);
 
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
-    }
+        if (element) {
+          element.focus();
+        }
+      },
+    });
   }
 
   setRef = c => {
@@ -58,7 +58,9 @@ export default class ConversationsList extends ImmutablePureComponent {
       <ScrollableList
         {...other}
         onLoadMore={onLoadMore && this.handleLoadOlder}
-        scrollKey='direct' ref={this.setRef}
+        id='direct-list'
+        scrollKey='direct'
+        ref={this.setRef}
         isLoading={isLoading}
         showLoading={isLoading && conversations.size === 0}
       >
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index 69c18799e..05fed79a7 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -111,32 +111,37 @@ class Notifications extends React.PureComponent {
     this.props.dispatch(scrollTopNotifications(false));
   }, 100);
 
+  setRef = c => {
+    this.node = c;
+  }
+
   setColumnRef = c => {
     this.column = c;
   }
 
   handleMoveUp = id => {
     const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
-    this._selectChild(elementIndex, true);
+    this._selectChild(elementIndex);
   }
 
   handleMoveDown = id => {
     const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
-    this._selectChild(elementIndex, false);
+    this._selectChild(elementIndex);
   }
 
-  _selectChild(index, align_top) {
-    const container = this.column;
-    const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
+  _selectChild(index) {
+    this.node.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const container = this.column;
+        const element = container.querySelector(`[data-index="${index}"] .focusable`);
 
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
-    }
+        if (element) {
+          element.focus();
+        }
+      },
+    });
   }
 
   handleDequeueNotifications = () => {
@@ -161,6 +166,7 @@ class Notifications extends React.PureComponent {
     const scrollContainer  = (
       <PullToRefresh onRefresh={this.handleRefresh}>
         <Virtuoso
+          ref={this.setRef}
           useWindowScroll
           data={showLoading ? Array(20).fill() : notifications.toArray()}
           startReached={this.handleScrollToTop}
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 33666c56b..ac6b85539 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -715,7 +715,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         <HotKeys handlers={handlers}>
           <div
             ref={this.setStatusRef}
-            className={classNames('detailed-status__wrapper')}
+            className='detailed-status__wrapper focusable'
             tabIndex={0}
             // FIXME: no "reblogged by" text is added for the screen reader
             aria-label={textForScreenReader(intl, status)}

From 93187c8eed8dce89e56d07129ac2b6c7cab4feeb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 18 May 2022 14:38:49 -0500
Subject: [PATCH 008/102] SoapboxMount: display a spinner while API requests
 are loading

---
 app/soapbox/components/ui/spinner/spinner.css |  2 +-
 app/soapbox/components/ui/spinner/spinner.tsx |  6 ++---
 app/soapbox/containers/soapbox.tsx            | 24 +++++++++++++++----
 3 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/ui/spinner/spinner.css b/app/soapbox/components/ui/spinner/spinner.css
index 177f9dad5..f048ee7fc 100644
--- a/app/soapbox/components/ui/spinner/spinner.css
+++ b/app/soapbox/components/ui/spinner/spinner.css
@@ -1,9 +1,9 @@
-
 /**
  * iOS style loading spinner.
  * Adapted from: https://loading.io/css/
  * With some help scaling it: https://signalvnoise.com/posts/2577-loading-spinner-animation-using-css-and-webkit
  */
+
 .spinner {
   @apply inline-block relative w-20 h-20;
 }
diff --git a/app/soapbox/components/ui/spinner/spinner.tsx b/app/soapbox/components/ui/spinner/spinner.tsx
index c4b77a120..98c3eaae7 100644
--- a/app/soapbox/components/ui/spinner/spinner.tsx
+++ b/app/soapbox/components/ui/spinner/spinner.tsx
@@ -6,7 +6,7 @@ import Text from '../text/text';
 
 import './spinner.css';
 
-interface ILoadingIndicator {
+interface ISpinner {
   /** Width and height of the spinner in pixels. */
   size?: number,
   /** Whether to display "Loading..." beneath the spinner. */
@@ -14,7 +14,7 @@ interface ILoadingIndicator {
 }
 
 /** Spinning loading placeholder. */
-const LoadingIndicator = ({ size = 30, withText = true }: ILoadingIndicator) => (
+const Spinner = ({ size = 30, withText = true }: ISpinner) => (
   <Stack space={2} justifyContent='center' alignItems='center'>
     <div className='spinner' style={{ width: size, height: size }}>
       {Array.from(Array(12).keys()).map(i => (
@@ -30,4 +30,4 @@ const LoadingIndicator = ({ size = 30, withText = true }: ILoadingIndicator) =>
   </Stack>
 );
 
-export default LoadingIndicator;
+export default Spinner;
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index cde450e65..d8ffd97d5 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -14,6 +14,7 @@ import { loadSoapboxConfig, getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
 import * as BuildConfig from 'soapbox/build_config';
 import Helmet from 'soapbox/components/helmet';
+import { Spinner } from 'soapbox/components/ui';
 import AuthLayout from 'soapbox/features/auth_layout';
 import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
 import PublicLayout from 'soapbox/features/public_layout';
@@ -115,10 +116,25 @@ const SoapboxMount = () => {
     return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
   };
 
-  if (me === null) return null;
-  if (me && !account) return null;
-  if (!isLoaded) return null;
-  if (localeLoading) return null;
+  /** Whether to display a loading indicator. */
+  const showLoading = [
+    me === null,
+    me && !account,
+    !isLoaded,
+    localeLoading,
+  ].some(Boolean);
+
+  if (showLoading) {
+    return (
+      <div className='p-4 h-screen w-screen flex items-center justify-center'>
+        <Helmet>
+          {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
+        </Helmet>
+
+        <Spinner size={40} withText={false} />
+      </div>
+    );
+  }
 
   const waitlisted = account && !account.source.get('approved', true);
 

From d2968118518833d9da75a266539e0a1d497cdfba Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 19 May 2022 20:14:49 -0500
Subject: [PATCH 009/102] Suggestions: store as OrderedSet

---
 app/soapbox/reducers/__tests__/suggestions-test.js | 4 ++--
 app/soapbox/reducers/suggestions.js                | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/reducers/__tests__/suggestions-test.js b/app/soapbox/reducers/__tests__/suggestions-test.js
index 01c1f1aff..4478f37a6 100644
--- a/app/soapbox/reducers/__tests__/suggestions-test.js
+++ b/app/soapbox/reducers/__tests__/suggestions-test.js
@@ -1,4 +1,4 @@
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
 
 import { SUGGESTIONS_DISMISS } from 'soapbox/actions/suggestions';
 
@@ -7,7 +7,7 @@ import reducer from '../suggestions';
 describe('suggestions reducer', () => {
   it('should return the initial state', () => {
     expect(reducer(undefined, {})).toEqual(ImmutableMap({
-      items: ImmutableList(),
+      items: ImmutableOrderedSet(),
       next: null,
       isLoading: false,
     }));
diff --git a/app/soapbox/reducers/suggestions.js b/app/soapbox/reducers/suggestions.js
index 03f782d3e..6b3a63da9 100644
--- a/app/soapbox/reducers/suggestions.js
+++ b/app/soapbox/reducers/suggestions.js
@@ -1,4 +1,4 @@
-import { Map as ImmutableMap, List as ImmutableList, fromJS } from 'immutable';
+import { Map as ImmutableMap, OrderedSet as ImmutableOrderedSet, fromJS } from 'immutable';
 
 import { ACCOUNT_BLOCK_SUCCESS, ACCOUNT_MUTE_SUCCESS } from 'soapbox/actions/accounts';
 import { DOMAIN_BLOCK_SUCCESS } from 'soapbox/actions/domain_blocks';
@@ -14,7 +14,7 @@ import {
 } from '../actions/suggestions';
 
 const initialState = ImmutableMap({
-  items: ImmutableList(),
+  items: ImmutableOrderedSet(),
   next: null,
   isLoading: false,
 });

From bd6ce38e5d1dbc399d07cf30ab5d9f3c2c4fb348 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 09:58:59 -0500
Subject: [PATCH 010/102] checkEmailAvailability: fail silently

---
 app/soapbox/actions/verification.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/actions/verification.js b/app/soapbox/actions/verification.js
index f90a5637a..8bd34b75c 100644
--- a/app/soapbox/actions/verification.js
+++ b/app/soapbox/actions/verification.js
@@ -244,7 +244,9 @@ function checkEmailAvailability(email) {
 
     return api(getState).get(`/api/v1/pepe/account/exists?email=${email}`, {
       headers: { Authorization: `Bearer ${token}` },
-    }).finally(() => dispatch({ type: SET_LOADING, value: false }));
+    })
+      .catch(() => {})
+      .then(() => dispatch({ type: SET_LOADING, value: false }));
   };
 }
 

From f3f6a156866c4ce4c8597124317b1b48fd99c431 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 10:15:47 -0500
Subject: [PATCH 011/102] LandingPageModal: use Text component

---
 .../features/ui/components/modals/landing-page-modal.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index 4f3156ef5..48e445e96 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -3,7 +3,7 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import SiteLogo from 'soapbox/components/site-logo';
-import { Button, Icon, Modal } from 'soapbox/components/ui';
+import { Text, Button, Icon, Modal } from 'soapbox/components/ui';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -17,6 +17,7 @@ interface ILandingPageModal {
   onClose: (type: string) => void,
 }
 
+/** Login and links to display from the hamburger menu of the homepage. */
 const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
   const intl = useIntl();
 
@@ -41,13 +42,13 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
             <a
               href={links.get('help')}
               target='_blank'
-              className='p-3 flex items-center rounded-md dark:hover:bg-slate-900/50 hover:bg-gray-50'
+              className='p-3 space-x-3 flex items-center rounded-md dark:hover:bg-slate-900/50 hover:bg-gray-50'
             >
               <Icon src={require('@tabler/icons/icons/lifebuoy.svg')} className='flex-shrink-0 h-6 w-6 text-gray-400 dark:text-gray-200' />
 
-              <span className='ml-3 text-base font-medium text-gray-900 dark:text-gray-200'>
+              <Text weight='medium'>
                 {intl.formatMessage(messages.helpCenter)}
-              </span>
+              </Text>
             </a>
           </nav>
         )}

From 84b04250ac6de48efb7d923bb3768d010384b175 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 12:20:31 -0500
Subject: [PATCH 012/102] Add LoadingScreen for fullscreen, theme-specific
 loading

---
 app/soapbox/components/loading-screen.tsx | 19 +++++++++++++++++++
 app/soapbox/containers/soapbox.tsx        |  8 ++++----
 2 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 app/soapbox/components/loading-screen.tsx

diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx
new file mode 100644
index 000000000..84b5bf306
--- /dev/null
+++ b/app/soapbox/components/loading-screen.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import LandingGradient from 'soapbox/components/landing-gradient';
+import { Spinner } from 'soapbox/components/ui';
+
+/** Fullscreen loading indicator. */
+const LoadingScreen: React.FC = () => {
+  return (
+    <div className='fixed h-screen w-screen bg-white dark:bg-slate-900'>
+      <LandingGradient />
+
+      <div className='fixed h-screen w-screen flex items-center justify-center z-10'>
+        <Spinner size={40} withText={false} />
+      </div>
+    </div>
+  );
+};
+
+export default LoadingScreen;
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index d8ffd97d5..0a86ad0fc 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -14,7 +14,7 @@ import { loadSoapboxConfig, getSoapboxConfig } from 'soapbox/actions/soapbox';
 import { fetchVerificationConfig } from 'soapbox/actions/verification';
 import * as BuildConfig from 'soapbox/build_config';
 import Helmet from 'soapbox/components/helmet';
-import { Spinner } from 'soapbox/components/ui';
+import LoadingScreen from 'soapbox/components/loading-screen';
 import AuthLayout from 'soapbox/features/auth_layout';
 import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
 import PublicLayout from 'soapbox/features/public_layout';
@@ -126,13 +126,13 @@ const SoapboxMount = () => {
 
   if (showLoading) {
     return (
-      <div className='p-4 h-screen w-screen flex items-center justify-center'>
+      <>
         <Helmet>
           {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
         </Helmet>
 
-        <Spinner size={40} withText={false} />
-      </div>
+        <LoadingScreen />
+      </>
     );
   }
 

From 4cddf0c962ebf706d6e2a1af75f321f1eb23fedb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 12:28:59 -0500
Subject: [PATCH 013/102] SoapboxMount: create showOnboarding variable

---
 app/soapbox/containers/soapbox.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 0a86ad0fc..e377be771 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -80,7 +80,9 @@ const SoapboxMount = () => {
 
   const locale = validLocale(settings.get('locale')) ? settings.get('locale') : 'en';
 
+  const waitlisted = account && !account.source.get('approved', true);
   const needsOnboarding = useAppSelector(state => state.onboarding.needsOnboarding);
+  const showOnboarding = account && !waitlisted && needsOnboarding;
   const singleUserMode = soapboxConfig.singleUserMode && soapboxConfig.singleUserModeProfile;
 
   const [messages, setMessages] = useState<Record<string, string>>({});
@@ -136,8 +138,6 @@ const SoapboxMount = () => {
     );
   }
 
-  const waitlisted = account && !account.source.get('approved', true);
-
   const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
     'no-reduce-motion': !settings.get('reduceMotion'),
     'underline-links': settings.get('underlineLinks'),
@@ -145,7 +145,7 @@ const SoapboxMount = () => {
     'demetricator': settings.get('demetricator'),
   });
 
-  if (account && !waitlisted && needsOnboarding) {
+  if (showOnboarding) {
     return (
       <IntlProvider locale={locale} messages={messages}>
         <Helmet>

From f72ee6aad0c2899d5c0b15b3caa8e71872f84adc Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 12:30:29 -0500
Subject: [PATCH 014/102] SoapboxMount: add comments

---
 app/soapbox/containers/soapbox.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index e377be771..75767f237 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -67,6 +67,7 @@ const loadInitial = () => {
   };
 };
 
+/** Highest level node with the Redux store. */
 const SoapboxMount = () => {
   useCachedLocationHandler();
   const dispatch = useAppDispatch();
@@ -233,6 +234,7 @@ const SoapboxMount = () => {
   );
 };
 
+/** The root React node of the application. */
 const Soapbox = () => {
   return (
     <Provider store={store}>

From 83544470475fc3d5b016e7449d47eac989ced0c0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 12:51:57 -0500
Subject: [PATCH 015/102] SoapboxMount: refactor render to be DRY

---
 app/soapbox/containers/soapbox.tsx | 179 +++++++++++++++--------------
 1 file changed, 92 insertions(+), 87 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 75767f237..2d89cc9a2 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -127,18 +127,6 @@ const SoapboxMount = () => {
     localeLoading,
   ].some(Boolean);
 
-  if (showLoading) {
-    return (
-      <>
-        <Helmet>
-          {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
-        </Helmet>
-
-        <LoadingScreen />
-      </>
-    );
-  }
-
   const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', {
     'no-reduce-motion': !settings.get('reduceMotion'),
     'underline-links': settings.get('underlineLinks'),
@@ -146,88 +134,105 @@ const SoapboxMount = () => {
     'demetricator': settings.get('demetricator'),
   });
 
-  if (showOnboarding) {
-    return (
-      <IntlProvider locale={locale} messages={messages}>
-        <Helmet>
-          <html lang={locale} className={classNames({ dark: darkMode })} />
-          <body className={bodyClass} />
-          {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
-          <meta name='theme-color' content={soapboxConfig.brandColor} />
-        </Helmet>
+  const helmet = (
+    <Helmet>
+      <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
+      <body className={bodyClass} />
+      {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
+      <meta name='theme-color' content={soapboxConfig.brandColor} />
+    </Helmet>
+  );
 
-        <ErrorBoundary>
-          <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
-            <OnboardingWizard />
-            <NotificationsContainer />
-          </BrowserRouter>
-        </ErrorBoundary>
-      </IntlProvider>
-    );
+  /** Render loading screen. */
+  const renderLoading = () => (
+    <>
+      {helmet}
+      <LoadingScreen />
+    </>
+  );
+
+  /** Render the onboarding flow. */
+  const renderOnboarding = () => (
+    <>
+      <OnboardingWizard />
+      <NotificationsContainer />
+    </>
+  );
+
+  /** Render the auth layout or UI. */
+  const renderSwitch = () => (
+    <Switch>
+      <Redirect from='/v1/verify_email/:token' to='/verify/email/:token' />
+
+      {/* Redirect signup route depending on Pepe enablement. */}
+      {/* We should prefer using /signup in components. */}
+      {pepeEnabled ? (
+        <Redirect from='/signup' to='/verify' />
+      ) : (
+        <Redirect from='/verify' to='/signup' />
+      )}
+
+      {waitlisted && (
+        <>
+          <Route render={(props) => <WaitlistPage {...props} account={account} />} />
+
+          <BundleContainer fetchComponent={ModalContainer}>
+            {Component => <Component />}
+          </BundleContainer>
+        </>
+      )}
+
+      {!me && (singleUserMode
+        ? <Redirect exact from='/' to={`/${singleUserMode}`} />
+        : <Route exact path='/' component={PublicLayout} />)}
+
+      {!me && (
+        <Route exact path='/' component={PublicLayout} />
+      )}
+
+      <Route exact path='/about/:slug?' component={PublicLayout} />
+      <Route exact path='/mobile/:slug?' component={PublicLayout} />
+      <Route path='/login' component={AuthLayout} />
+
+      {(features.accountCreation && instance.registrations) && (
+        <Route exact path='/signup' component={AuthLayout} />
+      )}
+
+      {pepeEnabled && (
+        <Route path='/verify' component={AuthLayout} />
+      )}
+
+      <Route path='/reset-password' component={AuthLayout} />
+      <Route path='/edit-password' component={AuthLayout} />
+      <Route path='/invite/:token' component={AuthLayout} />
+
+      <Route path='/' component={UI} />
+    </Switch>
+  );
+
+  /** Render the onboarding flow or UI. */
+  const renderBody = () => {
+    if (showOnboarding) {
+      return renderOnboarding();
+    } else {
+      return renderSwitch();
+    }
+  };
+
+  // intl is part of loading.
+  // It's important nothing in here depends on intl.
+  if (showLoading) {
+    return renderLoading();
   }
 
   return (
     <IntlProvider locale={locale} messages={messages}>
-      <Helmet>
-        <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
-        <body className={bodyClass} />
-        {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
-        <meta name='theme-color' content={soapboxConfig.brandColor} />
-      </Helmet>
-
+      {helmet}
       <ErrorBoundary>
         <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
-          <>
-            <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
-              <Switch>
-                <Redirect from='/v1/verify_email/:token' to='/verify/email/:token' />
-
-                {/* Redirect signup route depending on Pepe enablement. */}
-                {/* We should prefer using /signup in components. */}
-                {pepeEnabled ? (
-                  <Redirect from='/signup' to='/verify' />
-                ) : (
-                  <Redirect from='/verify' to='/signup' />
-                )}
-
-                {waitlisted && (
-                  <>
-                    <Route render={(props) => <WaitlistPage {...props} account={account} />} />
-
-                    <BundleContainer fetchComponent={ModalContainer}>
-                      {Component => <Component />}
-                    </BundleContainer>
-                  </>
-                )}
-
-                {!me && (singleUserMode
-                  ? <Redirect exact from='/' to={`/${singleUserMode}`} />
-                  : <Route exact path='/' component={PublicLayout} />)}
-
-                {!me && (
-                  <Route exact path='/' component={PublicLayout} />
-                )}
-
-                <Route exact path='/about/:slug?' component={PublicLayout} />
-                <Route exact path='/mobile/:slug?' component={PublicLayout} />
-                <Route path='/login' component={AuthLayout} />
-
-                {(features.accountCreation && instance.registrations) && (
-                  <Route exact path='/signup' component={AuthLayout} />
-                )}
-
-                {pepeEnabled && (
-                  <Route path='/verify' component={AuthLayout} />
-                )}
-
-                <Route path='/reset-password' component={AuthLayout} />
-                <Route path='/edit-password' component={AuthLayout} />
-                <Route path='/invite/:token' component={AuthLayout} />
-
-                <Route path='/' component={UI} />
-              </Switch>
-            </ScrollContext>
-          </>
+          <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
+            {renderBody()}
+          </ScrollContext>
         </BrowserRouter>
       </ErrorBoundary>
     </IntlProvider>

From e298115fcf90ed9c0543e46afaebd2d3f18eafe7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 13:00:38 -0500
Subject: [PATCH 016/102] SoapboxMount: async import NotificationsContainer,
 ModalContainer, remove them elsewhere

---
 app/soapbox/containers/soapbox.tsx            | 21 ++++++++++---------
 app/soapbox/features/auth_layout/index.tsx    |  6 ------
 app/soapbox/features/public_layout/index.tsx  | 13 ------------
 app/soapbox/features/ui/index.tsx             | 10 ---------
 .../features/verification/waitlist_page.js    |  6 ------
 5 files changed, 11 insertions(+), 45 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 2d89cc9a2..2d339fea5 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -18,8 +18,8 @@ import LoadingScreen from 'soapbox/components/loading-screen';
 import AuthLayout from 'soapbox/features/auth_layout';
 import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
 import PublicLayout from 'soapbox/features/public_layout';
-import NotificationsContainer from 'soapbox/features/ui/containers/notifications_container';
-import { ModalContainer } from 'soapbox/features/ui/util/async-components';
+import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
+import { ModalContainer, NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 import WaitlistPage from 'soapbox/features/verification/waitlist_page';
 import { createGlobals } from 'soapbox/globals';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
@@ -31,7 +31,6 @@ import { checkOnboardingStatus } from '../actions/onboarding';
 import { preload } from '../actions/preload';
 import ErrorBoundary from '../components/error_boundary';
 import UI from '../features/ui';
-import BundleContainer from '../features/ui/containers/bundle_container';
 import { store } from '../store';
 
 /** Ensure the given locale exists in our codebase */
@@ -173,13 +172,7 @@ const SoapboxMount = () => {
       )}
 
       {waitlisted && (
-        <>
-          <Route render={(props) => <WaitlistPage {...props} account={account} />} />
-
-          <BundleContainer fetchComponent={ModalContainer}>
-            {Component => <Component />}
-          </BundleContainer>
-        </>
+        <Route render={(props) => <WaitlistPage {...props} account={account} />} />
       )}
 
       {!me && (singleUserMode
@@ -232,6 +225,14 @@ const SoapboxMount = () => {
         <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
           <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
             {renderBody()}
+
+            <BundleContainer fetchComponent={NotificationsContainer}>
+              {(Component) => <Component />}
+            </BundleContainer>
+
+            <BundleContainer fetchComponent={ModalContainer}>
+              {Component => <Component />}
+            </BundleContainer>
           </ScrollContext>
         </BrowserRouter>
       </ErrorBoundary>
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index 1ac59b3de..ca72f4107 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -4,8 +4,6 @@ import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
 
 import { Button, Card, CardBody } from '../../components/ui';
@@ -86,10 +84,6 @@ const AuthLayout = () => {
           </div>
         </div>
       </main>
-
-      <BundleContainer fetchComponent={NotificationsContainer}>
-        {(Component) => <Component />}
-      </BundleContainer>
     </div>
   );
 };
diff --git a/app/soapbox/features/public_layout/index.tsx b/app/soapbox/features/public_layout/index.tsx
index 3fe4834a5..5c7e45107 100644
--- a/app/soapbox/features/public_layout/index.tsx
+++ b/app/soapbox/features/public_layout/index.tsx
@@ -2,11 +2,6 @@ import React from 'react';
 import { Switch, Route, Redirect } from 'react-router-dom';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import {
-  NotificationsContainer,
-  ModalContainer,
-} from 'soapbox/features/ui/util/async-components';
 import { useAppSelector } from 'soapbox/hooks';
 import { isStandalone } from 'soapbox/utils/state';
 
@@ -42,14 +37,6 @@ const PublicLayout = () => {
         </div>
 
         <Footer />
-
-        <BundleContainer fetchComponent={NotificationsContainer}>
-          {(Component) => <Component />}
-        </BundleContainer>
-
-        <BundleContainer fetchComponent={ModalContainer}>
-          {(Component) => <Component />}
-        </BundleContainer>
       </div>
     </div>
   );
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 164198e37..57bfb02f1 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -104,8 +104,6 @@ import {
   Directory,
   SidebarMenu,
   UploadArea,
-  NotificationsContainer,
-  ModalContainer,
   ProfileHoverCard,
   Share,
   NewStatus,
@@ -670,14 +668,6 @@ const UI: React.FC = ({ children }) => {
 
           {me && floatingActionButton}
 
-          <BundleContainer fetchComponent={NotificationsContainer}>
-            {Component => <Component />}
-          </BundleContainer>
-
-          <BundleContainer fetchComponent={ModalContainer}>
-            {Component => <Component />}
-          </BundleContainer>
-
           <BundleContainer fetchComponent={UploadArea}>
             {Component => <Component active={draggingOver} onClose={closeUploadModal} />}
           </BundleContainer>
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js
index 1e87e2078..14047b7b1 100644
--- a/app/soapbox/features/verification/waitlist_page.js
+++ b/app/soapbox/features/verification/waitlist_page.js
@@ -7,8 +7,6 @@ import { Link } from 'react-router-dom';
 import { openModal } from 'soapbox/actions/modals';
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
-import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 
 import { logOut } from '../../actions/auth';
@@ -74,10 +72,6 @@ const WaitlistPage = ({ account }) => {
           </div>
         </div>
       </main>
-
-      <BundleContainer fetchComponent={NotificationsContainer}>
-        {(Component) => <Component />}
-      </BundleContainer>
     </div>
   );
 };

From f0ba5a5a8cb25b3ba5901b809b978b4e8c553f1e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 13:13:17 -0500
Subject: [PATCH 017/102] SoapboxMount: load onboarding flow async, refactor

---
 app/soapbox/components/loading-screen.tsx     |  2 +-
 app/soapbox/containers/soapbox.tsx            | 45 ++++++++++---------
 .../features/ui/util/async-components.ts      |  4 ++
 3 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx
index 84b5bf306..92882f98f 100644
--- a/app/soapbox/components/loading-screen.tsx
+++ b/app/soapbox/components/loading-screen.tsx
@@ -6,7 +6,7 @@ import { Spinner } from 'soapbox/components/ui';
 /** Fullscreen loading indicator. */
 const LoadingScreen: React.FC = () => {
   return (
-    <div className='fixed h-screen w-screen bg-white dark:bg-slate-900'>
+    <div className='fixed h-screen w-screen'>
       <LandingGradient />
 
       <div className='fixed h-screen w-screen flex items-center justify-center z-10'>
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 2d339fea5..b9f41a464 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -16,10 +16,13 @@ import * as BuildConfig from 'soapbox/build_config';
 import Helmet from 'soapbox/components/helmet';
 import LoadingScreen from 'soapbox/components/loading-screen';
 import AuthLayout from 'soapbox/features/auth_layout';
-import OnboardingWizard from 'soapbox/features/onboarding/onboarding-wizard';
 import PublicLayout from 'soapbox/features/public_layout';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
-import { ModalContainer, NotificationsContainer } from 'soapbox/features/ui/util/async-components';
+import {
+  ModalContainer,
+  NotificationsContainer,
+  OnboardingWizard,
+} from 'soapbox/features/ui/util/async-components';
 import WaitlistPage from 'soapbox/features/verification/waitlist_page';
 import { createGlobals } from 'soapbox/globals';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
@@ -142,20 +145,11 @@ const SoapboxMount = () => {
     </Helmet>
   );
 
-  /** Render loading screen. */
-  const renderLoading = () => (
-    <>
-      {helmet}
-      <LoadingScreen />
-    </>
-  );
-
   /** Render the onboarding flow. */
   const renderOnboarding = () => (
-    <>
-      <OnboardingWizard />
-      <NotificationsContainer />
-    </>
+    <BundleContainer fetchComponent={OnboardingWizard} loading={LoadingScreen}>
+      {(Component) => <Component />}
+    </BundleContainer>
   );
 
   /** Render the auth layout or UI. */
@@ -215,7 +209,12 @@ const SoapboxMount = () => {
   // intl is part of loading.
   // It's important nothing in here depends on intl.
   if (showLoading) {
-    return renderLoading();
+    return (
+      <>
+        {helmet}
+        <LoadingScreen />
+      </>
+    );
   }
 
   return (
@@ -224,15 +223,17 @@ const SoapboxMount = () => {
       <ErrorBoundary>
         <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
           <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
-            {renderBody()}
+            <>
+              {renderBody()}
 
-            <BundleContainer fetchComponent={NotificationsContainer}>
-              {(Component) => <Component />}
-            </BundleContainer>
+              <BundleContainer fetchComponent={NotificationsContainer}>
+                {(Component) => <Component />}
+              </BundleContainer>
 
-            <BundleContainer fetchComponent={ModalContainer}>
-              {Component => <Component />}
-            </BundleContainer>
+              <BundleContainer fetchComponent={ModalContainer}>
+                {Component => <Component />}
+              </BundleContainer>
+            </>
           </ScrollContext>
         </BrowserRouter>
       </ErrorBoundary>
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 34d2f36b9..53efab79f 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -494,6 +494,10 @@ export function DatePicker() {
   return import(/* webpackChunkName: "date_picker" */'../../birthdays/date_picker');
 }
 
+export function OnboardingWizard() {
+  return import(/* webpackChunkName: "features/onboarding" */'../../onboarding/onboarding-wizard');
+}
+
 export function CompareHistoryModal() {
   return import(/*webpackChunkName: "modals/compare_history_modal" */'../components/compare_history_modal');
 }

From 4e8a3cdce5f8c1a3f484ef49a74abd8a576cd2aa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 13:29:17 -0500
Subject: [PATCH 018/102] SoapboxMount: load WaitlistPage async

---
 app/soapbox/containers/soapbox.tsx               | 9 +++++++--
 app/soapbox/features/ui/util/async-components.ts | 4 ++++
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index b9f41a464..fbb62d6e3 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -22,8 +22,8 @@ import {
   ModalContainer,
   NotificationsContainer,
   OnboardingWizard,
+  WaitlistPage,
 } from 'soapbox/features/ui/util/async-components';
-import WaitlistPage from 'soapbox/features/verification/waitlist_page';
 import { createGlobals } from 'soapbox/globals';
 import { useAppSelector, useAppDispatch, useOwnAccount, useFeatures, useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
 import MESSAGES from 'soapbox/locales/messages';
@@ -166,7 +166,12 @@ const SoapboxMount = () => {
       )}
 
       {waitlisted && (
-        <Route render={(props) => <WaitlistPage {...props} account={account} />} />
+        <Route render={(props) => (
+          <BundleContainer fetchComponent={WaitlistPage} loading={LoadingScreen}>
+            {(Component) => <Component {...props} account={account} />}
+          </BundleContainer>
+        )}
+        />
       )}
 
       {!me && (singleUserMode
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index 53efab79f..5592772d1 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -498,6 +498,10 @@ export function OnboardingWizard() {
   return import(/* webpackChunkName: "features/onboarding" */'../../onboarding/onboarding-wizard');
 }
 
+export function WaitlistPage() {
+  return import(/* webpackChunkName: "features/verification" */'../../verification/waitlist_page');
+}
+
 export function CompareHistoryModal() {
   return import(/*webpackChunkName: "modals/compare_history_modal" */'../components/compare_history_modal');
 }

From 3cd8a4b96634fffb6c7792f41331034dc9935baa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 20 May 2022 20:54:24 +0200
Subject: [PATCH 019/102] Use useFeatures hook
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/ui/components/profile_familiar_followers.tsx    | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/ui/components/profile_familiar_followers.tsx b/app/soapbox/features/ui/components/profile_familiar_followers.tsx
index a0dcef2c9..f2e0c9b61 100644
--- a/app/soapbox/features/ui/components/profile_familiar_followers.tsx
+++ b/app/soapbox/features/ui/components/profile_familiar_followers.tsx
@@ -10,9 +10,8 @@ import { openModal } from 'soapbox/actions/modals';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import { Text } from 'soapbox/components/ui';
 import VerificationBadge from 'soapbox/components/verification_badge';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
-import { getFeatures } from 'soapbox/utils/features';
 
 import type { Account } from 'soapbox/types/entities';
 
@@ -25,7 +24,7 @@ interface IProfileFamiliarFollowers {
 const ProfileFamiliarFollowers: React.FC<IProfileFamiliarFollowers> = ({ account }) => {
   const dispatch = useDispatch();
   const me = useAppSelector((state) => state.me);
-  const features = useAppSelector((state) => getFeatures(state.instance));
+  const features = useFeatures();
   const familiarFollowerIds: ImmutableOrderedSet<string> = useAppSelector(state => state.user_lists.getIn(['familiar_followers', account.id], ImmutableOrderedSet()));
   const familiarFollowers: ImmutableOrderedSet<Account | null> = useAppSelector(state => familiarFollowerIds.slice(0, 2).map(accountId => getAccount(state, accountId)));
 

From 40c3793d20d876db99375ff52649ead20edebaf8 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 17:18:10 -0500
Subject: [PATCH 020/102] Notifications: use a ScrollableList again

---
 app/soapbox/features/notifications/index.js | 87 ++++++++++-----------
 1 file changed, 41 insertions(+), 46 deletions(-)

diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index 05fed79a7..168a013f8 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -1,3 +1,4 @@
+import classNames from 'classnames';
 import { List as ImmutableList } from 'immutable';
 import { debounce } from 'lodash';
 import PropTypes from 'prop-types';
@@ -5,11 +6,9 @@ import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
-import { Virtuoso } from 'react-virtuoso';
 import { createSelector } from 'reselect';
 
 import { getSettings } from 'soapbox/actions/settings';
-import PullToRefresh from 'soapbox/components/pull-to-refresh';
 import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
 
 import {
@@ -17,8 +16,9 @@ import {
   scrollTopNotifications,
   dequeueNotifications,
 } from '../../actions/notifications';
+import ScrollableList from '../../components/scrollable_list';
 import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
-import { Column, Text } from '../../components/ui';
+import { Column } from '../../components/ui';
 
 import FilterBarContainer from './containers/filter_bar_container';
 import NotificationContainer from './containers/notification_container';
@@ -28,16 +28,6 @@ const messages = defineMessages({
   queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
 });
 
-const Footer = ({ context }) => (
-  context.hasMore ? (
-    <PlaceholderNotification />
-  ) : null
-);
-
-const Item = ({ context, ...rest }) => (
-  <div className='border-solid border-b border-gray-200 dark:border-slate-700' {...rest} />
-);
-
 const getNotifications = createSelector([
   state => getSettings(state).getIn(['notifications', 'quickFilter', 'show']),
   state => getSettings(state).getIn(['notifications', 'quickFilter', 'active']),
@@ -157,44 +147,49 @@ class Notifications extends React.PureComponent {
     const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
     const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
 
+    let scrollableContent = null;
+
     const filterBarContainer = showFilterBar
       ? (<FilterBarContainer />)
       : null;
 
-    const showLoading = isLoading && !notifications || notifications.isEmpty();
-
-    const scrollContainer  = (
-      <PullToRefresh onRefresh={this.handleRefresh}>
-        <Virtuoso
-          ref={this.setRef}
-          useWindowScroll
-          data={showLoading ? Array(20).fill() : notifications.toArray()}
-          startReached={this.handleScrollToTop}
-          endReached={this.handleLoadOlder}
-          isScrolling={isScrolling => isScrolling && this.handleScroll()}
-          itemContent={(_index, notification) => (
-            showLoading ? (
-              <PlaceholderNotification />
-            ) : (
-              <NotificationContainer
-                key={notification.id}
-                notification={notification}
-                onMoveUp={this.handleMoveUp}
-                onMoveDown={this.handleMoveDown}
-              />
-            )
-          )}
-          context={{
-            hasMore,
-          }}
-          components={{
-            ScrollSeekPlaceholder: PlaceholderNotification,
-            Footer,
-            EmptyPlaceholder: () => <Text>{emptyMessage}</Text>,
-            Item,
-          }}
+    if (isLoading && this.scrollableContent) {
+      scrollableContent = this.scrollableContent;
+    } else if (notifications.size > 0 || hasMore) {
+      scrollableContent = notifications.map((item, index) => (
+        <NotificationContainer
+          key={item.get('id')}
+          notification={item}
+          onMoveUp={this.handleMoveUp}
+          onMoveDown={this.handleMoveDown}
         />
-      </PullToRefresh>
+      ));
+    } else {
+      scrollableContent = null;
+    }
+
+    this.scrollableContent = scrollableContent;
+
+    const scrollContainer = (
+      <ScrollableList
+        scrollKey='notifications'
+        isLoading={isLoading}
+        showLoading={isLoading && notifications.size === 0}
+        hasMore={hasMore}
+        emptyMessage={emptyMessage}
+        placeholderComponent={PlaceholderNotification}
+        placeholderCount={20}
+        onLoadMore={this.handleLoadOlder}
+        onRefresh={this.handleRefresh}
+        onScrollToTop={this.handleScrollToTop}
+        onScroll={this.handleScroll}
+        className={classNames({
+          'divide-y divide-gray-200 dark:divide-gray-600 divide-solid': notifications.size > 0,
+          'space-y-2': notifications.size === 0,
+        })}
+      >
+        {scrollableContent}
+      </ScrollableList>
     );
 
     return (

From 0587c3f245931eeb45bd6ba88efc9c5c2e3b0942 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 20 May 2022 18:47:49 -0500
Subject: [PATCH 021/102] GitLab CI: test Mastodon Nginx conf

---
 .gitlab-ci.yml             | 9 +++++++++
 installation/mastodon.conf | 5 +++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 0e9a716ee..faa87ef71 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -59,6 +59,15 @@ jest:
       - "package.json"
       - "yarn.lock"
 
+nginx-test:
+  stage: test
+  image: nginx:latest
+  before_script: cp installation/mastodon.conf /etc/nginx/conf.d/default.conf
+  script: nginx -t
+  only:
+    changes:
+      - "installation/mastodon.conf"
+
 build-production:
   stage: build
   script: yarn build
diff --git a/installation/mastodon.conf b/installation/mastodon.conf
index 33b2bd894..988a098b9 100644
--- a/installation/mastodon.conf
+++ b/installation/mastodon.conf
@@ -39,8 +39,9 @@ server {
 }
 
 server {
-  listen 443 ssl http2;
-  listen [::]:443 ssl http2;
+  # Uncomment these lines once you acquire a certificate:
+  # listen 443 ssl http2;
+  # listen [::]:443 ssl http2;
   server_name example.com;
 
   ssl_protocols TLSv1.2 TLSv1.3;

From 308877ab7b38909e6d0ae7d278f06289aadc1622 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 21 May 2022 07:55:51 +0200
Subject: [PATCH 022/102] Use setRef in notifications list
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/notifications/index.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index 168a013f8..a43ec5704 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/app/soapbox/features/notifications/index.js
@@ -172,6 +172,7 @@ class Notifications extends React.PureComponent {
 
     const scrollContainer = (
       <ScrollableList
+        ref={this.setRef}
         scrollKey='notifications'
         isLoading={isLoading}
         showLoading={isLoading && notifications.size === 0}

From 10bdd664b0de99b61a44cd471549aba548f61620 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 21 May 2022 08:35:33 +0200
Subject: [PATCH 023/102] split functions for admin api actions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/admin.js | 279 +++++++++++++++++++++--------------
 1 file changed, 170 insertions(+), 109 deletions(-)

diff --git a/app/soapbox/actions/admin.js b/app/soapbox/actions/admin.js
index 313cf6203..ad56f1fbb 100644
--- a/app/soapbox/actions/admin.js
+++ b/app/soapbox/actions/admin.js
@@ -100,36 +100,27 @@ export function updateConfig(configs) {
   };
 }
 
-export function fetchReports(params = {}) {
+function fetchMastodonReports(params) {
   return (dispatch, getState) => {
-    const state = getState();
-
-    const instance = state.get('instance');
-    const features = getFeatures(instance);
-
-    dispatch({ type: ADMIN_REPORTS_FETCH_REQUEST, params });
-
-    if (features.mastodonAdminApi) {
-      return api(getState)
-        .get('/api/v1/admin/reports', { params })
-        .then(({ data: reports }) => {
-          reports.forEach(report => {
-            dispatch(importFetchedAccount(report.account?.account));
-            dispatch(importFetchedAccount(report.target_account?.account));
-            dispatch(importFetchedStatuses(report.statuses));
-          });
-          dispatch({ type: ADMIN_REPORTS_FETCH_SUCCESS, reports, params });
-        }).catch(error => {
-          dispatch({ type: ADMIN_REPORTS_FETCH_FAIL, error, params });
-        });
-    }
-
-    const { resolved } = params;
-
     return api(getState)
-      .get('/api/pleroma/admin/reports', { params: {
-        state: resolved === false ? 'open' : (resolved ? 'resolved' : null),
-      } })
+      .get('/api/v1/admin/reports', { params })
+      .then(({ data: reports }) => {
+        reports.forEach(report => {
+          dispatch(importFetchedAccount(report.account?.account));
+          dispatch(importFetchedAccount(report.target_account?.account));
+          dispatch(importFetchedStatuses(report.statuses));
+        });
+        dispatch({ type: ADMIN_REPORTS_FETCH_SUCCESS, reports, params });
+      }).catch(error => {
+        dispatch({ type: ADMIN_REPORTS_FETCH_FAIL, error, params });
+      });
+  };
+}
+
+function fetchPleromaReports(params) {
+  return (dispatch, getState) => {
+    return api(getState)
+      .get('/api/pleroma/admin/reports', { params })
       .then(({ data: { reports } }) => {
         reports.forEach(report => {
           dispatch(importFetchedAccount(report.account));
@@ -143,28 +134,42 @@ export function fetchReports(params = {}) {
   };
 }
 
-function patchReports(ids, state) {
+export function fetchReports(params = {}) {
   return (dispatch, getState) => {
     const state = getState();
 
     const instance = state.get('instance');
     const features = getFeatures(instance);
 
-    const reports = ids.map(id => ({ id, state }));
-
-    dispatch({ type: ADMIN_REPORTS_PATCH_REQUEST, reports });
+    dispatch({ type: ADMIN_REPORTS_FETCH_REQUEST, params });
 
     if (features.mastodonAdminApi) {
-      return Promise.all(ids.map(id => api(getState)
-        .post(`/api/v1/admin/reports/${id}/${state === 'resolved' ? 'reopen' : 'resolve'}`)
-        .then(({ data }) => {
-          dispatch({ type: ADMIN_REPORTS_PATCH_SUCCESS, reports });
-        }).catch(error => {
-          dispatch({ type: ADMIN_REPORTS_PATCH_FAIL, error, reports });
-        }),
-      ));
-    }
+      return dispatch(fetchMastodonReports(params));
+    } else {
+      const { resolved } = params;
 
+      return dispatch(fetchPleromaReports({
+        state: resolved === false ? 'open' : (resolved ? 'resolved' : null),
+      }));
+    }
+  };
+}
+
+function patchMastodonReports(reports) {
+  return (dispatch, getState) => {
+    return Promise.all(reports.map(({ id, state }) => api(getState)
+      .post(`/api/v1/admin/reports/${id}/${state === 'resolved' ? 'reopen' : 'resolve'}`)
+      .then(() => {
+        dispatch({ type: ADMIN_REPORTS_PATCH_SUCCESS, reports });
+      }).catch(error => {
+        dispatch({ type: ADMIN_REPORTS_PATCH_FAIL, error, reports });
+      }),
+    ));
+  };
+}
+
+function patchPleromaReports(reports) {
+  return (dispatch, getState) => {
     return api(getState)
       .patch('/api/pleroma/admin/reports', { reports })
       .then(() => {
@@ -174,46 +179,61 @@ function patchReports(ids, state) {
       });
   };
 }
-export function closeReports(ids) {
-  return patchReports(ids, 'closed');
-}
 
-export function fetchUsers(filters = [], page = 1, query, pageSize = 50, next) {
+function patchReports(ids, reportState) {
   return (dispatch, getState) => {
     const state = getState();
 
     const instance = state.get('instance');
     const features = getFeatures(instance);
 
-    dispatch({ type: ADMIN_USERS_FETCH_REQUEST, filters, page, pageSize });
+    const reports = ids.map(id => ({ id, state: reportState }));
+
+    dispatch({ type: ADMIN_REPORTS_PATCH_REQUEST, reports });
 
     if (features.mastodonAdminApi) {
-      const params = {
-        username: query,
-      };
-
-      if (filters.includes('local')) params.local = true;
-      if (filters.includes('active')) params.active = true;
-      if (filters.includes('need_approval')) params.pending = true;
-
-      return api(getState)
-        .get(next || '/api/v1/admin/accounts', { params })
-        .then(({ data: accounts, ...response }) => {
-          const next = getLinks(response).refs.find(link => link.rel === 'next');
-
-          const count = next
-            ? page * pageSize + 1
-            : (page - 1) * pageSize + accounts.length;
-
-          dispatch(importFetchedAccounts(accounts.map(({ account }) => account)));
-          dispatch(fetchRelationships(accounts.map(account => account.id)));
-          dispatch({ type: ADMIN_USERS_FETCH_SUCCESS, users: accounts, count, pageSize, filters, page, next: next?.uri || false });
-          return { users: accounts, count, pageSize, next: next?.uri || false };
-        }).catch(error => {
-          dispatch({ type: ADMIN_USERS_FETCH_FAIL, error, filters, page, pageSize });
-        });
+      return dispatch(patchMastodonReports(reports));
+    } else {
+      return dispatch(patchPleromaReports(reports));
     }
+  };
+}
 
+export function closeReports(ids) {
+  return patchReports(ids, 'closed');
+}
+
+function fetchMastodonUsers(filters, page, query, pageSize, next) {
+  return (dispatch, getState) => {
+    const params = {
+      username: query,
+    };
+
+    if (filters.includes('local')) params.local = true;
+    if (filters.includes('active')) params.active = true;
+    if (filters.includes('need_approval')) params.pending = true;
+
+    return api(getState)
+      .get(next || '/api/v1/admin/accounts', { params })
+      .then(({ data: accounts, ...response }) => {
+        const next = getLinks(response).refs.find(link => link.rel === 'next');
+
+        const count = next
+          ? page * pageSize + 1
+          : (page - 1) * pageSize + accounts.length;
+
+        dispatch(importFetchedAccounts(accounts.map(({ account }) => account)));
+        dispatch(fetchRelationships(accounts.map(account => account.id)));
+        dispatch({ type: ADMIN_USERS_FETCH_SUCCESS, users: accounts, count, pageSize, filters, page, next: next?.uri || false });
+        return { users: accounts, count, pageSize, next: next?.uri || false };
+      }).catch(error => {
+        dispatch({ type: ADMIN_USERS_FETCH_FAIL, error, filters, page, pageSize });
+      });
+  };
+}
+
+function fetchPleromaUsers(filters, page, query, pageSize) {
+  return (dispatch, getState) => {
     const params = { filters: filters.join(), page, page_size: pageSize };
     if (query) params.query = query;
 
@@ -229,6 +249,53 @@ export function fetchUsers(filters = [], page = 1, query, pageSize = 50, next) {
   };
 }
 
+export function fetchUsers(filters = [], page = 1, query, pageSize = 50, next) {
+  return (dispatch, getState) => {
+    const state = getState();
+
+    const instance = state.get('instance');
+    const features = getFeatures(instance);
+
+    dispatch({ type: ADMIN_USERS_FETCH_REQUEST, filters, page, pageSize });
+
+    if (features.mastodonAdminApi) {
+      return dispatch(fetchMastodonUsers(filters, page, query, pageSize, next));
+    } else {
+      return dispatch(fetchPleromaUsers(filters, page, query, pageSize));
+    }
+  };
+}
+
+function deactivateMastodonUsers(accountIds, reportId) {
+  return (dispatch, getState) => {
+    return Promise.all(accountIds.map(accountId => {
+      api(getState)
+        .post(`/api/v1/admin/accounts/${accountId}/action`, {
+          type: 'disable',
+          report_id: reportId,
+        })
+        .then(() => {
+          dispatch({ type: ADMIN_USERS_DEACTIVATE_SUCCESS, accountIds: [accountId] });
+        }).catch(error => {
+          dispatch({ type: ADMIN_USERS_DEACTIVATE_FAIL, error, accountIds: [accountId] });
+        });
+    }));
+  };
+}
+
+function deactivatePleromaUsers(accountIds) {
+  return (dispatch, getState) => {
+    const nicknames = nicknamesFromIds(getState, accountIds);
+    return api(getState)
+      .patch('/api/pleroma/admin/users/deactivate', { nicknames })
+      .then(({ data: { users } }) => {
+        dispatch({ type: ADMIN_USERS_DEACTIVATE_SUCCESS, users, accountIds });
+      }).catch(error => {
+        dispatch({ type: ADMIN_USERS_DEACTIVATE_FAIL, error, accountIds });
+      });
+  };
+}
+
 export function deactivateUsers(accountIds, reportId) {
   return (dispatch, getState) => {
     const state = getState();
@@ -239,28 +306,10 @@ export function deactivateUsers(accountIds, reportId) {
     dispatch({ type: ADMIN_USERS_DEACTIVATE_REQUEST, accountIds });
 
     if (features.mastodonAdminApi) {
-      return Promise.all(accountIds.map(accountId => {
-        api(getState)
-          .post(`/api/v1/admin/accounts/${accountId}/action`, {
-            type: 'disable',
-            report_id: reportId,
-          })
-          .then(() => {
-            dispatch({ type: ADMIN_USERS_DEACTIVATE_SUCCESS, accountIds: [accountId] });
-          }).catch(error => {
-            dispatch({ type: ADMIN_USERS_DEACTIVATE_FAIL, error, accountIds: [accountId] });
-          });
-      }));
+      return dispatch(deactivateMastodonUsers(accountIds, reportId));
+    } else {
+      return dispatch(deactivatePleromaUsers(accountIds));
     }
-
-    const nicknames = nicknamesFromIds(getState, accountIds);
-    return api(getState)
-      .patch('/api/pleroma/admin/users/deactivate', { nicknames })
-      .then(({ data: { users } }) => {
-        dispatch({ type: ADMIN_USERS_DEACTIVATE_SUCCESS, users, accountIds });
-      }).catch(error => {
-        dispatch({ type: ADMIN_USERS_DEACTIVATE_FAIL, error, accountIds });
-      });
   };
 }
 
@@ -278,6 +327,33 @@ export function deleteUsers(accountIds) {
   };
 }
 
+function approveMastodonUsers(accountIds) {
+  return (dispatch, getState) => {
+    return Promise.all(accountIds.map(accountId => {
+      api(getState)
+        .post(`/api/v1/admin/accounts/${accountId}/approve`)
+        .then(({ data: user }) => {
+          dispatch({ type: ADMIN_USERS_APPROVE_SUCCESS, users: [user], accountIds: [accountId] });
+        }).catch(error => {
+          dispatch({ type: ADMIN_USERS_APPROVE_FAIL, error, accountIds: [accountId] });
+        });
+    }));
+  };
+}
+
+function approvePleromaUsers(accountIds) {
+  return (dispatch, getState) => {
+    const nicknames = nicknamesFromIds(getState, accountIds);
+    return api(getState)
+      .patch('/api/pleroma/admin/users/approve', { nicknames })
+      .then(({ data: { users } }) => {
+        dispatch({ type: ADMIN_USERS_APPROVE_SUCCESS, users, accountIds });
+      }).catch(error => {
+        dispatch({ type: ADMIN_USERS_APPROVE_FAIL, error, accountIds });
+      });
+  };
+}
+
 export function approveUsers(accountIds) {
   return (dispatch, getState) => {
     const state = getState();
@@ -288,25 +364,10 @@ export function approveUsers(accountIds) {
     dispatch({ type: ADMIN_USERS_APPROVE_REQUEST, accountIds });
 
     if (features.mastodonAdminApi) {
-      return Promise.all(accountIds.map(accountId => {
-        api(getState)
-          .post(`/api/v1/admin/accounts/${accountId}/approve`)
-          .then(({ data: user }) => {
-            dispatch({ type: ADMIN_USERS_APPROVE_SUCCESS, users: [user], accountIds: [accountId] });
-          }).catch(error => {
-            dispatch({ type: ADMIN_USERS_APPROVE_FAIL, error, accountIds: [accountId] });
-          });
-      }));
+      return dispatch(approveMastodonUsers(accountIds));
+    } else {
+      return dispatch(approvePleromaUsers(accountIds));
     }
-
-    const nicknames = nicknamesFromIds(getState, accountIds);
-    return api(getState)
-      .patch('/api/pleroma/admin/users/approve', { nicknames })
-      .then(({ data: { users } }) => {
-        dispatch({ type: ADMIN_USERS_APPROVE_SUCCESS, users, accountIds });
-      }).catch(error => {
-        dispatch({ type: ADMIN_USERS_APPROVE_FAIL, error, accountIds });
-      });
   };
 }
 

From 76cf741bf837cc7064a04aecf83594379acdc35d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 21 May 2022 08:42:39 +0200
Subject: [PATCH 024/102] DeleteAccount: Do not show explanation related to
 federation if not federating
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/delete_account/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/delete_account/index.tsx b/app/soapbox/features/delete_account/index.tsx
index d5927f763..af4282aef 100644
--- a/app/soapbox/features/delete_account/index.tsx
+++ b/app/soapbox/features/delete_account/index.tsx
@@ -4,12 +4,13 @@ import { defineMessages, useIntl } from 'react-intl';
 import { deleteAccount } from 'soapbox/actions/security';
 import snackbar from 'soapbox/actions/snackbar';
 import { Button, Card, CardBody, CardHeader, CardTitle, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-import { useAppDispatch } from 'soapbox/hooks';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks';
 
 const messages = defineMessages({
   passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
   deleteHeader: { id: 'security.headers.delete', defaultMessage: 'Delete Account' },
   deleteText: { id: 'security.text.delete', defaultMessage: 'To delete your account, enter your password then click Delete Account. This is a permanent action that cannot be undone. Your account will be destroyed from this server, and a deletion request will be sent to other servers. It\'s not guaranteed that all servers will purge your account.' },
+  localDeleteText: { id: 'security.text.delete.local', defaultMessage: 'To delete your account, enter your password then click Delete Account. This is a permanent action that cannot be undone.' },
   deleteSubmit: { id: 'security.submit.delete', defaultMessage: 'Delete Account' },
   deleteAccountSuccess: { id: 'security.delete_account.success', defaultMessage: 'Account successfully deleted.' },
   deleteAccountFail: { id: 'security.delete_account.fail', defaultMessage: 'Account deletion failed.' },
@@ -18,6 +19,7 @@ const messages = defineMessages({
 const DeleteAccount = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const features = useFeatures();
 
   const [password, setPassword] = React.useState('');
   const [isLoading, setLoading] = React.useState(false);
@@ -49,7 +51,7 @@ const DeleteAccount = () => {
 
       <CardBody>
         <p className='text-gray-400 mb-4'>
-          {intl.formatMessage(messages.deleteText)}
+          {intl.formatMessage(features.federating ? messages.deleteText : messages.localDeleteText)}
         </p>
 
         <Form onSubmit={handleSubmit}>

From b2d59f751b4b707982fb049ea96914d82180d9cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 21 May 2022 14:37:02 +0200
Subject: [PATCH 025/102] types
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../features/admin/components/latest_accounts_panel.tsx       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/admin/components/latest_accounts_panel.tsx b/app/soapbox/features/admin/components/latest_accounts_panel.tsx
index 62636c366..7998c18d2 100644
--- a/app/soapbox/features/admin/components/latest_accounts_panel.tsx
+++ b/app/soapbox/features/admin/components/latest_accounts_panel.tsx
@@ -32,8 +32,8 @@ const LatestAccountsPanel: React.FC<ILatestAccountsPanel> = ({ limit = 5 }) => {
 
   useEffect(() => {
     dispatch(fetchUsers(['local', 'active'], 1, null, limit))
-      .then((value) => {
-        setTotal((value as { count: number }).count);
+      .then((value: { count: number }) => {
+        setTotal(value.count);
       })
       .catch(() => {});
   }, []);

From 4992862943e18cef9f15c4641e6058ba427a4487 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 22 May 2022 12:53:13 -0500
Subject: [PATCH 026/102] fetchMe: don't await verify_credentials if cached

---
 app/soapbox/actions/auth.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/actions/auth.js b/app/soapbox/actions/auth.js
index 79ff9d67f..a42bccdef 100644
--- a/app/soapbox/actions/auth.js
+++ b/app/soapbox/actions/auth.js
@@ -207,9 +207,12 @@ export function rememberAuthAccount(accountUrl) {
 
 export function loadCredentials(token, accountUrl) {
   return (dispatch, getState) => {
-    return dispatch(rememberAuthAccount(accountUrl)).finally(() => {
-      return dispatch(verifyCredentials(token, accountUrl));
-    });
+    return dispatch(rememberAuthAccount(accountUrl))
+      .then(account => account)
+      .then(() => {
+        dispatch(verifyCredentials(token, accountUrl));
+      })
+      .catch(error => dispatch(verifyCredentials(token, accountUrl)));
   };
 }
 

From 2b7f4694da3309de8a59d43cff3c1ec7c414e3c5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sun, 22 May 2022 13:27:08 -0500
Subject: [PATCH 027/102] LoadingScreen: bump up spinner vertically to
 counteract optical illusion

---
 app/soapbox/components/loading-screen.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx
index 92882f98f..ffa1fa8f9 100644
--- a/app/soapbox/components/loading-screen.tsx
+++ b/app/soapbox/components/loading-screen.tsx
@@ -10,7 +10,10 @@ const LoadingScreen: React.FC = () => {
       <LandingGradient />
 
       <div className='fixed h-screen w-screen flex items-center justify-center z-10'>
-        <Spinner size={40} withText={false} />
+        {/* Bump up spinner vertically to counteract optical illusion. */}
+        <div className='-translate-y-3/4'>
+          <Spinner size={40} withText={false} />
+        </div>
       </div>
     </div>
   );

From 73c4457f281ff49daff22665a3e8f6d9a0fd12af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 23 May 2022 21:14:42 +0200
Subject: [PATCH 028/102] Scheduled statuses: TypeScript, fix styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/account.tsx            |  6 +-
 app/soapbox/components/ui/hstack/hstack.tsx   |  4 +-
 .../{builder.js => builder.tsx}               |  6 +-
 .../components/scheduled_status.js            | 91 -------------------
 .../components/scheduled_status.tsx           | 66 ++++++++++++++
 .../components/scheduled_status_action_bar.js | 83 -----------------
 .../scheduled_status_action_bar.tsx           | 59 ++++++++++++
 .../features/scheduled_statuses/index.js      | 66 --------------
 .../features/scheduled_statuses/index.tsx     | 51 +++++++++++
 9 files changed, 187 insertions(+), 245 deletions(-)
 rename app/soapbox/features/scheduled_statuses/{builder.js => builder.tsx} (85%)
 delete mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status.js
 create mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
 delete mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
 create mode 100644 app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx
 delete mode 100644 app/soapbox/features/scheduled_statuses/index.js
 create mode 100644 app/soapbox/features/scheduled_statuses/index.tsx

diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 1d670a344..cc91ded59 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -56,6 +56,7 @@ interface IAccount {
   showProfileHoverCard?: boolean,
   timestamp?: string | Date,
   timestampUrl?: string,
+  futureTimestamp?: boolean,
   withDate?: boolean,
   withRelationship?: boolean,
   showEdit?: boolean,
@@ -75,6 +76,7 @@ const Account = ({
   showProfileHoverCard = true,
   timestamp,
   timestampUrl,
+  futureTimestamp = false,
   withDate = false,
   withRelationship = true,
   showEdit = false,
@@ -205,10 +207,10 @@ const Account = ({
 
                   {timestampUrl ? (
                     <Link to={timestampUrl} className='hover:underline'>
-                      <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' />
+                      <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
                     </Link>
                   ) : (
-                    <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' />
+                    <RelativeTimestamp timestamp={timestamp} theme='muted' size='sm' className='whitespace-nowrap' futureDate={futureTimestamp} />
                   )}
                 </>
               ) : null}
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index 44dac93c7..803bbd7c1 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -4,6 +4,8 @@ import React from 'react';
 const justifyContentOptions = {
   between: 'justify-between',
   center: 'justify-center',
+  start: 'justify-start',
+  end: 'justify-end',
 };
 
 const alignItemsOptions = {
@@ -29,7 +31,7 @@ interface IHStack {
   /** Extra class names on the <div> element. */
   className?: string,
   /** Horizontal alignment of children. */
-  justifyContent?: 'between' | 'center',
+  justifyContent?: 'between' | 'center' | 'start' | 'end',
   /** Size of the gap between elements. */
   space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6,
   /** Whether to let the flexbox grow. */
diff --git a/app/soapbox/features/scheduled_statuses/builder.js b/app/soapbox/features/scheduled_statuses/builder.tsx
similarity index 85%
rename from app/soapbox/features/scheduled_statuses/builder.js
rename to app/soapbox/features/scheduled_statuses/builder.tsx
index 8e3417582..2927c8984 100644
--- a/app/soapbox/features/scheduled_statuses/builder.js
+++ b/app/soapbox/features/scheduled_statuses/builder.tsx
@@ -3,11 +3,13 @@ import { Map as ImmutableMap } from 'immutable';
 import { normalizeStatus } from 'soapbox/normalizers/status';
 import { calculateStatus } from 'soapbox/reducers/statuses';
 import { makeGetAccount } from 'soapbox/selectors';
+import { RootState } from 'soapbox/store';
 
-export const buildStatus = (state, scheduledStatus) => {
+export const buildStatus = (state: RootState, scheduledStatus: ImmutableMap<string, any>) => {
   const getAccount = makeGetAccount();
 
-  const me = state.get('me');
+  const me = state.me as string;
+
   const params = scheduledStatus.get('params');
   const account = getAccount(state, me);
 
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status.js
deleted file mode 100644
index b88ccc450..000000000
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.js
+++ /dev/null
@@ -1,91 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-import { Link, NavLink } from 'react-router-dom';
-
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
-import RelativeTimestamp from 'soapbox/components/relative_timestamp';
-import StatusContent from 'soapbox/components/status_content';
-import StatusReplyMentions from 'soapbox/components/status_reply_mentions';
-import PollPreview from 'soapbox/features/ui/components/poll_preview';
-import { getDomain } from 'soapbox/utils/accounts';
-
-import { buildStatus } from '../builder';
-
-import ScheduledStatusActionBar from './scheduled_status_action_bar';
-
-const mapStateToProps = (state, props) => {
-  const scheduledStatus = state.getIn(['scheduled_statuses', props.statusId]);
-  return {
-    status: buildStatus(state, scheduledStatus),
-  };
-};
-
-export default @connect(mapStateToProps)
-class ScheduledStatus extends ImmutablePureComponent {
-
-  render() {
-    const { status, account, ...other } = this.props;
-    if (!status.get('account')) return null;
-
-    const statusUrl = `/scheduled_statuses/${status.get('id')}`;
-    const favicon = status.getIn(['account', 'pleroma', 'favicon']);
-    const domain = getDomain(status.get('account'));
-
-    return (
-      <div className='scheduled-status'>
-        <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id') })} tabIndex={this.props.muted ? null : 0}>
-          <div className={classNames('status', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
-            <div className='status__expand' role='presentation' />
-            <div className='status__info'>
-              <NavLink to={statusUrl} className='status__relative-time'>
-                <RelativeTimestamp timestamp={status.get('created_at')} futureDate />
-              </NavLink>
-
-              {favicon &&
-                <div className='status__favicon'>
-                  <Link to={`/timeline/${domain}`}>
-                    <img src={favicon} alt='' title={domain} />
-                  </Link>
-                </div>}
-
-              <div className='status__profile'>
-                <div className='status__avatar'>
-                  <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])}>
-                    <Avatar account={status.get('account')} size={48} />
-                  </NavLink>
-                </div>
-                <NavLink to={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name'>
-                  <DisplayName account={status.get('account')} />
-                </NavLink>
-              </div>
-            </div>
-
-            <StatusReplyMentions status={status} />
-
-            <StatusContent
-              status={status}
-              expanded
-              collapsable
-            />
-
-            {status.get('media_attachments').size > 0 && (
-              <AttachmentThumbs
-                media={status.get('media_attachments')}
-                sensitive={status.get('sensitive')}
-              />
-            )}
-
-            {status.get('poll') && <PollPreview poll={status.get('poll')} />}
-
-            <ScheduledStatusActionBar status={status} account={account} {...other} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
new file mode 100644
index 000000000..0d8b14cd3
--- /dev/null
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
@@ -0,0 +1,66 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import StatusContent from 'soapbox/components/status_content';
+import StatusReplyMentions from 'soapbox/components/status_reply_mentions';
+import { HStack } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import PollPreview from 'soapbox/features/ui/components/poll_preview';
+import { useAppSelector } from 'soapbox/hooks';
+
+import { buildStatus } from '../builder';
+
+import ScheduledStatusActionBar from './scheduled_status_action_bar';
+
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+
+interface IScheduledStatus {
+  statusId: string,
+}
+
+const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) => {
+  const status = useAppSelector((state) => buildStatus(state, state.scheduled_statuses.get(statusId))) as StatusEntity;
+
+  if (!status) return null;
+
+  const account = status.account as AccountEntity;
+
+  return (
+    <div className={classNames('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
+      <div className={classNames('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
+        <div className='mb-4'>
+          <HStack justifyContent='between' alignItems='start'>
+            <AccountContainer
+              key={account.id}
+              id={account.id}
+              timestamp={status.created_at}
+              futureTimestamp
+            />
+          </HStack>
+        </div>
+
+        <StatusReplyMentions status={status} />
+
+        <StatusContent
+          status={status}
+          expanded
+          collapsable
+        />
+
+        {status.media_attachments.size > 0 && (
+          <AttachmentThumbs
+            media={status.media_attachments}
+            sensitive={status.sensitive}
+          />
+        )}
+
+        {status.poll && <PollPreview poll={status.poll} />}
+
+        <ScheduledStatusActionBar status={status} {...other} />
+      </div>
+    </div>
+  );
+};
+
+export default ScheduledStatus;
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
deleted file mode 100644
index 7ed5c4d08..000000000
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js
+++ /dev/null
@@ -1,83 +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 { openModal } from 'soapbox/actions/modals';
-import { cancelScheduledStatus } from 'soapbox/actions/scheduled_statuses';
-import { getSettings } from 'soapbox/actions/settings';
-import IconButton from 'soapbox/components/icon_button';
-import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
-
-const messages = defineMessages({
-  cancel: { id: 'scheduled_status.cancel', defaultMessage: 'Cancel' },
-  deleteConfirm: { id: 'confirmations.scheduled_status_delete.confirm', defaultMessage: 'Cancel' },
-  deleteHeading: { id: 'confirmations.scheduled_status_delete.heading', defaultMessage: 'Cancel scheduled post' },
-  deleteMessage: { id: 'confirmations.scheduled_status_delete.message', defaultMessage: 'Are you sure you want to cancel this scheduled post?' },
-});
-
-const mapStateToProps = state => {
-  const me = state.get('me');
-  return {
-    me,
-  };
-};
-
-const mapDispatchToProps = (dispatch, { intl }) => ({
-  onCancelClick: (status) => {
-    dispatch((_, getState) => {
-
-      const deleteModal = getSettings(getState()).get('deleteModal');
-      if (!deleteModal) {
-        dispatch(cancelScheduledStatus(status.get('id')));
-      } else {
-        dispatch(openModal('CONFIRM', {
-          icon: require('@tabler/icons/icons/calendar-stats.svg'),
-          heading: intl.formatMessage(messages.deleteHeading),
-          message: intl.formatMessage(messages.deleteMessage),
-          confirm: intl.formatMessage(messages.deleteConfirm),
-          onConfirm: () => dispatch(cancelScheduledStatus(status.get('id'))),
-        }));
-      }
-    });
-  },
-});
-
-class ScheduledStatusActionBar extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.record.isRequired,
-    intl: PropTypes.object.isRequired,
-    me: SoapboxPropTypes.me,
-    onCancelClick: PropTypes.func.isRequired,
-  };
-
-  handleCancelClick = e => {
-    const { status, onCancelClick } = this.props;
-
-    onCancelClick(status);
-  }
-
-  render() {
-    const { intl } = this.props;
-
-    return (
-      <div className='status__action-bar'>
-        <div className='status__button'>
-          <IconButton
-            title={intl.formatMessage(messages.cancel)}
-            text={intl.formatMessage(messages.cancel)}
-            src={require('@tabler/icons/icons/x.svg')}
-            onClick={this.handleCancelClick}
-          />
-        </div>
-      </div>
-    );
-  }
-
-}
-
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ScheduledStatusActionBar));
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx
new file mode 100644
index 000000000..7b44805d4
--- /dev/null
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import { cancelScheduledStatus } from 'soapbox/actions/scheduled_statuses';
+import { getSettings } from 'soapbox/actions/settings';
+import IconButton from 'soapbox/components/icon_button';
+import { HStack } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { Status as StatusEntity } from 'soapbox/types/entities';
+
+const messages = defineMessages({
+  cancel: { id: 'scheduled_status.cancel', defaultMessage: 'Cancel' },
+  deleteConfirm: { id: 'confirmations.scheduled_status_delete.confirm', defaultMessage: 'Cancel' },
+  deleteHeading: { id: 'confirmations.scheduled_status_delete.heading', defaultMessage: 'Cancel scheduled post' },
+  deleteMessage: { id: 'confirmations.scheduled_status_delete.message', defaultMessage: 'Are you sure you want to cancel this scheduled post?' },
+});
+
+interface IScheduledStatusActionBar {
+  status: StatusEntity,
+}
+
+const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status }) => {
+  const intl = useIntl();
+
+  const dispatch = useAppDispatch();
+
+  const handleCancelClick = () => {
+    dispatch((_, getState) => {
+
+      const deleteModal = getSettings(getState()).get('deleteModal');
+      if (!deleteModal) {
+        dispatch(cancelScheduledStatus(status.id));
+      } else {
+        dispatch(openModal('CONFIRM', {
+          icon: require('@tabler/icons/icons/calendar-stats.svg'),
+          heading: intl.formatMessage(messages.deleteHeading),
+          message: intl.formatMessage(messages.deleteMessage),
+          confirm: intl.formatMessage(messages.deleteConfirm),
+          onConfirm: () => dispatch(cancelScheduledStatus(status.id)),
+        }));
+      }
+    });
+  };
+
+  return (
+    <HStack justifyContent='end'>
+      <IconButton
+        title={intl.formatMessage(messages.cancel)}
+        text={intl.formatMessage(messages.cancel)}
+        src={require('@tabler/icons/icons/x.svg')}
+        onClick={handleCancelClick}
+      />
+    </HStack>
+  );
+};
+
+export default ScheduledStatusActionBar;
diff --git a/app/soapbox/features/scheduled_statuses/index.js b/app/soapbox/features/scheduled_statuses/index.js
deleted file mode 100644
index b8a63497e..000000000
--- a/app/soapbox/features/scheduled_statuses/index.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import { debounce } from 'lodash';
-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, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import ScrollableList from 'soapbox/components/scrollable_list';
-
-import { fetchScheduledStatuses, expandScheduledStatuses } from '../../actions/scheduled_statuses';
-import Column from '../ui/components/column';
-
-import ScheduledStatus from './components/scheduled_status';
-
-const messages = defineMessages({
-  heading: { id: 'column.scheduled_statuses', defaultMessage: 'Scheduled Posts' },
-});
-
-const mapStateToProps = state => ({
-  statusIds: state.getIn(['status_lists', 'scheduled_statuses', 'items']),
-  isLoading: state.getIn(['status_lists', 'scheduled_statuses', 'isLoading'], true),
-  hasMore: !!state.getIn(['status_lists', 'scheduled_statuses', 'next']),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class ScheduledStatuses extends ImmutablePureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    statusIds: ImmutablePropTypes.orderedSet.isRequired,
-    intl: PropTypes.object.isRequired,
-    hasMore: PropTypes.bool,
-    isLoading: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(fetchScheduledStatuses());
-  }
-
-  handleLoadMore = debounce(() => {
-    this.props.dispatch(expandScheduledStatuses());
-  }, 300, { leading: true })
-
-
-  render() {
-    const { intl, statusIds, hasMore, isLoading } = this.props;
-    const emptyMessage = <FormattedMessage id='empty_column.scheduled_statuses' defaultMessage="You don't have any scheduled statuses yet. When you add one, it will show up here." />;
-
-    return (
-      <Column icon='calendar' label={intl.formatMessage(messages.heading)}>
-        <ScrollableList
-          scrollKey='scheduled_statuses'
-          emptyMessage={emptyMessage}
-          isLoading={isLoading}
-          hasMore={hasMore}
-        >
-          {statusIds.map(id => <ScheduledStatus key={id} statusId={id} />)}
-        </ScrollableList>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/scheduled_statuses/index.tsx b/app/soapbox/features/scheduled_statuses/index.tsx
new file mode 100644
index 000000000..7d387022d
--- /dev/null
+++ b/app/soapbox/features/scheduled_statuses/index.tsx
@@ -0,0 +1,51 @@
+import { debounce } from 'lodash';
+import React from 'react';
+import { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled_statuses';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
+
+import Column from '../ui/components/column';
+
+import ScheduledStatus from './components/scheduled_status';
+
+const messages = defineMessages({
+  heading: { id: 'column.scheduled_statuses', defaultMessage: 'Scheduled Posts' },
+});
+
+const handleLoadMore = debounce((dispatch) => {
+  dispatch(expandScheduledStatuses());
+}, 300, { leading: true });
+
+const ScheduledStatuses = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const statusIds = useAppSelector((state) => state.status_lists.getIn(['scheduled_statuses', 'items']));
+  const isLoading = useAppSelector((state) => state.status_lists.getIn(['scheduled_statuses', 'isLoading']));
+  const hasMore = useAppSelector((state) => !!state.status_lists.getIn(['scheduled_statuses', 'next']));
+
+  useEffect(() => {
+    dispatch(fetchScheduledStatuses());
+  }, []);
+
+  const emptyMessage = <FormattedMessage id='empty_column.scheduled_statuses' defaultMessage="You don't have any scheduled statuses yet. When you add one, it will show up here." />;
+
+  return (
+    <Column icon='calendar' label={intl.formatMessage(messages.heading)}>
+      <ScrollableList
+        scrollKey='scheduled_statuses'
+        hasMore={hasMore}
+        isLoading={isLoading}
+        onLoadMore={() => handleLoadMore(dispatch)}
+        emptyMessage={emptyMessage}
+      >
+        {statusIds.map((id: string) => <ScheduledStatus key={id} statusId={id} />)}
+      </ScrollableList>
+    </Column>
+  );
+};
+
+export default ScheduledStatuses;
\ No newline at end of file

From 58ddda82465ff350bf0a6285d2cffa3f1418b00e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 22 May 2022 21:26:53 +0200
Subject: [PATCH 029/102] Remove Invites link from sidebar
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/sidebar-navigation.tsx | 11 -----------
 app/soapbox/components/sidebar_menu.tsx       | 12 ------------
 2 files changed, 23 deletions(-)

diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx
index 39eea4ec4..b123b9c55 100644
--- a/app/soapbox/components/sidebar-navigation.tsx
+++ b/app/soapbox/components/sidebar-navigation.tsx
@@ -6,7 +6,6 @@ import { getSettings } from 'soapbox/actions/settings';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import ComposeButton from 'soapbox/features/ui/components/compose-button';
 import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
-import { getBaseURL } from 'soapbox/utils/accounts';
 import { getFeatures } from 'soapbox/utils/features';
 
 import SidebarNavigationLink from './sidebar-navigation-link';
@@ -23,7 +22,6 @@ const SidebarNavigation = () => {
   const followRequestsCount = useAppSelector((state) => state.user_lists.getIn(['follow_requests', 'items'], ImmutableOrderedSet()).count());
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
 
-  const baseURL = account ? getBaseURL(account) : '';
   const features = getFeatures(instance);
 
   const makeMenu = (): Menu => {
@@ -55,15 +53,6 @@ const SidebarNavigation = () => {
         });
       }
 
-      if (instance.invites_enabled) {
-        menu.push({
-          href: `${baseURL}/invites`,
-          icon: require('@tabler/icons/icons/mailbox.svg'),
-          text: <FormattedMessage id='navigation.invites' defaultMessage='Invites' />,
-          newTab: true,
-        });
-      }
-
       if (settings.get('isDeveloper')) {
         menu.push({
           to: '/developers',
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index 15661c017..bf5fc26f4 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -13,7 +13,6 @@ import { Stack } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile_stats';
 import { useAppSelector, useSoapboxConfig, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount, makeGetOtherAccounts } from 'soapbox/selectors';
-import { getBaseURL } from 'soapbox/utils/accounts';
 
 import { HStack, Icon, IconButton, Text } from './ui';
 
@@ -91,8 +90,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen);
   const settings = useAppSelector((state) => getSettings(state));
 
-  const baseURL = account ? getBaseURL(account) : '';
-
   const closeButtonRef = React.useRef(null);
 
   const [switcher, setSwitcher] = React.useState(false);
@@ -241,15 +238,6 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                   />
                 )}
 
-                {instance.invites_enabled && (
-                  <SidebarLink
-                    href={`${baseURL}/invites`}
-                    icon={require('@tabler/icons/icons/mailbox.svg')}
-                    text={intl.formatMessage(messages.invites)}
-                    onClick={onClose}
-                  />
-                )}
-
                 {settings.get('isDeveloper') && (
                   <SidebarLink
                     to='/developers'

From 1f85803e7fb7aabaf48bb3b33d5409577f102cc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 24 May 2022 11:46:51 +0200
Subject: [PATCH 030/102] Restore default post privacy/format settings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/preferences/index.tsx | 50 ++++++++++++++++------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/app/soapbox/features/preferences/index.tsx b/app/soapbox/features/preferences/index.tsx
index ccbd23498..593978dbc 100644
--- a/app/soapbox/features/preferences/index.tsx
+++ b/app/soapbox/features/preferences/index.tsx
@@ -8,6 +8,7 @@ import { Form } from 'soapbox/components/ui';
 import { SelectDropdown } from 'soapbox/features/forms';
 import SettingToggle from 'soapbox/features/notifications/components/setting_toggle';
 import { useAppSelector } from 'soapbox/hooks';
+import { getFeatures } from 'soapbox/utils/features';
 
 import ThemeToggle from '../ui/components/theme-toggle';
 
@@ -80,27 +81,24 @@ const messages = defineMessages({
   display_media_default: { id: 'preferences.fields.display_media.default', defaultMessage: 'Hide media marked as sensitive' },
   display_media_hide_all: { id: 'preferences.fields.display_media.hide_all', defaultMessage: 'Always hide media' },
   display_media_show_all: { id: 'preferences.fields.display_media.show_all', defaultMessage: 'Always show media' },
+  privacy_public: { id: 'preferences.options.privacy_public', defaultMessage: 'Public' },
+  privacy_unlisted: { id: 'preferences.options.privacy_unlisted', defaultMessage: 'Unlisted' },
+  privacy_followers_only: { id: 'preferences.options.privacy_followers_only', defaultMessage: 'Followers-only' },
+  content_type_plaintext: { id: 'preferences.options.content_type_plaintext', defaultMessage: 'Plain text' },
+  content_type_markdown: { id: 'preferences.options.content_type_markdown', defaultMessage: 'Markdown' },
 });
 
 const Preferences = () => {
   const intl = useIntl();
   const dispatch = useDispatch();
 
-  // const features = useAppSelector((state) => getFeatures(state.get('instance')));
+  const features = useAppSelector((state) => getFeatures(state.instance));
   const settings = useAppSelector((state) => getSettings(state));
 
   const onSelectChange = (event: React.ChangeEvent<HTMLSelectElement>, path: string[]) => {
     dispatch(changeSetting(path, event.target.value, intl));
   };
 
-  // const onDefaultPrivacyChange = (e) => {
-  //   dispatch(changeSetting(['defaultPrivacy'], e.target.value));
-  // }
-
-  // const onDefaultContentTypeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //   dispatch(changeSetting(['defaultContentType'], event.target.value));
-  // };
-
   const onToggleChange = (key: string[], checked: boolean) => {
     dispatch(changeSetting(key, checked, intl));
   };
@@ -111,6 +109,17 @@ const Preferences = () => {
     show_all: intl.formatMessage(messages.display_media_show_all),
   }), []);
 
+  const defaultPrivacyOptions = React.useMemo(() => ({
+    public: intl.formatMessage(messages.privacy_public),
+    unlisted: intl.formatMessage(messages.privacy_unlisted),
+    private: intl.formatMessage(messages.privacy_followers_only),
+  }), []);
+
+  const defaultContentTypeOptions = React.useMemo(() => ({
+    'text/plain': intl.formatMessage(messages.content_type_plaintext),
+    'text/markdown': intl.formatMessage(messages.content_type_markdown),
+  }), []);
+
   return (
     <Form>
       <List>
@@ -149,6 +158,22 @@ const Preferences = () => {
             onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['displayMedia'])}
           />
         </ListItem>
+
+        {features.privacyScopes && <ListItem label={<FormattedMessage id='preferences.fields.privacy_label' defaultMessage='Default post privacy' />}>
+          <SelectDropdown
+            items={defaultPrivacyOptions}
+            defaultValue={settings.get('defaultPrivacy') as string | undefined}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultPrivacy'])}
+          />
+        </ListItem>}
+
+        {features.richText && <ListItem label={<FormattedMessage id='preferences.fields.content_type_label' defaultMessage='Default post format' />}>
+          <SelectDropdown
+            items={defaultContentTypeOptions}
+            defaultValue={settings.get('defaultContentType') as string | undefined}
+            onChange={(event: React.ChangeEvent<HTMLSelectElement>) => onSelectChange(event, ['defaultContentType'])}
+          />
+        </ListItem>}
       </List>
 
       {/* <FieldsGroup>
@@ -211,10 +236,9 @@ const Preferences = () => {
           <SettingToggle settings={settings} settingPath={['deleteModal']} onChange={onToggleChange} />
         </ListItem>
 
-        {/* <SettingsCheckbox
-            label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}
-            path={['missingDescriptionModal']}
-          /> */}
+        {/* <ListItem label={<FormattedMessage id='preferences.fields.missing_description_modal_label' defaultMessage='Show confirmation dialog before sending a post without media descriptions' />}>
+          <SettingToggle settings={settings} settingPath={['missingDescriptionModal']} onChange={onToggleChange} />
+        </ListItem> */}
       </List>
 
       <List>

From 682d2a36474037303faa559c82b4ee7ec48b7eac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 24 May 2022 12:24:26 +0200
Subject: [PATCH 031/102] Avoid inline message definitions
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/compose.js                |  2 +-
 app/soapbox/components/badge.tsx              |  2 +-
 app/soapbox/components/media_gallery.js       |  4 +--
 app/soapbox/components/profile-hover-card.tsx |  5 ++-
 app/soapbox/components/status.tsx             | 16 +++++----
 app/soapbox/components/status_list.js         | 10 +++---
 .../features/account/components/header.js     | 12 +++----
 .../admin/components/unapproved_account.tsx   |  3 +-
 .../auth_login/components/login_form.tsx      |  2 +-
 .../auth_login/components/otp_auth_form.js    |  3 +-
 .../auth_login/components/password_reset.js   |  2 +-
 ..._confirm.js => password_reset_confirm.tsx} | 28 +++++++--------
 .../compose/components/compose_form.js        |  6 ++--
 .../features/compose/components/search.tsx    |  9 +++--
 app/soapbox/features/directory/index.js       |  2 +-
 .../edit_email/{index.js => index.tsx}        | 18 +++++-----
 .../{index.js => index.tsx}                   | 36 +++++++++----------
 .../features/hashtag_timeline/index.js        |  4 +--
 app/soapbox/features/settings/index.tsx       |  6 ++--
 .../features/verification/registration.tsx    | 35 ++++++++++--------
 .../verification/steps/age-verification.js    | 24 ++++++-------
 21 files changed, 115 insertions(+), 114 deletions(-)
 rename app/soapbox/features/auth_login/components/{password_reset_confirm.js => password_reset_confirm.tsx} (74%)
 rename app/soapbox/features/edit_email/{index.js => index.tsx} (83%)
 rename app/soapbox/features/email_confirmation/{index.js => index.tsx} (60%)

diff --git a/app/soapbox/actions/compose.js b/app/soapbox/actions/compose.js
index 1d16fe554..efef9c786 100644
--- a/app/soapbox/actions/compose.js
+++ b/app/soapbox/actions/compose.js
@@ -83,7 +83,7 @@ export const COMPOSE_SET_STATUS = 'COMPOSE_SET_STATUS';
 const messages = defineMessages({
   exceededImageSizeLimit: { id: 'upload_error.image_size_limit', defaultMessage: 'Image exceeds the current file size limit ({limit})' },
   exceededVideoSizeLimit: { id: 'upload_error.video_size_limit', defaultMessage: 'Video exceeds the current file size limit ({limit})' },
-  scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.'  },
+  scheduleError: { id: 'compose.invalid_schedule', defaultMessage: 'You must schedule a post at least 5 minutes out.' },
   success: { id: 'compose.submit_success', defaultMessage: 'Your post was sent' },
   uploadErrorLimit: { id: 'upload_error.limit', defaultMessage: 'File upload limit exceeded.' },
   uploadErrorPoll:  { id: 'upload_error.poll', defaultMessage: 'File upload not allowed with polls.' },
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 2eb2d221d..c14a58d56 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 interface IBadge {
-  title: string,
+  title: string | React.ReactNode,
   slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque',
 }
 
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 30ddbbc34..44b08a3df 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -614,12 +614,12 @@ class MediaGallery extends React.PureComponent {
                   <div className='space-y-1'>
                     <Text weight='semibold'>{warning}</Text>
                     <Text size='sm'>
-                      {intl.formatMessage({ id: 'status.sensitive_warning.subtitle', defaultMessage: 'This content may not be suitable for all audiences.' })}
+                      <FormattedMessage id='status.sensitive_warning.subtitle' defaultMessage='This content may not be suitable for all audiences.' />
                     </Text>
                   </div>
 
                   <Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/icons/eye.svg')}>
-                    {intl.formatMessage({ id: 'status.sensitive_warning.action', defaultMessage: 'Show content' })}
+                    <FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
                   </Button>
                 </div>
               </button>
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index 8511839fb..9c9f2e79a 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames';
 import React, { useEffect, useState } from 'react';
-import { useIntl } from 'react-intl';
+import { FormattedMessage } from 'react-intl';
 import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
 
@@ -64,7 +64,6 @@ interface IProfileHoverCard {
 export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }) => {
   const dispatch = useAppDispatch();
   const history = useHistory();
-  const intl = useIntl();
 
   const [popperElement, setPopperElement] = useState<HTMLElement | null>(null);
 
@@ -130,7 +129,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
             <div className='absolute top-2 left-2'>
               <Badge
                 slug='opaque'
-                title={intl.formatMessage({ id: 'account.follows_you', defaultMessage: 'Follows you' })}
+                title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />}
               />
             </div>
           )}
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 9bcc772ee..141394420 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, FormattedMessage, IntlShape } from 'react-intl';
+import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-intl';
 import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
@@ -31,6 +31,10 @@ import type {
 // Defined in components/scrollable_list
 export type ScrollPosition = { height: number, top: number };
 
+const messages = defineMessages({
+  reblogged_by: { id: 'status.reblogged_by', defaultMessage: '{name} reposted' },
+});
+
 export const textForScreenReader = (intl: IntlShape, status: StatusEntity, rebloggedByText?: string): string => {
   const { account } = status;
   if (!account || typeof account !== 'object') return '';
@@ -437,12 +441,10 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         </div>
       );
 
-      rebloggedByText = intl.formatMessage({
-        id: 'status.reblogged_by',
-        defaultMessage: '{name} reposted',
-      }, {
-        name: String(status.getIn(['account', 'acct'])),
-      });
+      rebloggedByText = intl.formatMessage(
+        messages.reblogged_by,
+        { name: String(status.getIn(['account', 'acct'])) },
+      );
 
       // @ts-ignore what the FUCK
       account = status.account;
diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js
index bfc90869e..5d08ab1a2 100644
--- a/app/soapbox/components/status_list.js
+++ b/app/soapbox/components/status_list.js
@@ -102,7 +102,7 @@ export default class StatusList extends ImmutablePureComponent {
   }
 
   renderLoadGap(index) {
-    const { statusIds, onLoadMore, isLoading }  = this.props;
+    const { statusIds, onLoadMore, isLoading } = this.props;
 
     return (
       <LoadGap
@@ -115,7 +115,7 @@ export default class StatusList extends ImmutablePureComponent {
   }
 
   renderStatus(statusId) {
-    const { timelineId, withGroupAdmin, group }  = this.props;
+    const { timelineId, withGroupAdmin, group } = this.props;
 
     return (
       <StatusContainer
@@ -148,7 +148,7 @@ export default class StatusList extends ImmutablePureComponent {
   }
 
   renderFeaturedStatuses() {
-    const { featuredStatusIds, timelineId }  = this.props;
+    const { featuredStatusIds, timelineId } = this.props;
     if (!featuredStatusIds) return null;
 
     return featuredStatusIds.map(statusId => (
@@ -164,7 +164,7 @@ export default class StatusList extends ImmutablePureComponent {
   }
 
   renderStatuses() {
-    const { statusIds, isLoading }  = this.props;
+    const { statusIds, isLoading } = this.props;
 
     if (isLoading || statusIds.size > 0) {
       return statusIds.map((statusId, index) => {
@@ -193,7 +193,7 @@ export default class StatusList extends ImmutablePureComponent {
   }
 
   render() {
-    const { statusIds, divideType, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, ...other }  = this.props;
+    const { statusIds, divideType, featuredStatusIds, onLoadMore, timelineId, totalQueuedItemsCount, isLoading, isPartial, withGroupAdmin, group, ...other } = this.props;
 
     if (isPartial) {
       return (
diff --git a/app/soapbox/features/account/components/header.js b/app/soapbox/features/account/components/header.js
index 7a65b0bef..b6fe013a7 100644
--- a/app/soapbox/features/account/components/header.js
+++ b/app/soapbox/features/account/components/header.js
@@ -6,7 +6,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
@@ -457,7 +457,7 @@ class Header extends ImmutablePureComponent {
   }
 
   makeInfo() {
-    const { account, intl, me } = this.props;
+    const { account, me } = this.props;
 
     const info = [];
 
@@ -468,7 +468,7 @@ class Header extends ImmutablePureComponent {
         <Badge
           key='followed_by'
           slug='opaque'
-          title={intl.formatMessage({ id: 'account.follows_you', defaultMessage: 'Follows you' })}
+          title={<FormattedMessage id='account.follows_you' defaultMessage='Follows you' />}
         />,
       );
     } else if (me !== account.get('id') && account.getIn(['relationship', 'blocking'])) {
@@ -476,7 +476,7 @@ class Header extends ImmutablePureComponent {
         <Badge
           key='blocked'
           slug='opaque'
-          title={intl.formatMessage({ id: 'account.blocked', defaultMessage: 'Blocked' })}
+          title={<FormattedMessage  id='account.blocked' defaultMessage='Blocked' />}
         />,
       );
     }
@@ -486,7 +486,7 @@ class Header extends ImmutablePureComponent {
         <Badge
           key='muted'
           slug='opaque'
-          title={intl.formatMessage({ id: 'account.muted', defaultMessage: 'Muted' })}
+          title={<FormattedMessage id='account.muted' defaultMessage='Muted' />}
         />,
       );
     } else if (me !== account.get('id') && account.getIn(['relationship', 'domain_blocking'])) {
@@ -494,7 +494,7 @@ class Header extends ImmutablePureComponent {
         <Badge
           key='domain_blocked'
           slug='opaque'
-          title={intl.formatMessage({ id: 'account.domain_blocked', defaultMessage: 'Domain hidden' })}
+          title={<FormattedMessage id='account.domain_blocked' defaultMessage='Domain hidden' />}
         />,
       );
     }
diff --git a/app/soapbox/features/admin/components/unapproved_account.tsx b/app/soapbox/features/admin/components/unapproved_account.tsx
index 5f38684cb..ffd76fc30 100644
--- a/app/soapbox/features/admin/components/unapproved_account.tsx
+++ b/app/soapbox/features/admin/components/unapproved_account.tsx
@@ -2,13 +2,12 @@ import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { approveUsers } from 'soapbox/actions/admin';
+import { rejectUserModal } from 'soapbox/actions/moderation';
 import snackbar from 'soapbox/actions/snackbar';
 import IconButton from 'soapbox/components/icon_button';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetAccount } from 'soapbox/selectors';
 
-import { rejectUserModal } from '../../../actions/moderation';
-
 const messages = defineMessages({
   approved: { id: 'admin.awaiting_approval.approved_message', defaultMessage: '{acct} was approved!' },
   rejected: { id: 'admin.awaiting_approval.rejected_message', defaultMessage: '{acct} was rejected.' },
diff --git a/app/soapbox/features/auth_login/components/login_form.tsx b/app/soapbox/features/auth_login/components/login_form.tsx
index dd125b568..64145453c 100644
--- a/app/soapbox/features/auth_login/components/login_form.tsx
+++ b/app/soapbox/features/auth_login/components/login_form.tsx
@@ -26,7 +26,7 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
   return (
     <div>
       <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
-        <h1 className='text-center font-bold text-2xl'>{intl.formatMessage({ id: 'login_form.header', defaultMessage: 'Sign In' })}</h1>
+        <h1 className='text-center font-bold text-2xl'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
       </div>
 
       <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
diff --git a/app/soapbox/features/auth_login/components/otp_auth_form.js b/app/soapbox/features/auth_login/components/otp_auth_form.js
index 637f78529..0446a7afe 100644
--- a/app/soapbox/features/auth_login/components/otp_auth_form.js
+++ b/app/soapbox/features/auth_login/components/otp_auth_form.js
@@ -11,6 +11,7 @@ import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/
 const messages = defineMessages({
   otpCodeHint: { id: 'login.fields.otp_code_hint', defaultMessage: 'Enter the two-factor code generated by your phone app or use one of your recovery codes' },
   otpCodeLabel: { id: 'login.fields.otp_code_label', defaultMessage: 'Two-factor code:' },
+  otpLoginFail: { id: 'login.otp_log_in.fail', defaultMessage: 'Invalid code, please try again.' },
 });
 
 export default @connect()
@@ -70,7 +71,7 @@ class OtpAuthForm extends ImmutablePureComponent {
             <FormGroup
               labelText={intl.formatMessage(messages.otpCodeLabel)}
               hintText={intl.formatMessage(messages.otpCodeHint)}
-              errors={code_error ? [intl.formatMessage({ id: 'login.otp_log_in.fail', defaultMessage: 'Invalid code, please try again.' })] : []}
+              errors={code_error ? [intl.formatMessage(messages.otpLoginFail)] : []}
             >
               <Input
                 name='code'
diff --git a/app/soapbox/features/auth_login/components/password_reset.js b/app/soapbox/features/auth_login/components/password_reset.js
index bafa09317..f047207be 100644
--- a/app/soapbox/features/auth_login/components/password_reset.js
+++ b/app/soapbox/features/auth_login/components/password_reset.js
@@ -44,7 +44,7 @@ class PasswordReset extends ImmutablePureComponent {
       <div>
         <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
           <h1 className='text-center font-bold text-2xl'>
-            {intl.formatMessage({ id: 'password_reset.header', defaultMessage: 'Reset Password' })}
+            <FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
           </h1>
         </div>
 
diff --git a/app/soapbox/features/auth_login/components/password_reset_confirm.js b/app/soapbox/features/auth_login/components/password_reset_confirm.tsx
similarity index 74%
rename from app/soapbox/features/auth_login/components/password_reset_confirm.js
rename to app/soapbox/features/auth_login/components/password_reset_confirm.tsx
index 4d6372a48..2f30e700f 100644
--- a/app/soapbox/features/auth_login/components/password_reset_confirm.js
+++ b/app/soapbox/features/auth_login/components/password_reset_confirm.tsx
@@ -1,14 +1,17 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
-import { FormattedMessage, injectIntl, useIntl } from 'react-intl';
-import { connect } from 'react-redux';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { resetPasswordConfirm } from 'soapbox/actions/security';
 import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 const token = new URLSearchParams(window.location.search).get('reset_password_token');
 
+const messages = defineMessages({
+  resetPasswordFail: { id: 'reset_password.fail', defaultMessage: 'Expired token, please try again.' },
+});
+
 const Statuses = {
   IDLE: 'IDLE',
   LOADING: 'LOADING',
@@ -16,12 +19,9 @@ const Statuses = {
   FAIL: 'FAIL',
 };
 
-const mapDispatchToProps = dispatch => ({
-  resetPasswordConfirm: (password, token) => dispatch(resetPasswordConfirm(password, token)),
-});
-
-const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
+const PasswordResetConfirm = () => {
   const intl = useIntl();
+  const dispatch = useAppDispatch();
 
   const [password, setPassword] = React.useState('');
   const [status, setStatus] = React.useState(Statuses.IDLE);
@@ -32,10 +32,10 @@ const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
     event.preventDefault();
 
     setStatus(Statuses.LOADING);
-    resetPasswordConfirm(password, token)
+    dispatch(resetPasswordConfirm(password, token))
       .then(() => setStatus(Statuses.SUCCESS))
       .catch(() => setStatus(Statuses.FAIL));
-  }, [resetPasswordConfirm, password]);
+  }, [password]);
 
   const onChange = React.useCallback((event) => {
     setPassword(event.target.value);
@@ -43,7 +43,7 @@ const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
 
   const renderErrors = () => {
     if (status === Statuses.FAIL) {
-      return [intl.formatMessage({ id: 'reset_password.fail', defaultMessage: 'Expired token, please try again.' })];
+      return [intl.formatMessage(messages.resetPasswordFail)];
     }
 
     return [];
@@ -84,8 +84,4 @@ const PasswordResetConfirm = ({ resetPasswordConfirm }) => {
   );
 };
 
-PasswordResetConfirm.propTypes = {
-  resetPasswordConfirm: PropTypes.func,
-};
-
-export default injectIntl(connect(null, mapDispatchToProps)(PasswordResetConfirm));
+export default PasswordResetConfirm;
diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index eb1fb1557..713b5d087 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/app/soapbox/features/compose/components/compose_form.js
@@ -208,9 +208,9 @@ class ComposeForm extends ImmutablePureComponent {
   }
 
   handleEmojiPick = (data) => {
-    const { text }     = this.props;
-    const position     = this.autosuggestTextarea.textarea.selectionStart;
-    const needsSpace   = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
+    const { text }   = this.props;
+    const position   = this.autosuggestTextarea.textarea.selectionStart;
+    const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
 
     this.props.onPickEmoji(position, data, needsSpace);
   }
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 660045694..401001fc9 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -6,16 +6,15 @@ import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
-import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
-import { useAppSelector } from 'soapbox/hooks';
-
 import {
   changeSearch,
   clearSearch,
   submitSearch,
   showSearch,
-} from '../../../actions/search';
+} from 'soapbox/actions/search';
+import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
+import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
+import { useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
   placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
diff --git a/app/soapbox/features/directory/index.js b/app/soapbox/features/directory/index.js
index 99eccf947..37795a4e9 100644
--- a/app/soapbox/features/directory/index.js
+++ b/app/soapbox/features/directory/index.js
@@ -86,7 +86,7 @@ class Directory extends React.PureComponent {
 
   render() {
     const { isLoading, accountIds, intl, title, features } = this.props;
-    const { order, local }  = this.getParams(this.props, this.state);
+    const { order, local } = this.getParams(this.props, this.state);
 
     return (
       <Column icon='address-book-o' label={intl.formatMessage(messages.title)}>
diff --git a/app/soapbox/features/edit_email/index.js b/app/soapbox/features/edit_email/index.tsx
similarity index 83%
rename from app/soapbox/features/edit_email/index.js
rename to app/soapbox/features/edit_email/index.tsx
index b6ab94f1d..bd9becc2e 100644
--- a/app/soapbox/features/edit_email/index.js
+++ b/app/soapbox/features/edit_email/index.tsx
@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
 import { changeEmail } from 'soapbox/actions/security';
 import snackbar from 'soapbox/actions/snackbar';
-
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from '../../components/ui';
+import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
+  header: { id: 'edit_email.header', defaultMessage: 'Change Email' },
   updateEmailSuccess: { id: 'security.update_email.success', defaultMessage: 'Email successfully updated.' },
   updateEmailFail: { id: 'security.update_email.fail', defaultMessage: 'Update email failed.' },
   emailFieldLabel: { id: 'security.fields.email.label', defaultMessage: 'Email address' },
+  emailFieldPlaceholder: { id: 'edit_email.placeholder', defaultMessage: 'me@example.com' },
   passwordFieldLabel: { id: 'security.fields.password.label', defaultMessage: 'Password' },
   submit: { id: 'security.submit', defaultMessage: 'Save changes' },
   cancel: { id: 'common.cancel', defaultMessage: 'Cancel' },
@@ -20,7 +21,7 @@ const initialState = { email: '', password: '' };
 
 const EditEmail = () => {
   const intl = useIntl();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [state, setState] = React.useState(initialState);
   const [isLoading, setLoading] = React.useState(false);
@@ -48,14 +49,14 @@ const EditEmail = () => {
 
   return (
     <Column
-      label={intl.formatMessage({ id: 'edit_email.header', defaultMessage: 'Change Email' })}
+      label={intl.formatMessage(messages.header)}
       transparent
       withHeader={false}
     >
       <Card variant='rounded'>
         <CardHeader backHref='/settings'>
           <CardTitle
-            title={intl.formatMessage({ id: 'edit_email.header', defaultMessage: 'Change Email' })}
+            title={intl.formatMessage(messages.header)}
           />
         </CardHeader>
 
@@ -63,9 +64,10 @@ const EditEmail = () => {
           <Form onSubmit={handleSubmit}>
             <FormGroup labelText={intl.formatMessage(messages.emailFieldLabel)}>
               <Input
-                placeholder={intl.formatMessage({ id: 'edit_email.placeholder', defaultMessage: 'me@example.com' })}
+                type='text'
+                placeholder={intl.formatMessage(messages.emailFieldPlaceholder)}
                 name='email'
-                autocomplete='off'
+                autoComplete='off'
                 onChange={handleInputChange}
                 value={email}
               />
diff --git a/app/soapbox/features/email_confirmation/index.js b/app/soapbox/features/email_confirmation/index.tsx
similarity index 60%
rename from app/soapbox/features/email_confirmation/index.js
rename to app/soapbox/features/email_confirmation/index.tsx
index 5e18f03a7..0c4939eed 100644
--- a/app/soapbox/features/email_confirmation/index.js
+++ b/app/soapbox/features/email_confirmation/index.tsx
@@ -1,14 +1,12 @@
-import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
+import { defineMessages, useIntl } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
+import { confirmChangedEmail } from 'soapbox/actions/security';
 import snackbar from 'soapbox/actions/snackbar';
 import { Spinner } from 'soapbox/components/ui';
-
-import { confirmChangedEmail } from '../../actions/security';
-import { buildErrorMessage } from '../../utils/errors';
+import { useAppDispatch } from 'soapbox/hooks';
+import { buildErrorMessage } from 'soapbox/utils/errors';
 
 const Statuses = {
   IDLE: 'IDLE',
@@ -16,11 +14,15 @@ const Statuses = {
   FAIL: 'FAIL',
 };
 
+const messages = defineMessages({
+  success: { id: 'email_confirmation.success', defaultMessage: 'Your email has been confirmed!' },
+});
+
 const token = new URLSearchParams(window.location.search).get('confirmation_token');
 
 const EmailConfirmation = () => {
   const intl = useIntl();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [status, setStatus] = React.useState(Statuses.IDLE);
 
@@ -32,10 +34,7 @@ const EmailConfirmation = () => {
 
           dispatch(
             snackbar.success(
-              intl.formatMessage({
-                id: 'email_confirmation.success',
-                defaultMessage: 'Your email has been confirmed!',
-              }),
+              intl.formatMessage(messages.success),
             ),
           );
         })
@@ -43,14 +42,15 @@ const EmailConfirmation = () => {
           setStatus(Statuses.FAIL);
 
           if (error.response.data.error) {
-            const defaultMessage = buildErrorMessage(error.response.data.error);
+            const message = buildErrorMessage(error.response.data.error);
 
             dispatch(
               snackbar.error(
-                intl.formatMessage({
-                  id: 'email_confirmation.fail',
-                  defaultMessage,
-                }),
+                message,
+                // intl.formatMessage({
+                //   id: 'email_confirmation.fail',
+                //   defaultMessage,
+                // }),
               ),
             );
           }
@@ -67,8 +67,4 @@ const EmailConfirmation = () => {
   );
 };
 
-EmailConfirmation.propTypes = {
-  history: PropTypes.object,
-};
-
 export default EmailConfirmation;
diff --git a/app/soapbox/features/hashtag_timeline/index.js b/app/soapbox/features/hashtag_timeline/index.js
index a1854550f..bdc302f96 100644
--- a/app/soapbox/features/hashtag_timeline/index.js
+++ b/app/soapbox/features/hashtag_timeline/index.js
@@ -31,11 +31,11 @@ class HashtagTimeline extends React.PureComponent {
     // TODO: wtf is all this?
     // It exists in Mastodon's codebase, but undocumented
     if (this.additionalFor('any')) {
-      title.push(' ', <FormattedMessage key='any' id='hashtag.column_header.tag_mode.any'  values={{ additional: this.additionalFor('any') }} defaultMessage='or {additional}' />);
+      title.push(' ', <FormattedMessage key='any' id='hashtag.column_header.tag_mode.any' values={{ additional: this.additionalFor('any') }} defaultMessage='or {additional}' />);
     }
 
     if (this.additionalFor('all')) {
-      title.push(' ', <FormattedMessage key='all' id='hashtag.column_header.tag_mode.all'  values={{ additional: this.additionalFor('all') }} defaultMessage='and {additional}' />);
+      title.push(' ', <FormattedMessage key='all' id='hashtag.column_header.tag_mode.all' values={{ additional: this.additionalFor('all') }} defaultMessage='and {additional}' />);
     }
 
     if (this.additionalFor('none')) {
diff --git a/app/soapbox/features/settings/index.tsx b/app/soapbox/features/settings/index.tsx
index 1bb6722a8..c1386c288 100644
--- a/app/soapbox/features/settings/index.tsx
+++ b/app/soapbox/features/settings/index.tsx
@@ -23,6 +23,8 @@ const messages = defineMessages({
   sessions: { id: 'settings.sessions', defaultMessage: 'Active sessions' },
   deleteAccount: { id: 'settings.delete_account', defaultMessage: 'Delete Account' },
   other: { id: 'settings.other', defaultMessage: 'Other options' },
+  mfaEnabled: { id: 'mfa.enabled', defaultMessage: 'Enabled' },
+  mfaDisabled: { id: 'mfa.disabled', defaultMessage: 'Disabled' },
 });
 
 /** User settings page. */
@@ -77,8 +79,8 @@ const Settings = () => {
             <ListItem label={intl.formatMessage(messages.changePassword)} onClick={navigateToChangePassword} />
             <ListItem label={intl.formatMessage(messages.configureMfa)} onClick={navigateToMfa}>
               {isMfaEnabled ?
-                intl.formatMessage({ id: 'mfa.enabled', defaultMessage: 'Enabled' }) :
-                intl.formatMessage({ id: 'mfa.disabled', defaultMessage: 'Disabled' })}
+                intl.formatMessage(messages.mfaEnabled) :
+                intl.formatMessage(messages.mfaDisabled)}
             </ListItem>
             {features.sessionsAPI && (
               <ListItem label={intl.formatMessage(messages.sessions)} onClick={navigateToSessions} />
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index e038ae01a..400f6b6c4 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -1,6 +1,6 @@
 import { AxiosError } from 'axios';
 import * as React from 'react';
-import { useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Redirect } from 'react-router-dom';
 
@@ -10,10 +10,24 @@ import { startOnboarding } from 'soapbox/actions/onboarding';
 import snackbar from 'soapbox/actions/snackbar';
 import { createAccount } from 'soapbox/actions/verification';
 import { removeStoredVerification } from 'soapbox/actions/verification';
+import { Button, Form, FormGroup, Input } from 'soapbox/components/ui';
 import { useAppSelector } from 'soapbox/hooks';
 import { getRedirectUrl } from 'soapbox/utils/redirect';
 
-import { Button, Form, FormGroup, Input } from '../../components/ui';
+const messages = defineMessages({
+  success: {
+    id: 'registrations.success',
+    defaultMessage: 'Welcome to {siteTitle}!',
+  },
+  usernameTaken: {
+    id: 'registrations.unprocessable_entity',
+    defaultMessage: 'This username has already been taken.',
+  },
+  error: {
+    id: 'registrations.error',
+    defaultMessage: 'Failed to register your account.',
+  },
+});
 
 const initialState = {
   username: '',
@@ -45,10 +59,7 @@ const Registration = () => {
         dispatch(startOnboarding());
         dispatch(
           snackbar.success(
-            intl.formatMessage({
-              id: 'registrations.success',
-              defaultMessage: 'Welcome to {siteTitle}!',
-            }, { siteTitle }),
+            intl.formatMessage(messages.success, { siteTitle }),
           ),
         );
       })
@@ -56,19 +67,13 @@ const Registration = () => {
         if (error?.response?.status === 422) {
           dispatch(
             snackbar.error(
-              intl.formatMessage({
-                id: 'registrations.unprocessable_entity',
-                defaultMessage: 'This username has already been taken.',
-              }),
+              intl.formatMessage(messages.usernameTaken),
             ),
           );
         } else {
           dispatch(
             snackbar.error(
-              intl.formatMessage({
-                id: 'registrations.error',
-                defaultMessage: 'Failed to register your account.',
-              }),
+              intl.formatMessage(messages.error),
             ),
           );
         }
@@ -90,7 +95,7 @@ const Registration = () => {
     <div>
       <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
-          {intl.formatMessage({ id: 'registration.header', defaultMessage: 'Register your account' })}
+          <FormattedMessage id='registration.header' defaultMessage='Register your account' />
         </h1>
       </div>
 
diff --git a/app/soapbox/features/verification/steps/age-verification.js b/app/soapbox/features/verification/steps/age-verification.js
index ff1ba51f9..caeed7704 100644
--- a/app/soapbox/features/verification/steps/age-verification.js
+++ b/app/soapbox/features/verification/steps/age-verification.js
@@ -1,13 +1,19 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import DatePicker from 'react-datepicker';
-import { useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { verifyAge } from 'soapbox/actions/verification';
+import { Button, Form, FormGroup, Text } from 'soapbox/components/ui';
 
-import { Button, Form, FormGroup, Text } from '../../../components/ui';
+const messages = defineMessages({
+  fail: {
+    id: 'age_verification.fail',
+    defaultMessage: 'You must be {ageMinimum, plural, one {# year} other {# years}} old or older.',
+  },
+});
 
 function meetsAgeMinimum(birthday, ageMinimum) {
   const month = birthday.getUTCMonth();
@@ -46,15 +52,9 @@ const AgeVerification = () => {
       dispatch(verifyAge(birthday));
     } else {
       dispatch(
-        snackbar.error(
-          intl.formatMessage({
-            id: 'age_verification.fail',
-            defaultMessage: 'You must be {ageMinimum, plural, one {# year} other {# years}} old or older.',
-            values: {
-              ageMinimum,
-            },
-          }),
-        ),
+        snackbar.error(intl.formatMessage(messages.fail, {
+          ageMinimum,
+        })),
       );
     }
   }, [date, ageMinimum]);
@@ -63,7 +63,7 @@ const AgeVerification = () => {
     <div>
       <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
         <h1 className='text-center font-bold text-2xl'>
-          {intl.formatMessage({ id: 'age_verification.header', defaultMessage: 'Enter your birth date' })}
+          <FormattedMessage id='age_verification.header' defaultMessage='Enter your birth date' />
         </h1>
       </div>
 

From 1133b05714ef10f31a09fa1523faf9df86f0bfe0 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 24 May 2022 09:46:21 -0400
Subject: [PATCH 032/102] Fix key warnings

---
 .../components/follow_recommendations_list.tsx                | 4 ++--
 app/soapbox/features/ui/components/profile-dropdown.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
index 4ca838072..fc5ab38d0 100644
--- a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
+++ b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
@@ -31,8 +31,8 @@ const FollowRecommendationsList: React.FC = () => {
 
   return (
     <div className='column-list'>
-      {suggestions.size > 0 ? suggestions.map((suggestion: { account: string }) => (
-        <Account key={suggestion.account} id={suggestion.account} />
+      {suggestions.size > 0 ? suggestions.map((suggestion: { account: string }, idx: number) => (
+        <Account key={idx} id={suggestion.account} />
       )) : (
         <div className='column-list__empty-message'>
           <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index e3c468b13..121304960 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/app/soapbox/features/ui/components/profile-dropdown.tsx
@@ -112,7 +112,7 @@ const ProfileDropdown: React.FC<IProfileDropdown> = ({ account, children }) => {
         {menu.map((menuItem, idx) => {
           if (menuItem.toggle) {
             return (
-              <div className='flex flex-row items-center justify-between px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
+              <div key={idx} className='flex flex-row items-center justify-between px-4 py-1 text-sm text-gray-700 dark:text-gray-400'>
                 <span>{menuItem.text}</span>
 
                 {menuItem.toggle}

From 38b3b7150f9f781b5690603cf7955468e316ed65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 24 May 2022 17:16:07 +0200
Subject: [PATCH 033/102] string | React.ReactNode -> React.ReactNode
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/badge.tsx                 | 2 +-
 app/soapbox/components/ui/card/card.tsx          | 2 +-
 app/soapbox/components/ui/modal/modal.tsx        | 2 +-
 app/soapbox/features/ui/components/accordion.tsx | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index c14a58d56..7686b1e47 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 
 interface IBadge {
-  title: string | React.ReactNode,
+  title: React.ReactNode,
   slug: 'patron' | 'donor' | 'admin' | 'moderator' | 'bot' | 'opaque',
 }
 
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index f8ed33c1e..08b501cde 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -80,7 +80,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
 };
 
 interface ICardTitle {
-  title: string | React.ReactNode
+  title: React.ReactNode
 }
 
 /** A card's title. */
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 1cd8f7fd5..f0a661229 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -50,7 +50,7 @@ interface IModal {
   /** Don't focus the "confirm" button on mount. */
   skipFocus?: boolean,
   /** Title text for the modal. */
-  title: string | React.ReactNode,
+  title: React.ReactNode,
   width?: Widths,
 }
 
diff --git a/app/soapbox/features/ui/components/accordion.tsx b/app/soapbox/features/ui/components/accordion.tsx
index 8fe4415a8..40afbf7b1 100644
--- a/app/soapbox/features/ui/components/accordion.tsx
+++ b/app/soapbox/features/ui/components/accordion.tsx
@@ -14,7 +14,7 @@ const messages = defineMessages({
 
 interface IAccordion {
   headline: React.ReactNode,
-  children?: string | React.ReactNode,
+  children?: React.ReactNode,
   menu?: Menu,
   expanded?: boolean,
   onToggle?: (value: boolean) => void,

From 9401493af1088ccc23868ea3514b3939f9775182 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 24 May 2022 11:24:47 -0400
Subject: [PATCH 034/102] Fix feature-gating of messages

---
 app/soapbox/features/ui/index.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 2bfc70a9b..0ebb8f87a 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -184,9 +184,8 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.federating && <WrappedRoute path='/timeline/:instance' exact page={RemoteInstancePage} component={RemoteTimeline} content={children} />}
 
       {features.conversations && <WrappedRoute path='/conversations' page={DefaultPage} component={Conversations} content={children} />}
-      {features.directTimeline ? (
-        <WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} />
-      ) : (
+      {features.directTimeline && <WrappedRoute path='/messages' page={DefaultPage} component={DirectTimeline} content={children} />}
+      {(features.conversations && !features.directTimeline) && (
         <WrappedRoute path='/messages' page={DefaultPage} component={Conversations} content={children} />
       )}
 

From f2164f09d4e0d0dfe4eeb610ba101043c97bbd0b Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 24 May 2022 13:45:00 -0400
Subject: [PATCH 035/102] Add d-screen Tailwind utility

---
 app/soapbox/components/loading-screen.tsx | 6 ++----
 app/styles/application.scss               | 4 ++++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx
index ffa1fa8f9..d132933a4 100644
--- a/app/soapbox/components/loading-screen.tsx
+++ b/app/soapbox/components/loading-screen.tsx
@@ -9,11 +9,9 @@ const LoadingScreen: React.FC = () => {
     <div className='fixed h-screen w-screen'>
       <LandingGradient />
 
-      <div className='fixed h-screen w-screen flex items-center justify-center z-10'>
+      <div className='fixed d-screen w-screen flex items-center justify-center z-10'>
         {/* Bump up spinner vertically to counteract optical illusion. */}
-        <div className='-translate-y-3/4'>
-          <Spinner size={40} withText={false} />
-        </div>
+        <Spinner size={40} withText={false} />
       </div>
     </div>
   );
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 03f8ff65d..660fb4a68 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -102,6 +102,10 @@
   .shadow-inset {
     box-shadow: inset 0 0 0 1px rgb(255 255 255 / 10%);
   }
+
+  .d-screen {
+    height: 100dvh;
+  }
 }
 
 @import 'forms';

From 86e673404e87f373f91a38b460f91616ffdfa1e4 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 24 May 2022 14:06:59 -0400
Subject: [PATCH 036/102] Fix feature gating of Pleroma data imports

---
 app/soapbox/features/import_data/index.tsx | 5 +----
 app/soapbox/features/ui/index.tsx          | 2 +-
 app/soapbox/utils/features.ts              | 6 ++++--
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/features/import_data/index.tsx b/app/soapbox/features/import_data/index.tsx
index b03b20f29..5d26fa0ec 100644
--- a/app/soapbox/features/import_data/index.tsx
+++ b/app/soapbox/features/import_data/index.tsx
@@ -6,8 +6,6 @@ import {
   importBlocks,
   importMutes,
 } from 'soapbox/actions/import_data';
-import { useAppSelector } from 'soapbox/hooks';
-import { getFeatures } from 'soapbox/utils/features';
 
 import Column from '../ui/components/column';
 
@@ -38,13 +36,12 @@ const muteMessages = defineMessages({
 
 const ImportData = () => {
   const intl = useIntl();
-  const features = getFeatures(useAppSelector((state) => state.instance));
 
   return (
     <Column icon='cloud-upload-alt' label={intl.formatMessage(messages.heading)}>
       <CSVImporter action={importFollows} messages={followMessages} />
       <CSVImporter action={importBlocks} messages={blockMessages} />
-      {features.importMutes && <CSVImporter action={importMutes} messages={muteMessages} />}
+      <CSVImporter action={importMutes} messages={muteMessages} />
     </Column>
   );
 };
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 0ebb8f87a..948e5a5e2 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -287,7 +287,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
 
       <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
       <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />
-      <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />
+      {features.importData && <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />}
       {features.accountAliasesAPI && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}
       {features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />}
       <WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} />
diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index e020456d1..e98b7262c 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -307,10 +307,12 @@ const getInstanceFeatures = (instance: Instance) => {
     importAPI: v.software === PLEROMA,
 
     /**
-     * Pleroma import mutes API.
+     * Pleroma import endpoints.
+     * @see POST /api/pleroma/follow_import
+     * @see POST /api/pleroma/blocks_import
      * @see POST /api/pleroma/mutes_import
      */
-    importMutes: v.software === PLEROMA && gte(v.version, '2.2.0'),
+    importData: v.software === PLEROMA && gte(v.version, '2.2.0'),
 
     /**
      * Can create, view, and manage lists.

From 8c00f5816244c199f22fb4347e70652f6854fe43 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 24 May 2022 14:14:22 -0400
Subject: [PATCH 037/102] Export: fix Mastodon fqn

---
 app/soapbox/actions/export_data.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/actions/export_data.ts b/app/soapbox/actions/export_data.ts
index de81215dd..b558c9e6e 100644
--- a/app/soapbox/actions/export_data.ts
+++ b/app/soapbox/actions/export_data.ts
@@ -1,8 +1,8 @@
 import { defineMessages } from 'react-intl';
 
-import api, { getLinks } from '../api';
-
-import snackbar from './snackbar';
+import snackbar from 'soapbox/actions/snackbar';
+import api, { getLinks } from 'soapbox/api';
+import { normalizeAccount } from 'soapbox/normalizers';
 
 import type { SnackbarAction } from './snackbar';
 import type { AxiosResponse } from 'axios';
@@ -60,7 +60,7 @@ const listAccounts = (getState: () => RootState) => async(apiResponse: AxiosResp
     Array.prototype.push.apply(followings, apiResponse.data);
   }
 
-  accounts = followings.map((account: { fqn: string }) => account.fqn);
+  accounts = followings.map((account: any) => normalizeAccount(account).fqn);
   return Array.from(new Set(accounts));
 };
 

From 4873034206add786889b8018f15ffb2507238e87 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 24 May 2022 14:15:39 -0400
Subject: [PATCH 038/102] Disable exports for now

---
 app/soapbox/features/ui/index.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 948e5a5e2..dfdcfeb9f 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -84,7 +84,7 @@ import {
   EmailConfirmation,
   DeleteAccount,
   SoapboxConfig,
-  ExportData,
+  // ExportData,
   ImportData,
   // Backups,
   MfaForm,
@@ -286,7 +286,8 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       {features.scheduledStatuses && <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />}
 
       <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />
-      <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} />
+      {/* FIXME: this could DDoS our API? :\ */}
+      {/* <WrappedRoute path='/settings/export' page={DefaultPage} component={ExportData} content={children} /> */}
       {features.importData && <WrappedRoute path='/settings/import' page={DefaultPage} component={ImportData} content={children} />}
       {features.accountAliasesAPI && <WrappedRoute path='/settings/aliases' page={DefaultPage} component={Aliases} content={children} />}
       {features.accountMoving && <WrappedRoute path='/settings/migration' page={DefaultPage} component={Migration} content={children} />}

From 66a113b61a7d97878dba2bc3f9cc50e3d5fe1da2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 24 May 2022 15:31:46 -0400
Subject: [PATCH 039/102] d-screen: fall back to h-screen

---
 app/soapbox/components/loading-screen.tsx | 5 +++--
 app/styles/application.scss               | 2 ++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/loading-screen.tsx b/app/soapbox/components/loading-screen.tsx
index d132933a4..991007ba8 100644
--- a/app/soapbox/components/loading-screen.tsx
+++ b/app/soapbox/components/loading-screen.tsx
@@ -10,8 +10,9 @@ const LoadingScreen: React.FC = () => {
       <LandingGradient />
 
       <div className='fixed d-screen w-screen flex items-center justify-center z-10'>
-        {/* Bump up spinner vertically to counteract optical illusion. */}
-        <Spinner size={40} withText={false} />
+        <div className='p-4'>
+          <Spinner size={40} withText={false} />
+        </div>
       </div>
     </div>
   );
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 660fb4a68..c0033a050 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -104,6 +104,8 @@
   }
 
   .d-screen {
+    height: 100vh; // Backwards compatibility
+    /* stylelint-disable-next-line unit-no-unknown */
     height: 100dvh;
   }
 }

From 1eec48e7d3b65c9e59412e81b23313fd30ba3980 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 24 May 2022 16:30:47 -0400
Subject: [PATCH 040/102] Refactor notifications

---
 .../notifications/components/notification.tsx | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 9dd8a8bd0..b3453dde1 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
-import { FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, IntlShape, MessageDescriptor } from 'react-intl';
+import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { useAppSelector } from 'soapbox/hooks';
@@ -24,11 +25,6 @@ const notificationForScreenReader = (intl: ReturnType<typeof useIntl>, message:
   return output.join(', ');
 };
 
-// Workaround for dynamic messages (https://github.com/formatjs/babel-plugin-react-intl/issues/119#issuecomment-326202499)
-function FormattedMessageFixed(props: any) {
-  return <FormattedMessage {...props} />;
-}
-
 const buildLink = (account: Account): JSX.Element => (
   <bdi>
     <Permalink
@@ -55,7 +51,7 @@ const icons: Record<NotificationType, string> = {
   user_approved: require('@tabler/icons/icons/user-plus.svg'),
 };
 
-const messages: Record<NotificationType, { id: string, defaultMessage: string }> = {
+const messages: Record<string | number | symbol, MessageDescriptor> = defineMessages({
   follow: {
     id: 'notification.follow',
     defaultMessage: '{name} followed you',
@@ -100,18 +96,22 @@ const messages: Record<NotificationType, { id: string, defaultMessage: string }>
     id: 'notification.user_approved',
     defaultMessage: 'Welcome to {instance}!',
   },
-};
+});
 
-const buildMessage = (type: NotificationType, account: Account, targetName: string, instanceTitle: string): JSX.Element => {
+const buildMessage = (
+  intl: IntlShape,
+  type: NotificationType,
+  account: Account,
+  targetName: string,
+  instanceTitle: string,
+): React.ReactNode => {
   const link = buildLink(account);
 
-  return (
-    <FormattedMessageFixed
-      id={messages[type].id}
-      defaultMessage={messages[type].defaultMessage}
-      values={{ name: link, targetName, instance: instanceTitle }}
-    />
-  );
+  return intl.formatMessage(messages[type], {
+    name: link,
+    targetName,
+    instance: instanceTitle,
+  });
 };
 
 interface INotificaton {
@@ -268,7 +268,7 @@ const Notification: React.FC<INotificaton> = (props) => {
 
   const targetName = notification.target && typeof notification.target === 'object' ? notification.target.acct : '';
 
-  const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(type, account, targetName, instance.title) : null;
+  const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, targetName, instance.title) : null;
 
   return (
     <HotKeys handlers={getHandlers()} data-testid='notification'>

From 517c21ae52e2eb8de6d3a4b8c5ffb0ff83f891d0 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 24 May 2022 16:49:59 -0400
Subject: [PATCH 041/102] Add grouped notifications messaging

---
 .../__tests__/notification.test.tsx           | 25 +++++++++++++++++++
 .../notifications/components/notification.tsx | 21 +++++++++++++---
 app/soapbox/normalizers/notification.ts       |  1 +
 .../reducers/__tests__/notifications-test.js  |  6 +++++
 4 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/notifications/components/__tests__/notification.test.tsx b/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
index f11d43f09..14c43f50c 100644
--- a/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
+++ b/app/soapbox/features/notifications/components/__tests__/notification.test.tsx
@@ -28,6 +28,31 @@ describe('<Notification />', () => {
 
     expect(screen.getByTestId('notification')).toBeInTheDocument();
     expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');
+    expect(screen.getByTestId('message')).toHaveTextContent('Nekobit followed you');
+  });
+
+  describe('grouped notifications', () => {
+    it('renders a grouped follow notification for more than 2', async() => {
+      const { notification, state } = normalize(require('soapbox/__fixtures__/notification-follow.json'));
+      const groupedNotification = { ...notification.toJS(), total_count: 5 };
+
+      render(<Notification notification={groupedNotification} />, undefined, state);
+
+      expect(screen.getByTestId('notification')).toBeInTheDocument();
+      expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');
+      expect(screen.getByTestId('message')).toHaveTextContent('Nekobit + 4 others followed you');
+    });
+
+    it('renders a grouped follow notification for 1', async() => {
+      const { notification, state } = normalize(require('soapbox/__fixtures__/notification-follow.json'));
+      const groupedNotification = { ...notification.toJS(), total_count: 2 };
+
+      render(<Notification notification={groupedNotification} />, undefined, state);
+
+      expect(screen.getByTestId('notification')).toBeInTheDocument();
+      expect(screen.getByTestId('account')).toContainHTML('neko@rdrama.cc');
+      expect(screen.getByTestId('message')).toHaveTextContent('Nekobit + 1 other followed you');
+    });
   });
 
   it('renders a favourite notification', async() => {
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index b3453dde1..1a9dad8eb 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
-import { defineMessages, IntlShape, MessageDescriptor } from 'react-intl';
+import { defineMessages, FormattedMessage, IntlShape, MessageDescriptor } from 'react-intl';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
@@ -102,13 +102,27 @@ const buildMessage = (
   intl: IntlShape,
   type: NotificationType,
   account: Account,
+  totalCount: number | null,
   targetName: string,
   instanceTitle: string,
 ): React.ReactNode => {
   const link = buildLink(account);
+  const name = intl.formatMessage({
+    id: 'notification.name',
+    defaultMessage: '{link}{others}',
+  }, {
+    link,
+    others: totalCount && totalCount > 0 ? (
+      <FormattedMessage
+        id='notification.others'
+        defaultMessage=' + {count} {count, plural, one {other} other {others}}'
+        values={{ count: totalCount - 1 }}
+      />
+    ) : '',
+  });
 
   return intl.formatMessage(messages[type], {
-    name: link,
+    name,
     targetName,
     instance: instanceTitle,
   });
@@ -268,7 +282,7 @@ const Notification: React.FC<INotificaton> = (props) => {
 
   const targetName = notification.target && typeof notification.target === 'object' ? notification.target.acct : '';
 
-  const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, targetName, instance.title) : null;
+  const message: React.ReactNode = type && account && typeof account === 'object' ? buildMessage(intl, type, account, notification.total_count, targetName, instance.title) : null;
 
   return (
     <HotKeys handlers={getHandlers()} data-testid='notification'>
@@ -300,6 +314,7 @@ const Notification: React.FC<INotificaton> = (props) => {
                   theme='muted'
                   size='sm'
                   truncate
+                  data-testid='message'
                 >
                   {message}
                 </Text>
diff --git a/app/soapbox/normalizers/notification.ts b/app/soapbox/normalizers/notification.ts
index cee69f7ce..2bac3f2b3 100644
--- a/app/soapbox/normalizers/notification.ts
+++ b/app/soapbox/normalizers/notification.ts
@@ -34,6 +34,7 @@ export const NotificationRecord = ImmutableRecord({
   status: null as EmbeddedEntity<Status>,
   target: null as EmbeddedEntity<Account>, // move
   type: '' as NotificationType | '',
+  total_count: null as number | null, // grouped notifications
 });
 
 export const normalizeNotification = (notification: Record<string, any>) => {
diff --git a/app/soapbox/reducers/__tests__/notifications-test.js b/app/soapbox/reducers/__tests__/notifications-test.js
index aa7d6f714..7061c60bb 100644
--- a/app/soapbox/reducers/__tests__/notifications-test.js
+++ b/app/soapbox/reducers/__tests__/notifications-test.js
@@ -274,6 +274,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: '😢',
             chat_message: null,
+            total_count: null,
           })],
           ['10743', ImmutableMap({
             id: '10743',
@@ -284,6 +285,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
           ['10741', ImmutableMap({
             id: '10741',
@@ -294,6 +296,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
           ['10734', ImmutableMap({
             id: '10734',
@@ -339,6 +342,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: '😢',
             chat_message: null,
+            total_count: null,
           })],
           ['10743', ImmutableMap({
             id: '10743',
@@ -349,6 +353,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
           ['10741', ImmutableMap({
             id: '10741',
@@ -359,6 +364,7 @@ describe('notifications reducer', () => {
             status: '9vvNxoo5EFbbnfdXQu',
             emoji: null,
             chat_message: null,
+            total_count: null,
           })],
         ]),
         unread: 1,

From 1b970d662ed4ef2f9ecc004f149b17da13fa8a95 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 25 May 2022 10:58:19 -0400
Subject: [PATCH 042/102] GitLab CI: move `lint` jobs into `test` step

---
 .gitlab-ci.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index faa87ef71..6fdcf8c36 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -12,7 +12,6 @@ cache:
 
 stages:
   - install
-  - lint
   - test
   - build
   - deploy
@@ -26,7 +25,7 @@ install-dependencies:
       - node_modules/
 
 lint-js:
-  stage: lint
+  stage: test
   script: yarn lint:js
   only:
     changes:
@@ -38,7 +37,7 @@ lint-js:
       - ".eslintrc.js"
 
 lint-sass:
-  stage: lint
+  stage: test
   script: yarn lint:sass
   only:
     changes:

From b798f486d07c94d670b13ba9655af74398d70803 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 25 May 2022 11:00:28 -0400
Subject: [PATCH 043/102] GitLab CI: install-dependencies --> deps, simplify

---
 .gitlab-ci.yml | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 6fdcf8c36..bed1c2b04 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -11,18 +11,14 @@ cache:
     - node_modules/
 
 stages:
-  - install
+  - deps
   - test
   - build
   - deploy
 
-install-dependencies:
-  stage: install
-  script:
-    - yarn install --ignore-scripts
-  artifacts:
-    paths:
-      - node_modules/
+deps:
+  stage: deps
+  script: yarn install --ignore-scripts
 
 lint-js:
   stage: test

From 91adeca74ad7bd6174538dabe4cea8ff8b0ec005 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 25 May 2022 11:15:41 -0400
Subject: [PATCH 044/102] GitLab CI: move build-production to test step

---
 .gitlab-ci.yml | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index bed1c2b04..9fa27818b 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -13,7 +13,6 @@ cache:
 stages:
   - deps
   - test
-  - build
   - deploy
 
 deps:
@@ -64,13 +63,13 @@ nginx-test:
       - "installation/mastodon.conf"
 
 build-production:
-  stage: build
+  stage: test
   script: yarn build
   variables:
     NODE_ENV: production
   artifacts:
     paths:
-    - static
+     - static
 
 docs-deploy:
   stage: deploy

From b387c3fed1bc161989b5bc089a0992156b28b92e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 25 May 2022 11:23:55 -0400
Subject: [PATCH 045/102] GitLab CI: allow failure on review job

---
 .gitlab-ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 9fa27818b..49bbf1c58 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -102,6 +102,7 @@ review:
     url: https://$CI_COMMIT_REF_SLUG.git.soapbox.pub
   script:
     - npx -y surge static $CI_COMMIT_REF_SLUG.git.soapbox.pub
+  allow_failure: true
 
 pages:
   stage: deploy

From b54396588e74b311bbc8f1e3fcec1bc3350685a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 25 May 2022 17:59:54 +0200
Subject: [PATCH 046/102] Add outline in some places
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/account.tsx       | 2 +-
 app/soapbox/components/ui/card/card.tsx  | 2 +-
 app/soapbox/components/ui/menu/menu.css  | 4 ++++
 app/soapbox/components/ui/tabs/tabs.css  | 3 ++-
 app/styles/components/dropdown-menu.scss | 4 +++-
 5 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index cc91ded59..e0fe7ff14 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -26,7 +26,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account }) => {
   };
 
   return (
-    <button className='w-4 h-4 flex-none' onClick={handleClick}>
+    <button className='w-4 h-4 flex-none focus:ring-primary-500 focus:ring-2 focus:ring-offset-2' onClick={handleClick}>
       <img src={account.favicon} alt='' title={account.domain} className='w-full max-h-full' />
     </button>
   );
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 08b501cde..3eedaaf40 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -63,7 +63,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='mr-2 text-gray-900 dark:text-gray-100 focus:ring-primary-500 focus:ring-2' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
diff --git a/app/soapbox/components/ui/menu/menu.css b/app/soapbox/components/ui/menu/menu.css
index cb72cd702..21f916508 100644
--- a/app/soapbox/components/ui/menu/menu.css
+++ b/app/soapbox/components/ui/menu/menu.css
@@ -4,6 +4,10 @@
   z-index: 1003;
 }
 
+[data-reach-menu-button] {
+  @apply focus:ring-primary-500 focus:ring-2 focus:ring-offset-2;
+}
+
 div:focus[data-reach-menu-list] {
   outline: none;
 }
diff --git a/app/soapbox/components/ui/tabs/tabs.css b/app/soapbox/components/ui/tabs/tabs.css
index 180641acf..ee2b5cccb 100644
--- a/app/soapbox/components/ui/tabs/tabs.css
+++ b/app/soapbox/components/ui/tabs/tabs.css
@@ -13,7 +13,8 @@
 [data-reach-tab] {
   @apply flex-1 flex justify-center items-center
   py-4 px-1 text-center font-medium text-sm text-gray-500
-  dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200;
+  dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200
+  focus:ring-primary-500 focus:ring-2;
 }
 
 [data-reach-tab][data-selected] {
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 4be465849..47e2da514 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -44,8 +44,10 @@
   }
 
   &__item {
+    @apply focus-within:ring-primary-500 focus-within:ring-2;
+
     a {
-      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 cursor-pointer;
+      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 focus:bg-gray-100 focus:hover:bg-slate-800 cursor-pointer;
 
       > .svg-icon:first-child {
         @apply h-5 w-5 mr-2.5 transition-none;

From 260aee93b184011d314f3193f2bf2909c7cbd8aa Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 25 May 2022 12:34:56 -0400
Subject: [PATCH 047/102] Add Bug issue template

---
 .gitlab/issue_templates/Bug.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .gitlab/issue_templates/Bug.md

diff --git a/.gitlab/issue_templates/Bug.md b/.gitlab/issue_templates/Bug.md
new file mode 100644
index 000000000..579c32f66
--- /dev/null
+++ b/.gitlab/issue_templates/Bug.md
@@ -0,0 +1,7 @@
+### Environment
+
+* Soapbox version:
+* Backend (Mastodon, Pleroma, etc):
+* Browser/OS:
+
+### Bug description

From 890a3f2ec53094a02a106c69efc9492029b8fb8b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 25 May 2022 15:36:30 -0400
Subject: [PATCH 048/102] GitLab CI: only run deps if yarn.lock changes

---
 .gitlab-ci.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 49bbf1c58..f8b732738 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -18,6 +18,9 @@ stages:
 deps:
   stage: deps
   script: yarn install --ignore-scripts
+  only:
+    changes:
+      - yarn.lock
 
 lint-js:
   stage: test
@@ -49,6 +52,7 @@ jest:
       - "**/*.json"
       - "app/soapbox/**/*"
       - "webpack/**/*"
+      - "custom/**/*"
       - "jest.config.js"
       - "package.json"
       - "yarn.lock"

From a335c06f1302f90b4d5ac6714aa1b46d5e7b1b56 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 26 May 2022 13:37:22 -0400
Subject: [PATCH 049/102] Convert blocks action to TypeScript

---
 app/soapbox/__fixtures__/blocks.json         |   8 +
 app/soapbox/__mocks__/api.ts                 |   7 +-
 app/soapbox/actions/__tests__/blocks.test.ts | 183 +++++++++++++++++++
 app/soapbox/actions/blocks.js                |  95 ----------
 app/soapbox/actions/blocks.ts                | 109 +++++++++++
 5 files changed, 306 insertions(+), 96 deletions(-)
 create mode 100644 app/soapbox/__fixtures__/blocks.json
 create mode 100644 app/soapbox/actions/__tests__/blocks.test.ts
 delete mode 100644 app/soapbox/actions/blocks.js
 create mode 100644 app/soapbox/actions/blocks.ts

diff --git a/app/soapbox/__fixtures__/blocks.json b/app/soapbox/__fixtures__/blocks.json
new file mode 100644
index 000000000..42e8753c5
--- /dev/null
+++ b/app/soapbox/__fixtures__/blocks.json
@@ -0,0 +1,8 @@
+[
+  {
+    "id": "22",
+    "username": "twoods",
+    "acct": "twoods",
+    "display_name": "Tiger Woods"
+  }
+]
diff --git a/app/soapbox/__mocks__/api.ts b/app/soapbox/__mocks__/api.ts
index 99797009e..f81d4a3c4 100644
--- a/app/soapbox/__mocks__/api.ts
+++ b/app/soapbox/__mocks__/api.ts
@@ -1,6 +1,7 @@
 import { jest } from '@jest/globals';
-import { AxiosInstance } from 'axios';
+import { AxiosInstance, AxiosResponse } from 'axios';
 import MockAdapter from 'axios-mock-adapter';
+import LinkHeader from 'http-link-header';
 
 const api = jest.requireActual('../api') as Record<string, Function>;
 let mocks: Array<Function> = [];
@@ -15,6 +16,10 @@ const setupMock = (axios: AxiosInstance) => {
 
 export const staticClient = api.staticClient;
 
+export const getLinks = (response: AxiosResponse): LinkHeader => {
+  return new LinkHeader(response.headers?.link);
+};
+
 export const baseClient = (...params: any[]) => {
   const axios = api.baseClient(...params);
   setupMock(axios);
diff --git a/app/soapbox/actions/__tests__/blocks.test.ts b/app/soapbox/actions/__tests__/blocks.test.ts
new file mode 100644
index 000000000..55055722a
--- /dev/null
+++ b/app/soapbox/actions/__tests__/blocks.test.ts
@@ -0,0 +1,183 @@
+import { __stub } from 'soapbox/api';
+import { mockStore } from 'soapbox/jest/test-helpers';
+import rootReducer from 'soapbox/reducers';
+
+import { expandBlocks, fetchBlocks } from '../blocks';
+
+const account = {
+  acct: 'twoods',
+  display_name: 'Tiger Woods',
+  id: '22',
+  username: 'twoods',
+};
+
+describe('fetchBlocks()', () => {
+  let store;
+
+  describe('if logged out', () => {
+    beforeEach(() => {
+      const state = rootReducer(undefined, {}).set('me', null);
+      store = mockStore(state);
+    });
+
+    it('should do nothing', async() => {
+      await store.dispatch(fetchBlocks());
+      const actions = store.getActions();
+
+      expect(actions).toEqual([]);
+    });
+  });
+
+  describe('if logged in', () => {
+    beforeEach(() => {
+      const state = rootReducer(undefined, {}).set('me', '1234');
+      store = mockStore(state);
+    });
+
+    describe('with a successful API request', () => {
+      beforeEach(() => {
+        const blocks = require('soapbox/__fixtures__/blocks.json');
+
+        __stub((mock) => {
+          mock.onGet('/api/v1/blocks').reply(200, blocks, {
+            link: '<https://example.com/api/v1/blocks?since_id=1>; rel=\'prev\'',
+          });
+        });
+      });
+
+      it('should fetch blocks from the API', async() => {
+        const expectedActions = [
+          { type: 'BLOCKS_FETCH_REQUEST' },
+          { type: 'ACCOUNTS_IMPORT', accounts: [account] },
+          { type: 'BLOCKS_FETCH_SUCCESS', accounts: [account], next: null },
+          {
+            type: 'RELATIONSHIPS_FETCH_REQUEST',
+            ids: ['22'],
+            skipLoading: true,
+          },
+        ];
+        await store.dispatch(fetchBlocks());
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+
+    describe('with an unsuccessful API request', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/blocks').networkError();
+        });
+      });
+
+      it('should dispatch failed action', async() => {
+        const expectedActions = [
+          { type: 'BLOCKS_FETCH_REQUEST' },
+          { type: 'BLOCKS_FETCH_FAIL', error: new Error('Network Error') },
+        ];
+        await store.dispatch(fetchBlocks());
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+  });
+});
+
+describe('expandBlocks()', () => {
+  let store;
+
+  describe('if logged out', () => {
+    beforeEach(() => {
+      const state = rootReducer(undefined, {}).set('me', null);
+      store = mockStore(state);
+    });
+
+    it('should do nothing', async() => {
+      await store.dispatch(expandBlocks());
+      const actions = store.getActions();
+
+      expect(actions).toEqual([]);
+    });
+  });
+
+  describe('if logged in', () => {
+    beforeEach(() => {
+      const state = rootReducer(undefined, {}).set('me', '1234');
+      store = mockStore(state);
+    });
+
+    describe('without a url', () => {
+      beforeEach(() => {
+        const state = rootReducer(undefined, {})
+          .set('me', '1234')
+          .set('user_lists', { blocks: { next: null } });
+        store = mockStore(state);
+      });
+
+      it('should do nothing', async() => {
+        await store.dispatch(expandBlocks());
+        const actions = store.getActions();
+
+        expect(actions).toEqual([]);
+      });
+    });
+
+    describe('with a url', () => {
+      beforeEach(() => {
+        const state = rootReducer(undefined, {})
+          .set('me', '1234')
+          .set('user_lists', { blocks: { next: 'example' } });
+        store = mockStore(state);
+      });
+
+      describe('with a successful API request', () => {
+        beforeEach(() => {
+          const blocks = require('soapbox/__fixtures__/blocks.json');
+
+          __stub((mock) => {
+            mock.onGet('example').reply(200, blocks, {
+              link: '<https://example.com/api/v1/blocks?since_id=1>; rel=\'prev\'',
+            });
+          });
+        });
+
+        it('should fetch blocks from the url', async() => {
+          const expectedActions = [
+            { type: 'BLOCKS_EXPAND_REQUEST' },
+            { type: 'ACCOUNTS_IMPORT', accounts: [account] },
+            { type: 'BLOCKS_EXPAND_SUCCESS', accounts: [account], next: null },
+            {
+              type: 'RELATIONSHIPS_FETCH_REQUEST',
+              ids: ['22'],
+              skipLoading: true,
+            },
+          ];
+          await store.dispatch(expandBlocks());
+          const actions = store.getActions();
+
+          expect(actions).toEqual(expectedActions);
+        });
+      });
+
+      describe('with an unsuccessful API request', () => {
+        beforeEach(() => {
+          __stub((mock) => {
+            mock.onGet('example').networkError();
+          });
+        });
+
+        it('should dispatch failed action', async() => {
+          const expectedActions = [
+            { type: 'BLOCKS_EXPAND_REQUEST' },
+            { type: 'BLOCKS_EXPAND_FAIL', error: new Error('Network Error') },
+          ];
+          await store.dispatch(expandBlocks());
+          const actions = store.getActions();
+
+          expect(actions).toEqual(expectedActions);
+        });
+      });
+    });
+  });
+});
diff --git a/app/soapbox/actions/blocks.js b/app/soapbox/actions/blocks.js
deleted file mode 100644
index 554446f2f..000000000
--- a/app/soapbox/actions/blocks.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import { isLoggedIn } from 'soapbox/utils/auth';
-import { getNextLinkName } from 'soapbox/utils/quirks';
-
-import api, { getLinks } from '../api';
-
-import { fetchRelationships } from './accounts';
-import { importFetchedAccounts } from './importer';
-
-export const BLOCKS_FETCH_REQUEST = 'BLOCKS_FETCH_REQUEST';
-export const BLOCKS_FETCH_SUCCESS = 'BLOCKS_FETCH_SUCCESS';
-export const BLOCKS_FETCH_FAIL    = 'BLOCKS_FETCH_FAIL';
-
-export const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST';
-export const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS';
-export const BLOCKS_EXPAND_FAIL    = 'BLOCKS_EXPAND_FAIL';
-
-export function fetchBlocks() {
-  return (dispatch, getState) => {
-    if (!isLoggedIn(getState)) return;
-    const nextLinkName = getNextLinkName(getState);
-
-    dispatch(fetchBlocksRequest());
-
-    api(getState).get('/api/v1/blocks').then(response => {
-      const next = getLinks(response).refs.find(link => link.rel === nextLinkName);
-      dispatch(importFetchedAccounts(response.data));
-      dispatch(fetchBlocksSuccess(response.data, next ? next.uri : null));
-      dispatch(fetchRelationships(response.data.map(item => item.id)));
-    }).catch(error => dispatch(fetchBlocksFail(error)));
-  };
-}
-
-export function fetchBlocksRequest() {
-  return {
-    type: BLOCKS_FETCH_REQUEST,
-  };
-}
-
-export function fetchBlocksSuccess(accounts, next) {
-  return {
-    type: BLOCKS_FETCH_SUCCESS,
-    accounts,
-    next,
-  };
-}
-
-export function fetchBlocksFail(error) {
-  return {
-    type: BLOCKS_FETCH_FAIL,
-    error,
-  };
-}
-
-export function expandBlocks() {
-  return (dispatch, getState) => {
-    if (!isLoggedIn(getState)) return;
-    const nextLinkName = getNextLinkName(getState);
-
-    const url = getState().getIn(['user_lists', 'blocks', 'next']);
-
-    if (url === null) {
-      return;
-    }
-
-    dispatch(expandBlocksRequest());
-
-    api(getState).get(url).then(response => {
-      const next = getLinks(response).refs.find(link => link.rel === nextLinkName);
-      dispatch(importFetchedAccounts(response.data));
-      dispatch(expandBlocksSuccess(response.data, next ? next.uri : null));
-      dispatch(fetchRelationships(response.data.map(item => item.id)));
-    }).catch(error => dispatch(expandBlocksFail(error)));
-  };
-}
-
-export function expandBlocksRequest() {
-  return {
-    type: BLOCKS_EXPAND_REQUEST,
-  };
-}
-
-export function expandBlocksSuccess(accounts, next) {
-  return {
-    type: BLOCKS_EXPAND_SUCCESS,
-    accounts,
-    next,
-  };
-}
-
-export function expandBlocksFail(error) {
-  return {
-    type: BLOCKS_EXPAND_FAIL,
-    error,
-  };
-}
diff --git a/app/soapbox/actions/blocks.ts b/app/soapbox/actions/blocks.ts
new file mode 100644
index 000000000..af68b7b83
--- /dev/null
+++ b/app/soapbox/actions/blocks.ts
@@ -0,0 +1,109 @@
+import { AnyAction } from '@reduxjs/toolkit';
+import { AxiosError } from 'axios';
+
+import { isLoggedIn } from 'soapbox/utils/auth';
+import { getNextLinkName } from 'soapbox/utils/quirks';
+
+import api, { getLinks } from '../api';
+
+import { fetchRelationships } from './accounts';
+import { importFetchedAccounts } from './importer';
+
+const BLOCKS_FETCH_REQUEST = 'BLOCKS_FETCH_REQUEST';
+const BLOCKS_FETCH_SUCCESS = 'BLOCKS_FETCH_SUCCESS';
+const BLOCKS_FETCH_FAIL = 'BLOCKS_FETCH_FAIL';
+
+const BLOCKS_EXPAND_REQUEST = 'BLOCKS_EXPAND_REQUEST';
+const BLOCKS_EXPAND_SUCCESS = 'BLOCKS_EXPAND_SUCCESS';
+const BLOCKS_EXPAND_FAIL = 'BLOCKS_EXPAND_FAIL';
+
+const fetchBlocks = () => (dispatch: React.Dispatch<AnyAction>, getState: any) => {
+  if (!isLoggedIn(getState)) return null;
+  const nextLinkName = getNextLinkName(getState);
+
+  dispatch(fetchBlocksRequest());
+
+  return api(getState)
+    .get('/api/v1/blocks')
+    .then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === nextLinkName);
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(fetchBlocksSuccess(response.data, next ? next.uri : null));
+      dispatch(fetchRelationships(response.data.map((item: any) => item.id)) as any);
+    })
+    .catch(error => dispatch(fetchBlocksFail(error)));
+};
+
+function fetchBlocksRequest() {
+  return { type: BLOCKS_FETCH_REQUEST };
+}
+
+function fetchBlocksSuccess(accounts: any, next: any) {
+  return {
+    type: BLOCKS_FETCH_SUCCESS,
+    accounts,
+    next,
+  };
+}
+
+function fetchBlocksFail(error: AxiosError) {
+  return {
+    type: BLOCKS_FETCH_FAIL,
+    error,
+  };
+}
+
+const expandBlocks = () => (dispatch: React.Dispatch<AnyAction>, getState: any) => {
+  if (!isLoggedIn(getState)) return null;
+  const nextLinkName = getNextLinkName(getState);
+
+  const url = getState().getIn(['user_lists', 'blocks', 'next']);
+
+  if (url === null) {
+    return null;
+  }
+
+  dispatch(expandBlocksRequest());
+
+  return api(getState)
+    .get(url)
+    .then(response => {
+      const next = getLinks(response).refs.find(link => link.rel === nextLinkName);
+      dispatch(importFetchedAccounts(response.data));
+      dispatch(expandBlocksSuccess(response.data, next ? next.uri : null));
+      dispatch(fetchRelationships(response.data.map((item: any) => item.id)) as any);
+    })
+    .catch(error => dispatch(expandBlocksFail(error)));
+};
+
+function expandBlocksRequest() {
+  return {
+    type: BLOCKS_EXPAND_REQUEST,
+  };
+}
+
+function expandBlocksSuccess(accounts: any, next: any) {
+  return {
+    type: BLOCKS_EXPAND_SUCCESS,
+    accounts,
+    next,
+  };
+}
+
+function expandBlocksFail(error: AxiosError) {
+  return {
+    type: BLOCKS_EXPAND_FAIL,
+    error,
+  };
+}
+
+export {
+  fetchBlocks,
+  expandBlocks,
+  BLOCKS_FETCH_REQUEST,
+  BLOCKS_FETCH_SUCCESS,
+  BLOCKS_FETCH_FAIL,
+  BLOCKS_EXPAND_REQUEST,
+  BLOCKS_EXPAND_SUCCESS,
+  BLOCKS_EXPAND_FAIL,
+};

From 5c49cc0b84109b9cebaecb016f0f87a20e851ec2 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 26 May 2022 14:51:59 -0400
Subject: [PATCH 050/102] Convert ServiceWorker to TypeScript

---
 .../service_worker/{entry.js => entry.ts}     |   0
 ...fications.js => web_push_notifications.ts} | 129 ++++++++++++------
 tsconfig.json                                 |   1 +
 webpack/production.js                         |   2 +-
 4 files changed, 88 insertions(+), 44 deletions(-)
 rename app/soapbox/service_worker/{entry.js => entry.ts} (100%)
 rename app/soapbox/service_worker/{web_push_notifications.js => web_push_notifications.ts} (58%)

diff --git a/app/soapbox/service_worker/entry.js b/app/soapbox/service_worker/entry.ts
similarity index 100%
rename from app/soapbox/service_worker/entry.js
rename to app/soapbox/service_worker/entry.ts
diff --git a/app/soapbox/service_worker/web_push_notifications.js b/app/soapbox/service_worker/web_push_notifications.ts
similarity index 58%
rename from app/soapbox/service_worker/web_push_notifications.js
rename to app/soapbox/service_worker/web_push_notifications.ts
index 5dbd749f4..dee650600 100644
--- a/app/soapbox/service_worker/web_push_notifications.js
+++ b/app/soapbox/service_worker/web_push_notifications.ts
@@ -4,18 +4,60 @@ import { unescape } from 'lodash';
 
 import locales from './web_push_locales';
 
+import type {
+  Account as AccountEntity,
+  Notification as NotificationEntity,
+  Status as StatusEntity,
+} from 'soapbox/types/entities';
+
 const MAX_NOTIFICATIONS = 5;
 const GROUP_TAG = 'tag';
 
-const notify = options =>
+// https://www.devextent.com/create-service-worker-typescript/
+declare const self: ServiceWorkerGlobalScope;
+
+interface NotificationData {
+  access_token?: string,
+  preferred_locale: string,
+  hiddenBody?: string,
+  hiddenImage?: string,
+  id?: string,
+  url: string,
+  count?: number,
+}
+
+interface ExtendedNotificationOptions extends NotificationOptions {
+  title: string,
+  data: NotificationData,
+}
+
+interface ClonedNotification {
+  body?: string,
+  image?: string,
+  actions?: NotificationAction[],
+  data: NotificationData,
+  title: string,
+  tag?: string,
+}
+
+interface APIStatus extends Omit<StatusEntity, 'media_attachments'> {
+  media_attachments: { preview_url: string }[],
+}
+
+interface APINotification extends Omit<NotificationEntity, 'account' | 'status'> {
+  account: AccountEntity,
+  status?: APIStatus,
+}
+
+const notify = (options: ExtendedNotificationOptions): Promise<void> =>
   self.registration.getNotifications().then(notifications => {
     if (notifications.length >= MAX_NOTIFICATIONS) { // Reached the maximum number of notifications, proceed with grouping
-      const group = {
+      const group: ClonedNotification = {
         title: formatMessage('notifications.group', options.data.preferred_locale, { count: notifications.length + 1 }),
-        body: notifications.sort((n1, n2) => n1.timestamp < n2.timestamp).map(notification => notification.title).join('\n'),
+        body: notifications.map(notification => notification.title).join('\n'),
         tag: GROUP_TAG,
         data: {
-          url: (new URL('/notifications', self.location)).href,
+          url: (new URL('/notifications', self.location.href)).href,
           count: notifications.length + 1,
           preferred_locale: options.data.preferred_locale,
         },
@@ -26,10 +68,11 @@ const notify = options =>
       return self.registration.showNotification(group.title, group);
     } else if (notifications.length === 1 && notifications[0].tag === GROUP_TAG) { // Already grouped, proceed with appending the notification to the group
       const group = cloneNotification(notifications[0]);
+      const count = (group.data.count || 0) + 1;
 
-      group.title = formatMessage('notifications.group', options.data.preferred_locale, { count: group.data.count + 1 });
+      group.title = formatMessage('notifications.group', options.data.preferred_locale, { count });
       group.body  = `${options.title}\n${group.body}`;
-      group.data  = { ...group.data, count: group.data.count + 1 };
+      group.data  = { ...group.data, count };
 
       return self.registration.showNotification(group.title, group);
     }
@@ -37,8 +80,8 @@ const notify = options =>
     return self.registration.showNotification(options.title, options);
   });
 
-const fetchFromApi = (path, method, accessToken) => {
-  const url = (new URL(path, self.location)).href;
+const fetchFromApi = (path: string, method: string, accessToken: string): Promise<APINotification> => {
+  const url = (new URL(path, self.location.href)).href;
 
   return fetch(url, {
     headers: {
@@ -52,50 +95,50 @@ const fetchFromApi = (path, method, accessToken) => {
     if (res.ok) {
       return res;
     } else {
-      throw new Error(res.status);
+      throw new Error(String(res.status));
     }
   }).then(res => res.json());
 };
 
-const cloneNotification = notification => {
-  const clone = {};
-  let k;
+const cloneNotification = (notification: Notification): ClonedNotification => {
+  const clone: any = {};
+  let k: string;
 
   // Object.assign() does not work with notifications
   for (k in notification) {
-    clone[k] = notification[k];
+    clone[k] = (notification as any)[k];
   }
 
-  return clone;
+  return clone as ClonedNotification;
 };
 
-const formatMessage = (messageId, locale, values = {}) =>
-  (new IntlMessageFormat(locales[locale][messageId], locale)).format(values);
+const formatMessage = (messageId: string, locale: string, values = {}): string =>
+  (new IntlMessageFormat(locales[locale][messageId], locale)).format(values) as string;
 
-const htmlToPlainText = html =>
+const htmlToPlainText = (html: string): string =>
   unescape(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><[^>]*>/g, '\n\n').replace(/<[^>]*>/g, ''));
 
-const handlePush = (event) => {
-  const { access_token, notification_id, preferred_locale, title, body, icon } = event.data.json();
+const handlePush = (event: PushEvent) => {
+  const { access_token, notification_id, preferred_locale, title, body, icon } = event.data?.json();
 
   // Placeholder until more information can be loaded
   event.waitUntil(
     fetchFromApi(`/api/v1/notifications/${notification_id}`, 'get', access_token).then(notification => {
-      const options = {};
+      const options: ExtendedNotificationOptions = {
+        title: formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username }),
+        body:      notification.status && htmlToPlainText(notification.status.content),
+        icon:      notification.account.avatar_static,
+        timestamp: notification.created_at && Number(new Date(notification.created_at)),
+        tag:       notification.id,
+        image:     notification.status?.media_attachments[0]?.preview_url,
+        data:      { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.username}/posts/${notification.status.id}` : `/@${notification.account.username}` },
+      };
 
-      options.title     = formatMessage(`notification.${notification.type}`, preferred_locale, { name: notification.account.display_name.length > 0 ? notification.account.display_name : notification.account.username });
-      options.body      = notification.status && htmlToPlainText(notification.status.content);
-      options.icon      = notification.account.avatar_static;
-      options.timestamp = notification.created_at && new Date(notification.created_at);
-      options.tag       = notification.id;
-      options.image     = notification.status && notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url || undefined;
-      options.data      = { access_token, preferred_locale, id: notification.status ? notification.status.id : notification.account.id, url: notification.status ? `/@${notification.account.username}/posts/${notification.status.id}` : `/@${notification.account.username}` };
+      if (notification.status?.spoiler_text || notification.status?.sensitive) {
+        options.data.hiddenBody  = htmlToPlainText(notification.status?.content);
+        options.data.hiddenImage = notification.status?.media_attachments[0]?.preview_url;
 
-      if (notification.status?.spoiler_text || notification.status.sensitive) {
-        options.data.hiddenBody  = htmlToPlainText(notification.status.content);
-        options.data.hiddenImage = notification.status.media_attachments.length > 0 && notification.status.media_attachments[0].preview_url;
-
-        if (notification.status.spoiler_text) {
+        if (notification.status?.spoiler_text) {
           options.body    = notification.status.spoiler_text;
         }
 
@@ -112,39 +155,39 @@ const handlePush = (event) => {
         body,
         icon,
         tag: notification_id,
-        timestamp: new Date(),
+        timestamp: Number(new Date()),
         data: { access_token, preferred_locale, url: '/notifications' },
       });
     }),
   );
 };
 
-const actionExpand = preferred_locale => ({
+const actionExpand = (preferred_locale: string) => ({
   action: 'expand',
   icon: `/${require('../../images/web-push/web-push-icon_expand.png')}`,
   title: formatMessage('status.show_more', preferred_locale),
 });
 
-const actionReblog = preferred_locale => ({
+const actionReblog = (preferred_locale: string) => ({
   action: 'reblog',
   icon: `/${require('../../images/web-push/web-push-icon_reblog.png')}`,
   title: formatMessage('status.reblog', preferred_locale),
 });
 
-const actionFavourite = preferred_locale => ({
+const actionFavourite = (preferred_locale: string) => ({
   action: 'favourite',
   icon: `/${require('../../images/web-push/web-push-icon_favourite.png')}`,
   title: formatMessage('status.favourite', preferred_locale),
 });
 
-const findBestClient = clients => {
+const findBestClient = (clients: readonly WindowClient[]): WindowClient => {
   const focusedClient = clients.find(client => client.focused);
   const visibleClient = clients.find(client => client.visibilityState === 'visible');
 
   return focusedClient || visibleClient || clients[0];
 };
 
-const expandNotification = notification => {
+const expandNotification = (notification: Notification) => {
   const newNotification = cloneNotification(notification);
 
   newNotification.body    = newNotification.data.hiddenBody;
@@ -154,25 +197,25 @@ const expandNotification = notification => {
   return self.registration.showNotification(newNotification.title, newNotification);
 };
 
-const removeActionFromNotification = (notification, action) => {
+const removeActionFromNotification = (notification: Notification, action: string) => {
   const newNotification = cloneNotification(notification);
 
-  newNotification.actions = newNotification.actions.filter(item => item.action !== action);
+  newNotification.actions = newNotification.actions?.filter(item => item.action !== action);
 
   return self.registration.showNotification(newNotification.title, newNotification);
 };
 
-const openUrl = url =>
+const openUrl = (url: string) =>
   self.clients.matchAll({ type: 'window' }).then(clientList => {
     if (clientList.length === 0) {
       return self.clients.openWindow(url);
     } else {
       const client = findBestClient(clientList);
-      return client.navigate(url).then(client => client.focus());
+      return client.navigate(url).then(client => client?.focus());
     }
   });
 
-const handleNotificationClick = (event) => {
+const handleNotificationClick = (event: NotificationEvent) => {
   const reactToNotificationClick = new Promise((resolve, reject) => {
     if (event.action) {
       if (event.action === 'expand') {
diff --git a/tsconfig.json b/tsconfig.json
index 5e0e8d07c..8989bd57e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,7 @@
     "sourceMap": true,
     "strict": true,
     "module": "es2022",
+    "lib": ["es2019", "es6", "dom", "webworker"],
     "target": "es5",
     "jsx": "react",
     "allowJs": true,
diff --git a/webpack/production.js b/webpack/production.js
index ce47d647b..18666a109 100644
--- a/webpack/production.js
+++ b/webpack/production.js
@@ -84,7 +84,7 @@ module.exports = merge(sharedConfig, {
       ],
       ServiceWorker: {
         cacheName: 'soapbox',
-        entry: join(__dirname, '../app/soapbox/service_worker/entry.js'),
+        entry: join(__dirname, '../app/soapbox/service_worker/entry.ts'),
         minify: true,
       },
       cacheMaps: [{

From d111c4c2d2ee60f687aceba43e5bba4fe9e18790 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 26 May 2022 15:16:03 -0400
Subject: [PATCH 051/102] ServiceWorker: add jsdoc comments

---
 .../service_worker/web_push_notifications.ts  | 23 +++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/app/soapbox/service_worker/web_push_notifications.ts b/app/soapbox/service_worker/web_push_notifications.ts
index dee650600..f60c21f54 100644
--- a/app/soapbox/service_worker/web_push_notifications.ts
+++ b/app/soapbox/service_worker/web_push_notifications.ts
@@ -10,12 +10,15 @@ import type {
   Status as StatusEntity,
 } from 'soapbox/types/entities';
 
+/** Limit before we start grouping device notifications into a single notification. */
 const MAX_NOTIFICATIONS = 5;
+/** Tag for the grouped notification. */
 const GROUP_TAG = 'tag';
 
 // https://www.devextent.com/create-service-worker-typescript/
 declare const self: ServiceWorkerGlobalScope;
 
+/** Soapbox notification data from push event. */
 interface NotificationData {
   access_token?: string,
   preferred_locale: string,
@@ -26,11 +29,13 @@ interface NotificationData {
   count?: number,
 }
 
+/** ServiceWorker Notification options with extra fields. */
 interface ExtendedNotificationOptions extends NotificationOptions {
   title: string,
   data: NotificationData,
 }
 
+/** Partial clone of ServiceWorker Notification with mutability. */
 interface ClonedNotification {
   body?: string,
   image?: string,
@@ -40,15 +45,20 @@ interface ClonedNotification {
   tag?: string,
 }
 
+/** Status entitiy from the API (kind of). */
+// HACK
 interface APIStatus extends Omit<StatusEntity, 'media_attachments'> {
   media_attachments: { preview_url: string }[],
 }
 
+/** Notification entity from the API (kind of). */
+// HACK
 interface APINotification extends Omit<NotificationEntity, 'account' | 'status'> {
   account: AccountEntity,
   status?: APIStatus,
 }
 
+/** Show the actual push notification on the device. */
 const notify = (options: ExtendedNotificationOptions): Promise<void> =>
   self.registration.getNotifications().then(notifications => {
     if (notifications.length >= MAX_NOTIFICATIONS) { // Reached the maximum number of notifications, proceed with grouping
@@ -80,6 +90,7 @@ const notify = (options: ExtendedNotificationOptions): Promise<void> =>
     return self.registration.showNotification(options.title, options);
   });
 
+/** Perform an API request to the backend. */
 const fetchFromApi = (path: string, method: string, accessToken: string): Promise<APINotification> => {
   const url = (new URL(path, self.location.href)).href;
 
@@ -100,6 +111,7 @@ const fetchFromApi = (path: string, method: string, accessToken: string): Promis
   }).then(res => res.json());
 };
 
+/** Create a mutable object that loosely matches the Notification. */
 const cloneNotification = (notification: Notification): ClonedNotification => {
   const clone: any = {};
   let k: string;
@@ -112,12 +124,15 @@ const cloneNotification = (notification: Notification): ClonedNotification => {
   return clone as ClonedNotification;
 };
 
+/** Get translated message for the user's locale. */
 const formatMessage = (messageId: string, locale: string, values = {}): string =>
   (new IntlMessageFormat(locales[locale][messageId], locale)).format(values) as string;
 
+/** Strip HTML for display in a native notification. */
 const htmlToPlainText = (html: string): string =>
   unescape(html.replace(/<br\s*\/?>/g, '\n').replace(/<\/p><[^>]*>/g, '\n\n').replace(/<[^>]*>/g, ''));
 
+/** ServiceWorker `push` event callback. */
 const handlePush = (event: PushEvent) => {
   const { access_token, notification_id, preferred_locale, title, body, icon } = event.data?.json();
 
@@ -162,24 +177,28 @@ const handlePush = (event: PushEvent) => {
   );
 };
 
+/** Native action to open a status on the device. */
 const actionExpand = (preferred_locale: string) => ({
   action: 'expand',
   icon: `/${require('../../images/web-push/web-push-icon_expand.png')}`,
   title: formatMessage('status.show_more', preferred_locale),
 });
 
+/** Native action to repost status. */
 const actionReblog = (preferred_locale: string) => ({
   action: 'reblog',
   icon: `/${require('../../images/web-push/web-push-icon_reblog.png')}`,
   title: formatMessage('status.reblog', preferred_locale),
 });
 
+/** Native action to like status. */
 const actionFavourite = (preferred_locale: string) => ({
   action: 'favourite',
   icon: `/${require('../../images/web-push/web-push-icon_favourite.png')}`,
   title: formatMessage('status.favourite', preferred_locale),
 });
 
+/** Get the active tab if possible, or any open tab. */
 const findBestClient = (clients: readonly WindowClient[]): WindowClient => {
   const focusedClient = clients.find(client => client.focused);
   const visibleClient = clients.find(client => client.visibilityState === 'visible');
@@ -197,6 +216,7 @@ const expandNotification = (notification: Notification) => {
   return self.registration.showNotification(newNotification.title, newNotification);
 };
 
+/** Update the native notification, but delete the action (because it was performed). */
 const removeActionFromNotification = (notification: Notification, action: string) => {
   const newNotification = cloneNotification(notification);
 
@@ -205,6 +225,7 @@ const removeActionFromNotification = (notification: Notification, action: string
   return self.registration.showNotification(newNotification.title, newNotification);
 };
 
+/** Open a URL on the device. */
 const openUrl = (url: string) =>
   self.clients.matchAll({ type: 'window' }).then(clientList => {
     if (clientList.length === 0) {
@@ -215,6 +236,7 @@ const openUrl = (url: string) =>
     }
   });
 
+/** Callback when a native notification is clicked/touched on the device. */
 const handleNotificationClick = (event: NotificationEvent) => {
   const reactToNotificationClick = new Promise((resolve, reject) => {
     if (event.action) {
@@ -238,5 +260,6 @@ const handleNotificationClick = (event: NotificationEvent) => {
   event.waitUntil(reactToNotificationClick);
 };
 
+// ServiceWorker event listeners
 self.addEventListener('push', handlePush);
 self.addEventListener('notificationclick', handleNotificationClick);

From b8cfb567d1bb48388c342cc303fb5003adfe1027 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 26 May 2022 15:16:54 -0400
Subject: [PATCH 052/102] ServiceWorker: alphabetize type definitions

---
 app/soapbox/service_worker/web_push_notifications.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/service_worker/web_push_notifications.ts b/app/soapbox/service_worker/web_push_notifications.ts
index f60c21f54..099bf8f45 100644
--- a/app/soapbox/service_worker/web_push_notifications.ts
+++ b/app/soapbox/service_worker/web_push_notifications.ts
@@ -21,28 +21,28 @@ declare const self: ServiceWorkerGlobalScope;
 /** Soapbox notification data from push event. */
 interface NotificationData {
   access_token?: string,
-  preferred_locale: string,
+  count?: number,
   hiddenBody?: string,
   hiddenImage?: string,
   id?: string,
+  preferred_locale: string,
   url: string,
-  count?: number,
 }
 
 /** ServiceWorker Notification options with extra fields. */
 interface ExtendedNotificationOptions extends NotificationOptions {
-  title: string,
   data: NotificationData,
+  title: string,
 }
 
 /** Partial clone of ServiceWorker Notification with mutability. */
 interface ClonedNotification {
-  body?: string,
-  image?: string,
   actions?: NotificationAction[],
+  body?: string,
   data: NotificationData,
-  title: string,
+  image?: string,
   tag?: string,
+  title: string,
 }
 
 /** Status entitiy from the API (kind of). */

From 03e97edff79adea1a704575593ecfb0dc1a1790f Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Thu, 26 May 2022 14:38:24 -0400
Subject: [PATCH 053/102] Improve Quote Status visuals

---
 app/soapbox/features/compose/components/compose_form.js  | 4 +++-
 app/soapbox/features/status/components/quoted_status.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 713b5d087..b59c61da0 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/app/soapbox/features/compose/components/compose_form.js
@@ -365,7 +365,9 @@ class ComposeForm extends ImmutablePureComponent {
           }
         </AutosuggestTextarea>
 
-        <QuotedStatusContainer />
+        <div className='mb-2'>
+          <QuotedStatusContainer />
+        </div>
 
         <div
           className={classNames('flex flex-wrap items-center justify-between', {
diff --git a/app/soapbox/features/status/components/quoted_status.tsx b/app/soapbox/features/status/components/quoted_status.tsx
index 652bc75d5..a7008cfb1 100644
--- a/app/soapbox/features/status/components/quoted_status.tsx
+++ b/app/soapbox/features/status/components/quoted_status.tsx
@@ -127,7 +127,7 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
       <Stack
         space={2}
         className={classNames('mt-3 p-4 rounded-lg border border-solid border-gray-100 dark:border-slate-700 cursor-pointer', {
-          'hover:bg-gray-100 dark:hover:bg-slate-700': !compose,
+          'hover:bg-gray-50 dark:hover:bg-slate-700': !compose,
         })}
         onClick={this.handleExpandClick}
       >

From 5c549a46e5ef45e5c15043f3cd5947c8ea4092a1 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 26 May 2022 17:21:38 -0400
Subject: [PATCH 054/102] ServiceWorker: add missing jsdoc comment to
 expandNotification

---
 app/soapbox/service_worker/web_push_notifications.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/soapbox/service_worker/web_push_notifications.ts b/app/soapbox/service_worker/web_push_notifications.ts
index 099bf8f45..9939f88a2 100644
--- a/app/soapbox/service_worker/web_push_notifications.ts
+++ b/app/soapbox/service_worker/web_push_notifications.ts
@@ -206,6 +206,7 @@ const findBestClient = (clients: readonly WindowClient[]): WindowClient => {
   return focusedClient || visibleClient || clients[0];
 };
 
+/** Update a notification with CW to display the full status.  */
 const expandNotification = (notification: Notification) => {
   const newNotification = cloneNotification(notification);
 

From 4e7256698945997f878d6119398c7a6399de7a98 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Thu, 26 May 2022 17:29:44 -0400
Subject: [PATCH 055/102] Jest: fix ServiceWorker filename in
 collectCoverageFrom

---
 jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index c2c762be2..8796e5595 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -22,7 +22,7 @@ module.exports = {
     'app/soapbox/**/*.tsx',
     '!app/soapbox/features/emoji/emoji_compressed.js',
     '!app/soapbox/locales/locale-data/*.js',
-    '!app/soapbox/service_worker/entry.js',
+    '!app/soapbox/service_worker/entry.ts',
     '!app/soapbox/jest/test-setup.ts',
     '!app/soapbox/jest/test-helpers.ts',
   ],

From 9007e237a02df1470ba6704e31b76b78520b716d Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 27 May 2022 09:24:54 -0400
Subject: [PATCH 056/102] Add coverage definition

---
 .gitlab-ci.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index f8b732738..44578e04e 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -46,6 +46,7 @@ lint-sass:
 jest:
   stage: test
   script: yarn test:coverage
+  coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
   only:
     changes:
       - "**/*.js"

From 05bb3fe7a0c769768b9d2630e2fe047c0e027c6b Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 27 May 2022 09:30:51 -0400
Subject: [PATCH 057/102] Add covertura report location

---
 .gitlab-ci.yml | 7 ++++++-
 jest.config.js | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 44578e04e..ca7e19793 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -46,7 +46,6 @@ lint-sass:
 jest:
   stage: test
   script: yarn test:coverage
-  coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
   only:
     changes:
       - "**/*.js"
@@ -57,6 +56,12 @@ jest:
       - "jest.config.js"
       - "package.json"
       - "yarn.lock"
+  coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
+  artifacts:
+    reports:
+      coverage_report:
+        coverage_format: cobertura
+        path: .coverage/cobertura-coverage.xml
 
 nginx-test:
   stage: test
diff --git a/jest.config.js b/jest.config.js
index 8796e5595..aa0c7445c 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -27,7 +27,7 @@ module.exports = {
     '!app/soapbox/jest/test-helpers.ts',
   ],
   'coverageDirectory': '<rootDir>/.coverage/',
-  'coverageReporters': ['html', 'text', 'text-summary', 'cobertura'],
+  'coverageReporters': ['cobertura'],
   'moduleDirectories': [
     '<rootDir>/node_modules',
     '<rootDir>/app',

From 712e3ecb2e4ae2638757f8fe847f1bec3fee2c3e Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 27 May 2022 10:15:32 -0400
Subject: [PATCH 058/102] Remove artifacts

---
 .gitlab-ci.yml | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index ca7e19793..365de6d78 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -57,11 +57,6 @@ jest:
       - "package.json"
       - "yarn.lock"
   coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
-  artifacts:
-    reports:
-      coverage_report:
-        coverage_format: cobertura
-        path: .coverage/cobertura-coverage.xml
 
 nginx-test:
   stage: test

From 3bae33ce6e8f060185015e7f508f4e936a1782ae Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 27 May 2022 10:23:59 -0400
Subject: [PATCH 059/102] Add back other reporters

---
 jest.config.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/jest.config.js b/jest.config.js
index aa0c7445c..8796e5595 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -27,7 +27,7 @@ module.exports = {
     '!app/soapbox/jest/test-helpers.ts',
   ],
   'coverageDirectory': '<rootDir>/.coverage/',
-  'coverageReporters': ['cobertura'],
+  'coverageReporters': ['html', 'text', 'text-summary', 'cobertura'],
   'moduleDirectories': [
     '<rootDir>/node_modules',
     '<rootDir>/app',

From 68fa3fe33990c1c88c1c9154f0edef6af21a0336 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 27 May 2022 16:29:54 +0200
Subject: [PATCH 060/102] Fix hotkey navigation in threads
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/status/index.tsx | 36 +++++++++++++--------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index ed762b7b5..3f762c31b 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -496,15 +496,15 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     const { status, ancestorsIds, descendantsIds } = this.props;
 
     if (id === status.id) {
-      this._selectChild(ancestorsIds.size - 1, true);
+      this._selectChild(ancestorsIds.size - 1);
     } else {
       let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
         index = ImmutableList(descendantsIds).indexOf(id);
-        this._selectChild(ancestorsIds.size + index, true);
+        this._selectChild(ancestorsIds.size + index);
       } else {
-        this._selectChild(index - 1, true);
+        this._selectChild(index - 1);
       }
     }
   }
@@ -513,15 +513,15 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     const { status, ancestorsIds, descendantsIds } = this.props;
 
     if (id === status.id) {
-      this._selectChild(ancestorsIds.size + 1, false);
+      this._selectChild(ancestorsIds.size + 1);
     } else {
       let index = ImmutableList(ancestorsIds).indexOf(id);
 
       if (index === -1) {
         index = ImmutableList(descendantsIds).indexOf(id);
-        this._selectChild(ancestorsIds.size + index + 2, false);
+        this._selectChild(ancestorsIds.size + index + 2);
       } else {
-        this._selectChild(index + 1, false);
+        this._selectChild(index + 1);
       }
     }
   }
@@ -544,19 +544,18 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     firstEmoji?.focus();
   };
 
-  _selectChild(index: number, align_top: boolean) {
-    const container = this.node;
-    if (!container) return;
-    const element = container.querySelectorAll('.focusable')[index] as HTMLButtonElement;
+  _selectChild(index: number) {
+    this.scroller?.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const element = document.querySelector<HTMLDivElement>(`#thread [data-index="${index}"] .focusable`);
 
-    if (element) {
-      if (align_top && container.scrollTop > element.offsetTop) {
-        element.scrollIntoView(true);
-      } else if (!align_top && container.scrollTop + container.clientHeight < element.offsetTop + element.offsetHeight) {
-        element.scrollIntoView(false);
-      }
-      element.focus();
-    }
+        if (element) {
+          element.focus();
+        }
+      },
+    });
   }
 
   renderTombstone(id: string) {
@@ -791,6 +790,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         <Stack space={2}>
           <div ref={this.setRef} className='thread'>
             <ScrollableList
+              id='thread'
               ref={this.setScrollerRef}
               onRefresh={this.handleRefresh}
               hasMore={!!this.state.next}

From 4ad4414e0885564e1df48872c22f2e76651c0c19 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 27 May 2022 11:38:01 -0400
Subject: [PATCH 061/102] Convert about action to TypeScript

---
 .../{about-test.js => about.test.ts}          |  0
 app/soapbox/actions/about.js                  | 19 ------------
 app/soapbox/actions/about.ts                  | 29 +++++++++++++++++++
 3 files changed, 29 insertions(+), 19 deletions(-)
 rename app/soapbox/actions/__tests__/{about-test.js => about.test.ts} (100%)
 delete mode 100644 app/soapbox/actions/about.js
 create mode 100644 app/soapbox/actions/about.ts

diff --git a/app/soapbox/actions/__tests__/about-test.js b/app/soapbox/actions/__tests__/about.test.ts
similarity index 100%
rename from app/soapbox/actions/__tests__/about-test.js
rename to app/soapbox/actions/__tests__/about.test.ts
diff --git a/app/soapbox/actions/about.js b/app/soapbox/actions/about.js
deleted file mode 100644
index 86be6beb4..000000000
--- a/app/soapbox/actions/about.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { staticClient } from '../api';
-
-export const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
-export const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS';
-export const FETCH_ABOUT_PAGE_FAIL    = 'FETCH_ABOUT_PAGE_FAIL';
-
-export function fetchAboutPage(slug = 'index', locale) {
-  return (dispatch, getState) => {
-    dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug, locale });
-    const filename = `${slug}${locale ? `.${locale}` : ''}.html`;
-    return staticClient.get(`/instance/about/${filename}`).then(({ data: html }) => {
-      dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, locale, html });
-      return html;
-    }).catch(error => {
-      dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug, locale, error });
-      throw error;
-    });
-  };
-}
diff --git a/app/soapbox/actions/about.ts b/app/soapbox/actions/about.ts
new file mode 100644
index 000000000..37713c401
--- /dev/null
+++ b/app/soapbox/actions/about.ts
@@ -0,0 +1,29 @@
+import { AnyAction } from 'redux';
+
+import { staticClient } from '../api';
+
+const FETCH_ABOUT_PAGE_REQUEST = 'FETCH_ABOUT_PAGE_REQUEST';
+const FETCH_ABOUT_PAGE_SUCCESS = 'FETCH_ABOUT_PAGE_SUCCESS';
+const FETCH_ABOUT_PAGE_FAIL = 'FETCH_ABOUT_PAGE_FAIL';
+
+const fetchAboutPage = (slug = 'index', locale?: string) => (dispatch: React.Dispatch<AnyAction>, getState: any) => {
+  dispatch({ type: FETCH_ABOUT_PAGE_REQUEST, slug, locale });
+
+  const filename = `${slug}${locale ? `.${locale}` : ''}.html`;
+  return staticClient.get(`/instance/about/${filename}`)
+    .then(({ data: html }) => {
+      dispatch({ type: FETCH_ABOUT_PAGE_SUCCESS, slug, locale, html });
+      return html;
+    })
+    .catch(error => {
+      dispatch({ type: FETCH_ABOUT_PAGE_FAIL, slug, locale, error });
+      throw error;
+    });
+};
+
+export {
+  fetchAboutPage,
+  FETCH_ABOUT_PAGE_REQUEST,
+  FETCH_ABOUT_PAGE_SUCCESS,
+  FETCH_ABOUT_PAGE_FAIL,
+};

From afe670b8fc8878291b82620442652326ca0ae8f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 27 May 2022 19:13:44 +0200
Subject: [PATCH 062/102] Use BirthdayInput on Edit profile page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../{birthday_input.js => birthday_input.tsx} | 126 +++++++++---------
 .../components/registration_form.tsx          |  11 +-
 app/soapbox/features/edit_profile/index.tsx   |  10 +-
 3 files changed, 73 insertions(+), 74 deletions(-)
 rename app/soapbox/components/{birthday_input.js => birthday_input.tsx} (56%)

diff --git a/app/soapbox/components/birthday_input.js b/app/soapbox/components/birthday_input.tsx
similarity index 56%
rename from app/soapbox/components/birthday_input.js
rename to app/soapbox/components/birthday_input.tsx
index 912ba82fb..2b4e4833f 100644
--- a/app/soapbox/components/birthday_input.js
+++ b/app/soapbox/components/birthday_input.tsx
@@ -1,13 +1,10 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
+import React, { useMemo } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
 
 import IconButton from 'soapbox/components/icon_button';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { DatePicker } from 'soapbox/features/ui/util/async-components';
-import { getFeatures } from 'soapbox/utils/features';
+import { useAppSelector, useFeatures } from 'soapbox/hooks';
 
 const messages = defineMessages({
   birthdayPlaceholder: { id: 'edit_profile.fields.birthday_placeholder', defaultMessage: 'Your birthday' },
@@ -17,29 +14,37 @@ const messages = defineMessages({
   nextYear: { id: 'datepicker.next_year', defaultMessage: 'Next year' },
 });
 
-const mapStateToProps = state => {
-  const features = getFeatures(state.get('instance'));
+interface IBirthdayInput {
+  value?: string,
+  onChange: (value: string) => void,
+  required?: boolean,
+}
 
-  return {
-    supportsBirthdays: features.birthdays,
-    minAge: state.getIn(['instance', 'pleroma', 'metadata', 'birthday_min_age']),
-  };
-};
+const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required }) => {
+  const intl = useIntl();
+  const features = useFeatures();
 
-export default @connect(mapStateToProps)
-@injectIntl
-class BirthdayInput extends ImmutablePureComponent {
+  const supportsBirthdays = features.birthdays;
+  const minAge = useAppSelector((state) => state.instance.getIn(['pleroma', 'metadata', 'birthday_min_age'])) as number;
 
-  static propTypes = {
-    hint: PropTypes.node,
-    required: PropTypes.bool,
-    supportsBirthdays: PropTypes.bool,
-    minAge: PropTypes.number,
-    onChange: PropTypes.func.isRequired,
-    value: PropTypes.instanceOf(Date),
-  };
+  const maxDate = useMemo(() => {
+    if (!supportsBirthdays) return null;
 
-  renderHeader = ({
+    let maxDate = new Date();
+    maxDate = new Date(maxDate.getTime() - minAge * 1000 * 60 * 60 * 24 + maxDate.getTimezoneOffset() * 1000 * 60);
+    return maxDate;
+  }, [minAge]);
+
+  const selected = useMemo(() => {
+    if (!supportsBirthdays || !value) return null;
+
+    const date = new Date(value);
+    return new Date(date.getTime() + (date.getTimezoneOffset() * 60000));
+  }, [value]);
+
+  if (!supportsBirthdays) return null;
+
+  const renderCustomHeader = ({
     decreaseMonth,
     increaseMonth,
     prevMonthButtonDisabled,
@@ -49,12 +54,20 @@ class BirthdayInput extends ImmutablePureComponent {
     prevYearButtonDisabled,
     nextYearButtonDisabled,
     date,
+  }: {
+    decreaseMonth(): void,
+    increaseMonth(): void,
+    prevMonthButtonDisabled: boolean,
+    nextMonthButtonDisabled: boolean,
+    decreaseYear(): void,
+    increaseYear(): void,
+    prevYearButtonDisabled: boolean,
+    nextYearButtonDisabled: boolean,
+    date: Date,
   }) => {
-    const { intl } = this.props;
-
     return (
-      <div className='datepicker__header'>
-        <div className='datepicker__months'>
+      <div className='flex flex-col gap-2'>
+        <div className='flex items-center justify-between'>
           <IconButton
             className='datepicker__button'
             src={require('@tabler/icons/icons/chevron-left.svg')}
@@ -73,7 +86,7 @@ class BirthdayInput extends ImmutablePureComponent {
             title={intl.formatMessage(messages.nextMonth)}
           />
         </div>
-        <div className='datepicker__years'>
+        <div className='flex items-center justify-between'>
           <IconButton
             className='datepicker__button'
             src={require('@tabler/icons/icons/chevron-left.svg')}
@@ -94,39 +107,26 @@ class BirthdayInput extends ImmutablePureComponent {
         </div>
       </div>
     );
-  }
+  };
 
-  render() {
-    const { intl, value, onChange, supportsBirthdays, hint, required, minAge } = this.props;
+  const handleChange = (date: Date) => onChange(new Date(date.getTime() - (date.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
 
-    if (!supportsBirthdays) return null;
+  return (
+    <div className='mt-1 relative rounded-md shadow-sm'>
+      <BundleContainer fetchComponent={DatePicker}>
+        {Component => (<Component
+          selected={selected}
+          wrapperClassName='react-datepicker-wrapper'
+          onChange={handleChange}
+          placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
+          minDate={new Date('1900-01-01')}
+          maxDate={maxDate}
+          required={required}
+          renderCustomHeader={renderCustomHeader}
+        />)}
+      </BundleContainer>
+    </div>
+  );
+};
 
-    let maxDate = new Date();
-    maxDate = new Date(maxDate.getTime() - minAge * 1000 * 60 * 60 * 24 + maxDate.getTimezoneOffset() * 1000 * 60);
-
-    return (
-      <div className='datepicker'>
-        {hint && (
-          <div className='datepicker__hint'>
-            {hint}
-          </div>
-        )}
-        <div className='datepicker__input'>
-          <BundleContainer fetchComponent={DatePicker}>
-            {Component => (<Component
-              selected={value}
-              wrapperClassName='react-datepicker-wrapper'
-              onChange={onChange}
-              placeholderText={intl.formatMessage(messages.birthdayPlaceholder)}
-              minDate={new Date('1900-01-01')}
-              maxDate={maxDate}
-              required={required}
-              renderCustomHeader={this.renderHeader}
-            />)}
-          </BundleContainer>
-        </div>
-      </div>
-    );
-  }
-
-}
+export default BirthdayInput;
diff --git a/app/soapbox/features/auth_login/components/registration_form.tsx b/app/soapbox/features/auth_login/components/registration_form.tsx
index 22a7bbca9..0c3e048ce 100644
--- a/app/soapbox/features/auth_login/components/registration_form.tsx
+++ b/app/soapbox/features/auth_login/components/registration_form.tsx
@@ -58,7 +58,6 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
   const [usernameUnavailable, setUsernameUnavailable] = useState(false);
   const [passwordConfirmation, setPasswordConfirmation] = useState('');
   const [passwordMismatch, setPasswordMismatch] = useState(false);
-  const [birthday, setBirthday] = useState<Date | undefined>(undefined);
 
   const source = useRef(axios.CancelToken.source());
 
@@ -111,8 +110,8 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     setPasswordMismatch(!passwordsMatch());
   };
 
-  const onBirthdayChange = (newBirthday: Date) => {
-    setBirthday(newBirthday);
+  const onBirthdayChange = (birthday: string) => {
+    updateParams({ birthday });
   };
 
   const launchModal = () => {
@@ -187,10 +186,6 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
       if (inviteToken) {
         params.set('token', inviteToken);
       }
-
-      if (birthday) {
-        params.set('birthday', new Date(birthday.getTime() - (birthday.getTimezoneOffset() * 60000)).toISOString().slice(0, 10));
-      }
     });
 
     setSubmissionLoading(true);
@@ -291,7 +286,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
 
         {birthdayRequired && (
           <BirthdayInput
-            value={birthday}
+            value={params.get('birthday')}
             onChange={onBirthdayChange}
             required
           />
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index d7f60b572..788031852 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/app/soapbox/features/edit_profile/index.tsx
@@ -4,6 +4,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { updateNotificationSettings } from 'soapbox/actions/accounts';
 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 { useAppSelector, useAppDispatch, useOwnAccount, useFeatures } from 'soapbox/hooks';
 import { normalizeAccount } from 'soapbox/normalizers';
@@ -242,6 +243,10 @@ const EditProfile: React.FC = () => {
     };
   };
 
+  const handleBirthdayChange = (date: string) => {
+    updateData('birthday', date);
+  };
+
   const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     const hide = e.target.checked;
 
@@ -325,10 +330,9 @@ const EditProfile: React.FC = () => {
           <FormGroup
             labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
           >
-            <Input
-              type='text'
+            <BirthdayInput
               value={data.birthday}
-              onChange={handleTextChange('birthday')}
+              onChange={handleBirthdayChange}
             />
           </FormGroup>
         )}

From 8433ff70b07aef725dd004aed3bce8f01d4183d5 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 27 May 2022 14:08:41 -0400
Subject: [PATCH 063/102] Add tests for account-notes action

---
 .../actions/__tests__/account-notes.test.ts   | 106 ++++++++++++++++++
 app/soapbox/actions/account-notes.ts          |  82 ++++++++++++++
 app/soapbox/actions/account_notes.js          |  67 -----------
 app/soapbox/actions/modals.ts                 |   2 +-
 .../containers/header_container.js            |   2 +-
 .../ui/components/account_note_modal.js       |   2 +-
 app/soapbox/reducers/account_notes.ts         |   4 +-
 app/soapbox/reducers/relationships.js         |   2 +-
 8 files changed, 194 insertions(+), 73 deletions(-)
 create mode 100644 app/soapbox/actions/__tests__/account-notes.test.ts
 create mode 100644 app/soapbox/actions/account-notes.ts
 delete mode 100644 app/soapbox/actions/account_notes.js

diff --git a/app/soapbox/actions/__tests__/account-notes.test.ts b/app/soapbox/actions/__tests__/account-notes.test.ts
new file mode 100644
index 000000000..e173fd17f
--- /dev/null
+++ b/app/soapbox/actions/__tests__/account-notes.test.ts
@@ -0,0 +1,106 @@
+import { __stub } from 'soapbox/api';
+import { mockStore } from 'soapbox/jest/test-helpers';
+import rootReducer from 'soapbox/reducers';
+
+import { normalizeAccount } from '../../normalizers';
+import { changeAccountNoteComment, initAccountNoteModal, submitAccountNote } from '../account-notes';
+
+describe('submitAccountNote()', () => {
+  let store;
+
+  beforeEach(() => {
+    const state = rootReducer(undefined, {})
+      .set('account_notes', { edit: { account_id: 1, comment: 'hello' } });
+    store = mockStore(state);
+  });
+
+  describe('with a successful API request', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onPost('/api/v1/accounts/1/note').reply(200, {});
+      });
+    });
+
+    it('post the note to the API', async() => {
+      const expectedActions = [
+        { type: 'ACCOUNT_NOTE_SUBMIT_REQUEST' },
+        { type: 'MODAL_CLOSE', modalType: undefined },
+        { type: 'ACCOUNT_NOTE_SUBMIT_SUCCESS', relationship: {} },
+      ];
+      await store.dispatch(submitAccountNote());
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+
+  describe('with an unsuccessful API request', () => {
+    beforeEach(() => {
+      __stub((mock) => {
+        mock.onPost('/api/v1/accounts/1/note').networkError();
+      });
+    });
+
+    it('should dispatch failed action', async() => {
+      const expectedActions = [
+        { type: 'ACCOUNT_NOTE_SUBMIT_REQUEST' },
+        {
+          type: 'ACCOUNT_NOTE_SUBMIT_FAIL',
+          error: new Error('Network Error'),
+        },
+      ];
+      await store.dispatch(submitAccountNote());
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+});
+
+describe('initAccountNoteModal()', () => {
+  let store;
+
+  beforeEach(() => {
+    const state = rootReducer(undefined, {})
+      .set('relationships', { 1: { note: 'hello' } });
+    store = mockStore(state);
+  });
+
+  it('dispatches the proper actions', async() => {
+    const account = normalizeAccount({
+      id: '1',
+      acct: 'justin-username',
+      display_name: 'Justin L',
+      avatar: 'test.jpg',
+      verified: true,
+    });
+    const expectedActions = [
+      { type: 'ACCOUNT_NOTE_INIT_MODAL', account, comment: 'hello' },
+      { type: 'MODAL_OPEN', modalType: 'ACCOUNT_NOTE' },
+    ];
+    await store.dispatch(initAccountNoteModal(account));
+    const actions = store.getActions();
+
+    expect(actions).toEqual(expectedActions);
+  });
+});
+
+describe('changeAccountNoteComment()', () => {
+  let store;
+
+  beforeEach(() => {
+    const state = rootReducer(undefined, {});
+    store = mockStore(state);
+  });
+
+  it('dispatches the proper actions', async() => {
+    const comment = 'hello world';
+    const expectedActions = [
+      { type: 'ACCOUNT_NOTE_CHANGE_COMMENT', comment },
+    ];
+    await store.dispatch(changeAccountNoteComment(comment));
+    const actions = store.getActions();
+
+    expect(actions).toEqual(expectedActions);
+  });
+});
diff --git a/app/soapbox/actions/account-notes.ts b/app/soapbox/actions/account-notes.ts
new file mode 100644
index 000000000..bb1cc72ae
--- /dev/null
+++ b/app/soapbox/actions/account-notes.ts
@@ -0,0 +1,82 @@
+import { AxiosError } from 'axios';
+import { AnyAction } from 'redux';
+
+import api from '../api';
+
+import { openModal, closeModal } from './modals';
+
+import type { Account } from 'soapbox/types/entities';
+
+const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST';
+const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS';
+const ACCOUNT_NOTE_SUBMIT_FAIL = 'ACCOUNT_NOTE_SUBMIT_FAIL';
+
+const ACCOUNT_NOTE_INIT_MODAL = 'ACCOUNT_NOTE_INIT_MODAL';
+
+const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT';
+
+const submitAccountNote = () => (dispatch: React.Dispatch<AnyAction>, getState: any) => {
+  dispatch(submitAccountNoteRequest());
+
+  const id = getState().getIn(['account_notes', 'edit', 'account_id']);
+
+  return api(getState)
+    .post(`/api/v1/accounts/${id}/note`, {
+      comment: getState().getIn(['account_notes', 'edit', 'comment']),
+    })
+    .then(response => {
+      dispatch(closeModal());
+      dispatch(submitAccountNoteSuccess(response.data));
+    })
+    .catch(error => dispatch(submitAccountNoteFail(error)));
+};
+
+function submitAccountNoteRequest() {
+  return {
+    type: ACCOUNT_NOTE_SUBMIT_REQUEST,
+  };
+}
+
+function submitAccountNoteSuccess(relationship: any) {
+  return {
+    type: ACCOUNT_NOTE_SUBMIT_SUCCESS,
+    relationship,
+  };
+}
+
+function submitAccountNoteFail(error: AxiosError) {
+  return {
+    type: ACCOUNT_NOTE_SUBMIT_FAIL,
+    error,
+  };
+}
+
+const initAccountNoteModal = (account: Account) => (dispatch: React.Dispatch<AnyAction>, getState: any) => {
+  const comment = getState().getIn(['relationships', account.get('id'), 'note']);
+
+  dispatch({
+    type: ACCOUNT_NOTE_INIT_MODAL,
+    account,
+    comment,
+  });
+
+  dispatch(openModal('ACCOUNT_NOTE'));
+};
+
+function changeAccountNoteComment(comment: string) {
+  return {
+    type: ACCOUNT_NOTE_CHANGE_COMMENT,
+    comment,
+  };
+}
+
+export {
+  submitAccountNote,
+  initAccountNoteModal,
+  changeAccountNoteComment,
+  ACCOUNT_NOTE_SUBMIT_REQUEST,
+  ACCOUNT_NOTE_SUBMIT_SUCCESS,
+  ACCOUNT_NOTE_SUBMIT_FAIL,
+  ACCOUNT_NOTE_INIT_MODAL,
+  ACCOUNT_NOTE_CHANGE_COMMENT,
+};
diff --git a/app/soapbox/actions/account_notes.js b/app/soapbox/actions/account_notes.js
deleted file mode 100644
index d6aeefc49..000000000
--- a/app/soapbox/actions/account_notes.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import api from '../api';
-
-import { openModal, closeModal } from './modals';
-
-export const ACCOUNT_NOTE_SUBMIT_REQUEST = 'ACCOUNT_NOTE_SUBMIT_REQUEST';
-export const ACCOUNT_NOTE_SUBMIT_SUCCESS = 'ACCOUNT_NOTE_SUBMIT_SUCCESS';
-export const ACCOUNT_NOTE_SUBMIT_FAIL    = 'ACCOUNT_NOTE_SUBMIT_FAIL';
-
-export const ACCOUNT_NOTE_INIT_MODAL = 'ACCOUNT_NOTE_INIT_MODAL';
-
-export const ACCOUNT_NOTE_CHANGE_COMMENT = 'ACCOUNT_NOTE_CHANGE_COMMENT';
-
-export function submitAccountNote() {
-  return (dispatch, getState) => {
-    dispatch(submitAccountNoteRequest());
-
-    const id = getState().getIn(['account_notes', 'edit', 'account_id']);
-
-    api(getState).post(`/api/v1/accounts/${id}/note`, {
-      comment: getState().getIn(['account_notes', 'edit', 'comment']),
-    }).then(response => {
-      dispatch(closeModal());
-      dispatch(submitAccountNoteSuccess(response.data));
-    }).catch(error => dispatch(submitAccountNoteFail(error)));
-  };
-}
-
-export function submitAccountNoteRequest() {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_REQUEST,
-  };
-}
-
-export function submitAccountNoteSuccess(relationship) {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_SUCCESS,
-    relationship,
-  };
-}
-
-export function submitAccountNoteFail(error) {
-  return {
-    type: ACCOUNT_NOTE_SUBMIT_FAIL,
-    error,
-  };
-}
-
-export function initAccountNoteModal(account) {
-  return (dispatch, getState) => {
-    const comment = getState().getIn(['relationships', account.get('id'), 'note']);
-
-    dispatch({
-      type: ACCOUNT_NOTE_INIT_MODAL,
-      account,
-      comment,
-    });
-
-    dispatch(openModal('ACCOUNT_NOTE'));
-  };
-}
-
-export function changeAccountNoteComment(comment) {
-  return {
-    type: ACCOUNT_NOTE_CHANGE_COMMENT,
-    comment,
-  };
-}
\ No newline at end of file
diff --git a/app/soapbox/actions/modals.ts b/app/soapbox/actions/modals.ts
index 9d6e85139..3e1a106cf 100644
--- a/app/soapbox/actions/modals.ts
+++ b/app/soapbox/actions/modals.ts
@@ -11,7 +11,7 @@ export function openModal(type: string, props?: any) {
 }
 
 /** Close the modal */
-export function closeModal(type: string) {
+export function closeModal(type?: string) {
   return {
     type: MODAL_CLOSE,
     modalType: type,
diff --git a/app/soapbox/features/account_timeline/containers/header_container.js b/app/soapbox/features/account_timeline/containers/header_container.js
index baf0ccb17..0ffa9b81b 100644
--- a/app/soapbox/features/account_timeline/containers/header_container.js
+++ b/app/soapbox/features/account_timeline/containers/header_container.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { initAccountNoteModal } from 'soapbox/actions/account_notes';
+import { initAccountNoteModal } from 'soapbox/actions/account-notes';
 import {
   followAccount,
   unfollowAccount,
diff --git a/app/soapbox/features/ui/components/account_note_modal.js b/app/soapbox/features/ui/components/account_note_modal.js
index 2c7ed11ed..9242b7b8f 100644
--- a/app/soapbox/features/ui/components/account_note_modal.js
+++ b/app/soapbox/features/ui/components/account_note_modal.js
@@ -3,7 +3,7 @@ import React from 'react';
 import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
-import { changeAccountNoteComment, submitAccountNote } from 'soapbox/actions/account_notes';
+import { changeAccountNoteComment, submitAccountNote } from 'soapbox/actions/account-notes';
 import { closeModal } from 'soapbox/actions/modals';
 import { Modal, Text } from 'soapbox/components/ui';
 import { makeGetAccount } from 'soapbox/selectors';
diff --git a/app/soapbox/reducers/account_notes.ts b/app/soapbox/reducers/account_notes.ts
index 07d5cc89e..446b04ca9 100644
--- a/app/soapbox/reducers/account_notes.ts
+++ b/app/soapbox/reducers/account_notes.ts
@@ -7,7 +7,7 @@ import {
   ACCOUNT_NOTE_SUBMIT_REQUEST,
   ACCOUNT_NOTE_SUBMIT_FAIL,
   ACCOUNT_NOTE_SUBMIT_SUCCESS,
-} from '../actions/account_notes';
+} from '../actions/account-notes';
 
 const EditRecord = ImmutableRecord({
   isSubmitting: false,
@@ -39,4 +39,4 @@ export default function account_notes(state: State = ReducerRecord(), action: An
     default:
       return state;
   }
-}
\ No newline at end of file
+}
diff --git a/app/soapbox/reducers/relationships.js b/app/soapbox/reducers/relationships.js
index 80754842c..a846b8199 100644
--- a/app/soapbox/reducers/relationships.js
+++ b/app/soapbox/reducers/relationships.js
@@ -3,7 +3,7 @@ import { get } from 'lodash';
 
 import { STREAMING_FOLLOW_RELATIONSHIPS_UPDATE } from 'soapbox/actions/streaming';
 
-import { ACCOUNT_NOTE_SUBMIT_SUCCESS } from '../actions/account_notes';
+import { ACCOUNT_NOTE_SUBMIT_SUCCESS } from '../actions/account-notes';
 import {
   ACCOUNT_FOLLOW_SUCCESS,
   ACCOUNT_FOLLOW_REQUEST,

From 3972e16e439f03460b2a6fc68013a940ae69328a Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Fri, 27 May 2022 15:22:20 -0400
Subject: [PATCH 064/102] Add tests for alerts action

---
 app/soapbox/actions/__tests__/alerts.test.ts | 149 +++++++++++++++++++
 app/soapbox/actions/alerts.js                |  68 ---------
 app/soapbox/actions/alerts.ts                |  74 +++++++++
 app/soapbox/actions/snackbar.ts              |   2 +-
 4 files changed, 224 insertions(+), 69 deletions(-)
 create mode 100644 app/soapbox/actions/__tests__/alerts.test.ts
 delete mode 100644 app/soapbox/actions/alerts.js
 create mode 100644 app/soapbox/actions/alerts.ts

diff --git a/app/soapbox/actions/__tests__/alerts.test.ts b/app/soapbox/actions/__tests__/alerts.test.ts
new file mode 100644
index 000000000..f2419893a
--- /dev/null
+++ b/app/soapbox/actions/__tests__/alerts.test.ts
@@ -0,0 +1,149 @@
+import { AxiosError } from 'axios';
+
+import { mockStore } from 'soapbox/jest/test-helpers';
+import rootReducer from 'soapbox/reducers';
+
+import { dismissAlert, showAlert, showAlertForError } from '../alerts';
+
+const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), null, null, {
+  data: {
+    error: message,
+  },
+  statusText: String(status),
+  status,
+  headers: {},
+  config: {},
+});
+
+let store;
+
+beforeEach(() => {
+  const state = rootReducer(undefined, {});
+  store = mockStore(state);
+});
+
+describe('dismissAlert()', () => {
+  it('dispatches the proper actions', async() => {
+    const alert = 'hello world';
+    const expectedActions = [
+      { type: 'ALERT_DISMISS', alert },
+    ];
+    await store.dispatch(dismissAlert(alert));
+    const actions = store.getActions();
+
+    expect(actions).toEqual(expectedActions);
+  });
+});
+
+describe('showAlert()', () => {
+  it('dispatches the proper actions', async() => {
+    const title = 'title';
+    const message = 'msg';
+    const severity = 'info';
+    const expectedActions = [
+      { type: 'ALERT_SHOW', title, message, severity },
+    ];
+    await store.dispatch(showAlert(title, message, severity));
+    const actions = store.getActions();
+
+    expect(actions).toEqual(expectedActions);
+  });
+});
+
+describe('showAlert()', () => {
+  describe('with a 502 status code', () => {
+    it('dispatches the proper actions', async() => {
+      const message = 'The server is down';
+      const error = buildError(message, 502);
+
+      const expectedActions = [
+        { type: 'ALERT_SHOW', title: '', message, severity: 'error' },
+      ];
+      await store.dispatch(showAlertForError(error));
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+
+  describe('with a 404 status code', () => {
+    it('dispatches the proper actions', async() => {
+      const error = buildError('', 404);
+
+      const expectedActions = [];
+      await store.dispatch(showAlertForError(error));
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+
+  describe('with a 410 status code', () => {
+    it('dispatches the proper actions', async() => {
+      const error = buildError('', 410);
+
+      const expectedActions = [];
+      await store.dispatch(showAlertForError(error));
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+
+  describe('with an accepted status code', () => {
+    describe('with a message from the server', () => {
+      it('dispatches the proper actions', async() => {
+        const message = 'custom message';
+        const error = buildError(message, 200);
+
+        const expectedActions = [
+          { type: 'ALERT_SHOW', title: '', message, severity: 'error' },
+        ];
+        await store.dispatch(showAlertForError(error));
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+
+    describe('without a message from the server', () => {
+      it('dispatches the proper actions', async() => {
+        const message = 'The request has been accepted for processing';
+        const error = buildError(message, 202);
+
+        const expectedActions = [
+          { type: 'ALERT_SHOW', title: '', message, severity: 'error' },
+        ];
+        await store.dispatch(showAlertForError(error));
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+  });
+
+  describe('without a response', () => {
+    it('dispatches the proper actions', async() => {
+      const error = new AxiosError();
+
+      const expectedActions = [
+        {
+          type: 'ALERT_SHOW',
+          title: {
+            defaultMessage: 'Oops!',
+            id: 'alert.unexpected.title',
+          },
+          message: {
+            defaultMessage: 'An unexpected error occurred.',
+            id: 'alert.unexpected.message',
+          },
+          severity: 'error',
+        },
+      ];
+      await store.dispatch(showAlertForError(error));
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+});
diff --git a/app/soapbox/actions/alerts.js b/app/soapbox/actions/alerts.js
deleted file mode 100644
index c71ce3e87..000000000
--- a/app/soapbox/actions/alerts.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { defineMessages } from 'react-intl';
-
-import { httpErrorMessages } from 'soapbox/utils/errors';
-
-const messages = defineMessages({
-  unexpectedTitle: { id: 'alert.unexpected.title', defaultMessage: 'Oops!' },
-  unexpectedMessage: { id: 'alert.unexpected.message', defaultMessage: 'An unexpected error occurred.' },
-});
-
-export const ALERT_SHOW    = 'ALERT_SHOW';
-export const ALERT_DISMISS = 'ALERT_DISMISS';
-export const ALERT_CLEAR   = 'ALERT_CLEAR';
-
-const noOp = () => {};
-
-export function dismissAlert(alert) {
-  return {
-    type: ALERT_DISMISS,
-    alert,
-  };
-}
-
-export function clearAlert() {
-  return {
-    type: ALERT_CLEAR,
-  };
-}
-
-export function showAlert(title = messages.unexpectedTitle, message = messages.unexpectedMessage, severity = 'info') {
-  return {
-    type: ALERT_SHOW,
-    title,
-    message,
-    severity,
-  };
-}
-
-export function showAlertForError(error) {
-  return (dispatch, _getState) => {
-    if (error.response) {
-      const { data, status, statusText } = error.response;
-
-      if (status === 502) {
-        return dispatch(showAlert('', 'The server is down', 'error'));
-      }
-
-      if (status === 404 || status === 410) {
-        // Skip these errors as they are reflected in the UI
-        return dispatch(noOp);
-      }
-
-      let message = statusText;
-
-      if (data.error) {
-        message = data.error;
-      }
-
-      if (!message) {
-        message = httpErrorMessages.find((httpError) => httpError.code === status)?.description;
-      }
-
-      return dispatch(showAlert('', message, 'error'));
-    } else {
-      console.error(error);
-      return dispatch(showAlert(undefined, undefined, 'error'));
-    }
-  };
-}
diff --git a/app/soapbox/actions/alerts.ts b/app/soapbox/actions/alerts.ts
new file mode 100644
index 000000000..b0af2af35
--- /dev/null
+++ b/app/soapbox/actions/alerts.ts
@@ -0,0 +1,74 @@
+import { AnyAction } from '@reduxjs/toolkit';
+import { AxiosError } from 'axios';
+import { defineMessages, MessageDescriptor } from 'react-intl';
+
+import { httpErrorMessages } from 'soapbox/utils/errors';
+
+import { SnackbarActionSeverity } from './snackbar';
+
+const messages = defineMessages({
+  unexpectedTitle: { id: 'alert.unexpected.title', defaultMessage: 'Oops!' },
+  unexpectedMessage: { id: 'alert.unexpected.message', defaultMessage: 'An unexpected error occurred.' },
+});
+
+export const ALERT_SHOW = 'ALERT_SHOW';
+export const ALERT_DISMISS = 'ALERT_DISMISS';
+export const ALERT_CLEAR = 'ALERT_CLEAR';
+
+const noOp = () => { };
+
+function dismissAlert(alert: any) {
+  return {
+    type: ALERT_DISMISS,
+    alert,
+  };
+}
+
+function showAlert(
+  title: MessageDescriptor | string = messages.unexpectedTitle,
+  message: MessageDescriptor | string = messages.unexpectedMessage,
+  severity: SnackbarActionSeverity = 'info',
+) {
+  return {
+    type: ALERT_SHOW,
+    title,
+    message,
+    severity,
+  };
+}
+
+const showAlertForError = (error: AxiosError<any>) => (dispatch: React.Dispatch<AnyAction>, _getState: any) => {
+  if (error.response) {
+    const { data, status, statusText } = error.response;
+
+    if (status === 502) {
+      return dispatch(showAlert('', 'The server is down', 'error'));
+    }
+
+    if (status === 404 || status === 410) {
+      // Skip these errors as they are reflected in the UI
+      return dispatch(noOp as any);
+    }
+
+    let message: string | undefined = statusText;
+
+    if (data.error) {
+      message = data.error;
+    }
+
+    if (!message) {
+      message = httpErrorMessages.find((httpError) => httpError.code === status)?.description;
+    }
+
+    return dispatch(showAlert('', message, 'error'));
+  } else {
+    console.error(error);
+    return dispatch(showAlert(undefined, undefined, 'error'));
+  }
+};
+
+export {
+  dismissAlert,
+  showAlert,
+  showAlertForError,
+};
diff --git a/app/soapbox/actions/snackbar.ts b/app/soapbox/actions/snackbar.ts
index d1cda0d94..d4238cf33 100644
--- a/app/soapbox/actions/snackbar.ts
+++ b/app/soapbox/actions/snackbar.ts
@@ -2,7 +2,7 @@ import { ALERT_SHOW } from './alerts';
 
 import type { MessageDescriptor } from 'react-intl';
 
-type SnackbarActionSeverity = 'info' | 'success' | 'error'
+export type SnackbarActionSeverity = 'info' | 'success' | 'error'
 
 type SnackbarMessage = string | MessageDescriptor
 

From c1227079acd625dac6c7fa1698cde89852441b2a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 27 May 2022 20:14:41 -0400
Subject: [PATCH 065/102] Chats: fix unread counter

---
 app/soapbox/features/chats/components/chat_panes.js  | 8 ++++++--
 app/soapbox/features/chats/components/chat_window.js | 8 ++++----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/app/soapbox/features/chats/components/chat_panes.js b/app/soapbox/features/chats/components/chat_panes.js
index 900873e64..8aab35825 100644
--- a/app/soapbox/features/chats/components/chat_panes.js
+++ b/app/soapbox/features/chats/components/chat_panes.js
@@ -12,8 +12,8 @@ import { createSelector } from 'reselect';
 import { openChat, launchChat, toggleMainWindow } from 'soapbox/actions/chats';
 import { getSettings } from 'soapbox/actions/settings';
 import AccountSearch from 'soapbox/components/account_search';
+import { Counter } from 'soapbox/components/ui';
 import AudioToggle from 'soapbox/features/chats/components/audio_toggle';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 import ChatList from './chat_list';
 import ChatWindow from './chat_window';
@@ -83,7 +83,11 @@ class ChatPanes extends ImmutablePureComponent {
     const mainWindowPane = (
       <div className={`pane pane--main pane--${mainWindowState}`}>
         <div className='pane__header'>
-          {unreadCount > 0 && <i className='icon-with-badge__badge'>{shortNumberFormat(unreadCount)}</i>}
+          {unreadCount > 0 && (
+            <div className='mr-2 flex-none'>
+              <Counter count={unreadCount} />
+            </div>
+          )}
           <button className='pane__title' onClick={this.handleMainWindowToggle}>
             <FormattedMessage id='chat_panels.main_window.title' defaultMessage='Chats' />
           </button>
diff --git a/app/soapbox/features/chats/components/chat_window.js b/app/soapbox/features/chats/components/chat_window.js
index 4d811fe15..e525e3432 100644
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@@ -13,9 +13,9 @@ import {
 import Avatar from 'soapbox/components/avatar';
 import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
 import IconButton from 'soapbox/components/icon_button';
+import { Counter } from 'soapbox/components/ui';
 import { makeGetChat } from 'soapbox/selectors';
 import { getAcct } from 'soapbox/utils/accounts';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
 import { displayFqn } from 'soapbox/utils/state';
 
 import ChatBox from './chat_box';
@@ -98,9 +98,9 @@ class ChatWindow extends ImmutablePureComponent {
     const unreadCount = chat.get('unread');
 
     const unreadIcon = (
-      <i className='icon-with-badge__badge'>
-        {shortNumberFormat(unreadCount)}
-      </i>
+      <div className='mr-2 flex-none'>
+        <Counter count={unreadCount} />
+      </div>
     );
 
     const avatar = (

From 139cd8f719d518574feeabe030bf6606f901b2ac Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 27 May 2022 20:22:56 -0400
Subject: [PATCH 066/102] Chats: fix audio toggle styles

---
 app/styles/chats.scss | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index f41aaf4e9..ba712010b 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -104,25 +104,20 @@
   }
 
   .audio-toggle .react-toggle-thumb {
-    height: 14px;
-    width: 14px;
-    border: 1px solid var(--brand-color--med);
+    @apply w-3.5 h-3.5 border border-solid border-primary-400;
   }
 
   .audio-toggle .react-toggle {
-    height: 16px;
-    top: 4px;
+    @apply top-1;
   }
 
   .audio-toggle .react-toggle-track {
-    height: 16px;
-    width: 34px;
-    background-color: var(--accent-color);
+    @apply h-4 w-8 bg-accent-500;
   }
 
   .audio-toggle .react-toggle-track-check {
-    left: 2px;
-    bottom: 5px;
+    left: 4px;
+    bottom: 0;
   }
 
   .react-toggle--checked .react-toggle-thumb {
@@ -130,8 +125,8 @@
   }
 
   .audio-toggle .react-toggle-track-x {
-    right: 8px;
-    bottom: 5px;
+    right: 5px;
+    bottom: 0;
   }
 
   .fa {

From 973492d96fe410830633b135cb47f726a9056301 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 27 May 2022 20:50:51 -0400
Subject: [PATCH 067/102] Improve very long title on homepage

---
 app/soapbox/features/landing_page/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 9deec98cb..26f41f086 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -73,9 +73,9 @@ const LandingPage = () => {
       <div className='mx-auto max-w-7xl'>
         <div className='grid grid-cols-1 lg:grid-cols-12 gap-8 py-12'>
           <div className='px-4 sm:px-6 sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left lg:flex'>
-            <div>
+            <div className='w-full'>
               <Stack space={3}>
-                <h1 className='text-5xl font-extrabold text-transparent bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
+                <h1 className='text-5xl font-extrabold text-transparent text-ellipsis overflow-hidden bg-clip-text bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
                   {instance.title}
                 </h1>
 

From 1e74c6d3d758b1734c9b6298f7cf88d8062e8961 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 28 May 2022 18:02:04 +0200
Subject: [PATCH 068/102] TypeScript, FC, styles and fixes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/remote_timeline.js        |   4 +-
 app/soapbox/components/avatar_overlay.js      |  24 ----
 app/soapbox/components/avatar_overlay.tsx     |  19 +++
 app/soapbox/components/icon_button.js         |   6 +-
 app/soapbox/components/load_gap.js            |  35 -----
 app/soapbox/components/load_gap.tsx           |  28 ++++
 app/soapbox/components/pull-to-refresh.tsx    |   4 +-
 app/soapbox/components/pullable.js            |  30 ----
 app/soapbox/components/pullable.tsx           |  24 ++++
 app/soapbox/components/radio_button.js        |  35 -----
 app/soapbox/components/radio_button.tsx       |  28 ++++
 app/soapbox/components/site-logo.tsx          |   8 +-
 .../components/status-reply-mentions.tsx      |  75 ++++++++++
 app/soapbox/components/status.tsx             |  11 +-
 .../components/status_reply_mentions.js       |  89 ------------
 app/soapbox/components/ui/widget/widget.tsx   |   6 +-
 .../features/auth_token_list/index.tsx        |   3 +-
 .../features/compose/components/poll_form.js  |   5 +-
 .../components/instance_restrictions.js       | 107 ++++++--------
 .../follow_recommendations_list.tsx           |   3 +-
 app/soapbox/features/list_timeline/index.tsx  |   3 +-
 app/soapbox/features/lists/index.tsx          |   3 +-
 .../components/pinned_hosts_picker.tsx        |  16 ++-
 .../features/remote_timeline/index.tsx        |  19 +--
 .../components/scheduled_status.tsx           |   2 +-
 .../features/scheduled_statuses/index.tsx     |   3 +-
 .../components/site-preview.tsx               |   4 +-
 .../status/components/detailed-status.tsx     |  10 +-
 app/soapbox/features/status/index.tsx         |  10 +-
 .../features/ui/components/component_modal.js |  26 ----
 .../ui/components/component_modal.tsx         |  19 +++
 .../ui/components/edit_federation_modal.tsx   | 125 ++++++++++------
 .../ui/components/favourites_modal.js         |  76 ----------
 .../ui/components/favourites_modal.tsx        |  62 ++++++++
 .../ui/components/instance_info_panel.tsx     |  32 ++---
 .../components/instance_moderation_panel.tsx  |  25 ++--
 .../features/ui/components/mentions_modal.js  |  83 -----------
 .../features/ui/components/mentions_modal.tsx |  64 +++++++++
 .../{modal_loading.js => modal_loading.tsx}   |   0
 .../features/ui/components/pending_status.js  |  95 ------------
 .../features/ui/components/pending_status.tsx |  97 +++++++++++++
 .../ui/components/pinned_accounts_panel.js    |  79 ----------
 .../ui/components/pinned_accounts_panel.tsx   |  50 +++++++
 .../components/profile_familiar_followers.tsx |   3 +-
 .../ui/components/reactions_modal.tsx         |  13 +-
 .../features/ui/components/reblogs_modal.js   |  95 ------------
 .../features/ui/components/reblogs_modal.tsx  |  64 +++++++++
 .../features/ui/components/user_panel.js      | 136 ------------------
 .../features/ui/components/user_panel.tsx     | 119 +++++++++++++++
 ...s_builder.js => pending_status_builder.ts} |  18 +--
 app/styles/components/columns.scss            |  17 ---
 app/styles/components/dropdown-menu.scss      |   2 +-
 app/styles/polls.scss                         |  16 ---
 53 files changed, 875 insertions(+), 1055 deletions(-)
 delete mode 100644 app/soapbox/components/avatar_overlay.js
 create mode 100644 app/soapbox/components/avatar_overlay.tsx
 delete mode 100644 app/soapbox/components/load_gap.js
 create mode 100644 app/soapbox/components/load_gap.tsx
 delete mode 100644 app/soapbox/components/pullable.js
 create mode 100644 app/soapbox/components/pullable.tsx
 delete mode 100644 app/soapbox/components/radio_button.js
 create mode 100644 app/soapbox/components/radio_button.tsx
 create mode 100644 app/soapbox/components/status-reply-mentions.tsx
 delete mode 100644 app/soapbox/components/status_reply_mentions.js
 delete mode 100644 app/soapbox/features/ui/components/component_modal.js
 create mode 100644 app/soapbox/features/ui/components/component_modal.tsx
 delete mode 100644 app/soapbox/features/ui/components/favourites_modal.js
 create mode 100644 app/soapbox/features/ui/components/favourites_modal.tsx
 delete mode 100644 app/soapbox/features/ui/components/mentions_modal.js
 create mode 100644 app/soapbox/features/ui/components/mentions_modal.tsx
 rename app/soapbox/features/ui/components/{modal_loading.js => modal_loading.tsx} (100%)
 delete mode 100644 app/soapbox/features/ui/components/pending_status.js
 create mode 100644 app/soapbox/features/ui/components/pending_status.tsx
 delete mode 100644 app/soapbox/features/ui/components/pinned_accounts_panel.js
 create mode 100644 app/soapbox/features/ui/components/pinned_accounts_panel.tsx
 delete mode 100644 app/soapbox/features/ui/components/reblogs_modal.js
 create mode 100644 app/soapbox/features/ui/components/reblogs_modal.tsx
 delete mode 100644 app/soapbox/features/ui/components/user_panel.js
 create mode 100644 app/soapbox/features/ui/components/user_panel.tsx
 rename app/soapbox/features/ui/util/{pending_status_builder.js => pending_status_builder.ts} (66%)

diff --git a/app/soapbox/actions/remote_timeline.js b/app/soapbox/actions/remote_timeline.js
index 38249c009..8238c3326 100644
--- a/app/soapbox/actions/remote_timeline.js
+++ b/app/soapbox/actions/remote_timeline.js
@@ -10,7 +10,7 @@ export function pinHost(host) {
     const state = getState();
     const pinnedHosts = getPinnedHosts(state);
 
-    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.add(host)));
+    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.push(host)));
   };
 }
 
@@ -19,6 +19,6 @@ export function unpinHost(host) {
     const state = getState();
     const pinnedHosts = getPinnedHosts(state);
 
-    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.delete(host)));
+    return dispatch(changeSetting(['remote_timeline', 'pinnedHosts'], pinnedHosts.filter((value) => value !== host)));
   };
 }
diff --git a/app/soapbox/components/avatar_overlay.js b/app/soapbox/components/avatar_overlay.js
deleted file mode 100644
index ce9784c95..000000000
--- a/app/soapbox/components/avatar_overlay.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-
-import StillImage from 'soapbox/components/still_image';
-
-export default class AvatarOverlay extends React.PureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record.isRequired,
-    friend: ImmutablePropTypes.map.isRequired,
-  };
-
-  render() {
-    const { account, friend } = this.props;
-
-    return (
-      <div className='account__avatar-overlay'>
-        <StillImage src={account.get('avatar')} className='account__avatar-overlay-base' />
-        <StillImage src={friend.get('avatar')} className='account__avatar-overlay-overlay' />
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/avatar_overlay.tsx b/app/soapbox/components/avatar_overlay.tsx
new file mode 100644
index 000000000..ae38b5e4c
--- /dev/null
+++ b/app/soapbox/components/avatar_overlay.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import StillImage from 'soapbox/components/still_image';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+interface IAvatarOverlay {
+  account: AccountEntity,
+  friend: AccountEntity,
+}
+
+const AvatarOverlay: React.FC<IAvatarOverlay> = ({ account, friend }) => (
+  <div className='account__avatar-overlay'>
+    <StillImage src={account.avatar} className='account__avatar-overlay-base' />
+    <StillImage src={friend.avatar} className='account__avatar-overlay-overlay' />
+  </div>
+);
+
+export default AvatarOverlay;
diff --git a/app/soapbox/components/icon_button.js b/app/soapbox/components/icon_button.js
index fa5ec1782..b6ed8b3d4 100644
--- a/app/soapbox/components/icon_button.js
+++ b/app/soapbox/components/icon_button.js
@@ -12,6 +12,7 @@ export default class IconButton extends React.PureComponent {
 
   static propTypes = {
     className: PropTypes.string,
+    iconClassName: PropTypes.string,
     title: PropTypes.string.isRequired,
     icon: PropTypes.string,
     src: PropTypes.string,
@@ -99,6 +100,7 @@ export default class IconButton extends React.PureComponent {
       active,
       animate,
       className,
+      iconClassName,
       disabled,
       expanded,
       icon,
@@ -144,7 +146,7 @@ export default class IconButton extends React.PureComponent {
           <div style={src ? {} : style}>
             {emoji
               ? <div className='icon-button__emoji' dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-              : <Icon id={icon} src={src} fixedWidth aria-hidden='true' />}
+              : <Icon className={iconClassName} id={icon} src={src} fixedWidth aria-hidden='true' />}
           </div>
           {text && <span className='icon-button__text'>{text}</span>}
         </button>
@@ -174,7 +176,7 @@ export default class IconButton extends React.PureComponent {
             <div style={src ? {} : style}>
               {emoji
                 ? <div className='icon-button__emoji' style={{ transform: `rotate(${rotate}deg)` }} dangerouslySetInnerHTML={{ __html: emojify(emoji) }} aria-hidden='true' />
-                : <Icon id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
+                : <Icon className={iconClassName} id={icon} src={src} style={{ transform: `rotate(${rotate}deg)` }} fixedWidth aria-hidden='true' />}
             </div>
             {text && <span className='icon-button__text'>{text}</span>}
           </button>
diff --git a/app/soapbox/components/load_gap.js b/app/soapbox/components/load_gap.js
deleted file mode 100644
index 84eeec000..000000000
--- a/app/soapbox/components/load_gap.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectIntl, defineMessages } from 'react-intl';
-
-import Icon from 'soapbox/components/icon';
-
-const messages = defineMessages({
-  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
-});
-
-export default @injectIntl
-class LoadGap extends React.PureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    maxId: PropTypes.string,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick(this.props.maxId);
-  }
-
-  render() {
-    const { disabled, intl } = this.props;
-
-    return (
-      <button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-        <Icon id='ellipsis-h' />
-      </button>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/load_gap.tsx b/app/soapbox/components/load_gap.tsx
new file mode 100644
index 000000000..b784c871d
--- /dev/null
+++ b/app/soapbox/components/load_gap.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import Icon from 'soapbox/components/icon';
+
+const messages = defineMessages({
+  load_more: { id: 'status.load_more', defaultMessage: 'Load more' },
+});
+
+interface ILoadGap {
+  disabled?: boolean,
+  maxId: string,
+  onClick: (id: string) => void,
+}
+
+const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
+  const intl = useIntl();
+
+  const handleClick = () => onClick(maxId);
+
+  return (
+    <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
+      <Icon id='ellipsis-h' />
+    </button>
+  );
+};
+
+export default LoadGap;
diff --git a/app/soapbox/components/pull-to-refresh.tsx b/app/soapbox/components/pull-to-refresh.tsx
index 6ef199f3c..7596fabea 100644
--- a/app/soapbox/components/pull-to-refresh.tsx
+++ b/app/soapbox/components/pull-to-refresh.tsx
@@ -4,7 +4,9 @@ import PTRComponent from 'react-simple-pull-to-refresh';
 import { Spinner } from 'soapbox/components/ui';
 
 interface IPullToRefresh {
-  onRefresh?: () => Promise<any>
+  onRefresh?: () => Promise<any>;
+  refreshingContent?: JSX.Element | string;
+  pullingContent?: JSX.Element | string;
 }
 
 /**
diff --git a/app/soapbox/components/pullable.js b/app/soapbox/components/pullable.js
deleted file mode 100644
index 0f7546a9c..000000000
--- a/app/soapbox/components/pullable.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import PullToRefresh from './pull-to-refresh';
-
-/**
- * Pullable:
- * Basic "pull to refresh" without the refresh.
- * Just visual feedback.
- */
-export default class Pullable extends React.Component {
-
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-  }
-
-  render() {
-    const { children } = this.props;
-
-    return (
-      <PullToRefresh
-        pullingContent={null}
-        refreshingContent={null}
-      >
-        {children}
-      </PullToRefresh>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/pullable.tsx b/app/soapbox/components/pullable.tsx
new file mode 100644
index 000000000..0304a1d46
--- /dev/null
+++ b/app/soapbox/components/pullable.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+import PullToRefresh from './pull-to-refresh';
+
+interface IPullable {
+  children: JSX.Element,
+}
+
+/**
+ * Pullable:
+ * Basic "pull to refresh" without the refresh.
+ * Just visual feedback.
+ */
+const Pullable: React.FC<IPullable> = ({ children }) =>(
+  <PullToRefresh
+    pullingContent={undefined}
+    // @ts-ignore
+    refreshingContent={null}
+  >
+    {children}
+  </PullToRefresh>
+);
+
+export default Pullable;
diff --git a/app/soapbox/components/radio_button.js b/app/soapbox/components/radio_button.js
deleted file mode 100644
index 0f82af95f..000000000
--- a/app/soapbox/components/radio_button.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-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>
-    );
-  }
-
-}
\ No newline at end of file
diff --git a/app/soapbox/components/radio_button.tsx b/app/soapbox/components/radio_button.tsx
new file mode 100644
index 000000000..c3f87ce02
--- /dev/null
+++ b/app/soapbox/components/radio_button.tsx
@@ -0,0 +1,28 @@
+import classNames from 'classnames';
+import React from 'react';
+
+interface IRadioButton {
+  value: string,
+  checked?: boolean,
+  name: string,
+  onChange: React.ChangeEventHandler<HTMLInputElement>,
+  label: JSX.Element,
+}
+
+const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, label }) => (
+  <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>
+);
+
+export default RadioButton;
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 81f9ed417..01bfc54ed 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -6,16 +6,20 @@ import { useSoapboxConfig, useSettings, useSystemTheme } from 'soapbox/hooks';
 interface ISiteLogo extends React.ComponentProps<'img'> {
   /** Extra class names for the <img> element. */
   className?: string,
+  /** Override theme setting for <SitePreview /> */
+  theme?: 'dark' | 'light',
 }
 
 /** Display the most appropriate site logo based on the theme and configuration. */
-const SiteLogo: React.FC<ISiteLogo> = ({ className, ...rest }) => {
+const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   const { logo, logoDarkMode } = useSoapboxConfig();
   const settings = useSettings();
 
   const systemTheme = useSystemTheme();
   const userTheme = settings.get('themeMode');
-  const darkMode = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
+  const darkMode = theme
+    ? theme === 'dark'
+    : (userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark'));
 
   /** Soapbox logo. */
   const soapboxLogo = darkMode
diff --git a/app/soapbox/components/status-reply-mentions.tsx b/app/soapbox/components/status-reply-mentions.tsx
new file mode 100644
index 000000000..955924acc
--- /dev/null
+++ b/app/soapbox/components/status-reply-mentions.tsx
@@ -0,0 +1,75 @@
+import { List as ImmutableList } from 'immutable';
+import React from 'react';
+import { FormattedList, FormattedMessage } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import { openModal } from 'soapbox/actions/modals';
+import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { Status } from 'soapbox/types/entities';
+
+interface IStatusReplyMentions {
+  status: Status,
+}
+
+const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status }) => {
+  const dispatch = useAppDispatch();
+
+  const handleOpenMentionsModal: React.MouseEventHandler<HTMLSpanElement> = (e) => {
+    e.stopPropagation();
+
+    dispatch(openModal('MENTIONS', {
+      username: status.getIn(['account', 'acct']),
+      statusId: status.get('id'),
+    }));
+  };
+
+  if (!status.get('in_reply_to_id')) {
+    return null;
+  }
+
+  const to = status.get('mentions', ImmutableList());
+
+  // The post is a reply, but it has no mentions.
+  // Rare, but it can happen.
+  if (to.size === 0) {
+    return (
+      <div className='reply-mentions'>
+        <FormattedMessage
+          id='reply_mentions.reply_empty'
+          defaultMessage='Replying to post'
+        />
+      </div>
+    );
+  }
+
+  // The typical case with a reply-to and a list of mentions.
+  const accounts = to.slice(0, 2).map(account => (
+    <HoverRefWrapper accountId={account.get('id')} inline>
+      <Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('username')}</Link>
+    </HoverRefWrapper>
+  )).toArray();
+
+  if (to.size > 2) {
+    accounts.push(
+      <span className='hover:underline cursor-pointer' role='presentation' onClick={handleOpenMentionsModal}>
+        <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
+      </span>,
+    );
+  }
+
+  return (
+    <div className='reply-mentions'>
+      <FormattedMessage
+        id='reply_mentions.reply'
+        defaultMessage='Replying to {accounts}'
+        values={{
+          accounts: <FormattedList type='conjunction' value={accounts} />,
+        }}
+      />
+    </div>
+  );
+};
+
+export default StatusReplyMentions;
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 141394420..3cea7c280 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -6,18 +6,17 @@ import { injectIntl, FormattedMessage, IntlShape, defineMessages } from 'react-i
 import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
+import AccountContainer from 'soapbox/containers/account_container';
 import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
+import Card from 'soapbox/features/status/components/card';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
-
-import AccountContainer from '../containers/account_container';
-import Card from '../features/status/components/card';
-import Bundle from '../features/ui/components/bundle';
-import { MediaGallery, Video, Audio } from '../features/ui/util/async-components';
+import Bundle from 'soapbox/features/ui/components/bundle';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
 
 import AttachmentThumbs from './attachment-thumbs';
+import StatusReplyMentions from './status-reply-mentions';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
-import StatusReplyMentions from './status_reply_mentions';
 import { HStack, Text } from './ui';
 
 import type { History } from 'history';
diff --git a/app/soapbox/components/status_reply_mentions.js b/app/soapbox/components/status_reply_mentions.js
deleted file mode 100644
index 0809d6085..000000000
--- a/app/soapbox/components/status_reply_mentions.js
+++ /dev/null
@@ -1,89 +0,0 @@
-import { List as ImmutableList } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedList, FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import { openModal } from 'soapbox/actions/modals';
-import HoverRefWrapper from 'soapbox/components/hover_ref_wrapper';
-
-const mapDispatchToProps = (dispatch) => ({
-  onOpenMentionsModal(username, statusId) {
-    dispatch(openModal('MENTIONS', {
-      username,
-      statusId,
-    }));
-  },
-});
-
-export default @connect(null, mapDispatchToProps)
-@injectIntl
-class StatusReplyMentions extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.record.isRequired,
-    onOpenMentionsModal: PropTypes.func,
-  }
-
-  handleOpenMentionsModal = (e) => {
-    const { status, onOpenMentionsModal } = this.props;
-
-    e.stopPropagation();
-
-    onOpenMentionsModal(status.getIn(['account', 'acct']), status.get('id'));
-  }
-
-  render() {
-    const { status } = this.props;
-
-    if (!status.get('in_reply_to_id')) {
-      return null;
-    }
-
-    const to = status.get('mentions', ImmutableList());
-
-    // The post is a reply, but it has no mentions.
-    // Rare, but it can happen.
-    if (to.size === 0) {
-      return (
-        <div className='reply-mentions'>
-          <FormattedMessage
-            id='reply_mentions.reply_empty'
-            defaultMessage='Replying to post'
-          />
-        </div>
-      );
-    }
-
-    // The typical case with a reply-to and a list of mentions.
-    const accounts = to.slice(0, 2).map(account => (
-      <HoverRefWrapper accountId={account.get('id')} inline>
-        <Link to={`/@${account.get('acct')}`} className='reply-mentions__account'>@{account.get('username')}</Link>
-      </HoverRefWrapper>
-    )).toArray();
-
-    if (to.size > 2) {
-      accounts.push(
-        <span className='hover:underline cursor-pointer' role='presentation' onClick={this.handleOpenMentionsModal}>
-          <FormattedMessage id='reply_mentions.more' defaultMessage='{count} more' values={{ count: to.size - 2 }} />
-        </span>,
-      );
-    }
-
-    return (
-      <div className='reply-mentions'>
-        <FormattedMessage
-          id='reply_mentions.reply'
-          defaultMessage='Replying to {accounts}'
-          values={{
-            accounts: <FormattedList type='conjunction' value={accounts} />,
-          }}
-        />
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/ui/widget/widget.tsx b/app/soapbox/components/ui/widget/widget.tsx
index 5a3b887df..dee12198d 100644
--- a/app/soapbox/components/ui/widget/widget.tsx
+++ b/app/soapbox/components/ui/widget/widget.tsx
@@ -28,6 +28,7 @@ interface IWidget {
   actionIcon?: string,
   /** Text for the action. */
   actionTitle?: string,
+  action?: JSX.Element,
 }
 
 /** Sidebar widget. */
@@ -37,19 +38,20 @@ const Widget: React.FC<IWidget> = ({
   onActionClick,
   actionIcon = require('@tabler/icons/icons/arrow-right.svg'),
   actionTitle,
+  action,
 }): JSX.Element => {
   return (
     <Stack space={2}>
       <HStack alignItems='center'>
         <WidgetTitle title={title} />
-        {onActionClick && (
+        {action || (onActionClick && (
           <IconButton
             className='w-6 h-6 ml-2 text-black dark:text-white'
             src={actionIcon}
             onClick={onActionClick}
             title={actionTitle}
           />
-        )}
+        ))}
       </HStack>
       <WidgetBody>{children}</WidgetBody>
     </Stack>
diff --git a/app/soapbox/features/auth_token_list/index.tsx b/app/soapbox/features/auth_token_list/index.tsx
index 4563e4b34..458d8448b 100644
--- a/app/soapbox/features/auth_token_list/index.tsx
+++ b/app/soapbox/features/auth_token_list/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
 import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security';
diff --git a/app/soapbox/features/compose/components/poll_form.js b/app/soapbox/features/compose/components/poll_form.js
index d566b3055..41b51ca5e 100644
--- a/app/soapbox/features/compose/components/poll_form.js
+++ b/app/soapbox/features/compose/components/poll_form.js
@@ -11,6 +11,7 @@ import { connect } from 'react-redux';
 import AutosuggestInput from 'soapbox/components/autosuggest_input';
 import Icon from 'soapbox/components/icon';
 import IconButton from 'soapbox/components/icon_button';
+import { HStack } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   option_placeholder: { id: 'compose_form.poll.option_placeholder', defaultMessage: 'Choice {number}' },
@@ -177,7 +178,7 @@ class PollForm extends ImmutablePureComponent {
           ))}
         </ul>
 
-        <div className='poll__footer'>
+        <HStack className='text-black dark:text-white' space={2}>
           {options.size < maxOptions && (
             <button className='button button-secondary' onClick={this.handleAddOption}><Icon src={require('@tabler/icons/icons/plus.svg')} /> <FormattedMessage {...messages.add_option} /></button>
           )}
@@ -191,7 +192,7 @@ class PollForm extends ImmutablePureComponent {
             <option value={259200}>{intl.formatMessage(messages.days, { number: 3 })}</option>
             <option value={604800}>{intl.formatMessage(messages.days, { number: 7 })}</option>
           </select>
-        </div>
+        </HStack>
       </div>
     );
   }
diff --git a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
index f4f1145f4..5539b845b 100644
--- a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
+++ b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
@@ -8,6 +8,7 @@ import { FormattedMessage } from 'react-intl';
 import { connect } from 'react-redux';
 
 import Icon from 'soapbox/components/icon';
+import { Text } from 'soapbox/components/ui';
 
 const hasRestrictions = remoteInstance => {
   return remoteInstance
@@ -49,77 +50,57 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (followers_only) {
       items.push((
-        <div className='federation-restriction' key='followers_only'>
-          <div className='federation-restriction__icon'>
-            <Icon src={require('@tabler/icons/icons/lock.svg')} />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.followers_only'
-              defaultMessage='Hidden except to followers'
-            />
-          </div>
-        </div>
+        <Text key='followers_only'>
+          <Icon className='mr-2' src={require('@tabler/icons/icons/lock.svg')} />
+          <FormattedMessage
+            id='federation_restriction.followers_only'
+            defaultMessage='Hidden except to followers'
+          />
+        </Text>
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <div className='federation-restriction' key='federated_timeline_removal'>
-          <div className='federation-restriction__icon'>
-            <Icon src={require('@tabler/icons/icons/lock-open.svg')} />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.federated_timeline_removal'
-              defaultMessage='Fediverse timeline removal'
-            />
-          </div>
-        </div>
+        <Text key='federated_timeline_removal'>
+          <Icon className='mr-2' src={require('@tabler/icons/icons/lock-open.svg')} />
+          <FormattedMessage
+            id='federation_restriction.federated_timeline_removal'
+            defaultMessage='Fediverse timeline removal'
+          />
+        </Text>
       ));
     }
 
     if (fullMediaRemoval) {
       items.push((
-        <div className='federation-restriction' key='full_media_removal'>
-          <div className='federation-restriction__icon'>
-            <Icon src={require('@tabler/icons/icons/photo-off.svg')} />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.full_media_removal'
-              defaultMessage='Full media removal'
-            />
-          </div>
-        </div>
+        <Text key='full_media_removal'>
+          <Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
+          <FormattedMessage
+            id='federation_restriction.full_media_removal'
+            defaultMessage='Full media removal'
+          />
+        </Text>
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <div className='federation-restriction' key='partial_media_removal'>
-          <div className='federation-restriction__icon'>
-            <Icon src={require('@tabler/icons/icons/photo-off.svg')} />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.partial_media_removal'
-              defaultMessage='Partial media removal'
-            />
-          </div>
-        </div>
+        <Text key='partial_media_removal'>
+          <Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
+          <FormattedMessage
+            id='federation_restriction.partial_media_removal'
+            defaultMessage='Partial media removal'
+          />
+        </Text>
       ));
     }
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <div className='federation-restriction' key='media_nsfw'>
-          <div className='federation-restriction__icon'>
-            <Icon id='eye-slash' />
-          </div>
-          <div className='federation-restriction__message'>
-            <FormattedMessage
-              id='federation_restriction.media_nsfw'
-              defaultMessage='Attachments marked NSFW'
-            />
-          </div>
-        </div>
+        <Text key='media_nsfw'>
+          <Icon className='mr-2' id='eye-slash' />
+          <FormattedMessage
+            id='federation_restriction.media_nsfw'
+            defaultMessage='Attachments marked NSFW'
+          />
+        </Text>
       ));
     }
 
@@ -135,38 +116,38 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (remoteInstance.getIn(['federation', 'reject']) === true) {
       return (
-        <div className='instance-restrictions__message'>
-          <Icon id='times' />
+        <Text>
+          <Icon className='mr-2' id='times' />
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
             values={{ host, siteTitle }}
           />
-        </div>
+        </Text>
       );
     } else if (hasRestrictions(remoteInstance)) {
       return [
         (
-          <div className='instance-restrictions__message'>
+          <Text>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
               values={{ host, siteTitle }}
             />
-          </div>
+          </Text>
         ),
         this.renderRestrictions(),
       ];
     } else {
       return (
-        <div className='instance-restrictions__message'>
-          <Icon id='check' />
+        <Text>
+          <Icon className='mr-2' id='check' />
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
             values={{ host, siteTitle }}
           />
-        </div>
+        </Text>
       );
     }
   }
diff --git a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
index fc5ab38d0..841f5e7d0 100644
--- a/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
+++ b/app/soapbox/features/follow_recommendations/components/follow_recommendations_list.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
diff --git a/app/soapbox/features/list_timeline/index.tsx b/app/soapbox/features/list_timeline/index.tsx
index 2697c201c..85441c98f 100644
--- a/app/soapbox/features/list_timeline/index.tsx
+++ b/app/soapbox/features/list_timeline/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
diff --git a/app/soapbox/features/lists/index.tsx b/app/soapbox/features/lists/index.tsx
index a25534910..82f4b48a9 100644
--- a/app/soapbox/features/lists/index.tsx
+++ b/app/soapbox/features/lists/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
diff --git a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
index f1c1ac425..aa7940761 100644
--- a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
+++ b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
+import { Button, HStack } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
 
 interface IPinnedHostsPicker {
@@ -18,13 +19,18 @@ const PinnedHostsPicker: React.FC<IPinnedHostsPicker> = ({ host: activeHost }) =
   if (!pinnedHosts || pinnedHosts.isEmpty()) return null;
 
   return (
-    <div className='pinned-hosts-picker'>
+    <HStack className='mb-4' space={2}>
       {pinnedHosts.map((host: any) => (
-        <div className={classNames('pinned-host', { 'active': host === activeHost })} key={host}>
-          <Link to={`/timeline/${host}`}>{host}</Link>
-        </div>
+        <Button
+          key={host}
+          to={`/timeline/${host}`}
+          size='sm'
+          theme={host === activeHost ? 'accent' : 'secondary'}
+        >
+          {host}
+        </Button>
       ))}
-    </div>
+    </HStack>
   );
 };
 
diff --git a/app/soapbox/features/remote_timeline/index.tsx b/app/soapbox/features/remote_timeline/index.tsx
index c429549f5..6f8fe9477 100644
--- a/app/soapbox/features/remote_timeline/index.tsx
+++ b/app/soapbox/features/remote_timeline/index.tsx
@@ -3,6 +3,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 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';
 
@@ -66,14 +67,16 @@ const RemoteTimeline: React.FC<IRemoteTimeline> = ({ params }) => {
   return (
     <Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
       {instance && <PinnedHostsPicker host={instance} />}
-      {!pinned && <div className='timeline-filter-message'>
-        <IconButton src={require('@tabler/icons/icons/x.svg')} onClick={handleCloseClick} />
-        <FormattedMessage
-          id='remote_timeline.filter_message'
-          defaultMessage='You are viewing the timeline of {instance}.'
-          values={{ instance }}
-        />
-      </div>}
+      {!pinned && <HStack className='mb-4 px-2' space={2}>
+        <IconButton iconClassName='h-5 w-5' src={require('@tabler/icons/icons/x.svg')} onClick={handleCloseClick} />
+        <Text>
+          <FormattedMessage
+            id='remote_timeline.filter_message'
+            defaultMessage='You are viewing the timeline of {instance}.'
+            values={{ instance }}
+          />
+        </Text>
+      </HStack>}
       <StatusListContainer
         scrollKey={`${timelineId}_${instance}_timeline`}
         timelineId={`${timelineId}${onlyMedia ? ':media' : ''}:${instance}`}
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
index 0d8b14cd3..451529a32 100644
--- a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
+++ b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
@@ -2,8 +2,8 @@ import classNames from 'classnames';
 import React from 'react';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
 import StatusContent from 'soapbox/components/status_content';
-import StatusReplyMentions from 'soapbox/components/status_reply_mentions';
 import { HStack } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import PollPreview from 'soapbox/features/ui/components/poll_preview';
diff --git a/app/soapbox/features/scheduled_statuses/index.tsx b/app/soapbox/features/scheduled_statuses/index.tsx
index 7d387022d..006e8894c 100644
--- a/app/soapbox/features/scheduled_statuses/index.tsx
+++ b/app/soapbox/features/scheduled_statuses/index.tsx
@@ -1,6 +1,5 @@
 import { debounce } from 'lodash';
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
 import { fetchScheduledStatuses, expandScheduledStatuses } from 'soapbox/actions/scheduled_statuses';
diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx
index 82b35974a..8721be6ff 100644
--- a/app/soapbox/features/soapbox_config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@@ -3,6 +3,7 @@ import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { defaultSettings } from 'soapbox/actions/settings';
+import SiteLogo from 'soapbox/components/site-logo';
 import BackgroundShapes from 'soapbox/features/ui/components/background_shapes';
 import { useSystemTheme } from 'soapbox/hooks';
 import { normalizeSoapboxConfig } from 'soapbox/normalizers';
@@ -47,7 +48,8 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
         'bg-slate-800': dark,
       })}
       >
-        <img alt='Logo' className='h-5 lg:h-6 self-center px-2' src={soapboxConfig.logo} />
+        <SiteLogo alt='Logo' className='h-5 lg:h-6 w-auto self-center px-2' theme={dark ? 'dark' : 'light'} />
+        {/* <img alt='Logo' className='h-5 lg:h-6 self-center px-2' src={soapboxConfig.logo} /> */}
       </div>
     </div>
   );
diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index 5397c2e4c..093e0a896 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/app/soapbox/features/status/components/detailed-status.tsx
@@ -5,13 +5,13 @@ import { FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from
 import { FormattedDate } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
+import MediaGallery from 'soapbox/components/media_gallery';
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
+import StatusContent from 'soapbox/components/status_content';
+import { HStack, Text } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
 
-import MediaGallery from '../../../components/media_gallery';
-import StatusContent from '../../../components/status_content';
-import StatusReplyMentions from '../../../components/status_reply_mentions';
-import { HStack, Text } from '../../../components/ui';
-import AccountContainer from '../../../containers/account_container';
 import Audio from '../../audio';
 import scheduleIdleTask from '../../ui/util/schedule_idle_task';
 import Video from '../../video';
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index ed762b7b5..75ef1f7f9 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -583,7 +583,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
   }
 
   renderPendingStatus(id: string) {
-    const { status } = this.props;
+    // const { status } = this.props;
     const idempotencyKey = id.replace(/^末pending-/, '');
 
     return (
@@ -591,10 +591,10 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
         className='thread__status'
         key={id}
         idempotencyKey={idempotencyKey}
-        focusedStatusId={status.id}
-        onMoveUp={this.handleMoveUp}
-        onMoveDown={this.handleMoveDown}
-        contextType='thread'
+        // focusedStatusId={status.id}
+        // onMoveUp={this.handleMoveUp}
+        // onMoveDown={this.handleMoveDown}
+        // contextType='thread'
       />
     );
   }
diff --git a/app/soapbox/features/ui/components/component_modal.js b/app/soapbox/features/ui/components/component_modal.js
deleted file mode 100644
index 51c23a8e1..000000000
--- a/app/soapbox/features/ui/components/component_modal.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default class ComponentModal extends React.PureComponent {
-
-  static propTypes = {
-    onClose: PropTypes.func.isRequired,
-    component: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
-    componentProps: PropTypes.object,
-  }
-
-  static defaultProps = {
-    componentProps: {},
-  }
-
-  render() {
-    const { onClose, component: Component, componentProps } = this.props;
-
-    return (
-      <div className='modal-root__modal component-modal'>
-        <Component onClose={onClose} {...componentProps} />
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/component_modal.tsx b/app/soapbox/features/ui/components/component_modal.tsx
new file mode 100644
index 000000000..b4daa41e7
--- /dev/null
+++ b/app/soapbox/features/ui/components/component_modal.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { Modal } from 'soapbox/components/ui';
+
+interface IComponentModal {
+  onClose: (type?: string) => void,
+  component: React.ComponentType<{
+    onClose: (type?: string) => void,
+  }>,
+  componentProps: Record<any, any>,
+}
+
+const ComponentModal: React.FC<IComponentModal> = ({ onClose, component: Component, componentProps = {} }) => (
+  <Modal onClose={onClose} title=''>
+    <Component onClose={onClose} {...componentProps} />
+  </Modal>
+);
+
+export default ComponentModal;
diff --git a/app/soapbox/features/ui/components/edit_federation_modal.tsx b/app/soapbox/features/ui/components/edit_federation_modal.tsx
index 3d4456a75..9dbde1f79 100644
--- a/app/soapbox/features/ui/components/edit_federation_modal.tsx
+++ b/app/soapbox/features/ui/components/edit_federation_modal.tsx
@@ -1,17 +1,18 @@
 import { Map as ImmutableMap } from 'immutable';
 import React, { useState, useEffect } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import Toggle from 'react-toggle';
 
 import { updateMrf } from 'soapbox/actions/mrf';
 import snackbar from 'soapbox/actions/snackbar';
-import { SimpleForm, Checkbox } from 'soapbox/features/forms';
+import { HStack, Modal, Stack, Text } from 'soapbox/components/ui';
+import { SimpleForm } from 'soapbox/features/forms';
 import { useAppSelector, useAppDispatch } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
 
 const getRemoteInstance = makeGetRemoteInstance();
 
 const messages = defineMessages({
-  reject: { id: 'edit_federation.reject', defaultMessage: 'Reject all activities' },
   mediaRemoval: { id: 'edit_federation.media_removal', defaultMessage: 'Strip media' },
   forceNsfw: { id: 'edit_federation.force_nsfw', defaultMessage: 'Force attachments to be marked sensitive' },
   unlisted: { id: 'edit_federation.unlisted', defaultMessage: 'Force posts unlisted' },
@@ -54,7 +55,7 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
     setData(newData);
   };
 
-  const handleSubmit: React.FormEventHandler = () => {
+  const handleSubmit = () => {
     dispatch(updateMrf(host, data))
       .then(() => dispatch(snackbar.success(intl.formatMessage(messages.success, { host }))))
       .catch(() => {});
@@ -75,47 +76,81 @@ const EditFederationModal: React.FC<IEditFederationModal> = ({ host, onClose })
   const fullMediaRemoval = avatar_removal && banner_removal && media_removal;
 
   return (
-    <div className='modal-root__modal edit-federation-modal'>
-      <div>
-        <div className='edit-federation-modal__title'>
-          {host}
-        </div>
-        <SimpleForm onSubmit={handleSubmit}>
-          <Checkbox
-            label={intl.formatMessage(messages.reject)}
-            checked={reject}
-            onChange={handleDataChange('reject')}
-          />
-          <Checkbox
-            label={intl.formatMessage(messages.mediaRemoval)}
-            disabled={reject}
-            checked={fullMediaRemoval}
-            onChange={handleMediaRemoval}
-          />
-          <Checkbox
-            label={intl.formatMessage(messages.forceNsfw)}
-            disabled={reject || media_removal}
-            checked={media_nsfw}
-            onChange={handleDataChange('media_nsfw')}
-          />
-          <Checkbox
-            label={intl.formatMessage(messages.followersOnly)}
-            disabled={reject}
-            checked={followers_only}
-            onChange={handleDataChange('followers_only')}
-          />
-          <Checkbox
-            label={intl.formatMessage(messages.unlisted)}
-            disabled={reject || followers_only}
-            checked={federated_timeline_removal}
-            onChange={handleDataChange('federated_timeline_removal')}
-          />
-          <button type='submit' className='edit-federation-modal__submit'>
-            {intl.formatMessage(messages.save)}
-          </button>
-        </SimpleForm>
-      </div>
-    </div>
+    <Modal
+      onClose={onClose}
+      title={host}
+      confirmationAction={handleSubmit}
+      confirmationText={intl.formatMessage(messages.save)}
+    >
+      <SimpleForm onSubmit={handleSubmit}>
+        <Stack space={2}>
+          <HStack space={2} alignItems='center'>
+            <Toggle
+              checked={reject}
+              onChange={handleDataChange('reject')}
+              icons={false}
+              id='reject'
+            />
+
+            <Text theme='muted' tag='label' size='sm' htmlFor='reject'>
+              <FormattedMessage id='edit_federation.reject' defaultMessage='Reject all activities' />
+            </Text>
+          </HStack>
+          <HStack space={2} alignItems='center'>
+            <Toggle
+              checked={fullMediaRemoval}
+              onChange={handleMediaRemoval}
+              icons={false}
+              id='media_removal'
+              disabled={reject}
+            />
+
+            <Text theme='muted' tag='label' size='sm' htmlFor='media_removal'>
+              <FormattedMessage id='edit_federation.media_removal' defaultMessage='Strip media' />
+            </Text>
+          </HStack>
+          <HStack space={2} alignItems='center'>
+            <Toggle
+              checked={media_nsfw}
+              onChange={handleDataChange('media_nsfw')}
+              icons={false}
+              id='media_nsfw'
+              disabled={reject || media_removal}
+            />
+
+            <Text theme='muted' tag='label' size='sm' htmlFor='media_nsfw'>
+              <FormattedMessage id='edit_federation.force_nsfw' defaultMessage='Force attachments to be marked sensitive' />
+            </Text>
+          </HStack>
+          <HStack space={2} alignItems='center'>
+            <Toggle
+              checked={followers_only}
+              onChange={handleDataChange('followers_only')}
+              icons={false}
+              id='followers_only'
+              disabled={reject}
+            />
+
+            <Text theme='muted' tag='label' size='sm' htmlFor='followers_only'>
+              <FormattedMessage id='edit_federation.followers_only' defaultMessage='Hide posts except to followers' />
+            </Text>
+          </HStack>
+          <HStack space={2} alignItems='center'>
+            <Toggle
+              checked={federated_timeline_removal}
+              onChange={handleDataChange('federated_timeline_removal')}
+              icons={false}
+              id='federated_timeline_removal'
+              disabled={reject || followers_only}
+            />
+
+            <Text theme='muted' tag='label' size='sm' htmlFor='federated_timeline_removal'>
+              <FormattedMessage id='edit_federation.unlisted' defaultMessage='Force posts unlisted' />
+            </Text>
+          </HStack>
+        </Stack>
+      </SimpleForm>
+    </Modal>
   );
 };
 
diff --git a/app/soapbox/features/ui/components/favourites_modal.js b/app/soapbox/features/ui/components/favourites_modal.js
deleted file mode 100644
index 34e6ceb34..000000000
--- a/app/soapbox/features/ui/components/favourites_modal.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchFavourites } from 'soapbox/actions/interactions';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-
-const mapStateToProps = (state, props) => {
-  return {
-    accountIds: state.getIn(['user_lists', 'favourited_by', props.statusId]),
-  };
-};
-
-export default @connect(mapStateToProps)
-class FavouritesModal extends React.PureComponent {
-
-  static propTypes = {
-    onClose: PropTypes.func.isRequired,
-    statusId: PropTypes.string.isRequired,
-    username: PropTypes.string.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-  };
-
-  fetchData = () => {
-    const { dispatch, statusId } = this.props;
-
-    dispatch(fetchFavourites(statusId));
-  }
-
-  componentDidMount() {
-    this.fetchData();
-  }
-
-  onClickClose = () => {
-    this.props.onClose('FAVOURITES');
-  };
-
-  render() {
-    const { accountIds } = this.props;
-
-    let body;
-
-    if (!accountIds) {
-      body = <Spinner />;
-    } else {
-      const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
-
-      body = (
-        <ScrollableList
-          scrollKey='favourites'
-          emptyMessage={emptyMessage}
-          itemClassName='pb-3'
-        >
-          {accountIds.map(id =>
-            <AccountContainer key={id} id={id} />,
-          )}
-        </ScrollableList>
-      );
-    }
-
-    return (
-      <Modal
-        title={<FormattedMessage id='column.favourites' defaultMessage='likes' />}
-        onClose={this.onClickClose}
-      >
-        {body}
-      </Modal>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/favourites_modal.tsx b/app/soapbox/features/ui/components/favourites_modal.tsx
new file mode 100644
index 000000000..f6089acf6
--- /dev/null
+++ b/app/soapbox/features/ui/components/favourites_modal.tsx
@@ -0,0 +1,62 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { fetchFavourites } from 'soapbox/actions/interactions';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Modal, Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+interface IFavouritesModal {
+  onClose: (type: string) => void,
+  statusId: string,
+}
+
+const FavouritesModal: React.FC<IFavouritesModal> = ({ onClose, statusId }) => {
+  const dispatch = useAppDispatch();
+
+  const accountIds = useAppSelector((state) => state.user_lists.getIn(['favourited_by', statusId]));
+
+  const fetchData = () => {
+    dispatch(fetchFavourites(statusId));
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const onClickClose = () => {
+    onClose('FAVOURITES');
+  };
+
+  let body;
+
+  if (!accountIds) {
+    body = <Spinner />;
+  } else {
+    const emptyMessage = <FormattedMessage id='empty_column.favourites' defaultMessage='No one has liked this post yet. When someone does, they will show up here.' />;
+
+    body = (
+      <ScrollableList
+        scrollKey='favourites'
+        emptyMessage={emptyMessage}
+        itemClassName='pb-3'
+      >
+        {accountIds.map((id: string) =>
+          <AccountContainer key={id} id={id} />,
+        )}
+      </ScrollableList>
+    );
+  }
+
+  return (
+    <Modal
+      title={<FormattedMessage id='column.favourites' defaultMessage='Likes' />}
+      onClose={onClickClose}
+    >
+      {body}
+    </Modal>
+  );
+};
+
+export default FavouritesModal;
diff --git a/app/soapbox/features/ui/components/instance_info_panel.tsx b/app/soapbox/features/ui/components/instance_info_panel.tsx
index a100abc2c..4c2462e10 100644
--- a/app/soapbox/features/ui/components/instance_info_panel.tsx
+++ b/app/soapbox/features/ui/components/instance_info_panel.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
 import { pinHost, unpinHost } from 'soapbox/actions/remote_timeline';
-import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
+import { Widget } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useSettings } from 'soapbox/hooks';
 import { makeGetRemoteInstance } from 'soapbox/selectors';
 
@@ -29,7 +29,7 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
   const remoteInstance: any = useAppSelector(state => getRemoteInstance(state, host));
   const pinned: boolean = (settings.getIn(['remote_timeline', 'pinnedHosts']) as any).includes(host);
 
-  const handlePinHost: React.MouseEventHandler = () => {
+  const handlePinHost = () => {
     if (!pinned) {
       dispatch(pinHost(host));
     } else {
@@ -37,31 +37,15 @@ const InstanceInfoPanel: React.FC<IInstanceInfoPanel> = ({ host }) => {
     }
   };
 
-  const makeMenu = () => {
-    return [{
-      text: intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host }),
-      action: handlePinHost,
-      icon: require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
-    }];
-  };
-
-  const menu = makeMenu();
-  const icon = pinned ? 'thumbtack' : 'globe-w';
-
   if (!remoteInstance) return null;
 
   return (
-    <div className='wtf-panel instance-federation-panel'>
-      <div className='wtf-panel-header'>
-        <i role='img' className={`fa fa-${icon} wtf-panel-header__icon`} />
-        <span className='wtf-panel-header__label'>
-          <span>{remoteInstance.get('host')}</span>
-        </span>
-        <div className='wtf-panel__menu'>
-          <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
-        </div>
-      </div>
-    </div>
+    <Widget
+      title={remoteInstance.get('host')}
+      onActionClick={handlePinHost}
+      actionIcon={require(pinned ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg')}
+      actionTitle={intl.formatMessage(pinned ? messages.unpinHost : messages.pinHost, { host })}
+    />
   );
 };
 
diff --git a/app/soapbox/features/ui/components/instance_moderation_panel.tsx b/app/soapbox/features/ui/components/instance_moderation_panel.tsx
index 1a494df7e..ed97495f1 100644
--- a/app/soapbox/features/ui/components/instance_moderation_panel.tsx
+++ b/app/soapbox/features/ui/components/instance_moderation_panel.tsx
@@ -4,6 +4,7 @@ import React from 'react';
 import { useIntl, defineMessages, FormattedMessage } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
+import { Widget } from 'soapbox/components/ui';
 import DropdownMenu from 'soapbox/containers/dropdown_menu_container';
 import InstanceRestrictions from 'soapbox/features/federation_restrictions/components/instance_restrictions';
 import { useAppSelector, useAppDispatch, useOwnAccount } from 'soapbox/hooks';
@@ -43,22 +44,14 @@ const InstanceModerationPanel: React.FC<IInstanceModerationPanel> = ({ host }) =
   const menu = makeMenu();
 
   return (
-    <div className='wtf-panel instance-federation-panel'>
-      <div className='wtf-panel-header'>
-        <i role='img' className='fa fa-gavel wtf-panel-header__icon' />
-        <span className='wtf-panel-header__label'>
-          <span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
-        </span>
-        {account?.admin && (
-          <div className='wtf-panel__menu'>
-            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
-          </div>
-        )}
-      </div>
-      <div className='wtf-panel__content'>
-        <InstanceRestrictions remoteInstance={remoteInstance} />
-      </div>
-    </div>
+    <Widget
+      title={<FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' />}
+      action={account?.admin ? (
+        <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
+      ) : undefined}
+    >
+      <InstanceRestrictions remoteInstance={remoteInstance} />
+    </Widget>
   );
 };
 
diff --git a/app/soapbox/features/ui/components/mentions_modal.js b/app/soapbox/features/ui/components/mentions_modal.js
deleted file mode 100644
index 0f4c4626b..000000000
--- a/app/soapbox/features/ui/components/mentions_modal.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchStatusWithContext } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-import { makeGetStatus } from 'soapbox/selectors';
-
-const mapStateToProps = (state, props) => {
-  const getStatus = makeGetStatus();
-  const status = getStatus(state, {
-    id: props.statusId,
-    username: props.username,
-  });
-
-  return {
-    accountIds: status ? ImmutableOrderedSet(status.get('mentions').map(m => m.get('id'))) : null,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class MentionsModal extends React.PureComponent {
-
-  static propTypes = {
-    onClose: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    statusId: PropTypes.string.isRequired,
-    username: PropTypes.string.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-  };
-
-  fetchData = () => {
-    const { dispatch, statusId } = this.props;
-
-    dispatch(fetchStatusWithContext(statusId));
-  }
-
-  componentDidMount() {
-    this.fetchData();
-  }
-
-  onClickClose = () => {
-    this.props.onClose('MENTIONS');
-  };
-
-  render() {
-    const { accountIds } = this.props;
-
-    let body;
-
-    if (!accountIds) {
-      body = <Spinner />;
-    } else {
-      body = (
-        <ScrollableList
-          scrollKey='mentions'
-          itemClassName='pb-3'
-        >
-          {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
-          )}
-        </ScrollableList>
-      );
-    }
-
-    return (
-      <Modal
-        title={<FormattedMessage id='column.mentions' defaultMessage='Mentions' />}
-        onClose={this.onClickClose}
-      >
-        {body}
-      </Modal>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/mentions_modal.tsx b/app/soapbox/features/ui/components/mentions_modal.tsx
new file mode 100644
index 000000000..445858843
--- /dev/null
+++ b/app/soapbox/features/ui/components/mentions_modal.tsx
@@ -0,0 +1,64 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { fetchStatusWithContext } from 'soapbox/actions/statuses';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Modal, Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { makeGetStatus } from 'soapbox/selectors';
+
+const getStatus = makeGetStatus();
+
+interface IMentionsModal {
+  onClose: (type: string) => void,
+  statusId: string,
+}
+
+const MentionsModal: React.FC<IMentionsModal> = ({ onClose, statusId }) => {
+  const dispatch = useAppDispatch();
+
+  const status = useAppSelector((state) => getStatus(state, { id: statusId }));
+  const accountIds = status ? ImmutableOrderedSet(status.mentions.map(m => m.get('id'))) : null;
+
+  const fetchData = () => {
+    dispatch(fetchStatusWithContext(statusId));
+  };
+
+  const onClickClose = () => {
+    onClose('MENTIONS');
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  let body;
+
+  if (!accountIds) {
+    body = <Spinner />;
+  } else {
+    body = (
+      <ScrollableList
+        scrollKey='mentions'
+        itemClassName='pb-3'
+      >
+        {accountIds.map(id =>
+          <AccountContainer key={id} id={id} />,
+        )}
+      </ScrollableList>
+    );
+  }
+
+  return (
+    <Modal
+      title={<FormattedMessage id='column.mentions' defaultMessage='Mentions' />}
+      onClose={onClickClose}
+    >
+      {body}
+    </Modal>
+  );
+};
+
+export default MentionsModal;
diff --git a/app/soapbox/features/ui/components/modal_loading.js b/app/soapbox/features/ui/components/modal_loading.tsx
similarity index 100%
rename from app/soapbox/features/ui/components/modal_loading.js
rename to app/soapbox/features/ui/components/modal_loading.tsx
diff --git a/app/soapbox/features/ui/components/pending_status.js b/app/soapbox/features/ui/components/pending_status.js
deleted file mode 100644
index e8da15a73..000000000
--- a/app/soapbox/features/ui/components/pending_status.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import classNames from 'classnames';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import StatusContent from 'soapbox/components/status_content';
-import StatusReplyMentions from 'soapbox/components/status_reply_mentions';
-import { HStack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
-import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
-import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
-
-import { buildStatus } from '../util/pending_status_builder';
-
-import PollPreview from './poll_preview';
-
-const shouldHaveCard = pendingStatus => {
-  return Boolean(pendingStatus.get('content').match(/https?:\/\/\S*/));
-};
-
-const mapStateToProps = (state, props) => {
-  const { idempotencyKey } = props;
-  const pendingStatus = state.getIn(['pending_statuses', idempotencyKey]);
-  return {
-    status: pendingStatus ? buildStatus(state, pendingStatus, idempotencyKey) : null,
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-class PendingStatus extends ImmutablePureComponent {
-
-  renderMedia = () => {
-    const { status } = this.props;
-
-    if (status.get('media_attachments') && !status.get('media_attachments').isEmpty()) {
-      return (
-        <PlaceholderMediaGallery
-          media={status.get('media_attachments')}
-        />
-      );
-    } else if (!status.get('quote') && shouldHaveCard(status)) {
-      return <PlaceholderCard />;
-    } else {
-      return null;
-    }
-  }
-
-  render() {
-    const { status, className } = this.props;
-    if (!status) return null;
-    if (!status.get('account')) return null;
-
-    return (
-      <div className={classNames('opacity-50', className)}>
-        <div className={classNames('status', { 'status-reply': !!status.get('in_reply_to_id'), muted: this.props.muted })} data-id={status.get('id')}>
-          <div className={classNames('status__wrapper', `status-${status.get('visibility')}`, { 'status-reply': !!status.get('in_reply_to_id') })} tabIndex={this.props.muted ? null : 0}>
-            <div className='mb-4'>
-              <HStack justifyContent='between' alignItems='start'>
-                <AccountContainer
-                  key={String(status.getIn(['account', 'id']))}
-                  id={String(status.getIn(['account', 'id']))}
-                  timestamp={status.created_at}
-                  timestampUrl={status.get('created_at')}
-                  hideActions
-                />
-              </HStack>
-            </div>
-
-            <div className='status__content-wrapper'>
-              <StatusReplyMentions status={status} />
-
-              <StatusContent
-                status={status}
-                expanded
-                collapsable
-              />
-
-              {this.renderMedia()}
-              {status.get('poll') && <PollPreview poll={status.get('poll')} />}
-
-              {status.get('quote') && <QuotedStatus statusId={status.get('quote')} />}
-            </div>
-
-            {/* TODO */}
-            {/* <PlaceholderActionBar /> */}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx
new file mode 100644
index 000000000..f4b990fc6
--- /dev/null
+++ b/app/soapbox/features/ui/components/pending_status.tsx
@@ -0,0 +1,97 @@
+import classNames from 'classnames';
+import React from 'react';
+
+import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
+import StatusContent from 'soapbox/components/status_content';
+import { HStack } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
+import PlaceholderMediaGallery from 'soapbox/features/placeholder/components/placeholder_media_gallery';
+import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
+import { useAppSelector } from 'soapbox/hooks';
+
+import { buildStatus } from '../util/pending_status_builder';
+
+import PollPreview from './poll_preview';
+
+import type { Account as AccountEntity, Status as StatusEntity } from 'soapbox/types/entities';
+
+const shouldHaveCard = (pendingStatus: StatusEntity) => {
+  return Boolean(pendingStatus.content.match(/https?:\/\/\S*/));
+};
+
+interface IPendingStatus {
+  className?: string,
+  idempotencyKey: string,
+  muted?: boolean,
+}
+
+interface IPendingStatusMedia {
+  status: StatusEntity,
+}
+
+const PendingStatusMedia: React.FC<IPendingStatusMedia> = ({ status }) => {
+  if (status.media_attachments && !status.media_attachments.isEmpty()) {
+    return (
+      <PlaceholderMediaGallery
+        media={status.media_attachments}
+      />
+    );
+  } else if (!status.quote && shouldHaveCard(status)) {
+    return <PlaceholderCard />;
+  } else {
+    return null;
+  }
+};
+
+const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, muted }) => {
+  const status = useAppSelector((state) => {
+    const pendingStatus = state.pending_statuses.get(idempotencyKey);
+    return pendingStatus ? buildStatus(state, pendingStatus, idempotencyKey) : null;
+  }) as StatusEntity | null;
+
+  if (!status) return null;
+  if (!status.account) return null;
+
+  const account = status.account as AccountEntity;
+
+  return (
+    <div className={classNames('opacity-50', className)}>
+      <div className={classNames('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
+        <div className={classNames('status__wrapper', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} tabIndex={muted ? undefined : 0}>
+          <div className='mb-4'>
+            <HStack justifyContent='between' alignItems='start'>
+              <AccountContainer
+                key={account.id}
+                id={account.id}
+                timestamp={status.created_at}
+                hideActions
+              />
+            </HStack>
+          </div>
+
+          <div className='status__content-wrapper'>
+            <StatusReplyMentions status={status} />
+
+            <StatusContent
+              status={status}
+              expanded
+              collapsable
+            />
+
+            <PendingStatusMedia status={status} />
+
+            {status.poll && <PollPreview poll={status.poll} />}
+
+            {status.quote && <QuotedStatus statusId={status.quote} />}
+          </div>
+
+          {/* TODO */}
+          {/* <PlaceholderActionBar /> */}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PendingStatus;
diff --git a/app/soapbox/features/ui/components/pinned_accounts_panel.js b/app/soapbox/features/ui/components/pinned_accounts_panel.js
deleted file mode 100644
index e0cfb1f93..000000000
--- a/app/soapbox/features/ui/components/pinned_accounts_panel.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { List as ImmutableList } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import Icon from 'soapbox/components/icon';
-
-import { fetchPinnedAccounts } from '../../../actions/accounts';
-import AccountContainer from '../../../containers/account_container';
-
-class PinnedAccountsPanel extends ImmutablePureComponent {
-
-  static propTypes = {
-    pinned: ImmutablePropTypes.list.isRequired,
-    fetchPinned: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  componentDidMount() {
-    this.props.fetchPinned();
-  }
-
-  render() {
-    const { account } = this.props;
-    const pinned = this.props.pinned.slice(0, this.props.limit);
-
-    if (pinned.isEmpty()) {
-      return null;
-    }
-
-    return (
-      <div className='wtf-panel'>
-        <div className='wtf-panel-header'>
-          <Icon src={require('@tabler/icons/icons/users.svg')} className='wtf-panel-header__icon' />
-          <span className='wtf-panel-header__label'>
-            <FormattedMessage
-              id='pinned_accounts.title'
-              defaultMessage='{name}’s choices'
-              values={{
-                name: <span className='display-name__html' dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />,
-              }}
-            />
-          </span>
-        </div>
-        <div className='wtf-panel__content'>
-          <div className='wtf-panel__list'>
-            {pinned && pinned.map(suggestion => (
-              <AccountContainer
-                key={suggestion}
-                id={suggestion}
-                withRelationship={false}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
-
-const mapStateToProps = (state, { account }) => ({
-  pinned: state.getIn(['user_lists', 'pinned', account.get('id'), 'items'], ImmutableList()),
-});
-
-const mapDispatchToProps = (dispatch, { account }) => {
-  return {
-    fetchPinned: () => dispatch(fetchPinnedAccounts(account.get('id'))),
-  };
-};
-
-export default injectIntl(
-  connect(mapStateToProps, mapDispatchToProps, null, {
-    forwardRef: true,
-  },
-  )(PinnedAccountsPanel));
diff --git a/app/soapbox/features/ui/components/pinned_accounts_panel.tsx b/app/soapbox/features/ui/components/pinned_accounts_panel.tsx
new file mode 100644
index 000000000..d364d61e8
--- /dev/null
+++ b/app/soapbox/features/ui/components/pinned_accounts_panel.tsx
@@ -0,0 +1,50 @@
+import { List as ImmutableList } from 'immutable';
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { fetchPinnedAccounts } from 'soapbox/actions/accounts';
+import { Widget } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import type { Account } from 'soapbox/types/entities';
+
+interface IPinnedAccountsPanel {
+  account: Account,
+  limit: number,
+}
+
+const PinnedAccountsPanel: React.FC<IPinnedAccountsPanel> = ({ account, limit }) => {
+  const dispatch = useAppDispatch();
+  const pinned = useAppSelector((state) => state.user_lists.getIn(['pinned', account.id, 'items'], ImmutableList())).slice(0, limit);
+
+  useEffect(() => {
+    dispatch(fetchPinnedAccounts(account.id));
+  }, []);
+
+  if (pinned.isEmpty()) {
+    return null;
+  }
+
+  return (
+    <Widget
+      title={<FormattedMessage
+        id='pinned_accounts.title'
+        defaultMessage='{name}’s choices'
+        values={{
+          name: <span className='display-name__html' dangerouslySetInnerHTML={{ __html: account.display_name_html }} />,
+        }}
+      />}
+    >
+      {pinned && pinned.map((suggestion: string) => (
+        <AccountContainer
+          key={suggestion}
+          id={suggestion}
+          withRelationship={false}
+        />
+      ))}
+    </Widget>
+  );
+};
+
+export default PinnedAccountsPanel;
diff --git a/app/soapbox/features/ui/components/profile_familiar_followers.tsx b/app/soapbox/features/ui/components/profile_familiar_followers.tsx
index f2e0c9b61..0b7c5b144 100644
--- a/app/soapbox/features/ui/components/profile_familiar_followers.tsx
+++ b/app/soapbox/features/ui/components/profile_familiar_followers.tsx
@@ -1,6 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { FormattedList, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
 import { Link } from 'react-router-dom';
diff --git a/app/soapbox/features/ui/components/reactions_modal.tsx b/app/soapbox/features/ui/components/reactions_modal.tsx
index 31422ab05..4fb4df72a 100644
--- a/app/soapbox/features/ui/components/reactions_modal.tsx
+++ b/app/soapbox/features/ui/components/reactions_modal.tsx
@@ -1,16 +1,14 @@
 import { List as ImmutableList } from 'immutable';
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
 import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
 import FilterBar from 'soapbox/components/filter_bar';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import { Modal, Spinner } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
-import { useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -20,14 +18,13 @@ const messages = defineMessages({
 interface IReactionsModal {
   onClose: (string: string) => void,
   statusId: string,
-  username: string,
   reaction?: string,
 }
 
-const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, ...props }) => {
-  const dispatch = useDispatch();
+const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction: initialReaction }) => {
+  const dispatch = useAppDispatch();
   const intl = useIntl();
-  const [reaction, setReaction] = useState(props.reaction);
+  const [reaction, setReaction] = useState(initialReaction);
   const reactions = useAppSelector<Array<{
     accounts: Array<string>,
     count: number,
diff --git a/app/soapbox/features/ui/components/reblogs_modal.js b/app/soapbox/features/ui/components/reblogs_modal.js
deleted file mode 100644
index a5945c3a1..000000000
--- a/app/soapbox/features/ui/components/reblogs_modal.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
-
-import { fetchReblogs } from 'soapbox/actions/interactions';
-import { fetchStatus } from 'soapbox/actions/statuses';
-import ScrollableList from 'soapbox/components/scrollable_list';
-import { Modal, Spinner } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-
-const mapStateToProps = (state, props) => {
-  return {
-    accountIds: state.getIn(['user_lists', 'reblogged_by', props.statusId]),
-  };
-};
-
-export default @connect(mapStateToProps)
-@injectIntl
-@withRouter
-class ReblogsModal extends React.PureComponent {
-
-  static propTypes = {
-    onClose: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    statusId: PropTypes.string.isRequired,
-    username: PropTypes.string.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    accountIds: ImmutablePropTypes.orderedSet,
-    history: PropTypes.object,
-  };
-
-  fetchData = () => {
-    const { dispatch, statusId } = this.props;
-
-    dispatch(fetchReblogs(statusId));
-    dispatch(fetchStatus(statusId));
-  }
-
-  componentDidMount() {
-    this.fetchData();
-    this.unlistenHistory = this.props.history.listen((_, action) => {
-      if (action === 'PUSH') {
-        this.onClickClose(null, true);
-      }
-    });
-  }
-
-  componentWillUnmount() {
-    if (this.unlistenHistory) {
-      this.unlistenHistory();
-    }
-  }
-
-  onClickClose = () => {
-    this.props.onClose('REBLOGS');
-  };
-
-  render() {
-    const { accountIds } = this.props;
-
-    let body;
-
-    if (!accountIds) {
-      body = <Spinner />;
-    } else {
-      const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this post yet. When someone does, they will show up here.' />;
-
-      body = (
-        <ScrollableList
-          scrollKey='reblogs'
-          emptyMessage={emptyMessage}
-          itemClassName='pb-3'
-        >
-          {accountIds.map(id =>
-            <AccountContainer key={id} id={id} />,
-          )}
-        </ScrollableList>
-      );
-    }
-
-
-    return (
-      <Modal
-        title={<FormattedMessage id='column.reblogs' defaultMessage='Reposts' />}
-        onClose={this.onClickClose}
-      >
-        {body}
-      </Modal>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/reblogs_modal.tsx b/app/soapbox/features/ui/components/reblogs_modal.tsx
new file mode 100644
index 000000000..cb9906bad
--- /dev/null
+++ b/app/soapbox/features/ui/components/reblogs_modal.tsx
@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { fetchReblogs } from 'soapbox/actions/interactions';
+import { fetchStatus } from 'soapbox/actions/statuses';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { Modal, Spinner } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+interface IReblogsModal {
+  onClose: (string: string) => void,
+  statusId: string,
+}
+
+const ReblogsModal: React.FC<IReblogsModal> = ({ onClose, statusId }) => {
+  const dispatch = useAppDispatch();
+  const accountIds = useAppSelector((state) => state.user_lists.getIn(['reblogged_by', statusId]));
+
+  const fetchData = () => {
+    dispatch(fetchReblogs(statusId));
+    dispatch(fetchStatus(statusId));
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  const onClickClose = () => {
+    onClose('REBLOGS');
+  };
+
+  let body;
+
+  if (!accountIds) {
+    body = <Spinner />;
+  } else {
+    const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this post yet. When someone does, they will show up here.' />;
+
+    body = (
+      <ScrollableList
+        scrollKey='reblogs'
+        emptyMessage={emptyMessage}
+        itemClassName='pb-3'
+      >
+        {accountIds.map((id: string) =>
+          <AccountContainer key={id} id={id} />,
+        )}
+      </ScrollableList>
+    );
+  }
+
+
+  return (
+    <Modal
+      title={<FormattedMessage id='column.reblogs' defaultMessage='Reposts' />}
+      onClose={onClickClose}
+    >
+      {body}
+    </Modal>
+  );
+};
+
+export default ReblogsModal;
diff --git a/app/soapbox/features/ui/components/user_panel.js b/app/soapbox/features/ui/components/user_panel.js
deleted file mode 100644
index 747717add..000000000
--- a/app/soapbox/features/ui/components/user_panel.js
+++ /dev/null
@@ -1,136 +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 { injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-import { Link } from 'react-router-dom';
-
-import Avatar from 'soapbox/components/avatar';
-import StillImage from 'soapbox/components/still_image';
-import VerificationBadge from 'soapbox/components/verification_badge';
-import { getAcct } from 'soapbox/utils/accounts';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
-import { displayFqn } from 'soapbox/utils/state';
-
-import { HStack, Stack, Text } from '../../../components/ui';
-import { makeGetAccount } from '../../../selectors';
-
-class UserPanel extends ImmutablePureComponent {
-
-  static propTypes = {
-    account: ImmutablePropTypes.record,
-    displayFqn: PropTypes.bool,
-    intl: PropTypes.object.isRequired,
-    domain: PropTypes.string,
-  }
-
-  render() {
-    const { account, action, badges, displayFqn, intl, domain } = this.props;
-    if (!account) return null;
-    const displayNameHtml = { __html: account.get('display_name_html') };
-    const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
-    const header = account.get('header');
-    const verified = account.get('verified');
-
-    return (
-      <div className='relative'>
-        <Stack space={2}>
-          <Stack>
-            <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative'>
-              {header && (
-                <StillImage
-                  src={account.get('header')}
-                  className='absolute inset-0 object-cover'
-                  alt=''
-                />
-              )}
-            </div>
-
-            <HStack justifyContent='between'>
-              <Link
-                to={`/@${account.get('acct')}`}
-                title={acct}
-                className='-mt-12 block'
-              >
-                <Avatar
-                  account={account}
-                  className='h-20 w-20 bg-gray-50 ring-2 ring-white'
-                />
-              </Link>
-
-              {action && (
-                <div className='mt-2'>{action}</div>
-              )}
-            </HStack>
-          </Stack>
-
-          <Stack>
-            <Link to={`/@${account.get('acct')}`}>
-              <HStack space={1} alignItems='center'>
-                <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
-
-                {verified && <VerificationBadge />}
-
-                {badges.length > 0 && (
-                  <HStack space={1} alignItems='center'>
-                    {badges}
-                  </HStack>
-                )}
-              </HStack>
-            </Link>
-
-            <Text size='sm' theme='muted'>
-              @{getAcct(account, displayFqn)}
-            </Text>
-          </Stack>
-
-          <HStack alignItems='center' space={3}>
-            {account.get('followers_count') >= 0 && (
-              <Link to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
-                <HStack alignItems='center' space={1}>
-                  <Text theme='primary' weight='bold' size='sm'>
-                    {shortNumberFormat(account.get('followers_count'))}
-                  </Text>
-                  <Text weight='bold' size='sm'>
-                    <FormattedMessage id='account.followers' defaultMessage='Followers' />
-                  </Text>
-                </HStack>
-              </Link>
-            )}
-
-            {account.get('following_count') >= 0 && (
-              <Link to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
-                <HStack alignItems='center' space={1}>
-                  <Text theme='primary' weight='bold' size='sm'>
-                    {shortNumberFormat(account.get('following_count'))}
-                  </Text>
-                  <Text weight='bold' size='sm'>
-                    <FormattedMessage id='account.follows' defaultMessage='Follows' />
-                  </Text>
-                </HStack>
-              </Link>
-            )}
-          </HStack>
-        </Stack>
-      </div>
-    );
-  }
-
-}
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, { accountId }) => ({
-    account: getAccount(state, accountId),
-    displayFqn: displayFqn(state),
-  });
-
-  return mapStateToProps;
-};
-
-export default injectIntl(
-  connect(makeMapStateToProps, null, null, {
-    forwardRef: true,
-  })(UserPanel));
diff --git a/app/soapbox/features/ui/components/user_panel.tsx b/app/soapbox/features/ui/components/user_panel.tsx
new file mode 100644
index 000000000..6bf77b659
--- /dev/null
+++ b/app/soapbox/features/ui/components/user_panel.tsx
@@ -0,0 +1,119 @@
+import React from 'react';
+import { FormattedMessage, useIntl } from 'react-intl';
+import { Link } from 'react-router-dom';
+
+import Avatar from 'soapbox/components/avatar';
+import StillImage from 'soapbox/components/still_image';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
+import VerificationBadge from 'soapbox/components/verification_badge';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+import { getAcct } from 'soapbox/utils/accounts';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+import { displayFqn } from 'soapbox/utils/state';
+
+const getAccount = makeGetAccount();
+
+interface IUserPanel {
+  accountId: string,
+  action?: JSX.Element,
+  badges?: JSX.Element[],
+  domain?: string,
+}
+
+const UserPanel: React.FC<IUserPanel> = ({ accountId, action, badges, domain }) => {
+  const intl = useIntl();
+  const account = useAppSelector((state) => getAccount(state, accountId));
+  const fqn = useAppSelector((state) => displayFqn(state));
+
+  if (!account) return null;
+  const displayNameHtml = { __html: account.get('display_name_html') };
+  const acct = account.get('acct').indexOf('@') === -1 && domain ? `${account.get('acct')}@${domain}` : account.get('acct');
+  const header = account.get('header');
+  const verified = account.get('verified');
+
+  return (
+    <div className='relative'>
+      <Stack space={2}>
+        <Stack>
+          <div className='-mt-4 -mx-4 h-24 bg-gray-200 relative'>
+            {header && (
+              <StillImage
+                src={account.get('header')}
+                className='absolute inset-0 object-cover'
+                alt=''
+              />
+            )}
+          </div>
+
+          <HStack justifyContent='between'>
+            <Link
+              to={`/@${account.get('acct')}`}
+              title={acct}
+              className='-mt-12 block'
+            >
+              <Avatar
+                account={account}
+                className='h-20 w-20 bg-gray-50 ring-2 ring-white'
+              />
+            </Link>
+
+            {action && (
+              <div className='mt-2'>{action}</div>
+            )}
+          </HStack>
+        </Stack>
+
+        <Stack>
+          <Link to={`/@${account.get('acct')}`}>
+            <HStack space={1} alignItems='center'>
+              <Text size='lg' weight='bold' dangerouslySetInnerHTML={displayNameHtml} />
+
+              {verified && <VerificationBadge />}
+
+              {badges && badges.length > 0 && (
+                <HStack space={1} alignItems='center'>
+                  {badges}
+                </HStack>
+              )}
+            </HStack>
+          </Link>
+
+          <Text size='sm' theme='muted'>
+            @{getAcct(account, fqn)}
+          </Text>
+        </Stack>
+
+        <HStack alignItems='center' space={3}>
+          {account.get('followers_count') >= 0 && (
+            <Link to={`/@${account.get('acct')}/followers`} title={intl.formatNumber(account.get('followers_count'))}>
+              <HStack alignItems='center' space={1}>
+                <Text theme='primary' weight='bold' size='sm'>
+                  {shortNumberFormat(account.get('followers_count'))}
+                </Text>
+                <Text weight='bold' size='sm'>
+                  <FormattedMessage id='account.followers' defaultMessage='Followers' />
+                </Text>
+              </HStack>
+            </Link>
+          )}
+
+          {account.get('following_count') >= 0 && (
+            <Link to={`/@${account.get('acct')}/following`} title={intl.formatNumber(account.get('following_count'))}>
+              <HStack alignItems='center' space={1}>
+                <Text theme='primary' weight='bold' size='sm'>
+                  {shortNumberFormat(account.get('following_count'))}
+                </Text>
+                <Text weight='bold' size='sm'>
+                  <FormattedMessage id='account.follows' defaultMessage='Follows' />
+                </Text>
+              </HStack>
+            </Link>
+          )}
+        </HStack>
+      </Stack>
+    </div>
+  );
+};
+
+export default UserPanel;
diff --git a/app/soapbox/features/ui/util/pending_status_builder.js b/app/soapbox/features/ui/util/pending_status_builder.ts
similarity index 66%
rename from app/soapbox/features/ui/util/pending_status_builder.js
rename to app/soapbox/features/ui/util/pending_status_builder.ts
index 8ea186f56..e74b0a897 100644
--- a/app/soapbox/features/ui/util/pending_status_builder.js
+++ b/app/soapbox/features/ui/util/pending_status_builder.ts
@@ -4,9 +4,11 @@ import { normalizeStatus } from 'soapbox/normalizers/status';
 import { calculateStatus } from 'soapbox/reducers/statuses';
 import { makeGetAccount } from 'soapbox/selectors';
 
+import type { RootState } from 'soapbox/store';
+
 const getAccount = makeGetAccount();
 
-const buildMentions = pendingStatus => {
+const buildMentions = (pendingStatus: ImmutableMap<string, any>) => {
   if (pendingStatus.get('in_reply_to_id')) {
     return ImmutableList(pendingStatus.get('to') || []).map(acct => ImmutableMap({ acct }));
   } else {
@@ -14,18 +16,18 @@ const buildMentions = pendingStatus => {
   }
 };
 
-const buildPoll = pendingStatus => {
+const buildPoll = (pendingStatus: ImmutableMap<string, any>) => {
   if (pendingStatus.hasIn(['poll', 'options'])) {
-    return pendingStatus.get('poll').update('options', options => {
-      return options.map(title => ImmutableMap({ title }));
+    return pendingStatus.get('poll').update('options', (options: ImmutableMap<string, any>) => {
+      return options.map((title: string) => ImmutableMap({ title }));
     });
   } else {
     return null;
   }
 };
 
-export const buildStatus = (state, pendingStatus, idempotencyKey) => {
-  const me = state.get('me');
+export const buildStatus = (state: RootState, pendingStatus: ImmutableMap<string, any>, idempotencyKey: string) => {
+  const me = state.me as string;
   const account = getAccount(state, me);
   const inReplyToId = pendingStatus.get('in_reply_to_id');
 
@@ -33,9 +35,9 @@ export const buildStatus = (state, pendingStatus, idempotencyKey) => {
     account,
     content: pendingStatus.get('status', '').replace(new RegExp('\n', 'g'), '<br>'), /* eslint-disable-line no-control-regex */
     id: `末pending-${idempotencyKey}`,
-    in_reply_to_account_id: state.getIn(['statuses', inReplyToId, 'account'], null),
+    in_reply_to_account_id: state.statuses.getIn([inReplyToId, 'account'], null),
     in_reply_to_id: inReplyToId,
-    media_attachments: pendingStatus.get('media_ids', ImmutableList()).map(id => ImmutableMap({ id })),
+    media_attachments: pendingStatus.get('media_ids', ImmutableList()).map((id: string) => ImmutableMap({ id })),
     mentions: buildMentions(pendingStatus),
     poll: buildPoll(pendingStatus),
     quote: pendingStatus.get('quote_id', null),
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 160fef0b4..5c2c4e1ff 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -802,23 +802,6 @@
   }
 }
 
-.timeline-filter-message {
-  display: flex;
-  align-items: center;
-  background-color: var(--brand-color--faint);
-  color: var(--primary-text-color);
-  padding: 15px 20px;
-
-  .icon-button {
-    margin: 2px 8px 2px 0;
-
-    .svg-icon {
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
-
 .column--better {
   .column__top {
     display: flex;
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index 47e2da514..e3a717fbc 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -47,7 +47,7 @@
     @apply focus-within:ring-primary-500 focus-within:ring-2;
 
     a {
-      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 focus:bg-gray-100 focus:hover:bg-slate-800 cursor-pointer;
+      @apply flex px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-slate-800 focus:bg-gray-100 dark:focus:bg-slate-800 cursor-pointer;
 
       > .svg-icon:first-child {
         @apply h-5 w-5 mr-2.5 transition-none;
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index a49315450..13adcd8ff 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -133,10 +133,6 @@
     line-height: 18px;
   }
 
-  &__footer {
-    @apply pt-1.5 pb-[5px] text-black dark:text-white;
-  }
-
   &__link {
     display: inline;
     background: transparent;
@@ -180,18 +176,6 @@
     padding: 10px;
   }
 
-  .poll__footer {
-    border-top: 1px solid var(--foreground-color);
-    padding: 10px;
-    margin: -5px 0 0 -5px;
-
-    button,
-    select {
-      flex: 1 1 50%;
-      margin: 5px 0 0 5px;
-    }
-  }
-
   .button.button-secondary {
     @apply h-auto py-1.5 px-2.5 text-primary-600 dark:text-primary-400 border-primary-600;
   }

From 4e3935d0448dce2c997f2fc5126cd64fca9b7603 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 28 May 2022 13:15:23 -0500
Subject: [PATCH 069/102] Upgrade to React 17

---
 package.json |  4 ++--
 yarn.lock    | 28 +++++++++++++---------------
 2 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index 6747d5a61..05a64183b 100644
--- a/package.json
+++ b/package.json
@@ -149,10 +149,10 @@
     "prop-types": "^15.5.10",
     "punycode": "^2.1.0",
     "qrcode.react": "^1.0.0",
-    "react": "^16.13.1",
+    "react": "^17.0.2",
     "react-color": "^2.18.1",
     "react-datepicker": "^4.7.0",
-    "react-dom": "^16.13.1",
+    "react-dom": "^17.0.2",
     "react-helmet": "^6.0.0",
     "react-hotkeys": "^1.1.4",
     "react-immutable-proptypes": "^2.1.0",
diff --git a/yarn.lock b/yarn.lock
index ab23759cf..26d668711 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -8796,15 +8796,14 @@ react-datepicker@^4.7.0:
     react-onclickoutside "^6.12.0"
     react-popper "^2.2.5"
 
-react-dom@^16.13.1:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
+  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.2"
 
 react-event-listener@^0.6.0:
   version "0.6.6"
@@ -9091,14 +9090,13 @@ react-virtuoso@^2.9.1:
     "@virtuoso.dev/react-urx" "^0.2.12"
     "@virtuoso.dev/urx" "^0.2.12"
 
-react@^16.13.1:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^17.0.2:
+  version "17.0.2"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
+  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -9531,10 +9529,10 @@ saxes@^5.0.1:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
+  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"

From a3d1d2dc9191f6581127598264ec21e815a19cb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 28 May 2022 21:53:22 +0200
Subject: [PATCH 070/102] TS, FC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../auth_login/components/otp_auth_form.js    | 101 ------------------
 .../auth_login/components/otp_auth_form.tsx   |  88 +++++++++++++++
 .../auth_login/components/password_reset.js   |  72 -------------
 .../auth_login/components/password_reset.tsx  |  66 ++++++++++++
 app/soapbox/features/new_status/index.js      |  34 ------
 app/soapbox/features/new_status/index.tsx     |  20 ++++
 .../components/pinned_hosts_picker.tsx        |   2 -
 .../features/reply_mentions/account.js        |  94 ----------------
 .../features/reply_mentions/account.tsx       |  67 ++++++++++++
 app/soapbox/features/server_info/index.js     |  48 ---------
 app/soapbox/features/server_info/index.tsx    |  36 +++++++
 .../{media_display.js => media_display.tsx}   |  19 ++--
 app/soapbox/features/share/index.js           |  47 --------
 app/soapbox/features/share/index.tsx          |  30 ++++++
 .../components/site-preview.tsx               |   1 -
 .../ui/components/reply_mentions_modal.tsx    |   2 +-
 .../{email_passthru.js => email_passthru.tsx} |  13 +--
 .../{waitlist_page.js => waitlist_page.tsx}   |  11 +-
 18 files changed, 323 insertions(+), 428 deletions(-)
 delete mode 100644 app/soapbox/features/auth_login/components/otp_auth_form.js
 create mode 100644 app/soapbox/features/auth_login/components/otp_auth_form.tsx
 delete mode 100644 app/soapbox/features/auth_login/components/password_reset.js
 create mode 100644 app/soapbox/features/auth_login/components/password_reset.tsx
 delete mode 100644 app/soapbox/features/new_status/index.js
 create mode 100644 app/soapbox/features/new_status/index.tsx
 delete mode 100644 app/soapbox/features/reply_mentions/account.js
 create mode 100644 app/soapbox/features/reply_mentions/account.tsx
 delete mode 100644 app/soapbox/features/server_info/index.js
 create mode 100644 app/soapbox/features/server_info/index.tsx
 rename app/soapbox/features/settings/{media_display.js => media_display.tsx} (78%)
 delete mode 100644 app/soapbox/features/share/index.js
 create mode 100644 app/soapbox/features/share/index.tsx
 rename app/soapbox/features/verification/{email_passthru.js => email_passthru.tsx} (96%)
 rename app/soapbox/features/verification/{waitlist_page.js => waitlist_page.tsx} (91%)

diff --git a/app/soapbox/features/auth_login/components/otp_auth_form.js b/app/soapbox/features/auth_login/components/otp_auth_form.js
deleted file mode 100644
index 0446a7afe..000000000
--- a/app/soapbox/features/auth_login/components/otp_auth_form.js
+++ /dev/null
@@ -1,101 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { injectIntl, FormattedMessage, defineMessages } from 'react-intl';
-import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
-
-import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
-import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
-
-const messages = defineMessages({
-  otpCodeHint: { id: 'login.fields.otp_code_hint', defaultMessage: 'Enter the two-factor code generated by your phone app or use one of your recovery codes' },
-  otpCodeLabel: { id: 'login.fields.otp_code_label', defaultMessage: 'Two-factor code:' },
-  otpLoginFail: { id: 'login.otp_log_in.fail', defaultMessage: 'Invalid code, please try again.' },
-});
-
-export default @connect()
-@injectIntl
-class OtpAuthForm extends ImmutablePureComponent {
-
-  state = {
-    isLoading: false,
-    code_error: '',
-    shouldRedirect: false,
-  }
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    mfa_token:  PropTypes.string,
-  };
-
-  getFormData = (form) => {
-    return Object.fromEntries(
-      Array.from(form).map(i => [i.name, i.value]),
-    );
-  }
-
-  handleSubmit = (event) => {
-    const { dispatch, mfa_token } = this.props;
-    const { code } = this.getFormData(event.target);
-    dispatch(otpVerify(code, mfa_token)).then(({ access_token }) => {
-      this.setState({ code_error: false });
-      return dispatch(verifyCredentials(access_token));
-    }).then(account => {
-      this.setState({ shouldRedirect: true });
-      return dispatch(switchAccount(account.id));
-    }).catch(error => {
-      this.setState({ isLoading: false, code_error: true });
-    });
-    this.setState({ isLoading: true });
-    event.preventDefault();
-  }
-
-  render() {
-    const { intl } = this.props;
-    const { code_error, shouldRedirect } = this.state;
-
-    if (shouldRedirect) return <Redirect to='/' />;
-
-    return (
-      <div>
-        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
-          <h1 className='text-center font-bold text-2xl'>
-            <FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />
-          </h1>
-        </div>
-
-        <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
-          <Form onSubmit={this.handleSubmit}>
-            <FormGroup
-              labelText={intl.formatMessage(messages.otpCodeLabel)}
-              hintText={intl.formatMessage(messages.otpCodeHint)}
-              errors={code_error ? [intl.formatMessage(messages.otpLoginFail)] : []}
-            >
-              <Input
-                name='code'
-                type='text'
-                autoComplete='off'
-                onChange={this.onInputChange}
-                autoFocus
-                required
-              />
-            </FormGroup>
-
-            <FormActions>
-              <Button
-                theme='primary'
-                type='submit'
-                disabled={this.state.isLoading}
-              >
-                <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
-              </Button>
-            </FormActions>
-          </Form>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/auth_login/components/otp_auth_form.tsx b/app/soapbox/features/auth_login/components/otp_auth_form.tsx
new file mode 100644
index 000000000..eaeade08b
--- /dev/null
+++ b/app/soapbox/features/auth_login/components/otp_auth_form.tsx
@@ -0,0 +1,88 @@
+import React, { useState } from 'react';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { Redirect } from 'react-router-dom';
+
+import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  otpCodeHint: { id: 'login.fields.otp_code_hint', defaultMessage: 'Enter the two-factor code generated by your phone app or use one of your recovery codes' },
+  otpCodeLabel: { id: 'login.fields.otp_code_label', defaultMessage: 'Two-factor code:' },
+  otpLoginFail: { id: 'login.otp_log_in.fail', defaultMessage: 'Invalid code, please try again.' },
+});
+
+interface IOtpAuthForm {
+  mfa_token: string,
+}
+
+const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [shouldRedirect, setShouldRedirect] = useState(false);
+  const [codeError, setCodeError] = useState<string | boolean>('');
+
+  const getFormData = (form: any) => Object.fromEntries(
+    Array.from(form).map((i: any) => [i.name, i.value]),
+  );
+
+  const handleSubmit = (event: React.FormEvent<Element>) => {
+    const { code } = getFormData(event.target);
+    dispatch(otpVerify(code, mfa_token)).then(({ access_token }) => {
+      setCodeError(false);
+      return dispatch(verifyCredentials(access_token));
+    }).then(account => {
+      setShouldRedirect(true);
+      return dispatch(switchAccount(account.id));
+    }).catch(() => {
+      setIsLoading(false);
+      setCodeError(true);
+    });
+    setIsLoading(true);
+    event.preventDefault();
+  };
+
+  if (shouldRedirect) return <Redirect to='/' />;
+
+  return (
+    <div>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
+        <h1 className='text-center font-bold text-2xl'>
+          <FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />
+        </h1>
+      </div>
+
+      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+        <Form onSubmit={handleSubmit}>
+          <FormGroup
+            labelText={intl.formatMessage(messages.otpCodeLabel)}
+            hintText={intl.formatMessage(messages.otpCodeHint)}
+            errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
+          >
+            <Input
+              name='code'
+              type='text'
+              autoComplete='off'
+              autoFocus
+              required
+            />
+          </FormGroup>
+
+          <FormActions>
+            <Button
+              theme='primary'
+              type='submit'
+              disabled={isLoading}
+            >
+              <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
+            </Button>
+          </FormActions>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default OtpAuthForm;
diff --git a/app/soapbox/features/auth_login/components/password_reset.js b/app/soapbox/features/auth_login/components/password_reset.js
deleted file mode 100644
index f047207be..000000000
--- a/app/soapbox/features/auth_login/components/password_reset.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
-
-import { resetPassword } from 'soapbox/actions/security';
-import snackbar from 'soapbox/actions/snackbar';
-
-import { Button, Form, FormActions, FormGroup, Input } from '../../../components/ui';
-
-const messages = defineMessages({
-  nicknameOrEmail: { id: 'password_reset.fields.username_placeholder', defaultMessage: 'Email or username' },
-  confirmation: { id: 'password_reset.confirmation', defaultMessage: 'Check your email for confirmation.' },
-});
-
-export default @connect()
-@injectIntl
-class PasswordReset extends ImmutablePureComponent {
-
-  state = {
-    isLoading: false,
-    success: false,
-  }
-
-  handleSubmit = e => {
-    const { dispatch, intl } = this.props;
-    const nicknameOrEmail = e.target.nickname_or_email.value;
-    this.setState({ isLoading: true });
-    dispatch(resetPassword(nicknameOrEmail)).then(() => {
-      this.setState({ isLoading: false, success: true });
-      dispatch(snackbar.info(intl.formatMessage(messages.confirmation)));
-    }).catch(error => {
-      this.setState({ isLoading: false });
-    });
-  }
-
-  render() {
-    const { intl } = this.props;
-
-    if (this.state.success) return <Redirect to='/' />;
-
-    return (
-      <div>
-        <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
-          <h1 className='text-center font-bold text-2xl'>
-            <FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
-          </h1>
-        </div>
-
-        <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
-          <Form onSubmit={this.handleSubmit}>
-            <FormGroup labelText={intl.formatMessage(messages.nicknameOrEmail)}>
-              <Input
-                name='nickname_or_email'
-                placeholder='me@example.com'
-                required
-              />
-            </FormGroup>
-
-            <FormActions>
-              <Button type='submit' theme='primary' disabled={this.state.isLoading}>
-                <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
-              </Button>
-            </FormActions>
-          </Form>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/auth_login/components/password_reset.tsx b/app/soapbox/features/auth_login/components/password_reset.tsx
new file mode 100644
index 000000000..bcd7976c6
--- /dev/null
+++ b/app/soapbox/features/auth_login/components/password_reset.tsx
@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { Redirect } from 'react-router-dom';
+
+import { resetPassword } from 'soapbox/actions/security';
+import snackbar from 'soapbox/actions/snackbar';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const messages = defineMessages({
+  nicknameOrEmail: { id: 'password_reset.fields.username_placeholder', defaultMessage: 'Email or username' },
+  confirmation: { id: 'password_reset.confirmation', defaultMessage: 'Check your email for confirmation.' },
+});
+
+const PasswordReset = () => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const [isLoading, setIsLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const handleSubmit = (e: React.FormEvent<Element>) => {
+    const nicknameOrEmail = (e.target as any).nickname_or_email.value;
+    setIsLoading(true);
+    dispatch(resetPassword(nicknameOrEmail)).then(() => {
+      setIsLoading(false);
+      setSuccess(true);
+      dispatch(snackbar.info(intl.formatMessage(messages.confirmation)));
+    }).catch(() => {
+      setIsLoading(false);
+    });
+  };
+
+  if (success) return <Redirect to='/' />;
+
+  return (
+    <div>
+      <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 dark:border-gray-600 border-solid -mx-4 sm:-mx-10'>
+        <h1 className='text-center font-bold text-2xl'>
+          <FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
+        </h1>
+      </div>
+
+      <div className='sm:pt-10 sm:w-2/3 md:w-1/2 mx-auto'>
+        <Form onSubmit={handleSubmit}>
+          <FormGroup labelText={intl.formatMessage(messages.nicknameOrEmail)}>
+            <Input
+              type='text'
+              name='nickname_or_email'
+              placeholder='me@example.com'
+              required
+            />
+          </FormGroup>
+
+          <FormActions>
+            <Button type='submit' theme='primary' disabled={isLoading}>
+              <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
+            </Button>
+          </FormActions>
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default PasswordReset;
diff --git a/app/soapbox/features/new_status/index.js b/app/soapbox/features/new_status/index.js
deleted file mode 100644
index ef6092b11..000000000
--- a/app/soapbox/features/new_status/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
-
-import { openModal } from '../../actions/modals';
-
-const mapDispatchToProps = dispatch => ({
-
-  onLoad: (text) => {
-    dispatch(openModal('COMPOSE'));
-  },
-
-});
-
-export default @connect(null, mapDispatchToProps)
-class NewStatus extends React.Component {
-
-  static propTypes = {
-    onLoad: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-    this.props.onLoad();
-  }
-
-  render() {
-    return (
-      <Redirect to='/' />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/new_status/index.tsx b/app/soapbox/features/new_status/index.tsx
new file mode 100644
index 000000000..322976afc
--- /dev/null
+++ b/app/soapbox/features/new_status/index.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { Redirect } from 'react-router-dom';
+
+import { openModal } from 'soapbox/actions/modals';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const NewStatus = () => {
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(openModal('COMPOSE'));
+  }, []);
+
+  return (
+    <Redirect to='/' />
+  );
+};
+
+export default NewStatus;
diff --git a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
index aa7940761..3f08e94d6 100644
--- a/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
+++ b/app/soapbox/features/remote_timeline/components/pinned_hosts_picker.tsx
@@ -1,8 +1,6 @@
 'use strict';
 
-import classNames from 'classnames';
 import React from 'react';
-import { Link } from 'react-router-dom';
 
 import { Button, HStack } from 'soapbox/components/ui';
 import { useSettings } from 'soapbox/hooks';
diff --git a/app/soapbox/features/reply_mentions/account.js b/app/soapbox/features/reply_mentions/account.js
deleted file mode 100644
index b9bf62d51..000000000
--- a/app/soapbox/features/reply_mentions/account.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchAccount } from 'soapbox/actions/accounts';
-import { addToMentions, removeFromMentions } from 'soapbox/actions/compose';
-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';
-
-const messages = defineMessages({
-  remove: { id: 'reply_mentions.account.remove', defaultMessage: 'Remove from mentions' },
-  add: { id: 'reply_mentions.account.add', defaultMessage: 'Add to mentions' },
-});
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, { accountId }) => {
-    const account = getAccount(state, accountId);
-
-    return {
-      added: !!account && state.getIn(['compose', 'to']).includes(account.get('acct')),
-      account,
-    };
-  };
-
-  return mapStateToProps;
-};
-
-const mapDispatchToProps = (dispatch, { accountId }) => ({
-  onRemove: () => dispatch(removeFromMentions(accountId)),
-  onAdd: () => dispatch(addToMentions(accountId)),
-  fetchAccount: () => dispatch(fetchAccount(accountId)),
-});
-
-export default @connect(makeMapStateToProps, mapDispatchToProps)
-@injectIntl
-class Account extends ImmutablePureComponent {
-
-  static propTypes = {
-    accountId: PropTypes.string.isRequired,
-    intl: PropTypes.object.isRequired,
-    onRemove: PropTypes.func.isRequired,
-    onAdd: PropTypes.func.isRequired,
-    added: PropTypes.bool,
-    author: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    added: false,
-  };
-
-  componentDidMount() {
-    const { account, accountId } = this.props;
-
-    if (accountId && !account) {
-      this.props.fetchAccount(accountId);
-    }
-  }
-
-  render() {
-    const { account, intl, onRemove, onAdd, added, author } = this.props;
-
-    if (!account) return null;
-
-    let button;
-
-    if (added) {
-      button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
-    } else {
-      button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
-    }
-
-    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>
-
-          <div className='account__relationship'>
-            {!author && button}
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/reply_mentions/account.tsx b/app/soapbox/features/reply_mentions/account.tsx
new file mode 100644
index 000000000..c4817e8cf
--- /dev/null
+++ b/app/soapbox/features/reply_mentions/account.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { fetchAccount } from 'soapbox/actions/accounts';
+import { addToMentions, removeFromMentions } from 'soapbox/actions/compose';
+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';
+
+const messages = defineMessages({
+  remove: { id: 'reply_mentions.account.remove', defaultMessage: 'Remove from mentions' },
+  add: { id: 'reply_mentions.account.add', defaultMessage: 'Add to mentions' },
+});
+
+const getAccount = makeGetAccount();
+
+interface IAccount {
+  accountId: string,
+  author: boolean,
+}
+
+const Account: React.FC<IAccount> = ({ accountId, author }) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const account = useAppSelector((state) => getAccount(state, accountId));
+  const added = useAppSelector((state) => !!account && state.compose.get('to').includes(account.acct));
+
+  const onRemove = () => dispatch(removeFromMentions(accountId));
+  const onAdd = () => dispatch(addToMentions(accountId));
+
+  useEffect(() => {
+    if (accountId && !account) {
+      dispatch(fetchAccount(accountId));
+    }
+  }, []);
+
+  if (!account) return null;
+
+  let button;
+
+  if (added) {
+    button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+  } else {
+    button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+  }
+
+  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>
+
+        <div className='account__relationship'>
+          {!author && button}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Account;
diff --git a/app/soapbox/features/server_info/index.js b/app/soapbox/features/server_info/index.js
deleted file mode 100644
index a7d19c72a..000000000
--- a/app/soapbox/features/server_info/index.js
+++ /dev/null
@@ -1,48 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import Column from '../ui/components/column';
-import LinkFooter from '../ui/components/link_footer';
-import PromoPanel from '../ui/components/promo_panel';
-
-const messages = defineMessages({
-  heading: { id: 'column.info', defaultMessage: 'Server information' },
-});
-
-const mapStateToProps = (state, props) => ({
-  instance: state.get('instance'),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class ServerInfo extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { intl, instance } = this.props;
-
-    return (
-      <Column icon='info' label={intl.formatMessage(messages.heading)}>
-        <div className='info_column_area'>
-          <div className='info__brand'>
-            <div className='brand'>
-              <h1>{instance.get('title')}</h1>
-            </div>
-            <div className='brand__tagline'>
-              <span>{instance.get('description')}</span>
-            </div>
-          </div>
-          <PromoPanel />
-          <LinkFooter />
-        </div>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/server_info/index.tsx b/app/soapbox/features/server_info/index.tsx
new file mode 100644
index 000000000..0e12538d4
--- /dev/null
+++ b/app/soapbox/features/server_info/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useAppSelector } from 'soapbox/hooks';
+
+import Column from '../ui/components/column';
+import LinkFooter from '../ui/components/link_footer';
+import PromoPanel from '../ui/components/promo_panel';
+
+const messages = defineMessages({
+  heading: { id: 'column.info', defaultMessage: 'Server information' },
+});
+
+const ServerInfo = () => {
+  const intl = useIntl();
+  const instance = useAppSelector((state) => state.instance);
+
+  return (
+    <Column icon='info' label={intl.formatMessage(messages.heading)}>
+      <div className='info_column_area'>
+        <div className='info__brand'>
+          <div className='brand'>
+            <h1>{instance.title}</h1>
+          </div>
+          <div className='brand__tagline'>
+            <span>{instance.description}</span>
+          </div>
+        </div>
+        <PromoPanel />
+        <LinkFooter />
+      </div>
+    </Column>
+  );
+};
+
+export default ServerInfo;
diff --git a/app/soapbox/features/settings/media_display.js b/app/soapbox/features/settings/media_display.tsx
similarity index 78%
rename from app/soapbox/features/settings/media_display.js
rename to app/soapbox/features/settings/media_display.tsx
index 0ce0eb51a..ee522347f 100644
--- a/app/soapbox/features/settings/media_display.js
+++ b/app/soapbox/features/settings/media_display.tsx
@@ -1,16 +1,11 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
 import { getSettings, changeSettingImmediate } from 'soapbox/actions/settings';
-import {
-  SimpleForm,
-  SelectDropdown,
-} from 'soapbox/features/forms';
-import { useAppSelector } from 'soapbox/hooks';
-
-import List, { ListItem } from '../../components/list';
-import { Card, CardBody, CardHeader, CardTitle } from '../../components/ui';
+import List, { ListItem } from 'soapbox/components/list';
+import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui';
+import { SimpleForm, SelectDropdown } from 'soapbox/features/forms';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
   mediaDisplay: { id: 'preferences.fields.media_display_label', defaultMessage: 'Media display' },
@@ -20,7 +15,7 @@ const messages = defineMessages({
 });
 
 const MediaDisplay = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const intl = useIntl();
 
   const settings = useAppSelector((state) => getSettings(state));
@@ -31,7 +26,7 @@ const MediaDisplay = () => {
     show_all: intl.formatMessage(messages.display_media_show_all),
   };
 
-  const onSelectChange = path => {
+  const onSelectChange: (path: string[]) => React.ChangeEventHandler<HTMLSelectElement> = path => {
     return e => {
       dispatch(changeSettingImmediate(path, e.target.value));
     };
@@ -49,7 +44,7 @@ const MediaDisplay = () => {
             <ListItem label={intl.formatMessage(messages.mediaDisplay)}>
               <SelectDropdown
                 items={displayMediaOptions}
-                defaultValue={settings.get('displayMedia')}
+                defaultValue={settings.get('displayMedia') as string}
                 onChange={onSelectChange(['displayMedia'])}
               />
             </ListItem>
diff --git a/app/soapbox/features/share/index.js b/app/soapbox/features/share/index.js
deleted file mode 100644
index ff6dd18f3..000000000
--- a/app/soapbox/features/share/index.js
+++ /dev/null
@@ -1,47 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { connect } from 'react-redux';
-import { Redirect } from 'react-router-dom';
-
-import { openComposeWithText } from '../../actions/compose';
-
-const mapDispatchToProps = dispatch => ({
-
-  onShare: (text) => {
-    dispatch(openComposeWithText(text));
-  },
-
-});
-
-export default @connect(null, mapDispatchToProps)
-class Share extends React.Component {
-
-  static propTypes = {
-    onShare: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-
-    const params = new URLSearchParams(window.location.search);
-
-    const text = [
-      params.get('title'),
-      params.get('text'),
-      params.get('url'),
-    ]
-      .filter(v => v)
-      .join('\n\n');
-
-    if (text) {
-      this.props.onShare(text);
-    }
-  }
-
-  render() {
-    return (
-      <Redirect to='/' />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/share/index.tsx b/app/soapbox/features/share/index.tsx
new file mode 100644
index 000000000..562f23689
--- /dev/null
+++ b/app/soapbox/features/share/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Redirect, useLocation } from 'react-router-dom';
+
+import { openComposeWithText } from 'soapbox/actions/compose';
+import { useAppDispatch } from 'soapbox/hooks';
+
+const Share = () => {
+  const dispatch = useAppDispatch();
+
+  const { search } = useLocation();
+  const params = new URLSearchParams(search);
+
+  const text = [
+    params.get('title'),
+    params.get('text'),
+    params.get('url'),
+  ]
+    .filter(v => v)
+    .join('\n\n');
+
+  if (text) {
+    dispatch(openComposeWithText(text));
+  }
+
+  return (
+    <Redirect to='/' />
+  );
+};
+
+export default Share;
\ No newline at end of file
diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx
index 8721be6ff..1c4efc92f 100644
--- a/app/soapbox/features/soapbox_config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox_config/components/site-preview.tsx
@@ -49,7 +49,6 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
       })}
       >
         <SiteLogo alt='Logo' className='h-5 lg:h-6 w-auto self-center px-2' theme={dark ? 'dark' : 'light'} />
-        {/* <img alt='Logo' className='h-5 lg:h-6 self-center px-2' src={soapboxConfig.logo} /> */}
       </div>
     </div>
   );
diff --git a/app/soapbox/features/ui/components/reply_mentions_modal.tsx b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
index c1d3422fb..b1a959afb 100644
--- a/app/soapbox/features/ui/components/reply_mentions_modal.tsx
+++ b/app/soapbox/features/ui/components/reply_mentions_modal.tsx
@@ -33,7 +33,7 @@ const ReplyMentionsModal: React.FC<IReplyMentionsModal> = ({ onClose }) => {
       closePosition='left'
     >
       <div className='reply-mentions-modal__accounts'>
-        {mentions.map(accountId => <Account key={accountId} accountId={accountId} added author={author === accountId} />)}
+        {mentions.map(accountId => <Account key={accountId} accountId={accountId} author={author === accountId} />)}
       </div>
     </Modal>
   );
diff --git a/app/soapbox/features/verification/email_passthru.js b/app/soapbox/features/verification/email_passthru.tsx
similarity index 96%
rename from app/soapbox/features/verification/email_passthru.js
rename to app/soapbox/features/verification/email_passthru.tsx
index 52b791c52..d014143aa 100644
--- a/app/soapbox/features/verification/email_passthru.js
+++ b/app/soapbox/features/verification/email_passthru.tsx
@@ -1,7 +1,8 @@
-import PropTypes from 'prop-types';
+import { AxiosError } from 'axios';
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
+import { useParams } from 'react-router-dom';
 
 import snackbar from 'soapbox/actions/snackbar';
 import { confirmEmailVerification } from 'soapbox/actions/verification';
@@ -91,8 +92,8 @@ const TokenExpired = () => {
   );
 };
 
-const EmailPassThru = ({ match }) => {
-  const { token } = match.params;
+const EmailPassThru = () => {
+  const { token } = useParams<{ token: string }>();
 
   const dispatch = useDispatch();
   const intl = useIntl();
@@ -106,7 +107,7 @@ const EmailPassThru = ({ match }) => {
           setStatus(Statuses.SUCCESS);
           dispatch(snackbar.success(intl.formatMessage({ id: 'email_passthru.success', defaultMessage: 'Your email has been verified!' })));
         })
-        .catch((error) => {
+        .catch((error: AxiosError<any>) => {
           const errorKey = error?.response?.data?.error;
           let message = intl.formatMessage({
             id: 'email_passthru.fail.generic',
@@ -155,8 +156,4 @@ const EmailPassThru = ({ match }) => {
   }
 };
 
-EmailPassThru.propTypes = {
-  match: PropTypes.object,
-};
-
 export default EmailPassThru;
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.tsx
similarity index 91%
rename from app/soapbox/features/verification/waitlist_page.js
rename to app/soapbox/features/verification/waitlist_page.tsx
index 14047b7b1..0a28f4993 100644
--- a/app/soapbox/features/verification/waitlist_page.js
+++ b/app/soapbox/features/verification/waitlist_page.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import { useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
@@ -12,15 +11,15 @@ import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
 import { logOut } from '../../actions/auth';
 import { Button, Stack, Text } from '../../components/ui';
 
-const WaitlistPage = ({ account }) => {
+const WaitlistPage = (/* { account } */) => {
   const dispatch = useDispatch();
   const intl = useIntl();
   const title = useAppSelector((state) => state.instance.title);
 
   const me = useOwnAccount();
-  const isSmsVerified = me.getIn(['source', 'sms_verified']);
+  const isSmsVerified = me?.source.get('sms_verified');
 
-  const onClickLogOut = (event) => {
+  const onClickLogOut: React.MouseEventHandler = (event) => {
     event.preventDefault();
     dispatch(logOut(intl));
   };
@@ -76,8 +75,4 @@ const WaitlistPage = ({ account }) => {
   );
 };
 
-WaitlistPage.propTypes = {
-  account: PropTypes.object,
-};
-
 export default WaitlistPage;

From e6c3f4fbdfa84d54033d344641edebf0df439cd4 Mon Sep 17 00:00:00 2001
From: Isabell Deinschnitzel
 <6174132-iss_dein_schnitzel@users.noreply.gitlab.com>
Date: Sun, 29 May 2022 20:05:31 +0000
Subject: [PATCH 071/102] =?UTF-8?q?Update=20de.json=20Erg=C3=A4nzungen=20I?=
 =?UTF-8?q?II?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/soapbox/locales/de.json | 70 ++++++++++++++++++-------------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/app/soapbox/locales/de.json b/app/soapbox/locales/de.json
index 67067f2bf..d11b7e0f2 100644
--- a/app/soapbox/locales/de.json
+++ b/app/soapbox/locales/de.json
@@ -148,7 +148,7 @@
   "app_create.scopes_placeholder": "e.g. 'read write follow'",
   "app_create.submit": "App erstellen",
   "app_create.website_label": "Webseite",
-  "auth.invalid_credentials": "Falsches Passwort oder faslscher Nutzername",
+  "auth.invalid_credentials": "Falsches Passwort oder falscher Nutzername",
   "auth.logged_out": "Abgemeldet.",
   "backups.actions.create": "Backup erstellen",
   "backups.empty_message": "Kein Backup gefunden. {action}",
@@ -157,13 +157,13 @@
   "beta.also_available": "Available in:",
   "birthday_panel.title": "Birthdays",
   "boost_modal.combo": "Drücke {combo}, um dieses Fenster zu überspringen",
-  "bundle_column_error.body": "Etwas ist beim Laden schiefgelaufen.",
+  "bundle_column_error.body": "Beim Laden ist ein Fehler aufgetreten.",
   "bundle_column_error.retry": "Erneut versuchen",
   "bundle_column_error.title": "Netzwerkfehler",
   "bundle_modal_error.close": "Schließen",
-  "bundle_modal_error.message": "Etwas ist beim Laden schiefgelaufen.",
+  "bundle_modal_error.message": "Beim Laden ist ein Fehler aufgetreten.",
   "bundle_modal_error.retry": "Erneut versuchen",
-  "card.back.label": "Back",
+  "card.back.label": "Zurück",
   "chat_box.actions.send": "Senden",
   "chat_box.input.placeholder": "Nachricht senden…",
   "chat_panels.main_window.empty": "Keine Chats vorhanden. Besuche ein Nutzerprofil, um einen Chat zu starten.",
@@ -191,13 +191,13 @@
   "column.aliases.subheading_aliases": "Bestehende Aliases",
   "column.app_create": "App erstellen",
   "column.backups": "Backups",
-  "column.birthdays": "Birthdays",
+  "column.birthdays": "Geburtstage",
   "column.blocks": "Blockierte Profile",
   "column.bookmarks": "Lesezeichen",
   "column.chats": "Chats",
   "column.community": "Lokale Zeitleiste",
   "column.crypto_donate": "Mit Kryptowährungen spenden",
-  "column.developers": "Developers",
+  "column.developers": "Entwickler",
   "column.direct": "Direktnachrichten",
   "column.directory": "Profile entdecken",
   "column.domain_blocks": "Versteckte Domains",
@@ -257,7 +257,7 @@
   "column_forbidden.body": "Zugriff nicht erlaubt",
   "column_forbidden.title": "Zugriffsbeschränkung",
   "column_header.show_settings": "Einstellungen anzeigen",
-  "common.cancel": "Cancel",
+  "common.cancel": "Abbrechen",
   "community.column_settings.media_only": "Nur Medien",
   "community.column_settings.title": "Einstellungen für die lokale Zeitleiste",
   "compose.character_counter.title": "{chars} von {maxChars} Zeichen verwendet",
@@ -294,10 +294,10 @@
   "confirmations.admin.deactivate_user.message": "Hiermit wird das Konto von @{acct} deaktiviert. Diese Entscheidung kann später zurückgenommen werden.",
   "confirmations.admin.delete_local_user.checkbox": "Hiermit wird ein lokaler Nutzer unwiderruflich gelöscht.",
   "confirmations.admin.delete_status.confirm": "Beitrag löschen",
-  "confirmations.admin.delete_status.heading": "Delete post",
+  "confirmations.admin.delete_status.heading": "Beitrag löschen",
   "confirmations.admin.delete_status.message": "Hiermit wird ein Beitrag von @{acct} gelöscht. Der gelöschte Beitrag kann nicht wiederhergestellt werden..",
   "confirmations.admin.delete_user.confirm": "@{name} löschen",
-  "confirmations.admin.delete_user.heading": "Delete @{acct}",
+  "confirmations.admin.delete_user.heading": "@{acct} löschen",
   "confirmations.admin.delete_user.message": "Hiermit wird das Konto @{acct} unwiderruflich gelöscht. DAS KONTO KANN NICHT WIEDERHERGESTELLT WERDEN.",
   "confirmations.admin.mark_status_not_sensitive.confirm": "Markierung als heikel aufheben",
   "confirmations.admin.mark_status_not_sensitive.heading": "Mark post not sensitive.",
@@ -306,7 +306,7 @@
   "confirmations.admin.mark_status_sensitive.heading": "Mark post sensitive",
   "confirmations.admin.mark_status_sensitive.message": "Hiermit wird der Beitrag von @{acct} als heikel markiert.",
   "confirmations.admin.reject_user.confirm": "@{name} ablehnen",
-  "confirmations.admin.reject_user.heading": "Reject @{acct}",
+  "confirmations.admin.reject_user.heading": "@{acct} ablehnen",
   "confirmations.admin.reject_user.message": "Hiermit wird der Aufnahmeantrag von @{acct} abgelehnt. Diese Entscheidung kann nicht rückgängig gemacht werden.",
   "confirmations.block.block_and_report": "Blockieren und melden",
   "confirmations.block.confirm": "Blockieren",
@@ -316,28 +316,28 @@
   "confirmations.delete.heading": "Beitrag löschen",
   "confirmations.delete.message": "Bist du dir sicher, dass du diesen Beitrag löschen möchtest?",
   "confirmations.delete_list.confirm": "Löschen",
-  "confirmations.delete_list.heading": "Delete list",
+  "confirmations.delete_list.heading": "Liste löschen",
   "confirmations.delete_list.message": "Bist du dir sicher, dass du diese Liste permanent löschen möchtest?",
   "confirmations.domain_block.confirm": "Die ganze Domain verbergen",
   "confirmations.domain_block.heading": "Block {domain}",
   "confirmations.domain_block.message": "Bist du dir wirklich sicher, dass du die ganze Domain {domain} blockieren willst? In den meisten Fällen reichen ein paar gezielte Blockierungen oder Stummschaltungen aus. Du wirst den Inhalt von dieser Domain dann nicht mehr in irgendwelchen öffentlichen Timelines oder den Benachrichtigungen finden. Von dieser Domain kann dir auch niemand mehr folgen.",
   "confirmations.mute.confirm": "Stummschalten",
-  "confirmations.mute.heading": "Mute @{name}",
+  "confirmations.mute.heading": "@{name} stummschalten",
   "confirmations.mute.message": "Bist du dir sicher, dass du {name} stummschalten möchtest?",
   "confirmations.redraft.confirm": "Löschen und neu erstellen",
-  "confirmations.redraft.heading": "Delete & redraft",
+  "confirmations.redraft.heading": "Löschen und nue erstellen",
   "confirmations.redraft.message": "Bist du dir sicher, dass du diesen Beitrag löschen und neu erstellen möchtest? Favorisierungen, geteilte Beiträge und Antworten werden verloren gehen.",
   "confirmations.register.needs_approval": "Das Konto muss manuell durch den Administrator freigeschaltet werden. Die Überprüfung kann einige Zeit dauern.",
-  "confirmations.register.needs_approval.header": "Approval needed",
+  "confirmations.register.needs_approval.header": "Bestätigung erforderlich",
   "confirmations.register.needs_confirmation": "Im nächsten Schritt muss die angegebene Emailadresse bestätigt werden. Informationen zum weiteren Vorgehen wurden an die Adresse {email} geschickt.",
-  "confirmations.register.needs_confirmation.header": "Confirmation needed",
+  "confirmations.register.needs_confirmation.header": "Bestätigung erforderlich",
   "confirmations.reply.confirm": "Antworten",
   "confirmations.reply.message": "Wenn du jetzt antwortest, wird die gesamte Nachricht verworfen, die du gerade schreibst. Möchtest du wirklich fortfahren?",
-  "confirmations.scheduled_status_delete.confirm": "Cancel",
-  "confirmations.scheduled_status_delete.heading": "Cancel scheduled post",
-  "confirmations.scheduled_status_delete.message": "Are you sure you want to cancel this scheduled post?",
+  "confirmations.scheduled_status_delete.confirm": "Abbrechen",
+  "confirmations.scheduled_status_delete.heading": "Vorbereiteten Beitrag verwerfen",
+  "confirmations.scheduled_status_delete.message": "Den vorbereiteten Beitrag wirklich verwerfen?",
   "confirmations.unfollow.confirm": "Entfolgen",
-  "confirmations.unfollow.heading": "Unfollow {name}",
+  "confirmations.unfollow.heading": "{name} entfolgen",
   "confirmations.unfollow.message": "Bist du dir sicher, dass du {name} entfolgen möchtest?",
   "crypto_donate.explanation_box.message": "{siteTitle} akzeptiert Kryptowährungen. Du kannst an eine der angegebenen Adressen eine Spende senden. Danke für deine Unterstützung!",
   "crypto_donate.explanation_box.title": "Spenden mit Kryptowährungen",
@@ -381,8 +381,8 @@
   "edit_profile.fields.avatar_label": "Profilbild",
   "edit_profile.fields.bio_label": "Kurzbeschreibung",
   "edit_profile.fields.bio_placeholder": "Schreibe etwas über dich.",
-  "edit_profile.fields.birthday_label": "Birthday",
-  "edit_profile.fields.birthday_placeholder": "Your birthday",
+  "edit_profile.fields.birthday_label": "Geburtstag",
+  "edit_profile.fields.birthday_placeholder": "Dein Geburtstag",
   "edit_profile.fields.bot_label": "Dieses Konto wird für einen Bot genutzt",
   "edit_profile.fields.discoverable_label": "Allow account discovery",
   "edit_profile.fields.display_name_label": "Angezeigter Nutzername",
@@ -538,12 +538,12 @@
   "hashtag.column_header.tag_mode.all": "und {additional}",
   "hashtag.column_header.tag_mode.any": "oder {additional}",
   "hashtag.column_header.tag_mode.none": "ohne {additional}",
-  "header.home.label": "Home",
-  "header.login.forgot_password": "Forgot password?",
+  "header.home.label": "Start",
+  "header.login.forgot_password": "Passwort vergessen?",
   "header.login.label": "Anmelden",
   "header.login.password.label": "Password",
-  "header.login.username.placeholder": "Email or username",
-  "header.register.label": "Register",
+  "header.login.username.placeholder": "Email oder Nutzername",
+  "header.register.label": "Anmelden",
   "home.column_settings.show_direct": "Direktnachricht anzeigen",
   "home.column_settings.show_reblogs": "Geteilte Beiträge anzeigen",
   "home.column_settings.show_replies": "Antworten anzeigen",
@@ -564,8 +564,8 @@
   "import_data.success.blocks": "Blockliste erfolgreich importiert",
   "import_data.success.followers": "Followers imported successfully",
   "import_data.success.mutes": "Liste mit stummgeschalteten Nutzern erfolgreich importiert",
-  "input.password.hide_password": "Hide password",
-  "input.password.show_password": "Show password",
+  "input.password.hide_password": "Passwort verbergen",
+  "input.password.show_password": "Passwort anzeigen",
   "intervals.full.days": "{number, plural, one {# Tag} other {# Tage}}",
   "intervals.full.hours": "{number, plural, one {# Stunde} other {# Stunden}}",
   "intervals.full.minutes": "{number, plural, one {# Minute} other {# Minuten}}",
@@ -667,8 +667,8 @@
   "migration.submit": "Move followers",
   "missing_description_modal.cancel": "Abbrechen",
   "missing_description_modal.continue": "Senden",
-  "missing_description_modal.description": "Continue anyway?",
-  "missing_description_modal.text": "You have not entered a description for all attachments. Continue anyway?",
+  "missing_description_modal.description": "Dennoch fortfahren?",
+  "missing_description_modal.text": "Du hast nicht für alle Anhänge Beschreibungen angegeben. Dennoch fortfahren?",
   "missing_indicator.label": "Nicht gefunden",
   "missing_indicator.sublabel": "Der Eintrag konnte nicht gefunden werden",
   "mobile.also_available": "Available in:",
@@ -678,7 +678,7 @@
   "navigation.chats": "Chats",
   "navigation.compose": "Compose",
   "navigation.dashboard": "Steuerung",
-  "navigation.developers": "Developers",
+  "navigation.developers": "Entwickler",
   "navigation.direct_messages": "Nachrichten",
   "navigation.home": "Start",
   "navigation.invites": "Einladungen",
@@ -688,7 +688,7 @@
   "navigation_bar.blocks": "Blockierte Profile",
   "navigation_bar.compose": "Neuen Beitrag verfassen",
   "navigation_bar.compose_direct": "Direktnachrichten",
-  "navigation_bar.compose_quote": "Quote post",
+  "navigation_bar.compose_quote": "Beitrag zitieren",
   "navigation_bar.compose_reply": "Auf Beitrag antworten",
   "navigation_bar.domain_blocks": "Versteckte Domains",
   "navigation_bar.favourites": "Favoriten",
@@ -720,8 +720,8 @@
   "notifications.clear_confirmation": "Bist du dir sicher, dass du alle Benachrichtigungen löschen möchtest?",
   "notifications.clear_heading": "Clear notifications",
   "notifications.column_settings.alert": "Desktop-Benachrichtigungen",
-  "notifications.column_settings.birthdays.category": "Birthdays",
-  "notifications.column_settings.birthdays.show": "Show birthday reminders",
+  "notifications.column_settings.birthdays.category": "Geburtstage",
+  "notifications.column_settings.birthdays.show": "Geburtstagserinnerungen anzeigen",
   "notifications.column_settings.emoji_react": "Emoji-Reaktionen:",
   "notifications.column_settings.favourite": "Favorisierungen:",
   "notifications.column_settings.filter_bar.advanced": "Zeige alle Kategorien an",
@@ -751,7 +751,7 @@
   "notifications.group": "{count} Benachrichtigungen",
   "notifications.queue_label": "{count, plural, one {Eine neue Benachrichtigung} other {# neue Benachrichtigungen}}. Hier klicken, um sie anzuzeigen.",
   "onboarding.avatar.subtitle": "Just have fun with it.",
-  "onboarding.avatar.title": "Choose a profile picture",
+  "onboarding.avatar.title": "Profilbild auswählen",
   "onboarding.display_name.subtitle": "You can always edit this later.",
   "onboarding.display_name.title": "Choose a display name",
   "onboarding.done": "Done",
@@ -1021,7 +1021,7 @@
   "status.unmute_conversation": "Stummschaltung der Unterhaltung aufheben",
   "status.unpin": "Vom Profil lösen",
   "status_list.queue_label": "{count, plural, one {Ein neuer Beitrag} other {# neue Beiträge}}. Hier klicken, um {count, plural, one {ihn} other {sie}} anzuzeigen.",
-  "statuses.quote_tombstone": "Post is unavailable.",
+  "statuses.quote_tombstone": "Der Beitrag kann nicht angezeigt werden.",
   "statuses.tombstone": "Beitrag oder Beiträge können nicht angezeigt werden.",
   "suggestions.dismiss": "Empfehlung ausblenden",
   "tabs_bar.all": "All",

From 88637f55fb1485b229a46db6a56fdcedc87c90a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 May 2022 10:01:52 +0200
Subject: [PATCH 072/102] Fix: Change scope button no longer works
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/compose/components/privacy_dropdown.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
index 9edbd58dc..d6ddf771c 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.js
+++ b/app/soapbox/features/compose/components/privacy_dropdown.js
@@ -181,7 +181,7 @@ class PrivacyDropdown extends React.PureComponent {
     ];
   }
 
-  handleToggle = ({ target }) => {
+  handleToggle = (e) => {
     if (this.props.isUserTouching()) {
       if (this.state.open) {
         this.props.onModalClose();
@@ -192,13 +192,14 @@ class PrivacyDropdown extends React.PureComponent {
         });
       }
     } else {
-      const { top } = target.getBoundingClientRect();
+      const { top } = e.target.getBoundingClientRect();
       if (this.state.open && this.activeElement) {
         this.activeElement.focus();
       }
       this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
       this.setState({ open: !this.state.open });
     }
+    e.stopPropagation();
   }
 
   handleModalActionClick = (e) => {

From beb7b8e713c4e72d8f57d824ba3dbb68e4c17d15 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 May 2022 18:18:31 +0200
Subject: [PATCH 073/102] TypeScript, FC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/radio_button.tsx       |   2 +-
 .../components/latest_accounts_panel.tsx      |   3 +-
 .../conversations/components/conversation.js  |  64 ----------
 .../conversations/components/conversation.tsx |  63 ++++++++++
 .../components/conversations_list.js          |  79 ------------
 .../components/conversations_list.tsx         |  74 +++++++++++
 .../containers/conversation_container.js      |  20 ---
 .../conversations_list_container.js           |  16 ---
 app/soapbox/features/conversations/index.js   |  75 -----------
 app/soapbox/features/conversations/index.tsx  |  50 ++++++++
 .../developers/developers_challenge.tsx       |   3 +-
 app/soapbox/features/direct_timeline/index.js |  84 -------------
 .../features/direct_timeline/index.tsx        |  66 ++++++++++
 .../directory/components/account_card.js      |  85 -------------
 .../directory/components/account_card.tsx     |  82 +++++++++++++
 app/soapbox/features/directory/index.js       | 116 ------------------
 app/soapbox/features/directory/index.tsx      |  80 ++++++++++++
 .../edit_password/{index.js => index.tsx}     |   7 +-
 .../export_data/components/csv_exporter.tsx   |   3 +-
 .../components/restricted_instance.js         |  61 ---------
 .../components/restricted_instance.tsx        |  47 +++++++
 .../features/federation_restrictions/index.js |  76 ------------
 .../federation_restrictions/index.tsx         |  62 ++++++++++
 .../import_data/components/csv_importer.tsx   |   3 +-
 app/soapbox/features/new_status/index.tsx     |   3 +-
 .../features/reply_mentions/account.tsx       |   3 +-
 .../ui/components/reactions_modal.tsx         |   3 +-
 app/soapbox/features/ui/index.tsx             |   2 +-
 28 files changed, 536 insertions(+), 696 deletions(-)
 delete mode 100644 app/soapbox/features/conversations/components/conversation.js
 create mode 100644 app/soapbox/features/conversations/components/conversation.tsx
 delete mode 100644 app/soapbox/features/conversations/components/conversations_list.js
 create mode 100644 app/soapbox/features/conversations/components/conversations_list.tsx
 delete mode 100644 app/soapbox/features/conversations/containers/conversation_container.js
 delete mode 100644 app/soapbox/features/conversations/containers/conversations_list_container.js
 delete mode 100644 app/soapbox/features/conversations/index.js
 create mode 100644 app/soapbox/features/conversations/index.tsx
 delete mode 100644 app/soapbox/features/direct_timeline/index.js
 create mode 100644 app/soapbox/features/direct_timeline/index.tsx
 delete mode 100644 app/soapbox/features/directory/components/account_card.js
 create mode 100644 app/soapbox/features/directory/components/account_card.tsx
 delete mode 100644 app/soapbox/features/directory/index.js
 create mode 100644 app/soapbox/features/directory/index.tsx
 rename app/soapbox/features/edit_password/{index.js => index.tsx} (96%)
 delete mode 100644 app/soapbox/features/federation_restrictions/components/restricted_instance.js
 create mode 100644 app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
 delete mode 100644 app/soapbox/features/federation_restrictions/index.js
 create mode 100644 app/soapbox/features/federation_restrictions/index.tsx

diff --git a/app/soapbox/components/radio_button.tsx b/app/soapbox/components/radio_button.tsx
index c3f87ce02..b317e4259 100644
--- a/app/soapbox/components/radio_button.tsx
+++ b/app/soapbox/components/radio_button.tsx
@@ -6,7 +6,7 @@ interface IRadioButton {
   checked?: boolean,
   name: string,
   onChange: React.ChangeEventHandler<HTMLInputElement>,
-  label: JSX.Element,
+  label: React.ReactNode,
 }
 
 const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, label }) => (
diff --git a/app/soapbox/features/admin/components/latest_accounts_panel.tsx b/app/soapbox/features/admin/components/latest_accounts_panel.tsx
index 7998c18d2..804744d5e 100644
--- a/app/soapbox/features/admin/components/latest_accounts_panel.tsx
+++ b/app/soapbox/features/admin/components/latest_accounts_panel.tsx
@@ -1,6 +1,5 @@
 import { OrderedSet as ImmutableOrderedSet, is } from 'immutable';
-import React, { useState } from 'react';
-import { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
diff --git a/app/soapbox/features/conversations/components/conversation.js b/app/soapbox/features/conversations/components/conversation.js
deleted file mode 100644
index 717949968..000000000
--- a/app/soapbox/features/conversations/components/conversation.js
+++ /dev/null
@@ -1,64 +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 { withRouter } from 'react-router-dom';
-
-import StatusContainer from '../../../containers/status_container';
-
-export default @withRouter
-class Conversation extends ImmutablePureComponent {
-
-  static propTypes = {
-    conversationId: PropTypes.string.isRequired,
-    accounts: ImmutablePropTypes.list.isRequired,
-    lastStatusId: PropTypes.string,
-    unread: PropTypes.bool.isRequired,
-    onMoveUp: PropTypes.func,
-    onMoveDown: PropTypes.func,
-    markRead: PropTypes.func.isRequired,
-    history: PropTypes.object,
-  };
-
-  handleClick = () => {
-    if (!this.props.history) {
-      return;
-    }
-
-    const { lastStatusId, unread, markRead } = this.props;
-
-    if (unread) {
-      markRead();
-    }
-
-    this.props.history.push(`/statuses/${lastStatusId}`);
-  }
-
-  handleHotkeyMoveUp = () => {
-    this.props.onMoveUp(this.props.conversationId);
-  }
-
-  handleHotkeyMoveDown = () => {
-    this.props.onMoveDown(this.props.conversationId);
-  }
-
-  render() {
-    const { accounts, lastStatusId, unread } = this.props;
-
-    if (lastStatusId === null) {
-      return null;
-    }
-
-    return (
-      <StatusContainer
-        id={lastStatusId}
-        unread={unread}
-        otherAccounts={accounts}
-        onMoveUp={this.handleHotkeyMoveUp}
-        onMoveDown={this.handleHotkeyMoveDown}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/conversations/components/conversation.tsx b/app/soapbox/features/conversations/components/conversation.tsx
new file mode 100644
index 000000000..995af88b3
--- /dev/null
+++ b/app/soapbox/features/conversations/components/conversation.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+
+import { markConversationRead } from 'soapbox/actions/conversations';
+import StatusContainer from 'soapbox/containers/status_container';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+interface IConversation {
+  conversationId: string,
+  onMoveUp: (id: string) => void,
+  onMoveDown: (id: string) => void,
+}
+
+const Conversation: React.FC<IConversation> = ({ conversationId, onMoveUp, onMoveDown }) => {
+  const dispatch = useAppDispatch();
+  const history = useHistory();
+
+  const { accounts, unread, lastStatusId } = useAppSelector((state) => {
+    const conversation = state.conversations.get('items').find((x: ImmutableMap<string, any>) => x.get('id') === conversationId);
+
+    return {
+      accounts: conversation.get('accounts').map((accountId: string) => state.accounts.get(accountId, null)),
+      unread: conversation.get('unread'),
+      lastStatusId: conversation.get('last_status', null),
+    };
+  });
+
+  const handleClick = () => {
+    if (unread) {
+      dispatch(markConversationRead(conversationId));
+    }
+
+    history.push(`/statuses/${lastStatusId}`);
+  };
+
+  const handleHotkeyMoveUp = () => {
+    onMoveUp(conversationId);
+  };
+
+  const handleHotkeyMoveDown = () => {
+    onMoveDown(conversationId);
+  };
+
+  if (lastStatusId === null) {
+    return null;
+  }
+
+  return (
+    <StatusContainer
+    // @ts-ignore
+      id={lastStatusId}
+      unread={unread}
+      otherAccounts={accounts}
+      onMoveUp={handleHotkeyMoveUp}
+      onMoveDown={handleHotkeyMoveDown}
+      onClick={handleClick}
+    />
+  );
+};
+
+export default Conversation;
diff --git a/app/soapbox/features/conversations/components/conversations_list.js b/app/soapbox/features/conversations/components/conversations_list.js
deleted file mode 100644
index 6e2f751a9..000000000
--- a/app/soapbox/features/conversations/components/conversations_list.js
+++ /dev/null
@@ -1,79 +0,0 @@
-import { debounce } from 'lodash';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-
-import ScrollableList from '../../../components/scrollable_list';
-import ConversationContainer from '../containers/conversation_container';
-
-export default class ConversationsList extends ImmutablePureComponent {
-
-  static propTypes = {
-    conversations: ImmutablePropTypes.list.isRequired,
-    hasMore: PropTypes.bool,
-    isLoading: PropTypes.bool,
-    onLoadMore: PropTypes.func,
-  };
-
-  getCurrentIndex = id => this.props.conversations.findIndex(x => x.get('id') === id)
-
-  handleMoveUp = id => {
-    const elementIndex = this.getCurrentIndex(id) - 1;
-    this._selectChild(elementIndex);
-  }
-
-  handleMoveDown = id => {
-    const elementIndex = this.getCurrentIndex(id) + 1;
-    this._selectChild(elementIndex);
-  }
-
-  _selectChild(index) {
-    this.node.scrollIntoView({
-      index,
-      behavior: 'smooth',
-      done: () => {
-        const element = document.querySelector(`#direct-list [data-index="${index}"] .focusable`);
-
-        if (element) {
-          element.focus();
-        }
-      },
-    });
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  handleLoadOlder = debounce(() => {
-    const maxId = this.props.conversations.getIn([-1, 'id']);
-    if (maxId) this.props.onLoadMore(maxId);
-  }, 300, { leading: true })
-
-  render() {
-    const { conversations, isLoading, onLoadMore, ...other } = this.props;
-
-    return (
-      <ScrollableList
-        {...other}
-        onLoadMore={onLoadMore && this.handleLoadOlder}
-        id='direct-list'
-        scrollKey='direct'
-        ref={this.setRef}
-        isLoading={isLoading}
-        showLoading={isLoading && conversations.size === 0}
-      >
-        {conversations.map(item => (
-          <ConversationContainer
-            key={item.get('id')}
-            conversationId={item.get('id')}
-            onMoveUp={this.handleMoveUp}
-            onMoveDown={this.handleMoveDown}
-          />
-        ))}
-      </ScrollableList>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/conversations/components/conversations_list.tsx b/app/soapbox/features/conversations/components/conversations_list.tsx
new file mode 100644
index 000000000..e7bc79078
--- /dev/null
+++ b/app/soapbox/features/conversations/components/conversations_list.tsx
@@ -0,0 +1,74 @@
+import { debounce } from 'lodash';
+import React from 'react';
+import { useRef } from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { expandConversations } from 'soapbox/actions/conversations';
+import ScrollableList from 'soapbox/components/scrollable_list';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import Conversation from '../components/conversation';
+
+import type { VirtuosoHandle } from 'react-virtuoso';
+
+const ConversationsList: React.FC = () => {
+  const dispatch = useAppDispatch();
+  const ref = useRef<VirtuosoHandle>(null);
+
+  const conversations = useAppSelector((state) => state.conversations.get('items'));
+  const isLoading = useAppSelector((state) => state.conversations.get('isLoading', true));
+
+  const getCurrentIndex = (id: string) => conversations.findIndex((x: any) => x.get('id') === id);
+
+  const handleMoveUp = (id: string) => {
+    const elementIndex = getCurrentIndex(id) - 1;
+    selectChild(elementIndex);
+  };
+
+  const handleMoveDown = (id: string) => {
+    const elementIndex = getCurrentIndex(id) + 1;
+    selectChild(elementIndex);
+  };
+
+  const selectChild = (index: number) => {
+    ref.current?.scrollIntoView({
+      index,
+      behavior: 'smooth',
+      done: () => {
+        const element = document.querySelector<HTMLDivElement>(`#direct-list [data-index="${index}"] .focusable`);
+
+        if (element) {
+          element.focus();
+        }
+      },
+    });
+  };
+
+  const handleLoadOlder = debounce(() => {
+    const maxId = conversations.getIn([-1, 'id']);
+    if (maxId) dispatch(expandConversations({ maxId }));
+  }, 300, { leading: true });
+
+  return (
+    <ScrollableList
+      onLoadMore={handleLoadOlder}
+      id='direct-list'
+      scrollKey='direct'
+      ref={ref}
+      isLoading={isLoading}
+      showLoading={isLoading && conversations.size === 0}
+      emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
+    >
+      {conversations.map((item: any) => (
+        <Conversation
+          key={item.get('id')}
+          conversationId={item.get('id')}
+          onMoveUp={handleMoveUp}
+          onMoveDown={handleMoveDown}
+        />
+      ))}
+    </ScrollableList>
+  );
+};
+
+export default ConversationsList;
diff --git a/app/soapbox/features/conversations/containers/conversation_container.js b/app/soapbox/features/conversations/containers/conversation_container.js
deleted file mode 100644
index 885fada9c..000000000
--- a/app/soapbox/features/conversations/containers/conversation_container.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { connect } from 'react-redux';
-
-import { markConversationRead } from '../../../actions/conversations';
-import Conversation from '../components/conversation';
-
-const mapStateToProps = (state, { conversationId }) => {
-  const conversation = state.getIn(['conversations', 'items']).find(x => x.get('id') === conversationId);
-
-  return {
-    accounts: conversation.get('accounts').map(accountId => state.getIn(['accounts', accountId], null)),
-    unread: conversation.get('unread'),
-    lastStatusId: conversation.get('last_status', null),
-  };
-};
-
-const mapDispatchToProps = (dispatch, { conversationId }) => ({
-  markRead: () => dispatch(markConversationRead(conversationId)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(Conversation);
diff --git a/app/soapbox/features/conversations/containers/conversations_list_container.js b/app/soapbox/features/conversations/containers/conversations_list_container.js
deleted file mode 100644
index 1dcd3ec1b..000000000
--- a/app/soapbox/features/conversations/containers/conversations_list_container.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import { connect } from 'react-redux';
-
-import { expandConversations } from '../../../actions/conversations';
-import ConversationsList from '../components/conversations_list';
-
-const mapStateToProps = state => ({
-  conversations: state.getIn(['conversations', 'items']),
-  isLoading: state.getIn(['conversations', 'isLoading'], true),
-  hasMore: state.getIn(['conversations', 'hasMore'], false),
-});
-
-const mapDispatchToProps = dispatch => ({
-  onLoadMore: maxId => dispatch(expandConversations({ maxId })),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(ConversationsList);
diff --git a/app/soapbox/features/conversations/index.js b/app/soapbox/features/conversations/index.js
deleted file mode 100644
index 6d4b2ec22..000000000
--- a/app/soapbox/features/conversations/index.js
+++ /dev/null
@@ -1,75 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { directComposeById } from 'soapbox/actions/compose';
-import AccountSearch from 'soapbox/components/account_search';
-
-import { mountConversations, unmountConversations, expandConversations } from '../../actions/conversations';
-import { connectDirectStream } from '../../actions/streaming';
-import { Column } from '../../components/ui';
-
-import ConversationsListContainer from './containers/conversations_list_container';
-
-const messages = defineMessages({
-  title: { id: 'column.direct', defaultMessage: 'Direct messages' },
-  searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
-});
-
-export default @connect()
-@injectIntl
-class ConversationsTimeline extends React.PureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    hasUnread: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-
-    dispatch(mountConversations());
-    dispatch(expandConversations());
-    this.disconnect = dispatch(connectDirectStream());
-  }
-
-  componentWillUnmount() {
-    this.props.dispatch(unmountConversations());
-
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
-
-  handleSuggestion = accountId => {
-    this.props.dispatch(directComposeById(accountId));
-  }
-
-  handleLoadMore = maxId => {
-    this.props.dispatch(expandConversations({ maxId }));
-  }
-
-  render() {
-    const { intl } = this.props;
-
-    return (
-      <Column label={intl.formatMessage(messages.title)}>
-        <AccountSearch
-          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-          onSelected={this.handleSuggestion}
-        />
-
-        <ConversationsListContainer
-          scrollKey='direct_timeline'
-          timelineId='direct'
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
-        />
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/conversations/index.tsx b/app/soapbox/features/conversations/index.tsx
new file mode 100644
index 000000000..8e81ac1c5
--- /dev/null
+++ b/app/soapbox/features/conversations/index.tsx
@@ -0,0 +1,50 @@
+import React, { useEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { directComposeById } from 'soapbox/actions/compose';
+import { mountConversations, unmountConversations, expandConversations } from 'soapbox/actions/conversations';
+import { connectDirectStream } from 'soapbox/actions/streaming';
+import AccountSearch from 'soapbox/components/account_search';
+import { Column } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import ConversationsList from './components/conversations_list';
+
+const messages = defineMessages({
+  title: { id: 'column.direct', defaultMessage: 'Direct messages' },
+  searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
+});
+
+const ConversationsTimeline = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  useEffect(() => {
+    dispatch(mountConversations());
+    dispatch(expandConversations());
+
+    const disconnect = dispatch(connectDirectStream());
+
+    return () => {
+      dispatch(unmountConversations());
+      disconnect();
+    };
+  }, []);
+
+  const handleSuggestion = (accountId: string) => {
+    dispatch(directComposeById(accountId));
+  };
+
+  return (
+    <Column label={intl.formatMessage(messages.title)}>
+      <AccountSearch
+        placeholder={intl.formatMessage(messages.searchPlaceholder)}
+        onSelected={handleSuggestion}
+      />
+
+      <ConversationsList />
+    </Column>
+  );
+};
+
+export default ConversationsTimeline;
diff --git a/app/soapbox/features/developers/developers_challenge.tsx b/app/soapbox/features/developers/developers_challenge.tsx
index d27b46429..50d107384 100644
--- a/app/soapbox/features/developers/developers_challenge.tsx
+++ b/app/soapbox/features/developers/developers_challenge.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
 
diff --git a/app/soapbox/features/direct_timeline/index.js b/app/soapbox/features/direct_timeline/index.js
deleted file mode 100644
index b09a58158..000000000
--- a/app/soapbox/features/direct_timeline/index.js
+++ /dev/null
@@ -1,84 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { directComposeById } from 'soapbox/actions/compose';
-import AccountSearch from 'soapbox/components/account_search';
-
-import { connectDirectStream } from '../../actions/streaming';
-import { expandDirectTimeline } from '../../actions/timelines';
-import ColumnHeader from '../../components/column_header';
-import { Column } from '../../components/ui';
-import StatusListContainer from '../ui/containers/status_list_container';
-
-const messages = defineMessages({
-  title: { id: 'column.direct', defaultMessage: 'Direct messages' },
-  searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
-});
-
-const mapStateToProps = state => ({
-  hasUnread: state.getIn(['timelines', 'direct', 'unread']) > 0,
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class DirectTimeline extends React.PureComponent {
-
-  static propTypes = {
-    dispatch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    hasUnread: PropTypes.bool,
-  };
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-
-    dispatch(expandDirectTimeline());
-    this.disconnect = dispatch(connectDirectStream());
-  }
-
-  componentWillUnmount() {
-    if (this.disconnect) {
-      this.disconnect();
-      this.disconnect = null;
-    }
-  }
-
-  handleSuggestion = accountId => {
-    this.props.dispatch(directComposeById(accountId));
-  }
-
-  handleLoadMore = maxId => {
-    this.props.dispatch(expandDirectTimeline({ maxId }));
-  }
-
-  render() {
-    const { intl, hasUnread } = this.props;
-
-    return (
-      <Column label={intl.formatMessage(messages.title)} transparent>
-        <ColumnHeader
-          icon='envelope'
-          active={hasUnread}
-          title={intl.formatMessage(messages.title)}
-          onPin={this.handlePin}
-        />
-
-        <AccountSearch
-          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-          onSelected={this.handleSuggestion}
-        />
-
-        <StatusListContainer
-          scrollKey='direct_timeline'
-          timelineId='direct'
-          onLoadMore={this.handleLoadMore}
-          emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
-          divideType='space'
-        />
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/direct_timeline/index.tsx b/app/soapbox/features/direct_timeline/index.tsx
new file mode 100644
index 000000000..5244533a8
--- /dev/null
+++ b/app/soapbox/features/direct_timeline/index.tsx
@@ -0,0 +1,66 @@
+import React, { useEffect } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { directComposeById } from 'soapbox/actions/compose';
+import { connectDirectStream } from 'soapbox/actions/streaming';
+import { expandDirectTimeline } from 'soapbox/actions/timelines';
+import AccountSearch from 'soapbox/components/account_search';
+import ColumnHeader from 'soapbox/components/column_header';
+import { Column } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import StatusListContainer from '../ui/containers/status_list_container';
+
+const messages = defineMessages({
+  title: { id: 'column.direct', defaultMessage: 'Direct messages' },
+  searchPlaceholder: { id: 'direct.search_placeholder', defaultMessage: 'Send a message to…' },
+});
+
+const DirectTimeline = () => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+
+  const hasUnread = useAppSelector((state) => state.timelines.getIn(['direct', 'unread']) > 0);
+
+  useEffect(() => {
+    dispatch(expandDirectTimeline());
+    const disconnect = dispatch(connectDirectStream());
+
+    return (() => {
+      disconnect();
+    });
+  }, []);
+
+  const handleSuggestion = (accountId: string) => {
+    dispatch(directComposeById(accountId));
+  };
+
+  const handleLoadMore = (maxId: string) => {
+    dispatch(expandDirectTimeline({ maxId }));
+  };
+
+  return (
+    <Column label={intl.formatMessage(messages.title)} transparent>
+      <ColumnHeader
+        icon='envelope'
+        active={hasUnread}
+        title={intl.formatMessage(messages.title)}
+      />
+
+      <AccountSearch
+        placeholder={intl.formatMessage(messages.searchPlaceholder)}
+        onSelected={handleSuggestion}
+      />
+
+      <StatusListContainer
+        scrollKey='direct_timeline'
+        timelineId='direct'
+        onLoadMore={handleLoadMore}
+        emptyMessage={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
+        divideType='space'
+      />
+    </Column>
+  );
+};
+
+export default DirectTimeline;
diff --git a/app/soapbox/features/directory/components/account_card.js b/app/soapbox/features/directory/components/account_card.js
deleted file mode 100644
index 542a05344..000000000
--- a/app/soapbox/features/directory/components/account_card.js
+++ /dev/null
@@ -1,85 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { FormattedMessage, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { getSettings } from 'soapbox/actions/settings';
-import Avatar from 'soapbox/components/avatar';
-import DisplayName from 'soapbox/components/display-name';
-import Permalink from 'soapbox/components/permalink';
-import RelativeTimestamp from 'soapbox/components/relative_timestamp';
-import { Text } from 'soapbox/components/ui';
-import ActionButton from 'soapbox/features/ui/components/action-button';
-import { makeGetAccount } from 'soapbox/selectors';
-import { shortNumberFormat } from 'soapbox/utils/numbers';
-import SoapboxPropTypes from 'soapbox/utils/soapbox_prop_types';
-
-const makeMapStateToProps = () => {
-  const getAccount = makeGetAccount();
-
-  const mapStateToProps = (state, { id }) => ({
-    me: state.get('me'),
-    account: getAccount(state, id),
-    autoPlayGif: getSettings(state).get('autoPlayGif'),
-  });
-
-  return mapStateToProps;
-};
-
-export default @injectIntl
-@connect(makeMapStateToProps)
-class AccountCard extends ImmutablePureComponent {
-
-  static propTypes = {
-    me: SoapboxPropTypes.me,
-    account: ImmutablePropTypes.record.isRequired,
-    autoPlayGif: PropTypes.bool,
-  };
-
-  render() {
-    const { account, autoPlayGif, me } = this.props;
-
-    const followedBy = me !== account.get('id') && account.getIn(['relationship', 'followed_by']);
-
-    return (
-      <div className='directory__card'>
-        {followedBy &&
-          <div className='directory__card__info'>
-            <span className='relationship-tag'>
-              <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
-            </span>
-          </div>}
-        <div className='directory__card__action-button'>
-          <ActionButton account={account} small />
-        </div>
-        <div className='directory__card__img'>
-          <img src={autoPlayGif ? account.get('header') : account.get('header_static')} alt='' className='parallax' />
-        </div>
-
-        <div className='directory__card__bar'>
-          <Permalink className='directory__card__bar__name' href={account.get('url')} to={`/@${account.get('acct')}`}>
-            <Avatar account={account} size={48} />
-            <DisplayName account={account} />
-          </Permalink>
-        </div>
-
-        <div className='directory__card__extra'>
-          <Text
-            className={classNames('account__header__content', (account.get('note').length === 0 || account.get('note') === '<p></p>') && 'empty')}
-            dangerouslySetInnerHTML={{ __html: account.get('note_emojified') }}
-          />
-        </div>
-
-        <div className='directory__card__extra'>
-          <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('statuses_count'))}</Text> <small><FormattedMessage id='account.posts' defaultMessage='Toots' /></small></div>
-          <div className='accounts-table__count'><Text theme='primary' size='sm'>{shortNumberFormat(account.get('followers_count'))}</Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' /></small></div>
-          <div className='accounts-table__count'>{account.get('last_status_at') === null ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text> : <RelativeTimestamp className='text-primary-600 dark:text-primary-400' timestamp={account.get('last_status_at')} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small></div>
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/directory/components/account_card.tsx b/app/soapbox/features/directory/components/account_card.tsx
new file mode 100644
index 000000000..0b5a74b8b
--- /dev/null
+++ b/app/soapbox/features/directory/components/account_card.tsx
@@ -0,0 +1,82 @@
+import classNames from 'classnames';
+import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { getSettings } from 'soapbox/actions/settings';
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display-name';
+import Permalink from 'soapbox/components/permalink';
+import RelativeTimestamp from 'soapbox/components/relative_timestamp';
+import { Text } from 'soapbox/components/ui';
+import ActionButton from 'soapbox/features/ui/components/action-button';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetAccount } from 'soapbox/selectors';
+import { shortNumberFormat } from 'soapbox/utils/numbers';
+
+const getAccount = makeGetAccount();
+
+interface IAccountCard {
+  id: string,
+}
+
+const AccountCard: React.FC<IAccountCard> = ({ id }) => {
+  const me = useAppSelector((state) => state.me);
+  const account = useAppSelector((state) => getAccount(state, id));
+  const autoPlayGif = useAppSelector((state) => getSettings(state).get('autoPlayGif'));
+
+  if (!account) return null;
+
+  const followedBy = me !== account.id && account.relationship.get('followed_by');
+
+  return (
+    <div className='directory__card'>
+      {followedBy &&
+        <div className='directory__card__info'>
+          <span className='relationship-tag'>
+            <FormattedMessage id='account.follows_you' defaultMessage='Follows you' />
+          </span>
+        </div>}
+      <div className='directory__card__action-button'>
+        <ActionButton account={account} small />
+      </div>
+      <div className='directory__card__img'>
+        <img src={autoPlayGif ? account.header : account.header_static} alt='' className='parallax' />
+      </div>
+
+      <div className='directory__card__bar'>
+        <Permalink className='directory__card__bar__name' href={account.url} to={`/@${account.acct}`}>
+          <Avatar account={account} size={48} />
+          <DisplayName account={account} />
+        </Permalink>
+      </div>
+
+      <div className='directory__card__extra'>
+        <Text
+          className={classNames('account__header__content', (account.note.length === 0 || account.note === '<p></p>') && 'empty')}
+          dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+        />
+      </div>
+
+      <div className='directory__card__extra'>
+        <div className='accounts-table__count'>
+          <Text theme='primary' size='sm'>
+            {shortNumberFormat(account.statuses_count)}
+          </Text> <small><FormattedMessage id='account.posts' defaultMessage='Posts' /></small>
+        </div>
+        <div className='accounts-table__count'>
+          <Text theme='primary' size='sm'>
+            {shortNumberFormat(account.followers_count)}
+          </Text> <small><FormattedMessage id='account.followers' defaultMessage='Followers' />
+          </small>
+        </div>
+        <div className='accounts-table__count'>
+          {account.last_status_at === null
+            ? <Text theme='primary' size='sm'><FormattedMessage id='account.never_active' defaultMessage='Never' /></Text>
+            : <RelativeTimestamp className='text-primary-600 dark:text-primary-400' timestamp={account.last_status_at} />} <small><FormattedMessage id='account.last_status' defaultMessage='Last active' /></small>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default AccountCard;
diff --git a/app/soapbox/features/directory/index.js b/app/soapbox/features/directory/index.js
deleted file mode 100644
index 37795a4e9..000000000
--- a/app/soapbox/features/directory/index.js
+++ /dev/null
@@ -1,116 +0,0 @@
-import classNames from 'classnames';
-import { List as ImmutableList } from 'immutable';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
-import LoadMore from 'soapbox/components/load_more';
-import RadioButton from 'soapbox/components/radio_button';
-import Column from 'soapbox/features/ui/components/column';
-import { getFeatures } from 'soapbox/utils/features';
-
-import AccountCard from './components/account_card';
-
-const messages = defineMessages({
-  title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
-  recentlyActive: { id: 'directory.recently_active', defaultMessage: 'Recently active' },
-  newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
-  local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
-  federated: { id: 'directory.federated', defaultMessage: 'From known fediverse' },
-});
-
-const mapStateToProps = state => ({
-  accountIds: state.getIn(['user_lists', 'directory', 'items'], ImmutableList()),
-  isLoading: state.getIn(['user_lists', 'directory', 'isLoading'], true),
-  title: state.getIn(['instance', 'title']),
-  features: getFeatures(state.get('instance')),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Directory extends React.PureComponent {
-
-  static propTypes = {
-    isLoading: PropTypes.bool,
-    accountIds: ImmutablePropTypes.list.isRequired,
-    dispatch: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-    title: PropTypes.string.isRequired,
-    params: PropTypes.shape({
-      order: PropTypes.string,
-      local: PropTypes.bool,
-    }),
-    features: PropTypes.object.isRequired,
-  };
-
-  state = {
-    order: null,
-    local: null,
-  };
-
-  getParams = (props, state) => ({
-    order: state.order === null ? (props.params.order || 'active') : state.order,
-    local: state.local === null ? (props.params.local || false) : state.local,
-  });
-
-  componentDidMount() {
-    const { dispatch } = this.props;
-    dispatch(fetchDirectory(this.getParams(this.props, this.state)));
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { dispatch } = this.props;
-    const paramsOld = this.getParams(prevProps, prevState);
-    const paramsNew = this.getParams(this.props, this.state);
-
-    if (paramsOld.order !== paramsNew.order || paramsOld.local !== paramsNew.local) {
-      dispatch(fetchDirectory(paramsNew));
-    }
-  }
-
-  handleChangeOrder = e => {
-    this.setState({ order: e.target.value });
-  }
-
-  handleChangeLocal = e => {
-    this.setState({ local: e.target.value === '1' });
-  }
-
-  handleLoadMore = () => {
-    const { dispatch } = this.props;
-    dispatch(expandDirectory(this.getParams(this.props, this.state)));
-  }
-
-  render() {
-    const { isLoading, accountIds, intl, title, features } = this.props;
-    const { order, local } = this.getParams(this.props, this.state);
-
-    return (
-      <Column icon='address-book-o' label={intl.formatMessage(messages.title)}>
-        <div className='directory__filter-form'>
-          <div className='directory__filter-form__column' role='group'>
-            <RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={this.handleChangeOrder} />
-            <RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={this.handleChangeOrder} />
-          </div>
-
-          {features.federating && (
-            <div className='directory__filter-form__column' role='group'>
-              <RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain: title })} checked={local} onChange={this.handleChangeLocal} />
-              <RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={this.handleChangeLocal} />
-            </div>
-          )}
-        </div>
-
-        <div className={classNames('directory__list', { loading: isLoading })}>
-          {accountIds.map(accountId => <AccountCard id={accountId} key={accountId} />)}
-        </div>
-
-        <LoadMore onClick={this.handleLoadMore} visible={!isLoading} />
-      </Column>
-    );
-  }
-
-}
\ No newline at end of file
diff --git a/app/soapbox/features/directory/index.tsx b/app/soapbox/features/directory/index.tsx
new file mode 100644
index 000000000..c4bb5b4d8
--- /dev/null
+++ b/app/soapbox/features/directory/index.tsx
@@ -0,0 +1,80 @@
+import classNames from 'classnames';
+import { List as ImmutableList } from 'immutable';
+import React, { useEffect, useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { useDispatch } from 'react-redux';
+import { useLocation } from 'react-router-dom';
+
+import { fetchDirectory, expandDirectory } from 'soapbox/actions/directory';
+import LoadMore from 'soapbox/components/load_more';
+import RadioButton from 'soapbox/components/radio_button';
+import Column from 'soapbox/features/ui/components/column';
+import { useAppSelector } from 'soapbox/hooks';
+import { getFeatures } from 'soapbox/utils/features';
+
+import AccountCard from './components/account_card';
+
+const messages = defineMessages({
+  title: { id: 'column.directory', defaultMessage: 'Browse profiles' },
+  recentlyActive: { id: 'directory.recently_active', defaultMessage: 'Recently active' },
+  newArrivals: { id: 'directory.new_arrivals', defaultMessage: 'New arrivals' },
+  local: { id: 'directory.local', defaultMessage: 'From {domain} only' },
+  federated: { id: 'directory.federated', defaultMessage: 'From known fediverse' },
+});
+
+const Directory = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const { search } = useLocation();
+  const params = new URLSearchParams(search);
+
+  const accountIds = useAppSelector((state) => state.user_lists.getIn(['directory', 'items'], ImmutableList()));
+  const isLoading = useAppSelector((state) => state.user_lists.getIn(['directory', 'isLoading'], true));
+  const title = useAppSelector((state) => state.instance.get('title'));
+  const features = useAppSelector((state) => getFeatures(state.instance));
+
+  const [order, setOrder] = useState(params.get('order') || 'active');
+  const [local, setLocal] = useState(!!params.get('local'));
+
+  useEffect(() => {
+    dispatch(fetchDirectory({ order: order || 'active', local: local || false }));
+  }, [order, local]);
+
+  const handleChangeOrder: React.ChangeEventHandler<HTMLInputElement> = e => {
+    setOrder(e.target.value);
+  };
+
+  const handleChangeLocal: React.ChangeEventHandler<HTMLInputElement> = e => {
+    setLocal(e.target.value === '1');
+  };
+
+  const handleLoadMore = () => {
+    dispatch(expandDirectory({ order: order || 'active', local: local || false }));
+  };
+
+  return (
+    <Column icon='address-book-o' label={intl.formatMessage(messages.title)}>
+      <div className='directory__filter-form'>
+        <div className='directory__filter-form__column' role='group'>
+          <RadioButton name='order' value='active' label={intl.formatMessage(messages.recentlyActive)} checked={order === 'active'} onChange={handleChangeOrder} />
+          <RadioButton name='order' value='new' label={intl.formatMessage(messages.newArrivals)} checked={order === 'new'} onChange={handleChangeOrder} />
+        </div>
+
+        {features.federating && (
+          <div className='directory__filter-form__column' role='group'>
+            <RadioButton name='local' value='1' label={intl.formatMessage(messages.local, { domain: title })} checked={local} onChange={handleChangeLocal} />
+            <RadioButton name='local' value='0' label={intl.formatMessage(messages.federated)} checked={!local} onChange={handleChangeLocal} />
+          </div>
+        )}
+      </div>
+
+      <div className={classNames('directory__list', { loading: isLoading })}>
+        {accountIds.map((accountId: string) => <AccountCard id={accountId} key={accountId} />)}
+      </div>
+
+      <LoadMore onClick={handleLoadMore} visible={!isLoading} />
+    </Column>
+  );
+};
+
+export default Directory;
diff --git a/app/soapbox/features/edit_password/index.js b/app/soapbox/features/edit_password/index.tsx
similarity index 96%
rename from app/soapbox/features/edit_password/index.js
rename to app/soapbox/features/edit_password/index.tsx
index a007b24bc..e95e6dec4 100644
--- a/app/soapbox/features/edit_password/index.js
+++ b/app/soapbox/features/edit_password/index.tsx
@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { useDispatch } from 'react-redux';
 
 import { changePassword } from 'soapbox/actions/security';
 import snackbar from 'soapbox/actions/snackbar';
-
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from '../../components/ui';
+import { Button, Card, CardBody, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
+import { useAppDispatch } from 'soapbox/hooks';
 
 const messages = defineMessages({
   updatePasswordSuccess: { id: 'security.update_password.success', defaultMessage: 'Password successfully updated.' },
@@ -22,7 +21,7 @@ const initialState = { currentPassword: '', newPassword: '', newPasswordConfirma
 
 const EditPassword = () => {
   const intl = useIntl();
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const [state, setState] = React.useState(initialState);
   const [isLoading, setLoading] = React.useState(false);
diff --git a/app/soapbox/features/export_data/components/csv_exporter.tsx b/app/soapbox/features/export_data/components/csv_exporter.tsx
index f44aaa424..de524bcce 100644
--- a/app/soapbox/features/export_data/components/csv_exporter.tsx
+++ b/app/soapbox/features/export_data/components/csv_exporter.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
 import { Button, Form, FormActions, Text } from 'soapbox/components/ui';
diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.js b/app/soapbox/features/federation_restrictions/components/restricted_instance.js
deleted file mode 100644
index 38ca1b602..000000000
--- a/app/soapbox/features/federation_restrictions/components/restricted_instance.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { connect } from 'react-redux';
-
-import Icon from 'soapbox/components/icon';
-import { makeGetRemoteInstance } from 'soapbox/selectors';
-
-import InstanceRestrictions from './instance_restrictions';
-
-const getRemoteInstance = makeGetRemoteInstance();
-
-const mapStateToProps = (state, ownProps) => {
-  return {
-    remoteInstance: getRemoteInstance(state, ownProps.host),
-  };
-};
-
-export default @connect(mapStateToProps)
-class RestrictedInstance extends ImmutablePureComponent {
-
-  static propTypes = {
-    host: PropTypes.string.isRequired,
-  }
-
-  state = {
-    expanded: false,
-  }
-
-  toggleExpanded = e => {
-    this.setState({ expanded: !this.state.expanded });
-    e.preventDefault();
-  }
-
-  render() {
-    const { remoteInstance } = this.props;
-    const { expanded } = this.state;
-
-    return (
-      <div className={classNames('restricted-instance', {
-        'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
-        'restricted-instance--expanded': expanded,
-      })}
-      >
-        <a href='#' className='restricted-instance__header' onClick={this.toggleExpanded}>
-          <div className='restricted-instance__icon'>
-            <Icon src={expanded ? require('@tabler/icons/icons/caret-down.svg') : require('@tabler/icons/icons/caret-right.svg')} />
-          </div>
-          <div className='restricted-instance__host'>
-            {remoteInstance.get('host')}
-          </div>
-        </a>
-        <div className='restricted-instance__restrictions'>
-          <InstanceRestrictions remoteInstance={remoteInstance} />
-        </div>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx b/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
new file mode 100644
index 000000000..789cb215f
--- /dev/null
+++ b/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
@@ -0,0 +1,47 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+
+import Icon from 'soapbox/components/icon';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetRemoteInstance } from 'soapbox/selectors';
+
+import InstanceRestrictions from './instance_restrictions';
+
+const getRemoteInstance = makeGetRemoteInstance();
+
+interface IRestrictedInstance {
+  host: string,
+}
+
+const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
+  const remoteInstance: any = useAppSelector((state) => getRemoteInstance(state, host));
+
+  const [expanded, setExpanded] = useState(false);
+
+  const toggleExpanded: React.MouseEventHandler<HTMLAnchorElement> = e => {
+    setExpanded((value) => !value);
+    e.preventDefault();
+  };
+
+  return (
+    <div className={classNames('restricted-instance', {
+      'restricted-instance--reject': remoteInstance.getIn(['federation', 'reject']),
+      'restricted-instance--expanded': expanded,
+    })}
+    >
+      <a href='#' className='restricted-instance__header' onClick={toggleExpanded}>
+        <div className='restricted-instance__icon'>
+          <Icon src={expanded ? require('@tabler/icons/icons/caret-down.svg') : require('@tabler/icons/icons/caret-right.svg')} />
+        </div>
+        <div className='restricted-instance__host'>
+          {remoteInstance.get('host')}
+        </div>
+      </a>
+      <div className='restricted-instance__restrictions'>
+        <InstanceRestrictions remoteInstance={remoteInstance} />
+      </div>
+    </div>
+  );
+};
+
+export default RestrictedInstance;
diff --git a/app/soapbox/features/federation_restrictions/index.js b/app/soapbox/features/federation_restrictions/index.js
deleted file mode 100644
index bb5ccdab2..000000000
--- a/app/soapbox/features/federation_restrictions/index.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import ImmutablePureComponent from 'react-immutable-pure-component';
-import { defineMessages, injectIntl } from 'react-intl';
-import { connect } from 'react-redux';
-
-import ScrollableList from 'soapbox/components/scrollable_list';
-import Accordion from 'soapbox/features/ui/components/accordion';
-import { makeGetHosts } from 'soapbox/selectors';
-import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
-
-import Column from '../ui/components/column';
-
-import RestrictedInstance from './components/restricted_instance';
-
-const messages = defineMessages({
-  heading: { id: 'column.federation_restrictions', defaultMessage: 'Federation Restrictions' },
-  boxTitle: { id: 'federation_restrictions.explanation_box.title', defaultMessage: 'Instance-specific policies' },
-  boxMessage: { id: 'federation_restrictions.explanation_box.message', defaultMessage: 'Normally servers on the Fediverse can communicate freely. {siteTitle} has imposed restrictions on the following servers.' },
-  emptyMessage: { id: 'federation_restrictions.empty_message', defaultMessage: '{siteTitle} has not restricted any instances.' },
-  notDisclosed: { id: 'federation_restrictions.not_disclosed_message', defaultMessage: '{siteTitle} does not disclose federation restrictions through the API.' },
-});
-
-const getHosts = makeGetHosts();
-
-const mapStateToProps = state => ({
-  siteTitle: state.getIn(['instance', 'title']),
-  hosts: getHosts(state),
-  disclosed: federationRestrictionsDisclosed(state),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class FederationRestrictions extends ImmutablePureComponent {
-
-  static propTypes = {
-    intl: PropTypes.object.isRequired,
-    disclosed: PropTypes.bool,
-  };
-
-  state = {
-    explanationBoxExpanded: true,
-  }
-
-  toggleExplanationBox = setting => {
-    this.setState({ explanationBoxExpanded: setting });
-  }
-
-  render() {
-    const { intl, hosts, siteTitle, disclosed } = this.props;
-    const { explanationBoxExpanded } = this.state;
-
-    const emptyMessage = disclosed ? messages.emptyMessage : messages.notDisclosed;
-
-    return (
-      <Column icon='gavel' label={intl.formatMessage(messages.heading)}>
-        <div className='explanation-box'>
-          <Accordion
-            headline={intl.formatMessage(messages.boxTitle)}
-            expanded={explanationBoxExpanded}
-            onToggle={this.toggleExplanationBox}
-          >
-            {intl.formatMessage(messages.boxMessage, { siteTitle })}
-          </Accordion>
-        </div>
-
-        <div className='federation-restrictions'>
-          <ScrollableList emptyMessage={intl.formatMessage(emptyMessage, { siteTitle })}>
-            {hosts.map(host => <RestrictedInstance key={host} host={host} />)}
-          </ScrollableList>
-        </div>
-      </Column>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/federation_restrictions/index.tsx b/app/soapbox/features/federation_restrictions/index.tsx
new file mode 100644
index 000000000..396f527a0
--- /dev/null
+++ b/app/soapbox/features/federation_restrictions/index.tsx
@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ScrollableList from 'soapbox/components/scrollable_list';
+import Accordion from 'soapbox/features/ui/components/accordion';
+import { useAppSelector } from 'soapbox/hooks';
+import { makeGetHosts } from 'soapbox/selectors';
+import { federationRestrictionsDisclosed } from 'soapbox/utils/state';
+
+import Column from '../ui/components/column';
+
+import RestrictedInstance from './components/restricted_instance';
+
+import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
+
+const messages = defineMessages({
+  heading: { id: 'column.federation_restrictions', defaultMessage: 'Federation Restrictions' },
+  boxTitle: { id: 'federation_restrictions.explanation_box.title', defaultMessage: 'Instance-specific policies' },
+  boxMessage: { id: 'federation_restrictions.explanation_box.message', defaultMessage: 'Normally servers on the Fediverse can communicate freely. {siteTitle} has imposed restrictions on the following servers.' },
+  emptyMessage: { id: 'federation_restrictions.empty_message', defaultMessage: '{siteTitle} has not restricted any instances.' },
+  notDisclosed: { id: 'federation_restrictions.not_disclosed_message', defaultMessage: '{siteTitle} does not disclose federation restrictions through the API.' },
+});
+
+const getHosts = makeGetHosts();
+
+const FederationRestrictions = () => {
+  const intl = useIntl();
+
+  const siteTitle = useAppSelector((state) => state.instance.get('title'));
+  const hosts = useAppSelector((state) => getHosts(state)) as ImmutableOrderedSet<string>;
+  const disclosed = useAppSelector((state) => federationRestrictionsDisclosed(state));
+
+  const [explanationBoxExpanded, setExplanationBoxExpanded] = useState(true);
+
+  const toggleExplanationBox = (setting: boolean) => {
+    setExplanationBoxExpanded(setting);
+  };
+
+  const emptyMessage = disclosed ? messages.emptyMessage : messages.notDisclosed;
+
+  return (
+    <Column icon='gavel' label={intl.formatMessage(messages.heading)}>
+      <div className='explanation-box'>
+        <Accordion
+          headline={intl.formatMessage(messages.boxTitle)}
+          expanded={explanationBoxExpanded}
+          onToggle={toggleExplanationBox}
+        >
+          {intl.formatMessage(messages.boxMessage, { siteTitle })}
+        </Accordion>
+      </div>
+
+      <div className='federation-restrictions'>
+        <ScrollableList emptyMessage={intl.formatMessage(emptyMessage, { siteTitle })}>
+          {hosts.map((host) => <RestrictedInstance key={host} host={host} />)}
+        </ScrollableList>
+      </div>
+    </Column>
+  );
+};
+
+export default FederationRestrictions;
diff --git a/app/soapbox/features/import_data/components/csv_importer.tsx b/app/soapbox/features/import_data/components/csv_importer.tsx
index aa5937af9..fafbe813d 100644
--- a/app/soapbox/features/import_data/components/csv_importer.tsx
+++ b/app/soapbox/features/import_data/components/csv_importer.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { MessageDescriptor, useIntl } from 'react-intl';
 
 import { Button, FileInput, Form, FormActions, FormGroup, Text } from 'soapbox/components/ui';
diff --git a/app/soapbox/features/new_status/index.tsx b/app/soapbox/features/new_status/index.tsx
index 322976afc..e5b4aacd2 100644
--- a/app/soapbox/features/new_status/index.tsx
+++ b/app/soapbox/features/new_status/index.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { Redirect } from 'react-router-dom';
 
 import { openModal } from 'soapbox/actions/modals';
diff --git a/app/soapbox/features/reply_mentions/account.tsx b/app/soapbox/features/reply_mentions/account.tsx
index c4817e8cf..b96d6cf5b 100644
--- a/app/soapbox/features/reply_mentions/account.tsx
+++ b/app/soapbox/features/reply_mentions/account.tsx
@@ -1,5 +1,4 @@
-import React from 'react';
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { fetchAccount } from 'soapbox/actions/accounts';
diff --git a/app/soapbox/features/ui/components/reactions_modal.tsx b/app/soapbox/features/ui/components/reactions_modal.tsx
index 4fb4df72a..4832f943d 100644
--- a/app/soapbox/features/ui/components/reactions_modal.tsx
+++ b/app/soapbox/features/ui/components/reactions_modal.tsx
@@ -1,6 +1,5 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect } from 'react';
-import { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { fetchFavourites, fetchReactions } from 'soapbox/actions/interactions';
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index dfdcfeb9f..1ebfc30a0 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -282,7 +282,7 @@ const SwitchingColumnsArea: React.FC = ({ children }) => {
       <Redirect from='/@:username/:statusId' to='/@:username/posts/:statusId' />
 
       <WrappedRoute path='/statuses/new' page={DefaultPage} component={NewStatus} content={children} exact />
-      <WrappedRoute path='/statuses/:statusId' exact component={Status} content={children} />
+      <WrappedRoute path='/statuses/:statusId' exact page={StatusPage} component={Status} content={children} />
       {features.scheduledStatuses && <WrappedRoute path='/scheduled_statuses' page={DefaultPage} component={ScheduledStatuses} content={children} />}
 
       <WrappedRoute path='/settings/profile' page={DefaultPage} component={EditProfile} content={children} />

From a5fdfb31fdc556b6c163749216e070fdb5abf3b0 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:11:44 -0500
Subject: [PATCH 074/102] Warning: convert to TSX

---
 .../features/compose/components/warning.js    | 27 -------------------
 .../features/compose/components/warning.tsx   | 21 +++++++++++++++
 2 files changed, 21 insertions(+), 27 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/warning.js
 create mode 100644 app/soapbox/features/compose/components/warning.tsx

diff --git a/app/soapbox/features/compose/components/warning.js b/app/soapbox/features/compose/components/warning.js
deleted file mode 100644
index a819b33ec..000000000
--- a/app/soapbox/features/compose/components/warning.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import spring from 'react-motion/lib/spring';
-
-import Motion from '../../ui/util/optional_motion';
-
-export default class Warning extends React.PureComponent {
-
-  static propTypes = {
-    message: PropTypes.node.isRequired,
-  };
-
-  render() {
-    const { message } = this.props;
-
-    return (
-      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
-        {({ opacity, scaleX, scaleY }) => (
-          <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
-            {message}
-          </div>
-        )}
-      </Motion>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/warning.tsx b/app/soapbox/features/compose/components/warning.tsx
new file mode 100644
index 000000000..b8ec90e09
--- /dev/null
+++ b/app/soapbox/features/compose/components/warning.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { spring } from 'react-motion';
+
+import Motion from '../../ui/util/optional_motion';
+
+interface IWarning {
+  message: React.ReactNode,
+}
+
+/** Warning message displayed in ComposeForm. */
+const Warning: React.FC<IWarning> = ({ message }) => (
+  <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+    {({ opacity, scaleX, scaleY }) => (
+      <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+        {message}
+      </div>
+    )}
+  </Motion>
+);
+
+export default Warning;

From 1beaccd3acdb4a7a26a67504e7c67a50a6f86700 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:15:35 -0500
Subject: [PATCH 075/102] TextIconButton: convert to TSX

---
 .../compose/components/text_icon_button.js    | 34 ------------------
 .../compose/components/text_icon_button.tsx   | 36 +++++++++++++++++++
 2 files changed, 36 insertions(+), 34 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/text_icon_button.js
 create mode 100644 app/soapbox/features/compose/components/text_icon_button.tsx

diff --git a/app/soapbox/features/compose/components/text_icon_button.js b/app/soapbox/features/compose/components/text_icon_button.js
deleted file mode 100644
index 1ca71fe6f..000000000
--- a/app/soapbox/features/compose/components/text_icon_button.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-export default class TextIconButton extends React.PureComponent {
-
-  static propTypes = {
-    label: PropTypes.string.isRequired,
-    title: PropTypes.string,
-    active: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    ariaControls: PropTypes.string,
-    unavailable: PropTypes.bool,
-  };
-
-  handleClick = (e) => {
-    e.preventDefault();
-    this.props.onClick();
-  }
-
-  render() {
-    const { label, title, active, ariaControls, unavailable } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={this.handleClick} aria-controls={ariaControls}>
-        {label}
-      </button>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/text_icon_button.tsx b/app/soapbox/features/compose/components/text_icon_button.tsx
new file mode 100644
index 000000000..fd49d4ed0
--- /dev/null
+++ b/app/soapbox/features/compose/components/text_icon_button.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface ITextIconButton {
+  label: string,
+  title: string,
+  active: boolean,
+  onClick: () => void,
+  ariaControls: string,
+  unavailable: boolean,
+}
+
+const TextIconButton: React.FC<ITextIconButton> = ({
+  label,
+  title,
+  active,
+  ariaControls,
+  unavailable,
+  onClick,
+}) => {
+  const handleClick: React.MouseEventHandler = (e) => {
+    e.preventDefault();
+    onClick();
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  return (
+    <button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={handleClick} aria-controls={ariaControls}>
+      {label}
+    </button>
+  );
+};
+
+export default TextIconButton;

From 7a35aa727b76a8309d2ac96853950e1456c756ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 May 2022 20:23:55 +0200
Subject: [PATCH 076/102] =?UTF-8?q?import=20from=20'soapbox/=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../actions/push_notifications/registerer.js  |  5 +-
 app/soapbox/features/account_gallery/index.js |  3 +-
 .../features/account_timeline/index.js        | 11 ++--
 app/soapbox/features/bookmarks/index.tsx      |  5 +-
 .../features/community_timeline/index.js      |  6 +--
 .../compose/components/compose_form.js        |  8 +--
 .../compose/components/privacy_dropdown.js    |  2 +-
 .../compose/components/reply_indicator.js     |  3 +-
 .../compose/components/search_results.js      |  9 ++--
 .../containers/search_results_container.js    |  4 +-
 .../components/conversations_list.tsx         |  3 +-
 .../features/developers/apps/create.js        |  3 +-
 .../features/developers/settings_store.js     |  3 +-
 app/soapbox/features/edit_profile/index.tsx   |  5 +-
 .../features/favourited_statuses/index.js     |  6 +--
 app/soapbox/features/followers/index.js       | 18 +++----
 app/soapbox/features/following/index.js       | 18 +++----
 app/soapbox/features/landing_page/index.tsx   |  3 +-
 .../features/list_adder/components/list.js    |  5 +-
 .../features/list_editor/components/search.js |  3 +-
 .../notifications/components/filter_bar.js    |  3 +-
 .../notifications/components/notification.tsx | 11 ++--
 .../containers/column_settings_container.js   | 10 ++--
 .../containers/filter_bar_container.js        |  2 +-
 .../containers/notification_container.js      | 14 ++---
 app/soapbox/features/notifications/index.js   | 13 +++--
 .../steps/suggested-accounts-step.tsx         |  3 +-
 app/soapbox/features/pinned_statuses/index.js |  4 +-
 .../public_layout/components/footer.js        |  3 +-
 .../public_layout/components/header.tsx       |  5 +-
 app/soapbox/features/public_timeline/index.js |  6 +--
 .../features/remote_timeline/index.tsx        |  4 +-
 .../security/mfa/disable_otp_form.tsx         |  3 +-
 .../features/security/mfa/enable_otp_form.tsx |  3 +-
 .../security/mfa/otp_confirm_form.tsx         |  9 ++--
 app/soapbox/features/security/mfa_form.tsx    |  5 +-
 .../features/status/components/action-bar.tsx |  7 ++-
 .../components/status-interaction-bar.tsx     |  3 +-
 app/soapbox/features/status/index.tsx         | 54 +++++++++----------
 .../ui/components/account_list_panel.js       |  3 +-
 .../ui/components/confirmation_modal.js       |  3 +-
 .../features/ui/components/mute_modal.js      |  4 +-
 app/soapbox/features/ui/components/navbar.tsx |  3 +-
 .../ui/components/profile-dropdown.tsx        |  3 +-
 .../ui/components/profile_media_panel.tsx     |  2 +-
 .../features/ui/components/profile_stats.tsx  |  3 +-
 .../features/ui/components/trends-panel.tsx   |  5 +-
 .../ui/components/who-to-follow-panel.tsx     |  5 +-
 .../features/ui/containers/modal_container.js |  4 +-
 .../ui/containers/status_list_container.js    |  5 +-
 .../verification/steps/sms-verification.js    |  3 +-
 .../features/verification/waitlist_page.tsx   |  5 +-
 app/soapbox/features/video/index.js           |  2 +-
 53 files changed, 149 insertions(+), 186 deletions(-)

diff --git a/app/soapbox/actions/push_notifications/registerer.js b/app/soapbox/actions/push_notifications/registerer.js
index b4d86631e..666be8560 100644
--- a/app/soapbox/actions/push_notifications/registerer.js
+++ b/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 { pushNotificationsSetting } from '../../settings';
-import { decode as decodeBase64 } from '../../utils/base64';
+import { decode as decodeBase64 } from 'soapbox/utils/base64';
 
 import { setBrowserSupport, setSubscription, clearSubscription } from './setter';
 
diff --git a/app/soapbox/features/account_gallery/index.js b/app/soapbox/features/account_gallery/index.js
index 28f77f1fa..a17fa85e1 100644
--- a/app/soapbox/features/account_gallery/index.js
+++ b/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 }) => {
diff --git a/app/soapbox/features/account_timeline/index.js b/app/soapbox/features/account_timeline/index.js
index c394eecf2..18b7d3107 100644
--- a/app/soapbox/features/account_timeline/index.js
+++ b/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();
 
diff --git a/app/soapbox/features/bookmarks/index.tsx b/app/soapbox/features/bookmarks/index.tsx
index 288feff96..ebd4eb1cd 100644
--- a/app/soapbox/features/bookmarks/index.tsx
+++ b/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' },
 });
diff --git a/app/soapbox/features/community_timeline/index.js b/app/soapbox/features/community_timeline/index.js
index 746bda692..1ccc6076f 100644
--- a/app/soapbox/features/community_timeline/index.js
+++ b/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';
diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index b59c61da0..9700c03f4 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/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';
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
index d6ddf771c..93bc33497 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.js
+++ b/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({
diff --git a/app/soapbox/features/compose/components/reply_indicator.js b/app/soapbox/features/compose/components/reply_indicator.js
index faa86ea9a..ffa3d6a11 100644
--- a/app/soapbox/features/compose/components/reply_indicator.js
+++ b/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 '../../../rtl';
+import { isRtl } from 'soapbox/rtl';
 
 export default class ReplyIndicator extends ImmutablePureComponent {
 
diff --git a/app/soapbox/features/compose/components/search_results.js b/app/soapbox/features/compose/components/search_results.js
index 05cbe2663..e4dfa936b 100644
--- a/app/soapbox/features/compose/components/search_results.js
+++ b/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' },
diff --git a/app/soapbox/features/compose/containers/search_results_container.js b/app/soapbox/features/compose/containers/search_results_container.js
index 4ab9b712f..e284060d9 100644
--- a/app/soapbox/features/compose/containers/search_results_container.js
+++ b/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 => {
diff --git a/app/soapbox/features/conversations/components/conversations_list.tsx b/app/soapbox/features/conversations/components/conversations_list.tsx
index e7bc79078..32fbb3e55 100644
--- a/app/soapbox/features/conversations/components/conversations_list.tsx
+++ b/app/soapbox/features/conversations/components/conversations_list.tsx
@@ -1,6 +1,5 @@
 import { debounce } from 'lodash';
-import React from 'react';
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import { expandConversations } from 'soapbox/actions/conversations';
diff --git a/app/soapbox/features/developers/apps/create.js b/app/soapbox/features/developers/apps/create.js
index f328dd476..01187c34f 100644
--- a/app/soapbox/features/developers/apps/create.js
+++ b/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\'' },
diff --git a/app/soapbox/features/developers/settings_store.js b/app/soapbox/features/developers/settings_store.js
index 2ff9ce9df..02a423ae2 100644
--- a/app/soapbox/features/developers/settings_store.js
+++ b/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);
diff --git a/app/soapbox/features/edit_profile/index.tsx b/app/soapbox/features/edit_profile/index.tsx
index 788031852..e32473505 100644
--- a/app/soapbox/features/edit_profile/index.tsx
+++ b/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';
diff --git a/app/soapbox/features/favourited_statuses/index.js b/app/soapbox/features/favourited_statuses/index.js
index 394f8216f..73ad5a255 100644
--- a/app/soapbox/features/favourited_statuses/index.js
+++ b/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({
diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js
index 1a98cb561..a146f4f6f 100644
--- a/app/soapbox/features/followers/index.js
+++ b/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';
-import ScrollableList from '../../components/scrollable_list';
-import AccountContainer from '../../containers/account_container';
+} from 'soapbox/actions/accounts';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+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({
diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js
index 7ab00a7b9..447a0ae02 100644
--- a/app/soapbox/features/following/index.js
+++ b/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';
-import ScrollableList from '../../components/scrollable_list';
-import AccountContainer from '../../containers/account_container';
+} from 'soapbox/actions/accounts';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+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({
diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 26f41f086..8b2956169 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/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();
diff --git a/app/soapbox/features/list_adder/components/list.js b/app/soapbox/features/list_adder/components/list.js
index d9b23ec3e..fd9930180 100644
--- a/app/soapbox/features/list_adder/components/list.js
+++ b/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 { removeFromListAdder, addToListAdder } from '../../../actions/lists';
-import IconButton from '../../../components/icon_button';
+import IconButton from 'soapbox/components/icon_button';
 
 const messages = defineMessages({
   remove: { id: 'lists.account.remove', defaultMessage: 'Remove from list' },
diff --git a/app/soapbox/features/list_editor/components/search.js b/app/soapbox/features/list_editor/components/search.js
index fc2928a00..3314fa4e3 100644
--- a/app/soapbox/features/list_editor/components/search.js
+++ b/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' },
diff --git a/app/soapbox/features/notifications/components/filter_bar.js b/app/soapbox/features/notifications/components/filter_bar.js
index d443205a7..6384b7788 100644
--- a/app/soapbox/features/notifications/components/filter_bar.js
+++ b/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 '../../../components/ui';
+import { Tabs } from 'soapbox/components/ui';
 
 const messages = defineMessages({
   all: { id: 'notifications.filter.all', defaultMessage: 'All' },
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 1a9dad8eb..f1b16e780 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/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';
diff --git a/app/soapbox/features/notifications/containers/column_settings_container.js b/app/soapbox/features/notifications/containers/column_settings_container.js
index a60532d40..d21733b18 100644
--- a/app/soapbox/features/notifications/containers/column_settings_container.js
+++ b/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({
diff --git a/app/soapbox/features/notifications/containers/filter_bar_container.js b/app/soapbox/features/notifications/containers/filter_bar_container.js
index 82805136a..6aa62b7d4 100644
--- a/app/soapbox/features/notifications/containers/filter_bar_container.js
+++ b/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 => {
diff --git a/app/soapbox/features/notifications/containers/notification_container.js b/app/soapbox/features/notifications/containers/notification_container.js
index cfbef992f..d8713d204 100644
--- a/app/soapbox/features/notifications/containers/notification_container.js
+++ b/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 '../../../actions/compose';
+import { mentionCompose } from 'soapbox/actions/compose';
 import {
   reblog,
   favourite,
   unreblog,
   unfavourite,
-} from '../../../actions/interactions';
-import { openModal } from '../../../actions/modals';
+} from 'soapbox/actions/interactions';
+import { openModal } from 'soapbox/actions/modals';
+import { getSettings } from 'soapbox/actions/settings';
 import {
   hideStatus,
   revealStatus,
-} from '../../../actions/statuses';
-import { makeGetNotification } from '../../../selectors';
+} from 'soapbox/actions/statuses';
+import { makeGetNotification } from 'soapbox/selectors';
+
 import Notification from '../components/notification';
 
 const makeMapStateToProps = () => {
diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js
index a43ec5704..8ef05fb73 100644
--- a/app/soapbox/features/notifications/index.js
+++ b/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';
-import ScrollableList from '../../components/scrollable_list';
-import TimelineQueueButtonHeader from  '../../components/timeline_queue_button_header';
-import { Column } from '../../components/ui';
+} from 'soapbox/actions/notifications';
+import { getSettings } from 'soapbox/actions/settings';
+import ScrollableList from 'soapbox/components/scrollable_list';
+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';
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index 4421979cb..2ef5ab828 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/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();
 
diff --git a/app/soapbox/features/pinned_statuses/index.js b/app/soapbox/features/pinned_statuses/index.js
index a045641a4..b6649a01b 100644
--- a/app/soapbox/features/pinned_statuses/index.js
+++ b/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({
diff --git a/app/soapbox/features/public_layout/components/footer.js b/app/soapbox/features/public_layout/components/footer.js
index 291e29f84..11a56806b 100644
--- a/app/soapbox/features/public_layout/components/footer.js
+++ b/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 '../../../components/ui';
+import { Text } from 'soapbox/components/ui';
 
 const mapStateToProps = (state, props) => {
   const soapboxConfig = getSoapboxConfig(state);
diff --git a/app/soapbox/features/public_layout/components/header.tsx b/app/soapbox/features/public_layout/components/header.tsx
index 2153dff05..dcb1859a7 100644
--- a/app/soapbox/features/public_layout/components/header.tsx
+++ b/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';
diff --git a/app/soapbox/features/public_timeline/index.js b/app/soapbox/features/public_timeline/index.js
index 14168e1cc..7404c6106 100644
--- a/app/soapbox/features/public_timeline/index.js
+++ b/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';
 
diff --git a/app/soapbox/features/remote_timeline/index.tsx b/app/soapbox/features/remote_timeline/index.tsx
index 6f8fe9477..0942a23b5 100644
--- a/app/soapbox/features/remote_timeline/index.tsx
+++ b/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';
diff --git a/app/soapbox/features/security/mfa/disable_otp_form.tsx b/app/soapbox/features/security/mfa/disable_otp_form.tsx
index 2dd66b8c8..a62133b87 100644
--- a/app/soapbox/features/security/mfa/disable_otp_form.tsx
+++ b/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.' },
diff --git a/app/soapbox/features/security/mfa/enable_otp_form.tsx b/app/soapbox/features/security/mfa/enable_otp_form.tsx
index adb02faff..a5608bf18 100644
--- a/app/soapbox/features/security/mfa/enable_otp_form.tsx
+++ b/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' },
diff --git a/app/soapbox/features/security/mfa/otp_confirm_form.tsx b/app/soapbox/features/security/mfa/otp_confirm_form.tsx
index b5770d268..2f4fd07ab 100644
--- a/app/soapbox/features/security/mfa/otp_confirm_form.tsx
+++ b/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';
-import { Button, Form, FormActions, FormGroup, Input, Stack, Text } from '../../../components/ui';
+} from 'soapbox/actions/mfa';
+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' },
diff --git a/app/soapbox/features/security/mfa_form.tsx b/app/soapbox/features/security/mfa_form.tsx
index f85756c28..92a922148 100644
--- a/app/soapbox/features/security/mfa_form.tsx
+++ b/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';
diff --git a/app/soapbox/features/status/components/action-bar.tsx b/app/soapbox/features/status/components/action-bar.tsx
index d80c5d5d2..35cbaf79e 100644
--- a/app/soapbox/features/status/components/action-bar.tsx
+++ b/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';
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index 2fdc4808d..13ecf6c60 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/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 {
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 804005fa5..9f0e3dbf6 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/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';
-import { simpleEmojiReact } from '../../actions/emoji_reacts';
+} from 'soapbox/actions/compose';
+import { simpleEmojiReact } from 'soapbox/actions/emoji_reacts';
 import {
   favourite,
   unfavourite,
@@ -41,10 +26,18 @@ import {
   unbookmark,
   pin,
   unpin,
-} from '../../actions/interactions';
-import { openModal } from '../../actions/modals';
-import { initMuteModal } from '../../actions/mutes';
-import { initReport } from '../../actions/reports';
+} from 'soapbox/actions/interactions';
+import { openModal } from 'soapbox/actions/modals';
+import {
+  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';
-import { fetchStatusWithContext, fetchNext } from '../../actions/statuses';
-import MissingIndicator from '../../components/missing_indicator';
-import { textForScreenReader, defaultMediaVisibility } from '../../components/status';
-import { makeGetStatus } from '../../selectors';
+} from 'soapbox/actions/statuses';
+import { fetchStatusWithContext, fetchNext } from 'soapbox/actions/statuses';
+import MissingIndicator from 'soapbox/components/missing_indicator';
+import ScrollableList from 'soapbox/components/scrollable_list';
+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';
diff --git a/app/soapbox/features/ui/components/account_list_panel.js b/app/soapbox/features/ui/components/account_list_panel.js
index 210a7bf6a..61b703e4f 100644
--- a/app/soapbox/features/ui/components/account_list_panel.js
+++ b/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 '../../../containers/account_container';
+import AccountContainer from 'soapbox/containers/account_container';
 
 export default class AccountListPanel extends ImmutablePureComponent {
 
diff --git a/app/soapbox/features/ui/components/confirmation_modal.js b/app/soapbox/features/ui/components/confirmation_modal.js
index ab740a940..e205f6ce1 100644
--- a/app/soapbox/features/ui/components/confirmation_modal.js
+++ b/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 {
 
diff --git a/app/soapbox/features/ui/components/mute_modal.js b/app/soapbox/features/ui/components/mute_modal.js
index 0a8de57ea..99bdb7ef8 100644
--- a/app/soapbox/features/ui/components/mute_modal.js
+++ b/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 { Text } from '../../../components/ui';
+import { Modal, HStack, Stack, Text } from 'soapbox/components/ui';
 
 const mapStateToProps = state => {
   return {
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index ac81681d9..9b09edc1c 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/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({
diff --git a/app/soapbox/features/ui/components/profile-dropdown.tsx b/app/soapbox/features/ui/components/profile-dropdown.tsx
index 121304960..f364cee68 100644
--- a/app/soapbox/features/ui/components/profile-dropdown.tsx
+++ b/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';
diff --git a/app/soapbox/features/ui/components/profile_media_panel.tsx b/app/soapbox/features/ui/components/profile_media_panel.tsx
index 29738ec3f..78ecfa2c7 100644
--- a/app/soapbox/features/ui/components/profile_media_panel.tsx
+++ b/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';
diff --git a/app/soapbox/features/ui/components/profile_stats.tsx b/app/soapbox/features/ui/components/profile_stats.tsx
index 998baa379..9fff5ffe3 100644
--- a/app/soapbox/features/ui/components/profile_stats.tsx
+++ b/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({
diff --git a/app/soapbox/features/ui/components/trends-panel.tsx b/app/soapbox/features/ui/components/trends-panel.tsx
index 4fa4a7b26..9fafc930f 100644
--- a/app/soapbox/features/ui/components/trends-panel.tsx
+++ b/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
 }
diff --git a/app/soapbox/features/ui/components/who-to-follow-panel.tsx b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
index 25a730603..8decff7db 100644
--- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx
+++ b/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' },
 });
diff --git a/app/soapbox/features/ui/containers/modal_container.js b/app/soapbox/features/ui/containers/modal_container.js
index 1ecc91b98..54f07a371 100644
--- a/app/soapbox/features/ui/containers/modal_container.js
+++ b/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 => {
diff --git a/app/soapbox/features/ui/containers/status_list_container.js b/app/soapbox/features/ui/containers/status_list_container.js
index 925c5d732..c5d180c7e 100644
--- a/app/soapbox/features/ui/containers/status_list_container.js
+++ b/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();
 
diff --git a/app/soapbox/features/verification/steps/sms-verification.js b/app/soapbox/features/verification/steps/sms-verification.js
index 20a17981d..01050c832 100644
--- a/app/soapbox/features/verification/steps/sms-verification.js
+++ b/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',
diff --git a/app/soapbox/features/verification/waitlist_page.tsx b/app/soapbox/features/verification/waitlist_page.tsx
index 0a28f4993..00182e58f 100644
--- a/app/soapbox/features/verification/waitlist_page.tsx
+++ b/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();
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index 14ce1ce6b..423468f65 100644
--- a/app/soapbox/features/video/index.js
+++ b/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;

From 4821703edb59cd1a81e84f4e907540e1bf455374 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:26:24 -0500
Subject: [PATCH 077/102] UploadButton: convert to TSX

---
 .../compose/components/upload_button.js       | 92 -------------------
 .../compose/components/upload_button.tsx      | 81 ++++++++++++++++
 2 files changed, 81 insertions(+), 92 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/upload_button.js
 create mode 100644 app/soapbox/features/compose/components/upload_button.tsx

diff --git a/app/soapbox/features/compose/components/upload_button.js b/app/soapbox/features/compose/components/upload_button.js
deleted file mode 100644
index a42e3be1f..000000000
--- a/app/soapbox/features/compose/components/upload_button.js
+++ /dev/null
@@ -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 { IconButton } from '../../../components/ui';
-
-const messages = defineMessages({
-  upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
-});
-
-const onlyImages = types => {
-  return Boolean(types && types.every(type => type.startsWith('image/')));
-};
-
-const makeMapStateToProps = () => {
-  const mapStateToProps = state => ({
-    attachmentTypes: state.getIn(['instance', 'configuration', 'media_attachments', 'supported_mime_types']),
-  });
-
-  return mapStateToProps;
-};
-
-export default @connect(makeMapStateToProps)
-@injectIntl
-class UploadButton extends ImmutablePureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    onSelectFile: PropTypes.func.isRequired,
-    style: PropTypes.object,
-    resetFileKey: PropTypes.number,
-    attachmentTypes: ImmutablePropTypes.listOf(PropTypes.string),
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleChange = (e) => {
-    if (e.target.files.length > 0) {
-      this.props.onSelectFile(e.target.files);
-    }
-  }
-
-  handleClick = () => {
-    this.fileElement.click();
-  }
-
-  setRef = (c) => {
-    this.fileElement = c;
-  }
-
-  render() {
-    const { intl, resetFileKey, attachmentTypes, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    const src = onlyImages(attachmentTypes)
-      ? require('@tabler/icons/icons/photo.svg')
-      : require('@tabler/icons/icons/paperclip.svg');
-
-    return (
-      <div>
-        <IconButton
-          src={src}
-          className='text-gray-400 hover:text-gray-600'
-          title={intl.formatMessage(messages.upload)}
-          disabled={disabled}
-          onClick={this.handleClick}
-        />
-
-        <label>
-          <span className='sr-only'>{intl.formatMessage(messages.upload)}</span>
-          <input
-            key={resetFileKey}
-            ref={this.setRef}
-            type='file'
-            multiple
-            accept={attachmentTypes && attachmentTypes.toArray().join(',')}
-            onChange={this.handleChange}
-            disabled={disabled}
-            className='hidden'
-          />
-        </label>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/upload_button.tsx b/app/soapbox/features/compose/components/upload_button.tsx
new file mode 100644
index 000000000..a34e2b4ad
--- /dev/null
+++ b/app/soapbox/features/compose/components/upload_button.tsx
@@ -0,0 +1,81 @@
+import React, { useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { IconButton } from 'soapbox/components/ui';
+import { useAppSelector } from 'soapbox/hooks';
+
+import type { List as ImmutableList } from 'immutable';
+
+const messages = defineMessages({
+  upload: { id: 'upload_button.label', defaultMessage: 'Add media attachment' },
+});
+
+const onlyImages = (types: ImmutableList<string>) => {
+  return Boolean(types && types.every(type => type.startsWith('image/')));
+};
+
+interface IUploadButton {
+  disabled: boolean,
+  unavailable: boolean,
+  onSelectFile: (files: FileList) => void,
+  style: React.CSSProperties,
+  resetFileKey: number,
+}
+
+const UploadButton: React.FC<IUploadButton> = ({
+  disabled,
+  unavailable,
+  onSelectFile,
+  resetFileKey,
+}) => {
+  const intl = useIntl();
+
+  const fileElement = useRef<HTMLInputElement>(null);
+  const attachmentTypes = useAppSelector(state => state.instance.configuration.getIn(['media_attachments', 'supported_mime_types']) as ImmutableList<string>);
+
+  const handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
+    if (e.target.files?.length) {
+      onSelectFile(e.target.files);
+    }
+  };
+
+  const handleClick = () => {
+    fileElement.current?.click();
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  const src = onlyImages(attachmentTypes)
+    ? require('@tabler/icons/icons/photo.svg')
+    : require('@tabler/icons/icons/paperclip.svg');
+
+  return (
+    <div>
+      <IconButton
+        src={src}
+        className='text-gray-400 hover:text-gray-600'
+        title={intl.formatMessage(messages.upload)}
+        disabled={disabled}
+        onClick={handleClick}
+      />
+
+      <label>
+        <span className='sr-only'>{intl.formatMessage(messages.upload)}</span>
+        <input
+          key={resetFileKey}
+          ref={fileElement}
+          type='file'
+          multiple
+          accept={attachmentTypes && attachmentTypes.toArray().join(',')}
+          onChange={handleChange}
+          disabled={disabled}
+          className='hidden'
+        />
+      </label>
+    </div>
+  );
+};
+
+export default UploadButton;

From e813eecacbf45d20460dd50d49df1e0d09209e5e Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:53:14 -0500
Subject: [PATCH 078/102] Upload: convert to TSX

---
 .../features/compose/components/upload.js     | 212 ------------------
 .../features/compose/components/upload.tsx    | 205 +++++++++++++++++
 2 files changed, 205 insertions(+), 212 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/upload.js
 create mode 100644 app/soapbox/features/compose/components/upload.tsx

diff --git a/app/soapbox/features/compose/components/upload.js b/app/soapbox/features/compose/components/upload.js
deleted file mode 100644
index a293509f9..000000000
--- a/app/soapbox/features/compose/components/upload.js
+++ /dev/null
@@ -1,212 +0,0 @@
-import classNames from 'classnames';
-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, FormattedMessage } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-import { withRouter } from 'react-router-dom';
-
-import Blurhash from 'soapbox/components/blurhash';
-import Icon from 'soapbox/components/icon';
-import IconButton from 'soapbox/components/icon_button';
-
-import Motion from '../../ui/util/optional_motion';
-
-const bookIcon = require('@tabler/icons/icons/book.svg');
-const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
-const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
-const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
-const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
-const presentationIcon = require('@tabler/icons/icons/presentation.svg');
-
-export const MIMETYPE_ICONS = {
-  'application/x-freearc': fileZipIcon,
-  'application/x-bzip': fileZipIcon,
-  'application/x-bzip2': fileZipIcon,
-  'application/gzip': fileZipIcon,
-  'application/vnd.rar': fileZipIcon,
-  'application/x-tar': fileZipIcon,
-  'application/zip': fileZipIcon,
-  'application/x-7z-compressed': fileZipIcon,
-  'application/x-csh': fileCodeIcon,
-  'application/html': fileCodeIcon,
-  'text/javascript': fileCodeIcon,
-  'application/json': fileCodeIcon,
-  'application/ld+json': fileCodeIcon,
-  'application/x-httpd-php': fileCodeIcon,
-  'application/x-sh': fileCodeIcon,
-  'application/xhtml+xml': fileCodeIcon,
-  'application/xml': fileCodeIcon,
-  'application/epub+zip': bookIcon,
-  'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
-  'application/vnd.ms-excel': fileAnalyticsIcon,
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
-  'application/pdf': fileTextIcon,
-  'application/vnd.oasis.opendocument.presentation': presentationIcon,
-  'application/vnd.ms-powerpoint': presentationIcon,
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': presentationIcon,
-  'text/plain': fileTextIcon,
-  'application/rtf': fileTextIcon,
-  'application/msword': fileTextIcon,
-  'application/x-abiword': fileTextIcon,
-  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': fileTextIcon,
-  'application/vnd.oasis.opendocument.text': fileTextIcon,
-};
-
-const messages = defineMessages({
-  description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
-  delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
-});
-
-export default @injectIntl @withRouter
-class Upload extends ImmutablePureComponent {
-
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-    intl: PropTypes.object.isRequired,
-    onUndo: PropTypes.func.isRequired,
-    onDescriptionChange: PropTypes.func.isRequired,
-    onOpenFocalPoint: PropTypes.func.isRequired,
-    onSubmit: PropTypes.func.isRequired,
-    history: PropTypes.object.isRequired,
-  };
-
-  state = {
-    hovered: false,
-    focused: false,
-    dirtyDescription: null,
-  };
-
-  handleKeyDown = (e) => {
-    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      this.handleSubmit();
-    }
-  }
-
-  handleSubmit = () => {
-    this.handleInputBlur();
-    this.props.onSubmit(this.props.history);
-  }
-
-  handleUndoClick = e => {
-    e.stopPropagation();
-    this.props.onUndo(this.props.media.get('id'));
-  }
-
-  handleFocalPointClick = e => {
-    e.stopPropagation();
-    this.props.onOpenFocalPoint(this.props.media.get('id'));
-  }
-
-  handleInputChange = e => {
-    this.setState({ dirtyDescription: e.target.value });
-  }
-
-  handleMouseEnter = () => {
-    this.setState({ hovered: true });
-  }
-
-  handleMouseLeave = () => {
-    this.setState({ hovered: false });
-  }
-
-  handleInputFocus = () => {
-    this.setState({ focused: true });
-  }
-
-  handleClick = () => {
-    this.setState({ focused: true });
-  }
-
-  handleInputBlur = () => {
-    const { dirtyDescription } = this.state;
-
-    this.setState({ focused: false, dirtyDescription: null });
-
-    if (dirtyDescription !== null) {
-      this.props.onDescriptionChange(this.props.media.get('id'), dirtyDescription);
-    }
-  }
-
-  handleOpenModal = () => {
-    this.props.onOpenModal(this.props.media);
-  }
-
-  render() {
-    const { intl, media, descriptionLimit } = this.props;
-    const active          = this.state.hovered || this.state.focused;
-    const description     = this.state.dirtyDescription || (this.state.dirtyDescription !== '' && media.get('description')) || '';
-    const focusX = media.getIn(['meta', 'focus', 'x']);
-    const focusY = media.getIn(['meta', 'focus', 'y']);
-    const x = ((focusX /  2) + .5) * 100;
-    const y = ((focusY / -2) + .5) * 100;
-    const mediaType = media.get('type');
-    const uploadIcon = mediaType === 'unknown' && (
-      <Icon
-        className='h-16 w-16 mx-auto my-12 text-gray-800 dark:text-gray-200'
-        src={MIMETYPE_ICONS[media.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
-      />
-    );
-
-    return (
-      <div className='compose-form__upload' tabIndex='0' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} onClick={this.handleClick} role='button'>
-        <Blurhash hash={media.get('blurhash')} className='media-gallery__preview' />
-        <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
-          {({ scale }) => (
-            <div
-              className={classNames('compose-form__upload-thumbnail',  `${mediaType}`)}
-              style={{
-                transform: `scale(${scale})`,
-                backgroundImage: mediaType === 'image' ? `url(${media.get('preview_url')})` : null,
-                backgroundPosition: `${x}% ${y}%` }}
-            >
-              <div className={classNames('compose-form__upload__actions', { active })}>
-                <IconButton
-                  onClick={this.handleUndoClick}
-                  src={require('@tabler/icons/icons/x.svg')}
-                  text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
-                />
-
-                {/* Only display the "Preview" button for a valid attachment with a URL */}
-                {(mediaType !== 'unknown' && Boolean(media.get('url'))) && (
-                  <IconButton
-                    onClick={this.handleOpenModal}
-                    src={require('@tabler/icons/icons/zoom-in.svg')}
-                    text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
-                  />
-                )}
-              </div>
-
-              <div className={classNames('compose-form__upload-description', { active })}>
-                <label>
-                  <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
-
-                  <textarea
-                    placeholder={intl.formatMessage(messages.description)}
-                    value={description}
-                    maxLength={descriptionLimit}
-                    onFocus={this.handleInputFocus}
-                    onChange={this.handleInputChange}
-                    onBlur={this.handleInputBlur}
-                    onKeyDown={this.handleKeyDown}
-                  />
-                </label>
-              </div>
-
-              <div className='compose-form__upload-preview'>
-                {mediaType === 'video' && (
-                  <video autoPlay playsInline muted loop>
-                    <source src={media.get('preview_url')} />
-                  </video>
-                )}
-                {uploadIcon}
-              </div>
-            </div>
-          )}
-        </Motion>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
new file mode 100644
index 000000000..b60079dca
--- /dev/null
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -0,0 +1,205 @@
+import classNames from 'classnames';
+import React, { useState } from 'react';
+import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
+import { spring } from 'react-motion';
+import { useHistory } from 'react-router-dom';
+
+import Blurhash from 'soapbox/components/blurhash';
+import Icon from 'soapbox/components/icon';
+import IconButton from 'soapbox/components/icon_button';
+
+import Motion from '../../ui/util/optional_motion';
+
+import type { Map as ImmutableMap } from 'immutable';
+
+const bookIcon = require('@tabler/icons/icons/book.svg');
+const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
+const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
+const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
+const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
+const defaultIcon = require('@tabler/icons/icons/paperclip.svg');
+const presentationIcon = require('@tabler/icons/icons/presentation.svg');
+
+export const MIMETYPE_ICONS: Record<string, string> = {
+  'application/x-freearc': fileZipIcon,
+  'application/x-bzip': fileZipIcon,
+  'application/x-bzip2': fileZipIcon,
+  'application/gzip': fileZipIcon,
+  'application/vnd.rar': fileZipIcon,
+  'application/x-tar': fileZipIcon,
+  'application/zip': fileZipIcon,
+  'application/x-7z-compressed': fileZipIcon,
+  'application/x-csh': fileCodeIcon,
+  'application/html': fileCodeIcon,
+  'text/javascript': fileCodeIcon,
+  'application/json': fileCodeIcon,
+  'application/ld+json': fileCodeIcon,
+  'application/x-httpd-php': fileCodeIcon,
+  'application/x-sh': fileCodeIcon,
+  'application/xhtml+xml': fileCodeIcon,
+  'application/xml': fileCodeIcon,
+  'application/epub+zip': bookIcon,
+  'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
+  'application/vnd.ms-excel': fileAnalyticsIcon,
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
+  'application/pdf': fileTextIcon,
+  'application/vnd.oasis.opendocument.presentation': presentationIcon,
+  'application/vnd.ms-powerpoint': presentationIcon,
+  'application/vnd.openxmlformats-officedocument.presentationml.presentation': presentationIcon,
+  'text/plain': fileTextIcon,
+  'application/rtf': fileTextIcon,
+  'application/msword': fileTextIcon,
+  'application/x-abiword': fileTextIcon,
+  'application/vnd.openxmlformats-officedocument.wordprocessingml.document': fileTextIcon,
+  'application/vnd.oasis.opendocument.text': fileTextIcon,
+};
+
+const messages = defineMessages({
+  description: { id: 'upload_form.description', defaultMessage: 'Describe for the visually impaired' },
+  delete: { id: 'upload_form.undo', defaultMessage: 'Delete' },
+});
+
+interface IUpload {
+  media: ImmutableMap<string, any>,
+  descriptionLimit: number,
+  onUndo: (attachmentId: string) => void,
+  onDescriptionChange: (attachmentId: string, description: string) => void,
+  onOpenFocalPoint: (attachmentId: string) => void,
+  onOpenModal: (attachments: ImmutableMap<string, any>) => void,
+  onSubmit: (history: ReturnType<typeof useHistory>) => void,
+}
+
+const Upload: React.FC<IUpload> = (props) => {
+  const intl = useIntl();
+  const history = useHistory();
+
+  const [hovered, setHovered] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [dirtyDescription, setDirtyDescription] = useState<string | null>(null);
+
+  const handleKeyDown: React.KeyboardEventHandler = (e) => {
+    if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
+      handleSubmit();
+    }
+  };
+
+  const handleSubmit = () => {
+    handleInputBlur();
+    props.onSubmit(history);
+  };
+
+  const handleUndoClick: React.MouseEventHandler = e => {
+    e.stopPropagation();
+    props.onUndo(props.media.get('id'));
+  };
+
+  const handleInputChange: React.ChangeEventHandler<HTMLTextAreaElement> = e => {
+    setDirtyDescription(e.target.value);
+  };
+
+  const handleMouseEnter = () => {
+    setHovered(true);
+  };
+
+  const handleMouseLeave = () => {
+    setHovered(false);
+  };
+
+  const handleInputFocus = () => {
+    setFocused(true);
+  };
+
+  const handleClick = () => {
+    setFocused(true);
+  };
+
+  const handleInputBlur = () => {
+    setFocused(false);
+    setDirtyDescription(null);
+
+    if (dirtyDescription !== null) {
+      props.onDescriptionChange(props.media.get('id'), dirtyDescription);
+    }
+  };
+
+  const handleOpenModal = () => {
+    props.onOpenModal(props.media);
+  };
+
+  const active = hovered || focused;
+  const description = dirtyDescription || (dirtyDescription !== '' && props.media.get('description')) || '';
+  const focusX = props.media.getIn(['meta', 'focus', 'x']) as number | undefined;
+  const focusY = props.media.getIn(['meta', 'focus', 'y']) as number | undefined;
+  const x = focusX ? ((focusX /  2) + .5) * 100 : 0;
+  const y = focusY ? ((focusY / -2) + .5) * 100 : 0;
+  const mediaType = props.media.get('type');
+  const mimeType = props.media.getIn(['pleroma', 'mime_type']) as string | undefined;
+
+  const uploadIcon = mediaType === 'unknown' && (
+    <Icon
+      className='h-16 w-16 mx-auto my-12 text-gray-800 dark:text-gray-200'
+      src={MIMETYPE_ICONS[mimeType || ''] || defaultIcon}
+    />
+  );
+
+  return (
+    <div className='compose-form__upload' tabIndex={0} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleClick} role='button'>
+      <Blurhash hash={props.media.get('blurhash')} className='media-gallery__preview' />
+      <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
+        {({ scale }) => (
+          <div
+            className={classNames('compose-form__upload-thumbnail',  `${mediaType}`)}
+            style={{
+              transform: `scale(${scale})`,
+              backgroundImage: mediaType === 'image' ? `url(${props.media.get('preview_url')})` : undefined,
+              backgroundPosition: `${x}% ${y}%` }}
+          >
+            <div className={classNames('compose-form__upload__actions', { active })}>
+              <IconButton
+                onClick={handleUndoClick}
+                src={require('@tabler/icons/icons/x.svg')}
+                text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
+              />
+
+              {/* Only display the "Preview" button for a valid attachment with a URL */}
+              {(mediaType !== 'unknown' && Boolean(props.media.get('url'))) && (
+                <IconButton
+                  onClick={handleOpenModal}
+                  src={require('@tabler/icons/icons/zoom-in.svg')}
+                  text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
+                />
+              )}
+            </div>
+
+            <div className={classNames('compose-form__upload-description', { active })}>
+              <label>
+                <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
+
+                <textarea
+                  placeholder={intl.formatMessage(messages.description)}
+                  value={description}
+                  maxLength={props.descriptionLimit}
+                  onFocus={handleInputFocus}
+                  onChange={handleInputChange}
+                  onBlur={handleInputBlur}
+                  onKeyDown={handleKeyDown}
+                />
+              </label>
+            </div>
+
+            <div className='compose-form__upload-preview'>
+              {mediaType === 'video' && (
+                <video autoPlay playsInline muted loop>
+                  <source src={props.media.get('preview_url')} />
+                </video>
+              )}
+              {uploadIcon}
+            </div>
+          </div>
+        )}
+      </Motion>
+    </div>
+  );
+};
+
+export default Upload;

From 6e2cc63b7d1c615715b2aa73a5732ccb1f379e22 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 13:55:46 -0500
Subject: [PATCH 079/102] ScheduleButton: convert to TSX

---
 .../compose/components/schedule_button.js     | 46 -------------------
 .../compose/components/schedule_button.tsx    | 40 ++++++++++++++++
 2 files changed, 40 insertions(+), 46 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/schedule_button.js
 create mode 100644 app/soapbox/features/compose/components/schedule_button.tsx

diff --git a/app/soapbox/features/compose/components/schedule_button.js b/app/soapbox/features/compose/components/schedule_button.js
deleted file mode 100644
index 484174355..000000000
--- a/app/soapbox/features/compose/components/schedule_button.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl } from 'react-intl';
-
-import ComposeFormButton from './compose_form_button';
-
-const messages = defineMessages({
-  add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
-  remove_schedule: { id: 'schedule_button.remove_schedule', defaultMessage: 'Post immediately' },
-});
-
-export default
-@injectIntl
-class ScheduleButton extends React.PureComponent {
-
-  static propTypes = {
-    disabled: PropTypes.bool,
-    active: PropTypes.bool,
-    unavailable: PropTypes.bool,
-    onClick: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  handleClick = () => {
-    this.props.onClick();
-  }
-
-  render() {
-    const { intl, active, unavailable, disabled } = this.props;
-
-    if (unavailable) {
-      return null;
-    }
-
-    return (
-      <ComposeFormButton
-        icon={require('@tabler/icons/icons/calendar-stats.svg')}
-        title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
-        active={active}
-        disabled={disabled}
-        onClick={this.handleClick}
-      />
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/schedule_button.tsx b/app/soapbox/features/compose/components/schedule_button.tsx
new file mode 100644
index 000000000..8d1509884
--- /dev/null
+++ b/app/soapbox/features/compose/components/schedule_button.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import ComposeFormButton from './compose_form_button';
+
+const messages = defineMessages({
+  add_schedule: { id: 'schedule_button.add_schedule', defaultMessage: 'Schedule post for later' },
+  remove_schedule: { id: 'schedule_button.remove_schedule', defaultMessage: 'Post immediately' },
+});
+
+interface IScheduleButton {
+  disabled: boolean,
+  active: boolean,
+  unavailable: boolean,
+  onClick: () => void,
+}
+
+const ScheduleButton: React.FC<IScheduleButton> = ({ active, unavailable, disabled, onClick }) => {
+  const intl = useIntl();
+
+  const handleClick = () => {
+    onClick();
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  return (
+    <ComposeFormButton
+      icon={require('@tabler/icons/icons/calendar-stats.svg')}
+      title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
+      active={active}
+      disabled={disabled}
+      onClick={handleClick}
+    />
+  );
+};
+
+export default ScheduleButton;

From de2422a97e55c922fabcddf39c42d01ff17c789d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 May 2022 21:03:52 +0200
Subject: [PATCH 080/102] TypeScript, FC
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/actions/aliases.js                |  12 +-
 app/soapbox/features/admin/moderation_log.js  |  95 ---------------
 app/soapbox/features/admin/moderation_log.tsx |  80 ++++++++++++
 .../features/aliases/components/account.js    |  92 --------------
 .../features/aliases/components/account.tsx   |  70 +++++++++++
 app/soapbox/features/aliases/index.js         | 115 ------------------
 app/soapbox/features/aliases/index.tsx        |  98 +++++++++++++++
 7 files changed, 254 insertions(+), 308 deletions(-)
 delete mode 100644 app/soapbox/features/admin/moderation_log.js
 create mode 100644 app/soapbox/features/admin/moderation_log.tsx
 delete mode 100644 app/soapbox/features/aliases/components/account.js
 create mode 100644 app/soapbox/features/aliases/components/account.tsx
 delete mode 100644 app/soapbox/features/aliases/index.js
 create mode 100644 app/soapbox/features/aliases/index.tsx

diff --git a/app/soapbox/actions/aliases.js b/app/soapbox/actions/aliases.js
index e28817681..3b898ae10 100644
--- a/app/soapbox/actions/aliases.js
+++ b/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);
     })
diff --git a/app/soapbox/features/admin/moderation_log.js b/app/soapbox/features/admin/moderation_log.js
deleted file mode 100644
index a4f50ddbb..000000000
--- a/app/soapbox/features/admin/moderation_log.js
+++ /dev/null
@@ -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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/admin/moderation_log.tsx b/app/soapbox/features/admin/moderation_log.tsx
new file mode 100644
index 000000000..83163a382
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/aliases/components/account.js b/app/soapbox/features/aliases/components/account.js
deleted file mode 100644
index 8d0ccfbe3..000000000
--- a/app/soapbox/features/aliases/components/account.js
+++ /dev/null
@@ -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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/aliases/components/account.tsx b/app/soapbox/features/aliases/components/account.tsx
new file mode 100644
index 000000000..8fe0a64a7
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/features/aliases/index.js b/app/soapbox/features/aliases/index.js
deleted file mode 100644
index f2bd512bc..000000000
--- a/app/soapbox/features/aliases/index.js
+++ /dev/null
@@ -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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/aliases/index.tsx b/app/soapbox/features/aliases/index.tsx
new file mode 100644
index 000000000..1e1484c83
--- /dev/null
+++ b/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;

From b02c80341b106a00f89a673d7d2d13dd8204dd64 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:05:15 -0500
Subject: [PATCH 081/102] ReplyIndicator: convert to TSX

---
 app/soapbox/components/ui/text/text.tsx       |  9 ++-
 .../compose/components/reply_indicator.js     | 70 -------------------
 .../compose/components/reply_indicator.tsx    | 62 ++++++++++++++++
 3 files changed, 70 insertions(+), 71 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/reply_indicator.js
 create mode 100644 app/soapbox/features/compose/components/reply_indicator.tsx

diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 072491109..f7513595f 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -9,6 +9,7 @@ type TrackingSizes = 'normal' | 'wide'
 type TransformProperties = 'uppercase' | 'normal'
 type Families = 'sans' | 'mono'
 type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label'
+type Directions = 'ltr' | 'rtl'
 
 const themes = {
   default: 'text-gray-900 dark:text-gray-100',
@@ -64,6 +65,8 @@ interface IText extends Pick<React.HTMLAttributes<HTMLParagraphElement>, 'danger
   align?: Alignments,
   /** Extra class names for the outer element. */
   className?: string,
+  /** Text direction. */
+  direction?: Directions,
   /** Typeface of the text. */
   family?: Families,
   /** The "for" attribute specifies which form element a label is bound to. */
@@ -90,6 +93,7 @@ const Text: React.FC<IText> = React.forwardRef(
     const {
       align,
       className,
+      direction,
       family = 'sans',
       size = 'md',
       tag = 'p',
@@ -109,7 +113,10 @@ const Text: React.FC<IText> = React.forwardRef(
       <Comp
         {...filteredProps}
         ref={ref}
-        style={tag === 'abbr' ? { textDecoration: 'underline dotted' } : undefined}
+        style={{
+          textDecoration: tag === 'abbr' ? 'underline dotted' : undefined,
+          direction,
+        }}
         className={classNames({
           'cursor-default': tag === 'abbr',
           truncate: truncate,
diff --git a/app/soapbox/features/compose/components/reply_indicator.js b/app/soapbox/features/compose/components/reply_indicator.js
deleted file mode 100644
index faa86ea9a..000000000
--- a/app/soapbox/features/compose/components/reply_indicator.js
+++ /dev/null
@@ -1,70 +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 AttachmentThumbs from 'soapbox/components/attachment-thumbs';
-import { Stack, Text } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account_container';
-
-import { isRtl } from '../../../rtl';
-
-export default class ReplyIndicator extends ImmutablePureComponent {
-
-  static propTypes = {
-    status: ImmutablePropTypes.record,
-    onCancel: PropTypes.func.isRequired,
-    hideActions: PropTypes.bool,
-  };
-
-  handleClick = () => {
-    this.props.onCancel();
-  }
-
-  render() {
-    const { status, hideActions } = this.props;
-
-    if (!status) {
-      return null;
-    }
-
-    const style = {
-      direction: isRtl(status.get('search_index')) ? 'rtl' : 'ltr',
-    };
-
-    let actions = {};
-    if (!hideActions) {
-      actions = {
-        onActionClick: this.handleClick,
-        actionIcon: require('@tabler/icons/icons/x.svg'),
-        actionAlignment: 'top',
-        actionTitle: 'Dismiss',
-      };
-    }
-
-    return (
-      <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
-        <AccountContainer
-          {...actions}
-          id={status.getIn(['account', 'id'])}
-          timestamp={status.get('created_at')}
-          showProfileHoverCard={false}
-        />
-
-        <Text
-          size='sm'
-          dangerouslySetInnerHTML={{ __html: status.get('contentHtml') }}
-          style={style}
-        />
-
-        {status.get('media_attachments').size > 0 && (
-          <AttachmentThumbs
-            media={status.get('media_attachments')}
-            sensitive={status.get('sensitive')}
-          />
-        )}
-      </Stack>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/reply_indicator.tsx b/app/soapbox/features/compose/components/reply_indicator.tsx
new file mode 100644
index 000000000..ebe7c8637
--- /dev/null
+++ b/app/soapbox/features/compose/components/reply_indicator.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import { Stack, Text } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+
+import { isRtl } from '../../../rtl';
+
+import type { Status } from 'soapbox/types/entities';
+
+interface IReplyIndicator {
+  status?: Status,
+  onCancel: () => void,
+  hideActions: boolean,
+}
+
+const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCancel }) => {
+  const handleClick = () => {
+    onCancel();
+  };
+
+
+  if (!status) {
+    return null;
+  }
+
+  let actions = {};
+  if (!hideActions) {
+    actions = {
+      onActionClick: handleClick,
+      actionIcon: require('@tabler/icons/icons/x.svg'),
+      actionAlignment: 'top',
+      actionTitle: 'Dismiss',
+    };
+  }
+
+  return (
+    <Stack space={2} className='p-4 rounded-lg bg-gray-100 dark:bg-slate-700'>
+      <AccountContainer
+        {...actions}
+        id={status.getIn(['account', 'id']) as string}
+        timestamp={status.created_at}
+        showProfileHoverCard={false}
+      />
+
+      <Text
+        size='sm'
+        dangerouslySetInnerHTML={{ __html: status.contentHtml }}
+        direction={isRtl(status.search_index) ? 'rtl' : 'ltr'}
+      />
+
+      {status.media_attachments.size > 0 && (
+        <AttachmentThumbs
+          media={status.media_attachments}
+          sensitive={status.sensitive}
+        />
+      )}
+    </Stack>
+  );
+};
+
+export default ReplyIndicator;

From faf48d17b95be3d40904f4ea85533720b7feff48 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:43:35 -0500
Subject: [PATCH 082/102] PrivacyDropdown: convert to TSX

---
 .../compose/components/privacy_dropdown.js    | 284 ------------------
 .../compose/components/privacy_dropdown.tsx   | 263 ++++++++++++++++
 2 files changed, 263 insertions(+), 284 deletions(-)
 delete mode 100644 app/soapbox/features/compose/components/privacy_dropdown.js
 create mode 100644 app/soapbox/features/compose/components/privacy_dropdown.tsx

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.js b/app/soapbox/features/compose/components/privacy_dropdown.js
deleted file mode 100644
index d6ddf771c..000000000
--- a/app/soapbox/features/compose/components/privacy_dropdown.js
+++ /dev/null
@@ -1,284 +0,0 @@
-import classNames from 'classnames';
-import { supportsPassiveEvents } from 'detect-passive-events';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { injectIntl, defineMessages } from 'react-intl';
-import spring from 'react-motion/lib/spring';
-import Overlay from 'react-overlays/lib/Overlay';
-
-import Icon from 'soapbox/components/icon';
-
-import { IconButton } from '../../../components/ui';
-import Motion from '../../ui/util/optional_motion';
-
-const messages = defineMessages({
-  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
-  public_long: { id: 'privacy.public.long', defaultMessage: 'Post to public timelines' },
-  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
-  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not post to public timelines' },
-  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
-  private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only' },
-  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
-  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' },
-  change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust post privacy' },
-});
-
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-
-class PrivacyDropdownMenu extends React.PureComponent {
-
-  static propTypes = {
-    style: PropTypes.object,
-    items: PropTypes.array.isRequired,
-    value: PropTypes.string.isRequired,
-    placement: PropTypes.string.isRequired,
-    onClose: PropTypes.func.isRequired,
-    onChange: PropTypes.func.isRequired,
-    unavailable: PropTypes.bool,
-  };
-
-  state = {
-    mounted: false,
-  };
-
-  handleDocumentClick = e => {
-    if (this.node && !this.node.contains(e.target)) {
-      this.props.onClose();
-    }
-  }
-
-  handleKeyDown = e => {
-    const { items } = this.props;
-    const value = e.currentTarget.getAttribute('data-index');
-    const index = items.findIndex(item => {
-      return (item.value === value);
-    });
-    let element = null;
-
-    switch (e.key) {
-      case 'Escape':
-        this.props.onClose();
-        break;
-      case 'Enter':
-        this.handleClick(e);
-        break;
-      case 'ArrowDown':
-        element = this.node.childNodes[index + 1] || this.node.firstChild;
-        break;
-      case 'ArrowUp':
-        element = this.node.childNodes[index - 1] || this.node.lastChild;
-        break;
-      case 'Tab':
-        if (e.shiftKey) {
-          element = this.node.childNodes[index - 1] || this.node.lastChild;
-        } else {
-          element = this.node.childNodes[index + 1] || this.node.firstChild;
-        }
-        break;
-      case 'Home':
-        element = this.node.firstChild;
-        break;
-      case 'End':
-        element = this.node.lastChild;
-        break;
-    }
-
-    if (element) {
-      element.focus();
-      this.props.onChange(element.getAttribute('data-index'));
-      e.preventDefault();
-      e.stopPropagation();
-    }
-  }
-
-  handleClick = e => {
-    const value = e.currentTarget.getAttribute('data-index');
-
-    e.preventDefault();
-
-    this.props.onClose();
-    this.props.onChange(value);
-  }
-
-  componentDidMount() {
-    document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
-    if (this.focusedItem) this.focusedItem.focus({ preventScroll: true });
-    this.setState({ mounted: true });
-  }
-
-  componentWillUnmount() {
-    document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
-  }
-
-  setRef = c => {
-    this.node = c;
-  }
-
-  setFocusRef = c => {
-    this.focusedItem = c;
-  }
-
-  render() {
-    const { mounted } = this.state;
-    const { style, items, placement, value } = this.props;
-
-    return (
-      <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
-        {({ opacity, scaleX, scaleY }) => (
-          // It should not be transformed when mounting because the resulting
-          // size will be used to determine the coordinate of the menu by
-          // react-overlays
-          <div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : null }} role='listbox' ref={this.setRef}>
-            {items.map(item => (
-              <div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
-                <div className='privacy-dropdown__option__icon'>
-                  <Icon src={item.icon} />
-                </div>
-
-                <div className='privacy-dropdown__option__content'>
-                  <strong>{item.text}</strong>
-                  {item.meta}
-                </div>
-              </div>
-            ))}
-          </div>
-        )}
-      </Motion>
-    );
-  }
-
-}
-
-export default @injectIntl
-class PrivacyDropdown extends React.PureComponent {
-
-  static propTypes = {
-    isUserTouching: PropTypes.func,
-    isModalOpen: PropTypes.bool.isRequired,
-    onModalOpen: PropTypes.func,
-    onModalClose: PropTypes.func,
-    value: PropTypes.string.isRequired,
-    onChange: PropTypes.func.isRequired,
-    intl: PropTypes.object.isRequired,
-  };
-
-  state = {
-    open: false,
-    placement: 'bottom',
-  };
-
-  constructor(props) {
-    super(props);
-    const { intl: { formatMessage } } = props;
-
-    this.options = [
-      { icon: require('@tabler/icons/icons/world.svg'), value: 'public', text: formatMessage(messages.public_short), meta: formatMessage(messages.public_long) },
-      { icon: require('@tabler/icons/icons/lock-open.svg'), value: 'unlisted', text: formatMessage(messages.unlisted_short), meta: formatMessage(messages.unlisted_long) },
-      { icon: require('@tabler/icons/icons/lock.svg'), value: 'private', text: formatMessage(messages.private_short), meta: formatMessage(messages.private_long) },
-      { icon: require('@tabler/icons/icons/mail.svg'), value: 'direct', text: formatMessage(messages.direct_short), meta: formatMessage(messages.direct_long) },
-    ];
-  }
-
-  handleToggle = (e) => {
-    if (this.props.isUserTouching()) {
-      if (this.state.open) {
-        this.props.onModalClose();
-      } else {
-        this.props.onModalOpen({
-          actions: this.options.map(option => ({ ...option, active: option.value === this.props.value })),
-          onClick: this.handleModalActionClick,
-        });
-      }
-    } else {
-      const { top } = e.target.getBoundingClientRect();
-      if (this.state.open && this.activeElement) {
-        this.activeElement.focus();
-      }
-      this.setState({ placement: top * 2 < innerHeight ? 'bottom' : 'top' });
-      this.setState({ open: !this.state.open });
-    }
-    e.stopPropagation();
-  }
-
-  handleModalActionClick = (e) => {
-    e.preventDefault();
-
-    const { value } = this.options[e.currentTarget.getAttribute('data-index')];
-
-    this.props.onModalClose();
-    this.props.onChange(value);
-  }
-
-  handleKeyDown = e => {
-    switch (e.key) {
-      case 'Escape':
-        this.handleClose();
-        break;
-    }
-  }
-
-  handleMouseDown = () => {
-    if (!this.state.open) {
-      this.activeElement = document.activeElement;
-    }
-  }
-
-  handleButtonKeyDown = (e) => {
-    switch (e.key) {
-      case ' ':
-      case 'Enter':
-        this.handleMouseDown();
-        break;
-    }
-  }
-
-  handleClose = () => {
-    if (this.state.open && this.activeElement) {
-      this.activeElement.focus();
-    }
-    this.setState({ open: false });
-  }
-
-  handleChange = value => {
-    this.props.onChange(value);
-  }
-
-  render() {
-    const { value, intl, unavailable } = this.props;
-    const { open, placement } = this.state;
-
-    if (unavailable) {
-      return null;
-    }
-
-    const valueOption = this.options.find(item => item.value === value);
-
-    return (
-      <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={this.handleKeyDown}>
-        <div className={classNames('privacy-dropdown__value', { active: this.options.indexOf(valueOption) === 0 })}>
-          <IconButton
-            className='text-gray-400 hover:text-gray-600'
-            src={valueOption.icon}
-            title={intl.formatMessage(messages.change_privacy)}
-            onClick={this.handleToggle}
-            onMouseDown={this.handleMouseDown}
-            onKeyDown={this.handleButtonKeyDown}
-          />
-        </div>
-
-        <Overlay show={open} placement={placement} target={this}>
-          <PrivacyDropdownMenu
-            items={this.options}
-            value={value}
-            onClose={this.handleClose}
-            onChange={this.handleChange}
-            placement={placement}
-          />
-        </Overlay>
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
new file mode 100644
index 000000000..3e3440ae4
--- /dev/null
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -0,0 +1,263 @@
+import classNames from 'classnames';
+import { supportsPassiveEvents } from 'detect-passive-events';
+import React, { useState, useRef, useEffect } from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import { spring } from 'react-motion';
+// @ts-ignore
+import Overlay from 'react-overlays/lib/Overlay';
+
+import Icon from 'soapbox/components/icon';
+
+import { IconButton } from '../../../components/ui';
+import Motion from '../../ui/util/optional_motion';
+
+const messages = defineMessages({
+  public_short: { id: 'privacy.public.short', defaultMessage: 'Public' },
+  public_long: { id: 'privacy.public.long', defaultMessage: 'Post to public timelines' },
+  unlisted_short: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
+  unlisted_long: { id: 'privacy.unlisted.long', defaultMessage: 'Do not post to public timelines' },
+  private_short: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
+  private_long: { id: 'privacy.private.long', defaultMessage: 'Post to followers only' },
+  direct_short: { id: 'privacy.direct.short', defaultMessage: 'Direct' },
+  direct_long: { id: 'privacy.direct.long', defaultMessage: 'Post to mentioned users only' },
+  change_privacy: { id: 'privacy.change', defaultMessage: 'Adjust post privacy' },
+});
+
+const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
+
+interface IPrivacyDropdownMenu {
+  style?: React.CSSProperties,
+  items: any[],
+  value: string,
+  placement: string,
+  onClose: () => void,
+  onChange: (value: string | null) => void,
+  unavailable?: boolean,
+}
+
+const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, placement, value, onClose, onChange }) => {
+  const node = useRef<HTMLDivElement>(null);
+  const focusedItem = useRef<HTMLDivElement>(null);
+
+  const [mounted, setMounted] = useState(false);
+
+  const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
+    if (node.current && !node.current.contains(e.target as HTMLElement)) {
+      onClose();
+    }
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = e => {
+    const value = e.currentTarget.getAttribute('data-index');
+    const index = items.findIndex(item => {
+      return (item.value === value);
+    });
+    let element = null;
+
+    switch (e.key) {
+      case 'Escape':
+        onClose();
+        break;
+      case 'Enter':
+        handleClick(e);
+        break;
+      case 'ArrowDown':
+        element = node.current?.childNodes[index + 1] || node.current?.firstChild;
+        break;
+      case 'ArrowUp':
+        element = node.current?.childNodes[index - 1] || node.current?.lastChild;
+        break;
+      case 'Tab':
+        if (e.shiftKey) {
+          element = node.current?.childNodes[index - 1] || node.current?.lastChild;
+        } else {
+          element = node.current?.childNodes[index + 1] || node.current?.firstChild;
+        }
+        break;
+      case 'Home':
+        element = node.current?.firstChild;
+        break;
+      case 'End':
+        element = node.current?.lastChild;
+        break;
+    }
+
+    if (element) {
+      (element as HTMLElement).focus();
+      onChange((element as HTMLElement).getAttribute('data-index'));
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  };
+
+  const handleClick: React.EventHandler<any> = (e: MouseEvent | KeyboardEvent) => {
+    const value = (e.currentTarget as HTMLElement)?.getAttribute('data-index');
+
+    e.preventDefault();
+
+    onClose();
+    onChange(value);
+  };
+
+  useEffect(() => {
+    document.addEventListener('click', handleDocumentClick, false);
+    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
+
+    focusedItem.current?.focus({ preventScroll: true });
+    setMounted(true);
+
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, false);
+      document.removeEventListener('touchend', handleDocumentClick);
+    };
+  });
+
+  return (
+    <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
+      {({ opacity, scaleX, scaleY }) => (
+        // It should not be transformed when mounting because the resulting
+        // size will be used to determine the coordinate of the menu by
+        // react-overlays
+        <div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
+          {items.map(item => (
+            <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
+              <div className='privacy-dropdown__option__icon'>
+                <Icon src={item.icon} />
+              </div>
+
+              <div className='privacy-dropdown__option__content'>
+                <strong>{item.text}</strong>
+                {item.meta}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </Motion>
+  );
+};
+
+interface IPrivacyDropdown {
+  isUserTouching: () => boolean,
+  isModalOpen: boolean,
+  onModalOpen: (opts: any) => void,
+  onModalClose: () => void,
+  value: string,
+  onChange: (value: string | null) => void,
+  unavailable: boolean,
+}
+
+const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
+  isUserTouching,
+  onChange,
+  onModalClose,
+  onModalOpen,
+  value,
+  unavailable,
+}) => {
+  const intl = useIntl();
+  const activeElement = useRef<HTMLElement | null>(null);
+
+  const [open, setOpen] = useState(false);
+  const [placement, setPlacement] = useState('bottom');
+
+  const options = [
+    { icon: require('@tabler/icons/icons/world.svg'), value: 'public', text: intl.formatMessage(messages.public_short), meta: intl.formatMessage(messages.public_long) },
+    { icon: require('@tabler/icons/icons/lock-open.svg'), value: 'unlisted', text: intl.formatMessage(messages.unlisted_short), meta: intl.formatMessage(messages.unlisted_long) },
+    { icon: require('@tabler/icons/icons/lock.svg'), value: 'private', text: intl.formatMessage(messages.private_short), meta: intl.formatMessage(messages.private_long) },
+    { icon: require('@tabler/icons/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
+  ];
+
+  const handleToggle: React.MouseEventHandler<HTMLButtonElement> = (e) => {
+    if (isUserTouching()) {
+      if (open) {
+        onModalClose();
+      } else {
+        onModalOpen({
+          actions: options.map(option => ({ ...option, active: option.value === value })),
+          onClick: handleModalActionClick,
+        });
+      }
+    } else {
+      const { top } = e.currentTarget.getBoundingClientRect();
+      if (open) {
+        activeElement.current?.focus();
+      }
+      setPlacement(top * 2 < innerHeight ? 'bottom' : 'top');
+      setOpen(!open);
+    }
+    e.stopPropagation();
+  };
+
+  const handleModalActionClick: React.MouseEventHandler = (e) => {
+    e.preventDefault();
+
+    const { value } = options[e.currentTarget.getAttribute('data-index') as any];
+
+    onModalClose();
+    onChange(value);
+  };
+
+  const handleKeyDown: React.KeyboardEventHandler = e => {
+    switch (e.key) {
+      case 'Escape':
+        handleClose();
+        break;
+    }
+  };
+
+  const handleMouseDown = () => {
+    if (!open) {
+      activeElement.current = document.activeElement as HTMLElement | null;
+    }
+  };
+
+  const handleButtonKeyDown: React.KeyboardEventHandler = (e) => {
+    switch (e.key) {
+      case ' ':
+      case 'Enter':
+        handleMouseDown();
+        break;
+    }
+  };
+
+  const handleClose = () => {
+    if (open) {
+      activeElement.current?.focus();
+    }
+    setOpen(false);
+  };
+
+  if (unavailable) {
+    return null;
+  }
+
+  const valueOption = options.find(item => item.value === value);
+
+  return (
+    <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown}>
+      <div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
+        <IconButton
+          className='text-gray-400 hover:text-gray-600'
+          src={valueOption?.icon}
+          title={intl.formatMessage(messages.change_privacy)}
+          onClick={handleToggle}
+          onMouseDown={handleMouseDown}
+          onKeyDown={handleButtonKeyDown}
+        />
+      </div>
+
+      <Overlay show={open} placement={placement} target={this}>
+        <PrivacyDropdownMenu
+          items={options}
+          value={value}
+          onClose={handleClose}
+          onChange={onChange}
+          placement={placement}
+        />
+      </Overlay>
+    </div>
+  );
+};
+
+export default PrivacyDropdown;

From 0051fd8eec7bb3b620b02e7a09f62626dcb4b5d7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:50:10 -0500
Subject: [PATCH 083/102] PrivacyDropdown: fix Overlay target

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

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 3e3440ae4..a155484b4 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -156,6 +156,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   unavailable,
 }) => {
   const intl = useIntl();
+  const node = useRef<HTMLDivElement>(null);
   const activeElement = useRef<HTMLElement | null>(null);
 
   const [open, setOpen] = useState(false);
@@ -235,7 +236,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const valueOption = options.find(item => item.value === value);
 
   return (
-    <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown}>
+    <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
       <div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
         <IconButton
           className='text-gray-400 hover:text-gray-600'
@@ -247,7 +248,7 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
         />
       </div>
 
-      <Overlay show={open} placement={placement} target={this}>
+      <Overlay show={open} placement={placement} target={node.current}>
         <PrivacyDropdownMenu
           items={options}
           value={value}

From 887302d642bb62ae3800f16fdaba9c11e928ce2f Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 30 May 2022 14:53:50 -0500
Subject: [PATCH 084/102] Upload: fix backgroundPosition

---
 app/soapbox/features/compose/components/upload.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
index b60079dca..b637e262f 100644
--- a/app/soapbox/features/compose/components/upload.tsx
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -130,8 +130,8 @@ const Upload: React.FC<IUpload> = (props) => {
   const description = dirtyDescription || (dirtyDescription !== '' && props.media.get('description')) || '';
   const focusX = props.media.getIn(['meta', 'focus', 'x']) as number | undefined;
   const focusY = props.media.getIn(['meta', 'focus', 'y']) as number | undefined;
-  const x = focusX ? ((focusX /  2) + .5) * 100 : 0;
-  const y = focusY ? ((focusY / -2) + .5) * 100 : 0;
+  const x = focusX ? ((focusX /  2) + .5) * 100 : undefined;
+  const y = focusY ? ((focusY / -2) + .5) * 100 : undefined;
   const mediaType = props.media.get('type');
   const mimeType = props.media.getIn(['pleroma', 'mime_type']) as string | undefined;
 
@@ -152,7 +152,7 @@ const Upload: React.FC<IUpload> = (props) => {
             style={{
               transform: `scale(${scale})`,
               backgroundImage: mediaType === 'image' ? `url(${props.media.get('preview_url')})` : undefined,
-              backgroundPosition: `${x}% ${y}%` }}
+              backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined }}
           >
             <div className={classNames('compose-form__upload__actions', { active })}>
               <IconButton

From cd87b5262c12d6a338fa17488a2d0b9faa212365 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 31 May 2022 14:55:31 +0200
Subject: [PATCH 085/102] Remove unused styles?
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/autosuggest_input.js   |   1 -
 app/styles/_mixins.scss                       |  28 -
 app/styles/accounts.scss                      | 266 --------
 app/styles/application.scss                   |  13 -
 app/styles/autosuggest.scss                   |  83 +--
 app/styles/basics.scss                        |  21 -
 app/styles/chats.scss                         |  80 ---
 app/styles/components/account-header.scss     | 329 +---------
 app/styles/components/admin.scss              |  34 -
 app/styles/components/aliases.scss            |  21 -
 app/styles/components/audio-player.scss       |  76 ---
 app/styles/components/columns.scss            | 242 -------
 app/styles/components/compose-form.scss       | 109 ----
 app/styles/components/crypto-donate.scss      |  47 --
 app/styles/components/detailed-status.scss    |  82 +--
 app/styles/components/display-name.scss       |   4 -
 app/styles/components/dropdown-menu.scss      |  67 --
 app/styles/components/emoji-reacts.scss       |  86 ---
 app/styles/components/error-boundary.scss     |  83 ---
 .../components/federation-restrictions.scss   |  18 -
 app/styles/components/getting-started.scss    |  80 ---
 app/styles/components/media-gallery.scss      |   7 -
 app/styles/components/media-spoiler.scss      |  28 -
 app/styles/components/mfa_form.scss           |  69 --
 app/styles/components/modal.scss              | 604 +-----------------
 app/styles/components/profile-info-panel.scss | 198 +-----
 .../components/profile-media-panel.scss       |  46 --
 app/styles/components/profile-stats.scss      |  26 -
 app/styles/components/profile_hover_card.scss | 108 ----
 app/styles/components/progress-circle.scss    |  17 -
 app/styles/components/promo-panel.scss        |  51 --
 app/styles/components/register-invite.scss    |  26 -
 app/styles/components/remote-timeline.scss    |  68 --
 app/styles/components/reply-indicator.scss    |  55 --
 app/styles/components/search.scss             |  73 ---
 app/styles/components/setting-toggle.scss     |  10 -
 app/styles/components/sidebar-menu.scss       | 155 -----
 app/styles/components/status.scss             | 222 +------
 app/styles/components/tabs-bar.scss           | 356 -----------
 app/styles/components/theme-toggle.scss       |  37 --
 app/styles/components/user-panel.scss         | 134 ----
 app/styles/components/wtf-panel.scss          |  99 ---
 app/styles/containers.scss                    | 102 ---
 app/styles/demetricator.scss                  |  18 +-
 app/styles/donations.scss                     |  87 ---
 app/styles/dyslexic.scss                      |   4 -
 app/styles/forms.scss                         |  23 -
 app/styles/holiday/halloween.scss             |  32 -
 app/styles/navigation.scss                    | 175 -----
 app/styles/placeholder.scss                   |  60 --
 app/styles/polls.scss                         |  51 --
 app/styles/rtl.scss                           | 118 ----
 app/styles/ui.scss                            | 133 +---
 53 files changed, 81 insertions(+), 4881 deletions(-)
 delete mode 100644 app/styles/components/error-boundary.scss
 delete mode 100644 app/styles/components/getting-started.scss
 delete mode 100644 app/styles/components/media-spoiler.scss
 delete mode 100644 app/styles/components/mfa_form.scss
 delete mode 100644 app/styles/components/profile-stats.scss
 delete mode 100644 app/styles/components/progress-circle.scss
 delete mode 100644 app/styles/components/promo-panel.scss
 delete mode 100644 app/styles/components/register-invite.scss
 delete mode 100644 app/styles/components/reply-indicator.scss
 delete mode 100644 app/styles/components/tabs-bar.scss
 delete mode 100644 app/styles/components/theme-toggle.scss
 delete mode 100644 app/styles/components/user-panel.scss
 delete mode 100644 app/styles/containers.scss

diff --git a/app/soapbox/components/autosuggest_input.js b/app/soapbox/components/autosuggest_input.js
index 1e052f782..7fd4a23ed 100644
--- a/app/soapbox/components/autosuggest_input.js
+++ b/app/soapbox/components/autosuggest_input.js
@@ -296,7 +296,6 @@ export default class AutosuggestInput extends ImmutablePureComponent {
           'absolute top-full w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
           hidden: !visible,
           block: visible,
-          'autosuggest-textarea__suggestions--visible': visible,
         })}
         >
           <div className='space-y-0.5'>
diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss
index 33905de4a..2bf1d6430 100644
--- a/app/styles/_mixins.scss
+++ b/app/styles/_mixins.scss
@@ -63,31 +63,3 @@
     outline: 0 !important;
   }
 }
-
-@mixin search-popout {
-  @include font-size(12);
-  @include line-height(14);
-  @include font-weight(normal);
-  background: var(--background-color);
-  border-radius: 6px;
-  padding: 8px 10px 17px;
-  margin: 4px 0 0;
-  color: var(--primary-text-color--faint);
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
-
-  h4 {
-    @include font-size(14);
-    @include line-height(16);
-    @include font-weight(bold);
-    color: var(--primary-text-color);
-  }
-
-  ul {
-    margin: 6px 0;
-
-    li {
-      margin: 0 0 2px;
-      em { color: var(--brand-color); }
-    }
-  }
-}
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index b9392b2c9..365cbf80c 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -19,158 +19,6 @@
       }
     }
   }
-
-  &__img {
-    height: 130px;
-    position: relative;
-    background: var(--background-color);
-
-    .still-image {
-      display: block;
-      width: 100%;
-      height: 100%;
-      margin: 0;
-      object-fit: cover;
-    }
-
-    @media screen and (max-width: 600px) {
-      height: 200px;
-    }
-
-    @media screen and (max-width: $no-gap-breakpoint) {
-      display: none;
-    }
-  }
-
-  &__bar {
-    position: relative;
-    padding: 15px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    background: var(--background-color);
-    transition: 0.2s;
-
-    .avatar {
-      flex: 0 0 auto;
-      width: 48px;
-      height: 48px;
-      padding-top: 2px;
-
-      .still-image {
-        width: 100%;
-        height: 100%;
-        display: block;
-        margin: 0;
-        border-radius: 4px;
-        background: var(--background-color);
-        object-fit: cover;
-      }
-    }
-
-    .display-name {
-      margin-left: 15px;
-      text-align: left;
-
-      strong {
-        @apply text-black dark:text-white;
-        font-size: 15px;
-        font-weight: 500;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      span {
-        display: block;
-        font-size: 14px;
-        color: var(--primary-text-color--faint);
-        font-weight: 400;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      bdi,
-      span.verified-icon {
-        display: inline-block;
-      }
-    }
-  }
-}
-
-.pagination {
-  padding: 30px 0;
-  text-align: center;
-  overflow: hidden;
-
-  a,
-  .current,
-  .newer,
-  .older,
-  .page,
-  .gap {
-    font-size: 14px;
-    color: var(--primary-text-color);
-    font-weight: 500;
-    display: inline-block;
-    padding: 6px 10px;
-    text-decoration: none;
-  }
-
-  .current {
-    background: var(--foreground-color);
-    border-radius: 100px;
-    color: var(--primary-text-color);
-    cursor: default;
-    margin: 0 10px;
-  }
-
-  .gap {
-    cursor: default;
-  }
-
-  .older,
-  .newer {
-    text-transform: uppercase;
-    color: var(--primary-text-color--faint);
-  }
-
-  .older {
-    float: left;
-    padding-left: 0;
-
-    .fa {
-      display: inline-block;
-      margin-right: 5px;
-    }
-  }
-
-  .newer {
-    float: right;
-    padding-right: 0;
-
-    .fa {
-      display: inline-block;
-      margin-left: 5px;
-    }
-  }
-
-  .disabled {
-    cursor: default;
-    color: var(--primary-text-color);
-  }
-
-  @media screen and (max-width: 700px) {
-    padding: 30px 20px;
-
-    .page {
-      display: none;
-    }
-
-    .newer,
-    .older {
-      display: inline-block;
-    }
-  }
 }
 
 .account {
@@ -295,111 +143,6 @@ a .account__avatar {
   }
 }
 
-.account__reciprocal_follow_message {
-  padding: 0 5px;
-  color: var(--primary-text-color--faint);
-  text-align: center;
-}
-
-.account__disclaimer {
-  padding: 10px;
-  border-top: 1px solid var(--brand-color--med);
-  color: var(--primary-text-color);
-
-  strong {
-    font-weight: 500;
-
-    @each $lang in $cjk-langs {
-      &:lang(#{$lang}) {
-        font-weight: 700;
-      }
-    }
-  }
-
-  a {
-    font-weight: 500;
-    color: inherit;
-    text-decoration: underline;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: none;
-    }
-  }
-}
-
-.account__action-bar {
-  border-top: 1px solid var(--brand-color--med);
-  border-bottom: 1px solid var(--brand-color--med);
-  line-height: 36px;
-  overflow: hidden;
-  flex: 0 0 auto;
-  display: flex;
-}
-
-.account__action-bar-dropdown {
-  padding: 10px;
-
-  .icon-button {
-    vertical-align: middle;
-  }
-
-  .dropdown--active {
-    .dropdown__content.dropdown__right {
-      left: 6px;
-      right: initial;
-    }
-
-    &::after {
-      bottom: initial;
-      margin-left: 11px;
-      margin-top: -7px;
-      right: initial;
-    }
-  }
-}
-
-.account__action-bar-links {
-  display: flex;
-  flex: 1 1 auto;
-  line-height: 18px;
-  text-align: center;
-}
-
-.account__action-bar__tab {
-  text-decoration: none;
-  overflow: hidden;
-  flex: 0 1 100%;
-  border-right: 1px solid var(--brand-color--med);
-  padding: 10px 0;
-  border-bottom: 4px solid transparent;
-
-  &.active {
-    border-bottom: 4px solid var(--brand-color);
-  }
-
-  & > span {
-    display: block;
-    text-transform: uppercase;
-    font-size: 11px;
-    color: var(--primary-text-color--faint);
-  }
-
-  strong {
-    display: block;
-    font-size: 15px;
-    font-weight: 500;
-    color: var(--primary-text-color);
-
-    @each $lang in $cjk-langs {
-      &:lang(#{$lang}) {
-        font-weight: 700;
-      }
-    }
-  }
-}
-
 .account-authorize {
   padding: 14px 10px;
 
@@ -415,15 +158,6 @@ a .account__avatar {
   margin-right: 10px;
 }
 
-// TEMPORARY - need a default size for the avatars for now
-// They are sized individually all over the application and need to change with breakpoints as well
-// Might create a mixin to accept the size attribute and apply the various properties where necessary
-.account__avatar {
-  width: 56px;
-  height: 56px;
-  background-size: cover;
-}
-
 .account-gallery__container {
   display: flex;
   flex-wrap: wrap;
diff --git a/app/styles/application.scss b/app/styles/application.scss
index c0033a050..74da239c8 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -13,7 +13,6 @@
 @import 'fonts';
 @import 'reset';
 @import 'basics';
-@import 'containers';
 @import 'footer';
 @import 'accounts';
 @import 'boost';
@@ -36,16 +35,13 @@
 // COMPONENTS
 @import 'components/buttons';
 @import 'components/inputs';
-@import 'components/tabs-bar';
 @import 'components/dropdown-menu';
 @import 'components/modal';
 @import 'components/account-header';
-@import 'components/user-panel';
 @import 'components/compose-form';
 @import 'components/sidebar-menu';
 @import 'components/emoji-reacts';
 @import 'components/status';
-@import 'components/reply-indicator';
 @import 'components/reply-mentions';
 @import 'components/detailed-status';
 @import 'components/list-forms';
@@ -55,23 +51,17 @@
 @import 'components/columns';
 @import 'components/search';
 @import 'components/react-toggle';
-@import 'components/getting-started';
-@import 'components/promo-panel';
 @import 'components/still-image';
-@import 'components/theme-toggle';
 @import 'components/trends';
 @import 'components/wtf-panel';
 @import 'components/profile-media-panel';
 @import 'components/profile-info-panel';
 @import 'components/setting-toggle';
 @import 'components/spoiler-button';
-@import 'components/media-spoiler';
-@import 'components/error-boundary';
 @import 'components/video-player';
 @import 'components/audio-player';
 @import 'components/profile_hover_card';
 @import 'components/filters';
-@import 'components/mfa_form';
 @import 'components/snackbar';
 @import 'components/accordion';
 @import 'components/server-info';
@@ -82,9 +72,6 @@
 @import 'components/federation-restrictions';
 @import 'components/aliases';
 @import 'components/icon';
-@import 'components/profile-stats';
-@import 'components/progress-circle';
-@import 'components/register-invite';
 @import 'components/radio-button';
 @import 'components/directory';
 
diff --git a/app/styles/autosuggest.scss b/app/styles/autosuggest.scss
index 4a8aa94fe..3e0f8451c 100644
--- a/app/styles/autosuggest.scss
+++ b/app/styles/autosuggest.scss
@@ -1,10 +1,7 @@
-.autosuggest-textarea,
-.autosuggest-input,
-.spoiler-input {
+.autosuggest-input {
   position: relative;
 }
 
-.autosuggest-textarea__textarea,
 .autosuggest-input input,
 .react-datepicker__input-container input {
   // display: block;
@@ -29,59 +26,6 @@
   // }
 }
 
-.autosuggest-textarea__textarea {
-  min-height: 100px;
-  // border-radius: 5px 5px 0 0;
-  // padding-bottom: 0;
-  // padding-right: 10px + 22px;
-  // resize: none;
-  // scrollbar-color: initial;
-  // transition: 0.2s;
-
-  // &::-webkit-scrollbar {
-  //   all: unset;
-  // }
-
-  // @media screen and (max-width: 600px) {
-  //   max-height: 100px !important; // prevent auto-resize textarea
-  //   resize: vertical;
-  // }
-}
-
-.autosuggest-textarea__suggestions-wrapper {
-  position: relative;
-  height: 0;
-}
-
-.autosuggest-textarea__suggestions {
-  box-sizing: border-box;
-  display: none;
-  position: absolute;
-  top: 100%;
-  width: 100%;
-  z-index: 501; /* Above TimelineQueueHeader */
-  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-  background: var(--background-color);
-  border-radius: 0 0 4px 4px;
-  font-size: 14px;
-  padding: 6px;
-  &.autosuggest-textarea__suggestions--visible { display: block; }
-}
-
-.autosuggest-textarea__suggestions__item {
-  padding: 10px;
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &.selected {
-    background: var(--brand-color--med);
-  }
-}
-
-.autosuggest-account,
 .autosuggest-emoji {
   display: flex;
   flex-direction: row;
@@ -91,34 +35,9 @@
   font-size: 14px;
 }
 
-.autosuggest-account-icon,
 .autosuggest-emoji img {
   display: block;
   margin-right: 8px;
   width: 16px;
   height: 16px;
 }
-
-.autosuggest-account .display-name__account {
-  color: var(--primary-text-color--faint);
-}
-
-.autosuggest-input__action {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  border-radius: 4px;
-  font-weight: bold;
-  text-decoration: none;
-  color: var(--primary-text-color--faint);
-
-  &:hover,
-  &.selected {
-    background-color: var(--brand-color--med);
-  }
-
-  .svg-icon {
-    margin-right: 8px;
-    transform: translateY(-1px);
-  }
-}
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 6cd9df90f..33257bf2a 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -54,16 +54,6 @@ body {
       vertical-align: middle;
       margin: 20px;
 
-      &__illustration {
-        img {
-          display: block;
-          max-width: 470px;
-          width: 100%;
-          height: auto;
-          margin-top: -120px;
-        }
-      }
-
       h1 {
         font-size: 20px;
         line-height: 28px;
@@ -79,17 +69,6 @@ div[tabindex="-1"]:focus {
   outline: 0;
 }
 
-.visuallyhidden {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-  font-size: 1px !important;
-  height: 1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-}
-
 ::selection {
   @apply bg-primary-600 text-white;
 }
diff --git a/app/styles/chats.scss b/app/styles/chats.scss
index ba712010b..8d1568f18 100644
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@@ -19,11 +19,6 @@
     border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
     padding: 5px;
 
-    .autosuggest-textarea__suggestions {
-      top: auto;
-      bottom: 100%;
-    }
-
     input.search__input {
       border-radius: 6px;
     }
@@ -307,87 +302,12 @@
   }
 }
 
-.ui--chatroom {
-  padding-bottom: 0;
-
-  .columns-area__panels__main .columns-area .column {
-    height: calc(100vh - 100px);
-    box-sizing: border-box;
-    overflow: hidden;
-
-    @media (max-width: 630px) {
-      height: calc(100vh - 50px);
-    }
-  }
-
-  .page {
-    .chat-box {
-      display: flex;
-      flex-direction: column;
-      overflow: hidden;
-      flex: 1;
-      border-radius: 0 0 10px 10px;
-
-      &__actions textarea {
-        padding: 10px 40px 10px 10px;
-      }
-    }
-  }
-
-  @media (max-width: 630px) {
-    .columns-area__panels__main .columns-area {
-      padding: 0;
-    }
-
-    .columns-area__panels__main {
-      padding: 0;
-      max-width: none;
-    }
-
-    .columns-area .column {
-      border-radius: 0;
-    }
-
-    .page {
-      .chat-messages {
-        margin-bottom: 60px;
-      }
-
-      .chat-box {
-        border-radius: 0;
-        border: 2px solid var(--foreground-color);
-        margin-bottom: var(--thumb-navigation-height);
-
-        &__actions {
-          width: 100%;
-          padding: 0;
-          position: fixed;
-          bottom: 60px;
-          left: 0;
-          z-index: 1;
-
-          textarea {
-            height: 4em;
-            border-radius: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
 @media (max-width: 630px) {
   .chat-panes {
     display: none;
   }
 }
 
-@media (min-width: 1190px) {
-  .tabs-bar .tabs-bar__link--chats {
-    display: none;
-  }
-}
-
 .chatroom__header {
   display: flex;
   margin-left: auto;
diff --git a/app/styles/components/account-header.scss b/app/styles/components/account-header.scss
index d3580232a..a9bdeea05 100644
--- a/app/styles/components/account-header.scss
+++ b/app/styles/components/account-header.scss
@@ -1,316 +1,41 @@
-.account__header {
-  &.inactive {
-    opacity: 0.5;
+.account__header__subscribe {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  right: max(10px, env(safe-area-inset-right));
+  z-index: 1;
 
-    .account__header__image,
-    .account__avatar {
-      filter: grayscale(100%);
-    }
-  }
+  .subscription-button {
+    color: var(--primary-text-color);
+    margin-bottom: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--background-color);
+    text-transform: uppercase;
+    font-size: 13px;
+    font-weight: 500;
+    padding: 4px;
+    border-radius: 4px;
+    opacity: 0.7;
 
-  &__info {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    left: max(10px, env(safe-area-inset-left));
-    z-index: 1;
-  }
-
-  &__subscribe {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    right: max(10px, env(safe-area-inset-right));
-    z-index: 1;
-
-    .subscription-button {
-      color: var(--primary-text-color);
-      margin-bottom: 4px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background-color: var(--background-color);
-      text-transform: uppercase;
-      font-size: 13px;
-      font-weight: 500;
-      padding: 4px;
-      border-radius: 4px;
-      opacity: 0.7;
-
-      &:active,
-      &:focus,
-      &:hover {
-        opacity: 1;
-      }
-
-      &:not(.button-active) i.fa {
-        margin: 0;
-      }
-
-      .svg-icon {
-        width: 20px;
-        height: 20px;
-      }
-    }
-  }
-
-  &__image {
-    overflow: hidden;
-    height: 350px;
-    position: relative;
-    background: var(--accent-color--faint);
-
-    @media screen and (max-width: 895px) {
-      height: 225px;
+    &:active,
+    &:focus,
+    &:hover {
+      opacity: 1;
     }
 
-    @media screen and (max-width: 560px) {
-      height: 150px;
-    }
-
-    &--none {
-      height: 125px;
-    }
-
-    img {
-      object-fit: cover;
-      display: block;
-      width: 100%;
-      height: 100%;
+    &:not(.button-active) i.fa {
       margin: 0;
     }
 
-    .still-image {
-      height: 100%;
-    }
-
-    .still-image--play-on-hover::before {
-      content: 'GIF';
-      position: absolute;
-      color: var(--primary-text-color);
-      background: var(--foreground-color);
-      top: 6px;
-      left: 6px;
-      padding: 2px 6px;
-      border-radius: 2px;
-      font-size: 11px;
-      font-weight: 600;
-      pointer-events: none;
-      opacity: 0.9;
-      transition: opacity 0.1s ease;
-      line-height: 18px;
-    }
-  }
-
-  &__bar {
-    display: block;
-    min-height: 74px;
-    width: 100%;
-    position: relative;
-    background: var(--foreground-color);
-
-    @media (min-width: 896px) {
-      height: 74px;
-    }
-  }
-
-  &__avatar {
-    display: block;
-    position: absolute;
-    left: 0;
-    top: -90px;
-    border-radius: 50%;
-    height: 200px;
-    width: 200px;
-    background-color: var(--foreground-color);
-
-    // NOTE - patch fix for avatar size. Wrapper may not be needed when I do polish up on the page
-    .account__avatar {
-      width: 200px;
-      height: 200px;
-      background-size: 200px 200px;
-    }
-
-    .still-image--play-on-hover::before {
-      content: 'GIF';
-      position: absolute;
-      color: var(--primary-text-color);
-      background: var(--foreground-color);
-      bottom: 15%;
-      left: 15%;
-      padding: 1px 4px;
-      border-radius: 2px;
-      font-size: 8px;
-      font-weight: 600;
-      pointer-events: none;
-      opacity: 0.9;
-      transition: opacity 0.1s ease;
-      line-height: 13px;
-    }
-
-    @media screen and (max-width: 895px) {
-      top: -45px;
-      left: 20px;
-      left: max(20px + env(safe-area-inset-left));
-      height: 90px;
-      width: 90px;
-
-      .account__avatar {
-        width: 90px;
-        height: 90px;
-        background-size: 90px 90px;
-      }
-    }
-  }
-
-  &__extra {
-    display: flex;
-    flex-direction: row;
-    height: 100%;
-    margin: 0 auto;
-    padding-left: 310px;
-    width: 100%;
-    max-width: 1200px;
-    box-sizing: border-box;
-    position: relative;
-
-    @media (min-width: 896px) and (max-width: 1190px) {
-      max-width: 900px;
-      padding-left: 300px;
-    }
-
-    @media screen and (max-width: 895px) {
-      max-width: 900px;
-      padding-top: 10px;
-      padding-left: 10px;
-      padding-left: max(10px, env(safe-area-inset-left));
-      padding-right: 10px;
-      padding-right: max(10px, env(safe-area-inset-right));
-      flex-direction: column-reverse;
-      min-height: 50px;
-    }
-
-    &__buttons {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-
-      .icon-button {
-        border: 1px solid var(--primary-text-color--faint);
-        border-radius: 999px;
-        box-sizing: content-box;
-        padding: 7px;
-        opacity: 0.6;
-
-        &:hover,
-        &:focus {
-          opacity: 1;
-        }
-
-        .svg-icon {
-          width: 20px;
-          height: 20px;
-
-          svg {
-            &.feather {
-              // Feather icons are a little larger
-              transform: scale(0.9);
-            }
-          }
-        }
-      }
-
-      .button,
-      .icon-button {
-        margin-left: 10px;
-      }
-
-      .button-active {
-        border-color: #008000;
-        background: #008000;
-        color: #fff;
-      }
-    }
-
-    &__links {
-      display: flex;
-      font-size: 14px;
-      color: var(--primary-text-color--faint);
-
-      @media screen and (max-width: 895px) {
-        justify-content: center;
-        flex-wrap: wrap;
-        display: none;
-      }
-
-      a {
-        display: inline-block;
-        text-decoration: none;
-        padding: 16px 22px;
-        text-align: center;
-        @media screen and (max-width: 1190px) { padding: 16px; }
-
-        > span {
-          display: block;
-
-          &:first-of-type {
-            color: var(--primary-text-color);
-            font-size: 20px;
-            font-weight: 800;
-            line-height: 24px;
-            @media screen and (max-width: 895px) {
-              font-size: 16px;
-              line-height: 20px;
-            }
-          }
-
-          &:last-of-type {
-            color: var(--primary-text-color--faint);
-            font-size: 12px;
-            line-height: 14px;
-            padding-top: 2px;
-          }
-        }
-
-        &:hover,
-        &:focus,
-        &.active {
-          border-bottom: 2px solid var(--primary-text-color);
-        }
-        &.score { border-bottom: 0 !important; }
-      }
-    }
-  } // end .account__header__extra
-
-  @media screen and (max-width: 895px) {
-    .account-mobile-container {
-      display: block;
-      margin-top: 10px;
-      position: relative;
-      padding: 10px 10px 0;
-      &--nonuser { padding: 10px 10px 15px; }
-    }
-
-    .account-mobile-container.deactivated {
-      margin-top: 50px;
+    .svg-icon {
+      width: 20px;
+      height: 20px;
     }
   }
 }
 
-.account__header.deactivated {
-  .still-image img,
-  .still-image canvas {
-    display: none;
-  }
-
-  .account__header__extra__links,
-  .account__header__extra__buttons {
-    display: none;
-  }
-}
-
-// end .account__header
-
 .account__header__content {
   color: var(--primary-text-color--faint);
   font-size: 14px;
diff --git a/app/styles/components/admin.scss b/app/styles/components/admin.scss
index 75ab36c38..5c4d4e2fe 100644
--- a/app/styles/components/admin.scss
+++ b/app/styles/components/admin.scss
@@ -56,40 +56,6 @@
   }
 }
 
-.page--admin .slist .item-list article:nth-child(2n-1) {
-  .unapproved-account,
-  .logentry {
-    background-color: hsla(var(--accent-color_hsl), 0.07);
-  }
-}
-
-.page--admin {
-  @media screen and (max-width: 895px) {
-    .columns-area__panels {
-      flex-direction: column;
-      align-items: center;
-
-      &__pane--left {
-        display: block;
-        width: 100%;
-        max-width: 600px;
-        padding: 10px 0;
-        box-sizing: border-box;
-
-        .columns-area__panels__pane__inner {
-          width: auto;
-        }
-      }
-    }
-  }
-
-  blockquote.md {
-    padding: 5px 0 5px 15px;
-    border-left: 3px solid hsla(var(--primary-text-color_hsl), 0.4);
-    color: var(--primary-text-color--faint);
-  }
-}
-
 .admin-report {
   padding: 15px;
   display: flex;
diff --git a/app/styles/components/aliases.scss b/app/styles/components/aliases.scss
index fb160cb88..3106c902a 100644
--- a/app/styles/components/aliases.scss
+++ b/app/styles/components/aliases.scss
@@ -17,27 +17,6 @@
       overflow-y: unset;
     }
   }
-
-  &_search.search {
-    display: flex;
-    align-items: center;
-    flex-direction: row;
-    border-bottom: none;
-
-    .search__input {
-      padding: 7px 30px 6px 10px;
-      background: none;
-    }
-
-    > label {
-      flex: 1 1;
-    }
-
-    > .button {
-      width: 80px;
-      margin-left: 10px;
-    }
-  }
 }
 
 .aliases-settings-panel {
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 4ef057be3..a4b4fae34 100644
--- a/app/styles/components/audio-player.scss
+++ b/app/styles/components/audio-player.scss
@@ -1,68 +1,3 @@
-.audio-error-cover {
-  align-items: center;
-  background: var(--background-color);
-  color: var(--primary-text-color);
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  justify-content: center;
-  margin-top: 8px;
-  position: relative;
-  text-align: center;
-  z-index: 100;
-}
-
-.status__audio-player {
-  background: var(--background-color);
-  box-sizing: border-box;
-  cursor: default; /* May not be needed */
-  margin-top: 8px;
-  overflow: hidden;
-  position: relative;
-}
-
-.status__audio-player-audio {
-  height: 100%;
-  object-fit: cover;
-  position: relative;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 100%;
-  z-index: 1;
-}
-
-.status__audio-player-expand,
-.status__audio-player-mute {
-  color: var(--primary-text-color);
-  opacity: 0.8;
-  position: absolute;
-  right: 4px;
-  text-shadow: 0 1px 1px $base-shadow-color, 1px 0 1px $base-shadow-color;
-}
-
-.status__audio-player-expand {
-  bottom: 4px;
-  z-index: 100;
-}
-
-.status__audio-player-mute {
-  top: 4px;
-  z-index: 5;
-}
-
-.detailed,
-.fullscreen {
-  .audio-player__volume__current,
-  .audio-player__volume::before {
-    bottom: 27px;
-  }
-
-  .audio-player__volume__handle {
-    bottom: 23px;
-  }
-}
-
 .audio-player {
   overflow: hidden;
   box-sizing: border-box;
@@ -132,14 +67,3 @@
   border: 0;
   display: block;
 }
-
-.media-spoiler-audio-play-icon {
-  border-radius: 100px;
-  color: var(--primary-text-color--faint);
-  font-size: 36px;
-  left: 50%;
-  padding: 5px;
-  position: absolute;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 5c2c4e1ff..4d540e42a 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -1,9 +1,3 @@
-.column__wrapper {
-  display: flex;
-  flex: 1 1 auto;
-  position: relative;
-}
-
 .columns-area {
   display: flex;
   flex: 1 1 auto;
@@ -108,10 +102,6 @@
     padding: 0;
   }
 
-  .autosuggest-textarea__textarea {
-    // font-size: 16px;
-  }
-
   .search__input {
     line-height: 18px;
     font-size: 16px;
@@ -141,7 +131,6 @@
         margin-top: 15px;
       }
     }
-    .account__header__bar { padding: 5px 10px; }
 
     .compose-form {
       padding: 15px;
@@ -238,51 +227,6 @@
   }
 }
 
-.column-header__back-button {
-  background: var(--brand-color--faint);
-  border: 0;
-  font-family: inherit;
-  color: var(--highlight-text-color);
-  cursor: pointer;
-  white-space: nowrap;
-  font-size: 16px;
-  padding: 0 5px 0 0;
-  z-index: 3;
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:last-child {
-    padding: 0 15px 0 0;
-  }
-}
-
-.column-back-button__icon {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.column-back-button--slim {
-  position: relative;
-}
-
-.column-back-button--slim-button {
-  cursor: pointer;
-  flex: 0 0 auto;
-  font-size: 16px;
-  padding: 15px;
-  position: absolute;
-  right: 0;
-  top: -49px;
-
-  @media screen and (max-width: $nav-breakpoint-2) {
-    top: -35px;
-    font-size: 14px;
-    padding: 8px 15px;
-  }
-}
-
 .column-link {
   background: var(--brand-color--med);
   color: var(--primary-text-color);
@@ -352,10 +296,6 @@
     background: transparent;
     border-radius: 0;
     box-shadow: none;
-
-    .sub-navigation {
-      box-shadow: 0 -6px 6px -6px rgba(0, 0, 0, 0.1);
-    }
   }
 
   @media screen and (max-width: 580px) {
@@ -478,10 +418,6 @@
     }
   }
 
-  & > .column-header__back-button {
-    color: var(--highlight-text-color);
-  }
-
   &.active {
     box-shadow: 0 1px 0 hsla(var(--highlight-text-color_hsl), 0.3);
 
@@ -577,37 +513,12 @@
   }
 }
 
-.column-header__setting-arrows {
-  float: right;
-
-  .column-header__setting-btn {
-    padding: 0 10px;
-
-    &:last-child {
-      padding-right: 0;
-    }
-  }
-}
-
-.column-header__expansion {
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-}
-
 .column-header__icon {
   display: inline-block;
   margin-right: 5px;
   font-size: 20px;
 }
 
-.component-modal {
-  @include standard-panel;
-  width: 400px;
-  max-width: calc(100% - 20px);
-  max-height: calc(100vh - 20px);
-}
-
 .column-settings {
   width: 100%;
   display: flex;
@@ -650,11 +561,6 @@
   }
 }
 
-.column-settings__outer {
-  background: var(--brand-color--med);
-  padding: 15px;
-}
-
 .column-settings__section {
   color: var(--primary-text-color--faint);
   cursor: default;
@@ -663,86 +569,6 @@
   margin-bottom: 10px;
 }
 
-.column-settings__hashtags {
-  .column-settings__row {
-    margin-bottom: 15px;
-  }
-
-  .column-select {
-    &__control {
-      @include search-input;
-    }
-
-    &__placeholder {
-      color: var(--primary-text-color);
-      padding-left: 2px;
-      font-size: 12px;
-    }
-
-    &__value-container {
-      padding-left: 6px;
-    }
-
-    &__multi-value {
-      background: var(--brand-color--med);
-
-      &__remove {
-        cursor: pointer;
-
-        &:hover,
-        &:active,
-        &:focus {
-          background: var(--brand-color--med);
-          color: var(--primary-text-color);
-        }
-      }
-    }
-
-    &__multi-value__label,
-    &__input {
-      color: var(--primary-text-color--faint);
-    }
-
-    &__clear-indicator,
-    &__dropdown-indicator {
-      cursor: pointer;
-      transition: none;
-      color: var(--primary-text-color);
-
-      &:hover,
-      &:active,
-      &:focus {
-        color: var(--primary-text-color);
-      }
-    }
-
-    &__indicator-separator {
-      background-color: var(--brand-color--med);
-    }
-
-    &__menu {
-      @include search-popout;
-      padding: 0;
-      background: var(--background-color);
-    }
-
-    &__menu-list {
-      padding: 6px;
-    }
-
-    &__option {
-      color: var(--primary-text-color);
-      border-radius: 4px;
-      font-size: 14px;
-
-      &--is-focused,
-      &--is-selected {
-        background: var(--background-color);
-      }
-    }
-  }
-}
-
 .column-settings__row {
   .text-btn {
     margin-bottom: 15px;
@@ -807,10 +633,6 @@
     display: flex;
     align-items: center;
     border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
-
-    .sub-navigation {
-      border-bottom: 0;
-    }
   }
 
   .column-header {
@@ -838,14 +660,6 @@
       }
     }
   }
-
-  .column-back-button--slim {
-    &-button {
-      position: relative;
-      top: auto;
-      right: auto;
-    }
-  }
 }
 
 .column-title {
@@ -898,58 +712,6 @@
   }
 }
 
-.column-loading {
-  background-color: var(--foreground-color);
-  display: flex;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  padding: 15px;
-  border-radius: 0 0 10px 10px;
-
-  @media screen and (max-width: 450px) {
-    border-radius: 0;
-  }
-}
-
-// Make MaterialStatus flush against SubNavigation
-.sub-navigation ~,
-.sub-navigation ~ .ptr > .ptr__children > {
-  // ScrollableList
-  .slist .item-list > article:first-child,
-  // ScrollableList placeholders
-  .slist .item-list .slist__placeholder:first-child > .material-status:first-child,
-  .slist.slist--flex .item-list > .material-status:first-child,
-  // Thread
-  .material-status:not(.material-status + .material-status) {
-    // MaterialStatus
-    .material-status__status {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
-  }
-}
-
-// Display background for loading indicator
-.column--transparent {
-  .slist__append {
-    @include standard-panel;
-
-    @media screen and (max-width: 580px) {
-      border-radius: 0;
-    }
-  }
-
-  .sub-navigation ~ .slist .slist__append {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-}
-
-.follow_heading {
-  color: var(--accent-color);
-}
-
 .follow_subhead {
   margin: 50px 0;
   font-size: 20px;
@@ -959,10 +721,6 @@
   background: var(--foreground-color);
 }
 
-.sub-navigation + .account__section-headline {
-  background: var(--foreground-color);
-}
-
 // Pull to refresh
 .columns-area .column {
   .ptr,
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 4682d5123..ca2979098 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -53,37 +53,6 @@
     }
   }
 
-  &__autosuggest-wrapper {
-    position: relative;
-  }
-
-  .spoiler-input {
-    height: 0;
-    transform-origin: bottom;
-    opacity: 0;
-
-    &.spoiler-input--visible {
-      height: 36px;
-      margin-bottom: 11px;
-      opacity: 1;
-    }
-  }
-
-  .spoiler-input__input { border-radius: 4px; }
-
-  &.condensed {
-    .autosuggest-textarea__textarea {
-      min-height: 46px;
-      border-radius: 5px;
-    }
-
-    .compose-form__buttons-wrapper {
-      height: 0;
-      padding: 0;
-      overflow: hidden;
-    }
-  }
-
   &__modifiers {
     color: var(--primary-text-color);
     font-family: inherit;
@@ -208,75 +177,6 @@
     }
   } // end .compose-form .compose-form__modifiers
 
-  &__buttons-wrapper {
-    padding: 10px;
-    background: var(--background-color);
-    display: flex;
-    justify-content: space-between;
-    flex: 0 0 auto;
-    border-radius: 0 0 5px 5px;
-
-    .compose-form__buttons {
-      display: flex;
-
-      > div {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      .compose-form__sensitive-button {
-        display: none;
-
-        &.compose-form__sensitive-button--visible {
-          display: block;
-        }
-      }
-
-      .svg-icon {
-        width: 24px;
-        height: 24px;
-
-        svg {
-          stroke-width: 1.5px;
-        }
-      }
-
-      .privacy-dropdown__value {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-    }
-
-    .icon-button {
-      box-sizing: content-box;
-      padding: 0 3px;
-      opacity: 0.5;
-      transition: 0.2s;
-
-      &.active,
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .character-counter {
-      display: block;
-      cursor: default;
-      font-family: var(--font-sans-serif), sans-serif;
-      font-size: 14px;
-      font-weight: 600;
-      color: var(--primary-text-color--faint);
-      &.character-counter--over { color: $warning-red; }
-    }
-
-    .character-counter,
-    .visual-character-counter {
-      margin-right: 10px;
-    }
-  }
-
   &__publish {
     display: flex;
     justify-content: flex-end;
@@ -296,15 +196,6 @@
   }
 } // end .compose-form
 
-// Icon tweaks
-.compose-form__spoiler-button-icon {
-  transform: translateY(2px);
-}
-
-.compose-form__markdown-button-icon {
-  transform: translateY(1px);
-}
-
 .privacy-dropdown__dropdown {
   @apply absolute bg-white dark:bg-slate-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;
 
diff --git a/app/styles/components/crypto-donate.scss b/app/styles/components/crypto-donate.scss
index 8b924e2f8..c90d279a3 100644
--- a/app/styles/components/crypto-donate.scss
+++ b/app/styles/components/crypto-donate.scss
@@ -1,7 +1,3 @@
-.crypto-donate {
-  padding-bottom: 10px;
-}
-
 .crypto-address {
   padding: 20px;
   display: flex;
@@ -61,11 +57,6 @@
   }
 }
 
-.site-wallet {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-}
-
 .crypto-donate-modal {
   background: var(--foreground-color);
   border-radius: 8px;
@@ -76,41 +67,3 @@
     height: 22px;
   }
 }
-
-.profile-info-panel-content__fields {
-  .crypto-address {
-    padding: 10px 0;
-  }
-}
-
-.crypto-donate-panel {
-  &__message {
-    margin: 20px 0;
-    margin-top: -12px;
-    font-size: 14px;
-  }
-
-  .site-wallet {
-    display: block;
-    padding-bottom: 10px;
-  }
-
-  .crypto-address {
-    padding: 0;
-    margin: 20px 0;
-
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  &--has-more {
-    .site-wallet {
-      padding-bottom: 0;
-    }
-  }
-}
diff --git a/app/styles/components/detailed-status.scss b/app/styles/components/detailed-status.scss
index 171375743..8cd6fd711 100644
--- a/app/styles/components/detailed-status.scss
+++ b/app/styles/components/detailed-status.scss
@@ -1,11 +1,3 @@
-.detailed-status__action-bar-dropdown {
-  flex: 1 1 auto;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-
 .detailed-status {
   // padding: 14px 10px;
 
@@ -15,8 +7,7 @@
     justify-content: space-between;
     align-items: flex-start;
 
-    .status__content,
-    .detailed-status__meta {
+    .status__content {
       flex: 100%;
     }
   }
@@ -31,11 +22,6 @@
       margin: -1px 0 0;
     }
 
-    .status__content__spoiler-link {
-      line-height: 24px;
-      margin: -1px 0 0;
-    }
-
     &--big {
       img.emojione {
         width: 56px;
@@ -50,14 +36,6 @@
   }
 }
 
-.detailed-status__meta {
-  margin-top: 15px;
-  color: var(--primary-text-color--faint);
-  font-size: 14px;
-  line-height: 18px;
-  display: flex;
-}
-
 .detailed-status__timestamp {
   display: flex;
   align-items: center;
@@ -76,63 +54,10 @@
   }
 }
 
-.detailed-status__action-bar {
-  border-top: 1px solid var(--brand-color--faint);
-  border-bottom: 1px solid var(--brand-color--faint);
-  display: flex;
-  flex-direction: row;
-}
-
-.detailed-status__link {
-  color: var(--primary-text-color--faint);
-  text-decoration: none;
-  font-size: 13px;
-  cursor: pointer;
-}
-
-.detailed-status__button {
-  padding: 10px 0;
-}
-
-.status__button,
-.detailed-status__button {
-  .icon-button {
-    display: inline-flex;
-    align-items: center;
-
-    &__text {
-      font-size: 14px;
-      padding-left: 5px;
-    }
-  }
-
-  .emoji-picker-expand {
-    display: none;
-  }
-
-  &:focus-within {
-    .emoji-picker-expand {
-      display: inline-flex;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-
-      &:focus-within {
-        width: unset;
-      }
-    }
-  }
-}
-
 .detailed-status__wrapper {
   position: relative;
 }
 
-.detailed-status__application,
-.detailed-status__datetime {
-  color: inherit;
-}
-
 .detailed-status__display-name {
   color: var(--primary-text-color--faint);
   display: flex;
@@ -175,11 +100,6 @@
     .status__wrapper {
       @apply shadow-none p-0;
     }
-
-    // // Only display line if posts are below
-    // &:last-child .detailed-status__action-bar {
-    //   border-bottom: 0;
-    // }
   }
 
   .status__content-wrapper {
diff --git a/app/styles/components/display-name.scss b/app/styles/components/display-name.scss
index 7ae87eff7..c7976a056 100644
--- a/app/styles/components/display-name.scss
+++ b/app/styles/components/display-name.scss
@@ -1,8 +1,5 @@
 .status__display-name,
-.status__relative-time,
 .detailed-status__display-name,
-.detailed-status__datetime,
-.detailed-status__application,
 .account__display-name {
   text-decoration: none;
 }
@@ -21,7 +18,6 @@
 }
 
 .status__display-name,
-.reply-indicator__display-name,
 .detailed-status__display-name,
 a.account__display-name {
   &:hover strong {
diff --git a/app/styles/components/dropdown-menu.scss b/app/styles/components/dropdown-menu.scss
index e3a717fbc..4d517a8d2 100644
--- a/app/styles/components/dropdown-menu.scss
+++ b/app/styles/components/dropdown-menu.scss
@@ -68,70 +68,3 @@
   }
 }
 // end .dropdown-menu
-
-// NOTE - not sure what this relates to — but it doesn't involve the navbar dropdown
-
-.dropdown {
-  display: inline-block;
-}
-
-.dropdown__content {
-  display: none;
-  position: absolute;
-}
-
-.dropdown--active .dropdown__content {
-  display: block;
-  line-height: 18px;
-  max-width: 311px;
-  right: 0;
-  text-align: left;
-  z-index: 9999;
-
-  & > ul {
-    list-style: none;
-    background: var(--background-color);
-    padding: 4px 0;
-    border-radius: 4px;
-    box-shadow: 0 0 15px rgba($base-shadow-color, 0.4);
-    min-width: 140px;
-    position: relative;
-  }
-
-  &.dropdown__right {
-    right: 0;
-  }
-
-  &.dropdown__left {
-    & > ul {
-      left: -98px;
-    }
-  }
-
-  & > ul > li > a {
-    font-size: 13px;
-    line-height: 18px;
-    display: block;
-    padding: 4px 14px;
-    box-sizing: border-box;
-    text-decoration: none;
-    background: var(--background-color);
-    color: var(--primary-text-color);
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    &:focus {
-      outline: 0;
-    }
-
-    &:hover {
-      background: var(--brand-color);
-      color: var(--primary-text-color--faint);
-    }
-  }
-}
-
-.dropdown__icon {
-  vertical-align: middle;
-}
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
index ea825a895..f21bf2fb1 100644
--- a/app/styles/components/emoji-reacts.scss
+++ b/app/styles/components/emoji-reacts.scss
@@ -22,47 +22,11 @@
   }
 }
 
-.emoji-react--reblogs,
-.emoji-react--favourites {
-  vertical-align: middle;
-  display: inline-flex;
-  margin-right: 10px;
-
-  .svg-icon {
-    margin-right: 0.2em;
-  }
-}
-
-.emoji-react--reblogs {
-  .svg-icon {
-    color: var(--highlight-text-color);
-
-    svg {
-      stroke-width: 3px;
-    }
-  }
-}
-
-.emoji-react--favourites {
-  .svg-icon {
-    color: var(--accent-color);
-
-    svg path {
-      fill: var(--accent-color);
-    }
-  }
-}
-
 .emoji-reacts {
   display: inline-flex;
   flex-direction: row-reverse;
 }
 
-.status-interaction-bar {
-  margin-right: auto;
-  min-height: 20px;
-}
-
 .emoji-reacts-container {
   display: inline-flex;
 
@@ -81,13 +45,6 @@
   }
 }
 
-.emoji-react-selector-container {
-  &:hover,
-  &:focus {
-    outline: 0;
-  }
-}
-
 .emoji-react-selector {
   position: absolute;
   display: flex;
@@ -129,49 +86,6 @@
   }
 }
 
-.status__action-bar__counter--favourite {
-  position: relative;
-
-  @media (max-width: 455px) {
-    position: static;
-  }
-}
-
-.status__action-bar,
-.detailed-status__action-bar {
-  .svg-icon {
-    width: 20px;
-    height: 20px;
-    display: block;
-    overflow: visible;
-  }
-
-  .icon-button__emoji .emojione {
-    width: 20px;
-    height: 20px;
-    margin: 0;
-  }
-
-  svg {
-    stroke-width: 2px;
-  }
-
-  svg.icon-tabler {
-    // Tabler icons are a little thicker than Feather icons
-    stroke-width: 1.6px !important;
-    transform: scale(1.2);
-  }
-}
-
-// This icon is a little different than the others...
-.status__action-bar__counter--favourite,
-.detailed-status__button--favourite {
-  .svg-icon svg.icon-tabler {
-    transform: translateY(-1px) scale(1.3);
-    stroke-width: 1.4px !important;
-  }
-}
-
 .detailed-status__wrapper .emoji-react-selector {
   bottom: 40px;
   right: 10px;
diff --git a/app/styles/components/error-boundary.scss b/app/styles/components/error-boundary.scss
deleted file mode 100644
index b809a1efa..000000000
--- a/app/styles/components/error-boundary.scss
+++ /dev/null
@@ -1,83 +0,0 @@
-.error-boundary {
-  box-sizing: border-box;
-  min-height: 100vh;
-  max-width: 375px;
-  text-align: center;
-  padding: 10px 10px 80px;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  ::selection {
-    background-color: #000;
-    color: #fff;
-  }
-
-  .sad-face {
-    width: 70px;
-    height: 70px;
-    margin: 20px auto;
-    opacity: 0.5;
-    transition: 0.8s;
-
-    svg {
-      stroke-width: 1.5px;
-    }
-
-    &:hover {
-      transform: rotate(180deg);
-    }
-  }
-
-  a {
-    color: var(--brand-color);
-  }
-
-  > div {
-    margin: auto;
-
-    span {
-      display: block;
-      text-align: center;
-      color: var(--primary-text-color--faint);
-    }
-
-    .return-home {
-      display: flex;
-      margin: 15px auto;
-      justify-content: center;
-      align-items: center;
-
-      a {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .svg-icon {
-        width: 18px;
-        height: 18px;
-        margin-right: 5px;
-      }
-    }
-  }
-
-  p.help-text {
-    text-align: left;
-    font-style: italic;
-    font-size: 14px;
-    padding: 20px 10px 0;
-    margin-top: 20px;
-    opacity: 0.7;
-    border-top: 1px solid;
-  }
-
-  &__component-stack {
-    width: 100%;
-    height: 200px;
-    text-align: left;
-    margin: 20px 0;
-    padding: 10px;
-  }
-}
diff --git a/app/styles/components/federation-restrictions.scss b/app/styles/components/federation-restrictions.scss
index 1b60e01cb..4bc42ff94 100644
--- a/app/styles/components/federation-restrictions.scss
+++ b/app/styles/components/federation-restrictions.scss
@@ -67,21 +67,3 @@
     }
   }
 }
-
-.edit-federation-modal {
-  background: var(--foreground-color);
-  border-radius: 8px;
-  padding: 20px;
-
-  &__title {
-    font-size: 18px;
-    margin-bottom: 15px;
-    font-weight: bold;
-    text-align: center;
-  }
-
-  &__submit {
-    margin-bottom: 0 !important;
-    margin-top: 20px;
-  }
-}
diff --git a/app/styles/components/getting-started.scss b/app/styles/components/getting-started.scss
deleted file mode 100644
index 61566e2e1..000000000
--- a/app/styles/components/getting-started.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.getting-started__wrapper,
-.getting-started,
-.flex-spacer {
-  background: var(--brand-color--med);
-}
-
-.getting-started__wrapper {
-  flex: 0 0 auto;
-}
-
-.flex-spacer {
-  flex: 1 1 auto;
-}
-
-.getting-started {
-  overflow: auto;
-
-  &__footer {
-    flex: 0 0 auto;
-
-    ul {
-      margin-bottom: 10px;
-    }
-
-    ul li {
-      display: inline;
-    }
-
-    ul li::after {
-      content: ' · ';
-    }
-
-    ul li:last-child::after {
-      content: '';
-    }
-
-    p {
-      color: hsla(var(--primary-text-color_hsl), 0.8);
-      font-size: 13px;
-      margin-bottom: 20px;
-
-      a {
-        color: hsla(var(--primary-text-color_hsl), 0.4);
-        text-decoration: underline;
-      }
-    }
-
-    a {
-      text-decoration: none;
-      color: hsla(var(--primary-text-color_hsl), 0.4);
-
-      &:hover,
-      &:focus,
-      &:active {
-        text-decoration: underline;
-      }
-    }
-  }
-
-  &__trends {
-    background: var(--brand-color--med);
-    flex: 0 1 auto;
-
-    @media screen and (max-height: 810px) {
-      .trends__item:nth-child(3) {
-        display: none;
-      }
-    }
-
-    @media screen and (max-height: 720px) {
-      .trends__item:nth-child(2) {
-        display: none;
-      }
-    }
-
-    @media screen and (max-height: 670px) {
-      display: none;
-    }
-  }
-}
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index d6a32f8c2..ffa8e8854 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -152,13 +152,6 @@
   top: 0;
 }
 
-.media-gallery__item-thumbnail-label {
-  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  position: absolute;
-}
-
 .media-gallery__gifv__label,
 .media-gallery__filename__label,
 .media-gallery__file-extension__label {
diff --git a/app/styles/components/media-spoiler.scss b/app/styles/components/media-spoiler.scss
deleted file mode 100644
index 94401d5d8..000000000
--- a/app/styles/components/media-spoiler.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.media-spoiler {
-  background: var(--background-color);
-  color: var(--primary-text-color--faint);
-  border: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
-  border-radius: 4px;
-  appearance: none;
-
-  &:hover,
-  &:active,
-  &:focus {
-    padding: 0;
-    color: var(--primary-text-color);
-  }
-}
-
-.media-spoiler__warning {
-  display: block;
-  font-size: 14px;
-}
-
-.media-spoiler__trigger {
-  display: block;
-  font-size: 11px;
-  font-weight: 700;
-}
diff --git a/app/styles/components/mfa_form.scss b/app/styles/components/mfa_form.scss
deleted file mode 100644
index ffd221c83..000000000
--- a/app/styles/components/mfa_form.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.security-settings-panel {
-  .security-settings-panel__setup-otp {
-    margin-bottom: 5px;
-  }
-
-  .backup_codes {
-    display: inline-block;
-    background-color: var(--brand-color--faint);
-    padding: 10px;
-    border-radius: var(--border-radius-lg);
-
-    .backup_code:not(:last-child) {
-      margin-bottom: 5px;
-    }
-  }
-}
-//   margin: 20px;
-
-//   h1.security-settings-panel__setup-otp {
-//     font-size: 20px;
-//     line-height: 1.25;
-//     color: var(--primary-text-color);
-//     font-weight: 600;
-//   }
-
-//   h2.security-settings-panel__setup-otp {
-//     display: block;
-//     font-size: 16px;
-//     line-height: 1.5;
-//     color: var(--primary-text-color--faint);
-//     font-weight: 400;
-//   }
-
-//   .security-warning {
-//     color: var(--primary-text-color);
-//     padding: 15px 20px;
-//     font-size: 14px;
-//     background-color: var(--warning-color--faint);
-//     margin: 20px auto;
-//     border-radius: 8px;
-//   }
-
-//   .security-settings-panel__setup-otp__buttons {
-//     margin: 20px;
-//     display: flex;
-//     justify-content: space-between;
-
-//     .button {
-//       min-width: 182px;
-//     }
-//   }
-
-//   div.confirm-key {
-//     display: block;
-//     font-size: 16px;
-//     line-height: 1.5;
-//     color: var(--primary-text-color--faint);
-//     font-weight: 400;
-//     margin: 0 0 20px 20px;
-//   }
-// }
-
-// form.otp-auth {
-//   .error-box {
-//     width: 100%;
-//     text-align: center;
-//     color: $error-red;
-//   }
-// }
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index 50e1a506f..47f0d9b30 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -6,8 +6,7 @@
   overflow-y: hidden;
 }
 
-.video-modal,
-.audio-modal {
+.video-modal {
   max-width: 100vw;
   max-height: 100vh;
   position: relative;
@@ -178,9 +177,7 @@
 }
 
 .onboarding-modal,
-.error-modal,
-.embed-modal,
-.login-modal {
+.error-modal {
   background: var(--background-color);
   color: var(--primary-text-color);
   border-radius: 8px;
@@ -189,10 +186,6 @@
   flex-direction: column;
 }
 
-.embed-modal {
-  max-width: 420px;
-}
-
 .error-modal__body {
   height: 80vh;
   width: 80vw;
@@ -225,11 +218,11 @@
   text-align: center;
 }
 
-.onboarding-modal__paginator,
 .error-modal__footer {
   flex: 0 0 auto;
   background: var(--background-color);
   display: flex;
+  justify-content: center;
   padding: 25px;
 
   & > div {
@@ -269,47 +262,7 @@
   }
 }
 
-.error-modal__footer {
-  justify-content: center;
-}
-
-.display-case {
-  text-align: center;
-  font-size: 15px;
-  margin-bottom: 15px;
-
-  &__label {
-    font-weight: 500;
-    color: var(--primary-text-color);
-    margin-bottom: 5px;
-    text-transform: uppercase;
-    font-size: 12px;
-  }
-
-  &__case {
-    background: var(--brand-color--med);
-    color: var(--primary-text-color--faint);
-    font-weight: 500;
-    padding: 10px;
-    border-radius: 4px;
-  }
-}
-
-.onboard-sliders {
-  display: inline-block;
-  max-width: 30px;
-  max-height: auto;
-  margin-left: 10px;
-}
-
-.boost-modal,
-.confirmation-modal,
-.report-modal,
-.actions-modal,
-.mute-modal,
-.reactions-modal,
-.reblogs-modal,
-.mentions-modal {
+.actions-modal {
   position: relative;
   flex-direction: column;
   overflow: hidden;
@@ -326,200 +279,11 @@
     padding-right: 25px;
   }
 
-  .status__avatar {
-    height: 28px;
-    left: 10px;
-    position: absolute;
-    top: 10px;
-    width: 48px;
-  }
-
-  .status__content__spoiler-link {
-    color: var(--primary-text-color);
-  }
-}
-
-.actions-modal {
   .dropdown-menu__separator {
     @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
   }
 }
 
-.reactions-modal,
-.reblogs-modal,
-.mentions-modal {
-  height: 80vh;
-  max-height: 650px;
-
-  .slist {
-    overflow: auto;
-  }
-}
-
-.boost-modal__container {
-  overflow-x: scroll;
-  padding: 10px;
-
-  .status {
-    user-select: text;
-    border-bottom: 0;
-  }
-}
-
-.boost-modal__action-bar,
-.confirmation-modal__action-bar,
-.mute-modal__action-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: var(--background-color);
-  padding: 10px;
-
-  & > div {
-    flex: 1 1 auto;
-    text-align: right;
-    color: var(--highlight-text-color);
-    padding-right: 10px;
-  }
-
-  .button {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .submit__favicon {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      img {
-        width: 100%;
-        max-height: 100%;
-      }
-    }
-  }
-}
-
-.boost-modal__status-header {
-  font-size: 15px;
-}
-
-.boost-modal__status-time {
-  float: right;
-  font-size: 14px;
-}
-
-.mute-modal {
-  line-height: 24px;
-}
-
-.mute-modal .react-toggle {
-  vertical-align: middle;
-}
-
-.report-modal {
-  width: 90vw;
-  max-width: 700px;
-}
-
-.report-modal__container {
-  display: flex;
-  border-top: 1px solid var(--background-color);
-
-  @media screen and (max-width: 480px) {
-    flex-wrap: wrap;
-    overflow-y: auto;
-  }
-}
-
-.report-modal__statuses,
-.report-modal__comment {
-  box-sizing: border-box;
-  width: 50%;
-
-  @media screen and (max-width: 480px) {
-    width: 100%;
-  }
-}
-
-.report-modal__statuses {
-  flex: 1 1 auto;
-  min-height: 20vh;
-  max-height: 80vh;
-  overflow-y: auto;
-  overflow-x: hidden;
-
-  .status__content a {
-    color: var(--highlight-text-color);
-  }
-
-  .status__content,
-  .status__content p {
-    color: var(--primary-text-color--faint);
-  }
-
-  @media screen and (max-width: 480px) {
-    max-height: 10vh;
-  }
-}
-
-.report-modal__comment {
-  padding: 20px;
-  border-right: 1px solid var(--background-color);
-  max-width: 320px;
-
-  p {
-    font-size: 14px;
-    line-height: 20px;
-    margin-bottom: 20px;
-  }
-
-  .setting-text {
-    display: block;
-    box-sizing: border-box;
-    width: 100%;
-    margin: 0;
-    color: var(--primary-text-color);
-    background: var(--background-color);
-    padding: 10px;
-    font-family: inherit;
-    font-size: 14px;
-    resize: vertical;
-    outline: 0;
-    border: 1px solid var(--background-color);
-    border-radius: 4px;
-    margin-bottom: 20px;
-
-    &:focus {
-      border: 1px solid var(--background-color);
-    }
-  }
-
-  .setting-toggle {
-    margin-top: 20px;
-    margin-bottom: 24px;
-
-    &__label {
-      color: var(--primary-text-color);
-      font-size: 14px;
-    }
-  }
-
-  @media screen and (max-width: 480px) {
-    padding: 10px;
-    max-width: 100%;
-    order: 2;
-
-    .setting-toggle {
-      margin-bottom: 4px;
-    }
-  }
-}
-
 .actions-modal {
   @apply w-full max-h-full max-w-lg mt-auto mb-2 bg-white dark:bg-slate-800;
 
@@ -565,67 +329,6 @@
       }
     }
   }
-
-  &__close-button {
-    width: calc(100% - 16px);
-    margin: 8px;
-    background: var(--accent-color);
-    font-size: 15px;
-    font-weight: 600;
-
-    &:active,
-    &:focus,
-    &:hover {
-      background: var(--accent-color--bright);
-    }
-  }
-}
-
-.confirmation-modal__action-bar,
-.mute-modal__action-bar {
-  .confirmation-modal__secondary-button,
-  .confirmation-modal__cancel-button,
-  .mute-modal__cancel-button {
-    background-color: transparent;
-    color: var(--highlight-text-color);
-    font-size: 14px;
-    font-weight: 500;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: var(--primary-text-color--faint);
-    }
-  }
-
-  .confirmation-modal__secondary-button {
-    flex-shrink: 1;
-  }
-}
-
-.confirmation-modal__container,
-.mute-modal__container,
-.report-modal__target {
-  padding: 30px;
-  font-size: 16px;
-  text-align: center;
-
-  strong {
-    font-weight: 500;
-
-    @each $lang in $cjk-langs {
-      &:lang(#{$lang}) {
-        font-weight: 700;
-      }
-    }
-  }
-
-  .account {
-    text-align: left;
-    background-color: var(--background-color);
-    border-radius: 4px;
-    margin-bottom: 16px;
-  }
 }
 
 .confirmation-modal__checkbox {
@@ -636,178 +339,39 @@
   }
 }
 
-.report-modal__target {
-  padding: 20px;
+.compose-modal__content {
+  display: flex;
+  flex-direction: row;
+  flex: 1;
+  overflow-y: hidden;
 
-  .media-modal__close {
-    top: 19px;
-    right: 15px;
-    height: 20px;
-    width: 20px;
-
-    .svg-icon {
-      color: var(--primary-text-color);
-      height: 20px;
-      width: 20px;
-    }
-  }
-}
-
-.compose-modal,
-.reply-mentions-modal {
-  overflow: hidden;
-  background-color: var(--background-color);
-  border-radius: 6px;
-  flex-direction: column;
-  width: 600px;
-  margin: 10px 0;
-
-  &__header {
-    display: flex;
-    position: relative;
-    padding: 10px 0;
-    padding-left: env(safe-area-inset-left);
-    padding-right: env(safe-area-inset-right);
-    border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
-    align-items: center;
-    justify-content: center;
-
-    &__title {
-      display: block;
-      width: 80%;
-      margin: 0 auto;
-      font-size: 18px;
-      font-weight: bold;
-      line-height: 24px;
-      color: var(--primary-text-color);
-      text-align: center;
-    }
-  }
-
-  @media screen and (max-width: 895px) {
-    margin: 0;
-    border-radius: 0;
-    height: 100vh;
-    width: 100vw;
-  }
-}
-
-.compose-modal {
-  &__close {
-    position: absolute;
-    right: 10px;
-    right: max(10px, env(safe-area-inset-right));
-    color: var(--primary-text-color--faint);
-
-    .svg-icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &__content {
-    display: flex;
-    flex-direction: row;
-    flex: 1;
-    overflow-y: hidden;
-
-    &--scroll {
-      display: block;
-      overflow-y: auto;
-    }
-
-    .timeline-compose-block {
-      background: transparent !important;
-      width: 100%;
-      padding: 0;
-      margin-bottom: 0;
-
-      .compose-form {
-        max-height: 100%;
-        max-width: 100%;
-        display: flex;
-        flex-direction: column;
-        padding: 0 !important;
-
-        .compose-form__autosuggest-wrapper .autosuggest-textarea__textarea {
-          // max-height: 160px !important;
-        }
-
-        .compose-form__autosuggest-wrapper::before {
-          content: none !important;
-        }
-      }
-    }
-
-    .compose-form .compose-form__buttons-wrapper {
-      padding: 10px 0;
-    }
-  }
-}
-
-.reply-mentions-modal {
-  &__back {
-    position: absolute;
-    left: 10px;
-    left: max(10px, env(safe-area-inset-right));
-    color: var(--primary-text-color--faint);
-
-    .svg-icon {
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &__accounts {
+  &--scroll {
     display: block;
-    flex-direction: row;
-    flex: 1;
     overflow-y: auto;
-    min-height: 300px;
+  }
+
+  .timeline-compose-block {
+    background: transparent !important;
+    width: 100%;
+    padding: 0;
+    margin-bottom: 0;
+
+    .compose-form {
+      max-height: 100%;
+      max-width: 100%;
+      display: flex;
+      flex-direction: column;
+      padding: 0 !important;
+    }
   }
 }
 
-.unauthorized-modal {
-  width: 440px !important;
-
-  &__content {
-    display: flex;
-    width: 100%;
-    height: 150px;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-  }
-
-  .unauthorized-modal-content {
-    &__text {
-      display: block;
-      margin-bottom: 18px;
-      color: var(--primary-text-color);
-      font-size: 14px;
-    }
-
-    &__button {
-      width: 200px;
-    }
-  }
-
-  &__footer {
-    border-top: 1px solid #666;
-    padding: 10px;
-    font-size: 14px;
-    text-align: center;
-    color: var(--primary-text-color--faint);
-
-    a {
-      color: var(--brand-color) !important;
-    }
-  }
-
-  @media screen and (max-width: 895px) {
-    height: 270px !important;
-    width: 330px !important;
-  }
+.reply-mentions-modal__accounts {
+  display: block;
+  flex-direction: row;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 300px;
 }
 
 .remote-interaction-modal {
@@ -864,75 +428,6 @@
   position: relative;
 }
 
-.embed-modal {
-  max-width: 80vw;
-  max-height: 80vh;
-
-  h4 {
-    padding: 30px;
-    font-weight: 500;
-    font-size: 16px;
-    text-align: center;
-  }
-
-  .embed-modal__container {
-    padding: 10px;
-
-    .hint {
-      margin-bottom: 15px;
-    }
-
-    .embed-modal__html {
-      outline: 0;
-      box-sizing: border-box;
-      display: block;
-      width: 100%;
-      border: 0;
-      border-radius: 5px;
-      padding: 10px;
-      font-family: var(--font-monospace), monospace;
-      background: var(--brand-color--med);
-      color: var(--primary-text-color);
-      font-size: 14px;
-      margin: 0;
-      margin-bottom: 15px;
-
-      &::-moz-focus-inner {
-        border: 0;
-      }
-
-      &::-moz-focus-inner,
-      &:focus,
-      &:active {
-        outline: 0 !important;
-      }
-
-      &:focus {
-        background: var(--brand-color--faint);
-      }
-
-      @media screen and (max-width: 600px) {
-        font-size: 16px;
-      }
-    }
-
-    .embed-modal__iframe {
-      width: 100%;
-      max-width: 100%;
-      overflow: hidden;
-      border: 0;
-
-      iframe {
-        width: 100%;
-      }
-    }
-  }
-}
-
-.modal-container--preloader {
-  background: var(--brand-color--med);
-}
-
 .column-inline-form {
   padding: 7px 15px;
   padding-right: 5px;
@@ -959,40 +454,3 @@
     margin: 0 5px;
   }
 }
-
-.confirmation-modal p {
-  margin-bottom: 20px;
-  text-align: left;
-
-  strong {
-    font-weight: bold;
-  }
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.confirmation-modal,
-.mute-modal {
-  &__header {
-    display: flex;
-    align-items: center;
-    column-gap: 6px;
-    padding: 20px;
-    padding-bottom: 0;
-    font-size: 22px;
-
-    .svg-icon {
-      height: 24px;
-      width: 24px;
-      color: var(--primary-text-color);
-      opacity: 0.6;
-    }
-  }
-
-  &__container {
-    padding: 20px;
-    text-align: left;
-  }
-}
diff --git a/app/styles/components/profile-info-panel.scss b/app/styles/components/profile-info-panel.scss
index 8fb977700..06f338804 100644
--- a/app/styles/components/profile-info-panel.scss
+++ b/app/styles/components/profile-info-panel.scss
@@ -1,198 +1,4 @@
-.profile-info-panel {
+.profile-info-panel-content__deactivated {
+  color: var(--primary-text-color--faint);
   display: block;
-  position: relative;
-
-  &__content {
-    display: flex;
-    flex-direction: column;
-    flex: 1 1;
-
-    @media (min-width: 896px) {
-      padding-top: 60px;
-    }
-  }
-
-  .profile-info-panel-content {
-    display: flex;
-
-    &__badges {
-      display: flex;
-      margin: 5px 0;
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-
-    &__join-date {
-      display: flex;
-      font-size: 14px;
-      color: var(--primary-text-color--faint);
-      align-items: center;
-      line-height: normal;
-      margin-top: 15px;
-
-      .svg-icon {
-        width: 22px;
-        height: 22px;
-        margin-right: 5px;
-        transform: translateY(-1px);
-      }
-    }
-
-    &__stats {
-      margin: 15px 0;
-
-      .profile-stat {
-        font-size: 16px;
-      }
-    }
-
-    &__name {
-      display: block;
-      margin-bottom: 15px;
-
-      .emojione {
-        width: 22px;
-        height: 22px;
-      }
-
-      .svg-icon {
-        width: 20px;
-        height: 20px;
-        margin-left: 3px;
-      }
-
-      h1 {
-        span:first-of-type {
-          font-size: 20px !important;
-          line-height: 1.25;
-          color: var(--primary-text-color);
-          font-weight: 600 !important;
-          max-width: 260px;
-        }
-
-        small {
-          display: flex;
-          font-size: 15px;
-          line-height: 1.5;
-          color: var(--primary-text-color--faint);
-          font-weight: 600;
-          overflow: hidden;
-          text-overflow: ellipsis;
-        }
-      }
-    }
-
-    &__bio {
-      display: block;
-      flex: 1 1;
-      color: var(--primary-text-color);
-      margin-bottom: 15px;
-      font-size: 15px;
-      line-height: 1.25;
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      a {
-        color: var(--highlight-text-color);
-      }
-    }
-
-    &__fields {
-      display: flex;
-      flex-direction: column;
-      border-top: 1px solid var(--brand-color--med);
-      padding: 10px 0;
-      margin: 5px 0;
-
-      a {
-        color: var(--highlight-text-color);
-      }
-
-      dl:first-child .verified {
-        border-radius: 0 4px 0 0;
-      }
-
-      .verified a {
-        color: $valid-value-color;
-      }
-
-      &__item {
-        display: block;
-        padding: 2px 0;
-        margin: 2px 0;
-        flex: 1 1;
-
-        * {
-          line-height: 24px;
-        }
-
-        dt {
-          min-width: 26px;
-          font-weight: 900;
-          font-size: 14px;
-        }
-
-        dd {
-          padding-left: 8px;
-          font-size: 15px;
-        }
-      }
-    }
-
-    &__deactivated {
-      display: none;
-    }
-  }
-
-  &__meta {
-    display: flex;
-    flex-wrap: wrap;
-    margin-top: -10px;
-
-    > div {
-      display: flex;
-      font-size: 14px;
-      color: var(--primary-text-color--faint);
-      align-items: center;
-      line-height: normal;
-      margin-top: 10px;
-      margin-right: 20px;
-
-      .svg-icon {
-        width: 20px;
-        height: 20px;
-        margin-right: 8px;
-
-        svg {
-          stroke: currentColor;
-        }
-      }
-    }
-  }
-}
-
-.profile-info-panel.deactivated {
-  .profile-info-panel-content__name h1 small,
-  .profile-info-panel-content__badges__join-date,
-  .profile-info-panel-content__bio,
-  .profile-info-panel-content__fields {
-    display: none;
-  }
-
-  .profile-info-panel__name-content {
-    text-transform: uppercase;
-  }
-
-  .profile-info-panel-content__deactivated {
-    color: var(--primary-text-color--faint);
-    display: block;
-  }
-
-  .profile-info-panel__name-content::before {
-    content: '[';
-  }
-
-  .profile-info-panel__name-content::after {
-    content: ']';
-  }
 }
diff --git a/app/styles/components/profile-media-panel.scss b/app/styles/components/profile-media-panel.scss
index ca13ec4ba..e9169403c 100644
--- a/app/styles/components/profile-media-panel.scss
+++ b/app/styles/components/profile-media-panel.scss
@@ -1,46 +1,4 @@
 .media-panel {
-  @include standard-panel-shadow;
-  display: flex;
-  width: 100%;
-  border-radius: 10px;
-  flex-direction: column;
-  height: auto;
-  box-sizing: border-box;
-  background: var(--foreground-color);
-
-  &:first-child {
-    margin-top: 0;
-  }
-
-  &:not(:last-of-type) {
-    margin-bottom: 10px;
-  }
-
-  .media-panel-header {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    padding: 15px 15px 0;
-
-    &__icon {
-      margin-right: 10px;
-      font-size: 20px;
-
-      &.svg-icon {
-        width: 20px;
-        height: 20px;
-      }
-    }
-
-    &__label {
-      flex: 1 1;
-      color: var(--primary-text-color);
-      font-size: 16px;
-      font-weight: bold;
-      line-height: 19px;
-    }
-  }
-
   &__content {
     width: 100%;
     padding: 8px 0;
@@ -55,8 +13,4 @@
     font-size: 14px;
     color: var(--primary-text-color--faint);
   }
-
-  .loading-indicator {
-    margin: 0 auto;
-  }
 }
diff --git a/app/styles/components/profile-stats.scss b/app/styles/components/profile-stats.scss
deleted file mode 100644
index cafd9f8e9..000000000
--- a/app/styles/components/profile-stats.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.profile-stats {
-  display: flex;
-  margin-top: 12px;
-}
-
-.profile-stat {
-  display: flex;
-  font-size: 14px;
-  text-decoration: none;
-
-  &:not(:first-of-type) {
-    margin-left: 18px;
-  }
-
-  &__value {
-    display: flex;
-    margin-right: 3px;
-    font-weight: 700;
-    color: var(--primary-text-color);
-  }
-
-  &__label {
-    display: flex;
-    color: var(--primary-text-color--faint);
-  }
-}
diff --git a/app/styles/components/profile_hover_card.scss b/app/styles/components/profile_hover_card.scss
index 76bbb2b97..cc2dbbc9b 100644
--- a/app/styles/components/profile_hover_card.scss
+++ b/app/styles/components/profile_hover_card.scss
@@ -2,111 +2,3 @@
   position: relative;
   font-weight: 600;
 }
-
-.display-name .profile-hover-card {
-  white-space: normal;
-}
-
-.profile-hover-card {
-  position: absolute;
-  pointer-events: none;
-  opacity: 0;
-  transition-property: opacity;
-  transition-duration: 0.2s;
-  width: 320px;
-  z-index: 200;
-  top: 0;
-  left: 0;
-
-  &--visible {
-    opacity: 1;
-    pointer-events: all;
-  }
-
-  .profile-hover-card__container {
-    @include standard-panel;
-    position: relative;
-    overflow: hidden;
-  }
-
-  .profile-hover-card__action-button {
-    z-index: 999;
-    position: absolute;
-    right: 20px;
-    top: 40px;
-  }
-
-  .user-panel {
-    box-shadow: none;
-    width: auto;
-
-    .user-panel-stats-item a strong {
-      text-decoration: none;
-    }
-
-    &__header {
-      height: 96px;
-    }
-
-    .user-panel-stats-item {
-      margin-right: 10px;
-
-      &__label,
-      &__value {
-        display: inline;
-        font-size: 15px;
-      }
-
-      &__value {
-        margin-right: 5px;
-      }
-    }
-  }
-
-  .relationship-tag {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    z-index: 1;
-  }
-
-  .profile-hover-card__badges {
-    display: flex;
-    position: absolute;
-    top: 110px;
-    left: 120px;
-
-    .badge {
-      padding: 2px 4px;
-      margin-right: 5px;
-      border-radius: 3px;
-      font-size: 11px;
-      opacity: 1;
-    }
-  }
-
-  .profile-hover-card__bio {
-    margin: 0 20px 20px;
-    max-height: 4em;
-
-    a {
-      color: var(--highlight-text-color);
-    }
-
-    &::after {
-      content: '';
-      display: block;
-      position: absolute;
-      width: 100%;
-      height: 20px;
-      bottom: 0;
-      left: 0;
-      background: linear-gradient(0deg, var(--foreground-color) 0%, var(--foreground-color), 80%, transparent);
-    }
-  }
-
-  &[data-popper-reference-hidden="true"] {
-    visibility: hidden;
-    pointer-events: none;
-  }
-}
diff --git a/app/styles/components/progress-circle.scss b/app/styles/components/progress-circle.scss
deleted file mode 100644
index ee96af008..000000000
--- a/app/styles/components/progress-circle.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.progress-circle {
-  display: flex;
-
-  &__circle {
-    stroke: hsla(var(--primary-text-color_hsl), 0.2);
-  }
-
-  &__progress {
-    stroke: var(--brand-color);
-  }
-
-  &--over {
-    .progress-circle__progress {
-      stroke: $warning-red;
-    }
-  }
-}
diff --git a/app/styles/components/promo-panel.scss b/app/styles/components/promo-panel.scss
deleted file mode 100644
index 808436b2e..000000000
--- a/app/styles/components/promo-panel.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-.promo-panel {
-  margin-top: 10px;
-  background-color: transparent !important;
-  overflow: hidden;
-}
-
-.promo-panel-item {
-  @include standard-panel-shadow;
-  display: flex;
-  align-items: center;
-  height: 42px;
-  line-height: 42px;
-  color: var(--primary-text-color);
-  border-bottom: 1px solid var(--brand-color--med);
-  background: var(--foreground-color);
-  text-decoration: none;
-  font-size: 15px;
-  padding: 0 20px;
-
-  &:last-of-type {
-    border-bottom: 0;
-  }
-
-  &:hover,
-  &:focus {
-    color: var(--primary-text-color--faint);
-
-    span {
-      text-decoration: underline;
-    }
-  }
-
-  i.fa {
-    font-size: 22px;
-    margin-right: 10px;
-  }
-
-  .svg-icon {
-    width: 24px;
-    height: 24px;
-
-    svg {
-      stroke-width: 1.3px;
-    }
-  }
-
-  > .svg-icon,
-  > .icon-with-counter {
-    margin-right: 12px;
-  }
-}
diff --git a/app/styles/components/register-invite.scss b/app/styles/components/register-invite.scss
deleted file mode 100644
index e82218bf4..000000000
--- a/app/styles/components/register-invite.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.register-invite {
-  margin: 10px 0;
-
-  &__header {
-    padding: 15px;
-  }
-
-  &__title {
-    font-weight: bold;
-    font-size: 25px;
-    line-height: normal;
-    margin-bottom: 5px;
-  }
-
-  &__form {
-    .simple_form {
-      input[type=text],
-      input[type=number],
-      input[type=email],
-      input[type=password],
-      textarea {
-        background-color: var(--foreground-color);
-      }
-    }
-  }
-}
diff --git a/app/styles/components/remote-timeline.scss b/app/styles/components/remote-timeline.scss
index 803c315e8..c59427a3f 100644
--- a/app/styles/components/remote-timeline.scss
+++ b/app/styles/components/remote-timeline.scss
@@ -1,72 +1,4 @@
-.instance-federation-panel {
-  .wtf-panel__content {
-    box-sizing: border-box;
-    padding: 15px;
-  }
-
-  .instance-restrictions {
-    &__message {
-      margin-bottom: 15px;
-
-      i.fa {
-        padding-right: 10px;
-      }
-    }
-  }
-}
-
 .federation-restriction {
   display: flex;
   padding: 15px 0;
-
-  &__icon {
-    width: 16px;
-    display: flex;
-    align-items: flex-start;
-    justify-content: center;
-    padding-right: 10px;
-  }
-}
-
-.pinned-hosts-picker {
-  padding: 10px 0 0 10px;
-  display: inline-flex;
-  flex-wrap: wrap;
-  background: var(--foreground-color);
-  border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
-
-  .pinned-host {
-    margin-right: 10px;
-    margin-bottom: 10px;
-  }
-
-  &:hover {
-    .pinned-host {
-      background: var(--background-color);
-
-      &:hover {
-        background: var(--brand-color--faint);
-      }
-    }
-  }
-}
-
-.pinned-host {
-  background: var(--background-color);
-  border-radius: 999px;
-  transition: 0.2s;
-
-  &.active {
-    background: var(--brand-color--faint);
-  }
-
-  a {
-    display: block;
-    color: var(--primary-text-color);
-    text-decoration: none;
-    padding: 5px 11px;
-    max-width: 115px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
 }
diff --git a/app/styles/components/reply-indicator.scss b/app/styles/components/reply-indicator.scss
deleted file mode 100644
index f200dca31..000000000
--- a/app/styles/components/reply-indicator.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.reply-indicator {
-  border-radius: 4px;
-  margin-bottom: 10px;
-  background: var(--brand-color--faint);
-  padding: 10px;
-  min-height: 23px;
-  overflow-y: auto;
-  flex: 0 2 auto;
-  max-height: 500px;
-  @media screen and (min-width: 320px) and (max-width: 375px) { max-height: 220px; }
-  @media screen and (max-width: 320px) { max-height: 130px; }
-}
-
-.reply-indicator__header {
-  margin-bottom: 5px;
-  overflow: hidden;
-}
-
-.reply-indicator__cancel {
-  float: right;
-
-  .svg-icon {
-    height: 20px;
-    width: 20px;
-  }
-}
-
-.reply-indicator__display-name {
-  color: var(--primary-text-color);
-  display: block;
-  max-width: 100%;
-  line-height: 24px;
-  overflow: hidden;
-  padding-right: 25px;
-  text-decoration: none;
-
-  .display-name__account {
-    color: var(--primary-text-color--faint);
-  }
-}
-
-.reply-indicator__display-avatar {
-  float: left;
-  margin-right: 5px;
-}
-
-.reply-indicator__content {
-  color: var(--primary-text-color);
-  font-size: 14px;
-  user-select: text;
-
-  a {
-    color: var(--highlight-text-color);
-  }
-}
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index 28d15308c..9c2ee3de7 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -55,57 +55,6 @@ input.search__input {
   }
 }
 
-.search-results__header {
-  color: var(--primary-text-color);
-  background: var(--accent-color--med);
-  padding: 15px;
-  font-weight: 500;
-  font-size: 16px;
-  cursor: default;
-
-  .fa {
-    display: inline-block;
-    margin-right: 5px;
-  }
-}
-
-.search-results__section {
-  h5 {
-    background: var(--accent-color--faint);
-    border-bottom: 1px solid var(--brand-color--faint);
-    cursor: default;
-    display: flex;
-    padding: 15px;
-    font-weight: 500;
-    font-size: 16px;
-    color: var(--primary-text-color);
-
-    .fa {
-      display: inline-block;
-      margin-right: 5px;
-    }
-  }
-
-  &:not(.has-more) .account:last-child,
-  &:not(.has-more) > div:last-child .status {
-    border-bottom: 0;
-  }
-}
-
-.search-results__hashtag {
-  display: block;
-  padding: 10px;
-  color: var(--primary-text-color--faint);
-  text-decoration: none;
-
-  &:hover,
-  &:active,
-  &:focus {
-    color: var(--primary-text-color);
-    text-decoration: underline;
-  }
-}
-
 .search-header {
   display: block;
   width: 100%;
@@ -152,19 +101,6 @@ input.search__input {
   }
 }
 
-.search-popout-container {
-  width: 351px;
-  @media screen and (max-width: $nav-breakpoint-2) { width: 100%; }
-}
-
-.search-popout {
-  @include search-popout;
-}
-
-.search__filter-bar:last-child {
-  border-bottom: none;
-}
-
 .column {
   .search {
     padding: 10px 15px;
@@ -183,11 +119,6 @@ input.search__input {
   }
 }
 
-.search-results {
-  padding: 15px;
-}
-
-.aliases_search,
 .list-editor__search {
   .search__icon {
     position: relative;
@@ -197,7 +128,3 @@ input.search__input {
     }
   }
 }
-
-.search .autosuggest-textarea__suggestions {
-  border-radius: 4px;
-}
diff --git a/app/styles/components/setting-toggle.scss b/app/styles/components/setting-toggle.scss
index b940eb013..1acbcfffe 100644
--- a/app/styles/components/setting-toggle.scss
+++ b/app/styles/components/setting-toggle.scss
@@ -1,13 +1,3 @@
-.setting-toggle__text {
-  display: flex;
-  flex-direction: column;
-}
-
 .setting-toggle__label {
   color: var(--gray-800);
 }
-
-.setting-toggle__hint {
-  color: var(--gray-500);
-  font-size: 12px;
-}
diff --git a/app/styles/components/sidebar-menu.scss b/app/styles/components/sidebar-menu.scss
index 523477b6f..e1f13694e 100644
--- a/app/styles/components/sidebar-menu.scss
+++ b/app/styles/components/sidebar-menu.scss
@@ -1,40 +1,6 @@
 .sidebar-menu {
   @apply flex inset-0 fixed flex-col w-80 bg-white dark:bg-slate-800 transition-all ease-linear -translate-x-80 z-1000;
 
-  &__wrapper {
-    opacity: 0;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 10000;
-    background-color: rgba(0, 0, 0, 0.3);
-    transition: opacity 0.2s linear;
-    transition-delay: 0.1s;
-    pointer-events: none;
-  }
-
-  &__content {
-    position: relative;
-    overflow-y: scroll;
-    overflow: auto;
-    height: 100%;
-    width: 100%;
-  }
-
-  &__section {
-    display: flex;
-    flex-direction: column;
-    padding: 4px 0;
-    border-top: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
-
-    &--borderless {
-      margin: 0;
-      border-top: 0;
-    }
-  }
-
   @media (max-width: 400px) {
     width: 90vw;
     transform: translateX(-90vw);
@@ -49,127 +15,6 @@
   .sidebar-menu {
     transform: translateX(0);
   }
-
-  .sidebar-menu__wrapper {
-    opacity: 1;
-    pointer-events: all;
-  }
-}
-
-.sidebar-menu-header {
-  display: flex;
-  height: 46px;
-  padding: 12px 14px;
-  border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.15);
-  box-sizing: border-box;
-  align-items: center;
-
-  &__title {
-    display: block;
-    font-size: 18px;
-    font-weight: 600;
-    color: var(--primary-text-color);
-  }
-
-  &__btn {
-    margin-left: auto;
-  }
-}
-
-.sidebar-menu__close {
-  position: absolute;
-  top: 16px;
-  right: 18px;
-
-  .svg-icon {
-    width: 32px;
-    height: 32px;
-
-    svg {
-      stroke-width: 1px;
-    }
-  }
-}
-
-.sidebar-menu-profile {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  padding: 14px 18px;
-  box-sizing: border-box;
-
-  &__avatar {
-    display: block;
-    width: 56px;
-    height: 56px;
-  }
-
-  &__name {
-    display: flex;
-    margin-top: 10px;
-    color: var(--primary-text-color);
-    text-decoration: none;
-    align-items: center;
-
-    .display-name__account {
-      display: block;
-      margin-top: 2px;
-      color: var(--primary-text-color--faint);
-    }
-  }
-
-  &__caret {
-    margin-left: auto;
-    padding-left: 10px;
-
-    svg {
-      stroke-width: 1px;
-    }
-  }
-}
-
-.sidebar-account {
-  text-decoration: none;
-}
-
-.sidebar-menu-item {
-  display: flex;
-  padding: 16px 0;
-  cursor: pointer;
-  text-decoration: none;
-  color: var(--primary-text-color--faint);
-  font-size: 15px;
-  font-weight: 500;
-  align-items: center;
-
-  &:hover {
-    background-color: hsla(var(--brand-color_hsl), 0.1);
-    color: var(--primary-text-color);
-  }
-
-  > .fa {
-    width: 24px;
-    font-size: 28px;
-    margin-right: 15px;
-    text-align: center;
-  }
-
-  > .svg-icon {
-    width: 28px;
-    height: 28px;
-    margin-right: 15px;
-
-    svg.icon-tabler,
-    svg.feather {
-      stroke-width: 1px;
-    }
-  }
-
-  &:hover {
-    &__title {
-      color: var(--primary-text-color);
-    }
-  }
 }
 
 .sidebar-menu .wtf-panel {
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 5fa2afd8f..2b302de85 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -101,53 +101,6 @@
   @apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
 }
 
-.status__content__spoiler-link {
-  display: inline-block;
-  border-radius: 2px;
-  background: transparent;
-  border: 0;
-  color: var(--primary-text-color);
-  font-weight: 700;
-  font-size: 11px;
-  padding: 0 6px;
-  text-transform: uppercase;
-  line-height: 20px;
-  cursor: pointer;
-  vertical-align: middle;
-}
-
-.status__wrapper--filtered {
-  color: var(--primary-text-color--faint);
-  border: 0;
-  font-size: inherit;
-  text-align: center;
-  line-height: inherit;
-  margin: 0;
-  padding: 15px;
-  box-sizing: border-box;
-  width: 100%;
-  clear: both;
-}
-
-.status__prepend-icon-wrapper {
-  left: -26px;
-  position: absolute;
-
-  svg.feather-repeat {
-    color: var(--highlight-text-color);
-  }
-}
-
-.status__prepend-icon--pinned.svg-icon {
-  width: 18px;
-  height: 18px;
-  margin-top: -1px;
-
-  svg {
-    stroke-width: 1.5px;
-  }
-}
-
 .status-link {
   @apply hover:underline text-primary-600 dark:text-primary-400 hover:text-primary-800 dark:hover:text-primary-500;
 }
@@ -174,14 +127,6 @@
   }
 
   &.light {
-    .status__relative-time {
-      color: var(--primary-text-color--faint);
-    }
-
-    .status__display-name {
-      color: var(--primary-text-color--faint);
-    }
-
     .display-name {
       strong {
         color: var(--primary-text-color);
@@ -198,15 +143,6 @@
       a {
         color: var(--highlight-text-color);
       }
-
-      a.status__content__spoiler-link {
-        color: var(--primary-text-color);
-        background: var(--brand-color);
-
-        &:hover {
-          background: var(--brand-color);
-        }
-      }
     }
   }
 
@@ -235,30 +171,6 @@
   @apply rounded-none shadow-none p-4;
 }
 
-.status__display-name {
-  color: var(--primary-text-color--faint);
-}
-
-.status__info .status__display-name {
-  display: block;
-  max-width: 100%;
-}
-
-.status__info {
-  font-size: 15px;
-  z-index: 4;
-}
-
-.status__profile,
-.detailed-status__profile {
-  display: block;
-  max-width: 100%;
-}
-
-.status__profile {
-  padding-right: 25px;
-}
-
 .status-check-box {
   border-bottom: 1px solid var(--background-color);
   display: flex;
@@ -296,78 +208,7 @@
   padding: 10px;
 }
 
-.status__prepend {
-  margin-left: 68px;
-  color: var(--primary-text-color);
-  padding: 8px 0;
-  padding-bottom: 2px;
-  font-size: 14px;
-  position: relative;
-
-  .status__display-name strong {
-    color: var(--primary-text-color);
-  }
-
-  > span {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-}
-
-.status__action-bar {
-  align-items: center;
-  display: flex;
-  margin-top: 25px;
-  z-index: 4;
-
-  &__counter {
-    display: inline-flex;
-    margin-right: 22px;
-    align-items: center;
-
-    .status__action-bar-button {
-      margin-right: 8px;
-    }
-
-    &__label {
-      display: inline-block;
-      width: 14px;
-      font-size: 12px;
-      font-weight: 500;
-      color: var(--brand-color);
-    }
-  }
-}
-
-.status__action-bar-button {
-  margin-right: 18px;
-}
-
-.status__action-bar-dropdown {
-  height: 23.15px;
-  width: 23.15px;
-}
-
-.status__avatar {
-  height: 48px;
-  left: 10px;
-  position: absolute;
-  top: 10px;
-  width: 48px;
-}
-
-.status__expand {
-  width: 68px;
-  position: absolute;
-  left: 0;
-  top: 0;
-  height: 100%;
-  cursor: pointer;
-}
-
-.status__content,
-.reply-indicator__content {
+.status__content {
   @apply text-gray-900 dark:text-gray-300 break-words text-ellipsis overflow-hidden relative;
 
   &:focus {
@@ -406,21 +247,6 @@
     }
   }
 
-  .status__content__spoiler-link {
-    @apply bg-primary-100 dark:bg-primary-900 hover:bg-primary-300 dark:hover:bg-primary-600 focus:bg-primary-200 dark:focus:bg-primary-600 text-black dark:text-white hover:no-underline;
-    transition: 0.2s;
-
-    &::-moz-focus-inner {
-      border: 0;
-    }
-
-    &::-moz-focus-inner,
-    &:focus,
-    &:active {
-      outline: 0 !important;
-    }
-  }
-
   .status__content__text {
     display: none;
 
@@ -547,52 +373,6 @@ a.status-card {
   @apply w-full rounded-l md:w-auto h-[200px] md:h-auto flex-none md:flex-auto;
 }
 
-.status__favicon {
-  width: 16px;
-  height: 16px;
-  float: right;
-  margin-right: 4px;
-
-  img {
-    width: 100%;
-    max-height: 100%;
-  }
-}
-
-.tombstone {
-  padding: 10px;
-  text-align: center;
-  font-size: 14px;
-  border-bottom: 1px solid var(--brand-color--faint);
-  color: var(--primary-text-color--faint);
-
-  p {
-    padding: 10px;
-    background: var(--background-color);
-    border-radius: 4px;
-  }
-}
-
-.status__action-bar,
-.detailed-status__action-bar {
-  .emoji-picker-expand {
-    display: none;
-  }
-
-  &:focus-within {
-    .emoji-picker-expand {
-      display: inline-flex;
-      width: 0;
-      height: 0;
-      overflow: hidden;
-
-      &:focus-within {
-        width: unset;
-      }
-    }
-  }
-}
-
 .material-status {
   padding-bottom: 10px;
 
diff --git a/app/styles/components/tabs-bar.scss b/app/styles/components/tabs-bar.scss
deleted file mode 100644
index 2827206d5..000000000
--- a/app/styles/components/tabs-bar.scss
+++ /dev/null
@@ -1,356 +0,0 @@
-.tabs-bar {
-  display: flex;
-  box-sizing: border-box;
-  background: var(--brand-color);
-  flex: 0 0 auto;
-  height: 50px;
-  width: 100%;
-  position: sticky;
-  top: 0;
-  z-index: 1100;
-  transition: transform 0.2s ease;
-
-  &--collapsed {
-    @media screen and (max-width: 895px) {
-      margin-top: -50px;
-      transform: translateY(-50px);
-    }
-  }
-
-  &__container {
-    display: flex;
-    box-sizing: border-box;
-    width: 100%;
-    max-width: 1200px;
-    margin: 0 auto;
-    padding-left: 15px;
-    padding-left: max(15px, env(safe-area-inset-left));
-    padding-right: 15px;
-    padding-right: max(15px, env(safe-area-inset-right));
-
-    // NOTE - might need to adjust this based on column sizing
-    @media screen and (max-width: $nav-breakpoint-4) { padding: 0 10px; }
-  }
-
-  &__split {
-    display: flex;
-    width: auto;
-
-    &--left {
-      margin-right: auto;
-    }
-
-    &--right {
-      margin-left: auto;
-      align-items: center;
-    }
-  }
-
-  @media screen and (max-width: 450px) {
-    // Move Profile menu to the left on mobile
-    &__split--right {
-      margin: 0;
-      order: -1;
-      width: 100%;
-    }
-
-    &__profile {
-      margin-left: 0 !important;
-    }
-
-    &__unauthenticated {
-      display: flex;
-      justify-content: space-between;
-      width: 100%;
-
-      .tabs-bar__button {
-        margin: 0;
-      }
-    }
-  }
-
-  &__search-container {
-    display: block;
-    width: 351px;
-    align-self: center;
-
-    @media screen and (max-width: 895px) {
-      display: none;
-    }
-  }
-
-  &__profile {
-    position: relative;
-    overflow: hidden;
-    margin: 0 0 0 10px;
-    height: 34px;
-    width: 34px;
-
-    .account__avatar {
-      width: 34px;
-      height: 34px;
-      background-size: cover;
-    }
-
-    .compose__action-bar {
-      display: block;
-      position: absolute;
-      top: 0;
-      right: 0;
-      left: -5px;
-      bottom: 0;
-
-      i {
-        display: none;
-      }
-
-      @media screen and (max-width: 1190px) {
-        display: none;
-      }
-    }
-  }
-
-  &__sidebar-btn {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    width: 30px;
-    opacity: 0;
-
-    @media (min-width: 1191px) {
-      display: none;
-    }
-  }
-
-  &__page-name {
-    display: block;
-    margin-left: 18px;
-    line-height: 30px;
-    font-weight: 600;
-    font-size: 18px;
-    color: #fff;
-
-    @media (min-width: 896px) {
-      display: none;
-    }
-  }
-
-  &__button-compose {
-    display: block;
-    @media screen and (max-width: $nav-breakpoint-3) { display: none; }
-    height: 34px;
-    margin-left: 20px;
-    border-radius: 6px;
-    background-color: var(--accent-color);
-    font-weight: bold;
-    font-size: 16px;
-    transition: 0.2s;
-
-    > span {
-      text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
-    }
-
-    &:hover {
-      background-color: var(--accent-color--bright);
-    }
-  }
-
-  &__button {
-    margin-left: 12px;
-    height: 34px;
-  }
-
-  .theme-toggle {
-    margin-left: 20px;
-
-    @media screen and (max-width: $nav-breakpoint-3) {
-      display: none;
-    }
-
-    .setting-toggle {
-      .react-toggle-track {
-        background-color: var(--foreground-color);
-      }
-
-      .react-toggle--checked {
-        .react-toggle-track {
-          background-color: var(--accent-color);
-        }
-
-        &:hover:not(.react-toggle--disabled) .react-toggle-track,
-        &.react-toggle--focus .react-toggle-track {
-          background-color: var(--accent-color--bright);
-        }
-      }
-    }
-  }
-}
-
-.tabs-bar__link {
-  display: flex;
-  flex: 1 1 auto;
-  color: #fff;
-  text-decoration: none;
-  position: relative;
-  align-items: center;
-  font-weight: bold;
-  transition: 0.1s;
-  outline: none;
-  text-shadow: 0 0 3px hsla(0, 0%, 0%, 0.15);
-
-  @media screen and (max-width: 895px) {
-    width: 36px;
-    margin: 4px 4px 0 0;
-    justify-content: center;
-    display: none;
-  }
-
-  > span {
-    font-size: 15px;
-    line-height: 50px;
-    margin-left: 4px;
-    display: none;
-  }
-
-  & + & {
-    margin-left: 20px;
-  }
-
-  &--search {
-    @media (min-width: 896px) {
-      display: none;
-    }
-  }
-
-  .svg-icon {
-    width: 22px;
-    height: 22px;
-
-    svg.icon-tabler {
-      stroke-width: 1.5px;
-    }
-  }
-
-  &.optional {
-    display: none;
-    @media screen and (max-width: $nav-breakpoint-2) {
-      display: flex;
-      background-position: -992px 11px;
-    }
-  }
-
-  &::before {
-    content: "";
-    display: block;
-    background: var(--accent-color);
-    position: absolute;
-    transition: 0.2s;
-    left: 0;
-    bottom: auto;
-    opacity: 0;
-    height: 15px;
-    border-radius: 999px;
-    z-index: -1;
-    width: calc(100% + 12px);
-    margin-left: -6px;
-
-    @media screen and (max-width: 895px) {
-      height: 0;
-      border-radius: 3px 3px 0 0;
-      bottom: 0;
-    }
-  }
-
-  &.active::before,
-  &:hover::before,
-  &:focus::before {
-    height: 30px;
-    opacity: 1;
-
-    @media screen and (max-width: 895px) {
-      height: 7px;
-      width: 36px;
-      margin: 0;
-    }
-  }
-
-  &--logo {
-    display: block;
-    margin-right: 30px;
-    border: 0;
-    height: 40px;
-    width: max-content;
-    overflow: hidden;
-    padding: 13px 0 0;
-    box-sizing: border-box;
-    filter: brightness(0%) grayscale(100%) invert(100%);
-
-    & span {
-      display: none !important;
-    }
-
-    img {
-      height: 100%;
-    }
-
-    .svg-icon {
-      width: 26px;
-      height: 26px;
-      margin: 0 auto;
-
-      svg {
-        fill: currentColor;
-        stroke-width: 1px;
-      }
-    }
-
-    &:hover {
-      border: 0 !important;
-    }
-
-    /* Move logo to center on mobile */
-    @media screen and (max-width: 450px) {
-      margin: 0 auto;
-      position: absolute;
-      left: 0;
-      right: 0;
-      text-align: center;
-    }
-  }
-
-  &--no-highlight,
-  &--no-highlight:hover,
-  &--no-highlight.active,
-  &--no-highlight:active,
-  &--no-highlight:focus {
-    background: transparent !important;
-    border-bottom-color: transparent !important;
-  }
-}
-
-.tabs-bar__split--left:hover .tabs-bar__link {
-  &::before {
-    height: 15px;
-    opacity: 0;
-
-    @media screen and (max-width: 895px) {
-      height: 0;
-    }
-  }
-
-  &:hover::before {
-    height: 30px;
-    opacity: 1;
-
-    @media screen and (max-width: 895px) {
-      height: 7px;
-    }
-  }
-}
-
-.tabs-bar__link + .tabs-bar__profile {
-  margin-left: 20px;
-}
diff --git a/app/styles/components/theme-toggle.scss b/app/styles/components/theme-toggle.scss
deleted file mode 100644
index 112c14972..000000000
--- a/app/styles/components/theme-toggle.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-.theme-toggle {
-  .setting-toggle {
-    &__label {
-      margin-bottom: 0;
-      vertical-align: middle;
-    }
-
-    .react-toggle {
-      vertical-align: middle;
-
-      &-track-check,
-      &-track-x {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        width: auto;
-      }
-
-      &-track-check {
-        left: 6px;
-      }
-
-      &-track-x {
-        right: 5px;
-      }
-    }
-  }
-
-  .react-toggle-track {
-    @apply dark:bg-slate-600;
-  }
-
-  .react-toggle-thumb {
-    @apply dark:bg-slate-900 dark:border-slate-800;
-  }
-}
diff --git a/app/styles/components/user-panel.scss b/app/styles/components/user-panel.scss
deleted file mode 100644
index f150d3ad6..000000000
--- a/app/styles/components/user-panel.scss
+++ /dev/null
@@ -1,134 +0,0 @@
-.user-panel {
-  @include standard-panel;
-  display: flex;
-  width: 265px;
-  flex-direction: column;
-  overflow: hidden;
-
-  .user-panel__account__name {
-    display: inline;
-  }
-
-  .verified-icon {
-    opacity: 1;
-  }
-
-  &,
-  .user-panel__account__name,
-  .user-panel__account__username {
-    white-space: nowrap;
-    color: var(--primary-text-color--faint);
-  }
-
-  &__header {
-    display: block;
-    height: 112px;
-    width: 100%;
-    background: var(--brand-color--faint);
-
-    .still-image {
-      height: 100%;
-    }
-
-    img {
-      display: block;
-      height: 100%;
-      width: 100%;
-      margin: 0;
-      object-fit: cover;
-    }
-  }
-
-  &__profile {
-    display: flex;
-    align-items: flex-start;
-    padding: 0 10px;
-    margin-top: -53px;
-
-    .account__avatar {
-      display: block;
-      width: 82px;
-      height: 82px;
-      border: 6px solid var(--foreground-color);
-      background-size: cover;
-    }
-  }
-
-  &__meta {
-    display: block;
-    padding: 6px 20px 17px;
-    // opacity: 0.6;
-  }
-
-  &__account {
-    a {
-      text-decoration: none;
-      color: var(--primary-text-color--faint);
-      display: block;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-
-    &__name {
-      display: block;
-      font-size: 20px;
-      font-weight: bold;
-      line-height: 24px;
-      color: var(--primary-text-color--faint);
-    }
-
-    &:hover & {
-      &__name {
-        text-decoration: underline;
-      }
-    }
-
-    &__username {
-      display: block;
-      font-size: 14px;
-      line-height: 16px;
-      color: var(--primary-text-color--faint);
-      text-decoration: none !important;
-    }
-  }
-
-  &__stats-block {
-    display: flex;
-    justify-content: space-between;
-    padding-top: 12px;
-  }
-
-  .user-panel-stats-item {
-    display: flex;
-    align-items: flex-start;
-    justify-content: left;
-    flex-wrap: wrap;
-    flex-direction: column;
-
-    a {
-      text-decoration: none;
-      color: var(--primary-text-color--faint);
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-
-    &__value {
-      display: block;
-      width: 100%;
-      color: var(--primary-text-color--faint);
-      font-size: 20px;
-      font-weight: 800;
-      line-height: 24px;
-    }
-
-    &__label {
-      display: block;
-      width: 100%;
-      color: var(--primary-text-color--faint);
-      font-size: 12px;
-      line-height: 14px;
-    }
-  }
-}
diff --git a/app/styles/components/wtf-panel.scss b/app/styles/components/wtf-panel.scss
index 113e33e1f..2d536e781 100644
--- a/app/styles/components/wtf-panel.scss
+++ b/app/styles/components/wtf-panel.scss
@@ -52,92 +52,6 @@
     padding: 0 5px;
   }
 
-  &__subtitle {
-    display: block;
-    padding: 0 15px;
-    color: var(--primary-text-color--faint);
-  }
-
-  &__form {
-    display: block;
-    padding: 15px;
-
-    &.button {
-      width: 100%;
-    }
-  }
-
-  .wtf-panel-list-item {
-    display: block;
-    padding-bottom: 10px;
-
-    &:not(:first-of-type) {
-      margin-top: 12px;
-    }
-
-    &:not(:last-of-type) {
-      border-bottom: 1px solid var(--brand-color--med);
-    }
-
-    &__content {
-      display: flex;
-      flex-direction: row;
-      min-height: 46px;
-      margin-left: 58px;
-    }
-
-    &__account-block {
-      display: flex;
-      position: relative;
-      align-items: baseline;
-      padding-right: 10px;
-
-      &__avatar {
-        height: 46px;
-        width: 46px;
-        background-color: #f00;
-        left: -58px;
-        position: absolute;
-      }
-
-      &__name {
-        display: flex;
-        flex-wrap: wrap;
-        flex-direction: column;
-        margin-top: 6px;
-
-        &__name {
-          color: var(--primary-text-color);
-          font-size: 14px;
-          font-weight: bold;
-          line-height: 16px;
-          margin-bottom: 2px;
-          max-height: 32px; //2 lines of text
-          overflow: hidden;
-        }
-
-        &__username {
-          color: var(--highlight-text-color);
-          font-size: 12px;
-          line-height: 14px;
-        }
-      }
-    }
-
-    &__follow-block {
-      margin-left: auto;
-      padding-top: 6px;
-
-      &__button {
-        display: flex;
-      }
-
-      &__icon {
-        color: var(--primary-text-color);
-      }
-    }
-  }
-
   &__expand-btn {
     @apply border-gray-300 dark:border-gray-600;
     display: block;
@@ -156,17 +70,4 @@
     color: var(--primary-text-color);
     text-decoration: none;
   }
-
-  &__menu {
-    margin-left: auto;
-
-    > div {
-      height: 18px;
-    }
-  }
-}
-
-.column .sub-navigation ~ .wtf-panel {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
 }
diff --git a/app/styles/containers.scss b/app/styles/containers.scss
deleted file mode 100644
index 74eebe61e..000000000
--- a/app/styles/containers.scss
+++ /dev/null
@@ -1,102 +0,0 @@
-.logo-container {
-  margin: 100px auto 50px;
-
-  @media screen and (max-width: 500px) {
-    margin: 40px auto 0;
-  }
-
-  h1 {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    img {
-      height: 42px;
-      margin-right: 10px;
-    }
-
-    a {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: var(--primary-text-color);
-      text-decoration: none;
-      outline: 0;
-      padding: 12px 16px;
-      line-height: 32px;
-      font-weight: 500;
-      font-size: 14px;
-    }
-  }
-}
-
-.compose-standalone {
-  .compose-form {
-    width: 400px;
-    margin: 0 auto;
-    padding: 20px 0;
-    margin-top: 40px;
-    box-sizing: border-box;
-
-    @media screen and (max-width: 400px) {
-      width: 100%;
-      margin-top: 0;
-      padding: 20px;
-    }
-  }
-}
-
-.account-header {
-  width: 400px;
-  margin: 0 auto;
-  display: flex;
-  font-size: 13px;
-  line-height: 18px;
-  box-sizing: border-box;
-  padding: 20px 0;
-  padding-bottom: 0;
-  margin-bottom: -30px;
-  margin-top: 40px;
-
-  @media screen and (max-width: 440px) {
-    width: 100%;
-    margin: 0;
-    margin-bottom: 10px;
-    padding: 20px;
-    padding-bottom: 0;
-  }
-
-  .avatar {
-    width: 40px;
-    height: 40px;
-    margin-right: 8px;
-
-    img {
-      width: 100%;
-      height: 100%;
-      display: block;
-      margin: 0;
-      border-radius: 4px;
-    }
-  }
-
-  .name {
-    flex: 1 1 auto;
-    color: var(--primary-text-color--faint);
-    width: calc(100% - 88px);
-
-    .username {
-      display: block;
-      font-weight: 500;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-
-  .logout-link {
-    display: block;
-    font-size: 32px;
-    line-height: 40px;
-    margin-left: 8px;
-  }
-}
diff --git a/app/styles/demetricator.scss b/app/styles/demetricator.scss
index 441e68ea1..8af4e8ce7 100644
--- a/app/styles/demetricator.scss
+++ b/app/styles/demetricator.scss
@@ -1,21 +1,5 @@
 body.demetricator {
-  .user-panel .user-panel-stats-item__value,
-  .account__header__extra__links a > span:first-of-type,
-  .detailed-status__link,
-  .icon-with-badge__badge,
-  .icon-with-counter__counter,
-  .trends__item__count,
-  .sidebar-menu-profile__stats,
-  .profile-stat__value {
+  .icon-with-badge__badge {
     display: none;
   }
-
-  .account__header__bar {
-    min-height: 50px;
-    @media (min-width: 896px) { height: 50px; }
-  }
-
-  .svg-icon--unread svg {
-    transform: rotate(0);
-  }
 }
diff --git a/app/styles/donations.scss b/app/styles/donations.scss
index 6709189cc..121e6fbc3 100644
--- a/app/styles/donations.scss
+++ b/app/styles/donations.scss
@@ -1,30 +1,3 @@
-.btngroup {
-  display: flex;
-  margin: 10px 0 15px;
-
-  &__btn {
-    background-color: #fff;
-    padding: 10px 24px;
-    font-size: 14px;
-    border-radius: 0;
-    border: 1px solid #ccc;
-    margin-left: -1px;
-
-    &:first-of-type {
-      border-radius: 4px 0 0 4px;
-    }
-
-    &:last-of-type {
-      border-radius: 0 4px 4px 0;
-    }
-
-    &--active {
-      background-color: var(--brand-color);
-      color: var(--primary-text-color);
-    }
-  }
-}
-
 .sub {
   border: 1px solid hsla(var(--primary-text-color_hsl), 0.5);
   padding: 20px;
@@ -107,62 +80,7 @@
   }
 }
 
-.dollarfield {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-  margin: 15px 0;
-
-  &__symbol {
-    font-size: 40px;
-    display: block;
-    line-height: normal;
-    margin-right: 6px;
-    transform: translateY(-4px);
-  }
-
-  &__price {
-    font-size: 60px;
-    background: transparent;
-    border: 0;
-    margin: 0;
-    color: var(--primary-text-color);
-    appearance: textfield;
-
-    &::-webkit-inner-spin-button,
-    &::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-
-    &:invalid {
-      border: 0;
-      box-shadow: none;
-    }
-  }
-}
-
-.payform {
-  &__btn {
-    margin: 10px 0;
-  }
-}
-
 body.admin {
-  p.whisper {
-    max-width: 375px;
-    margin: 30px 0;
-    font-style: italic;
-    font-size: 1.4rem;
-    padding-left: 20px;
-  }
-
-  p.btnlabel {
-    margin: 8px 0;
-    font-weight: bold;
-    font-size: 14px;
-  }
-
   .actions {
     margin-top: 40px;
   }
@@ -192,9 +110,4 @@ body.admin {
   &__reached {
     color: var(--brand-color);
   }
-
-  .wtf-panel__content {
-    box-sizing: border-box;
-    padding: 15px;
-  }
 }
diff --git a/app/styles/dyslexic.scss b/app/styles/dyslexic.scss
index 6db2cadc2..dce8b33c1 100644
--- a/app/styles/dyslexic.scss
+++ b/app/styles/dyslexic.scss
@@ -11,8 +11,4 @@ body.dyslexic {
       font-size: 11px;
     }
   }
-
-  .detailed-status__meta {
-    font-size: 12px;
-  }
 }
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index fe03ddf01..df6888ad5 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -291,29 +291,6 @@ code {
     width: auto;
   }
 
-  .check_boxes {
-    .checkbox {
-      label {
-        font-family: inherit;
-        font-size: 14px;
-        color: var(--primary-text-color);
-        display: inline-block;
-        width: auto;
-        position: relative;
-        padding-top: 5px;
-        padding-left: 25px;
-        flex: 1 1 auto;
-      }
-
-      input[type=checkbox] {
-        position: absolute;
-        left: 0;
-        top: 5px;
-        margin: 0;
-      }
-    }
-  }
-
   fieldset[disabled] {
     input[type=text],
     input[type=number],
diff --git a/app/styles/holiday/halloween.scss b/app/styles/holiday/halloween.scss
index ecf043f68..9fcf96ae5 100644
--- a/app/styles/holiday/halloween.scss
+++ b/app/styles/holiday/halloween.scss
@@ -90,34 +90,6 @@
       display: none;
     }
 
-    // Witch emblem
-    .getting-started__footer::before {
-      content: '';
-      display: block;
-      background-image: url('../images/halloween/halloween-emblem.svg');
-      background-size: contain;
-      background-position: left;
-      background-repeat: no-repeat;
-      width: 100%;
-      height: 100px;
-      margin-bottom: 20px;
-    }
-
-    // Color fixes
-    // Elements directly over the BG need static colors that don't change
-    // regardless of the theme-mode
-    .getting-started__footer {
-      color: #fff;
-
-      a {
-        color: hsla(0, 0%, 100%, 0.4);
-      }
-
-      p {
-        color: hsla(0, 0%, 100%, 0.8);
-      }
-    }
-
     .profile-info-panel {
       color: #fff;
 
@@ -158,10 +130,6 @@
       background-color: var(--brand-color);
     }
   }
-
-  .primary-navigation__wrapper .primary-navigation hr {
-    background: rgba(255, 255, 255, 0.5);
-  }
 }
 
 // Animations
diff --git a/app/styles/navigation.scss b/app/styles/navigation.scss
index ee0f7624b..ddf39aba2 100644
--- a/app/styles/navigation.scss
+++ b/app/styles/navigation.scss
@@ -1,90 +1,3 @@
-.primary-navigation__wrapper {
-  .primary-navigation {
-    flex-direction: column;
-
-    &:hover .btn.grouped:hover::before {
-      height: auto;
-      opacity: 0 !important;
-    }
-
-    > button,
-    > .btn.grouped {
-      justify-content: flex-start;
-      font-weight: 700;
-      font-size: 15px;
-      margin: 0;
-      padding: 10px 0;
-      color: var(--gray-400);
-
-      .svg-icon {
-        height: 22px;
-        width: 22px;
-        padding: 10px;
-        margin-right: 15px;
-        background-color: var(--electric-blue-contrast);
-        border-radius: var(--border-radius-lg);
-
-        svg {
-          stroke: var(--electric-blue);
-          fill: var(--electric-blue-contrast);
-        }
-
-        svg.icon-tabler {
-          stroke-width: 1.5px;
-        }
-
-        &--active {
-          svg.icon-tabler-search,
-          svg.icon-tabler-code {
-            stroke-width: 2.5px;
-          }
-        }
-      }
-
-      &.active {
-        color: var(--black-800);
-
-        &::before {
-          height: auto;
-          opacity: 0;
-        }
-
-        .svg-icon {
-          background-color: var(--electric-blue);
-        }
-
-        .svg-icon svg {
-          stroke: #fff;
-          fill: var(--electric-blue);
-        }
-      }
-
-      &::before {
-        left: 0;
-        border-radius: 999px;
-      }
-    }
-
-    &__icon {
-      margin-right: 5px;
-    }
-
-    .icon-with-counter__counter {
-      right: 0;
-    }
-
-    hr {
-      border: 0;
-      height: 1px;
-      width: 100%;
-      background: hsla(var(--primary-text-color_hsl), 0.12);
-      max-width: 230px;
-      text-align: left;
-      margin: 10px 0;
-    }
-  }
-}
-
 .thumb-navigation {
   @apply fixed lg:hidden bottom-0 bg-white dark:bg-slate-800 border-t border-solid border-gray-200 dark:border-gray-700 left-0 right-0 shadow-2xl w-full flex z-50;
   padding-bottom: env(safe-area-inset-bottom); /* iOS PWA */
@@ -122,93 +35,5 @@
     //     stroke-width: 1px;
     //   }
     // }
-
-    .icon-with-counter__counter {
-      right: -7px;
-      top: -5px;
-    }
-  }
-}
-
-.sub-navigation {
-  position: sticky;
-  top: 50px;
-  left: 0;
-  right: 0;
-  width: 100%;
-  height: 40px;
-  display: flex;
-  color: var(--primary-text-color--faint);
-  background: var(--foreground-color);
-  border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
-  border-radius: 0;
-  align-items: center;
-  justify-content: center;
-  z-index: 999;
-
-  &--scrolled {
-    border-radius: 0 !important;
-  }
-
-  &__content {
-    width: 100%;
-    height: 100%;
-    max-width: 1200px;
-    padding: 5px 15px;
-    margin: 0 auto;
-    display: flex;
-    justify-content: space-around;
-    box-sizing: border-box;
-  }
-
-  &__back {
-    margin-right: auto;
-    padding: 0;
-    background: transparent;
-    border: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--primary-text-color);
-    opacity: 0.6;
-    font-size: 16px;
-
-    &:hover,
-    &:focus {
-      color: var(--primary-text-color);
-    }
-
-    .svg-icon {
-      margin-right: 7px;
-      width: 26px;
-      height: 26px;
-    }
-  }
-
-  &__message {
-    position: absolute;
-    padding: 0 10px;
-    align-self: center;
-    justify-self: center;
-    font-weight: bold;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: calc(100vw - 200px);
-  }
-
-  &__cog {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    .svg-icon {
-      width: 20px;
-      height: 20px;
-    }
-  }
-
-  @media (min-width: 580px) {
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
   }
 }
diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss
index b9ae99295..72a69c155 100644
--- a/app/styles/placeholder.scss
+++ b/app/styles/placeholder.scss
@@ -1,6 +1,4 @@
 .placeholder-hashtag,
-.notification--placeholder,
-.status-card--placeholder,
 .media-gallery--placeholder {
   position: relative;
 
@@ -47,64 +45,6 @@
 
 .slist {
   position: relative;
-
-  &__placeholder {
-    position: absolute;
-    width: 100%;
-    max-height: 300px;
-    overflow-y: hidden;
-    background: var(--foreground-color);
-    box-shadow: 0 10px 6px 0 rgb(0 0 0 / 10%);
-
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      // On mobile, extend the gradient up to the ThumbNavigation height
-      background-image: linear-gradient(
-        0deg,
-        var(--background-color) 0%,
-        var(--background-color) var(--thumb-navigation-height),
-        hsla(var(--foreground-color_hsl), 0) 50%,
-        hsla(var(--foreground-color_hsl), 0) 100%
-      );
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-
-      @media (min-width: 895px) {
-        // On desktop, fade into the bottom of the page
-        background-image: linear-gradient(
-          0deg,
-          var(--background-color) 0%,
-          hsla(var(--foreground-color_hsl), 0) 50%,
-          hsla(var(--foreground-color_hsl), 0) 100%
-        );
-      }
-    }
-  }
-}
-
-.column--transparent .slist__placeholder {
-  background: transparent;
-  box-shadow: none;
-}
-
-.status-card--placeholder {
-  pointer-events: none;
-
-  .status-card__title,
-  .status-card__description,
-  .status-card__host {
-    letter-spacing: -1px;
-    color: var(--brand-color) !important;
-    word-break: break-all;
-    opacity: 0.1;
-  }
 }
 
 .media-gallery.media-gallery--placeholder {
diff --git a/app/styles/polls.scss b/app/styles/polls.scss
index 13adcd8ff..231dbf195 100644
--- a/app/styles/polls.scss
+++ b/app/styles/polls.scss
@@ -7,17 +7,6 @@
     position: relative;
   }
 
-  &__chart {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    display: inline-block;
-    border-radius: 4px;
-    background: hsla(var(--primary-text-color_hsl), 0.1);
-    &.leading { background: hsla(var(--primary-text-color_hsl), 0.15); }
-  }
-
   &__text {
     position: relative;
     display: flex;
@@ -113,46 +102,6 @@
     }
   }
 
-  &__number {
-    display: inline-block;
-    width: 36px;
-    font-weight: 700;
-    padding: 0 10px;
-    text-align: right;
-  }
-
-  &.voted &__number {
-    width: 52px;
-    padding-left: 8px;
-    flex: 0 0 52px;
-  }
-
-  &__vote__mark {
-    float: left;
-    color: var(--highlight-text-color);
-    line-height: 18px;
-  }
-
-  &__link {
-    display: inline;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    color: var(--primary-text-color);
-    text-decoration: underline;
-    font-size: inherit;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &:active,
-    &:focus {
-      background-color: hsla(var(--primary-text-color_hsl), 0.1);
-    }
-  }
-
   .button {
     height: 36px;
     padding: 0 16px;
diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss
index 31694eac0..852cf3edd 100644
--- a/app/styles/rtl.scss
+++ b/app/styles/rtl.scss
@@ -13,11 +13,6 @@ body.rtl {
     margin-left: 5px;
   }
 
-  .compose-form .compose-form__buttons-wrapper .character-counter__wrapper {
-    margin-right: 0;
-    margin-left: 4px;
-  }
-
   .search__input {
     padding-right: 10px;
     padding-left: 30px;
@@ -49,81 +44,21 @@ body.rtl {
     float: right;
   }
 
-  .column-header__back-button {
-    padding-left: 5px;
-    padding-right: 0;
-  }
-
-  .column-header__setting-arrows {
-    float: left;
-  }
-
   .setting-toggle__label {
     margin-left: 0;
     margin-right: 8px;
   }
 
-  .status__avatar {
-    left: auto;
-    right: 10px;
-  }
-
   .status {
     padding-left: 10px;
     padding-right: 68px;
   }
 
-  .status__info .status__display-name {
-    padding-left: 25px;
-    padding-right: 0;
-  }
-
-  .status__prepend {
-    margin-left: 0;
-    margin-right: 68px;
-  }
-
-  .status__prepend-icon-wrapper {
-    left: auto;
-    right: -26px;
-  }
-
   .account__avatar-overlay-overlay {
     right: auto;
     left: 0;
   }
 
-  .column-back-button--slim-button {
-    right: auto;
-    left: 0;
-  }
-
-  .status__relative-time {
-    float: left;
-  }
-
-  .status__action-bar {
-    &__counter {
-      margin-right: 0;
-      margin-left: 11px;
-
-      .status__action-bar-button {
-        margin-right: 0;
-        margin-left: 4px;
-      }
-    }
-  }
-
-  .status__action-bar-button {
-    float: right;
-    margin-right: 0;
-    margin-left: 18px;
-  }
-
-  .status__action-bar-dropdown {
-    float: right;
-  }
-
   .privacy-dropdown__dropdown {
     margin-left: 0;
     margin-right: 40px;
@@ -144,12 +79,6 @@ body.rtl {
     float: right;
   }
 
-  .detailed-status__favorites,
-  .detailed-status__reblogs {
-    margin-left: 0;
-    margin-right: 6px;
-  }
-
   .fa-ul {
     margin-left: 0;
     margin-left: 2.14285714em;
@@ -160,22 +89,11 @@ body.rtl {
     right: -2.14285714em;
   }
 
-  .simple_form .check_boxes .checkbox label {
-    padding-left: 0;
-    padding-right: 25px;
-  }
-
   .simple_form .input.with_label.boolean label.checkbox {
     padding-left: 25px;
     padding-right: 0;
   }
 
-  .simple_form .check_boxes .checkbox input[type="checkbox"],
-  .simple_form .input.boolean input[type="checkbox"] {
-    left: auto;
-    right: 0;
-  }
-
   .simple_form .input.radio_buttons .radio {
     left: auto;
     right: 0;
@@ -186,11 +104,6 @@ body.rtl {
     padding-left: 0;
   }
 
-  .simple_form .input-with-append .input input {
-    padding-left: 142px;
-    padding-right: 0;
-  }
-
   .simple_form .input.boolean label.checkbox {
     left: auto;
     right: 0;
@@ -202,17 +115,6 @@ body.rtl {
     padding-right: 28px;
   }
 
-  .simple_form .label_input__append {
-    right: auto;
-    left: 3px;
-
-    &::after {
-      right: auto;
-      left: 0;
-      background-image: linear-gradient(to left, hsla(var(--background-color_hsl), 0), var(--background-color));
-    }
-  }
-
   // .simple_form select {
   //   background: var(--background-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color--med))}'/></svg>") no-repeat left 8px center / auto 16px;
   // }
@@ -222,11 +124,6 @@ body.rtl {
     text-align: right;
   }
 
-  .filters .filter-subset {
-    margin-right: 0;
-    margin-left: 45px;
-  }
-
   @media screen and (min-width: 631px) {
     .column {
       padding-left: 5px;
@@ -253,11 +150,6 @@ body.rtl {
         margin-right: 0;
       }
     }
-
-    .public-account-header__tabs {
-      margin-left: 0;
-      margin-right: 20px;
-    }
   }
 
   .card__bar .display-name {
@@ -274,16 +166,6 @@ body.rtl {
     content: "\F053";
   }
 
-  .column-back-button__icon {
-    margin-right: 0;
-    margin-left: 5px;
-  }
-
-  .column-header__setting-arrows .column-header__setting-btn:last-child {
-    padding-left: 0;
-    padding-right: 10px;
-  }
-
   .simple_form .input.radio_buttons .radio > label input {
     left: auto;
     right: 0;
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index 99d1972b6..cbef05a1f 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -166,35 +166,6 @@
     @media (max-width: 405px) {
       padding: 0 !important;
     }
-
-    .spoiler-input__input,
-    .autosuggest-textarea__textarea {
-      // background-color: var(--background-color);
-    }
-
-    .autosuggest-textarea__textarea {
-      // padding: 14px 32px 13px 10px !important;
-    }
-
-    .compose-form__autosuggest-wrapper {
-      &::before {
-        content: "";
-        display: block;
-        position: absolute;
-        height: 0;
-        width: 0;
-        border-top: 11px solid transparent;
-        border-right: 12px solid var(--background-color);
-        border-bottom: 11px solid transparent;
-        border-left: 11px solid transparent;
-        left: -22px;
-        top: 13px;
-
-        @media (max-width: 405px) {
-          display: none;
-        }
-      }
-    }
   }
 
   &__avatar {
@@ -222,12 +193,6 @@
   }
 }
 
-.status__relative-time {
-  color: var(--primary-text-color--faint);
-  float: right;
-  font-size: 14px;
-}
-
 .domain {
   padding: 10px;
   border-bottom: 1px solid var(--brand-color--med);
@@ -264,31 +229,6 @@ article:last-child > .domain {
   .status__display-name strong {
     color: var(--primary-text-color);
   }
-
-  .status__avatar {
-    opacity: 0.5;
-  }
-
-  a.status__content__spoiler-link {
-    background: var(--brand-color--med);
-    color: var(--primary-text-color);
-
-    &:hover {
-      background: var(--brand-color--faint);
-      text-decoration: none;
-    }
-  }
-}
-
-.star-icon.active {
-  color: $gold-star;
-}
-
-.status__relative-time,
-.detailed-status__datetime {
-  &:hover {
-    text-decoration: underline;
-  }
 }
 
 .image-loader {
@@ -391,35 +331,23 @@ article:last-child > .domain {
   }
 }
 
-@media screen and (min-width: 360px) {
-  .getting-started__wrapper,
-  .getting-started__trends {
-    margin-bottom: 10px;
-  }
-}
+.icon-with-badge__badge {
+  @include font-size(14);
+  @include line-height(14);
+  position: absolute;
+  box-sizing: border-box;
+  left: -10px;
+  top: 3px;
+  min-width: 16px;
+  height: 16px;
+  padding: 1px 3px 0;
+  border-radius: 8px;
+  text-align: center;
+  color: #fff;
+  background: var(--accent-color);
 
-.icon-with-badge {
-  position: relative;
-  height: 100%;
-
-  &__badge {
-    @include font-size(14);
-    @include line-height(14);
-    position: absolute;
-    box-sizing: border-box;
-    left: -10px;
-    top: 3px;
-    min-width: 16px;
-    height: 16px;
-    padding: 1px 3px 0;
-    border-radius: 8px;
-    text-align: center;
-    color: #fff;
-    background: var(--accent-color);
-
-    @media screen and (max-width: 895px) {
-      top: 0;
-    }
+  @media screen and (max-width: 895px) {
+    top: 0;
   }
 }
 
@@ -498,8 +426,7 @@ article:last-child > .domain {
   cursor: pointer;
 }
 
-.account--panel__button,
-.detailed-status__button {
+.account--panel__button {
   flex: 1 1 auto;
   text-align: center;
 }
@@ -538,11 +465,6 @@ article:last-child > .domain {
   }
 }
 
-.dropdown--active .emoji-button img {
-  opacity: 1;
-  filter: none;
-}
-
 .attachment-list {
   display: flex;
   font-size: 14px;
@@ -679,27 +601,6 @@ article:last-child > .domain {
   100% { opacity: 1; }
 }
 
-.icon-with-counter {
-  position: relative;
-  display: inline;
-
-  &__counter {
-    @include font-size(14);
-    @include line-height(14);
-    position: absolute;
-    box-sizing: border-box;
-    right: -5px;
-    top: -9px;
-    min-width: 16px;
-    height: 16px;
-    padding: 1px 3px 0;
-    border-radius: 8px;
-    text-align: center;
-    color: #fff;
-    background: var(--accent-color);
-  }
-}
-
 .page__top + .page__columns .columns-area {
   @media screen and (max-width: 580px) {
     padding-top: 10px;

From 07ce1b4873dd34ec25a60fe424814899e2cb9e52 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 31 May 2022 15:03:41 +0000
Subject: [PATCH 086/102] Apply 2 suggestion(s) to 1 file(s)

---
 .../features/compose/components/privacy_dropdown.tsx        | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 1042320f2..660207959 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -39,7 +39,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
   const node = useRef<HTMLDivElement>(null);
   const focusedItem = useRef<HTMLDivElement>(null);
 
-  const [mounted, setMounted] = useState(false);
+  const [mounted, setMounted] = useState<boolean>(false);
 
   const handleDocumentClick = (e: MouseEvent | TouchEvent) => {
     if (node.current && !node.current.contains(e.target as HTMLElement)) {
@@ -49,9 +49,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
 
   const handleKeyDown: React.KeyboardEventHandler = e => {
     const value = e.currentTarget.getAttribute('data-index');
-    const index = items.findIndex(item => {
-      return (item.value === value);
-    });
+    const index = items.findIndex(item => item.value === value);
     let element = null;
 
     switch (e.key) {

From bd13cba65bf3037b40823c61df250914868f1cd4 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Tue, 31 May 2022 15:04:57 +0000
Subject: [PATCH 087/102] Apply 1 suggestion(s) to 1 file(s)

---
 app/soapbox/features/compose/components/reply_indicator.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/app/soapbox/features/compose/components/reply_indicator.tsx b/app/soapbox/features/compose/components/reply_indicator.tsx
index 4a355c66d..d135bfdeb 100644
--- a/app/soapbox/features/compose/components/reply_indicator.tsx
+++ b/app/soapbox/features/compose/components/reply_indicator.tsx
@@ -18,7 +18,6 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
     onCancel();
   };
 
-
   if (!status) {
     return null;
   }

From edcbf1f84914f99eb89f15654fc9ce348c8708e5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 10:20:03 -0500
Subject: [PATCH 088/102] PrivacyDropdownMenu: pass useEffect dependency array

---
 app/soapbox/features/compose/components/privacy_dropdown.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index 660207959..94ebfcc09 100644
--- a/app/soapbox/features/compose/components/privacy_dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy_dropdown.tsx
@@ -108,7 +108,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
       document.removeEventListener('click', handleDocumentClick, false);
       document.removeEventListener('touchend', handleDocumentClick);
     };
-  });
+  }, []);
 
   return (
     <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>

From ba8379c753380c398e96f8d88281d71b34a15d01 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 12:31:08 -0500
Subject: [PATCH 089/102] Break out StatusMedia into a separate component

---
 app/soapbox/components/status-media.tsx | 173 ++++++++++++++++++++++++
 app/soapbox/components/status.tsx       | 125 ++---------------
 2 files changed, 182 insertions(+), 116 deletions(-)
 create mode 100644 app/soapbox/components/status-media.tsx

diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
new file mode 100644
index 000000000..391d2c865
--- /dev/null
+++ b/app/soapbox/components/status-media.tsx
@@ -0,0 +1,173 @@
+import React, { useState } from 'react';
+
+import { openModal } from 'soapbox/actions/modals';
+import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
+import Card from 'soapbox/features/status/components/card';
+import Bundle from 'soapbox/features/ui/components/bundle';
+import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
+import { useAppDispatch } from 'soapbox/hooks';
+
+import type { List as ImmutableList } from 'immutable';
+import type { Status, Attachment } from 'soapbox/types/entities';
+
+interface IStatusMedia {
+  /** Status entity to render media for. */
+  status: Status,
+  /** Whether to display compact media. */
+  muted?: boolean,
+  /** Callback when compact media is clicked. */
+  onClick?: () => void,
+  /** Whether or not the media is concealed behind a NSFW banner. */
+  showMedia?: boolean,
+  /** Callback when visibility is toggled (eg clicked through NSFW). */
+  onToggleVisibility: () => void,
+}
+
+/** Render media attachments for a status. */
+const StatusMedia: React.FC<IStatusMedia> = ({
+  status,
+  muted = false,
+  onClick,
+  showMedia = true,
+  onToggleVisibility,
+}) => {
+  const dispatch = useAppDispatch();
+  const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
+
+  const size = status.media_attachments.size;
+  const firstAttachment = status.media_attachments.first();
+
+  let media = null;
+
+  const setRef = (c: HTMLDivElement): void => {
+    if (c) {
+      setMediaWrapperWidth(c.offsetWidth);
+    }
+  };
+
+  const renderLoadingMediaGallery = (): JSX.Element => {
+    return <div className='media_gallery' style={{ height: '285px' }} />;
+  };
+
+  const renderLoadingVideoPlayer = (): JSX.Element => {
+    return <div className='media-spoiler-video' style={{ height: '285px' }} />;
+  };
+
+  const renderLoadingAudioPlayer = (): JSX.Element => {
+    return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
+  };
+
+  const openMedia = (media: ImmutableList<Attachment>, index: number) => {
+    dispatch(openModal('MEDIA', { media, index }));
+  };
+
+  const openVideo = (media: Attachment, time: number): void => {
+    dispatch(openModal('VIDEO', { media, time }));
+  };
+
+  if (size > 0 && firstAttachment) {
+    if (muted) {
+      media = (
+        <AttachmentThumbs
+          media={status.media_attachments}
+          onClick={onClick}
+          sensitive={status.sensitive}
+        />
+      );
+    } else if (size === 1 && firstAttachment.type === 'video') {
+      const video = firstAttachment;
+
+      if (video.external_video_id && status.card) {
+        const getHeight = (): number => {
+          const width = Number(video.meta.getIn(['original', 'width']));
+          const height = Number(video.meta.getIn(['original', 'height']));
+          return Number(mediaWrapperWidth) / (width / height);
+        };
+
+        const height = getHeight();
+
+        media = (
+          <div className='status-card horizontal compact interactive status-card--video'>
+            <div
+              ref={setRef}
+              className='status-card__image status-card-video'
+              style={height ? { height } : undefined}
+              dangerouslySetInnerHTML={{ __html: status.card.html }}
+            />
+          </div>
+        );
+      } else {
+        media = (
+          <Bundle fetchComponent={Video} loading={renderLoadingVideoPlayer} >
+            {(Component: any) => (
+              <Component
+                preview={video.preview_url}
+                blurhash={video.blurhash}
+                src={video.url}
+                alt={video.description}
+                aspectRatio={video.meta.getIn(['original', 'aspect'])}
+                height={285}
+                inline
+                sensitive={status.sensitive}
+                onOpenVideo={openVideo}
+                visible={showMedia}
+                onToggleVisibility={onToggleVisibility}
+              />
+            )}
+          </Bundle>
+        );
+      }
+    } else if (size === 1 && firstAttachment.type === 'audio') {
+      const attachment = firstAttachment;
+
+      media = (
+        <Bundle fetchComponent={Audio} loading={renderLoadingAudioPlayer} >
+          {(Component: any) => (
+            <Component
+              src={attachment.url}
+              alt={attachment.description}
+              poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static'])}
+              backgroundColor={attachment.meta.getIn(['colors', 'background'])}
+              foregroundColor={attachment.meta.getIn(['colors', 'foreground'])}
+              accentColor={attachment.meta.getIn(['colors', 'accent'])}
+              duration={attachment.meta.getIn(['original', 'duration'], 0)}
+              height={263}
+            />
+          )}
+        </Bundle>
+      );
+    } else {
+      media = (
+        <Bundle fetchComponent={MediaGallery} loading={renderLoadingMediaGallery}>
+          {(Component: any) => (
+            <Component
+              media={status.media_attachments}
+              sensitive={status.sensitive}
+              height={285}
+              onOpenMedia={openMedia}
+              visible={showMedia}
+              onToggleVisibility={onToggleVisibility}
+            />
+          )}
+        </Bundle>
+      );
+    }
+  } else if (status.spoiler_text.length === 0 && !status.quote && status.card) {
+    media = (
+      <Card
+        onOpenMedia={openMedia}
+        card={status.card}
+        compact
+      />
+    );
+  } else if (status.expectsCard) {
+    media = (
+      <PlaceholderCard />
+    );
+  }
+
+  return media;
+};
+
+export default StatusMedia;
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 3cea7c280..5a42fdea5 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -14,6 +14,7 @@ import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
 
 import AttachmentThumbs from './attachment-thumbs';
+import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import StatusActionBar from './status_action_bar';
 import StatusContent from './status_content';
@@ -342,7 +343,6 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
   }
 
   render() {
-    let media = null;
     const poll = null;
     let prepend, rebloggedByText, reblogElement, reblogElementMobile;
 
@@ -450,120 +450,6 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
       status = status.reblog;
     }
 
-    const size = status.media_attachments.size;
-    const firstAttachment = status.media_attachments.first();
-
-    if (size > 0 && firstAttachment) {
-      if (this.props.muted) {
-        media = (
-          <AttachmentThumbs
-            media={status.media_attachments}
-            onClick={this.handleClick}
-            sensitive={status.sensitive}
-          />
-        );
-      } else if (size === 1 && firstAttachment.type === 'video') {
-        const video = firstAttachment;
-
-        if (video.external_video_id && status.card) {
-          const { mediaWrapperWidth } = this.state;
-
-          const getHeight = (): number => {
-            const width = Number(video.meta.getIn(['original', 'width']));
-            const height = Number(video.meta.getIn(['original', 'height']));
-            return Number(mediaWrapperWidth) / (width / height);
-          };
-
-          const height = getHeight();
-
-          media = (
-            <div className='status-card horizontal compact interactive status-card--video'>
-              <div
-                ref={this.setRef}
-                className='status-card__image status-card-video'
-                style={height ? { height } : undefined}
-                dangerouslySetInnerHTML={{ __html: status.card.html }}
-              />
-            </div>
-          );
-        } else {
-          media = (
-            <Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
-              {(Component: any) => (
-                <Component
-                  preview={video.preview_url}
-                  blurhash={video.blurhash}
-                  src={video.url}
-                  alt={video.description}
-                  aspectRatio={video.meta.getIn(['original', 'aspect'])}
-                  width={this.props.cachedMediaWidth}
-                  height={285}
-                  inline
-                  sensitive={status.sensitive}
-                  onOpenVideo={this.handleOpenVideo}
-                  cacheWidth={this.props.cacheMediaWidth}
-                  visible={this.state.showMedia}
-                  onToggleVisibility={this.handleToggleMediaVisibility}
-                />
-              )}
-            </Bundle>
-          );
-        }
-      } else if (size === 1 && firstAttachment.type === 'audio') {
-        const attachment = firstAttachment;
-
-        media = (
-          <Bundle fetchComponent={Audio} loading={this.renderLoadingAudioPlayer} >
-            {(Component: any) => (
-              <Component
-                src={attachment.url}
-                alt={attachment.description}
-                poster={attachment.preview_url !== attachment.url ? attachment.preview_url : status.getIn(['account', 'avatar_static'])}
-                backgroundColor={attachment.meta.getIn(['colors', 'background'])}
-                foregroundColor={attachment.meta.getIn(['colors', 'foreground'])}
-                accentColor={attachment.meta.getIn(['colors', 'accent'])}
-                duration={attachment.meta.getIn(['original', 'duration'], 0)}
-                width={this.props.cachedMediaWidth}
-                height={263}
-                cacheWidth={this.props.cacheMediaWidth}
-              />
-            )}
-          </Bundle>
-        );
-      } else {
-        media = (
-          <Bundle fetchComponent={MediaGallery} loading={this.renderLoadingMediaGallery}>
-            {(Component: any) => (
-              <Component
-                media={status.media_attachments}
-                sensitive={status.sensitive}
-                height={285}
-                onOpenMedia={this.props.onOpenMedia}
-                cacheWidth={this.props.cacheMediaWidth}
-                defaultWidth={this.props.cachedMediaWidth}
-                visible={this.state.showMedia}
-                onToggleVisibility={this.handleToggleMediaVisibility}
-              />
-            )}
-          </Bundle>
-        );
-      }
-    } else if (status.spoiler_text.length === 0 && !status.quote && status.card) {
-      media = (
-        <Card
-          onOpenMedia={this.props.onOpenMedia}
-          card={status.card}
-          compact
-          cacheWidth={this.props.cacheMediaWidth}
-          defaultWidth={this.props.cachedMediaWidth}
-        />
-      );
-    } else if (status.expectsCard) {
-      media = (
-        <PlaceholderCard />
-      );
-    }
-
     let quote;
 
     if (status.quote) {
@@ -653,7 +539,14 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                 collapsable
               />
 
-              {media}
+              <StatusMedia
+                status={status}
+                muted={this.props.muted}
+                onClick={this.handleClick}
+                showMedia={this.state.showMedia}
+                onToggleVisibility={this.handleToggleMediaVisibility}
+              />
+
               {poll}
               {quote}
 

From 62d432a65da6dc6a4327e9cd4f7d3abb465938c7 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 12:32:59 -0500
Subject: [PATCH 090/102] Status: clean up now unused media methods, etc

---
 app/soapbox/components/status.tsx | 27 ---------------------------
 1 file changed, 27 deletions(-)

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 5a42fdea5..4d9b4eb59 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -110,7 +110,6 @@ interface IStatusState {
   showMedia: boolean,
   statusId?: string,
   emojiSelectorFocused: boolean,
-  mediaWrapperWidth?: number,
 }
 
 class Status extends ImmutablePureComponent<IStatus, IStatusState> {
@@ -223,26 +222,6 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     this.props.onToggleHidden(this._properStatus());
   };
 
-  renderLoadingMediaGallery(): JSX.Element {
-    return <div className='media_gallery' style={{ height: '285px' }} />;
-  }
-
-  renderLoadingVideoPlayer(): JSX.Element {
-    return <div className='media-spoiler-video' style={{ height: '285px' }} />;
-  }
-
-  renderLoadingAudioPlayer(): JSX.Element {
-    return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
-  }
-
-  handleOpenVideo = (media: ImmutableMap<string, any>, startTime: number): void => {
-    this.props.onOpenVideo(media, startTime);
-  }
-
-  handleOpenAudio = (media: ImmutableMap<string, any>, startTime: number): void => {
-    this.props.onOpenAudio(media, startTime);
-  }
-
   handleHotkeyOpenMedia = (e?: KeyboardEvent): void => {
     const { onOpenMedia, onOpenVideo } = this.props;
     const status = this._properStatus();
@@ -336,12 +315,6 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     this.node = c;
   }
 
-  setRef = (c: HTMLDivElement): void => {
-    if (c) {
-      this.setState({ mediaWrapperWidth: c.offsetWidth });
-    }
-  }
-
   render() {
     const poll = null;
     let prepend, rebloggedByText, reblogElement, reblogElementMobile;

From d6a7e38e565b2b8146637d68b17221e2ae893cec Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 12:49:24 -0500
Subject: [PATCH 091/102] DetailedStatus: use StatusMedia component

---
 .../status/components/detailed-status.tsx     | 93 ++-----------------
 1 file changed, 8 insertions(+), 85 deletions(-)

diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index 093e0a896..f0b34ea4a 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/app/soapbox/features/status/components/detailed-status.tsx
@@ -5,18 +5,14 @@ import { FormattedMessage, injectIntl, WrappedComponentProps as IntlProps } from
 import { FormattedDate } from 'react-intl';
 
 import Icon from 'soapbox/components/icon';
-import MediaGallery from 'soapbox/components/media_gallery';
+import StatusMedia from 'soapbox/components/status-media';
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
 import StatusContent from 'soapbox/components/status_content';
 import { HStack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
+import scheduleIdleTask from 'soapbox/features/ui/util/schedule_idle_task';
 
-import Audio from '../../audio';
-import scheduleIdleTask from '../../ui/util/schedule_idle_task';
-import Video from '../../video';
-
-import Card from './card';
 import StatusInteractionBar from './status-interaction-bar';
 
 import type { List as ImmutableList } from 'immutable';
@@ -114,90 +110,12 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
     const outerStyle: React.CSSProperties = { boxSizing: 'border-box' };
     const { compact } = this.props;
 
-    let media = null;
     let statusTypeIcon = null;
 
     if (this.props.measureHeight) {
       outerStyle.height = `${this.state.height}px`;
     }
 
-    const size = status.media_attachments.size;
-    const firstAttachment = status.media_attachments.get(0);
-
-    if (size > 0 && firstAttachment) {
-      if (size === 1 && firstAttachment.type === 'video') {
-        const video = firstAttachment;
-        if (video.external_video_id && status.card?.html) {
-          const { mediaWrapperWidth } = this.state;
-
-          const getHeight = (): number => {
-            const width = Number(video.meta.getIn(['original', 'width']));
-            const height = Number(video.meta.getIn(['original', 'height']));
-            return Number(mediaWrapperWidth) / (width / height);
-          };
-
-          const height = getHeight();
-
-          media = (
-            <div className='status-card horizontal interactive status-card--video'>
-              <div
-                ref={this.setRef}
-                className='status-card-video'
-                style={{ height }}
-                dangerouslySetInnerHTML={{ __html: status.card.html }}
-              />
-            </div>
-          );
-        } else {
-          media = (
-            <Video
-              preview={video.preview_url}
-              blurhash={video.blurhash}
-              src={video.url}
-              alt={video.description}
-              aspectRatio={video.meta.getIn(['original', 'aspect'])}
-              width={300}
-              height={150}
-              inline
-              onOpenVideo={this.handleOpenVideo}
-              sensitive={status.sensitive}
-              visible={this.props.showMedia}
-              onToggleVisibility={this.props.onToggleMediaVisibility}
-            />
-          );
-        }
-      } else if (size === 1 && firstAttachment.type === 'audio') {
-        const attachment = firstAttachment;
-
-        media = (
-          <Audio
-            src={attachment.url}
-            alt={attachment.description}
-            duration={attachment.meta.getIn(['original', 'duration', 0])}
-            poster={attachment.preview_url !== attachment.url ? attachment.preview_url : account.avatar_static}
-            backgroundColor={attachment.meta.getIn(['colors', 'background'])}
-            foregroundColor={attachment.meta.getIn(['colors', 'foreground'])}
-            accentColor={attachment.meta.getIn(['colors', 'accent'])}
-            height={150}
-          />
-        );
-      } else {
-        media = (
-          <MediaGallery
-            standalone
-            sensitive={status.sensitive}
-            media={status.media_attachments}
-            height={300}
-            onOpenMedia={this.props.onOpenMedia}
-            visible={this.props.showMedia}
-            onToggleVisibility={this.props.onToggleMediaVisibility}
-          />
-        );
-      }
-    } else if (status.spoiler_text.length === 0 && !status.quote && status.card) {
-      media = <Card onOpenMedia={this.props.onOpenMedia} card={status.card} />;
-    }
-
     let quote;
 
     if (status.quote) {
@@ -245,7 +163,12 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
             onExpandedToggle={this.handleExpandedToggle}
           />
 
-          {media}
+          <StatusMedia
+            status={status}
+            showMedia={this.props.showMedia}
+            onToggleVisibility={this.props.onToggleMediaVisibility}
+          />
+
           {quote}
 
           <HStack justifyContent='between' alignItems='center' className='py-2'>

From e1a0759c3a2d6a74a72506741304a4034b72ca6a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 12:52:06 -0500
Subject: [PATCH 092/102] DetailedStatus: clean up unused media methods

---
 .../features/status/components/detailed-status.tsx     | 10 ----------
 1 file changed, 10 deletions(-)

diff --git a/app/soapbox/features/status/components/detailed-status.tsx b/app/soapbox/features/status/components/detailed-status.tsx
index f0b34ea4a..1387fd2cf 100644
--- a/app/soapbox/features/status/components/detailed-status.tsx
+++ b/app/soapbox/features/status/components/detailed-status.tsx
@@ -34,22 +34,16 @@ interface IDetailedStatus extends IntlProps {
 
 interface IDetailedStatusState {
   height: number | null,
-  mediaWrapperWidth: number,
 }
 
 class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedStatusState> {
 
   state = {
     height: null,
-    mediaWrapperWidth: NaN,
   };
 
   node: HTMLDivElement | null = null;
 
-  handleOpenVideo = (media: ImmutableList<AttachmentEntity>, startTime: number) => {
-    this.props.onOpenVideo(media, startTime);
-  }
-
   handleExpandedToggle = () => {
     this.props.onToggleHidden(this.props.status);
   }
@@ -71,10 +65,6 @@ class DetailedStatus extends ImmutablePureComponent<IDetailedStatus, IDetailedSt
   setRef: React.RefCallback<HTMLDivElement> = c => {
     this.node = c;
     this._measureHeight();
-
-    if (c) {
-      this.setState({ mediaWrapperWidth: c.offsetWidth });
-    }
   }
 
   componentDidUpdate(prevProps: IDetailedStatus, prevState: IDetailedStatusState) {

From fb9acf4d64630e9b6abed904b6a9240a38fc76f5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 13:11:50 -0500
Subject: [PATCH 093/102] QuotedStatus: use StatusMedia component

---
 app/soapbox/components/status-media.tsx       |  4 +--
 .../status/components/quoted_status.tsx       | 27 ++++++++++++++-----
 2 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/app/soapbox/components/status-media.tsx b/app/soapbox/components/status-media.tsx
index 391d2c865..2721d726b 100644
--- a/app/soapbox/components/status-media.tsx
+++ b/app/soapbox/components/status-media.tsx
@@ -21,7 +21,7 @@ interface IStatusMedia {
   /** Whether or not the media is concealed behind a NSFW banner. */
   showMedia?: boolean,
   /** Callback when visibility is toggled (eg clicked through NSFW). */
-  onToggleVisibility: () => void,
+  onToggleVisibility?: () => void,
 }
 
 /** Render media attachments for a status. */
@@ -30,7 +30,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   muted = false,
   onClick,
   showMedia = true,
-  onToggleVisibility,
+  onToggleVisibility = () => {},
 }) => {
   const dispatch = useAppDispatch();
   const [mediaWrapperWidth, setMediaWrapperWidth] = useState<number | undefined>(undefined);
diff --git a/app/soapbox/features/status/components/quoted_status.tsx b/app/soapbox/features/status/components/quoted_status.tsx
index a7008cfb1..a9f08685d 100644
--- a/app/soapbox/features/status/components/quoted_status.tsx
+++ b/app/soapbox/features/status/components/quoted_status.tsx
@@ -6,6 +6,7 @@ import { defineMessages, injectIntl, FormattedMessage, IntlShape, FormattedList
 import { withRouter } from 'react-router-dom';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
+import StatusMedia from 'soapbox/components/status-media';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
 
@@ -50,6 +51,25 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
     }
   }
 
+  renderMedia = () => {
+    const { status } = this.props;
+    if (!status) return null;
+    const { size } = status.media_attachments;
+
+    if (size > 1) {
+      return (
+        <AttachmentThumbs
+          media={status.media_attachments}
+          sensitive={status.sensitive}
+        />
+      );
+    }
+
+    return (
+      <StatusMedia status={status} />
+    );
+  }
+
   renderReplyMentions = () => {
     const { status } = this.props;
 
@@ -147,12 +167,7 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
           dangerouslySetInnerHTML={{ __html: status.contentHtml }}
         />
 
-        {status.media_attachments.size > 0 && (
-          <AttachmentThumbs
-            media={status.media_attachments}
-            sensitive={status.sensitive}
-          />
-        )}
+        {this.renderMedia()}
       </Stack>
     );
 

From 335851b577e9d5065a1cfb8cce04a273e5cb545a Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 13:21:07 -0500
Subject: [PATCH 094/102] QuotedStatus: always display full media gallery

---
 .../status/components/quoted_status.tsx       | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/app/soapbox/features/status/components/quoted_status.tsx b/app/soapbox/features/status/components/quoted_status.tsx
index a9f08685d..1b8f25c02 100644
--- a/app/soapbox/features/status/components/quoted_status.tsx
+++ b/app/soapbox/features/status/components/quoted_status.tsx
@@ -5,7 +5,6 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import { defineMessages, injectIntl, FormattedMessage, IntlShape, FormattedList } from 'react-intl';
 import { withRouter } from 'react-router-dom';
 
-import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import StatusMedia from 'soapbox/components/status-media';
 import { Stack, Text } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account_container';
@@ -51,25 +50,6 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
     }
   }
 
-  renderMedia = () => {
-    const { status } = this.props;
-    if (!status) return null;
-    const { size } = status.media_attachments;
-
-    if (size > 1) {
-      return (
-        <AttachmentThumbs
-          media={status.media_attachments}
-          sensitive={status.sensitive}
-        />
-      );
-    }
-
-    return (
-      <StatusMedia status={status} />
-    );
-  }
-
   renderReplyMentions = () => {
     const { status } = this.props;
 
@@ -167,7 +147,7 @@ class QuotedStatus extends ImmutablePureComponent<IQuotedStatus> {
           dangerouslySetInnerHTML={{ __html: status.contentHtml }}
         />
 
-        {this.renderMedia()}
+        <StatusMedia status={status} />
       </Stack>
     );
 

From 9772aa0d9c1bc7d4e418c330686e945c06809f76 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 13:22:58 -0500
Subject: [PATCH 095/102] Status: remove unused imports

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

diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 4d9b4eb59..370deb6de 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -7,13 +7,8 @@ import { NavLink, withRouter, RouteComponentProps } from 'react-router-dom';
 
 import Icon from 'soapbox/components/icon';
 import AccountContainer from 'soapbox/containers/account_container';
-import PlaceholderCard from 'soapbox/features/placeholder/components/placeholder_card';
-import Card from 'soapbox/features/status/components/card';
 import QuotedStatus from 'soapbox/features/status/containers/quoted_status_container';
-import Bundle from 'soapbox/features/ui/components/bundle';
-import { MediaGallery, Video, Audio } from 'soapbox/features/ui/util/async-components';
 
-import AttachmentThumbs from './attachment-thumbs';
 import StatusMedia from './status-media';
 import StatusReplyMentions from './status-reply-mentions';
 import StatusActionBar from './status_action_bar';

From bf05abd53d7ba77d369fa7a06ebeec2ccf703cd5 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Tue, 31 May 2022 18:40:44 -0500
Subject: [PATCH 096/102] Disable birthdays

---
 app/soapbox/utils/features.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/soapbox/utils/features.ts b/app/soapbox/utils/features.ts
index e98b7262c..0a466fecd 100644
--- a/app/soapbox/utils/features.ts
+++ b/app/soapbox/utils/features.ts
@@ -147,7 +147,9 @@ const getInstanceFeatures = (instance: Instance) => {
      * @see POST /api/v1/accounts
      * @see PATCH /api/v1/accounts/update_credentials
      */
-    birthdays: v.software === PLEROMA && gte(v.version, '2.4.50'),
+    // birthdays: v.software === PLEROMA && gte(v.version, '2.4.50'),
+    // FIXME: temporarily disabled until they can be deleted on the backend.
+    birthdays: false,
 
     /** Whether people who blocked you are visible through the API. */
     blockersVisible: features.includes('blockers_visible'),

From 8847b3cc03f5e8718710355cf12ad7ecb743dc2c Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 1 Jun 2022 08:34:36 -0400
Subject: [PATCH 097/102] Decrement reply count when removing a status.

---
 .../actions/__tests__/statuses-test.js        | 135 ++++++++++++++++++
 app/soapbox/actions/statuses.js               |  27 ++--
 .../reducers/__tests__/statuses-test.js       |  54 +++++++
 app/soapbox/reducers/statuses.ts              |  14 +-
 4 files changed, 214 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/actions/__tests__/statuses-test.js b/app/soapbox/actions/__tests__/statuses-test.js
index 972330f39..463b87437 100644
--- a/app/soapbox/actions/__tests__/statuses-test.js
+++ b/app/soapbox/actions/__tests__/statuses-test.js
@@ -1,8 +1,13 @@
+import { fromJS, Map as ImmutableMap } from 'immutable';
+
 import { STATUSES_IMPORT } from 'soapbox/actions/importer';
 import { __stub } from 'soapbox/api';
 import { mockStore, rootState } from 'soapbox/jest/test-helpers';
+import { normalizeStatus } from 'soapbox/normalizers/status';
+import rootReducer from 'soapbox/reducers';
 
 import { fetchContext } from '../statuses';
+import { deleteStatus } from '../statuses';
 
 describe('fetchContext()', () => {
   it('handles Mitra context', done => {
@@ -25,3 +30,133 @@ describe('fetchContext()', () => {
     }).catch(console.error);
   });
 });
+
+describe('deleteStatus()', () => {
+  let store;
+
+  describe('if logged out', () => {
+    beforeEach(() => {
+      const state = rootReducer(undefined, {}).set('me', null);
+      store = mockStore(state);
+    });
+
+    it('should do nothing', async() => {
+      await store.dispatch(deleteStatus('1', {}));
+      const actions = store.getActions();
+
+      expect(actions).toEqual([]);
+    });
+  });
+
+  describe('if logged in', () => {
+    const statusId = 'AHU2RrX0wdcwzCYjFQ';
+    const cachedStatus = normalizeStatus({
+      id: statusId,
+    });
+
+    beforeEach(() => {
+      const state = rootReducer(undefined, {})
+        .set('me', '1234')
+        .set('statuses', fromJS({
+          [statusId]: cachedStatus,
+        }));
+      store = mockStore(state);
+    });
+
+    describe('with a successful API request', () => {
+      let status;
+
+      beforeEach(() => {
+        status = require('soapbox/__fixtures__/pleroma-status-deleted.json');
+
+        __stub((mock) => {
+          mock.onDelete(`/api/v1/statuses/${statusId}`).reply(200, status);
+        });
+      });
+
+      it('should delete the status from the API', async() => {
+        const expectedActions = [
+          {
+            type: 'STATUS_DELETE_REQUEST',
+            params: cachedStatus,
+          },
+          { type: 'STATUS_DELETE_SUCCESS', id: statusId },
+          {
+            type: 'TIMELINE_DELETE',
+            id: statusId,
+            accountId: null,
+            references: ImmutableMap({}),
+            reblogOf: null,
+          },
+        ];
+        await store.dispatch(deleteStatus(statusId, {}));
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+
+      it('should handle redraft', async() => {
+        const expectedActions = [
+          {
+            type: 'STATUS_DELETE_REQUEST',
+            params: cachedStatus,
+          },
+          { type: 'STATUS_DELETE_SUCCESS', id: statusId },
+          {
+            type: 'TIMELINE_DELETE',
+            id: statusId,
+            accountId: null,
+            references: ImmutableMap({}),
+            reblogOf: null,
+          },
+          {
+            type: 'COMPOSE_SET_STATUS',
+            status: cachedStatus,
+            rawText: status.text,
+            explicitAddressing: false,
+            spoilerText: '',
+            contentType: 'text/markdown',
+            v: {
+              build: undefined,
+              compatVersion: '0.0.0',
+              software: 'Mastodon',
+              version: '0.0.0',
+            },
+            withRedraft: true,
+          },
+          { type: 'MODAL_OPEN', modalType: 'COMPOSE', modalProps: undefined },
+        ];
+        await store.dispatch(deleteStatus(statusId, {}, true));
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+
+    describe('with an unsuccessful API request', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onDelete(`/api/v1/statuses/${statusId}`).networkError();
+        });
+      });
+
+      it('should dispatch failed action', async() => {
+        const expectedActions = [
+          {
+            type: 'STATUS_DELETE_REQUEST',
+            params: cachedStatus,
+          },
+          {
+            type: 'STATUS_DELETE_FAIL',
+            params: cachedStatus,
+            error: new Error('Network Error'),
+          },
+        ];
+        await store.dispatch(deleteStatus(statusId, {}, true));
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+  });
+});
diff --git a/app/soapbox/actions/statuses.js b/app/soapbox/actions/statuses.js
index 7363f979d..bc580455a 100644
--- a/app/soapbox/actions/statuses.js
+++ b/app/soapbox/actions/statuses.js
@@ -124,7 +124,7 @@ export function fetchStatus(id) {
 
 export function deleteStatus(id, routerHistory, withRedraft = false) {
   return (dispatch, getState) => {
-    if (!isLoggedIn(getState)) return;
+    if (!isLoggedIn(getState)) return null;
 
     let status = getState().getIn(['statuses', id]);
 
@@ -132,19 +132,22 @@ export function deleteStatus(id, routerHistory, withRedraft = false) {
       status = status.set('poll', getState().getIn(['polls', status.get('poll')]));
     }
 
-    dispatch({ type: STATUS_DELETE_REQUEST, id });
+    dispatch({ type: STATUS_DELETE_REQUEST, params: status });
 
-    api(getState).delete(`/api/v1/statuses/${id}`).then(response => {
-      dispatch({ type: STATUS_DELETE_SUCCESS, id });
-      dispatch(deleteFromTimelines(id));
+    return api(getState)
+      .delete(`/api/v1/statuses/${id}`)
+      .then(response => {
+        dispatch({ type: STATUS_DELETE_SUCCESS, id });
+        dispatch(deleteFromTimelines(id));
 
-      if (withRedraft) {
-        dispatch(setComposeToStatus(status, response.data.text, response.data.spoiler_text, response.data.pleroma?.content_type, withRedraft));
-        dispatch(openModal('COMPOSE'));
-      }
-    }).catch(error => {
-      dispatch({ type: STATUS_DELETE_FAIL, id, error });
-    });
+        if (withRedraft) {
+          dispatch(setComposeToStatus(status, response.data.text, response.data.spoiler_text, response.data.pleroma?.content_type, withRedraft));
+          dispatch(openModal('COMPOSE'));
+        }
+      })
+      .catch(error => {
+        dispatch({ type: STATUS_DELETE_FAIL, params: status, error });
+      });
   };
 }
 
diff --git a/app/soapbox/reducers/__tests__/statuses-test.js b/app/soapbox/reducers/__tests__/statuses-test.js
index 91c960308..fb245062a 100644
--- a/app/soapbox/reducers/__tests__/statuses-test.js
+++ b/app/soapbox/reducers/__tests__/statuses-test.js
@@ -8,6 +8,8 @@ import { STATUS_IMPORT } from 'soapbox/actions/importer';
 import {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_FAIL,
+  STATUS_DELETE_REQUEST,
+  STATUS_DELETE_FAIL,
 } from 'soapbox/actions/statuses';
 
 import reducer from '../statuses';
@@ -183,4 +185,56 @@ Promoting free speech, even for people and ideas you dislike`;
       expect(result).toEqual(4);
     });
   });
+
+  describe('STATUS_DELETE_REQUEST', () => {
+    it('decrements the replies_count of its parent', () => {
+      const state = fromJS({ '123': { replies_count: 4 } });
+
+      const action = {
+        type: STATUS_DELETE_REQUEST,
+        params: { in_reply_to_id: '123' },
+      };
+
+      const result = reducer(state, action).getIn(['123', 'replies_count']);
+      expect(result).toEqual(3);
+    });
+
+    it('gracefully does nothing if no parent', () => {
+      const state = fromJS({ '123': { replies_count: 4 } });
+
+      const action = {
+        type: STATUS_DELETE_REQUEST,
+        params: { id: '1' },
+      };
+
+      const result = reducer(state, action).getIn(['123', 'replies_count']);
+      expect(result).toEqual(4);
+    });
+  });
+
+  describe('STATUS_DELETE_FAIL', () => {
+    it('decrements the replies_count of its parent', () => {
+      const state = fromJS({ '123': { replies_count: 4 } });
+
+      const action = {
+        type: STATUS_DELETE_FAIL,
+        params: { in_reply_to_id: '123' },
+      };
+
+      const result = reducer(state, action).getIn(['123', 'replies_count']);
+      expect(result).toEqual(5);
+    });
+
+    it('gracefully does nothing if no parent', () => {
+      const state = fromJS({ '123': { replies_count: 4 } });
+
+      const action = {
+        type: STATUS_DELETE_FAIL,
+        params: { id: '1' },
+      };
+
+      const result = reducer(state, action).getIn(['123', 'replies_count']);
+      expect(result).toEqual(4);
+    });
+  });
 });
diff --git a/app/soapbox/reducers/statuses.ts b/app/soapbox/reducers/statuses.ts
index e35468b4f..aac7dc975 100644
--- a/app/soapbox/reducers/statuses.ts
+++ b/app/soapbox/reducers/statuses.ts
@@ -28,6 +28,8 @@ import {
   STATUS_UNMUTE_SUCCESS,
   STATUS_REVEAL,
   STATUS_HIDE,
+  STATUS_DELETE_REQUEST,
+  STATUS_DELETE_FAIL,
 } from '../actions/statuses';
 import { TIMELINE_DELETE } from '../actions/timelines';
 
@@ -152,7 +154,7 @@ const deleteStatus = (state: State, id: string, references: Array<string>) => {
   return state.delete(id);
 };
 
-const importPendingStatus = (state: State, { in_reply_to_id }: APIEntity) => {
+const incrementReplyCount = (state: State, { in_reply_to_id }: APIEntity) => {
   if (in_reply_to_id) {
     return state.updateIn([in_reply_to_id, 'replies_count'], 0, count => {
       return typeof count === 'number' ? count + 1 : 0;
@@ -162,7 +164,7 @@ const importPendingStatus = (state: State, { in_reply_to_id }: APIEntity) => {
   }
 };
 
-const deletePendingStatus = (state: State, { in_reply_to_id }: APIEntity) => {
+const decrementReplyCount = (state: State, { in_reply_to_id }: APIEntity) => {
   if (in_reply_to_id) {
     return state.updateIn([in_reply_to_id, 'replies_count'], 0, count => {
       return typeof count === 'number' ? Math.max(0, count - 1) : 0;
@@ -200,9 +202,9 @@ export default function statuses(state = initialState, action: AnyAction): State
     case STATUSES_IMPORT:
       return importStatuses(state, action.statuses, action.expandSpoilers);
     case STATUS_CREATE_REQUEST:
-      return importPendingStatus(state, action.params);
+      return incrementReplyCount(state, action.params);
     case STATUS_CREATE_FAIL:
-      return deletePendingStatus(state, action.params);
+      return decrementReplyCount(state, action.params);
     case FAVOURITE_REQUEST:
       return simulateFavourite(state, action.status.id, true);
     case UNFAVOURITE_REQUEST:
@@ -249,6 +251,10 @@ export default function statuses(state = initialState, action: AnyAction): State
           }
         });
       });
+    case STATUS_DELETE_REQUEST:
+      return decrementReplyCount(state, action.params);
+    case STATUS_DELETE_FAIL:
+      return incrementReplyCount(state, action.params);
     case TIMELINE_DELETE:
       return deleteStatus(state, action.id, action.references);
     default:

From 190d94a438c77a5f79e74c7d60168e5be23c6adb Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 1 Jun 2022 12:57:41 -0400
Subject: [PATCH 098/102] Add tests for 'createAccount' and 'fetchAccount'

---
 .../actions/__tests__/accounts.test.ts        | 132 ++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 app/soapbox/actions/__tests__/accounts.test.ts

diff --git a/app/soapbox/actions/__tests__/accounts.test.ts b/app/soapbox/actions/__tests__/accounts.test.ts
new file mode 100644
index 000000000..75d0b7a64
--- /dev/null
+++ b/app/soapbox/actions/__tests__/accounts.test.ts
@@ -0,0 +1,132 @@
+import { Map as ImmutableMap } from 'immutable';
+
+import { __stub } from 'soapbox/api';
+import { mockStore } from 'soapbox/jest/test-helpers';
+import rootReducer from 'soapbox/reducers';
+
+import { normalizeAccount } from '../../normalizers';
+import { createAccount, fetchAccount } from '../accounts';
+
+let store;
+
+describe('createAccount()', () => {
+  const params = {
+    email: 'foo@bar.com',
+  };
+
+  describe('with a successful API request', () => {
+    beforeEach(() => {
+      const state = rootReducer(undefined, {});
+      store = mockStore(state);
+
+      __stub((mock) => {
+        mock.onPost('/api/v1/accounts').reply(200, { token: '123 ' });
+      });
+    });
+
+    it('dispatches the correct actions', async() => {
+      const expectedActions = [
+        { type: 'ACCOUNT_CREATE_REQUEST', params },
+        {
+          type: 'ACCOUNT_CREATE_SUCCESS',
+          params,
+          token: { token: '123 ' },
+        },
+      ];
+      await store.dispatch(createAccount(params));
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+});
+
+describe('fetchAccount()', () => {
+  const id = '123';
+
+  describe('when the account has "should_refetch" set to false', () => {
+    beforeEach(() => {
+      const account = normalizeAccount({
+        id,
+        acct: 'justin-username',
+        display_name: 'Justin L',
+        avatar: 'test.jpg',
+      });
+
+      const state = rootReducer(undefined, {})
+        .set('accounts', ImmutableMap({
+          [id]: account,
+        }));
+
+      store = mockStore(state);
+
+      __stub((mock) => {
+        mock.onGet(`/api/v1/accounts/${id}`).reply(200, account);
+      });
+    });
+
+    it('should do nothing', async() => {
+      await store.dispatch(fetchAccount(id));
+      const actions = store.getActions();
+
+      expect(actions).toEqual([]);
+    });
+  });
+
+  describe('with a successful API request', () => {
+    const account = require('soapbox/__fixtures__/pleroma-account.json');
+
+    beforeEach(() => {
+      const state = rootReducer(undefined, {});
+      store = mockStore(state);
+
+      __stub((mock) => {
+        mock.onGet(`/api/v1/accounts/${id}`).reply(200, account);
+      });
+    });
+
+    it('should dispatch the correct actions', async() => {
+      const expectedActions = [
+        { type: 'ACCOUNT_FETCH_REQUEST', id: '123' },
+        { type: 'ACCOUNTS_IMPORT', accounts: [account] },
+        {
+          type: 'ACCOUNT_FETCH_SUCCESS',
+          account,
+        },
+      ];
+
+      await store.dispatch(fetchAccount(id));
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+
+  describe('with an unsuccessful API request', () => {
+    beforeEach(() => {
+      const state = rootReducer(undefined, {});
+      store = mockStore(state);
+
+      __stub((mock) => {
+        mock.onGet(`/api/v1/accounts/${id}`).networkError();
+      });
+    });
+
+    it('should dispatch the correct actions', async() => {
+      const expectedActions = [
+        { type: 'ACCOUNT_FETCH_REQUEST', id: '123' },
+        {
+          type: 'ACCOUNT_FETCH_FAIL',
+          id,
+          error: new Error('Network Error'),
+          skipAlert: true,
+        },
+      ];
+
+      await store.dispatch(fetchAccount(id));
+      const actions = store.getActions();
+
+      expect(actions).toEqual(expectedActions);
+    });
+  });
+});

From 6ba13239c6273262fcc2537aae0e477ae1f0b8ba Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 1 Jun 2022 13:45:49 -0400
Subject: [PATCH 099/102] Return the promise

---
 app/soapbox/actions/accounts.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/soapbox/actions/accounts.js b/app/soapbox/actions/accounts.js
index 4df56417e..56210c1d0 100644
--- a/app/soapbox/actions/accounts.js
+++ b/app/soapbox/actions/accounts.js
@@ -136,17 +136,20 @@ export function fetchAccount(id) {
     const account = getState().getIn(['accounts', id]);
 
     if (account && !account.get('should_refetch')) {
-      return;
+      return null;
     }
 
     dispatch(fetchAccountRequest(id));
 
-    api(getState).get(`/api/v1/accounts/${id}`).then(response => {
-      dispatch(importFetchedAccount(response.data));
-      dispatch(fetchAccountSuccess(response.data));
-    }).catch(error => {
-      dispatch(fetchAccountFail(id, error));
-    });
+    return api(getState)
+      .get(`/api/v1/accounts/${id}`)
+      .then(response => {
+        dispatch(importFetchedAccount(response.data));
+        dispatch(fetchAccountSuccess(response.data));
+      })
+      .catch(error => {
+        dispatch(fetchAccountFail(id, error));
+      });
   };
 }
 

From b098c23057bd4b6b0b8c27cc3970ef454645efa9 Mon Sep 17 00:00:00 2001
From: Isabell Deinschnitzel
 <6174132-iss_dein_schnitzel@users.noreply.gitlab.com>
Date: Wed, 1 Jun 2022 18:00:41 +0000
Subject: [PATCH 100/102] =?UTF-8?q?Update=20de.json=20-=20=20kleine=20?=
 =?UTF-8?q?=C3=84nderungen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/soapbox/locales/de.json | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/locales/de.json b/app/soapbox/locales/de.json
index d11b7e0f2..c7527aa36 100644
--- a/app/soapbox/locales/de.json
+++ b/app/soapbox/locales/de.json
@@ -4,7 +4,7 @@
   "accordion.expand": "Ausklappen",
   "account.add_or_remove_from_list": "Hinzufügen oder Entfernen von Listen",
   "account.badges.bot": "Bot",
-  "account.birthday": "Born {date}",
+  "account.birthday": "Geburtsdatum {date}",
   "account.birthday_today": "Birthday is today!",
   "account.block": "@{name} blockieren",
   "account.block_domain": "Alles von {domain} verstecken",
@@ -51,12 +51,12 @@
   "account.unfollow": "Entfolgen",
   "account.unmute": "@{name} nicht mehr stummschalten",
   "account.unsubscribe": "Benachrichtigungen von @{name} entabonnieren",
-  "account.verified": "Verified Account",
-  "account.welcome": "Welcome",
+  "account.verified": "Verifizierter Account",
+  "account.welcome": "Willkommen",
   "account_gallery.none": "Keine Medien vorhanden.",
   "account_note.hint": "You can keep notes about this user for yourself (this will not be shared with them):",
   "account_note.placeholder": "No comment provided",
-  "account_note.save": "Save",
+  "account_note.save": "Speichern",
   "account_note.target": "Note for @{target}",
   "account_search.placeholder": "Nach einem Account suchen",
   "account_timeline.column_settings.show_pinned": "Angeheftete Beiträge anzeigen",
@@ -988,7 +988,7 @@
   "status.open": "Diesen Beitrag öffnen",
   "status.pin": "Im Profil anheften",
   "status.pinned": "Angehefteter Beitrag",
-  "status.quote": "Quote post",
+  "status.quote": "Beitrag zitieren",
   "status.reactions.cry": "Sad",
   "status.reactions.empty": "No one has reacted to this post yet. When someone does, they will show up here.",
   "status.reactions.heart": "Love",

From 1ede0644572c339c5c06d198cdd7a8ba66942fc3 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 1 Jun 2022 14:18:01 -0400
Subject: [PATCH 101/102] Use white text on dark inputs

---
 app/soapbox/components/ui/input/input.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 0b18261a6..183b40b04 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -64,8 +64,8 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           type={revealed ? 'text' : type}
           ref={ref}
           className={classNames({
-            'dark:bg-slate-800 block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500':
-                true,
+            'dark:bg-slate-800 dark:text-white block w-full sm:text-sm border-gray-300 dark:border-gray-600 rounded-md focus:ring-indigo-500 focus:border-indigo-500':
+              true,
             'pr-7': isPassword,
             'text-red-600 border-red-600': hasError,
             'pl-8': typeof icon !== 'undefined',

From bca5a2988d725b8857a5a9921ceadd1efd107be1 Mon Sep 17 00:00:00 2001
From: Justin <dice.warrant-02@icloud.com>
Date: Wed, 1 Jun 2022 14:27:04 -0400
Subject: [PATCH 102/102] Add 'color-scheme' CSS prop for better browser
 rendering

---
 app/soapbox/containers/soapbox.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index fbb62d6e3..b28cdfccd 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -141,6 +141,7 @@ const SoapboxMount = () => {
       <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
       <body className={bodyClass} />
       {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
+      {darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
       <meta name='theme-color' content={soapboxConfig.brandColor} />
     </Helmet>
   );