add DM screen

webroot/main.js

@@ -1234,8 +1234,11 @@ async function switchDetailsContent(title, content)
 function clickCollapseDms()
 {
     var collapseDmsBtn = document.getElementById("collapse-dms");
-    
     collapseDmsBtn.classList.toggle("collapsed");
+    var dmsList = document.getElementById("dms-list");
+    if (dmsList) {
+        dmsList.style.display = collapseDmsBtn.classList.contains("collapsed") ? "none" : "";
+    }
 }
 function clickCollapseGroups()
 {
@@ -1471,6 +1474,7 @@ async function acceptInvite(targetId) { //TODO: Implement key generation
         clearAction("invite.action");
         showBlahNotification(res || "success:invite.accepted");
         await loadInvites('received');
+        await refreshDms();
     } catch (e) {
         clearAction("invite.action");
         showBlahNotification("error:something.wrong");
@@ -1679,4 +1683,98 @@ function handleMobileSwipe() {
             }
         }
     }
+}
+
+async function renderDms(res) {
+    let container = document.getElementById("dms-list");
+    if (!container) return;
+
+    if (res && res !== "") {
+        let parsed = JSON.parse(res);
+        let dms = parsed.dms || {};
+        let dmEntries = Object.entries(dms);
+        
+        // Sort by timestamp descending
+        dmEntries.sort((a,b) => (parseInt(b[1].string2) || 0) - (parseInt(a[1].string2) || 0));
+
+        let html = "";
+        let count = 0;
+
+        for (let [dmId, dmData] of dmEntries) {
+            let parts = dmId.split('_');
+            let myId = `${id};${host}`;
+            let targetId = parts[0] === myId ? parts[1] : parts[0];
+            
+            let targetUsername = await fetchAsync(`${url}/idtoname?id=${targetId}`);
+            if (!targetUsername || targetUsername.trim() === "" || targetUsername.startsWith("error:")) continue;
+            
+            let pfp = await getAvatarUrl(targetId, targetUsername);
+            let displayName = targetUsername.split(':')[0];
+
+            html += `
+            <button class="room-entry" id="dm-btn-${dmId}" onclick="openDm('${dmId}', '${targetUsername}', '${targetId}')">
+                <img src="${pfp}" class="room-pfp">
+                <div style="display: flex; flex-direction: column; text-align: left; overflow: hidden; width: 100%;">
+                    <span class="room-name">${displayName}</span>
+                    <span class="room-id" style="font-size: 0.8rem; opacity: 0.6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${targetUsername}</span>
+                </div>
+            </button>
+            `;
+            count++;
+        }
+        
+        if (count > 0) {
+            container.innerHTML = html;
+            container.classList.remove("empty");
+        } else {
+            container.innerHTML = `<p style="opacity: 0.5;"><blah>desc.no.dms</blah></p>`;
+            container.classList.add("empty");
+            let blahTags = container.getElementsByTagName("blah");
+            for (let i = 0; i < blahTags.length; i++) {
+                blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+            }
+        }
+    } else {
+        container.innerHTML = `<p style="opacity: 0.5;"><blah>desc.no.dms</blah></p>`;
+        container.classList.add("empty");
+        let blahTags = container.getElementsByTagName("blah");
+        for (let i = 0; i < blahTags.length; i++) {
+            blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+        }
+    }
+}
+
+var currentDmId = null;
+var currentDmKey = null; // AES key for encrypting/decrypting messages
+
+async function openDm(dmId, username, targetId) {
+    try {
+        showAction("action.dm.opening", "dmopen");
+        
+        currentDmKey = await ensureDmRoomKey(dmId);
+        if (!currentDmKey) {
+             throw new Error("Missing DM room key");
+        }
+        currentDmId = dmId;
+        
+        let pfp = await getAvatarUrl(targetId, username);
+        let iconHtml = `<img src="${pfp}" style="width: 1.8rem; height: 1.8rem; border-radius: 0.4rem; margin-right: 0.5rem; object-fit: cover;">`;
+        await switchRoomContent(username.split(':')[0], chatScreen, false, iconHtml);
+        
+        let msgContainer = document.getElementById("chat-messages");
+        if (msgContainer) {
+            msgContainer.innerHTML = `<div style="text-align: center; opacity: 0.5; padding: 1rem;"><blah>desc.messages.encryption.active</blah></div>`;
+            let blahTags = msgContainer.getElementsByTagName("blah");
+            for (let i = 0; i < blahTags.length; i++) {
+                blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+            }
+        }
+        
+        setActiveRoombarItem(`dm-btn-${dmId}`);
+        clearAction("dmopen");
+    } catch (e) {
+        clearAction("dmopen");
+        console.error(e);
+        showBlahNotification("error:dm.open.failed");
+    }
 }