fix(studio): polish advisor attention indicator quirks (#47714)

## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Bug fix / UI polish.

## What is the current behavior?

- The Advisors sidebar attention dot drifts 1–2px sideways on
hover-expand, because its `left` offset was tied to the expanded state
while the nav icon only shifts when the sidebar is persistently open.
- When the Advisor Center header button is selected while in a critical
state, it keeps a destructive outline instead of matching the other
header circles (`bg-foreground`).

## What is the new behavior?

- Sidebar attention dot offset follows the same condition as nav icon
padding (persistently open), so it no longer drifts on hover-expand.
- Selected Advisor Center button matches the other header circles
(foreground fill, no destructive outline). Critical idle styling is
unchanged aside from a destructive hover border. The critical dot is
slightly lighter when selected in light mode so it still contrasts on
the inverted fill.

## Additional context

Earlier commits on this branch experimented with a shared
`useAdvisorAttention` hook to sync the sidebar and header indicators.
That was dropped: the sidebar Advisors route goes to project
security/performance pages, while the header opens Advisor Center
(including org notifications). Those surfaces should not share one
attention definition — thanks Joshen for catching that.

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
This commit is contained in:
Danny WhiteandJoshen Lim authored and GitHub committed 2026-07-20 23:17:00 +10:00
1 parent 620c9329cf
commit b82dec4ef1
2 files changed
+24 -3

No files matched your search

+12 -1
View File
@@ -226,10 +226,21 @@ export function SideBarNavLink({
}
const ActiveDot = ({ hasErrors, hasWarnings }: { hasErrors: boolean; hasWarnings: boolean }) => {
const [sidebarBehaviour] = useLocalStorageQuery(
LOCAL_STORAGE_KEYS.SIDEBAR_BEHAVIOR,
DEFAULT_SIDEBAR_BEHAVIOR
)
// The nav icon only shifts right (pl-1.5 -> pl-2) when the sidebar is
// persistently open — not on hover-expand. Tie the dot to the same
// condition so it stays put while skimming the nav.
const isPersistentlyOpen = sidebarBehaviour === 'open'
return (
<div
className={cn(
'absolute pointer-events-none flex h-2 w-2 left-[18px] group-data-[state=expanded]:left-[20px] top-2 z-10 rounded-full',
'absolute pointer-events-none flex h-2 w-2 top-2 z-10 rounded-full',
isPersistentlyOpen ? 'left-[20px]' : 'left-[18px]',
hasErrors ? 'bg-destructive-600' : hasWarnings ? 'bg-warning-600' : 'bg-transparent'
)}
/>
@@ -51,7 +51,11 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
id="advisor-center-trigger"
className={cn(
'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 group',
hasCriticalIssues && 'bg-destructive-200 border-destructive-500',
// Critical fill/border only when idle — selected matches the other
// header circles (foreground fill, no destructive outline).
hasCriticalIssues &&
!isOpen &&
'bg-destructive-200 border-destructive-500 hover:border-destructive',
isOpen && 'bg-foreground text-background'
)}
onClick={handleClick}
@@ -72,7 +76,13 @@ export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
<span className="sr-only">Advisor Center</span>
</ButtonTooltip>
{hasCriticalIssues ? (
<span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-destructive" />
<span
className={cn(
'absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full',
// Slightly lighter on the inverted selected fill in light mode only.
isOpen ? 'bg-destructive-500 dark:bg-destructive' : 'bg-destructive'
)}
/>
) : hasWarningIssues ? (
<span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-warning" />
) : hasUnreadNotifications ? (