Chat: Fix message duplication by removing optimistic UI for sent messages

- Remove optimistic message rendering that was causing duplicates
- Messages now only appear after server broadcast confirmation
- Simplify appendMessage() to check for existing message IDs and prevent duplicates
- Remove message delivery status indicators (sending/sent/failed)
- Add user alert when attempting to send while disconnected

This fixes the issue where messages appeared twice - once as an optimistic
temporary message and again when the server broadcast was received.

templates/pages/chat.html

@@ -552,57 +552,19 @@
             const content = input.value.trim();
             if (content === '') return;
             
-            const tempId = 'temp-' + Date.now();
             const msg = {
                 type: 'message',
                 content: content,
                 replyTo: replyToId
             };
             
-            // Show message immediately with "sending" status
-            const tempMsg = {
-                id: tempId,
-                content: content,
-                username: currentUsername,
-                timestamp: new Date().toISOString(),
-                replyTo: replyToId,
-                status: 'sending'
-            };
-            appendMessage(tempMsg, true);
-            
             if (ws && ws.readyState === WebSocket.OPEN) {
                 ws.send(JSON.stringify(msg));
                 input.value = '';
                 cancelReply();
-                
-                // Update status to "sent" after a brief delay
-                setTimeout(() => {
-                    const msgElement = document.getElementById('msg-' + tempId);
-                    if (msgElement) {
-                        const statusSpan = msgElement.querySelector('.message-status');
-                        if (statusSpan) {
-                            statusSpan.className = 'message-status sent';
-                            statusSpan.textContent = '✓';
-                        }
-                    }
-                }, 500);
             } else {
-                // Mark as failed if not connected
-                setTimeout(() => {
-                    const msgElement = document.getElementById('msg-' + tempId);
-                    if (msgElement) {
-                        const statusSpan = msgElement.querySelector('.message-status');
-                        if (statusSpan) {
-                            statusSpan.className = 'message-status failed';
-                            statusSpan.textContent = '✗ Failed - Click to retry';
-                            statusSpan.onclick = () => {
-                                msgElement.remove();
-                                sendMessage();
-                            };
-                        }
-                    }
-                }, 500);
                 console.error("WebSocket is not open. Current state:", ws ? ws.readyState : 'undefined');
+                alert("Cannot send message: Not connected to chat server");
             }
         }
         
@@ -647,13 +609,12 @@
             }
         }
 
-        function appendMessage(msg, isOptimistic = false) {
+        function appendMessage(msg) {
             const messages = document.getElementById('chat-messages');
             
-            // Don't duplicate if this is a real message and we already have the optimistic one
-            if (!isOptimistic && document.getElementById('msg-temp-' + msg.id)) {
-                const tempMsg = document.getElementById('msg-temp-' + msg.id);
-                tempMsg.remove();
+            // Check if message already exists (prevent duplicates)
+            if (document.getElementById('msg-' + msg.id)) {
+                return; // Don't add duplicate messages
             }
             
             // Check if user is at bottom before adding message
@@ -672,17 +633,11 @@
             }
             let replyHTML = msg.replyTo > 0 ? `<div class="chat-message-reply" onclick="scrollToMessage(${msg.replyTo})">Replying to message...</div>` : '';
             
-            let statusHTML = '';
-            if (isOptimistic) {
-                statusHTML = `<span class="message-status sending">⋯</span>`;
-            }
-            
             msgDiv.innerHTML = `
                 <div class="chat-message-header">
                     ${pfpHTML}
                     <span class="chat-message-username">${msg.username}</span>
                     <span class="chat-message-timestamp">${new Date(msg.timestamp).toLocaleString()}</span>
-                    ${statusHTML}
                 </div>
                 ${replyHTML}
                 <div class="chat-message-content">${msg.content}</div>
@@ -699,7 +654,7 @@
                 updateUnreadBadge();
             } else {
                 // User is not at bottom, increment unread
-                if (!isOptimistic && msg.username !== currentUsername) {
+                if (msg.username !== currentUsername) {
                     unreadCount++;
                     updateUnreadBadge();
                 }