Skip to content

fix(web): use theme colors for thread status #908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rynfar merged 1 commit into from
Sep 27, 2026
Merged

fix(web): use theme colors for thread status #908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 11 additions & 11 deletions apps/web/src/components/Sidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -437,7 +437,7 @@ function SidebarThreadTooltip({
</div>
) : null}
{thread.session?.lastError ? (
<div className="flex min-w-0 items-center gap-2 text-red-600 dark:text-red-400">
<div className="flex min-w-0 items-center gap-2 text-destructive-foreground">
<CircleAlertIcon className="size-3 shrink-0 stroke-current" />
<div className="min-w-0 truncate">Error occurred</div>
</div>
Expand Down Expand Up @@ -562,8 +562,8 @@ function SortableThreadRow(props: {

// Unsent work shares one look: the new-thread draft rows and thread rows
// with unsent composer text both use this tint and pen so they read alike.
const draftSurfaceClassName = "bg-amber-400/[0.04] hover:bg-amber-400/[0.08]";
const draftPenClassName = "size-3 shrink-0 text-amber-600 dark:text-amber-300/80";
const draftSurfaceClassName = "bg-warning/4 hover:bg-warning/8";
const draftPenClassName = "size-3 shrink-0 text-warning-foreground";

// Structural list items — the section headers and the
// empty-section placeholders — take part in the sortable list so they shift
Expand Down Expand Up @@ -706,7 +706,7 @@ function SidebarSectionHeader(props: {
const className = cn(
"flex h-full w-full items-center gap-2 px-2 text-left text-xs font-medium",
compact && "justify-center px-0",
snoozed ? "text-blue-600 dark:text-blue-400" : "text-sidebar-muted-foreground/60",
snoozed ? "text-info-foreground" : "text-sidebar-muted-foreground/60",
props.dragging && "text-sidebar-foreground/80",
props.isDropTarget && "text-primary",
);
Expand All @@ -725,7 +725,7 @@ function SidebarSectionHeader(props: {
className={cn(
"h-px min-w-2 flex-1",
compact && "hidden",
snoozed ? "bg-blue-500/20 dark:bg-blue-400/15" : "bg-sidebar-border/60",
snoozed ? "bg-info/20" : "bg-sidebar-border/60",
props.dragging && "bg-sidebar-foreground/25",
props.isDropTarget && "bg-primary/50",
)}
Expand Down Expand Up @@ -1266,7 +1266,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
? {
label: "Approval",
icon: "approval" as const,
className: "text-amber-700 dark:text-amber-300",
className: "text-warning-foreground",
}
: status === "input"
? {
Expand All @@ -1278,19 +1278,19 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
? {
label: "Failed",
icon: "failed" as const,
className: "text-red-700 dark:text-red-300",
className: "text-destructive-foreground",
}
: isWoke
? {
label: "Woke",
icon: "woke" as const,
className: "text-amber-700 dark:text-amber-300",
className: "text-warning-foreground",
}
: isUnread
? {
label: "Done",
icon: "done" as const,
className: "text-emerald-700 dark:text-emerald-300",
className: "text-success-foreground",
}
: null);
const isWokeStatus = topStatus?.icon === "woke";
Expand Down Expand Up @@ -1924,7 +1924,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
{variantAction === "unsnooze" && props.snoozeWakeLabelText !== null ? (
// Snoozed rows show when they come BACK, not when they were
// last touched — the return ticket is the row's whole story.
<span className="text-xs text-blue-600 tabular-nums dark:text-blue-400">
<span className="text-xs text-info-foreground tabular-nums">
{props.snoozeWakeLabelText}
</span>
) : isWoke ? (
Expand All @@ -1937,7 +1937,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: {
type="button"
aria-label="Dismiss Woke notification"
onClick={handleAcknowledgeWokeClick}
className="inline-flex cursor-pointer items-center gap-1 rounded-sm text-xs font-medium text-warning outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
className="inline-flex cursor-pointer items-center gap-1 rounded-sm text-xs font-medium text-warning-foreground outline-none hover:underline focus-visible:ring-2 focus-visible:ring-ring"
>
<AlarmClockIcon aria-hidden className="size-3" />
<span role="status">Woke</span>
Expand Down
17 changes: 4 additions & 13 deletions apps/web/src/components/ThreadNotificationCoordinator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,22 +177,13 @@ function EnvironmentNotifications({
hideCopyButton: true,
leadingIcon:
state.phase === "completed" ? (
<CircleCheckIcon
aria-hidden
className="size-4 text-emerald-700 dark:text-emerald-300"
/>
<CircleCheckIcon aria-hidden className="size-4 text-success-foreground" />
) : state.phase === "waiting_for_approval" ? (
<ShieldQuestionIcon
aria-hidden
className="size-4 text-amber-700 dark:text-amber-300"
/>
<ShieldQuestionIcon aria-hidden className="size-4 text-warning-foreground" />
) : state.phase === "failed" ? (
<CircleAlertIcon aria-hidden className="size-4 text-red-700 dark:text-red-300" />
<CircleAlertIcon aria-hidden className="size-4 text-destructive-foreground" />
) : (
<MessageCircleQuestionIcon
aria-hidden
className="size-4 text-indigo-600 dark:text-indigo-300"
/>
<MessageCircleQuestionIcon aria-hidden className="size-4 text-info-foreground" />
),
},
actionProps: {
Expand Down
Loading