add trending notes

src/shared/notes/base.tsx

@@ -0,0 +1,47 @@
+import { Kind1 } from "@shared/notes/kind1";
+import { Kind1063 } from "@shared/notes/kind1063";
+import { NoteMetadata } from "@shared/notes/metadata";
+import { NoteParent } from "@shared/notes/parent";
+import { User } from "@shared/user";
+import { parser } from "@utils/parser";
+import { isTagsIncludeID } from "@utils/transform";
+import { LumeEvent } from "@utils/types";
+import { useMemo } from "react";
+
+export function NoteBase({
+	event,
+	block,
+	metadata,
+}: { event: LumeEvent; block?: number; metadata?: boolean }) {
+	const content = useMemo(() => parser(event), [event]);
+	const checkParentID = isTagsIncludeID(event.parent_id, event.tags);
+
+	return (
+		<div className="h-min w-full px-3 py-1.5">
+			<div className="rounded-md bg-zinc-900 px-5 pt-5">
+				{event.parent_id &&
+				(event.parent_id !== event.event_id || checkParentID) ? (
+					<NoteParent id={event.parent_id} />
+				) : (
+					<></>
+				)}
+				<div className="flex flex-col">
+					<User pubkey={event.pubkey} time={event.created_at} />
+					<div className="-mt-5 pl-[49px]">
+						{event.kind === 1 && <Kind1 content={content} />}
+						{event.kind === 1063 && <Kind1063 metadata={event.tags} />}
+						{metadata ? (
+							<NoteMetadata
+								id={event.event_id}
+								eventPubkey={event.pubkey}
+								currentBlock={block || 1}
+							/>
+						) : (
+							<div className="h-5" />
+						)}
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/shared/notes/kind1.tsx

@@ -0,0 +1,40 @@
+import { LinkPreview } from "./preview/link";
+import { MentionNote } from "@shared/notes/mentions/note";
+import { ImagePreview } from "@shared/notes/preview/image";
+import { VideoPreview } from "@shared/notes/preview/video";
+import { truncateContent } from "@utils/transform";
+
+export function Kind1({
+	content,
+	truncate = false,
+}: { content: any; truncate?: boolean }) {
+	return (
+		<>
+			<div className="select-text whitespace-pre-line break-words text-base text-zinc-100">
+				{truncate ? truncateContent(content.parsed, 120) : content.parsed}
+			</div>
+			{Array.isArray(content.images) && content.images.length ? (
+				<ImagePreview urls={content.images} />
+			) : (
+				<></>
+			)}
+			{Array.isArray(content.videos) && content.videos.length ? (
+				<VideoPreview urls={content.videos} />
+			) : (
+				<></>
+			)}
+			{Array.isArray(content.links) && content.links.length ? (
+				<LinkPreview urls={content.links} />
+			) : (
+				<></>
+			)}
+			{Array.isArray(content.notes) && content.notes.length ? (
+				content.notes.map((note: string) => (
+					<MentionNote key={note} id={note} />
+				))
+			) : (
+				<></>
+			)}
+		</>
+	);
+}

src/shared/notes/kind1063.tsx

@@ -0,0 +1,22 @@
+import { NDKTag } from "@nostr-dev-kit/ndk";
+import { Image } from "@shared/image";
+
+function isImage(url: string) {
+	return /\.(jpg|jpeg|gif|png|webp|avif)$/.test(url);
+}
+
+export function Kind1063({ metadata }: { metadata: NDKTag[] }) {
+	const url = metadata[0][1];
+
+	return (
+		<div className="mt-3">
+			{isImage(url) && (
+				<Image
+					src={url}
+					alt="image"
+					className="h-auto w-full rounded-lg object-cover"
+				/>
+			)}
+		</div>
+	);
+}

src/shared/notes/mentions/note.tsx

@@ -0,0 +1,45 @@
+import { Kind1 } from "@shared/notes/kind1";
+import { Kind1063 } from "@shared/notes/kind1063";
+import { NoteSkeleton } from "@shared/notes/skeleton";
+import { User } from "@shared/user";
+import { useEvent } from "@utils/hooks/useEvent";
+import { parser } from "@utils/parser";
+import { memo } from "react";
+
+export const MentionNote = memo(function MentionNote({ id }: { id: string }) {
+	const data = useEvent(id);
+
+	const kind1 = data?.kind === 1 ? parser(data) : null;
+	const kind1063 = data?.kind === 1063 ? data.tags : null;
+
+	return (
+		<div className="mt-3 rounded-lg border border-zinc-800 px-3 py-3">
+			{data ? (
+				<>
+					<User pubkey={data.pubkey} time={data.created_at} size="small" />
+					<div className="mt-2">
+						{kind1 && <Kind1 content={kind1} truncate={true} />}
+						{kind1063 && <Kind1063 metadata={kind1063} />}
+						{!kind1 && !kind1063 && (
+							<div className="flex flex-col gap-2">
+								<div className="px-2 py-2 inline-flex flex-col gap-1 bg-zinc-800 rounded-md">
+									<span className="text-zinc-500 text-sm font-medium leading-none">
+										Kind: {data.kind}
+									</span>
+									<p className="text-fuchsia-500 text-sm leading-none">
+										Lume isn't fully support this kind in newsfeed
+									</p>
+								</div>
+								<div className="markdown">
+									<p>{data.content}</p>
+								</div>
+							</div>
+						)}
+					</div>
+				</>
+			) : (
+				<NoteSkeleton />
+			)}
+		</div>
+	);
+});

src/shared/notes/mentions/user.tsx

@@ -0,0 +1,15 @@
+import { useProfile } from "@utils/hooks/useProfile";
+import { shortenKey } from "@utils/shortenKey";
+
+export function MentionUser({ pubkey }: { pubkey: string }) {
+	const { user } = useProfile(pubkey);
+
+	return (
+		<a
+			href={`/user?pubkey=${pubkey}`}
+			className="text-fuchsia-500 hover:text-fuchsia-600 no-underline font-normal"
+		>
+			@{user?.name || user?.displayName || shortenKey(pubkey)}
+		</a>
+	);
+}

src/shared/notes/metadata.tsx

@@ -0,0 +1,126 @@
+import { createReplyNote } from "@libs/storage";
+import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
+import { LoaderIcon, ReplyIcon, RepostIcon, ZapIcon } from "@shared/icons";
+import { NoteReply } from "@shared/notes/metadata/reply";
+import { NoteRepost } from "@shared/notes/metadata/repost";
+import { NoteZap } from "@shared/notes/metadata/zap";
+import { RelayContext } from "@shared/relayProvider";
+import { decode } from "light-bolt11-decoder";
+import { useContext } from "react";
+import useSWR from "swr";
+
+const fetcher = async ([, ndk, id]) => {
+	let replies = 0;
+	let reposts = 0;
+	let zap = 0;
+
+	const filter: NDKFilter = {
+		"#e": [id],
+		kinds: [1, 6, 9735],
+	};
+
+	const events = await ndk.fetchEvents(filter);
+	events.forEach((event: NDKEvent) => {
+		switch (event.kind) {
+			case 1:
+				replies += 1;
+				createReplyNote(
+					event.id,
+					event.pubkey,
+					event.kind,
+					event.tags,
+					event.content,
+					event.created_at,
+					id,
+				);
+				break;
+			case 6:
+				reposts += 1;
+				break;
+			case 9735: {
+				const bolt11 = event.tags.find((tag) => tag[0] === "bolt11")[1];
+				if (bolt11) {
+					const decoded = decode(bolt11);
+					const amount = decoded.sections.find(
+						(item) => item.name === "amount",
+					);
+					const sats = amount.value / 1000;
+					zap += sats;
+				}
+				break;
+			}
+			default:
+				break;
+		}
+	});
+
+	return { replies, reposts, zap };
+};
+
+export function NoteMetadata({
+	id,
+	eventPubkey,
+	currentBlock,
+}: {
+	id: string;
+	eventPubkey: string;
+	currentBlock?: number;
+}) {
+	const ndk = useContext(RelayContext);
+	const { data, isLoading } = useSWR(["note-metadata", ndk, id], fetcher);
+
+	return (
+		<div className="inline-flex items-center w-full h-12 mt-2">
+			{!data || isLoading ? (
+				<>
+					<div className="w-20 group inline-flex items-center gap-1.5">
+						<ReplyIcon
+							width={16}
+							height={16}
+							className="text-zinc-400 group-hover:text-green-400"
+						/>
+						<LoaderIcon
+							width={12}
+							height={12}
+							className="animate-spin text-black dark:text-white"
+						/>
+					</div>
+					<div className="w-20 group inline-flex items-center gap-1.5">
+						<RepostIcon
+							width={16}
+							height={16}
+							className="text-zinc-400 group-hover:text-green-400"
+						/>
+						<LoaderIcon
+							width={12}
+							height={12}
+							className="animate-spin text-black dark:text-white"
+						/>
+					</div>
+					<div className="w-20 group inline-flex items-center gap-1.5">
+						<ZapIcon
+							width={16}
+							height={16}
+							className="text-zinc-400 group-hover:text-green-400"
+						/>
+						<LoaderIcon
+							width={12}
+							height={12}
+							className="animate-spin text-black dark:text-white"
+						/>
+					</div>
+				</>
+			) : (
+				<>
+					<NoteReply
+						id={id}
+						replies={data.replies}
+						currentBlock={currentBlock}
+					/>
+					<NoteRepost id={id} pubkey={eventPubkey} reposts={data.reposts} />
+					<NoteZap zaps={data.zap} />
+				</>
+			)}
+		</div>
+	);
+}

src/shared/notes/metadata/reply.tsx

@@ -0,0 +1,37 @@
+import { ReplyIcon } from "@shared/icons";
+import { useActiveAccount } from "@stores/accounts";
+import { compactNumber } from "@utils/number";
+
+export function NoteReply({
+	id,
+	replies,
+	currentBlock,
+}: { id: string; replies: number; currentBlock?: number }) {
+	const addTempBlock = useActiveAccount((state: any) => state.addTempBlock);
+
+	const openThread = (event: any, thread: string) => {
+		const selection = window.getSelection();
+		if (selection.toString().length === 0) {
+			addTempBlock(currentBlock, 2, "Thread", thread);
+		} else {
+			event.stopPropagation();
+		}
+	};
+
+	return (
+		<button
+			type="button"
+			onClick={(e) => openThread(e, id)}
+			className="w-14 group inline-flex items-center gap-1.5"
+		>
+			<ReplyIcon
+				width={16}
+				height={16}
+				className="text-zinc-400 group-hover:text-green-400"
+			/>
+			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
+				{compactNumber.format(replies)}
+			</span>
+		</button>
+	);
+}

src/shared/notes/metadata/repost.tsx

@@ -0,0 +1,59 @@
+import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { RepostIcon } from "@shared/icons";
+import { RelayContext } from "@shared/relayProvider";
+import { useActiveAccount } from "@stores/accounts";
+import { dateToUnix } from "@utils/date";
+import { compactNumber } from "@utils/number";
+import { useContext, useState } from "react";
+
+export function NoteRepost({
+	id,
+	pubkey,
+	reposts,
+}: { id: string; pubkey: string; reposts: number }) {
+	const ndk = useContext(RelayContext);
+	const account = useActiveAccount((state: any) => state.account);
+
+	const [count, setCount] = useState(reposts);
+
+	const submitEvent = (e: any) => {
+		e.stopPropagation();
+
+		const signer = new NDKPrivateKeySigner(account.privkey);
+		ndk.signer = signer;
+
+		const event = new NDKEvent(ndk);
+		// build event
+		event.content = "";
+		event.kind = 6;
+		event.created_at = dateToUnix();
+		event.pubkey = account.pubkey;
+		event.tags = [
+			["e", id],
+			["p", pubkey],
+		];
+
+		// publish event
+		event.publish();
+
+		// update state
+		setCount(count + 1);
+	};
+
+	return (
+		<button
+			type="button"
+			onClick={(e) => submitEvent(e)}
+			className="w-14 group inline-flex items-center gap-1.5"
+		>
+			<RepostIcon
+				width={16}
+				height={16}
+				className="text-zinc-400 group-hover:text-blue-400"
+			/>
+			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
+				{compactNumber.format(count)}
+			</span>
+		</button>
+	);
+}

src/shared/notes/metadata/zap.tsx

@@ -0,0 +1,20 @@
+import { ZapIcon } from "@shared/icons";
+import { compactNumber } from "@utils/number";
+
+export function NoteZap({ zaps }: { zaps: number }) {
+	return (
+		<button
+			type="button"
+			className="w-14 group inline-flex items-center gap-1.5"
+		>
+			<ZapIcon
+				width={16}
+				height={16}
+				className="text-zinc-400 group-hover:text-blue-400"
+			/>
+			<span className="text-base leading-none text-zinc-400 group-hover:text-white">
+				{compactNumber.format(zaps)}
+			</span>
+		</button>
+	);
+}

src/shared/notes/parent.tsx

@@ -0,0 +1,51 @@
+import { Kind1 } from "@shared/notes/kind1";
+import { Kind1063 } from "@shared/notes/kind1063";
+import { NoteMetadata } from "@shared/notes/metadata";
+import { NoteSkeleton } from "@shared/notes/skeleton";
+import { User } from "@shared/user";
+import { useEvent } from "@utils/hooks/useEvent";
+import { parser } from "@utils/parser";
+import { memo } from "react";
+
+export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
+	const data = useEvent(id);
+
+	const kind1 = data?.kind === 1 ? parser(data) : null;
+	const kind1063 = data?.kind === 1063 ? data.tags : null;
+
+	return (
+		<div className="relative overflow-hidden flex flex-col pb-6">
+			<div className="absolute left-[18px] top-0 h-full w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
+			{data ? (
+				<>
+					<User pubkey={data.pubkey} time={data.created_at} />
+					<div className="-mt-5 pl-[49px]">
+						{kind1 && <Kind1 content={kind1} />}
+						{kind1063 && <Kind1063 metadata={kind1063} />}
+						{!kind1 && !kind1063 && (
+							<div className="flex flex-col gap-2">
+								<div className="px-2 py-2 inline-flex flex-col gap-1 bg-zinc-800 rounded-md">
+									<span className="text-zinc-500 text-sm font-medium leading-none">
+										Kind: {data.kind}
+									</span>
+									<p className="text-fuchsia-500 text-sm leading-none">
+										Lume isn't fully support this kind in newsfeed
+									</p>
+								</div>
+								<div className="markdown">
+									<p>{data.content}</p>
+								</div>
+							</div>
+						)}
+						<NoteMetadata
+							id={data.event_id || data.id}
+							eventPubkey={data.pubkey}
+						/>
+					</div>
+				</>
+			) : (
+				<NoteSkeleton />
+			)}
+		</div>
+	);
+});

