fix: render email header indicator correctly

frappe/public/scss/email.bundle.scss

@@ -429,3 +429,32 @@ blockquote {
 .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
 	padding-left: 10.5em;
 }
+
+.indicator {
+	display: inline-block;
+	width: 10px;
+	height: 10px;
+	border-radius: 50%;
+	margin-right: 6px;
+	vertical-align: middle;
+}
+
+.indicator.red {
+	background-color: #dc2626;
+}
+
+.indicator.green {
+	background-color: #16a34a;
+}
+
+.indicator.orange {
+	background-color: #ea580c;
+}
+
+.indicator.blue {
+	background-color: #2563eb;
+}
+
+.indicator.gray {
+	background-color: #6b7280;
+}

frappe/templates/emails/email_header.html

@@ -3,7 +3,7 @@
 		<td>
 			<h1 class="email-header-title">
 				{% if indicator %}
-				<span class="indicator indicator-{{indicator}}"></span>
+				<span class="indicator indicator-{{ indicator }} {{ indicator }}"></span>
 				{% endif %}
 				<span>{{ header_title }}</span>
 			</h1>

frappe/tests/test_email.py

@@ -335,6 +335,45 @@ class TestEmail(IntegrationTestCase):
 		# Cleanup
 		frappe.db.delete("User", {"email": target_user})
 
+	def test_email_header_indicator(self):
+		frappe.sendmail(
+			recipients=["test@example.com"],
+			subject="Indicator Test",
+			header=["Status", "red"],
+			message="Hello",
+		)
+
+		email_queue = frappe.db.get_value(
+			"Email Queue",
+			{"status": "Not Sent"},
+			"name",
+		)
+		self.assertTrue(email_queue)
+
+		from frappe.email.queue import flush
+
+		flush()
+
+		raw = frappe.db.get_value(
+			"Email Queue",
+			{"status": "Sent"},
+			"message",
+		)
+
+		import email
+
+		msg = email.message_from_string(frappe.safe_decode(raw))
+
+		html = None
+		for part in msg.walk():
+			if part.get_content_type() == "text/html":
+				html = part.get_payload(decode=True).decode()
+				break
+
+		self.assertIsNotNone(html)
+		self.assertIn('class="indicator', html)
+		self.assertIn("background-color:#dc2626", html)
+
 
 class TestVerifiedRequests(IntegrationTestCase):
 	def test_round_trip(self):