From b82dec4ef1e908dbb30fbd2907149b2831e7b7b9 Mon Sep 17 00:00:00 2001
From: Danny White <3104761+dnywh@users.noreply.github.com>
Date: Mon, 20 Jul 2026 09:17:00 -0400
Subject: [PATCH] fix(studio): polish advisor attention indicator quirks
 (#47714)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 apps/studio/components/interfaces/Sidebar.tsx      | 13 ++++++++++++-
 .../components/layouts/AppLayout/AdvisorButton.tsx | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/studio/components/interfaces/Sidebar.tsx b/apps/studio/components/interfaces/Sidebar.tsx
index 994bc0e0e8a..6f1d3af6a69 100644
--- a/apps/studio/components/interfaces/Sidebar.tsx
+++ b/apps/studio/components/interfaces/Sidebar.tsx
@@ -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'
       )}
     />
diff --git a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
index efc5c3ae2a7..5006cd40349 100644
--- a/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
+++ b/apps/studio/components/layouts/AppLayout/AdvisorButton.tsx
@@ -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 ? (