Merge pull request #1445 from PR0M3TH3AN/dm-mobile-view-fix-12289226893925859627

Improve DM mobile navigation with list/thread toggle

js/ui/dm/AppShell.js

@@ -126,6 +126,7 @@ export class AppShell {
     notifications = [],
     signingAdapter = null,
     zapConfig = null,
+    mobileView = "list",
     onSelectConversation,
     onSendMessage,
     onSendZap,
@@ -133,6 +134,7 @@ export class AppShell {
     onMarkAllRead,
     onToggleReadReceipts,
     onToggleTypingIndicators,
+    onBack,
   } = {}) {
     if (!doc) {
       throw new Error("AppShell requires a document reference.");
@@ -140,6 +142,9 @@ export class AppShell {
 
     this.document = doc;
     this.root = createElement(doc, "div", "dm-app-shell");
+    if (typeof mobileView === "string") {
+      this.root.dataset.dmView = mobileView;
+    }
 
     const { totalsByConversation, totalsByProfile } = aggregateZapTotals(zapReceipts);
     const enrichedConversations = conversations.map((conversation) => ({
@@ -224,6 +229,7 @@ export class AppShell {
         profileZapTotalSats: totalsByProfile.get(activeConversation.pubkey) || 0,
         onMarkRead: onMarkConversationRead,
         onSendZap,
+        onBack,
         zapConfig,
       }),
     );

js/ui/dm/MessageThread.js

@@ -28,6 +28,7 @@ export function MessageThread({
   profileZapTotalSats = 0,
   onMarkRead,
   onSendZap,
+  onBack,
   zapConfig = null,
 } = {}) {
   if (!doc) {
@@ -37,6 +38,18 @@ export function MessageThread({
   const root = createElement(doc, "section", "dm-message-thread");
 
   const header = createElement(doc, "header", "dm-message-thread__header");
+
+  if (typeof onBack === "function") {
+    const backBtn = createElement(doc, "button", "dm-message-thread__back btn-ghost btn-icon");
+    backBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>`;
+    backBtn.ariaLabel = "Back to conversations";
+    backBtn.addEventListener("click", (e) => {
+      e.preventDefault();
+      onBack();
+    });
+    header.appendChild(backBtn);
+  }
+
   header.appendChild(
     createElement(
       doc,

js/ui/profileModalController.js

@@ -1050,6 +1050,8 @@ export class ProfileModalController {
       dmRelayHints: new Map(),
     };
 
+    this.dmMobileView = "list";
+
     this.services = buildServicesContract(services, this.internalState);
     this.state = buildStateContract(state, this.internalState);
 
@@ -4430,9 +4432,16 @@ export class ProfileModalController {
         zapConfig: {
             signer: this.services.nostrClient,
         },
+        mobileView: this.dmMobileView || "list",
         onSelectConversation: (conversation) => {
           void this.handleDmConversationSelect(conversation);
         },
+        onBack: () => {
+          this.dmMobileView = "list";
+          void this.renderDmAppShell(this.directMessagesCache, {
+            actorPubkey: this.resolveActiveDmActor(),
+          });
+        },
         onSendMessage: (messageText, payload) => {
           void this.handleDmAppShellSendMessage(messageText, payload);
         },
@@ -4515,6 +4524,8 @@ export class ProfileModalController {
       return;
     }
 
+    this.dmMobileView = "thread";
+
     const actor = this.resolveActiveDmActor();
     const remote = this.resolveRemoteForConversationId(conversationId, actor);