fix message squish + optimistic send

src/static/app.js

@@ -332,9 +332,24 @@ async function handleWsMessage(evt) {
 
 async function handleIncomingDm(msg) {
   const { conversation_id, message } = msg;
+
+  // For pending DM (no id yet), link it when we get the echo or a reply
+  if (currentChat && currentChat.type === "dm" && !currentChat.id) {
+    const matchesEcho = message.sender_id === me.id;
+    const matchesReply = message.sender_id === currentChat.other_user?.id;
+    if (matchesEcho || matchesReply) {
+      currentChat.id = conversation_id;
+    }
+  }
+
+  // Skip our own messages — shown optimistically in sendDm
+  if (message.sender_id === me.id) {
+    await loadChats();
+    return;
+  }
+
   if (!msgCache[conversation_id]) msgCache[conversation_id] = [];
 
-  // Try to decrypt
   let plaintext = null;
   if (privateKey) {
     try {
@@ -346,22 +361,11 @@ async function handleIncomingDm(msg) {
   const withPlain = { ...message, plaintext };
   msgCache[conversation_id].push(withPlain);
 
-  // For pending DM (no id yet), link it when we get the echo or a reply
-  if (currentChat && currentChat.type === "dm" && !currentChat.id) {
-    const matchesEcho = message.sender_id === me.id;
-    const matchesReply = message.sender_id === currentChat.other_user?.id;
-    if (matchesEcho || matchesReply) {
-      currentChat.id = conversation_id;
-    }
-  }
-
-  // If this is the active chat, append the message
   if (currentChat && currentChat.type === "dm" && currentChat.id === conversation_id) {
     appendMessage(withPlain, currentChat.other_user);
     scrollToBottom();
   }
 
-  // Update sidebar last message
   await loadChats();
 }
 
@@ -577,7 +581,7 @@ function appendMessage(m, otherUser, isGroup = false) {
       </div>`;
   } else if (isMe) {
     div.innerHTML = `
-      <div class="flex flex-col items-end gap-0.5">
+      <div class="flex flex-col items-end gap-0.5 max-w-[72%]">
         <div class="msg-bubble bg-indigo-500 rounded-2xl rounded-tr-sm px-4 py-2.5 text-sm text-white">${escHtml(text)}</div>
         <span class="text-xs text-gray-600">${time}</span>
       </div>`;
@@ -643,6 +647,14 @@ async function sendDm(text) {
     payload.target_user_id = other.id;
   }
   ws.send(JSON.stringify(payload));
+
+  // Show message immediately
+  const optimistic = { id: Date.now(), sender_id: me.id, plaintext: text, created_at: new Date().toISOString(), is_read: false };
+  if (currentChat.id && msgCache[currentChat.id]) {
+    msgCache[currentChat.id].push(optimistic);
+  }
+  appendMessage(optimistic, other);
+  scrollToBottom();
 }
 
 async function sendGroupMsg(text) {