Email inbox: visual flash when an email is auto-marked done after sending

When the email-answered event fires (user just sent a reply, so the
source email auto-marks as done), the row was getting the .active
class instantly with no visible cue beyond the checkbox tick. Add a
brief .email-auto-done-flash class on the row that runs two keyframe
animations:
- email-auto-done-row: tints the row background with the accent for
  ~1.2s then fades to transparent.
- email-auto-done-check: pops the done checkbox to 1.4× with an
  accent ring that expands outward over 0.6s.

Class self-removes after 1.2s so it doesn't replay on re-renders.
This commit is contained in:
pewdiepie-archdaemon
2026-06-10 23:06:42 +09:00
parent 1a4659b7fc
commit 023f1ba575
2 changed files with 21 additions and 0 deletions
+5
View File
@@ -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;