Update static/script.js

static/script.js

@@ -1,631 +1,818 @@
+// ===================================================
+// InfinityChat - Secure Real-Time Messaging
+// Vanilla JavaScript Frontend
+// ===================================================
+
 (function() {
     'use strict';
-    // --- State ---
-    let currentUser = null;
-    let token = localStorage.getItem('token');
-    let ws = null;
-    let wsReconnectTimer = null;
-    let messages = {};
-    let messageIds = [];
-    let oldestMessageId = null;
-    let replyToId = null;
-    let typingTimer = null;
-    let pendingFile = null;
-    let isConnected = false;
-
-    const API = window.location.origin;
-
-    // DOM elements
-    const authScreen = document.getElementById('auth-screen');
-    const chatScreen = document.getElementById('chat-screen');
-    const authForm = document.getElementById('auth-form');
-    const authUsername = document.getElementById('auth-username');
-    const authPassword = document.getElementById('auth-password');
-    const authDisplayName = document.getElementById('auth-display-name');
-    const displayNameGroup = document.getElementById('display-name-group');
-    const authSubmit = document.getElementById('auth-submit');
-    const authError = document.getElementById('auth-error');
-    const loginTab = document.getElementById('login-tab');
-    const signupTab = document.getElementById('signup-tab');
-    const messagesList = document.getElementById('messages-list');
-    const composeForm = document.getElementById('compose-form');
-    const messageInput = document.getElementById('message-input');
-    const sendBtn = document.getElementById('send-btn');
-    const attachBtn = document.getElementById('attach-btn');
-    const fileInput = document.getElementById('file-input');
-    const replyPreview = document.getElementById('reply-preview');
-    const replyPreviewText = document.getElementById('reply-preview-text');
-    const cancelReply = document.getElementById('cancel-reply');
-    const typingIndicator = document.getElementById('typing-indicator');
-    const onlineCountSpan = document.getElementById('online-count');
-    const loadOlderBtn = document.getElementById('load-older-btn');
-    const settingsBtn = document.getElementById('settings-btn');
-    const logoutBtn = document.getElementById('logout-btn');
-    const settingsModal = document.getElementById('settings-modal');
-    const saveSettingsBtn = document.getElementById('save-settings');
-    const closeSettingsBtn = document.getElementById('close-settings');
-    const themeSelect = document.getElementById('theme-select');
-    const customThemeSettings = document.getElementById('custom-theme-settings');
-    const customSelfColor = document.getElementById('custom-self-color');
-    const customOtherColor = document.getElementById('custom-other-color');
-    const customTextColor = document.getElementById('custom-text-color');
-    const settingDisplayName = document.getElementById('setting-display-name');
-    const settingAvatar = document.getElementById('setting-avatar');
-    const avatarPreview = document.getElementById('avatar-preview');
-    const uploadProgress = document.getElementById('upload-progress');
-    const uploadBar = document.getElementById('upload-bar');
-    const uploadFilename = document.getElementById('upload-filename');
-
-    let isLogin = true;
-
-    // --- Theme ---
-    function applyTheme(name) {
-        document.body.className = name;
-        localStorage.setItem('theme', name);
-        if (name === 'theme-custom') {
-            const self = localStorage.getItem('customSelfColor') || '#25D366';
-            const other = localStorage.getItem('customOtherColor') || '#E5E5EA';
-            const txt = localStorage.getItem('customTextColor') || '#000';
-            document.documentElement.style.setProperty('--bubble-self', self);
-            document.documentElement.style.setProperty('--bubble-other', other);
-            document.documentElement.style.setProperty('--bubble-text-self', txt);
-            document.documentElement.style.setProperty('--bubble-text-other', txt);
-        }
-    }
-    
-    function loadTheme() {
-        const saved = localStorage.getItem('theme') || 'theme-light';
-        themeSelect.value = saved;
-        if (saved === 'theme-custom') customThemeSettings.classList.remove('hidden');
-        applyTheme(saved);
-    }
-
-    // --- Auth ---
-    loginTab.addEventListener('click', () => {
-        isLogin = true;
-        loginTab.classList.add('active');
-        signupTab.classList.remove('active');
-        displayNameGroup.style.display = 'none';
-        authSubmit.textContent = 'Login';
+
+    // ====================================
+    // State Management
+    // ====================================
+    const State = {
+        token: localStorage.getItem('token'),
+        user: null,
+        ws: null,
+        wsState: 'disconnected', // disconnected | connecting | connected | reconnecting
+        messages: new Map(),       // id -> message object
+        messageOrder: [],          // ordered IDs for rendering
+        cursor: null,              // oldest message ID currently loaded
+        hasMore: true,
+        replyTo: null,             // message being replied to
+        pendingFile: null,         // uploaded file awaiting send
+        typingUsers: new Map(),
+        onlineUsers: new Map(),
+        isAtBottom: true,
+        theme: localStorage.getItem('theme') || 'light',
+        customColors: {
+            self: localStorage.getItem('custom-self') || '#2563EB',
+            other: localStorage.getItem('custom-other') || '#F3F4F6',
+            text: localStorage.getItem('custom-text') || '#111827'
+        }
+    };
+
+    // ====================================
+    // DOM Elements 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'),
+        
+        // Chat 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'),
+        settingsAvatarImg: document.getElementById('settings-avatar-img'),
+        avatarInput: document.getElementById('avatar-input'),
+        themeOptions: document.querySelectorAll('.theme-option'),
+        customThemeSettings: document.getElementById('custom-theme-settings'),
+        
+        // Toast
+        toastContainer: document.getElementById('toast-container')
+    };
+
+    const API_BASE = window.location.origin;
+
+    // ====================================
+    // Theme Management
+    // ====================================
+    function applyTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        State.theme = theme;
+        localStorage.setItem('theme', theme);
+        
+        if (theme === 'custom') {
+            document.documentElement.style.setProperty('--bubble-self', State.customColors.self);
+            document.documentElement.style.setProperty('--bubble-other', State.customColors.other);
+            document.documentElement.style.setProperty('--bubble-other-text', State.customColors.text);
+            document.documentElement.style.setProperty('--bubble-self-text', isLightColor(State.customColors.self) ? '#111827' : '#FFFFFF');
+        }
+    }
+
+    function isLightColor(hex) {
+        const r = parseInt(hex.slice(1,3), 16);
+        const g = parseInt(hex.slice(3,5), 16);
+        const b = parseInt(hex.slice(5,7), 16);
+        return (0.299 * r + 0.587 * g + 0.114 * b) > 150;
+    }
+
+    applyTheme(State.theme);
+
+    // ====================================
+    // 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';
+        if (type === 'error') icon = 'exclamation-circle';
+        if (type === 'warning') icon = 'exclamation-triangle';
+        toast.innerHTML = `<i class="fas fa-${icon}"></i><span>${message}</span>`;
+        DOM.toastContainer.appendChild(toast);
+        setTimeout(() => toast.remove(), 4000);
+    }
+
+    // ====================================
+    // Authentication
+    // ====================================
+    DOM.authTabs.forEach(tab => {
+        tab.addEventListener('click', () => {
+            const target = tab.dataset.tab;
+            DOM.authTabs.forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            DOM.loginForm.classList.toggle('active', target === 'login');
+            DOM.signupForm.classList.toggle('active', target === 'signup');
+            DOM.authError.style.display = 'none';
+        });
     });
-    
-    signupTab.addEventListener('click', () => {
-        isLogin = false;
-        signupTab.classList.add('active');
-        loginTab.classList.remove('active');
-        displayNameGroup.style.display = 'block';
-        authSubmit.textContent = 'Sign Up';
+
+    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);
     });
-    
-    authForm.addEventListener('submit', async (e) => {
+
+    DOM.signupForm.addEventListener('submit', async (e) => {
         e.preventDefault();
-        const u = authUsername.value.trim();
-        const p = authPassword.value;
-        const d = authDisplayName.value.trim();
-        
-        if (!u || !p) {
-            authError.textContent = 'Please fill all fields.';
-            return;
-        }
-        
+        const username = document.getElementById('signup-username').value.trim();
+        const display = document.getElementById('signup-display').value.trim() || username;
+        const password = document.getElementById('signup-password').value;
+        await signup(username, password, display);
+    });
+
+    async function login(username, password) {
+        showAuthLoading();
         try {
-            const url = isLogin 
-                ? `${API}/login?username=${encodeURIComponent(u)}&password=${encodeURIComponent(p)}`
-                : `${API}/signup?username=${encodeURIComponent(u)}&password=${encodeURIComponent(p)}&display_name=${encodeURIComponent(d)}`;
-            
-            const res = await fetch(url, { method: 'POST' });
-            
-            if (!res.ok) {
-                const err = await res.json();
-                throw new Error(err.detail || 'Authentication failed');
-            }
-            
+            const res = await fetch(`${API_BASE}/api/auth/login?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}`, { method: 'POST' });
             const data = await res.json();
-            token = data.token;
-            currentUser = {
-                id: data.id,
-                username: data.username,
-                display_name: data.display_name,
-                avatar_path: data.avatar_path
-            };
-            
-            localStorage.setItem('token', token);
-            authError.textContent = '';
-            showChat();
+            if (!res.ok) throw new Error(data.detail || 'Login failed');
+            handleAuthSuccess(data);
         } catch (err) {
-            authError.textContent = err.message;
+            showAuthError(err.message);
+        } finally {
+            hideAuthLoading();
         }
-    });
+    }
 
