feat: add emoji picker for comment input

package.json

@@ -24,6 +24,8 @@
     "@codemirror/language": "^0.20.0",
     "@codemirror/state": "^0.20.0",
     "@codemirror/view": "^0.20.3",
+    "@emoji-mart/data": "^1.0.3",
+    "@emoji-mart/react": "^1.0.0",
     "@floating-ui/react-dom-interactions": "^0.6.3",
     "@headlessui/react": "^1.6.0",
     "@heroicons/react": "^1.0.6",
@@ -45,6 +47,7 @@
     "crossbell.js": "^0.10.13",
     "dayjs": "^1.11.1",
     "dotenv": "^16.0.0",
+    "emoji-mart": "^5.2.0",
     "ethers": "^5.6.9",
     "fast-deep-equal": "^3.1.3",
     "form-data": "^4.0.0",

pnpm-lock.yaml

@@ -6,6 +6,8 @@ specifiers:
   '@codemirror/language': ^0.20.0
   '@codemirror/state': ^0.20.0
   '@codemirror/view': ^0.20.3
+  '@emoji-mart/data': ^1.0.3
+  '@emoji-mart/react': ^1.0.0
   '@floating-ui/react-dom-interactions': ^0.6.3
   '@headlessui/react': ^1.6.0
   '@heroicons/react': ^1.0.6
@@ -50,6 +52,7 @@ specifiers:
   crossbell.js: ^0.10.13
   dayjs: ^1.11.1
   dotenv: ^16.0.0
+  emoji-mart: ^5.2.0
   esbuild: ^0.14.39
   esbuild-register: ^3.3.2
   eslint: ^8.15.0
@@ -108,6 +111,8 @@ dependencies:
   '@codemirror/language': 0.20.2
   '@codemirror/state': 0.20.1
   '@codemirror/view': 0.20.7
+  '@emoji-mart/data': 1.0.3
+  '@emoji-mart/react': 1.0.0_kbqdcrm7a2jamcyb7krk3b53dq
   '@floating-ui/react-dom-interactions': 0.6.6_twyhzqqpkwvvgrmyeapdo6i4my
   '@headlessui/react': 1.6.5_biqbaboplfbrettd7655fr4n2y
   '@heroicons/react': 1.0.6_react@18.2.0
@@ -129,6 +134,7 @@ dependencies:
   crossbell.js: 0.10.13
   dayjs: 1.11.3
   dotenv: 16.0.1
+  emoji-mart: 5.2.0
   ethers: 5.6.9
   fast-deep-equal: 3.1.3
   form-data: 4.0.0
@@ -619,6 +625,20 @@ packages:
       - supports-color
     dev: false
 
+  /@emoji-mart/data/1.0.3:
+    resolution: {integrity: sha512-SwxtfLOPiis9iXwWLjZHpUIUwYV/ghfBG6jpVP2HZgCt/dE8Q4r1RQg1Y5TyYBYKk8N5RKuLWJi1DNrEUIWj+A==}
+    dev: false
+
+  /@emoji-mart/react/1.0.0_kbqdcrm7a2jamcyb7krk3b53dq:
+    resolution: {integrity: sha512-pRZ+e0uWJKVpUBcALevyjnp14HUFG/7p+XsUqNAkz322ruPzyDQ7/qUNONU0KGjQF71O4OIoFdvDPcxVpx1/xg==}
+    peerDependencies:
+      emoji-mart: ^5.2
+      react: ^16.8 || ^17.0 || ^18.0
+    dependencies:
+      emoji-mart: 5.2.0
+      react: 18.2.0
+    dev: false
+
   /@emotion/hash/0.8.0:
     resolution: {integrity: sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==}
     dev: false
@@ -3499,6 +3519,10 @@ packages:
       minimalistic-crypto-utils: 1.0.1
     dev: false
 
+  /emoji-mart/5.2.0:
+    resolution: {integrity: sha512-0ZTIbemlRjEV0ydF8lDqho2N5l4M7qdNFWGp+w3v32D+F6+DYsmuaZr/k4O79EBvqlDx6rx+B8jeaH2qa0ZNDQ==}
+    dev: false
+
   /emoji-regex/7.0.3:
     resolution: {integrity: sha512-CwBLREIQ7LvYFB0WyRvwhq5N5qPhc6PMjD6bYggFlI5YyDgl+0vxq5VHbMOFqLg7hfWzmu8T5Z1QofhmTIhItA==}
     dev: false

src/components/common/Comment.tsx

@@ -15,6 +15,11 @@ import duration from "dayjs/plugin/duration"
 import relativeTime from "dayjs/plugin/relativeTime"
 import { UniLink } from "~/components/ui/UniLink"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
+import data from "@emoji-mart/data"
+// @ts-ignore
+import Picker from "@emoji-mart/react"
+import { Popover } from "@headlessui/react"
+import { EmojiHappyIcon } from "@heroicons/react/outline"
 
 dayjs.extend(duration)
 dayjs.extend(relativeTime)
@@ -98,12 +103,32 @@ export const Comment: React.FC<{
               }
               multiline
               maxLength={30}
-              className="mb-4"
+              className="mb-2"
               placeholder="Write a comment on the blockchain"
               {...form.register("content", {})}
             />
           </div>
-          <div className="text-right">
+          <div className="flex justify-between">
+            <Popover className="relative">
+              {({ open }: { open: boolean }) => (
+                <>
+                  <Popover.Button className="group inline-flex items-center rounded-md px-2 text-xl">
+                    <EmojiHappyIcon className="w-6 h-6 text-zinc-400 hover:text-zinc-500" />
+                  </Popover.Button>
+                  <Popover.Panel className="absolute left-0 mt-3 ">
+                    <Picker
+                      data={data}
+                      onEmojiSelect={(e: any) =>
+                        form.setValue(
+                          "content",
+                          form.getValues("content") + e.native,
+                        )
+                      }
+                    />
+                  </Popover.Panel>
+                </>
+              )}
+            </Popover>
             <Button
               type="submit"
               isLoading={userSites.isLoading || commentPage.isLoading}
@@ -119,7 +144,10 @@ export const Comment: React.FC<{
       </div>
       <div>
         {comments.data?.map((comment) => (
-          <div key={comment.transactionHash} className="flex mt-5">
+          <div
+            key={comment.transactionHash}
+            className="flex border-b border-dashed py-6"
+          >
             <UniLink
               href={`https://crossbell.kindjeff.com/@${comment?.character?.handle}`}
               className="align-middle mr-3"
@@ -130,7 +158,7 @@ export const Comment: React.FC<{
                 size={45}
               />
             </UniLink>
-            <div className="flex-1 flex flex-col rounded-lg px-4 py-3 bg-zinc-50">
+            <div className="flex-1 flex flex-col rounded-lg">
               <div className="mb-2 text-sm">
                 <UniLink
                   href={`https://crossbell.kindjeff.com/@${comment?.character?.handle}`}