src/shared/notes/preview/image.tsx

@@ -0,0 +1,19 @@
+import { Image } from "@shared/image";
+
+export function ImagePreview({ urls }: { urls: string[] }) {
+	return (
+		<div className="mt-3 overflow-hidden">
+			<div className="flex flex-col gap-2">
+				{urls.map((url) => (
+					<div key={url} className="min-w-0 grow-0 shrink-0 basis-full">
+						<Image
+							src={url}
+							alt="image"
+							className="h-auto w-full rounded-lg object-cover"
+						/>
+					</div>
+				))}
+			</div>
+		</div>
+	);
+}

src/shared/notes/preview/link.tsx

@@ -0,0 +1,53 @@
+import { Image } from "@shared/image";
+import { useOpenGraph } from "@utils/hooks/useOpenGraph";
+
+export function LinkPreview({ urls }: { urls: string[] }) {
+	const domain = new URL(urls[0]);
+	const { data, error, isLoading } = useOpenGraph(urls[0]);
+
+	return (
+		<div className="mt-3 overflow-hidden rounded-lg bg-zinc-800">
+			{error && <p>failed to load</p>}
+			{isLoading || !data ? (
+				<div className="flex flex-col">
+					<div className="w-full h-16 bg-zinc-700 animate-pulse" />
+					<div className="flex flex-col gap-2 px-3 py-3">
+						<div className="w-2/3 h-3 rounded bg-zinc-700 animate-pulse" />
+						<div className="w-3/4 h-3 rounded bg-zinc-700 animate-pulse" />
+						<div className="mt-2.5 w-1/3 h-2 rounded bg-zinc-700 animate-pulse" />
+					</div>
+				</div>
+			) : (
+				<a
+					className="flex flex-col rounded-lg border border-transparent hover:border-fuchsia-900"
+					href={urls[0]}
+					target="_blank"
+					rel="noreferrer"
+				>
+					{data["og:image"] && (
+						<Image
+							src={data["og:image"]}
+							alt={urls[0]}
+							className="w-full h-auto object-cover rounded-t-lg"
+						/>
+					)}
+					<div className="flex flex-col gap-2 px-3 py-3">
+						<h5 className="leading-none font-medium text-zinc-200">
+							{data["og:title"]}
+						</h5>
+						{data["og:description"] ? (
+							<p className="leading-none text-sm text-zinc-400 line-clamp-3">
+								{data["og:description"]}
+							</p>
+						) : (
+							<></>
+						)}
+						<span className="mt-2.5 leading-none text-sm text-zinc-500">
+							{domain.hostname}
+						</span>
+					</div>
+				</a>
+			)}
+		</div>
+	);
+}

