From 1b8dd9bd9364ffa7c8f9c2688284ee61ce7515c4 Mon Sep 17 00:00:00 2001
From: Vassiliy Yegorov <va@egorovanet.ru>
Date: Mon, 15 Jun 2026 14:12:45 +0700
Subject: [PATCH] feat(app): make 'Mark all read' an icon (CheckCheck) next to
 the trash

Matches the clear-all trash icon; dimmed/disabled when there are no unread events.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 app/src/EventCenter.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/app/src/EventCenter.tsx b/app/src/EventCenter.tsx
index 242f80f..c6052cf 100644
--- a/app/src/EventCenter.tsx
+++ b/app/src/EventCenter.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Check, Hourglass, X, Power, Send, MessageSquare, Trash2 } from "lucide-react";
+import { Check, CheckCheck, Hourglass, X, Power, Send, MessageSquare, Trash2 } from "lucide-react";
 import { COLORS, FONT } from "./theme";
 import type { EventRecord } from "./socketBridge";
 
@@ -34,6 +34,7 @@ export function EventCenter({
   onSelect: (surfaceId: string, id: number) => void;
 }) {
   const [tab, setTab] = useState<Tab>("all");
+  const unread = events.filter((e) => !e.read).length;
   const shown = tab === "unread" ? events.filter((e) => !e.read)
     : tab === "errors" ? events.filter((e) => e.kind === "error")
     : events;
@@ -42,7 +43,13 @@ export function EventCenter({
     <div style={{ display: "flex", flexDirection: "column", width: 300, flex: "0 0 300px", background: COLORS.bgSidebar, height: "100%", padding: 14, boxSizing: "border-box", borderLeft: `1px solid ${COLORS.borderSubtle}` }}>
       <div style={{ display: "flex", alignItems: "center", marginBottom: 12 }}>
         <span style={{ fontFamily: FONT.ui, fontSize: 13, fontWeight: 700, color: COLORS.textPrimary, flex: 1 }}>Event Center</span>
-        <span onClick={onMarkAllRead} style={{ fontFamily: FONT.ui, fontSize: 11, color: COLORS.accent, cursor: "pointer", marginRight: 10 }}>Mark all read</span>
+        <span
+          title="Mark all read"
+          onClick={() => { if (unread) onMarkAllRead(); }}
+          style={{ display: "flex", marginRight: 10, cursor: unread ? "pointer" : "default", opacity: unread ? 1 : 0.4 }}
+        >
+          <CheckCheck size={15} color={COLORS.accent} aria-label="Mark all read" />
+        </span>
         <span
           title="Clear all events"
           onClick={() => { if (events.length) onClear(); }}