From 49f4f452a655a6e941825fbd6101be3cbbab55bf Mon Sep 17 00:00:00 2001
From: Dominic Ferrando <dominicf2001@gmail.com>
Date: Mon, 28 Apr 2025 14:13:53 -0400
Subject: [PATCH] Render dates in correct timezone

---
 web/static/index.css   |  4 ++++
 web/static/thread.js   | 22 +++++++++++++++++++++-
 web/views/thread.templ |  9 ++++-----
 3 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/web/static/index.css b/web/static/index.css
index cf5f1ba..f56e6ca 100644
--- a/web/static/index.css
+++ b/web/static/index.css
@@ -529,4 +529,8 @@ footer {
     .post-img-full {
         max-width: 100%;
     }
+
+    textarea {
+        font-size: 16px;
+    }
 }
diff --git a/web/static/thread.js b/web/static/thread.js
index c82a95f..a26f2f0 100644
--- a/web/static/thread.js
+++ b/web/static/thread.js
@@ -77,4 +77,24 @@ function togglePostFile(el) {
     }
 }
 
-insertHeaderReplies()
+function initializePosts() {
+    // set dates to correct timezone
+    document.querySelectorAll('.post-datetime').forEach(el => {
+        const utcDateStr = el.getAttribute('data-utc');
+        const localDate = new Date(utcDateStr);
+
+        const hours = localDate.getHours() % 12 || 12;
+        const minutes = String(localDate.getMinutes()).padStart(2, '0');
+        const ampm = localDate.getHours() >= 12 ? 'PM' : 'AM';
+
+        const month = String(localDate.getMonth() + 1).padStart(2, '0');
+        const day = String(localDate.getDate()).padStart(2, '0');
+        const year = localDate.getFullYear();
+
+        el.textContent = `${month}/${day}/${year} ${hours}:${minutes} ${ampm}`;
+    });
+
+    insertHeaderReplies()
+}
+
+initializePosts();
diff --git a/web/views/thread.templ b/web/views/thread.templ
index 11b4a10..f6b181c 100644
--- a/web/views/thread.templ
+++ b/web/views/thread.templ
@@ -6,6 +6,7 @@ import (
 	"github.com/dominicf2001/comfychan/internal/util"
 	"github.com/dominicf2001/comfychan/web/views/shared"
 	"strconv"
+	"time"
 )
 
 templ PostAdminDialog(post database.Post) {
@@ -105,8 +106,7 @@ templ PostOriginal(post database.Post, thread database.Thread) {
 				{ thread.Subject }
 			</h1>
 			<span class="post-author">{ post.Author }</span>
-			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
-			<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
+			<span class="post-datetime" data-utc={ post.CreatedAt.UTC().Format(time.RFC3339) }></span>
 			<span
 				_={ fmt.Sprintf(`
 				on click set #newPostBody.value to #newPostBody.value + '>>%d\n'
@@ -138,8 +138,7 @@ templ PostReply(post database.Post, threadContext ThreadContext) {
 				</span>
 			}
 			<span class="post-author">{ post.Author }</span>
-			<span class="post-date">{ post.CreatedAt.Format("01/02/2006") }</span>
-			<span class="post-time">{ post.CreatedAt.Format("15:04") }</span>
+			<span class="post-datetime" data-utc={ post.CreatedAt.UTC().Format(time.RFC3339) }></span>
 			<span
 				_={ fmt.Sprintf(`
 				on click set #newPostBody.value to #newPostBody.value + '>>%d\n' 
@@ -232,7 +231,7 @@ templ Thread(board database.Board, thread database.Thread, posts []database.Post
 			class="thread"
 			hx-get={ fmt.Sprintf("/hx/%s/threads/%d/posts", thread.BoardSlug, thread.Id) }
 			hx-trigger="refreshPosts from:body"
-			_="on htmx:afterSwap call insertHeaderReplies() then smoothScrollTo('bottom')"
+			_="on htmx:afterSwap call initializePosts() then smoothScrollTo('bottom')"
 		>
 			@Posts(posts, thread, threadContext)
 		</div>