Fixing that reply interface.

templates/pages/chat.html

@@ -140,6 +140,33 @@
         .autocomplete-item:hover {
             background-color: #f3d2c1;
         }
+        .reply-indicator {
+            background-color: #001858;
+            color: #fef6e4;
+            padding: 5px 10px;
+            border-radius: 5px;
+            margin-bottom: 8px;
+            display: none;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .reply-indicator span {
+            font-size: 0.9em;
+        }
+        .reply-indicator button {
+            background: none;
+            border: none;
+            color: #fef6e4;
+            cursor: pointer;
+            font-size: 0.9em;
+            padding: 0 5px;
+            margin: 0;
+            width: auto;
+        }
+        .reply-indicator button:hover {
+            background: none;
+            color: #f582ae;
+        }
         @media (prefers-color-scheme: dark) {
             .chat-container {
                 background-color: #444;
@@ -173,6 +200,16 @@
                 background-color: #8bd3dd;
                 color: #001858;
             }
+            .reply-indicator {
+                background-color: #222;
+                color: #fef6e4;
+            }
+            .reply-indicator button {
+                color: #fef6e4;
+            }
+            .reply-indicator button:hover {
+                color: #f582ae;
+            }
         }
     </style>
 </head>
@@ -196,16 +233,20 @@
                         <span class="chat-message-timestamp">{{.Timestamp.Format "02/01/2006 15:04"}}</span>
                     </div>
                     {{if gt .ReplyTo 0}}
-                    <div class="chat-message-reply" onclick="scrollToMessage({{.ReplyTo}})">Replying to message #{{.ReplyTo}}</div>
+                    <div class="chat-message-reply" onclick="scrollToMessage({{.ReplyTo}})">Replying to {{.Username}}</div>
                     {{end}}
                     <div class="chat-message-content">{{.Content | html}}</div>
                     <div class="post-actions">
-                        <a href="javascript:void(0)" onclick="replyToMessage({{.ID}})">Reply</a>
+                        <a href="javascript:void(0)" onclick="replyToMessage({{.ID}}, '{{.Username}}')">Reply</a>
                     </div>
                 </div>
                 {{end}}
             </div>
             <div class="chat-input">
+                <div id="reply-indicator" class="reply-indicator">
+                    <span id="reply-username">Replying to </span>
+                    <button onclick="cancelReply()">X</button>
+                </div>
                 <textarea id="chat-input-text" placeholder="Type a message..."></textarea>
                 <button onclick="sendMessage()">Send</button>
             </div>
@@ -218,6 +259,7 @@
         let autocompleteActive = false;
         let autocompletePrefix = '';
         let replyToId = -1;
+        let replyUsername = '';
 
         function connectWebSocket() {
             ws = new WebSocket('ws://' + window.location.host + '{{.BasePath}}/chat/?ws=true', [], { credentials: 'include' });
@@ -246,8 +288,7 @@
             if (ws && ws.readyState === WebSocket.OPEN) {
                 ws.send(JSON.stringify(msg));
                 input.value = '';
-                replyToId = -1;
+                cancelReply(); // Reset reply state after sending
-                // Optionally, clear reply indicator UI here
             } else {
                 console.error("WebSocket is not open. Current state:", ws ? ws.readyState : 'undefined');
             }
@@ -259,7 +300,7 @@
             msgDiv.className = 'chat-message';
             msgDiv.id = 'msg-' + msg.ID;
             let pfpHTML = msg.PfpURL ? `<img src="${msg.PfpURL}" alt="PFP" class="chat-message-pfp">` : `<div class="chat-message-pfp" style="background-color: #001858;"></div>`;
-            let replyHTML = msg.ReplyTo > 0 ? `<div class="chat-message-reply" onclick="scrollToMessage(${msg.ReplyTo})">Replying to message #${msg.ReplyTo}</div>` : '';
+            let replyHTML = msg.ReplyTo > 0 ? `<div class="chat-message-reply" onclick="scrollToMessage(${msg.ReplyTo})">Replying to ${msg.Username}</div>` : '';
             // Process content for mentions
             let content = msg.Content.replace(/@[\w]+/g, match => `<span class="chat-message-mention">${match}</span>`);
             msgDiv.innerHTML = `
@@ -271,19 +312,30 @@
                 ${replyHTML}
                 <div class="chat-message-content">${content}</div>
                 <div class="post-actions">
-                    <a href="javascript:void(0)" onclick="replyToMessage(${msg.ID})">Reply</a>
+                    <a href="javascript:void(0)" onclick="replyToMessage(${msg.ID}, '${msg.Username}')">Reply</a>
                 </div>
             `;
             messages.appendChild(msgDiv);
             messages.scrollTop = messages.scrollHeight;
         }
 
-        function replyToMessage(id) {
+        function replyToMessage(id, username) {
             replyToId = id;
-            // Optionally, show a UI indicator that a reply is set
+            replyUsername = username;
+            const replyIndicator = document.getElementById('reply-indicator');
+            const replyUsernameSpan = document.getElementById('reply-username');
+            replyUsernameSpan.textContent = `Replying to ${username}`;
+            replyIndicator.style.display = 'flex';
             document.getElementById('chat-input-text').focus();
         }
 
+        function cancelReply() {
+            replyToId = -1;
+            replyUsername = '';
+            const replyIndicator = document.getElementById('reply-indicator');
+            replyIndicator.style.display = 'none';
+        }
+
         function scrollToMessage(id) {
             const msgElement = document.getElementById('msg-' + id);
             if (msgElement) {