src/shared/notes/preview/video.tsx

@@ -0,0 +1,15 @@
+import { MediaOutlet, MediaPlayer } from "@vidstack/react";
+
+export function VideoPreview({ urls }: { urls: string[] }) {
+	return (
+		<div
+			onClick={(e) => e.stopPropagation()}
+			onKeyDown={(e) => e.stopPropagation()}
+			className="relative mt-2 flex w-full flex-col overflow-hidden rounded-lg bg-zinc-950"
+		>
+			<MediaPlayer src={urls[0]} poster="" controls>
+				<MediaOutlet />
+			</MediaPlayer>
+		</div>
+	);
+}

src/shared/notes/quoteRepost.tsx

@@ -0,0 +1,23 @@
+import { RootNote } from "@shared/notes/rootNote";
+import { User } from "@shared/user";
+import { getQuoteID } from "@utils/transform";
+import { LumeEvent } from "@utils/types";
+
+export function NoteQuoteRepost({
+	block,
+	event,
+}: { block: number; event: LumeEvent }) {
+	const rootID = getQuoteID(event.tags);
+
+	return (
+		<div className="h-min w-full px-3 py-1.5">
+			<div className="rounded-md bg-zinc-900">
+				<div className="relative px-5 pb-5 pt-5">
+					<div className="absolute left-[35px] top-[20px] h-[70px] w-0.5 bg-gradient-to-t from-zinc-800 to-zinc-600" />
+					<User pubkey={event.pubkey} time={event.created_at} repost={true} />
+				</div>
+				<RootNote id={rootID} fallback={event.content} currentBlock={block} />
+			</div>
+		</div>
+	);
+}

