收口 Makelore 客户端变更

tests/unit/title-bar.test.tsx

@@ -22,13 +22,17 @@ describe('TitleBar platform behavior', () => {
     render(<TitleBar integrated />);
 
     expect(screen.getByTestId('product-titlebar')).not.toHaveClass('border-b');
+    expect(screen.getByTestId('product-titlebar')).not.toHaveClass('drag-region');
     expect(screen.getByTestId('product-titlebar')).toHaveClass('glass-surface', 'bg-background/70');
-    expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass('w-64', 'bg-surface-sidebar', 'border-r');
-    expect(screen.getByTestId('titlebar-main-surface')).toHaveClass('border-b');
+    expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass('w-64', 'sidebar-glass-surface', 'border-r');
+    expect(screen.getByTestId('titlebar-main-surface')).toHaveClass('border-b', 'bg-background', 'drag-region');
     expect(screen.getByTestId('titlebar-project-context')).not.toHaveClass('border-l');
-    expect(screen.getByTestId('titlebar-project-context')).toHaveClass('translate-y-[3px]');
+    expect(screen.getByTestId('titlebar-project-context')).not.toHaveClass('translate-y-[3px]');
+    expect(screen.getByTestId('titlebar-logo')).toHaveClass('absolute', 'top-1/2', 'bg-background');
+    expect(screen.getByTestId('titlebar-logo')).toHaveStyle({ right: 'var(--agent-browser-titlebar-logo-gap, 48px)' });
     expect(screen.getByTestId('titlebar-logo').querySelector('img')).toHaveAttribute('data-logo-source', 'original-wordmark');
-    expect(screen.getByTestId('titlebar-sidebar-toggle')).toHaveClass('translate-y-[3px]');
+    expect(screen.getByTestId('titlebar-sidebar-toggle-layer')).toHaveClass('no-drag', 'pointer-events-auto', 'fixed', 'left-0', 'top-0', 'z-[400]', 'h-10', 'w-[132px]');
+    expect(screen.getByTestId('titlebar-sidebar-toggle')).toHaveClass('no-drag', 'pointer-events-auto', 'absolute', 'top-1', 'z-[401]', 'left-[88px]');
     expect(screen.getByTestId('titlebar-project-context')).toHaveTextContent('Makelore 工作台');
     expect(screen.queryByRole('button', { name: '打开项目位置' })).not.toBeInTheDocument();
     expect(screen.queryByRole('button', { name: '后退' })).not.toBeInTheDocument();
@@ -44,6 +48,22 @@ describe('TitleBar platform behavior', () => {
     expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass('bg-background');
     expect(screen.getByTestId('product-titlebar')).toHaveClass('border-b');
     expect(screen.getByTestId('titlebar-main-surface')).toHaveClass('border-b-0');
+    expect(screen.getByTestId('titlebar-sidebar-toggle')).toBeVisible();
+  });
+
+  it('keeps the collapsed sidebar expand control above the titlebar drag surfaces', () => {
+    window.electron.platform = 'darwin';
+    useSettingsStore.setState({ sidebarCollapsed: true });
+
+    render(<TitleBar integrated workspaceLayout />);
+
+    const toggle = screen.getByRole('button', { name: '展开侧栏' });
+    expect(screen.getByTestId('titlebar-sidebar-toggle-layer')).toContainElement(toggle);
+    expect(screen.getByTestId('product-titlebar')).not.toHaveClass('border-b');
+    expect(toggle).toHaveClass('pointer-events-auto', 'z-[401]');
+
+    fireEvent.click(toggle);
+    expect(useSettingsStore.getState().sidebarCollapsed).toBe(false);
   });
 
   it('renders macOS drag region', () => {
@@ -56,6 +76,24 @@ describe('TitleBar platform behavior', () => {
     expect(invokeIpcMock).not.toHaveBeenCalled();
   });
 
+  it('aligns the chat workspace title rail with the four-column layout', () => {
+    window.electron.platform = 'darwin';
+
+    render(<TitleBar integrated workspaceLayout />);
+
+    expect(screen.getByTestId('product-titlebar')).not.toHaveClass('glass-surface', 'border-b');
+    expect(screen.getByTestId('product-titlebar')).toHaveClass('bg-transparent');
+    expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass(
+      'w-[256px]',
+      'min-w-[256px]',
+      'basis-[256px]',
+    );
+    expect(screen.getByTestId('titlebar-main-surface')).toHaveClass('border-b-0');
+    expect(screen.getByTestId('titlebar-conversation-surface')).toHaveClass('w-[256px]', 'bg-surface-tertiary', 'border-r');
+    expect(screen.getByTestId('titlebar-conversation-surface')).toHaveStyle({ left: '0px' });
+    expect(screen.queryByTestId('titlebar-project-context')).not.toBeInTheDocument();
+  });
+
   it('previews the collapsed sidebar on hover and pins it on click', () => {
     window.electron.platform = 'darwin';
     useSettingsStore.setState({ sidebarCollapsed: true });
@@ -65,15 +103,52 @@ describe('TitleBar platform behavior', () => {
 
     const toggle = screen.getByTestId('titlebar-sidebar-toggle');
     fireEvent.pointerEnter(toggle);
-    expect(onSidebarPeekChange).toHaveBeenCalledWith(true);
+    expect(onSidebarPeekChange).toHaveBeenCalledWith(true, 'toggle');
 
     fireEvent.pointerLeave(toggle);
-    expect(onSidebarPeekChange).toHaveBeenCalledWith(false);
+    expect(onSidebarPeekChange).toHaveBeenCalledWith(false, 'toggle');
 
     fireEvent.click(toggle);
     expect(useSettingsStore.getState().sidebarCollapsed).toBe(false);
   });
 
+  it('keeps the chat titlebar rail fixed while the collapsed sidebar previews', () => {
+    window.electron.platform = 'darwin';
+    useSettingsStore.setState({ sidebarCollapsed: true });
+
+    const { rerender } = render(<TitleBar integrated workspaceLayout sidebarPeekOpen={false} />);
+    expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass('w-[132px]');
+    expect(screen.getByTestId('titlebar-conversation-surface')).toHaveStyle({ left: '-132px' });
+
+    rerender(<TitleBar integrated workspaceLayout sidebarPeekOpen />);
+
+    expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass('w-[132px]');
+    expect(screen.getByTestId('titlebar-conversation-surface')).toHaveStyle({ left: '-132px' });
+  });
+
+  it('extends the ordinary titlebar sidebar surface during a hover preview', () => {
+    window.electron.platform = 'darwin';
+    useSettingsStore.setState({ sidebarCollapsed: true });
+
+    const { rerender } = render(<TitleBar integrated sidebarPeekOpen={false} />);
+    expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass('w-[132px]', 'border-r-0');
+
+    rerender(<TitleBar integrated sidebarPeekOpen />);
+
+    expect(screen.getByTestId('titlebar-sidebar-surface')).toHaveClass('w-64', 'sidebar-peek-surface', 'border-r');
+    expect(screen.getByTestId('titlebar-sidebar-surface')).not.toHaveClass('sidebar-glass-surface');
+    expect(screen.getByTestId('titlebar-sidebar-surface')).not.toHaveClass('border-r-0');
+    expect(screen.getByTestId('product-titlebar')).not.toHaveClass('border-b');
+
+    const onSidebarPeekChange = vi.fn();
+    rerender(<TitleBar integrated sidebarPeekOpen onSidebarPeekChange={onSidebarPeekChange} />);
+    const surface = screen.getByTestId('titlebar-sidebar-surface');
+    fireEvent.pointerEnter(surface);
+    fireEvent.pointerLeave(surface);
+    expect(onSidebarPeekChange).toHaveBeenNthCalledWith(1, true, 'titlebar');
+    expect(onSidebarPeekChange).toHaveBeenNthCalledWith(2, false, 'titlebar');
+  });
+
   it('renders custom controls on Windows', async () => {
     window.electron.platform = 'win32';