refactor(web): standardize hotkey ownership and typing (#38960)

web/features/agent-v2/agent-detail/configure/components/orchestrate/publish-bar/index.tsx

@@ -5,7 +5,7 @@ import type {
   AgentReferencingWorkflowResponse,
   AgentReferencingWorkflowsResponse,
 } from '@dify/contracts/api/console/agent/types.gen'
-import type { RegisterableHotkey } from '@tanstack/react-hotkeys'
+import type { Hotkey } from '@tanstack/react-hotkeys'
 import { Button } from '@langgenius/dify-ui/button'
 import { Collapsible, CollapsiblePanel } from '@langgenius/dify-ui/collapsible'
 import { Kbd, KbdGroup } from '@langgenius/dify-ui/kbd'
@@ -25,7 +25,7 @@ import useTimestamp from '@/hooks/use-timestamp'
 import { consoleQuery } from '@/service/client'
 import { AgentPublishImpactDetails } from './publish-impact-details'
 
-const PUBLISH_AGENT_HOTKEY = 'Mod+Shift+P' satisfies RegisterableHotkey
+const PUBLISH_AGENT_HOTKEY = 'Mod+Shift+P' satisfies Hotkey
 
 type AgentConfigurePublishState = 'draft' | 'publishing' | 'published' | 'unpublished'
 

web/features/agent-v2/agent-detail/navigation.tsx

@@ -12,11 +12,12 @@ import { formatForDisplay } from '@tanstack/react-hotkeys'
 import { skipToken, useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import NavLink from '@/app/components/app-sidebar/nav-link'
-import ToggleButton from '@/app/components/app-sidebar/toggle-button'
 import AppIcon from '@/app/components/base/app-icon'
 import Divider from '@/app/components/base/divider'
 import SidebarLeftArrowIcon from '@/app/components/base/icons/src/vender/SidebarLeftArrowIcon'
+import { DetailSidebarToggleButton } from '@/app/components/detail-sidebar/toggle-button'
 import { gotoAnythingDialogHandle } from '@/app/components/goto-anything/dialog-handle'
+import { GOTO_ANYTHING_HOTKEY } from '@/app/components/goto-anything/hotkeys'
 import Link from '@/next/link'
 import { usePathname } from '@/next/navigation'
 import { consoleQuery } from '@/service/client'
@@ -39,8 +40,6 @@ type AgentDetailNavItem = {
   activeIcon: NavIcon
 }
 
-const SEARCH_SHORTCUT = ['Mod', 'K']
-
 const createAgentNavIcon = (iconClassName: string) => {
   function AgentNavIcon({ className }: ComponentProps<'svg'>) {
     return <span aria-hidden className={cn(iconClassName, className)} />
@@ -92,9 +91,9 @@ export function AgentDetailTop({ expand = true, onToggle }: AgentDetailTopProps)
     return (
       <div className="flex w-full items-center justify-center px-3 pt-2 pb-1">
         {onToggle && (
-          <ToggleButton
+          <DetailSidebarToggleButton
             expand={expand}
-            handleToggle={onToggle}
+            onToggle={onToggle}
             icon={<SidebarLeftArrowIcon aria-hidden className="size-4" />}
             className="size-8 rounded-[10px] border-0 bg-transparent px-0 text-text-tertiary shadow-none hover:border-0 hover:bg-state-base-hover hover:text-text-secondary"
           />
@@ -145,16 +144,16 @@ export function AgentDetailTop({ expand = true, onToggle }: AgentDetailTopProps)
         >
           <span className="px-0.5">{tApp(($) => $['gotoAnything.quickAction'])}</span>
           <KbdGroup>
-            {SEARCH_SHORTCUT.map((key) => (
+            {GOTO_ANYTHING_HOTKEY.split('+').map((key) => (
               <Kbd key={key}>{formatForDisplay(key)}</Kbd>
             ))}
           </KbdGroup>
         </TooltipContent>
       </Tooltip>
       {onToggle && (
-        <ToggleButton
+        <DetailSidebarToggleButton
           expand={expand}
-          handleToggle={onToggle}
+          onToggle={onToggle}
           icon={<SidebarLeftArrowIcon aria-hidden className="size-4" />}
           className="size-8 rounded-[10px] border-0 bg-transparent px-0 text-text-tertiary shadow-none hover:border-0 hover:bg-state-base-hover hover:text-text-secondary"
         />

web/features/deployments/detail/deployment-sidebar.tsx

@@ -11,11 +11,12 @@ import { formatForDisplay } from '@tanstack/react-hotkeys'
 import { useAtomValue } from 'jotai'
 import { useTranslation } from 'react-i18next'
 import NavLink from '@/app/components/app-sidebar/nav-link'
-import ToggleButton from '@/app/components/app-sidebar/toggle-button'
 import Divider from '@/app/components/base/divider'
 import SidebarLeftArrowIcon from '@/app/components/base/icons/src/vender/SidebarLeftArrowIcon'
 import { SkeletonContainer, SkeletonRectangle } from '@/app/components/base/skeleton'
+import { DetailSidebarToggleButton } from '@/app/components/detail-sidebar/toggle-button'
 import { gotoAnythingDialogHandle } from '@/app/components/goto-anything/dialog-handle'
+import { GOTO_ANYTHING_HOTKEY } from '@/app/components/goto-anything/hotkeys'
 import Link from '@/next/link'
 import { usePathname } from '@/next/navigation'
 import { DeploymentActionsMenu } from '../deployment-actions'
@@ -78,8 +79,6 @@ const DEPLOYMENT_TABS: TabDef[] = [
   { key: 'api-tokens', icon: ApiIcon, selectedIcon: ApiSelectedIcon },
 ]
 
-const SEARCH_SHORTCUT = ['Mod', 'K']
-
 function DeploymentIcon({ expand }: { expand: boolean }) {
   return (
     <div
@@ -198,9 +197,9 @@ export function DeploymentDetailTop({
     return (
       <div className="flex w-full items-center justify-center px-3 pt-2 pb-1">
         {onToggle && (
-          <ToggleButton
+          <DetailSidebarToggleButton
             expand={expand}
-            handleToggle={onToggle}
+            onToggle={onToggle}
             icon={<SidebarLeftArrowIcon aria-hidden className="size-4" />}
             className="size-8 rounded-[10px] border-0 bg-transparent px-0 text-text-tertiary shadow-none hover:border-0 hover:bg-state-base-hover hover:text-text-secondary"
           />
@@ -251,16 +250,16 @@ export function DeploymentDetailTop({
         >
           <span className="px-0.5">{t(($) => $['gotoAnything.quickAction'], { ns: 'app' })}</span>
           <KbdGroup>
-            {SEARCH_SHORTCUT.map((key) => (
+            {GOTO_ANYTHING_HOTKEY.split('+').map((key) => (
               <Kbd key={key}>{formatForDisplay(key)}</Kbd>
             ))}
           </KbdGroup>
         </TooltipContent>
       </Tooltip>
       {onToggle && (
-        <ToggleButton
+        <DetailSidebarToggleButton
           expand={expand}
-          handleToggle={onToggle}
+          onToggle={onToggle}
           icon={<SidebarLeftArrowIcon aria-hidden className="size-4" />}
           className="size-8 rounded-[10px] border-0 bg-transparent px-0 text-text-tertiary shadow-none hover:border-0 hover:bg-state-base-hover hover:text-text-secondary"
         />