Refactor DM Zap button and stats to Composer area

Moves the Zap button and Zap statistics from the message thread header to the message composer area, adjacent to the Send button. Refactors the Zap interface creation logic into a standalone component `ZapInterface.js` to decouple it from `MessageThread.js`. Updates `Composer.js` to support an optional `onZap` handler and `zapStats` prop, rendering the button with an icon-only style and the stats pill reusing the existing CSS class. Updates `AppShell.js` to orchestrate the Zap interface display and pass the necessary statistics.

js/ui/dm/AppShell.js

@@ -257,6 +257,9 @@ export class AppShell {
       main.appendChild(zapInterface);
     };
 
+    const conversationZapTotalSats = totalsByConversation.get(activeConversation.id) || 0;
+    const profileZapTotalSats = totalsByProfile.get(activeConversation.pubkey) || 0;
+
     main.appendChild(
       Composer({
         document: doc,
@@ -267,6 +270,10 @@ export class AppShell {
         zapConfig,
         onSend: onSendMessage,
         onZap: handleZapTrigger,
+        zapStats: {
+            conversationTotal: conversationZapTotalSats,
+            profileTotal: profileZapTotalSats
+        }
       }),
     );
     main.appendChild(

js/ui/dm/Composer.js

@@ -9,6 +9,8 @@ function createElement(doc, tag, className, text) {
   return element;
 }
 
+import { formatZapAmount } from "./zapHelpers.js";
+
 export function Composer({
   document: doc,
   placeholder = "Write a message…",
@@ -19,6 +21,7 @@ export function Composer({
   zapConfig = null,
   onSend,
   onZap,
+  zapStats = null,
 } = {}) {
   if (!doc) {
     throw new Error("Composer requires a document reference.");
@@ -114,24 +117,51 @@ export function Composer({
   zapBtn.type = "button";
   zapBtn.setAttribute("aria-label", "Zap");
   zapBtn.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>`;
-  zapBtn.style.marginRight = "var(--space-xs)"; // Add some spacing between zap and send if needed, though flex gap usually handles it.
-  // Actually, actions usually has a gap? Let's check parent styles.
-  // dm-composer__actions usually separates tools and submit.
-  // If we want it NEXT to Send, we should group them or just append.
-  // We'll append both to a container or just actions.
 
   if (typeof onZap === "function") {
     zapBtn.addEventListener("click", (e) => {
         e.preventDefault();
         onZap();
     });
-    // Create a wrapper for buttons if we want tight grouping, or just append to actions.
-    // actions has "flex items-center justify-between" usually?
-    // Let's check CSS for dm-composer__actions.
-    // If not, we might need a wrapper.
-    // tools is one child. button is another.
-    // We'll wrap Zap and Send in a div to keep them together on the right.
+
     const buttonGroup = createElement(doc, "div", "flex items-center gap-2");
+
+    // Zap Stats Pill
+    if (zapStats && typeof zapStats === "object") {
+        // Reuse class from MessageThread for consistent styling
+        const zapSummary = createElement(doc, "div", "dm-message-thread__zap-summary");
+
+        // Zaps Label
+        const labelSpan = createElement(doc, "span", "dm-message-thread__zap-label", "Zaps");
+        zapSummary.appendChild(labelSpan);
+
+        // Conversation Total
+        // We need formatZapAmount. Since we can't import dynamically easily here (without changing module type or build),
+        // we assume formatZapAmount is available or we pass formatted strings.
+        // BUT, looking at file structure, Composer is a module. I should import it at the top.
+        // I will add the import in a separate block.
+        // Assuming formatZapAmount is imported.
+
+        const conversationTotal = createElement(
+          doc,
+          "span",
+          "dm-message-thread__zap-total",
+          formatZapAmount(zapStats.conversationTotal || 0)
+        );
+        zapSummary.appendChild(conversationTotal);
+
+        // Profile Total
+        const profileTotal = createElement(
+          doc,
+          "span",
+          "dm-message-thread__zap-profile",
+          `Profile: ${formatZapAmount(zapStats.profileTotal || 0)}`
+        );
+        zapSummary.appendChild(profileTotal);
+
+        buttonGroup.appendChild(zapSummary);
+    }
+
     buttonGroup.appendChild(zapBtn);
     buttonGroup.appendChild(button);
     actions.appendChild(buttonGroup);

js/ui/dm/MessageThread.js

@@ -1,6 +1,5 @@
 import { DayDivider } from "./DayDivider.js";
 import { MessageBubble } from "./MessageBubble.js";
-import { formatZapAmount } from "./zapHelpers.js";
 
 function createElement(doc, tag, className, text) {
   const element = doc.createElement(tag);
@@ -76,28 +75,6 @@ export function MessageThread({
   privacyBadge.title = privacyHint;
   header.appendChild(privacyBadge);
 
-  const zapSummary = createElement(doc, "div", "dm-message-thread__zap-summary");
-  zapSummary.appendChild(
-    createElement(doc, "span", "dm-message-thread__zap-label", "Zaps"),
-  );
-  zapSummary.appendChild(
-    createElement(
-      doc,
-      "span",
-      "dm-message-thread__zap-total",
-      formatZapAmount(conversationZapTotalSats),
-    ),
-  );
-  zapSummary.appendChild(
-    createElement(
-      doc,
-      "span",
-      "dm-message-thread__zap-profile",
-      `Profile: ${formatZapAmount(profileZapTotalSats)}`,
-    ),
-  );
-  header.appendChild(zapSummary);
-
   if (typeof onMarkRead === "function") {
     const actions = createElement(doc, "div", "ml-auto flex items-center gap-2");
     const markReadButton = createElement(doc, "button", "btn-ghost", "Mark read");