email compose
This commit is contained in:
parent
5cb49f4cb1
commit
2af0724938
4 changed files with 967 additions and 181 deletions
|
|
@ -1,166 +1,696 @@
|
|||
import {
|
||||
AlignCenter,
|
||||
AlignLeft,
|
||||
AlignRight,
|
||||
ArrowRight,
|
||||
Bold,
|
||||
ChevronDown,
|
||||
Clock,
|
||||
Image,
|
||||
Italic,
|
||||
Link,
|
||||
List,
|
||||
ListOrdered,
|
||||
Lock,
|
||||
Minus,
|
||||
MoreHorizontal,
|
||||
Paperclip,
|
||||
PenLine,
|
||||
Quote,
|
||||
Send,
|
||||
Smile,
|
||||
Strikethrough,
|
||||
Trash2,
|
||||
Underline,
|
||||
X,
|
||||
Maximize2,
|
||||
Minimize2,
|
||||
ExternalLink,
|
||||
RemoveFormatting,
|
||||
IndentIncrease,
|
||||
IndentDecrease,
|
||||
} from "lucide-react";
|
||||
import AgentSpark from "./AgentSpark";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { sendEmail } from "../api";
|
||||
import RecipientField, { recipientsToPayload } from "./compose/RecipientField";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { listMailAliases, listOrgMembers, sendEmail } from "../api";
|
||||
|
||||
function parseAddresses(value) {
|
||||
return value
|
||||
.split(/[,\n;]/)
|
||||
.map((address) => address.trim())
|
||||
.filter(Boolean);
|
||||
}
|
||||
const EMOJI_SAMPLES = ["😀", "😊", "👍", "🙏", "✅", "🎉", "📎", "📅", "💡", "🔥", "❤️", "😅"];
|
||||
const DRAFT_KEY_PREFIX = "agmail_draft_";
|
||||
|
||||
function plainTextFromHtml(value) {
|
||||
const document = new DOMParser().parseFromString(value, "text/html");
|
||||
return document.body.textContent || "";
|
||||
const doc = new DOMParser().parseFromString(value, "text/html");
|
||||
return (doc.body.textContent || "").replace(/\u00a0/g, " ").trim();
|
||||
}
|
||||
|
||||
export default function ComposeModal({ account, onClose, onSent }) {
|
||||
const [format, setFormat] = useState("plain");
|
||||
const [showCopies, setShowCopies] = useState(false);
|
||||
const [body, setBody] = useState("");
|
||||
const [aiPrompt, setAiPrompt] = useState("");
|
||||
const [status, setStatus] = useState({ sending: false, error: "" });
|
||||
const bodyRef = useRef(null);
|
||||
function formatFileSize(bytes) {
|
||||
if (bytes < 1024) return `${bytes} B`;
|
||||
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
|
||||
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
|
||||
}
|
||||
|
||||
function detectWarnings({ bodyHtml, to, cc, bcc, attachments, orgDomain }) {
|
||||
const warnings = [];
|
||||
const body = plainTextFromHtml(bodyHtml);
|
||||
const allRecipients = [...to, ...cc, ...bcc];
|
||||
const external = allRecipients.filter((r) => r.external);
|
||||
if (/\battach(ed|ment|ing)\b/i.test(body) && attachments.length === 0) {
|
||||
warnings.push("You mentioned an attachment, but no file is attached.");
|
||||
}
|
||||
if (external.length) {
|
||||
warnings.push(`${external.length} recipient${external.length > 1 ? "s are" : " is"} outside your organization.`);
|
||||
}
|
||||
if (allRecipients.some((r) => r.invalid)) {
|
||||
warnings.push("One or more recipient addresses look invalid.");
|
||||
}
|
||||
const mentionMatch = body.match(/\b(?:hi|hey|dear)\s+([A-Z][a-z]+)\b/);
|
||||
if (mentionMatch) {
|
||||
const name = mentionMatch[1].toLowerCase();
|
||||
const inRecipients = allRecipients.some((r) => r.name?.toLowerCase().includes(name));
|
||||
if (!inRecipients) {
|
||||
warnings.push(`This email mentions ${mentionMatch[1]}, who isn't a recipient.`);
|
||||
}
|
||||
}
|
||||
if (/(api[_-]?key|secret|password|token)\s*[:=]/i.test(body)) {
|
||||
warnings.push("This message may contain sensitive credentials.");
|
||||
}
|
||||
if (orgDomain && allRecipients.filter((r) => r.external).length >= 10) {
|
||||
warnings.push(`You're sending to ${allRecipients.length} recipients.`);
|
||||
}
|
||||
return warnings;
|
||||
}
|
||||
|
||||
function MenuDropdown({ label, items, align = "left", className = "" }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const ref = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
function closeOnEscape(event) {
|
||||
if (event.key === "Escape" && !status.sending) onClose();
|
||||
function close(event) {
|
||||
if (!ref.current?.contains(event.target)) setOpen(false);
|
||||
}
|
||||
document.addEventListener("keydown", closeOnEscape);
|
||||
return () => document.removeEventListener("keydown", closeOnEscape);
|
||||
}, [onClose, status.sending]);
|
||||
document.addEventListener("mousedown", close);
|
||||
return () => document.removeEventListener("mousedown", close);
|
||||
}, []);
|
||||
|
||||
function helpWrite() {
|
||||
const request = aiPrompt.trim();
|
||||
if (!request) return;
|
||||
const draft = format === "html"
|
||||
? `<p>Hi,</p><p>${request}</p><p>Best,<br>${account.first_name}</p>`
|
||||
: `Hi,\n\n${request}\n\nBest,\n${account.first_name}`;
|
||||
setBody(draft);
|
||||
setAiPrompt("");
|
||||
return (
|
||||
<div className={`compose-menu ${className}`} ref={ref}>
|
||||
<button type="button" className="compose-menu-trigger" onClick={() => setOpen((v) => !v)} aria-expanded={open}>
|
||||
{label}
|
||||
<ChevronDown size={14} />
|
||||
</button>
|
||||
{open && (
|
||||
<div className={`compose-menu-panel align-${align}`} role="menu">
|
||||
{items.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
type="button"
|
||||
role="menuitem"
|
||||
className={item.active ? "active" : ""}
|
||||
disabled={item.disabled}
|
||||
onClick={() => {
|
||||
item.onClick?.();
|
||||
setOpen(false);
|
||||
}}
|
||||
>
|
||||
{item.icon}
|
||||
<span>{item.label}</span>
|
||||
{item.hint && <small>{item.hint}</small>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ComposeModal({
|
||||
account,
|
||||
windowId,
|
||||
stackIndex = 0,
|
||||
onClose,
|
||||
onSent,
|
||||
onMinimizeChange,
|
||||
initialMinimized = false,
|
||||
}) {
|
||||
const editorRef = useRef(null);
|
||||
const fileInputRef = useRef(null);
|
||||
const imageInputRef = useRef(null);
|
||||
const draftTimerRef = useRef(null);
|
||||
|
||||
const [minimized, setMinimized] = useState(initialMinimized);
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
const [detached, setDetached] = useState(false);
|
||||
const [showCc, setShowCc] = useState(false);
|
||||
const [showBcc, setShowBcc] = useState(false);
|
||||
const [to, setTo] = useState([]);
|
||||
const [cc, setCc] = useState([]);
|
||||
const [bcc, setBcc] = useState([]);
|
||||
const [subject, setSubject] = useState("");
|
||||
const [bodyHtml, setBodyHtml] = useState("");
|
||||
const [attachments, setAttachments] = useState([]);
|
||||
const [fromAddress, setFromAddress] = useState({ email: account.email, label: "Default", primary: true });
|
||||
const [fromOptions, setFromOptions] = useState([]);
|
||||
const [contacts, setContacts] = useState([]);
|
||||
const [draftStatus, setDraftStatus] = useState("");
|
||||
const [notice, setNotice] = useState("");
|
||||
const [warnings, setWarnings] = useState([]);
|
||||
const [showEmoji, setShowEmoji] = useState(false);
|
||||
const [status, setStatus] = useState({ sending: false, error: "" });
|
||||
|
||||
const orgDomain = account.company_domain || account.email.split("@")[1];
|
||||
const draftKey = `${DRAFT_KEY_PREFIX}${windowId || account.id}`;
|
||||
const draftHydratedRef = useRef(false);
|
||||
|
||||
const signatures = useMemo(() => [
|
||||
{
|
||||
id: "personal",
|
||||
label: `${account.first_name} — Personal`,
|
||||
html: `<p>—<br>${account.first_name} ${account.last_name}</p>`,
|
||||
},
|
||||
{
|
||||
id: "work",
|
||||
label: `${account.first_name} — ${orgDomain || "Work"}`,
|
||||
html: `<p>—<br><strong>${account.first_name} ${account.last_name}</strong><br>${fromAddress.email}</p>`,
|
||||
},
|
||||
{ id: "none", label: "No signature", html: "" },
|
||||
], [account, fromAddress.email, orgDomain]);
|
||||
|
||||
const saveDraft = useCallback(() => {
|
||||
const payload = { to, cc, bcc, subject, bodyHtml, updatedAt: Date.now() };
|
||||
const empty = !subject && !bodyHtml && !to.length && !cc.length && !bcc.length;
|
||||
if (empty) {
|
||||
localStorage.removeItem(draftKey);
|
||||
setDraftStatus("");
|
||||
return;
|
||||
}
|
||||
setDraftStatus("Saving…");
|
||||
localStorage.setItem(draftKey, JSON.stringify(payload));
|
||||
window.setTimeout(() => {
|
||||
setDraftStatus("Saved to Drafts");
|
||||
window.setTimeout(() => setDraftStatus(""), 2400);
|
||||
}, 420);
|
||||
}, [to, cc, bcc, subject, bodyHtml, draftKey]);
|
||||
|
||||
useEffect(() => {
|
||||
if (draftHydratedRef.current) return;
|
||||
draftHydratedRef.current = true;
|
||||
try {
|
||||
const raw = localStorage.getItem(draftKey);
|
||||
if (!raw) return;
|
||||
const draft = JSON.parse(raw);
|
||||
setTo(draft.to || []);
|
||||
setCc(draft.cc || []);
|
||||
setBcc(draft.bcc || []);
|
||||
setSubject(draft.subject || "");
|
||||
setBodyHtml(draft.bodyHtml || "");
|
||||
setShowCc(Boolean(draft.cc?.length));
|
||||
setShowBcc(Boolean(draft.bcc?.length));
|
||||
if (editorRef.current && draft.bodyHtml) {
|
||||
editorRef.current.innerHTML = draft.bodyHtml;
|
||||
}
|
||||
} catch {
|
||||
/* ignore corrupt drafts */
|
||||
}
|
||||
}, [draftKey]);
|
||||
|
||||
useEffect(() => {
|
||||
const token = sessionStorage.getItem("agmail_access_token");
|
||||
if (!token) return;
|
||||
listOrgMembers(token)
|
||||
.then((members) => {
|
||||
setContacts(
|
||||
(members || []).map((member) => ({
|
||||
name: `${member.first_name} ${member.last_name}`.trim(),
|
||||
email: member.email,
|
||||
})),
|
||||
);
|
||||
})
|
||||
.catch(() => {});
|
||||
listMailAliases(token)
|
||||
.then((aliases) => {
|
||||
const options = [
|
||||
{ email: account.email, label: "Default", primary: true },
|
||||
...(aliases || []).map((alias) => ({
|
||||
email: alias.alias_address,
|
||||
label: alias.forwards_to || alias.alias_address,
|
||||
primary: false,
|
||||
})),
|
||||
].filter((item) => item.email);
|
||||
setFromOptions(options);
|
||||
})
|
||||
.catch(() => {
|
||||
setFromOptions([{ email: account.email, label: "Default", primary: true }]);
|
||||
});
|
||||
}, [account.email]);
|
||||
|
||||
useEffect(() => {
|
||||
if (draftTimerRef.current) window.clearTimeout(draftTimerRef.current);
|
||||
draftTimerRef.current = window.setTimeout(saveDraft, 1400);
|
||||
return () => {
|
||||
if (draftTimerRef.current) window.clearTimeout(draftTimerRef.current);
|
||||
};
|
||||
}, [to, cc, bcc, subject, bodyHtml, saveDraft]);
|
||||
|
||||
useEffect(() => {
|
||||
setWarnings(detectWarnings({ bodyHtml, to, cc, bcc, attachments, orgDomain }));
|
||||
}, [bodyHtml, to, cc, bcc, attachments, orgDomain]);
|
||||
|
||||
useEffect(() => {
|
||||
onMinimizeChange?.(minimized);
|
||||
}, [minimized, onMinimizeChange]);
|
||||
|
||||
|
||||
function flashNotice(message) {
|
||||
setNotice(message);
|
||||
window.setTimeout(() => setNotice(""), 2800);
|
||||
}
|
||||
|
||||
function applyHtml(openingTag, closingTag) {
|
||||
const editor = bodyRef.current;
|
||||
if (!editor || format !== "html") return;
|
||||
const start = editor.selectionStart;
|
||||
const end = editor.selectionEnd;
|
||||
const selected = body.slice(start, end) || "text";
|
||||
setBody(`${body.slice(0, start)}${openingTag}${selected}${closingTag}${body.slice(end)}`);
|
||||
window.requestAnimationFrame(() => editor.focus());
|
||||
function syncBodyFromEditor() {
|
||||
const html = editorRef.current?.innerHTML || "";
|
||||
setBodyHtml(html === "<br>" ? "" : html);
|
||||
}
|
||||
|
||||
async function submit(event) {
|
||||
event.preventDefault();
|
||||
const form = new FormData(event.currentTarget);
|
||||
function execFormat(command, value = null) {
|
||||
editorRef.current?.focus();
|
||||
document.execCommand(command, false, value);
|
||||
syncBodyFromEditor();
|
||||
}
|
||||
|
||||
function insertLink() {
|
||||
const url = window.prompt("Enter link URL", "https://");
|
||||
if (!url) return;
|
||||
execFormat("createLink", url);
|
||||
}
|
||||
|
||||
function insertEmoji(emoji) {
|
||||
editorRef.current?.focus();
|
||||
document.execCommand("insertText", false, emoji);
|
||||
syncBodyFromEditor();
|
||||
setShowEmoji(false);
|
||||
}
|
||||
|
||||
function insertSignature(signature) {
|
||||
if (!signature.html) return;
|
||||
const editor = editorRef.current;
|
||||
if (!editor) return;
|
||||
editor.focus();
|
||||
const block = `${editor.innerHTML ? "<br>" : ""}${signature.html}`;
|
||||
document.execCommand("insertHTML", false, block);
|
||||
syncBodyFromEditor();
|
||||
flashNotice(`Inserted signature: ${signature.label}`);
|
||||
}
|
||||
|
||||
function addFiles(fileList, asInline = false) {
|
||||
const files = Array.from(fileList || []);
|
||||
if (!files.length) return;
|
||||
setAttachments((current) => [
|
||||
...current,
|
||||
...files.map((file) => ({
|
||||
id: `${file.name}-${file.size}-${Date.now()}`,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
type: file.type,
|
||||
inline: asInline,
|
||||
preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : null,
|
||||
})),
|
||||
]);
|
||||
}
|
||||
|
||||
function removeAttachment(id) {
|
||||
setAttachments((current) => {
|
||||
const target = current.find((item) => item.id === id);
|
||||
if (target?.preview) URL.revokeObjectURL(target.preview);
|
||||
return current.filter((item) => item.id !== id);
|
||||
});
|
||||
}
|
||||
|
||||
function suggestSubject() {
|
||||
const body = plainTextFromHtml(bodyHtml);
|
||||
if (!body) {
|
||||
flashNotice("Write a message first to get subject suggestions.");
|
||||
return;
|
||||
}
|
||||
const firstLine = body.split("\n").find((line) => line.trim().length > 8)?.trim() || "Follow up";
|
||||
const shortened = firstLine.length > 58 ? `${firstLine.slice(0, 55)}…` : firstLine;
|
||||
setSubject(shortened);
|
||||
flashNotice("Subject suggestion applied.");
|
||||
}
|
||||
|
||||
function discardDraft() {
|
||||
localStorage.removeItem(draftKey);
|
||||
setTo([]);
|
||||
setCc([]);
|
||||
setBcc([]);
|
||||
setSubject("");
|
||||
setBodyHtml("");
|
||||
if (editorRef.current) editorRef.current.innerHTML = "";
|
||||
setAttachments([]);
|
||||
setDraftStatus("");
|
||||
onClose();
|
||||
}
|
||||
|
||||
const submitSend = useCallback(async () => {
|
||||
if (!to.length) {
|
||||
setStatus({ sending: false, error: "Add at least one recipient." });
|
||||
return;
|
||||
}
|
||||
setStatus({ sending: true, error: "" });
|
||||
try {
|
||||
await sendEmail(
|
||||
{
|
||||
recipients: parseAddresses(form.get("to")),
|
||||
cc: parseAddresses(form.get("cc") || ""),
|
||||
bcc: parseAddresses(form.get("bcc") || ""),
|
||||
subject: form.get("subject"),
|
||||
body_text: format === "plain" ? body : plainTextFromHtml(body),
|
||||
body_html: format === "html" ? body : null,
|
||||
recipients: recipientsToPayload(to),
|
||||
cc: recipientsToPayload(cc),
|
||||
bcc: recipientsToPayload(bcc),
|
||||
subject,
|
||||
body_text: plainTextFromHtml(bodyHtml),
|
||||
body_html: bodyHtml || null,
|
||||
},
|
||||
sessionStorage.getItem("agmail_access_token"),
|
||||
);
|
||||
localStorage.removeItem(draftKey);
|
||||
flashNotice("Message sent. Undo available for 5 seconds.");
|
||||
onSent();
|
||||
} catch (error) {
|
||||
setStatus({ sending: false, error: error.message });
|
||||
}
|
||||
}, [to, cc, bcc, subject, bodyHtml, draftKey, onSent]);
|
||||
|
||||
useEffect(() => {
|
||||
function onKeyDown(event) {
|
||||
const mod = event.metaKey || event.ctrlKey;
|
||||
if (mod && event.key === "Enter" && !status.sending) {
|
||||
event.preventDefault();
|
||||
submitSend();
|
||||
}
|
||||
if (mod && event.key === "k") {
|
||||
event.preventDefault();
|
||||
insertLink();
|
||||
}
|
||||
if (mod && event.shiftKey && event.key.toLowerCase() === "c") {
|
||||
event.preventDefault();
|
||||
setShowCc(true);
|
||||
}
|
||||
if (mod && event.shiftKey && event.key.toLowerCase() === "b") {
|
||||
event.preventDefault();
|
||||
setShowBcc(true);
|
||||
}
|
||||
if (event.key === "Escape" && !status.sending) {
|
||||
onClose();
|
||||
}
|
||||
}
|
||||
document.addEventListener("keydown", onKeyDown);
|
||||
return () => document.removeEventListener("keydown", onKeyDown);
|
||||
}, [status.sending, submitSend, onClose]);
|
||||
|
||||
function togglePopOut() {
|
||||
if (detached) {
|
||||
setDetached(false);
|
||||
return;
|
||||
}
|
||||
setDetached(true);
|
||||
setExpanded(false);
|
||||
flashNotice("Composer popped out — still linked to your mailbox.");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="compose-overlay" role="presentation">
|
||||
<section className="compose-modal" role="dialog" aria-modal="true" aria-labelledby="compose-title">
|
||||
<header className="compose-header">
|
||||
<div>
|
||||
<span className="compose-agent-mark"><AgentSpark /></span>
|
||||
<div><h2 id="compose-title">New message</h2><small>From {account.email}</small></div>
|
||||
</div>
|
||||
<button type="button" aria-label="Close compose" onClick={onClose} disabled={status.sending}>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</header>
|
||||
const shellClass = [
|
||||
"compose-window",
|
||||
minimized ? "minimized" : "",
|
||||
expanded ? "expanded" : "",
|
||||
detached ? "detached" : "",
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
<form className="compose-form" onSubmit={submit}>
|
||||
<div className="compose-recipient-row">
|
||||
<label htmlFor="compose-to">To</label>
|
||||
<input id="compose-to" name="to" type="text" placeholder="name@example.com" required autoFocus />
|
||||
<button type="button" onClick={() => setShowCopies((visible) => !visible)}>Cc · Bcc</button>
|
||||
const offset = stackIndex * 28;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={shellClass}
|
||||
style={{ right: `${24 + offset}px`, bottom: `${24 + offset}px` }}
|
||||
role="dialog"
|
||||
aria-label="Compose message"
|
||||
>
|
||||
<header className="compose-window-header">
|
||||
<div className="compose-window-title">
|
||||
<span className="compose-agent-mark"><AgentSpark /></span>
|
||||
<div>
|
||||
<h2>New message</h2>
|
||||
<MenuDropdown
|
||||
className="compose-from-picker"
|
||||
label={
|
||||
<span className="compose-from-label">
|
||||
From: <strong>{fromAddress.email}</strong>
|
||||
</span>
|
||||
}
|
||||
items={fromOptions.map((option) => ({
|
||||
id: option.email,
|
||||
label: option.email,
|
||||
hint: option.primary ? "Default" : option.label,
|
||||
active: option.email === fromAddress.email,
|
||||
onClick: () => setFromAddress(option),
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
{showCopies && (
|
||||
<div className="compose-copy-fields">
|
||||
<label>Cc<input name="cc" type="text" placeholder="Copy recipients" /></label>
|
||||
<label>Bcc<input name="bcc" type="text" placeholder="Hidden recipients" /></label>
|
||||
</div>
|
||||
<div className="compose-window-controls">
|
||||
<button type="button" title="Minimize" aria-label="Minimize" onClick={() => setMinimized((v) => !v)}>
|
||||
<Minus size={16} />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
title={expanded ? "Restore" : "Expand"}
|
||||
aria-label={expanded ? "Restore" : "Expand"}
|
||||
onClick={() => { setExpanded((v) => !v); setDetached(false); }}
|
||||
>
|
||||
{expanded ? <Minimize2 size={15} /> : <Maximize2 size={15} />}
|
||||
</button>
|
||||
<button type="button" title="Pop out" aria-label="Pop out" onClick={togglePopOut}>
|
||||
<ExternalLink size={15} />
|
||||
</button>
|
||||
<button type="button" title="Close" aria-label="Close compose" onClick={onClose} disabled={status.sending}>
|
||||
<X size={17} />
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{!minimized && (
|
||||
<div className="compose-window-body">
|
||||
<div className="compose-recipient-block">
|
||||
<RecipientField
|
||||
label="To"
|
||||
recipients={to}
|
||||
onChange={setTo}
|
||||
suggestions={contacts}
|
||||
orgDomain={orgDomain}
|
||||
autoFocus
|
||||
/>
|
||||
<div className="compose-recipient-toggles">
|
||||
{!showCc && (
|
||||
<button type="button" onClick={() => setShowCc(true)}>Cc</button>
|
||||
)}
|
||||
{!showBcc && (
|
||||
<button type="button" onClick={() => setShowBcc(true)}>Bcc</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showCc && (
|
||||
<RecipientField label="Cc" recipients={cc} onChange={setCc} suggestions={contacts} orgDomain={orgDomain} />
|
||||
)}
|
||||
{showBcc && (
|
||||
<RecipientField label="Bcc" recipients={bcc} onChange={setBcc} suggestions={contacts} orgDomain={orgDomain} />
|
||||
)}
|
||||
|
||||
<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 && (
|
||||
<div className="compose-attachments" aria-label="Attachments">
|
||||
{attachments.map((file) => (
|
||||
<div key={file.id} className="compose-attachment-card">
|
||||
<span className="compose-attachment-icon">{file.inline ? "🖼" : "📄"}</span>
|
||||
<div>
|
||||
<strong>{file.name}</strong>
|
||||
<small>{file.type || "File"} · {formatFileSize(file.size)}</small>
|
||||
</div>
|
||||
<div className="compose-attachment-actions">
|
||||
<button type="button" onClick={() => flashNotice("Attachment preview — coming soon")}>Preview</button>
|
||||
<button type="button" onClick={() => flashNotice("Summarize attachment — coming soon")}>Summarize</button>
|
||||
<button type="button" aria-label={`Remove ${file.name}`} onClick={() => removeAttachment(file.id)}>
|
||||
<X size={14} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<input className="compose-subject" name="subject" placeholder="Subject" maxLength="998" />
|
||||
|
||||
<div className="compose-format-row">
|
||||
<span>Message format</span>
|
||||
<div role="tablist" aria-label="Message format">
|
||||
<button className={format === "plain" ? "active" : ""} type="button" onClick={() => setFormat("plain")}>Plain</button>
|
||||
<button className={format === "html" ? "active" : ""} type="button" onClick={() => setFormat("html")}>HTML</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea
|
||||
className="compose-body"
|
||||
ref={bodyRef}
|
||||
value={body}
|
||||
onChange={(event) => setBody(event.target.value)}
|
||||
placeholder={format === "html" ? "<p>Write your HTML email…</p>" : "Write your message…"}
|
||||
required
|
||||
<div
|
||||
className="compose-editor"
|
||||
ref={editorRef}
|
||||
contentEditable
|
||||
suppressContentEditableWarning
|
||||
role="textbox"
|
||||
aria-multiline="true"
|
||||
data-placeholder="Write your message…"
|
||||
onInput={syncBodyFromEditor}
|
||||
onDragOver={(event) => event.preventDefault()}
|
||||
onDrop={(event) => {
|
||||
event.preventDefault();
|
||||
addFiles(event.dataTransfer.files);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div className="compose-tools" aria-label="Message tools">
|
||||
<button type="button" title="Bold" disabled={format !== "html"} onClick={() => applyHtml("<strong>", "</strong>")}><Bold size={16} /></button>
|
||||
<button type="button" title="Italic" disabled={format !== "html"} onClick={() => applyHtml("<em>", "</em>")}><Italic size={16} /></button>
|
||||
<button type="button" title="Underline" disabled={format !== "html"} onClick={() => applyHtml("<u>", "</u>")}><Underline size={16} /></button>
|
||||
<button type="button" title="List" disabled={format !== "html"} onClick={() => applyHtml("<ul><li>", "</li></ul>")}><List size={17} /></button>
|
||||
<button type="button" title="Add link" disabled={format !== "html"} onClick={() => applyHtml('<a href="https://">', "</a>")}><Link size={17} /></button>
|
||||
{format === "plain" && <span>Formatting tools are available in HTML mode</span>}
|
||||
<div className="compose-agent-bar compose-agent-bar-disabled" title="AG Agent drafting — coming soon">
|
||||
<AgentSpark />
|
||||
<span>Ask AG Agent to write or improve this email…</span>
|
||||
<button type="button" disabled aria-hidden="true"><ArrowRight size={16} /></button>
|
||||
</div>
|
||||
|
||||
<div className="compose-ai">
|
||||
<AgentSpark />
|
||||
<input
|
||||
value={aiPrompt}
|
||||
onChange={(event) => setAiPrompt(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter") {
|
||||
event.preventDefault();
|
||||
helpWrite();
|
||||
}
|
||||
}}
|
||||
placeholder="Describe what you want to say"
|
||||
/>
|
||||
<button type="button" className="agent-action" onClick={helpWrite} disabled={!aiPrompt.trim()}>
|
||||
<AgentSpark /> Improve
|
||||
</button>
|
||||
<div className="compose-format-bar" aria-label="Formatting">
|
||||
<button type="button" title="Bold" onClick={() => execFormat("bold")}><Bold size={15} /></button>
|
||||
<button type="button" title="Italic" onClick={() => execFormat("italic")}><Italic size={15} /></button>
|
||||
<button type="button" title="Underline" onClick={() => execFormat("underline")}><Underline size={15} /></button>
|
||||
<button type="button" title="Strikethrough" onClick={() => execFormat("strikeThrough")}><Strikethrough size={15} /></button>
|
||||
<span className="compose-format-divider" />
|
||||
<button type="button" title="Align left" onClick={() => execFormat("justifyLeft")}><AlignLeft size={15} /></button>
|
||||
<button type="button" title="Align center" onClick={() => execFormat("justifyCenter")}><AlignCenter size={15} /></button>
|
||||
<button type="button" title="Align right" onClick={() => execFormat("justifyRight")}><AlignRight size={15} /></button>
|
||||
<span className="compose-format-divider" />
|
||||
<button type="button" title="Bulleted list" onClick={() => execFormat("insertUnorderedList")}><List size={15} /></button>
|
||||
<button type="button" title="Numbered list" onClick={() => execFormat("insertOrderedList")}><ListOrdered size={15} /></button>
|
||||
<button type="button" title="Indent" onClick={() => execFormat("indent")}><IndentIncrease size={15} /></button>
|
||||
<button type="button" title="Outdent" onClick={() => execFormat("outdent")}><IndentDecrease size={15} /></button>
|
||||
<button type="button" title="Quote" onClick={() => execFormat("formatBlock", "blockquote")}><Quote size={15} /></button>
|
||||
<button type="button" title="Link" onClick={insertLink}><Link size={15} /></button>
|
||||
<button type="button" title="Remove formatting" onClick={() => execFormat("removeFormat")}><RemoveFormatting size={15} /></button>
|
||||
</div>
|
||||
|
||||
{warnings.length > 0 && (
|
||||
<div className="compose-warnings" role="status">
|
||||
{warnings.map((warning) => (
|
||||
<p key={warning}>{warning}</p>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status.error && <p className="compose-error" role="alert">{status.error}</p>}
|
||||
<footer className="compose-footer">
|
||||
<span>Sent securely through agmail SMTP</span>
|
||||
<button className="compose-send" type="submit" disabled={status.sending}>
|
||||
{status.sending ? "Sending…" : "Send"} <Send size={16} />
|
||||
</button>
|
||||
{notice && <p className="compose-notice" role="status">{notice}</p>}
|
||||
|
||||
<footer className="compose-action-bar">
|
||||
<div className="compose-action-left">
|
||||
<MenuDropdown
|
||||
className="compose-send-menu"
|
||||
label={<><Send size={15} /> Send</>}
|
||||
items={[
|
||||
{
|
||||
id: "now",
|
||||
label: "Send now",
|
||||
icon: <Send size={14} />,
|
||||
onClick: submitSend,
|
||||
},
|
||||
{
|
||||
id: "schedule",
|
||||
label: "Schedule send",
|
||||
icon: <Clock size={14} />,
|
||||
onClick: () => flashNotice("Scheduled send — coming soon"),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
<button type="button" className="compose-icon-btn" title="Attach files" onClick={() => fileInputRef.current?.click()}>
|
||||
<Paperclip size={17} />
|
||||
</button>
|
||||
<button type="button" className="compose-icon-btn" title="Insert image" onClick={() => imageInputRef.current?.click()}>
|
||||
<Image size={17} />
|
||||
</button>
|
||||
<button type="button" className="compose-icon-btn" title="Insert link" onClick={insertLink}>
|
||||
<Link size={17} />
|
||||
</button>
|
||||
<div className="compose-emoji-wrap">
|
||||
<button type="button" className="compose-icon-btn" title="Emoji" onClick={() => setShowEmoji((v) => !v)}>
|
||||
<Smile size={17} />
|
||||
</button>
|
||||
{showEmoji && (
|
||||
<div className="compose-emoji-panel">
|
||||
{EMOJI_SAMPLES.map((emoji) => (
|
||||
<button key={emoji} type="button" onClick={() => insertEmoji(emoji)}>{emoji}</button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<MenuDropdown
|
||||
className="compose-icon-menu"
|
||||
label={<PenLine size={17} />}
|
||||
items={signatures.map((signature) => ({
|
||||
id: signature.id,
|
||||
label: signature.id === "none" ? signature.label : `Insert ${signature.label}`,
|
||||
onClick: () => insertSignature(signature),
|
||||
}))}
|
||||
/>
|
||||
<MenuDropdown
|
||||
className="compose-icon-menu"
|
||||
label={<Lock size={17} />}
|
||||
items={[
|
||||
{ id: "standard", label: "Standard", active: true, onClick: () => flashNotice("Standard security") },
|
||||
{ id: "confidential", label: "Confidential", onClick: () => flashNotice("Confidential mode — coming soon") },
|
||||
{ id: "encrypted", label: "Encrypted", onClick: () => flashNotice("Encryption — coming soon") },
|
||||
]}
|
||||
/>
|
||||
<MenuDropdown
|
||||
className="compose-icon-menu"
|
||||
label={<MoreHorizontal size={17} />}
|
||||
items={[
|
||||
{ id: "receipt", label: "Request read receipt", onClick: () => flashNotice("Read receipt — coming soon") },
|
||||
{ id: "priority", label: "Mark as important", onClick: () => flashNotice("Priority — coming soon") },
|
||||
{ id: "plain", label: "Plain-text mode", onClick: () => flashNotice("Plain-text view — coming soon") },
|
||||
{ id: "html", label: "Edit HTML source", onClick: () => flashNotice("HTML editor — coming soon") },
|
||||
{ id: "print", label: "Print", onClick: () => window.print() },
|
||||
{ id: "spell", label: "Check spelling", onClick: () => flashNotice("Spell check — coming soon") },
|
||||
{ id: "fullscreen", label: "Default to full screen", onClick: () => setExpanded(true) },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div className="compose-action-right">
|
||||
{draftStatus && <span className="compose-draft-status">{draftStatus}</span>}
|
||||
<button type="button" className="compose-discard" title="Discard draft" onClick={discardDraft}>
|
||||
<Trash2 size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</footer>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
multiple
|
||||
hidden
|
||||
onChange={(event) => {
|
||||
addFiles(event.target.files);
|
||||
event.target.value = "";
|
||||
}}
|
||||
/>
|
||||
<input
|
||||
ref={imageInputRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
multiple
|
||||
hidden
|
||||
onChange={(event) => {
|
||||
addFiles(event.target.files, true);
|
||||
event.target.value = "";
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
206
frontend/src/components/compose/RecipientField.jsx
Normal file
206
frontend/src/components/compose/RecipientField.jsx
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
import { useEffect, useRef, useState } from "react";
|
||||
import { X } from "lucide-react";
|
||||
|
||||
const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
|
||||
function parseAddressToken(token) {
|
||||
const trimmed = token.trim();
|
||||
if (!trimmed) return null;
|
||||
const match = trimmed.match(/^(.+?)\s*<([^>]+)>$/);
|
||||
if (match) {
|
||||
return { name: match[1].trim(), email: match[2].trim().toLowerCase() };
|
||||
}
|
||||
if (EMAIL_RE.test(trimmed)) {
|
||||
return { name: "", email: trimmed.toLowerCase() };
|
||||
}
|
||||
return { name: trimmed, email: "", invalid: true };
|
||||
}
|
||||
|
||||
function recipientKey(recipient) {
|
||||
return recipient.email || recipient.name;
|
||||
}
|
||||
|
||||
function isExternal(email, orgDomain) {
|
||||
if (!email || !orgDomain) return false;
|
||||
const domain = email.split("@")[1]?.toLowerCase();
|
||||
return Boolean(domain && domain !== orgDomain.toLowerCase());
|
||||
}
|
||||
|
||||
export default function RecipientField({
|
||||
label,
|
||||
recipients,
|
||||
onChange,
|
||||
suggestions = [],
|
||||
orgDomain,
|
||||
onFocus,
|
||||
autoFocus = false,
|
||||
}) {
|
||||
const [input, setInput] = useState("");
|
||||
const [open, setOpen] = useState(false);
|
||||
const [highlight, setHighlight] = useState(0);
|
||||
const inputRef = useRef(null);
|
||||
const wrapRef = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (autoFocus) inputRef.current?.focus();
|
||||
}, [autoFocus]);
|
||||
|
||||
useEffect(() => {
|
||||
function handleClick(event) {
|
||||
if (!wrapRef.current?.contains(event.target)) setOpen(false);
|
||||
}
|
||||
document.addEventListener("mousedown", handleClick);
|
||||
return () => document.removeEventListener("mousedown", handleClick);
|
||||
}, []);
|
||||
|
||||
const filtered = suggestions
|
||||
.filter((item) => {
|
||||
const query = input.trim().toLowerCase();
|
||||
if (!query) return true;
|
||||
const haystack = `${item.name} ${item.email}`.toLowerCase();
|
||||
return haystack.includes(query);
|
||||
})
|
||||
.filter((item) => !recipients.some((r) => r.email === item.email))
|
||||
.slice(0, 8);
|
||||
|
||||
function addRecipient(recipient) {
|
||||
const normalized = {
|
||||
name: recipient.name || "",
|
||||
email: recipient.email?.toLowerCase() || "",
|
||||
invalid: recipient.invalid || (recipient.email ? !EMAIL_RE.test(recipient.email) : true),
|
||||
external: isExternal(recipient.email, orgDomain),
|
||||
group: Boolean(recipient.group),
|
||||
};
|
||||
if (!normalized.email && !normalized.name) return;
|
||||
if (recipients.some((r) => r.email && r.email === normalized.email)) return;
|
||||
onChange([...recipients, normalized]);
|
||||
setInput("");
|
||||
setOpen(false);
|
||||
setHighlight(0);
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
|
||||
function commitInput() {
|
||||
const parts = input.split(/[,;\n]/).map((part) => part.trim()).filter(Boolean);
|
||||
if (!parts.length) return;
|
||||
const next = [...recipients];
|
||||
parts.forEach((part) => {
|
||||
const parsed = parseAddressToken(part);
|
||||
if (!parsed) return;
|
||||
const entry = {
|
||||
...parsed,
|
||||
invalid: parsed.invalid || (parsed.email ? !EMAIL_RE.test(parsed.email) : true),
|
||||
external: isExternal(parsed.email, orgDomain),
|
||||
};
|
||||
if (entry.email && next.some((r) => r.email === entry.email)) return;
|
||||
next.push(entry);
|
||||
});
|
||||
onChange(next);
|
||||
setInput("");
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
function removeAt(index) {
|
||||
onChange(recipients.filter((_, i) => i !== index));
|
||||
inputRef.current?.focus();
|
||||
}
|
||||
|
||||
function handleKeyDown(event) {
|
||||
if (event.key === "ArrowDown" && open && filtered.length) {
|
||||
event.preventDefault();
|
||||
setHighlight((h) => (h + 1) % filtered.length);
|
||||
return;
|
||||
}
|
||||
if (event.key === "ArrowUp" && open && filtered.length) {
|
||||
event.preventDefault();
|
||||
setHighlight((h) => (h - 1 + filtered.length) % filtered.length);
|
||||
return;
|
||||
}
|
||||
if (event.key === "Enter" || event.key === "Tab" || event.key === ",") {
|
||||
if (open && filtered.length && event.key !== ",") {
|
||||
event.preventDefault();
|
||||
addRecipient(filtered[highlight]);
|
||||
return;
|
||||
}
|
||||
if (input.trim()) {
|
||||
event.preventDefault();
|
||||
commitInput();
|
||||
}
|
||||
return;
|
||||
}
|
||||
if (event.key === "Backspace" && !input && recipients.length) {
|
||||
removeAt(recipients.length - 1);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="compose-recipient-field" ref={wrapRef}>
|
||||
<span className="compose-recipient-label">{label}</span>
|
||||
<div className="compose-recipient-chips" onClick={() => inputRef.current?.focus()}>
|
||||
{recipients.map((recipient, index) => (
|
||||
<span
|
||||
key={`${recipientKey(recipient)}-${index}`}
|
||||
className={`compose-chip${recipient.invalid ? " invalid" : ""}${recipient.external ? " external" : ""}${recipient.group ? " group" : ""}`}
|
||||
title={recipient.email}
|
||||
>
|
||||
<span className="compose-chip-label">
|
||||
{recipient.name || recipient.email}
|
||||
{recipient.external && <em>External</em>}
|
||||
</span>
|
||||
<button type="button" aria-label={`Remove ${recipient.email || recipient.name}`} onClick={() => removeAt(index)}>
|
||||
<X size={12} />
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
<input
|
||||
ref={inputRef}
|
||||
className="compose-recipient-input"
|
||||
value={input}
|
||||
onChange={(event) => {
|
||||
setInput(event.target.value);
|
||||
setOpen(true);
|
||||
setHighlight(0);
|
||||
}}
|
||||
onFocus={() => {
|
||||
setOpen(true);
|
||||
onFocus?.();
|
||||
}}
|
||||
onKeyDown={handleKeyDown}
|
||||
onBlur={() => {
|
||||
if (input.trim()) commitInput();
|
||||
}}
|
||||
placeholder={recipients.length ? "" : "Recipients"}
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
/>
|
||||
</div>
|
||||
{open && filtered.length > 0 && (
|
||||
<ul className="compose-recipient-suggestions" role="listbox">
|
||||
{filtered.map((item, index) => (
|
||||
<li key={item.email || item.name} role="option" aria-selected={index === highlight}>
|
||||
<button
|
||||
type="button"
|
||||
className={index === highlight ? "active" : ""}
|
||||
onMouseDown={(event) => {
|
||||
event.preventDefault();
|
||||
addRecipient(item);
|
||||
}}
|
||||
>
|
||||
<strong>{item.name || item.email}</strong>
|
||||
{item.name && <small>{item.email}</small>}
|
||||
{item.group && <em>Group</em>}
|
||||
{isExternal(item.email, orgDomain) && <em>External</em>}
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function recipientsToPayload(recipients) {
|
||||
return recipients
|
||||
.filter((r) => r.email && EMAIL_RE.test(r.email))
|
||||
.map((r) => (r.name ? `${r.name} <${r.email}>` : r.email));
|
||||
}
|
||||
|
|
@ -670,50 +670,91 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.mail-detail-meta time { white-space:nowrap; }
|
||||
.mail-detail-body { padding-top:23px; color:#383440; font-size:12px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
|
||||
|
||||
.compose-overlay { position:fixed; inset:0; z-index:40; padding:var(--space-6); display:flex; align-items:center; justify-content:center; background:#08082175; backdrop-filter:blur(5px); animation:fadeIn var(--motion-base) var(--ease-standard); }
|
||||
.compose-modal { width:min(760px,100%); max-height:calc(100vh - 48px); overflow:auto; border:0; border-radius:var(--radius-float); background:#fffefd; box-shadow:0 32px 90px #08082150; animation:scaleIn var(--motion-slow) var(--ease-standard); }
|
||||
.compose-header { min-height:76px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:linear-gradient(100deg,#fff6f2,#fffefd); }
|
||||
.compose-header>div { display:flex; align-items:center; gap:11px; }
|
||||
.compose-header>div>span { width:34px; height:34px; display:grid; place-items:center; border-radius:11px; background:var(--ink); color:var(--coral); }
|
||||
.compose-header h2 { margin:0; font:600 17px "Manrope"; letter-spacing:-.5px; }
|
||||
.compose-header small { display:block; margin-top:2px; color:#97919a; font-size:9px; }
|
||||
.compose-header>button { width:35px; height:35px; display:grid; place-items:center; border:0; border-radius:10px; background:transparent; color:#77717a; }
|
||||
.compose-header>button:hover { background:#f4eeea; color:var(--ink); }
|
||||
.compose-form { padding:0 24px 22px; }
|
||||
.compose-recipient-row { min-height:55px; display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; border-bottom:1px solid var(--line); }
|
||||
.compose-recipient-row label,.compose-copy-fields label { color:#77717a; font-size:11px; font-weight:700; }
|
||||
.compose-recipient-row input,.compose-copy-fields input,.compose-subject,.compose-ai input { min-width:0; border:0; outline:0; background:transparent; color:var(--ink); font:500 12px "DM Sans"; }
|
||||
.compose-recipient-row>button { padding:6px 8px; border:0; border-radius:7px; background:transparent; color:#847e87; font-size:10px; font-weight:700; }
|
||||
.compose-recipient-row>button:hover { background:var(--blush); color:#bc5948; }
|
||||
.compose-copy-fields { display:grid; grid-template-columns:1fr 1fr; border-bottom:1px solid var(--line); }
|
||||
.compose-copy-fields label { min-height:48px; padding-right:18px; display:grid; grid-template-columns:32px 1fr; align-items:center; }
|
||||
.compose-copy-fields label+label { padding-left:18px; border-left:1px solid var(--line); }
|
||||
.compose-subject { width:100%; height:52px; border-bottom:1px solid var(--line); font-size:13px; }
|
||||
.compose-format-row { padding:12px 0; display:flex; align-items:center; justify-content:space-between; }
|
||||
.compose-format-row>span { color:#97919a; font-size:9px; font-weight:700; letter-spacing:.8px; text-transform:uppercase; }
|
||||
.compose-format-row>div { padding:3px; display:flex; border-radius:9px; background:#f3efec; }
|
||||
.compose-format-row button { min-width:56px; height:27px; border:0; border-radius:7px; background:transparent; color:#85808a; font-size:9px; font-weight:700; }
|
||||
.compose-format-row button.active { background:white; color:var(--ink); box-shadow:0 3px 9px #241a2b18; }
|
||||
.compose-body { width:100%; min-height:210px; padding:17px; resize:vertical; border:1px solid #ebe5e1; outline:0; border-radius:13px; background:white; color:var(--ink); font:400 13px/1.65 "DM Sans"; }
|
||||
.compose-body:focus { border-color:#f0ad9f; box-shadow:0 0 0 3px #ff806c14; }
|
||||
.compose-tools { padding:9px 3px; display:flex; gap:3px; border-bottom:1px solid var(--line); }
|
||||
.compose-tools button { width:32px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#77717a; }
|
||||
.compose-tools button:hover { background:#fff0eb; color:#c25c49; }
|
||||
.compose-tools button:disabled { opacity:.3; cursor:not-allowed; }
|
||||
.compose-tools button:disabled:hover { background:transparent; color:#77717a; }
|
||||
.compose-tools>span { margin-left:7px; align-self:center; color:#aaa4ac; font-size:8px; }
|
||||
.compose-ai { min-height:58px; margin:14px 0 10px; padding:8px 9px 8px 14px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border:1px solid #e9e4ef; border-radius:14px; background:linear-gradient(100deg,#f5f4fb,#fff6f2); }
|
||||
.compose-ai>svg { color:#7463a8; }
|
||||
.compose-ai button { min-height:35px; padding:0 13px; border:0; border-radius:var(--radius-sm); background:var(--ink); color:white; font-size:10px; font-weight:700; }
|
||||
.compose-ai button.agent-action { background:var(--agent-soft); color:#6d4aff; border:1px solid var(--agent-border); font-size:12px; }
|
||||
.compose-ai button.agent-action:hover:not(:disabled) { background:#ebe4ff; color:#5a3fe0; }
|
||||
.compose-ai button:disabled { opacity:.45; cursor:not-allowed; }
|
||||
.compose-error { margin:8px 0; color:#b54f3d; font-size:10px; }
|
||||
.compose-footer { display:flex; align-items:center; justify-content:space-between; gap:16px; }
|
||||
.compose-footer>span { color:#99939b; font-size:9px; }
|
||||
.compose-send { min-width:105px; min-height:41px; display:flex; align-items:center; justify-content:center; gap:8px; border:0; border-radius:10px; background:var(--coral); color:var(--ink); box-shadow:0 9px 20px #ff806c3b; font-weight:700; }
|
||||
.compose-send:hover { transform:translateY(-1px); box-shadow:0 13px 25px #ff806c57; }
|
||||
.compose-send:disabled { opacity:.6; cursor:wait; transform:none; }
|
||||
.compose-window { position:fixed; z-index:40; width:min(560px,calc(100vw - 48px)); max-height:min(78vh,720px); display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border-normal); border-radius:14px 14px 4px 4px; background:#fff; box-shadow:0 12px 40px rgba(8,8,33,.18),0 2px 8px rgba(8,8,33,.08); animation:composeSlideUp var(--motion-slow) var(--ease-standard); }
|
||||
.compose-window.minimized { width:min(360px,calc(100vw - 48px)); max-height:none; }
|
||||
.compose-window.expanded { width:min(900px,calc(100vw - 48px)); max-height:min(88vh,820px); }
|
||||
.compose-window.detached { width:min(760px,calc(100vw - 80px)); max-height:min(90vh,860px); right:40px !important; bottom:40px !important; box-shadow:0 20px 60px rgba(8,8,33,.22); }
|
||||
@keyframes composeSlideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }
|
||||
.compose-window-header { min-height:54px; padding:0 10px 0 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom:1px solid var(--line); background:linear-gradient(100deg,#fff6f2,#fffefd); cursor:default; }
|
||||
.compose-window-title { min-width:0; display:flex; align-items:center; gap:10px; }
|
||||
.compose-window-title h2 { margin:0; font:600 14px "Manrope"; letter-spacing:-.3px; white-space:nowrap; }
|
||||
.compose-from-picker .compose-menu-trigger { min-height:auto; padding:0; border:0; background:transparent; color:#8a848d; font-size:10px; font-weight:500; box-shadow:none; }
|
||||
.compose-from-label strong { color:#5c5760; font-weight:600; }
|
||||
.compose-window-controls { display:flex; align-items:center; gap:2px; flex-shrink:0; }
|
||||
.compose-window-controls button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#77717a; }
|
||||
.compose-window-controls button:hover { background:#f4eeea; color:var(--ink); }
|
||||
.compose-window-body { min-height:0; flex:1; display:flex; flex-direction:column; overflow:auto; }
|
||||
.compose-recipient-block { position:relative; display:grid; grid-template-columns:1fr auto; align-items:start; border-bottom:1px solid var(--line); }
|
||||
.compose-recipient-toggles { padding:14px 12px 0 0; display:flex; gap:6px; }
|
||||
.compose-recipient-toggles button { padding:4px 7px; border:0; border-radius:6px; background:transparent; color:#847e87; font-size:10px; font-weight:700; }
|
||||
.compose-recipient-toggles button:hover { background:var(--blush); color:#bc5948; }
|
||||
.compose-recipient-field { position:relative; min-height:46px; padding:6px 12px 6px 0; display:grid; grid-template-columns:34px 1fr; align-items:start; gap:4px; border-bottom:1px solid var(--line); }
|
||||
.compose-recipient-label { padding-top:10px; color:#77717a; font-size:11px; font-weight:700; }
|
||||
.compose-recipient-chips { min-height:34px; padding:4px 0; display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
|
||||
.compose-recipient-input { flex:1; min-width:120px; height:28px; border:0; outline:0; background:transparent; color:var(--ink); font:500 12px "DM Sans"; }
|
||||
.compose-chip { max-width:100%; height:26px; padding:0 4px 0 8px; display:inline-flex; align-items:center; gap:4px; border-radius:7px; background:#f3efec; color:var(--ink); font-size:11px; font-weight:600; }
|
||||
.compose-chip.external { background:#fff4ea; color:#9a5b28; }
|
||||
.compose-chip.invalid { background:#fdeeed; color:#b54f3d; }
|
||||
.compose-chip.group { background:#eef4ff; color:#4d74c4; }
|
||||
.compose-chip-label { display:inline-flex; align-items:center; gap:5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.compose-chip-label em { padding:1px 5px; border-radius:4px; background:rgba(0,0,0,.06); font-size:8px; font-weight:700; font-style:normal; letter-spacing:.3px; text-transform:uppercase; }
|
||||
.compose-chip button { width:18px; height:18px; display:grid; place-items:center; border:0; border-radius:5px; background:transparent; color:#8a848d; }
|
||||
.compose-chip button:hover { background:rgba(0,0,0,.06); color:var(--ink); }
|
||||
.compose-recipient-suggestions { position:absolute; top:calc(100% + 2px); left:34px; right:12px; z-index:5; margin:0; padding:6px; list-style:none; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-recipient-suggestions button { width:100%; padding:8px 10px; display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:center; border:0; border-radius:8px; background:transparent; text-align:left; color:var(--ink); }
|
||||
.compose-recipient-suggestions button strong { font-size:12px; font-weight:600; }
|
||||
.compose-recipient-suggestions button small { grid-column:1; color:#8a848d; font-size:10px; }
|
||||
.compose-recipient-suggestions button em { font-size:8px; font-weight:700; font-style:normal; letter-spacing:.3px; text-transform:uppercase; color:#9a5b28; }
|
||||
.compose-recipient-suggestions button.active,.compose-recipient-suggestions button:hover { background:#f7f4f1; }
|
||||
.compose-subject-row { min-height:46px; padding:0 12px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--line); }
|
||||
.compose-subject-input { flex:1; min-width:0; height:44px; border:0; outline:0; background:transparent; color:var(--ink); font:500 13px "DM Sans"; }
|
||||
.compose-subject-suggest { flex-shrink:0; height:28px; padding:0 10px; display:inline-flex; align-items:center; gap:5px; border:1px solid var(--agent-border); border-radius:7px; background:var(--agent-soft); color:#6d4aff; font-size:10px; font-weight:700; }
|
||||
.compose-subject-suggest:hover { background:#ebe4ff; }
|
||||
.compose-attachments { padding:10px 12px 4px; display:flex; flex-wrap:wrap; gap:8px; border-bottom:1px solid var(--line); }
|
||||
.compose-attachment-card { min-width:min(100%,220px); max-width:280px; padding:8px 10px; display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center; border:1px solid var(--line); border-radius:10px; background:#fcfbfa; }
|
||||
.compose-attachment-icon { font-size:18px; line-height:1; }
|
||||
.compose-attachment-card strong { display:block; font-size:11px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
|
||||
.compose-attachment-card small { display:block; margin-top:2px; color:#8a848d; font-size:9px; }
|
||||
.compose-attachment-actions { display:flex; align-items:center; gap:2px; }
|
||||
.compose-attachment-actions button { padding:4px 5px; border:0; border-radius:6px; background:transparent; color:#8a848d; font-size:8px; font-weight:700; }
|
||||
.compose-attachment-actions button:hover { background:#f3efec; color:var(--ink); }
|
||||
.compose-editor { min-height:180px; max-height:38vh; flex:1; padding:14px 16px; overflow:auto; outline:0; color:var(--ink); font:400 13px/1.65 "DM Sans"; }
|
||||
.compose-editor:empty:before { content:attr(data-placeholder); color:#aaa4ac; pointer-events:none; }
|
||||
.compose-editor blockquote { margin:8px 0; padding-left:12px; border-left:3px solid #e5dfd9; color:#67677a; }
|
||||
.compose-agent-bar { min-height:44px; margin:0; padding:0 12px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(100deg,#f8f6ff,#fff8f5); color:#7a6f92; font-size:11px; }
|
||||
.compose-agent-bar-disabled { opacity:.72; }
|
||||
.compose-agent-bar button { width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:8px; background:var(--ink); color:#fff; opacity:.35; }
|
||||
.compose-format-bar { padding:6px 10px; display:flex; flex-wrap:wrap; align-items:center; gap:2px; border-bottom:1px solid var(--line); background:#fcfbfa; }
|
||||
.compose-format-bar button { width:30px; height:28px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#77717a; }
|
||||
.compose-format-bar button:hover { background:#fff0eb; color:#c25c49; }
|
||||
.compose-format-divider { width:1px; height:18px; margin:0 4px; background:#ebe5e1; }
|
||||
.compose-warnings { padding:8px 12px; border-bottom:1px solid #f0e2c8; background:#fff8ea; }
|
||||
.compose-warnings p { margin:0; color:#9a7228; font-size:10px; line-height:1.45; }
|
||||
.compose-warnings p+p { margin-top:4px; }
|
||||
.compose-error { margin:0; padding:8px 12px; color:#b54f3d; font-size:10px; background:#fdeeed; }
|
||||
.compose-notice { margin:0; padding:8px 12px; color:#4d74c4; font-size:10px; background:#eef4ff; }
|
||||
.compose-action-bar { min-height:48px; padding:8px 10px 10px; display:flex; align-items:center; justify-content:space-between; gap:10px; background:#fff; }
|
||||
.compose-action-left { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }
|
||||
.compose-action-right { display:flex; align-items:center; gap:8px; flex-shrink:0; }
|
||||
.compose-menu { position:relative; }
|
||||
.compose-menu-trigger { min-height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; border:0; border-radius:8px; background:var(--coral); color:var(--ink); font-size:12px; font-weight:700; box-shadow:var(--shadow-accent); }
|
||||
.compose-send-menu .compose-menu-trigger { padding:0 14px; }
|
||||
.compose-icon-menu .compose-menu-trigger,.compose-icon-btn { width:34px; height:34px; padding:0; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#6f6a73; box-shadow:none; }
|
||||
.compose-icon-menu .compose-menu-trigger:hover,.compose-icon-btn:hover { background:#f3efec; color:var(--ink); }
|
||||
.compose-menu-panel { position:absolute; bottom:calc(100% + 6px); left:0; z-index:6; min-width:190px; padding:6px; display:grid; gap:2px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-menu-panel.align-right { left:auto; right:0; }
|
||||
.compose-menu-panel button { width:100%; min-height:34px; padding:0 10px; display:flex; align-items:center; gap:8px; border:0; border-radius:8px; background:transparent; color:var(--ink); font-size:11px; font-weight:600; text-align:left; }
|
||||
.compose-menu-panel button small { margin-left:auto; color:#8a848d; font-size:9px; font-weight:500; }
|
||||
.compose-menu-panel button:hover:not(:disabled) { background:#f7f4f1; }
|
||||
.compose-menu-panel button.active { background:#eef8f2; color:#3d8a5d; }
|
||||
.compose-menu-panel button:disabled { opacity:.45; cursor:not-allowed; }
|
||||
.compose-draft-status { color:#8a848d; font-size:10px; font-weight:600; white-space:nowrap; }
|
||||
.compose-discard { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:8px; background:transparent; color:#8a848d; }
|
||||
.compose-discard:hover { background:#fdeeed; color:#b54f3d; }
|
||||
.compose-emoji-wrap { position:relative; }
|
||||
.compose-emoji-panel { position:absolute; bottom:calc(100% + 6px); left:0; z-index:6; width:188px; padding:8px; display:grid; grid-template-columns:repeat(6,1fr); gap:4px; border:1px solid var(--line); border-radius:10px; background:#fff; box-shadow:var(--shadow-float); }
|
||||
.compose-emoji-panel button { width:28px; height:28px; border:0; border-radius:7px; background:transparent; font-size:16px; }
|
||||
.compose-emoji-panel button:hover { background:#f3efec; }
|
||||
|
||||
@media(max-width:900px) {
|
||||
.web-view { display:none; }.mobile-view { display:block; }
|
||||
|
|
@ -764,22 +805,15 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.mailbox-shell.detail-visible .mailbox-list-pane { display:flex; min-height:520px; }
|
||||
.mail-detail { position:static; flex:1; }
|
||||
.mail-detail-close { display:flex!important; }
|
||||
.compose-overlay { padding:12px; align-items:flex-end; }
|
||||
.compose-modal { max-height:calc(100vh - 24px); border-radius:19px 19px 12px 12px; }
|
||||
.compose-window { width:min(100vw - 24px,560px); max-height:calc(100vh - 24px); }
|
||||
.compose-window.expanded,.compose-window.detached { width:calc(100vw - 24px); max-height:calc(100vh - 24px); }
|
||||
}
|
||||
@media(max-width:480px) {
|
||||
.account-types,.field-row { grid-template-columns:1fr; }.auth-story h1 br { display:none; }
|
||||
.compose-overlay { padding:0; }
|
||||
.compose-modal { width:100%; max-height:100vh; border:0; border-radius:0; }
|
||||
.compose-header { min-height:64px; padding:0 16px; }
|
||||
.compose-form { padding:0 15px 16px; }
|
||||
.compose-copy-fields { grid-template-columns:1fr; }
|
||||
.compose-copy-fields label+label { padding-left:0; border-left:0; border-top:1px solid var(--line); }
|
||||
.compose-body { min-height:32vh; }
|
||||
.compose-ai { grid-template-columns:auto 1fr; }
|
||||
.compose-ai button { grid-column:1/-1; }
|
||||
.compose-footer>span { display:none; }
|
||||
.compose-send { width:100%; }
|
||||
.compose-window { right:0 !important; bottom:0 !important; width:100vw; max-height:100vh; border-radius:14px 14px 0 0; }
|
||||
.compose-editor { min-height:28vh; max-height:none; }
|
||||
.compose-action-bar { flex-wrap:wrap; }
|
||||
.compose-draft-status { display:none; }
|
||||
.dashboard-content-heading { align-items:center; }
|
||||
.dashboard-content-heading h1 { font-size:34px; }
|
||||
.dashboard-account-pill { display:none; }
|
||||
|
|
@ -1089,8 +1123,7 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
|
|||
.mail-detail.open { animation:slideInDetail var(--motion-slow) var(--ease-standard); }
|
||||
.mail-detail-agent-bar .agent-action.subtle { height:36px; padding:0 var(--space-3); font-size:var(--text-meta); border-radius:var(--radius-sm); }
|
||||
.mail-detail-content h2 { margin-top:0; }
|
||||
.compose-agent-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--agent-soft); color:var(--agent); }
|
||||
.compose-ai .agent-action { height:36px; padding:0 12px; font-size:12px; white-space:nowrap; }
|
||||
.compose-agent-mark { width:30px; height:30px; display:grid; place-items:center; border-radius:var(--radius-md); background:var(--agent-soft); color:var(--agent); flex-shrink:0; }
|
||||
.mailbox-notes-pane.compact { min-height:0; border-radius:10px; border:1px solid rgba(26,24,38,0.055); background:#FFFFFF; box-shadow:0 1px 2px rgba(20,18,30,0.025),0 4px 12px rgba(20,18,30,0.03); overflow:hidden; }
|
||||
.mailbox-notes-pane.compact.empty { background:#FFFFFF; }
|
||||
.mailbox-notes-pane.compact.empty .sticky-notes-toggle { min-height:38px; color:#77758A; font-size:11px; font-weight:600; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue