add comments fetching and filtering to CommentCard and CommentsComponent

components/CommentCard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useProfile } from "nostr-react";
+import { useProfile, useNostrEvents } from "nostr-react";
 import {
   nip19,
 } from "nostr-tools";
@@ -41,6 +41,14 @@ const NoteCard: React.FC<CommentCardProps> = ({ pubkey, text, eventId, tags, eve
   const { data: userData } = useProfile({
     pubkey,
   });
+  
+  // Fetch comments related to this event
+  const { events: commentEvents } = useNostrEvents({
+    filter: {
+      kinds: [1],
+      '#e': [eventId],
+    },
+  });
 
   const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey);
   const imageSrc = text.match(/https?:\/\/[^ ]*\.(png|jpg|gif|jpeg)/g);
@@ -111,6 +119,29 @@ const NoteCard: React.FC<CommentCardProps> = ({ pubkey, text, eventId, tags, eve
             </div>
             <ViewRawButton event={event} />
           </div>
+          
+          {/* Comments section */}
+          {commentEvents && commentEvents.length > 0 && (
+            <div className="mt-4">
+              {/* <h3 className="text-lg font-medium mb-2">Comments ({commentEvents.length})</h3> */}
+              <div className="space-y-3">
+                {commentEvents.map((commentEvent) => (
+                  // <div key={commentEvent.id} className="border p-3 rounded-md">
+                  //   <div className="flex items-center mb-2">
+                  //     <span className="text-sm font-medium">
+                  //       {nip19.npubEncode(commentEvent.pubkey).substring(0, 10)}...
+                  //     </span>
+                  //     <span className="text-xs ml-2 text-gray-500">
+                  //       {new Date(commentEvent.created_at * 1000).toLocaleString()}
+                  //     </span>
+                  //   </div>
+                  //   <p className="text-sm">{commentEvent.content}</p>
+                  // </div>
+                  <NoteCard key={commentEvent.id} pubkey={commentEvent.pubkey} text={commentEvent.content} eventId={commentEvent.id} tags={commentEvent.tags} event={commentEvent} />
+                ))}
+              </div>
+            </div>
+          )}
         </CardContent>
         <CardFooter>
           <small className="text-muted">{createdAt.toLocaleString()}</small>

components/CommentsCompontent.tsx

@@ -19,10 +19,16 @@ const CommentsCompontent: React.FC<CommentsCompontentProps> = ({ pubkey, event }
         },
     });
 
+    // filter out all events with more then 1 "e" tag. other tags are ok
+    // this shows only the top level comments
+    let filteredEvents = events.filter((event) => {
+        return event.tags.filter((tag) => tag[0] === 'e').length === 1;
+    });
+
     return (
         <>
             <h1 className='text-xl'>Comments</h1>
-            {events.map((event) => (
+            {filteredEvents.map((event) => (
                 <div key={event.id} className="py-6">
                     <CommentCard key={event.id} pubkey={event.pubkey} text={event.content} eventId={event.id} tags={event.tags} event={event} />
                 </div>