Manage unread messages (mostly locally).

Author: maratal

Public/app/css/main.css

@@ -1980,6 +1980,11 @@ input[type="text"]:disabled, textarea:disabled {
     white-space: nowrap;
 }
 
+.chat-last-message.unread {
+    font-weight: 600;
+    color: hsl(var(--foreground));
+}
+
 .chat-muted-indicator {
     display: flex;
     align-items: center;
@@ -2002,26 +2007,18 @@ input[type="text"]:disabled, textarea:disabled {
 }
 
 .chat-badge {
-    border-radius: calc(var(--radius) - 2px);
-    border: 1px solid transparent;
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
+    border-radius: 10px;
     font-size: 0.75rem;
     font-weight: 600;
-    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
     background-color: hsl(var(--primary));
     color: hsl(var(--primary-foreground));
     box-shadow: var(--shadow-soft);
     flex-shrink: 0;
     min-width: 20px;
-    height: 1.25rem;
+    height: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
-    padding-left: 0.375rem;
-    padding-right: 0.375rem;
 }
 
 .chat-content {
@@ -2284,7 +2281,7 @@ input[type="text"]:disabled, textarea:disabled {
 }
 
 .message-status-read-mark {
-    display: none;
+    position: relative;
 }
 
 /* Context Menu - Unified menu styles */

Public/app/js/api.js

@@ -554,6 +554,21 @@ async function apiDeleteMessage(chatId, messageId) {
     return await handleResponse(response);
 }
 
+async function apiMarkAsRead(chatId, messageId) {
+    const accessToken = getAccessToken();
+    if (!accessToken) {
+        throw new Error('No access token available');
+    }
+    
+    const response = await fetch(`/chats/${chatId}/messages/${messageId}/read`, {
+        method: 'PUT',
+        headers: {
+            'Authorization': `Bearer ${accessToken}`
+        }
+    });
+    return await handleResponse(response);
+}
+
 async function apiUploadFile(file, fileName, contentType, onProgress = null, onXhrCreated = null) {
     const accessToken = getAccessToken();
     if (!accessToken) {

Public/app/js/chat.js

@@ -8,6 +8,7 @@ let oldestMessageId = null; // Track the oldest message ID we've loaded
 let hasMoreMessages = true; // Track if there are more messages to load
 let editingMessage = null; // Track the message being edited
 let replyingToMessage = null; // Track the message being replied to
+var lastReferenceReadMessageId = null; // Track the ID of either last outgoing message that has been read by others or last incoming message (as a reference point for read status)
 
 // Load messages for a chat
 async function loadMessages(chatId, initialLoad = false) {
@@ -63,7 +64,7 @@ async function loadMessages(chatId, initialLoad = false) {
         }
 
         // Display messages (will prepend if not initial load, clear and append if initial)
-        displayMessages(messages, initialLoad, hasMoreMessages);
+        displayMessages(messages, initialLoad);
 
         // Restore scroll position after DOM update (only if not initial load)
         if (!initialLoad) {
@@ -228,7 +229,7 @@ function updateSingleMessageGrouping(messageElement, index, allMessageElements)
 }
 
 // Display messages in the chat area
-function displayMessages(messages, isInitialLoad = false, hasMoreMessages = true) {
+function displayMessages(messages, isInitialLoad = false) {
     const prepend = !isInitialLoad;
     console.log(`Displaying ${messages.length} messages... (prepend: ${prepend})`);
 
@@ -262,8 +263,6 @@ function displayMessages(messages, isInitialLoad = false, hasMoreMessages = true
     let previousMessageInBatch = null;
     for (let i = 0; i < messages.length; i++) {
         const message = messages[i];
-        // If there are no more messages, the very first (top) message should have a date header
-        const isTopMessage = !hasMoreMessages && i === messages.length - 1;
         addMessageToChat(message, true, prepend);
         if (prepend) {
             previousMessageInBatch = message;
@@ -275,7 +274,10 @@ function displayMessages(messages, isInitialLoad = false, hasMoreMessages = true
     messageElements.forEach((messageElement, index) => {
         updateSingleMessageGrouping(messageElement, index, messageElements);
     });
-    
+
+    // Mark messages as read
+    showCurrentChatMessagesAsRead();
+
     // Handle scrolling (only for initial load)
     if (isInitialLoad) {
         // Scroll to bottom instantly when loading messages
@@ -498,6 +500,14 @@ function createMessageElement(message) {
     if (hasAttachments && messageDiv.dataset.attachments) {
         messageDiv.dataset.currentAttachmentIndex = '0';
     }
+
+    if (isOwnMessage(message) && message.id <= lastReferenceReadMessageId) {
+        // remove hidden class to show read mark
+        const readMark = messageDiv.querySelector('.message-status-read-mark');
+        if (readMark) {
+            readMark.classList.remove('hidden');
+        }
+    }
 
     // Add long press handler for context menu
     addLongPressHandler(messageDiv, {
@@ -512,7 +522,28 @@ function createMessageElement(message) {
     return messageDiv;
 }
 
-// Navigate message attachments
+function showCurrentChatMessagesAsRead() {
+    const messagesContainer = document.getElementById('messagesContainer');
+    if (!messagesContainer || !lastReferenceReadMessageId) return;
+
+    // Query only hidden read marks (more efficient - only elements that need updating)
+    const hiddenReadMarks = messagesContainer.querySelectorAll('.message-status-read-mark.hidden');
+    
+    hiddenReadMarks.forEach(readMark => {
+        // Find the parent message element
+        const messageElement = readMark.closest('.message-row.own');
+        if (!messageElement) return;
+        
+        const messageId = messageElement.dataset.messageId;
+        if (!messageId) return;
+        
+        // If this message ID is <= the reference message ID, show as read
+        if (messageId <= lastReferenceReadMessageId) {
+            readMark.classList.remove('hidden');
+        }
+    });
+}
+
 function navigateMessageAttachment(messageId, direction) {
     const messageDiv = document.querySelector(`[data-message-id="${messageId}"]`)?.closest('.message-row');
     if (!messageDiv) return;
@@ -1031,6 +1062,13 @@ function initializeMessageInput() {
 
     messageInput.addEventListener('input', adjustHeight);
 
+    messageInput.addEventListener('focus', function() {
+        // Mark chat as read when message input is focused
+        if (currentChatId) {
+            markChatAsRead(currentChatId);
+        }
+    });
+    
     messageInput.addEventListener('keydown', function(e) {
         if (e.key === 'Escape') {
             e.preventDefault();
@@ -1142,6 +1180,9 @@ async function sendMessage(textOverride = null) {
     // Display message immediately with sending state
     await addMessageToChat(message);
 
+    // Mark chat as read if not already (since user is sending a message, we can assume they've seen the chat)
+    markChatAsRead(currentChatId);
+
     // Update chat list with new message
     updateChatListWithMessage(message);
 
@@ -1241,6 +1282,18 @@ async function addMessageToChat(message, bulkAddition = false, prepend = false)
         noMessages.remove();
     }
 
+    // Check if message has read marks from other users to update lastReferenceReadMessageId
+    const hasOtherUserReadMarks = message.readMarks?.some(mark =>
+        mark.user && mark.user.id !== currentUser.info.id
+    );
+
+    if (hasOtherUserReadMarks || !isOwnMessage(message)) {
+        // Only update if this ID is greater than current lastReferenceReadMessageId
+        if (!lastReferenceReadMessageId || message.id > lastReferenceReadMessageId) {
+            lastReferenceReadMessageId = message.id;
+        }
+    }
+
     // Date header is now handled inside the message element by updateSingleMessageGrouping
     // No need to check for date headers here
 

Public/app/js/helpers.js

@@ -375,6 +375,38 @@ function playNotificationSound() {
     });
 }
 
+// Helper functions for managing unread count in localStorage
+function getStorageUnreadCount(chat) {
+    if (!chat || !chat.id) return null;
+    const key = `unreadCount_${chat.id}`;
+    const value = localStorage.getItem(key);
+    return value ? parseInt(value, 10) : null;
+}
+
+function setStorageUnreadCount(chat, count) {
+    if (!chat || !chat.id) return;
+    const key = `unreadCount_${chat.id}`;
+    if (count > 0) {
+        localStorage.setItem(key, count.toString());
+    } else {
+        localStorage.removeItem(key);
+    }
+}
+
+function isMessageReadByCurrentUser(message) {
+    if (!message || isOwnMessage(message)) return true;
+    if (!message.readMarks) return false;
+    return message.readMarks.some(mark => mark.user.id === currentUser.info.id);
+}
+
+function getUnreadCount(chat) {
+    let unreadCount = getStorageUnreadCount(chat);
+    if (!unreadCount) {
+        unreadCount = isMessageReadByCurrentUser(chat.lastMessage) ? 0 : 1;
+    }
+    return unreadCount;
+}
+
 // Check if a string is a debug command prefix
 function stringIsDebugPrefix(str) {
     return str.startsWith('/debug') || str.startsWith('/d');