From 89afbba165e1af6031db8e4d7f635a32b0cccb4e Mon Sep 17 00:00:00 2001
From: BordedDev <>
Date: Thu, 22 May 2025 00:00:51 +0200
Subject: [PATCH 1/2] Set opacity to 1 for the last message's time display

---
 src/snek/static/base.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index 52bebd7..a5c68b7 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -309,6 +309,7 @@ input[type="text"], .chat-input textarea {
 .message:has(+ .message.switch-user), .message:last-child {
   .time {
     display: block;
+    opacity: 1;
   }
 }
 

From 6b083f8b1bd5796385f3c0de1d4f88d5d4526b36 Mon Sep 17 00:00:00 2001
From: BordedDev <>
Date: Thu, 22 May 2025 00:19:39 +0200
Subject: [PATCH 2/2] Added feature to show time and reply when messages are
 from a long time before the next message

---
 src/snek/static/base.css    |  2 +-
 src/snek/templates/web.html | 15 +++++++++++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/snek/static/base.css b/src/snek/static/base.css
index a5c68b7..e1f43e0 100644
--- a/src/snek/static/base.css
+++ b/src/snek/static/base.css
@@ -306,7 +306,7 @@ input[type="text"], .chat-input textarea {
   }
 }
 
-.message:has(+ .message.switch-user), .message:last-child {
+.message:has(+ .message.switch-user), .message:has(+ .message.long-time), .message:last-child {
   .time {
     display: block;
     opacity: 1;
diff --git a/src/snek/templates/web.html b/src/snek/templates/web.html
index 94d0ac5..0ae5b98 100644
--- a/src/snek/templates/web.html
+++ b/src/snek/templates/web.html
@@ -174,12 +174,27 @@
         const messagesContainer = document.querySelector(".chat-messages");
         updateTimes();
         let previousUser = null;
+        let previousDate = null;
         document.querySelectorAll(".message").forEach((message) => {
             if (previousUser !== message.dataset.user_uid) {
                 message.classList.add("switch-user");
                 previousUser = message.dataset.user_uid;
+                previousDate = new Date(message.dataset.created_at);
             } else {
                 message.classList.remove("switch-user");
+
+                if (!previousDate) {
+                    previousDate = new Date(message.dataset.created_at);
+                } else {
+                    const currentDate = new Date(message.dataset.created_at);
+
+                    if (currentDate.getTime() - previousDate.getTime() > 1000 * 60 * 20) {
+                        message.classList.add("long-time");
+                    } else {
+                        message.classList.remove("long-time");
+                    }
+                    previousDate = currentDate;
+                }
             }
         });
         lastMessage = messagesContainer.querySelector(".message:last-child");