email compose

frontend/src/components/DashboardPage.jsx

@@ -107,7 +107,7 @@ export default function DashboardPage() {
   const [domainError, setDomainError] = useState("");
   const [active, setActive] = useState("Inbox");
   const [menuOpen, setMenuOpen] = useState(false);
-  const [composeOpen, setComposeOpen] = useState(false);
+  const [composeWindows, setComposeWindows] = useState([]);
   const [notice, setNotice] = useState("");
   const [loading, setLoading] = useState(true);
   const [mailRefreshKey, setMailRefreshKey] = useState(0);
@@ -205,8 +205,16 @@ export default function DashboardPage() {
     setMenuOpen(false);
   }
 
-  function emailSent() {
-    setComposeOpen(false);
+  function openCompose() {
+    setComposeWindows((windows) => [...windows, { id: `compose-${Date.now()}-${windows.length}` }]);
+  }
+
+  function closeCompose(windowId) {
+    setComposeWindows((windows) => windows.filter((window) => window.id !== windowId));
+  }
+
+  function emailSent(windowId) {
+    closeCompose(windowId);
     setActive("Outbox");
     setMailRefreshKey((key) => key + 1);
     setNotice("Message accepted by the mail server. Delivery can take a few minutes — check spam if it does not arrive.");
@@ -279,7 +287,7 @@ export default function DashboardPage() {
         </div>
 
         {!isOrgOnboarding && (
-          <button className="dashboard-compose" type="button" onClick={() => setComposeOpen(true)}>
+          <button className="dashboard-compose" type="button" onClick={openCompose}>
             <Mail size={16} strokeWidth={1.75} />
             <span>Compose</span>
           </button>
@@ -417,7 +425,7 @@ export default function DashboardPage() {
             agentNav={agentNav}
             onLogout={logout}
             onOpenSettings={() => selectMailItem("Settings")}
-            onCompose={() => setComposeOpen(true)}
+            onCompose={openCompose}
             onStats={handleStats}
           />
         )}
@@ -429,7 +437,7 @@ export default function DashboardPage() {
             account={account}
             onLogout={logout}
             onOpenSettings={() => selectMailItem("Settings")}
-            onCompose={() => setComposeOpen(true)}
+            onCompose={openCompose}
           />
         )}
         {!companyActive && active === "Trash" && (
@@ -440,7 +448,7 @@ export default function DashboardPage() {
             account={account}
             onLogout={logout}
             onOpenSettings={() => selectMailItem("Settings")}
-            onCompose={() => setComposeOpen(true)}
+            onCompose={openCompose}
           />
         )}
         {companyActive === "Overview" && isDomainOwner && !isOrgSetupComplete(account.id) && (
@@ -507,7 +515,16 @@ export default function DashboardPage() {
           }}
         />
       )}
-      {composeOpen && <ComposeModal account={account} onClose={() => setComposeOpen(false)} onSent={emailSent} />}
+      {composeWindows.map((window, index) => (
+        <ComposeModal
+          key={window.id}
+          windowId={window.id}
+          stackIndex={index}
+          account={account}
+          onClose={() => closeCompose(window.id)}
+          onSent={() => emailSent(window.id)}
+        />
+      ))}
     </div>
   );
 }