Allow selecting an emoji from the picker

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

@@ -1,7 +1,8 @@
 import classNames from 'clsx';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 
-import { Emoji, HStack } from 'soapbox/components/ui';
+import { Emoji, HStack, IconButton } from 'soapbox/components/ui';
+import { Picker } from 'soapbox/features/emoji/emoji-picker';
 
 interface IEmojiButton {
   /** Unicode emoji character. */
@@ -32,10 +33,19 @@ interface IEmojiSelector {
   visible?: boolean,
   /** Whether the selector should be focused. */
   focused?: boolean,
+  /** Whether to allow any emoji to be chosen. */
+  all?: boolean,
 }
 
 /** Panel with a row of emoji buttons. */
-const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = false, focused = false }): JSX.Element => {
+const EmojiSelector: React.FC<IEmojiSelector> = ({
+  emojis,
+  onReact,
+  visible = false,
+  focused = false,
+  all = true,
+}): JSX.Element => {
+  const [expanded, setExpanded] = useState(false);
 
   const handleReact = (emoji: string): React.EventHandler<React.MouseEvent> => {
     return (e) => {
@@ -45,6 +55,18 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
     };
   };
 
+  const handleExpand: React.MouseEventHandler = () => {
+    setExpanded(true);
+  };
+
+  useEffect(() => {
+    setExpanded(false);
+  }, [visible, focused]);
+
+  if (expanded) {
+    return <Picker />;
+  }
+
   return (
     <HStack
       className={classNames('gap-2 bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max max-w-[100vw] flex-wrap')}
@@ -57,6 +79,13 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
           tabIndex={(visible || focused) ? 0 : -1}
         />
       ))}
+
+      {all && (
+        <IconButton
+          src={require('@tabler/icons/dots.svg')}
+          onClick={handleExpand}
+        />
+      )}
     </HStack>
   );
 };