Uh oh!
There was an error while loading. Please reload this page.
Add tab-based navigation to designer left sidebar - #27
Conversation
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
There was a problem hiding this comment.
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
LeftSidebarcomponent with tab navigation between Components and Tree views - Removed the component tree toggle button from the Toolbar
- Cleaned up the
DesignerContextby removingshowComponentTreestate 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 |
| const [activeTab, setActiveTab] = useState<TabType>('palette'); | ||
| return ( | ||
| <div className={cn("flex flex-col h-full bg-white border-r w-72", className)}> |
There was a problem hiding this comment.
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.
| <divclassName={cn("flex flex-col h-full bg-white border-r w-72",className)}> | |
| <divclassName={cn("flex flex-col h-full bg-white w-72",className)}> |
| </div> | ||
| {/* Tab Content */} | ||
| <div className="flex-1 overflow-hidden border-r-0"> |
There was a problem hiding this comment.
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.
| <divclassName="flex-1 overflow-hidden border-r-0"> | |
| <divclassName="flex-1 overflow-hidden"> |
huangyiirene
commented
Jan 14, 2026
@copilot 帮我修改 |
Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>
hotlong
commented
Jan 14, 2026
@copilot 继续 |
✅ All checks passed!
|
Uh oh!
There was an error while loading. Please reload this page.
The designer's component tree and palette consumed excessive horizontal space (~336px) when displayed side-by-side. Users needed a more compact layout.
Changes
LeftSidebarcomponent: Unified left panel with tabs for Components/Tree switchingComponentPaletteandComponentTree(now displayed in tab labels)showComponentTreetoggle and associated context stateImplementation
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.