mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
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:
1 parent
620c9329cf
commit
b82dec4ef1
2 files changed
+24
-3
No files matched your search
@@ -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 ? (
|
||||
|
||||
Reference in new issue
Block a user