Update static/script.js

static/script.js

@@ -24,7 +24,13 @@
             self: localStorage.getItem('custom-self') || '#2563EB',
             other: localStorage.getItem('custom-other') || '#F3F4F6',
             text: localStorage.getItem('custom-text') || '#111827'
-        }
+        },
+        prefs: {
+            autoScroll: localStorage.getItem('pref-autoscroll') !== 'false',
+            showScrollBtn: localStorage.getItem('pref-scrollbtn') !== 'false',
+            showLatestBar: localStorage.getItem('pref-latestbar') !== 'false'
+        },
+        latestUnseen: null
     };
 
     // =============================================
@@ -51,6 +57,10 @@
         emptyState: document.getElementById('empty-state'),
         loadOlderBtn: document.getElementById('load-older-btn'),
         scrollBottomBtn: document.getElementById('scroll-bottom-btn'),
+        latestMessageBar: document.getElementById('latest-message-bar'),
+        lmbAvatar: document.getElementById('lmb-avatar'),
+        lmbName: document.getElementById('lmb-name'),
+        lmbText: document.getElementById('lmb-text'),
         typingIndicator: document.getElementById('typing-indicator'),
         typingText: document.getElementById('typing-text'),
         replyPreview: document.getElementById('reply-preview'),
@@ -86,6 +96,9 @@
         selfColorHex: document.getElementById('self-color-hex'),
         otherColorHex: document.getElementById('other-color-hex'),
         textColorHex: document.getElementById('text-color-hex'),
+        toggleAutoScroll: document.getElementById('toggle-autoscroll'),
+        toggleScrollBtn: document.getElementById('toggle-scroll-btn'),
+        toggleLatestBar: document.getElementById('toggle-latest-bar'),
         onlineBtn: document.getElementById('online-btn'),
         onlineUsersList: document.getElementById('online-users-list'),
         onlineTotal: document.getElementById('online-total'),
@@ -95,8 +108,7 @@
     const API = window.location.origin;
 
     // =============================================
