Skip to content

Commit c0ef1a6

Browse files
huangyiirenehuangyiirene
authored
Merge pull request #27 from objectstack-ai/copilot/add-tabs-for-component-selector
2 parents 0cf1ec5 + c0de3e4 commit c0ef1a6

File tree

7 files changed

+66
-56
lines changed

7 files changed

+66
-56
lines changed

‎packages/designer/src/components/ComponentPalette.tsx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -166,12 +166,8 @@ export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ c
166166
}, []);
167167

168168
return (
169-
<div className={cn("flex flex-col h-full bg-gray-50/50 border-r w-72 overflow-hidden", className)}>
169+
<div className={cn("flex flex-col h-full bg-gray-50/50 w-72 overflow-hidden", className)}>
170170
<div className="px-4 py-3 border-b bg-white shrink-0 space-y-3">
171-
<div>
172-
<h2 className="text-sm font-semibold text-gray-900">Components</h2>
173-
<p className="text-xs text-gray-500 mt-0.5">Drag to add to canvas</p>
174-
</div>
175171
<div className="relative">
176172
<input
177173
type="text"

‎packages/designer/src/components/ComponentTree.tsx‎

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -163,15 +163,7 @@ export const ComponentTree: React.FC<ComponentTreeProps> = React.memo(({ classNa
163163
}, [setSelectedNodeId]);
164164

165165
return (
166-
<div className={cn("flex flex-col h-full bg-white border-r", className)}>
167-
<div className="px-4 py-3 border-b shrink-0">
168-
<div className="flex items-center gap-2">
169-
<Layers size={16} className="text-blue-600" />
170-
<h2 className="text-sm font-semibold text-gray-900">Component Tree</h2>
171-
</div>
172-
<p className="text-xs text-gray-500 mt-0.5">Navigate and organize components</p>
173-
</div>
174-
166+
<div className={cn("flex flex-col h-full bg-white", className)}>
175167
<ScrollArea className="flex-1">
176168
<div className="p-2">
177169
{schema && (

‎packages/designer/src/components/Designer.tsx‎

Lines changed: 4 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React, { useEffect } from 'react';
22
import { DesignerProvider } from '../context/DesignerContext';
3-
import { ComponentPalette } from './ComponentPalette';
4-
import { ComponentTree } from './ComponentTree';
3+
import { LeftSidebar } from './LeftSidebar';
54
import { Canvas } from './Canvas';
65
import { PropertyPanel } from './PropertyPanel';
76
import { useDesigner } from '../context/DesignerContext';
@@ -22,8 +21,7 @@ export const DesignerContent: React.FC = () => {
2221
removeNode,
2322
selectedNodeId,
2423
canUndo,
25-
canRedo,
26-
showComponentTree
24+
canRedo
2725
} = useDesigner();
2826

2927
// Keyboard shortcuts
@@ -75,18 +73,11 @@ export const DesignerContent: React.FC = () => {
7573
{/* <Toolbar /> removed, moved to parent */}
7674

7775
<div className="flex-1 flex overflow-hidden">
78-
{/* Left Sidebar - Component Palette */}
76+
{/* Left Sidebar - Combined Component Palette and Tree */}
7977
<div className="w-72 flex-shrink-0 z-10 shadow-[1px_0_5px_rgba(0,0,0,0.03)] h-full">
80-
<ComponentPalette className="h-full border-r-0" />
78+
<LeftSidebar className="h-full border-r-0" />
8179
</div>
8280

83-
{/* Component Tree (Optional) */}
84-
{showComponentTree && (
85-
<div className="w-64 flex-shrink-0 z-10 h-full">
86-
<ComponentTree className="h-full" />
87-
</div>
88-
)}
89-
9081
{/* Main Canvas Area */}
9182
<div className="flex-1 relative bg-gray-100 z-0">
9283
<Canvas className="h-full w-full" />

‎packages/designer/src/components/LeftSidebar.tsx‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
import React, { useState } from 'react';
2+
import { ComponentPalette } from './ComponentPalette';
3+
import { ComponentTree } from './ComponentTree';
4+
import { cn } from '@object-ui/components';
5+
import { Layers, Box } from 'lucide-react';
6+
7+
interface LeftSidebarProps {
8+
className?: string;
9+
}
10+
11+
type TabType = 'palette' | 'tree';
12+
13+
export const LeftSidebar: React.FC<LeftSidebarProps> = React.memo(({ className }) => {
14+
const [activeTab, setActiveTab] = useState<TabType>('palette');
15+
16+
return (
17+
<div className={cn("flex flex-col h-full bg-white w-72", className)}>
18+
{/* Tab Headers */}
19+
<div className="flex border-b bg-gray-50/50 shrink-0">
20+
<button
21+
onClick={() => setActiveTab('palette')}
22+
className={cn(
23+
"flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
24+
activeTab === 'palette'
25+
? "text-blue-600 bg-white border-b-2 border-blue-600"
26+
: "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
27+
)}
28+
>
29+
<Box size={16} />
30+
<span>Components</span>
31+
</button>
32+
<button
33+
onClick={() => setActiveTab('tree')}
34+
className={cn(
35+
"flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
36+
activeTab === 'tree'
37+
? "text-blue-600 bg-white border-b-2 border-blue-600"
38+
: "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
39+
)}
40+
>
41+
<Layers size={16} />
42+
<span>Tree</span>
43+
</button>
44+
</div>
45+
46+
{/* Tab Content */}
47+
<div className="flex-1 overflow-hidden">
48+
{activeTab === 'palette' ? (
49+
<ComponentPalette className="h-full" />
50+
) : (
51+
<ComponentTree className="h-full" />
52+
)}
53+
</div>
54+
</div>
55+
);
56+
});
57+
58+
LeftSidebar.displayName = 'LeftSidebar';

‎packages/designer/src/components/Toolbar.tsx‎

Lines changed: 1 addition & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ import {
1212
Upload,
1313
Copy,
1414
FileJson,
15-
Layers,
1615
} from 'lucide-react';
1716
import {
1817
Dialog,
@@ -41,9 +40,7 @@ export const Toolbar: React.FC = React.memo(() => {
4140
canUndo,
4241
canRedo,
4342
viewportMode,
44-
setViewportMode,
45-
showComponentTree,
46-
setShowComponentTree
43+
setViewportMode
4744
} = useDesigner();
4845
const [showExportDialog, setShowExportDialog] = useState(false);
4946
const [showImportDialog, setShowImportDialog] = useState(false);
@@ -167,26 +164,6 @@ export const Toolbar: React.FC = React.memo(() => {
167164
<TooltipContent>Mobile View (375px)</TooltipContent>
168165
</Tooltip>
169166
</div>
170-
171-
{/* Component Tree Toggle */}
172-
<Tooltip>
173-
<TooltipTrigger asChild>
174-
<Button
175-
variant="ghost"
176-
size="sm"
177-
className={cn(
178-
"h-8 w-8 p-0 transition-all",
179-
showComponentTree ? "text-blue-600" : "text-gray-500 hover:text-gray-900"
180-
)}
181-
onClick={() => setShowComponentTree(!showComponentTree)}
182-
>
183-
<Layers size={16} />
184-
</Button>
185-
</TooltipTrigger>
186-
<TooltipContent>
187-
{showComponentTree ? 'Hide' : 'Show'} Component Tree
188-
</TooltipContent>
189-
</Tooltip>
190167
</div>
191168

192169
{/* Right Actions */}

‎packages/designer/src/context/DesignerContext.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,6 @@ export interface DesignerContextValue {
1616
setDraggingNodeId: React.Dispatch<React.SetStateAction<string | null>>;
1717
viewportMode: ViewportMode;
1818
setViewportMode: React.Dispatch<React.SetStateAction<ViewportMode>>;
19-
showComponentTree: boolean;
20-
setShowComponentTree: React.Dispatch<React.SetStateAction<boolean>>;
2119
addNode: (parentId: string | null, node: SchemaNode, index?: number) => void;
2220
updateNode: (id: string, updates: Partial<SchemaNode>) => void;
2321
removeNode: (id: string) => void;
@@ -203,7 +201,6 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
203201
const [draggingType, setDraggingType] = useState<string | null>(null);
204202
const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null);
205203
const [viewportMode, setViewportMode] = useState<ViewportMode>('desktop');
206-
const [showComponentTree, setShowComponentTree] = useState(true);
207204

208205
// Undo/Redo state
209206
const [history, setHistory] = useState<SchemaNode[]>([ensureNodeIds(initialSchema || defaultSchema)]);
@@ -339,8 +336,6 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
339336
setDraggingNodeId,
340337
viewportMode,
341338
setViewportMode,
342-
showComponentTree,
343-
setShowComponentTree,
344339
addNode,
345340
updateNode,
346341
removeNode,

‎packages/designer/src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export { PropertyPanel } from './components/PropertyPanel';
1212
export { Toolbar } from './components/Toolbar';
1313
export { ComponentTree } from './components/ComponentTree';
1414
export { ContextMenu } from './components/ContextMenu';
15+
export { LeftSidebar } from './components/LeftSidebar';
1516

1617
export const name = '@object-ui/designer';
1718
export const version = '0.1.0';

0 commit comments

Comments
 (0)