chore: monorepo

packages/ark/src/components/note/mentions/hashtag.tsx

@@ -0,0 +1,22 @@
+import { WIDGET_KIND } from "@lume/utils";
+import { useWidget } from "../../../hooks/useWidget";
+
+export function Hashtag({ tag }: { tag: string }) {
+	const { addWidget } = useWidget();
+
+	return (
+		<button
+			type="button"
+			onClick={() =>
+				addWidget.mutate({
+					kind: WIDGET_KIND.hashtag,
+					title: tag,
+					content: tag.replace("#", ""),
+				})
+			}
+			className="cursor-default break-all text-blue-500 hover:text-blue-600"
+		>
+			{tag}
+		</button>
+	);
+}

packages/ark/src/components/note/mentions/invoice.tsx

@@ -0,0 +1,10 @@
+import { QRCodeSVG } from 'qrcode.react';
+import { memo } from 'react';
+
+export const Invoice = memo(function Invoice({ invoice }: { invoice: string }) {
+  return (
+    <div className="mt-2 flex items-center rounded-lg bg-neutral-200 p-2 dark:bg-neutral-800">
+      <QRCodeSVG value={invoice} includeMargin={true} className="rounded-lg" />
+    </div>
+  );
+});

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

@@ -0,0 +1,70 @@
+import { WIDGET_KIND } from "@lume/utils";
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { memo } from "react";
+import { Note } from "..";
+import { useEvent } from "../../../hooks/useEvent";
+import { useWidget } from "../../../hooks/useWidget";
+
+export const MentionNote = memo(function MentionNote({
+	eventId,
+}: { eventId: string }) {
+	const { isLoading, isError, data } = useEvent(eventId);
+	const { addWidget } = useWidget();
+
+	const renderKind = (event: NDKEvent) => {
+		switch (event.kind) {
+			case NDKKind.Text:
+				return <Note.TextContent content={event.content} />;
+			case NDKKind.Article:
+				return <Note.ArticleContent eventId={event.id} tags={event.tags} />;
+			case 1063:
+				return <Note.MediaContent tags={event.tags} />;
+			default:
+				return <Note.TextContent content={event.content} />;
+		}
+	};
+
+	if (isLoading) {
+		return (
+			<div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+				Loading
+			</div>
+		);
+	}
+
+	if (isError) {
+		return (
+			<div className="w-full cursor-default rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+				Failed to fetch event
+			</div>
+		);
+	}
+
+	return (
+		<Note.Root className="my-2 flex w-full cursor-default flex-col gap-1 rounded-lg bg-neutral-100 dark:bg-neutral-900">
+			<div className="mt-3 px-3">
+				<Note.User
+					pubkey={data.pubkey}
+					time={data.created_at}
+					variant="mention"
+				/>
+			</div>
+			<div className="mt-1 px-3 pb-3">
+				{renderKind(data)}
+				<button
+					type="button"
+					onClick={() =>
+						addWidget.mutate({
+							kind: WIDGET_KIND.thread,
+							title: "Thread",
+							content: data.id,
+						})
+					}
+					className="mt-2 text-blue-500 hover:text-blue-600"
+				>
+					Show more
+				</button>
+			</div>
+		</Note.Root>
+	);
+});

packages/ark/src/components/note/mentions/user.tsx

@@ -0,0 +1,27 @@
+import { WIDGET_KIND } from "@lume/utils";
+import { memo } from "react";
+import { useProfile } from "../../../hooks/useProfile";
+import { useWidget } from "../../../hooks/useWidget";
+
+export const MentionUser = memo(function MentionUser({
+	pubkey,
+}: { pubkey: string }) {
+	const { user } = useProfile(pubkey);
+	const { addWidget } = useWidget();
+
+	return (
+		<button
+			type="button"
+			onClick={() =>
+				addWidget.mutate({
+					kind: WIDGET_KIND.user,
+					title: user?.name || user?.display_name || user?.displayName,
+					content: pubkey,
+				})
+			}
+			className="break-words text-blue-500 hover:text-blue-600"
+		>
+			{`@${user?.name || user?.displayName || user?.username || "unknown"}`}
+		</button>
+	);
+});