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

inbox streamlining

Browse source
This commit is contained in:
debu-2 2026-10-05 22:22:18 +05:30
parent c26a8a2094
commit f969cfed44
4 changed files with 382 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

89
frontend/src/styles.css
View file

@ -649,33 +649,73 @@ h1 em { color:var(--coral); font-style:normal; font-weight:500; }
.sticky-note-form-actions button[type="submit"] { background:var(--ink); color:white; }
.sticky-note-form-actions button:disabled { opacity:.5; cursor:not-allowed; }
.mail-detail { min-width:0; display:none; position:absolute; inset:0; z-index:4; overflow:hidden; border-left:0; background:#fffefd; }
.mail-detail.open { display:flex; flex-direction:column; }
.mailbox-shell.detail-visible { border:1px solid rgba(24,20,35,.06); border-radius:10px; box-shadow:none; background:#fff; }
.mailbox-shell.detail-visible .mailbox-categories,
.mailbox-shell.detail-visible .mailbox-rows,
.mailbox-shell.detail-visible .mailbox-pagination { display:none; }
.mailbox-shell.detail-visible .mailbox-list-pane { display:flex; flex-direction:column; min-height:min(680px,calc(100vh - 200px)); }
.mail-detail-toolbar { flex-shrink:0; min-height:62px; padding:10px 13px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.mail-detail-toolbar>div { display:flex; gap:3px; }
.mail-detail-toolbar button { width:36px; padding:0; }
.mailbox-shell.detail-visible .mailbox-list-pane { display:block; min-height:0; height:auto; }
.mail-detail { min-width:0; display:none; position:relative; z-index:1; background:#fff; }
.mail-detail.open { display:block; }
.mail-detail-toolbar { height:50px; padding:0 24px; display:flex; align-items:center; gap:6px; border-bottom:1px solid #EEECEF; background:#fff; }
.mail-detail-toolbar-group { display:flex; align-items:center; gap:4px; }
.mail-detail-toolbar-sep { width:1px; height:18px; margin:0 4px; background:#ECE9EE; flex-shrink:0; }
.mail-detail-toolbar button { width:32px; height:32px; padding:0; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#5a5562; }
.mail-detail-toolbar button:hover { background:#f5f4f2; color:#241f2b; }
.mail-detail-toolbar button.danger { color:#bb4e43; }
.mail-detail-close { display:none!important; }
.mail-detail-state { min-height:320px; padding:30px; display:grid; place-items:center; color:#8d8891; font-size:11px; text-align:center; }
.mail-detail-toolbar button.danger:hover { background:#fdeeed; }
.mail-detail-state { min-height:200px; padding:32px; display:grid; place-items:center; color:#8d8891; font-size:12px; text-align:center; }
.mail-detail-state.error { color:#a94f40; }
.mail-detail-content { flex:1; min-height:0; overflow-y:auto; padding:26px clamp(19px,3vw,34px) 40px; }
.mail-detail-content h2 { margin:0 0 22px; overflow-wrap:anywhere; font:600 21px/1.3 "Manrope"; letter-spacing:-.7px; }
.mail-detail-meta { padding-bottom:19px; display:flex; align-items:start; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); }
.mail-detail-meta>div { min-width:0; display:grid; gap:3px; }
.mail-detail-sender { display:flex; align-items:center; gap:10px; min-width:0; }
.mail-detail-sender .sender-avatar { width:40px; height:40px; font-size:12px; flex-shrink:0; }
.mail-detail-sender strong { overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.mail-detail-meta strong { overflow:hidden; text-overflow:ellipsis; font-size:11px; }
.mail-detail-meta small,.mail-detail-meta time { color:#928d96; font-size:8px; line-height:1.5; }
.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; }
.mail-detail-content { padding:24px 32px 32px; }
.mail-detail-subject-row { margin-bottom:22px; display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.mail-detail-subject-main { min-width:0; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mail-detail-subject-main h1 { margin:0; overflow-wrap:anywhere; font:600 23px/30px "Manrope"; letter-spacing:-.5px; color:#171424; }
.mail-detail-labels { display:flex; flex-wrap:wrap; gap:6px; }
.mail-detail-label-pill { height:21px; padding:0 8px; display:inline-flex; align-items:center; border-radius:6px; background:#f5f4f2; color:#77758a; font-size:10px; font-weight:600; }
.mail-detail-label-pill.starred { background:#fff8e8; color:#9a7228; }
.mail-detail-ai-chips { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; flex-shrink:0; }
.mail-detail-ai-chip { height:28px; padding:0 10px; display:inline-flex; align-items:center; gap:5px; border:1px solid #ece7ff; border-radius:7px; background:#fbf9ff; color:#6d5bd0; font-size:10px; font-weight:600; white-space:nowrap; }
.mail-detail-ai-chip:hover { background:#f3efff; border-color:#ddd4ff; }
.mail-detail-sender-row { margin-bottom:24px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.mail-detail-sender-left { min-width:0; display:flex; align-items:flex-start; gap:12px; }
.mail-detail-sender-left .sender-avatar { width:38px; height:38px; font-size:12px; flex-shrink:0; }
.mail-detail-sender-meta { min-width:0; display:grid; gap:3px; }
.mail-detail-sender-line strong { font:600 14px/1.35 "DM Sans"; color:#171424; overflow-wrap:anywhere; }
.mail-detail-recipient-toggle { padding:0; display:inline-flex; align-items:center; gap:3px; border:0; background:transparent; color:#77758a; font-size:11px; font-weight:500; }
.mail-detail-recipient-toggle:hover { color:#4a4652; }
.mail-detail-recipient-details { display:grid; gap:2px; }
.mail-detail-recipient-details small { color:#77758a; font-size:11px; line-height:1.4; }
.mail-detail-sender-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.mail-detail-sender-actions time { margin-right:6px; color:#77758a; font-size:11px; white-space:nowrap; }
.mail-detail-icon-btn { width:32px; height:32px; display:grid; place-items:center; border:0; border-radius:7px; background:transparent; color:#6f6a73; }
.mail-detail-icon-btn:hover { background:#f5f4f2; color:#241f2b; }
.mail-detail-icon-btn.active { color:#d4a017; }
.mail-detail-body { color:#292536; }
.mail-detail-body.is-text { max-width:800px; font-size:14px; line-height:1.62; }
.mail-detail-body-text p { margin:0 0 10px; }
.mail-detail-body-text p:last-child { margin-bottom:0; }
.mail-detail-body.is-html { max-width:none; font-size:14px; line-height:1.55; }
.mail-detail-body-html { white-space:normal; }
.mail-detail-body-html p { margin:0 0 12px; }
.mail-detail-body-html a { color:#4d74c4; text-decoration:underline; }
.mail-detail-attachments { margin-top:24px; display:flex; flex-wrap:wrap; gap:10px; }
.mail-detail-attachment { min-width:220px; max-width:320px; padding:10px 12px; display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; border:1px solid #ECE9EE; border-radius:8px; background:#fcfbfa; }
.mail-detail-attachment-icon { font-size:18px; }
.mail-detail-attachment strong { display:block; font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mail-detail-attachment small { display:block; margin-top:2px; color:#77758a; font-size:10px; }
.mail-detail-attachment-actions { display:flex; flex-direction:column; gap:2px; }
.mail-detail-attachment-actions button { padding:2px 4px; border:0; background:transparent; color:#6d5bd0; font-size:9px; font-weight:700; }
.mail-detail-reply-bar { margin-top:30px; display:flex; flex-wrap:wrap; gap:8px; }
.mail-detail-reply-btn { height:38px; padding:0 16px; display:inline-flex; align-items:center; gap:7px; border:1px solid #ECE9EE; border-radius:8px; background:#fff; color:#241f2b; font-size:12px; font-weight:600; }
.mail-detail-reply-btn:hover { background:#f8f7f5; border-color:#ddd8d3; }
.mail-detail-reply-btn.subtle { color:#5a5562; background:#fafafa; }
.agent-panel.email-context .agent-stat-grid { display:none; }
.agent-panel.email-context .agent-context-block { display:none; }
.agent-email-context { margin:10px 0 14px; padding:12px; border:1px solid #ece9f2; border-radius:10px; background:#faf9fc; }
.agent-email-context h3 { margin:0 0 6px; font-size:10px; font-weight:700; letter-spacing:.4px; text-transform:uppercase; color:#8a8496; }
.agent-email-context p { margin:0 0 12px; font-size:12px; line-height:1.5; color:#4a4652; }
.agent-email-context ul { margin:0 0 12px; padding-left:16px; color:#4a4652; font-size:12px; line-height:1.5; }
.agent-email-context-reply { height:34px; padding:0 12px; display:inline-flex; align-items:center; gap:6px; border:1px solid #ddd4ff; border-radius:8px; background:#f6f2ff; color:#6d4aff; font-size:11px; font-weight:700; }
.agent-email-context-reply:hover { background:#ebe4ff; }
.compose-dock { position:fixed; right:var(--compose-dock-right,16px); bottom:16px; z-index:45; display:flex; flex-direction:column; align-items:flex-end; gap:10px; pointer-events:none; transition:right 160ms ease-out; }
.compose-dock-expanded,.compose-dock-chips { display:flex; flex-direction:row-reverse; align-items:flex-end; gap:16px; pointer-events:auto; }
@ -846,9 +886,11 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
.mailbox-shell.detail-visible .mailbox-toolbar,
.mailbox-shell.detail-visible .mailbox-filters,
.mailbox-shell.detail-visible .mailbox-list-footer { display:none; }
.mailbox-shell.detail-visible .mailbox-list-pane { min-height:min(100vh - 120px,720px); }
.mail-detail { position:static; flex:1; }
.mail-detail-close { display:flex!important; }
.mail-detail-content { padding:20px 18px 28px; }
.mail-detail-subject-row { flex-direction:column; }
.mail-detail-ai-chips { justify-content:flex-start; }
.mail-detail-sender-row { flex-direction:column; }
.mail-detail-sender-actions { width:100%; justify-content:flex-start; }
.compose-dock { right:12px !important; bottom:12px; }
.compose-window { width:min(calc(100vw - 24px),560px); min-width:0; max-width:none; height:min(560px,calc(100vh - 24px)); }
.compose-window.expanded { width:calc(100vw - 24px); min-width:0; height:min(78vh,calc(100vh - 24px)); }
@ -1164,10 +1206,7 @@ body.compose-blank-open .mailbox-empty-cta { opacity:.42; filter:saturate(.55);
.command-palette-foot kbd { margin-right:4px; padding:1px 5px; border:1px solid #e4e0da; border-radius:5px; background:#fff; }
.workspace-search-kbd { padding:0; border:0; background:transparent; cursor:pointer; }
.workspace-search-kbd kbd { pointer-events:none; }
.mail-detail-agent-bar { margin-bottom:16px; display:flex; flex-wrap:wrap; gap:6px; }
.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; }
.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; }