Skip to content

style(web): use warning color for annotations #93

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
lastobelus merged 1 commit into from
Aug 25, 2026
Merged

style(web): use warning color for annotations #93

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
4 changes: 2 additions & 2 deletions apps/web/src/components/LegacySidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1048,7 +1048,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
trigger={
<span
aria-label={`${jumpLabel}; annotated`}
className="inline-flex h-5 items-center rounded-full border border-dotted border-yellow-500/65 bg-accent/90 px-1.5 font-mono text-[10px] font-medium tracking-tight text-accent-foreground shadow-sm"
className="inline-flex h-5 items-center rounded-full border border-dotted border-warning bg-warning/10 px-1.5 font-mono text-[10px] font-medium tracking-tight text-warning-foreground shadow-sm"
>
{jumpLabel}
</span>
Expand Down Expand Up @@ -1082,7 +1082,7 @@ export const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThr
threadRef={threadRef}
trigger={
<span
className={`border-b border-dotted border-yellow-500/65 text-[10px] tabular-nums ${
className={`border-b border-dotted border-warning text-[10px] tabular-nums ${
isHighlighted ? "text-foreground" : "text-secondary-label"
}`}
data-legacy-sidebar-unscaled-content
Expand Down
10 changes: 5 additions & 5 deletions apps/web/src/components/chat/MessagesTimeline.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -948,7 +948,7 @@ function TimelineMinimap({
{annotation?.anchorMessageId === item.messageId ? (
<button
aria-label="Thread annotation"
className="pointer-events-auto absolute left-full top-1/2 ml-1 size-1.5 -translate-y-1/2 rounded-full bg-yellow-400 ring-1 ring-background/70 dark:bg-yellow-300"
className="pointer-events-auto absolute left-full top-1/2 ml-1 size-1.5 -translate-y-1/2 rounded-full bg-warning ring-1 ring-background/70"
data-thread-annotation-marker
type="button"
onClick={(event) => {
Expand All @@ -972,7 +972,7 @@ function TimelineMinimap({
}}
>
{activeItemHasAnnotation && annotation && threadRef ? (
<span className="block rounded-xl border border-border/80 bg-accent p-3 text-left text-accent-foreground shadow-xl shadow-black/25">
<span className="block rounded-xl border border-border/80 bg-warning/10 p-3 text-left text-warning-foreground shadow-xl shadow-black/25">
<ThreadAnnotationBody
annotation={annotation}
className="max-h-52 overflow-y-auto"
Expand Down Expand Up @@ -1031,14 +1031,14 @@ function TimelineMinimap({
>
<button
aria-label="Annotation attached to an earlier message"
className="size-1.5 rounded-full bg-yellow-400 ring-1 ring-background/70 dark:bg-yellow-300"
className="size-1.5 rounded-full bg-warning ring-1 ring-background/70"
type="button"
onClick={() => setOverflowAnnotationOpen((open) => !open)}
onFocus={() => setOverflowAnnotationOpen(true)}
/>
{overflowAnnotationOpen ? (
<div className="absolute left-5 top-0 w-80 -translate-y-1/2 rounded-xl border border-border/80 bg-accent p-3 text-left text-accent-foreground shadow-xl shadow-black/25">
<div className="mb-2 text-[11px] font-medium text-accent-foreground/55">
<div className="absolute left-5 top-0 w-80 -translate-y-1/2 rounded-xl border border-border/80 bg-warning/10 p-3 text-left text-warning-foreground shadow-xl shadow-black/25">
<div className="mb-2 text-[11px] font-medium text-warning-foreground">
Attached to an earlier message
</div>
<ThreadAnnotationBody
Expand Down
18 changes: 7 additions & 11 deletions apps/web/src/components/thread-annotation/ThreadAnnotation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export function ThreadAnnotationEditorDialog(props: {
function AnnotationTimestamp({ annotation }: { annotation: ThreadAnnotationModel }) {
const timestamp = annotation.resolvedAt ?? annotation.updatedAt;
return (
<span className="text-[11px] text-accent-foreground/55">
<span className="text-[11px] text-warning-foreground">
{annotation.resolvedAt ? "Resolved" : "Edited"} {formatRelativeTimeLabel(timestamp)}
</span>
);
Expand All @@ -177,7 +177,7 @@ export function ThreadAnnotationBody(props: {
return (
<div className={props.className}>
<ChatMarkdown
className={props.compact ? "thread-annotation-compact" : "text-sm text-accent-foreground"}
className={props.compact ? "thread-annotation-compact" : "text-sm text-warning-foreground"}
Comment thread
lastobelus marked this conversation as resolved.
cwd={props.cwd}
onTaskListChange={onTaskListChange}
parseRawHtml={false}
Expand All @@ -201,15 +201,15 @@ export function ThreadAnnotationActions(props: {
return (
<div className="flex items-center gap-3 text-xs">
<button
className="font-medium text-accent-foreground/75 underline-offset-2 hover:underline disabled:opacity-50"
className="font-medium text-warning-foreground underline-offset-2 hover:underline disabled:opacity-50"
disabled={props.pending}
type="button"
onClick={props.onEdit}
>
Edit
</button>
<button
className="font-medium text-accent-foreground/75 underline-offset-2 hover:underline disabled:opacity-50"
className="font-medium text-warning-foreground underline-offset-2 hover:underline disabled:opacity-50"
disabled={props.pending}
type="button"
onClick={props.annotation.resolvedAt ? props.onReopen : props.onResolve}
Expand All @@ -233,7 +233,7 @@ export function ThreadAnnotationPostIt(props: {
}) {
const bodyChangePending = useThreadAnnotationBodyPending(props.threadRef);
return (
<div className="mx-auto mb-1.5 w-full max-w-3xl rounded-xl border border-border/80 bg-accent px-3.5 py-2.5 text-accent-foreground shadow-sm">
<div className="mx-auto mb-1.5 w-full max-w-3xl rounded-xl border border-border/80 bg-warning/10 px-3.5 py-2.5 text-warning-foreground shadow-sm">
Comment thread
lastobelus marked this conversation as resolved.
<ThreadAnnotationBody
annotation={props.annotation}
className="max-h-48 overflow-y-auto"
Expand All @@ -249,11 +249,7 @@ export function ThreadAnnotationPostIt(props: {
onResolve={props.onResolve}
pending={props.pending || bodyChangePending}
/>
<button
className="text-xs text-accent-foreground/55 hover:text-accent-foreground"
type="button"
onClick={props.onDismiss}
>
<button className="text-xs text-warning-foreground" type="button" onClick={props.onDismiss}>
Dismiss
</button>
</div>
Expand Down Expand Up @@ -355,7 +351,7 @@ export function ThreadAnnotationHoverPopover(props: {
>
<div className="flex min-w-0 w-80 max-w-80 flex-col">
{props.threadDetails}
<div className="border-t border-border/70 bg-accent p-[var(--floating-content-inset)] text-accent-foreground">
<div className="border-t border-border/70 bg-warning/10 p-[var(--floating-content-inset)] text-warning-foreground">
<ThreadAnnotationBody
annotation={props.annotation}
className="max-h-64 overflow-y-auto"
Expand Down
8 changes: 4 additions & 4 deletions apps/web/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2178,10 +2178,10 @@ code {
color: var(--contrast-muted-foreground);
}

/* Annotation previews sit inside the sidebar's compact thread hover. Match
that surface instead of inheriting conversation-scale Markdown headings. */
/* Annotation previews sit on warning-tinted surfaces. Match that foreground
instead of inheriting conversation-scale Markdown headings. */
.chat-markdown.thread-annotation-compact {
color: color-mix(in oklab, var(--accent-foreground) 75%, transparent);
color: var(--warning-foreground);
font-size: var(--text-xs);
line-height: var(--text-xs--line-height);
}
Expand All @@ -2193,7 +2193,7 @@ code {
.chat-markdown.thread-annotation-compact h5,
.chat-markdown.thread-annotation-compact h6 {
margin: 0.5rem 0 0.25rem;
color: var(--accent-foreground);
color: var(--warning-foreground);
font-size: var(--text-xs);
line-height: 1;
}
Expand Down