From 55d63186144589a3a563762600054482a1504fef Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Fri, 29 Dec 2023 14:14:39 +0700
Subject: [PATCH] refactor(ark): update note component

---
 packages/@columns/thread/src/event.tsx        |  5 +++--
 packages/@columns/thread/src/home.tsx         |  3 ++-
 packages/@columns/timeline/src/event.tsx      |  3 ++-
 packages/@columns/user/src/event.tsx          |  5 +++--
 packages/ark/src/components/note/index.ts     | 11 +++++-----
 .../ark/src/components/note/kinds/text.tsx    |  4 ++--
 packages/ark/src/components/note/menu.tsx     | 21 +++++++++++++++----
 .../{builds => primitives}/childReply.tsx     |  0
 .../note/{builds => primitives}/reply.tsx     |  0
 .../note/{builds => primitives}/repost.tsx    |  0
 .../note/{builds => primitives}/skeleton.tsx  |  0
 .../note/{builds => primitives}/text.tsx      |  0
 .../note/{builds => primitives}/thread.tsx    |  0
 packages/ui/src/index.ts                      |  1 +
 .../note/reply.tsx => ui/src/replyList.tsx}   |  8 +++----
 15 files changed, 38 insertions(+), 23 deletions(-)
 rename packages/ark/src/components/note/{builds => primitives}/childReply.tsx (100%)
 rename packages/ark/src/components/note/{builds => primitives}/reply.tsx (100%)
 rename packages/ark/src/components/note/{builds => primitives}/repost.tsx (100%)
 rename packages/ark/src/components/note/{builds => primitives}/skeleton.tsx (100%)
 rename packages/ark/src/components/note/{builds => primitives}/text.tsx (100%)
 rename packages/ark/src/components/note/{builds => primitives}/thread.tsx (100%)
 rename packages/{ark/src/components/note/reply.tsx => ui/src/replyList.tsx} (89%)

diff --git a/packages/@columns/thread/src/event.tsx b/packages/@columns/thread/src/event.tsx
index 2aa10da8..1174c079 100644
--- a/packages/@columns/thread/src/event.tsx
+++ b/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>
 	);
diff --git a/packages/@columns/thread/src/home.tsx b/packages/@columns/thread/src/home.tsx
index 47f381d3..2eb318aa 100644
--- a/packages/@columns/thread/src/home.tsx
+++ b/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>
 	);
diff --git a/packages/@columns/timeline/src/event.tsx b/packages/@columns/timeline/src/event.tsx
index 2aa10da8..dc9245cf 100644
--- a/packages/@columns/timeline/src/event.tsx
+++ b/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>
 	);
diff --git a/packages/@columns/user/src/event.tsx b/packages/@columns/user/src/event.tsx
index 2aa10da8..1174c079 100644
--- a/packages/@columns/user/src/event.tsx
+++ b/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>
 	);
diff --git a/packages/ark/src/components/note/index.ts b/packages/ark/src/components/note/index.ts
index c1b6a766..4180d285 100644
--- a/packages/ark/src/components/note/index.ts
+++ b/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 "./builds/repost";
-export * from "./builds/skeleton";
-export * from "./builds/thread";
+export * from "./primitives/text";
+export * from "./primitives/repost";
+export * from "./primitives/skeleton";
+export * from "./primitives/thread";
+export * from "./primitives/reply";
 export * from "./preview/image";
 export * from "./preview/link";
 export * from "./preview/video";
diff --git a/packages/ark/src/components/note/kinds/text.tsx b/packages/ark/src/components/note/kinds/text.tsx
index 98289435..20fb4d0d 100644
--- a/packages/ark/src/components/note/kinds/text.tsx
+++ b/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,
 			)}
diff --git a/packages/ark/src/components/note/menu.tsx b/packages/ark/src/components/note/menu.tsx
index f3915787..2919a2e3 100644
--- a/packages/ark/src/components/note/menu.tsx
+++ b/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>
diff --git a/packages/ark/src/components/note/builds/childReply.tsx b/packages/ark/src/components/note/primitives/childReply.tsx
similarity index 100%
rename from packages/ark/src/components/note/builds/childReply.tsx
rename to packages/ark/src/components/note/primitives/childReply.tsx
diff --git a/packages/ark/src/components/note/builds/reply.tsx b/packages/ark/src/components/note/primitives/reply.tsx
similarity index 100%
rename from packages/ark/src/components/note/builds/reply.tsx
rename to packages/ark/src/components/note/primitives/reply.tsx
diff --git a/packages/ark/src/components/note/builds/repost.tsx b/packages/ark/src/components/note/primitives/repost.tsx
similarity index 100%
rename from packages/ark/src/components/note/builds/repost.tsx
rename to packages/ark/src/components/note/primitives/repost.tsx
diff --git a/packages/ark/src/components/note/builds/skeleton.tsx b/packages/ark/src/components/note/primitives/skeleton.tsx
similarity index 100%
rename from packages/ark/src/components/note/builds/skeleton.tsx
rename to packages/ark/src/components/note/primitives/skeleton.tsx
diff --git a/packages/ark/src/components/note/builds/text.tsx b/packages/ark/src/components/note/primitives/text.tsx
similarity index 100%
rename from packages/ark/src/components/note/builds/text.tsx
rename to packages/ark/src/components/note/primitives/text.tsx
diff --git a/packages/ark/src/components/note/builds/thread.tsx b/packages/ark/src/components/note/primitives/thread.tsx
similarity index 100%
rename from packages/ark/src/components/note/builds/thread.tsx
rename to packages/ark/src/components/note/primitives/thread.tsx
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index c6eab7fb..0bb2ef8b 100644
--- a/packages/ui/src/index.ts
+++ b/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";
diff --git a/packages/ark/src/components/note/reply.tsx b/packages/ui/src/replyList.tsx
similarity index 89%
rename from packages/ark/src/components/note/reply.tsx
rename to packages/ui/src/replyList.tsx
index 1010f48e..c394441a 100644
--- a/packages/ark/src/components/note/reply.tsx
+++ b/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() {