Update static/script.js

static/script.js

@@ -31,68 +31,47 @@
     // DOM Cache
     // =============================================
     const DOM = {
-        // Screens
         authScreen: document.getElementById('auth-screen'),
         chatScreen: document.getElementById('chat-screen'),
-
-        // Auth
         loginForm: document.getElementById('login-form'),
         signupForm: document.getElementById('signup-form'),
         authTabs: document.querySelectorAll('.auth-tab'),
         authError: document.getElementById('auth-error'),
         authErrorText: document.getElementById('auth-error-text'),
         authLoading: document.getElementById('auth-loading'),
-
-        // Header
         headerDisplayName: document.getElementById('header-display-name'),
         headerAvatar: document.getElementById('header-avatar'),
         headerAvatarPlaceholder: document.getElementById('header-avatar-placeholder'),
         headerStatus: document.getElementById('header-status'),
         onlineBadge: document.getElementById('online-badge'),
-
-        // Connection
         connectionStatus: document.getElementById('connection-status'),
         connectionText: document.getElementById('connection-text'),
-
-        // Messages
         messagesList: document.getElementById('messages-list'),
         messagesScroll: document.getElementById('messages-scroll'),
         emptyState: document.getElementById('empty-state'),
         loadOlderBtn: document.getElementById('load-older-btn'),
         scrollBottomBtn: document.getElementById('scroll-bottom-btn'),
-
-        // Typing
         typingIndicator: document.getElementById('typing-indicator'),
         typingText: document.getElementById('typing-text'),
-
-        // Reply
         replyPreview: document.getElementById('reply-preview'),
         replyUser: document.getElementById('reply-user'),
         replyText: document.getElementById('reply-text'),
-
-        // Compose
         composeForm: document.getElementById('compose-form'),
         messageInput: document.getElementById('message-input'),
         sendBtn: document.getElementById('send-btn'),
         attachBtn: document.getElementById('attach-btn'),
         emojiBtn: document.getElementById('emoji-btn'),
         fileInput: document.getElementById('file-input'),
-
-        // Upload
         uploadPreview: document.getElementById('upload-preview'),
         uploadFilename: document.getElementById('upload-filename'),
         cancelUpload: document.getElementById('cancel-upload'),
         uploadProgress: document.getElementById('upload-progress'),
         progressFill: document.getElementById('progress-fill'),
         progressText: document.getElementById('progress-text'),
-
-        // Modals
         settingsModal: document.getElementById('settings-modal'),
         onlineModal: document.getElementById('online-modal'),
         emojiPicker: document.getElementById('emoji-picker'),
         emojiGrid: document.getElementById('emoji-grid'),
-
-        // Settings
         settingsDisplayName: document.getElementById('settings-display-name'),
         settingsUsername: document.getElementById('settings-username'),
         settingsAvatarPreview: document.getElementById('settings-avatar-preview'),
@@ -107,18 +86,22 @@
         selfColorHex: document.getElementById('self-color-hex'),
         otherColorHex: document.getElementById('other-color-hex'),
         textColorHex: document.getElementById('text-color-hex'),
-
-        // Online users modal
         onlineBtn: document.getElementById('online-btn'),
         onlineUsersList: document.getElementById('online-users-list'),
         onlineTotal: document.getElementById('online-total'),
-
-        // Toast
         toastContainer: document.getElementById('toast-container')
     };
 
     const API = window.location.origin;
 
+    // =============================================
+    // File URL helper - uses query param for token
+    // so img src, video src, window.open all work
+    // =============================================
+    function fileUrl(filePath) {
+        return `${API}/api/download/${encodeURIComponent(filePath)}?t=${encodeURIComponent(State.token)}`;
+    }
+
     // =============================================
     // Theme
     // =============================================
