fix(web): route panel shortcut correctly

Author: qqqqqf-q

src/apps/web/src/__tests__/appUI.test.tsx

@@ -1,9 +1,9 @@
-import { act } from 'react'
+import { act, useEffect, useState } from 'react'
 import { createRoot } from 'react-dom/client'
 import { MemoryRouter } from 'react-router-dom'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
-import { AppUIProvider, useSettingsUI, useSidebarUI } from '../contexts/app-ui'
+import { AppUIProvider, useSettingsUI, useSidebarUI, useTitleBarRightPanelUI } from '../contexts/app-ui'
 import { AuthContextBridge, type AuthContextValue } from '../contexts/auth'
 import { DesktopTitleBar } from '../components/DesktopTitleBar'
 import { LocaleProvider } from '../contexts/LocaleContext'
@@ -44,6 +44,30 @@ function SettingsProbe() {
   )
 }
 
+function RightPanelShortcutProbe() {
+  const { rightPanelOpen, setRightPanelOpen } = useSidebarUI()
+  const { setTitleBarRightPanelClick } = useTitleBarRightPanelUI()
+  const [visible, setVisible] = useState(false)
+
+  useEffect(() => {
+    setTitleBarRightPanelClick(() => {
+      setVisible((open) => !open)
+    })
+    return () => setTitleBarRightPanelClick(null)
+  }, [setTitleBarRightPanelClick])
+
+  useEffect(() => {
+    setRightPanelOpen(visible)
+  }, [visible, setRightPanelOpen])
+
+  return (
+    <div>
+      <span data-testid="right-panel-visible">{visible ? 'open' : 'closed'}</span>
+      <span data-testid="right-panel-icon">{rightPanelOpen ? 'open' : 'closed'}</span>
+    </div>
+  )
+}
+
 describe('AppUIProvider sidebar state', () => {
   const authValue: AuthContextValue = {
     me: null,
@@ -226,6 +250,52 @@ describe('AppUIProvider sidebar state', () => {
     })
     container.remove()
   })
+
+  it('右侧面板快捷键复用标题栏回调路径', async () => {
+    desktopMock.isDesktop.mockReturnValue(false)
+    Object.defineProperty(window.navigator, 'platform', {
+      configurable: true,
+      value: 'Win32',
+    })
+
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+
+    await act(async () => {
+      root.render(
+        <MemoryRouter initialEntries={['/']}>
+          <AuthContextBridge value={authValue}>
+            <AppUIProvider>
+              <RightPanelShortcutProbe />
+            </AppUIProvider>
+          </AuthContextBridge>
+        </MemoryRouter>,
+      )
+    })
+
+    expect(container.querySelector('[data-testid="right-panel-visible"]')?.textContent).toBe('closed')
+    expect(container.querySelector('[data-testid="right-panel-icon"]')?.textContent).toBe('closed')
+
+    await act(async () => {
+      window.dispatchEvent(new KeyboardEvent('keydown', {
+        key: 'b',
+        code: 'KeyB',
+        altKey: true,
+        ctrlKey: true,
+        bubbles: true,
+        cancelable: true,
+      }))
+    })
+
+    expect(container.querySelector('[data-testid="right-panel-visible"]')?.textContent).toBe('open')
+    expect(container.querySelector('[data-testid="right-panel-icon"]')?.textContent).toBe('open')
+
+    act(() => {
+      root.unmount()
+    })
+    container.remove()
+  })
 })
 
 describe('DesktopTitleBar update entry', () => {

src/apps/web/src/contexts/app-ui.tsx

@@ -560,7 +560,7 @@ export function AppUIProvider({ children }: { children: ReactNode }) {
       }
       if (matchesShortcut(e, SHORTCUTS.toggleRightPanel)) {
         e.preventDefault()
-        setRightPanelOpen((open) => !open)
+        triggerTitleBarRightPanelClick()
         return
       }
       if (matchesShortcut(e, SHORTCUTS.toggleSidebar)) {
@@ -570,7 +570,7 @@ export function AppUIProvider({ children }: { children: ReactNode }) {
     }
     window.addEventListener('keydown', handler)
     return () => window.removeEventListener('keydown', handler)
-  }, [settingsOpen, openSettings, closeSettings, openSearchOverlay, toggleSidebar])
+  }, [settingsOpen, openSettings, closeSettings, openSearchOverlay, triggerTitleBarRightPanelClick, toggleSidebar])
 
   useEffect(() => {
     if (!(desktop && settingsOpen)) return