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/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,
       }),
     );