Lazy-load chat images; scroll to bottom on incoming message only when user has not scrolled up.

js/app.js

@@ -26,9 +26,9 @@ document.addEventListener('DOMContentLoaded', async () => {
 });
 
 function loadChats() {
-    try {
     elements.chatsLoader.classList.remove('hidden');
-        fetchChats().then(() => { 
+    try {
+        fetchChats().then(async () => { 
             ui.renderChatList(getChats(), activeChatState, selectChat);
             
             const hash = window.location.hash;
@@ -181,8 +181,6 @@ function initWebSocket() {
 async function handleIncomingMessage(msg) {
     if (!msg) return;
     
-    // console.log('[WS] handleIncomingMessage payload:', msg);
-    
     ui.updateChatInChatList(msg);
     
     const rawChatId = msg.chatId || msg.from || (msg.chat && msg.chat.id);
@@ -201,20 +199,12 @@ async function handleIncomingMessage(msg) {
         const msgId = normalizeId(msg.id) || msg.id;
         const exists = document.getElementById(msgId);
         if (!exists) {
+            const scrolled = elements.messagesContainer.scrollTop == elements.messagesContainer.scrollTopMax;
             ui.appendSingleMessage({ ...msg, chatId: msgChatId }, activeChatState.name, (await getAppUser()).id);
+            if (scrolled) {
                 ui.scrollToBottom();
             } 
         }
-    
-    const chatIndex = getChats().findIndex(c => c.id === msgChatId);
-    if (chatIndex !== -1) {
-        const chat = getChats()[chatIndex];
-        chat.lastMessage = msg.body || msg.text || 'Media message';
-        chat.timestamp = msg.timestamp ? (msg.timestamp * 1000) : Date.now();
-        
-        if (!msg.fromMe && (!activeChatState || activeChatState.id !== msgChatId)) {
-            chat.unreadCount = (chat.unreadCount || 0) + 1;
-        }        
     }
 }
 
@@ -249,6 +239,7 @@ async function selectChat(chat, isPopState = false, smoothScroll = true) {
     }
     
     if (!isPopState && window.location.hash !== `#chat-${chat.id}`) {
+        window.location.hash = ``;
         window.location.hash = `chat-${chat.id}`;
     }
     
@@ -394,3 +385,7 @@ async function checkWahaStatus() {
         ui.updateConnectionStatus(false, 'WAHA Server Offline');
     }
 }
+
+export function getCurrentChat() {
+    return activeChatState;
+}

js/ui.js

@@ -1,5 +1,6 @@
 import { formatTime, normalizeId } from "./utils.js";
 import { getChatPicture, getMessage, getMedia, getMoreChatMessages } from "./storage.js";
+import { getCurrentChat } from "./app.js";
 
 export const elements = {
     chatList: document.getElementById('chat-list'),
@@ -80,7 +81,6 @@ export const ui = {
     
     async renderChatList(chats, activeChat, onChatSelect) {
         elements.chatList.innerHTML = '';
-        
         chats.sort((a, b) => b.timestamp - a.timestamp);
         
         if (chats.length === 0) {
@@ -93,20 +93,27 @@ export const ui = {
             li.className = `chat-item ${activeChat && activeChat.id === chat.id ? 'active' : ''}`;
             li.dataset.id = chat.id;
             
-            const picture = await getChatPicture(chat.id);
             const initials = chat.name ? chat.name.substring(0, 1).toUpperCase() : '?';
             const hasUnread = chat.unreadCount && chat.unreadCount > 0;
             const timeStr = formatTime(chat.timestamp || new Date());
             
             li.innerHTML = `
-            <div class="avatar"><img src="${picture.url ? picture.url : ""}" alt="${initials}"></div>
+      <div class="avatar">
+        <img
+          src=""
+          alt="${initials}"
+          data-chat-avatar="${chat.id}"
+        />
+      </div>
       <div class="chat-item-info">
         <div class="chat-item-meta">
           <span class="chat-item-name">${chat.name}</span>
           <span class="chat-item-time">${timeStr}</span>
         </div>
         <div class="chat-item-preview">
-                    <span class="chat-item-msg" data-chatid="${chat.id}">${chat.lastMessage || 'No messages yet'}</span>
+          <span class="chat-item-msg" data-chatid="${chat.id}">
+            ${chat.lastMessage || 'No messages yet'}
+          </span>
           ${hasUnread ? `<span class="unread-badge">${chat.unreadCount}</span>` : ''}
         </div>
       </div>
@@ -114,13 +121,33 @@ export const ui = {
             
             li.addEventListener('click', () => onChatSelect(chat));
             elements.chatList.appendChild(li);
+            
+            (async () => {
+                try {
+                    const picture = await getChatPicture(chat.id);
+                    const img = li.querySelector(`img[data-chat-avatar="${chat.id}"]`);
+                    if (img) img.src = picture.url ? picture.url : '';
+                } catch (e) {
+                }
+            })();
         }
     },
     
     async updateChatInChatList(msg) {
-        const span = document.querySelector(`.chat-item-msg[data-chatid="${msg.fromMe ? msg.to : msg.from}"]`);
+        const chat = document.querySelector(`.chat-item[data-id="${msg.fromMe ? msg.to : msg.from}"]`);
-        if (span) {
+        
-            span.innerText = msg.body;
+        if (chat) {
+            const messageItem = chat.querySelector('.chat-item-msg');
+            const time = chat.querySelector('.chat-item-time')
+            messageItem.innerText = msg.body || msg.text || 'Media message';
+            time.innerText = msg.timestamp ? formatTime(msg.timestamp) : Date.now();
+            
+            const activeChatState = getCurrentChat();
+            
+            if (!msg.fromMe && (!activeChatState || activeChatState.id !== (msg.fromMe ? msg.to : msg.from))) {
+                const unreadBadge = chat.querySelector('.unread-badge');
+                unreadBadge.innerText = (Number(unreadBadge.innerHTML) || 0) + 1;
+            }
         }
     },
     
@@ -310,17 +337,18 @@ export const ui = {
         
         if (isOutgoing) {
             if (prevMsgEl && prevMsgEl.classList.contains('outgoing')) {
+                groupDiv.classList.add('same-sender');
             } else {
                 groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
             }
         } else if (msg.participant) {
             if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
                 groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
-            }
+            } else groupDiv.classList.add('same-sender');
         } else {
             if (!prevMsgEl || prevUid !== prevMsgEl.dataset.from) {
                 groupDiv.appendChild(document.createElement('div')).className = 'message-indicator';
-            }
+            } else groupDiv.classList.add('same-sender');
         }
         
         groupDiv.appendChild(bubble);

style.css

@@ -222,6 +222,7 @@ input:focus {
     border: none;
     font-size: 0.9rem;
     transition: all 0.25s ease;
+    background-color: var(--bg-secondary);
 }
 
 #chat-search:focus {
@@ -281,6 +282,9 @@ input:focus {
 
 .chat-item:hover {
     background: rgba(255, 255, 255, 0.04);
+    transform: scale(0.98) skewX(10deg);
+    filter: blur(.1px);
+    opacity: .6;
 }
 
 .chat-item-info {
@@ -470,14 +474,46 @@ input:focus {
     height: 100%;
     position: relative;
     overflow: hidden;
+    z-index: 0;
+}
+
+.active-chat-container::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    background-image: var(--background-image);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    opacity: 0.4;
+    pointer-events: none;
+    z-index: 0;
+}
+
+.active-chat-container > * {
+    position: relative;
+    z-index: 1;
 }
 
 .chat-header {
-    padding: 16px 24px;
+    padding: .6em 1em;
     display: flex;
-    justify-content: space-between;
+    position: relative;
-    align-items: center;
+}
-    background: var(--bg-main);
+
+.chat-header::before {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    z-index: -1;
+
+    background: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.75),
+    rgba(0, 0, 0, 0.35),
+    transparent
+    );
 }
 
 .active-contact-info {
@@ -516,10 +552,10 @@ input:focus {
 .messages-container {
     flex: 1;
     overflow-y: auto;
-    padding: 24px;
+    padding: 1rem;
+    padding-bottom: .6rem;
     display: flex;
     flex-direction: column;
-    gap: 16px;
     user-select: text;
     background-image: 
     radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.03) 0%, transparent 40%),
@@ -539,6 +575,7 @@ input:focus {
 }
 
 .message-group {
+    margin-top: .8em;
     display: flex;
     flex-direction: column;
     max-width: 65%;
@@ -552,11 +589,14 @@ input:focus {
     align-self: flex-end;
 }
 
+.message-group.same-sender {
+    margin-top: .4em;
+}
+
 .message-sender {
     font-size: 0.75rem;
     font-weight: 600;
     color: var(--text-primary);
-    margin-bottom: 2px;
     width: 100%;
     display: flex;
 }
@@ -570,8 +610,7 @@ input:focus {
 .message-bubble {
     display: flex;
     flex-direction: column;
-    gap: .4em;
+    padding: 8px 10px;
-    padding: 12px 16px;
     font-size: 0.92rem;
     line-height: 1.5;
     position: relative;
@@ -630,6 +669,7 @@ input:focus {
     display: flex;
     align-items: center;
     gap: 16px;
+    background-color: var(--bg-main);
 }
 
 .alternate-panel {