Add tab-based navigation to designer left sidebar

[Copilot]

The designer's component tree and palette consumed excessive horizontal space (~336px) when displayed side-by-side. Users needed a more compact layout.

Changes

• New LeftSidebar component: Unified left panel with tabs for Components/Tree switching
• Refactored component headers: Removed duplicate headers from ComponentPalette and ComponentTree (now displayed in tab labels)
• Simplified state management: Removed showComponentTree toggle and associated context state
• Space optimization: Reduced left sidebar from ~336px to 288px (single panel width)

Implementation

// New LeftSidebar with tab navigation
<div className="w-72">
  <div className="flex border-b">
    <button onClick={() => setActiveTab('palette')}>Components</button>
    <button onClick={() => setActiveTab('tree')}>Tree</button>
  </div>
  <div className="flex-1">
    {activeTab === 'palette' ? <ComponentPalette /> : <ComponentTree />}
  </div>
</div>

Screenshots

Components tab:

Tree tab:

All existing functionality (drag-drop, tree navigation, keyboard shortcuts) preserved.

Original prompt

设计器的组件树和组件选择器可以用选项卡来区别，否则太占空间了

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Pull request overview

This PR refactors the designer's left sidebar to use a tab-based interface, consolidating the component palette and component tree into a single panel to save horizontal space.

Changes:

• Introduced a new LeftSidebar component with tab navigation between Components and Tree views
• Removed the component tree toggle button from the Toolbar
• Cleaned up the DesignerContext by removing showComponentTree state management

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/designer/src/index.ts	Exports the new LeftSidebar component
packages/designer/src/context/DesignerContext.tsx	Removes showComponentTree state and related context values
packages/designer/src/components/Toolbar.tsx	Removes the component tree toggle button and its associated imports
packages/designer/src/components/LeftSidebar.tsx	Adds new tab-based sidebar component with Components/Tree switching
packages/designer/src/components/Designer.tsx	Integrates the new LeftSidebar component, removing conditional tree rendering
packages/designer/src/components/ComponentTree.tsx	Removes the component header section (now shown in tab label)
packages/designer/src/components/ComponentPalette.tsx	Removes the component header section and adjusts border styling

[Copilot]

The component applies both w-72 and a border-r to the root div, but line 47 removes the border with border-r-0. This creates conflicting border declarations. Consider removing border-r from line 17 since the parent in Designer.tsx already applies shadow styling and the explicit border-r-0 override suggests the border shouldn't be here.

Suggested change

	<div className={cn("flex flex-col h-full bg-white border-r w-72", className)}>
	<div className={cn("flex flex-col h-full bg-white w-72", className)}>

[Copilot]

The border-r-0 class is unnecessary here since there's no border-right defined on this element or its parent content area. This appears to be a defensive override that adds no value. Remove it for cleaner styling.

Suggested change

	<div className="flex-1 overflow-hidden border-r-0">
	<div className="flex-1 overflow-hidden">

[huangyiirene]

@copilot 帮我修改

[hotlong]

@copilot 继续

[github-actions]

✅ All checks passed!

• ✅ Type check passed
• ✅ Tests passed
• ✅ Lint check completed

[Copilot]

@copilot 继续

已完成代码审查反馈的修复。移除了冲突的 border 类声明，使样式更加清晰。所有功能正常工作。

Changes made in commit c0de3e4:

• Removed border-r from line 17 (LeftSidebar root div)
• Removed unnecessary border-r-0 from line 47 (tab content container)

Components Tab:

Tree Tab: