Files
supabase/apps/studio/components/layouts/AppLayout/AssistantButton.tsx
Ali Waseem e8df67d5d5 chore: migrate shortcuts to new hooks API (#44955)
## 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?

Cleanup shortcuts with new hooks

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Refactor**
* Centralized keyboard shortcut system for consistent shortcut behavior
across the app and moved preference toggles to a unified registry.

* **New Features**
* Added explicit shortcuts for Command Menu, AI Assistant, Inline
Editor, and result copy/download actions.
* Hotkey preferences UI now renders dynamically from the centralized
shortcut list.

* **Tests**
* Test helpers updated to include the command menu provider for accurate
shortcut behavior in tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-04-17 10:02:56 -06:00

47 lines
1.5 KiB
TypeScript

import { AiIconAnimation, cn, KeyboardShortcut } from 'ui'
import { SIDEBAR_KEYS } from '@/components/layouts/ProjectLayout/LayoutSidebar/LayoutSidebarProvider'
import { ButtonTooltip } from '@/components/ui/ButtonTooltip'
import { SHORTCUT_IDS } from '@/state/shortcuts/registry'
import { useIsShortcutEnabled } from '@/state/shortcuts/useIsShortcutEnabled'
import { useSidebarManagerSnapshot } from '@/state/sidebar-manager-state'
export const AssistantButton = () => {
const { activeSidebar, toggleSidebar } = useSidebarManagerSnapshot()
const isAIAssistantHotkeyEnabled = useIsShortcutEnabled(SHORTCUT_IDS.AI_ASSISTANT_TOGGLE)
const isOpen = activeSidebar?.id === SIDEBAR_KEYS.AI_ASSISTANT
return (
<ButtonTooltip
type="outline"
size="tiny"
id="assistant-trigger"
className={cn(
'rounded-full w-[32px] h-[32px] flex items-center justify-center p-0',
isOpen && 'bg-foreground text-background'
)}
onClick={() => {
toggleSidebar(SIDEBAR_KEYS.AI_ASSISTANT)
}}
tooltip={{
content: {
className: 'p-1 pl-2.5',
text: (
<div className="flex items-center gap-2.5">
<span>AI Assistant</span>
{isAIAssistantHotkeyEnabled && <KeyboardShortcut keys={['Meta', 'I']} />}
</div>
),
},
}}
>
<AiIconAnimation
allowHoverEffect={false}
size={16}
className={cn(isOpen && 'text-background')}
/>
</ButtonTooltip>
)
}