mirror of
https://github.com/supabase/supabase.git
synced 2026-09-09 19:42:46 +08:00
b82dec4ef1
## 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>
94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import { Lightbulb } from 'lucide-react'
|
|
import { useMemo } from 'react'
|
|
import { cn } from 'ui'
|
|
|
|
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
|
|
import { useAdvisorSignals } from '@/components/ui/AdvisorPanel/useAdvisorSignals'
|
|
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
|
|
import { useProjectLintsQuery } from '@/data/lint/lint-query'
|
|
import { useNotificationsV2Query } from '@/data/notifications/notifications-v2-query'
|
|
import { IS_PLATFORM } from '@/lib/constants'
|
|
import { useTrack } from '@/lib/telemetry/track'
|
|
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
|
|
|
|
export const AdvisorButton = ({ projectRef }: { projectRef?: string }) => {
|
|
const { toggleSidebar, activeSidebar } = useSidebarManagerSnapshot()
|
|
const track = useTrack()
|
|
|
|
const { data: lints } = useProjectLintsQuery({ projectRef })
|
|
const { data: signalItems } = useAdvisorSignals({ projectRef })
|
|
|
|
const { data: notificationsData } = useNotificationsV2Query(
|
|
{ filters: {}, limit: 20 },
|
|
{ enabled: IS_PLATFORM }
|
|
)
|
|
const notifications = useMemo(() => {
|
|
return notificationsData?.pages.flatMap((page) => page) ?? []
|
|
}, [notificationsData?.pages])
|
|
const hasUnreadNotifications = notifications.some((x) => x?.status === 'new')
|
|
const hasCriticalNotifications = notifications.some((x) => x?.priority === 'Critical')
|
|
const hasSignals = signalItems.length > 0
|
|
const hasCriticalSignals = signalItems.some((item) => item.severity === 'critical')
|
|
|
|
const hasCriticalIssues =
|
|
hasCriticalNotifications ||
|
|
hasCriticalSignals ||
|
|
(Array.isArray(lints) && lints.some((lint) => lint.level === 'ERROR'))
|
|
const hasWarningIssues = hasSignals && !hasCriticalIssues
|
|
|
|
const isOpen = activeSidebar?.id === SIDEBAR_KEYS.ADVISOR_PANEL
|
|
|
|
const handleClick = () => {
|
|
track('header_advisor_button_clicked')
|
|
toggleSidebar(SIDEBAR_KEYS.ADVISOR_PANEL)
|
|
}
|
|
|
|
return (
|
|
<div className="relative">
|
|
<ButtonTooltip
|
|
variant="outline"
|
|
size="tiny"
|
|
id="advisor-center-trigger"
|
|
className={cn(
|
|
'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 group',
|
|
// 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}
|
|
tooltip={{
|
|
content: {
|
|
text: 'Advisor Center',
|
|
},
|
|
}}
|
|
>
|
|
<Lightbulb
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
className={cn(
|
|
'text-foreground-light group-hover:text-foreground',
|
|
isOpen && 'text-background group-hover:text-background'
|
|
)}
|
|
/>
|
|
<span className="sr-only">Advisor Center</span>
|
|
</ButtonTooltip>
|
|
{hasCriticalIssues ? (
|
|
<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 ? (
|
|
<span className="absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-brand" />
|
|
) : null}
|
|
</div>
|
|
)
|
|
}
|