reply tings

client/src/components/Home.tsx

@@ -23,7 +23,7 @@ const Home = () => {
   
   const filteredAndSortedEvents = uniqEvents
     .filter(event => 
-      getPow(event.id) > 3 &&
+      getPow(event.id) > 20 &&
       event.kind === 1 &&
       !event.tags.some(tag => tag[0] === 'p')
     )

client/src/components/Thread/ReplyCard.tsx

@@ -0,0 +1,126 @@
+import CardContainer from '../PostCard/CardContainer'
+import { FolderIcon } from '@heroicons/react/24/outline';
+import { parseContent } from '../../utils/content';
+import { Event } from 'nostr-tools';
+import { nip19 } from 'nostr-tools';
+import { useEffect, useState } from 'react';
+import { subNote } from '../../utils/subscriptions';
+import { getMetadata, uniqBy } from '../../utils/utils';
+
+const colorCombos = [
+    'from-red-400 to-yellow-500',
+    'from-green-400 to-blue-500',
+    'from-purple-400 to-pink-500',
+    'from-yellow-400 to-orange-500',
+    'from-indigo-400 to-purple-500',
+    'from-pink-400 to-red-500',
+    'from-blue-400 to-indigo-500',
+    'from-orange-400 to-red-500',
+    'from-teal-400 to-green-500',
+    'from-cyan-400 to-teal-500',
+    'from-lime-400 to-green-500',
+    'from-amber-400 to-orange-500',
+    'from-rose-400 to-pink-500',
+    'from-violet-400 to-purple-500',
+    'from-sky-400 to-cyan-500'
+];
+
+const getColorFromHash = (id: string, colors: string[]): string => {
+    // Create a simple hash from the event.id
+    let hash = 0;
+    for (let i = 0; i < id.length; i++) {
+        hash = (hash << 5) - hash + id.charCodeAt(i);
+    }
+
+    // Use the hash to pick a color from the colors array
+    const index = Math.abs(hash) % colors.length;
+    return colors[index];
+};
+
+const timeAgo = (unixTime: number) => {
+    const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
+
+    if (seconds < 60) return `now`;
+
+    const minutes = Math.floor(seconds / 60);
+    if (minutes < 60) return `${minutes}m`;
+
+    const hours = Math.floor(minutes / 60);
+    if (hours < 24) return `${hours}h`;
+
+    const days = Math.floor(hours / 24);
+    if (days < 7) return `${days}d`;
+
+    const weeks = Math.floor(days / 7);
+    return `${weeks}w`;
+};
+
+const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, metadata: Event | null, replyCount: number, repliedTo: Event[] }) => {
+    const { comment, file } = parseContent(event);
+    const colorCombo = getColorFromHash(event.pubkey, colorCombos);
+
+    let metadataParsed = null;
+    if (metadata !== null) {
+        metadataParsed = getMetadata(metadata);
+    }
+
+    // const replyPubkeys = event.tags.filter(tag => tag[0] === 'p');
+
+    // const getMetadataEvent = (event: Event) => {
+    //     const metadataEvent = uniqEvents.find(e => e.pubkey === event.pubkey && e.kind === 0);
+    //     if (metadataEvent) {
+    //         return metadataEvent;
+    //     }
+    //     return null;
+    // }
+
+    return (
+        <>
+            <CardContainer>
+                <a href={`/thread/${nip19.noteEncode(event.id)}`}>
+                    <div className="flex flex-col">
+                        <div className="flex justify-between items-center">
+                            <div className="flex items-center">
+                                {metadataParsed ?
+                                    <>
+                                        <img className={`h-8 w-8 rounded-full`} src={metadataParsed.picture} />
+                                        <div className="ml-2 text-md font-semibold">{metadataParsed.name}</div>
+                                    </>
+                                    :
+                                    <>
+                                        <div className={`h-8 w-8 bg-gradient-to-r ${colorCombo} rounded-full`} />
+                                        <div className="ml-2 text-md font-semibold">Anonymous</div>
+                                    </>
+                                }
+                            </div>
+                            <div className="flex items-center ml-auto">
+                                <div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
+                                <FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
+                                <span className="text-xs text-gray-500">{replyCount}</span>
+                            </div>
+                        </div>
+                        <div className="flex items-center my-1" >
+                            <span className="text-xs text-gray-500">Reply to: </span>
+                            {uniqBy(repliedTo, 'pubkey').map((event, index) => (
+                                <img className={`h-5 w-5 rounded-full`} src={getMetadata(event).picture} />
+                            ))}
+                        </div>
+                        <div className="mr-2 flex flex-col break-words">
+                            {comment}
+                        </div>
+                        {file !== "" && (
+                            <div className="file">
+                                <img
+                                    src={file}
+                                    loading="lazy"
+                                />
+                            </div>
+                        )}
+                    </div>
+                </a>
+            </CardContainer>
+        </>
+    );
+};
+
+export default ReplyCard;

client/src/components/Thread/Thread.tsx

@@ -11,6 +11,7 @@ import { generatePrivateKey, getPublicKey, finishEvent, relayInit } from 'nostr-
 import { minePow } from '../../utils/mine';
 import { publish } from '../../utils/relays';
 import ThreadPost from './ThreadPost';
+import ReplyCard from './ReplyCard';
 
 
 const difficulty = 20
@@ -23,8 +24,6 @@ const Thread = () => {
     const [showForm, setShowForm] = useState(false);
     const [postType, setPostType] = useState("");
 
-
-
     // Define your callback function for subGlobalFeed
     const onEvent = (event: Event, relay: string) => {
         setEvents((prevEvents) => [...prevEvents, event]);
@@ -80,6 +79,10 @@ const Thread = () => {
         return uniqEvents.filter(e => e.tags.some(tag => tag[0] === 'e' && tag[1] === event.id)).length;
     }
 
+    const repliedList = (event: Event): Event[] => {
+        return uniqEvents.filter(e => event.tags.some(tag => tag[0] === 'p' && tag[1] === e.pubkey) && e.kind === 0);
+    }
+
     if (!uniqEvents[0]) {
         return (
             <>
@@ -132,8 +135,8 @@ const Thread = () => {
                     {uniqEvents
                         .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)} />
+                        .sort((a, b) => a.created_at - b.created_at).map((event, index) => (
+                            <ReplyCard key={index} event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} repliedTo={repliedList(event)}/>
                         ))}
                 </div>
             </main>

client/src/components/Thread/ThreadPost.tsx

@@ -8,13 +8,12 @@ import NostrImg from '../../utils/ImgUpload';
 import { nip19 } from 'nostr-tools';
 
 
-const difficulty = 5
+const difficulty = 25
 
 const ThreadPost = ({ state, type }: { state: Boolean, type: String }) => {
     const { id} = useParams();
     const [comment, setComment] = useState("");
     const [file, setFile] = useState("");
-    const [tags, setTags] = useState([['']]);
 
     let decodeResult = nip19.decode(id as string);
 
@@ -23,6 +22,7 @@ const ThreadPost = ({ state, type }: { state: Boolean, type: String }) => {
         let sk = generatePrivateKey();
         let id = decodeResult.data as string
 
+        let tags = []; 
         if (type === 'r') {
             tags.push(["e", id as string])
         } else if (type === 'q') {