src/shared/notes/replies/form.tsx

@@ -0,0 +1,80 @@
+import { NDKEvent, NDKPrivateKeySigner } from "@nostr-dev-kit/ndk";
+import { Image } from "@shared/image";
+import { RelayContext } from "@shared/relayProvider";
+import { useActiveAccount } from "@stores/accounts";
+import { DEFAULT_AVATAR } from "@stores/constants";
+import { dateToUnix } from "@utils/date";
+import { useProfile } from "@utils/hooks/useProfile";
+import { useContext, useState } from "react";
+
+export function NoteReplyForm({ id }: { id: string }) {
+	const ndk = useContext(RelayContext);
+	const account = useActiveAccount((state: any) => state.account);
+	const { user } = useProfile(account.npub);
+
+	const [value, setValue] = useState("");
+
+	const submitEvent = () => {
+		const signer = new NDKPrivateKeySigner(account.privkey);
+		ndk.signer = signer;
+
+		const event = new NDKEvent(ndk);
+		// build event
+		event.content = value;
+		event.kind = 1;
+		event.created_at = dateToUnix();
+		event.pubkey = account.pubkey;
+		event.tags = [["e", id]];
+
+		// publish event
+		event.publish();
+
+		// reset form
+		setValue("");
+	};
+
+	return (
+		<div className="flex flex-col">
+			<div className="relative w-full flex-1 overflow-hidden">
+				<textarea
+					name="content"
+					onChange={(e) => setValue(e.target.value)}
+					placeholder="Reply to this thread..."
+					className="relative h-20 w-full resize-none rounded-md px-5 py-5 text-base bg-transparent !outline-none placeholder:text-zinc-400 dark:text-white dark:placeholder:text-zinc-500"
+					spellCheck={false}
+				/>
+			</div>
+			<div className="border-t border-zinc-800 w-full py-3 px-5">
+				<div className="flex w-full items-center justify-between">
+					<div className="inline-flex items-center gap-2">
+						<div className="relative h-8 w-8 shrink-0 rounded">
+							<Image
+								src={user?.image || DEFAULT_AVATAR}
+								alt={account.npub}
+								className="h-8 w-8 rounded bg-white object-cover"
+							/>
+						</div>
+						<div>
+							<p className="mb-px leading-none text-sm text-zinc-400">
+								Reply as
+							</p>
+							<p className="leading-none text-sm font-medium text-zinc-100">
+								{user?.nip05 || user?.name}
+							</p>
+						</div>
+					</div>
+					<div className="flex items-center gap-2">
+						<button
+							type="button"
+							onClick={() => submitEvent()}
+							disabled={value.length === 0 ? true : false}
+							className="inline-flex h-8 w-16 items-center justify-center rounded-md bg-fuchsia-500 px-4 text-base font-medium hover:bg-fuchsia-600 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
+						>
+							Reply
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	);
+}

