Skip to content

Add tab-based navigation to designer left sidebar #27

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
huangyiirene merged 4 commits into from
Jan 14, 2026
Merged

Add tab-based navigation to designer left sidebar #27

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
97eb0e3
Initial plan
Copilot Jan 14, 2026
ea5999c
Implement tab-based interface for component tree and palette
Copilot Jan 14, 2026
9f4eda2
Address code review feedback - refactor border-r-0 to parent container
Copilot Jan 14, 2026
c0de3e4
Changes before error encountered
Copilot Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 1 addition & 5 deletions packages/designer/src/components/ComponentPalette.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,12 +166,8 @@ export const ComponentPalette: React.FC<ComponentPaletteProps> = React.memo(({ c
}, []);

return (
<div className={cn("flex flex-col h-full bg-gray-50/50 border-r w-72 overflow-hidden", className)}>
<div className={cn("flex flex-col h-full bg-gray-50/50 w-72 overflow-hidden", className)}>
<div className="px-4 py-3 border-b bg-white shrink-0 space-y-3">
<div>
<h2 className="text-sm font-semibold text-gray-900">Components</h2>
<p className="text-xs text-gray-500 mt-0.5">Drag to add to canvas</p>
</div>
<div className="relative">
<input
type="text"
Expand Down
10 changes: 1 addition & 9 deletions packages/designer/src/components/ComponentTree.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -163,15 +163,7 @@ export const ComponentTree: React.FC<ComponentTreeProps> = React.memo(({ classNa
}, [setSelectedNodeId]);

return (
<div className={cn("flex flex-col h-full bg-white border-r", className)}>
<div className="px-4 py-3 border-b shrink-0">
<div className="flex items-center gap-2">
<Layers size={16} className="text-blue-600" />
<h2 className="text-sm font-semibold text-gray-900">Component Tree</h2>
</div>
<p className="text-xs text-gray-500 mt-0.5">Navigate and organize components</p>
</div>

<div className={cn("flex flex-col h-full bg-white", className)}>
<ScrollArea className="flex-1">
<div className="p-2">
{schema && (
Expand Down
17 changes: 4 additions & 13 deletions packages/designer/src/components/Designer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useEffect } from 'react';
import { DesignerProvider } from '../context/DesignerContext';
import { ComponentPalette } from './ComponentPalette';
import { ComponentTree } from './ComponentTree';
import { LeftSidebar } from './LeftSidebar';
import { Canvas } from './Canvas';
import { PropertyPanel } from './PropertyPanel';
import { useDesigner } from '../context/DesignerContext';
Expand All @@ -22,8 +21,7 @@ export const DesignerContent: React.FC = () => {
removeNode,
selectedNodeId,
canUndo,
canRedo,
showComponentTree
canRedo
} = useDesigner();

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

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

{/* Component Tree (Optional) */}
{showComponentTree && (
<div className="w-64 flex-shrink-0 z-10 h-full">
<ComponentTree className="h-full" />
</div>
)}

{/* Main Canvas Area */}
<div className="flex-1 relative bg-gray-100 z-0">
<Canvas className="h-full w-full" />
Expand Down
58 changes: 58 additions & 0 deletions packages/designer/src/components/LeftSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React, { useState } from 'react';
import { ComponentPalette } from './ComponentPalette';
import { ComponentTree } from './ComponentTree';
import { cn } from '@object-ui/components';
import { Layers, Box } from 'lucide-react';

interface LeftSidebarProps {
className?: string;
}

type TabType = 'palette' | 'tree';

export const LeftSidebar: React.FC<LeftSidebarProps> = React.memo(({ className }) => {
const [activeTab, setActiveTab] = useState<TabType>('palette');

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

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
{/* Tab Headers */}
<div className="flex border-b bg-gray-50/50 shrink-0">
<button
onClick={() => setActiveTab('palette')}
className={cn(
"flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
activeTab === 'palette'
? "text-blue-600 bg-white border-b-2 border-blue-600"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
)}
>
<Box size={16} />
<span>Components</span>
</button>
<button
onClick={() => setActiveTab('tree')}
className={cn(
"flex-1 flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-all relative",
activeTab === 'tree'
? "text-blue-600 bg-white border-b-2 border-blue-600"
: "text-gray-600 hover:text-gray-900 hover:bg-gray-100/50"
)}
>
<Layers size={16} />
<span>Tree</span>
</button>
</div>

{/* Tab Content */}
<div className="flex-1 overflow-hidden border-r-0">
Copy link

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">

Copilot uses AI. Check for mistakes.
{activeTab === 'palette' ? (
<ComponentPalette className="h-full" />
) : (
<ComponentTree className="h-full" />
)}
</div>
</div>
);
});

LeftSidebar.displayName = 'LeftSidebar';
25 changes: 1 addition & 24 deletions packages/designer/src/components/Toolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ import {
Upload,
Copy,
FileJson,
Layers,
} from 'lucide-react';
import {
Dialog,
Expand Down Expand Up @@ -41,9 +40,7 @@ export const Toolbar: React.FC = React.memo(() => {
canUndo,
canRedo,
viewportMode,
setViewportMode,
showComponentTree,
setShowComponentTree
setViewportMode
} = useDesigner();
const [showExportDialog, setShowExportDialog] = useState(false);
const [showImportDialog, setShowImportDialog] = useState(false);
Expand Down Expand Up @@ -167,26 +164,6 @@ export const Toolbar: React.FC = React.memo(() => {
<TooltipContent>Mobile View (375px)</TooltipContent>
</Tooltip>
</div>

{/* Component Tree Toggle */}
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="sm"
className={cn(
"h-8 w-8 p-0 transition-all",
showComponentTree ? "text-blue-600" : "text-gray-500 hover:text-gray-900"
)}
onClick={() => setShowComponentTree(!showComponentTree)}
>
<Layers size={16} />
</Button>
</TooltipTrigger>
<TooltipContent>
{showComponentTree ? 'Hide' : 'Show'} Component Tree
</TooltipContent>
</Tooltip>
</div>

{/* Right Actions */}
Expand Down
5 changes: 0 additions & 5 deletions packages/designer/src/context/DesignerContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,6 @@ export interface DesignerContextValue {
setDraggingNodeId: React.Dispatch<React.SetStateAction<string | null>>;
viewportMode: ViewportMode;
setViewportMode: React.Dispatch<React.SetStateAction<ViewportMode>>;
showComponentTree: boolean;
setShowComponentTree: React.Dispatch<React.SetStateAction<boolean>>;
addNode: (parentId: string | null, node: SchemaNode, index?: number) => void;
updateNode: (id: string, updates: Partial<SchemaNode>) => void;
removeNode: (id: string) => void;
Expand Down Expand Up @@ -203,7 +201,6 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
const [draggingType, setDraggingType] = useState<string | null>(null);
const [draggingNodeId, setDraggingNodeId] = useState<string | null>(null);
const [viewportMode, setViewportMode] = useState<ViewportMode>('desktop');
const [showComponentTree, setShowComponentTree] = useState(true);

// Undo/Redo state
const [history, setHistory] = useState<SchemaNode[]>([ensureNodeIds(initialSchema || defaultSchema)]);
Expand Down Expand Up @@ -339,8 +336,6 @@ export const DesignerProvider: React.FC<DesignerProviderProps> = ({
setDraggingNodeId,
viewportMode,
setViewportMode,
showComponentTree,
setShowComponentTree,
addNode,
updateNode,
removeNode,
Expand Down
1 change: 1 addition & 0 deletions packages/designer/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export { PropertyPanel } from './components/PropertyPanel';
export { Toolbar } from './components/Toolbar';
export { ComponentTree } from './components/ComponentTree';
export { ContextMenu } from './components/ContextMenu';
export { LeftSidebar } from './components/LeftSidebar';

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