auto-create dms on first message + notifications

src/static/app.js

@@ -346,6 +346,15 @@ 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);
@@ -627,12 +636,13 @@ async function sendDm(text) {
   const ciphertextForRecipient = await Crypto.encryptForRecipient(text, pubKeyCache[other.id]);
   const ciphertextForSender = myPubKey ? await Crypto.encryptForRecipient(text, myPubKey) : ciphertextForRecipient;
 
-  ws.send(JSON.stringify({
-    type: "dm",
-    conversation_id: currentChat.id,
-    ciphertext_for_recipient: ciphertextForRecipient,
-    ciphertext_for_sender: ciphertextForSender
-  }));
+  const payload = { type: "dm", ciphertext_for_recipient: ciphertextForRecipient, ciphertext_for_sender: ciphertextForSender };
+  if (currentChat.id) {
+    payload.conversation_id = currentChat.id;
+  } else {
+    payload.target_user_id = other.id;
+  }
+  ws.send(JSON.stringify(payload));
 }
 
 async function sendGroupMsg(text) {
@@ -724,12 +734,24 @@ async function searchUsers() {
   }, 300);
 }
 
+function showChatHeader(user) {
+  document.getElementById("chat-avatar").textContent = user.display_name[0].toUpperCase();
+  document.getElementById("chat-avatar").style.background = user.avatar_color;
+  document.getElementById("chat-name").textContent = user.display_name;
+  document.getElementById("chat-sub").textContent = "@" + user.username;
+  document.getElementById("group-settings-btn").classList.add("hidden");
+}
+
 async function startDmWith(userId, user) {
   closeModal("modal-new-chat");
-  const conv = await apiFetch(`/chat/conversations?target_user_id=${userId}`, token, "POST");
   setTab("dms");
-  await loadChats();
-  await openDmChat({ other_user: user });
+  currentChat = { type: "dm", id: null, other_user: user };
+  showChatHeader(user);
+  document.getElementById("empty-state").classList.add("hidden");
+  document.getElementById("chat-window").classList.remove("hidden");
+  document.getElementById("chat-window").classList.add("flex");
+  document.getElementById("messages").innerHTML = "";
+  document.getElementById("msg-input").focus();
 }
 
 // ── New Group ─────────────────────────────────────────────────────────────────

src/ws_manager.py

@@ -28,10 +28,33 @@ class ConnectionManager:
 
     async def handle_dm(self, msg: dict, sender: User, db: Session):
         conversation_id = msg.get("conversation_id")
+        target_user_id = msg.get("target_user_id")
         ciphertext_for_recipient = msg.get("ciphertext_for_recipient")
         ciphertext_for_sender = msg.get("ciphertext_for_sender")
 
-        if not conversation_id or not ciphertext_for_recipient:
+        if not ciphertext_for_recipient:
+            return
+
+        # Auto-create conversation if target_user_id is provided instead of conversation_id
+        if not conversation_id and target_user_id:
+            target = db.query(User).filter(User.id == target_user_id).first()
+            if not target:
+                return
+            my_ids = set(m.conversation_id for m in db.query(ConversationMember).filter(ConversationMember.user_id == sender.id).all())
+            their_ids = set(m.conversation_id for m in db.query(ConversationMember).filter(ConversationMember.user_id == target_user_id).all())
+            common = my_ids & their_ids
+            if common:
+                conversation_id = common.pop()
+            else:
+                conv = Conversation()
+                db.add(conv)
+                db.flush()
+                db.add(ConversationMember(conversation_id=conv.id, user_id=sender.id))
+                db.add(ConversationMember(conversation_id=conv.id, user_id=target_user_id))
+                db.flush()
+                conversation_id = conv.id
+
+        if not conversation_id:
             return
 
         # Verify sender is in conversation