get adding threads working

web/static/index.css

@@ -54,21 +54,26 @@ body {
 .new-thread-container {
     width: max-content;
     margin: auto;
+    margin-top: 16px;
 }
 
-#threadCatalog {
-    margin: 0 2rem;
+#catalog {
+    display: grid;
+    grid-template-columns: auto auto auto auto;
+    gap: 1rem;
+    margin: 2rem;
 }
 
 .thread-catalog-post {
     padding: 10px;
     border: 2px solid rgba(111, 111, 111, 0.34);
     min-width: 140px;
-    max-width: 140px;
+    max-width: 200px;
     max-height: 192px;
 }
 
 .thread-catalog-post h1 {
+    font-size: 14px;
     color: #0F0C5D;
     font-weight: bold;
 }
@@ -93,6 +98,11 @@ body {
     color: #ff0000
 }
 
+#newThreadForm button {
+    display: block;
+    margin-left: auto;
+}
+
 .new-thread-form-field {}
 
 .new-thread-form-field th {

web/views/board.templ

@@ -1,43 +1,48 @@
 package views
 
 import (
-"fmt"
-database "github.com/dominicf2001/comfychan/internal/database"
-"github.com/dominicf2001/comfychan/web/views/shared"
+	"fmt"
+	database "github.com/dominicf2001/comfychan/internal/database"
+	"github.com/dominicf2001/comfychan/web/views/shared"
 )
 
-templ NewThreadForm() {
-<form style="display: none;" id="newThreadForm" style="display: ;">
-	<div>
+templ NewThreadForm(board database.Board) {
+	<form
+		style="display: none;"
+		id="newThreadForm"
+		hx-swap="none"
+		hx-post={ fmt.Sprintf("/boards/%d/threads", board.Id) }
+		_="on htmx:afterRequest hide me then show #newThreadBtn then trigger refreshThreads on body"
+	>
 		<table>
 			<tbody>
 				<tr class="new-thread-form-field">
 					<th>Subject</th>
-					<td><input /></td>
+					<td><input name="subject"/></td>
 				</tr>
 				<tr class="new-thread-form-field">
 					<th>Comment</th>
-					<td><textarea></textarea></td>
+					<td><textarea name="body" required></textarea></td>
 				</tr>
 			</tbody>
 		</table>
-	</div>
-</form>
+		<button type="submit">Submit</button>
+	</form>
 }
 
 templ Board(board database.Board) {
-@shared.Layout() {
-<header class="board-header">
-	<img src="/static/img/banner-comfy.png" />
-	<h1>
-		{ fmt.Sprintf("/%s/ - %s", board.Slug, board.Name) }
-	</h1>
-	<p>{ board.Tag }</p>
-</header>
-<div class="new-thread-container">
-	<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
-	@NewThreadForm()
-</div>
-<div hx-get={ fmt.Sprintf("/hx/%d/posts/grid", board.Id) } hx-trigger="load" id="threadCatalog"></div>
-}
+	@shared.Layout() {
+		<header class="board-header">
+			<img src="/static/img/banner-comfy.png"/>
+			<h1>
+				{ fmt.Sprintf("/%s/ - %s", board.Slug, board.Name) }
+			</h1>
+			<p>{ board.Tag }</p>
+		</header>
+		<div class="new-thread-container">
+			<button _="on click hide me then show #newThreadForm" id="newThreadBtn">[New Thread]</button>
+			@NewThreadForm(board)
+		</div>
+		<div hx-get={ fmt.Sprintf("/hx/boards/%d/catalog", board.Id) } hx-trigger="load, refreshThreads from:body"></div>
+	}
 }

web/views/posts.templ

@@ -3,15 +3,17 @@ package views
 import "github.com/dominicf2001/comfychan/internal/database"
 
 type ThreadGridBoxViewModel struct {
-Thread database.Thread
-Posts []database.Post
+	Thread database.Thread
+	Posts  []database.Post
 }
 
-templ PostsGrid(vms []ThreadGridBoxViewModel) {
-for _, vm := range vms {
-<div class="thread-catalog-post">
-	<h1>{ vm.Thread.Subject }</h1>
-	<p>{ vm.Posts[0].Body }</p>
-</div>
-}
+templ PostsCatalog(vms []ThreadGridBoxViewModel) {
+	<div id="catalog">
+		for _, vm := range vms {
+			<div class="thread-catalog-post">
+				<h1>{ vm.Thread.Subject }</h1>
+				<p>{ vm.Posts[0].Body }</p>
+			</div>
+		}
+	</div>
 }