feat(ark): add user component

packages/ark/src/ark.ts

@@ -198,13 +198,13 @@ export class Ark {
 		}
 	}
 
-	public async createContact({ pubkey }: { pubkey: string }) {
+	public async createContact(pubkey: string) {
 		const user = this.ndk.getUser({ pubkey: this.account.pubkey });
 		const contacts = await user.follows();
 		return await user.follow(new NDKUser({ pubkey: pubkey }), contacts);
 	}
 
-	public async deleteContact({ pubkey }: { pubkey: string }) {
+	public async deleteContact(pubkey: string) {
 		const user = this.ndk.getUser({ pubkey: this.account.pubkey });
 		const contacts = await user.follows();
 		contacts.delete(new NDKUser({ pubkey: pubkey }));
@@ -549,17 +549,12 @@ export class Ark {
 			signal,
 		});
 
-		if (!res.ok) {
-			console.log(res);
-			throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
-		}
+		if (!res.ok) throw new Error(`Failed to fetch NIP-05 service: ${nip05}`);
 
 		const data: NIP05 = await res.json();
-
 		if (!data.names) return false;
 		if (data.names[localPath.toLowerCase()] === pubkey) return true;
 		if (data.names[localPath] === pubkey) return true;
-
 		return false;
 	}
 

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

@@ -4,7 +4,7 @@ import { ReactNode, useMemo } from "react";
 import { Link } from "react-router-dom";
 import reactStringReplace from "react-string-replace";
 import { useEvent } from "../../hooks/useEvent";
-import { NoteChildUser } from "./childUser";
+import { User } from "../user";
 import { Hashtag } from "./mentions/hashtag";
 import { MentionUser } from "./mentions/user";
 
@@ -120,10 +120,17 @@ export function NoteChild({
 					{richContent}
 				</div>
 			</div>
-			<NoteChildUser
-				pubkey={data.pubkey}
-				subtext={isRoot ? "posted" : "replied"}
-			/>
+			<User.Provider pubkey={data.pubkey}>
+				<User.Root>
+					<User.Avatar className="size-10 shrink-0 rounded-lg object-cover" />
+					<div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
+						<User.Name />
+						<div className="font-normal text-neutral-700 dark:text-neutral-300">
+							{isRoot ? "posted:" : "replied:"}
+						</div>
+					</div>
+				</User.Root>
+			</User.Provider>
 		</div>
 	);
 }

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

@@ -1,64 +0,0 @@
-import { displayNpub } from '@lume/utils';
-import * as Avatar from '@radix-ui/react-avatar';
-import { minidenticon } from 'minidenticons';
-import { useMemo } from 'react';
-import { useProfile } from '../../hooks/useProfile';
-
-export function NoteChildUser({ pubkey, subtext }: { pubkey: string; subtext: string }) {
-  const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
-  const fallbackAvatar = useMemo(
-    () => `data:image/svg+xml;utf8,${encodeURIComponent(minidenticon(pubkey, 90, 50))}`,
-    [pubkey]
-  );
-
-  const { isLoading, user } = useProfile(pubkey);
-
-  if (isLoading) {
-    return (
-      <>
-        <Avatar.Root className="h-10 w-10 shrink-0">
-          <Avatar.Image
-            src={fallbackAvatar}
-            alt={pubkey}
-            className="h-10 w-10 rounded-lg bg-black object-cover dark:bg-white"
-          />
-        </Avatar.Root>
-        <div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
-          <div className="w-full max-w-[10rem] truncate">{fallbackName} </div>
-          <div className="font-normal text-neutral-700 dark:text-neutral-300">
-            {subtext}:
-          </div>
-        </div>
-      </>
-    );
-  }
-
-  return (
-    <>
-      <Avatar.Root className="h-10 w-10 shrink-0">
-        <Avatar.Image
-          src={user?.picture || user?.image}
-          alt={pubkey}
-          loading="lazy"
-          decoding="async"
-          className="h-10 w-10 rounded-lg object-cover"
-        />
-        <Avatar.Fallback delayMs={300}>
-          <img
-            src={fallbackAvatar}
-            alt={pubkey}
-            className="h-10 w-10 rounded-lg bg-black dark:bg-white"
-          />
-        </Avatar.Fallback>
-      </Avatar.Root>
-      <div className="absolute left-2 top-2 inline-flex items-center gap-1.5 font-semibold leading-tight">
-        <div className="w-full max-w-[10rem] truncate">
-          {user?.display_name || user?.name || user?.displayName || fallbackName}{' '}
-        </div>
-        <div className="font-normal text-neutral-700 dark:text-neutral-300">
-          {subtext}:
-        </div>
-      </div>
-    </>
-  );
-}

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

@@ -1,7 +1,8 @@
 import { memo } from "react";
 import { Link } from "react-router-dom";
-import { Note } from "..";
+import { Note } from "../";
 import { useEvent } from "../../../hooks/useEvent";
+import { User } from "../../user";
 
 export const MentionNote = memo(function MentionNote({
 	eventId,
@@ -34,9 +35,19 @@ export const MentionNote = memo(function MentionNote({
 	return (
 		<Note.Provider event={data}>
 			<Note.Root className="flex flex-col w-full gap-1 my-1 rounded-lg cursor-default bg-neutral-100 dark:bg-neutral-900">
-				<div className="px-3 mt-3">
-					<Note.User variant="mention" />
-				</div>
+				<User.Provider pubkey={data.pubkey}>
+					<User.Root className="px-3 mt-3 flex h-6 items-center gap-2">
+						<User.Avatar className="size-6 shrink-0 rounded-md object-cover" />
+						<div className="flex flex-1 items-baseline gap-2">
+							<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
+							<span className="text-neutral-600 dark:text-neutral-400">·</span>
+							<User.Time
+								time={data.created_at}
+								className="text-neutral-600 dark:text-neutral-400"
+							/>
+						</div>
+					</User.Root>
+				</User.Provider>
 				<div className="px-3 pb-3 mt-1">
 					<Note.Content />
 					{openable ? (

packages/ark/src/components/note/primitives/repost.tsx

@@ -1,7 +1,9 @@
+import { RepostIcon } from "@lume/icons";
 import { NDKEvent, NostrEvent } from "@nostr-dev-kit/ndk";
 import { useQuery } from "@tanstack/react-query";
 import { Note } from "..";
 import { useArk } from "../../../hooks/useArk";
+import { User } from "../../user";
 
 export function RepostNote({
 	event,
@@ -39,9 +41,20 @@ export function RepostNote({
 	if (isError || !repostEvent) {
 		return (
 			<Note.Root className={className}>
-				<Note.Provider event={event}>
-					<Note.User variant="repost" className="h-14" />
-				</Note.Provider>
+				<User.Provider pubkey={event.pubkey}>
+					<User.Root className="flex gap-2 px-3 h-14">
+						<div className="inline-flex shrink-0 w-10 items-center justify-center">
+							<RepostIcon className="h-5 w-5 text-blue-500" />
+						</div>
+						<div className="inline-flex items-center gap-2">
+							<User.Avatar className="size-6 shrink-0 rounded object-cover" />
+							<div className="inline-flex items-baseline gap-1">
+								<User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
+								<span className="text-blue-500">reposted</span>
+							</div>
+						</div>
+					</User.Root>
+				</User.Provider>
 				<div className="px-3 mb-3 select-text">
 					<div className="flex flex-col items-start justify-start px-3 py-3 bg-red-100 rounded-lg dark:bg-red-900">
 						<p className="text-red-500">Failed to get event</p>
@@ -57,9 +70,20 @@ export function RepostNote({
 
 	return (
 		<Note.Root className={className}>
-			<Note.Provider event={event}>
-				<Note.User variant="repost" className="h-14" />
-			</Note.Provider>
+			<User.Provider pubkey={event.pubkey}>
+				<User.Root className="flex gap-2 px-3 h-14">
+					<div className="inline-flex shrink-0 w-10 items-center justify-center">
+						<RepostIcon className="h-5 w-5 text-blue-500" />
+					</div>
+					<div className="inline-flex items-center gap-2">
+						<User.Avatar className="size-6 shrink-0 rounded object-cover" />
+						<div className="inline-flex items-baseline gap-1">
+							<User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
+							<span className="text-blue-500">reposted</span>
+						</div>
+					</div>
+				</User.Root>
+			</User.Provider>
 			<Note.Provider event={repostEvent}>
 				<div className="relative flex flex-col gap-2 px-3">
 					<div className="flex items-center justify-between">

packages/ark/src/components/note/primitives/thread.tsx

@@ -1,5 +1,6 @@
 import { Note } from "..";
 import { useEvent } from "../../../hooks/useEvent";
+import { User } from "../../user";
 
 export function ThreadNote({ eventId }: { eventId: string }) {
 	const { isLoading, data } = useEvent(eventId);
@@ -13,6 +14,19 @@ export function ThreadNote({ eventId }: { eventId: string }) {
 			<Note.Root>
 				<div className="flex items-center justify-between px-3 h-14">
 					<Note.User className="flex-1 pr-1" />
+					<User.Provider pubkey={data.pubkey}>
+						<User.Root className="flex h-16 items-center gap-3 px-3 flex-1">
+							<User.Avatar className="size-10 shrink-0 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
+							<div className="flex flex-1 flex-col">
+								<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
+								<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
+									<User.Time time={data.created_at} />
+									<span>·</span>
+									<User.NIP05 />
+								</div>
+							</div>
+						</User.Root>
+					</User.Provider>
 					<Note.Menu />
 				</div>
 				<Note.Thread className="mb-2" />

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

@@ -3,7 +3,9 @@ import { COL_TYPES } from "@lume/utils";
 import { Link } from "react-router-dom";
 import { twMerge } from "tailwind-merge";
 import { Note } from ".";
-import { useArk, useColumnContext, useNoteContext } from "../..";
+import { useArk } from "../../hooks/useArk";
+import { useColumnContext } from "../column/provider";
+import { useNoteContext } from "./provider";
 
 export function NoteThread({
 	className,

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

@@ -1,240 +1,26 @@
-import { RepostIcon } from "@lume/icons";
-import { displayNpub, formatCreatedAt } from "@lume/utils";
-import * as Avatar from "@radix-ui/react-avatar";
-import { minidenticon } from "minidenticons";
-import { useMemo } from "react";
-import { twMerge } from "tailwind-merge";
-import { useProfile } from "../../hooks/useProfile";
+import { cn } from "@lume/utils";
+import { User } from "../user";
 import { useNoteContext } from "./provider";
 
 export function NoteUser({
-	variant = "text",
 	className,
 }: {
-	variant?: "text" | "repost" | "mention" | "thread";
 	className?: string;
 }) {
 	const event = useNoteContext();
-	const createdAt = useMemo(
-		() => formatCreatedAt(event.created_at),
-		[event.created_at],
-	);
-	const fallbackName = useMemo(
-		() => displayNpub(event.pubkey, 16),
-		[event.pubkey],
-	);
-	const fallbackAvatar = useMemo(
-		() =>
-			`data:image/svg+xml;utf8,${encodeURIComponent(
-				minidenticon(event.pubkey, 90, 50),
-			)}`,
-		[event.pubkey],
-	);
-
-	const { isLoading, user } = useProfile(event.pubkey);
-
-	if (variant === "mention") {
-		if (isLoading) {
-			return (
-				<div className="flex items-center gap-2">
-					<Avatar.Root className="shrink-0">
-						<Avatar.Image
-							src={fallbackAvatar}
-							alt={event.pubkey}
-							className="h-6 w-6 shrink-0 object-cover rounded-md bg-black dark:bg-white"
-						/>
-					</Avatar.Root>
-					<div className="flex flex-1 items-baseline gap-2">
-						<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
-							{fallbackName}
-						</h5>
-						<span className="text-neutral-600 dark:text-neutral-400">·</span>
-						<span className="text-neutral-600 dark:text-neutral-400">
-							{createdAt}
-						</span>
-					</div>
-				</div>
-			);
-		}
-
-		return (
-			<div className="flex h-6 items-center gap-2">
-				<Avatar.Root className="shrink-0">
-					<Avatar.Image
-						src={user?.picture || user?.image}
-						alt={event.pubkey}
-						loading="eager"
-						decoding="async"
-						className="h-6 w-6 shrink-0 object-cover rounded-md"
-					/>
-					<Avatar.Fallback delayMs={150}>
-						<img
-							src={fallbackAvatar}
-							alt={event.pubkey}
-							className="h-6 w-6 rounded-md bg-black dark:bg-white"
-						/>
-					</Avatar.Fallback>
-				</Avatar.Root>
-				<div className="flex flex-1 items-baseline gap-2">
-					<h5 className="max-w-[10rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
-						{user?.name ||
-							user?.display_name ||
-							user?.displayName ||
-							fallbackName}
-					</h5>
-					<span className="text-neutral-600 dark:text-neutral-400">·</span>
-					<span className="text-neutral-600 dark:text-neutral-400">
-						{createdAt}
-					</span>
-				</div>
-			</div>
-		);
-	}
-
-	if (variant === "repost") {
-		if (isLoading) {
-			return (
-				<div className={twMerge("flex gap-2 px-3", className)}>
-					<div className="inline-flex shrink-0 w-10 items-center justify-center">
-						<RepostIcon className="h-5 w-5 text-blue-500" />
-					</div>
-					<div className="inline-flex items-center gap-2">
-						<div className="h-6 w-6 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-						<div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-					</div>
-				</div>
-			);
-		}
-
-		return (
-			<div className={twMerge("flex gap-2 px-3", className)}>
-				<div className="inline-flex shrink-0 w-10 items-center justify-center">
-					<RepostIcon className="h-5 w-5 text-blue-500" />
-				</div>
-				<div className="inline-flex items-center gap-2">
-					<Avatar.Root className="shrink-0">
-						<Avatar.Image
-							src={user?.picture || user?.image}
-							alt={event.pubkey}
-							loading="eager"
-							decoding="async"
-							className="h-6 w-6 rounded object-cover"
-						/>
-						<Avatar.Fallback delayMs={150}>
-							<img
-								src={fallbackAvatar}
-								alt={event.pubkey}
-								className="h-6 w-6 rounded bg-black dark:bg-white"
-							/>
-						</Avatar.Fallback>
-					</Avatar.Root>
-					<div className="inline-flex items-baseline gap-1">
-						<h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
-							{user?.name ||
-								user?.display_name ||
-								user?.displayName ||
-								fallbackName}
-						</h5>
-						<span className="text-blue-500">reposted</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (variant === "thread") {
-		if (isLoading) {
-			return (
-				<div className="flex h-16 items-center gap-3 px-3">
-					<div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
-					<div className="flex flex-1 flex-col gap-1">
-						<div className="h-4 w-36 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-						<div className="h-3 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
-					</div>
-				</div>
-			);
-		}
-
-		return (
-			<div className="flex h-16 items-center gap-3 px-3">
-				<Avatar.Root className="h-10 w-10 shrink-0">
-					<Avatar.Image
-						src={user?.picture || user?.image}
-						alt={event.pubkey}
-						loading="eager"
-						decoding="async"
-						className="h-10 w-10 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
-					/>
-					<Avatar.Fallback delayMs={150}>
-						<img
-							src={fallbackAvatar}
-							alt={event.pubkey}
-							className="h-10 w-10 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
-						/>
-					</Avatar.Fallback>
-				</Avatar.Root>
-				<div className="flex flex-1 flex-col">
-					<h5 className="max-w-[15rem] truncate font-semibold text-neutral-900 dark:text-neutral-100">
-						{user?.name || user?.display_name || user?.displayName || "Anon"}
-					</h5>
-					<div className="inline-flex items-center gap-2 text-sm text-neutral-600 dark:text-neutral-400">
-						<span>{createdAt}</span>
-						<span>·</span>
-						<span>{fallbackName}</span>
-					</div>
-				</div>
-			</div>
-		);
-	}
-
-	if (isLoading) {
-		return (
-			<div className={twMerge("flex items-center gap-3", className)}>
-				<Avatar.Root className="h-9 w-9 shrink-0">
-					<Avatar.Image
-						src={fallbackAvatar}
-						alt={event.pubkey}
-						className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
-					/>
-				</Avatar.Root>
-				<div className="h-6 flex-1">
-					<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
-						{fallbackName}
-					</div>
-				</div>
-			</div>
-		);
-	}
 
 	return (
-		<div className={twMerge("flex items-center gap-3", className)}>
-			<Avatar.Root className="h-9 w-9 shrink-0">
-				<Avatar.Image
-					src={user?.picture || user?.image}
-					alt={event.pubkey}
-					loading="eager"
-					decoding="async"
-					className="h-9 w-9 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
-				/>
-				<Avatar.Fallback delayMs={150}>
-					<img
-						src={fallbackAvatar}
-						alt={event.pubkey}
-						className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
+		<User.Provider pubkey={event.pubkey}>
+			<User.Root className={cn("flex items-center gap-3", className)}>
+				<User.Avatar className="size-9 shrink-0 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
+				<div className="flex h-6 flex-1 items-start justify-between gap-2">
+					<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
+					<User.Time
+						time={event.created_at}
+						className="text-neutral-500 dark:text-neutral-400"
 					/>
-				</Avatar.Fallback>
-			</Avatar.Root>
-			<div className="flex h-6 flex-1 items-start justify-between gap-2">
-				<div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
-					{user?.name ||
-						user?.display_name ||
-						user?.displayName ||
-						fallbackName}
 				</div>
-				<div className="text-neutral-500 dark:text-neutral-400">
-					{createdAt}
-				</div>
-			</div>
-		</div>
+			</User.Root>
+		</User.Provider>
 	);
 }

packages/ark/src/components/user/avatar.tsx

@@ -0,0 +1,48 @@
+import { cn } from "@lume/utils";
+import * as Avatar from "@radix-ui/react-avatar";
+import { minidenticon } from "minidenticons";
+import { useMemo } from "react";
+import { useUserContext } from "./provider";
+
+export function UserAvatar({ className }: { className?: string }) {
+	const user = useUserContext();
+	const fallbackAvatar = useMemo(
+		() =>
+			`data:image/svg+xml;utf8,${encodeURIComponent(
+				minidenticon(user?.pubkey, 90, 50),
+			)}`,
+		[user],
+	);
+
+	if (!user) {
+		return (
+			<div className="shrink-0">
+				<div
+					className={cn(
+						"bg-black/20 dark:bg-white/20 animate-pulse",
+						className,
+					)}
+				/>
+			</div>
+		);
+	}
+
+	return (
+		<Avatar.Root className="shrink-0">
+			<Avatar.Image
+				src={user.image}
+				alt={user.pubkey}
+				loading="eager"
+				decoding="async"
+				className={className}
+			/>
+			<Avatar.Fallback delayMs={120}>
+				<img
+					src={fallbackAvatar}
+					alt={user.pubkey}
+					className={cn("bg-black dark:bg-white", className)}
+				/>
+			</Avatar.Fallback>
+		</Avatar.Root>
+	);
+}

packages/ark/src/components/user/followButton.tsx

@@ -0,0 +1,35 @@
+import { cn } from "@lume/utils";
+import { useEffect, useState } from "react";
+import { useArk } from "../../hooks/useArk";
+
+export function UserFollowButton({
+	target,
+	className,
+}: { target: string; className?: string }) {
+	const ark = useArk();
+	const [followed, setFollowed] = useState(false);
+
+	const toggleFollow = async () => {
+		if (!followed) {
+			const add = await ark.createContact(target);
+			if (add) setFollowed(true);
+		} else {
+			const remove = await ark.deleteContact(target);
+			if (remove) setFollowed(false);
+		}
+	};
+
+	useEffect(() => {
+		async function status() {
+			const contacts = await ark.getUserContacts();
+			if (contacts?.includes(target)) setFollowed(true);
+		}
+		status();
+	}, []);
+
+	return (
+		<button type="button" onClick={toggleFollow} className={cn("", className)}>
+			{followed ? "Unfollow" : "Follow"}
+		</button>
+	);
+}

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

@@ -0,0 +1,17 @@
+import { UserAvatar } from "./avatar";
+import { UserFollowButton } from "./followButton";
+import { UserName } from "./name";
+import { UserNip05 } from "./nip05";
+import { UserProvider } from "./provider";
+import { UserRoot } from "./root";
+import { UserTime } from "./time";
+
+export const User = {
+	Provider: UserProvider,
+	Root: UserRoot,
+	Avatar: UserAvatar,
+	Name: UserName,
+	NIP05: UserNip05,
+	Time: UserTime,
+	Button: UserFollowButton,
+};

packages/ark/src/components/user/name.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@lume/utils";
+import { useUserContext } from "./provider";
+
+export function UserName({ className }: { className?: string }) {
+	const user = useUserContext();
+
+	if (!user) {
+		return (
+			<div
+				className={cn(
+					"h-4 w-20 bg-black/20 dark:bg-white/20 animate-pulse",
+					className,
+				)}
+			/>
+		);
+	}
+
+	return (
+		<div className={cn("w-full max-w-[15rem] truncate", className)}>
+			{user.displayName || user.name || "Anon"}
+		</div>
+	);
+}

packages/ark/src/components/user/nip05.tsx

@@ -0,0 +1,47 @@
+import { UnverifiedIcon, VerifiedIcon } from "@lume/icons";
+import { cn } from "@lume/utils";
+import { useQuery } from "@tanstack/react-query";
+import { useArk } from "../../hooks/useArk";
+import { useUserContext } from "./provider";
+
+export function UserNip05({ className }: { className?: string }) {
+	const ark = useArk();
+	const user = useUserContext();
+
+	const { isLoading, data: verified } = useQuery({
+		queryKey: ["nip05", user?.nip05],
+		queryFn: async ({ signal }: { signal: AbortSignal }) => {
+			return ark.validateNIP05({
+				pubkey: user?.pubkey,
+				nip05: user?.nip05,
+				signal,
+			});
+		},
+	});
+
+	if (!user) {
+		return (
+			<div
+				className={cn(
+					"h-4 w-20 bg-black/20 dark:bg-white/20 animate-pulse",
+					className,
+				)}
+			/>
+		);
+	}
+
+	return (
+		<div className="inline-flex items-center gap-1">
+			<p className={cn("text-sm font-medium", className)}>
+				{user.nip05.startsWith("_@")
+					? user.nip05.replace("_@", "")
+					: user.nip05}
+			</p>
+			{!isLoading && verified ? (
+				<VerifiedIcon className="size-5 text-teal-500" />
+			) : (
+				<UnverifiedIcon className="size-5 text-red-500" />
+			)}
+		</div>
+	);
+}

packages/ark/src/components/user/provider.tsx

@@ -0,0 +1,36 @@
+import { NDKUserProfile } from "@nostr-dev-kit/ndk";
+import { useQuery } from "@tanstack/react-query";
+import { ReactNode, createContext, useContext } from "react";
+import { useArk } from "../../hooks/useArk";
+
+const UserContext = createContext<NDKUserProfile>(null);
+
+export function UserProvider({
+	pubkey,
+	children,
+}: { pubkey: string; children: ReactNode }) {
+	const ark = useArk();
+	const { data: user } = useQuery({
+		queryKey: ["user", pubkey],
+		queryFn: async () => {
+			const profile = await ark.getUserProfile(pubkey);
+			if (!profile)
+				throw new Error(
+					`Cannot get metadata for ${pubkey}, will be retry after 10 seconds`,
+				);
+			return profile;
+		},
+		refetchOnMount: false,
+		refetchOnWindowFocus: false,
+		refetchOnReconnect: false,
+		staleTime: Infinity,
+		retry: 2,
+	});
+
+	return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
+}
+
+export function useUserContext() {
+	const context = useContext(UserContext);
+	return context;
+}

packages/ark/src/components/user/root.tsx

@@ -0,0 +1,12 @@
+import { cn } from "@lume/utils";
+import { ReactNode } from "react";
+
+export function UserRoot({
+	children,
+	className,
+}: {
+	children: ReactNode;
+	className?: string;
+}) {
+	return <div className={cn(className)}>{children}</div>;
+}

packages/ark/src/components/user/time.tsx

@@ -0,0 +1,11 @@
+import { cn, formatCreatedAt } from "@lume/utils";
+import { useMemo } from "react";
+
+export function UserTime({
+	time,
+	className,
+}: { time: number; className?: string }) {
+	const createdAt = useMemo(() => formatCreatedAt(time), [time]);
+
+	return <div className={cn("", className)}>{createdAt}</div>;
+}

packages/ark/src/index.ts

@@ -5,10 +5,10 @@ export * from "./hooks/useEvent";
 export * from "./hooks/useArk";
 export * from "./hooks/useProfile";
 export * from "./hooks/useRelay";
-export * from "./components/column/provider";
+export * from "./components/user";
 export * from "./components/column";
+export * from "./components/column/provider";
 export * from "./components/note";
-export * from "./components/note/provider";
 export * from "./components/note/primitives/text";
 export * from "./components/note/primitives/repost";
 export * from "./components/note/primitives/skeleton";

packages/ui/src/activity/reply.tsx

@@ -4,7 +4,10 @@ import { ActivityRootNote } from "./rootNote";
 
 export function ReplyActivity({ event }: { event: NDKEvent }) {
 	const ark = useArk();
-	const thread = ark.getEventThread({ tags: event.tags });
+	const thread = ark.getEventThread({
+		content: event.content,
+		tags: event.tags,
+	});
 
 	return (
 		<div className="h-full pb-3 flex flex-col justify-between">