added relation between post replyid and id so we can show and link replies on the reply in the thread

app/routes/threads/$threadId.jsx

@@ -56,7 +56,11 @@ export async function loader({ params }) {
       id: parseInt(threadId),
     },
     include: {
-      posts: true,
+      posts: {
+        include: {
+          replies: true,
+        },
+      },
     },
   });
 
@@ -80,15 +84,26 @@ export default function Thread() {
         <ul className="flex flex-col m-8 ">
           {data.posts.map(post => 
             <li id={`${post.id}`} className="rounded shadow p-4 m-4 odd:bg-ctp-mantle even:bg-ctp-base" key={post.id}>
-              <span id={`${post.id}`}>Reply id: <strong>{post.id}</strong> Replied at: <strong>{post.createdAt} </strong></span>
-              <Link onClick={(event) => {
-                event.preventDefault();
-                document.getElementById(`bottom`).scrollIntoView(true);
-                setReplying(post.id);
-                }} to={`#bottom`} 
-                >Reply
-              </Link>
-              <br />
+              <div className="flex">
+                <span>Reply id: <strong>{post.id}</strong> Replied at: <strong>{post.createdAt} </strong></span>
+                <Link className="mx-2 text-ctp-rosewater hover:text-ctp-maroon hover:underline" onClick={(event) => {
+                  event.preventDefault();
+                  document.getElementById(`bottom`).scrollIntoView(true);
+                  setReplying(post.id);
+                  }} to={`#bottom`} 
+                  >Reply
+                </Link>
+                <ul className="flex flex-wrap space-x-1">
+                  {post?.replies?.map(reply => 
+                    <li key={reply.id}>
+                      <Link onClick={event => {
+                        event.preventDefault();
+                        document.getElementById(`${reply.id}`).scrollIntoView(true);
+                      }} className="text-ctp-teal hover:text-ctp-sky hover:underline" to={`#${reply.id}`}>{reply.id}</Link>
+                    </li>    
+                  )}
+                </ul>
+              </div>
               {post.replyingTo ? <Link onClick={event => {
                 event.preventDefault();
                 document.getElementById(`${post.replyingTo}`).scrollIntoView(true);

prisma/schema.prisma

@@ -29,6 +29,8 @@ model Post {
   comment     String
   imageName   String?
   replyingTo  Int?
+  Reply       Post?     @relation("d", fields: [replyingTo], references: [id])
+  replies     Post[]    @relation("d")
 
   post        Thread    @relation(fields: [postId], references: [id])
   postId      Int