Img full/thumb toggling. Small tweaks

web/static/index.css

@@ -192,9 +192,9 @@ body {
 }
 
 .post-img {
+    cursor: pointer;
     height: auto;
-    max-width: 400px;
+    max-width: 100%;
-    margin-bottom: 10px;
 }
 
 .post-body {

web/static/thread.js

@@ -1,34 +1,51 @@
-const posts = Array.from(document.querySelectorAll("article"));
+function insertHeaderReplies() {
+    const posts = Array.from(document.querySelectorAll("article"));
+    const replies = {};
 
-const replies = {};
+    for (const post of posts) {
+        const postId = +post.id.split("-")[1];
+        const postBody = post.querySelector("p").textContent;
 
-for (const post of posts) {
+        const replyLinkIds = [...postBody.matchAll(/(?:^|\s)>>(\d+)\b/g)].map(m => parseInt(m[1]));
-    const postId = +post.id.split("-")[1];
+        for (const replyLinkId of replyLinkIds) {
-    const postBody = post.querySelector("p").textContent;
+            replies[replyLinkId] = replies[replyLinkId] ?
+                replies[replyLinkId].add(postId) :
+                replies[replyLinkId] = new Set([postId]);
+        }
+    }
 
-    const replyLinkIds = [...postBody.matchAll(/(?:^|\s)>>(\d+)\b/g)].map(m => parseInt(m[1]));
+    for (const postId in replies) {
-    for (const replyLinkId of replyLinkIds) {
+        const post = $(`post-${postId}`);
-        replies[replyLinkId] = replies[replyLinkId] ?
+        if (!post) break;
-            replies[replyLinkId].add(postId) :
+
-            replies[replyLinkId] = new Set([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);
+        }
     }
 }
 
-for (const postId in replies) {
+function togglePostImage(img) {
-    const post = $(`post-${postId}`);
+    const filename = img.src.split("/").at(-1);
-    const postRepliesContainer = post.querySelector(".post-replies");
+    if (img.classList.contains("post-img-full")) {
-
+        img.classList.remove("post-img-full");
-    const replyIds = Array.from(replies[postId]);
+        img.src = "/static/img/posts/thumb/" + filename;
-    for (const replyId of replyIds) {
+    }
-        const replyLink = document.createElement("a");
+    else {
-        replyLink.textContent = `>>${replyId}`;
+        img.classList.add("post-img-full");
-        replyLink.classList.add("reply-link-header");
+        img.src = "/static/img/posts/full/" + filename;
-        replyLink.setAttribute("href", `#post-${replyId}`);
-
-        replyLink.onmouseover = (e) => highlightPost(+replyId, e);
-        replyLink.onmouseleave = (e) => highlightPost(+replyId, e, false);
-        replyLink.onclick = onReplyLinkClick;
-
-        postRepliesContainer.append(replyLink);
     }
 }
+
+insertHeaderReplies()

web/views/thread.templ

@@ -20,7 +20,13 @@ templ ThreadPost(post database.Post, thread *database.Thread) {
 	<article id={ fmt.Sprintf("post-%d", post.Id) } class={ getPostClass(isOp) }>
 		if post.MediaPath != "" {
 			<div class="post-img-container">
-				<img loading="lazy" src={ fmt.Sprintf("/static/img/posts/thumb/%s", post.MediaPath) } class="post-img"/>
+				<img
+					onclick="togglePostImage(this)"
+					loading="lazy"
+					src={ fmt.Sprintf("/static/img/posts/thumb/%s",
+			post.MediaPath) }
+					class="post-img"
+				/>
 			</div>
 		}
 		<header class="post-header">
@@ -84,7 +90,11 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 		</div>
 		<div class="thread">
 			@ThreadPost(posts[0], &thread)
-			<div hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", board.Slug, thread.Id) } hx-trigger="refreshPosts from:body">
+			<div
+				hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", board.Slug, thread.Id) }
+				hx-trigger="refreshPosts from:body"
+				_="on htmx:afterSwap call insertHeaderReplies()"
+			>
 				@ThreadPosts(posts[1:])
 			</div>
 		</div>