-    // File URL helper - uses query param for token
-    // so img src, video src, window.open all work
+    // File URL helper
     // =============================================
     function fileUrl(filePath) {
         return `${API}/api/download/${encodeURIComponent(filePath)}?t=${encodeURIComponent(State.token)}`;
@@ -110,17 +122,17 @@
         State.theme = theme;
         localStorage.setItem('theme', theme);
         if (theme === 'custom') {
-            const selfColor = State.customColors.self;
-            const otherColor = State.customColors.other;
-            const textColor = State.customColors.text;
-            document.documentElement.style.setProperty('--bubble-self', selfColor);
-            document.documentElement.style.setProperty('--bubble-other', otherColor);
-            document.documentElement.style.setProperty('--bubble-other-text', textColor);
+            const s = State.customColors.self;
+            const o = State.customColors.other;
+            const t = State.customColors.text;
+            document.documentElement.style.setProperty('--bubble-self', s);
+            document.documentElement.style.setProperty('--bubble-other', o);
+            document.documentElement.style.setProperty('--bubble-other-text', t);
             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;
             };
-            document.documentElement.style.setProperty('--bubble-self-text', isLight(selfColor) ? '#111827' : '#FFFFFF');
+            document.documentElement.style.setProperty('--bubble-self-text', isLight(s) ? '#111827' : '#FFFFFF');
         } else {
             document.documentElement.style.removeProperty('--bubble-self');
             document.documentElement.style.removeProperty('--bubble-other');
@@ -132,7 +144,48 @@
     applyTheme(State.theme);
 
     // =============================================
-    // Timestamp updater - refreshes every 30s
+    // Preferences
+    // =============================================
+    function applyPrefs() {
+        if (DOM.toggleAutoScroll) DOM.toggleAutoScroll.checked = State.prefs.autoScroll;
+        if (DOM.toggleScrollBtn) DOM.toggleScrollBtn.checked = State.prefs.showScrollBtn;
+        if (DOM.toggleLatestBar) DOM.toggleLatestBar.checked = State.prefs.showLatestBar;
+        updateScrollUI();
+    }
+
+    function savePrefs() {
+        localStorage.setItem('pref-autoscroll', State.prefs.autoScroll);
+        localStorage.setItem('pref-scrollbtn', State.prefs.showScrollBtn);
+        localStorage.setItem('pref-latestbar', State.prefs.showLatestBar);
+    }
+
+    if (DOM.toggleAutoScroll) {
+        DOM.toggleAutoScroll.addEventListener('change', () => {
+            State.prefs.autoScroll = DOM.toggleAutoScroll.checked;
+            savePrefs();
+            if (State.prefs.autoScroll) {
+                scrollToBottom();
+                hideLatestBar();
+            }
+        });
+    }
+    if (DOM.toggleScrollBtn) {
+        DOM.toggleScrollBtn.addEventListener('change', () => {
+            State.prefs.showScrollBtn = DOM.toggleScrollBtn.checked;
+            savePrefs();
+            updateScrollUI();
+        });
+    }
+    if (DOM.toggleLatestBar) {
+        DOM.toggleLatestBar.addEventListener('change', () => {
+            State.prefs.showLatestBar = DOM.toggleLatestBar.checked;
+            savePrefs();
+            if (!State.prefs.showLatestBar) hideLatestBar();
+        });
+    }
+
+    // =============================================
+    // Timestamp updater
     // =============================================
     function startTimestampUpdater() {
         setInterval(() => {
@@ -143,19 +196,19 @@
     }
 
     // =============================================
-    // Toast Notifications
+    // Toast
     // =============================================
     function showToast(message, type = 'info') {
         const toast = document.createElement('div');
         toast.className = `toast toast-${type}`;
-        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>`;
+        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);
     }
 
     // =============================================
-    // Authentication
+    // Auth
     // =============================================
     DOM.authTabs.forEach(tab => {
         tab.addEventListener('click', () => {
@@ -170,9 +223,10 @@
 
     DOM.loginForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const username = document.getElementById('login-username').value.trim();
-        const password = document.getElementById('login-password').value;
-        await login(username, password);
+        await login(
+            document.getElementById('login-username').value.trim(),
+            document.getElementById('login-password').value
+        );
     });
 
     DOM.signupForm.addEventListener('submit', async (e) => {
@@ -236,29 +290,19 @@
     function connectWebSocket() {
         if (!State.token) return;
         if (State.ws && State.ws.readyState === WebSocket.OPEN) return;
-
         State.wsState = 'connecting';
         updateConnectionUI();
-
         const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const url = `${proto}//${location.host}/ws?token=${encodeURIComponent(State.token)}`;
-        State.ws = new WebSocket(url);
-
+        State.ws = new WebSocket(`${proto}//${location.host}/ws?token=${encodeURIComponent(State.token)}`);
         State.ws.onopen = () => {
             State.wsState = 'connected';
             updateConnectionUI();
             loadMessages();
             requestOnlineUsers();
         };
-
-        State.ws.onmessage = (event) => {
-            try {
-                handleWSMessage(JSON.parse(event.data));
-            } catch (e) {
-                console.error('WS parse error', e);
-            }
+        State.ws.onmessage = (e) => {
+            try { handleWSMessage(JSON.parse(e.data)); } catch(err) { console.error('WS parse error', err); }
         };
-
         State.ws.onclose = () => {
             if (State.wsState === 'connected') {
                 State.wsState = 'reconnecting';
@@ -269,7 +313,6 @@
                 updateConnectionUI();
             }
         };
-
         State.ws.onerror = () => {
             State.wsState = 'disconnected';
             updateConnectionUI();
@@ -277,21 +320,16 @@
     }
 
     function updateConnectionUI() {
-        const status = DOM.connectionStatus;
-        status.className = 'connection-status';
-        switch (State.wsState) {
-            case 'connected':
-                status.classList.add('connected');
-                DOM.connectionText.textContent = 'Connected';
-                break;
-            case 'reconnecting':
-                status.classList.add('reconnecting');
-                DOM.connectionText.textContent = 'Reconnecting...';
-                break;
-            default:
-                status.classList.add('disconnected');
-                DOM.connectionText.textContent = 'Disconnected';
-        }
+        DOM.connectionStatus.className = 'connection-status';
+        const map = {
+            connected: ['connected', 'Connected'],
+            reconnecting: ['reconnecting', 'Reconnecting...'],
+            disconnected: ['disconnected', 'Disconnected'],
+            connecting: ['reconnecting', 'Connecting...']
+        };
+        const [cls, txt] = map[State.wsState] || ['disconnected', 'Disconnected'];
+        DOM.connectionStatus.classList.add(cls);
+        DOM.connectionText.textContent = txt;
     }
 
     function handleWSMessage(msg) {
@@ -311,20 +349,27 @@
 
             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;
+                    const ex = State.messages.get(m.id);
+                    ex.status = m.status;
                     updateMessageBubble(m.id);
                     return;
                 }
                 State.messages.set(m.id, m);
-                // Insert in correct sorted position
-                insertMessageIdSorted(m.id, m.timestamp_ms);
+                insertMessageIdSorted(m.id);
                 renderMessage(m, true);
-                if (State.isAtBottom) scrollToBottom();
-                if (document.visibilityState === 'visible') sendMarkRead(m.id);
+
+                if (State.isAtBottom) {
+                    if (State.prefs.autoScroll) scrollToBottom();
+                } else {
+                    // Show latest message bar if not at bottom
+                    State.latestUnseen = m;
+                    showLatestBar(m);
+                }
+
+                if (document.visibilityState === 'visible' && State.isAtBottom) {
+                    sendMarkRead(m.id);
+                }
                 if (document.visibilityState !== 'visible' && Notification.permission === 'granted') {
                     new Notification(m.sender_display_name || m.sender_username, {
                         body: m.content || 'Sent a file',
@@ -334,13 +379,12 @@
                 break;
             }
 
-            case 'messages_loaded':
-                // Sort loaded messages by id ascending before inserting
+            case 'messages_loaded': {
                 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);
-                        insertMessageIdSorted(m.id, m.timestamp_ms);
+                        insertMessageIdSorted(m.id);
                     }
                 });
                 State.hasMore = msg.has_more;
@@ -348,6 +392,7 @@
                 renderAllMessages();
                 DOM.loadOlderBtn.classList.toggle('hidden', !msg.has_more);
                 break;
+            }
 
             case 'user_status':
                 if (msg.status === 'online') {
@@ -364,11 +409,8 @@
                 break;
 
             case 'typing_indicator':
-                if (msg.is_typing) {
-                    State.typingUsers.set(msg.user_id, msg);
-                } else {
-                    State.typingUsers.delete(msg.user_id);
-                }
+                if (msg.is_typing) State.typingUsers.set(msg.user_id, msg);
+                else State.typingUsers.delete(msg.user_id);
                 updateTypingIndicator();
                 break;
 
@@ -411,16 +453,86 @@
         }
     }
 
-    // Keep messageOrder sorted by id ascending at all times
-    function insertMessageIdSorted(id, ts) {
-        // Binary insert by id
+    function insertMessageIdSorted(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);
+        if (State.messageOrder[lo] !== id) {
+            State.messageOrder.splice(lo, 0, id);
+        }
+    }
+
+    // =============================================
+    // Latest message bar
+    // =============================================
+    function showLatestBar(msg) {
+        if (!State.prefs.showLatestBar || !DOM.latestMessageBar) return;
+        const name = msg.sender_display_name || msg.sender_username || 'Unknown';
+        const text = msg.content || (msg.file_name ? '📎 ' + msg.file_name : '📎 File');
+
+        // Avatar
+        if (msg.sender_avatar_path) {
+            DOM.lmbAvatar.innerHTML = `<img src="${fileUrl(msg.sender_avatar_path)}" alt="${escapeHtml(name)}">`;
+        } else {
+            DOM.lmbAvatar.textContent = name.charAt(0).toUpperCase();
+            DOM.lmbAvatar.style.background = 'var(--primary)';
+        }
+
+        DOM.lmbName.textContent = name + ':';
+        DOM.lmbText.textContent = truncate(text, 40);
+        DOM.latestMessageBar.classList.remove('hidden');
+    }
+
+    function hideLatestBar() {
+        if (DOM.latestMessageBar) DOM.latestMessageBar.classList.add('hidden');
+        State.latestUnseen = null;
+    }
+
+    if (DOM.latestMessageBar) {
+        DOM.latestMessageBar.addEventListener('click', () => {
+            scrollToBottom();
+            hideLatestBar();
+        });
+    }
+
+    // =============================================
+    // Scroll UI
+    // =============================================
+    function updateScrollUI() {
+        if (!State.isAtBottom) {
+            if (State.prefs.showScrollBtn) {
+                DOM.scrollBottomBtn.classList.remove('hidden');
+            } else {
+                DOM.scrollBottomBtn.classList.add('hidden');
+            }
+        } else {
+            DOM.scrollBottomBtn.classList.add('hidden');
+            hideLatestBar();
+        }
+    }
+
+    DOM.messagesScroll.addEventListener('scroll', () => {
+        const { scrollTop, scrollHeight, clientHeight } = DOM.messagesScroll;
+        State.isAtBottom = (scrollHeight - scrollTop - clientHeight) < 80;
+        updateScrollUI();
+        if (State.isAtBottom) {
+            hideLatestBar();
+            if (State.latestUnseen) sendMarkRead(State.latestUnseen.id);
+        }
+    });
+
+    DOM.scrollBottomBtn.addEventListener('click', () => {
+        scrollToBottom();
+        hideLatestBar();
+    });
+
+    function scrollToBottom() {
+        DOM.messagesScroll.scrollTop = DOM.messagesScroll.scrollHeight;
+        State.isAtBottom = true;
+        DOM.scrollBottomBtn.classList.add('hidden');
     }
 
     // =============================================
@@ -447,15 +559,13 @@
     // =============================================
     // Rendering
     // =============================================
-
-    // Build avatar HTML for a message sender
     function buildSenderAvatarHTML(msg) {
+        const name = escapeHtml(msg.sender_display_name || msg.sender_username || '?');
+        const initial = (msg.sender_display_name || msg.sender_username || '?').charAt(0).toUpperCase();
         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)}">`;
+            return `<img class="msg-avatar" src="${fileUrl(msg.sender_avatar_path)}" alt="${name}" title="${name}">`;
         }
