mirror of
https://github.com/supabase/supabase.git
synced 2026-10-06 09:55:06 +03:00
Francesco Sansalvadore
156f904018
- move navigation components to `apps/studio/components/layouts/Navigation` - add [FloatingMobileToolbar](https://github.com/supabase/supabase/pull/43444/changes#diff-3dffe47fd51ca851d612d8728e03b2dc344ec213d4f3a46a824d3fa32a7cc851) as quick access to tools such as search, assistant, inline editor, etc - behind feature flag and feature preview (true by default as it's a bit annoying to have to enable it all the time as previews are stored in local-storage) - fix sidebar panels closing on viewport resizing (regression from previous pr) https://github.com/user-attachments/assets/d6881e3b-5128-4306-bb82-3ca39c755dba <img width="986" height="697" alt="Screenshot 2026-03-12 at 12 40 11" src="https://github.com/user-attachments/assets/da8511e2-7d01-4237-b814-596031c747c5" />
47 lines
1.7 KiB
TypeScript
47 lines
1.7 KiB
TypeScript
import { SIDEBAR_KEYS } from 'components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
|
|
import { ButtonTooltip } from 'components/ui/ButtonTooltip'
|
|
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
|
|
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
|
|
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
|
|
import { HelpCircle } from 'lucide-react'
|
|
import { useSidebarManagerSnapshot } from 'state/sidebar-manager-state'
|
|
import { cn } from 'ui'
|
|
|
|
export const HelpButton = () => {
|
|
const { toggleSidebar, activeSidebar } = useSidebarManagerSnapshot()
|
|
const { data: project } = useSelectedProjectQuery()
|
|
const { data: org } = useSelectedOrganizationQuery()
|
|
const { mutate: sendEvent } = useSendEventMutation()
|
|
|
|
const isOpen = activeSidebar?.id === SIDEBAR_KEYS.HELP_PANEL
|
|
|
|
return (
|
|
<ButtonTooltip
|
|
id="help-dropdown-button"
|
|
type={isOpen ? 'secondary' : 'outline'}
|
|
size="tiny"
|
|
className={cn('rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 group')}
|
|
onClick={() => {
|
|
toggleSidebar(SIDEBAR_KEYS.HELP_PANEL)
|
|
// Don't send telemetry event if dropdown is already open
|
|
if (!isOpen) {
|
|
sendEvent({
|
|
action: 'help_button_clicked',
|
|
groups: { project: project?.ref, organization: org?.slug },
|
|
})
|
|
}
|
|
}}
|
|
tooltip={{ content: { text: 'Help' } }}
|
|
>
|
|
<HelpCircle
|
|
size={16}
|
|
strokeWidth={1.5}
|
|
className={cn(
|
|
'text-foreground-light group-hover:text-foreground',
|
|
isOpen && 'text-background group-hover:text-background'
|
|
)}
|
|
/>
|
|
</ButtonTooltip>
|
|
)
|
|
}
|