refactor(ark): rename widget to column

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>
+	);
 }