From 023f1ba5752f9e2dfede2cb53566a59e15174bb0 Mon Sep 17 00:00:00 2001
From: pewdiepie-archdaemon <pewdiepie-archdaemon@users.noreply.github.com>
Date: Wed, 10 Jun 2026 23:06:42 +0900
Subject: [PATCH] Email inbox: visual flash when an email is auto-marked done
 after sending
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 static/js/emailInbox.js |  5 +++++
 static/style.css        | 16 ++++++++++++++++
 2 files changed, 21 insertions(+)

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 {