Merge: Custom emoji support for reactions.

CHANGELOG.md

@@ -7,12 +7,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
+- Posts: Support posts filtering on recent Mastodon versions
+- Reactions: Support custom emoji reactions
+- Compatbility: Support Mastodon v2 timeline filters.
 
 ### Changed
+- Posts: truncate Nostr pubkeys in reply mentions.
+- Posts: upgraded emoji picker component.
 
 ### Fixed
 - Posts: fixed emojis being cut off in reactions modal.
 - Posts: fix audio player progress bar visibility.
+- Posts: added missing gap in pending status.
+- Compatibility: fixed quote posting compatibility with custom Pleroma forks.
+- Profile: fix "load more" button height on account gallery page.
+- 18n: fixed Chinese language being detected from the browser.
+- Conversations: fixed pagination (Mastodon).
 
 ## [3.2.0] - 2023-02-15
 

app/assets/icons/COPYING.md

@@ -2,4 +2,4 @@
 
 - verified.svg - Created by Alex Gleason. CC0
 
-Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg  
+Fediverse logo: https://en.wikipedia.org/wiki/Fediverse#/media/File:Fediverse_logo_proposal.svg

app/soapbox/__fixtures__/group-truthsocial.json

@@ -0,0 +1,16 @@
+{
+  "note": "patriots 900000001",
+  "discoverable": true,
+  "id": "109989480368015378",
+  "domain": null,
+  "avatar": "https://media.covfefe.social/groups/avatars/109/989/480/368/015/378/original/50b0d899bc5aae13.jpg",
+  "avatar_static": "https://media.covfefe.social/groups/avatars/109/989/480/368/015/378/original/50b0d899bc5aae13.jpg",
+  "header": "https://media.covfefe.social/groups/headers/109/989/480/368/015/378/original/c5063b59f919cd4a.png",
+  "header_static": "https://media.covfefe.social/groups/headers/109/989/480/368/015/378/original/c5063b59f919cd4a.png",
+  "group_visibility": "everyone",
+  "created_at": "2023-03-08T00:00:00.000Z",
+  "display_name": "PATRIOT PATRIOTS",
+  "membership_required": true,
+  "members_count": 1,
+  "tags": []
+}

app/soapbox/actions/compose.ts

@@ -4,7 +4,8 @@ import throttle from 'lodash/throttle';
 import { defineMessages, IntlShape } from 'react-intl';
 
 import api from 'soapbox/api';
-import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light';
+import { isNativeEmoji } from 'soapbox/features/emoji';
+import emojiSearch from 'soapbox/features/emoji/search';
 import { tagHistory } from 'soapbox/settings';
 import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
@@ -19,8 +20,8 @@ import { openModal, closeModal } from './modals';
 import { getSettings } from './settings';
 import { createStatus } from './statuses';
 
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
 import type { AutoSuggestion } from 'soapbox/components/autosuggest-input';
+import type { Emoji } from 'soapbox/features/emoji';
 import type { AppDispatch, RootState } from 'soapbox/store';
 import type { Account, APIEntity, Status, Tag } from 'soapbox/types/entities';
 import type { History } from 'soapbox/types/history';
@@ -516,7 +517,9 @@ const fetchComposeSuggestionsAccounts = throttle((dispatch, getState, composeId,
 }, 200, { leading: true, trailing: true });
 
 const fetchComposeSuggestionsEmojis = (dispatch: AppDispatch, getState: () => RootState, composeId: string, token: string) => {
-  const results = emojiSearch(token.replace(':', ''), { maxResults: 5 } as any);
+  const state = getState();
+  const results = emojiSearch(token.replace(':', ''), { maxResults: 5 }, state.custom_emojis);
+
   dispatch(readyComposeSuggestionsEmojis(composeId, token, results));
 };
 
@@ -561,7 +564,7 @@ const selectComposeSuggestion = (composeId: string, position: number, token: str
     let completion, startPosition;
 
     if (typeof suggestion === 'object' && suggestion.id) {
-      completion    = suggestion.native || suggestion.colons;
+      completion    = isNativeEmoji(suggestion) ? suggestion.native : suggestion.colons;
       startPosition = position - 1;
 
       dispatch(useEmoji(suggestion));

app/soapbox/actions/emoji-reacts.ts

@@ -25,7 +25,7 @@ const EMOJI_REACTS_FETCH_FAIL    = 'EMOJI_REACTS_FETCH_FAIL';
 
 const noOp = () => () => new Promise(f => f(undefined));
 
-const simpleEmojiReact = (status: Status, emoji: string) =>
+const simpleEmojiReact = (status: Status, emoji: string, custom?: string) =>
   (dispatch: AppDispatch) => {
     const emojiReacts: ImmutableList<ImmutableMap<string, any>> = status.pleroma.get('emoji_reactions') || ImmutableList();
 
@@ -43,7 +43,7 @@ const simpleEmojiReact = (status: Status, emoji: string) =>
       if (emoji === '👍') {
         dispatch(favourite(status));
       } else {
-        dispatch(emojiReact(status, emoji));
+        dispatch(emojiReact(status, emoji, custom));
       }
     }).catch(err => {
       console.error(err);
@@ -70,11 +70,11 @@ const fetchEmojiReacts = (id: string, emoji: string) =>
     });
   };
 
-const emojiReact = (status: Status, emoji: string) =>
+const emojiReact = (status: Status, emoji: string, custom?: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     if (!isLoggedIn(getState)) return dispatch(noOp());
 
-    dispatch(emojiReactRequest(status, emoji));
+    dispatch(emojiReactRequest(status, emoji, custom));
 
     return api(getState)
       .put(`/api/v1/pleroma/statuses/${status.get('id')}/reactions/${emoji}`)
@@ -120,10 +120,11 @@ const fetchEmojiReactsFail = (id: string, error: AxiosError) => ({
   error,
 });
 
-const emojiReactRequest = (status: Status, emoji: string) => ({
+const emojiReactRequest = (status: Status, emoji: string, custom?: string) => ({
   type: EMOJI_REACT_REQUEST,
   status,
   emoji,
+  custom,
   skipLoading: true,
 });
 

app/soapbox/actions/emojis.ts

@@ -1,6 +1,6 @@
 import { saveSettings } from './settings';
 
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji } from 'soapbox/features/emoji';
 import type { AppDispatch } from 'soapbox/store';
 
 const EMOJI_USE = 'EMOJI_USE';

app/soapbox/actions/events.ts

@@ -569,7 +569,7 @@ const rejectEventParticipationRequestFail = (id: string, accountId: string, erro
 });
 
 const fetchEventIcs = (id: string) =>
-  (dispatch: any, getState: () => RootState) =>
+  (dispatch: AppDispatch, getState: () => RootState) =>
     api(getState).get(`/api/v1/pleroma/events/${id}/ics`);
 
 const cancelEventCompose = () => ({

app/soapbox/actions/filters.ts

@@ -12,10 +12,18 @@ const FILTERS_FETCH_REQUEST = 'FILTERS_FETCH_REQUEST';
 const FILTERS_FETCH_SUCCESS = 'FILTERS_FETCH_SUCCESS';
 const FILTERS_FETCH_FAIL    = 'FILTERS_FETCH_FAIL';
 
+const FILTER_FETCH_REQUEST = 'FILTER_FETCH_REQUEST';
+const FILTER_FETCH_SUCCESS = 'FILTER_FETCH_SUCCESS';
+const FILTER_FETCH_FAIL    = 'FILTER_FETCH_FAIL';
+
 const FILTERS_CREATE_REQUEST = 'FILTERS_CREATE_REQUEST';
 const FILTERS_CREATE_SUCCESS = 'FILTERS_CREATE_SUCCESS';
 const FILTERS_CREATE_FAIL    = 'FILTERS_CREATE_FAIL';
 
+const FILTERS_UPDATE_REQUEST = 'FILTERS_UPDATE_REQUEST';
+const FILTERS_UPDATE_SUCCESS = 'FILTERS_UPDATE_SUCCESS';
+const FILTERS_UPDATE_FAIL    = 'FILTERS_UPDATE_FAIL';
+
 const FILTERS_DELETE_REQUEST = 'FILTERS_DELETE_REQUEST';
 const FILTERS_DELETE_SUCCESS = 'FILTERS_DELETE_SUCCESS';
 const FILTERS_DELETE_FAIL    = 'FILTERS_DELETE_FAIL';
@@ -25,22 +33,16 @@ const messages = defineMessages({
   removed: { id: 'filters.removed', defaultMessage: 'Filter deleted.' },
 });
 
-const fetchFilters = () =>
+type FilterKeywords = { keyword: string, whole_word: boolean }[];
+
+const fetchFiltersV1 = () =>
   (dispatch: AppDispatch, getState: () => RootState) => {
-    if (!isLoggedIn(getState)) return;
-
-    const state = getState();
-    const instance = state.instance;
-    const features = getFeatures(instance);
-
-    if (!features.filters) return;
-
     dispatch({
       type: FILTERS_FETCH_REQUEST,
       skipLoading: true,
     });
 
-    api(getState)
+    return api(getState)
       .get('/api/v1/filters')
       .then(({ data }) => dispatch({
         type: FILTERS_FETCH_SUCCESS,
@@ -55,15 +57,105 @@ const fetchFilters = () =>
       }));
   };
 
-const createFilter = (phrase: string, expires_at: string, context: Array<string>, whole_word: boolean, irreversible: boolean) =>
+const fetchFiltersV2 = () =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTERS_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get('/api/v2/filters')
+      .then(({ data }) => dispatch({
+        type: FILTERS_FETCH_SUCCESS,
+        filters: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTERS_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilters = (fromFiltersPage = false) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    if (!isLoggedIn(getState)) return;
+
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2 && fromFiltersPage) return dispatch(fetchFiltersV2());
+
+    if (features.filters) return dispatch(fetchFiltersV1());
+  };
+
+const fetchFilterV1 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTER_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get(`/api/v1/filters/${id}`)
+      .then(({ data }) => dispatch({
+        type: FILTER_FETCH_SUCCESS,
+        filter: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTER_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilterV2 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({
+      type: FILTER_FETCH_REQUEST,
+      skipLoading: true,
+    });
+
+    return api(getState)
+      .get(`/api/v2/filters/${id}`)
+      .then(({ data }) => dispatch({
+        type: FILTER_FETCH_SUCCESS,
+        filter: data,
+        skipLoading: true,
+      }))
+      .catch(err => dispatch({
+        type: FILTER_FETCH_FAIL,
+        err,
+        skipLoading: true,
+        skipAlert: true,
+      }));
+  };
+
+const fetchFilter = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(fetchFilterV2(id));
+
+    if (features.filters) return dispatch(fetchFilterV1(id));
+  };
+
+const createFilterV1 = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: FILTERS_CREATE_REQUEST });
     return api(getState).post('/api/v1/filters', {
-      phrase,
+      phrase: keywords[0].keyword,
       context,
-      irreversible,
-      whole_word,
-      expires_at,
+      irreversible: hide,
+      whole_word: keywords[0].whole_word,
+      expires_in,
     }).then(response => {
       dispatch({ type: FILTERS_CREATE_SUCCESS, filter: response.data });
       toast.success(messages.added);
@@ -72,7 +164,80 @@ const createFilter = (phrase: string, expires_at: string, context: Array<string>
     });
   };
 
-const deleteFilter = (id: string) =>
+const createFilterV2 = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords_attributes: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_CREATE_REQUEST });
+    return api(getState).post('/api/v2/filters', {
+      title,
+      context,
+      filter_action: hide ? 'hide' : 'warn',
+      expires_in,
+      keywords_attributes,
+    }).then(response => {
+      dispatch({ type: FILTERS_CREATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_CREATE_FAIL, error });
+    });
+  };
+
+const createFilter = (title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(createFilterV2(title, expires_in, context, hide, keywords));
+
+    return dispatch(createFilterV1(title, expires_in, context, hide, keywords));
+  };
+
+const updateFilterV1 = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_UPDATE_REQUEST });
+    return api(getState).patch(`/api/v1/filters/${id}`, {
+      phrase: keywords[0].keyword,
+      context,
+      irreversible: hide,
+      whole_word: keywords[0].whole_word,
+      expires_in,
+    }).then(response => {
+      dispatch({ type: FILTERS_UPDATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_UPDATE_FAIL, error });
+    });
+  };
+
+const updateFilterV2 = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords_attributes: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_UPDATE_REQUEST });
+    return api(getState).patch(`/api/v2/filters/${id}`, {
+      title,
+      context,
+      filter_action: hide ? 'hide' : 'warn',
+      expires_in,
+      keywords_attributes,
+    }).then(response => {
+      dispatch({ type: FILTERS_UPDATE_SUCCESS, filter: response.data });
+      toast.success(messages.added);
+    }).catch(error => {
+      dispatch({ type: FILTERS_UPDATE_FAIL, error });
+    });
+  };
+
+const updateFilter = (id: string, title: string, expires_in: string | null, context: Array<string>, hide: boolean, keywords: FilterKeywords) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(updateFilterV2(id, title, expires_in, context, hide, keywords));
+
+    return dispatch(updateFilterV1(id, title, expires_in, context, hide, keywords));
+  };
+
+const deleteFilterV1 = (id: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch({ type: FILTERS_DELETE_REQUEST });
     return api(getState).delete(`/api/v1/filters/${id}`).then(response => {
@@ -83,17 +248,47 @@ const deleteFilter = (id: string) =>
     });
   };
 
+const deleteFilterV2 = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    dispatch({ type: FILTERS_DELETE_REQUEST });
+    return api(getState).delete(`/api/v2/filters/${id}`).then(response => {
+      dispatch({ type: FILTERS_DELETE_SUCCESS, filter: response.data });
+      toast.success(messages.removed);
+    }).catch(error => {
+      dispatch({ type: FILTERS_DELETE_FAIL, error });
+    });
+  };
+
+const deleteFilter = (id: string) =>
+  (dispatch: AppDispatch, getState: () => RootState) => {
+    const state = getState();
+    const instance = state.instance;
+    const features = getFeatures(instance);
+
+    if (features.filtersV2) return dispatch(deleteFilterV2(id));
+
+    return dispatch(deleteFilterV1(id));
+  };
+
 export {
   FILTERS_FETCH_REQUEST,
   FILTERS_FETCH_SUCCESS,
   FILTERS_FETCH_FAIL,
+  FILTER_FETCH_REQUEST,
+  FILTER_FETCH_SUCCESS,
+  FILTER_FETCH_FAIL,
   FILTERS_CREATE_REQUEST,
   FILTERS_CREATE_SUCCESS,
   FILTERS_CREATE_FAIL,
+  FILTERS_UPDATE_REQUEST,
+  FILTERS_UPDATE_SUCCESS,
+  FILTERS_UPDATE_FAIL,
   FILTERS_DELETE_REQUEST,
   FILTERS_DELETE_SUCCESS,
   FILTERS_DELETE_FAIL,
   fetchFilters,
+  fetchFilter,
   createFilter,
+  updateFilter,
   deleteFilter,
-};
+};

app/soapbox/actions/groups.ts

@@ -1,5 +1,6 @@
 import { defineMessages } from 'react-intl';
 
+import { deleteEntities } from 'soapbox/entity-store/actions';
 import toast from 'soapbox/toast';
 
 import api, { getLinks } from '../api';
@@ -40,14 +41,6 @@ const GROUP_RELATIONSHIPS_FETCH_REQUEST = 'GROUP_RELATIONSHIPS_FETCH_REQUEST';
 const GROUP_RELATIONSHIPS_FETCH_SUCCESS = 'GROUP_RELATIONSHIPS_FETCH_SUCCESS';
 const GROUP_RELATIONSHIPS_FETCH_FAIL    = 'GROUP_RELATIONSHIPS_FETCH_FAIL';
 
-const GROUP_JOIN_REQUEST = 'GROUP_JOIN_REQUEST';
-const GROUP_JOIN_SUCCESS = 'GROUP_JOIN_SUCCESS';
-const GROUP_JOIN_FAIL    = 'GROUP_JOIN_FAIL';
-
-const GROUP_LEAVE_REQUEST = 'GROUP_LEAVE_REQUEST';
-const GROUP_LEAVE_SUCCESS = 'GROUP_LEAVE_SUCCESS';
-const GROUP_LEAVE_FAIL    = 'GROUP_LEAVE_FAIL';
-
 const GROUP_DELETE_STATUS_REQUEST = 'GROUP_DELETE_STATUS_REQUEST';
 const GROUP_DELETE_STATUS_SUCCESS = 'GROUP_DELETE_STATUS_SUCCESS';
 const GROUP_DELETE_STATUS_FAIL    = 'GROUP_DELETE_STATUS_FAIL';
@@ -148,7 +141,8 @@ const createGroup = (params: Record<string, any>, shouldReset?: boolean) =>
         if (shouldReset) {
           dispatch(resetGroupEditor());
         }
-        dispatch(closeModal('MANAGE_GROUP'));
+
+        return data;
       }).catch(err => dispatch(createGroupFail(err)));
   };
 
