Suyash091/agentic.email
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

email compose

Browse source
This commit is contained in:
debu-2 2026-10-05 21:48:56 +05:30
parent 5cb49f4cb1
commit 2af0724938
4 changed files with 967 additions and 181 deletions
Download patch file Download diff file Expand all files Collapse all files

151
frontend/src/styles.css
View file

@ -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; }