src/shared/notes/replies/item.tsx

@@ -0,0 +1,20 @@
+import { Kind1 } from "@shared/notes/kind1";
+import { NoteMetadata } from "@shared/notes/metadata";
+import { User } from "@shared/user";
+import { parser } from "@utils/parser";
+
+export function Reply({ data }: { data: any }) {
+	const content = parser(data);
+
+	return (
+		<div className="flex h-min min-h-min w-full select-text flex-col px-3 pt-5 mb-3 rounded-md bg-zinc-900">
+			<div className="flex flex-col">
+				<User pubkey={data.pubkey} time={data.created_at} />
+				<div className="-mt-[20px] pl-[47px]">
+					<Kind1 content={content} />
+					<NoteMetadata id={data.id} eventPubkey={data.pubkey} />
+				</div>
+			</div>
+		</div>
+	);
+}

src/shared/notes/replies/list.tsx

@@ -0,0 +1,48 @@
+import { NDKEvent, NDKFilter } from "@nostr-dev-kit/ndk";
+import { Reply } from "@shared/notes/replies/item";
+import { RelayContext } from "@shared/relayProvider";
+import { useContext } from "react";
+import useSWR from "swr";
+
+const fetcher = async ([, ndk, id]) => {
+	const filter: NDKFilter = {
+		"#e": [id],
+		kinds: [1],
+	};
+	const events = await ndk.fetchEvents(filter);
+	return [...events];
+};
+
+export function RepliesList({ id }: { id: string }) {
+	const ndk = useContext(RelayContext);
+	const { data } = useSWR(["note-replies", ndk, id], fetcher);
+
+	return (
+		<div className="mt-5">
+			<div className="mb-2">
+				<h5 className="text-lg font-semibold text-zinc-300">Replies</h5>
+			</div>
+			<div className="flex flex-col">
+				{!data ? (
+					<div className="flex gap-2 px-3 py-4">
+						<div className="relative h-9 w-9 shrink animate-pulse rounded-md bg-zinc-800" />
+						<div className="flex w-full flex-1 flex-col justify-center gap-1">
+							<div className="flex items-baseline gap-2 text-base">
+								<div className="h-2.5 w-20 animate-pulse rounded-sm bg-zinc-800" />
+							</div>
+							<div className="h-4 w-44 animate-pulse rounded-sm bg-zinc-800" />
+						</div>
+					</div>
+				) : data.length === 0 ? (
+					<div className="px=3">
+						<div className="w-full h-24 flex items-center justify-center rounded-md bg-zinc-900">
+							<p className="text-zinc-300 font-medium">No replies...</p>
+						</div>
+					</div>
+				) : (
+					data.map((event: NDKEvent) => <Reply key={event.id} data={event} />)
+				)}
+			</div>
+		</div>
+	);
+}

