Chat: show dates in chat when time is ambiguous (nojs)

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')

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

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