feat: improve DM mobile navigation with list/thread toggle

- Implement mobile view state management (`list` vs `thread`) in `ProfileModalController`.
- Update `AppShell` to apply `data-dm-view` attribute for CSS toggling.
- Update `MessageThread` to render a "Back" button on mobile.
- Add CSS rules to hide/show sidebar and thread panels based on mobile view state.
- Ensure desktop layout remains split-pane.

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);