Merge pull request #644 from Yumiue/codex/fix-web-collapsed-sidebar-rail-click

fix(web): 修复收起侧边栏按钮点击失效

Author: phantom5099

web/src/components/layout/AppLayout.test.tsx

@@ -5,7 +5,13 @@ import { useUIStore } from '@/stores/useUIStore'
 import { useSessionStore } from '@/stores/useSessionStore'
 import { useWorkspaceStore } from '@/stores/useWorkspaceStore'
 
-vi.mock('./Sidebar', () => ({ default: ({ collapsed }: { collapsed?: boolean }) => <div>{collapsed ? 'sidebar-collapsed' : 'sidebar-open'}</div> }))
+vi.mock('./Sidebar', () => ({
+	default: ({ collapsed }: { collapsed?: boolean }) => (
+		<div data-testid={collapsed ? 'sidebar-collapsed-content' : 'sidebar-open-content'}>
+			{collapsed ? 'sidebar-collapsed' : 'sidebar-open'}
+		</div>
+	),
+}))
 vi.mock('@/components/chat/ChatPanel', () => ({ default: () => <div>chat-panel</div> }))
 vi.mock('@/components/panels/FileChangePanel', () => ({ default: () => <div>changes-panel</div> }))
 vi.mock('@/components/panels/FileTreePanel', () => ({ default: () => <div>tree-panel</div> }))
@@ -49,6 +55,23 @@ describe('AppLayout', () => {
 		expect(screen.getByText('tree-panel')).toBeInTheDocument()
 	})
 
