agent-ecosystem/src/renderer/components/layout/PaneContainer.tsx
iliya 9d2062c8c0 feat: overhaul UI components and enhance task management features
- Updated CLAUDE.md to reflect new AI agent team capabilities and features, including real-time task management and built-in code editor.
- Refactored PaneContainer to simplify drag-and-drop functionality by lifting DnD context to TabbedLayout.
- Removed SidebarHeader component and integrated its functionality into Sidebar for a cleaner layout.
- Enhanced Sidebar with a collapse button and improved task/session navigation.
- Updated TabBar to streamline tab management and improve user interaction.
- Introduced new drag-and-drop handling in TabbedLayout for better user experience across panes.
2026-03-10 23:34:58 +02:00

26 lines
777 B
TypeScript

/**
* PaneContainer - Horizontal flex container that renders panes side by side.
* DndContext is owned by TabbedLayout (parent) for cross-component tab DnD.
*/
import { Fragment } from 'react';
import { useStore } from '@renderer/store';
import { PaneResizeHandle } from './PaneResizeHandle';
import { PaneView } from './PaneView';
export const PaneContainer = (): React.JSX.Element => {
const panes = useStore((s) => s.paneLayout.panes);
return (
<div id="pane-container" className="flex flex-1 overflow-hidden">
{panes.map((pane, i) => (
<Fragment key={pane.id}>
{i > 0 && <PaneResizeHandle leftPaneId={panes[i - 1].id} rightPaneId={pane.id} />}
<PaneView paneId={pane.id} />
</Fragment>
))}
</div>
);
};