starred/orca
1
0
Fork 0
mirror of https://github.com/stablyai/orca.git synced 2026-09-22 16:02:32 +00:00
Code Issues Packages Projects Releases Wiki Activity

Keep attention glyph knockout white when row is selected (#18679)

Browse Source 
* Simplify palette attention glyph styling

Remove visual styling from the container so the glyph appears as a
lightweight overlay on the row icon, not a selection bubble.

* Keep attention glyph knockout white when row is selected

The glyph now uses a white background (bg-popover) with a ring to create a
visual knockout effect that separates it from the icon. This prevents the
glyph from inheriting the row selection styling, ensuring it stays visible
and distinct regardless of selection state.

* Correct attention glyph knockout color description to popover-colored
This commit is contained in:
Jinjing
2026-09-04 10:05:45 -07:00
committed by GitHub
parent 0d2375a7ff
commit 67999dcaae
2 changed files with 6 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/components/cmd-j/palette-live-status.test.tsx
+4 -11
View File
@@ -451,7 +451,7 @@ describe('palette live status', () => {
expect(dotLabels()).toEqual(['Needs permission'])
})
it('cuts the pip out of the dialog surface, and out of accent when selected', async () => {
it('keeps the attention glyph knockout popover-colored when its row is selected', async () => {
setAgentState('working')
await act(async () => {
testRoot.render(
@@ -469,18 +469,11 @@ describe('palette live status', () => {
</PaletteLiveStatusProvider>
)
})
const pip = testContainer.querySelector<HTMLElement>('[aria-hidden="true"].rounded-full')
const pip = testContainer.querySelector<HTMLElement>('[aria-hidden="true"]')
expect(pip).not.toBeNull()
// Why popover and not background: the CommandDialog surface is --popover (#171717 dark), while
// --background is the app canvas (#0a0a0a) — the mismatch punched a dark halo through each row.
expect(pip?.className).toContain('bg-popover')
expect(pip?.className).toContain('ring-popover')
expect(pip?.className).not.toContain('bg-background')
expect(pip?.className).toContain(
'group-data-[selected=true]:bg-[var(--jump-palette-selection-surface)]'
)
expect(pip?.className).toContain(
'group-data-[selected=true]:ring-[var(--jump-palette-selection-surface)]'
)
expect(pip?.className).toContain('rounded-full')
expect(pip?.className).not.toContain('group-data-[selected=true]')
})
})
src/renderer/src/components/cmd-j/palette-live-status.tsx
+2 -10
View File
@@ -9,7 +9,6 @@ import {
buildExplicitEntriesByTabId,
type TabPaneInputSources
} from '@/components/sidebar/smart-attention'
import { cn } from '@/lib/utils'
import { isExplicitAgentStatusFresh } from '@/lib/agent-status'
import { getLiveAgentStatusByWorktreeId } from '@/lib/worktree-activity-state'
import {
@@ -255,15 +254,8 @@ export function PaletteRecentTabStatusDot({
<span className="relative inline-flex size-3.5 shrink-0 items-center justify-center">
{fallback}
<span
className={cn(
// Why popover, not background: the dialog surface is --popover (#171717 in dark), while
// --background is the app canvas (#0a0a0a) — using it punched a dark halo through every
// dark-mode row. Selected rows use --jump-palette-selection-surface so the cutout tracks
// the stronger keyboard highlight from main.css.
'pointer-events-none absolute -right-0.5 -bottom-0.5 flex items-center justify-center rounded-full',
'bg-popover ring-2 ring-popover',
'group-data-[selected=true]:bg-[var(--jump-palette-selection-surface)] group-data-[selected=true]:ring-[var(--jump-palette-selection-surface)]'
)}
// The popover-colored knockout separates the glyph from its icon without inheriting row selection.
className="pointer-events-none absolute -right-0.5 -bottom-0.5 flex items-center justify-center rounded-full bg-popover ring-2 ring-popover"
aria-hidden="true"
>
<RecentTabAttentionBadgeGlyph badge={badge} />