feat: test emoji picker design

package.json

@@ -73,7 +73,7 @@
         "@hcaptcha/react-hcaptcha": "^0.3.6",
         "@insertish/vite-plugin-babel-macros": "^1.0.5",
         "@preact/preset-vite": "^2.0.0",
-        "@revoltchat/ui": "1.0.46",
+        "@revoltchat/ui": "1.0.50",
         "@rollup/plugin-replace": "^2.4.2",
         "@styled-icons/boxicons-logos": "^10.38.0",
         "@styled-icons/boxicons-regular": "^10.38.0",

src/components/common/messaging/MessageBox.tsx

@@ -1,4 +1,4 @@
-import { Send, ShieldX } from "@styled-icons/boxicons-solid";
+import { HappyBeaming, Send, ShieldX } from "@styled-icons/boxicons-solid";
 import Axios, { CancelTokenSource } from "axios";
 import { observer } from "mobx-react-lite";
 import { Channel } from "revolt.js";
@@ -6,9 +6,16 @@ import styled, { css } from "styled-components/macro";
 import { ulid } from "ulid";
 
 import { Text } from "preact-i18n";
-import { useCallback, useContext, useEffect, useState } from "preact/hooks";
+import { memo } from "preact/compat";
+import {
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+} from "preact/hooks";
 
-import { IconButton } from "@revoltchat/ui";
+import { IconButton, Picker } from "@revoltchat/ui";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
 import { debounce } from "../../../lib/debounce";
@@ -31,9 +38,11 @@ import {
 } from "../../../context/revoltjs/FileUploads";
 import { takeError } from "../../../context/revoltjs/util";
 
+import { emojiDictionary } from "../../../assets/emojis";
 import { useClient } from "../../../controllers/client/ClientController";
 import { modalController } from "../../../controllers/modals/ModalController";
 import AutoComplete, { useAutoComplete } from "../AutoComplete";
+import Emoji from "../Emoji";
 import { PermissionTooltip } from "../Tooltip";
 import FilePreview from "./bars/FilePreview";
 import ReplyBar from "./bars/ReplyBar";
@@ -127,6 +136,10 @@ const FileAction = styled.div`
     }
 `;
 
+const FloatingLayer = styled.div`
+    position: relative;
+`;
+
 const ThisCodeWillBeReplacedAnywaysSoIMightAsWellJustDoItThisWay__Padding = styled.div`
     width: 16px;
 `;
@@ -148,6 +161,7 @@ export default observer(({ channel }: Props) => {
     });
     const [typing, setTyping] = useState<boolean | number>(false);
     const [replies, setReplies] = useState<Reply[]>([]);
+    const [picker, setPicker] = useState(false);
     const client = useClient();
     const translate = useTranslation();
 
@@ -457,6 +471,19 @@ export default observer(({ channel }: Props) => {
                 : undefined,
     });
 
+    const renderEmoji = useMemo(
+        () =>
+            memo(({ emoji }: { emoji: string }) => (
+                <a
+                    onClick={() =>
+                        setMessage(`${state.draft.get(channel._id)}\n${emoji}`)
+                    }>
+                    <Emoji emoji={emoji} />
+                </a>
+            )),
+        [],
+    );
+
     return (
         <>
             <AutoComplete {...autoCompleteProps} />
@@ -498,6 +525,14 @@ export default observer(({ channel }: Props) => {
                 replies={replies}
                 setReplies={setReplies}
             />
+            <FloatingLayer>
+                {picker && (
+                    <Picker
+                        emojis={emojiDictionary}
+                        renderEmoji={renderEmoji}
+                    />
+                )}
+            </FloatingLayer>
             <Base>
                 {channel.havePermission("UploadFiles") ? (
                     <FileAction>
@@ -622,12 +657,12 @@ export default observer(({ channel }: Props) => {
                     <IconButton>
                         <Box size={24} />
                     </IconButton>
-                </Action>
+                </Action>*/}
                 <Action>
-                    <IconButton>
+                    <IconButton onClick={() => setPicker(!picker)}>
                         <HappyBeaming size={24} />
                     </IconButton>
-                </Action>*/}
+                </Action>
                 <Action>
                     <IconButton
                         className={

yarn.lock

@@ -2231,9 +2231,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@revoltchat/ui@npm:1.0.46":
-  version: 1.0.46
-  resolution: "@revoltchat/ui@npm:1.0.46"
+"@revoltchat/ui@npm:1.0.50":
+  version: 1.0.50
+  resolution: "@revoltchat/ui@npm:1.0.50"
   dependencies:
     "@styled-icons/boxicons-logos": ^10.38.0
     "@styled-icons/boxicons-regular": ^10.38.0
@@ -2246,7 +2246,7 @@ __metadata:
     react-device-detect: "*"
     react-virtuoso: "*"
     revolt.js: "*"
-  checksum: 6effcb0d44b599fbb50a82e3ef364ab8a706216ff3deb9682c91bddd3ce3ced24e0688833a024e367a56fc0034cf76efcb8fe300a2c1b5ca820163534355df91
+  checksum: 735df2bbdb2b1c56c7c62ba6889d7c75d17f8fbc1cb9ec41b06050470314b04ae6477dabf6dece1bf9b680d451d9cf4d6ecff629025419507fb0410661edb9ff
   languageName: node
   linkType: hard
 
@@ -3539,7 +3539,7 @@ __metadata:
     "@hcaptcha/react-hcaptcha": ^0.3.6
     "@insertish/vite-plugin-babel-macros": ^1.0.5
     "@preact/preset-vite": ^2.0.0
-    "@revoltchat/ui": 1.0.46
+    "@revoltchat/ui": 1.0.50
     "@rollup/plugin-replace": ^2.4.2
     "@styled-icons/boxicons-logos": ^10.38.0
     "@styled-icons/boxicons-regular": ^10.38.0