Support custom emoji categories

Fixes https://gitlab.com/soapbox-pub/soapbox/-/issues/1197
Related mastodon/mastodon#11196

Author: alexgleason

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

@@ -4,7 +4,7 @@ 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 } from '../../../emoji/emoji';
+import { buildCustomEmojis, categoriesFromEmojis } from '../../../emoji/emoji';
 
 import { EmojiPicker } from './emoji-picker-dropdown';
 import ModifierPicker from './modifier-picker';
@@ -14,19 +14,6 @@ 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 categoriesSort = [
-  'recent',
-  'custom',
-  'people',
-  'nature',
-  'foods',
-  'activity',
-  'places',
-  'objects',
-  'symbols',
-  'flags',
-];
-
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
   emoji_search: { id: 'emoji_button.search', defaultMessage: 'Search…' },
@@ -71,6 +58,20 @@ const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
 
   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 => {
     if (node.current && !node.current.contains(e.target)) {
       onClose();