-        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>`;
+        return `<div class="msg-avatar-placeholder" title="${name}">${initial}</div>`;
     }
 
     function renderMessage(msg, append = false) {
@@ -464,16 +574,12 @@
         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;
-                }
+                if (nextEl) { DOM.messagesList.insertBefore(wrapper, nextEl); return; }
             }
             DOM.messagesList.appendChild(wrapper);
         }
@@ -497,27 +603,33 @@
         const displayName = escapeHtml(msg.sender_display_name || msg.sender_username || 'Unknown');
         let html = '';
 
-        // Sender info row (show for others, and also for self on first load so you know it's you)
+        // Sender row: avatar + name, always shown
         if (!isSelf) {
-            html += `<div class="msg-sender-row">`;
-            html += buildSenderAvatarHTML(msg);
-            html += `<span class="msg-sender-name">${displayName}</span>`;
-            html += `</div>`;
+            html += `<div class="msg-sender-row">
+                ${buildSenderAvatarHTML(msg)}
+                <span class="msg-sender-name">${displayName}</span>
+            </div>`;
+        } else {
+            html += `<div class="msg-sender-row msg-sender-row-self">
+                <span class="msg-sender-name">${displayName}</span>
+                ${buildSenderAvatarHTML(msg)}
+            </div>`;
         }
 
         // Reply indicator
         if (msg.reply_to_id && State.messages.has(msg.reply_to_id)) {
             const reply = State.messages.get(msg.reply_to_id);
-            const replyName = escapeHtml(reply.sender_display_name || reply.sender_username || 'Unknown');
+            const rName = escapeHtml(reply.sender_display_name || reply.sender_username || 'Unknown');
+            const rText = escapeHtml(truncate(reply.content || (reply.file_name ? '📎 ' + reply.file_name : ''), 60));
             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>
+                <span><strong>${rName}:</strong> ${rText}</span>
             </div>`;
         }
 
         html += `<div class="message-bubble">`;
 
