Move DM relay settings into DM settings popover

js/ui/dm/AppShell.js

@@ -2,6 +2,7 @@ import { Composer } from "./Composer.js";
 import { ConversationList } from "./ConversationList.js";
 import { MessageThread } from "./MessageThread.js";
 import { DMPrivacySettings } from "./DMPrivacySettings.js";
+import { DMRelaySettings } from "./DMRelaySettings.js";
 import { aggregateZapTotals } from "./zapHelpers.js";
 import { createZapInterface } from "./ZapInterface.js";
 
@@ -136,6 +137,7 @@ export class AppShell {
     onToggleTypingIndicators,
     onRefreshConversations,
     onBack,
+    onOpenSettings,
   } = {}) {
     if (!doc) {
       throw new Error("AppShell requires a document reference.");
@@ -182,15 +184,23 @@ export class AppShell {
         popover.remove();
         return;
       }
-      popover = DMPrivacySettings({
+      popover = createElement(doc, "div", "dm-settings-popover absolute z-50 right-4 top-12 flex flex-col gap-4");
+
+      const privacySettings = DMPrivacySettings({
         document: doc,
         readReceiptsEnabled: dmPrivacySettings.readReceiptsEnabled,
         typingIndicatorsEnabled: dmPrivacySettings.typingIndicatorsEnabled,
         onToggleReadReceipts,
         onToggleTypingIndicators,
       });
-      popover.classList.add("dm-settings-popover", "absolute", "z-50", "right-4", "top-12", "bg-surface", "border", "border-border", "rounded-xl");
+      popover.appendChild(privacySettings);
+
+      const relaySettings = DMRelaySettings({ document: doc });
+      popover.appendChild(relaySettings);
       sidebarHeader.appendChild(popover);
+      if (typeof onOpenSettings === "function") {
+        onOpenSettings(popover);
+      }
 
       const closeHandler = (event) => {
         if (!popover.contains(event.target) && event.target !== settingsBtn && !settingsBtn.contains(event.target)) {