add thread metadata

client/src/components/Thread/Thread.tsx

@@ -34,6 +34,18 @@ const Thread = () => {
 
     const uniqEvents = events.length > 0 ? uniqBy(events, "id") : [];
 
+    const getMetadataEvent = (event: Event) => {
+        const metadataEvent = uniqEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
+        if (metadataEvent) {
+          return metadataEvent;
+        }
+        return null;
+    }
+
+    const countReplies = (event: Event) => {
+        return uniqEvents.filter(e => e.tags.some(tag => tag[0] === 'e' && tag[1] === event.id)).length;
+    }
+
     if (!uniqEvents[0]) {
         return (
             <main className="bg-black text-white min-h-screen">
@@ -61,14 +73,17 @@ const Thread = () => {
         <>
             <main className="bg-black text-white min-h-screen">
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
-                    <PostCard event={uniqEvents[0]} metadata={null} replyCount={0}/>
+                    <PostCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])}/>
                     <div className="col-span-full flex justify-center space-x-36    ">
                         <DocumentTextIcon className="h-5 w-5 text-gray-200" />
                         <FolderPlusIcon className="h-5 w-5 text-gray-200" />
                     </div>
                     <div className="col-span-full h-0.5 bg-neutral-900"></div>  {/* This is the white line separator */}
-                    {uniqEvents.slice(1).sort((a, b) => b.created_at - a.created_at).map((event, index) => (
+                    {uniqEvents
-                        <PostCard key={index} event={event} metadata={null} replyCount={0}/>
+                    .slice(1)
+                    .filter(event => event.kind === 1)
+                    .sort((a, b) => b.created_at - a.created_at).map((event, index) => (
+                        <PostCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)}/>
                     ))}
                 </div>
             </main>

client/src/utils/subscriptions.ts

@@ -14,7 +14,6 @@ export const subGlobalFeed = (onEvent: SubCallback) => {
     const now = Math.floor(Date.now() * 0.001);
     const pubkeys = new Set<string>();
     const notes = new Set<string>();
-    const replies = new Set<string>();
     const prefix = Math.floor(16 / 4); //  4 bits in each '0' character
     sub({ // get past events
       cb: (evt, relay) => {
@@ -113,8 +112,12 @@ export const subNote = (
   onEvent: SubCallback,
 ) => {
   unsubAll();
+  const pubkeys = new Set<string>();
   sub({
-    cb: onEvent,
+    cb: (evt, relay) => {
+      pubkeys.add(evt.pubkey);
+      onEvent(evt, relay);
+    },
     filter: {
       ids: [eventId],
       kinds: [1],
@@ -124,13 +127,15 @@ export const subNote = (
   });
 
   const replies = new Set<string>();
-
   const onReply = (evt: Event, relay: string) => {
     replies.add(evt.id)
     onEvent(evt, relay);
     unsubAll();
     sub({
-      cb: onEvent,
+      cb: (evt, relay) => {
+        pubkeys.add(evt.pubkey);
+        onEvent(evt, relay);
+      },
       filter: {
         '#e': Array.from(replies),
         kinds: [1],
@@ -139,6 +144,20 @@ export const subNote = (
     });
   };
 
+  setTimeout(() => {
+    // get profile info
+    sub({
+      cb: onEvent,
+      filter: {
+        authors: Array.from(pubkeys),
+        kinds: [0],
+        limit: pubkeys.size,
+      },
+      unsub: true,
+    });
+    pubkeys.clear();
+  }, 2000);
+
   replies.add(eventId);
   setTimeout(() => {
     sub({