email compose

frontend/src/components/ComposeDock.jsx

@@ -133,6 +133,16 @@ export default function ComposeDock({ account, onSent, agentOpen = true }) {
   const visibleExpanded = expandedWindows.slice(0, MAX_EXPANDED);
   const hiddenMinimized = minimizedWindows.slice(3);
   const visibleChips = minimizedWindows.slice(0, 3);
+  const hasOpenComposer = windows.some((window) => !window.minimized);
+  const hasBlankComposer = windows.some((window) => !window.minimized && isDraftEmpty(window.id));
+
+  useEffect(() => {
+    document.body.classList.toggle("compose-open", hasOpenComposer);
+    document.body.classList.toggle("compose-blank-open", hasBlankComposer);
+    return () => {
+      document.body.classList.remove("compose-open", "compose-blank-open");
+    };
+  }, [hasOpenComposer, hasBlankComposer]);
 
   return (
     <>

frontend/src/components/ComposeModal.jsx

@@ -455,16 +455,16 @@ export default function ComposeModal({
     >
       <header className="compose-window-header">
         <div className="compose-window-title">
-          <span className="compose-agent-mark"><AgentSpark /></span>
+          <span className="compose-header-spark" aria-hidden="true"><AgentSpark /></span>
           <div className="compose-window-heading">
             <h2>New message</h2>
             <MenuDropdown
               className="compose-from-picker"
-              showCaret={false}
+              showCaret
               iconStroke={iconStroke}
               label={
                 <span className="compose-from-label">
-                  From: <strong>{fromAddress.email}</strong>
+                  <strong>{fromAddress.email}</strong>
                 </span>
               }
               items={fromOptions.map((option) => ({
@@ -541,22 +541,19 @@ export default function ComposeModal({
           </div>
         )}
 
-        <div className="compose-row compose-subject-row">
-          <span className="compose-row-label" aria-hidden="true" />
-          <div className="compose-row-main compose-subject-main">
-            <input
-              className="compose-subject-input"
-              value={subject}
-              onChange={(event) => setSubject(event.target.value)}
-              placeholder="Subject"
-              maxLength={998}
-            />
-            {bodyHtml && !subject && (
-              <button type="button" className="compose-subject-suggest" onClick={suggestSubject}>
-                <AgentSpark /> Suggest
-              </button>
-            )}
-          </div>
+        <div className="compose-subject-row">
+          <input
+            className="compose-subject-input"
+            value={subject}
+            onChange={(event) => setSubject(event.target.value)}
+            placeholder="Subject"
+            maxLength={998}
+          />
+          {bodyHtml && !subject && (
+            <button type="button" className="compose-subject-suggest" onClick={suggestSubject}>
+              <AgentSpark /> Suggest
+            </button>
+          )}
         </div>
 
         {attachments.length > 0 && (