refactor(ark): update note component

packages/@columns/thread/src/event.tsx

@@ -1,5 +1,6 @@
-import { Note, ThreadNote } from "@lume/ark";
+import { ThreadNote } from "@lume/ark";
 import { ArrowLeftIcon } from "@lume/icons";
+import { ReplyList } from "@lume/ui";
 import { useNavigate, useParams } from "react-router-dom";
 import { WVList } from "virtua";
 
@@ -21,7 +22,7 @@ export function EventRoute() {
 			</div>
 			<div className="px-3">
 				<ThreadNote eventId={id} />
-				<Note.ReplyList eventId={id} title="All replies" className="mt-5" />
+				<ReplyList eventId={id} title="All replies" className="mt-5" />
 			</div>
 		</WVList>
 	);

packages/@columns/thread/src/home.tsx

@@ -1,4 +1,5 @@
 import { Note, ThreadNote } from "@lume/ark";
+import { ReplyList } from "@lume/ui";
 import { WVList } from "virtua";
 
 export function HomeRoute({ id }: { id: string }) {
@@ -6,7 +7,7 @@ export function HomeRoute({ id }: { id: string }) {
 		<WVList className="pb-5 overflow-y-auto">
 			<div className="px-3">
 				<ThreadNote eventId={id} />
-				<Note.ReplyList eventId={id} title="All replies" className="mt-5" />
+				<ReplyList eventId={id} title="All replies" className="mt-5" />
 			</div>
 		</WVList>
 	);

packages/@columns/timeline/src/event.tsx

@@ -1,5 +1,6 @@
 import { Note, ThreadNote } from "@lume/ark";
 import { ArrowLeftIcon } from "@lume/icons";
+import { ReplyList } from "@lume/ui";
 import { useNavigate, useParams } from "react-router-dom";
 import { WVList } from "virtua";
 
@@ -21,7 +22,7 @@ export function EventRoute() {
 			</div>
 			<div className="px-3">
 				<ThreadNote eventId={id} />
-				<Note.ReplyList eventId={id} title="All replies" className="mt-5" />
+				<ReplyList eventId={id} title="All replies" className="mt-5" />
 			</div>
 		</WVList>
 	);

packages/@columns/user/src/event.tsx

@@ -1,5 +1,6 @@
-import { Note, ThreadNote } from "@lume/ark";
+import { ThreadNote } from "@lume/ark";
 import { ArrowLeftIcon } from "@lume/icons";
+import { ReplyList } from "@lume/ui";
 import { useNavigate, useParams } from "react-router-dom";
 import { WVList } from "virtua";
 
@@ -21,7 +22,7 @@ export function EventRoute() {
 			</div>
 			<div className="px-3">
 				<ThreadNote eventId={id} />
-				<Note.ReplyList eventId={id} title="All replies" className="mt-5" />
+				<ReplyList eventId={id} title="All replies" className="mt-5" />
 			</div>
 		</WVList>
 	);

packages/ark/src/components/note/index.ts

@@ -9,7 +9,6 @@ import { NoteMediaContent } from "./kinds/media";
 import { NoteTextContent } from "./kinds/text";
 import { NoteMenu } from "./menu";
 import { NoteProvider } from "./provider";
-import { NoteReplyList } from "./reply";
 import { NoteRoot } from "./root";
 import { NoteThread } from "./thread";
 import { NoteUser } from "./user";
@@ -29,14 +28,14 @@ export const Note = {
 	TextContent: NoteTextContent,
 	MediaContent: NoteMediaContent,
 	ArticleContent: NoteArticleContent,
-	ReplyList: NoteReplyList,
 };
 
 export * from "./provider";
-export * from "./builds/text";
+export * from "./primitives/text";
-export * from "./builds/repost";
+export * from "./primitives/repost";
-export * from "./builds/skeleton";
+export * from "./primitives/skeleton";
-export * from "./builds/thread";
+export * from "./primitives/thread";
+export * from "./primitives/reply";
 export * from "./preview/image";
 export * from "./preview/link";
 export * from "./preview/video";

packages/ark/src/components/note/kinds/text.tsx

@@ -1,4 +1,4 @@
-import { twMerge } from "tailwind-merge";
+import { cn } from "@lume/utils";
 import { useRichContent } from "../../../hooks/useRichContent";
 
 export function NoteTextContent({
@@ -12,7 +12,7 @@ export function NoteTextContent({
 
 	return (
 		<div
-			className={twMerge(
+			className={cn(
 				"break-p select-text whitespace-pre-line text-balance leading-normal",
 				className,
 			)}

packages/ark/src/components/note/menu.tsx

@@ -21,6 +21,10 @@ export function NoteMenu() {
 		setOpen(false);
 	};
 
+	const copyRaw = async () => {
+		await writeText(JSON.stringify(await event.toNostrEvent()));
+	};
+
 	const copyLink = async () => {
 		await writeText(
 			`https://njump.me/${nip19.neventEncode({
@@ -42,12 +46,12 @@ export function NoteMenu() {
 				</button>
 			</DropdownMenu.Trigger>
 			<DropdownMenu.Portal>
-				<DropdownMenu.Content className="flex w-[200px] flex-col overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 focus:outline-none dark:border-neutral-900">
+				<DropdownMenu.Content className="flex w-[200px] p-2 flex-col overflow-hidden rounded-xl border border-neutral-200 bg-neutral-950 focus:outline-none dark:border-neutral-900">
 					<DropdownMenu.Item asChild>
 						<button
 							type="button"
 							onClick={() => copyLink()}
-							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
 						>
 							Copy shareable link
 						</button>
@@ -56,15 +60,24 @@ export function NoteMenu() {
 						<button
 							type="button"
 							onClick={() => copyID()}
-							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
 						>
 							Copy note ID
 						</button>
 					</DropdownMenu.Item>
+					<DropdownMenu.Item asChild>
+						<button
+							type="button"
+							onClick={() => copyRaw()}
+							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
+						>
+							Copy raw event
+						</button>
+					</DropdownMenu.Item>
 					<DropdownMenu.Item asChild>
 						<Link
 							to={`/users/${event.pubkey}`}
-							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 focus:outline-none"
+							className="inline-flex h-10 items-center px-4 text-sm text-white hover:bg-neutral-900 rounded-lg focus:outline-none"
 						>
 							View profile
 						</Link>

packages/ui/src/index.ts

@@ -11,3 +11,4 @@ export * from "./layouts/composer";
 export * from "./layouts/home";
 export * from "./layouts/settings";
 export * from "./mentions";
+export * from "./replyList";

packages/ui/src/replyList.tsx

@@ -1,12 +1,10 @@
+import { Reply, useArk } from "@lume/ark";
 import { LoaderIcon } from "@lume/icons";
 import { NDKEventWithReplies } from "@lume/types";
-import { NDKSubscription } from "@nostr-dev-kit/ndk";
 import { useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
-import { useArk } from "../../provider";
-import { Reply } from "./builds/reply";
 
-export function NoteReplyList({
+export function ReplyList({
 	eventId,
 	title,
 	className,
@@ -15,7 +13,7 @@ export function NoteReplyList({
 	const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
 
 	useEffect(() => {
-		let sub: NDKSubscription;
+		let sub;
 		let isCancelled = false;
 
 		async function fetchRepliesAndSub() {