-    async function autoLogin() {
-        if (!token) {
-            return false;
-        }
-        
+    async function signup(username, password, display) {
+        showAuthLoading();
         try {
-            const res = await fetch(`${API}/me`, {
-                headers: { 'token': token }
-            });
-            
-            if (!res.ok) {
-                token = null;
-                localStorage.removeItem('token');
-                return false;
-            }
-            
-            currentUser = await res.json();
-            return true;
-        } catch (e) {
-            token = null;
-            localStorage.removeItem('token');
-            return false;
+            const res = await fetch(`${API_BASE}/api/auth/signup?username=${encodeURIComponent(username)}&password=${encodeURIComponent(password)}&display_name=${encodeURIComponent(display)}`, { method: 'POST' });
+            const data = await res.json();
+            if (!res.ok) throw new Error(data.detail || 'Signup failed');
+            handleAuthSuccess(data);
+        } catch (err) {
+            showAuthError(err.message);
+        } finally {
+            hideAuthLoading();
         }
     }
 
-    function showAuth() {
-        authScreen.classList.remove('hidden');
-        chatScreen.classList.add('hidden');
-        disconnectWS();
+    function handleAuthSuccess(data) {
+        State.token = data.token;
+        State.user = data.user;
+        localStorage.setItem('token', State.token);
+        showChat();
+        connectWebSocket();
     }
 
-    function showChat() {
-        authScreen.classList.add('hidden');
-        chatScreen.classList.remove('hidden');
-        connectWS();
-        loadMessages();
+    function showAuthLoading() {
+        DOM.authLoading.classList.remove('hidden');
+        DOM.authError.style.display = 'none';
     }
 
-    // --- WebSocket (fixed – never send null as token) ---
-    function connectWS() {
-        // Don't connect if we don't have a valid token
-        if (!token || token === 'null' || token === 'undefined') {
-            console.warn('No valid token – not connecting WebSocket');
-            return;
-        }
+    function hideAuthLoading() {
+        DOM.authLoading.classList.add('hidden');
+    }
+
+    function showAuthError(msg) {
+        DOM.authErrorText.textContent = msg;
+        DOM.authError.style.display = 'flex';
+    }
+
+    // ====================================
+    // WebSocket Connection
+    // ====================================
+    function connectWebSocket() {
+        if (State.ws && State.ws.readyState === WebSocket.OPEN) return;
+        if (!State.token) return;
         
-        // Don't create duplicate connections
-        if (ws && ws.readyState === WebSocket.OPEN) {
-            return;
-        }
-        
-        // Close any existing connection
-        if (ws) {
-            ws.close();
-            ws = null;
-        }
+        State.wsState = 'connecting';
+        updateConnectionUI();
         
         const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
-        const wsUrl = `${proto}//${location.host}/ws?token=${encodeURIComponent(token)}`;
+        const url = `${proto}//${location.host}/ws?token=${encodeURIComponent(State.token)}`;
         
-        console.log('Connecting WebSocket...');
-        ws = new WebSocket(wsUrl);
+        State.ws = new WebSocket(url);
         
-        ws.onopen = () => {
-            console.log('WebSocket connected');
-            isConnected = true;
-            // Clear any reconnect timer
-            if (wsReconnectTimer) {
-                clearTimeout(wsReconnectTimer);
-                wsReconnectTimer = null;
-            }
-            // Request initial message load
-            ws.send(JSON.stringify({ type: 'load_messages', limit: 50 }));
+        State.ws.onopen = () => {
+            State.wsState = 'connected';
+            updateConnectionUI();
+            loadMessages();
+            requestOnlineUsers();
         };
         
-        ws.onmessage = (ev) => {
-            try {
-                handleWSMessage(JSON.parse(ev.data));
-            } catch (e) {
-                console.error('Error parsing WS message:', e);
-            }
-        };
+        State.ws.onmessage = (event) => handleWSMessage(JSON.parse(event.data));
         
-        ws.onclose = () => {
-            console.log('WebSocket closed');
-            isConnected = false;
-            ws = null;
-            // Only reconnect if we have a valid token
-            if (token && token !== 'null' && token !== 'undefined' && currentUser) {
-                wsReconnectTimer = setTimeout(connectWS, 3000);
+        State.ws.onclose = () => {
+            if (State.wsState === 'connected') {
+                State.wsState = 'reconnecting';
+                updateConnectionUI();
+                setTimeout(connectWebSocket, 3000);
+            } else {
+                State.wsState = 'disconnected';
+                updateConnectionUI();
             }
         };
         
-        ws.onerror = (err) => {
-            console.error('WebSocket error:', err);
+        State.ws.onerror = () => {
+            State.wsState = 'disconnected';
+            updateConnectionUI();
         };
     }
 
-    function disconnectWS() {
-        if (wsReconnectTimer) {
-            clearTimeout(wsReconnectTimer);
-            wsReconnectTimer = null;
-        }
-        if (ws) {
-            ws.close();
-            ws = null;
+    function updateConnectionUI() {
+        const status = DOM.connectionStatus;
+        const text = DOM.connectionText;
+        status.className = 'connection-status';
+        
+        switch (State.wsState) {
+            case 'connected':
+                status.classList.add('connected');
+                text.textContent = 'Connected';
+                break;
+            case 'connecting':
+            case 'reconnecting':
+                status.classList.add('reconnecting');
+                text.textContent = State.wsState === 'reconnecting' ? 'Reconnecting...' : 'Connecting...';
+                break;
+            default:
+                status.classList.add('disconnected');
+                text.textContent = 'Disconnected - trying to reconnect...';
+                break;
         }
-        isConnected = false;
     }
 
+    // ====================================
+    // WebSocket Message Handler
+    // ====================================
     function handleWSMessage(msg) {
         switch (msg.type) {
-            case 'online_users':
-                onlineCountSpan.textContent = `(${msg.users.length} online)`;
+            case 'connection_established':
+                State.user = {
+                    id: msg.user_id,
+                    username: msg.username,
+                    display_name: msg.display_name,
+                    avatar_path: msg.avatar_path
+                };
+                msg.online_users.forEach(u => State.onlineUsers.set(u.id, u));
+                updateOnlineBadge();
+                updateHeaderInfo();
                 break;
+                
             case 'new_message':
-                if (messages[msg.id]) return;
-                messages[msg.id] = msg;
-                messageIds.push(msg.id);
-                renderMessage(msg);
-                scrollBottom();
-                // Mark as read if visible
-                if (document.visibilityState === 'visible' && isConnected) {
-                    ws.send(JSON.stringify({ type: 'mark_read', up_to_message_id: msg.id }));
-                }
-                // Browser notification
-                if (document.visibilityState !== 'visible' && Notification.permission === 'granted') {
-                    new Notification(`New message from ${msg.display_name || msg.username}`, {
-                        body: msg.content || 'Sent a file'
-                    });
+                handleNewMessage(msg.message);
+                break;
+                
+            case 'messages_loaded':
+                handleMessagesLoaded(msg.messages, msg.has_more);
+                State.hasMore = msg.has_more;
+                if (msg.next_cursor) State.cursor = msg.next_cursor;
+                DOM.loadOlderBtn.classList.toggle('hidden', !msg.has_more);
+                break;
+                
+            case 'user_status':
+                if (msg.status === 'online') {
+                    State.onlineUsers.set(msg.user_id, { id: msg.user_id, username: msg.username, display_name: msg.display_name, avatar_path: msg.avatar_path });
+                } else {
+                    State.onlineUsers.delete(msg.user_id);
                 }
+                updateOnlineBadge();
                 break;
-            case 'messages_batch':
-                if (msg.messages.length > 0) {
-                    for (const m of msg.messages) {
-                        if (!messages[m.id]) {
-                            messages[m.id] = m;
-                            messageIds.unshift(m.id);
-                        }
-                    }
-                    renderAll();
-                    scrollBottom();
+                
+            case 'typing_indicator':
+                if (msg.is_typing) {
+                    State.typingUsers.set(msg.user_id, msg);
+                } else {
+                    State.typingUsers.delete(msg.user_id);
                 }
-                loadOlderBtn.classList.toggle('hidden', msg.messages.length < 50);
+                updateTypingIndicator();
                 break;
-            case 'typing_update':
-                typingIndicator.textContent = msg.is_typing ? `${msg.username} is typing...` : '';
+                
+            case 'message_edited':
+                handleMessageEdit(msg.message_id, msg.content, msg.editor_id);
                 break;
-            case 'edit_message':
-                if (messages[msg.message_id]) {
-                    messages[msg.message_id].content = msg.content;
-                    messages[msg.message_id].is_edited = true;
-                    updateBubble(msg.message_id);
-                }
+                
+            case 'message_deleted':
+                handleMessageDelete(msg.message_id);
                 break;
-            case 'delete_message':
-                if (messages[msg.message_id]) {
-                    messages[msg.message_id].is_deleted = true;
-                    updateBubble(msg.message_id);
-                }
+                
+            case 'message_read':
+                handleMessageRead(msg.message_id, msg.reader_username);
                 break;
-            case 'read_receipt':
-                if (messages[msg.message_id] && messages[msg.message_id].sender_id === currentUser?.id) {
-                    messages[msg.message_id].status = 'read';
-                    updateBubble(msg.message_id);
-                }
+                
+            case 'online_users':
+                State.onlineUsers.clear();
+                msg.users.forEach(u => State.onlineUsers.set(u.id, u));
+                updateOnlineBadge();
+                break;
+                
+            case 'error':
+                showToast(msg.message, 'error');
                 break;
         }
     }
 
-    // --- Message rendering (same as before) ---
-    function renderMessage(msg) {
-        const el = document.getElementById(`msg-${msg.id}`);
-        if (el) {
-            updateBubble(msg.id);
-            return;
+    // ====================================
+    // Message Handling
+    // ====================================
+    function handleNewMessage(message) {
+        if (State.messages.has(message.id)) return;
+        State.messages.set(message.id, message);
+        State.messageOrder.push(message.id);
+        renderMessage(message);
+        scrollToBottom();
+        
+        // Mark as read if visible
+        if (document.visibilityState === 'visible') {
+            sendMarkRead(message.id);
         }
         
-        const div = document.createElement('div');
-        div.id = `msg-${msg.id}`;
-        div.className = `message-bubble ${msg.sender_id === currentUser?.id ? 'message-self' : 'message-other'}`;
-        div.innerHTML = buildHTML(msg);
-        messagesList.appendChild(div);
+        // Browser notification if tab not focused
+        if (document.visibilityState !== 'visible' && Notification.permission === 'granted') {
+            const sender = message.sender_display_name || message.sender_username;
+            const body = message.content || (message.file_path ? 'Sent a file' : 'New message');
+            new Notification(`📨 ${sender}`, { body, icon: '/static/icon.png' });
+        }
+    }
+
+    function handleMessagesLoaded(msgs, hasMore) {
+        msgs.forEach(msg => {
+            if (!State.messages.has(msg.id)) {
+                State.messages.set(msg.id, msg);
+                State.messageOrder.unshift(msg.id);
+            }
+        });
+        renderAllMessages();
+        // Keep scroll position
+    }
+
+    function handleMessageEdit(messageId, newContent, editorId) {
+        const msg = State.messages.get(messageId);
+        if (msg) {
+            msg.content = newContent;
+            msg.is_edited = true;
+            updateMessageBubble(messageId);
+        }
     }
 
-    function buildHTML(msg) {
-        if (msg.is_deleted) return '<em>This message was deleted</em>';
+    function handleMessageDelete(messageId) {
+        const msg = State.messages.get(messageId);
+        if (msg) {
+            msg.is_deleted = true;
+            updateMessageBubble(messageId);
+        }
+    }
+
+    function handleMessageRead(messageId, readerUsername) {
+        const msg = State.messages.get(messageId);
+        if (msg && msg.sender_id === State.user.id) {
+            msg.status = 'read';
+            updateMessageBubble(messageId);
+        }
+    }
+
+    // ====================================
+    // Message Rendering
+    // ====================================
+    function renderMessage(msg) {
+        if (State.messagesList.querySelector(`[data-id="${msg.id}"]`)) return;
+        
+        const wrapper = document.createElement('div');
+        wrapper.className = `message-wrapper ${msg.sender_id === State.user.id ? 'self' : 'other'}`;
+        wrapper.dataset.id = msg.id;
+        wrapper.innerHTML = buildMessageHTML(msg);
+        State.messagesList.appendChild(wrapper);
+    }
+
+    function buildMessageHTML(msg) {
+        if (msg.is_deleted) {
+            return `<div class="message-bubble deleted">This message was deleted</div>`;
+        }
         
+        const isSelf = msg.sender_id === State.user?.id;
         let html = '';
-        if (msg.reply_to_id && messages[msg.reply_to_id]) {
-            const reply = messages[msg.reply_to_id];
-            html += `<div class="reply-indicator">↩ ${reply.display_name || reply.username}: ${truncate(reply.content, 40)}</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>`;
         }
         
-        html += `<div class="message-info">
-                    <span>${msg.display_name || msg.username}</span>
-                    <span class="timestamp">${formatTime(msg.timestamp_ms)}</span>
-                 </div>`;
+        // Bubble content
+        html += `<div class="message-bubble">`;
         html += `<div class="message-text">${escapeHtml(msg.content)}</div>`;
         
-        if (msg.is_edited) html += ` <em class="edited-label">[edited]</em>`;
-        if (msg.file_path) html += renderAttachment(msg);
-        
-        // Status indicators for own messages
-        if (msg.sender_id === currentUser?.id && !msg.is_deleted) {
-            const statusIcon = msg.status === 'read' ? '✓✓' : '✓';
-            html += `<div class="message-status">${statusIcon}</div>`;
-            html += `<div class="message-actions">
-                        <button onclick="window.editMsg(${msg.id})">✏️</button>
-                        <button onclick="window.deleteMsg(${msg.id})">🗑️</button>
-                        <button onclick="window.replyTo(${msg.id})">↩</button>
-                     </div>`;
+        // Attachment
+        if (msg.file_path) {
+            html += buildAttachmentHTML(msg);
         }
         
+        // Meta
+        html += `<div class="message-meta">
+            <span class="message-time">${formatTime(msg.timestamp_ms)}</span>`;
+        if (msg.is_edited) html += `<span class="edited-label">edited</span>`;
+        if (isSelf) {
+            const checkIcon = 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' : ''}">${checkIcon}</span>`;
+        }
+        html += `</div>`;
+        
+        // Actions
+        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>
+            <button onclick="InfinityChat.deleteMessage(${msg.id})" title="Delete"><i class="fas fa-trash"></i></button>`;
+        }
+        html += `</div>`;
+        html += `</div>`;
+        
         return html;
     }
 
-    function renderAttachment(msg) {
-        const url = `${API}/download/${msg.file_path}?token=${encodeURIComponent(token)}`;
-        
-        if (msg.file_type.startsWith('image/')) {
-            return `<div class="attachment"><img src="${url}" alt="${msg.file_name}" onerror="this.parentElement.innerHTML='<em>Failed to decode</em>'"></div>`;
-        }
-        if (msg.file_type.startsWith('video/')) {
-            return `<div class="attachment"><video controls><source src="${url}" type="${msg.file_type}">Your browser doesn't support video</video></div>`;
-        }
-        if (msg.file_type.startsWith('audio/')) {
+    function buildAttachmentHTML(msg) {
+        const url = `${API_BASE}/api/download/${encodeURIComponent(msg.file_path)}?token=${encodeURIComponent(State.token)}`;
+        if (msg.file_type?.startsWith('image/')) {
+            return `<div class="attachment">
+                <img src="${url}" alt="${msg.file_name}" loading="lazy" onclick="window.open('${url}')">
+            </div>`;
+        }
+        if (msg.file_type?.startsWith('video/')) {
+            return `<div class="attachment">
+                <video controls preload="metadata"><source src="${url}" type="${msg.file_type}"></video>
+            </div>`;
+        }
+        if (msg.file_type?.startsWith('audio/')) {
             return `<div class="attachment"><audio controls src="${url}"></audio></div>`;
         }
-        return `<div class="attachment"><div class="file-preview" onclick="window.open('${url}')">📄 ${escapeHtml(msg.file_name)}</div></div>`;
+        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>`;
     }
 
-    function updateBubble(id) {
-        const el = document.getElementById(`msg-${id}`);
-        if (!el) return;
-        const msg = messages[id];
+    function updateMessageBubble(messageId) {
+        const existing = State.messagesList.querySelector(`[data-id="${messageId}"]`);
+        if (!existing) return;
+        const msg = State.messages.get(messageId);
         if (!msg) return;
-        
-        el.className = `message-bubble ${msg.sender_id === currentUser?.id ? 'message-self' : 'message-other'}`;
-        if (msg.is_deleted) el.classList.add('deleted-bubble');
-        el.innerHTML = buildHTML(msg);
-    }
-
-    function renderAll() {
-        messagesList.innerHTML = '';
-        messageIds.forEach(id => {
-            if (messages[id]) renderMessage(messages[id]);
-        });
+        existing.innerHTML = buildMessageHTML(msg);
     }
 
-    function scrollBottom() {
-        const container = document.getElementById('messages-container');
-        container.scrollTop = container.scrollHeight;
+    function renderAllMessages() {
+        State.messagesList.innerHTML = '';
+        if (State.messageOrder.length === 0) {
+            State.emptyState.style.display = 'flex';
+        } else {
+            State.emptyState.style.display = 'none';
+            State.messageOrder.forEach(id => {
+                const msg = State.messages.get(id);
+                if (msg) renderMessage(msg);
+            });
+        }
     }
 
-    // --- Message actions ---
-    window.replyTo = function(id) {
-        replyToId = id;
-        const m = messages[id];
-        if (m) {
-            replyPreviewText.textContent = `Replying to ${m.display_name || m.username}: ${truncate(m.content, 30)}`;
-            replyPreview.classList.remove('hidden');
-        }
-    };
-    
-    cancelReply.addEventListener('click', () => {
-        replyToId = null;
-        replyPreview.classList.add('hidden');
+    // ====================================
+    // Sending Messages
+    // ====================================
+    DOM.composeForm.addEventListener('submit', (e) => {
+        e.preventDefault();
+        sendMessage();
     });
-    
-    window.editMsg = function(id) {
-        const newContent = prompt('Edit message:', messages[id]?.content || '');
-        if (newContent !== null && newContent.trim() !== '' && isConnected) {
-            ws.send(JSON.stringify({ type: 'edit_message', message_id: id, content: newContent }));
-        }
-    };
-    
-    window.deleteMsg = function(id) {
-        if (confirm('Delete this message permanently?') && isConnected) {
-            ws.send(JSON.stringify({ type: 'delete_message', message_id: id }));
-        }
-    };
 
-    // --- Sending messages ---
-    composeForm.addEventListener('submit', (e) => {
-        e.preventDefault();
-        if (!isConnected) {
-            console.warn('Not connected – cannot send');
-            return;
-        }
-        
-        const content = messageInput.value.trim();
-        if (!content && !pendingFile) return;
-        
-        const msg = {
-            type: 'chat_message',
-            content: content || '',
-            reply_to_id: replyToId,
-            client_id: Date.now().toString(36) + Math.random().toString(36).slice(2)
+    function sendMessage() {
+        const content = DOM.messageInput.value.trim();
+        if (!content && !State.pendingFile) return;
+        if (!State.ws || State.ws.readyState !== WebSocket.OPEN) return;
+
+        const payload = {
+            type: 'send_message',
+            content: content,
+            reply_to_id: State.replyTo ? State.replyTo.id : null,
+            client_id: generateClientId()
         };
-        
-        if (pendingFile) {
-            msg.file_path = pendingFile.file_path;
-            msg.file_type = pendingFile.file_type;
-            msg.file_name = pendingFile.file_name;
-            pendingFile = null;
+
+        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;
         }
-        
-        ws.send(JSON.stringify(msg));
-        messageInput.value = '';
+
+        State.ws.send(JSON.stringify(payload));
+        DOM.messageInput.value = '';
         clearReply();
+        clearPendingFile();
+        autoResizeTextarea();
+        sendTyping(false);
+    }
+
+    DOM.sendBtn.disabled = true;
+    DOM.messageInput.addEventListener('input', () => {
+        const hasContent = DOM.messageInput.value.trim().length > 0 || State.pendingFile !== null;
+        DOM.sendBtn.disabled = !hasContent;
+        if (hasContent) sendTyping(true);
+        autoResizeTextarea();
     });
 
+    // ====================================
+    // Typing Indicator
+    // ====================================
+    let typingTimer = null;
+    function sendTyping(isTyping) {
+        if (isTyping) {
+            clearTimeout(typingTimer);
+            if (State.ws?.readyState === WebSocket.OPEN) {
+                State.ws.send(JSON.stringify({ type: 'typing', is_typing: true }));
+            }
+            typingTimer = setTimeout(() => sendTyping(false), 2000);
+        } else {
+            clearTimeout(typingTimer);
+            if (State.ws?.readyState === WebSocket.OPEN) {
+                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);
+        DOM.typingIndicator.classList.toggle('hidden', users.length === 0);
+        if (users.length > 0) {
+            DOM.typingText.textContent = users.map(u => u.display_name).join(', ') + ' typing...';
+        }
+    }
+
+    // ====================================
+    // Reply
+    // ====================================
+    function replyTo(messageId) {
+        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.replyPreview.classList.remove('hidden');
+        DOM.messageInput.focus();
+    }
+
     function clearReply() {
-        replyToId = null;
-        replyPreview.classList.add('hidden');
-    }
-
-    // --- Typing indicator ---
-    messageInput.addEventListener('input', () => {
-        if (!isConnected) return;
-        ws.send(JSON.stringify({ type: 'typing', is_typing: true }));
-        clearTimeout(typingTimer);
-        typingTimer = setTimeout(() => {
-            if (isConnected) ws.send(JSON.stringify({ type: 'typing', is_typing: false }));
-        }, 2000);
+        State.replyTo = null;
+        DOM.replyPreview.classList.add('hidden');
+    }
+
+    document.addEventListener('click', (e) => {
+        if (e.target.id === 'cancel-reply') clearReply();
     });
 
-    // --- File upload ---
-    attachBtn.addEventListener('click', () => fileInput.click());
-    
-    fileInput.addEventListener('change', async (e) => {
+    // ====================================
+    // Edit & Delete
+    // ====================================
+    function editMessage(messageId) {
+        const msg = State.messages.get(messageId);
+        if (!msg) return;
+        const newContent = prompt('Edit message:', msg.content);
+        if (newContent !== null && newContent.trim() !== '') {
+            State.ws.send(JSON.stringify({ type: 'edit_message', message_id: messageId, content: newContent }));
+        }
+    }
+
+    function deleteMessage(messageId) {
+        if (confirm('Delete this message permanently?')) {
+            State.ws.send(JSON.stringify({ type: 'delete_message', message_id: messageId }));
+        }
+    }
+
+    // ====================================
+    // File Upload (Chunked)
+    // ====================================
+    DOM.attachBtn.addEventListener('click', () => DOM.fileInput.click());
+    DOM.fileInput.addEventListener('change', handleFileSelect);
+
+    async function handleFileSelect(e) {
         const file = e.target.files[0];
         if (!file) return;
-        
-        const CHUNK = 5 * 1024 * 1024; // 5MB
-        const total = Math.ceil(file.size / CHUNK);
-        const uploadId = Date.now().toString(36) + Math.random().toString(36).slice(2);
-        
-        uploadProgress.classList.remove('hidden');
-        uploadFilename.textContent = file.name;
-        uploadBar.value = 0;
-        uploadBar.max = 100;
-        
-        for (let i = 0; i < total; i++) {
-            const start = i * CHUNK;
-            const end = Math.min(start + CHUNK, file.size);
+        await uploadFileChunked(file);
+        DOM.fileInput.value = '';
+    }
+
+    async function uploadFileChunked(file) {
+        const CHUNK_SIZE = 5 * 1024 * 1024; // 5MB
+        const totalChunks = Math.ceil(file.size / CHUNK_SIZE);
+        const uploadId = generateClientId();
+
+        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 fd = new FormData();
-            fd.append('file', blob);
-            
-            const url = `${API}/upload_chunk?chunk_index=${i}&total_chunks=${total}&file_name=${encodeURIComponent(file.name)}&file_type=${encodeURIComponent(file.type || 'application/octet-stream')}&upload_id=${uploadId}`;
-            
-            try {
-                const res = await fetch(url, {
-                    method: 'POST',
-                    body: fd,
-                    headers: { 'token': token }
-                });
-                
-                if (!res.ok) throw new Error('Upload failed');
-                
-                const data = await res.json();
-                
-                if (data.status === 'complete') {
-                    pendingFile = {
-                        file_path: data.file_path,
-                        file_type: data.file_type,
-                        file_name: data.file_name
-                    };
-                    uploadProgress.classList.add('hidden');
-                    break;
-                }
-                
-                uploadBar.value = ((i + 1) / total) * 100;
-            } catch (err) {
-                alert('Upload error: ' + err.message);
-                uploadProgress.classList.add('hidden');
-                break;
+
+            const formData = new FormData();
+            formData.append('file', blob);
+
+            const url = `${API_BASE}/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 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();
+
+            if (data.status === 'complete') {
+                State.pendingFile = {
+                    file_path: data.file_path,
+                    file_type: data.file_type,
+                    file_name: data.file_name,
+                    file_size: data.file_size
+                };
+                showUploadPreview(data.file_name);
+                DOM.uploadProgress.classList.add('hidden');
+                return;
             }
+            updateProgress(((i + 1) / totalChunks) * 100, file.name);
         }
-        
-        fileInput.value = '';
-    });
+        DOM.uploadProgress.classList.add('hidden');
+    }
+
+    function updateProgress(percent, filename) {
+        DOM.progressFill.style.width = `${percent}%`;
+        DOM.progressText.textContent = `${Math.round(percent)}%`;
+        DOM.uploadFilename.textContent = filename;
+    }
+
+    function showUploadPreview(filename) {
+        DOM.uploadPreview.classList.remove('hidden');
+        DOM.uploadFilename.textContent = filename;
+        DOM.sendBtn.disabled = false;
+    }
+
+    function clearPendingFile() {
+        State.pendingFile = null;
+        DOM.uploadPreview.classList.add('hidden');
+    }
+
+    document.getElementById('cancel-upload').addEventListener('click', clearPendingFile);
+
+    // ====================================
+    // Messages Loading & Pagination
+    // ====================================
+    function loadMessages() {
+        if (!State.ws || State.ws.readyState !== WebSocket.OPEN) return;
+        State.ws.send(JSON.stringify({ type: 'load_messages', limit: 50 }));
+    }
 
-    // --- Load older messages ---
-    loadOlderBtn.addEventListener('click', () => {
-        if (isConnected && messageIds.length > 0) {
-            const oldestId = messageIds[0];
-            ws.send(JSON.stringify({ type: 'load_messages', before_id: oldestId, limit: 50 }));
+    DOM.loadOlderBtn.addEventListener('click', () => {
+        if (State.cursor && State.hasMore) {
+            State.ws.send(JSON.stringify({ type: 'load_messages', cursor: State.cursor, limit: 50 }));
         }
     });
 
-    function loadMessages() {
-        if (isConnected) {
-            ws.send(JSON.stringify({ type: 'load_messages', limit: 50 }));
+    // Scroll detection for load more and auto-scroll behavior
+    DOM.messagesScroll.addEventListener('scroll', () => {
+        const { scrollTop, scrollHeight, clientHeight } = DOM.messagesScroll;
+        State.isAtBottom = scrollHeight - scrollTop - clientHeight < 60;
+        DOM.scrollBottomBtn.classList.toggle('hidden', State.isAtBottom);
+    });
+
+    DOM.scrollBottomBtn.addEventListener('click', scrollToBottom);
+
+    function scrollToBottom() {
+        DOM.messagesScroll.scrollTop = DOM.messagesScroll.scrollHeight;
+    }
+
+    // ====================================
+    // Online Users Modal
+    // ====================================
+    function requestOnlineUsers() {
+        if (State.ws?.readyState === WebSocket.OPEN) {
+            State.ws.send(JSON.stringify({ type: 'get_online_users' }));
         }
     }
 
-    // --- Settings ---
-    settingsBtn.addEventListener('click', () => {
-        settingDisplayName.value = currentUser?.display_name || '';
-        if (currentUser?.avatar_path) {
-            avatarPreview.src = `${API}/download/${currentUser.avatar_path}?token=${encodeURIComponent(token)}`;
-            avatarPreview.style.display = 'block';
+    function updateOnlineBadge() {
+        DOM.onlineBadge.textContent = State.onlineUsers.size;
+    }
+
+    // ====================================
+    // Settings Modal
+    // ====================================
+    document.getElementById('settings-btn').addEventListener('click', openSettings);
+    document.getElementById('save-settings').addEventListener('click', saveSettings);
+
+    function openSettings() {
+        DOM.settingsDisplayName.value = State.user?.display_name || '';
+        DOM.settingsUsername.value = State.user?.username || '';
+        if (State.user?.avatar_path) {
+            DOM.settingsAvatarImg.src = `${API_BASE}/api/download/${encodeURIComponent(State.user.avatar_path)}?token=${encodeURIComponent(State.token)}`;
+            DOM.settingsAvatarImg.classList.remove('hidden');
+            DOM.settingsAvatarPreview.classList.add('hidden');
         } else {
-            avatarPreview.style.display = 'none';
-        }
-        settingsModal.classList.remove('hidden');
-    });
-    
-    closeSettingsBtn.addEventListener('click', () => settingsModal.classList.add('hidden'));
-    
-    saveSettingsBtn.addEventListener('click', async () => {
-        const newName = settingDisplayName.value.trim();
-        if (newName && newName !== currentUser?.display_name) {
-            await fetch(`${API}/update_profile?display_name=${encodeURIComponent(newName)}`, {
-                method: 'POST',
-                headers: { 'token': token }
-            });
-            currentUser.display_name = newName;
+            DOM.settingsAvatarImg.classList.add('hidden');
+            DOM.settingsAvatarPreview.classList.remove('hidden');
         }
         
-        const avatarFile = settingAvatar.files[0];
-        if (avatarFile) {
-            const fd = new FormData();
-            fd.append('file', avatarFile);
-            
-            const res = await fetch(`${API}/upload_avatar`, {
-                method: 'POST',
-                body: fd,
-                headers: { 'token': token }
+        DOM.themeOptions.forEach(opt => opt.classList.toggle('active', opt.dataset.theme === State.theme));
+        DOM.customThemeSettings.classList.toggle('hidden', State.theme !== 'custom');
+        DOM.settingsModal.classList.remove('hidden');
+    }
+
+    async function saveSettings() {
+        const newName = DOM.settingsDisplayName.value.trim();
+        if (newName && newName !== State.user?.display_name) {
+            const res = await fetch(`${API_BASE}/api/profile?display_name=${encodeURIComponent(newName)}`, {
+                method: 'PATCH', headers: { 'X-Auth-Token': State.token }
             });
-            
             if (res.ok) {
-                const data = await res.json();
-                currentUser.avatar_path = data.avatar_path;
-                avatarPreview.src = `${API}/download/${data.avatar_path}?token=${encodeURIComponent(token)}`;
-                avatarPreview.style.display = 'block';
+                State.user.display_name = newName;
+                DOM.headerDisplayName.textContent = newName;
+                showToast('Profile updated', 'success');
             }
         }
-        
-        const theme = themeSelect.value;
-        if (theme === 'theme-custom') {
-            localStorage.setItem('customSelfColor', customSelfColor.value);
-            localStorage.setItem('customOtherColor', customOtherColor.value);
-            localStorage.setItem('customTextColor', customTextColor.value);
-        }
-        applyTheme(theme);
-        settingsModal.classList.add('hidden');
-    });
-    
-    themeSelect.addEventListener('change', (e) => {
-        customThemeSettings.classList.toggle('hidden', e.target.value !== 'theme-custom');
-    });
+        DOM.settingsModal.classList.add('hidden');
+    }
 
-    // --- Logout ---
-    logoutBtn.addEventListener('click', async () => {
-        if (token) {
-            try {
-                await fetch(`${API}/logout?token=${encodeURIComponent(token)}`, { method: 'GET' });
-            } catch (e) {
-                console.error('Logout error:', e);
-            }
-        }
-        
-        disconnectWS();
-        localStorage.removeItem('token');
-        token = null;
-        currentUser = null;
-        messages = {};
-        messageIds = [];
-        messagesList.innerHTML = '';
-        typingIndicator.textContent = '';
-        onlineCountSpan.textContent = '0';
-        
-        showAuth();
+    // ====================================
+    // Theme Switching
+    // ====================================
+    DOM.themeOptions.forEach(opt => {
+        opt.addEventListener('click', () => {
+            DOM.themeOptions.forEach(o => o.classList.remove('active'));
+            opt.classList.add('active');
+            applyTheme(opt.dataset.theme);
+            DOM.customThemeSettings.classList.toggle('hidden', opt.dataset.theme !== 'custom');
+        });
     });
 
-    // --- Notification permission ---
-    if (window.Notification && Notification.permission === 'default') {
-        Notification.requestPermission();
+    // ====================================
+    // Utility Functions
+    // ====================================
+    function generateClientId() {
+        return Date.now().toString(36) + Math.random().toString(36).substr(2, 9);
     }
 
-    // --- Utilities ---
-    function truncate(s, n) {
-        if (!s) return '';
-        return s.length > n ? s.slice(0, n - 1) + '…' : s;
+    function truncate(str, n) {
+        if (!str) return '';
+        return str.length > n ? str.substr(0, n - 1) + '…' : str;
     }
 
     function escapeHtml(text) {
@@ -635,23 +822,87 @@
     }
 
     function formatTime(ms) {
-        const d = new Date(ms);
+        const date = new Date(ms);
         const now = new Date();
-        if (d.toDateString() === now.toDateString()) {
-            return `Today at ${d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}`;
+        const diff = now - date;
+        if (diff < 60000) return 'Just now';
+        if (diff < 3600000) return Math.floor(diff / 60000) + 'm ago';
+        if (date.toDateString() === now.toDateString()) return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        return date.toLocaleDateString([], { month: 'short', day: 'numeric' }) + ' ' + date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+
+    function formatFileSize(bytes) {
+        if (!bytes) return '0 B';
+        const k = 1024;
+        const sizes = ['B', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    }
+
+    function autoResizeTextarea() {
+        DOM.messageInput.style.height = 'auto';
+        DOM.messageInput.style.height = Math.min(DOM.messageInput.scrollHeight, 120) + 'px';
+    }
+
+    // Expose public methods
+    window.InfinityChat = {
+        replyTo,
+        editMessage,
+        deleteMessage
+    };
+
+    // ====================================
+    // Initialization
+    // ====================================
+    async function init() {
+        if (State.token) {
+            const res = await fetch(`${API_BASE}/api/auth/verify`, { headers: { 'X-Auth-Token': State.token } });
+            if (res.ok) {
+                const data = await res.json();
+                State.user = data.user;
+                showChat();
+                connectWebSocket();
+                return;
+            }
         }
-        return d.toLocaleDateString() + ' ' + d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+        showAuth();
     }
 
-    // --- Initialize ---
-    loadTheme();
-    
-    (async () => {
-        const loggedIn = await autoLogin();
-        if (loggedIn) {
-            showChat();
-        } else {
-            showAuth();
+    function showAuth() {
+        DOM.authScreen.classList.add('active');
+        DOM.chatScreen.classList.remove('active');
+    }
+
+    function showChat() {
+        DOM.authScreen.classList.remove('active');
+        DOM.chatScreen.classList.add('active');
+        updateHeaderInfo();
+    }
+
+    function updateHeaderInfo() {
+        if (State.user) {
+            DOM.headerDisplayName.textContent = State.user.display_name;
         }
-    })();
+    }
+
+    // Close modals on backdrop click
+    document.querySelectorAll('.modal-backdrop').forEach(backdrop => {
+        backdrop.addEventListener('click', () => {
+            const modal = backdrop.closest('.modal');
+            modal.classList.add('hidden');
+        });
+    });
+
+    // Request notification permission
+    if (window.Notification && Notification.permission === 'default') {
+        Notification.requestPermission();
+    }
+
+    // Handle online/offline
+    DOM.onlineBtn.addEventListener('click', () => {
+        requestOnlineUsers();
+        DOM.onlineModal.classList.remove('hidden');
+    });
+
+    init();
 })();