diff --git a/static/js/emailInbox.js b/static/js/emailInbox.js index 8ca1a6a3c..eedd70451 100644 --- a/static/js/emailInbox.js +++ b/static/js/emailInbox.js @@ -74,6 +74,11 @@ window.addEventListener('email-answered', (e) => { item.classList.remove('email-unread'); const check = item.querySelector('.email-done-check'); if (check) check.classList.add('active'); + // Auto-mark from sending a reply — flash the row so the user sees the + // state change without staring at it. Class self-removes after the + // animation so it doesn't replay on re-renders. + item.classList.add('email-auto-done-flash'); + setTimeout(() => item.classList.remove('email-auto-done-flash'), 1200); }); }); let _loading = false; diff --git a/static/style.css b/static/style.css index 313d3bb9a..1affa8d04 100644 --- a/static/style.css +++ b/static/style.css @@ -27630,6 +27630,22 @@ button .spinner-whirlpool { .email-done-check.active svg { display: block; } .email-done-check svg { display: none; } +/* Auto-done flash: when a row gets marked done because the user just sent + a reply, briefly tint the whole row with the accent and pop the check + so the state change is hard to miss. Self-removes after ~1.2s. */ +@keyframes email-auto-done-row { + 0% { background: color-mix(in srgb, var(--accent, var(--red)) 22%, transparent); } + 60% { background: color-mix(in srgb, var(--accent, var(--red)) 14%, transparent); } + 100% { background: transparent; } +} +@keyframes email-auto-done-check { + 0% { transform: scale(1); box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent, var(--red)) 45%, transparent); } + 40% { transform: scale(1.4); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent, var(--red)) 0%, transparent); } + 100% { transform: scale(1); } +} +.email-item.email-auto-done-flash { animation: email-auto-done-row 1.2s ease-out; } +.email-item.email-auto-done-flash .email-done-check { animation: email-auto-done-check 0.6s ease-out; } + /* Email titles that carry a cached AI summary get a thin underline-dot hint so the user knows a hover-preview is available. */ .memory-item-title.email-card-has-summary {