-        // Message text (only if non-empty)
+        // Text content
         if (msg.content) {
             html += `<div class="message-text">${escapeHtml(msg.content)}</div>`;
         }
@@ -527,37 +639,29 @@
             html += buildAttachmentHTML(msg);
         }
 
-        // Meta row: time + edited + status
-        html += `<div class="message-meta">`;
-        html += `<span class="message-time" data-ts="${msg.timestamp_ms}">${formatTime(msg.timestamp_ms)}</span>`;
+        // Meta
+        html += `<div class="message-meta">
+            <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 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 += `<span class="message-status${isRead ? ' read' : ''}">
+                <i class="fas fa-check${isRead ? '-double' : ''}"></i>
+            </span>`;
         }
         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>`;
+        // Actions - always visible
+        html += `<div class="message-actions">
+            <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 += `<button onclick="InfinityChat.editMessage(${msg.id})" title="Edit"><i class="fas fa-pen"></i></button>
+                     <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 += `<div class="msg-sender-row msg-sender-row-self">`;
-            html += `<span class="msg-sender-name">${displayName}</span>`;
-            html += buildSenderAvatarHTML(msg);
-            html += `</div>`;
-        }
-
         return html;
     }
 
@@ -572,33 +676,24 @@
                      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>
+                     onerror="this.parentElement.innerHTML='<div class=\\'attachment-file\\' 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()">
+                <video controls preload="metadata">
                     <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>`;
+            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">
@@ -619,7 +714,6 @@
     }
 
     function renderAllMessages() {
-        // Save scroll position if loading older messages
         const wasAtBottom = State.isAtBottom;
         const prevScrollHeight = DOM.messagesScroll.scrollHeight;
 
@@ -629,39 +723,22 @@
             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) {
+        if (wasAtBottom && State.prefs.autoScroll) {
             scrollToBottom();
+        } else if (!wasAtBottom) {
+            DOM.messagesScroll.scrollTop += (DOM.messagesScroll.scrollHeight - prevScrollHeight);
         } else {
-            // Maintain scroll position when prepending old messages
-            const newScrollHeight = DOM.messagesScroll.scrollHeight;
-            DOM.messagesScroll.scrollTop += (newScrollHeight - prevScrollHeight);
+            scrollToBottom();
         }
     }
 
-    function scrollToBottom() {
-        DOM.messagesScroll.scrollTop = DOM.messagesScroll.scrollHeight;
-    }
-
-    // =============================================
-    // Scroll detection
-    // =============================================
-    DOM.messagesScroll.addEventListener('scroll', () => {
-        const { scrollTop, scrollHeight, clientHeight } = DOM.messagesScroll;
-        State.isAtBottom = (scrollHeight - scrollTop - clientHeight) < 80;
-        DOM.scrollBottomBtn.classList.toggle('hidden', State.isAtBottom);
-    });
-
-    DOM.scrollBottomBtn.addEventListener('click', scrollToBottom);
-
     // =============================================
     // Compose
     // =============================================
@@ -670,7 +747,6 @@
         sendMessage();
     });
 
-    // Send on Enter (Shift+Enter for newline)
     DOM.messageInput.addEventListener('keydown', (e) => {
         if (e.key === 'Enter' && !e.shiftKey) {
             e.preventDefault();
@@ -692,21 +768,18 @@
             showToast('Not connected', 'warning');
             return;
         }
-
         const payload = {
             type: 'send_message',
             content: content,
             reply_to_id: State.replyTo ? State.replyTo.id : null,
             client_id: generateId()
         };
-
         if (State.pendingFile) {
             payload.file_path = State.pendingFile.file_path;
             payload.file_type = State.pendingFile.file_type;
             payload.file_name = State.pendingFile.file_name;
             payload.file_size = State.pendingFile.file_size;
         }
-
         State.ws.send(JSON.stringify(payload));
         DOM.messageInput.value = '';
         DOM.sendBtn.disabled = true;
@@ -729,7 +802,8 @@
         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 || u.username).join(', ') + (users.length === 1 ? ' is typing...' : ' are typing...');
+            DOM.typingText.textContent = users.map(u => u.display_name || u.username).join(', ') +
+                (users.length === 1 ? ' is typing...' : ' are typing...');
         }
     }
 
@@ -752,9 +826,7 @@
     }
 
     document.addEventListener('click', (e) => {
-        if (e.target.id === 'cancel-reply' || e.target.closest('#cancel-reply')) {
-            clearReply();
-        }
+        if (e.target.id === 'cancel-reply' || e.target.closest('#cancel-reply')) clearReply();
     });
 
     // =============================================
@@ -764,23 +836,19 @@
         const msg = State.messages.get(messageId);
         if (!msg) return;
         const newContent = prompt('Edit message:', msg.content);
-        if (newContent !== null && newContent.trim() !== '') {
-            if (State.ws?.readyState === WebSocket.OPEN) {
-                State.ws.send(JSON.stringify({ type: 'edit_message', message_id: messageId, content: newContent.trim() }));
-            }
+        if (newContent !== null && newContent.trim()) {
+            State.ws?.send(JSON.stringify({ type: 'edit_message', message_id: messageId, content: newContent.trim() }));
         }
     }
 
     function deleteMessage(messageId) {
         if (confirm('Permanently delete this message?')) {
-            if (State.ws?.readyState === WebSocket.OPEN) {
-                State.ws.send(JSON.stringify({ type: 'delete_message', message_id: messageId }));
-            }
+            State.ws?.send(JSON.stringify({ type: 'delete_message', message_id: messageId }));
         }
     }
 
     // =============================================
-    // File Upload (Chunked)
+    // File Upload
     // =============================================
     DOM.attachBtn.addEventListener('click', () => DOM.fileInput.click());
     DOM.fileInput.addEventListener('change', async (e) => {
@@ -794,29 +862,21 @@
         const CHUNK_SIZE = 5 * 1024 * 1024;
         const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
         const uploadId = generateId();
-
         DOM.uploadProgress.classList.remove('hidden');
         updateProgress(0, file.name);
 
         for (let i = 0; i < totalChunks; i++) {
-            const start = i * CHUNK_SIZE;
-            const end = Math.min(start + CHUNK_SIZE, file.size);
-            const blob = file.slice(start, end);
+            const blob = file.slice(i * CHUNK_SIZE, Math.min((i + 1) * CHUNK_SIZE, file.size));
             const formData = new FormData();
             formData.append('file', blob);
-
-            const url = `${API}/api/upload/chunk?chunk_index=${i}&total_chunks=${totalChunks}&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type || 'application/octet-stream')}&file_size=${file.size}&upload_id=${uploadId}`;
-
+            const url = `${API}/api/upload/chunk?chunk_index=${i}&total_chunks=${totalChunks}` +
+                `&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type || 'application/octet-stream')}` +
+                `&file_size=${file.size}&upload_id=${uploadId}`;
             try {
-                const res = await fetch(url, {
-                    method: 'POST',
-                    body: formData,
-                    headers: { 'X-Auth-Token': State.token }
-                });
+                const res = await fetch(url, { method: 'POST', body: formData, headers: { 'X-Auth-Token': State.token } });
                 if (!res.ok) throw new Error('Upload failed');
                 const data = await res.json();
                 updateProgress(((i + 1) / totalChunks) * 100, file.name);
-
                 if (data.status === 'complete') {
                     State.pendingFile = {
                         file_path: data.file_path,
@@ -865,9 +925,7 @@
     DOM.emojiBtn.addEventListener('click', (e) => {
         e.stopPropagation();
         DOM.emojiPicker.classList.toggle('hidden');
-        if (!DOM.emojiPicker.classList.contains('hidden')) {
-            renderEmojis('smileys');
-        }
+        if (!DOM.emojiPicker.classList.contains('hidden')) renderEmojis('smileys');
     });
 
     document.addEventListener('click', (e) => {
@@ -910,17 +968,17 @@
     }
 
     // =============================================
-    // Load More Messages
+    // Load More
     // =============================================
     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.isAtBottom = false;
             State.ws.send(JSON.stringify({ type: 'load_messages', cursor: State.cursor, limit: 50 }));
         }
     });
 
     // =============================================
-    // Online Users Modal
+    // Online Users
     // =============================================
     DOM.onlineBtn.addEventListener('click', () => {
         renderOnlineUsers();
@@ -949,8 +1007,7 @@
             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;
+                avatarHtml = (u.display_name || u.username || '?').charAt(0).toUpperCase();
             }
             div.innerHTML = `
                 <div class="user-avatar">${avatarHtml}</div>
