From 442b1c5581c2c222efc151c2b918e07b7a699d99 Mon Sep 17 00:00:00 2001
From: aboldguess <phil.catton@gmail.com>
Date: Tue, 22 Jul 2025 20:03:11 +0100
Subject: [PATCH] Fix message layout and unread badges

---
 frontend/css/style.css | 14 +++++++++++++-
 frontend/js/app.js     | 11 ++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/css/style.css b/frontend/css/style.css
index f12640f..be256e7 100644
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -143,9 +143,21 @@ button {
   border-radius: 50%;
 }
 
+.message .user {
+  font-weight: bold;       /* differentiate username from message text */
+  margin-right: 0.25rem;   /* spacing before the message body */
+}
+
+.message .text {
+  /* Allow the message body to consume remaining space so the
+     timestamp and read receipt align to the right */
+  flex: 1;
+  margin-left: 0.25rem;
+}
+
 .message .time {
   color: #777;
-  margin-left: auto;
+  margin-left: 0.5rem; /* space after the message text */
   font-size: 0.8rem;
 }
 
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 5a28355..a7140e4 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -259,14 +259,16 @@ function appendDirectMessage(m) {
   // delivered.
   const outgoing = m.from === currentUser.username;
   const receipt = outgoing
-    ? `<span class="read${m.isRead ? ' read-true' : ''}">${m.isRead ? '✔✔' : (m.isDelivered ? '✔' : '')}</span>`
+    ? `<span class="read${m.isRead ? ' read-true' : ''}">${m.isRead ? '&#10003;&#10003;' : (m.isDelivered ? '&#10003;' : '')}</span>`
     : '';
 
+  // Place the timestamp and read receipt at the end of the flex container so
+  // the layout resembles common chat apps.
   div.innerHTML = `
     <img class="avatar" src="${getGravatarUrl(m.from)}" alt="avatar">
     <span class="user">${m.from}</span>
-    <span class="time">${time}</span>
-    <span class="text">${m.text}</span>${receipt}`;
+    <span class="text">${m.text}</span>
+    <span class="time">${time}</span>${receipt}`;
   list.appendChild(div);
 }
 
@@ -365,6 +367,9 @@ function selectUser(name) {
   currentChannel = null; // hide channel context
   clearUnread(name);
   loadMessages();
+  // Explicitly mark any previously unread messages as read now that
+  // the conversation is open to keep badge counts in sync.
+  markMessagesRead(name);
 }
 
 // Verify the user is logged in before showing the dashboard