feat: add editor

packages/ark/src/components/note/buttons/reaction.tsx

@@ -66,7 +66,7 @@ export function NoteReaction() {
 							className="size-6"
 						/>
 					) : (
-						<ReactionIcon className="size-6 group-hover:text-blue-500" />
+						<ReactionIcon className="size-5 group-hover:text-blue-500" />
 					)}
 				</button>
 			</HoverCard.Trigger>

packages/ark/src/components/note/buttons/reply.tsx

@@ -1,15 +1,15 @@
 import { ReplyIcon } from "@lume/icons";
+import { editorAtom, editorValueAtom } from "@lume/utils";
 import * as Tooltip from "@radix-ui/react-tooltip";
-import { createSearchParams, useNavigate } from "react-router-dom";
+import { useSetAtom } from "jotai";
+import { nip19 } from "nostr-tools";
 import { useNoteContext } from "../provider";
 
-export function NoteReply({
-	rootEventId,
-}: {
-	rootEventId?: string;
-}) {
+export function NoteReply() {
 	const event = useNoteContext();
-	const navigate = useNavigate();
+
+	const setEditorValue = useSetAtom(editorValueAtom);
+	const setIsEditorOpen = useSetAtom(editorAtom);
 
 	return (
 		<Tooltip.Provider>
@@ -17,18 +17,24 @@ export function NoteReply({
 				<Tooltip.Trigger asChild>
 					<button
 						type="button"
-						onClick={() =>
-							navigate({
-								pathname: "/new/",
-								search: createSearchParams({
-									replyTo: event.id,
-									rootReplyTo: rootEventId,
-								}).toString(),
-							})
-						}
+						onClick={() => {
+							setEditorValue([
+								{
+									type: "event",
+									// @ts-expect-error, useless
+									eventId: `nostr:${nip19.noteEncode(event.id)}`,
+									children: [{ text: "" }],
+								},
+								{
+									type: "paragraph",
+									children: [{ text: "" }],
+								},
+							]);
+							setIsEditorOpen(true);
+						}}
 						className="inline-flex items-center justify-center group h-7 w-7 text-neutral-600 dark:text-neutral-400"
 					>
-						<ReplyIcon className="size-6 group-hover:text-blue-500" />
+						<ReplyIcon className="size-5 group-hover:text-blue-500" />
 					</button>
 				</Tooltip.Trigger>
 				<Tooltip.Portal>

packages/ark/src/components/note/buttons/repost.tsx

@@ -33,7 +33,7 @@ export function NoteRepost() {
 					>
 						<RepostIcon
 							className={twMerge(
-								"size-6 group-hover:text-blue-600",
+								"size-5 group-hover:text-blue-600",
 								isRepost ? "text-blue-500" : "",
 							)}
 						/>

packages/ark/src/components/note/buttons/zap.tsx

@@ -109,7 +109,7 @@ export function NoteZap() {
 					type="button"
 					className="inline-flex items-center justify-center group h-7 w-7 text-neutral-600 dark:text-neutral-400"
 				>
-					<ZapIcon className="size-6 group-hover:text-blue-500" />
+					<ZapIcon className="size-5 group-hover:text-blue-500" />
 				</button>
 			</Dialog.Trigger>
 			<Dialog.Portal>