feat: support nip 89

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

@@ -0,0 +1,54 @@
+import { NDKAppHandlerEvent } from "@nostr-dev-kit/ndk";
+import { useQuery } from "@tanstack/react-query";
+import { useArk } from "../../provider";
+
+export function AppHandler({ tag }: { tag: string[] }) {
+	const ark = useArk();
+
+	const { isLoading, isError, data } = useQuery({
+		queryKey: ["app-handler", tag[1]],
+		queryFn: async () => {
+			const ref = tag[1].split(":");
+			const event = await ark.getEventByFilter({
+				filter: {
+					kinds: [Number(ref[0])],
+					authors: [ref[1]],
+					"#d": [ref[2]],
+				},
+			});
+
+			if (!event) return null;
+
+			const app = NDKAppHandlerEvent.from(event);
+			return await app.fetchProfile();
+		},
+		refetchOnWindowFocus: false,
+	});
+
+	if (isLoading) {
+		<div>Loading...</div>;
+	}
+
+	if (isError || !data) {
+		return <div>Error</div>;
+	}
+
+	return (
+		<div className="flex items-center gap-2 p-2 rounded-md bg-neutral-200 dark:bg-neutral-800 hover:ring-1 hover:ring-blue-500">
+			<img
+				src={data?.picture || data?.image}
+				alt={data.pubkey}
+				decoding="async"
+				className="object-cover bg-white rounded-lg h-9 w-9 shrink-0 ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
+			/>
+			<div className="flex flex-col">
+				<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
+					{data.name}
+				</div>
+				<div className="text-sm text-neutral-600 dark:text-neutral-400 line-clamp-1">
+					{data.about}
+				</div>
+			</div>
+		</div>
+	);
+}