src/shared/notes/rootNote.tsx

@@ -0,0 +1,102 @@
+import { NDKEvent } from "@nostr-dev-kit/ndk";
+import { Kind1 } from "@shared/notes/kind1";
+import { Kind1063 } from "@shared/notes/kind1063";
+import { NoteMetadata } from "@shared/notes/metadata";
+import { NoteSkeleton } from "@shared/notes/skeleton";
+import { RelayContext } from "@shared/relayProvider";
+import { User } from "@shared/user";
+import { parser } from "@utils/parser";
+import { memo, useContext } from "react";
+import useSWRSubscription from "swr/subscription";
+
+function isJSON(str: string) {
+	try {
+		JSON.parse(str);
+	} catch (e) {
+		return false;
+	}
+	return true;
+}
+
+export const RootNote = memo(function RootNote({
+	id,
+	fallback,
+	currentBlock,
+}: { id: string; fallback?: any; currentBlock?: number }) {
+	const ndk = useContext(RelayContext);
+	const parseFallback = isJSON(fallback) ? JSON.parse(fallback) : null;
+
+	const { data, error } = useSWRSubscription(
+		parseFallback ? null : id,
+		(key, { next }) => {
+			const sub = ndk.subscribe({
+				ids: [key],
+			});
+
+			sub.addListener("event", (event: NDKEvent) => {
+				next(null, event);
+			});
+
+			return () => {
+				sub.stop();
+			};
+		},
+	);
+
+	const kind1 = !error && data?.kind === 1 ? parser(data) : null;
+	const kind1063 = !error && data?.kind === 1063 ? data.tags : null;
+
+	if (parseFallback) {
+		const contentFallback = parser(parseFallback);
+
+		return (
+			<div className="flex flex-col px-5">
+				<User pubkey={parseFallback.pubkey} time={parseFallback.created_at} />
+				<div className="-mt-5 pl-[49px]">
+					<Kind1 content={contentFallback} />
+					<NoteMetadata
+						id={parseFallback.id}
+						eventPubkey={parseFallback.pubkey}
+						currentBlock={currentBlock}
+					/>
+				</div>
+			</div>
+		);
+	}
+
+	return (
+		<div className="flex flex-col px-5">
+			{data ? (
+				<>
+					<User pubkey={data.pubkey} time={data.created_at} />
+					<div className="-mt-5 pl-[49px]">
+						{kind1 && <Kind1 content={kind1} />}
+						{kind1063 && <Kind1063 metadata={kind1063} />}
+						{!kind1 && !kind1063 && (
+							<div className="flex flex-col gap-2">
+								<div className="px-2 py-2 inline-flex flex-col gap-1 bg-zinc-800 rounded-md">
+									<span className="text-zinc-500 text-sm font-medium leading-none">
+										Kind: {data.kind}
+									</span>
+									<p className="text-fuchsia-500 text-sm leading-none">
+										Lume isn't fully support this kind in newsfeed
+									</p>
+								</div>
+								<div className="markdown">
+									<p>{data.content}</p>
+								</div>
+							</div>
+						)}
+						<NoteMetadata
+							id={data.id}
+							eventPubkey={data.pubkey}
+							currentBlock={currentBlock}
+						/>
+					</div>
+				</>
+			) : (
+				<NoteSkeleton />
+			)}
+		</div>
+	);
+});

src/shared/notes/skeleton.tsx

@@ -0,0 +1,19 @@
+export function NoteSkeleton() {
+	return (
+		<div className="flex h-min flex-col pb-3">
+			<div className="flex items-start gap-3">
+				<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-700" />
+				<div className="flex flex-col gap-0.5">
+					<div className="h-4 w-20 rounded bg-zinc-700" />
+				</div>
+			</div>
+			<div className="-mt-5 animate-pulse pl-[49px]">
+				<div className="flex flex-col gap-1">
+					<div className="h-4 w-full rounded-sm bg-zinc-700" />
+					<div className="h-3 w-2/3 rounded-sm bg-zinc-700" />
+					<div className="h-3 w-1/2 rounded-sm bg-zinc-700" />
+				</div>
+			</div>
+		</div>
+	);
+}