@@ -198,7 +192,7 @@ const updateGroupFail = (error: AxiosError) => ({
 });
 
 const deleteGroup = (id: string) => (dispatch: AppDispatch, getState: () => RootState) => {
-  dispatch(deleteGroupRequest(id));
+  dispatch(deleteEntities([id], 'Group'));
 
   return api(getState).delete(`/api/v1/groups/${id}`)
     .then(() => dispatch(deleteGroupSuccess(id)))
@@ -312,70 +306,6 @@ const fetchGroupRelationshipsFail = (error: AxiosError) => ({
   skipNotFound: true,
 });
 
-const joinGroup = (id: string) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    const locked = (getState().groups.items.get(id) as any).locked || false;
-
-    dispatch(joinGroupRequest(id, locked));
-
-    return api(getState).post(`/api/v1/groups/${id}/join`).then(response => {
-      dispatch(joinGroupSuccess(response.data));
-      toast.success(locked ? messages.joinRequestSuccess : messages.joinSuccess);
-    }).catch(error => {
-      dispatch(joinGroupFail(error, locked));
-    });
-  };
-
-const leaveGroup = (id: string) =>
-  (dispatch: AppDispatch, getState: () => RootState) => {
-    dispatch(leaveGroupRequest(id));
-
-    return api(getState).post(`/api/v1/groups/${id}/leave`).then(response => {
-      dispatch(leaveGroupSuccess(response.data));
-      toast.success(messages.leaveSuccess);
-    }).catch(error => {
-      dispatch(leaveGroupFail(error));
-    });
-  };
-
-const joinGroupRequest = (id: string, locked: boolean) => ({
-  type: GROUP_JOIN_REQUEST,
-  id,
-  locked,
-  skipLoading: true,
-});
-
-const joinGroupSuccess = (relationship: APIEntity) => ({
-  type: GROUP_JOIN_SUCCESS,
-  relationship,
-  skipLoading: true,
-});
-
-const joinGroupFail = (error: AxiosError, locked: boolean) => ({
-  type: GROUP_JOIN_FAIL,
-  error,
-  locked,
-  skipLoading: true,
-});
-
-const leaveGroupRequest = (id: string) => ({
-  type: GROUP_LEAVE_REQUEST,
-  id,
-  skipLoading: true,
-});
-
-const leaveGroupSuccess = (relationship: APIEntity) => ({
-  type: GROUP_LEAVE_SUCCESS,
-  relationship,
-  skipLoading: true,
-});
-
-const leaveGroupFail = (error: AxiosError) => ({
-  type: GROUP_LEAVE_FAIL,
-  error,
-  skipLoading: true,
-});
-
 const groupDeleteStatus = (groupId: string, statusId: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     dispatch(groupDeleteStatusRequest(groupId, statusId));
@@ -869,9 +799,9 @@ const submitGroupEditor = (shouldReset?: boolean) => (dispatch: AppDispatch, get
   if (header) params.header = header;
 
   if (groupId === null) {
-    dispatch(createGroup(params, shouldReset));
+    return dispatch(createGroup(params, shouldReset));
   } else {
-    dispatch(updateGroup(groupId, params, shouldReset));
+    return dispatch(updateGroup(groupId, params, shouldReset));
   }
 };
 
@@ -895,12 +825,6 @@ export {
   GROUP_RELATIONSHIPS_FETCH_REQUEST,
   GROUP_RELATIONSHIPS_FETCH_SUCCESS,
   GROUP_RELATIONSHIPS_FETCH_FAIL,
-  GROUP_JOIN_REQUEST,
-  GROUP_JOIN_SUCCESS,
-  GROUP_JOIN_FAIL,
-  GROUP_LEAVE_REQUEST,
-  GROUP_LEAVE_SUCCESS,
-  GROUP_LEAVE_FAIL,
   GROUP_DELETE_STATUS_REQUEST,
   GROUP_DELETE_STATUS_SUCCESS,
   GROUP_DELETE_STATUS_FAIL,
@@ -973,14 +897,6 @@ export {
   fetchGroupRelationshipsRequest,
   fetchGroupRelationshipsSuccess,
   fetchGroupRelationshipsFail,
-  joinGroup,
-  leaveGroup,
-  joinGroupRequest,
-  joinGroupSuccess,
-  joinGroupFail,
-  leaveGroupRequest,
-  leaveGroupSuccess,
-  leaveGroupFail,
   groupDeleteStatus,
   groupDeleteStatusRequest,
   groupDeleteStatusSuccess,

app/soapbox/actions/importer/index.ts

@@ -1,3 +1,8 @@
+import { importEntities } from 'soapbox/entity-store/actions';
+import { Entities } from 'soapbox/entity-store/entities';
+import { Group, groupSchema } from 'soapbox/schemas';
+import { filteredArray } from 'soapbox/schemas/utils';
+
 import { getSettings } from '../settings';
 
 import type { AppDispatch, RootState } from 'soapbox/store';
@@ -18,11 +23,11 @@ const importAccount = (account: APIEntity) =>
 const importAccounts = (accounts: APIEntity[]) =>
   ({ type: ACCOUNTS_IMPORT, accounts });
 
-const importGroup = (group: APIEntity) =>
-  ({ type: GROUP_IMPORT, group });
+const importGroup = (group: Group) =>
+  importEntities([group], Entities.GROUPS);
 
-const importGroups = (groups: APIEntity[]) =>
-  ({ type: GROUPS_IMPORT, groups });
+const importGroups = (groups: Group[]) =>
+  importEntities(groups, Entities.GROUPS);
 
 const importStatus = (status: APIEntity, idempotencyKey?: string) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
@@ -69,17 +74,8 @@ const importFetchedGroup = (group: APIEntity) =>
   importFetchedGroups([group]);
 
 const importFetchedGroups = (groups: APIEntity[]) => {
-  const normalGroups: APIEntity[] = [];
-
-  const processGroup = (group: APIEntity) => {
-    if (!group.id) return;
-
-    normalGroups.push(group);
-  };
-
-  groups.forEach(processGroup);
-
-  return importGroups(normalGroups);
+  const entities = filteredArray(groupSchema).catch([]).parse(groups);
+  return importGroups(entities);
 };
 
 const importFetchedStatus = (status: APIEntity, idempotencyKey?: string) =>

app/soapbox/actions/settings.ts

@@ -1,9 +1,10 @@
 import { Map as ImmutableMap, List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
-import { defineMessages } from 'react-intl';
+import { defineMessage } from 'react-intl';
 import { createSelector } from 'reselect';
 import { v4 as uuid } from 'uuid';
 
 import { patchMe } from 'soapbox/actions/me';
+import messages from 'soapbox/locales/messages';
 import toast from 'soapbox/toast';
 import { isLoggedIn } from 'soapbox/utils/auth';
 
@@ -21,9 +22,7 @@ type SettingOpts = {
   showAlert?: boolean
 }
 
-const messages = defineMessages({
-  saveSuccess: { id: 'settings.save.success', defaultMessage: 'Your preferences have been saved!' },
-});
+const saveSuccessMessage = defineMessage({ id: 'settings.save.success', defaultMessage: 'Your preferences have been saved!' });
 
 const defaultSettings = ImmutableMap({
   onboarded: false,
@@ -40,7 +39,7 @@ const defaultSettings = ImmutableMap({
   defaultPrivacy: 'public',
   defaultContentType: 'text/plain',
   themeMode: 'system',
-  locale: navigator.language.split(/[-_]/)[0] || 'en',
+  locale: navigator.language || 'en',
   showExplanationBox: true,
   explanationBox: true,
   autoloadTimelines: true,
@@ -221,7 +220,7 @@ const saveSettingsImmediate = (opts?: SettingOpts) =>
       dispatch({ type: SETTING_SAVE });
 
       if (opts?.showAlert) {
-        toast.success(messages.saveSuccess);
+        toast.success(saveSuccessMessage);
       }
     }).catch(error => {
       toast.showAlertForError(error);
@@ -231,6 +230,12 @@ const saveSettingsImmediate = (opts?: SettingOpts) =>
 const saveSettings = (opts?: SettingOpts) =>
   (dispatch: AppDispatch) => dispatch(saveSettingsImmediate(opts));
 
+const getLocale = (state: RootState, fallback = 'en') => {
+  const localeWithVariant = (getSettings(state).get('locale') as string).replace('_', '-');
+  const locale = localeWithVariant.split('-')[0];
+  return Object.keys(messages).includes(localeWithVariant) ? localeWithVariant : Object.keys(messages).includes(locale) ? locale : fallback;
+};
+
 export {
   SETTING_CHANGE,
   SETTING_SAVE,
@@ -242,4 +247,5 @@ export {
   changeSetting,
   saveSettingsImmediate,
   saveSettings,
+  getLocale,
 };

app/soapbox/actions/statuses.ts

@@ -48,6 +48,8 @@ const STATUS_TRANSLATE_SUCCESS = 'STATUS_TRANSLATE_SUCCESS';
 const STATUS_TRANSLATE_FAIL    = 'STATUS_TRANSLATE_FAIL';
 const STATUS_TRANSLATE_UNDO    = 'STATUS_TRANSLATE_UNDO';
 
+const STATUS_UNFILTER = 'STATUS_UNFILTER';
+
 const statusExists = (getState: () => RootState, statusId: string) => {
   return (getState().statuses.get(statusId) || null) !== null;
 };
@@ -335,6 +337,11 @@ const undoStatusTranslation = (id: string) => ({
   id,
 });
 
+const unfilterStatus = (id: string) => ({
+  type: STATUS_UNFILTER,
+  id,
+});
+
 export {
   STATUS_CREATE_REQUEST,
   STATUS_CREATE_SUCCESS,
@@ -363,6 +370,7 @@ export {
   STATUS_TRANSLATE_SUCCESS,
   STATUS_TRANSLATE_FAIL,
   STATUS_TRANSLATE_UNDO,
+  STATUS_UNFILTER,
   createStatus,
   editStatus,
   fetchStatus,
@@ -381,4 +389,5 @@ export {
   toggleStatusHidden,
   translateStatus,
   undoStatusTranslation,
+  unfilterStatus,
 };

app/soapbox/actions/streaming.ts

@@ -1,4 +1,4 @@
-import { getSettings } from 'soapbox/actions/settings';
+import { getLocale, getSettings } from 'soapbox/actions/settings';
 import messages from 'soapbox/locales/messages';
 import { ChatKeys, IChat, isLastMessage } from 'soapbox/queries/chats';
 import { queryClient } from 'soapbox/queries/client';
@@ -34,13 +34,6 @@ import type { APIEntity, Chat } from 'soapbox/types/entities';
 const STREAMING_CHAT_UPDATE = 'STREAMING_CHAT_UPDATE';
 const STREAMING_FOLLOW_RELATIONSHIPS_UPDATE = 'STREAMING_FOLLOW_RELATIONSHIPS_UPDATE';
 
-const validLocale = (locale: string) => Object.keys(messages).includes(locale);
-
-const getLocale = (state: RootState) => {
-  const locale = getSettings(state).get('locale') as string;
-  return validLocale(locale) ? locale : 'en';
-};
-
 const updateFollowRelationships = (relationships: APIEntity) =>
   (dispatch: AppDispatch, getState: () => RootState) => {
     const me = getState().me;

app/soapbox/api/__mocks__/index.ts

@@ -23,7 +23,12 @@ export const getLinks = (response: AxiosResponse): LinkHeader => {
 
 export const getNextLink = (response: AxiosResponse) => {
   const nextLink = new LinkHeader(response.headers?.link);
-  return nextLink.refs.find((ref) => ref.uri)?.uri;
+  return nextLink.refs.find(link => link.rel === 'next')?.uri;
+};
+
+export const getPrevLink = (response: AxiosResponse) => {
+  const prevLink = new LinkHeader(response.headers?.link);
+  return prevLink.refs.find(link => link.rel === 'prev')?.uri;
 };
 
 export const baseClient = (...params: any[]) => {

app/soapbox/api/index.ts

@@ -29,6 +29,10 @@ export const getNextLink = (response: AxiosResponse): string | undefined => {
   return getLinks(response).refs.find(link => link.rel === 'next')?.uri;
 };
 
+export const getPrevLink = (response: AxiosResponse): string | undefined => {
+  return getLinks(response).refs.find(link => link.rel === 'prev')?.uri;
+};
+
 const getToken = (state: RootState, authType: string) => {
   return authType === 'app' ? getAppToken(state) : getAccessToken(state);
 };

app/soapbox/components/account.tsx

@@ -14,10 +14,11 @@ import RelativeTimestamp from './relative-timestamp';
 import { Avatar, Emoji, HStack, Icon, IconButton, Stack, Text } from './ui';
 
 import type { StatusApprovalStatus } from 'soapbox/normalizers/status';
+import type { Account as AccountSchema } from 'soapbox/schemas';
 import type { Account as AccountEntity } from 'soapbox/types/entities';
 
 interface IInstanceFavicon {
-  account: AccountEntity
+  account: AccountEntity | AccountSchema
   disabled?: boolean
 }
 
@@ -67,7 +68,7 @@ const ProfilePopper: React.FC<IProfilePopper> = ({ condition, wrapper, children
 };
 
 export interface IAccount {
-  account: AccountEntity
+  account: AccountEntity | AccountSchema
   action?: React.ReactElement
   actionAlignment?: 'center' | 'top'
   actionIcon?: string
@@ -90,6 +91,7 @@ export interface IAccount {
   showEdit?: boolean
   approvalStatus?: StatusApprovalStatus
   emoji?: string
+  emojiUrl?: string
   note?: string
 }
 
@@ -115,6 +117,7 @@ const Account = ({
   showEdit = false,
   approvalStatus,
   emoji,
+  emojiUrl,
   note,
 }: IAccount) => {
   const overflowRef = useRef<HTMLDivElement>(null);
@@ -192,6 +195,7 @@ const Account = ({
                 <Emoji
                   className='absolute bottom-0 -right-1.5 h-5 w-5'
                   emoji={emoji}
+                  src={emojiUrl}
                 />
               )}
             </LinkEl>

app/soapbox/components/announcements/emoji.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { useSettings } from 'soapbox/hooks';
 import { joinPublicPath } from 'soapbox/utils/static';
 

app/soapbox/components/announcements/reaction.tsx

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import AnimatedNumber from 'soapbox/components/animated-number';
-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 
 import Emoji from './emoji';
 

app/soapbox/components/announcements/reactions-bar.tsx

@@ -2,14 +2,13 @@ import clsx from 'clsx';
 import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
-import { Icon } from 'soapbox/components/ui';
-import EmojiPickerDropdown from 'soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
 import { useSettings } from 'soapbox/hooks';
 
 import Reaction from './reaction';
 
 import type { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
 import type { AnnouncementReaction } from 'soapbox/types/entities';
 
 interface IReactionsBar {
@@ -24,7 +23,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
   const reduceMotion = useSettings().get('reduceMotion');
 
   const handleEmojiPick = (data: Emoji) => {
-    addReaction(announcementId, data.native.replace(/:/g, ''));
+    addReaction(announcementId, (data as NativeEmoji).native.replace(/:/g, ''));
   };
 
   const willEnter = () => ({ scale: reduceMotion ? 1 : 0 });
@@ -55,7 +54,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
             />
           ))}
 
-          {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} button={<Icon className='h-4 w-4 text-gray-400 hover:text-gray-600 dark:hover:text-white' src={require('@tabler/icons/plus.svg')} />} />}
+          {visibleReactions.size < 8 && <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />}
         </div>
       )}
     </TransitionMotion>

app/soapbox/components/autosuggest-emoji.tsx

@@ -1,38 +1,30 @@
 import React from 'react';
 
-import unicodeMapping from 'soapbox/features/emoji/emoji-unicode-mapping-light';
+import { isCustomEmoji } from 'soapbox/features/emoji';
+import unicodeMapping from 'soapbox/features/emoji/mapping';
 import { joinPublicPath } from 'soapbox/utils/static';
 
-export type Emoji = {
-  id: string
-  custom: boolean
-  imageUrl: string
-  native: string
-  colons: string
-}
-
-type UnicodeMapping = {
-  filename: string
-}
+import type { Emoji } from 'soapbox/features/emoji';
 
 interface IAutosuggestEmoji {
   emoji: Emoji
 }
 
 const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
-  let url;
+  let url, alt;
 
-  if (emoji.custom) {
+  if (isCustomEmoji(emoji)) {
     url = emoji.imageUrl;
+    alt = emoji.colons;
   } else {
-    // @ts-ignore
-    const mapping: UnicodeMapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
+    const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
 
     if (!mapping) {
       return null;
     }
 
-    url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
+    url = joinPublicPath(`packs/emoji/${mapping.unified}.svg`);
+    alt = emoji.native;
   }
 
   return (
@@ -40,7 +32,7 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
       <img
         className='emojione'
         src={url}
-        alt={emoji.native || emoji.colons}
+        alt={alt}
       />
 
       {emoji.colons}

app/soapbox/components/autosuggest-input.tsx

@@ -3,7 +3,7 @@ import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 
-import AutosuggestEmoji, { Emoji } from 'soapbox/components/autosuggest-emoji';
+import AutosuggestEmoji from 'soapbox/components/autosuggest-emoji';
 import Icon from 'soapbox/components/icon';
 import { Input, Portal } from 'soapbox/components/ui';
 import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
@@ -12,6 +12,7 @@ import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import type { Menu, MenuItem } from 'soapbox/components/dropdown-menu';
 import type { InputThemes } from 'soapbox/components/ui/input/input';
+import type { Emoji } from 'soapbox/features/emoji';
 
 export type AutoSuggestion = string | Emoji;
 

app/soapbox/components/autosuggest-textarea.tsx

@@ -4,14 +4,14 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';
 
 import { Portal } from 'soapbox/components/ui';
+import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest-account';
+import { isRtl } from 'soapbox/rtl';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
-import AutosuggestAccount from '../features/compose/components/autosuggest-account';
-import { isRtl } from '../rtl';
-
-import AutosuggestEmoji, { Emoji } from './autosuggest-emoji';
+import AutosuggestEmoji from './autosuggest-emoji';
 
 import type { List as ImmutableList } from 'immutable';
+import type { Emoji } from 'soapbox/features/emoji';
 
 interface IAutosuggesteTextarea {
   id?: string

app/soapbox/components/dropdown-menu/dropdown-menu-item.tsx

@@ -73,7 +73,7 @@ const DropdownMenuItem = ({ index, item, onClick }: IDropdownMenuItem) => {
   }
 
   return (
-    <li className='truncate focus-within:ring-2 focus-within:ring-primary-500'>
+    <li className='truncate focus-visible:ring-2 focus-visible:ring-primary-500'>
       <a
         href={item.href || item.to || '#'}
         role='button'

app/soapbox/components/dropdown-menu/dropdown-menu.tsx

@@ -271,6 +271,10 @@ const DropdownMenu = (props: IDropdownMenu) => {
     };
   }, [refs.floating.current]);
 
+  if (items.length === 0) {
+    return null;
+  }
+
   return (
     <>
       {children ? (

app/soapbox/components/group-card.tsx

@@ -1,7 +1,12 @@
 import React from 'react';
-import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
-import { Avatar, HStack, Icon, Stack, Text } from './ui';
+import GroupMemberCount from 'soapbox/features/group/components/group-member-count';
+import GroupPrivacy from 'soapbox/features/group/components/group-privacy';
+import GroupRelationship from 'soapbox/features/group/components/group-relationship';
+
+import GroupAvatar from './groups/group-avatar';
+import { HStack, Stack, Text } from './ui';
 
 import type { Group as GroupEntity } from 'soapbox/types/entities';
 
@@ -17,43 +22,36 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
   const intl = useIntl();
 
   return (
-    <div className='overflow-hidden'>
-      <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
-        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
-          {group.header && <img className='h-full w-full rounded-t-lg object-cover sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />}
-          <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
-            <Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
-          </div>
-        </div>
-        <Stack className='p-3 pt-9' alignItems='center' space={3}>
-          <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
-          <HStack className='text-gray-700 dark:text-gray-600' space={3} wrap>
-            {group.relationship?.role === 'admin' ? (
-              <HStack space={1} alignItems='center'>
-                <Icon className='h-4 w-4' src={require('@tabler/icons/users.svg')} />
-                <span><FormattedMessage id='group.role.admin' defaultMessage='Admin' /></span>
-              </HStack>
-            ) : group.relationship?.role === 'moderator' && (
-              <HStack space={1} alignItems='center'>
-                <Icon className='h-4 w-4' src={require('@tabler/icons/gavel.svg')} />
-                <span><FormattedMessage id='group.role.moderator' defaultMessage='Moderator' /></span>
-              </HStack>
-            )}
-            {group.locked ? (
-              <HStack space={1} alignItems='center'>
-                <Icon className='h-4 w-4' src={require('@tabler/icons/lock.svg')} />
-                <span><FormattedMessage id='group.privacy.locked' defaultMessage='Private' /></span>
-              </HStack>
-            ) : (
-              <HStack space={1} alignItems='center'>
-                <Icon className='h-4 w-4' src={require('@tabler/icons/world.svg')} />
-                <span><FormattedMessage id='group.privacy.public' defaultMessage='Public' /></span>
-              </HStack>
-            )}
-          </HStack>
-        </Stack>
+    <Stack
+      className='relative h-[240px] rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900'
+      data-testid='group-card'
+    >
+      {/* Group Cover Image */}
+      <Stack grow className='relative basis-1/2 rounded-t-lg bg-primary-100 dark:bg-gray-800'>
+        {group.header && (
+          <img
+            className='absolute inset-0 h-full w-full rounded-t-lg object-cover'
+            src={group.header} alt={intl.formatMessage(messages.groupHeader)}
+          />
+        )}
       </Stack>
-    </div>
+
+      {/* Group Avatar */}
+      <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+        <GroupAvatar group={group} size={64} withRing />
+      </div>
+
+      {/* Group Info */}
+      <Stack alignItems='center' justifyContent='end' grow className='basis-1/2 py-4' space={0.5}>
+        <Text size='lg' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
+
+        <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
+          <GroupRelationship group={group} />
+          <GroupPrivacy group={group} />
+          <GroupMemberCount group={group} />
+        </HStack>
+      </Stack>
+    </Stack>
   );
 };
 

app/soapbox/components/groups/group-avatar.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { GroupRoles } from 'soapbox/schemas/group-member';
+
+import { Avatar } from '../ui';
+
+import type { Group } from 'soapbox/schemas';
+
+interface IGroupAvatar {
+  group: Group
+  size: number
+  withRing?: boolean
+}
+
+const GroupAvatar = (props: IGroupAvatar) => {
+  const { group, size, withRing = false } = props;
+
+  const isOwner = group.relationship?.role === GroupRoles.OWNER;
+
+  return (
+    <Avatar
+      className={
+        clsx('relative rounded-full', {
+          'shadow-[0_0_0_2px_theme(colors.primary.600),0_0_0_4px_theme(colors.white)]': isOwner && withRing,
+          'shadow-[0_0_0_2px_theme(colors.primary.600)]': isOwner && !withRing,
+          'shadow-[0_0_0_2px_theme(colors.white)]': !isOwner && withRing,
+        })
+      }
+      src={group.avatar}
+      size={size}
+    />
+  );
+};
+
+export default GroupAvatar;

app/soapbox/components/list.tsx

@@ -84,7 +84,10 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
           {children}
 
           {isSelected ? (
-            <Icon src={require('@tabler/icons/check.svg')} className='ml-1 text-primary-500 dark:text-primary-400' />
+            <Icon
+              src={require('@tabler/icons/circle-check.svg')}
+              className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
+            />
           ) : null}
         </div>
       ) : null}

app/soapbox/components/load-more.tsx

@@ -6,16 +6,17 @@ import { Button } from 'soapbox/components/ui';
 interface ILoadMore {
   onClick: React.MouseEventHandler
   disabled?: boolean
-  visible?: Boolean
+  visible?: boolean
+  className?: string
 }
 
-const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true }) => {
+const LoadMore: React.FC<ILoadMore> = ({ onClick, disabled, visible = true, className }) => {
   if (!visible) {
     return null;
   }
 
   return (
-    <Button theme='primary' block disabled={disabled || !visible} onClick={onClick}>
+    <Button className={className} theme='primary' block disabled={disabled || !visible} onClick={onClick}>
       <FormattedMessage id='status.load_more' defaultMessage='Load more' />
     </Button>
   );

app/soapbox/components/scrollable-list.tsx

@@ -52,6 +52,8 @@ interface IScrollableList extends VirtuosoProps<any, any> {
   alwaysPrepend?: boolean
   /** Message to display when the list is loaded but empty. */
   emptyMessage?: React.ReactNode
+  /** Should the empty message be displayed in a Card */
+  emptyMessageCard?: boolean
   /** Scrollable content. */
   children: Iterable<React.ReactNode>
   /** Callback when the list is scrolled to the top. */
@@ -87,6 +89,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
   children,
   isLoading,
   emptyMessage,
+  emptyMessageCard = true,
   showLoading,
   onRefresh,
   onScroll,
@@ -158,13 +161,17 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
       <div className='mt-2'>
         {alwaysPrepend && prepend}
 
-        <Card variant='rounded' size='lg'>
-          {isLoading ? (
-            <Spinner />
-          ) : (
-            emptyMessage
-          )}
-        </Card>
+        {isLoading ? (
+          <Spinner />
+        ) : (
+          <>
+            {emptyMessageCard ? (
+              <Card variant='rounded' size='lg'>
+                {emptyMessage}
+              </Card>
+            ) : emptyMessage}
+          </>
+        )}
       </div>
     );
   };

app/soapbox/components/sidebar-menu.tsx

@@ -10,7 +10,7 @@ import { closeSidebar } from 'soapbox/actions/sidebar';
 import Account from 'soapbox/components/account';
 import { Stack } from 'soapbox/components/ui';
 import ProfileStats from 'soapbox/features/ui/components/profile-stats';
-import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useGroupsPath, useFeatures } from 'soapbox/hooks';
 import { makeGetAccount, makeGetOtherAccounts } from 'soapbox/selectors';
 
 import { Divider, HStack, Icon, IconButton, Text } from './ui';
@@ -90,6 +90,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
   const sidebarOpen = useAppSelector((state) => state.sidebar.sidebarOpen);
   const settings = useAppSelector((state) => getSettings(state));
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
+  const groupsPath = useGroupsPath();
 
   const closeButtonRef = React.useRef(null);
 
@@ -210,7 +211,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                   {features.groups && (
                     <SidebarLink
-                      to='/groups'
+                      to={groupsPath}
                       icon={require('@tabler/icons/circles.svg')}
                       text={intl.formatMessage(messages.groups)}
                       onClick={onClose}

app/soapbox/components/sidebar-navigation.tsx

@@ -4,7 +4,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Stack } from 'soapbox/components/ui';
 import { useStatContext } from 'soapbox/contexts/stat-context';
 import ComposeButton from 'soapbox/features/ui/components/compose-button';
-import { useAppSelector, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks';
+import { useAppSelector, useGroupsPath, useFeatures, useOwnAccount, useSettings } from 'soapbox/hooks';
 
 import DropdownMenu, { Menu } from './dropdown-menu';
 import SidebarNavigationLink from './sidebar-navigation-link';
@@ -33,6 +33,8 @@ const SidebarNavigation = () => {
   const features = useFeatures();
   const settings = useSettings();
   const account = useOwnAccount();
+  const groupsPath = useGroupsPath();
+
   const notificationCount = useAppSelector((state) => state.notifications.unread);
   const followRequestsCount = useAppSelector((state) => state.user_lists.follow_requests.items.count());
   const dashboardCount = useAppSelector((state) => state.admin.openReports.count() + state.admin.awaitingApproval.count());
@@ -305,7 +307,7 @@ const SidebarNavigation = () => {
 
             {features.groups && (
               <SidebarNavigationLink
-                to='/groups'
+                to={groupsPath}
                 icon={require('@tabler/icons/circles.svg')}
                 text={<FormattedMessage id='tabs_bar.groups' defaultMessage='Groups' />}
               />

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

@@ -538,7 +538,8 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     allowedEmoji,
   ).reduce((acc, cur) => acc + cur.get('count'), 0);
 
-  const meEmojiReact = getReactForStatus(status, allowedEmoji) as keyof typeof reactMessages | undefined;
+  const meEmojiReact = getReactForStatus(status, allowedEmoji);
+  const meEmojiName = meEmojiReact?.get('name') as keyof typeof reactMessages | undefined;
 
   const reactMessages = {
     '👍': messages.reactionLike,
@@ -550,7 +551,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
     '': messages.favourite,
   };
 
-  const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiReact || ''] || messages.favourite);
+  const meEmojiTitle = intl.formatMessage(reactMessages[meEmojiName || ''] || messages.favourite);
 
   const menu = _makeMenu(publicStatus);
   let reblogIcon = require('@tabler/icons/repeat.svg');
@@ -635,7 +636,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
               icon={require('@tabler/icons/heart.svg')}
               filled
               color='accent'
-              active={Boolean(meEmojiReact)}
+              active={Boolean(meEmojiName)}
               count={emojiReactCount}
               emoji={meEmojiReact}
               text={withLabels ? meEmojiTitle : undefined}
@@ -648,7 +649,7 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
             color='accent'
             filled
             onClick={handleFavouriteClick}
-            active={Boolean(meEmojiReact)}
+            active={Boolean(meEmojiName)}
             count={favouriteCount}
             text={withLabels ? meEmojiTitle : undefined}
           />

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

@@ -4,6 +4,8 @@ import React from 'react';
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
 import { shortNumberFormat } from 'soapbox/utils/numbers';
 
+import type { Map as ImmutableMap } from 'immutable';
+
 const COLORS = {
   accent: 'accent',
   success: 'success',
@@ -31,7 +33,7 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
   active?: boolean
   color?: Color
   filled?: boolean
-  emoji?: string
+  emoji?: ImmutableMap<string, any>
   text?: React.ReactNode
 }
 
@@ -42,7 +44,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
     if (emoji) {
       return (
         <span className='flex h-6 w-6 items-center justify-center'>
-          <Emoji className='h-full w-full p-0.5' emoji={emoji} />
+          <Emoji className='h-full w-full p-0.5' emoji={emoji.get('name')} src={emoji.get('url')} />
         </span>
       );
     } else {

app/soapbox/components/status-reaction-wrapper.tsx

@@ -60,9 +60,9 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
     }
   };
 
-  const handleReact = (emoji: string): void => {
+  const handleReact = (emoji: string, custom?: string): void => {
     if (ownAccount) {
-      dispatch(simpleEmojiReact(status, emoji));
+      dispatch(simpleEmojiReact(status, emoji, custom));
     } else {
       handleUnauthorized();
     }
@@ -71,7 +71,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
   };
 
   const handleClick: React.EventHandler<React.MouseEvent> = e => {
-    const meEmojiReact = getReactForStatus(status, soapboxConfig.allowedEmoji) || '👍';
+    const meEmojiReact = getReactForStatus(status, soapboxConfig.allowedEmoji)?.get('name') || '👍';
 
     if (isUserTouching()) {
       if (ownAccount) {
@@ -112,6 +112,7 @@ const StatusReactionWrapper: React.FC<IStatusReactionWrapper> = ({ statusId, chi
             referenceElement={referenceElement}
             onReact={handleReact}
             visible={visible}
+            onClose={() => setVisible(false)}
           />
         </Portal>
       )}

app/soapbox/components/status-reply-mentions.tsx

@@ -6,6 +6,7 @@ import { openModal } from 'soapbox/actions/modals';
 import HoverRefWrapper from 'soapbox/components/hover-ref-wrapper';
 import HoverStatusWrapper from 'soapbox/components/hover-status-wrapper';
 import { useAppDispatch } from 'soapbox/hooks';
+import { isPubkey } from 'soapbox/utils/nostr';
 
 import type { Account, Status } from 'soapbox/types/entities';
 
@@ -56,7 +57,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
         className='reply-mentions__account'
         onClick={(e) => e.stopPropagation()}
       >
-        @{account.username}
+        @{isPubkey(account.username) ? account.username.slice(0, 8) : account.username}
       </Link>
     );
 

app/soapbox/components/status.tsx

@@ -7,7 +7,7 @@ import { useHistory } from 'react-router-dom';
 import { mentionCompose, replyCompose } from 'soapbox/actions/compose';
 import { toggleFavourite, toggleReblog } from 'soapbox/actions/interactions';
 import { openModal } from 'soapbox/actions/modals';
-import { toggleStatusHidden } from 'soapbox/actions/statuses';
+import { toggleStatusHidden, unfilterStatus } from 'soapbox/actions/statuses';
 import Icon from 'soapbox/components/icon';
 import TranslateButton from 'soapbox/components/translate-button';
 import AccountContainer from 'soapbox/containers/account-container';
@@ -93,6 +93,8 @@ const Status: React.FC<IStatus> = (props) => {
   const statusUrl = `/@${actualStatus.getIn(['account', 'acct'])}/posts/${actualStatus.id}`;
   const group = actualStatus.group as GroupEntity | null;
 
+  const filtered = (status.filtered.size || actualStatus.filtered.size) > 0;
+
   // Track height changes we know about to compensate scrolling.
   useEffect(() => {
     didShowCard.current = Boolean(!muted && !hidden && status?.card);
@@ -202,6 +204,8 @@ const Status: React.FC<IStatus> = (props) => {
     _expandEmojiSelector();
   };
 
+  const handleUnfilter = () => dispatch(unfilterStatus(status.filtered.size ? status.id : actualStatus.id));
+
   const _expandEmojiSelector = (): void => {
     const firstEmoji: HTMLDivElement | null | undefined = node.current?.querySelector('.emoji-react-selector .emoji-react-selector__emoji');
     firstEmoji?.focus();
@@ -281,7 +285,7 @@ const Status: React.FC<IStatus> = (props) => {
     );
   }
 
-  if (status.filtered || actualStatus.filtered) {
+  if (filtered && status.showFiltered) {
     const minHandlers = muted ? undefined : {
       moveUp: handleHotkeyMoveUp,
       moveDown: handleHotkeyMoveDown,
@@ -291,7 +295,11 @@ const Status: React.FC<IStatus> = (props) => {
       <HotKeys handlers={minHandlers}>
         <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
           <Text theme='muted'>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
+            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
+            {' '}
+            <button className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleUnfilter}>
+              <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
+            </button>
           </Text>
         </div>
       </HotKeys>

app/soapbox/components/ui/button/useButtonStyles.ts

@@ -8,7 +8,7 @@ const themes = {
   tertiary:
     'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
   accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
-  danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 focus:text-gray-200 dark:focus:bg-danger-600 dark:focus:text-gray-100',
+  danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:ring-danger-500',
   transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
   outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
   muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',

app/soapbox/components/ui/carousel/carousel.tsx

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from 'react';
+
+import { useDimensions } from 'soapbox/hooks';
+
+import HStack from '../hstack/hstack';
+import Icon from '../icon/icon';
+
+interface ICarousel {
+  children: any
+  /** Optional height to force on controls */
+  controlsHeight?: number
+  /** How many items in the carousel */
+  itemCount: number
+  /** The minimum width per item */
+  itemWidth: number
+}
+
+/**
+ * Carousel
+ */
+const Carousel: React.FC<ICarousel> = (props): JSX.Element => {
+  const { children, controlsHeight, itemCount, itemWidth } = props;
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [_ref, setContainerRef, { width: containerWidth }] = useDimensions();
+
+  const [pageSize, setPageSize] = useState<number>(0);
+  const [currentPage, setCurrentPage] = useState<number>(1);
+
+  const numberOfPages = Math.ceil(itemCount / pageSize);
+  const width = containerWidth / (Math.floor(containerWidth / itemWidth));
+
+  const hasNextPage = currentPage < numberOfPages && numberOfPages > 1;
+  const hasPrevPage = currentPage > 1 && numberOfPages > 1;
+
+  const handleNextPage = () => setCurrentPage((prevPage) => prevPage + 1);
+  const handlePrevPage = () => setCurrentPage((prevPage) => prevPage - 1);
+
+  const renderChildren = () => {
+    if (typeof children === 'function') {
+      return children({ width: width || 'auto' });
+    }
+
+    return children;
+  };
+
+  useEffect(() => {
+    if (containerWidth) {
+      setPageSize(Math.round(containerWidth / width));
+    }
+  }, [containerWidth, width]);
+
+  return (
+    <HStack alignItems='stretch'>
+      <div
+        className='z-10 flex w-5 items-center justify-center self-stretch rounded-l-xl bg-white dark:bg-primary-900'
+        style={{
+          height: controlsHeight || 'auto',
+        }}
+      >
+        <button
+          data-testid='prev-page'
+          onClick={handlePrevPage}
+          className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25'
+          disabled={!hasPrevPage}
+        >
+          <Icon
+            src={require('@tabler/icons/chevron-left.svg')}
+            className='h-5 w-5 text-black dark:text-white'
+          />
+        </button>
+      </div>
+
+      <div className='relative w-full overflow-hidden'>
+        <HStack
+          alignItems='center'
+          style={{
+            transform: `translateX(-${(currentPage - 1) * 100}%)`,
+          }}
+          className='transition-all duration-500 ease-out'
+          ref={setContainerRef}
+        >
+          {renderChildren()}
+        </HStack>
+      </div>
+
+      <div
+        className='z-10 flex w-5 items-center justify-center self-stretch rounded-r-xl bg-white dark:bg-primary-900'
+        style={{
+          height: controlsHeight || 'auto',
+        }}
+      >
+        <button
+          data-testid='next-page'
+          onClick={handleNextPage}
+          className='flex h-full w-7 items-center justify-center transition-opacity duration-500 disabled:opacity-25'
+          disabled={!hasNextPage}
+        >
+          <Icon
+            src={require('@tabler/icons/chevron-right.svg')}
+            className='h-5 w-5 text-black dark:text-white'
+          />
+        </button>
+      </div>
+    </HStack>
+  );
+};
+
+export default Carousel;

app/soapbox/components/ui/column/column.tsx

@@ -7,10 +7,10 @@ import { useSoapboxConfig } from 'soapbox/hooks';
 
 import { Card, CardBody, CardHeader, CardTitle } from '../card/card';
 
-type IColumnHeader = Pick<IColumn, 'label' | 'backHref' |'className'>;
+type IColumnHeader = Pick<IColumn, 'label' | 'backHref' | 'className' | 'action'>;
 
 /** Contains the column title with optional back button. */
-const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className }) => {
+const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className, action }) => {
   const history = useHistory();
 
   const handleBackClick = () => {
@@ -29,6 +29,12 @@ const ColumnHeader: React.FC<IColumnHeader> = ({ label, backHref, className }) =
   return (
     <CardHeader className={className} onBackClick={handleBackClick}>
       <CardTitle title={label} />
+
+      {action && (
+        <div className='flex grow justify-end'>
+          {action}
+        </div>
+      )}
     </CardHeader>
   );
 };
@@ -48,11 +54,12 @@ export interface IColumn {
   ref?: React.Ref<HTMLDivElement>
   /** Children to display in the column. */
   children?: React.ReactNode
+  action?: React.ReactNode
 }
 
 /** A backdrop for the main section of the UI. */
 const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedRef<HTMLDivElement>): JSX.Element => {
-  const { backHref, children, label, transparent = false, withHeader = true, className } = props;
+  const { backHref, children, label, transparent = false, withHeader = true, className, action } = props;
   const soapboxConfig = useSoapboxConfig();
 
   return (
@@ -75,6 +82,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
             label={label}
             backHref={backHref}
             className={clsx({ 'px-4 pt-4 sm:p-0': transparent })}
+            action={action}
           />
         )}
 

app/soapbox/components/ui/emoji-selector/emoji-selector.tsx

@@ -1,11 +1,12 @@
-import { Placement } from '@popperjs/core';
+import { shift, useFloating, Placement, offset, OffsetOptions } from '@floating-ui/react';
 import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
-import { usePopper } from 'react-popper';
 
-import { Emoji, HStack, IconButton } from 'soapbox/components/ui';
-import { Picker } from 'soapbox/features/emoji/emoji-picker';
-import { useSoapboxConfig } from 'soapbox/hooks';
+import { Emoji as EmojiComponent, HStack, IconButton } from 'soapbox/components/ui';
+import EmojiPickerDropdown from 'soapbox/features/emoji/components/emoji-picker-dropdown';
+import { useClickOutside, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
+
+import type { Emoji } from 'soapbox/features/emoji';
 
 interface IEmojiButton {
   /** Unicode emoji character. */
@@ -29,7 +30,7 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
 
   return (
     <button className={clsx(className)} onClick={handleClick} tabIndex={tabIndex}>
-      <Emoji className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
+      <EmojiComponent className='h-6 w-6 duration-100 hover:scale-110' emoji={emoji} />
     </button>
   );
 };
@@ -37,14 +38,13 @@ const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabInd
 interface IEmojiSelector {
   onClose?(): void
   /** Event handler when an emoji is clicked. */
-  onReact(emoji: string): void
+  onReact(emoji: string, custom?: string): void
   /** Element that triggers the EmojiSelector Popper */
   referenceElement: HTMLElement | null
   placement?: Placement
   /** Whether the selector should be visible. */
   visible?: boolean
-  /** X/Y offset of the floating picker. */
-  offset?: [number, number]
+  offsetOptions?: OffsetOptions
   /** Whether to allow any emoji to be chosen. */
   all?: boolean
 }
@@ -56,81 +56,65 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({
   onReact,
   placement = 'top',
   visible = false,
-  offset = [-10, 0],
+  offsetOptions,
   all = true,
 }): JSX.Element => {
   const soapboxConfig = useSoapboxConfig();
+  const { customEmojiReacts } = useFeatures();
 
   const [expanded, setExpanded] = useState(false);
 
-  // `useRef` won't trigger a re-render, while `useState` does.
-  // https://popper.js.org/react-popper/v2/
-  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
-
-  const handleClickOutside = (event: MouseEvent) => {
-    if (referenceElement?.contains(event.target as Node) || popperElement?.contains(event.target as Node)) {
-      return;
-    }
-
-    if (onClose) {
-      onClose();
-    }
-  };
-
-  const { styles, attributes, update } = usePopper(referenceElement, popperElement, {
+  const { x, y, strategy, refs, update } = useFloating<HTMLElement>({
     placement,
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset,
-        },
-      },
-    ],
+    middleware: [offset(offsetOptions), shift()],
   });
 
   const handleExpand: React.MouseEventHandler = () => {
     setExpanded(true);
   };
 
+  const handlePickEmoji = (emoji: Emoji) => {
+    onReact(emoji.custom ? emoji.id : emoji.native, emoji.custom ? emoji.imageUrl : undefined);
+  };
+
+  useEffect(() => {
+    refs.setReference(referenceElement);
+  }, [referenceElement]);
+
+  useEffect(() => () => {
+    document.body.style.overflow = '';
+  }, []);
+
   useEffect(() => {
     setExpanded(false);
   }, [visible]);
 
-  useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, [referenceElement]);
-
-  useEffect(() => {
-    if (visible && update) {
-      update();
+  useClickOutside(refs, () => {
+    if (onClose) {
+      onClose();
     }
-  }, [visible, update]);
-
-  useEffect(() => {
-    if (expanded && update) {
-      update();
-    }
-  }, [expanded, update]);
+  });
 
   return (
     <div
       className={clsx('z-[101] transition-opacity duration-100', {
         'opacity-0 pointer-events-none': !visible,
       })}
-      ref={setPopperElement}
-      style={styles.popper}
-      {...attributes.popper}
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? 0,
+        left: x ?? 0,
+        width: 'max-content',
+      }}
     >
       {expanded ? (
-        <Picker
-          set='twitter'
-          backgroundImageFn={() => require('emoji-datasource/img/twitter/sheets/32.png')}
-          onClick={(emoji: any) => onReact(emoji.native)}
+        <EmojiPickerDropdown
+          visible={expanded}
+          setVisible={setExpanded}
+          update={update}
+          withCustom={customEmojiReacts}
+          onPickEmoji={handlePickEmoji}
         />
       ) : (
         <HStack

app/soapbox/components/ui/emoji/emoji.tsx

@@ -10,7 +10,7 @@ interface IEmoji extends React.ImgHTMLAttributes<HTMLImageElement> {
 
 /** A single emoji image. */
 const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
-  const { emoji, alt, ...rest } = props;
+  const { emoji, alt, src, ...rest } = props;
   const codepoints = toCodePoints(removeVS16s(emoji));
   const filename = codepoints.join('-');
 
@@ -20,7 +20,7 @@ const Emoji: React.FC<IEmoji> = (props): JSX.Element | null => {
     <img
       draggable='false'
       alt={alt || emoji}
-      src={joinPublicPath(`packs/emoji/${filename}.svg`)}
+      src={src || joinPublicPath(`packs/emoji/${filename}.svg`)}
       {...rest}
     />
   );

app/soapbox/components/ui/index.ts

@@ -2,6 +2,7 @@ export { default as Accordion } from './accordion/accordion';
 export { default as Avatar } from './avatar/avatar';
 export { default as Banner } from './banner/banner';
 export { default as Button } from './button/button';
+export { default as Carousel } from './carousel/carousel';
 export { Card, CardBody, CardHeader, CardTitle } from './card/card';
 export { default as Checkbox } from './checkbox/checkbox';
 export { Column, ColumnHeader } from './column/column';
@@ -38,6 +39,7 @@ export {
 } from './menu/menu';
 export { default as Modal } from './modal/modal';
 export { default as PhoneInput } from './phone-input/phone-input';
+export { default as Popover } from './popover/popover';
 export { default as Portal } from './portal/portal';
 export { default as ProgressBar } from './progress-bar/progress-bar';
 export { default as RadioButton } from './radio-button/radio-button';

app/soapbox/components/ui/popover/popover.tsx

@@ -0,0 +1,90 @@
+import {
+  arrow,
+  FloatingArrow,
+  offset,
+  useClick,
+  useDismiss,
+  useFloating,
+  useInteractions,
+  useTransitionStyles,
+} from '@floating-ui/react';
+import React, { useRef, useState } from 'react';
+
+interface IPopover {
+  children: React.ReactElement<any, string | React.JSXElementConstructor<any>>
+  content: React.ReactNode
+}
+
+/**
+ * Popover
+ *
+ * Similar to tooltip, but requires a click and is used for larger blocks
+ * of information.
+ */
+const Popover: React.FC<IPopover> = (props) => {
+  const { children, content } = props;
+
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  const arrowRef = useRef<SVGSVGElement>(null);
+
+  const { x, y, strategy, refs, context } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    placement: 'top',
+    middleware: [
+      offset(10),
+      arrow({
+        element: arrowRef,
+      }),
+    ],
+  });
+
+  const click = useClick(context);
+  const dismiss = useDismiss(context);
+  const { isMounted, styles } = useTransitionStyles(context, {
+    initial: {
+      opacity: 0,
+      transform: 'scale(0.8)',
+    },
+    duration: {
+      open: 200,
+      close: 200,
+    },
+  });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([
+    click,
+    dismiss,
+  ]);
+
+  return (
+    <>
+      {React.cloneElement(children, {
+        ref: refs.setReference,
+        ...getReferenceProps(),
+        className: 'cursor-help',
+      })}
+
+      {(isMounted) && (
+        <div
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            ...styles,
+          }}
+          className='rounded-lg bg-white p-6 shadow-2xl dark:bg-gray-900 dark:ring-2 dark:ring-primary-700'
+          {...getFloatingProps()}
+        >
+          {content}
+
+          <FloatingArrow ref={arrowRef} context={context} className='fill-white dark:hidden' />
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Popover;

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

@@ -11,6 +11,7 @@ const spaces = {
   4: 'space-y-4',
   5: 'space-y-5',
   6: 'space-y-6',
+  9: 'space-y-9',
   10: 'space-y-10',
 };
 

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

@@ -33,6 +33,8 @@ interface IStreamfield {
   onChange: (values: any[]) => void
   /** Input to render for each value. */
   component: StreamfieldComponent<any>
+  /** Minimum number of allowed inputs. */
+  minItems?: number
   /** Maximum number of allowed inputs. */
   maxItems?: number
 }
@@ -47,6 +49,7 @@ const Streamfield: React.FC<IStreamfield> = ({
   onChange,
   component: Component,
   maxItems = Infinity,
+  minItems = 0,
 }) => {
   const intl = useIntl();
 
@@ -67,10 +70,10 @@ const Streamfield: React.FC<IStreamfield> = ({
 
       {(values.length > 0) && (
         <Stack>
-          {values.map((value, i) => (
+          {values.map((value, i) => value?._destroy ? null : (
             <HStack space={2} alignItems='center'>
               <Component key={i} onChange={handleChange(i)} value={value} />
-              {onRemoveItem && (
+              {values.length > minItems && onRemoveItem && (
                 <IconButton
                   iconClassName='h-4 w-4'
                   className='bg-transparent text-gray-400 hover:text-gray-600'

app/soapbox/entity-store/__tests__/reducer.test.ts

@@ -0,0 +1,100 @@
+import { deleteEntities, entitiesFetchFail, entitiesFetchRequest, importEntities } from '../actions';
+import reducer, { State } from '../reducer';
+import { createListState } from '../utils';
+
+import type { EntityCache } from '../types';
+
+interface TestEntity {
+  id: string
+  msg: string
+}
+
+test('import entities', () => {
+  const entities: TestEntity[] = [
+    { id: '1', msg: 'yolo' },
+    { id: '2', msg: 'benis' },
+    { id: '3', msg: 'boop' },
+  ];
+
+  const action = importEntities(entities, 'TestEntity');
+  const result = reducer(undefined, action);
+  const cache = result.TestEntity as EntityCache<TestEntity>;
+
+  expect(cache.store['1']!.msg).toBe('yolo');
+  expect(Object.values(cache.lists).length).toBe(0);
+});
+
+test('import entities into a list', () => {
+  const entities: TestEntity[] = [
+    { id: '1', msg: 'yolo' },
+    { id: '2', msg: 'benis' },
+    { id: '3', msg: 'boop' },
+  ];
+
+  const action = importEntities(entities, 'TestEntity', 'thingies');
+  const result = reducer(undefined, action);
+  const cache = result.TestEntity as EntityCache<TestEntity>;
+
+  expect(cache.store['2']!.msg).toBe('benis');
+  expect(cache.lists.thingies?.ids.size).toBe(3);
+
+  // Now try adding an additional item.
+  const entities2: TestEntity[] = [
+    { id: '4', msg: 'hehe' },
+  ];
+
+  const action2 = importEntities(entities2, 'TestEntity', 'thingies');
+  const result2 = reducer(result, action2);
+  const cache2 = result2.TestEntity as EntityCache<TestEntity>;
+
+  expect(cache2.store['4']!.msg).toBe('hehe');
+  expect(cache2.lists.thingies?.ids.size).toBe(4);
+
+  // Finally, update an item.
+  const entities3: TestEntity[] = [
+    { id: '2', msg: 'yolofam' },
+  ];
+
+  const action3 = importEntities(entities3, 'TestEntity', 'thingies');
+  const result3 = reducer(result2, action3);
+  const cache3 = result3.TestEntity as EntityCache<TestEntity>;
+
+  expect(cache3.store['2']!.msg).toBe('yolofam');
+  expect(cache3.lists.thingies?.ids.size).toBe(4); // unchanged
+});
+
+test('fetching updates the list state', () => {
+  const action = entitiesFetchRequest('TestEntity', 'thingies');
+  const result = reducer(undefined, action);
+
+  expect(result.TestEntity!.lists.thingies!.state.fetching).toBe(true);
+});
+
+test('failure adds the error to the state', () => {
+  const error = new Error('whoopsie');
+
+  const action = entitiesFetchFail('TestEntity', 'thingies', error);
+  const result = reducer(undefined, action);
+
+  expect(result.TestEntity!.lists.thingies!.state.error).toBe(error);
+});
+
+test('deleting items', () => {
+  const state: State = {
+    TestEntity: {
+      store: { '1': { id: '1' }, '2': { id: '2' }, '3': { id: '3' } },
+      lists: {
+        '': {
+          ids: new Set(['1', '2', '3']),
+          state: createListState(),
+        },
+      },
+    },
+  };
+
+  const action = deleteEntities(['3', '1'], 'TestEntity');
+  const result = reducer(state, action);
+
+  expect(result.TestEntity!.store).toMatchObject({ '2': { id: '2' } });
+  expect([...result.TestEntity!.lists['']!.ids]).toEqual(['2']);
+});

app/soapbox/entity-store/actions.ts

@@ -0,0 +1,81 @@
+import type { Entity, EntityListState } from './types';
+
+const ENTITIES_IMPORT = 'ENTITIES_IMPORT' as const;
+const ENTITIES_DELETE = 'ENTITIES_DELETE' as const;
+const ENTITIES_FETCH_REQUEST = 'ENTITIES_FETCH_REQUEST' as const;
+const ENTITIES_FETCH_SUCCESS = 'ENTITIES_FETCH_SUCCESS' as const;
+const ENTITIES_FETCH_FAIL = 'ENTITIES_FETCH_FAIL' as const;
+
+/** Action to import entities into the cache. */
+function importEntities(entities: Entity[], entityType: string, listKey?: string) {
+  return {
+    type: ENTITIES_IMPORT,
+    entityType,
+    entities,
+    listKey,
+  };
+}
+
+interface DeleteEntitiesOpts {
+  preserveLists?: boolean
+}
+
+function deleteEntities(ids: Iterable<string>, entityType: string, opts: DeleteEntitiesOpts = {}) {
+  return {
+    type: ENTITIES_DELETE,
+    ids,
+    entityType,
+    opts,
+  };
+}
+
+function entitiesFetchRequest(entityType: string, listKey?: string) {
+  return {
+    type: ENTITIES_FETCH_REQUEST,
+    entityType,
+    listKey,
+  };
+}
+
+function entitiesFetchSuccess(entities: Entity[], entityType: string, listKey?: string, newState?: EntityListState) {
+  return {
+    type: ENTITIES_FETCH_SUCCESS,
+    entityType,
+    entities,
+    listKey,
+    newState,
+  };
+}
+
+function entitiesFetchFail(entityType: string, listKey: string | undefined, error: any) {
+  return {
+    type: ENTITIES_FETCH_FAIL,
+    entityType,
+    listKey,
+    error,
+  };
+}
+
+/** Any action pertaining to entities. */
+type EntityAction =
+  ReturnType<typeof importEntities>
+  | ReturnType<typeof deleteEntities>
+  | ReturnType<typeof entitiesFetchRequest>
+  | ReturnType<typeof entitiesFetchSuccess>
+  | ReturnType<typeof entitiesFetchFail>;
+
+export {
+  ENTITIES_IMPORT,
+  ENTITIES_DELETE,
+  ENTITIES_FETCH_REQUEST,
+  ENTITIES_FETCH_SUCCESS,
+  ENTITIES_FETCH_FAIL,
+  importEntities,
+  deleteEntities,
+  entitiesFetchRequest,
+  entitiesFetchSuccess,
+  entitiesFetchFail,
+  EntityAction,
+};
+
+export type { DeleteEntitiesOpts };

app/soapbox/entity-store/entities.ts

@@ -0,0 +1,5 @@
+export enum Entities {
+  GROUPS = 'Groups',
+  GROUP_RELATIONSHIPS = 'GroupRelationships',
+  GROUP_MEMBERSHIPS = 'GroupMemberships',
+}

app/soapbox/entity-store/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useEntities } from './useEntities';
+export { useEntity } from './useEntity';
+export { useEntityActions } from './useEntityActions';

app/soapbox/entity-store/hooks/types.ts

@@ -0,0 +1,6 @@
+import type { Entity } from '../types';
+import type z from 'zod';
+
+type EntitySchema<TEntity extends Entity = Entity> = z.ZodType<TEntity, z.ZodTypeDef, any>;
+
+export type { EntitySchema };

app/soapbox/entity-store/hooks/useEntities.ts

@@ -0,0 +1,172 @@
+import { useEffect } from 'react';
+import z from 'zod';
+
+import { getNextLink, getPrevLink } from 'soapbox/api';
+import { useApi, useAppDispatch, useAppSelector, useGetState } from 'soapbox/hooks';
+import { filteredArray } from 'soapbox/schemas/utils';
+
+import { entitiesFetchFail, entitiesFetchRequest, entitiesFetchSuccess } from '../actions';
+
+import type { Entity, EntityListState } from '../types';
+import type { EntitySchema } from './types';
+import type { RootState } from 'soapbox/store';
+
+/** Tells us where to find/store the entity in the cache. */
+type EntityPath = [
+  /** Name of the entity type for use in the global cache, eg `'Notification'`. */
+  entityType: string,
+  /**
+   * Name of a particular index of this entity type.
+   * Multiple params get combined into one string with a `:` separator.
+   * You can use empty-string (`''`) if you don't need separate lists.
+   */
+  ...listKeys: string[],
+]
+
+/** Additional options for the hook. */
+interface UseEntitiesOpts<TEntity extends Entity> {
+  /** A zod schema to parse the API entities. */
+  schema?: EntitySchema<TEntity>
+  /**
+   * Time (milliseconds) until this query becomes stale and should be refetched.
+   * It is 1 minute by default, and can be set to `Infinity` to opt-out of automatic fetching.
+   */
+  staleTime?: number
+  /** A flag to potentially disable sending requests to the API. */
+  enabled?: boolean
+}
+
+/** A hook for fetching and displaying API entities. */
+function useEntities<TEntity extends Entity>(
+  /** Tells us where to find/store the entity in the cache. */
+  path: EntityPath,
+  /** API route to GET, eg `'/api/v1/notifications'`. If undefined, nothing will be fetched. */
+  endpoint: string | undefined,
+  /** Additional options for the hook. */
+  opts: UseEntitiesOpts<TEntity> = {},
+) {
+  const api = useApi();
+  const dispatch = useAppDispatch();
+  const getState = useGetState();
+
+  const [entityType, ...listKeys] = path;
+  const listKey = listKeys.join(':');
+
+  const entities = useAppSelector(state => selectEntities<TEntity>(state, path));
+
+  const isEnabled = opts.enabled ?? true;
+  const isFetching = useListState(path, 'fetching');
+  const lastFetchedAt = useListState(path, 'lastFetchedAt');
+  const isFetched = useListState(path, 'fetched');
+  const isError = !!useListState(path, 'error');
+
+  const next = useListState(path, 'next');
+  const prev = useListState(path, 'prev');
+
+  const fetchPage = async(url: string): Promise<void> => {
+    // Get `isFetching` state from the store again to prevent race conditions.
+    const isFetching = selectListState(getState(), path, 'fetching');
+    if (isFetching) return;
+
+    dispatch(entitiesFetchRequest(entityType, listKey));
+    try {
+      const response = await api.get(url);
+      const schema = opts.schema || z.custom<TEntity>();
+      const entities = filteredArray(schema).parse(response.data);
+
+      dispatch(entitiesFetchSuccess(entities, entityType, listKey, {
+        next: getNextLink(response),
+        prev: getPrevLink(response),
+        fetching: false,
+        fetched: true,
+        error: null,
+        lastFetchedAt: new Date(),
+      }));
+    } catch (error) {
+      dispatch(entitiesFetchFail(entityType, listKey, error));
+    }
+  };
+
+  const fetchEntities = async(): Promise<void> => {
+    if (endpoint) {
+      await fetchPage(endpoint);
+    }
+  };
+
+  const fetchNextPage = async(): Promise<void> => {
+    if (next) {
+      await fetchPage(next);
+    }
+  };
+
+  const fetchPreviousPage = async(): Promise<void> => {
+    if (prev) {
+      await fetchPage(prev);
+    }
+  };
+
+  const staleTime = opts.staleTime ?? 60000;
+
+  useEffect(() => {
+    if (isEnabled && !isFetching && (!lastFetchedAt || lastFetchedAt.getTime() + staleTime <= Date.now())) {
+      fetchEntities();
+    }
+  }, [endpoint, isEnabled]);
+
+  return {
+    entities,
+    fetchEntities,
+    fetchNextPage,
+    fetchPreviousPage,
+    hasNextPage: !!next,
+    hasPreviousPage: !!prev,
+    isError,
+    isFetched,
+    isFetching,
+    isLoading: isFetching && entities.length === 0,
+  };
+}
+
+/** Get cache at path from Redux. */
+const selectCache = (state: RootState, path: EntityPath) => state.entities[path[0]];
+
+/** Get list at path from Redux. */
+const selectList = (state: RootState, path: EntityPath) => {
+  const [, ...listKeys] = path;
+  const listKey = listKeys.join(':');
+
+  return selectCache(state, path)?.lists[listKey];
+};
+
+/** Select a particular item from a list state. */
+function selectListState<K extends keyof EntityListState>(state: RootState, path: EntityPath, key: K) {
+  const listState = selectList(state, path)?.state;
+  return listState ? listState[key] : undefined;
+}
+
+/** Hook to get a particular item from a list state. */
+function useListState<K extends keyof EntityListState>(path: EntityPath, key: K) {
+  return useAppSelector(state => selectListState(state, path, key));
+}
+
+/** Get list of entities from Redux. */
+function selectEntities<TEntity extends Entity>(state: RootState, path: EntityPath): readonly TEntity[] {
+  const cache = selectCache(state, path);
+  const list = selectList(state, path);
+
+  const entityIds = list?.ids;
+
+  return entityIds ? (
+    Array.from(entityIds).reduce<TEntity[]>((result, id) => {
+      const entity = cache?.store[id];
+      if (entity) {
+        result.push(entity as TEntity);
+      }
+      return result;
+    }, [])
+  ) : [];
+}
+
+export {
+  useEntities,
+};

app/soapbox/entity-store/hooks/useEntity.ts

@@ -0,0 +1,66 @@
+import { useEffect, useState } from 'react';
+import z from 'zod';
+
+import { useApi, useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+import { importEntities } from '../actions';
+
+import type { Entity } from '../types';
+import type { EntitySchema } from './types';
+
+type EntityPath = [entityType: string, entityId: string]
+
+/** Additional options for the hook. */
+interface UseEntityOpts<TEntity extends Entity> {
+  /** A zod schema to parse the API entity. */
+  schema?: EntitySchema<TEntity>
+  /** Whether to refetch this entity every time the hook mounts, even if it's already in the store. */
+  refetch?: boolean
+}
+
+function useEntity<TEntity extends Entity>(
+  path: EntityPath,
+  endpoint: string,
+  opts: UseEntityOpts<TEntity> = {},
+) {
+  const api = useApi();
+  const dispatch = useAppDispatch();
+
+  const [entityType, entityId] = path;
+
+  const defaultSchema = z.custom<TEntity>();
+  const schema = opts.schema || defaultSchema;
+
+  const entity = useAppSelector(state => state.entities[entityType]?.store[entityId] as TEntity | undefined);
+
+  const [isFetching, setIsFetching] = useState(false);
+  const isLoading = isFetching && !entity;
+
+  const fetchEntity = () => {
+    setIsFetching(true);
+    api.get(endpoint).then(({ data }) => {
+      const entity = schema.parse(data);
+      dispatch(importEntities([entity], entityType));
+      setIsFetching(false);
+    }).catch(() => {
+      setIsFetching(false);
+    });
+  };
+
+  useEffect(() => {
+    if (!entity || opts.refetch) {
+      fetchEntity();
+    }
+  }, []);
+
+  return {
+    entity,
+    fetchEntity,
+    isFetching,
+    isLoading,
+  };
+}
+
+export {
+  useEntity,
+};

app/soapbox/entity-store/hooks/useEntityActions.ts

@@ -0,0 +1,111 @@
+import { useState } from 'react';
+import { z } from 'zod';
+
+import { useApi, useAppDispatch, useGetState } from 'soapbox/hooks';
+
+import { deleteEntities, importEntities } from '../actions';
+
+import type { Entity } from '../types';
+import type { EntitySchema } from './types';
+import type { AxiosResponse } from 'axios';
+
+type EntityPath = [entityType: string, listKey?: string]
+
+interface UseEntityActionsOpts<TEntity extends Entity = Entity> {
+  schema?: EntitySchema<TEntity>
+}
+
+interface CreateEntityResult<TEntity extends Entity = Entity> {
+  response: AxiosResponse
+  entity: TEntity
+}
+
+interface DeleteEntityResult {
+  response: AxiosResponse
+}
+
+interface EntityActionEndpoints {
+  post?: string
+  delete?: string
+}
+
+interface EntityCallbacks<TEntity extends Entity = Entity> {
+  onSuccess?(entity?: TEntity): void
+}
+
+function useEntityActions<TEntity extends Entity = Entity, P = any>(
+  path: EntityPath,
+  endpoints: EntityActionEndpoints,
+  opts: UseEntityActionsOpts<TEntity> = {},
+) {
+  const api = useApi();
+  const dispatch = useAppDispatch();
+  const getState = useGetState();
+  const [entityType, listKey] = path;
+
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  function createEntity(params: P, callbacks: EntityCallbacks = {}): Promise<CreateEntityResult<TEntity>> {
+    if (!endpoints.post) return Promise.reject(endpoints);
+
+    setIsLoading(true);
+
+    return api.post(endpoints.post, params).then((response) => {
+      const schema = opts.schema || z.custom<TEntity>();
+      const entity = schema.parse(response.data);
+
+      // TODO: optimistic updating
+      dispatch(importEntities([entity], entityType, listKey));
+
+      if (callbacks.onSuccess) {
+        callbacks.onSuccess(entity);
+      }
+
+      setIsLoading(false);
+
+      return {
+        response,
+        entity,
+      };
+    });
+  }
+
+  function deleteEntity(entityId: string, callbacks: EntityCallbacks = {}): Promise<DeleteEntityResult> {
+    if (!endpoints.delete) return Promise.reject(endpoints);
+    // Get the entity before deleting, so we can reverse the action if the API request fails.
+    const entity = getState().entities[entityType]?.store[entityId];
+    // Optimistically delete the entity from the _store_ but keep the lists in tact.
+    dispatch(deleteEntities([entityId], entityType, { preserveLists: true }));
+
+    setIsLoading(true);
+
+    return api.delete(endpoints.delete.replaceAll(':id', entityId)).then((response) => {
+      if (callbacks.onSuccess) {
+        callbacks.onSuccess();
+      }
+
+      // Success - finish deleting entity from the state.
+      dispatch(deleteEntities([entityId], entityType));
+
+      return {
+        response,
+      };
+    }).catch((e) => {
+      if (entity) {
+        // If the API failed, reimport the entity.
+        dispatch(importEntities([entity], entityType));
+      }
+      throw e;
+    }).finally(() => {
+      setIsLoading(false);
+    });
+  }
+
+  return {
+    createEntity,
+    deleteEntity,
+    isLoading,
+  };
+}
+
+export { useEntityActions };

app/soapbox/entity-store/reducer.ts

@@ -0,0 +1,111 @@
+import produce, { enableMapSet } from 'immer';
+
+import {
+  ENTITIES_IMPORT,
+  ENTITIES_DELETE,
+  ENTITIES_FETCH_REQUEST,
+  ENTITIES_FETCH_SUCCESS,
+  ENTITIES_FETCH_FAIL,
+  EntityAction,
+} from './actions';
+import { createCache, createList, updateStore, updateList } from './utils';
+
+import type { DeleteEntitiesOpts } from './actions';
+import type { Entity, EntityCache, EntityListState } from './types';
+
+enableMapSet();
+
+/** Entity reducer state. */
+interface State {
+  [entityType: string]: EntityCache | undefined
+}
+
+/** Import entities into the cache. */
+const importEntities = (
+  state: State,
+  entityType: string,
+  entities: Entity[],
+  listKey?: string,
+  newState?: EntityListState,
+): State => {
+  return produce(state, draft => {
+    const cache = draft[entityType] ?? createCache();
+    cache.store = updateStore(cache.store, entities);
+
+    if (typeof listKey === 'string') {
+      let list = { ...(cache.lists[listKey] ?? createList()) };
+      list = updateList(list, entities);
+      if (newState) {
+        list.state = newState;
+      }
+      cache.lists[listKey] = list;
+    }
+
+    draft[entityType] = cache;
+  });
+};
+
+const deleteEntities = (
+  state: State,
+  entityType: string,
+  ids: Iterable<string>,
+  opts: DeleteEntitiesOpts,
+) => {
+  return produce(state, draft => {
+    const cache = draft[entityType] ?? createCache();
+
+    for (const id of ids) {
+      delete cache.store[id];
+
+      if (!opts?.preserveLists) {
+        for (const list of Object.values(cache.lists)) {
+          list?.ids.delete(id);
+        }
+      }
+    }
+
+    draft[entityType] = cache;
+  });
+};
+
+const setFetching = (
+  state: State,
+  entityType: string,
+  listKey: string | undefined,
+  isFetching: boolean,
+  error?: any,
+) => {
+  return produce(state, draft => {
+    const cache = draft[entityType] ?? createCache();
+
+    if (typeof listKey === 'string') {
+      const list = cache.lists[listKey] ?? createList();
+      list.state.fetching = isFetching;
+      list.state.error = error;
+      cache.lists[listKey] = list;
+    }
+
+    draft[entityType] = cache;
+  });
+};
+
+/** Stores various entity data and lists in a one reducer. */
+function reducer(state: Readonly<State> = {}, action: EntityAction): State {
+  switch (action.type) {
+    case ENTITIES_IMPORT:
+      return importEntities(state, action.entityType, action.entities, action.listKey);
+    case ENTITIES_DELETE:
+      return deleteEntities(state, action.entityType, action.ids, action.opts);
+    case ENTITIES_FETCH_SUCCESS:
+      return importEntities(state, action.entityType, action.entities, action.listKey, action.newState);
+    case ENTITIES_FETCH_REQUEST:
+      return setFetching(state, action.entityType, action.listKey, true);
+    case ENTITIES_FETCH_FAIL:
+      return setFetching(state, action.entityType, action.listKey, false, action.error);
+    default:
+      return state;
+  }
+}
+
+export default reducer;
+export type { State };

app/soapbox/entity-store/types.ts

@@ -0,0 +1,52 @@
+/** A Mastodon API entity. */
+interface Entity {
+  /** Unique ID for the entity (usually the primary key in the database). */
+  id: string
+}
+
+/** Store of entities by ID. */
+interface EntityStore<TEntity extends Entity = Entity> {
+  [id: string]: TEntity | undefined
+}
+
+/** List of entity IDs and fetch state. */
+interface EntityList {
+  /** Set of entity IDs in this list. */
+  ids: Set<string>
+  /** Server state for this entity list. */
+  state: EntityListState
+}
+
+/** Fetch state for an entity list. */
+interface EntityListState {
+  /** Next URL for pagination, if any. */
+  next: string | undefined
+  /** Previous URL for pagination, if any. */
+  prev: string | undefined
+  /** Error returned from the API, if any. */
+  error: any
+  /** Whether data has already been fetched */
+  fetched: boolean
+  /** Whether data for this list is currently being fetched. */
+  fetching: boolean
+  /** Date of the last API fetch for this list. */
+  lastFetchedAt: Date | undefined
+}
+
+/** Cache data pertaining to a paritcular entity type.. */
+interface EntityCache<TEntity extends Entity = Entity> {
+  /** Map of entities of this type. */
+  store: EntityStore<TEntity>
+  /** Lists of entity IDs for a particular purpose. */
+  lists: {
+    [listKey: string]: EntityList | undefined
+  }
+}
+
+export {
+  Entity,
+  EntityStore,
+  EntityList,
+  EntityListState,
+  EntityCache,
+};

app/soapbox/entity-store/utils.ts

@@ -0,0 +1,48 @@
+import type { Entity, EntityStore, EntityList, EntityCache, EntityListState } from './types';
+
+/** Insert the entities into the store. */
+const updateStore = (store: EntityStore, entities: Entity[]): EntityStore => {
+  return entities.reduce<EntityStore>((store, entity) => {
+    store[entity.id] = entity;
+    return store;
+  }, { ...store });
+};
+
+/** Update the list with new entity IDs. */
+const updateList = (list: EntityList, entities: Entity[]): EntityList => {
+  const newIds = entities.map(entity => entity.id);
+  return {
+    ...list,
+    ids: new Set([...Array.from(list.ids), ...newIds]),
+  };
+};
+
+/** Create an empty entity cache. */
+const createCache = (): EntityCache => ({
+  store: {},
+  lists: {},
+});
+
+/** Create an empty entity list. */
+const createList = (): EntityList => ({
+  ids: new Set(),
+  state: createListState(),
+});
+
+/** Create an empty entity list state. */
+const createListState = (): EntityListState => ({
+  next: undefined,
+  prev: undefined,
+  error: null,
+  fetched: false,
+  fetching: false,
+  lastFetchedAt: undefined,
+});
+
+export {
+  updateStore,
+  updateList,
+  createCache,
+  createList,
+  createListState,
+};

app/soapbox/features/account-gallery/components/media-item.tsx

@@ -103,7 +103,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
   } else if (attachment.type === 'audio') {
     const remoteURL = attachment.remote_url || '';
     const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
-    const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
+    const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
     thumbnail = (
       <div className='media-gallery__item-thumbnail'>
         <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>

app/soapbox/features/account-gallery/index.tsx

@@ -121,7 +121,7 @@ const AccountGallery = () => {
   let loadOlder = null;
 
   if (hasMore && !(isLoading && attachments.size === 0)) {
-    loadOlder = <LoadMore visible={!isLoading} onClick={handleLoadOlder} />;
+    loadOlder = <LoadMore className='my-auto' visible={!isLoading} onClick={handleLoadOlder} />;
   }
 
   if (unavailable) {

app/soapbox/features/auth-token-list/index.tsx

@@ -3,7 +3,7 @@ import { defineMessages, FormattedDate, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import { fetchOAuthTokens, revokeOAuthTokenById } from 'soapbox/actions/security';
-import { Button, Card, CardBody, CardHeader, CardTitle, Column, Spinner, Stack, Text } from 'soapbox/components/ui';
+import { Button, Card, CardBody, CardHeader, CardTitle, Column, HStack, Spinner, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { Token } from 'soapbox/reducers/security';
 
@@ -59,12 +59,11 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
             </Text>
           )}
         </Stack>
-
-        <div className='flex justify-end'>
+        <HStack justifyContent='end'>
           <Button theme={isCurrent ? 'danger' : 'primary'} onClick={handleRevoke}>
             {intl.formatMessage(messages.revoke)}
           </Button>
-        </div>
+        </HStack>
       </Stack>
     </div>
   );

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

@@ -6,13 +6,15 @@ import { openModal } from 'soapbox/actions/modals';
 import { Button, Combobox, ComboboxInput, ComboboxList, ComboboxOption, ComboboxPopover, HStack, IconButton, Stack, Text } from 'soapbox/components/ui';
 import { useChatContext } from 'soapbox/contexts/chat-context';
 import UploadButton from 'soapbox/features/compose/components/upload-button';
-import { search as emojiSearch } from 'soapbox/features/emoji/emoji-mart-search-light';
+import emojiSearch from 'soapbox/features/emoji/search';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 import { Attachment } from 'soapbox/types/entities';
 import { textAtCursorMatchesToken } from 'soapbox/utils/suggestions';
 
 import ChatTextarea from './chat-textarea';
 
+import type { Emoji, NativeEmoji } from 'soapbox/features/emoji';
+
 const messages = defineMessages({
   placeholder: { id: 'chat.input.placeholder', defaultMessage: 'Type a message' },
   send: { id: 'chat.actions.send', defaultMessage: 'Send' },
@@ -31,7 +33,7 @@ const initialSuggestionState = {
 };
 
 interface Suggestion {
-  list: { native: string, colons: string }[]
+  list: Emoji[]
   tokenStart: number
   token: string
 }
@@ -45,7 +47,7 @@ interface IChatComposer extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaEl
   resetContentKey: number | null
   attachments?: Attachment[]
   onDeleteAttachment?: (i: number) => void
-  isUploading?: boolean
+  uploadCount?: number
   uploadProgress?: number
 }
 
@@ -63,7 +65,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   onPaste,
   attachments = [],
   onDeleteAttachment,
-  isUploading,
+  uploadCount = 0,
   uploadProgress,
 }, ref) => {
   const intl = useIntl();
@@ -80,6 +82,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   const [suggestions, setSuggestions] = useState<Suggestion>(initialSuggestionState);
   const isSuggestionsAvailable = suggestions.list.length > 0;
 
+  const isUploading = uploadCount > 0;
   const hasAttachment = attachments.length > 0;
   const isOverCharacterLimit = maxCharacterCount && value?.length > maxCharacterCount;
   const isSubmitDisabled = disabled || isUploading || isOverCharacterLimit || (value.length === 0 && !hasAttachment);
@@ -107,7 +110,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
     );
 
     if (token && tokenStart) {
-      const results = emojiSearch(token.replace(':', ''), { maxResults: 5 } as any);
+      const results = emojiSearch(token.replace(':', ''), { maxResults: 5 });
       setSuggestions({
         list: results,
         token,
@@ -198,7 +201,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
               disabled={disabled}
               attachments={attachments}
               onDeleteAttachment={onDeleteAttachment}
-              isUploading={isUploading}
+              uploadCount={uploadCount}
               uploadProgress={uploadProgress}
             />
             {isSuggestionsAvailable ? (
@@ -209,7 +212,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
                       key={emojiSuggestion.colons}
                       value={renderSuggestionValue(emojiSuggestion)}
                     >
-                      <span>{emojiSuggestion.native}</span>
+                      <span>{(emojiSuggestion as NativeEmoji).native}</span>
                       <span className='ml-1'>
                         {emojiSuggestion.colons}
                       </span>

app/soapbox/features/chats/components/chat-message-reaction-wrapper/chat-message-reaction-wrapper.tsx

@@ -44,7 +44,7 @@ function ChatMessageReactionWrapper(props: IChatMessageReactionWrapper) {
             referenceElement={referenceElement}
             onReact={handleSelect}
             onClose={() => setIsOpen(false)}
-            offset={[-10, 12]}
+            offsetOptions={{ mainAxis: 12, crossAxis: -10 }}
             all={false}
           />
         </Portal>

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

@@ -2,7 +2,7 @@ import clsx from 'clsx';
 import React from 'react';
 
 import { Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import { EmojiReaction } from 'soapbox/types/entities';
 
 interface IChatMessageReaction {
@@ -42,4 +42,4 @@ const ChatMessageReaction = (props: IChatMessageReaction) => {
   );
 };
 
-export default ChatMessageReaction;
+export default ChatMessageReaction;

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

@@ -9,7 +9,7 @@ import { openModal } from 'soapbox/actions/modals';
 import { initReport } from 'soapbox/actions/reports';
 import DropdownMenu from 'soapbox/components/dropdown-menu';
 import { HStack, Icon, Stack, Text } from 'soapbox/components/ui';
-import emojify from 'soapbox/features/emoji/emoji';
+import emojify from 'soapbox/features/emoji';
 import Bundle from 'soapbox/features/ui/components/bundle';
 import { MediaGallery } from 'soapbox/features/ui/util/async-components';
 import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
@@ -390,4 +390,4 @@ const ChatMessage = (props: IChatMessage) => {
   );
 };
 
-export default ChatMessage;
+export default ChatMessage;

app/soapbox/features/chats/components/chat-pane/__tests__/chat-pane.test.tsx

@@ -5,7 +5,7 @@ import { __stub } from 'soapbox/api';
 import { ChatContext } from 'soapbox/contexts/chat-context';
 import { StatProvider } from 'soapbox/contexts/stat-context';
 import chats from 'soapbox/jest/fixtures/chats.json';
-import { mockStore, render, rootState, screen, waitFor } from 'soapbox/jest/test-helpers';
+import {  render, screen, waitFor } from 'soapbox/jest/test-helpers';
 
 import ChatPane from '../chat-pane';
 
@@ -22,28 +22,28 @@ const renderComponentWithChatContext = (store = {}) => render(
 );
 
 describe('<ChatPane />', () => {
-  describe('when there are no chats', () => {
-    let store: ReturnType<typeof mockStore>;
+  // describe('when there are no chats', () => {
+  //   let store: ReturnType<typeof mockStore>;
 
-    beforeEach(() => {
-      const state = rootState.setIn(['instance', 'version'], '2.7.2 (compatible; Pleroma 2.2.0)');
-      store = mockStore(state);
+  //   beforeEach(() => {
+  //     const state = rootState.setIn(['instance', 'version'], '2.7.2 (compatible; Pleroma 2.2.0)');
+  //     store = mockStore(state);
 
-      __stub((mock) => {
-        mock.onGet('/api/v1/pleroma/chats').reply(200, [], {
-          link: null,
-        });
-      });
-    });
+  //     __stub((mock) => {
+  //       mock.onGet('/api/v1/pleroma/chats').reply(200, [], {
+  //         link: null,
+  //       });
+  //     });
+  //   });
 
-    it('renders the blankslate', async () => {
-      renderComponentWithChatContext(store);
+  //   it('renders the blankslate', async () => {
+  //     renderComponentWithChatContext(store);
 
-      await waitFor(() => {
-        expect(screen.getByTestId('chat-pane-blankslate')).toBeInTheDocument();
-      });
-    });
-  });
+  //     await waitFor(() => {
+  //       expect(screen.getByTestId('chat-pane-blankslate')).toBeInTheDocument();
+  //     });
+  //   });
+  // });
 
   describe('when the software is not Truth Social', () => {
     beforeEach(() => {

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

@@ -9,18 +9,20 @@ import ChatUpload from './chat-upload';
 interface IChatTextarea extends React.ComponentProps<typeof Textarea> {
   attachments?: Attachment[]
   onDeleteAttachment?: (i: number) => void
-  isUploading?: boolean
+  uploadCount?: number
   uploadProgress?: number
 }
 
 /** Custom textarea for chats. */
-const ChatTextarea: React.FC<IChatTextarea> = ({
+const ChatTextarea: React.FC<IChatTextarea> = React.forwardRef(({
   attachments,
   onDeleteAttachment,
-  isUploading = false,
+  uploadCount = 0,
   uploadProgress = 0,
   ...rest
-}) => {
+}, ref) => {
+  const isUploading = uploadCount > 0;
+
   const handleDeleteAttachment = (i: number) => {
     return () => {
       if (onDeleteAttachment) {
@@ -54,17 +56,17 @@ const ChatTextarea: React.FC<IChatTextarea> = ({
             </div>
           ))}
 
-          {isUploading && (
+          {Array.from(Array(uploadCount)).map(() => (
             <div className='ml-2 mt-2 flex'>
               <ChatPendingUpload progress={uploadProgress} />
             </div>
-          )}
+          ))}
         </HStack>
       )}
 
-      <Textarea theme='transparent' {...rest} />
+      <Textarea ref={ref} theme='transparent' {...rest} />
     </div>
   );
-};
+});
 
 export default ChatTextarea;

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

@@ -57,7 +57,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
 
   const [content, setContent] = useState<string>('');
   const [attachments, setAttachments] = useState<Attachment[]>([]);
-  const [isUploading, setIsUploading] = useState(false);
+  const [uploadCount, setUploadCount] = useState(0);
   const [uploadProgress, setUploadProgress] = useState(0);
   const [resetContentKey, setResetContentKey] = useState<number>(fileKeyGen());
   const [resetFileKey, setResetFileKey] = useState<number>(fileKeyGen());
@@ -86,7 +86,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
     }
     setContent('');
     setAttachments([]);
-    setIsUploading(false);
+    setUploadCount(0);
     setUploadProgress(0);
     setResetFileKey(fileKeyGen());
     setResetContentKey(fileKeyGen());
@@ -151,17 +151,21 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
       return;
     }
 
-    setIsUploading(true);
+    setUploadCount(files.length);
 
-    const data = new FormData();
-    data.append('file', files[0]);
-
-    dispatch(uploadMedia(data, onUploadProgress)).then((response: any) => {
-      setAttachments([...attachments, normalizeAttachment(response.data)]);
-      setIsUploading(false);
-    }).catch(() => {
-      setIsUploading(false);
+    const promises = Array.from(files).map(async(file) => {
+      const data = new FormData();
+      data.append('file', file);
+      const response = await dispatch(uploadMedia(data, onUploadProgress));
+      return normalizeAttachment(response.data);
     });
+
+    return Promise.all(promises)
+      .then((newAttachments) => {
+        setAttachments([...attachments, ...newAttachments]);
+        setUploadCount(0);
+      })
+      .catch(() => setUploadCount(0));
   };
 
   useEffect(() => {
@@ -189,7 +193,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
         onPaste={handlePaste}
         attachments={attachments}
         onDeleteAttachment={handleRemoveFile}
-        isUploading={isUploading}
+        uploadCount={uploadCount}
         uploadProgress={uploadProgress}
       />
     </Stack>

app/soapbox/features/compose/components/compose-form.tsx

@@ -16,6 +16,7 @@ import {
 import AutosuggestInput, { AutoSuggestion } from 'soapbox/components/autosuggest-input';
 import AutosuggestTextarea from 'soapbox/components/autosuggest-textarea';
 import { Button, HStack, Stack } from 'soapbox/components/ui';
+import EmojiPickerDropdown from 'soapbox/features/emoji/containers/emoji-picker-dropdown-container';
 import { useAppDispatch, useAppSelector, useCompose, useFeatures, useInstance, usePrevious } from 'soapbox/hooks';
 import { isMobile } from 'soapbox/is-mobile';
 
@@ -26,7 +27,6 @@ import UploadButtonContainer from '../containers/upload-button-container';
 import WarningContainer from '../containers/warning-container';
 import { countableText } from '../util/counter';
 
-import EmojiPickerDropdown from './emoji-picker/emoji-picker-dropdown';
 import MarkdownButton from './markdown-button';
 import PollButton from './poll-button';
 import PollForm from './polls/poll-form';
@@ -40,7 +40,7 @@ import UploadForm from './upload-form';
 import VisualCharacterCounter from './visual-character-counter';
 import Warning from './warning';
 
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
+import type { Emoji } from 'soapbox/features/emoji';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -116,7 +116,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       // FIXME: Make this less brittle
       getClickableArea(),
       document.querySelector('.privacy-dropdown__dropdown'),
-      document.querySelector('.emoji-picker-dropdown__menu'),
+      document.querySelector('em-emoji-picker'),
       document.getElementById('modal-overlay'),
     ].some(element => element?.contains(e.target as any));
   };
@@ -179,7 +179,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
 
   const handleEmojiPick = (data: Emoji) => {
     const position   = autosuggestTextareaRef.current!.textarea!.selectionStart;
-    const needsSpace = data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
+    const needsSpace = !!data.custom && position > 0 && !allowedAroundShortCode.includes(text[position - 1]);
 
     dispatch(insertEmojiCompose(id, position, data, needsSpace));
   };
@@ -226,7 +226,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
   const renderButtons = useCallback(() => (
     <HStack alignItems='center' space={2}>
       {features.media && <UploadButtonContainer composeId={id} />}
-      <EmojiPickerDropdown onPickEmoji={handleEmojiPick} />
+      <EmojiPickerDropdown onPickEmoji={handleEmojiPick} condensed={shouldCondense} />
       {features.polls && <PollButton composeId={id} />}
       {features.privacyScopes && !group && !groupId && <PrivacyDropdown composeId={id} />}
       {features.scheduledStatuses && <ScheduleButton composeId={id} />}

app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx

@@ -1,209 +0,0 @@
-import clsx from 'clsx';
-import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import React, { useRef, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-// @ts-ignore
-import Overlay from 'react-overlays/lib/Overlay';
-import { createSelector } from 'reselect';
-
-import { useEmoji } from 'soapbox/actions/emojis';
-import { getSettings, changeSetting } from 'soapbox/actions/settings';
-import { IconButton } from 'soapbox/components/ui';
-import { EmojiPicker as EmojiPickerAsync } from 'soapbox/features/ui/util/async-components';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-
-import EmojiPickerMenu from './emoji-picker-menu';
-
-import type { Emoji as EmojiType } from 'soapbox/components/autosuggest-emoji';
-import type { RootState } from 'soapbox/store';
-
-let EmojiPicker: any, Emoji: any; // load asynchronously
-
-const perLine = 8;
-const lines   = 2;
-
-const DEFAULTS = [
-  '+1',
-  'grinning',
-  'kissing_heart',
-  'heart_eyes',
-  'laughing',
-  'stuck_out_tongue_winking_eye',
-  'sweat_smile',
-  'joy',
-  'yum',
-  'disappointed',
-  'thinking_face',
-  'weary',
-  'sob',
-  'sunglasses',
-  'heart',
-  'ok_hand',
-];
-
-const getFrequentlyUsedEmojis = createSelector([
-  (state: RootState) => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
-], emojiCounters => {
-  let emojis = emojiCounters
-    .keySeq()
-    .sort((a: number, b: number) => emojiCounters.get(a) - emojiCounters.get(b))
-    .reverse()
-    .slice(0, perLine * lines)
-    .toArray();
-
-  if (emojis.length < DEFAULTS.length) {
-    const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
-    emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
-  }
-
-  return emojis;
-});
-
-const getCustomEmojis = createSelector([
-  (state: RootState) => state.custom_emojis as ImmutableList<ImmutableMap<string, string>>,
-], emojis => emojis.filter((e) => e.get('visible_in_picker')).sort((a, b) => {
-  const aShort = a.get('shortcode')!.toLowerCase();
-  const bShort = b.get('shortcode')!.toLowerCase();
-
-  if (aShort < bShort) {
-    return -1;
-  } else if (aShort > bShort) {
-    return 1;
-  } else {
-    return 0;
-  }
-}) as ImmutableList<ImmutableMap<string, string>>);
-
-const messages = defineMessages({
-  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
-  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
-  emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
-  custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
-  recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
-  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
-  people: { id: 'emoji_button.people', defaultMessage: 'People' },
-  nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
-  food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
-  activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
-  travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
-  objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
-  symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
-  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
-});
-
-interface IEmojiPickerDropdown {
-  onPickEmoji: (data: EmojiType) => void
-  button?: JSX.Element
-}
-
-const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, button }) => {
-  const intl = useIntl();
-  const dispatch = useAppDispatch();
-
-  const customEmojis = useAppSelector((state) => getCustomEmojis(state));
-  const skinTone = useAppSelector((state) => getSettings(state).get('skinTone') as number);
-  const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
-
-  const [active, setActive] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [placement, setPlacement] = useState<'bottom' | 'top'>();
-
-  const target = useRef(null);
-
-  const onSkinTone = (skinTone: number) => {
-    dispatch(changeSetting(['skinTone'], skinTone));
-  };
-
-  const handlePickEmoji = (emoji: EmojiType) => {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    dispatch(useEmoji(emoji));
-
-    if (onPickEmoji) {
-      onPickEmoji(emoji);
-    }
-  };
-
-  const onShowDropdown: React.EventHandler<React.KeyboardEvent | React.MouseEvent> = (e) => {
-    e.stopPropagation();
-
-    setActive(true);
-
-    if (!EmojiPicker) {
-      setLoading(true);
-
-      EmojiPickerAsync().then(EmojiMart => {
-        EmojiPicker = EmojiMart.Picker;
-        Emoji = EmojiMart.Emoji;
-
-        setLoading(false);
-      }).catch(() => {
-        setLoading(false);
-      });
-    }
-
-    const { top } = (e.target as any).getBoundingClientRect();
-    setPlacement(top * 2 < innerHeight ? 'bottom' : 'top');
-  };
-
-  const onHideDropdown = () => {
-    setActive(false);
-  };
-
-  const onToggle: React.EventHandler<React.KeyboardEvent | React.MouseEvent> = (e) => {
-    if (!loading && (!(e as React.KeyboardEvent).key || (e as React.KeyboardEvent).key === 'Enter')) {
-      if (active) {
-        onHideDropdown();
-      } else {
-        onShowDropdown(e);
-      }
-    }
-  };
-
-  const handleKeyDown: React.KeyboardEventHandler = e => {
-    if (e.key === 'Escape') {
-      onHideDropdown();
-    }
-  };
-
-  const title = intl.formatMessage(messages.emoji);
-
-  return (
-    <div className='relative' onKeyDown={handleKeyDown}>
-      <div
-        ref={target}
-        title={title}
-        aria-label={title}
-        aria-expanded={active}
-        role='button'
-        onClick={onToggle}
-        onKeyDown={onToggle}
-        tabIndex={0}
-      >
-        {button || <IconButton
-          className={clsx({
-            'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
-            'pulse-loading': active && loading,
-          })}
-          title='😀'
-          src={require('@tabler/icons/mood-happy.svg')}
-        />}
-      </div>
-
-      <Overlay show={active} placement={placement} target={target.current}>
-        <EmojiPickerMenu
-          customEmojis={customEmojis}
-          loading={loading}
-          onClose={onHideDropdown}
-          onPick={handlePickEmoji}
-          onSkinTone={onSkinTone}
-          skinTone={skinTone}
-          frequentlyUsedEmojis={frequentlyUsedEmojis}
-        />
-      </Overlay>
-    </div>
-  );
-};
-
-export { EmojiPicker, Emoji };
-
-export default EmojiPickerDropdown;

app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx

@@ -1,171 +0,0 @@
-import clsx from 'clsx';
-import { supportsPassiveEvents } from 'detect-passive-events';
-import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-import { buildCustomEmojis, categoriesFromEmojis } from '../../../emoji/emoji';
-
-import { EmojiPicker } from './emoji-picker-dropdown';
-import ModifierPicker from './modifier-picker';
-
-import type { Emoji } from 'soapbox/components/autosuggest-emoji';
-
-const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-
-const messages = defineMessages({
-  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
-  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
-  emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
-  custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
-  recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
-  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
-  people: { id: 'emoji_button.people', defaultMessage: 'People' },
-  nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
-  food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
-  activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
-  travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
-  objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
-  symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
-  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
-});
-
-interface IEmojiPickerMenu {
-  customEmojis: ImmutableList<ImmutableMap<string, string>>
-  loading?: boolean
-  onClose: () => void
-  onPick: (emoji: Emoji) => void
-  onSkinTone: (skinTone: number) => void
-  skinTone?: number
-  frequentlyUsedEmojis?: Array<string>
-  style?: React.CSSProperties
-}
-
-const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
-  customEmojis,
-  loading = true,
-  onClose,
-  onPick,
-  onSkinTone,
-  skinTone,
-  frequentlyUsedEmojis = [],
-  style = {},
-}) => {
-  const intl = useIntl();
-
-  const node = useRef<HTMLDivElement>(null);
-
-  const [modifierOpen, setModifierOpen] = useState(false);
-
-  const categoriesSort = [
-    'recent',
-    'people',
-    'nature',
-    'foods',
-    'activity',
-    'places',
-    'objects',
-    'symbols',
-    'flags',
-  ];
-
-  categoriesSort.splice(1, 0, ...Array.from(categoriesFromEmojis(customEmojis) as Set<string>).sort());
-
-  const handleDocumentClick = useCallback((e: MouseEvent | TouchEvent) => {
-    if (node.current && !node.current.contains(e.target as Node)) {
-      onClose();
-    }
-  }, []);
-
-  const getI18n = () => {
-    return {
-      search: intl.formatMessage(messages.emoji_search),
-      notfound: intl.formatMessage(messages.emoji_not_found),
-      categories: {
-        search: intl.formatMessage(messages.search_results),
-        recent: intl.formatMessage(messages.recent),
-        people: intl.formatMessage(messages.people),
-        nature: intl.formatMessage(messages.nature),
-        foods: intl.formatMessage(messages.food),
-        activity: intl.formatMessage(messages.activity),
-        places: intl.formatMessage(messages.travel),
-        objects: intl.formatMessage(messages.objects),
-        symbols: intl.formatMessage(messages.symbols),
-        flags: intl.formatMessage(messages.flags),
-        custom: intl.formatMessage(messages.custom),
-      },
-    };
-  };
-
-  const handleClick = (emoji: any) => {
-    if (!emoji.native) {
-      emoji.native = emoji.colons;
-    }
-
-    onClose();
-    onPick(emoji);
-  };
-
-  const handleModifierOpen = () => {
-    setModifierOpen(true);
-  };
-
-  const handleModifierClose = () => {
-    setModifierOpen(false);
-  };
-
-  const handleModifierChange = (modifier: number) => {
-    onSkinTone(modifier);
-  };
-
-  useEffect(() => {
-    document.addEventListener('click', handleDocumentClick, false);
-    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
-
-    return () => {
-      document.removeEventListener('click', handleDocumentClick, false);
-      document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
-    };
-  }, []);
-
-  if (loading) {
-    return <div style={{ width: 299 }} />;
-  }
-
-  const title = intl.formatMessage(messages.emoji);
-
-  return (
-    <div className={clsx('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={node}>
-      <EmojiPicker
-        perLine={8}
-        emojiSize={22}
-        sheetSize={32}
-        custom={buildCustomEmojis(customEmojis)}
-        color=''
-        emoji=''
-        set='twitter'
-        title={title}
-        i18n={getI18n()}
-        onClick={handleClick}
-        include={categoriesSort}
-        recent={frequentlyUsedEmojis}
-        skin={skinTone}
-        showPreview={false}
-        backgroundImageFn={backgroundImageFn}
-        autoFocus
-        emojiTooltip
-      />
-
-      <ModifierPicker
-        active={modifierOpen}
-        modifier={skinTone}
-        onOpen={handleModifierOpen}
-        onClose={handleModifierClose}
-        onChange={handleModifierChange}
-      />
-    </div>
-  );
-};
-
-export default EmojiPickerMenu;

app/soapbox/features/compose/components/emoji-picker/modifier-picker-menu.tsx

@@ -1,73 +0,0 @@
-import { supportsPassiveEvents } from 'detect-passive-events';
-import React, { useCallback, useEffect, useRef } from 'react';
-
-import { Emoji } from './emoji-picker-dropdown';
-
-const listenerOptions = supportsPassiveEvents ? { passive: true } : false;
-const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
-
-interface IModifierPickerMenu {
-  active: boolean
-  onSelect: (modifier: number) => void
-  onClose: () => void
-}
-
-const ModifierPickerMenu: React.FC<IModifierPickerMenu> = ({ active, onSelect, onClose }) => {
-  const node = useRef<HTMLDivElement>(null);
-
-  const handleClick: React.MouseEventHandler<HTMLButtonElement> = e => {
-    onSelect(+e.currentTarget.getAttribute('data-index')! * 1);
-  };
-
-  const handleDocumentClick = useCallback(((e: MouseEvent | TouchEvent) => {
-    if (node.current && !node.current.contains(e.target as Node)) {
-      onClose();
-    }
-  }), []);
-
-  const attachListeners = () => {
-    document.addEventListener('click', handleDocumentClick, false);
-    document.addEventListener('touchend', handleDocumentClick, listenerOptions);
-  };
-
-  const removeListeners = () => {
-    document.removeEventListener('click', handleDocumentClick, false);
-    document.removeEventListener('touchend', handleDocumentClick, listenerOptions as any);
-  };
-
-  useEffect(() => {
-    return () => {
-      removeListeners();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (active) attachListeners();
-    else removeListeners();
-  }, [active]);
-
-  return (
-    <div className='emoji-picker-dropdown__modifiers__menu' style={{ display: active ? 'block' : 'none' }} ref={node}>
-      <button onClick={handleClick} data-index={1}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={1} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={2}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={2} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={3}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={3} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={4}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={4} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={5}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={5} backgroundImageFn={backgroundImageFn} />
-      </button>
-      <button onClick={handleClick} data-index={6}>
-        <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={6} backgroundImageFn={backgroundImageFn} />
-      </button>
-    </div>
-  );
-};
-
-export default ModifierPickerMenu;

app/soapbox/features/compose/components/emoji-picker/modifier-picker.tsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { Emoji } from './emoji-picker-dropdown';
-import ModifierPickerMenu from './modifier-picker-menu';
-
-const backgroundImageFn = () => require('emoji-datasource/img/twitter/sheets/32.png');
-
-interface IModifierPicker {
-  active: boolean
-  modifier?: number
-  onOpen: () => void
-  onClose: () => void
-  onChange: (skinTone: number) => void
-}
-
-const ModifierPicker: React.FC<IModifierPicker> = ({ active, modifier, onOpen, onClose, onChange }) => {
-  const handleClick = () => {
-    if (active) {
-      onClose();
-    } else {
-      onOpen();
-    }
-  };
-
-  const handleSelect = (modifier: number) => {
-    onChange(modifier);
-    onClose();
-  };
-
-  return (
-    <div className='emoji-picker-dropdown__modifiers'>
-      <Emoji emoji='thumbsup' set='twitter' size={22} sheetSize={32} skin={modifier} onClick={handleClick} backgroundImageFn={backgroundImageFn} />
-      <ModifierPickerMenu active={active} onSelect={handleSelect} onClose={onClose} />
-    </div>
-  );
-};
-
-export default ModifierPicker;

app/soapbox/features/compose/components/polls/duration-selector.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
 import { Select } from 'soapbox/components/ui';
@@ -20,15 +20,7 @@ const DurationSelector = ({ onDurationChange }: IDurationSelector) => {
   const [hours, setHours] = useState<number>(0);
   const [minutes, setMinutes] = useState<number>(0);
 
-  const value = useMemo(() => {
-    const now: any = new Date();
-    const future: any = new Date();
-    now.setDate(now.getDate() + days);
-    now.setMinutes(now.getMinutes() + minutes);
-    now.setHours(now.getHours() + hours);
-
-    return Math.round((now - future) / 1000);
-  }, [days, hours, minutes]);
+  const value = (days * 24 * 60 * 60) + (hours * 60 * 60) + (minutes * 60);
 
   useEffect(() => {
     if (days === 7) {

app/soapbox/features/compose/components/reply-mentions.tsx

@@ -6,6 +6,7 @@ import { openModal } from 'soapbox/actions/modals';
 import { useAppSelector, useCompose, useFeatures } from 'soapbox/hooks';
 import { statusToMentionsAccountIdsArray } from 'soapbox/reducers/compose';
 import { makeGetStatus } from 'soapbox/selectors';
+import { isPubkey } from 'soapbox/utils/nostr';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
 
@@ -52,9 +53,14 @@ const ReplyMentions: React.FC<IReplyMentions> = ({ composeId }) => {
     );
   }
 
-  const accounts = to.slice(0, 2).map((acct: string) => (
-    <span className='reply-mentions__account'>@{acct.split('@')[0]}</span>
-  )).toArray();
+  const accounts = to.slice(0, 2).map((acct: string) => {
+    const username = acct.split('@')[0];
+    return (
+      <span className='reply-mentions__account'>
+        @{isPubkey(username) ? username.slice(0, 8) : username}
+      </span>
+    );
+  }).toArray();
 
   if (to.size > 2) {
     accounts.push(

app/soapbox/features/emoji/__tests__/emoji-index.test.ts

@@ -1,8 +1,7 @@
-// @ts-ignore
-import { emojiIndex } from 'emoji-mart';
+import { List, Map } from 'immutable';
 import pick from 'lodash/pick';
 
-import { search } from '../emoji-mart-search-light';
+import search, { addCustomToPool } from '../search';
 
 const trimEmojis = (emoji: any) => pick(emoji, ['id', 'unified', 'native', 'custom']);
 
@@ -16,116 +15,83 @@ describe('emoji_index', () => {
       },
     ];
     expect(search('pineapple').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('pineapple').map(trimEmojis)).toEqual(expected);
   });
 
   it('orders search results correctly', () => {
     const expected = [
-      {
-        id: 'apple',
-        unified: '1f34e',
-        native: '🍎',
-      },
       {
         id: 'pineapple',
         unified: '1f34d',
         native: '🍍',
       },
+      {
+        id: 'apple',
+        unified: '1f34e',
+        native: '🍎',
+      },
       {
         id: 'green_apple',
         unified: '1f34f',
         native: '🍏',
       },
-      {
-        id: 'iphone',
-        unified: '1f4f1',
-        native: '📱',
-      },
     ];
     expect(search('apple').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('apple').map(trimEmojis)).toEqual(expected);
   });
 
-  it('can include/exclude categories', () => {
-    expect(search('flag', { include: ['people'] } as any)).toEqual([]);
-    expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([]);
-  });
-
-  it('(different behavior from emoji-mart) do not erases custom emoji if not passed again', () => {
+  it('handles custom emojis', () => {
     const custom = [
       {
         id: 'mastodon',
         name: 'mastodon',
-        short_names: ['mastodon'],
-        text: '',
-        emoticons: [],
         keywords: ['mastodon'],
-        imageUrl: 'http://example.com',
-        custom: true,
+        skins: { src: 'http://example.com' },
       },
     ];
-    search('', { custom } as any);
-    emojiIndex.search('', { custom });
+
+    const custom_emojis = List([
+      Map({ static_url: 'http://example.com', shortcode: 'mastodon' }),
+    ]);
+
     const lightExpected = [
       {
         id: 'mastodon',
         custom: true,
       },
     ];
-    expect(search('masto').map(trimEmojis)).toEqual(lightExpected);
-    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
+
+    addCustomToPool(custom);
+    expect(search('masto', {}, custom_emojis).map(trimEmojis)).toEqual(lightExpected);
   });
 
-  it('(different behavior from emoji-mart) erases custom emoji if another is passed', () => {
+  it('updates custom emoji if another is passed', () => {
     const custom = [
       {
         id: 'mastodon',
         name: 'mastodon',
-        short_names: ['mastodon'],
-        text: '',
-        emoticons: [],
         keywords: ['mastodon'],
-        imageUrl: 'http://example.com',
-        custom: true,
+        skins: { src: 'http://example.com' },
       },
     ];
-    search('', { custom } as any);
-    emojiIndex.search('', { custom });
-    expect(search('masto', { custom: [] } as any).map(trimEmojis)).toEqual([]);
-    expect(emojiIndex.search('masto').map(trimEmojis)).toEqual([]);
-  });
 
-  it('handles custom emoji', () => {
-    const custom = [
-      {
-        id: 'mastodon',
-        name: 'mastodon',
-        short_names: ['mastodon'],
-        text: '',
-        emoticons: [],
-        keywords: ['mastodon'],
-        imageUrl: 'http://example.com',
-        custom: true,
-      },
-    ];
-    search('', { custom } as any);
-    emojiIndex.search('', { custom });
-    const expected = [
-      {
-        id: 'mastodon',
-        custom: true,
-      },
-    ];
-    expect(search('masto', { custom } as any).map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('masto', { custom }).map(trimEmojis)).toEqual(expected);
-  });
+    addCustomToPool(custom);
 
-  it('should filter only emojis we care about, exclude pineapple', () => {
-    const emojisToShowFilter = (emoji: any) => emoji.unified !== '1F34D';
-    expect(search('apple', { emojisToShowFilter } as any).map((obj: any) => obj.id))
-      .not.toContain('pineapple');
-    expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj: any) => obj.id))
-      .not.toContain('pineapple');
+    const custom2 = [
+      {
+        id: 'pleroma',
+        name: 'pleroma',
+        keywords: ['pleroma'],
+        skins: { src: 'http://example.com' },
+      },
+    ];
+
+    addCustomToPool(custom2);
+
+    const custom_emojis = List([
+      Map({ static_url: 'http://example.com', shortcode: 'pleroma' }),
+    ]);
+
+    const expected: any = [];
+    expect(search('masto', {}, custom_emojis).map(trimEmojis)).toEqual(expected);
   });
 
   it('does an emoji whose unified name is irregular', () => {
@@ -147,7 +113,6 @@ describe('emoji_index', () => {
       },
     ];
     expect(search('polo').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('polo').map(trimEmojis)).toEqual(expected);
   });
 
   it('can search for thinking_face', () => {
@@ -159,7 +124,6 @@ describe('emoji_index', () => {
       },
     ];
     expect(search('thinking_fac').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('thinking_fac').map(trimEmojis)).toEqual(expected);
   });
 
   it('can search for woman-facepalming', () => {
@@ -171,6 +135,5 @@ describe('emoji_index', () => {
       },
     ];
     expect(search('woman-facep').map(trimEmojis)).toEqual(expected);
-    expect(emojiIndex.search('woman-facep').map(trimEmojis)).toEqual(expected);
   });
 });

app/soapbox/features/emoji/components/emoji-picker-dropdown.tsx

@@ -0,0 +1,258 @@
+import { Map as ImmutableMap } from 'immutable';
+import React, { useEffect, useState, useLayoutEffect } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import { createSelector } from 'reselect';
+
+import { useEmoji } from 'soapbox/actions/emojis';
+import { changeSetting } from 'soapbox/actions/settings';
+import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
+import { RootState } from 'soapbox/store';
+
+import { buildCustomEmojis } from '../../emoji';
+import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components';
+
+import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
+
+let EmojiPicker: any; // load asynchronously
+
+export const messages = defineMessages({
+  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
+  emoji_pick: { id: 'emoji_button.pick', defaultMessage: 'Pick an emoji…' },
+  emoji_oh_no: { id: 'emoji_button.oh_no', defaultMessage: 'Oh no!' },
+  emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
+  emoji_not_found: { id: 'emoji_button.not_found', defaultMessage: 'No emoji\'s found.' },
+  emoji_add_custom: { id: 'emoji_button.add_custom', defaultMessage: 'Add custom emoji' },
+  custom: { id: 'emoji_button.custom', defaultMessage: 'Custom' },
+  recent: { id: 'emoji_button.recent', defaultMessage: 'Frequently used' },
+  search_results: { id: 'emoji_button.search_results', defaultMessage: 'Search results' },
+  people: { id: 'emoji_button.people', defaultMessage: 'People' },
+  nature: { id: 'emoji_button.nature', defaultMessage: 'Nature' },
+  food: { id: 'emoji_button.food', defaultMessage: 'Food & Drink' },
+  activity: { id: 'emoji_button.activity', defaultMessage: 'Activity' },
+  travel: { id: 'emoji_button.travel', defaultMessage: 'Travel & Places' },
+  objects: { id: 'emoji_button.objects', defaultMessage: 'Objects' },
+  symbols: { id: 'emoji_button.symbols', defaultMessage: 'Symbols' },
+  flags: { id: 'emoji_button.flags', defaultMessage: 'Flags' },
+  skins_choose: { id: 'emoji_button.skins_choose', defaultMessage: 'Choose default skin tone' },
+  skins_1: { id: 'emoji_button.skins_1', defaultMessage: 'Default' },
+  skins_2: { id: 'emoji_button.skins_2', defaultMessage: 'Light' },
+  skins_3: { id: 'emoji_button.skins_3', defaultMessage: 'Medium-Light' },
+  skins_4: { id: 'emoji_button.skins_4', defaultMessage: 'Medium' },
+  skins_5: { id: 'emoji_button.skins_5', defaultMessage: 'Medium-Dark' },
+  skins_6: { id: 'emoji_button.skins_6', defaultMessage: 'Dark' },
+});
+
+export interface IEmojiPickerDropdown {
+  onPickEmoji?: (emoji: Emoji) => void
+  condensed?: boolean
+  withCustom?: boolean
+  visible: boolean
+  setVisible: (value: boolean) => void
+  update: (() => any) | null
+}
+
+const perLine = 8;
+const lines   = 2;
+
+const DEFAULTS = [
+  '+1',
+  'grinning',
+  'kissing_heart',
+  'heart_eyes',
+  'laughing',
+  'stuck_out_tongue_winking_eye',
+  'sweat_smile',
+  'joy',
+  'yum',
+  'disappointed',
+  'thinking_face',
+  'weary',
+  'sob',
+  'sunglasses',
+  'heart',
+  'ok_hand',
+];
+
+export const getFrequentlyUsedEmojis = createSelector([
+  (state: RootState) => state.settings.get('frequentlyUsedEmojis', ImmutableMap()),
+], (emojiCounters: ImmutableMap<string, number>) => {
+  let emojis = emojiCounters
+    .keySeq()
+    .sort((a, b) => emojiCounters.get(a)! - emojiCounters.get(b)!)
+    .reverse()
+    .slice(0, perLine * lines)
+    .toArray();
+
+  if (emojis.length < DEFAULTS.length) {
+    const uniqueDefaults = DEFAULTS.filter(emoji => !emojis.includes(emoji));
+    emojis = emojis.concat(uniqueDefaults.slice(0, DEFAULTS.length - emojis.length));
+  }
+
+  return emojis;
+});
+
+const getCustomEmojis = createSelector([
+  (state: RootState) => state.custom_emojis,
+], emojis => emojis.filter(e => e.get('visible_in_picker')).sort((a, b) => {
+  const aShort = a.get('shortcode')!.toLowerCase();
+  const bShort = b.get('shortcode')!.toLowerCase();
+
+  if (aShort < bShort) {
+    return -1;
+  } else if (aShort > bShort) {
+    return 1;
+  } else {
+    return 0;
+  }
+}));
+
+// Fixes render bug where popover has a delayed position update
+const RenderAfter = ({ children, update }: any) => {
+  const [nextTick, setNextTick] = useState(false);
+
+  useEffect(() => {
+    setTimeout(() => {
+      setNextTick(true);
+    }, 0);
+  }, []);
+
+  useLayoutEffect(() => {
+    if (nextTick) {
+      update();
+    }
+  }, [nextTick, update]);
+
+  return nextTick ? children : null;
+};
+
+const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({
+  onPickEmoji, visible, setVisible, update, withCustom = true,
+}) => {
+  const intl = useIntl();
+  const dispatch = useAppDispatch();
+  const settings = useSettings();
+  const title = intl.formatMessage(messages.emoji);
+  const userTheme = settings.get('themeMode');
+  const theme = (userTheme === 'dark' || userTheme === 'light') ? userTheme : 'auto';
+
+  const customEmojis = useAppSelector((state) => getCustomEmojis(state));
+  const frequentlyUsedEmojis = useAppSelector((state) => getFrequentlyUsedEmojis(state));
+
+  const [loading, setLoading] = useState(false);
+
+  const handlePick = (emoji: any) => {
+    setVisible(false);
+
+    let pickedEmoji: Emoji;
+
+    if (emoji.native) {
+      pickedEmoji = {
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: false,
+        native: emoji.native,
+        unified: emoji.unified,
+      } as NativeEmoji;
+    } else {
+      pickedEmoji = {
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: true,
+        imageUrl: emoji.src,
+      } as CustomEmoji;
+    }
+
+    dispatch(useEmoji(pickedEmoji)); // eslint-disable-line react-hooks/rules-of-hooks
+
+    if (onPickEmoji) {
+      onPickEmoji(pickedEmoji);
+    }
+  };
+
+  const handleSkinTone = (skinTone: string) => {
+    dispatch(changeSetting(['skinTone'], skinTone));
+  };
+
+  const getI18n = () => {
+    return {
+      search: intl.formatMessage(messages.emoji_search),
+      pick: intl.formatMessage(messages.emoji_pick),
+      search_no_results_1: intl.formatMessage(messages.emoji_oh_no),
+      search_no_results_2: intl.formatMessage(messages.emoji_not_found),
+      add_custom: intl.formatMessage(messages.emoji_add_custom),
+      categories: {
+        search: intl.formatMessage(messages.search_results),
+        frequent: intl.formatMessage(messages.recent),
+        people: intl.formatMessage(messages.people),
+        nature: intl.formatMessage(messages.nature),
+        foods: intl.formatMessage(messages.food),
+        activity: intl.formatMessage(messages.activity),
+        places: intl.formatMessage(messages.travel),
+        objects: intl.formatMessage(messages.objects),
+        symbols: intl.formatMessage(messages.symbols),
+        flags: intl.formatMessage(messages.flags),
+        custom: intl.formatMessage(messages.custom),
+      },
+      skins: {
+        choose: intl.formatMessage(messages.skins_choose),
+        1: intl.formatMessage(messages.skins_1),
+        2: intl.formatMessage(messages.skins_2),
+        3: intl.formatMessage(messages.skins_3),
+        4: intl.formatMessage(messages.skins_4),
+        5: intl.formatMessage(messages.skins_5),
+        6: intl.formatMessage(messages.skins_6),
+      },
+    };
+  };
+
+  useEffect(() => {
+    // fix scrolling focus issue
+    if (visible) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+
+    if (!EmojiPicker) {
+      setLoading(true);
+
+      EmojiPickerAsync().then(EmojiMart => {
+        EmojiPicker = EmojiMart.Picker;
+
+        setLoading(false);
+      }).catch(() => {
+        setLoading(false);
+      });
+    }
+  }, [visible]);
+
+  useEffect(() => () => {
+    document.body.style.overflow = '';
+  }, []);
+
+  return (
+    visible ? (
+      <RenderAfter update={update}>
+        {!loading && (
+          <EmojiPicker
+            custom={withCustom ? [{ emojis: buildCustomEmojis(customEmojis) }] : undefined}
+            title={title}
+            onEmojiSelect={handlePick}
+            recent={frequentlyUsedEmojis}
+            perLine={8}
+            skin={handleSkinTone}
+            emojiSize={22}
+            emojiButtonSize={34}
+            set='twitter'
+            theme={theme}
+            i18n={getI18n()}
+            skinTonePosition='search'
+            previewPosition='none'
+          />
+        )}
+      </RenderAfter>
+    ) : null
+  );
+};
+
+export default EmojiPickerDropdown;

app/soapbox/features/emoji/components/emoji-picker.tsx

@@ -0,0 +1,30 @@
+import { Picker as EmojiPicker } from 'emoji-mart';
+import React, { useRef, useEffect } from 'react';
+
+import { joinPublicPath } from 'soapbox/utils/static';
+
+import data from '../data';
+
+const getSpritesheetURL = (set: string) => {
+  return require('emoji-datasource/img/twitter/sheets/32.png');
+};
+
+const getImageURL = (set: string, name: string) => {
+  return joinPublicPath(`/packs/emoji/${name}.svg`);
+};
+
+const Picker = (props: any) => {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const input = { ...props, data, ref, getImageURL, getSpritesheetURL };
+
+    new EmojiPicker(input);
+  }, []);
+
+  return <div ref={ref} />;
+};
+
+export {
+  Picker,
+};

app/soapbox/features/emoji/containers/emoji-picker-dropdown-container.tsx

@@ -0,0 +1,79 @@
+import { useFloating, shift } from '@floating-ui/react';
+import clsx from 'clsx';
+import React, { KeyboardEvent, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { IconButton } from 'soapbox/components/ui';
+import { useClickOutside } from 'soapbox/hooks';
+
+import EmojiPickerDropdown, { IEmojiPickerDropdown } from '../components/emoji-picker-dropdown';
+
+export const messages = defineMessages({
+  emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
+});
+
+const EmojiPickerDropdownContainer = (
+  props: Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed' | 'withCustom'>,
+) => {
+  const intl = useIntl();
+  const title = intl.formatMessage(messages.emoji);
+
+  const [visible, setVisible] = useState(false);
+
+  const { x, y, strategy, refs, update } = useFloating<HTMLButtonElement>({
+    middleware: [shift()],
+  });
+
+  useClickOutside(refs, () => {
+    setVisible(false);
+  });
+
+  const handleToggle = (e: MouseEvent | KeyboardEvent) => {
+    e.stopPropagation();
+    setVisible(!visible);
+  };
+
+  return (
+    <div className='relative'>
+      <IconButton
+        className={clsx({
+          'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
+        })}
+        ref={refs.setReference}
+        src={require('@tabler/icons/mood-happy.svg')}
+        title={title}
+        aria-label={title}
+        aria-expanded={visible}
+        role='button'
+        onClick={handleToggle as any}
+        onKeyDown={handleToggle as React.KeyboardEventHandler<HTMLButtonElement>}
+        tabIndex={0}
+      />
+
+      {createPortal(
+        <div
+          className='z-[101]'
+          ref={refs.setFloating}
+          style={{
+            position: strategy,
+            top: y ?? 0,
+            left: x ?? 0,
+            width: 'max-content',
+          }}
+        >
+          <EmojiPickerDropdown
+            visible={visible}
+            setVisible={setVisible}
+            update={update}
+            {...props}
+          />
+        </div>,
+        document.body,
+      )}
+    </div>
+  );
+};
+
+
+export default EmojiPickerDropdownContainer;

app/soapbox/features/emoji/data.ts

@@ -0,0 +1,52 @@
+import data from '@emoji-mart/data/sets/14/twitter.json';
+
+export interface NativeEmoji {
+  unified: string
+  native: string
+  x: number
+  y: number
+}
+
+export interface CustomEmoji {
+  src: string
+}
+
+export interface Emoji<T> {
+  id: string
+  name: string
+  keywords: string[]
+  skins: T[]
+  version?: number
+}
+
+export interface EmojiCategory {
+  id: string
+  emojis: string[]
+}
+
+export interface EmojiMap {
+  [s: string]: Emoji<NativeEmoji>
+}
+
+export interface EmojiAlias {
+  [s: string]: string
+}
+
+export interface EmojiSheet {
+  cols: number
+  rows: number
+}
+
+export interface EmojiData {
+  categories: EmojiCategory[]
+  emojis: EmojiMap
+  aliases: EmojiAlias
+  sheet: EmojiSheet
+}
+
+const emojiData = data as EmojiData;
+const { categories, emojis, aliases, sheet } = emojiData;
+
+export { categories, emojis, aliases, sheet };
+
+export default emojiData;

app/soapbox/features/emoji/emoji-compressed.js

@@ -1,124 +0,0 @@
-// @preval
-// http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
-// This file contains the compressed version of the emoji data from
-// both emoji-map.json and from emoji-mart's emojiIndex and data objects.
-// It's designed to be emitted in an array format to take up less space
-// over the wire.
-
-const { emojiIndex } = require('emoji-mart');
-let data = require('emoji-mart/data/all.json');
-const { uncompress: emojiMartUncompress } = require('emoji-mart/dist/utils/data');
-
-const emojiMap = require('./emoji-map.json');
-const { unicodeToFilename } = require('./unicode-to-filename');
-const { unicodeToUnifiedName } = require('./unicode-to-unified-name');
-
-if (data.compressed) {
-  data = emojiMartUncompress(data);
-}
-
-const emojiMartData = data;
-
-const excluded       = ['®', '©', '™'];
-const skinTones      = ['🏻', '🏼', '🏽', '🏾', '🏿'];
-const shortcodeMap   = {};
-
-const shortCodesToEmojiData = {};
-const emojisWithoutShortCodes = [];
-
-Object.keys(emojiIndex.emojis).forEach(key => {
-  let emoji = emojiIndex.emojis[key];
-
-  // Emojis with skin tone modifiers are stored like this
-  if (Object.prototype.hasOwnProperty.call(emoji, '1')) {
-    emoji = emoji['1'];
-  }
-
-  shortcodeMap[emoji.native] = emoji.id;
-});
-
-const stripModifiers = unicode => {
-  skinTones.forEach(tone => {
-    unicode = unicode.replace(tone, '');
-  });
-
-  return unicode;
-};
-
-Object.keys(emojiMap).forEach(key => {
-  if (excluded.includes(key)) {
-    delete emojiMap[key];
-    return;
-  }
-
-  const normalizedKey = stripModifiers(key);
-  let shortcode       = shortcodeMap[normalizedKey];
-
-  if (!shortcode) {
-    shortcode = shortcodeMap[normalizedKey + '\uFE0F'];
-  }
-
-  const filename = emojiMap[key];
-
-  const filenameData = [key];
-
-  if (unicodeToFilename(key) !== filename) {
-    // filename can't be derived using unicodeToFilename
-    filenameData.push(filename);
-  }
-
-  if (typeof shortcode === 'undefined') {
-    emojisWithoutShortCodes.push(filenameData);
-  } else {
-    if (!Array.isArray(shortCodesToEmojiData[shortcode])) {
-      shortCodesToEmojiData[shortcode] = [[]];
-    }
-
-    shortCodesToEmojiData[shortcode][0].push(filenameData);
-  }
-});
-
-Object.keys(emojiIndex.emojis).forEach(key => {
-  let emoji = emojiIndex.emojis[key];
-
-  // Emojis with skin tone modifiers are stored like this
-  if (Object.prototype.hasOwnProperty.call(emoji, '1')) {
-    emoji = emoji['1'];
-  }
-
-  const { native } = emoji;
-  const { short_names, search, unified } = emojiMartData.emojis[key];
-
-  if (short_names[0] !== key) {
-    throw new Error('The compresser expects the first short_code to be the ' +
-      'key. It may need to be rewritten if the emoji change such that this ' +
-      'is no longer the case.');
-  }
-
-  const searchData = [
-    native,
-    short_names.slice(1), // first short name can be inferred from the key
-    search,
-  ];
-
-  if (unicodeToUnifiedName(native) !== unified) {
-    // unified name can't be derived from unicodeToUnifiedName
-    searchData.push(unified);
-  }
-
-  if (!Array.isArray(shortCodesToEmojiData[key])) {
-    shortCodesToEmojiData[key] = [[]];
-  }
-
-  shortCodesToEmojiData[key].push(searchData);
-});
-
-// JSON.parse/stringify is to emulate what @preval is doing and avoid any
-// inconsistent behavior in dev mode
-module.exports = JSON.parse(JSON.stringify([
-  shortCodesToEmojiData,
-  emojiMartData.skins,
-  emojiMartData.categories,
-  emojiMartData.aliases,
-  emojisWithoutShortCodes,
-]));

app/soapbox/features/emoji/emoji-mart-data-light.ts

@@ -1,44 +0,0 @@
-// The output of this module is designed to mimic emoji-mart's
-// "data" object, such that we can use it for a light version of emoji-mart's
-// emojiIndex.search functionality.
-import emojiCompressed from './emoji-compressed';
-import { unicodeToUnifiedName } from './unicode-to-unified-name';
-
-const [ shortCodesToEmojiData, skins, categories, short_names ] = emojiCompressed;
-
-const emojis: Record<string, any> = {};
-
-// decompress
-Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
-  const [
-    _filenameData, // eslint-disable-line @typescript-eslint/no-unused-vars
-    searchData,
-  ] = shortCodesToEmojiData[shortCode];
-  const [
-    native,
-    short_names,
-    search,
-    unified,
-  ] = searchData;
-
-  emojis[shortCode] = {
-    native,
-    search,
-    short_names: [shortCode].concat(short_names),
-    unified: unified || unicodeToUnifiedName(native),
-  };
-});
-
-export {
-  emojis,
-  skins,
-  categories,
-  short_names,
-};
-
-export default {
-  emojis,
-  skins,
-  categories,
-  short_names,
-};

app/soapbox/features/emoji/emoji-mart-search-light.js

@@ -1,183 +0,0 @@
-// This code is largely borrowed from:
-// https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/emoji-index.js
-
-import data from './emoji-mart-data-light';
-import { getData, getSanitizedData, uniq, intersect } from './emoji-utils';
-
-const originalPool = {};
-let index = {};
-const emojisList = {};
-const emoticonsList = {};
-let customEmojisList = [];
-
-for (const emoji in data.emojis) {
-  const emojiData = data.emojis[emoji];
-  const { short_names, emoticons } = emojiData;
-  const id = short_names[0];
-
-  if (emoticons) {
-    emoticons.forEach(emoticon => {
-      if (emoticonsList[emoticon]) {
-        return;
-      }
-
-      emoticonsList[emoticon] = id;
-    });
-  }
-
-  emojisList[id] = getSanitizedData(id);
-  originalPool[id] = emojiData;
-}
-
-function clearCustomEmojis(pool) {
-  customEmojisList.forEach((emoji) => {
-    const emojiId = emoji.id || emoji.short_names[0];
-
-    delete pool[emojiId];
-    delete emojisList[emojiId];
-  });
-}
-
-export function addCustomToPool(custom, pool = originalPool) {
-  if (customEmojisList.length) clearCustomEmojis(pool);
-
-  custom.forEach((emoji) => {
-    const emojiId = emoji.id || emoji.short_names[0];
-
-    if (emojiId && !pool[emojiId]) {
-      pool[emojiId] = getData(emoji);
-      emojisList[emojiId] = getSanitizedData(emoji);
-    }
-  });
-
-  customEmojisList = custom;
-  index = {};
-}
-
-export function search(value, { emojisToShowFilter, maxResults, include, exclude, custom } = {}) {
-  if (custom !== undefined) {
-    if (customEmojisList !== custom)
-      addCustomToPool(custom, originalPool);
-  } else {
-    custom = [];
-  }
-
-  maxResults = maxResults || 75;
-  include = include || [];
-  exclude = exclude || [];
-
-  let results = null,
-    pool = originalPool;
-
-  if (value.length) {
-    if (value === '-' || value === '-1') {
-      return [emojisList['-1']];
-    }
-
-    let values = value.toLowerCase().split(/[\s|,|\-|_]+/),
-      allResults = [];
-
-    if (values.length > 2) {
-      values = [values[0], values[1]];
-    }
-
-    if (include.length || exclude.length) {
-      pool = {};
-
-      data.categories.forEach(category => {
-        const isIncluded = include && include.length ? include.includes(category.name.toLowerCase()) : true;
-        const isExcluded = exclude && exclude.length ? exclude.includes(category.name.toLowerCase()) : false;
-        if (!isIncluded || isExcluded) {
-          return;
-        }
-
-        category.emojis.forEach(emojiId => pool[emojiId] = data.emojis[emojiId]);
-      });
-
-      if (custom.length) {
-        const customIsIncluded = include && include.length ? include.includes('custom') : true;
-        const customIsExcluded = exclude && exclude.length ? exclude.includes('custom') : false;
-        if (customIsIncluded && !customIsExcluded) {
-          addCustomToPool(custom, pool);
-        }
-      }
-    }
-
-    const searchValue = (value) => {
-      let aPool = pool,
-        aIndex = index,
-        length = 0;
-
-      for (let charIndex = 0; charIndex < value.length; charIndex++) {
-        const char = value[charIndex];
-        length++;
-
-        aIndex[char] = aIndex[char] || {};
-        aIndex = aIndex[char];
-
-        if (!aIndex.results) {
-          const scores = {};
-
-          aIndex.results = [];
-          aIndex.pool = {};
-
-          for (const id in aPool) {
-            const emoji = aPool[id],
-              { search } = emoji,
-              sub = value.substr(0, length),
-              subIndex = search.indexOf(sub);
-
-            if (subIndex !== -1) {
-              let score = subIndex + 1;
-              if (sub === id) score = 0;
-
-              aIndex.results.push(emojisList[id]);
-              aIndex.pool[id] = emoji;
-
-              scores[id] = score;
-            }
-          }
-
-          aIndex.results.sort((a, b) => {
-            const aScore = scores[a.id],
-              bScore = scores[b.id];
-
-            return aScore - bScore;
-          });
-        }
-
-        aPool = aIndex.pool;
-      }
-
-      return aIndex.results;
-    };
-
-    if (values.length > 1) {
-      results = searchValue(value);
-    } else {
-      results = [];
-    }
-
-    allResults = values.map(searchValue).filter(a => a);
-
-    if (allResults.length > 1) {
-      allResults = intersect.apply(null, allResults);
-    } else if (allResults.length) {
-      allResults = allResults[0];
-    }
-
-    results = uniq(results.concat(allResults));
-  }
-
-  if (results) {
-    if (emojisToShowFilter) {
-      results = results.filter((result) => emojisToShowFilter(data.emojis[result.id]));
-    }
-
-    if (results && results.length > maxResults) {
-      results = results.slice(0, maxResults);
-    }
-  }
-
-  return results;
-}

app/soapbox/features/emoji/emoji-picker.ts

@@ -1,9 +0,0 @@
-// @ts-ignore no types
-import Emoji from 'emoji-mart/dist-es/components/emoji/emoji';
-// @ts-ignore no types
-import Picker from 'emoji-mart/dist-es/components/picker/picker';
-
-export {
-  Picker,
-  Emoji,
-};

app/soapbox/features/emoji/emoji-unicode-mapping-light.js

@@ -1,32 +0,0 @@
-// A mapping of unicode strings to an object containing the filename
-// (i.e. the svg filename) and a shortCode intended to be shown
-// as a "title" attribute in an HTML element (aka tooltip).
-
-const [
-  shortCodesToEmojiData,
-  skins, // eslint-disable-line @typescript-eslint/no-unused-vars
-  categories, // eslint-disable-line @typescript-eslint/no-unused-vars
-  short_names, // eslint-disable-line @typescript-eslint/no-unused-vars
-  emojisWithoutShortCodes,
-] = require('./emoji-compressed');
-const { unicodeToFilename } = require('./unicode-to-filename');
-
-// decompress
-const unicodeMapping = {};
-
-function processEmojiMapData(emojiMapData, shortCode) {
-  const [ native, filename ] = emojiMapData;
-
-  unicodeMapping[native] = {
-    shortCode,
-    filename: filename || unicodeToFilename(native),
-  };
-}
-
-Object.keys(shortCodesToEmojiData).forEach((shortCode) => {
-  const [ filenameData ] = shortCodesToEmojiData[shortCode];
-  filenameData.forEach(emojiMapData => processEmojiMapData(emojiMapData, shortCode));
-});
-emojisWithoutShortCodes.forEach(emojiMapData => processEmojiMapData(emojiMapData));
-
-module.exports = unicodeMapping;

app/soapbox/features/emoji/emoji-utils.js

@@ -1,253 +0,0 @@
-// This code is largely borrowed from:
-// https://github.com/missive/emoji-mart/blob/5f2ffcc/src/utils/index.js
-
-import data from './emoji-mart-data-light';
-
-const buildSearch = (data) => {
-  const search = [];
-
-  const addToSearch = (strings, split) => {
-    if (!strings) {
-      return;
-    }
-
-    (Array.isArray(strings) ? strings : [strings]).forEach((string) => {
-      (split ? string.split(/[-|_|\s]+/) : [string]).forEach((s) => {
-        s = s.toLowerCase();
-
-        if (!search.includes(s)) {
-          search.push(s);
-        }
-      });
-    });
-  };
-
-  addToSearch(data.short_names, true);
-  addToSearch(data.name, true);
-  addToSearch(data.keywords, false);
-  addToSearch(data.emoticons, false);
-
-  return search.join(',');
-};
-
-const _String = String;
-
-const stringFromCodePoint = _String.fromCodePoint || function() {
-  const MAX_SIZE = 0x4000;
-  const codeUnits = [];
-  let highSurrogate;
-  let lowSurrogate;
-  let index = -1;
-  const length = arguments.length;
-  if (!length) {
-    return '';
-  }
-  let result = '';
-  while (++index < length) {
-    let codePoint = Number(arguments[index]);
-    if (
-      !isFinite(codePoint) ||       // `NaN`, `+Infinity`, or `-Infinity`
-      codePoint < 0 ||              // not a valid Unicode code point
-      codePoint > 0x10FFFF ||       // not a valid Unicode code point
-      Math.floor(codePoint) !== codePoint // not an integer
-    ) {
-      throw RangeError('Invalid code point: ' + codePoint);
-    }
-    if (codePoint <= 0xFFFF) { // BMP code point
-      codeUnits.push(codePoint);
-    } else { // Astral code point; split in surrogate halves
-      // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
-      codePoint -= 0x10000;
-      highSurrogate = (codePoint >> 10) + 0xD800;
-      lowSurrogate = (codePoint % 0x400) + 0xDC00;
-      codeUnits.push(highSurrogate, lowSurrogate);
-    }
-    if (index + 1 === length || codeUnits.length > MAX_SIZE) {
-      result += String.fromCharCode.apply(null, codeUnits);
-      codeUnits.length = 0;
-    }
-  }
-  return result;
-};
-
-const _JSON = JSON;
-
-const COLONS_REGEX = /^(?:\:([^\:]+)\:)(?:\:skin-tone-(\d)\:)?$/;
-const SKINS = [
-  '1F3FA', '1F3FB', '1F3FC',
-  '1F3FD', '1F3FE', '1F3FF',
-];
-
-function unifiedToNative(unified) {
-  const unicodes = unified.split('-'),
-    codePoints = unicodes.map((u) => `0x${u}`);
-
-  return stringFromCodePoint.apply(null, codePoints);
-}
-
-function sanitize(emoji) {
-  const { name, short_names, skin_tone, skin_variations, emoticons, unified, custom, imageUrl } = emoji;
-  const id = emoji.id || short_names[0];
-  const colons = `:${id}:`;
-
-  if (custom) {
-    return {
-      id,
-      name,
-      colons,
-      emoticons,
-      custom,
-      imageUrl,
-    };
-  }
-
-  return {
-    id,
-    name,
-    colons: skin_tone ? `${colons}:skin-tone-${skin_tone}:` : colons,
-    emoticons,
-    unified: unified.toLowerCase(),
-    skin: skin_tone || (skin_variations ? 1 : null),
-    native: unifiedToNative(unified),
-  };
-}
-
-function getSanitizedData() {
-  return sanitize(getData(...arguments));
-}
-
-function getData(emoji, skin, set) {
-  let emojiData = {};
-
-  if (typeof emoji === 'string') {
-    const matches = emoji.match(COLONS_REGEX);
-
-    if (matches) {
-      emoji = matches[1];
-
-      if (matches[2]) {
-        skin = parseInt(matches[2]);
-      }
-    }
-
-    if (Object.prototype.hasOwnProperty.call(data.short_names, emoji)) {
-      emoji = data.short_names[emoji];
-    }
-
-    if (Object.prototype.hasOwnProperty.call(data.emojis, emoji)) {
-      emojiData = data.emojis[emoji];
-    }
-  } else if (emoji.id) {
-    if (Object.prototype.hasOwnProperty.call(data.short_names, emoji.id)) {
-      emoji.id = data.short_names[emoji.id];
-    }
-
-    if (Object.prototype.hasOwnProperty.call(data.emojis, emoji.id)) {
-      emojiData = data.emojis[emoji.id];
-      skin = skin || emoji.skin;
-    }
-  }
-
-  if (!Object.keys(emojiData).length) {
-    emojiData = emoji;
-    emojiData.custom = true;
-
-    if (!emojiData.search) {
-      emojiData.search = buildSearch(emoji);
-    }
-  }
-
-  emojiData.emoticons = emojiData.emoticons || [];
-  emojiData.variations = emojiData.variations || [];
-
-  if (emojiData.skin_variations && skin > 1 && set) {
-    emojiData = JSON.parse(_JSON.stringify(emojiData));
-
-    const skinKey = SKINS[skin - 1],
-      variationData = emojiData.skin_variations[skinKey];
-
-    if (!variationData.variations && emojiData.variations) {
-      delete emojiData.variations;
-    }
-
-    if (variationData[`has_img_${set}`]) {
-      emojiData.skin_tone = skin;
-
-      for (const k in variationData) {
-        const v = variationData[k];
-        emojiData[k] = v;
-      }
-    }
-  }
-
-  if (emojiData.variations && emojiData.variations.length) {
-    emojiData = JSON.parse(_JSON.stringify(emojiData));
-    emojiData.unified = emojiData.variations.shift();
-  }
-
-  return emojiData;
-}
-
-function uniq(arr) {
-  return arr.reduce((acc, item) => {
-    if (!acc.includes(item)) {
-      acc.push(item);
-    }
-    return acc;
-  }, []);
-}
-
-function intersect(a, b) {
-  const uniqA = uniq(a);
-  const uniqB = uniq(b);
-
-  return uniqA.filter(item => uniqB.includes(item));
-}
-
-function deepMerge(a, b) {
-  const o = {};
-
-  for (const key in a) {
-    const originalValue = a[key];
-    let value = originalValue;
-
-    if (Object.prototype.hasOwnProperty.call(b, key)) {
-      value = b[key];
-    }
-
-    if (typeof value === 'object') {
-      value = deepMerge(originalValue, value);
-    }
-
-    o[key] = value;
-  }
-
-  return o;
-}
-
-// https://github.com/sonicdoe/measure-scrollbar
-function measureScrollbar() {
-  const div = document.createElement('div');
-
-  div.style.width = '100px';
-  div.style.height = '100px';
-  div.style.overflow = 'scroll';
-  div.style.position = 'absolute';
-  div.style.top = '-9999px';
-
-  document.body.appendChild(div);
-  const scrollbarWidth = div.offsetWidth - div.clientWidth;
-  document.body.removeChild(div);
-
-  return scrollbarWidth;
-}
-
-export {
-  getData,
-  getSanitizedData,
-  uniq,
-  intersect,
-  deepMerge,
-  unifiedToNative,
-  measureScrollbar,
-};

app/soapbox/features/emoji/emoji.js

@@ -1,132 +0,0 @@
-import Trie from 'substring-trie';
-
-import { joinPublicPath } from 'soapbox/utils/static';
-
-import unicodeMapping from './emoji-unicode-mapping-light';
-
-const trie = new Trie(Object.keys(unicodeMapping));
-
-const emojifyTextNode = (node, customEmojis, autoPlayGif = false) => {
-  let str = node.textContent;
-
-  const fragment = new DocumentFragment();
-
-  for (;;) {
-    let match, i = 0;
-
-    if (customEmojis === null) {
-      while (i < str.length && !(match = trie.search(str.slice(i)))) {
-        i += str.codePointAt(i) < 65536 ? 1 : 2;
-      }
-    } else {
-      while (i < str.length && str[i] !== ':' && !(match = trie.search(str.slice(i)))) {
-        i += str.codePointAt(i) < 65536 ? 1 : 2;
-      }
-    }
-
-    let rend, replacement = null;
-    if (i === str.length) {
-      break;
-    } else if (str[i] === ':') {
-      // eslint-disable-next-line no-loop-func
-      if (!(() => {
-        rend = str.indexOf(':', i + 1) + 1;
-        if (!rend) return false; // no pair of ':'
-        const shortname = str.slice(i, rend);
-        // now got a replacee as ':shortname:'
-        // if you want additional emoji handler, add statements below which set replacement and return true.
-        if (shortname in customEmojis) {
-          const filename = autoPlayGif ? customEmojis[shortname].url : customEmojis[shortname].static_url;
-          replacement = document.createElement('img');
-          replacement.setAttribute('draggable', false);
-          replacement.setAttribute('class', 'emojione custom-emoji');
-          replacement.setAttribute('alt', shortname);
-          replacement.setAttribute('title', shortname);
-          replacement.setAttribute('src', filename);
-          replacement.setAttribute('data-original', customEmojis[shortname].url);
-          replacement.setAttribute('data-static', customEmojis[shortname].static_url);
-          return true;
-        }
-        return false;
-      })()) rend = ++i;
-    } else { // matched to unicode emoji
-      const { filename, shortCode } = unicodeMapping[match];
-      const title = shortCode ? `:${shortCode}:` : '';
-      replacement = document.createElement('img');
-      replacement.setAttribute('draggable', false);
-      replacement.setAttribute('class', 'emojione');
-      replacement.setAttribute('alt', match);
-      replacement.setAttribute('title', title);
-      replacement.setAttribute('src', joinPublicPath(`packs/emoji/${filename}.svg`));
-      rend = i + match.length;
-      // If the matched character was followed by VS15 (for selecting text presentation), skip it.
-      if (str.codePointAt(rend) === 65038) {
-        rend += 1;
-      }
-    }
-
-    fragment.append(document.createTextNode(str.slice(0, i)));
-    if (replacement) {
-      fragment.append(replacement);
-    }
-    node.textContent = str.slice(0, i);
-    str = str.slice(rend);
-  }
-
-  fragment.append(document.createTextNode(str));
-  node.parentElement.replaceChild(fragment, node);
-};
-
-const emojifyNode = (node, customEmojis, autoPlayGif = false) => {
-  for (const child of node.childNodes) {
-    switch (child.nodeType) {
-      case Node.TEXT_NODE:
-        emojifyTextNode(child, customEmojis, autoPlayGif);
-        break;
-      case Node.ELEMENT_NODE:
-        if (!child.classList.contains('invisible'))
-          emojifyNode(child, customEmojis, autoPlayGif);
-        break;
-    }
-  }
-};
-
-const emojify = (str, customEmojis = {}, autoPlayGif = false) => {
-  const wrapper = document.createElement('div');
-  wrapper.innerHTML = str;
-
-  if (!Object.keys(customEmojis).length)
-    customEmojis = null;
-
-  emojifyNode(wrapper, customEmojis, autoPlayGif);
-
-  return wrapper.innerHTML;
-};
-
-export default emojify;
-
-export const buildCustomEmojis = (customEmojis, autoPlayGif = false) => {
-  const emojis = [];
-
-  customEmojis.forEach(emoji => {
-    const shortcode = emoji.get('shortcode');
-    const url       = autoPlayGif ? emoji.get('url') : emoji.get('static_url');
-    const name      = shortcode.replace(':', '');
-
-    emojis.push({
-      id: name,
-      name,
-      short_names: [name],
-      text: '',
-      emoticons: [],
-      keywords: [name],
-      imageUrl: url,
-      custom: true,
-      customCategory: emoji.get('category'),
-    });
-  });
-
-  return emojis;
-};
-
-export const categoriesFromEmojis = customEmojis => customEmojis.reduce((set, emoji) => set.add(emoji.get('category') ? `custom-${emoji.get('category')}` : 'custom'), new Set(['custom']));

app/soapbox/features/emoji/index.ts

@@ -0,0 +1,228 @@
+import split from 'graphemesplit';
+
+import unicodeMapping from './mapping';
+
+import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'soapbox/features/emoji/data';
+
+/*
+ * TODO: Consolate emoji object types
+ *
+ * There are five different emoji objects currently
+ *  - emoji-mart's "onPickEmoji" handler
+ *  - emoji-mart's custom emoji types
+ *  - an Emoji type that is either NativeEmoji or CustomEmoji
+ *  - a type inside redux's `store.custom_emoji` immutablejs
+ *
+ * there needs to be one type for the picker handler callback
+ * and one type for the emoji-mart data
+ * and one type that is used everywhere that the above two are converted into
+ */
+
+export interface CustomEmoji {
+  id: string
+  colons: string
+  custom: true
+  imageUrl: string
+}
+
+export interface NativeEmoji {
+  id: string
+  colons: string
+  custom?: false
+  unified: string
+  native: string
+}
+
+export type Emoji = CustomEmoji | NativeEmoji;
+
+export function isCustomEmoji(emoji: Emoji): emoji is CustomEmoji {
+  return (emoji as CustomEmoji).imageUrl !== undefined;
+}
+
+export function isNativeEmoji(emoji: Emoji): emoji is NativeEmoji {
+  return (emoji as NativeEmoji).native !== undefined;
+}
+
+const isAlphaNumeric = (c: string) => {
+  const code = c.charCodeAt(0);
+
+  if (!(code > 47 && code < 58) &&  // numeric (0-9)
+      !(code > 64 && code < 91) &&  // upper alpha (A-Z)
+      !(code > 96 && code < 123)) { // lower alpha (a-z)
+    return false;
+  } else {
+    return true;
+  }
+};
+
+const validEmojiChar = (c: string) => {
+  return isAlphaNumeric(c)
+    || c === '_'
+    || c === '-'
+    || c === '.';
+};
+
+const convertCustom = (shortname: string, filename: string) => {
+  return `<img draggable="false" class="emojione" alt="${shortname}" title="${shortname}" src="${filename}" />`;
+};
+
+const convertUnicode = (c: string) => {
+  const { unified, shortcode } = unicodeMapping[c];
+
+  return `<img draggable="false" class="emojione" alt="${c}" title=":${shortcode}:" src="/packs/emoji/${unified}.svg" />`;
+};
+
+const convertEmoji = (str: string, customEmojis: any) => {
+  if (str.length < 3) return str;
+  if (str in customEmojis) {
+    const emoji = customEmojis[str];
+    const filename = emoji.static_url;
+
+    if (filename?.length > 0) {
+      return convertCustom(str, filename);
+    }
+  }
+
+  return str;
+};
+
+export const emojifyText = (str: string, customEmojis = {}) => {
+  let buf = '';
+  let stack = '';
+  let open = false;
+
+  const clearStack = () => {
+    buf += stack;
+    open = false;
+    stack = '';
+  };
+
+  for (let c of split(str)) {
+    // convert FE0E selector to FE0F so it can be found in unimap
+    if (c.codePointAt(c.length - 1) === 65038) {
+      c = c.slice(0, -1) + String.fromCodePoint(65039);
+    }
+
+    // unqualified emojis aren't in emoji-mart's mappings so we just add FEOF
+    const unqualified = c + String.fromCodePoint(65039);
+
+    if (c in unicodeMapping) {
+      if (open) { // unicode emoji inside colon
+        clearStack();
+      }
+
+      buf += convertUnicode(c);
+    } else if (unqualified in unicodeMapping) {
+      if (open) { // unicode emoji inside colon
+        clearStack();
+      }
+
+      buf += convertUnicode(unqualified);
+    } else if (c === ':') {
+      stack += ':';
+
+      // we see another : we convert it and clear the stack buffer
+      if (open) {
+        buf += convertEmoji(stack, customEmojis);
+        stack = '';
+      }
+
+      open = !open;
+    } else {
+      if (open) {
+        stack += c;
+
+        // if the stack is non-null and we see invalid chars it's a string not emoji
+        // so we push it to the return result and clear it
+        if (!validEmojiChar(c)) {
+          clearStack();
+        }
+      } else {
+        buf += c;
+      }
+    }
+  }
+
+  // never found a closing colon so it's just a raw string
+  if (open) {
+    buf += stack;
+  }
+
+  return buf;
+};
+
+export const parseHTML = (str: string): { text: boolean, data: string }[] => {
+  const tokens = [];
+  let buf = '';
+  let stack = '';
+  let open = false;
+
+  for (const c of str) {
+    if (c === '<') {
+      if (open) {
+        tokens.push({ text: true, data: stack });
+        stack = '<';
+      } else {
+        tokens.push({ text: true, data: buf });
+        stack = '<';
+        open = true;
+      }
+    } else if (c === '>') {
+      if (open) {
+        open = false;
+        tokens.push({ text: false, data: stack + '>' });
+        stack = '';
+        buf = '';
+      } else {
+        buf += '>';
+      }
+
+    } else {
+      if (open) {
+        stack += c;
+      } else {
+        buf += c;
+      }
+    }
+  }
+
+  if (open) {
+    tokens.push({ text: true, data: buf + stack });
+  } else if (buf !== '') {
+    tokens.push({ text: true, data: buf });
+  }
+
+  return tokens;
+};
+
+const emojify = (str: string, customEmojis = {}) => {
+  return parseHTML(str)
+    .map(({ text, data }) => {
+      if (!text) return data;
+      if (data.length === 0 || data === ' ') return data;
+
+      return emojifyText(data, customEmojis);
+    })
+    .join('');
+};
+
+export default emojify;
+
+export const buildCustomEmojis = (customEmojis: any) => {
+  const emojis: EmojiMart<EmojiMartCustom>[] = [];
+
+  customEmojis.forEach((emoji: any) => {
+    const shortcode = emoji.get('shortcode');
+    const url       = emoji.get('static_url');
+    const name      = shortcode.replace(':', '');
+
+    emojis.push({
+      id: name,
+      name,
+      keywords: [name],
+      skins: [{ src: url }],
+    });
+  });
+
+  return emojis;
+};

app/soapbox/features/emoji/mapping.ts

@@ -0,0 +1,111 @@
+import data, { EmojiData } from './data';
+
+const stripLeadingZeros = /^0+/;
+
+function replaceAll(str: string, find: string, replace: string) {
+  return str.replace(new RegExp(find, 'g'), replace);
+}
+
+interface UnicodeMap {
+  [s: string]: {
+    unified: string
+    shortcode: string
+  }
+}
+
+/*
+ * Twemoji strips their hex codes from unicode codepoints to make it look "pretty"
+ * - leading 0s are removed
+ * - fe0f is removed unless it has 200d
+ * - fe0f is NOT removed for 1f441-fe0f-200d-1f5e8-fe0f even though it has a 200d
+ *
+ * this is all wrong
+ */
+
+const blacklist = {
+  '1f441-fe0f-200d-1f5e8-fe0f': true,
+};
+
+const tweaks = {
+  '#⃣': ['23-20e3', 'hash'],
+  '*⃣': ['2a-20e3', 'keycap_star'],
+  '0⃣': ['30-20e3', 'zero'],
+  '1⃣': ['31-20e3', 'one'],
+  '2⃣': ['32-20e3', 'two'],
+  '3⃣': ['33-20e3', 'three'],
+  '4⃣': ['34-20e3', 'four'],
+  '5⃣': ['35-20e3', 'five'],
+  '6⃣': ['36-20e3', 'six'],
+  '7⃣': ['37-20e3', 'seven'],
+  '8⃣': ['38-20e3', 'eight'],
+  '9⃣': ['39-20e3', 'nine'],
+  '❤‍🔥': ['2764-fe0f-200d-1f525', 'heart_on_fire'],
+  '❤‍🩹': ['2764-fe0f-200d-1fa79', 'mending_heart'],
+  '👁‍🗨️': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
+  '👁️‍🗨': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
+  '👁‍🗨': ['1f441-fe0f-200d-1f5e8-fe0f', 'eye-in-speech-bubble'],
+  '🕵‍♂️': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
+  '🕵️‍♂': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
+  '🕵‍♂': ['1f575-fe0f-200d-2642-fe0f', 'male-detective'],
+  '🕵‍♀️': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
+  '🕵️‍♀': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
+  '🕵‍♀': ['1f575-fe0f-200d-2640-fe0f', 'female-detective'],
+  '🏌‍♂️': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
+  '🏌️‍♂': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
+  '🏌‍♂': ['1f3cc-fe0f-200d-2642-fe0f', 'man-golfing'],
+  '🏌‍♀️': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
+  '🏌️‍♀': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
+  '🏌‍♀': ['1f3cc-fe0f-200d-2640-fe0f', 'woman-golfing'],
+  '⛹‍♂️': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
+  '⛹️‍♂': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
+  '⛹‍♂': ['26f9-fe0f-200d-2642-fe0f', 'man-bouncing-ball'],
+  '⛹‍♀️': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
+  '⛹️‍♀': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
+  '⛹‍♀': ['26f9-fe0f-200d-2640-fe0f', 'woman-bouncing-ball'],
+  '🏋‍♂️': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
+  '🏋️‍♂': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
+  '🏋‍♂': ['1f3cb-fe0f-200d-2642-fe0f', 'man-lifting-weights'],
+  '🏋‍♀️': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
+  '🏋️‍♀': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
+  '🏋‍♀': ['1f3cb-fe0f-200d-2640-fe0f', 'woman-lifting-weights'],
+  '🏳‍🌈': ['1f3f3-fe0f-200d-1f308', 'rainbow_flag'],
+  '🏳‍⚧️': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
+  '🏳️‍⚧': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
+  '🏳‍⚧': ['1f3f3-fe0f-200d-26a7-fe0f', 'transgender_flag'],
+};
+
+const stripcodes = (unified: string, native: string) => {
+  const stripped = unified.replace(stripLeadingZeros, '');
+
+  if (unified.includes('200d') && !(unified in blacklist)) {
+    return stripped;
+  } else {
+    return replaceAll(stripped, '-fe0f', '');
+  }
+};
+
+export const generateMappings = (data: EmojiData): UnicodeMap => {
+  const result: UnicodeMap = {};
+  const emojis = Object.values(data.emojis ?? {});
+
+  for (const value of emojis) {
+    for (const item of value.skins) {
+      const { unified, native } = item;
+      const stripped = stripcodes(unified, native);
+
+      result[native] = { unified: stripped, shortcode: value.id };
+    }
+  }
+
+  for (const [native, [unified, shortcode]] of Object.entries(tweaks)) {
+    const stripped = stripcodes(unified, native);
+
+    result[native] = { unified: stripped, shortcode };
+  }
+
+  return result;
+};
+
+const unicodeMapping = generateMappings(data);
+
+export default unicodeMapping;

app/soapbox/features/emoji/search.ts

@@ -0,0 +1,74 @@
+import { Index } from 'flexsearch-ts';
+import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
+
+import data from './data';
+
+import type { Emoji } from './index';
+
+const index = new Index({
+  tokenize: 'full',
+  optimize: true,
+  context: true,
+});
+
+for (const [key, emoji] of Object.entries(data.emojis)) {
+  index.add('n' + key, emoji.name);
+}
+
+export interface searchOptions {
+  maxResults?: number
+  custom?: any
+}
+
+export const addCustomToPool = (customEmojis: any[]) => {
+  // @ts-ignore
+  for (const key in index.register) {
+    if (key[0] === 'c') {
+      index.remove(key); // remove old custom emojis
+    }
+  }
+
+  let i = 0;
+
+  for (const emoji of customEmojis) {
+    index.add('c' + i++, emoji.id);
+  }
+};
+
+// we can share an index by prefixing custom emojis with 'c' and native with 'n'
+const search = (
+  str: string, { maxResults = 5 }: searchOptions = {},
+  custom_emojis?: ImmutableList<ImmutableMap<string, string>>,
+): Emoji[] => {
+  return index.search(str, maxResults)
+    .flatMap((id) => {
+      if (typeof id !== 'string') return;
+
+      if (id[0] === 'c' && custom_emojis) {
+        const index = Number(id.slice(1));
+        const custom = custom_emojis.get(index);
+
+        if (custom) {
+          return {
+            id: custom.get('shortcode', ''),
+            colons: ':' + custom.get('shortcode', '') + ':',
+            custom: true,
+            imageUrl: custom.get('static_url', ''),
+          };
+        }
+      }
+
+      const skins = data.emojis[id.slice(1)]?.skins;
+
+      if (skins) {
+        return {
+          id: id.slice(1),
+          colons: ':' + id.slice(1) + ':',
+          unified: skins[0].unified,
+          native: skins[0].native,
+        };
+      }
+    }).filter(Boolean) as Emoji[];
+};
+
+export default search;

app/soapbox/features/emoji/unicode-to-filename.js

@@ -1,26 +0,0 @@
-// taken from:
-// https://github.com/twitter/twemoji/blob/47732c7/twemoji-generator.js#L848-L866
-exports.unicodeToFilename = (str) => {
-  let result = '';
-  let charCode = 0;
-  let p = 0;
-  let i = 0;
-  while (i < str.length) {
-    charCode = str.charCodeAt(i++);
-    if (p) {
-      if (result.length > 0) {
-        result += '-';
-      }
-      result += (0x10000 + ((p - 0xD800) << 10) + (charCode - 0xDC00)).toString(16);
-      p = 0;
-    } else if (0xD800 <= charCode && charCode <= 0xDBFF) {
-      p = charCode;
-    } else {
-      if (result.length > 0) {
-        result += '-';
-      }
-      result += charCode.toString(16);
-    }
-  }
-  return result;
-};

app/soapbox/features/emoji/unicode-to-unified-name.js

@@ -1,21 +0,0 @@
-function padLeft(str, num) {
-  while (str.length < num) {
-    str = '0' + str;
-  }
-
-  return str;
-}
-
-exports.unicodeToUnifiedName = (str) => {
-  let output = '';
-
-  for (let i = 0; i < str.length; i += 2) {
-    if (i > 0) {
-      output += '-';
-    }
-
-    output += padLeft(str.codePointAt(i).toString(16).toUpperCase(), 4);
-  }
-
-  return output;
-};

app/soapbox/features/filters/edit-filter.tsx

@@ -0,0 +1,286 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
+
+import { createFilter, fetchFilter, updateFilter } from 'soapbox/actions/filters';
+import List, { ListItem } from 'soapbox/components/list';
+import MissingIndicator from 'soapbox/components/missing-indicator';
+import { Button, Column, Form, FormActions, FormGroup, HStack, Input, Stack, Streamfield, Text, Toggle } from 'soapbox/components/ui';
+import { useAppDispatch, useFeatures } from 'soapbox/hooks';
+import { normalizeFilter } from 'soapbox/normalizers';
+import toast from 'soapbox/toast';
+
+import { SelectDropdown } from '../forms';
+
+import type { StreamfieldComponent } from 'soapbox/components/ui/streamfield/streamfield';
+
+interface IFilterField {
+  id?: string
+  keyword: string
+  whole_word: boolean
+  _destroy?: boolean
+}
+
+interface IEditFilter {
+  params: { id?: string }
+}
+
+const messages = defineMessages({
+  subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
+  title: { id: 'column.filters.title', defaultMessage: 'Title' },
+  keyword: { id: 'column.filters.keyword', defaultMessage: 'Keyword or phrase' },
+  keywords: { id: 'column.filters.keywords', defaultMessage: 'Keywords or phrases' },
+  expires: { id: 'column.filters.expires', defaultMessage: 'Expire after' },
+  home_timeline: { id: 'column.filters.home_timeline', defaultMessage: 'Home timeline' },
+  public_timeline: { id: 'column.filters.public_timeline', defaultMessage: 'Public timeline' },
+  notifications: { id: 'column.filters.notifications', defaultMessage: 'Notifications' },
+  conversations: { id: 'column.filters.conversations', defaultMessage: 'Conversations' },
+  accounts: { id: 'column.filters.accounts', defaultMessage: 'Accounts' },
+  drop_header: { id: 'column.filters.drop_header', defaultMessage: 'Drop instead of hide' },
+  drop_hint: { id: 'column.filters.drop_hint', defaultMessage: 'Filtered posts will disappear irreversibly, even if filter is later removed' },
+  hide_header: { id: 'column.filters.hide_header', defaultMessage: 'Hide completely' },
+  hide_hint: { id: 'column.filters.hide_hint', defaultMessage: 'Completely hide the filtered content, instead of showing a warning' },
+  add_new: { id: 'column.filters.add_new', defaultMessage: 'Add New Filter' },
+  edit: { id: 'column.filters.edit', defaultMessage: 'Edit Filter' },
+  create_error: { id: 'column.filters.create_error', defaultMessage: 'Error adding filter' },
+  expiration_never: { id: 'colum.filters.expiration.never', defaultMessage: 'Never' },
+  expiration_1800: { id: 'colum.filters.expiration.1800', defaultMessage: '30 minutes' },
+  expiration_3600: { id: 'colum.filters.expiration.3600', defaultMessage: '1 hour' },
+  expiration_21600: { id: 'colum.filters.expiration.21600', defaultMessage: '6 hours' },
+  expiration_43200: { id: 'colum.filters.expiration.43200', defaultMessage: '12 hours' },
+  expiration_86400: { id: 'colum.filters.expiration.86400', defaultMessage: '1 day' },
+  expiration_604800: { id: 'colum.filters.expiration.604800', defaultMessage: '1 week' },
+});
+
+const FilterField: StreamfieldComponent<IFilterField> = ({ value, onChange }) => {
+  const intl = useIntl();
+
+  const handleChange = (key: string): React.ChangeEventHandler<HTMLInputElement> =>
+    e => onChange({ ...value, [key]: e.currentTarget[e.currentTarget.type === 'checkbox' ? 'checked' : 'value'] });
+
+  return (
+    <HStack space={2} grow>
+      <Input
+        type='text'
+        outerClassName='w-2/5 grow'
+        value={value.keyword}
+        onChange={handleChange('keyword')}
+        placeholder={intl.formatMessage(messages.keyword)}
+      />
+      <HStack alignItems='center' space={2}>
+        <Toggle
+          checked={value.whole_word}
+          onChange={handleChange('whole_word')}
+          icons={false}
+        />
+
+        <Text tag='span' theme='muted'>
+          <FormattedMessage id='column.filters.whole_word' defaultMessage='Whole word' />
+        </Text>
+      </HStack>
+    </HStack>
+  );
+};
+
+const EditFilter: React.FC<IEditFilter> = ({ params }) => {
+  const intl = useIntl();
+  const history = useHistory();
+  const dispatch = useAppDispatch();
+  const features = useFeatures();
+
+  const [loading, setLoading] = useState(false);
+  const [notFound, setNotFound] = useState(false);
+
+  const [title, setTitle] = useState('');
+  const [expiresIn, setExpiresIn] = useState<string | null>(null);
+  const [homeTimeline, setHomeTimeline] = useState(true);
+  const [publicTimeline, setPublicTimeline] = useState(false);
+  const [notifications, setNotifications] = useState(false);
+  const [conversations, setConversations] = useState(false);
+  const [accounts, setAccounts] = useState(false);
+  const [hide, setHide] = useState(false);
+  const [keywords, setKeywords] = useState<IFilterField[]>([{ keyword: '', whole_word: false }]);
+
+  const expirations = useMemo(() => ({
+    '': intl.formatMessage(messages.expiration_never),
+    1800: intl.formatMessage(messages.expiration_1800),
+    3600: intl.formatMessage(messages.expiration_3600),
+    21600: intl.formatMessage(messages.expiration_21600),
+    43200: intl.formatMessage(messages.expiration_43200),
+    86400: intl.formatMessage(messages.expiration_86400),
+    604800: intl.formatMessage(messages.expiration_604800),
+  }), []);
+
+  const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = e => {
+    setExpiresIn(e.target.value);
+  };
+
+  const handleAddNew: React.FormEventHandler = e => {
+    e.preventDefault();
+    const context: Array<string> = [];
+
+    if (homeTimeline) {
+      context.push('home');
+    }
+    if (publicTimeline) {
+      context.push('public');
+    }
+    if (notifications) {
+      context.push('notifications');
+    }
+    if (conversations) {
+      context.push('thread');
+    }
+    if (accounts) {
+      context.push('account');
+    }
+
+    dispatch(params.id
+      ? updateFilter(params.id, title, expiresIn, context, hide, keywords)
+      : createFilter(title, expiresIn, context, hide, keywords)).then(() => {
+      history.push('/filters');
+    }).catch(() => {
+      toast.error(intl.formatMessage(messages.create_error));
+    });
+  };
+
+  const handleChangeKeyword = (keywords: { keyword: string, whole_word: boolean }[]) => setKeywords(keywords);
+
+  const handleAddKeyword = () => setKeywords(keywords => [...keywords, { keyword: '', whole_word: false }]);
+
+  const handleRemoveKeyword = (i: number) => setKeywords(keywords => keywords[i].id
+    ? keywords.map((keyword, index) => index === i ? { ...keyword, _destroy: true } : keyword)
+    : keywords.filter((_, index) => index !== i));
+
+  useEffect(() => {
+    if (params.id) {
+      setLoading(true);
+      dispatch(fetchFilter(params.id))?.then((res: any) => {
+        if (res.filter) {
+          const filter = normalizeFilter(res.filter);
+
+          setTitle(filter.title);
+          setHomeTimeline(filter.context.includes('home'));
+          setPublicTimeline(filter.context.includes('public'));
+          setNotifications(filter.context.includes('notifications'));
+          setConversations(filter.context.includes('thread'));
+          setAccounts(filter.context.includes('account'));
+          setHide(filter.filter_action === 'hide');
+          setKeywords(filter.keywords.toJS());
+        } else {
+          setNotFound(true);
+        }
+        setLoading(false);
+      });
+    }
+  }, [params.id]);
+
+  if (notFound) return <MissingIndicator />;
+
+  return (
+    <Column className='filter-settings-panel' label={intl.formatMessage(messages.subheading_add_new)}>
+      <Form onSubmit={handleAddNew}>
+        <FormGroup labelText={intl.formatMessage(messages.title)}>
+          <Input
+            required
+            type='text'
+            name='title'
+            value={title}
+            onChange={({ target }) => setTitle(target.value)}
+          />
+        </FormGroup>
+
+        {features.filtersExpiration && (
+          <FormGroup labelText={intl.formatMessage(messages.expires)}>
+            <SelectDropdown
+              items={expirations}
+              defaultValue={''}
+              onChange={handleSelectChange}
+            />
+          </FormGroup>
+        )}
+
+        <Stack>
+          <Text size='sm' weight='medium'>
+            <FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
+          </Text>
+          <Text size='xs' theme='muted'>
+            <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
+          </Text>
+        </Stack>
+
+        <List>
+          <ListItem label={intl.formatMessage(messages.home_timeline)}>
+            <Toggle
+              name='home_timeline'
+              checked={homeTimeline}
+              onChange={({ target }) => setHomeTimeline(target.checked)}
+            />
+          </ListItem>
+          <ListItem label={intl.formatMessage(messages.public_timeline)}>
+            <Toggle
+              name='public_timeline'
+              checked={publicTimeline}
+              onChange={({ target }) => setPublicTimeline(target.checked)}
+            />
+          </ListItem>
+          <ListItem label={intl.formatMessage(messages.notifications)}>
+            <Toggle
+              name='notifications'
+              checked={notifications}
+              onChange={({ target }) => setNotifications(target.checked)}
+            />
+          </ListItem>
+          <ListItem label={intl.formatMessage(messages.conversations)}>
+            <Toggle
+              name='conversations'
+              checked={conversations}
+              onChange={({ target }) => setConversations(target.checked)}
+            />
+          </ListItem>
+          {features.filtersV2 && (
+            <ListItem label={intl.formatMessage(messages.accounts)}>
+              <Toggle
+                name='accounts'
+                checked={accounts}
+                onChange={({ target }) => setAccounts(target.checked)}
+              />
+            </ListItem>
+          )}
+        </List>
+
+        <List>
+          <ListItem
+            label={intl.formatMessage(features.filtersV2 ? messages.hide_header : messages.drop_header)}
+            hint={intl.formatMessage(features.filtersV2 ? messages.hide_hint : messages.drop_hint)}
+          >
+            <Toggle
+              name='hide'
+              checked={hide}
+              onChange={({ target }) => setHide(target.checked)}
+            />
+          </ListItem>
+        </List>
+
+        <Streamfield
+          label={intl.formatMessage(messages.keywords)}
+          component={FilterField}
+          values={keywords}
+          onChange={handleChangeKeyword}
+          onAddItem={handleAddKeyword}
+          onRemoveItem={handleRemoveKeyword}
+          minItems={1}
+          maxItems={features.filtersV2 ? Infinity : 1}
+        />
+
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={loading}>
+            {intl.formatMessage(params.id ? messages.edit : messages.add_new)}
+          </Button>
+        </FormActions>
+      </Form>
+    </Column>
+  );
+};
+
+export default EditFilter;

app/soapbox/features/filters/index.tsx

@@ -1,31 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { useHistory } from 'react-router-dom';
 
-import { fetchFilters, createFilter, deleteFilter } from 'soapbox/actions/filters';
-import List, { ListItem } from 'soapbox/components/list';
+import { fetchFilters, deleteFilter } from 'soapbox/actions/filters';
+import RelativeTimestamp from 'soapbox/components/relative-timestamp';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Button, CardHeader, CardTitle, Column, Form, FormActions, FormGroup, HStack, IconButton, Input, Stack, Text, Toggle } from 'soapbox/components/ui';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { Button, Column, HStack, Stack, Text } from 'soapbox/components/ui';
+import { useAppDispatch, useAppSelector, useFeatures } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
 const messages = defineMessages({
   heading: { id: 'column.filters', defaultMessage: 'Muted words' },
-  subheading_add_new: { id: 'column.filters.subheading_add_new', defaultMessage: 'Add New Filter' },
-  keyword: { id: 'column.filters.keyword', defaultMessage: 'Keyword or phrase' },
-  expires: { id: 'column.filters.expires', defaultMessage: 'Expire after' },
-  expires_hint: { id: 'column.filters.expires_hint', defaultMessage: 'Expiration dates are not currently supported' },
   home_timeline: { id: 'column.filters.home_timeline', defaultMessage: 'Home timeline' },
   public_timeline: { id: 'column.filters.public_timeline', defaultMessage: 'Public timeline' },
   notifications: { id: 'column.filters.notifications', defaultMessage: 'Notifications' },
   conversations: { id: 'column.filters.conversations', defaultMessage: 'Conversations' },
-  drop_header: { id: 'column.filters.drop_header', defaultMessage: 'Drop instead of hide' },
-  drop_hint: { id: 'column.filters.drop_hint', defaultMessage: 'Filtered posts will disappear irreversibly, even if filter is later removed' },
-  whole_word_header: { id: 'column.filters.whole_word_header', defaultMessage: 'Whole word' },
-  whole_word_hint: { id: 'column.filters.whole_word_hint', defaultMessage: 'When the keyword or phrase is alphanumeric only, it will only be applied if it matches the whole word' },
-  add_new: { id: 'column.filters.add_new', defaultMessage: 'Add New Filter' },
-  create_error: { id: 'column.filters.create_error', defaultMessage: 'Error adding filter' },
+  accounts: { id: 'column.filters.accounts', defaultMessage: 'Accounts' },
   delete_error: { id: 'column.filters.delete_error', defaultMessage: 'Error deleting filter' },
-  subheading_filters: { id: 'column.filters.subheading_filters', defaultMessage: 'Current Filters' },
+  edit: { id: 'column.filters.edit', defaultMessage: 'Edit' },
   delete: { id: 'column.filters.delete', defaultMessage: 'Delete' },
 });
 
@@ -34,167 +26,44 @@ const contexts = {
   public: messages.public_timeline,
   notifications: messages.notifications,
   thread: messages.conversations,
+  account: messages.accounts,
 };
 
-// const expirations = {
-//   null: 'Never',
-//   // 3600: '30 minutes',
-//   // 21600: '1 hour',
-//   // 43200: '12 hours',
-//   // 86400 : '1 day',
-//   // 604800: '1 week',
-// };
-
 const Filters = () => {
   const intl = useIntl();
   const dispatch = useAppDispatch();
+  const history = useHistory();
+  const { filtersV2 } = useFeatures();
 
   const filters = useAppSelector((state) => state.filters);
 
-  const [phrase, setPhrase] = useState('');
-  const [expiresAt] = useState('');
-  const [homeTimeline, setHomeTimeline] = useState(true);
-  const [publicTimeline, setPublicTimeline] = useState(false);
-  const [notifications, setNotifications] = useState(false);
-  const [conversations, setConversations] = useState(false);
-  const [irreversible, setIrreversible] = useState(false);
-  const [wholeWord, setWholeWord] = useState(true);
-
-  // const handleSelectChange = e => {
-  //   this.setState({ [e.target.name]: e.target.value });
-  // };
-
-  const handleAddNew: React.FormEventHandler = e => {
-    e.preventDefault();
-    const context: Array<string> = [];
-
-    if (homeTimeline) {
-      context.push('home');
-    }
-    if (publicTimeline) {
-      context.push('public');
-    }
-    if (notifications) {
-      context.push('notifications');
-    }
-    if (conversations) {
-      context.push('thread');
-    }
-
-    dispatch(createFilter(phrase, expiresAt, context, wholeWord, irreversible)).then(() => {
-      return dispatch(fetchFilters());
-    }).catch(error => {
-      toast.error(intl.formatMessage(messages.create_error));
-    });
-  };
+  const handleFilterEdit = (id: string) => () => history.push(`/filters/${id}`);
 
   const handleFilterDelete = (id: string) => () => {
     dispatch(deleteFilter(id)).then(() => {
-      return dispatch(fetchFilters());
+      return dispatch(fetchFilters(true));
     }).catch(() => {
       toast.error(intl.formatMessage(messages.delete_error));
     });
   };
 
   useEffect(() => {
-    dispatch(fetchFilters());
+    dispatch(fetchFilters(true));
   }, []);
 
   const emptyMessage = <FormattedMessage id='empty_column.filters' defaultMessage="You haven't created any muted words yet." />;
 
   return (
     <Column className='filter-settings-panel' label={intl.formatMessage(messages.heading)}>
-      <CardHeader>
-        <CardTitle title={intl.formatMessage(messages.subheading_add_new)} />
-      </CardHeader>
-      <Form onSubmit={handleAddNew}>
-        <FormGroup labelText={intl.formatMessage(messages.keyword)}>
-          <Input
-            required
-            type='text'
-            name='phrase'
-            onChange={({ target }) => setPhrase(target.value)}
-          />
-        </FormGroup>
-        {/* <FormGroup labelText={intl.formatMessage(messages.expires)} hintText={intl.formatMessage(messages.expires_hint)}>
-          <SelectDropdown
-            items={expirations}
-            defaultValue={expirations.never}
-            onChange={this.handleSelectChange}
-          />
-        </FormGroup> */}
-
-        <Stack>
-          <Text size='sm' weight='medium'>
-            <FormattedMessage id='filters.context_header' defaultMessage='Filter contexts' />
-          </Text>
-          <Text size='xs' theme='muted'>
-            <FormattedMessage id='filters.context_hint' defaultMessage='One or multiple contexts where the filter should apply' />
-          </Text>
-        </Stack>
-
-        <List>
-          <ListItem label={intl.formatMessage(messages.home_timeline)}>
-            <Toggle
-              name='home_timeline'
-              checked={homeTimeline}
-              onChange={({ target }) => setHomeTimeline(target.checked)}
-            />
-          </ListItem>
-          <ListItem label={intl.formatMessage(messages.public_timeline)}>
-            <Toggle
-              name='public_timeline'
-              checked={publicTimeline}
-              onChange={({ target }) => setPublicTimeline(target.checked)}
-            />
-          </ListItem>
-          <ListItem label={intl.formatMessage(messages.notifications)}>
-            <Toggle
-              name='notifications'
-              checked={notifications}
-              onChange={({ target }) => setNotifications(target.checked)}
-            />
-          </ListItem>
-          <ListItem label={intl.formatMessage(messages.conversations)}>
-            <Toggle
-              name='conversations'
-              checked={conversations}
-              onChange={({ target }) => setConversations(target.checked)}
-            />
-          </ListItem>
-        </List>
-
-        <List>
-          <ListItem
-            label={intl.formatMessage(messages.drop_header)}
-            hint={intl.formatMessage(messages.drop_hint)}
-          >
-            <Toggle
-              name='irreversible'
-              checked={irreversible}
-              onChange={({ target }) => setIrreversible(target.checked)}
-            />
-          </ListItem>
-          <ListItem
-            label={intl.formatMessage(messages.whole_word_header)}
-            hint={intl.formatMessage(messages.whole_word_hint)}
-          >
-            <Toggle
-              name='whole_word'
-              checked={wholeWord}
-              onChange={({ target }) => setWholeWord(target.checked)}
-            />
-          </ListItem>
-        </List>
-
-        <FormActions>
-          <Button type='submit' theme='primary'>{intl.formatMessage(messages.add_new)}</Button>
-        </FormActions>
-      </Form>
-
-      <CardHeader>
-        <CardTitle title={intl.formatMessage(messages.subheading_filters)} />
-      </CardHeader>
+      <HStack className='mb-4' space={2} justifyContent='end'>
+        <Button
+          to='/filters/new'
+          theme='primary'
+          size='sm'
+        >
+          <FormattedMessage id='filters.create_filter' defaultMessage='Create filter' />
+        </Button>
+      </HStack>
 
       <ScrollableList
         scrollKey='filters'
@@ -202,38 +71,48 @@ const Filters = () => {
         itemClassName='pb-4 last:pb-0'
       >
         {filters.map((filter, i) => (
-          <HStack space={1} justifyContent='between'>
-            <Stack space={1}>
-              <Text weight='medium'>
-                <FormattedMessage id='filters.filters_list_phrase_label' defaultMessage='Keyword or phrase:' />
-                {' '}
-                <Text theme='muted' tag='span'>{filter.phrase}</Text>
-              </Text>
-              <Text weight='medium'>
-                <FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' />
-                {' '}
-                <Text theme='muted' tag='span'>{filter.context.map(context => contexts[context] ? intl.formatMessage(contexts[context]) : context).join(', ')}</Text>
-              </Text>
-              <HStack space={4}>
+          <div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+            <Stack space={2}>
+              <Stack className='grow' space={1}>
                 <Text weight='medium'>
-                  {filter.irreversible ?
-                    <FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /> :
-                    <FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' />}
+                  <FormattedMessage id='filters.filters_list_phrases_label' defaultMessage='Keywords or phrases:' />
+                  {' '}
+                  <Text theme='muted' tag='span'>{filter.keywords.map(keyword => keyword.keyword).join(', ')}</Text>
                 </Text>
-                {filter.whole_word && (
+                <Text weight='medium'>
+                  <FormattedMessage id='filters.filters_list_context_label' defaultMessage='Filter contexts:' />
+                  {' '}
+                  <Text theme='muted' tag='span'>{filter.context.map(context => contexts[context] ? intl.formatMessage(contexts[context]) : context).join(', ')}</Text>
+                </Text>
+                <HStack space={4} wrap>
                   <Text weight='medium'>
-                    <FormattedMessage id='filters.filters_list_whole-word' defaultMessage='Whole word' />
+                    {filtersV2 ? (
+                      filter.filter_action === 'hide' ?
+                        <FormattedMessage id='filters.filters_list_hide_completely' defaultMessage='Hide content' /> :
+                        <FormattedMessage id='filters.filters_list_warn' defaultMessage='Display warning' />
+                    ) : (filter.filter_action === 'hide' ?
+                      <FormattedMessage id='filters.filters_list_drop' defaultMessage='Drop' /> :
+                      <FormattedMessage id='filters.filters_list_hide' defaultMessage='Hide' />)}
                   </Text>
-                )}
+                  {filter.expires_at && (
+                    <Text weight='medium'>
+                      {new Date(filter.expires_at).getTime() <= Date.now()
+                        ? <FormattedMessage id='filters.filters_list_expired' defaultMessage='Expired' />
+                        : <RelativeTimestamp timestamp={filter.expires_at} className='whitespace-nowrap' futureDate />}
+                    </Text>
+                  )}
+                </HStack>
+              </Stack>
+              <HStack space={2} justifyContent='end'>
+                <Button theme='primary' onClick={handleFilterEdit(filter.id)}>
+                  {intl.formatMessage(messages.edit)}
+                </Button>
+                <Button theme='danger' onClick={handleFilterDelete(filter.id)}>
+                  {intl.formatMessage(messages.delete)}
+                </Button>
               </HStack>
             </Stack>
-            <IconButton
-              iconClassName='h-5 w-5 text-gray-700 hover:text-gray-800 dark:text-gray-600 dark:hover:text-gray-500'
-              src={require('@tabler/icons/trash.svg')}
-              onClick={handleFilterDelete(filter.id)}
-              title={intl.formatMessage(messages.delete)}
-            />
-          </HStack>
+          </div>
         ))}
       </ScrollableList>
     </Column>

app/soapbox/features/follow-requests/components/account-authorize.tsx

@@ -35,27 +35,29 @@ const AccountAuthorize: React.FC<IAccountAuthorize> = ({ id }) => {
   if (!account) return null;
 
   return (
-    <HStack space={1} alignItems='center' justifyContent='between' className='p-2.5'>
-      <div className='w-full'>
-        <Account account={account} withRelationship={false} />
-      </div>
-      <HStack space={2}>
-        <Button
-          theme='secondary'
-          size='sm'
-          text={intl.formatMessage(messages.authorize)}
-          icon={require('@tabler/icons/check.svg')}
-          onClick={onAuthorize}
-        />
-        <Button
-          theme='danger'
-          size='sm'
-          text={intl.formatMessage(messages.reject)}
-          icon={require('@tabler/icons/x.svg')}
-          onClick={onReject}
-        />
-      </HStack>
-    </HStack>
+    <div className='p-2.5'>
+      <Account
+        account={account}
+        action={
+          <HStack className='ml-1' space={2}>
+            <Button
+              theme='secondary'
+              size='sm'
+              text={intl.formatMessage(messages.authorize)}
+              icon={require('@tabler/icons/check.svg')}
+              onClick={onAuthorize}
+            />
+            <Button
+              theme='danger'
+              size='sm'
+              text={intl.formatMessage(messages.reject)}
+              icon={require('@tabler/icons/x.svg')}
+              onClick={onReject}
+            />
+          </HStack>
+        }
+      />
+    </div>
   );
 };
 

app/soapbox/features/group/components/__tests__/group-action-button.test.tsx

@@ -0,0 +1,130 @@
+import React from 'react';
+
+import { buildGroup, buildGroupRelationship } from 'soapbox/jest/factory';
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { Group } from 'soapbox/types/entities';
+
+import GroupActionButton from '../group-action-button';
+
+let group: Group;
+
+describe('<GroupActionButton />', () => {
+  describe('with no group relationship', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: null,
+      });
+    });
+
+    describe('with a private group', () => {
+      beforeEach(() => {
+        group = { ...group, locked: true };
+      });
+
+      it('should render the Request Access button', () => {
+        render(<GroupActionButton group={group} />);
+
+        expect(screen.getByRole('button')).toHaveTextContent('Request Access');
+      });
+    });
+
+    describe('with a public group', () => {
+      beforeEach(() => {
+        group = { ...group, locked: false };
+      });
+
+      it('should render the Join Group button', () => {
+        render(<GroupActionButton group={group} />);
+
+        expect(screen.getByRole('button')).toHaveTextContent('Join Group');
+      });
+    });
+  });
+
+  describe('with no group relationship member', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          member: null,
+        }),
+      });
+    });
+
+    describe('with a private group', () => {
+      beforeEach(() => {
+        group = { ...group, locked: true };
+      });
+
+      it('should render the Request Access button', () => {
+        render(<GroupActionButton group={group} />);
+
+        expect(screen.getByRole('button')).toHaveTextContent('Request Access');
+      });
+    });
+
+    describe('with a public group', () => {
+      beforeEach(() => {
+        group = { ...group, locked: false };
+      });
+
+      it('should render the Join Group button', () => {
+        render(<GroupActionButton group={group} />);
+
+        expect(screen.getByRole('button')).toHaveTextContent('Join Group');
+      });
+    });
+  });
+
+  describe('when the user has requested to join', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: true,
+          member: true,
+        }),
+      });
+    });
+
+    it('should render the Cancel Request button', () => {
+      render(<GroupActionButton group={group} />);
+
+      expect(screen.getByRole('button')).toHaveTextContent('Cancel Request');
+    });
+  });
+
+  describe('when the user is an Admin', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: 'owner',
+        }),
+      });
+    });
+
+    it('should render the Manage Group button', () => {
+      render(<GroupActionButton group={group} />);
+
+      expect(screen.getByRole('button')).toHaveTextContent('Manage Group');
+    });
+  });
+
+  describe('when the user is just a member', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        relationship: buildGroupRelationship({
+          requested: false,
+          member: true,
+          role: 'user',
+        }),
+      });
+    });
+
+    it('should render the Leave Group button', () => {
+      render(<GroupActionButton group={group} />);
+
+      expect(screen.getByRole('button')).toHaveTextContent('Leave Group');
+    });
+  });
+});

app/soapbox/features/group/components/__tests__/group-member-count.test.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { buildGroup } from 'soapbox/jest/factory';
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { Group } from 'soapbox/types/entities';
+
+import GroupMemberCount from '../group-member-count';
+
+let group: Group;
+
+describe('<GroupMemberCount />', () => {
+  describe('with support for "members_count"', () => {
+    describe('with 1 member', () => {
+      beforeEach(() => {
+        group = buildGroup({
+          members_count: 1,
+        });
+      });
+
+      it('should render correctly', () => {
+        render(<GroupMemberCount group={group} />);
+
+        expect(screen.getByTestId('group-member-count').textContent).toEqual('1 member');
+      });
+    });
+
+    describe('with 2 members', () => {
+      beforeEach(() => {
+        group = buildGroup({
+          members_count: 2,
+        });
+      });
+
+      it('should render correctly', () => {
+        render(<GroupMemberCount group={group} />);
+
+        expect(screen.getByTestId('group-member-count').textContent).toEqual('2 members');
+      });
+    });
+
+    describe('with 1000 members', () => {
+      beforeEach(() => {
+        group = buildGroup({
+          members_count: 1000,
+        });
+      });
+
+      it('should render correctly', () => {
+        render(<GroupMemberCount group={group} />);
+
+        expect(screen.getByTestId('group-member-count').textContent).toEqual('1k members');
+      });
+    });
+  });
+});

app/soapbox/features/group/components/__tests__/group-privacy.test.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+
+import { buildGroup } from 'soapbox/jest/factory';
+import { render, screen } from 'soapbox/jest/test-helpers';
+import { Group } from 'soapbox/types/entities';
+
+import GroupPrivacy from '../group-privacy';
+
+let group: Group;
+
+describe('<GroupPrivacy />', () => {
+  describe('with a Private group', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        locked: true,
+      });
+    });
+
+    it('should render the correct text', () => {
+      render(<GroupPrivacy group={group} />);
+
+      expect(screen.getByTestId('group-privacy')).toHaveTextContent('Private');
+    });
+  });
+
+  describe('with a Public group', () => {
+    beforeEach(() => {
+      group = buildGroup({
+        locked: false,
+      });
+    });
+
+    it('should render the correct text', () => {
+      render(<GroupPrivacy group={group} />);
+
+      expect(screen.getByTestId('group-privacy')).toHaveTextContent('Public');
+    });
+  });
+});

app/soapbox/features/group/components/group-action-button.tsx

@@ -0,0 +1,121 @@
+import React from 'react';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+
+import { openModal } from 'soapbox/actions/modals';
+import { Button } from 'soapbox/components/ui';
+import { deleteEntities } from 'soapbox/entity-store/actions';
+import { Entities } from 'soapbox/entity-store/entities';
+import { useAppDispatch } from 'soapbox/hooks';
+import { useCancelMembershipRequest, useJoinGroup, useLeaveGroup } from 'soapbox/hooks/api';
+import { GroupRoles } from 'soapbox/schemas/group-member';
+import toast from 'soapbox/toast';
+
+import type { Group } from 'soapbox/types/entities';
+
+interface IGroupActionButton {
+  group: Group
+}
+
+const messages = defineMessages({
+  confirmationConfirm: { id: 'confirmations.leave_group.confirm', defaultMessage: 'Leave' },
+  confirmationHeading: { id: 'confirmations.leave_group.heading', defaultMessage: 'Leave group' },
+  confirmationMessage: { id: 'confirmations.leave_group.message', defaultMessage: 'You are about to leave the group. Do you want to continue?' },
+  joinRequestSuccess: { id: 'group.join.request_success', defaultMessage: 'Requested to join the group' },
+  joinSuccess: { id: 'group.join.success', defaultMessage: 'Group joined successfully!' },
+  leaveSuccess: { id: 'group.leave.success', defaultMessage: 'Left the group' },
+});
+
+const GroupActionButton = ({ group }: IGroupActionButton) => {
+  const dispatch = useAppDispatch();
+  const intl = useIntl();
+
+  const joinGroup = useJoinGroup(group);
+  const leaveGroup = useLeaveGroup(group);
+  const cancelRequest = useCancelMembershipRequest(group);
+
+  const isRequested = group.relationship?.requested;
+  const isNonMember = !group.relationship?.member && !isRequested;
+  const isOwner = group.relationship?.role === GroupRoles.OWNER;
+  const isBlocked = group.relationship?.blocked_by;
+
+  const onJoinGroup = () => joinGroup.mutate({}, {
+    onSuccess() {
+      toast.success(
+        group.locked
+          ? intl.formatMessage(messages.joinRequestSuccess)
+          : intl.formatMessage(messages.joinSuccess),
+      );
+    },
+  });
+
+  const onLeaveGroup = () =>
+    dispatch(openModal('CONFIRM', {
+      heading: intl.formatMessage(messages.confirmationHeading),
+      message: intl.formatMessage(messages.confirmationMessage),
+      confirm: intl.formatMessage(messages.confirmationConfirm),
+      onConfirm: () => leaveGroup.mutate({}, {
+        onSuccess() {
+          toast.success(intl.formatMessage(messages.leaveSuccess));
+        },
+      }),
+    }));
+
+  const onCancelRequest = () => cancelRequest.mutate({}, {
+    onSuccess() {
+      dispatch(deleteEntities([group.id], Entities.GROUP_RELATIONSHIPS));
+    },
+  });
+
+  if (isBlocked) {
+    return null;
+  }
+
+  if (isOwner) {
+    return (
+      <Button
+        theme='secondary'
+        to={`/groups/${group.id}/manage`}
+      >
+        <FormattedMessage id='group.manage' defaultMessage='Manage Group' />
+      </Button>
+    );
+  }
+
+  if (isNonMember) {
+    return (
+      <Button
+        theme='primary'
+        onClick={onJoinGroup}
+        disabled={joinGroup.isLoading}
+      >
+        {group.locked
+          ? <FormattedMessage id='group.join.private' defaultMessage='Request Access' />
+          : <FormattedMessage id='group.join.public' defaultMessage='Join Group' />}
+      </Button>
+    );
+  }
+
+  if (isRequested) {
+    return (
+      <Button
+        theme='secondary'
+        onClick={onCancelRequest}
+        disabled={cancelRequest.isLoading}
+      >
+        <FormattedMessage id='group.cancel_request' defaultMessage='Cancel Request' />
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      theme='secondary'
+      onClick={onLeaveGroup}
+      disabled={leaveGroup.isLoading}
+    >
+      <FormattedMessage id='group.leave' defaultMessage='Leave Group' />
+    </Button>
+  );
+};
+
+export default GroupActionButton;

app/soapbox/features/group/components/group-header.tsx

@@ -1,22 +1,24 @@
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
-import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
+import { defineMessages, useIntl } from 'react-intl';
 
-import { joinGroup, leaveGroup } from 'soapbox/actions/groups';
 import { openModal } from 'soapbox/actions/modals';
+import GroupAvatar from 'soapbox/components/groups/group-avatar';
 import StillImage from 'soapbox/components/still-image';
-import { Avatar, Button, HStack, Icon, Stack, Text } from 'soapbox/components/ui';
+import { HStack, Stack, Text } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 import { normalizeAttachment } from 'soapbox/normalizers';
 import { isDefaultHeader } from 'soapbox/utils/accounts';
 
+import GroupActionButton from './group-action-button';
+import GroupMemberCount from './group-member-count';
+import GroupPrivacy from './group-privacy';
+import GroupRelationship from './group-relationship';
+
 import type { Group } from 'soapbox/types/entities';
 
 const messages = defineMessages({
   header: { id: 'group.header.alt', defaultMessage: 'Group header' },
-  confirmationHeading: { id: 'confirmations.leave_group.heading', defaultMessage: 'Leave group' },
-  confirmationMessage: { id: 'confirmations.leave_group.message', defaultMessage: 'You are about to leave the group. Do you want to continue?' },
-  confirmationConfirm: { id: 'confirmations.leave_group.confirm', defaultMessage: 'Leave' },
 });
 
 interface IGroupHeader {
@@ -47,16 +49,6 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
     );
   }
 
-  const onJoinGroup = () => dispatch(joinGroup(group.id));
-
-  const onLeaveGroup = () =>
-    dispatch(openModal('CONFIRM', {
-      heading: intl.formatMessage(messages.confirmationHeading),
-      message: intl.formatMessage(messages.confirmationMessage),
-      confirm: intl.formatMessage(messages.confirmationConfirm),
-      onConfirm: () => dispatch(leaveGroup(group.id)),
-    }));
-
   const onAvatarClick = () => {
     const avatar = normalizeAttachment({
       type: 'image',
@@ -95,6 +87,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         <StillImage
           src={group.header}
           alt={intl.formatMessage(messages.header)}
+          className='h-32 w-full bg-gray-200 object-center dark:bg-gray-900/50 md:rounded-t-xl lg:h-52'
         />
       );
 
@@ -110,93 +103,44 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
     return header;
   };
 
-  const makeActionButton = () => {
-    if (!group.relationship || !group.relationship.member) {
-      return (
-        <Button
-          theme='primary'
-          onClick={onJoinGroup}
-        >
-          {group.locked ? <FormattedMessage id='group.request_join' defaultMessage='Request to join group' /> : <FormattedMessage id='group.join' defaultMessage='Join group' />}
-        </Button>
-      );
-    }
-
-    if (group.relationship.requested) {
-      return (
-        <Button
-          theme='secondary'
-          onClick={onLeaveGroup}
-        >
-          <FormattedMessage id='group.cancel_request' defaultMessage='Cancel request' />
-        </Button>
-      );
-    }
-
-    if (group.relationship?.role === 'admin') {
-      return (
-        <Button
-          theme='secondary'
-          to={`/groups/${group.id}/manage`}
-        >
-          <FormattedMessage id='group.manage' defaultMessage='Manage group' />
-        </Button>
-      );
-    }
-
-    return (
-      <Button
-        theme='secondary'
-        onClick={onLeaveGroup}
-      >
-        <FormattedMessage id='group.leave' defaultMessage='Leave group' />
-      </Button>
-    );
-  };
-
-  const actionButton = makeActionButton();
-
   return (
     <div className='-mx-4 -mt-4'>
       <div className='relative'>
-        <div className='relative isolate flex h-32 w-full flex-col justify-center overflow-hidden bg-gray-200 dark:bg-gray-900/50 md:rounded-t-xl lg:h-[200px]'>
-          {renderHeader()}
-        </div>
+        {renderHeader()}
+
         <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
           <a href={group.avatar} onClick={handleAvatarClick} target='_blank'>
-            <Avatar className='ring-[3px] ring-white dark:ring-primary-900' src={group.avatar} size={72} />
+            <GroupAvatar
+              group={group}
+              size={80}
+              withRing
+            />
           </a>
         </div>
       </div>
 
-      <Stack className='p-3 pt-12' alignItems='center' space={2}>
-        <Text className='mb-1' size='xl' weight='bold' dangerouslySetInnerHTML={{ __html: group.display_name_html }} />
-        <HStack className='text-gray-700 dark:text-gray-600' space={3} wrap>
-          {group.relationship?.role === 'admin' ? (
-            <HStack space={1} alignItems='center'>
-              <Icon className='h-4 w-4' src={require('@tabler/icons/users.svg')} />
-              <span><FormattedMessage id='group.role.admin' defaultMessage='Admin' /></span>
-            </HStack>
-          ) : group.relationship?.role === 'moderator' && (
-            <HStack space={1} alignItems='center'>
-              <Icon className='h-4 w-4' src={require('@tabler/icons/gavel.svg')} />
-              <span><FormattedMessage id='group.role.moderator' defaultMessage='Moderator' /></span>
-            </HStack>
-          )}
-          {group.locked ? (
-            <HStack space={1} alignItems='center'>
-              <Icon className='h-4 w-4' src={require('@tabler/icons/lock.svg')} />
-              <span><FormattedMessage id='group.privacy.locked' defaultMessage='Private' /></span>
-            </HStack>
-          ) : (
-            <HStack space={1} alignItems='center'>
-              <Icon className='h-4 w-4' src={require('@tabler/icons/world.svg')} />
-              <span><FormattedMessage id='group.privacy.public' defaultMessage='Public' /></span>
-            </HStack>
-          )}
-        </HStack>
-        <Text theme='muted' dangerouslySetInnerHTML={{ __html: group.note_emojified }} />
-        {actionButton}
+      <Stack alignItems='center' space={3} className='mx-auto mt-10 w-5/6 py-4'>
+        <Text
+          size='xl'
+          weight='bold'
+          dangerouslySetInnerHTML={{ __html: group.display_name_html }}
+        />
+
+        <Stack space={1} alignItems='center'>
+          <HStack className='text-gray-700 dark:text-gray-600' space={2} wrap>
+            <GroupRelationship group={group} />
+            <GroupPrivacy group={group} />
+            <GroupMemberCount group={group} />
+          </HStack>
+
+          <Text
+            theme='muted'
+            align='center'
+            dangerouslySetInnerHTML={{ __html: group.note_emojified }}
+          />
+        </Stack>
+
+        <GroupActionButton group={group} />
       </Stack>
     </div>
   );