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,8 +1,8 @@
-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) {
-
-for (const post of posts) {
         const postId = +post.id.split("-")[1];
         const postBody = post.querySelector("p").textContent;
 
@@ -12,10 +12,12 @@ for (const post of posts) {
                 replies[replyLinkId].add(postId) :
                 replies[replyLinkId] = new Set([postId]);
         }
-}
+    }
 
-for (const postId in replies) {
+    for (const postId in replies) {
         const post = $(`post-${postId}`);
+        if (!post) break;
+
         const postRepliesContainer = post.querySelector(".post-replies");
 
         const replyIds = Array.from(replies[postId]);
@@ -31,4 +33,19 @@ for (const postId in replies) {
 
             postRepliesContainer.append(replyLink);
         }
+    }
 }
+
+function togglePostImage(img) {
+    const filename = img.src.split("/").at(-1);
+    if (img.classList.contains("post-img-full")) {
+        img.classList.remove("post-img-full");
+        img.src = "/static/img/posts/thumb/" + filename;
+    }
+    else {
+        img.classList.add("post-img-full");
+        img.src = "/static/img/posts/full/" + filename;
+    }
+}
+
+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>