pub/spaceshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(app): make 'Mark all read' an icon (CheckCheck) next to the trash

Browse Source 
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>
This commit is contained in:
Vassiliy Yegorov
2026-06-15 14:12:45 +07:00
parent 524b3def6b
commit 1b8dd9bd93
1 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/EventCenter.tsx
+9 -2
View File
@@ -1,5 +1,5 @@
import { useState } from "react"; 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 { COLORS, FONT } from "./theme";
import type { EventRecord } from "./socketBridge"; import type { EventRecord } from "./socketBridge";
@@ -34,6 +34,7 @@ export function EventCenter({
onSelect: (surfaceId: string, id: number) => void; onSelect: (surfaceId: string, id: number) => void;
}) { }) {
const [tab, setTab] = useState<Tab>("all"); const [tab, setTab] = useState<Tab>("all");
const unread = events.filter((e) => !e.read).length;
const shown = tab === "unread" ? events.filter((e) => !e.read) const shown = tab === "unread" ? events.filter((e) => !e.read)
: tab === "errors" ? events.filter((e) => e.kind === "error") : tab === "errors" ? events.filter((e) => e.kind === "error")
: events; : 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", 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 }}> <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 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 <span
title="Clear all events" title="Clear all events"
onClick={() => { if (events.length) onClear(); }} onClick={() => { if (events.length) onClear(); }}