refactor(ark): rename widget to column

packages/ark/src/components/note/builds/reply.tsx

@@ -23,10 +23,10 @@ export function Reply({
 					className="h-14 px-3"
 				/>
 				<Note.TextContent content={event.content} className="min-w-0 px-3" />
-				<div className="-ml-1 flex items-center justify-between">
+				<div className="-ml-1 flex items-center justify-between h-14 px-3">
 					{event.replies?.length > 0 ? (
 						<Collapsible.Trigger asChild>
-							<div className="ml-4 inline-flex h-14 items-center gap-1 font-semibold text-blue-500">
+							<div className="ml-1 inline-flex h-14 items-center gap-1 font-semibold text-blue-500">
 								<NavArrowDownIcon
 									className={twMerge(
 										"h-3 w-3",
@@ -54,16 +54,13 @@ export function Reply({
 									<Note.User pubkey={event.pubkey} time={event.created_at} />
 									<Note.TextContent
 										content={event.content}
-										className="min-w-0 px-3"
+										className="min-w-0"
 									/>
-									<div className="-ml-1 flex h-14 items-center justify-between px-3">
-										<Note.Pin eventId={event.id} />
-										<div className="inline-flex items-center gap-10">
-											<Note.Reply eventId={event.id} rootEventId={rootEvent} />
-											<Note.Reaction event={event} />
-											<Note.Repost event={event} />
-											<Note.Zap event={event} />
-										</div>
+									<div className="-ml-1 flex h-14 items-center gap-10">
+										<Note.Reply eventId={event.id} rootEventId={rootEvent} />
+										<Note.Reaction event={event} />
+										<Note.Repost event={event} />
+										<Note.Zap event={event} />
 									</div>
 								</Note.Root>
 							))}

packages/ark/src/components/note/builds/text.tsx

@@ -2,12 +2,15 @@ import { NDKEvent } from "@nostr-dev-kit/ndk";
 import { Note } from "..";
 import { useArk } from "../../../provider";
 
-export function TextNote({ event }: { event: NDKEvent }) {
+export function TextNote({
+	event,
+	className,
+}: { event: NDKEvent; className?: string }) {
 	const ark = useArk();
 	const thread = ark.getEventThread({ tags: event.tags });
 
 	return (
-		<Note.Root>
+		<Note.Root className={className}>
 			<Note.User
 				pubkey={event.pubkey}
 				time={event.created_at}

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

@@ -0,0 +1,55 @@
+import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
+import { Note } from "..";
+import { useEvent } from "../../../hooks/useEvent";
+import { useArk } from "../../../provider";
+
+export function ThreadNote({ eventId }: { eventId: string }) {
+	const ark = useArk();
+	const { isLoading, data } = useEvent(eventId);
+
+	const renderEventKind = (event: NDKEvent) => {
+		const thread = ark.getEventThread({ tags: data.tags });
+		switch (event.kind) {
+			case NDKKind.Text:
+				return (
+					<>
+						<Note.Thread thread={thread} className="mb-2" />
+						<Note.TextContent content={data.content} className="min-w-0 px-3" />
+					</>
+				);
+			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={data.content} className="min-w-0 px-3" />
+				);
+		}
+	};
+
+	if (isLoading) {
+		return <div>Loading...</div>;
+	}
+
+	return (
+		<Note.Root>
+			<Note.User
+				pubkey={data.pubkey}
+				time={data.created_at}
+				variant="thread"
+				className="h-16 px-3"
+			/>
+			{renderEventKind(data)}
+			<div className="flex h-14 items-center justify-between px-3">
+				<Note.Pin eventId={data.id} />
+				<div className="inline-flex items-center gap-10">
+					<Note.Reply eventId={data.id} />
+					<Note.Reaction event={data} />
+					<Note.Repost event={data} />
+					<Note.Zap event={data} />
+				</div>
+			</div>
+		</Note.Root>
+	);
+}

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

@@ -8,7 +8,7 @@ import { NoteArticleContent } from "./kinds/article";
 import { NoteMediaContent } from "./kinds/media";
 import { NoteTextContent } from "./kinds/text";
 import { NoteMenu } from "./menu";
-import { NoteReplies } from "./reply";
+import { NoteReplyList } from "./reply";
 import { NoteRoot } from "./root";
 import { NoteThread } from "./thread";
 import { NoteUser } from "./user";
@@ -27,12 +27,13 @@ export const Note = {
 	TextContent: NoteTextContent,
 	MediaContent: NoteMediaContent,
 	ArticleContent: NoteArticleContent,
-	Replies: NoteReplies,
+	ReplyList: NoteReplyList,
 };
 
 export * from "./builds/text";
 export * from "./builds/repost";
 export * from "./builds/skeleton";
+export * from "./builds/thread";
 export * from "./preview/image";
 export * from "./preview/link";
 export * from "./preview/video";

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

@@ -1,15 +1,13 @@
-import { WIDGET_KIND } from "@lume/utils";
 import { NDKEvent, NDKKind } from "@nostr-dev-kit/ndk";
 import { memo } from "react";
+import { Link } from "react-router-dom";
 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) {
@@ -51,19 +49,12 @@ export const MentionNote = memo(function MentionNote({
 			</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,
-						})
-					}
+				<Link
+					to={`/events/${data.id}`}
 					className="mt-2 text-blue-500 hover:text-blue-600"
 				>
 					Show more
-				</button>
+				</Link>
 			</div>
 		</Note.Root>
 	);

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

@@ -1,67 +1,68 @@
-import { LoaderIcon } from '@lume/icons';
-import { NDKEventWithReplies } from '@lume/types';
-import { NDKSubscription } from '@nostr-dev-kit/ndk';
-import { useEffect, useState } from 'react';
-import { useArk } from '../../provider';
-import { Reply } from './builds/reply';
+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 NoteReplies({ eventId }: { eventId: string }) {
-  const ark = useArk();
-  const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
+export function NoteReplyList({
+	eventId,
+	title,
+	className,
+}: { eventId: string; title?: string; className?: string }) {
+	const ark = useArk();
+	const [data, setData] = useState<null | NDKEventWithReplies[]>(null);
 
-  useEffect(() => {
-    let sub: NDKSubscription;
-    let isCancelled = false;
+	useEffect(() => {
+		let sub: NDKSubscription;
+		let isCancelled = false;
 
-    async function fetchRepliesAndSub() {
-      const events = await ark.getThreads({ id: eventId });
-      if (!isCancelled) {
-        setData(events);
-      }
-      // subscribe for new replies
-      sub = ark.subscribe({
-        filter: {
-          '#e': [eventId],
-          since: Math.floor(Date.now() / 1000),
-        },
-        closeOnEose: false,
-        cb: (event: NDKEventWithReplies) => setData((prev) => [event, ...prev]),
-      });
-    }
+		async function fetchRepliesAndSub() {
+			const events = await ark.getThreads({ id: eventId });
+			if (!isCancelled) {
+				setData(events);
+			}
+			// subscribe for new replies
+			sub = ark.subscribe({
+				filter: {
+					"#e": [eventId],
+					since: Math.floor(Date.now() / 1000),
+				},
+				closeOnEose: false,
+				cb: (event: NDKEventWithReplies) => setData((prev) => [event, ...prev]),
+			});
+		}
 
-    fetchRepliesAndSub();
+		fetchRepliesAndSub();
 
-    return () => {
-      isCancelled = true;
-      if (sub) sub.stop();
-    };
-  }, [eventId]);
+		return () => {
+			isCancelled = true;
+			if (sub) sub.stop();
+		};
+	}, [eventId]);
 
-  if (!data) {
-    return (
-      <div className="mt-3">
-        <div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
-          <LoaderIcon className="h-5 w-5 animate-spin" />
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="mt-3 flex flex-col gap-5">
-      <h3 className="font-semibold">Replies</h3>
-      {data?.length === 0 ? (
-        <div className="mt-2 flex w-full items-center justify-center">
-          <div className="flex flex-col items-center justify-center gap-2 py-6">
-            <h3 className="text-3xl">👋</h3>
-            <p className="leading-none text-neutral-600 dark:text-neutral-400">
-              Be the first to Reply!
-            </p>
-          </div>
-        </div>
-      ) : (
-        data.map((event) => <Reply key={event.id} event={event} rootEvent={eventId} />)
-      )}
-    </div>
-  );
+	return (
+		<div className={twMerge("flex flex-col gap-5", className)}>
+			<h3 className="font-semibold">{title}</h3>
+			{!data ? (
+				<div className="flex h-16 items-center justify-center rounded-xl bg-neutral-50 p-3 dark:bg-neutral-950">
+					<LoaderIcon className="h-5 w-5 animate-spin" />
+				</div>
+			) : data.length === 0 ? (
+				<div className="flex w-full items-center justify-center">
+					<div className="flex flex-col items-center justify-center gap-2 py-6">
+						<h3 className="text-3xl">👋</h3>
+						<p className="leading-none text-neutral-600 dark:text-neutral-400">
+							Be the first to Reply!
+						</p>
+					</div>
+				</div>
+			) : (
+				data.map((event) => (
+					<Reply key={event.id} event={event} rootEvent={eventId} />
+				))
+			)}
+		</div>
+	);
 }

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

@@ -1,21 +1,21 @@
-import { ReactNode } from 'react';
-import { twMerge } from 'tailwind-merge';
+import { ReactNode } from "react";
+import { twMerge } from "tailwind-merge";
 
 export function NoteRoot({
-  children,
-  className,
+	children,
+	className,
 }: {
-  children: ReactNode;
-  className?: string;
+	children: ReactNode;
+	className?: string;
 }) {
-  return (
-    <div
-      className={twMerge(
-        'mt-3 flex h-min w-full flex-col overflow-hidden rounded-xl bg-neutral-50 px-3 dark:bg-neutral-950',
-        className
-      )}
-    >
-      {children}
-    </div>
-  );
+	return (
+		<div
+			className={twMerge(
+				"flex h-min w-full flex-col overflow-hidden rounded-xl bg-neutral-50 dark:bg-neutral-950",
+				className,
+			)}
+		>
+			{children}
+		</div>
+	);
 }

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

@@ -1,38 +1,32 @@
-import { WIDGET_KIND } from '@lume/utils';
-import { twMerge } from 'tailwind-merge';
-import { Note } from '.';
-import { useWidget } from '../../hooks/useWidget';
+import { Link } from "react-router-dom";
+import { twMerge } from "tailwind-merge";
+import { Note } from ".";
 
 export function NoteThread({
-  thread,
-  className,
+	thread,
+	className,
 }: {
-  thread: { rootEventId: string; replyEventId: string };
-  className?: string;
+	thread: { rootEventId: string; replyEventId: string };
+	className?: string;
 }) {
-  const { addWidget } = useWidget();
+	if (!thread) return null;
 
-  if (!thread) return null;
-
-  return (
-    <div className={twMerge('w-full px-3', className)}>
-      <div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
-        {thread.rootEventId ? <Note.Child eventId={thread.rootEventId} isRoot /> : null}
-        {thread.replyEventId ? <Note.Child eventId={thread.replyEventId} /> : null}
-        <button
-          type="button"
-          onClick={() =>
-            addWidget.mutate({
-              kind: WIDGET_KIND.thread,
-              title: 'Thread',
-              content: thread.rootEventId,
-            })
-          }
-          className="self-start text-blue-500 hover:text-blue-600"
-        >
-          Show full thread
-        </button>
-      </div>
-    </div>
-  );
+	return (
+		<div className={twMerge("w-full px-3", className)}>
+			<div className="flex h-min w-full flex-col gap-3 rounded-lg bg-neutral-100 p-3 dark:bg-neutral-900">
+				{thread.rootEventId ? (
+					<Note.Child eventId={thread.rootEventId} isRoot />
+				) : null}
+				{thread.replyEventId ? (
+					<Note.Child eventId={thread.replyEventId} />
+				) : null}
+				<Link
+					to={`/events/${thread?.rootEventId || thread?.replyEventId}`}
+					className="self-start text-blue-500 hover:text-blue-600"
+				>
+					Show full thread
+				</Link>
+			</div>
+		</div>
+	);
 }

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

@@ -1,173 +1,236 @@
-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 { 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";
 
 export function NoteUser({
-  pubkey,
-  time,
-  variant = 'text',
-  className,
+	pubkey,
+	time,
+	variant = "text",
+	className,
 }: {
-  pubkey: string;
-  time: number;
-  variant?: 'text' | 'repost' | 'mention';
-  className?: string;
+	pubkey: string;
+	time: number;
+	variant?: "text" | "repost" | "mention" | "thread";
+	className?: string;
 }) {
-  const createdAt = useMemo(() => formatCreatedAt(time), [time]);
-  const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
-  const fallbackAvatar = useMemo(
-    () => `data:image/svg+xml;utf8,${encodeURIComponent(minidenticon(pubkey, 90, 50))}`,
-    [pubkey]
-  );
+	const createdAt = useMemo(() => formatCreatedAt(time), [time]);
+	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);
+	const { isLoading, user } = useProfile(pubkey);
 
-  if (variant === 'mention') {
-    if (isLoading) {
-      return (
-        <div className="flex items-center gap-2">
-          <Avatar.Root className="shrink-0">
-            <Avatar.Image
-              src={fallbackAvatar}
-              alt={pubkey}
-              className="h-6 w-6 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>
-      );
-    }
+	if (variant === "mention") {
+		if (isLoading) {
+			return (
+				<div className="flex items-center gap-2">
+					<Avatar.Root className="shrink-0">
+						<Avatar.Image
+							src={fallbackAvatar}
+							alt={pubkey}
+							className="h-6 w-6 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={pubkey}
-            loading="lazy"
-            decoding="async"
-            className="h-6 w-6 rounded-md"
-          />
-          <Avatar.Fallback delayMs={300}>
-            <img
-              src={fallbackAvatar}
-              alt={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>
-    );
-  }
+		return (
+			<div className="flex h-6 items-center gap-2">
+				<Avatar.Root className="shrink-0">
+					<Avatar.Image
+						src={user?.picture || user?.image}
+						alt={pubkey}
+						loading="lazy"
+						decoding="async"
+						className="h-6 w-6 rounded-md"
+					/>
+					<Avatar.Fallback delayMs={300}>
+						<img
+							src={fallbackAvatar}
+							alt={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-3', className)}>
-          <div className="inline-flex 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 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>
-      );
-    }
+	if (variant === "repost") {
+		if (isLoading) {
+			return (
+				<div className={twMerge("flex gap-3", className)}>
+					<div className="inline-flex 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 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', className)}>
-        <div className="inline-flex 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={pubkey}
-              loading="lazy"
-              decoding="async"
-              className="h-6 w-6 rounded object-cover"
-            />
-            <Avatar.Fallback delayMs={300}>
-              <img
-                src={fallbackAvatar}
-                alt={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>
-    );
-  }
+		return (
+			<div className={twMerge("flex gap-2", className)}>
+				<div className="inline-flex 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={pubkey}
+							loading="lazy"
+							decoding="async"
+							className="h-6 w-6 rounded object-cover"
+						/>
+						<Avatar.Fallback delayMs={300}>
+							<img
+								src={fallbackAvatar}
+								alt={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 (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={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>
-    );
-  }
+	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={twMerge('flex items-center gap-3', className)}>
-      <Avatar.Root className="h-9 w-9 shrink-0">
-        <Avatar.Image
-          src={user?.picture || user?.image}
-          alt={pubkey}
-          loading="lazy"
-          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={300}>
-          <img
-            src={fallbackAvatar}
-            alt={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.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>
-  );
+		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={pubkey}
+						loading="lazy"
+						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={300}>
+						<img
+							src={fallbackAvatar}
+							alt={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={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={pubkey}
+					loading="lazy"
+					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={300}>
+					<img
+						src={fallbackAvatar}
+						alt={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.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>
+	);
 }