@@ -135,11 +118,10 @@
             document.documentElement.style.setProperty('--bubble-other-text', textColor);
             const isLight = (c) => {
                 const r = parseInt(c.slice(1,3),16), g = parseInt(c.slice(3,5),16), b = parseInt(c.slice(5,7),16);
-                return (0.299 * r + 0.587 * g + 0.114 * b) > 150;
+                return (0.299*r + 0.587*g + 0.114*b) > 150;
             };
             document.documentElement.style.setProperty('--bubble-self-text', isLight(selfColor) ? '#111827' : '#FFFFFF');
         } else {
-            // Remove inline custom properties to let CSS variables take over
             document.documentElement.style.removeProperty('--bubble-self');
             document.documentElement.style.removeProperty('--bubble-other');
             document.documentElement.style.removeProperty('--bubble-other-text');
@@ -149,17 +131,25 @@
 
     applyTheme(State.theme);
 
+    // =============================================
+    // Timestamp updater - refreshes every 30s
+    // =============================================
+    function startTimestampUpdater() {
+        setInterval(() => {
+            document.querySelectorAll('.message-time[data-ts]').forEach(el => {
+                el.textContent = formatTime(parseInt(el.dataset.ts));
+            });
+        }, 30000);
+    }
+
     // =============================================
     // Toast Notifications
     // =============================================
     function showToast(message, type = 'info') {
         const toast = document.createElement('div');
         toast.className = `toast toast-${type}`;
-        let icon = 'info-circle';
-        if (type === 'success') icon = 'check-circle';
-        else if (type === 'error') icon = 'exclamation-circle';
-        else if (type === 'warning') icon = 'exclamation-triangle';
-        toast.innerHTML = `<i class="fas fa-${icon}"></i><span>${message}</span>`;
+        const icons = { success: 'check-circle', error: 'exclamation-circle', warning: 'exclamation-triangle', info: 'info-circle' };
+        toast.innerHTML = `<i class="fas fa-${icons[type] || 'info-circle'}"></i><span>${message}</span>`;
         DOM.toastContainer.appendChild(toast);
         setTimeout(() => toast.remove(), 4000);
     }
@@ -263,8 +253,7 @@
 
         State.ws.onmessage = (event) => {
             try {
-                const msg = JSON.parse(event.data);
-                handleWSMessage(msg);
+                handleWSMessage(JSON.parse(event.data));
             } catch (e) {
                 console.error('WS parse error', e);
             }
@@ -314,31 +303,44 @@
                     display_name: msg.display_name,
                     avatar_path: msg.avatar_path
                 };
+                State.onlineUsers.clear();
                 msg.online_users.forEach(u => State.onlineUsers.set(u.id, u));
                 updateHeader();
                 updateOnlineBadge();
                 break;
 
-            case 'new_message':
-                if (State.messages.has(msg.message.id)) return;
-                State.messages.set(msg.message.id, msg.message);
-                State.messageOrder.push(msg.message.id);
-                renderMessage(msg.message);
+            case 'new_message': {
+                const m = msg.message;
+                // Deduplicate
+                if (State.messages.has(m.id)) {
+                    // Update status if we already have it (e.g. optimistic)
+                    const existing = State.messages.get(m.id);
+                    existing.status = m.status;
+                    updateMessageBubble(m.id);
+                    return;
+                }
+                State.messages.set(m.id, m);
+                // Insert in correct sorted position
+                insertMessageIdSorted(m.id, m.timestamp_ms);
+                renderMessage(m, true);
                 if (State.isAtBottom) scrollToBottom();
-                if (document.visibilityState === 'visible') sendMarkRead(msg.message.id);
+                if (document.visibilityState === 'visible') sendMarkRead(m.id);
                 if (document.visibilityState !== 'visible' && Notification.permission === 'granted') {
-                    new Notification(`${msg.message.sender_display_name}`, {
-                        body: msg.message.content || 'Sent a file',
+                    new Notification(m.sender_display_name || m.sender_username, {
+                        body: m.content || 'Sent a file',
                         icon: '/static/icon.png'
                     });
                 }
                 break;
+            }
 
             case 'messages_loaded':
-                msg.messages.forEach(m => {
+                // Sort loaded messages by id ascending before inserting
+                const sorted = [...msg.messages].sort((a, b) => a.id - b.id);
+                sorted.forEach(m => {
                     if (!State.messages.has(m.id)) {
                         State.messages.set(m.id, m);
-                        State.messageOrder.unshift(m.id);
+                        insertMessageIdSorted(m.id, m.timestamp_ms);
                     }
                 });
                 State.hasMore = msg.has_more;
@@ -372,25 +374,27 @@
 
             case 'message_edited':
                 if (State.messages.has(msg.message_id)) {
-                    const msgObj = State.messages.get(msg.message_id);
-                    msgObj.content = msg.content;
-                    msgObj.is_edited = true;
+                    const m = State.messages.get(msg.message_id);
+                    m.content = msg.content;
+                    m.is_edited = true;
                     updateMessageBubble(msg.message_id);
                 }
                 break;
 
             case 'message_deleted':
                 if (State.messages.has(msg.message_id)) {
-                    const msgObj = State.messages.get(msg.message_id);
-                    msgObj.is_deleted = true;
+                    State.messages.get(msg.message_id).is_deleted = true;
                     updateMessageBubble(msg.message_id);
                 }
                 break;
 
             case 'message_read':
-                if (State.messages.has(msg.message_id) && State.messages.get(msg.message_id).sender_id === State.user.id) {
-                    State.messages.get(msg.message_id).status = 'read';
-                    updateMessageBubble(msg.message_id);
+                if (State.messages.has(msg.message_id)) {
+                    const m = State.messages.get(msg.message_id);
+                    if (m.sender_id === State.user.id) {
+                        m.status = 'read';
+                        updateMessageBubble(msg.message_id);
+                    }
                 }
                 break;
 
@@ -403,7 +407,20 @@
 
             case 'error':
                 showToast(msg.message, 'error');
+                break;
+        }
+    }
+
+    // Keep messageOrder sorted by id ascending at all times
+    function insertMessageIdSorted(id, ts) {
+        // Binary insert by id
+        let lo = 0, hi = State.messageOrder.length;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (State.messageOrder[mid] < id) lo = mid + 1;
+            else hi = mid;
         }
+        State.messageOrder.splice(lo, 0, id);
     }
 
     // =============================================
@@ -415,6 +432,12 @@
         }
     }
 
+    function requestOnlineUsers() {
+        if (State.ws?.readyState === WebSocket.OPEN) {
+            State.ws.send(JSON.stringify({ type: 'get_online_users' }));
+        }
+    }
+
     function sendMarkRead(messageId) {
         if (State.ws?.readyState === WebSocket.OPEN) {
             State.ws.send(JSON.stringify({ type: 'mark_read', up_to_message_id: messageId }));
@@ -424,82 +447,204 @@
     // =============================================
     // Rendering
     // =============================================
-    function renderMessage(msg) {
+
+    // Build avatar HTML for a message sender
+    function buildSenderAvatarHTML(msg) {
+        if (msg.sender_avatar_path) {
+            const url = fileUrl(msg.sender_avatar_path);
+            return `<img class="msg-avatar" src="${url}" alt="${escapeHtml(msg.sender_display_name || msg.sender_username)}" title="${escapeHtml(msg.sender_display_name || msg.sender_username)}">`;
+        }
+        const initials = (msg.sender_display_name || msg.sender_username || '?').charAt(0).toUpperCase();
+        return `<div class="msg-avatar msg-avatar-placeholder" title="${escapeHtml(msg.sender_display_name || msg.sender_username)}">${initials}</div>`;
+    }
+
+    function renderMessage(msg, append = false) {
         if (DOM.messagesList.querySelector(`[data-id="${msg.id}"]`)) return;
+        const wrapper = createMessageElement(msg);
+        if (append) {
+            DOM.messagesList.appendChild(wrapper);
+        } else {
+            // Find correct position in DOM by id order
+            const ids = State.messageOrder;
+            const idx = ids.indexOf(msg.id);
+            const nextId = ids[idx + 1];
+            if (nextId) {
+                const nextEl = DOM.messagesList.querySelector(`[data-id="${nextId}"]`);
+                if (nextEl) {
+                    DOM.messagesList.insertBefore(wrapper, nextEl);
+                    return;
+                }
+            }
+            DOM.messagesList.appendChild(wrapper);
+        }
+    }
+
+    function createMessageElement(msg) {
+        const isSelf = msg.sender_id === State.user?.id;
         const wrapper = document.createElement('div');
-        wrapper.className = `message-wrapper ${msg.sender_id === State.user.id ? 'self' : 'other'}`;
+        wrapper.className = `message-wrapper ${isSelf ? 'self' : 'other'}`;
         wrapper.dataset.id = msg.id;
         wrapper.innerHTML = buildMessageHTML(msg);
-        DOM.messagesList.appendChild(wrapper);
+        return wrapper;
     }
 
     function buildMessageHTML(msg) {
-        if (msg.is_deleted) return '<div class="message-bubble deleted">This message was deleted</div>';
+        if (msg.is_deleted) {
+            return '<div class="message-bubble deleted"><i class="fas fa-ban"></i> This message was deleted</div>';
+        }
+
         const isSelf = msg.sender_id === State.user?.id;
+        const displayName = escapeHtml(msg.sender_display_name || msg.sender_username || 'Unknown');
         let html = '';
-        // reply indicator
+
+        // Sender info row (show for others, and also for self on first load so you know it's you)
+        if (!isSelf) {
+            html += `<div class="msg-sender-row">`;
+            html += buildSenderAvatarHTML(msg);
+            html += `<span class="msg-sender-name">${displayName}</span>`;
+            html += `</div>`;
+        }
+
+        // Reply indicator
         if (msg.reply_to_id && State.messages.has(msg.reply_to_id)) {
             const reply = State.messages.get(msg.reply_to_id);
-            html += `<div class="reply-indicator"><i class="fas fa-reply"></i><span>${reply.sender_username}: ${truncate(reply.content, 50)}</span></div>`;
+            const replyName = escapeHtml(reply.sender_display_name || reply.sender_username || 'Unknown');
+            html += `<div class="reply-indicator">
+                <i class="fas fa-reply"></i>
+                <span><strong>${replyName}:</strong> ${escapeHtml(truncate(reply.content || (reply.file_name ? '📎 ' + reply.file_name : ''), 60))}</span>
+            </div>`;
         }
+
         html += `<div class="message-bubble">`;
-        html += `<div class="message-text">${escapeHtml(msg.content)}</div>`;
-        if (msg.file_path) html += buildAttachmentHTML(msg);
+
+        // Message text (only if non-empty)
+        if (msg.content) {
+            html += `<div class="message-text">${escapeHtml(msg.content)}</div>`;
+        }
+
+        // Attachment
+        if (msg.file_path) {
+            html += buildAttachmentHTML(msg);
+        }
+
+        // Meta row: time + edited + status
         html += `<div class="message-meta">`;
-        html += `<span class="message-time">${formatTime(msg.timestamp_ms)}</span>`;
-        if (msg.is_edited) html += ' <span class="edited-label">edited</span>';
+        html += `<span class="message-time" data-ts="${msg.timestamp_ms}">${formatTime(msg.timestamp_ms)}</span>`;
+        if (msg.is_edited) html += ` <span class="edited-label">edited</span>`;
         if (isSelf) {
-            const icon = msg.status === 'read' ? '<i class="fas fa-check-double"></i>' : '<i class="fas fa-check"></i>';
-            html += `<span class="message-status ${msg.status==='read'?'read':''}">${icon}</span>`;
+            const isRead = msg.status === 'read';
+            html += `<span class="message-status${isRead ? ' read' : ''}">`;
+            html += isRead ? '<i class="fas fa-check-double"></i>' : '<i class="fas fa-check"></i>';
+            html += `</span>`;
         }
-        html += `</div><div class="message-actions">`;
-        html += `<button onclick="InfinityChat.replyTo(${msg.id})"><i class="fas fa-reply"></i></button>`;
+        html += `</div>`;
+
+        // Action buttons
+        html += `<div class="message-actions">`;
+        html += `<button onclick="InfinityChat.replyTo(${msg.id})" title="Reply"><i class="fas fa-reply"></i></button>`;
+        if (isSelf) {
+            html += `<button onclick="InfinityChat.editMessage(${msg.id})" title="Edit"><i class="fas fa-pen"></i></button>`;
+            html += `<button onclick="InfinityChat.deleteMessage(${msg.id})" title="Delete"><i class="fas fa-trash"></i></button>`;
+        }
+        html += `</div>`;
+
+        html += `</div>`; // close message-bubble
+
+        // Self sender info on right side
         if (isSelf) {
-            html += `<button onclick="InfinityChat.editMessage(${msg.id})"><i class="fas fa-pen"></i></button>`;
-            html += `<button onclick="InfinityChat.deleteMessage(${msg.id})"><i class="fas fa-trash"></i></button>`;
+            html += `<div class="msg-sender-row msg-sender-row-self">`;
+            html += `<span class="msg-sender-name">${displayName}</span>`;
+            html += buildSenderAvatarHTML(msg);
+            html += `</div>`;
         }
-        html += `</div></div>`;
+
         return html;
     }
 
     function buildAttachmentHTML(msg) {
-        const url = `${API}/api/download/${encodeURIComponent(msg.file_path)}?token=${encodeURIComponent(State.token)}`;
-        if (msg.file_type && msg.file_type.startsWith('image/')) {
-            return `<div class="attachment"><img src="${url}" alt="${msg.file_name}" loading="lazy" onclick="window.open(this.src)"></div>`;
-        } else if (msg.file_type && msg.file_type.startsWith('video/')) {
-            return `<div class="attachment"><video controls preload="metadata"><source src="${url}" type="${msg.file_type}"></video></div>`;
-        } else if (msg.file_type && msg.file_type.startsWith('audio/')) {
-            return `<div class="attachment"><audio controls src="${url}"></audio></div>`;
-        } else {
-            return `<div class="attachment-file" onclick="window.open('${url}')">
-                        <i class="fas fa-file"></i>
-                        <div class="file-info">
-                            <div class="file-name">${msg.file_name || 'File'}</div>
-                            <div class="file-size">${formatFileSize(msg.file_size)}</div>
-                        </div>
-                    </div>`;
+        const url = fileUrl(msg.file_path);
+        const ft = (msg.file_type || '').toLowerCase();
+        const fname = escapeHtml(msg.file_name || 'File');
+
+        if (ft.startsWith('image/')) {
+            return `<div class="attachment">
+                <img src="${url}"
+                     alt="${fname}"
+                     loading="lazy"
+                     onclick="window.open('${url}', '_blank')"
+                     onerror="this.style.display='none';this.nextSibling.style.display='flex'">
+                <div class="attachment-file" style="display:none" onclick="window.open('${url}', '_blank')">
+                    <i class="fas fa-image"></i>
+                    <div class="file-info">
+                        <div class="file-name">${fname}</div>
+                        <div class="file-size">${formatFileSize(msg.file_size)}</div>
+                    </div>
+                </div>
+            </div>`;
+        }
+
+        if (ft.startsWith('video/')) {
+            return `<div class="attachment">
+                <video controls preload="metadata" onclick="event.stopPropagation()">
+                    <source src="${url}" type="${escapeHtml(msg.file_type)}">
+                    Your browser does not support video.
+                </video>
+            </div>`;
+        }
+
+        if (ft.startsWith('audio/')) {
+            return `<div class="attachment">
+                <audio controls src="${url}"></audio>
+            </div>`;
         }
+
+        // Generic file
+        return `<div class="attachment-file" onclick="window.open('${url}', '_blank')">
+            <i class="fas fa-file-alt"></i>
+            <div class="file-info">
+                <div class="file-name">${fname}</div>
+                <div class="file-size">${formatFileSize(msg.file_size)}</div>
+            </div>
+        </div>`;
     }
 
     function updateMessageBubble(id) {
         const el = DOM.messagesList.querySelector(`[data-id="${id}"]`);
         if (!el) return;
         const msg = State.messages.get(id);
-        if (msg) el.innerHTML = buildMessageHTML(msg);
+        if (!msg) return;
+        const isSelf = msg.sender_id === State.user?.id;
+        el.className = `message-wrapper ${isSelf ? 'self' : 'other'}`;
+        el.innerHTML = buildMessageHTML(msg);
     }
 
     function renderAllMessages() {
+        // Save scroll position if loading older messages
+        const wasAtBottom = State.isAtBottom;
+        const prevScrollHeight = DOM.messagesScroll.scrollHeight;
+
         DOM.messagesList.innerHTML = '';
+
         if (State.messageOrder.length === 0) {
             DOM.emptyState.style.display = 'flex';
+            return;
+        }
+
+        DOM.emptyState.style.display = 'none';
+
+        // messageOrder is always sorted ascending by id
+        State.messageOrder.forEach(id => {
+            const msg = State.messages.get(id);
+            if (msg) renderMessage(msg, true);
+        });
+
+        if (wasAtBottom) {
+            scrollToBottom();
         } else {
-            DOM.emptyState.style.display = 'none';
-            State.messageOrder.forEach(id => {
-                const msg = State.messages.get(id);
-                if (msg) renderMessage(msg);
-            });
+            // Maintain scroll position when prepending old messages
+            const newScrollHeight = DOM.messagesScroll.scrollHeight;
+            DOM.messagesScroll.scrollTop += (newScrollHeight - prevScrollHeight);
         }
-        if (State.isAtBottom) scrollToBottom();
     }
 
     function scrollToBottom() {
@@ -511,9 +656,10 @@
     // =============================================
     DOM.messagesScroll.addEventListener('scroll', () => {
         const { scrollTop, scrollHeight, clientHeight } = DOM.messagesScroll;
-        State.isAtBottom = (scrollHeight - scrollTop - clientHeight) < 60;
+        State.isAtBottom = (scrollHeight - scrollTop - clientHeight) < 80;
         DOM.scrollBottomBtn.classList.toggle('hidden', State.isAtBottom);
     });
+
     DOM.scrollBottomBtn.addEventListener('click', scrollToBottom);
 
     // =============================================
@@ -524,6 +670,14 @@
         sendMessage();
     });
 
+    // Send on Enter (Shift+Enter for newline)
+    DOM.messageInput.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter' && !e.shiftKey) {
+            e.preventDefault();
+            sendMessage();
+        }
+    });
+
     DOM.messageInput.addEventListener('input', () => {
         const hasContent = DOM.messageInput.value.trim().length > 0 || !!State.pendingFile;
         DOM.sendBtn.disabled = !hasContent;
@@ -555,6 +709,7 @@
 
         State.ws.send(JSON.stringify(payload));
         DOM.messageInput.value = '';
+        DOM.sendBtn.disabled = true;
         clearReply();
         clearPendingFile();
         autoResize();
@@ -564,19 +719,17 @@
     function sendTyping(isTyping) {
         if (!State.ws || State.ws.readyState !== WebSocket.OPEN) return;
         clearTimeout(window.__typingTimer);
+        State.ws.send(JSON.stringify({ type: 'typing', is_typing: isTyping }));
         if (isTyping) {
-            State.ws.send(JSON.stringify({ type: 'typing', is_typing: true }));
             window.__typingTimer = setTimeout(() => sendTyping(false), 2000);
-        } else {
-            State.ws.send(JSON.stringify({ type: 'typing', is_typing: false }));
         }
     }
 
     function updateTypingIndicator() {
-        const users = Array.from(State.typingUsers.values()).filter(u => u.user_id !== State.user.id);
+        const users = Array.from(State.typingUsers.values()).filter(u => u.user_id !== State.user?.id);
         DOM.typingIndicator.classList.toggle('hidden', users.length === 0);
         if (users.length > 0) {
-            DOM.typingText.textContent = users.map(u => u.display_name).join(', ') + ' typing...';
+            DOM.typingText.textContent = users.map(u => u.display_name || u.username).join(', ') + (users.length === 1 ? ' is typing...' : ' are typing...');
         }
     }
 
@@ -587,8 +740,8 @@
         const msg = State.messages.get(messageId);
         if (!msg) return;
         State.replyTo = msg;
-        DOM.replyUser.textContent = msg.sender_username;
-        DOM.replyText.textContent = truncate(msg.content, 50);
+        DOM.replyUser.textContent = msg.sender_display_name || msg.sender_username;
+        DOM.replyText.textContent = truncate(msg.content || (msg.file_name ? '📎 ' + msg.file_name : ''), 60);
         DOM.replyPreview.classList.remove('hidden');
         DOM.messageInput.focus();
     }
@@ -638,7 +791,7 @@
     });
 
     async function uploadChunked(file) {
-        const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
+        const CHUNK_SIZE = 5 * 1024 * 1024;
         const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
         const uploadId = generateId();
 
@@ -667,18 +820,19 @@
                 if (data.status === 'complete') {
                     State.pendingFile = {
                         file_path: data.file_path,
-                        file_type: data.file_type,
+                        file_type: data.file_type || file.type,
                         file_name: data.file_name,
                         file_size: data.file_size
                     };
                     showUploadPreview(data.file_name);
                     DOM.uploadProgress.classList.add('hidden');
+                    DOM.sendBtn.disabled = false;
                     return;
                 }
             } catch (err) {
-                showToast('Upload failed', 'error');
+                showToast('Upload failed: ' + err.message, 'error');
                 DOM.uploadProgress.classList.add('hidden');
-                break;
+                return;
             }
         }
         DOM.uploadProgress.classList.add('hidden');
