Merge remote-tracking branch 'soapbox/develop' into ts

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

.gitlab-ci.yml

@@ -57,7 +57,7 @@ lint-sass:
 
 jest:
   stage: test
-  script: yarn test:coverage
+  script: yarn test:coverage --runInBand
   only:
     changes:
       - "**/*.js"

app/soapbox/actions/__tests__/account-notes.test.ts

@@ -1,18 +1,20 @@
 import { Map as ImmutableMap } from 'immutable';
 
 import { __stub } from 'soapbox/api';
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import rootReducer from 'soapbox/reducers';
+import { ReducerRecord, EditRecord } from 'soapbox/reducers/account_notes';
 
-import { normalizeAccount } from '../../normalizers';
+import { normalizeAccount, normalizeRelationship } from '../../normalizers';
 import { changeAccountNoteComment, initAccountNoteModal, submitAccountNote } from '../account-notes';
 
+import type { Account } from 'soapbox/types/entities';
+
 describe('submitAccountNote()', () => {
-  let store;
+  let store: ReturnType<typeof mockStore>;
 
   beforeEach(() => {
-    const state = rootReducer(undefined, {})
+    const state = rootState
-      .set('account_notes', { edit: { account: 1, comment: 'hello' } });
+      .set('account_notes', ReducerRecord({ edit: EditRecord({ account: '1', comment: 'hello' }) }));
     store = mockStore(state);
   });
 
@@ -60,11 +62,11 @@ describe('submitAccountNote()', () => {
 });
 
 describe('initAccountNoteModal()', () => {
-  let store;
+  let store: ReturnType<typeof mockStore>;
 
   beforeEach(() => {
-    const state = rootReducer(undefined, {})
+    const state = rootState
-      .set('relationships', ImmutableMap({ 1: { note: 'hello' } }));
+      .set('relationships', ImmutableMap({ '1': normalizeRelationship({ note: 'hello' }) }));
     store = mockStore(state);
   });
 
@@ -75,7 +77,7 @@ describe('initAccountNoteModal()', () => {
       display_name: 'Justin L',
       avatar: 'test.jpg',
       verified: true,
-    });
+    }) as Account;
     const expectedActions = [
       { type: 'ACCOUNT_NOTE_INIT_MODAL', account, comment: 'hello' },
       { type: 'MODAL_OPEN', modalType: 'ACCOUNT_NOTE' },
@@ -88,10 +90,10 @@ describe('initAccountNoteModal()', () => {
 });
 
 describe('changeAccountNoteComment()', () => {
-  let store;
+  let store: ReturnType<typeof mockStore>;
 
   beforeEach(() => {
-    const state = rootReducer(undefined, {});
+    const state = rootState;
     store = mockStore(state);
   });
 

app/soapbox/actions/__tests__/accounts.test.ts

@@ -1,10 +1,10 @@
 import { Map as ImmutableMap } from 'immutable';
 
 import { __stub } from 'soapbox/api';
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import rootReducer from 'soapbox/reducers';
+import { ListRecord, ReducerRecord } from 'soapbox/reducers/user_lists';
 
-import { normalizeAccount } from '../../normalizers';
+import { normalizeAccount, normalizeInstance, normalizeRelationship } from '../../normalizers';
 import {
   authorizeFollowRequest,
   blockAccount,
@@ -28,7 +28,7 @@ import {
   unsubscribeAccount,
 } from '../accounts';
 
-let store;
+let store: ReturnType<typeof mockStore>;
 
 describe('createAccount()', () => {
   const params = {
@@ -37,7 +37,7 @@ describe('createAccount()', () => {
 
   describe('with a successful API request', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {});
+      const state = rootState;
       store = mockStore(state);
 
       __stub((mock) => {
@@ -74,10 +74,10 @@ describe('fetchAccount()', () => {
         avatar: 'test.jpg',
       });
 
-      const state = rootReducer(undefined, {})
+      const state = rootState
         .set('accounts', ImmutableMap({
           [id]: account,
-        }));
+        }) as any);
 
       store = mockStore(state);
 
@@ -98,7 +98,7 @@ describe('fetchAccount()', () => {
     const account = require('soapbox/__fixtures__/pleroma-account.json');
 
     beforeEach(() => {
-      const state = rootReducer(undefined, {});
+      const state = rootState;
       store = mockStore(state);
 
       __stub((mock) => {
@@ -125,7 +125,7 @@ describe('fetchAccount()', () => {
 
   describe('with an unsuccessful API request', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {});
+      const state = rootState;
       store = mockStore(state);
 
       __stub((mock) => {
@@ -155,7 +155,7 @@ describe('fetchAccount()', () => {
 describe('fetchAccountByUsername()', () => {
   const id = '123';
   const username = 'tiger';
-  let state, account;
+  let state, account: any;
 
   beforeEach(() => {
     account = normalizeAccount({
@@ -166,7 +166,7 @@ describe('fetchAccountByUsername()', () => {
       birthday: undefined,
     });
 
-    state = rootReducer(undefined, {})
+    state = rootState
       .set('accounts', ImmutableMap({
         [id]: account,
       }));
@@ -180,15 +180,15 @@ describe('fetchAccountByUsername()', () => {
 
   describe('when "accountByUsername" feature is enabled', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
-        .set('instance', {
+        .set('instance', normalizeInstance({
           version: '2.7.2 (compatible; Pleroma 2.4.52-1337-g4779199e.gleasonator+soapbox)',
           pleroma: ImmutableMap({
             metadata: ImmutableMap({
               features: [],
             }),
           }),
-        })
+        }))
         .set('me', '123');
       store = mockStore(state);
     });
@@ -243,15 +243,15 @@ describe('fetchAccountByUsername()', () => {
 
   describe('when "accountLookup" feature is enabled', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
-        .set('instance', {
+        .set('instance', normalizeInstance({
           version: '3.4.1 (compatible; TruthSocial 1.0.0)',
           pleroma: ImmutableMap({
             metadata: ImmutableMap({
               features: [],
             }),
           }),
-        })
+        }))
         .set('me', '123');
       store = mockStore(state);
     });
@@ -308,7 +308,7 @@ describe('fetchAccountByUsername()', () => {
 
   describe('when using the accountSearch function', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -373,12 +373,12 @@ describe('fetchAccountByUsername()', () => {
 describe('followAccount()', () => {
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
     it('should do nothing', async() => {
-      await store.dispatch(followAccount(1));
+      await store.dispatch(followAccount('1'));
       const actions = store.getActions();
 
       expect(actions).toEqual([]);
@@ -386,10 +386,10 @@ describe('followAccount()', () => {
   });
 
   describe('when logged in', () => {
-    const id = 1;
+    const id = '1';
 
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -460,12 +460,12 @@ describe('followAccount()', () => {
 describe('unfollowAccount()', () => {
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
     it('should do nothing', async() => {
-      await store.dispatch(unfollowAccount(1));
+      await store.dispatch(unfollowAccount('1'));
       const actions = store.getActions();
 
       expect(actions).toEqual([]);
@@ -473,10 +473,10 @@ describe('unfollowAccount()', () => {
   });
 
   describe('when logged in', () => {
-    const id = 1;
+    const id = '1';
 
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -489,7 +489,7 @@ describe('unfollowAccount()', () => {
 
       it('should dispatch the correct actions', async() => {
         const expectedActions = [
-          { type: 'ACCOUNT_UNFOLLOW_REQUEST', id: 1, skipLoading: true },
+          { type: 'ACCOUNT_UNFOLLOW_REQUEST', id: '1', skipLoading: true },
           {
             type: 'ACCOUNT_UNFOLLOW_SUCCESS',
             relationship: { success: true },
@@ -534,11 +534,11 @@ describe('unfollowAccount()', () => {
 });
 
 describe('blockAccount()', () => {
-  const id = 1;
+  const id = '1';
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -552,7 +552,7 @@ describe('blockAccount()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -601,11 +601,11 @@ describe('blockAccount()', () => {
 });
 
 describe('unblockAccount()', () => {
-  const id = 1;
+  const id = '1';
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -619,7 +619,7 @@ describe('unblockAccount()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -667,11 +667,11 @@ describe('unblockAccount()', () => {
 });
 
 describe('muteAccount()', () => {
-  const id = 1;
+  const id = '1';
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -685,7 +685,7 @@ describe('muteAccount()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -734,11 +734,11 @@ describe('muteAccount()', () => {
 });
 
 describe('unmuteAccount()', () => {
-  const id = 1;
+  const id = '1';
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -752,7 +752,7 @@ describe('unmuteAccount()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -800,11 +800,11 @@ describe('unmuteAccount()', () => {
 });
 
 describe('subscribeAccount()', () => {
-  const id = 1;
+  const id = '1';
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -818,7 +818,7 @@ describe('subscribeAccount()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -866,11 +866,11 @@ describe('subscribeAccount()', () => {
 });
 
 describe('unsubscribeAccount()', () => {
-  const id = 1;
+  const id = '1';
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -884,7 +884,7 @@ describe('unsubscribeAccount()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -936,7 +936,7 @@ describe('removeFromFollowers()', () => {
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -950,7 +950,7 @@ describe('removeFromFollowers()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -1002,7 +1002,7 @@ describe('fetchFollowers()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -1059,7 +1059,7 @@ describe('expandFollowers()', () => {
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -1073,28 +1073,28 @@ describe('expandFollowers()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
-        .set('user_lists', {
+        .set('user_lists', ReducerRecord({
           followers: ImmutableMap({
-            [id]: {
+            [id]: ListRecord({
               next: 'next_url',
-            },
             }),
-        })
+          }),
+        }))
         .set('me', '123');
       store = mockStore(state);
     });
 
     describe('when the url is null', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
-          .set('user_lists', {
+          .set('user_lists', ReducerRecord({
             followers: ImmutableMap({
-              [id]: {
+              [id]: ListRecord({
                 next: null,
-              },
               }),
-          })
+            }),
+          }))
           .set('me', '123');
         store = mockStore(state);
       });
@@ -1160,7 +1160,7 @@ describe('fetchFollowing()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 
@@ -1217,7 +1217,7 @@ describe('expandFollowing()', () => {
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -1231,28 +1231,28 @@ describe('expandFollowing()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
-        .set('user_lists', {
+        .set('user_lists', ReducerRecord({
           following: ImmutableMap({
-            [id]: {
+            [id]: ListRecord({
               next: 'next_url',
-            },
             }),
-        })
+          }),
+        }))
         .set('me', '123');
       store = mockStore(state);
     });
 
     describe('when the url is null', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
-          .set('user_lists', {
+          .set('user_lists', ReducerRecord({
             following: ImmutableMap({
-              [id]: {
+              [id]: ListRecord({
                 next: null,
-              },
               }),
-          })
+            }),
+          }))
           .set('me', '123');
         store = mockStore(state);
       });
@@ -1318,7 +1318,7 @@ describe('fetchRelationships()', () => {
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -1332,15 +1332,15 @@ describe('fetchRelationships()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
         .set('me', '123');
       store = mockStore(state);
     });
 
     describe('without newAccountIds', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
-          .set('relationships', ImmutableMap({ [id]: {} }))
+          .set('relationships', ImmutableMap({ [id]: normalizeRelationship({}) }))
           .set('me', '123');
         store = mockStore(state);
       });
@@ -1355,7 +1355,7 @@ describe('fetchRelationships()', () => {
 
     describe('with a successful API request', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
           .set('relationships', ImmutableMap({}))
           .set('me', '123');
         store = mockStore(state);
@@ -1409,7 +1409,7 @@ describe('fetchRelationships()', () => {
 describe('fetchFollowRequests()', () => {
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -1423,14 +1423,14 @@ describe('fetchFollowRequests()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
         .set('me', '123');
       store = mockStore(state);
     });
 
     describe('with a successful API request', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
           .set('relationships', ImmutableMap({}))
           .set('me', '123');
         store = mockStore(state);
@@ -1483,7 +1483,7 @@ describe('fetchFollowRequests()', () => {
 describe('expandFollowRequests()', () => {
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -1497,24 +1497,24 @@ describe('expandFollowRequests()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
-        .set('user_lists', {
+        .set('user_lists', ReducerRecord({
-          follow_requests: {
+          follow_requests: ListRecord({
             next: 'next_url',
-          },
+          }),
-        })
+        }))
         .set('me', '123');
       store = mockStore(state);
     });
 
     describe('when the url is null', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
-          .set('user_lists', {
+          .set('user_lists', ReducerRecord({
-            follow_requests: {
+            follow_requests: ListRecord({
               next: null,
-            },
+            }),
-          })
+          }))
           .set('me', '123');
         store = mockStore(state);
       });
@@ -1579,7 +1579,7 @@ describe('authorizeFollowRequest()', () => {
 
   describe('when logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -1593,7 +1593,7 @@ describe('authorizeFollowRequest()', () => {
 
   describe('when logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '123');
+      const state = rootState.set('me', '123');
       store = mockStore(state);
     });
 

app/soapbox/actions/__tests__/alerts.test.ts

@@ -1,11 +1,10 @@
 import { AxiosError } from 'axios';
 
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { mockStore, rootState } 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, {
+const buildError = (message: string, status: number) => new AxiosError<any>(message, String(status), undefined, null, {
   data: {
     error: message,
   },
@@ -15,10 +14,10 @@ const buildError = (message: string, status: number) => new AxiosError<any>(mess
   config: {},
 });
 
-let store;
+let store: ReturnType<typeof mockStore>;
 
 beforeEach(() => {
-  const state = rootReducer(undefined, {});
+  const state = rootState;
   store = mockStore(state);
 });
 
@@ -28,7 +27,7 @@ describe('dismissAlert()', () => {
     const expectedActions = [
       { type: 'ALERT_DISMISS', alert },
     ];
-    await store.dispatch(dismissAlert(alert));
+    await store.dispatch(dismissAlert(alert as any));
     const actions = store.getActions();
 
     expect(actions).toEqual(expectedActions);
@@ -70,11 +69,10 @@ describe('showAlert()', () => {
     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);
+      expect(actions).toEqual([]);
     });
   });
 
@@ -82,11 +80,10 @@ describe('showAlert()', () => {
     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);
+      expect(actions).toEqual([]);
     });
   });
 

app/soapbox/actions/__tests__/blocks.test.ts

@@ -1,8 +1,6 @@
-import { Record as ImmutableRecord } from 'immutable';
-
 import { __stub } from 'soapbox/api';
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers';
-import rootReducer from 'soapbox/reducers';
+import { ListRecord, ReducerRecord as UserListsRecord } from 'soapbox/reducers/user_lists';
 
 import { expandBlocks, fetchBlocks } from '../blocks';
 
@@ -14,11 +12,11 @@ const account = {
 };
 
 describe('fetchBlocks()', () => {
-  let store;
+  let store: ReturnType<typeof mockStore>;
 
   describe('if logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -32,7 +30,7 @@ describe('fetchBlocks()', () => {
 
   describe('if logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '1234');
+      const state = rootState.set('me', '1234');
       store = mockStore(state);
     });
 
@@ -87,11 +85,11 @@ describe('fetchBlocks()', () => {
 });
 
 describe('expandBlocks()', () => {
-  let store;
+  let store: ReturnType<typeof mockStore>;
 
   describe('if logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -105,15 +103,15 @@ describe('expandBlocks()', () => {
 
   describe('if logged in', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', '1234');
+      const state = rootState.set('me', '1234');
       store = mockStore(state);
     });
 
     describe('without a url', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
           .set('me', '1234')
-          .set('user_lists', ImmutableRecord({ blocks: { next: null } })());
+          .set('user_lists', UserListsRecord({ blocks: ListRecord({ next: null }) }));
         store = mockStore(state);
       });
 
@@ -127,9 +125,9 @@ describe('expandBlocks()', () => {
 
     describe('with a url', () => {
       beforeEach(() => {
-        const state = rootReducer(undefined, {})
+        const state = rootState
           .set('me', '1234')
-          .set('user_lists', ImmutableRecord({ blocks: { next: 'example' } })());
+          .set('user_lists', UserListsRecord({ blocks: ListRecord({ next: 'example' }) }));
         store = mockStore(state);
       });
 

app/soapbox/actions/__tests__/carousels.test.ts

@@ -4,14 +4,14 @@ import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { fetchCarouselAvatars } from '../carousels';
 
 describe('fetchCarouselAvatars()', () => {
-  let store;
+  let store: ReturnType<typeof mockStore>;
 
   beforeEach(() => {
     store = mockStore(rootState);
   });
 
   describe('with a successful API request', () => {
-    let avatars;
+    let avatars: Record<string, any>[];
 
     beforeEach(() => {
       avatars = [

app/soapbox/actions/__tests__/compose.test.ts

@@ -1,28 +1,29 @@
-import { fromJS } from 'immutable';
+import { Map as ImmutableMap } from 'immutable';
 
-import { mockStore } from 'soapbox/jest/test-helpers';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers';
 import { InstanceRecord } from 'soapbox/normalizers';
-import rootReducer from 'soapbox/reducers';
 
 import { uploadCompose } from '../compose';
 
+import type { IntlShape } from 'react-intl';
+
 describe('uploadCompose()', () => {
   describe('with images', () => {
-    let files, store;
+    let files: FileList, store: ReturnType<typeof mockStore>;
 
     beforeEach(() => {
       const instance = InstanceRecord({
-        configuration: fromJS({
+        configuration: ImmutableMap({
-          statuses: {
+          statuses: ImmutableMap({
             max_media_attachments: 4,
-          },
+          }),
-          media_attachments: {
+          media_attachments: ImmutableMap({
             image_size_limit: 10,
-          },
+          }),
         }),
       });
 
-      const state = rootReducer(undefined, {})
+      const state = rootState
         .set('me', '1234')
         .set('instance', instance);
 
@@ -32,13 +33,13 @@ describe('uploadCompose()', () => {
         name: 'Image',
         size: 15,
         type: 'image/png',
-      }];
+      }] as unknown as FileList;
     });
 
     it('creates an alert if exceeds max size', async() => {
       const mockIntl = {
         formatMessage: jest.fn().mockReturnValue('Image exceeds the current file size limit (10 Bytes)'),
-      };
+      } as unknown as IntlShape;
 
       const expectedActions = [
         { type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },
@@ -60,21 +61,21 @@ describe('uploadCompose()', () => {
   });
 
   describe('with videos', () => {
-    let files, store;
+    let files: FileList, store: ReturnType<typeof mockStore>;
 
     beforeEach(() => {
       const instance = InstanceRecord({
-        configuration: fromJS({
+        configuration: ImmutableMap({
-          statuses: {
+          statuses: ImmutableMap({
             max_media_attachments: 4,
-          },
+          }),
-          media_attachments: {
+          media_attachments: ImmutableMap({
             video_size_limit: 10,
-          },
+          }),
         }),
       });
 
-      const state = rootReducer(undefined, {})
+      const state = rootState
         .set('me', '1234')
         .set('instance', instance);
 
@@ -84,13 +85,13 @@ describe('uploadCompose()', () => {
         name: 'Video',
         size: 15,
         type: 'video/mp4',
-      }];
+      }] as unknown as FileList;
     });
 
     it('creates an alert if exceeds max size', async() => {
       const mockIntl = {
         formatMessage: jest.fn().mockReturnValue('Video exceeds the current file size limit (10 Bytes)'),
-      };
+      } as unknown as IntlShape;
 
       const expectedActions = [
         { type: 'COMPOSE_UPLOAD_REQUEST', skipLoading: true },

app/soapbox/actions/__tests__/onboarding.test.ts

@@ -1,5 +1,4 @@
-import { mockStore, mockWindowProperty } from 'soapbox/jest/test-helpers';
+import { mockStore, mockWindowProperty, rootState } from 'soapbox/jest/test-helpers';
-import rootReducer from 'soapbox/reducers';
 
 import { checkOnboardingStatus, startOnboarding, endOnboarding } from '../onboarding';
 
@@ -17,7 +16,7 @@ describe('checkOnboarding()', () => {
   it('does nothing if localStorage item is not set', async() => {
     mockGetItem = jest.fn().mockReturnValue(null);
 
-    const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
+    const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
 
     await store.dispatch(checkOnboardingStatus());
@@ -30,7 +29,7 @@ describe('checkOnboarding()', () => {
   it('does nothing if localStorage item is invalid', async() => {
     mockGetItem = jest.fn().mockReturnValue('invalid');
 
-    const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
+    const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
 
     await store.dispatch(checkOnboardingStatus());
@@ -43,7 +42,7 @@ describe('checkOnboarding()', () => {
   it('dispatches the correct action', async() => {
     mockGetItem = jest.fn().mockReturnValue('1');
 
-    const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
+    const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
 
     await store.dispatch(checkOnboardingStatus());
@@ -66,7 +65,7 @@ describe('startOnboarding()', () => {
   });
 
   it('dispatches the correct action', async() => {
-    const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
+    const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
 
     await store.dispatch(startOnboarding());
@@ -89,7 +88,7 @@ describe('endOnboarding()', () => {
   });
 
   it('dispatches the correct action', async() => {
-    const state = rootReducer(undefined, { onboarding: { needsOnboarding: false } });
+    const state = rootState.setIn(['onboarding', 'needsOnboarding'], false);
     const store = mockStore(state);
 
     await store.dispatch(endOnboarding());

app/soapbox/actions/__tests__/statuses.test.ts

@@ -4,7 +4,6 @@ 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 { deleteStatus, fetchContext } from '../statuses';
 
@@ -19,7 +18,7 @@ describe('fetchContext()', () => {
 
     const store = mockStore(rootState);
 
-    store.dispatch(fetchContext('017ed505-5926-392f-256a-f86d5075df70')).then(context => {
+    store.dispatch(fetchContext('017ed505-5926-392f-256a-f86d5075df70')).then(() => {
       const actions = store.getActions();
 
       expect(actions[3].type).toEqual(STATUSES_IMPORT);
@@ -31,11 +30,11 @@ describe('fetchContext()', () => {
 });
 
 describe('deleteStatus()', () => {
-  let store;
+  let store: ReturnType<typeof mockStore>;
 
   describe('if logged out', () => {
     beforeEach(() => {
-      const state = rootReducer(undefined, {}).set('me', null);
+      const state = rootState.set('me', null);
       store = mockStore(state);
     });
 
@@ -54,16 +53,16 @@ describe('deleteStatus()', () => {
     });
 
     beforeEach(() => {
-      const state = rootReducer(undefined, {})
+      const state = rootState
         .set('me', '1234')
         .set('statuses', fromJS({
           [statusId]: cachedStatus,
-        }));
+        }) as any);
       store = mockStore(state);
     });
 
     describe('with a successful API request', () => {
-      let status;
+      let status: any;
 
       beforeEach(() => {
         status = require('soapbox/__fixtures__/pleroma-status-deleted.json');

app/soapbox/actions/__tests__/suggestions.test.ts

@@ -0,0 +1,108 @@
+import { Map as ImmutableMap } from 'immutable';
+
+import { __stub } from 'soapbox/api';
+import { mockStore, rootState } from 'soapbox/jest/test-helpers';
+import { normalizeInstance } from 'soapbox/normalizers';
+
+import {
+  fetchSuggestions,
+} from '../suggestions';
+
+let store: ReturnType<typeof mockStore>;
+let state;
+
+describe('fetchSuggestions()', () => {
+  describe('with Truth Social software', () => {
+    beforeEach(() => {
+      state = rootState
+        .set('instance', normalizeInstance({
+          version: '3.4.1 (compatible; TruthSocial 1.0.0)',
+          pleroma: ImmutableMap({
+            metadata: ImmutableMap({
+              features: [],
+            }),
+          }),
+        }))
+        .set('me', '123');
+      store = mockStore(state);
+    });
+
+    describe('with a successful API request', () => {
+      const response = [
+        {
+          account_id: '1',
+          acct: 'jl',
+          account_avatar: 'https://example.com/some.jpg',
+          display_name: 'justin',
+          note: '<p>note</p>',
+          verified: true,
+        },
+      ];
+
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/truth/carousels/suggestions').reply(200, response, {
+            link: '<https://example.com/api/v1/truth/carousels/suggestions?since_id=1>; rel=\'prev\'',
+          });
+        });
+      });
+
+      it('dispatches the correct actions', async() => {
+        const expectedActions = [
+          { type: 'SUGGESTIONS_V2_FETCH_REQUEST', skipLoading: true },
+          {
+            type: 'ACCOUNTS_IMPORT', accounts: [{
+              acct: response[0].acct,
+              avatar: response[0].account_avatar,
+              avatar_static: response[0].account_avatar,
+              id: response[0].account_id,
+              note: response[0].note,
+              verified: response[0].verified,
+              display_name: response[0].display_name,
+            }],
+          },
+          {
+            type: 'SUGGESTIONS_TRUTH_FETCH_SUCCESS',
+            suggestions: response,
+            next: undefined,
+            skipLoading: true,
+          },
+          {
+            type: 'RELATIONSHIPS_FETCH_REQUEST',
+            skipLoading: true,
+            ids: [response[0].account_id],
+          },
+        ];
+        await store.dispatch(fetchSuggestions());
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+
+    describe('with an unsuccessful API request', () => {
+      beforeEach(() => {
+        __stub((mock) => {
+          mock.onGet('/api/v1/truth/carousels/suggestions').networkError();
+        });
+      });
+
+      it('should dispatch the correct actions', async() => {
+        const expectedActions = [
+          { type: 'SUGGESTIONS_V2_FETCH_REQUEST', skipLoading: true },
+          {
+            type: 'SUGGESTIONS_V2_FETCH_FAIL',
+            error: new Error('Network Error'),
+            skipLoading: true,
+            skipAlert: true,
+          },
+        ];
+
+        await store.dispatch(fetchSuggestions());
+        const actions = store.getActions();
+
+        expect(actions).toEqual(expectedActions);
+      });
+    });
+  });
+});

app/soapbox/actions/auth.ts

@@ -180,8 +180,8 @@ export const verifyCredentials = (token: string, accountUrl?: string) => {
         return account;
       } else {
         if (getState().me === null) dispatch(fetchMeFail(error));
-        dispatch({ type: VERIFY_CREDENTIALS_FAIL, token, error, skipAlert: true });
+        dispatch({ type: VERIFY_CREDENTIALS_FAIL, token, error });
-        return error;
+        throw error;
       }
     });
   };
@@ -214,14 +214,6 @@ export const logIn = (username: string, password: string) =>
     if ((error.response?.data as any).error === 'mfa_required') {
       // If MFA is required, throw the error and handle it in the component.
       throw error;
-    } else if ((error.response?.data as any).error === 'invalid_grant') {
-      // Mastodon returns this user-unfriendly error as a catch-all
-      // for everything from "bad request" to "wrong password".
-      // Assume our code is correct and it's a wrong password.
-      dispatch(snackbar.error(messages.invalidCredentials));
-    } else if ((error.response?.data as any).error) {
-      // If the backend returns an error, display it.
-      dispatch(snackbar.error((error.response?.data as any).error));
     } else {
       // Return "wrong password" message.
       dispatch(snackbar.error(messages.invalidCredentials));

app/soapbox/actions/me.ts

@@ -6,7 +6,7 @@ import api from '../api';
 import { loadCredentials } from './auth';
 import { importFetchedAccount } from './importer';
 
-import type { AxiosError } from 'axios';
+import type { AxiosError, AxiosRequestHeaders } from 'axios';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity } from 'soapbox/types/entities';
 
@@ -62,12 +62,16 @@ const persistAuthAccount = (account: APIEntity, params: Record<string, any>) =>
   }
 };
 
-const patchMe = (params: Record<string, any>) =>
+const patchMe = (params: Record<string, any>, isFormData = false) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch(patchMeRequest());
 
+    const headers: AxiosRequestHeaders = isFormData ? {
+      'Content-Type': 'multipart/form-data',
+    } : {};
+
     return api(getState)
-      .patch('/api/v1/accounts/update_credentials', params)
+      .patch('/api/v1/accounts/update_credentials', params, { headers })
       .then(response => {
         persistAuthAccount(response.data, params);
         dispatch(patchMeSuccess(response.data));

app/soapbox/actions/moderation.tsx

@@ -44,7 +44,7 @@ const deactivateUserModal = (intl: IntlShape, accountId: string, afterConfirm =
     const name = state.accounts.get(accountId)!.username;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/user-off.svg'),
+      icon: require('@tabler/icons/user-off.svg'),
       heading: intl.formatMessage(messages.deactivateUserHeading, { acct }),
       message: intl.formatMessage(messages.deactivateUserPrompt, { acct }),
       confirm: intl.formatMessage(messages.deactivateUserConfirm, { name }),
@@ -83,7 +83,7 @@ const deleteUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const checkbox = local ? intl.formatMessage(messages.deleteLocalUserCheckbox) : false;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/user-minus.svg'),
+      icon: require('@tabler/icons/user-minus.svg'),
       heading: intl.formatMessage(messages.deleteUserHeading, { acct }),
       message,
       confirm,
@@ -106,7 +106,7 @@ const rejectUserModal = (intl: IntlShape, accountId: string, afterConfirm = () =
     const name = state.accounts.get(accountId)!.username;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/user-off.svg'),
+      icon: require('@tabler/icons/user-off.svg'),
       heading: intl.formatMessage(messages.rejectUserHeading, { acct }),
       message: intl.formatMessage(messages.rejectUserPrompt, { acct }),
       confirm: intl.formatMessage(messages.rejectUserConfirm, { name }),
@@ -127,7 +127,7 @@ const toggleStatusSensitivityModal = (intl: IntlShape, statusId: string, sensiti
     const acct = state.accounts.get(accountId)!.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/alert-triangle.svg'),
+      icon: require('@tabler/icons/alert-triangle.svg'),
       heading: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveHeading : messages.markStatusNotSensitiveHeading),
       message: intl.formatMessage(sensitive === false ? messages.markStatusSensitivePrompt : messages.markStatusNotSensitivePrompt, { acct }),
       confirm: intl.formatMessage(sensitive === false ? messages.markStatusSensitiveConfirm : messages.markStatusNotSensitiveConfirm),
@@ -148,7 +148,7 @@ const deleteStatusModal = (intl: IntlShape, statusId: string, afterConfirm = ()
     const acct = state.accounts.get(accountId)!.acct;
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/trash.svg'),
+      icon: require('@tabler/icons/trash.svg'),
       heading: intl.formatMessage(messages.deleteStatusHeading),
       message: intl.formatMessage(messages.deleteStatusPrompt, { acct }),
       confirm: intl.formatMessage(messages.deleteStatusConfirm),

app/soapbox/actions/notifications.ts

@@ -89,6 +89,7 @@ const updateNotifications = (notification: APIEntity) =>
 
 const updateNotificationsQueue = (notification: APIEntity, intlMessages: Record<string, string>, intlLocale: string, curPath: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!notification.type) return; // drop invalid notifications
     if (notification.type === 'pleroma:chat_mention') return; // Drop chat notifications, handle them per-chat
 
     const showAlert = getSettings(getState()).getIn(['notifications', 'alerts', notification.type]);

app/soapbox/actions/suggestions.ts

@@ -1,3 +1,5 @@
+import { AxiosResponse } from 'axios';
+
 import { isLoggedIn } from 'soapbox/utils/auth';
 import { getFeatures } from 'soapbox/utils/features';
 
@@ -5,6 +7,7 @@ import api, { getLinks } from '../api';
 
 import { fetchRelationships } from './accounts';
 import { importFetchedAccounts } from './importer';
+import { insertSuggestionsIntoTimeline } from './timelines';
 
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { APIEntity } from 'soapbox/types/entities';
@@ -19,6 +22,10 @@ const SUGGESTIONS_V2_FETCH_REQUEST = 'SUGGESTIONS_V2_FETCH_REQUEST';
 const SUGGESTIONS_V2_FETCH_SUCCESS = 'SUGGESTIONS_V2_FETCH_SUCCESS';
 const SUGGESTIONS_V2_FETCH_FAIL = 'SUGGESTIONS_V2_FETCH_FAIL';
 
+const SUGGESTIONS_TRUTH_FETCH_REQUEST = 'SUGGESTIONS_TRUTH_FETCH_REQUEST';
+const SUGGESTIONS_TRUTH_FETCH_SUCCESS = 'SUGGESTIONS_TRUTH_FETCH_SUCCESS';
+const SUGGESTIONS_TRUTH_FETCH_FAIL = 'SUGGESTIONS_TRUTH_FETCH_FAIL';
+
 const fetchSuggestionsV1 = (params: Record<string, any> = {}) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: SUGGESTIONS_FETCH_REQUEST, skipLoading: true });
@@ -52,6 +59,48 @@ const fetchSuggestionsV2 = (params: Record<string, any> = {}) =>
     });
   };
 
+export type SuggestedProfile = {
+  account_avatar: string
+  account_id: string
+  acct: string
+  display_name: string
+  note: string
+  verified: boolean
+}
+
+const mapSuggestedProfileToAccount = (suggestedProfile: SuggestedProfile) => ({
+  id: suggestedProfile.account_id,
+  avatar: suggestedProfile.account_avatar,
+  avatar_static: suggestedProfile.account_avatar,
+  acct: suggestedProfile.acct,
+  display_name: suggestedProfile.display_name,
+  note: suggestedProfile.note,
+  verified: suggestedProfile.verified,
+});
+
+const fetchTruthSuggestions = (params: Record<string, any> = {}) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const next = getState().suggestions.next;
+
+    dispatch({ type: SUGGESTIONS_V2_FETCH_REQUEST, skipLoading: true });
+
+    return api(getState)
+      .get(next ? next : '/api/v1/truth/carousels/suggestions', next ? {} : { params })
+      .then((response: AxiosResponse<SuggestedProfile[]>) => {
+        const suggestedProfiles = response.data;
+        const next = getLinks(response).refs.find(link => link.rel === 'next')?.uri;
+
+        const accounts = suggestedProfiles.map(mapSuggestedProfileToAccount);
+        dispatch(importFetchedAccounts(accounts));
+        dispatch({ type: SUGGESTIONS_TRUTH_FETCH_SUCCESS, suggestions: suggestedProfiles, next, skipLoading: true });
+        return suggestedProfiles;
+      })
+      .catch(error => {
+        dispatch({ type: SUGGESTIONS_V2_FETCH_FAIL, error, skipLoading: true, skipAlert: true });
+        throw error;
+      });
+  };
+
 const fetchSuggestions = (params: Record<string, any> = { limit: 50 }) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const state = getState();
@@ -59,17 +108,24 @@ const fetchSuggestions = (params: Record<string, any> = { limit: 50 }) =>
     const instance = state.instance;
     const features = getFeatures(instance);
 
-    if (!me) return;
+    if (!me) return null;
 
-    if (features.suggestionsV2) {
+    if (features.truthSuggestions) {
-      dispatch(fetchSuggestionsV2(params))
+      return dispatch(fetchTruthSuggestions(params))
+        .then((suggestions: APIEntity[]) => {
+          const accountIds = suggestions.map((account) => account.account_id);
+          dispatch(fetchRelationships(accountIds));
+        })
+        .catch(() => { });
+    } else if (features.suggestionsV2) {
+      return dispatch(fetchSuggestionsV2(params))
         .then((suggestions: APIEntity[]) => {
           const accountIds = suggestions.map(({ account }) => account.id);
           dispatch(fetchRelationships(accountIds));
         })
         .catch(() => { });
     } else if (features.suggestions) {
-      dispatch(fetchSuggestionsV1(params))
+      return dispatch(fetchSuggestionsV1(params))
         .then((accounts: APIEntity[]) => {
           const accountIds = accounts.map(({ id }) => id);
           dispatch(fetchRelationships(accountIds));
@@ -77,9 +133,14 @@ const fetchSuggestions = (params: Record<string, any> = { limit: 50 }) =>
         .catch(() => { });
     } else {
       // Do nothing
+      return null;
     }
   };
 
+const fetchSuggestionsForTimeline = () => (dispatch: AppDispatch, _getState: () => RootState) => {
+  dispatch(fetchSuggestions({ limit: 20 }))?.then(() => dispatch(insertSuggestionsIntoTimeline()));
+};
+
 const dismissSuggestion = (accountId: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     if (!isLoggedIn(getState)) return;
@@ -100,8 +161,12 @@ export {
   SUGGESTIONS_V2_FETCH_REQUEST,
   SUGGESTIONS_V2_FETCH_SUCCESS,
   SUGGESTIONS_V2_FETCH_FAIL,
+  SUGGESTIONS_TRUTH_FETCH_REQUEST,
+  SUGGESTIONS_TRUTH_FETCH_SUCCESS,
+  SUGGESTIONS_TRUTH_FETCH_FAIL,
   fetchSuggestionsV1,
   fetchSuggestionsV2,
   fetchSuggestions,
+  fetchSuggestionsForTimeline,
   dismissSuggestion,
 };

app/soapbox/actions/timelines.ts

@@ -27,6 +27,7 @@ const TIMELINE_CONNECT    = 'TIMELINE_CONNECT';
 const TIMELINE_DISCONNECT = 'TIMELINE_DISCONNECT';
 
 const TIMELINE_REPLACE = 'TIMELINE_REPLACE';
+const TIMELINE_INSERT = 'TIMELINE_INSERT';
 
 const MAX_QUEUED_ITEMS = 40;
 
@@ -127,7 +128,7 @@ const clearTimeline = (timeline: string) =>
   (dispatch: AppDispatch) =>
     dispatch({ type: TIMELINE_CLEAR, timeline });
 
-const noOp = () => {};
+const noOp = () => { };
 const noOpAsync = () => () => new Promise(f => f(undefined));
 
 const parseTags = (tags: Record<string, any[]> = {}, mode: 'any' | 'all' | 'none') => {
@@ -141,7 +142,7 @@ const replaceHomeTimeline = (
   { maxId }: Record<string, any> = {},
 ) => (dispatch: AppDispatch, _getState: () => RootState) => {
   dispatch({ type: TIMELINE_REPLACE, accountId });
-  dispatch(expandHomeTimeline({ accountId, maxId }));
+  dispatch(expandHomeTimeline({ accountId, maxId }, () => dispatch(insertSuggestionsIntoTimeline())));
 };
 
 const expandTimeline = (timelineId: string, path: string, params: Record<string, any> = {}, done = noOp) =>
@@ -259,6 +260,10 @@ const scrollTopTimeline = (timeline: string, top: boolean) => ({
   top,
 });
 
+const insertSuggestionsIntoTimeline = () => (dispatch: AppDispatch, getState: () => RootState) => {
+  dispatch({ type: TIMELINE_INSERT, timeline: 'home' });
+};
+
 export {
   TIMELINE_UPDATE,
   TIMELINE_DELETE,
@@ -272,6 +277,7 @@ export {
   TIMELINE_CONNECT,
   TIMELINE_DISCONNECT,
   TIMELINE_REPLACE,
+  TIMELINE_INSERT,
   MAX_QUEUED_ITEMS,
   processTimelineUpdate,
   updateTimeline,
@@ -298,4 +304,5 @@ export {
   connectTimeline,
   disconnectTimeline,
   scrollTopTimeline,
+  insertSuggestionsIntoTimeline,
 };

app/soapbox/components/__tests__/account.test.tsx

@@ -5,6 +5,8 @@ import { render, screen } from '../../jest/test-helpers';
 import { normalizeAccount } from '../../normalizers';
 import Account from '../account';
 
+import type { ReducerAccount } from 'soapbox/reducers/accounts';
+
 describe('<Account />', () => {
   it('renders account name and username', () => {
     const account = normalizeAccount({
@@ -12,7 +14,7 @@ describe('<Account />', () => {
       acct: 'justin-username',
       display_name: 'Justin L',
       avatar: 'test.jpg',
-    });
+    }) as ReducerAccount;
 
     const store = {
       accounts: ImmutableMap({
@@ -20,7 +22,7 @@ describe('<Account />', () => {
       }),
     };
 
-    render(<Account account={account} />, null, store);
+    render(<Account account={account} />, undefined, store);
     expect(screen.getByTestId('account')).toHaveTextContent('Justin L');
     expect(screen.getByTestId('account')).toHaveTextContent(/justin-username/i);
   });
@@ -33,7 +35,7 @@ describe('<Account />', () => {
         display_name: 'Justin L',
         avatar: 'test.jpg',
         verified: true,
-      });
+      }) as ReducerAccount;
 
       const store = {
         accounts: ImmutableMap({
@@ -41,7 +43,7 @@ describe('<Account />', () => {
         }),
       };
 
-      render(<Account account={account} />, null, store);
+      render(<Account account={account} />, undefined, store);
       expect(screen.getByTestId('verified-badge')).toBeInTheDocument();
     });
 
@@ -52,7 +54,7 @@ describe('<Account />', () => {
         display_name: 'Justin L',
         avatar: 'test.jpg',
         verified: false,
-      });
+      }) as ReducerAccount;
 
       const store = {
         accounts: ImmutableMap({
@@ -60,7 +62,7 @@ describe('<Account />', () => {
         }),
       };
 
-      render(<Account account={account} />, null, store);
+      render(<Account account={account} />, undefined, store);
       expect(screen.queryAllByTestId('verified-badge')).toHaveLength(0);
     });
   });

app/soapbox/components/__tests__/avatar.test.tsx

@@ -5,6 +5,8 @@ import { normalizeAccount } from 'soapbox/normalizers';
 import { render, screen } from '../../jest/test-helpers';
 import Avatar from '../avatar';
 
+import type { ReducerAccount } from 'soapbox/reducers/accounts';
+
 describe('<Avatar />', () => {
   const account = normalizeAccount({
     username: 'alice',
@@ -12,7 +14,7 @@ describe('<Avatar />', () => {
     display_name: 'Alice',
     avatar: '/animated/alice.gif',
     avatar_static: '/static/alice.jpg',
-  });
+  }) as ReducerAccount;
 
   const size = 100;
 

app/soapbox/components/__tests__/avatar_overlay.test.tsx

@@ -1,25 +1,28 @@
-import { fromJS } from 'immutable';
 import React from 'react';
 
+import { normalizeAccount } from 'soapbox/normalizers';
+
 import { render, screen } from '../../jest/test-helpers';
 import AvatarOverlay from '../avatar_overlay';
 
+import type { ReducerAccount } from 'soapbox/reducers/accounts';
+
 describe('<AvatarOverlay', () => {
-  const account = fromJS({
+  const account = normalizeAccount({
     username: 'alice',
     acct: 'alice',
     display_name: 'Alice',
     avatar: '/animated/alice.gif',
     avatar_static: '/static/alice.jpg',
-  });
+  }) as ReducerAccount;
 
-  const friend = fromJS({
+  const friend = normalizeAccount({
     username: 'eve',
     acct: 'eve@blackhat.lair',
     display_name: 'Evelyn',
     avatar: '/animated/eve.gif',
     avatar_static: '/static/eve.jpg',
-  });
+  }) as ReducerAccount;
 
   it('renders a overlay avatar', () => {
     render(<AvatarOverlay account={account} friend={friend} />);

app/soapbox/components/__tests__/display_name.test.tsx

@@ -5,9 +5,11 @@ import { normalizeAccount } from 'soapbox/normalizers';
 import { render, screen } from '../../jest/test-helpers';
 import DisplayName from '../display-name';
 
+import type { ReducerAccount } from 'soapbox/reducers/accounts';
+
 describe('<DisplayName />', () => {
   it('renders display name + account name', () => {
-    const account = normalizeAccount({ acct: 'bar@baz' });
+    const account = normalizeAccount({ acct: 'bar@baz' }) as ReducerAccount;
     render(<DisplayName account={account} />);
 
     expect(screen.getByTestId('display-name')).toHaveTextContent('bar@baz');

app/soapbox/components/__tests__/emoji_selector.test.tsx

@@ -6,6 +6,7 @@ import EmojiSelector from '../emoji_selector';
 describe('<EmojiSelector />', () => {
   it('renders correctly', () => {
     const children = <EmojiSelector />;
+    // @ts-ignore
     children.__proto__.addEventListener = () => {};
 
     render(children);

app/soapbox/components/__tests__/quoted-status.test.tsx

@@ -4,6 +4,8 @@ import { render, screen, rootState } from '../../jest/test-helpers';
 import { normalizeStatus, normalizeAccount } from '../../normalizers';
 import QuotedStatus from '../quoted-status';
 
+import type { ReducerStatus } from 'soapbox/reducers/statuses';
+
 describe('<QuotedStatus />', () => {
   it('renders content', () => {
     const account = normalizeAccount({
@@ -16,11 +18,11 @@ describe('<QuotedStatus />', () => {
       account,
       content: 'hello world',
       contentHtml: 'hello world',
-    });
+    }) as ReducerStatus;
 
-    const state = rootState.setIn(['accounts', '1', account]);
+    const state = rootState.setIn(['accounts', '1'], account);
 
-    render(<QuotedStatus status={status} />, null, state);
+    render(<QuotedStatus status={status} />, undefined, state);
     screen.getByText(/hello world/i);
     expect(screen.getByTestId('quoted-status')).toHaveTextContent(/hello world/i);
   });

app/soapbox/components/__tests__/scroll-top-button.test.tsx

@@ -28,7 +28,7 @@ describe('<ScrollTopButton />', () => {
         message={messages.queue}
       />,
     );
-    expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('Click to see 1 new post')).toBeInTheDocument();
 
     render(
       <ScrollTopButton
@@ -38,6 +38,6 @@ describe('<ScrollTopButton />', () => {
         message={messages.queue}
       />,
     );
-    expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument();
+    expect(screen.getByText('Click to see 9999999 new posts')).toBeInTheDocument();
   });
 });

app/soapbox/components/account.tsx

@@ -9,7 +9,7 @@ import { getAcct } from 'soapbox/utils/accounts';
 import { displayFqn } from 'soapbox/utils/state';
 
 import RelativeTimestamp from './relative_timestamp';
-import { Avatar, Emoji, HStack, Icon, IconButton, Text } from './ui';
+import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
@@ -57,7 +57,9 @@ interface IAccount {
   timestamp?: string | Date,
   timestampUrl?: string,
   futureTimestamp?: boolean,
+  withAccountNote?: boolean,
   withDate?: boolean,
+  withLinkToProfile?: boolean,
   withRelationship?: boolean,
   showEdit?: boolean,
   emoji?: string,
@@ -78,7 +80,9 @@ const Account = ({
   timestamp,
   timestampUrl,
   futureTimestamp = false,
+  withAccountNote = false,
   withDate = false,
+  withLinkToProfile = true,
   withRelationship = true,
   showEdit = false,
   emoji,
@@ -154,12 +158,12 @@ const Account = ({
 
   if (withDate) timestamp = account.created_at;
 
-  const LinkEl: any = showProfileHoverCard ? Link : 'div';
+  const LinkEl: any = withLinkToProfile ? Link : 'div';
 
   return (
     <div data-testid='account' className='flex-shrink-0 group block w-full' ref={overflowRef}>
       <HStack alignItems={actionAlignment} justifyContent='between'>
-        <HStack alignItems='center' space={3} grow>
+        <HStack alignItems={withAccountNote ? 'top' : 'center'} space={3}>
           <ProfilePopper
             condition={showProfileHoverCard}
             wrapper={(children) => <HoverRefWrapper className='relative' accountId={account.id} inline>{children}</HoverRefWrapper>}
@@ -202,6 +206,7 @@ const Account = ({
               </LinkEl>
             </ProfilePopper>
 
+            <Stack space={withAccountNote ? 1 : 0}>
               <HStack alignItems='center' space={1} style={style}>
                 <Text theme='muted' size='sm' truncate>@{username}</Text>
 
@@ -227,10 +232,19 @@ const Account = ({
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text>
 
-                  <Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/icons/pencil.svg')} />
+                    <Icon className='h-5 w-5 stroke-[1.35]' src={require('@tabler/icons/pencil.svg')} />
                   </>
                 ) : null}
               </HStack>
+
+              {withAccountNote && (
+                <Text
+                  size='sm'
+                  dangerouslySetInnerHTML={{ __html: account.note_emojified }}
+                  className='mr-2'
+                />
+              )}
+            </Stack>
           </div>
         </HStack>
 

app/soapbox/components/account_search.tsx

@@ -70,8 +70,8 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
         />
       </label>
       <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );

app/soapbox/components/birthday_input.tsx

@@ -70,7 +70,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         <div className='flex items-center justify-between'>
           <IconButton
             className='datepicker__button'
-            src={require('@tabler/icons/icons/chevron-left.svg')}
+            src={require('@tabler/icons/chevron-left.svg')}
             onClick={decreaseMonth}
             disabled={prevMonthButtonDisabled}
             aria-label={intl.formatMessage(messages.previousMonth)}
@@ -79,7 +79,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
           {intl.formatDate(date, { month: 'long' })}
           <IconButton
             className='datepicker__button'
-            src={require('@tabler/icons/icons/chevron-right.svg')}
+            src={require('@tabler/icons/chevron-right.svg')}
             onClick={increaseMonth}
             disabled={nextMonthButtonDisabled}
             aria-label={intl.formatMessage(messages.nextMonth)}
@@ -89,7 +89,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
         <div className='flex items-center justify-between'>
           <IconButton
             className='datepicker__button'
-            src={require('@tabler/icons/icons/chevron-left.svg')}
+            src={require('@tabler/icons/chevron-left.svg')}
             onClick={decreaseYear}
             disabled={prevYearButtonDisabled}
             aria-label={intl.formatMessage(messages.previousYear)}
@@ -98,7 +98,7 @@ const BirthdayInput: React.FC<IBirthdayInput> = ({ value, onChange, required })
           {intl.formatDate(date, { year: 'numeric' })}
           <IconButton
             className='datepicker__button'
-            src={require('@tabler/icons/icons/chevron-right.svg')}
+            src={require('@tabler/icons/chevron-right.svg')}
             onClick={increaseYear}
             disabled={nextYearButtonDisabled}
             aria-label={intl.formatMessage(messages.nextYear)}

app/soapbox/components/display-name.tsx

@@ -22,7 +22,7 @@ const DisplayName: React.FC<IDisplayName> = ({ account, children, withDate = fal
 
   const joinedAt = createdAt ? (
     <div className='account__joined-at'>
-      <Icon src={require('@tabler/icons/icons/clock.svg')} />
+      <Icon src={require('@tabler/icons/clock.svg')} />
       <RelativeTimestamp timestamp={createdAt} />
     </div>
   ) : null;

app/soapbox/components/domain.tsx

@@ -21,7 +21,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
 
   // const onBlockDomain = () => {
   //   dispatch(openModal('CONFIRM', {
-  //     icon: require('@tabler/icons/icons/ban.svg'),
+  //     icon: require('@tabler/icons/ban.svg'),
   //     heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
   //     message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.' values={{ domain: <strong>{domain}</strong> }} />,
   //     confirm: intl.formatMessage(messages.blockDomainConfirm),
@@ -41,7 +41,7 @@ const Domain: React.FC<IDomain> = ({ domain }) => {
         </span>
 
         <div className='domain__buttons'>
-          <IconButton active src={require('@tabler/icons/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
+          <IconButton active src={require('@tabler/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={handleDomainUnblock} />
         </div>
       </div>
     </div>

app/soapbox/components/dropdown_menu.tsx

@@ -366,7 +366,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
   }
 
   render() {
-    const { src = require('@tabler/icons/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
+    const { src = require('@tabler/icons/dots.svg'), items, title, disabled, dropdownPlacement, openDropdownId, openedViaKeyboard = false, pressed, text, children } = this.props;
     const open = this.state.id === openDropdownId;
 
     return (

app/soapbox/components/error_boundary.tsx

@@ -120,7 +120,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
               {logo ? (
                 <img className='h-12' src={logo} alt={siteTitle} />
               ) : (
-                <SvgIcon className='h-12 w-12' src={require('@tabler/icons/icons/home.svg')} alt={siteTitle} />
+                <SvgIcon className='h-12 w-12' src={require('@tabler/icons/home.svg')} alt={siteTitle} />
               )}
             </a>
           </div>

app/soapbox/components/list.tsx

@@ -54,7 +54,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick }) => {
         <div className='flex flex-row items-center text-gray-500 dark:text-gray-400'>
           {children}
 
-          <Icon src={require('@tabler/icons/icons/chevron-right.svg')} className='ml-1' />
+          <Icon src={require('@tabler/icons/chevron-right.svg')} className='ml-1' />
         </div>
       ) : renderChildren()}
     </Comp>

app/soapbox/components/media_gallery.js

@@ -149,7 +149,7 @@ class Item extends React.PureComponent {
       const attachmentIcon = (
         <Icon
           className='h-16 w-16 text-gray-800 dark:text-gray-200'
-          src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/icons/paperclip.svg')}
+          src={MIMETYPE_ICONS[attachment.getIn(['pleroma', 'mime_type'])] || require('@tabler/icons/paperclip.svg')}
         />
       );
 
@@ -602,7 +602,7 @@ class MediaGallery extends React.PureComponent {
             (visible || compact) ? (
               <Button
                 text={intl.formatMessage(messages.toggle_visible)}
-                icon={visible ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
+                icon={visible ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
                 onClick={this.handleOpen}
                 theme='transparent'
                 size='sm'
@@ -617,7 +617,7 @@ class MediaGallery extends React.PureComponent {
                     </Text>
                   </div>
 
-                  <Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/icons/eye.svg')}>
+                  <Button type='button' theme='primary' size='sm' icon={require('@tabler/icons/eye.svg')}>
                     <FormattedMessage id='status.sensitive_warning.action' defaultMessage='Show content' />
                   </Button>
                 </div>

app/soapbox/components/modal_root.js

@@ -78,7 +78,7 @@ class ModalRoot extends React.PureComponent {
 
     if (hasComposeContent && type === 'COMPOSE') {
       onOpenModal('CONFIRM', {
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         heading: isEditing ? <FormattedMessage id='confirmations.cancel_editing.heading' defaultMessage='Cancel post editing' /> : <FormattedMessage id='confirmations.delete.heading' defaultMessage='Delete post' />,
         message: isEditing ? <FormattedMessage id='confirmations.cancel_editing.message' defaultMessage='Are you sure you want to cancel editing this post? All changes will be lost.' /> : <FormattedMessage id='confirmations.delete.message' defaultMessage='Are you sure you want to delete this post?' />,
         confirm: intl.formatMessage(messages.confirm),

app/soapbox/components/polls/__tests__/poll-footer.test.tsx

@@ -6,7 +6,7 @@ import { Provider } from 'react-redux';
 import { __stub } from 'soapbox/api';
 import { normalizePoll } from 'soapbox/normalizers/poll';
 
-import { mockStore, render, rootReducer, screen } from '../../../jest/test-helpers';
+import { mockStore, render, screen, rootState } from '../../../jest/test-helpers';
 import PollFooter from '../poll-footer';
 
 let poll = normalizePoll({
@@ -36,7 +36,7 @@ describe('<PollFooter />', () => {
       });
 
       const user = userEvent.setup();
-      const store = mockStore(rootReducer(undefined, {}));
+      const store = mockStore(rootState);
       render(
         <Provider store={store}>
           <IntlProvider locale='en'>

app/soapbox/components/polls/poll-option.tsx

@@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
+              <Icon src={require('@tabler/icons/check.svg')} className='text-white dark:text-primary-900 w-4 h-4' />
             )}
           </span>
         </div>
@@ -138,7 +138,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
             <HStack space={2} alignItems='center' className='relative'>
               {voted ? (
                 <Icon
-                  src={require('@tabler/icons/icons/circle-check.svg')}
+                  src={require('@tabler/icons/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
                   className='text-primary-600 dark:text-primary-800 dark:fill-white w-4 h-4'
                 />

app/soapbox/components/quoted-status.tsx

@@ -116,7 +116,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   if (onCancel) {
     actions = {
       onActionClick: handleClose,
-      actionIcon: require('@tabler/icons/icons/x.svg'),
+      actionIcon: require('@tabler/icons/x.svg'),
       actionAlignment: 'top',
       actionTitle: intl.formatMessage(messages.cancel),
     };
@@ -137,6 +137,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
         timestamp={status.created_at}
         withRelationship={false}
         showProfileHoverCard={!compose}
+        withLinkToProfile={!compose}
       />
 
       {renderReplyMentions()}

app/soapbox/components/scroll-top-button.tsx

@@ -34,6 +34,12 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
   const [scrolled, setScrolled] = useState<boolean>(false);
   const autoload = settings.get('autoloadTimelines') === true;
 
+  const visible = count > 0 && scrolled;
+
+  const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
+    'hidden': !visible,
+  });
+
   const getScrollTop = (): number => {
     return (document.scrollingElement || document.documentElement).scrollTop;
   };
@@ -75,16 +81,10 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
     maybeUnload();
   }, [count]);
 
-  const visible = count > 0 && scrolled;
-
-  const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
-    'hidden': !visible,
-  });
-
   return (
     <div className={classes}>
       <a className='flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer whitespace-nowrap' onClick={handleClick}>
-        <Icon src={require('@tabler/icons/icons/arrow-bar-to-up.svg')} />
+        <Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
 
         {(count > 0) && (
           <Text theme='inherit' size='sm'>

app/soapbox/components/sidebar-navigation.tsx

@@ -43,7 +43,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/follow_requests',
           text: intl.formatMessage(messages.follow_requests),
-          icon: require('@tabler/icons/icons/user-plus.svg'),
+          icon: require('@tabler/icons/user-plus.svg'),
           count: followRequestsCount,
         });
       }
@@ -52,7 +52,7 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/bookmarks',
           text: intl.formatMessage(messages.bookmarks),
-          icon: require('@tabler/icons/icons/bookmark.svg'),
+          icon: require('@tabler/icons/bookmark.svg'),
         });
       }
 
@@ -60,14 +60,14 @@ const SidebarNavigation = () => {
         menu.push({
           to: '/lists',
           text: intl.formatMessage(messages.lists),
-          icon: require('@tabler/icons/icons/list.svg'),
+          icon: require('@tabler/icons/list.svg'),
         });
       }
 
       if (settings.get('isDeveloper')) {
         menu.push({
           to: '/developers',
-          icon: require('@tabler/icons/icons/code.svg'),
+          icon: require('@tabler/icons/code.svg'),
           text: intl.formatMessage(messages.developers),
         });
       }
@@ -75,7 +75,7 @@ const SidebarNavigation = () => {
       if (account.staff) {
         menu.push({
           to: '/soapbox/admin',
-          icon: require('@tabler/icons/icons/dashboard.svg'),
+          icon: require('@tabler/icons/dashboard.svg'),
           text: intl.formatMessage(messages.dashboard),
           count: dashboardCount,
         });
@@ -89,7 +89,7 @@ const SidebarNavigation = () => {
     if (features.publicTimeline) {
       menu.push({
         to: '/timeline/local',
-        icon: features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg'),
+        icon: features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg'),
         text: features.federating ? instance.title : intl.formatMessage(messages.all),
       });
     }
@@ -113,7 +113,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/chats'
-          icon={require('@tabler/icons/icons/messages.svg')}
+          icon={require('@tabler/icons/messages.svg')}
           count={chatsCount}
           text={<FormattedMessage id='tabs_bar.chats' defaultMessage='Chats' />}
         />
@@ -124,7 +124,7 @@ const SidebarNavigation = () => {
       return (
         <SidebarNavigationLink
           to='/messages'
-          icon={require('@tabler/icons/icons/mail.svg')}
+          icon={require('@tabler/icons/mail.svg')}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
         />
       );
@@ -138,13 +138,13 @@ const SidebarNavigation = () => {
       <div className='flex flex-col space-y-2'>
         <SidebarNavigationLink
           to='/'
-          icon={require('@tabler/icons/icons/home.svg')}
+          icon={require('@tabler/icons/home.svg')}
           text={<FormattedMessage id='tabs_bar.home' defaultMessage='Home' />}
         />
 
         <SidebarNavigationLink
           to='/search'
-          icon={require('@tabler/icons/icons/search.svg')}
+          icon={require('@tabler/icons/search.svg')}
           text={<FormattedMessage id='tabs_bar.search' defaultMessage='Search' />}
         />
 
@@ -152,7 +152,7 @@ const SidebarNavigation = () => {
           <>
             <SidebarNavigationLink
               to='/notifications'
-              icon={require('@tabler/icons/icons/bell.svg')}
+              icon={require('@tabler/icons/bell.svg')}
               count={notificationCount}
               text={<FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' />}
             />
@@ -161,13 +161,13 @@ const SidebarNavigation = () => {
 
             <SidebarNavigationLink
               to={`/@${account.acct}`}
-              icon={require('@tabler/icons/icons/user.svg')}
+              icon={require('@tabler/icons/user.svg')}
               text={<FormattedMessage id='tabs_bar.profile' defaultMessage='Profile' />}
             />
 
             <SidebarNavigationLink
               to='/settings'
-              icon={require('@tabler/icons/icons/settings.svg')}
+              icon={require('@tabler/icons/settings.svg')}
               text={<FormattedMessage id='tabs_bar.settings' defaultMessage='Settings' />}
             />
           </>
@@ -176,7 +176,7 @@ const SidebarNavigation = () => {
         {menu.length > 0 && (
           <DropdownMenu items={menu}>
             <SidebarNavigationLink
-              icon={require('@tabler/icons/icons/dots-circle-horizontal.svg')}
+              icon={require('@tabler/icons/dots-circle-horizontal.svg')}
               count={dashboardCount}
               text={<FormattedMessage id='tabs_bar.more' defaultMessage='More' />}
             />

app/soapbox/components/sidebar_menu.tsx

@@ -121,7 +121,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const renderAccount = (account: AccountEntity) => (
     <a href='#' className='block py-2' onClick={handleSwitchAccount(account)} key={account.id}>
       <div className='pointer-events-none'>
-        <Account account={account} showProfileHoverCard={false} withRelationship={false} />
+        <Account account={account} showProfileHoverCard={false} withRelationship={false} withLinkToProfile={false} />
       </div>
     </a>
   );
@@ -158,7 +158,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 <IconButton
                   title='close'
                   onClick={handleClose}
-                  src={require('@tabler/icons/icons/x.svg')}
+                  src={require('@tabler/icons/x.svg')}
                   ref={closeButtonRef}
                   className='text-gray-400 hover:text-gray-600'
                 />
@@ -166,7 +166,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
               <Stack space={1}>
                 <Link to={`/@${account.acct}`} onClick={onClose}>
-                  <Account account={account} showProfileHoverCard={false} />
+                  <Account account={account} showProfileHoverCard={false} withLinkToProfile={false} />
                 </Link>
 
                 <Stack>
@@ -177,7 +177,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                       </Text>
 
                       <Icon
-                        src={require('@tabler/icons/icons/chevron-down.svg')}
+                        src={require('@tabler/icons/chevron-down.svg')}
                         className={classNames('text-black dark:text-white transition-transform', {
                           'rotate-180': switcher,
                         })}
@@ -190,7 +190,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                       {otherAccounts.map(account => renderAccount(account))}
 
                       <NavLink className='flex py-2 space-x-1' to='/login/add' onClick={handleClose}>
-                        <Icon className='dark:text-white' src={require('@tabler/icons/icons/plus.svg')} />
+                        <Icon className='dark:text-white' src={require('@tabler/icons/plus.svg')} />
                         <Text>{intl.formatMessage(messages.addAccount)}</Text>
                       </NavLink>
                     </div>
@@ -208,7 +208,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                 <SidebarLink
                   to={`/@${account.acct}`}
-                  icon={require('@tabler/icons/icons/user.svg')}
+                  icon={require('@tabler/icons/user.svg')}
                   text={intl.formatMessage(messages.profile)}
                   onClick={onClose}
                 />
@@ -216,7 +216,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.bookmarks && (
                   <SidebarLink
                     to='/bookmarks'
-                    icon={require('@tabler/icons/icons/bookmark.svg')}
+                    icon={require('@tabler/icons/bookmark.svg')}
                     text={intl.formatMessage(messages.bookmarks)}
                     onClick={onClose}
                   />
@@ -225,7 +225,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.lists && (
                   <SidebarLink
                     to='/lists'
-                    icon={require('@tabler/icons/icons/list.svg')}
+                    icon={require('@tabler/icons/list.svg')}
                     text={intl.formatMessage(messages.lists)}
                     onClick={onClose}
                   />
@@ -234,7 +234,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {settings.get('isDeveloper') && (
                   <SidebarLink
                     to='/developers'
-                    icon={require('@tabler/icons/icons/code.svg')}
+                    icon={require('@tabler/icons/code.svg')}
                     text={intl.formatMessage(messages.developers)}
                     onClick={onClose}
                   />
@@ -245,7 +245,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   <SidebarLink
                     to='/timeline/local'
-                    icon={features.federating ? require('@tabler/icons/icons/users.svg') : require('@tabler/icons/icons/world.svg')}
+                    icon={features.federating ? require('@tabler/icons/users.svg') : require('@tabler/icons/world.svg')}
                     text={features.federating ? instance.title : <FormattedMessage id='tabs_bar.all' defaultMessage='All' />}
                     onClick={onClose}
                   />
@@ -264,21 +264,21 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                 <SidebarLink
                   to='/blocks'
-                  icon={require('@tabler/icons/icons/ban.svg')}
+                  icon={require('@tabler/icons/ban.svg')}
                   text={intl.formatMessage(messages.blocks)}
                   onClick={onClose}
                 />
 
                 <SidebarLink
                   to='/mutes'
-                  icon={require('@tabler/icons/icons/circle-x.svg')}
+                  icon={require('@tabler/icons/circle-x.svg')}
                   text={intl.formatMessage(messages.mutes)}
                   onClick={onClose}
                 />
 
                 <SidebarLink
                   to='/settings/preferences'
-                  icon={require('@tabler/icons/icons/settings.svg')}
+                  icon={require('@tabler/icons/settings.svg')}
                   text={intl.formatMessage(messages.preferences)}
                   onClick={onClose}
                 />
@@ -286,7 +286,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.federating && (
                   <SidebarLink
                     to='/domain_blocks'
-                    icon={require('@tabler/icons/icons/ban.svg')}
+                    icon={require('@tabler/icons/ban.svg')}
                     text={intl.formatMessage(messages.domainBlocks)}
                     onClick={onClose}
                   />
@@ -295,7 +295,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.filters && (
                   <SidebarLink
                     to='/filters'
-                    icon={require('@tabler/icons/icons/filter.svg')}
+                    icon={require('@tabler/icons/filter.svg')}
                     text={intl.formatMessage(messages.filters)}
                     onClick={onClose}
                   />
@@ -304,7 +304,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {account.admin && (
                   <SidebarLink
                     to='/soapbox/config'
-                    icon={require('@tabler/icons/icons/settings.svg')}
+                    icon={require('@tabler/icons/settings.svg')}
                     text={intl.formatMessage(messages.soapboxConfig)}
                     onClick={onClose}
                   />
@@ -313,7 +313,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                 {features.import && (
                   <SidebarLink
                     to='/settings/import'
-                    icon={require('@tabler/icons/icons/cloud-upload.svg')}
+                    icon={require('@tabler/icons/cloud-upload.svg')}
                     text={intl.formatMessage(messages.importData)}
                     onClick={onClose}
                   />
@@ -323,7 +323,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                 <SidebarLink
                   to='/logout'
-                  icon={require('@tabler/icons/icons/logout.svg')}
+                  icon={require('@tabler/icons/logout.svg')}
                   text={intl.formatMessage(messages.logout)}
                   onClick={onClickLogOut}
                 />

app/soapbox/components/status-action-button.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 
-import { Text, Icon } from 'soapbox/components/ui';
+import { Text, Icon, Emoji } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
 const COLORS = {
@@ -15,7 +15,7 @@ interface IStatusActionCounter {
   count: number,
 }
 
-/** Action button numerical counter, eg "5" likes */
+/** Action button numerical counter, eg "5" likes. */
 const StatusActionCounter: React.FC<IStatusActionCounter> = ({ count = 0 }): JSX.Element => {
   return (
     <Text size='xs' weight='semibold' theme='inherit'>
@@ -31,10 +31,11 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   active?: boolean,
   color?: Color,
   filled?: boolean,
+  emoji?: string,
 }
 
-const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
+const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
-  const { icon, className, iconClassName, active, color, filled = false, count = 0, ...filteredProps } = props;
+  const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, ...filteredProps } = props;
 
   return (
     <button
@@ -46,13 +47,19 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
         'bg-white dark:bg-transparent',
         'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
         {
-          'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && color === COLORS.accent,
+          'text-black dark:text-white': active && emoji,
-          'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && color === COLORS.success,
+          'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
+          'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
         },
         className,
       )}
       {...filteredProps}
     >
+      {emoji ? (
+        <span className='block w-6 h-6 flex items-center justify-center'>
+          <Emoji className='w-full h-full p-0.5' emoji={emoji} />
+        </span>
+      ) : (
         <Icon
           src={icon}
           className={classNames(
@@ -62,6 +69,7 @@ const StatusActionButton = React.forwardRef((props: IStatusActionButton, ref: Re
             iconClassName,
           )}
         />
+      )}
 
       {(count || null) && (
         <StatusActionCounter count={count} />

app/soapbox/components/status.tsx

@@ -84,8 +84,6 @@ interface IStatus extends RouteComponentProps {
   onMoveDown: (statusId: string, featured?: boolean) => void,
   getScrollPosition?: () => ScrollPosition | undefined,
   updateScrollBottom?: (bottom: number) => void,
-  cacheMediaWidth: () => void,
-  cachedMediaWidth: number,
   group: ImmutableMap<string, any>,
   displayMedia: string,
   allowedEmoji: ImmutableList<string>,
@@ -134,11 +132,11 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
     this.didShowCard = Boolean(!this.props.muted && !this.props.hidden && this.props.status && this.props.status.card);
   }
 
-  getSnapshotBeforeUpdate(): ScrollPosition | undefined {
+  getSnapshotBeforeUpdate(): ScrollPosition | null {
     if (this.props.getScrollPosition) {
-      return this.props.getScrollPosition();
+      return this.props.getScrollPosition() || null;
     } else {
-      return undefined;
+      return null;
     }
   }
 
@@ -346,7 +344,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
       prepend = (
         <div className='pt-4 px-4'>
           <HStack alignItems='center' space={1}>
-            <Icon src={require('@tabler/icons/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
+            <Icon src={require('@tabler/icons/pinned.svg')} className='text-gray-600 dark:text-gray-400' />
 
             <Text size='sm' theme='muted' weight='medium'>
               <FormattedMessage id='status.pinned' defaultMessage='Pinned post' />
@@ -365,7 +363,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
           onClick={(event) => event.stopPropagation()}
           className='hidden sm:flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
         >
-          <Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
+          <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
           <HStack alignItems='center'>
             <FormattedMessage
@@ -388,7 +386,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
             onClick={(event) => event.stopPropagation()}
             className='flex items-center text-gray-500 text-xs font-medium space-x-1 hover:underline'
           >
-            <Icon src={require('@tabler/icons/icons/repeat.svg')} className='text-green-600' />
+            <Icon src={require('@tabler/icons/repeat.svg')} className='text-green-600' />
 
             <span>
               <FormattedMessage
@@ -474,7 +472,6 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
             {reblogElementMobile}
 
             <div className='mb-4'>
-              <HStack justifyContent='between' alignItems='start'>
               <AccountContainer
                 key={String(status.getIn(['account', 'id']))}
                 id={String(status.getIn(['account', 'id']))}
@@ -484,8 +481,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
                 hideActions={!reblogElement}
                 showEdit={!!status.edited_at}
                 showProfileHoverCard={this.props.hoverable}
+                withLinkToProfile={this.props.hoverable}
               />
-              </HStack>
             </div>
 
             <div className='status__content-wrapper'>

app/soapbox/components/status_action_bar.tsx

@@ -377,21 +377,21 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     menu.push({
       text: intl.formatMessage(messages.open),
       action: this.handleOpen,
-      icon: require('@tabler/icons/icons/arrows-vertical.svg'),
+      icon: require('@tabler/icons/arrows-vertical.svg'),
     });
 
     if (publicStatus) {
       menu.push({
         text: intl.formatMessage(messages.copy),
         action: this.handleCopy,
-        icon: require('@tabler/icons/icons/link.svg'),
+        icon: require('@tabler/icons/link.svg'),
       });
 
       if (features.embeds) {
         menu.push({
           text: intl.formatMessage(messages.embed),
           action: this.handleEmbed,
-          icon: require('@tabler/icons/icons/share.svg'),
+          icon: require('@tabler/icons/share.svg'),
         });
       }
     }
@@ -404,7 +404,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(status.bookmarked ? messages.unbookmark : messages.bookmark),
         action: this.handleBookmarkClick,
-        icon: require(status.bookmarked ? '@tabler/icons/icons/bookmark-off.svg' : '@tabler/icons/icons/bookmark.svg'),
+        icon: status.bookmarked ? require('@tabler/icons/bookmark-off.svg') : require('@tabler/icons/bookmark.svg'),
       });
     }
 
@@ -414,7 +414,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(mutingConversation ? messages.unmuteConversation : messages.muteConversation),
         action: this.handleConversationMuteClick,
-        icon: require(mutingConversation ? '@tabler/icons/icons/bell.svg' : '@tabler/icons/icons/bell-off.svg'),
+        icon: mutingConversation ? require('@tabler/icons/bell.svg') : require('@tabler/icons/bell-off.svg'),
       });
       menu.push(null);
     }
@@ -424,14 +424,14 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         menu.push({
           text: intl.formatMessage(status.pinned ? messages.unpin : messages.pin),
           action: this.handlePinClick,
-          icon: require(mutingConversation ? '@tabler/icons/icons/pinned-off.svg' : '@tabler/icons/icons/pin.svg'),
+          icon: mutingConversation ? require('@tabler/icons/pinned-off.svg') : require('@tabler/icons/pin.svg'),
         });
       } else {
         if (status.visibility === 'private') {
           menu.push({
             text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog_private),
             action: this.handleReblogClick,
-            icon: require('@tabler/icons/icons/repeat.svg'),
+            icon: require('@tabler/icons/repeat.svg'),
           });
         }
       }
@@ -439,20 +439,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(messages.delete),
         action: this.handleDeleteClick,
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         destructive: true,
       });
       if (features.editStatuses) {
         menu.push({
           text: intl.formatMessage(messages.edit),
           action: this.handleEditClick,
-          icon: require('@tabler/icons/icons/edit.svg'),
+          icon: require('@tabler/icons/edit.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.redraft),
           action: this.handleRedraftClick,
-          icon: require('@tabler/icons/icons/edit.svg'),
+          icon: require('@tabler/icons/edit.svg'),
           destructive: true,
         });
       }
@@ -460,20 +460,20 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(messages.mention, { name: username }),
         action: this.handleMentionClick,
-        icon: require('@tabler/icons/icons/at.svg'),
+        icon: require('@tabler/icons/at.svg'),
       });
 
       // if (status.getIn(['account', 'pleroma', 'accepts_chat_messages'], false) === true) {
       //   menu.push({
       //     text: intl.formatMessage(messages.chat, { name: username }),
       //     action: this.handleChatClick,
-      //     icon: require('@tabler/icons/icons/messages.svg'),
+      //     icon: require('@tabler/icons/messages.svg'),
       //   });
       // } else {
       //   menu.push({
       //     text: intl.formatMessage(messages.direct, { name: username }),
       //     action: this.handleDirectClick,
-      //     icon: require('@tabler/icons/icons/mail.svg'),
+      //     icon: require('@tabler/icons/mail.svg'),
       //   });
       // }
 
@@ -481,17 +481,17 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(messages.mute, { name: username }),
         action: this.handleMuteClick,
-        icon: require('@tabler/icons/icons/circle-x.svg'),
+        icon: require('@tabler/icons/circle-x.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.block, { name: username }),
         action: this.handleBlockClick,
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.report, { name: username }),
         action: this.handleReport,
-        icon: require('@tabler/icons/icons/flag.svg'),
+        icon: require('@tabler/icons/flag.svg'),
       });
     }
 
@@ -502,13 +502,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         menu.push({
           text: intl.formatMessage(messages.admin_account, { name: username }),
           href: `/pleroma/admin/#/users/${status.getIn(['account', 'id'])}/`,
-          icon: require('@tabler/icons/icons/gavel.svg'),
+          icon: require('@tabler/icons/gavel.svg'),
           action: (event) => event.stopPropagation(),
         });
         menu.push({
           text: intl.formatMessage(messages.admin_status),
           href: `/pleroma/admin/#/statuses/${status.id}/`,
-          icon: require('@tabler/icons/icons/pencil.svg'),
+          icon: require('@tabler/icons/pencil.svg'),
           action: (event) => event.stopPropagation(),
         });
       }
@@ -516,25 +516,25 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       menu.push({
         text: intl.formatMessage(status.sensitive === false ? messages.markStatusSensitive : messages.markStatusNotSensitive),
         action: this.handleToggleStatusSensitivity,
-        icon: require('@tabler/icons/icons/alert-triangle.svg'),
+        icon: require('@tabler/icons/alert-triangle.svg'),
       });
 
       if (!ownAccount) {
         menu.push({
           text: intl.formatMessage(messages.deactivateUser, { name: username }),
           action: this.handleDeactivateUser,
-          icon: require('@tabler/icons/icons/user-off.svg'),
+          icon: require('@tabler/icons/user-off.svg'),
         });
         menu.push({
           text: intl.formatMessage(messages.deleteUser, { name: username }),
           action: this.handleDeleteUser,
-          icon: require('@tabler/icons/icons/user-minus.svg'),
+          icon: require('@tabler/icons/user-minus.svg'),
           destructive: true,
         });
         menu.push({
           text: intl.formatMessage(messages.deleteStatus),
           action: this.handleDeleteStatus,
-          icon: require('@tabler/icons/icons/trash.svg'),
+          icon: require('@tabler/icons/trash.svg'),
           destructive: true,
         });
       }
@@ -545,13 +545,13 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     //   menu.push({
     //     text: intl.formatMessage(messages.group_remove_account),
     //     action: this.handleGroupRemoveAccount,
-    //     icon: require('@tabler/icons/icons/user-x.svg'),
+    //     icon: require('@tabler/icons/user-x.svg'),
     //     destructive: true,
     //   });
     //   menu.push({
     //     text: intl.formatMessage(messages.group_remove_post),
     //     action: this.handleGroupRemovePost,
-    //     icon: require('@tabler/icons/icons/trash.svg'),
+    //     icon: require('@tabler/icons/trash.svg'),
     //     destructive: true,
     //   });
     // }
@@ -601,23 +601,23 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
     const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
 
     const menu = this._makeMenu(publicStatus);
-    let reblogIcon = require('@tabler/icons/icons/repeat.svg');
+    let reblogIcon = require('@tabler/icons/repeat.svg');
     let replyTitle;
 
     if (status.visibility === 'direct') {
-      reblogIcon = require('@tabler/icons/icons/mail.svg');
+      reblogIcon = require('@tabler/icons/mail.svg');
     } else if (status.visibility === 'private') {
-      reblogIcon = require('@tabler/icons/icons/lock.svg');
+      reblogIcon = require('@tabler/icons/lock.svg');
     }
 
     const reblogMenu = [{
       text: intl.formatMessage(status.reblogged ? messages.cancel_reblog_private : messages.reblog),
       action: this.handleReblogClick,
-      icon: require('@tabler/icons/icons/repeat.svg'),
+      icon: require('@tabler/icons/repeat.svg'),
     }, {
       text: intl.formatMessage(messages.quotePost),
       action: this.handleQuoteClick,
-      icon: require('@tabler/icons/icons/quote.svg'),
+      icon: require('@tabler/icons/quote.svg'),
     }];
 
     const reblogButton = (
@@ -644,7 +644,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
       <div className='pt-4 flex flex-row space-x-2'>
         <StatusActionButton
           title={replyTitle}
-          icon={require('@tabler/icons/icons/message-circle-2.svg')}
+          icon={require('@tabler/icons/message-circle-2.svg')}
           onClick={this.handleReplyClick}
           count={replyCount}
         />
@@ -665,17 +665,18 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
           <EmojiButtonWrapper statusId={status.id}>
             <StatusActionButton
               title={meEmojiTitle}
-              icon={require('@tabler/icons/icons/heart.svg')}
+              icon={require('@tabler/icons/heart.svg')}
               filled
               color='accent'
               active={Boolean(meEmojiReact)}
               count={emojiReactCount}
+              emoji={meEmojiReact}
             />
           </EmojiButtonWrapper>
         ) : (
           <StatusActionButton
             title={intl.formatMessage(messages.favourite)}
-            icon={require('@tabler/icons/icons/heart.svg')}
+            icon={require('@tabler/icons/heart.svg')}
             color='accent'
             filled
             onClick={this.handleFavouriteClick}
@@ -687,7 +688,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         {canShare && (
           <StatusActionButton
             title={intl.formatMessage(messages.share)}
-            icon={require('@tabler/icons/icons/upload.svg')}
+            icon={require('@tabler/icons/upload.svg')}
             onClick={this.handleShareClick}
           />
         )}
@@ -695,7 +696,7 @@ class StatusActionBar extends ImmutablePureComponent<IStatusActionBar, IStatusAc
         <DropdownMenuContainer items={menu} status={status}>
           <StatusActionButton
             title={intl.formatMessage(messages.more)}
-            icon={require('@tabler/icons/icons/dots.svg')}
+            icon={require('@tabler/icons/dots.svg')}
           />
         </DropdownMenuContainer>
       </div>

app/soapbox/components/status_list.tsx

@@ -6,6 +6,7 @@ import { FormattedMessage } from 'react-intl';
 import LoadGap from 'soapbox/components/load_gap';
 import ScrollableList from 'soapbox/components/scrollable_list';
 import StatusContainer from 'soapbox/containers/status_container';
+import FeedSuggestions from 'soapbox/features/feed-suggestions/feed-suggestions';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder_status';
 import PendingStatus from 'soapbox/features/ui/components/pending_status';
 
@@ -77,7 +78,7 @@ const StatusList: React.FC<IStatusList> = ({
   const handleLoadOlder = useCallback(debounce(() => {
     const maxId = lastStatusId || statusIds.last();
     if (onLoadMore && maxId) {
-      onLoadMore(maxId);
+      onLoadMore(maxId.replace('末suggestions-', ''));
     }
   }, 300, { leading: true }), [onLoadMore, lastStatusId, statusIds.last()]);
 
@@ -149,11 +150,17 @@ const StatusList: React.FC<IStatusList> = ({
     ));
   };
 
+  const renderFeedSuggestions = (): React.ReactNode => {
+    return <FeedSuggestions key='suggestions' />;
+  };
+
   const renderStatuses = (): React.ReactNode[] => {
     if (isLoading || statusIds.size > 0) {
       return statusIds.toArray().map((statusId, index) => {
         if (statusId === null) {
           return renderLoadGap(index);
+        } else if (statusId.startsWith('末suggestions-')) {
+          return renderFeedSuggestions();
         } else if (statusId.startsWith('末pending-')) {
           return renderPendingStatus(statusId);
         } else {

app/soapbox/components/thumb_navigation.tsx

@@ -17,7 +17,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.chats) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/messages.svg')}
+          src={require('@tabler/icons/messages.svg')}
           text={<FormattedMessage id='navigation.chats' defaultMessage='Chats' />}
           to='/chats'
           exact
@@ -29,7 +29,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
     if (features.directTimeline || features.conversations) {
       return (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/mail.svg')}
+          src={require('@tabler/icons/mail.svg')}
           text={<FormattedMessage id='navigation.direct_messages' defaultMessage='Messages' />}
           to='/messages'
           paths={['/messages', '/conversations']}
@@ -43,14 +43,14 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   return (
     <div className='thumb-navigation'>
       <ThumbNavigationLink
-        src={require('@tabler/icons/icons/home.svg')}
+        src={require('@tabler/icons/home.svg')}
         text={<FormattedMessage id='navigation.home' defaultMessage='Home' />}
         to='/'
         exact
       />
 
       <ThumbNavigationLink
-        src={require('@tabler/icons/icons/search.svg')}
+        src={require('@tabler/icons/search.svg')}
         text={<FormattedMessage id='navigation.search' defaultMessage='Search' />}
         to='/search'
         exact
@@ -58,7 +58,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {account && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/bell.svg')}
+          src={require('@tabler/icons/bell.svg')}
           text={<FormattedMessage id='navigation.notifications' defaultMessage='Alerts' />}
           to='/notifications'
           exact
@@ -70,7 +70,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
 
       {(account && account.staff) && (
         <ThumbNavigationLink
-          src={require('@tabler/icons/icons/dashboard.svg')}
+          src={require('@tabler/icons/dashboard.svg')}
           text={<FormattedMessage id='navigation.dashboard' defaultMessage='Dashboard' />}
           to='/soapbox/admin'
           count={dashboardCount}

app/soapbox/components/ui/card/card.tsx

@@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ children, backHref, onBackClick }):
 
     return (
       <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' />
+        <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
     );

app/soapbox/components/ui/datepicker/__tests__/datepicker.test.tsx

@@ -30,7 +30,7 @@ describe('<Datepicker />', () => {
     );
 
     let daySelect: HTMLElement;
-    daySelect = document.querySelector('[data-testid="datepicker-day"]');
+    daySelect = document.querySelector('[data-testid="datepicker-day"]') as HTMLElement;
     expect(queryAllByRole(daySelect, 'option')).toHaveLength(29);
 
     await userEvent.selectOptions(
@@ -56,26 +56,41 @@ describe('<Datepicker />', () => {
   it('calls the onChange function when the inputs change', async() => {
     const handler = jest.fn();
     render(<Datepicker onChange={handler} />);
+    const today = new Date();
+
+    /**
+     * A date with a different day, month, and year than today
+     * so this test will always pass!
+     */
+    const notToday = new Date(
+      today.getFullYear() - 1, // last year
+      (today.getMonth() + 2) % 11, // two months from now (mod 11 because it's 0-indexed)
+      (today.getDate() + 2) % 28, // 2 days from now (for timezone stuff)
+    );
+
+    const month = notToday.toLocaleString('en-us', { month: 'long' });
+    const year = String(notToday.getFullYear());
+    const day = String(notToday.getDate());
 
     expect(handler.mock.calls.length).toEqual(1);
 
     await userEvent.selectOptions(
       screen.getByTestId('datepicker-month'),
-      screen.getByRole('option', { name: 'February' }),
+      screen.getByRole('option', { name: month }),
     );
 
     expect(handler.mock.calls.length).toEqual(2);
 
     await userEvent.selectOptions(
       screen.getByTestId('datepicker-year'),
-      screen.getByRole('option', { name: '2020' }),
+      screen.getByRole('option', { name: year }),
     );
 
     expect(handler.mock.calls.length).toEqual(3);
 
     await userEvent.selectOptions(
       screen.getByTestId('datepicker-day'),
-      screen.getByRole('option', { name: '5' }),
+      screen.getByRole('option', { name: day }),
     );
 
     expect(handler.mock.calls.length).toEqual(4);

app/soapbox/components/ui/hstack/hstack.tsx

@@ -6,6 +6,7 @@ const justifyContentOptions = {
   center: 'justify-center',
   start: 'justify-start',
   end: 'justify-end',
+  around: 'justify-around',
 };
 
 const alignItemsOptions = {
@@ -32,7 +33,7 @@ interface IHStack {
   /** Extra class names on the <div> element. */
   className?: string,
   /** Horizontal alignment of children. */
-  justifyContent?: 'between' | 'center' | 'start' | 'end',
+  justifyContent?: 'between' | 'center' | 'start' | 'end' | 'around',
   /** Size of the gap between elements. */
   space?: 0.5 | 1 | 1.5 | 2 | 3 | 4 | 6 | 8,
   /** Whether to let the flexbox grow. */

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -25,6 +25,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
       type='button'
       className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
         'bg-white dark:bg-transparent': !transparent,
+        'opacity-50': filteredProps.disabled,
       }, className)}
       {...filteredProps}
       data-testid='icon-button'

app/soapbox/components/ui/icon/__tests__/svg-icon.test.tsx

@@ -5,7 +5,7 @@ import SvgIcon from '../svg-icon';
 
 describe('<SvgIcon />', () => {
   it('renders loading element with default size', () => {
-    render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/icons/code.svg')} />);
+    render(<SvgIcon className='text-primary-500' src={require('@tabler/icons/code.svg')} />);
 
     const svg = screen.getByTestId('svg-icon-loader');
     expect(svg.getAttribute('width')).toBe('24');

app/soapbox/components/ui/input/input.tsx

@@ -88,7 +88,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 className='text-gray-400 dark:text-gray-500 hover:text-gray-500 dark:hover:text-gray-400 h-full px-2 focus:ring-primary-500 focus:ring-2'
               >
                 <SvgIcon
-                  src={revealed ? require('@tabler/icons/icons/eye-off.svg') : require('@tabler/icons/icons/eye.svg')}
+                  src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
                   className='h-4 w-4'
                 />
               </button>

app/soapbox/components/ui/modal/modal.tsx

@@ -59,7 +59,7 @@ const Modal: React.FC<IModal> = ({
   cancelAction,
   cancelText,
   children,
-  closeIcon = require('@tabler/icons/icons/x.svg'),
+  closeIcon = require('@tabler/icons/x.svg'),
   closePosition = 'right',
   confirmationAction,
   confirmationDisabled,
@@ -83,7 +83,7 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
+    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-left align-middle transition-all transform bg-white dark:bg-slate-800 text-black dark:text-white shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           {title && (

app/soapbox/components/ui/stack/stack.tsx

@@ -1,9 +1,10 @@
 import classNames from 'classnames';
 import React from 'react';
 
-type SIZES = 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
+type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
 
 const spaces = {
+  0: 'space-y-0',
   '0.5': 'space-y-0.5',
   1: 'space-y-1',
   '1.5': 'space-y-1.5',

app/soapbox/components/ui/streamfield/streamfield.tsx

@@ -74,7 +74,7 @@ const Streamfield: React.FC<IStreamfield> = ({
                 <IconButton
                   iconClassName='w-4 h-4'
                   className='bg-transparent text-gray-400 hover:text-gray-600'
-                  src={require('@tabler/icons/icons/x.svg')}
+                  src={require('@tabler/icons/x.svg')}
                   onClick={() => onRemoveItem(i)}
                   title={intl.formatMessage(messages.remove)}
                 />
@@ -86,7 +86,7 @@ const Streamfield: React.FC<IStreamfield> = ({
 
       {onAddItem && (
         <Button
-          icon={require('@tabler/icons/icons/plus.svg')}
+          icon={require('@tabler/icons/plus.svg')}
           onClick={onAddItem}
           disabled={values.length >= maxItems}
           theme='ghost'

app/soapbox/components/ui/tooltip/tooltip.css

@@ -6,3 +6,7 @@
   @apply pointer-events-none absolute px-2.5 py-1.5 rounded shadow whitespace-nowrap text-xs font-medium bg-gray-800 text-white;
   z-index: 100;
 }
+
+[data-reach-tooltip-arrow] {
+  @apply absolute z-50 w-0 h-0 border-l-8 border-solid border-l-transparent border-r-8 border-r-transparent border-b-8 border-b-gray-800;
+}

app/soapbox/components/ui/tooltip/tooltip.tsx

@@ -1,4 +1,5 @@
-import { default as ReachTooltip } from '@reach/tooltip';
+import Portal from '@reach/portal';
+import { TooltipPopup, useTooltip } from '@reach/tooltip';
 import React from 'react';
 
 import './tooltip.css';
@@ -8,15 +9,55 @@ interface ITooltip {
   text: string,
 }
 
+const centered = (triggerRect: any, tooltipRect: any) => {
+  const triggerCenter = triggerRect.left + triggerRect.width / 2;
+  const left = triggerCenter - tooltipRect.width / 2;
+  const maxLeft = window.innerWidth - tooltipRect.width - 2;
+  return {
+    left: Math.min(Math.max(2, left), maxLeft) + window.scrollX,
+    top: triggerRect.bottom + 8 + window.scrollY,
+  };
+};
+
 /** Hoverable tooltip element. */
 const Tooltip: React.FC<ITooltip> = ({
   children,
   text,
 }) => {
+  // get the props from useTooltip
+  const [trigger, tooltip] = useTooltip();
+
+  // destructure off what we need to position the triangle
+  const { isVisible, triggerRect } = tooltip;
+
   return (
-    <ReachTooltip label={text}>
+    <React.Fragment>
-      {children}
+      {React.cloneElement(children as any, trigger)}
-    </ReachTooltip>
+
+      {isVisible && (
+        // The Triangle. We position it relative to the trigger, not the popup
+        // so that collisions don't have a triangle pointing off to nowhere.
+        // Using a Portal may seem a little extreme, but we can keep the
+        // positioning logic simpler here instead of needing to consider
+        // the popup's position relative to the trigger and collisions
+        <Portal>
+          <div
+            data-reach-tooltip-arrow='true'
+            style={{
+              left:
+                triggerRect && triggerRect.left - 10 + triggerRect.width / 2 as any,
+              top: triggerRect && triggerRect.bottom + window.scrollY as any,
+            }}
+          />
+        </Portal>
+      )}
+      <TooltipPopup
+        {...tooltip}
+        label={text}
+        aria-label={text}
+        position={centered}
+      />
+    </React.Fragment>
   );
 };
 

app/soapbox/components/ui/widget/widget.tsx

@@ -36,7 +36,7 @@ const Widget: React.FC<IWidget> = ({
   title,
   children,
   onActionClick,
-  actionIcon = require('@tabler/icons/icons/arrow-right.svg'),
+  actionIcon = require('@tabler/icons/arrow-right.svg'),
   actionTitle,
   action,
 }): JSX.Element => {

app/soapbox/components/upload-progress.tsx

@@ -15,7 +15,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
   return (
     <HStack alignItems='center' space={2}>
       <Icon
-        src={require('@tabler/icons/icons/cloud-upload.svg')}
+        src={require('@tabler/icons/cloud-upload.svg')}
         className='w-7 h-7 text-gray-500'
       />
 

app/soapbox/components/validation-checkmark.tsx

@@ -12,7 +12,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
   return (
     <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
       <Icon
-        src={isValid ? require('@tabler/icons/icons/check.svg') : require('@tabler/icons/icons/point.svg')}
+        src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
         className={classNames({
           'w-4 h-4': true,
           'text-gray-400 fill-gray-400': !isValid,

app/soapbox/containers/account_container.js

@@ -38,7 +38,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       if (account.relationship?.following || account.relationship?.requested) {
         if (unfollowModal) {
           dispatch(openModal('CONFIRM', {
-            icon: require('@tabler/icons/icons/minus.svg'),
+            icon: require('@tabler/icons/minus.svg'),
             heading: <FormattedMessage id='confirmations.unfollow.heading' defaultMessage='Unfollow {name}' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
             message: <FormattedMessage id='confirmations.unfollow.message' defaultMessage='Are you sure you want to unfollow {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
             confirm: intl.formatMessage(messages.unfollowConfirm),

app/soapbox/containers/soapbox.tsx

@@ -5,6 +5,8 @@ import React, { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
 import { BrowserRouter, Switch, Redirect, Route } from 'react-router-dom';
+// @ts-ignore: it doesn't have types
+import { ScrollContext } from 'react-router-scroll-4';
 
 import { loadInstance } from 'soapbox/actions/instance';
 import { fetchMe } from 'soapbox/actions/me';
@@ -115,6 +117,11 @@ const SoapboxMount = () => {
     });
   }, []);
 
+  // @ts-ignore: I don't actually know what these should be, lol
+  const shouldUpdateScroll = (prevRouterProps, { location }) => {
+    return !(location.state?.soapboxModalKey && location.state?.soapboxModalKey !== prevRouterProps?.location?.state?.soapboxModalKey);
+  };
+
   /** Whether to display a loading indicator. */
   const showLoading = [
     me === null,
@@ -223,6 +230,7 @@ const SoapboxMount = () => {
       {helmet}
       <ErrorBoundary>
         <BrowserRouter basename={BuildConfig.FE_SUBDIRECTORY}>
+          <ScrollContext shouldUpdateScroll={shouldUpdateScroll}>
             <>
               {renderBody()}
 
@@ -234,6 +242,7 @@ const SoapboxMount = () => {
                 {Component => <Component />}
               </BundleContainer>
             </>
+          </ScrollContext>
         </BrowserRouter>
       </ErrorBoundary>
     </IntlProvider>

app/soapbox/containers/status_container.js

@@ -163,7 +163,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
           dispatch(deleteStatus(status.get('id'), withRedraft));
         } else {
           dispatch(openModal('CONFIRM', {
-            icon: withRedraft ? require('@tabler/icons/icons/edit.svg') : require('@tabler/icons/icons/trash.svg'),
+            icon: withRedraft ? require('@tabler/icons/edit.svg') : require('@tabler/icons/trash.svg'),
             heading: intl.formatMessage(withRedraft ? messages.redraftHeading : messages.deleteHeading),
             message: intl.formatMessage(withRedraft ? messages.redraftMessage : messages.deleteMessage),
             confirm: intl.formatMessage(withRedraft ? messages.redraftConfirm : messages.deleteConfirm),
@@ -204,7 +204,7 @@ const mapDispatchToProps = (dispatch, { intl }) => {
     onBlock(status) {
       const account = status.get('account');
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
         confirm: intl.formatMessage(messages.blockConfirm),

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

@@ -175,7 +175,7 @@ class Header extends ImmutablePureComponent {
       menu.push({
         text: intl.formatMessage(messages.share, { name: account.get('username') }),
         action: this.handleShare,
-        icon: require('@tabler/icons/icons/upload.svg'),
+        icon: require('@tabler/icons/upload.svg'),
       });
       menu.push(null);
     }
@@ -184,53 +184,53 @@ class Header extends ImmutablePureComponent {
       menu.push({
         text: intl.formatMessage(messages.edit_profile),
         to: '/settings/profile',
-        icon: require('@tabler/icons/icons/user.svg'),
+        icon: require('@tabler/icons/user.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.preferences),
         to: '/settings',
-        icon: require('@tabler/icons/icons/settings.svg'),
+        icon: require('@tabler/icons/settings.svg'),
       });
       // menu.push(null);
       // menu.push({
       //   text: intl.formatMessage(messages.follow_requests),
       //   to: '/follow_requests',
-      //   icon: require('@tabler/icons/icons/user-plus.svg'),
+      //   icon: require('@tabler/icons/user-plus.svg'),
       // });
       menu.push(null);
       menu.push({
         text: intl.formatMessage(messages.mutes),
         to: '/mutes',
-        icon: require('@tabler/icons/icons/circle-x.svg'),
+        icon: require('@tabler/icons/circle-x.svg'),
       });
       menu.push({
         text: intl.formatMessage(messages.blocks),
         to: '/blocks',
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
       });
       // menu.push({
       //   text: intl.formatMessage(messages.domain_blocks),
       //   to: '/domain_blocks',
-      //   icon: require('@tabler/icons/icons/ban.svg'),
+      //   icon: require('@tabler/icons/ban.svg'),
       // });
     } else {
       menu.push({
         text: intl.formatMessage(messages.mention, { name: account.get('username') }),
         action: this.props.onMention,
-        icon: require('@tabler/icons/icons/at.svg'),
+        icon: require('@tabler/icons/at.svg'),
       });
 
       // if (account.getIn(['pleroma', 'accepts_chat_messages'], false) === true) {
       //   menu.push({
       //     text: intl.formatMessage(messages.chat, { name: account.get('username') }),
       //     action: this.props.onChat,
-      //     icon: require('@tabler/icons/icons/messages.svg'),
+      //     icon: require('@tabler/icons/messages.svg'),
       //   });
       // } else {
       //   menu.push({
       //     text: intl.formatMessage(messages.direct, { name: account.get('username') }),
       //     action: this.props.onDirect,
-      //     icon: require('@tabler/icons/icons/mail.svg'),
+      //     icon: require('@tabler/icons/mail.svg'),
       //   });
       // }
 
@@ -239,13 +239,13 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.hideReblogs, { name: account.get('username') }),
             action: this.props.onReblogToggle,
-            icon: require('@tabler/icons/icons/repeat.svg'),
+            icon: require('@tabler/icons/repeat.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.showReblogs, { name: account.get('username') }),
             action: this.props.onReblogToggle,
-            icon: require('@tabler/icons/icons/repeat.svg'),
+            icon: require('@tabler/icons/repeat.svg'),
           });
         }
 
@@ -253,7 +253,7 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.add_or_remove_from_list),
             action: this.props.onAddToList,
-            icon: require('@tabler/icons/icons/list.svg'),
+            icon: require('@tabler/icons/list.svg'),
           });
         }
 
@@ -263,7 +263,7 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.add_or_remove_from_list),
           action: this.props.onAddToList,
-          icon: require('@tabler/icons/icons/list.svg'),
+          icon: require('@tabler/icons/list.svg'),
         });
       }
 
@@ -271,7 +271,7 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.removeFromFollowers),
           action: this.props.onRemoveFromFollowers,
-          icon: require('@tabler/icons/icons/user-x.svg'),
+          icon: require('@tabler/icons/user-x.svg'),
         });
       }
 
@@ -279,13 +279,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unmute, { name: account.get('username') }),
           action: this.props.onMute,
-          icon: require('@tabler/icons/icons/circle-x.svg'),
+          icon: require('@tabler/icons/circle-x.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.mute, { name: account.get('username') }),
           action: this.props.onMute,
-          icon: require('@tabler/icons/icons/circle-x.svg'),
+          icon: require('@tabler/icons/circle-x.svg'),
         });
       }
 
@@ -293,20 +293,20 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unblock, { name: account.get('username') }),
           action: this.props.onBlock,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.block, { name: account.get('username') }),
           action: this.props.onBlock,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       }
 
       menu.push({
         text: intl.formatMessage(messages.report, { name: account.get('username') }),
         action: this.props.onReport,
-        icon: require('@tabler/icons/icons/flag.svg'),
+        icon: require('@tabler/icons/flag.svg'),
       });
     }
 
@@ -319,13 +319,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unblockDomain, { domain }),
           action: this.props.onUnblockDomain,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.blockDomain, { domain }),
           action: this.props.onBlockDomain,
-          icon: require('@tabler/icons/icons/ban.svg'),
+          icon: require('@tabler/icons/ban.svg'),
         });
       }
     }
@@ -338,7 +338,7 @@ class Header extends ImmutablePureComponent {
           text: intl.formatMessage(messages.admin_account, { name: account.get('username') }),
           to: `/pleroma/admin/#/users/${account.id}/`,
           newTab: true,
-          icon: require('@tabler/icons/icons/gavel.svg'),
+          icon: require('@tabler/icons/gavel.svg'),
         });
       }
 
@@ -347,34 +347,34 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.demoteToModerator, { name: account.get('username') }),
             action: this.props.onPromoteToModerator,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
             action: this.props.onDemoteToUser,
-            icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
+            icon: require('@tabler/icons/arrow-down-circle.svg'),
           });
         } else if (account.moderator) {
           menu.push({
             text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
             action: this.props.onPromoteToAdmin,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.demoteToUser, { name: account.get('username') }),
             action: this.props.onDemoteToUser,
-            icon: require('@tabler/icons/icons/arrow-down-circle.svg'),
+            icon: require('@tabler/icons/arrow-down-circle.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.promoteToAdmin, { name: account.get('username') }),
             action: this.props.onPromoteToAdmin,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
           menu.push({
             text: intl.formatMessage(messages.promoteToModerator, { name: account.get('username') }),
             action: this.props.onPromoteToModerator,
-            icon: require('@tabler/icons/icons/arrow-up-circle.svg'),
+            icon: require('@tabler/icons/arrow-up-circle.svg'),
           });
         }
       }
@@ -383,13 +383,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.unverifyUser, { name: account.username }),
           action: this.props.onUnverifyUser,
-          icon: require('@tabler/icons/icons/check.svg'),
+          icon: require('@tabler/icons/check.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.verifyUser, { name: account.username }),
           action: this.props.onVerifyUser,
-          icon: require('@tabler/icons/icons/check.svg'),
+          icon: require('@tabler/icons/check.svg'),
         });
       }
 
@@ -397,13 +397,13 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.removeDonor, { name: account.username }),
           action: this.props.onRemoveDonor,
-          icon: require('@tabler/icons/icons/coin.svg'),
+          icon: require('@tabler/icons/coin.svg'),
         });
       } else {
         menu.push({
           text: intl.formatMessage(messages.setDonor, { name: account.username }),
           action: this.props.onSetDonor,
-          icon: require('@tabler/icons/icons/coin.svg'),
+          icon: require('@tabler/icons/coin.svg'),
         });
       }
 
@@ -412,13 +412,13 @@ class Header extends ImmutablePureComponent {
           menu.push({
             text: intl.formatMessage(messages.unsuggestUser, { name: account.get('username') }),
             action: this.props.onUnsuggestUser,
-            icon: require('@tabler/icons/icons/user-x.svg'),
+            icon: require('@tabler/icons/user-x.svg'),
           });
         } else {
           menu.push({
             text: intl.formatMessage(messages.suggestUser, { name: account.get('username') }),
             action: this.props.onSuggestUser,
-            icon: require('@tabler/icons/icons/user-check.svg'),
+            icon: require('@tabler/icons/user-check.svg'),
           });
         }
       }
@@ -427,11 +427,11 @@ class Header extends ImmutablePureComponent {
         menu.push({
           text: intl.formatMessage(messages.deactivateUser, { name: account.get('username') }),
           action: this.props.onDeactivateUser,
-          icon: require('@tabler/icons/icons/user-off.svg'),
+          icon: require('@tabler/icons/user-off.svg'),
         });
         menu.push({
           text: intl.formatMessage(messages.deleteUser, { name: account.get('username') }),
-          icon: require('@tabler/icons/icons/user-minus.svg'),
+          icon: require('@tabler/icons/user-minus.svg'),
         });
       }
     }
@@ -497,7 +497,7 @@ class Header extends ImmutablePureComponent {
     if (canChat) {
       return (
         <IconButton
-          src={require('@tabler/icons/icons/messages.svg')}
+          src={require('@tabler/icons/messages.svg')}
           onClick={this.props.onChat}
           title={intl.formatMessage(messages.chat, { name: account.get('username') })}
         />
@@ -505,7 +505,7 @@ class Header extends ImmutablePureComponent {
     } else {
       return (
         <IconButton
-          src={require('@tabler/icons/icons/mail.svg')}
+          src={require('@tabler/icons/mail.svg')}
           onClick={this.props.onDirect}
           title={intl.formatMessage(messages.direct, { name: account.get('username') })}
           className='text-primary-700 bg-primary-100 hover:bg-primary-200 p-2'
@@ -525,7 +525,7 @@ class Header extends ImmutablePureComponent {
 
     return (
       <IconButton
-        src={require('@tabler/icons/icons/upload.svg')}
+        src={require('@tabler/icons/upload.svg')}
         onClick={this.handleShare}
         title={intl.formatMessage(messages.share, { name: account.get('username') })}
         className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
@@ -602,7 +602,7 @@ class Header extends ImmutablePureComponent {
                   <Menu>
                     <MenuButton
                       as={IconButton}
-                      src={require('@tabler/icons/icons/dots.svg')}
+                      src={require('@tabler/icons/dots.svg')}
                       className='text-primary-700 bg-primary-100 dark:!bg-slate-700 dark:!text-white hover:bg-primary-200 p-2'
                       iconClassName='w-5 h-5'
                     />

app/soapbox/features/account_timeline/components/column_settings.js

@@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
             <FormattedMessage id='account.column_settings.title' defaultMessage='Account timeline settings' />
           </h1>
           <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
           </div>
         </div>
 

app/soapbox/features/account_timeline/containers/header_container.js

@@ -96,7 +96,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       dispatch(unblockAccount(account.get('id')));
     } else {
       dispatch(openModal('CONFIRM', {
-        icon: require('@tabler/icons/icons/ban.svg'),
+        icon: require('@tabler/icons/ban.svg'),
         heading: <FormattedMessage id='confirmations.block.heading' defaultMessage='Block @{name}' values={{ name: account.get('acct') }} />,
         message: <FormattedMessage id='confirmations.block.message' defaultMessage='Are you sure you want to block {name}?' values={{ name: <strong>@{account.get('acct')}</strong> }} />,
         confirm: intl.formatMessage(messages.blockConfirm),
@@ -164,7 +164,7 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onBlockDomain(domain) {
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/ban.svg'),
+      icon: require('@tabler/icons/ban.svg'),
       heading: <FormattedMessage id='confirmations.domain_block.heading' defaultMessage='Block {domain}' values={{ domain }} />,
       message: <FormattedMessage id='confirmations.domain_block.message' defaultMessage='Are you really, really sure you want to block the entire {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable. You will not see content from that domain in any public timelines or your notifications.' values={{ domain: <strong>{domain}</strong> }} />,
       confirm: intl.formatMessage(messages.blockDomainConfirm),

app/soapbox/features/admin/components/report.tsx

@@ -40,11 +40,11 @@ const Report: React.FC<IReport> = ({ report }) => {
     return [{
       text: intl.formatMessage(messages.deactivateUser, { name: targetAccount.username as string }),
       action: handleDeactivateUser,
-      icon: require('@tabler/icons/icons/user-off.svg'),
+      icon: require('@tabler/icons/user-off.svg'),
     }, {
       text: intl.formatMessage(messages.deleteUser, { name: targetAccount.username as string }),
       action: handleDeleteUser,
-      icon: require('@tabler/icons/icons/user-minus.svg'),
+      icon: require('@tabler/icons/user-minus.svg'),
     }];
   };
 
@@ -124,7 +124,7 @@ const Report: React.FC<IReport> = ({ report }) => {
           <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
         </Button>
 
-        <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} />
+        <DropdownMenu items={menu} src={require('@tabler/icons/dots-vertical.svg')} />
       </HStack>
     </div>
   );

app/soapbox/features/admin/components/report_status.tsx

@@ -40,11 +40,11 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
     return [{
       text: intl.formatMessage(messages.viewStatus, { acct: `@${acct}` }),
       to: `/@${acct}/posts/${status.id}`,
-      icon: require('@tabler/icons/icons/pencil.svg'),
+      icon: require('@tabler/icons/pencil.svg'),
     }, {
       text: intl.formatMessage(messages.deleteStatus, { acct: `@${acct}` }),
       action: handleDeleteStatus,
-      icon: require('@tabler/icons/icons/trash.svg'),
+      icon: require('@tabler/icons/trash.svg'),
       destructive: true,
     }];
   };
@@ -123,7 +123,7 @@ const ReportStatus: React.FC<IReportStatus> = ({ status }) => {
       <div className='admin-report__status-actions'>
         <DropdownMenu
           items={menu}
-          src={require('@tabler/icons/icons/dots-vertical.svg')}
+          src={require('@tabler/icons/dots-vertical.svg')}
         />
       </div>
     </div>

app/soapbox/features/admin/components/unapproved_account.tsx

@@ -52,8 +52,8 @@ const UnapprovedAccount: React.FC<IUnapprovedAccount> = ({ accountId }) => {
         <blockquote className='md'>{adminAccount?.invite_request || ''}</blockquote>
       </div>
       <div className='unapproved-account__actions'>
-        <IconButton src={require('@tabler/icons/icons/check.svg')} onClick={handleApprove} />
+        <IconButton src={require('@tabler/icons/check.svg')} onClick={handleApprove} />
-        <IconButton src={require('@tabler/icons/icons/x.svg')} onClick={handleReject} />
+        <IconButton src={require('@tabler/icons/x.svg')} onClick={handleReject} />
       </div>
     </div>
   );

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

@@ -48,7 +48,7 @@ const Account: React.FC<IAccount> = ({ accountId, aliases }) => {
   if (!added && accountId !== me) {
     button = (
       <div className='account__relationship'>
-        <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
+        <IconButton src={require('@tabler/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={handleOnAdd} />
       </div>
     );
   }

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

@@ -54,7 +54,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+          <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>

app/soapbox/features/audio/index.js

@@ -491,8 +491,8 @@ class Audio extends React.PureComponent {
         <div className='video-player__controls active'>
           <div className='video-player__buttons-bar'>
             <div className='video-player__buttons left'>
-              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/icons/player-play.svg') : require('@tabler/icons/icons/player-pause.svg')} /></button>
+              <button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay}><Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} /></button>
-              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/icons/volume-3.svg') : require('@tabler/icons/icons/volume.svg')} /></button>
+              <button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} /></button>
 
               <div className={classNames('video-player__volume', { active: this.state.hovered })} ref={this.setVolumeRef} onMouseDown={this.handleVolumeMouseDown}>
                 <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: this._getAccentColor() }} />
@@ -522,7 +522,7 @@ class Audio extends React.PureComponent {
                 download
                 target='_blank'
               >
-                <Icon src={require('@tabler/icons/icons/download.svg')} />
+                <Icon src={require('@tabler/icons/download.svg')} />
               </a>
             </div>
           </div>

app/soapbox/features/auth_layout/index.tsx

@@ -54,7 +54,7 @@ const AuthLayout = () => {
               <div className='relative z-10 ml-auto flex items-center'>
                 <Button
                   theme='link'
-                  icon={require('@tabler/icons/icons/user.svg')}
+                  icon={require('@tabler/icons/user.svg')}
                   to='/signup'
                 >
                   {intl.formatMessage(messages.register)}

app/soapbox/features/auth_login/components/__tests__/captcha.test.tsx

@@ -6,7 +6,7 @@ import CaptchaField, { NativeCaptchaField } from '../captcha';
 
 describe('<CaptchaField />', () => {
   it('renders null by default', () => {
-    render(<CaptchaField />);
+    render(<CaptchaField idempotencyKey='' value='' />);
 
     expect(screen.queryAllByRole('textbox')).toHaveLength(0);
   });
@@ -24,7 +24,9 @@ describe('<NativeCaptchaField />', () => {
     render(
       <NativeCaptchaField
         captcha={captcha}
-        onChange={() => {}} // eslint-disable-line react/jsx-no-bind
+        onChange={() => {}}
+        onClick={() => {}}
+        value=''
       />,
     );
 

app/soapbox/features/auth_login/components/__tests__/login_form.test.tsx

@@ -13,7 +13,7 @@ describe('<LoginForm />', () => {
       }),
     };
 
-    render(<LoginForm handleSubmit={mockFn} isLoading={false} />, null, store);
+    render(<LoginForm handleSubmit={mockFn} isLoading={false} />, undefined, store);
 
     expect(screen.getByRole('heading')).toHaveTextContent(/sign in/i);
   });
@@ -26,7 +26,7 @@ describe('<LoginForm />', () => {
       }),
     };
 
-    render(<LoginForm handleSubmit={mockFn} isLoading={false} />, null, store);
+    render(<LoginForm handleSubmit={mockFn} isLoading={false} />, undefined, store);
 
     expect(screen.getByRole('heading')).toHaveTextContent(/sign in/i);
   });

app/soapbox/features/auth_login/components/__tests__/login_page.test.tsx

@@ -12,7 +12,7 @@ describe('<LoginPage />', () => {
       }),
     };
 
-    render(<LoginPage />, null, store);
+    render(<LoginPage />, undefined, store);
 
     expect(screen.getByRole('heading')).toHaveTextContent('Sign In');
   });

app/soapbox/features/auth_login/components/registration_form.tsx

@@ -130,7 +130,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
     </>);
 
     dispatch(openModal('CONFIRM', {
-      icon: require('@tabler/icons/icons/check.svg'),
+      icon: require('@tabler/icons/check.svg'),
       heading: needsConfirmation
         ? intl.formatMessage(messages.needsConfirmationHeader)
         : needsApproval

app/soapbox/features/backups/index.tsx

@@ -33,7 +33,7 @@ const Backups = () => {
     return [{
       text: intl.formatMessage(messages.create),
       action: handleCreateBackup,
-      icon: require('@tabler/icons/icons/plus.svg'),
+      icon: require('@tabler/icons/plus.svg'),
     }];
   };
 

app/soapbox/features/birthdays/account.tsx

@@ -51,7 +51,7 @@ const Account: React.FC<IAccount> = ({ accountId }) => {
             date: formattedBirthday,
           })}
         >
-          <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+          <Icon src={require('@tabler/icons/ballon.svg')} />
           {formattedBirthday}
         </div>
       </div>

app/soapbox/features/chats/components/chat-box.tsx

@@ -144,7 +144,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
         </div>
         <div className='chat-box__remove-attachment'>
           <IconButton
-            src={require('@tabler/icons/icons/x.svg')}
+            src={require('@tabler/icons/x.svg')}
             onClick={handleRemoveFile}
           />
         </div>
@@ -155,7 +155,7 @@ const ChatBox: React.FC<IChatBox> = ({ chatId, onSetInputRef, autosize }) => {
   const renderActionButton = () => {
     return canSubmit() ? (
       <IconButton
-        src={require('@tabler/icons/icons/send.svg')}
+        src={require('@tabler/icons/send.svg')}
         title={intl.formatMessage(messages.send)}
         onClick={sendMessage}
       />

app/soapbox/features/chats/components/chat-message-list.tsx

@@ -219,7 +219,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
       {
         text: intl.formatMessage(messages.delete),
         action: handleDeleteMessage(chatMessage.chat_id, chatMessage.id),
-        icon: require('@tabler/icons/icons/trash.svg'),
+        icon: require('@tabler/icons/trash.svg'),
         destructive: true,
       },
     ];
@@ -228,7 +228,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
       menu.push({
         text: intl.formatMessage(messages.report),
         action: handleReportUser(chatMessage.account_id),
-        icon: require('@tabler/icons/icons/flag.svg'),
+        icon: require('@tabler/icons/flag.svg'),
       });
     }
 
@@ -251,7 +251,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chatId, chatMessageIds, a
           <div className='chat-message__menu'>
             <DropdownMenuContainer
               items={menu}
-              src={require('@tabler/icons/icons/dots.svg')}
+              src={require('@tabler/icons/dots.svg')}
               title={intl.formatMessage(messages.more)}
             />
           </div>

app/soapbox/features/chats/components/chat-window.tsx

@@ -98,7 +98,7 @@ const ChatWindow: React.FC<IChatWindow> = ({ idx, chatId, windowState }) => {
           @{getAcct(account, displayFqn)}
         </button>
         <div className='pane__close'>
-          <IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
+          <IconButton src={require('@tabler/icons/x.svg')} title='Close chat' onClick={handleChatClose(chat.id)} />
         </div>
       </HStack>
       <div className='pane__content'>

app/soapbox/features/chats/components/chat.tsx

@@ -44,7 +44,7 @@ const Chat: React.FC<IChat> = ({ chatId, onClick }) => {
           {attachment && (
             <Icon
               className='chat__attachment-icon'
-              src={image ? require('@tabler/icons/icons/photo.svg') : require('@tabler/icons/icons/paperclip.svg')}
+              src={image ? require('@tabler/icons/photo.svg') : require('@tabler/icons/paperclip.svg')}
             />
           )}
           {content ? (

app/soapbox/features/community_timeline/components/column_settings.js

@@ -31,7 +31,7 @@ class ColumnSettings extends React.PureComponent {
             <FormattedMessage id='community.column_settings.title' defaultMessage='Local timeline settings' />
           </h1>
           <div className='column-settings__close'>
-            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
+            <IconButton title={intl.formatMessage(messages.close)} src={require('@tabler/icons/x.svg')} onClick={onClose} />
           </div>
         </div>
 

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

@@ -270,14 +270,14 @@ class ComposeForm extends ImmutablePureComponent {
     } else if (this.props.privacy === 'direct') {
       publishText = (
         <>
-          <Icon src={require('@tabler/icons/icons/mail.svg')} />
+          <Icon src={require('@tabler/icons/mail.svg')} />
           {intl.formatMessage(messages.message)}
         </>
       );
     } else if (this.props.privacy === 'private') {
       publishText = (
         <>
-          <Icon src={require('@tabler/icons/icons/lock.svg')} />
+          <Icon src={require('@tabler/icons/lock.svg')} />
           {intl.formatMessage(messages.publish)}
         </>
       );

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

@@ -365,7 +365,7 @@ class EmojiPickerDropdown extends React.PureComponent {
             'pulse-loading': active && loading,
           })}
           alt='😀'
-          src={require('@tabler/icons/icons/mood-happy.svg')}
+          src={require('@tabler/icons/mood-happy.svg')}
           title={title}
           aria-label={title}
           aria-expanded={active}

app/soapbox/features/compose/components/markdown_button.tsx

@@ -18,7 +18,7 @@ const MarkdownButton: React.FC<IMarkdownButton> = ({ active, onClick }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/markdown.svg')}
+      icon={require('@tabler/icons/markdown.svg')}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}

app/soapbox/features/compose/components/poll_button.tsx

@@ -24,7 +24,7 @@ const PollButton: React.FC<IPollButton> = ({ active, unavailable, disabled, onCl
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/chart-bar.svg')}
+      icon={require('@tabler/icons/chart-bar.svg')}
       title={intl.formatMessage(active ? messages.remove_poll : messages.add_poll)}
       active={active}
       disabled={disabled}

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

@@ -161,10 +161,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   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/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/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/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) },
+    { icon: require('@tabler/icons/mail.svg'), value: 'direct', text: intl.formatMessage(messages.direct_short), meta: intl.formatMessage(messages.direct_long) },
   ];
 
   const handleToggle: React.MouseEventHandler<HTMLButtonElement> = (e) => {

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

@@ -26,7 +26,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
   if (!hideActions && onCancel) {
     actions = {
       onActionClick: handleClick,
-      actionIcon: require('@tabler/icons/icons/x.svg'),
+      actionIcon: require('@tabler/icons/x.svg'),
       actionAlignment: 'top',
       actionTitle: 'Dismiss',
     };
@@ -39,6 +39,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
         id={status.getIn(['account', 'id']) as string}
         timestamp={status.created_at}
         showProfileHoverCard={false}
+        withLinkToProfile={false}
       />
 
       <Text

app/soapbox/features/compose/components/schedule_button.tsx

@@ -28,7 +28,7 @@ const ScheduleButton: React.FC<IScheduleButton> = ({ active, unavailable, disabl
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/calendar-stats.svg')}
+      icon={require('@tabler/icons/calendar-stats.svg')}
       title={intl.formatMessage(active ? messages.remove_schedule : messages.add_schedule)}
       active={active}
       disabled={disabled}

app/soapbox/features/compose/components/schedule_form.tsx

@@ -72,7 +72,7 @@ const ScheduleForm: React.FC = () => {
         <IconButton
           iconClassName='w-4 h-4'
           className='bg-transparent text-gray-400 hover:text-gray-600'
-          src={require('@tabler/icons/icons/x.svg')}
+          src={require('@tabler/icons/x.svg')}
           onClick={handleRemove}
           title={intl.formatMessage(messages.remove)}
         />

app/soapbox/features/compose/components/search.tsx

@@ -105,7 +105,7 @@ const Search = (props: ISearch) => {
   const makeMenu = () => [
     {
       text: intl.formatMessage(messages.action, { query: value }),
-      icon: require('@tabler/icons/icons/search.svg'),
+      icon: require('@tabler/icons/search.svg'),
       action: handleSubmit,
     },
   ];
@@ -140,12 +140,12 @@ const Search = (props: ISearch) => {
           onClick={handleClear}
         >
           <SvgIcon
-            src={require('@tabler/icons/icons/search.svg')}
+            src={require('@tabler/icons/search.svg')}
             className={classNames('h-4 w-4 text-gray-400', { hidden: hasValue })}
           />
 
           <SvgIcon
-            src={require('@tabler/icons/icons/x.svg')}
+            src={require('@tabler/icons/x.svg')}
             className={classNames('h-4 w-4 text-gray-400', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />

app/soapbox/features/compose/components/spoiler_button.tsx

@@ -18,7 +18,7 @@ const SpoilerButton: React.FC<ISpoilerButton> = ({ active, onClick }) => {
 
   return (
     <ComposeFormButton
-      icon={require('@tabler/icons/icons/alert-triangle.svg')}
+      icon={require('@tabler/icons/alert-triangle.svg')}
       title={intl.formatMessage(active ? messages.marked : messages.unmarked)}
       active={active}
       onClick={onClick}

app/soapbox/features/compose/components/upload.tsx

@@ -12,13 +12,13 @@ import Motion from '../../ui/util/optional_motion';
 
 import type { Map as ImmutableMap } from 'immutable';
 
-const bookIcon = require('@tabler/icons/icons/book.svg');
+const bookIcon = require('@tabler/icons/book.svg');
-const fileAnalyticsIcon = require('@tabler/icons/icons/file-analytics.svg');
+const fileAnalyticsIcon = require('@tabler/icons/file-analytics.svg');
-const fileCodeIcon = require('@tabler/icons/icons/file-code.svg');
+const fileCodeIcon = require('@tabler/icons/file-code.svg');
-const fileTextIcon = require('@tabler/icons/icons/file-text.svg');
+const fileTextIcon = require('@tabler/icons/file-text.svg');
-const fileZipIcon = require('@tabler/icons/icons/file-zip.svg');
+const fileZipIcon = require('@tabler/icons/file-zip.svg');
-const defaultIcon = require('@tabler/icons/icons/paperclip.svg');
+const defaultIcon = require('@tabler/icons/paperclip.svg');
-const presentationIcon = require('@tabler/icons/icons/presentation.svg');
+const presentationIcon = require('@tabler/icons/presentation.svg');
 
 export const MIMETYPE_ICONS: Record<string, string> = {
   'application/x-freearc': fileZipIcon,
@@ -157,7 +157,7 @@ const Upload: React.FC<IUpload> = (props) => {
             <div className={classNames('compose-form__upload__actions', { active })}>
               <IconButton
                 onClick={handleUndoClick}
-                src={require('@tabler/icons/icons/x.svg')}
+                src={require('@tabler/icons/x.svg')}
                 text={<FormattedMessage id='upload_form.undo' defaultMessage='Delete' />}
               />
 
@@ -165,7 +165,7 @@ const Upload: React.FC<IUpload> = (props) => {
               {(mediaType !== 'unknown' && Boolean(props.media.get('url'))) && (
                 <IconButton
                   onClick={handleOpenModal}
-                  src={require('@tabler/icons/icons/zoom-in.svg')}
+                  src={require('@tabler/icons/zoom-in.svg')}
                   text={<FormattedMessage id='upload_form.preview' defaultMessage='Preview' />}
                 />
               )}

app/soapbox/features/compose/components/upload_button.tsx

@@ -48,8 +48,8 @@ const UploadButton: React.FC<IUploadButton> = ({
   }
 
   const src = onlyImages(attachmentTypes)
-    ? require('@tabler/icons/icons/photo.svg')
+    ? require('@tabler/icons/photo.svg')
-    : require('@tabler/icons/icons/paperclip.svg');
+    : require('@tabler/icons/paperclip.svg');
 
   return (
     <div>

app/soapbox/features/crypto_donate/components/crypto_address.tsx

@@ -42,12 +42,12 @@ const CryptoAddress: React.FC<ICryptoAddress> = (props): JSX.Element => {
 
         <HStack alignItems='center' className='ml-auto'>
           <a className='text-gray-500 ml-1' href='#' onClick={handleModalClick}>
-            <Icon src={require('@tabler/icons/icons/qrcode.svg')} size={20} />
+            <Icon src={require('@tabler/icons/qrcode.svg')} size={20} />
           </a>
 
           {explorerUrl && (
             <a className='text-gray-500 ml-1' href={explorerUrl} target='_blank'>
-              <Icon src={require('@tabler/icons/icons/external-link.svg')} size={20} />
+              <Icon src={require('@tabler/icons/external-link.svg')} size={20} />
             </a>
           )}
         </HStack>

app/soapbox/features/crypto_donate/components/detailed_crypto_address.tsx

@@ -30,7 +30,7 @@ const DetailedCryptoAddress: React.FC<IDetailedCryptoAddress> = ({ address, tick
         <div className='crypto-address__title'>{title || ticker.toUpperCase()}</div>
         <div className='crypto-address__actions'>
           {explorerUrl && <a href={explorerUrl} target='_blank'>
-            <Icon src={require('@tabler/icons/icons/external-link.svg')} />
+            <Icon src={require('@tabler/icons/external-link.svg')} />
           </a>}
         </div>
       </div>

app/soapbox/features/developers/developers_menu.tsx

@@ -32,7 +32,7 @@ const Developers = () => {
     <Column label={intl.formatMessage(messages.heading)}>
       <div className='grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2'>
         <Link to='/developers/apps/create' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/apps.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/apps.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.app_create_label' defaultMessage='Create an app' />
@@ -40,7 +40,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/developers/settings_store' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/code-plus.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/code-plus.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.settings_store_label' defaultMessage='Settings store' />
@@ -48,7 +48,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/developers/timeline' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/home.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/home.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.test_timeline_label' defaultMessage='Test timeline' />
@@ -56,7 +56,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/error' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/mood-sad.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/mood-sad.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.intentional_error_label' defaultMessage='Trigger an error' />
@@ -64,7 +64,7 @@ const Developers = () => {
         </Link>
 
         <Link to='/error/network' className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/refresh.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/refresh.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.network_error_label' defaultMessage='Network error' />
@@ -72,7 +72,7 @@ const Developers = () => {
         </Link>
 
         <button onClick={leaveDevelopers} className='bg-gray-200 dark:bg-gray-600 p-4 rounded flex flex-col items-center justify-center space-y-2 hover:-translate-y-1 transition-transform'>
-          <SvgIcon src={require('@tabler/icons/icons/logout.svg')} className='dark:text-gray-100' />
+          <SvgIcon src={require('@tabler/icons/logout.svg')} className='dark:text-gray-100' />
 
           <Text>
             <FormattedMessage id='developers.navigation.leave_developers_label' defaultMessage='Leave developers' />

app/soapbox/features/edit_profile/index.tsx

@@ -4,9 +4,19 @@ 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 { Button, Column, Form, FormActions, FormGroup, Input, Textarea, HStack, Toggle, FileInput } from 'soapbox/components/ui';
+import {
+  Button,
+  Column,
+  FileInput,
+  Form,
+  FormActions,
+  FormGroup,
+  HStack,
+  Input,
+  Textarea,
+  Toggle,
+} 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';
@@ -25,25 +35,6 @@ const hidesNetwork = (account: Account): boolean => {
   return Boolean(hide_followers && hide_follows && hide_followers_count && hide_follows_count);
 };
 
-/** Converts JSON objects to FormData. */
-// https://stackoverflow.com/a/60286175/8811886
-// @ts-ignore
-const toFormData = (f => f(f))(h => f => f(x => h(h)(f)(x)))(f => fd => pk => d => {
-  if (d instanceof Object) {
-    // eslint-disable-next-line consistent-return
-    Object.keys(d).forEach(k => {
-      const v = d[k];
-      if (pk) k = `${pk}[${k}]`;
-      if (v instanceof Object && !(v instanceof Date) && !(v instanceof File)) {
-        return f(fd)(k)(v);
-      } else {
-        fd.append(k, v);
-      }
-    });
-  }
-  return fd;
-})(new FormData())();
-
 const messages = defineMessages({
   heading: { id: 'column.edit_profile', defaultMessage: 'Edit profile' },
   header: { id: 'edit_profile.header', defaultMessage: 'Edit Profile' },
@@ -205,9 +196,8 @@ const EditProfile: React.FC = () => {
 
   const handleSubmit: React.FormEventHandler = (event) => {
     const promises = [];
-    const formData = toFormData(data);
 
-    promises.push(dispatch(patchMe(formData)));
+    promises.push(dispatch(patchMe(data, true)));
 
     if (features.muteStrangers) {
       promises.push(
@@ -242,10 +232,6 @@ const EditProfile: React.FC = () => {
     };
   };
 
-  const handleBirthdayChange = (date: string) => {
-    updateData('birthday', date);
-  };
-
   const handleHideNetworkChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     const hide = e.target.checked;
 
@@ -329,9 +315,12 @@ const EditProfile: React.FC = () => {
           <FormGroup
             labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
           >
-            <BirthdayInput
+            <Input
+              type='text'
               value={data.birthday}
-              onChange={handleBirthdayChange}
+              onChange={handleTextChange('birthday')}
+              placeholder='YYYY-MM-DD'
+              pattern='\d{4}-\d{2}-\d{2}'
             />
           </FormGroup>
         )}

app/soapbox/features/emoji/__tests__/emoji_index.test.ts

@@ -1,9 +1,10 @@
+// @ts-ignore
 import { emojiIndex } from 'emoji-mart';
 import pick from 'lodash/pick';
 
 import { search } from '../emoji_mart_search_light';
 
-const trimEmojis = emoji => pick(emoji, ['id', 'unified', 'native', 'custom']);
+const trimEmojis = (emoji: any) => pick(emoji, ['id', 'unified', 'native', 'custom']);
 
 describe('emoji_index', () => {
   it('should give same result for emoji_index_light and emoji-mart', () => {
@@ -46,7 +47,7 @@ describe('emoji_index', () => {
   });
 
   it('can include/exclude categories', () => {
-    expect(search('flag', { include: ['people'] })).toEqual([]);
+    expect(search('flag', { include: ['people'] } as any)).toEqual([]);
     expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([]);
   });
 
@@ -63,9 +64,8 @@ describe('emoji_index', () => {
         custom: true,
       },
     ];
-    search('', { custom });
+    search('', { custom } as any);
     emojiIndex.search('', { custom });
-    const expected = [];
     const lightExpected = [
       {
         id: 'mastodon',
@@ -73,7 +73,7 @@ describe('emoji_index', () => {
       },
     ];
     expect(search('masto').map(trimEmojis)).toEqual(lightExpected);
-    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual(expected);
+    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
   });
 
   it('(different behavior from emoji-mart) erases custom emoji if another is passed', () => {
@@ -89,11 +89,10 @@ describe('emoji_index', () => {
         custom: true,
       },
     ];
-    search('', { custom });
+    search('', { custom } as any);
     emojiIndex.search('', { custom });
-    const expected = [];
+    expect(search('masto', { custom: [] } as any).map(trimEmojis)).toEqual([]);
-    expect(search('masto', { custom: [] }).map(trimEmojis)).toEqual(expected);
+    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
-    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual(expected);
   });
 
   it('handles custom emoji', () => {
@@ -109,7 +108,7 @@ describe('emoji_index', () => {
         custom: true,
       },
     ];
-    search('', { custom });
+    search('', { custom } as any);
     emojiIndex.search('', { custom });
     const expected = [
       {
@@ -117,15 +116,15 @@ describe('emoji_index', () => {
         custom: true,
       },
     ];
-    expect(search('masto', { custom }).map(trimEmojis)).toEqual(expected);
+    expect(search('masto', { custom } as any).map(trimEmojis)).toEqual(expected);
     expect(emojiIndex.search('masto', { custom }).map(trimEmojis)).toEqual(expected);
   });
 
   it('should filter only emojis we care about, exclude pineapple', () => {
-    const emojisToShowFilter = emoji => emoji.unified !== '1F34D';
+    const emojisToShowFilter = (emoji: any) => emoji.unified !== '1F34D';
-    expect(search('apple', { emojisToShowFilter }).map((obj) => obj.id))
+    expect(search('apple', { emojisToShowFilter } as any).map((obj: any) => obj.id))
       .not.toContain('pineapple');
-    expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id))
+    expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj: any) => obj.id))
       .not.toContain('pineapple');
   });
 

app/soapbox/features/federation_restrictions/components/instance_restrictions.js

@@ -50,8 +50,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (followers_only) {
       items.push((
-        <Text key='followers_only'>
+        <Text key='followers_only' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/lock.svg')} />
+          <Icon src={require('@tabler/icons/lock.svg')} />
           <FormattedMessage
             id='federation_restriction.followers_only'
             defaultMessage='Hidden except to followers'
@@ -60,8 +60,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
       ));
     } else if (federated_timeline_removal) {
       items.push((
-        <Text key='federated_timeline_removal'>
+        <Text key='federated_timeline_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/lock-open.svg')} />
+          <Icon src={require('@tabler/icons/lock-open.svg')} />
           <FormattedMessage
             id='federation_restriction.federated_timeline_removal'
             defaultMessage='Fediverse timeline removal'
@@ -72,8 +72,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (fullMediaRemoval) {
       items.push((
-        <Text key='full_media_removal'>
+        <Text key='full_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
+          <Icon src={require('@tabler/icons/photo-off.svg')} />
           <FormattedMessage
             id='federation_restriction.full_media_removal'
             defaultMessage='Full media removal'
@@ -82,8 +82,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
       ));
     } else if (partialMediaRemoval) {
       items.push((
-        <Text key='partial_media_removal'>
+        <Text key='partial_media_removal' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' src={require('@tabler/icons/icons/photo-off.svg')} />
+          <Icon src={require('@tabler/icons/photo-off.svg')} />
           <FormattedMessage
             id='federation_restriction.partial_media_removal'
             defaultMessage='Partial media removal'
@@ -94,8 +94,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
-        <Text key='media_nsfw'>
+        <Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' id='eye-slash' />
+          <Icon id='eye-slash' />
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
@@ -116,8 +116,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
 
     if (remoteInstance.getIn(['federation', 'reject']) === true) {
       return (
-        <Text>
+        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' id='times' />
+          <Icon id='times' />
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -128,7 +128,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     } else if (hasRestrictions(remoteInstance)) {
       return [
         (
-          <Text>
+          <Text theme='muted'>
             <FormattedMessage
               id='remote_instance.federation_panel.some_restrictions_message'
               defaultMessage='{siteTitle} has placed some restrictions on {host}.'
@@ -140,8 +140,8 @@ class InstanceRestrictions extends ImmutablePureComponent {
       ];
     } else {
       return (
-        <Text>
+        <Text className='flex items-center gap-2' theme='muted'>
-          <Icon className='mr-2' id='check' />
+          <Icon id='check' />
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
@@ -153,7 +153,11 @@ class InstanceRestrictions extends ImmutablePureComponent {
   }
 
   render() {
-    return <div className='instance-restrictions'>{this.renderContent()}</div>;
+    return (
+      <div className='py-1 pl-4 mb-4 border-solid border-l-[3px] border-gray-300 dark:border-gray-500'>
+        {this.renderContent()}
+      </div>
+    );
   }
 
 }