konnosDashboard
InlineEditorButton.tsx53 lines · main
1import { SqlEditor } from 'icons'
2import { cn, KeyboardShortcut } from 'ui'
3
4import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
5import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
6import { useTrack } from '@/lib/telemetry/track'
7import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
8import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
9import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
10
11const InlineEditorKeyboardTooltip = () => {
12 const hotkeyEnabled = useIsShortcutEnabled(SHORTCUT_IDS.INLINE_EDITOR_TOGGLE)
13
14 return hotkeyEnabled ? <KeyboardShortcut keys={['Meta', 'E']} /> : null
15}
16
17export const InlineEditorButton = () => {
18 const { activeSidebar, toggleSidebar } = useSidebarManagerSnapshot()
19 const isOpen = activeSidebar?.id === SIDEBAR_KEYS.EDITOR_PANEL
20 const track = useTrack()
21
22 const handleClick = () => {
23 track('header_inline_editor_button_clicked')
24 toggleSidebar(SIDEBAR_KEYS.EDITOR_PANEL)
25 }
26
27 return (
28 <ButtonTooltip
29 type="outline"
30 size="tiny"
31 id="editor-trigger"
32 className={cn(
33 'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0 text-foreground-light hover:text-foreground',
34 isOpen && 'bg-foreground text-background hover:text-background'
35 )}
36 onClick={handleClick}
37 tooltip={{
38 content: {
39 className: 'p-1 pl-2.5',
40 text: (
41 <div className="flex items-center gap-2.5">
42 <span>SQL Editor</span>
43 <InlineEditorKeyboardTooltip />
44 </div>
45 ),
46 },
47 }}
48 >
49 <SqlEditor size={16} strokeWidth={1.5} />
50 <span className="sr-only">SQL Editor</span>
51 </ButtonTooltip>
52 )
53}