@@ -693,7 +847,6 @@
     function showUploadPreview(filename) {
         DOM.uploadPreview.classList.remove('hidden');
         DOM.uploadFilename.textContent = filename;
-        DOM.sendBtn.disabled = false;
     }
 
     function clearPendingFile() {
@@ -701,10 +854,13 @@
         DOM.uploadPreview.classList.add('hidden');
     }
 
-    DOM.cancelUpload.addEventListener('click', clearPendingFile);
+    DOM.cancelUpload.addEventListener('click', () => {
+        clearPendingFile();
+        DOM.sendBtn.disabled = DOM.messageInput.value.trim().length === 0;
+    });
 
     // =============================================
-    // Emoji Picker (basic)
+    // Emoji Picker
     // =============================================
     DOM.emojiBtn.addEventListener('click', (e) => {
         e.stopPropagation();
@@ -721,14 +877,14 @@
     });
 
     const emojiSets = {
-        smileys: ['😀','😃','😄','😁','😅','😂','🤣','😊','😇','🙂','😉','😌','😍','🥰','😘','😗','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','😮','🤥','😌','😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧','😵','🤯','🥵','🥶','😎','🤓','🧐','😕','😟','🙁','😮','😯','😲','😳','🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','👾','🤖'],
-        people: ['👶','🧒','👦','👧','🧑','👱','👨','🧔','👩','🧓','👴','👵','👲','👳','🧕','👮','👷','💂','🕵️','🧑‍⚕️','👨‍⚕️','👩‍⚕️','🧑‍🎓','👨‍🎓','👩‍🎓','🧑‍🏫','👨‍🏫','👩‍🏫','🧑‍⚖️','👨‍⚖️','👩‍⚖️','🧑‍🌾','👨‍🌾','👩‍🌾','🧑‍🍳','👨‍🍳','👩‍🍳','🧑‍🔧','👨‍🔧','👩‍🔧','🧑‍🏭','👨‍🏭','👩‍🏭','🧑‍💼','👨‍💼','👩‍💼','🧑‍🔬','👨‍🔬','👩‍🔬','🧑‍💻','👨‍💻','👩‍💻','🧑‍🎤','👨‍🎤','👩‍🎤','🧑‍🎨','👨‍🎨','👩‍🎨','🧑‍✈️','👨‍✈️','👩‍✈️','🧑‍🚀','👨‍🚀','👩‍🚀','🧑‍🚒','👨‍🚒','👩‍🚒','👮‍♀️','👮‍♂️','🕵️‍♀️','🕵️‍♂️','💂‍♀️','💂‍♂️','👷‍♀️','👷‍♂️'],
-        animals: ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐻‍❄️','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🙈','🙉','🙊','🐒','🐔','🐧','🐦','🐤','🐣','🐥','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🪱','🐛','🦋','🐌','🐞','🐜','🪰','🪲','🪳','🦟','🦗','🕷️','🦂','🐢','🐍','🦎','🦖','🦕','🐙','🦑','🦐','🦞','🦀','🐡','🐠','🐟','🐬','🐳','🐋','🦈','🐊','🐅','🐆','🦓','🦍','🦧','🐘','🦛','🦏','🐪','🐫','🦒','🦘','🐃','🐂','🐄','🐎','🐖','🐏','🐑','🦙','🐐','🦌','🐕','🐩','🦮','🐕‍🦺','🐈','🐈‍⬛','🐓','🦃','🦤','🦚','🦜','🦢','🦩','🕊️','🐇','🦝','🦨','🦡','🦦','🦥','🐁','🐀','🐿️','🦔','🐾','🐉','🐲'],
-        food: ['🍏','🍎','🍐','🍊','🍋','🍌','🍉','🍇','🍓','🫐','🍈','🍒','🍑','🥭','🍍','🥥','🥝','🍅','🍆','🥑','🥦','🥬','🥒','🌶️','🌽','🥕','🫒','🧄','🧅','🥔','🍠','🥐','🍞','🥖','🥨','🧀','🥚','🍳','🧈','🥞','🧇','🥓','🥩','🍗','🍖','🦴','🌭','🍔','🍟','🍕','🫓','🥪','🥙','🧆','🌮','🌯','🫔','🥗','🥘','🫕','🥫','🍝','🍜','🍲','🍛','🍣','🍱','🥟','🦪','🍤','🍙','🍚','🍘','🍥','🥠','🥮','🍢','🍡','🍧','🍨','🍦','🥧','🧁','🍰','🎂','🍮','🍭','🍬','🍫','🍿','🍩','🍪','🌰','🥜','🍯','🥛','🍼','🫖','☕','🍵','🧃','🥤','🧋','🍶','🍺','🍻','🥂','🍷','🥃','🍸','🍹','🧉','🍾','🧊','🥄','🍴','🍽️','🥣','🥡','🥢','🧂'],
-        activities: ['⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🥏','🎱','🪀','🏓','🏸','🏒','🏑','🥍','🏏','🪃','🥅','⛳','🪁','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️','🥌','🎿','⛷️','🏂','🪂','🏋️','🤼','🤸','🤺','⛹️','🤾','🏌️','🏇','🧘','🏄','🏊','🤽','🚣','🧗','🚵','🚴','🏆','🥇','🥈','🥉','🏅','🎖️','🏵️','🎗️','🎫','🎟️','🎪','🤹','🎭','🩰','🎨','🎬','🎤','🎧','🎼','🎹','🥁','🪘','🎷','🎺','🪗','🎸','🪕','🎻','🎲','♟️','🎯','🎳','🎮','🎰','🧩'],
-        objects: ['⌚','📱','💻','⌨️','🖥️','🖨️','🖱️','🖲️','🕹️','🗜️','💽','💾','💿','📀','📼','📷','📸','📹','🎥','📽️','🎞️','📞','☎️','📟','📠','📺','📻','🎙️','🎚️','🎛️','🧭','⏱️','⏲️','⏰','🕰️','⌛','📡','🔋','🔌','💡','🔦','🕯️','🪔','🧯','🛢️','💸','💵','💴','💶','💷','🪙','💰','💳','💎','⚖️','🪜','🧰','🪛','🔧','🔨','⚒️','🛠️','⛏️','🪚','🔩','⚙️','🪤','🧱','⛓️','🧲','🔫','💣','🧨','🪓','🔪','🗡️','⚔️','🛡️','🚬','⚰️','🪦','⚱️','🏺','🔮','📿','🧿','💈','⚗️','🔭','🔬','🕳️','🩻','🩹','🩺','💊','💉','🩸','🧬','🦠','🧫','🧪','🌡️','🧹','🪠','🧺','🧻','🚽','🚰','🚿','🛁','🛀','🧼','🪥','🪒','🧽','🪣','🧴','🪢','🧷','🧹','🧺','🧻','🧼','🪥','🪒','🧽','🪣','🧴','🪢','🧷'],
-        symbols: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟','☮️','✝️','☪️','🕉️','☸️','✡️','🔯','🕎','☯️','☦️','🛐','⛎','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','🆔','⚛️','🉑','☢️','☣️','📴','📳','🈶','🈚','🈸','🈺','🈷️','✴️','🆚','💮','🉐','㊙️','㊗️','🈴','🈵','🈹','🈲','🅰️','🅱️','🆎','🆑','🅾️','🆘','❌','⭕','🛑','⛔','📛','🚫','💯','💢','♨️','🚷','🚯','🚳','🚱','🔞','📵','🚭','❗','❕','❓','❔','‼️','⁉️','🔅','🔆','〽️','⚠️','🚸','🔱','⚜️','🔰','♻️','✅','🈯','💹','❇️','✳️','❎','🌐','💠','Ⓜ️','🌀','💤','🏧','🚾','♿','🅿️','🛗','🈳','🈂️','🛂','🛃','🛄','🛅','🚰','🚹','🚺','🚼','⚧','🚻','🚮','🎦','📶','🈁','🔣','ℹ️','🔤','🔡','🔠','🆖','🆗','🆙','🆒','🆕','🆓','0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣','🔟','🔢','#️⃣','*️⃣','⏏️','▶️','⏸️','⏯️','⏹️','⏺️','⏭️','⏮️','⏩','⏪','⏫','⏬','◀️','🔼','🔽','➡️','⬅️','⬆️','⬇️','↗️','↘️','↙️','↖️','↕️','↔️','↪️','↩️','⤴️','⤵️','🔀','🔁','🔂','🔄','🔃','🎵','🎶','➕','➖','➗','✖️','♾️','💲','💱','™️','©️','®️','〰️','➰','➿','🔚','🔙','🔛','🔝','🔜','✔️','☑️','🔘','🔴','🟠','🟡','🟢','🔵','🟣','⚫','⚪','🟤','🔺','🔻','🔸','🔹','🔶','🔷','🔳','🔲','▪️','▫️','◾','◽','◼️','◻️','🟥','🟧','🟨','🟩','🟦','🟪','⬛','⬜','🟫'],
-        flags: ['🏁','🚩','🎌','🏴','🏳️','🏳️‍🌈','🏳️‍⚧️','🏴‍☠️','🇿🇦','🇸🇽','🇸🇰','🇸🇮','����🇬','🇸🇪','🇸🇩','🇸🇷','🇸🇸','🇸🇹','🇸🇻','🇸🇾','🇸🇿','🇹🇨','🇹🇩','🇹🇫','🇹🇬','🇹🇭','🇹🇯','🇹🇰','🇹🇱','🇹🇲','🇹🇳','🇹🇴','🇹🇷','🇹🇹','🇹🇻','🇹🇼','🇹🇿','🇺🇦','🇺🇬','🇺🇳','🇺🇸','🇺🇾','🇺🇿','🇻🇦','🇻🇨','🇻🇪','🇻🇬','🇻🇮','🇻🇳','🇻🇺','🇼🇫','🇼🇸','🇽🇰','🇾🇪','🇾🇹','🇿🇦','🇿🇲','🇿🇼']
+        smileys: ['😀','😃','😄','😁','😅','😂','🤣','😊','😇','🙂','😉','😌','😍','🥰','😘','😗','😋','😛','😜','🤪','😝','🤑','🤗','🤭','🤫','🤔','🤐','🤨','😐','😑','😶','😏','😒','🙄','😬','😮','🤥','😔','😪','🤤','😴','😷','🤒','🤕','🤢','🤮','🤧','😵','🤯','🥵','🥶','😎','🤓','🧐','😕','😟','🙁','😮','😯','😲','😳','🥺','😦','😧','😨','😰','😥','😢','😭','😱','😖','😣','😞','😓','😩','😫','🥱','😤','😡','😠','🤬','😈','👿','💀','☠️','💩','🤡','👹','👺','👻','👽','👾','🤖'],
+        people: ['👶','🧒','👦','👧','🧑','👱','👨','🧔','👩','🧓','👴','👵','👲','👳','🧕','👮','👷','💂','🕵️','👨‍⚕️','👩‍⚕️','👨‍🎓','👩‍🎓','👨‍🏫','👩‍🏫','👨‍⚖️','👩‍⚖️','👨‍🌾','👩‍🌾','👨‍🍳','👩‍🍳','👨‍🔧','👩‍🔧','👨‍🏭','👩‍🏭','👨‍💼','👩‍💼','👨‍🔬','👩‍🔬','👨‍💻','👩‍💻','👨‍🎤','👩‍🎤','👨‍🎨','👩‍🎨','👨‍✈️','👩‍✈️','👨‍🚀','👩‍🚀','👨‍🚒','👩‍🚒'],
+        animals: ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐮','🐷','🐸','🐵','🙈','🙉','🙊','🐒','🐔','🐧','🐦','🐤','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄','🐝','🐛','🦋','🐌','🐞','🐜','🦟','🦗','🕷️','🦂','🐢','🐍','🦎','🐙','🦑','🦐','🦞','🦀','🐡','🐠','🐟','🐬','🐳','🐋','🦈','🐊','🐅','🐆','🦓','🦍','🐘','🦛','🦏','🐪','🐫','🦒','🦘','🐃','🐂','🐄','🐎','🐖','🐏','🐑','🦙','🐐','🦌','🐕','🐩','🐈','🐓','🦃','🦚','🦜','🦢','🦩','🕊️','🐇','🦝','🦨','🦡','🦦','🦥','🐁','🐀','🐿️','🦔'],
+        food: ['🍏','🍎','🍐','🍊','🍋','🍌','🍉','🍇','🍓','🫐','🍈','🍒','🍑','🥭','🍍','🥥','🥝','🍅','🍆','🥑','🥦','🥬','🥒','🌶️','🌽','🥕','🧄','🧅','🥔','🍠','🥐','🍞','🥖','🥨','🧀','🥚','🍳','🧈','🥞','🧇','🥓','🥩','🍗','🍖','🌭','🍔','🍟','🍕','🥪','🥙','🧆','🌮','🌯','🥗','🥘','🥫','🍝','🍜','🍲','🍛','🍣','🍱','🥟','🦪','🍤','🍙','🍚','🍘','🍥','🥠','🥮','🍢','🍡','🍧','🍨','🍦','🥧','🧁','🍰','🎂','🍮','🍭','🍬','🍫','🍿','🍩','🍪','🌰','🥜','🍯','🥛','🍼','☕','🍵','🧃','🥤','🧋','🍺','🍻','🥂','🍷','🥃','🍸','🍹','🍾'],
+        activities: ['⚽','🏀','🏈','⚾','🥎','🎾','🏐','🏉','🥏','🎱','🏓','🏸','🏒','🏑','🥍','🏏','🥅','⛳','🏹','🎣','🤿','🥊','🥋','🎽','🛹','🛼','🛷','⛸️','🥌','🎿','⛷️','🏂','🪂','🏋️','🤼','🤸','⛹️','🤾','🏌️','🏇','🧘','🏄','🏊','🤽','🚣','🧗','🚵','🚴','🏆','🥇','🥈','🥉','🏅','🎖️','🏵️','🎗️','🎫','🎟️','🎪','🤹','🎭','🩰','🎨','🎬','🎤','🎧','🎼','🎹','🥁','🎷','🎺','🎸','🎻','🎲','♟️','🎯','🎳','🎮','🎰','🧩'],
+        objects: ['⌚','📱','💻','⌨️','🖥️','🖨️','🖱️','💽','💾','💿','📀','📼','📷','📸','📹','🎥','📞','☎️','📺','📻','🧭','⏱️','⏲️','⏰','🕰️','⌛','📡','🔋','🔌','💡','🔦','🕯️','🧯','💸','💵','💴','💶','💷','🪙','💰','💳','💎','⚖️','🧰','🔧','🔨','⚒️','🛠️','⛏️','🪚','🔩','⚙️','🧲','🔫','💣','🧨','🔪','🗡️','⚔️','🛡️','🚬','⚰️','🪦','⚱️','🏺','🔮','📿','💈','⚗️','🔭','🔬','💊','💉','🩸','🧬','🦠','🧫','🧪','🌡️','🧹','🧺','🧻','🚽','🚰','🚿','🛁','🧼','🪥','🪒','🧽','🪣','🧴','🪢','🧷'],
+        symbols: ['❤️','🧡','💛','💚','💙','💜','🖤','🤍','🤎','💔','❣️','💕','💞','💓','💗','💖','💘','💝','💟','☮️','✝️','☪️','🕉️','☸️','✡️','🔯','🕎','☯️','☦️','🛐','⛎','♈','♉','♊','♋','♌','♍','♎','♏','♐','♑','♒','♓','🆔','⚛️','☢️','☣️','📴','📳','🈶','🈚','🈸','🈺','🈷️','✴️','🆚','💮','🉐','㊙️','㊗️','🈴','🈵','🈹','🈲','🅰️','🅱️','🆎','���','🅾️','🆘','❌','⭕','🛑','⛔','📛','🚫','💯','💢','♨️','❗','❕','❓','❔','‼️','⁉️','⚠️','🚸','🔱','⚜️','🔰','♻️','✅','❇️','✳️','❎','🌐','💠','Ⓜ️','🌀','💤','🏧','♿','🅿️','🚹','🚺','🚻','🚮','🎦','📶','ℹ️','🔤','🔡','🔠','🆖','🆗','🆙','🆒','🆕','🆓','0️⃣','1️⃣','2️⃣','3️⃣','4️⃣','5️⃣','6️⃣','7️⃣','8️⃣','9️⃣','🔟','#️⃣','*️⃣','▶️','⏸️','⏹️','⏺️','⏭️','⏮️','⏩','⏪','⏫','⏬','◀️','🔼','🔽','➡️','⬅️','⬆️','⬇️','↗️','↘️','↙️','↖️','↕️','↔️','↪️','↩️','⤴️','⤵️','🔀','🔁','🔂','🔄','🔃','🎵','🎶','➕','➖','➗','✖️','♾️','💲','💱','™️','©️','®️','〰️','➰','➿','✔️','☑️'],
+        flags: ['🏁','🚩','🎌','🏴','🏳️','🏳️‍🌈','🏳️‍⚧️','🏴‍☠️','🇺🇸','🇬🇧','🇨🇦','🇦🇺','🇩🇪','🇫🇷','🇯🇵','🇨🇳','🇷🇺','🇧🇷','🇮🇳','🇰🇷','🇪🇸','🇮🇹','🇲🇽','🇿🇦','🇸🇪','🇳🇴','🇩🇰','🇫🇮','🇳🇱','🇧🇪','🇦🇹','🇨🇭','🇵🇱','🇵🇹','🇬🇷','🇹🇷','🇸🇦','🇦🇪','🇮🇱','🇮🇷','🇵🇰','🇧🇩','🇻🇳','🇹🇭','🇮🇩','🇲🇾','🇵🇭','🇸🇬','🇳🇿','🇦🇷','🇨🇱','🇨🇴','🇵🇪','🇻🇪','🇺🇾','🇪🇨','🇧🇴','🇵🇾','🇬🇹','🇨🇺','🇩🇴']
     };
 
     document.querySelectorAll('.emoji-cat').forEach(btn => {
@@ -742,7 +898,7 @@
 
     function renderEmojis(category) {
         const emojis = emojiSets[category] || [];
-        DOM.emojiGrid.innerHTML = emojis.map(e => `<button class="emoji-item">${e}</button>`).join('');
+        DOM.emojiGrid.innerHTML = emojis.map(e => `<button class="emoji-item" type="button">${e}</button>`).join('');
         DOM.emojiGrid.querySelectorAll('.emoji-item').forEach(btn => {
             btn.addEventListener('click', () => {
                 DOM.messageInput.value += btn.textContent;
@@ -758,6 +914,7 @@
     // =============================================
     DOM.loadOlderBtn.addEventListener('click', () => {
         if (State.ws?.readyState === WebSocket.OPEN && State.hasMore && State.cursor) {
+            State.isAtBottom = false; // Don't auto-scroll when loading older
             State.ws.send(JSON.stringify({ type: 'load_messages', cursor: State.cursor, limit: 50 }));
         }
     });
@@ -788,14 +945,22 @@
         State.onlineUsers.forEach(u => {
             const div = document.createElement('div');
             div.className = 'user-item';
-            div.innerHTML = `<div class="user-avatar"><i class="fas fa-user-circle"></i></div>
-                             <div class="user-info">
-                                 <div class="user-name">${u.display_name || u.username}</div>
-                                 <div class="user-status-text">${u.status || 'online'}</div>
-                             </div>`;
+            let avatarHtml;
+            if (u.avatar_path) {
+                avatarHtml = `<img src="${fileUrl(u.avatar_path)}" alt="${escapeHtml(u.display_name || u.username)}" style="width:100%;height:100%;object-fit:cover;border-radius:50%">`;
+            } else {
+                const initials = (u.display_name || u.username || '?').charAt(0).toUpperCase();
+                avatarHtml = initials;
+            }
+            div.innerHTML = `
+                <div class="user-avatar">${avatarHtml}</div>
+                <div class="user-info">
+                    <div class="user-name">${escapeHtml(u.display_name || u.username)}</div>
+                    <div class="user-status-text"><span style="color:var(--success)">●</span> Online</div>
+                </div>`;
             DOM.onlineUsersList.appendChild(div);
         });
-        DOM.onlineTotal.textContent = `${State.onlineUsers.size} users online`;
+        DOM.onlineTotal.textContent = `${State.onlineUsers.size} user${State.onlineUsers.size !== 1 ? 's' : ''} online`;
     }
 
     // =============================================
@@ -810,8 +975,9 @@
     function openSettings() {
         DOM.settingsDisplayName.value = State.user?.display_name || '';
         DOM.settingsUsername.value = State.user?.username || '';
+
         if (State.user?.avatar_path) {
-            DOM.settingsAvatarImg.src = `${API}/api/download/${encodeURIComponent(State.user.avatar_path)}?token=${encodeURIComponent(State.token)}`;
+            DOM.settingsAvatarImg.src = fileUrl(State.user.avatar_path);
             DOM.settingsAvatarImg.classList.remove('hidden');
             DOM.settingsAvatarPreview.classList.add('hidden');
         } else {
@@ -819,7 +985,6 @@
             DOM.settingsAvatarPreview.classList.remove('hidden');
         }
 
-        // Theme selection
         DOM.themeOptions.forEach(opt => {
             opt.classList.toggle('active', opt.dataset.theme === State.theme);
         });
@@ -839,58 +1004,63 @@
     async function saveSettings() {
         const newName = DOM.settingsDisplayName.value.trim();
         if (newName && newName !== State.user?.display_name) {
-            await fetch(`${API}/api/profile?display_name=${encodeURIComponent(newName)}`, {
-                method: 'PATCH',
-                headers: { 'X-Auth-Token': State.token }
-            });
-            State.user.display_name = newName;
-            updateHeader();
-            showToast('Profile updated', 'success');
+            try {
+                const res = await fetch(`${API}/api/profile?display_name=${encodeURIComponent(newName)}`, {
+                    method: 'PATCH',
+                    headers: { 'X-Auth-Token': State.token }
+                });
+                if (res.ok) {
+                    State.user.display_name = newName;
+                    updateHeader();
+                    showToast('Display name updated', 'success');
+                }
+            } catch (e) {
+                showToast('Failed to update name', 'error');
+            }
         }
 
-        // Avatar
         const avatarFile = DOM.avatarInput.files[0];
         if (avatarFile) {
             const formData = new FormData();
             formData.append('file', avatarFile);
-            const res = await fetch(`${API}/api/profile/avatar`, {
-                method: 'POST',
-                body: formData,
-                headers: { 'X-Auth-Token': State.token }
-            });
-            if (res.ok) {
-                const data = await res.json();
-                State.user.avatar_path = data.avatar_path;
-                DOM.settingsAvatarImg.src = `${API}/api/download/${encodeURIComponent(data.avatar_path)}?token=${encodeURIComponent(State.token)}`;
-                DOM.settingsAvatarImg.classList.remove('hidden');
-                DOM.settingsAvatarPreview.classList.add('hidden');
-                showToast('Avatar updated', 'success');
+            try {
+                const res = await fetch(`${API}/api/profile/avatar`, {
+                    method: 'POST',
+                    body: formData,
+                    headers: { 'X-Auth-Token': State.token }
+                });
+                if (res.ok) {
+                    const data = await res.json();
+                    State.user.avatar_path = data.avatar_path;
+                    DOM.settingsAvatarImg.src = fileUrl(data.avatar_path);
+                    DOM.settingsAvatarImg.classList.remove('hidden');
+                    DOM.settingsAvatarPreview.classList.add('hidden');
+                    updateHeader();
+                    showToast('Avatar updated', 'success');
+                }
+            } catch (e) {
+                showToast('Failed to update avatar', 'error');
             }
         }
 
-        // Theme
         const selectedTheme = document.querySelector('.theme-option.active')?.dataset.theme || 'light';
-        if (selectedTheme !== State.theme || selectedTheme === 'custom') {
-            if (selectedTheme === 'custom') {
-                State.customColors.self = DOM.customSelfColor.value;
-                State.customColors.other = DOM.customOtherColor.value;
-                State.customColors.text = DOM.customTextColor.value;
-                localStorage.setItem('custom-self', State.customColors.self);
-                localStorage.setItem('custom-other', State.customColors.other);
-                localStorage.setItem('custom-text', State.customColors.text);
-            }
-            applyTheme(selectedTheme);
+        if (selectedTheme === 'custom') {
+            State.customColors.self = DOM.customSelfColor.value;
+            State.customColors.other = DOM.customOtherColor.value;
+            State.customColors.text = DOM.customTextColor.value;
+            localStorage.setItem('custom-self', State.customColors.self);
+            localStorage.setItem('custom-other', State.customColors.other);
+            localStorage.setItem('custom-text', State.customColors.text);
         }
+        applyTheme(selectedTheme);
 
         DOM.settingsModal.classList.add('hidden');
     }
 
-    // Custom color picker listeners
-    DOM.customSelfColor.addEventListener('input', () => DOM.selfColorHex.textContent = DOM.customSelfColor.value);
-    DOM.customOtherColor.addEventListener('input', () => DOM.otherColorHex.textContent = DOM.customOtherColor.value);
-    DOM.customTextColor.addEventListener('input', () => DOM.textColorHex.textContent = DOM.customTextColor.value);
+    DOM.customSelfColor.addEventListener('input', () => { DOM.selfColorHex.textContent = DOM.customSelfColor.value; });
+    DOM.customOtherColor.addEventListener('input', () => { DOM.otherColorHex.textContent = DOM.customOtherColor.value; });
+    DOM.customTextColor.addEventListener('input', () => { DOM.textColorHex.textContent = DOM.customTextColor.value; });
 
-    // Theme selection clicks
     DOM.themeOptions.forEach(opt => {
         opt.addEventListener('click', () => {
             DOM.themeOptions.forEach(o => o.classList.remove('active'));
@@ -907,7 +1077,6 @@
         });
     });
 
-    // Avatar upload button
     DOM.avatarUploadBtn.addEventListener('click', () => DOM.avatarInput.click());
     DOM.avatarInput.addEventListener('change', () => {
         const file = DOM.avatarInput.files[0];
@@ -935,19 +1104,32 @@
     }
 
     function escapeHtml(text) {
+        if (!text) return '';
         const div = document.createElement('div');
         div.textContent = text;
         return div.innerHTML;
     }
 
     function formatTime(ms) {
+        if (!ms) return '';
         const date = new Date(ms);
         const now = new Date();
         const diff = now - date;
-        if (diff < 60000) return 'now';
+
+        if (diff < 60000) return 'just now';
+        if (diff < 3600000) {
+            const mins = Math.floor(diff / 60000);
+            return `${mins}m ago`;
+        }
         if (date.toDateString() === now.toDateString()) {
             return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
         }
+        // Yesterday
+        const yesterday = new Date(now);
+        yesterday.setDate(yesterday.getDate() - 1);
+        if (date.toDateString() === yesterday.toDateString()) {
+            return 'Yesterday ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        }
         return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' +
                date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
     }
@@ -979,9 +1161,13 @@
                     State.user = data.user;
                     showChat();
                     connectWebSocket();
+                    startTimestampUpdater();
                     return;
                 }
             } catch (e) {}
+            // Token invalid - clear it
+            localStorage.removeItem('token');
+            State.token = null;
         }
         showAuth();
     }
@@ -995,11 +1181,22 @@
         DOM.authScreen.classList.remove('active');
         DOM.chatScreen.classList.add('active');
         updateHeader();
+        startTimestampUpdater();
     }
 
     function updateHeader() {
-        if (State.user) {
-            DOM.headerDisplayName.textContent = State.user.display_name;
+        if (!State.user) return;
+        const displayEl = document.getElementById('header-display-name');
+        if (displayEl) displayEl.textContent = State.user.display_name || State.user.username;
+
+        if (State.user.avatar_path) {
+            const img = document.getElementById('header-avatar');
+            const placeholder = document.getElementById('header-avatar-placeholder');
+            if (img) {
+                img.src = fileUrl(State.user.avatar_path);
+                img.classList.remove('hidden');
+            }
+            if (placeholder) placeholder.classList.add('hidden');
         }
     }
 
@@ -1016,39 +1213,39 @@
         });
     });
 
-    // Logout button
+    // Logout
     document.getElementById('logout-btn').addEventListener('click', async () => {
         if (State.token) {
-            await fetch(`${API}/api/auth/logout`, {
-                method: 'POST',
-                headers: { 'X-Auth-Token': State.token }
-            });
+            try {
+                await fetch(`${API}/api/auth/logout`, {
+                    method: 'POST',
+                    headers: { 'X-Auth-Token': State.token }
+                });
+            } catch (e) {}
         }
-        if (State.ws) State.ws.close();
-        State.ws = null;
+        if (State.ws) { State.ws.close(); State.ws = null; }
         localStorage.removeItem('token');
         State.token = null;
         State.user = null;
         State.messages.clear();
         State.messageOrder = [];
         State.onlineUsers.clear();
+        State.typingUsers.clear();
+        State.cursor = null;
+        State.hasMore = true;
         DOM.messagesList.innerHTML = '';
         DOM.emptyState.style.display = 'flex';
         showAuth();
         updateOnlineBadge();
     });
 
-    // Request notification permission
+    // Notification permission
     if (window.Notification && Notification.permission === 'default') {
         Notification.requestPermission();
     }
 
-    // Expose public methods
-    window.InfinityChat = {
-        replyTo,
-        editMessage,
-        deleteMessage
-    };
+    // Expose public API for inline onclick handlers
+    window.InfinityChat = { replyTo, editMessage, deleteMessage };
 
     init();
 })();