@@ -964,7 +1021,7 @@
     }
 
     // =============================================
-    // Settings Modal
+    // Settings
     // =============================================
     document.getElementById('settings-btn').addEventListener('click', openSettings);
     document.querySelectorAll('[data-close="settings-modal"]').forEach(btn => {
@@ -998,6 +1055,9 @@
             DOM.textColorHex.textContent = State.customColors.text;
         }
 
+        // Load prefs into toggles
+        applyPrefs();
+
         DOM.settingsModal.classList.remove('hidden');
     }
 
@@ -1043,6 +1103,12 @@
             }
         }
 
+        // Save prefs from toggles
+        if (DOM.toggleAutoScroll) State.prefs.autoScroll = DOM.toggleAutoScroll.checked;
+        if (DOM.toggleScrollBtn) State.prefs.showScrollBtn = DOM.toggleScrollBtn.checked;
+        if (DOM.toggleLatestBar) State.prefs.showLatestBar = DOM.toggleLatestBar.checked;
+        savePrefs();
+
         const selectedTheme = document.querySelector('.theme-option.active')?.dataset.theme || 'light';
         if (selectedTheme === 'custom') {
             State.customColors.self = DOM.customSelfColor.value;
@@ -1115,16 +1181,11 @@
         const date = new Date(ms);
         const now = new Date();
         const diff = now - date;
-
         if (diff < 60000) return 'just now';
-        if (diff < 3600000) {
-            const mins = Math.floor(diff / 60000);
-            return `${mins}m ago`;
-        }
+        if (diff < 3600000) return `${Math.floor(diff / 60000)}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()) {
@@ -1148,9 +1209,10 @@
     }
 
     // =============================================
-    // Initialization
+    // Init
     // =============================================
     async function init() {
+        applyPrefs();
         if (State.token) {
             try {
                 const res = await fetch(`${API}/api/auth/verify`, {
@@ -1165,7 +1227,6 @@
                     return;
                 }
             } catch (e) {}
-            // Token invalid - clear it
             localStorage.removeItem('token');
             State.token = null;
         }
@@ -1188,23 +1249,17 @@
         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');
+            const ph = document.getElementById('header-avatar-placeholder');
+            if (img) { img.src = fileUrl(State.user.avatar_path); img.classList.remove('hidden'); }
+            if (ph) ph.classList.add('hidden');
         }
     }
 
-    // Password visibility toggle
     document.querySelectorAll('.input-toggle').forEach(btn => {
         btn.addEventListener('click', () => {
-            const targetId = btn.dataset.toggle;
-            const input = document.getElementById(targetId);
+            const input = document.getElementById(btn.dataset.toggle);
             if (input) {
                 input.type = input.type === 'password' ? 'text' : 'password';
                 const icon = btn.querySelector('i');
@@ -1213,14 +1268,10 @@
         });
     });
 
-    // Logout
     document.getElementById('logout-btn').addEventListener('click', async () => {
         if (State.token) {
             try {
-                await fetch(`${API}/api/auth/logout`, {
-                    method: 'POST',
-                    headers: { 'X-Auth-Token': State.token }
-                });
+                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; }
@@ -1233,18 +1284,18 @@
         State.typingUsers.clear();
         State.cursor = null;
         State.hasMore = true;
+        State.latestUnseen = null;
         DOM.messagesList.innerHTML = '';
         DOM.emptyState.style.display = 'flex';
+        hideLatestBar();
         showAuth();
         updateOnlineBadge();
     });
 
-    // Notification permission
     if (window.Notification && Notification.permission === 'default') {
         Notification.requestPermission();
     }
 
-    // Expose public API for inline onclick handlers
     window.InfinityChat = { replyTo, editMessage, deleteMessage };
 
     init();