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.
This commit is contained in:
Jinjing
2026-09-04 09:24:59 -07:00
parent 0d2375a7ff
commit 34fd615a3b
2 changed files with 6 additions and 23 deletions
@@ -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('positions the attention glyph over the row icon', async () => {
setAgentState('working')
await act(async () => {
testRoot.render(
@@ -469,18 +469,8 @@ 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).toBe('pointer-events-none absolute -right-0.5 -bottom-0.5')
})
})
@@ -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,9 @@ 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)]'
)}
// Keep the attention glyph as a lightweight overlay; a background ring reads as a
// second selection bubble around the row icon.
className="pointer-events-none absolute -right-0.5 -bottom-0.5"
aria-hidden="true"
>
<RecentTabAttentionBadgeGlyph badge={badge} />