+	it('renders collapsed sidebar in a dedicated rail beside the main area', () => {
+		useUIStore.setState({
+			sidebarOpen: false,
+		} as any)
+		render(<AppLayout />)
+
+		const workspace = document.querySelector('.app-workspace')
+		const rail = screen.getByTestId('sidebar-collapsed-rail')
+		const collapsedContent = screen.getByTestId('sidebar-collapsed-content')
+		const mainArea = document.querySelector('.main-area')
+
+		expect(workspace).toContainElement(rail)
+		expect(rail).toContainElement(collapsedContent)
+		expect(mainArea?.parentElement).toBe(workspace)
+		expect(collapsedContent.closest('.main-area')).toBeNull()
+	})
+
 	it('handles ctrl/cmd+n shortcut', () => {
 		const prepareNewChat = vi.fn()
 		useSessionStore.setState({ prepareNewChat } as any)

web/src/components/layout/AppLayout.tsx

@@ -91,7 +91,7 @@ export default function AppLayout({ shellMode = 'electron' }: AppLayoutProps) {
             />
           </div>
         ) : (
-          <div className="sidebar-collapsed-wrapper">
+          <div className="sidebar-collapsed-wrapper" data-testid="sidebar-collapsed-rail">
             <Sidebar collapsed />
           </div>
         )}

web/src/components/layout/Sidebar.test.tsx

@@ -23,6 +23,43 @@ describe('Sidebar ProviderModal', () => {
   beforeEach(() => {
     cleanup()
     mockGatewayAPI = {
+      listMCPServers: vi.fn().mockResolvedValue({
+        payload: {
+          servers: [
+            {
+              id: 'stdio-weather',
+              enabled: true,
+              trust: false,
+              transport: 'stdio',
+              stdio: { command: 'weather', args: [], env: [] },
+            },
+          ],
+        },
+      }),
+      setMCPServerEnabled: vi.fn().mockResolvedValue(undefined),
+      deleteMCPServer: vi.fn().mockResolvedValue(undefined),
+      upsertMCPServer: vi.fn().mockResolvedValue(undefined),
+      listAvailableSkills: vi.fn().mockResolvedValue({
+        payload: {
+          skills: [
+            {
+              descriptor: {
+                id: 'skill-refactor',
+                name: 'Skill Refactor',
+                description: 'Refactor code safely',
+              },
+              active: false,
+            },
+          ],
+        },
+      }),
+      listSessionSkills: vi.fn().mockResolvedValue({
+        payload: {
+          skills: [],
+        },
+      }),
+      activateSessionSkill: vi.fn().mockResolvedValue(undefined),
+      deactivateSessionSkill: vi.fn().mockResolvedValue(undefined),
       listProviders: vi.fn().mockResolvedValue({
         payload: {
           providers: [
@@ -290,4 +327,53 @@ describe('Sidebar ProviderModal', () => {
       expect(chevronFor(workspaceTwo)).toHaveClass('expanded')
     })
   })
+
+  it('immediately dispatches collapsed-rail actions', async () => {
+    const toggleSidebar = vi.fn()
+    const prepareNewChat = vi.fn()
+    useUIStore.setState({
+      toggleSidebar,
+    } as any)
+    useSessionStore.setState({
+      prepareNewChat,
+    } as any)
+
+    const { container } = render(<Sidebar collapsed />)
+    const collapsedButtons = Array.from(container.querySelectorAll('.sidebar-strip-btn'))
+
+    expect(collapsedButtons).toHaveLength(5)
+
+    fireEvent.click(collapsedButtons[0] as HTMLButtonElement)
+    expect(toggleSidebar).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(collapsedButtons[1] as HTMLButtonElement)
+    expect(prepareNewChat).toHaveBeenCalledTimes(1)
+
+    fireEvent.click(collapsedButtons[2] as HTMLButtonElement)
+    await waitFor(() => {
+      expect(mockGatewayAPI.listMCPServers).toHaveBeenCalled()
+    })
+
+    fireEvent.click(collapsedButtons[3] as HTMLButtonElement)
+    await waitFor(() => {
+      expect(mockGatewayAPI.listAvailableSkills).toHaveBeenCalled()
+      expect(screen.getByText('Skill Refactor')).toBeInTheDocument()
+    })
+
+    fireEvent.click(collapsedButtons[4] as HTMLButtonElement)
+    await waitFor(() => {
+      expect(mockGatewayAPI.listProviders).toHaveBeenCalled()
+      expect(screen.getByText('Gemini')).toBeInTheDocument()
+    })
+  })
+
+  it('keeps the collapsed rail style above neighboring panels', () => {
+    const railRule = appCss.match(/\.sidebar-collapsed-wrapper\s*{(?<body>[^}]*)}/)?.groups?.body ?? ''
+    expect(railRule).toContain('position: relative')
+    expect(railRule).toContain('z-index: 20')
+    expect(railRule).toContain('isolation: isolate')
+    expect(railRule).toContain('width: 44px')
+    expect(railRule).toContain('min-width: 44px')
+    expect(railRule).toContain('flex: 0 0 44px')
+  })
 })

web/src/components/layout/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback } from 'react'
+import { createPortal } from 'react-dom'
 import { useSessionStore } from '@/stores/useSessionStore'
 import { useChatStore } from '@/stores/useChatStore'
 import { useUIStore } from '@/stores/useUIStore'
@@ -147,6 +148,17 @@ export default function Sidebar({ collapsed }: SidebarProps) {
     store.prepareNewChat()
   }
 
+  const modalOverlays = typeof document === 'undefined'
+    ? null
+    : createPortal(
+        <>
+          {mcpModalOpen && <McpModal onClose={() => setMcpModalOpen(false)} />}
+          {skillModalOpen && <SkillModal onClose={() => setSkillModalOpen(false)} />}
+          {providerModalOpen && <ProviderModal onClose={() => setProviderModalOpen(false)} />}
+        </>,
+        document.body,
+      )
+
   // Collapsed sidebar strip
   if (collapsed) {
     return (
@@ -167,6 +179,7 @@ export default function Sidebar({ collapsed }: SidebarProps) {
         <button className="sidebar-strip-btn" onClick={() => setProviderModalOpen(true)} title="供应商">
           <Server size={16} />
         </button>
+        {modalOverlays}
       </>
     )
   }

web/src/index.css

@@ -512,6 +512,8 @@ html, body, #root {
   flex-direction: column;
   overflow: hidden;
   background: var(--bg-app);
+  position: relative;
+  z-index: 0;
 }
 
 /* ── Chat Header ── */
@@ -1750,6 +1752,8 @@ html, body, #root {
   background: var(--bg-sidebar);
   border-left: none;
   overflow: hidden;
+  position: relative;
+  z-index: 0;
 }
 
 .git-diff-preview-host-inline .monaco-editor .inline-deleted-margin-view-zone {
@@ -1770,7 +1774,13 @@ html, body, #root {
 
 /* ── Collapsed Sidebar Wrapper (used from AppLayout) ── */
 .sidebar-collapsed-wrapper {
-  width: 44px; flex-shrink: 0;
+  position: relative;
+  z-index: 20;
+  isolation: isolate;
+  width: 44px;
+  min-width: 44px;
+  flex: 0 0 44px;
+  align-self: stretch;
   background: var(--bg-sidebar);
   display: flex; flex-direction: column;
   align-items: center;