From 68d6efff4ef666dc5262a9d0d0302ea81e98f6cf Mon Sep 17 00:00:00 2001
From: n9k <originalcocaineninja@protonmail.com>
Date: Wed, 10 Aug 2022 00:08:18 +0000
Subject: [PATCH 1/4] Chat: show dates in chat when time is ambiguous (nojs)

---
 anonstream/routes/nojs.py                    |  7 +++--
 anonstream/templates/nojs_chat_messages.html | 30 ++++++++++++++++++++
 anonstream/utils/chat.py                     | 13 +++++++++
 3 files changed, 48 insertions(+), 2 deletions(-)

diff --git a/anonstream/routes/nojs.py b/anonstream/routes/nojs.py
index e34c52e..fb5aaf2 100644
--- a/anonstream/routes/nojs.py
+++ b/anonstream/routes/nojs.py
@@ -10,11 +10,12 @@ from anonstream.user import add_state, pop_state, try_change_appearance, update_
 from anonstream.routes.wrappers import with_user_from, render_template_with_etag
 from anonstream.helpers.chat import get_scrollback
 from anonstream.helpers.user import get_default_name
-from anonstream.utils.chat import generate_nonce
+from anonstream.utils.chat import generate_nonce, should_show_initial_date
 from anonstream.utils.security import generate_csp
 from anonstream.utils.user import concatenate_for_notice
 
 CONFIG = current_app.config
+MESSAGES = current_app.messages
 USERS_BY_TOKEN = current_app.users_by_token
 
 @current_app.route('/stream.html')
@@ -47,15 +48,17 @@ async def nojs_info(timestamp, user):
 @with_user_from(request)
 async def nojs_chat_messages(timestamp, user):
     reading(user)
+    messages = get_scrollback(MESSAGES)
     return await render_template_with_etag(
         'nojs_chat_messages.html',
         {'csp': generate_csp()},
         refresh=CONFIG['NOJS_REFRESH_MESSAGES'],
         user=user,
         users_by_token=USERS_BY_TOKEN,
-        messages=get_scrollback(current_app.messages),
+        messages=messages,
         timeout=CONFIG['NOJS_TIMEOUT_CHAT'],
         get_default_name=get_default_name,
+        show_initial_date=should_show_initial_date(timestamp, messages),
     )
 
 @current_app.route('/chat/messages')
diff --git a/anonstream/templates/nojs_chat_messages.html b/anonstream/templates/nojs_chat_messages.html
index 91999cd..1af249d 100644
--- a/anonstream/templates/nojs_chat_messages.html
+++ b/anonstream/templates/nojs_chat_messages.html
@@ -144,6 +144,27 @@
       font-size: 9pt;
       cursor: default;
     }
