feat: show reply time indicator when message gap exceeds 20 minutes

Add logic to detect time gaps between consecutive messages from the same user. When the difference between two messages' timestamps exceeds 20 minutes, the later message receives a `long-time` CSS class, causing its timestamp to be displayed persistently alongside the existing `switch-user` rule. The CSS selector `.message:has(+ .message.long-time)` ensures the preceding message's time remains visible when followed by a long-delayed reply.

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;

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");