Implement client sorting and pinning

web/main.go

@@ -430,6 +430,7 @@ func main() {
 				IpCount:    len(uniqueIpHashes),
 				Pinned:     thread.Pinned,
 				Locked:     thread.Locked,
+				BumpedAt:   thread.BumpedAt,
 			})
 		}
 

web/static/index.js

@@ -71,7 +71,7 @@ function highlightPost(postId, e, status = true) {
 }
 
 function resizeCatalogPreviewImgs() {
-    const value = $("selectSortBy").value;
+    const value = $("selectResize").value;
     const postsImages = Array.from(document.querySelectorAll(".catalog-preview img"));
     for (const postImage of postsImages) {
         switch (value) {
@@ -105,6 +105,25 @@ function applyCatalogSearch() {
     }
 }
 
+function applyCatalogSort(desc = true) {
+    const sortBy = $("selectSortBy").value;
+
+    const catalog = document.getElementById('catalog');
+    const previews = Array.from(catalog.children);
+
+    previews.sort((a, b) => {
+        const pinDiff = (+b.dataset.pinned) - (+a.dataset.pinned);
+        if (pinDiff !== 0) return pinDiff;
+
+        const bumpDiff = (+a.dataset[sortBy]) - (+b.dataset[sortBy]);
+        return desc ? -bumpDiff : bumpDiff;
+    });
+
+    const frag = document.createDocumentFragment();
+    previews.forEach(el => frag.appendChild(el));
+    catalog.appendChild(frag);
+}
+
 function currentBoardSlug() {
     return window.location.pathname.split("/")[1] || "";
 }

web/views/board.templ

@@ -6,6 +6,7 @@ import (
 	"github.com/dominicf2001/comfychan/internal/util"
 	"github.com/dominicf2001/comfychan/web/views/shared"
 	"strconv"
+	"time"
 )
 
 templ BoardHeader(board database.Board) {
@@ -32,10 +33,15 @@ templ Board(board database.Board, isAdmin bool) {
 		<hr/>
 		<div id="boardActionBar">
 			<span>Image size: </span>
-			<select onchange="resizeCatalogPreviewImgs()" id="selectSortBy">
+			<select onchange="resizeCatalogPreviewImgs()" id="selectResize">
 				<option selected value="small">Small</option>
 				<option value="large">Large</option>
 			</select>
+			<span>Sort by: </span>
+			<select onchange="applyCatalogSort()" id="selectSortBy">
+				<option selected value="bumpedat">Bump order</option>
+				<option value="replycount">Reply count</option>
+			</select>
 			<input style="margin-left: 10px;" oninput="applyCatalogSearch()" id="catalogSearch" placeholder="Search"/>
 			<a style _="on click trigger refreshPosts on body" class="link-button">[Refresh]</a>
 		</div>
@@ -45,7 +51,8 @@ templ Board(board database.Board, isAdmin bool) {
 			hx-trigger="load, refreshPosts from:body"
 			_="on htmx:afterRequest 
 				call resizeCatalogPreviewImgs()
-				then call applyCatalogSearch()"
+				then call applyCatalogSearch()
+				then call applyCatalogSort()"
 		></div>
 	}
 }
@@ -60,6 +67,7 @@ type CatalogThreadPreview struct {
 	IpCount    int
 	Pinned     bool
 	Locked     bool
+	BumpedAt   time.Time
 }
 
 type CatalogContext struct {
@@ -73,7 +81,13 @@ templ ThreadsCatalog(previews []CatalogThreadPreview, catalogContext CatalogCont
 			{{ replyCount := strconv.FormatInt(int64(preview.ReplyCount), 10) }}
 			{{ ipCount := strconv.FormatInt(int64(preview.IpCount), 10) }}
 			{{ elThreadId := fmt.Sprintf("thread-%d", preview.ThreadId) }}
-			<div id={ elThreadId } class="catalog-preview">
+			{{
+				pinnedInt := 0
+				if preview.Pinned {
+					pinnedInt = 1
+				}
+			}}
+			<div data-pinned={ strconv.Itoa(pinnedInt) } data-replycount={ strconv.Itoa(preview.ReplyCount) } data-bumpedat={ strconv.FormatInt(preview.BumpedAt.UnixMilli(), 10) } id={ elThreadId } class="catalog-preview">
 				<a href={ templ.URL(preview.ThreadURL) }>
 					<img
 						loading="lazy"