Implement replies in post header

web/static/index.css

@@ -146,12 +146,13 @@ body {
 
 .thread-subject {
     font-weight: bold;
-    color: #b294bb;
+    color: #0F0C5D;
     margin-right: 5px;
 }
 
 .post-op {
     margin-bottom: 10px;
+    font-size: 14px;
 }
 
 .post {
@@ -159,8 +160,9 @@ body {
     margin: 5x;
     padding: 10px;
     background-color: #D6DAF0;
-    border: 1px solid #282a2e;
+    border: 1px solid #B7C5D9;
     margin-bottom: 10px;
+    font-size: 14px;
 }
 
 .post-highlighted {
@@ -211,6 +213,17 @@ body {
     cursor: pointer;
 }
 
+.reply-link-header {
+    color: rgb(52, 52, 92);
+    text-decoration: underline;
+    cursor: pointer;
+    margin-left: 8px;
+}
+
+.reply-link-header:hover {
+    color: #D00;
+}
+
 /* GENERAL LAYOUT */
 
 .container {

web/static/thread.js

@@ -0,0 +1,34 @@
+const posts = Array.from(document.querySelectorAll("article"));
+
+const replies = {};
+
+for (const post of posts) {
+    const postId = +post.id.split("-")[1];
+    const postBody = post.querySelector("p").textContent;
+
+    const replyLinkIds = [...postBody.matchAll(/(?:^|\s)>>(\d+)\b/g)].map(m => parseInt(m[1]));
+    for (const replyLinkId of replyLinkIds) {
+        replies[replyLinkId] = replies[replyLinkId] ?
+            replies[replyLinkId].add(postId) :
+            replies[replyLinkId] = new Set([postId]);
+    }
+}
+
+for (const postId in replies) {
+    const post = $(`post-${postId}`);
+    const postRepliesContainer = post.querySelector(".post-replies");
+
+    const replyIds = Array.from(replies[postId]);
+    for (const replyId of replyIds) {
+        const replyLink = document.createElement("a");
+        replyLink.textContent = `>>${replyId}`;
+        replyLink.classList.add("reply-link-header");
+        replyLink.setAttribute("href", `#post-${replyId}`);
+
+        replyLink.onmouseover = (e) => highlightPost(+replyId, e);
+        replyLink.onmouseleave = (e) => highlightPost(+replyId, e, false);
+        replyLink.onclick = onReplyLinkClick;
+
+        postRepliesContainer.append(replyLink);
+    }
+}