added reply message to channel

src/components/channels/channelMessageItem.tsx

@@ -1,22 +0,0 @@
-import { MessageUser } from '@components/chats/messageUser';
-
-import { memo } from 'react';
-
-const ChannelMessageItem = ({ data }: { data: any }) => {
-  return (
-    <div className="flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
-      <div className="flex flex-col">
-        <MessageUser pubkey={data.pubkey} time={data.created_at} />
-        <div className="-mt-[17px] pl-[48px]">
-          <div className="flex flex-col gap-2">
-            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
-              {data.content}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default memo(ChannelMessageItem);

src/components/channels/messages/index.tsx

@@ -1,9 +1,9 @@
-import ChannelMessageItem from '@components/channels/channelMessageItem';
+import ChannelMessageItem from '@components/channels/messages/item';
 
 import { useCallback, useRef } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
-export const ChannelMessageList = ({ data }: { data: any }) => {
+export const ChannelMessages = ({ data }: { data: any }) => {
   const virtuosoRef = useRef(null);
 
   const itemContent: any = useCallback(

src/components/channels/messages/item.tsx

@@ -0,0 +1,37 @@
+import { ReplyButton } from '@components/channels/messages/replyButton';
+import { MessageUser } from '@components/chats/messageUser';
+
+import HideIcon from '@assets/icons/hide';
+import MuteIcon from '@assets/icons/mute';
+
+import { memo } from 'react';
+
+const ChannelMessageItem = ({ data }: { data: any }) => {
+  return (
+    <div className="group relative flex h-min min-h-min w-full select-text flex-col px-5 py-2 hover:bg-black/20">
+      <div className="flex flex-col">
+        <MessageUser pubkey={data.pubkey} time={data.created_at} />
+        <div className="-mt-[17px] pl-[48px]">
+          <div className="flex flex-col gap-2">
+            <div className="prose prose-zinc max-w-none break-words text-sm leading-tight dark:prose-invert prose-p:m-0 prose-p:text-sm prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
+              {data.content}
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="absolute -top-4 right-4 z-10 hidden group-hover:inline-flex">
+        <div className="inline-flex h-7 items-center justify-center gap-1 rounded bg-zinc-900 px-0.5 shadow-md shadow-black/20 ring-1 ring-zinc-800">
+          <ReplyButton id={data.id} pubkey={data.pubkey} content={data.content} />
+          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+            <HideIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+          <button className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800">
+            <MuteIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default memo(ChannelMessageItem);

src/components/channels/messages/replyButton.tsx

@@ -0,0 +1,38 @@
+import { channelReplyAtom } from '@stores/channel';
+
+import ReplyIcon from '@assets/icons/reply';
+
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useSetAtom } from 'jotai';
+
+export const ReplyButton = ({ id, pubkey, content }: { id: string; pubkey: string; content: string }) => {
+  const setChannelReplyAtom = useSetAtom(channelReplyAtom);
+
+  const createReply = () => {
+    setChannelReplyAtom({ id: id, pubkey: pubkey, content: content });
+  };
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root>
+        <Tooltip.Trigger asChild>
+          <button
+            onClick={() => createReply()}
+            className="inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-800"
+          >
+            <ReplyIcon className="h-4 w-4 text-zinc-400" />
+          </button>
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content
+            className="select-none rounded-md bg-zinc-800 px-4 py-2 text-sm leading-none text-zinc-100 shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade"
+            sideOffset={4}
+          >
+            Reply
+            <Tooltip.Arrow className="fill-zinc-800" />
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};