update single note screen

src/shared/notes/replies/item.tsx

@@ -5,25 +5,26 @@ import { NDKEventWithReplies } from '@utils/types';
 
 export function Reply({ event, root }: { event: NDKEventWithReplies; root?: string }) {
   return (
-    <div className="h-min w-full py-1.5">
-      <div className="relative overflow-hidden rounded-xl bg-white/10 px-3 pt-3">
+    <div className="relative h-min w-full">
+      {event?.replies?.length > 0 && (
+        <div className="absolute -left-3 top-0 h-[calc(100%-1.2rem)] w-px bg-gradient-to-t from-fuchsia-200 via-red-200 to-orange-300" />
+      )}
+      <div className="relative z-10">
         <div className="relative flex flex-col">
           <User pubkey={event.pubkey} time={event.created_at} />
-          <div className="relative z-20 -mt-6 flex items-start gap-3">
+          <div className="-mt-6 flex items-start gap-3">
             <div className="w-11 shrink-0" />
             <div className="flex-1">
               <TextNote event={event} />
               <NoteActions id={event.id} pubkey={event.pubkey} root={root} />
             </div>
           </div>
-          <div>
-            {event.replies ? (
-              event.replies.map((sub) => <SubReply key={sub.id} event={sub} />)
-            ) : (
-              <div className="pb-3" />
-            )}
-          </div>
         </div>
+        {event.replies ? (
+          event.replies.map((sub) => <SubReply key={sub.id} event={sub} />)
+        ) : (
+          <div className="pb-3" />
+        )}
       </div>
     </div>
   );

src/shared/notes/replies/list.tsx

@@ -8,42 +8,51 @@ import { NDKEventWithReplies } from '@utils/types';
 
 export function RepliesList({ id }: { id: string }) {
   const { ndk } = useNDK();
-  const { status, data } = useQuery(['note-replies', id], async () => {
-    const events = await ndk.fetchEvents({
-      kinds: [1],
-      '#e': [id],
-    });
+  const { status, data } = useQuery(
+    ['note-replies', id],
+    async () => {
+      try {
+        const events = await ndk.fetchEvents({
+          kinds: [1],
+          '#e': [id],
+        });
 
-    const array = [...events] as unknown as NDKEventWithReplies[];
+        const array = [...events] as unknown as NDKEventWithReplies[];
 
-    if (array.length > 0) {
-      const replies = new Set();
-      array.forEach((event) => {
-        const tags = event.tags.filter((el) => el[0] === 'e' && el[1] !== id);
-        if (tags.length > 0) {
-          tags.forEach((tag) => {
-            const rootIndex = array.findIndex((el) => el.id === tag[1]);
-            if (rootIndex) {
-              const rootEvent = array[rootIndex];
-              if (rootEvent.replies) {
-                rootEvent.replies.push(event);
-              } else {
-                rootEvent.replies = [event];
-              }
-              replies.add(event.id);
+        if (array.length > 0) {
+          const replies = new Set();
+          array.forEach((event) => {
+            const tags = event.tags.filter((el) => el[0] === 'e' && el[1] !== id);
+            if (tags.length > 0) {
+              tags.forEach((tag) => {
+                const rootIndex = array.findIndex((el) => el.id === tag[1]);
+                if (rootIndex !== -1) {
+                  const rootEvent = array[rootIndex];
+                  if (rootEvent && rootEvent.replies) {
+                    rootEvent.replies.push(event);
+                  } else {
+                    rootEvent.replies = [event];
+                  }
+                  replies.add(event.id);
+                }
+              });
             }
           });
+          const cleanEvents = array.filter((ev) => !replies.has(ev.id));
+          return cleanEvents;
         }
-      });
-      const cleanEvents = array.filter((ev) => !replies.has(ev.id));
-      return cleanEvents;
-    }
-    return array;
-  });
+
+        return array;
+      } catch (e) {
+        throw new Error(e);
+      }
+    },
+    { enabled: !!ndk }
+  );
 
   if (status === 'loading') {
     return (
-      <div className="mt-3">
+      <div className="mt-5 pb-10">
         <div className="flex flex-col">
           <div className="rounded-xl bg-white/10 px-3 py-3">
             <NoteSkeleton />
@@ -53,19 +62,29 @@ export function RepliesList({ id }: { id: string }) {
     );
   }
 
-  return (
-    <div className="mt-3 pb-10">
-      <div className="mb-2">
-        <h5 className="text-lg font-semibold text-white">{data?.length || 0} replies</h5>
+  if (status === 'error') {
+    return (
+      <div className="mt-5 pb-10">
+        <div className="flex flex-col">
+          <div className="rounded-xl bg-white/10 px-3 py-3">
+            <p>Error: failed to get replies</p>
+          </div>
+        </div>
       </div>
-      <div className="flex flex-col">
+    );
+  }
+
+  return (
+    <div className="mt-5 pb-10">
+      <h5 className="mb-5 text-lg font-semibold text-white">
+        {data?.length || 0} replies
+      </h5>
+      <div className="flex flex-col gap-3">
         {data?.length === 0 ? (
-          <div className="px=3">
-            <div className="flex w-full items-center justify-center rounded-xl bg-white/10">
-              <div className="flex flex-col items-center justify-center gap-2 py-6">
-                <h3 className="text-3xl">👋</h3>
-                <p className="leading-none text-white/50">Share your thought on it...</p>
-              </div>
+          <div className="mt-2 flex w-full items-center justify-center rounded-xl bg-white/10">
+            <div className="flex flex-col items-center justify-center gap-2 py-6">
+              <h3 className="text-3xl">👋</h3>
+              <p className="leading-none text-white/50">Share your thought on it...</p>
             </div>
           </div>
         ) : (

src/shared/notes/replies/sub.tsx

@@ -5,9 +5,9 @@ import { User } from '@shared/user';
 
 export function SubReply({ event }: { event: NDKEvent }) {
   return (
-    <div className="relative mb-3 mt-5 flex flex-col">
+    <div className="relative z-10 mb-3 mt-5 flex flex-col">
       <User pubkey={event.pubkey} time={event.created_at} />
-      <div className="relative z-20 -mt-6 flex items-start gap-3">
+      <div className="-mt-6 flex items-start gap-3">
         <div className="w-11 shrink-0" />
         <div className="flex-1">
           <TextNote event={event} />