+    .chat-date {
+      transform: rotate(-180deg);
+      text-align: center;
+      position: relative;
+      display: grid;
+      align-items: center;
+      margin: 8px 0;
+      color: #b2b2b3;
+      cursor: default;
+    }
+    .chat-date > hr {
+      margin: 0;
+      position: absolute;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .chat-date > :not(hr) > time {
+      padding: 0 1ch;
+      background-color: #232327;
+      position: relative;
+    }
 
     {% for token in messages | map(attribute='token') | list | unique %}
       {% with this_user = users_by_token[token] %}
@@ -180,6 +201,15 @@
           <span class="chat-message__markup">{{ message.markup }}</span>
         </li>
       {% endwith %}
+      {%
+        if loop.nextitem is defined and loop.nextitem.date != message.date
+        or loop.nextitem is not defined and show_initial_date
+      %}
+        <li class="chat-date" data-date="{{ message.date }}">
+          <hr>
+          <div><time datetime="{{ message.date }}">{{ message.date }}</time></div>
+        </li>
+      {% endif %}
     {% endfor %}
   </ol>
   <aside id="timeout-dismiss">
diff --git a/anonstream/utils/chat.py b/anonstream/utils/chat.py
index 39ff75f..aeaa8d1 100644
--- a/anonstream/utils/chat.py
+++ b/anonstream/utils/chat.py
@@ -6,6 +6,7 @@ import hashlib
 import math
 import re
 import secrets
+from datetime import datetime
 from functools import lru_cache
 
 from quart import escape
@@ -30,3 +31,15 @@ def get_approx_linespan(text):
     linespan = sum(map(height, text.splitlines()))
     linespan = linespan if linespan > 0 else 1
     return linespan
+
+def should_show_initial_date(timestamp, messages):
+    try:
+        first_message = next(iter(messages))
+    except StopIteration:
+        return False
+    if any(message['date'] != first_message['date'] for message in messages):
+        return True
+    else:
+        latest_date = max(map(lambda message: message['date'], messages))
+        date = datetime.utcfromtimestamp(timestamp).strftime('%Y-%m-%d')
+        return date != latest_date

From d7b4717cf551021540aa0394abe5384a94f2b4b0 Mon Sep 17 00:00:00 2001
From: n9k <originalcocaineninja@protonmail.com>
Date: Wed, 10 Aug 2022 00:01:27 +0000
Subject: [PATCH 2/4] Chat: show dates when the day changes (js)

---
 anonstream/static/anonstream.js              | 86 +++++++++++++++-----
 anonstream/static/style.css                  | 23 ++++++
 anonstream/templates/nojs_chat_messages.html |  2 +-
 3 files changed, 88 insertions(+), 23 deletions(-)

diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js
index 1625afb..f716b36 100644
--- a/anonstream/static/anonstream.js
+++ b/anonstream/static/anonstream.js
@@ -189,6 +189,7 @@ const create_chat_message = (object) => {
   chat_message.classList.add("chat-message");
   chat_message.dataset.seq = object.seq;
   chat_message.dataset.tokenHash = object.token_hash;
+  chat_message.dataset.date = object.date;
 
   const chat_message_time = document.createElement("time");
   chat_message_time.classList.add("chat-message__time");
@@ -256,23 +257,65 @@ const create_chat_user_components = (user) => {
   result.push(...[chat_user_name, chat_user_tripcode_nbsp, chat_user_tripcode]);
   return result;
 }
+const zeropad = (n) => ("0" + n).slice(-2);
+const datestamp = () => {
+  const date = new Date();
+  return `${date.getUTCFullYear()}-${zeropad(date.getUTCMonth() + 1)}-${zeropad(date.getUTCDate())}`;
+}
 const create_and_add_chat_message = (object) => {
+  // date
+  last_chat_message = chat_messages.querySelector(".chat-message:last-of-type");
+  if (last_chat_message === null || last_chat_message.dataset.date !== object.date) {
+    const chat_date = document.createElement("li");
+    chat_date.classList.add("chat-date");
+    chat_date.dataset.date = object.date;
+
+    const chat_date_hr = document.createElement("hr");
+    const chat_date_div = document.createElement("div");
+
+    const chat_date_div_time = document.createElement("time");
+    chat_date_div_time.datetime = object.date;
+    chat_date_div_time.innerText = object.date;
+
+    chat_date_div.insertAdjacentElement("beforeend", chat_date_div_time);
+    chat_date.insertAdjacentElement("beforeend", chat_date_hr);
+    chat_date.insertAdjacentElement("beforeend", chat_date_div);
+    if (last_chat_message === null && object.date === datestamp())
+      chat_date.dataset.hidden = "";
+    chat_messages.insertAdjacentElement("beforeend", chat_date);
+  }
+
+  // message
   const chat_message = create_chat_message(object);
   chat_messages.insertAdjacentElement("beforeend", chat_message);
-  while (chat_messages.children.length > max_chat_scrollback) {
-    chat_messages.children[0].remove();
+  const first_chat_message = chat_messages.querySelector(".chat-message");
+  if (first_chat_message !== null) {
+    const first_chat_date = chat_messages.querySelector(".chat-date");
+    if (first_chat_date !== null && first_chat_date.hasAttribute("data-hidden") && (object.date !== first_chat_message.dataset.date || object.date !== datestamp()))
+      first_chat_date.removeAttribute("data-hidden");
   }
+  const string_seqs = new Set();
+  for (const this_chat_message of chat_messages.querySelectorAll(".chat-message")) {
+    if (chat_messages.querySelectorAll(".chat-message").length - string_seqs.size > max_chat_scrollback)
+      string_seqs.add(this_chat_message.dataset.seq);
+    else
+      break;
+  }
+  delete_chat_messages({string_seqs});
 }
-const delete_chat_messages = (seqs) => {
-  string_seqs = new Set(seqs.map(n => n.toString()));
-  to_delete = [];
-  for (const chat_message of chat_messages.children) {
-    if (string_seqs.has(chat_message.dataset.seq))
-      to_delete.push(chat_message);
+const delete_chat_messages = ({string_seqs, keep=false}) => {
+  const keep_dates = new Set();
+  for (const chat_message of chat_messages.querySelectorAll(".chat-message")) {
+    if (string_seqs.has(chat_message.dataset.seq) === keep)
+      keep_dates.add(chat_message.dataset.date);
   }
-  for (const chat_message of to_delete) {
-    chat_message.remove();
+  const to_delete = [];
+  for (const child of chat_messages.children) {
+    if (child.classList.contains("chat-date") && !keep_dates.has(child.dataset.date) || child.classList.contains("chat-message") && string_seqs.has(child.dataset.seq) !== keep)
+      to_delete.push(child);
   }
+  for (const element of to_delete)
+    element.remove();
 }
 
 let users = {};
@@ -632,17 +675,8 @@ const on_websocket_message = async (event) => {
       chat_form_submit.disabled = false;
 
       // remove messages the server isn't acknowledging the existence of
-      const seqs = new Set(receipt.messages.map((message) => {return message.seq;}));
-      const to_delete = [];
-      for (const chat_message of chat_messages.children) {
-        const chat_message_seq = parseInt(chat_message.dataset.seq);
-        if (!seqs.has(chat_message_seq)) {
-          to_delete.push(chat_message);
-        }
-      }
-      for (const chat_message of to_delete) {
-        chat_message.remove();
-      }
+      const string_seqs = new Set(receipt.messages.map(message => message.seq.toString()));
+      delete_chat_messages({string_seqs, keep: true});
 
       // settings
       default_name = receipt.default;
@@ -744,7 +778,7 @@ const on_websocket_message = async (event) => {
 
     case "delete":
       console.log("ws delete", receipt);
-      delete_chat_messages(receipt.seqs);
+      delete_chat_messages({string_seqs: new Set(receipt.seqs.map(n => n.toString()))});
       break;
 
     case "set-users":
@@ -969,6 +1003,14 @@ chat_messages_unlock.addEventListener("click", (event) => {
   chat_messages.scrollTop = chat_messages.scrollTopMax;
 });
 
+/* show initial chat date if a day has passed */
+const show_initial_date = () => {
+  const chat_date = chat_messages.querySelector(".chat-date:first-child");
+  if (chat_date !== null && chat_date.hasAttribute("data-hidden") && chat_date.dataset.date !== datestamp())
+    chat_date.removeAttribute("data-hidden");
+}
+setInterval(show_initial_date, 30000);
+
 /* close websocket after prolonged absence of pings */
 
 const rotate_websocket = () => {
diff --git a/anonstream/static/style.css b/anonstream/static/style.css
index 836230a..24212b2 100644
--- a/anonstream/static/style.css
+++ b/anonstream/static/style.css
@@ -273,6 +273,29 @@ noscript {
   font-size: 9pt;
   cursor: default;
 }
+.chat-date {
+  text-align: center;
+  position: relative;
+  display: grid;
+  align-items: center;
+  margin: 8px 0;
+  color: #b2b2b3;
+  cursor: default;
+}
+.chat-date[data-hidden] {
+  display: none;
+}
+.chat-date > hr {
+  margin: 0;
+  position: absolute;
+  width: 100%;
+  box-sizing: border-box;
+}
+.chat-date > :not(hr) > time {
+  padding: 0 1ch;
+  background-color: #232327;
+  position: relative;
+}
 #chat__body__users {
   background-color: #121214;
   mask-image: linear-gradient(black calc(100% - 0.625rem), transparent calc(100% - 0.125rem));
diff --git a/anonstream/templates/nojs_chat_messages.html b/anonstream/templates/nojs_chat_messages.html
index 1af249d..349dc45 100644
--- a/anonstream/templates/nojs_chat_messages.html
+++ b/anonstream/templates/nojs_chat_messages.html
@@ -193,7 +193,7 @@
   <ol id="chat-messages">
     {% for message in messages | reverse %}
       {% with this_user = users_by_token[message.token] %}
-        <li class="chat-message" data-seq="{{ message.seq }}" data-token-hash="{{ this_user.token_hash }}">
+        <li class="chat-message" data-seq="{{ message.seq }}" data-token-hash="{{ this_user.token_hash }}" data-date="{{ message.date }}">
           <time class="chat-message__time" datetime="{{ message.date }}T{{ message.time_seconds }}Z" title="{{ message.date }} {{ message.time_seconds }}">{{ message.time_minutes }}</time>
           {{- '&nbsp;' | safe -}}
           {{ appearance(this_user, insignia_class='chat-message__insignia', name_class='chat-message__name', tag_class='chat-message__name__tag') }}

From 72d5a0526c9287f402794345b89c6f0175e21bba Mon Sep 17 00:00:00 2001
From: n9k <originalcocaineninja@protonmail.com>
Date: Sun, 7 Aug 2022 11:22:07 +0000
Subject: [PATCH 3/4] Fix JS chat dates

Accidentally forgot to change these places where we use
`chat_messages.children`, which now refers to dates as well as messages.
---
 anonstream/static/anonstream.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js
index f716b36..a5fcbc4 100644
--- a/anonstream/static/anonstream.js
+++ b/anonstream/static/anonstream.js
@@ -383,7 +383,7 @@ const get_user_name = ({user=null, token_hash}) => {
 }
 const update_user_names = (token_hash=null) => {
   const token_hashes = token_hash === null ? Object.keys(users) : [token_hash];
-  for (const chat_message of chat_messages.children) {
+  for (const chat_message of chat_messages.querySelectorAll(".chat-message")) {
     const this_token_hash = chat_message.dataset.tokenHash;
     if (token_hashes.includes(this_token_hash)) {
       const user = users[this_token_hash];
@@ -465,7 +465,7 @@ const update_user_tripcodes = (token_hash=null) => {
   }
 
   // update inner texts
-  for (const chat_message of chat_messages.children) {
+  for (const chat_message of chat_messages.querySelectorAll(".chat-message")) {
     const this_token_hash = chat_message.dataset.tokenHash;
     const tripcode = users[this_token_hash].tripcode;
     if (token_hashes.includes(this_token_hash)) {
@@ -711,7 +711,8 @@ const on_websocket_message = async (event) => {
       chat_appearance_form_color.setAttribute("value", user.color);
 
       // insert new messages
-      const last = chat_messages.children.length == 0 ? null : chat_messages.children[chat_messages.children.length - 1];
+      const chat_messages_messages = chat_messages.querySelectorAll(".chat-message");
+      const last = chat_messages_messages.length == 0 ? null : chat_messages_messages[chat_messages_messages.length - 1];
       const last_seq = last === null ? null : parseInt(last.dataset.seq);
       for (const message of receipt.messages) {
         if (message.seq > last_seq) {

From 2599528ae3705d028b33925885de7cdfec4e4f7b Mon Sep 17 00:00:00 2001
From: n9k <originalcocaineninja@protonmail.com>
Date: Wed, 10 Aug 2022 00:01:53 +0000
Subject: [PATCH 4/4] JS: typo

---
 anonstream/static/anonstream.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/anonstream/static/anonstream.js b/anonstream/static/anonstream.js
index a5fcbc4..295ec19 100644
--- a/anonstream/static/anonstream.js
+++ b/anonstream/static/anonstream.js
@@ -699,7 +699,7 @@ const on_websocket_message = async (event) => {
           left: 0,
           top: chat_messages.scrollTopMax,
           behavior: "instant",
-		});
+		    });
       }
 
       // appearance form default values