@rapidmx/web-client 0.3.1 → 0.5.0

package/apps/shared/components/mail/compose/ComposeContext.tsx

@@ -8,7 +8,8 @@ import ComposeWindow from "./ComposeWindow.js";
 
 export interface ComposeSession {
     id: string;
-    mailboxUid: string;
+    /** The initial sending mailbox - absent means "the caller's own mailbox" (see `ComposeWindow`). */
+    mailboxUid?: string;
     initialTo?: string;
     initialCc?: string;
     initialSubject?: string;
@@ -24,7 +25,10 @@ export interface ComposeSession {
 }
 
 export interface OpenComposeInput {
-    mailboxUid: string;
+    /** The sending mailbox to start with. Omit for a fresh message (defaults to the caller's own mailbox);
+     * a reply/forward passes the original message's mailbox so a shared mailbox's mail replies from it.
+     * Either way the user can change it via the compose window's From field. */
+    mailboxUid?: string;
     /** Prefills the To field — e.g. Contacts' "Email" toolbar action, or Reply/Reply All/Forward. */
     to?: string;
     /** Prefills the Cc field and reveals the Cc/Bcc row — Reply All only. */
@@ -63,7 +67,7 @@ export function useCompose(): ComposeContextValue {
  * opening Compose from Contacts' "Email" action, for instance, overlays the window on top of whatever
  * app is currently showing, exactly like opening it from Mail's own sidebar button.
  */
-export default function ComposeProvider({ children }: PropsWithChildren) {
+export default function ComposeProvider({ children, userUid, trusted }: PropsWithChildren<{ userUid?: string; trusted?: boolean }>) {
     const [sessions, setSessions] = useState<ComposeSession[]>([]);
     const isMobile = useIsMobile();
 
@@ -96,26 +100,32 @@ export default function ComposeProvider({ children }: PropsWithChildren) {
 
     // On mobile, a non-minimized `ComposeWindow` renders full-screen (see that component's own doc
     // comment) — Gmail-style stacking of several full-screen overlays at once makes no sense there, so
-    // at most one non-minimized session is ever rendered: the most recently opened one. Minimized
-    // sessions are small chips regardless of device, so every one of those still renders — an earlier
+    // at most one non-minimized session is ever shown: the most recently opened one. Minimized
+    // sessions are small chips regardless of device, so every one of those still shows — an earlier
     // session becomes visible again (as its own chip, or full-screen if it's the new most-recent
-    // non-minimized one) once whatever's currently "on top" is closed or minimized.
+    // non-minimized one) once whatever's currently "on top" is closed or minimized. The others stay
+    // mounted, just hidden: unmounting them would throw away everything typed into them.
     const lastNonMinimizedId = isMobile ? [...sessions].reverse().find((s) => !s.minimized)?.id : undefined;
-    const visibleSessions = isMobile ? sessions.filter((s) => s.minimized || s.id === lastNonMinimizedId) : sessions;
 
     return (
         <ComposeContext.Provider value={value}>
             {children}
-            {visibleSessions.length > 0 && (
+            {sessions.length > 0 && (
                 <div className="fixed bottom-0 right-6 flex items-end gap-3 z-50">
-                    {visibleSessions.map((session) => (
-                        <ComposeWindow
-                            key={session.id}
-                            session={session}
-                            onClose={() => closeCompose(session.id)}
-                            onToggleMinimize={() => toggleMinimize(session.id)}
-                        />
-                    ))}
+                    {sessions.map((session) => {
+                        const hidden = isMobile && !session.minimized && session.id !== lastNonMinimizedId;
+                        return (
+                            <div key={session.id} hidden={hidden} className={hidden ? "hidden" : "contents"}>
+                                <ComposeWindow
+                                    session={session}
+                                    userUid={userUid}
+                                    trusted={trusted}
+                                    onClose={() => closeCompose(session.id)}
+                                    onToggleMinimize={() => toggleMinimize(session.id)}
+                                />
+                            </div>
+                        );
+                    })}
                 </div>
             )}
         </ComposeContext.Provider>