agent-ecosystem/src/renderer/components/layout/TabbedLayout.tsx
iliya 06bf5d4381 merge: sync with upstream/main — session reports, cost calculation, Linux title bar, auto-expand AI groups
Brings in upstream changes:
- Session analysis reports (overview, cost, tokens, tools, git, quality)
- Unified cost calculation with LiteLLM pricing data
- Custom title bar for Linux with native toggle
- Auto-expand AI response groups setting
- MoreMenu toolbar component
- Various fixes (window drag, Ctrl+R, notification guard)

All merge conflicts resolved preserving both fork features (team management,
agent language, fullscreen, diff view) and upstream additions.
2026-02-24 21:04:23 +02:00

57 lines
1.9 KiB
TypeScript

/**
* TabbedLayout - Main layout with project-centric sidebar and multi-pane tabbed content.
*
* Layout structure:
* - Sidebar (280px): Project dropdown + date-grouped sessions
* - Main content: PaneContainer with one or more panes, each with TabBar + content
*/
import { isElectronMode } from '@renderer/api';
import { getTrafficLightPaddingForZoom } from '@renderer/constants/layout';
import { useFullScreen } from '@renderer/hooks/useFullScreen';
import { useKeyboardShortcuts } from '@renderer/hooks/useKeyboardShortcuts';
import { useZoomFactor } from '@renderer/hooks/useZoomFactor';
import { UpdateBanner } from '../common/UpdateBanner';
import { UpdateDialog } from '../common/UpdateDialog';
import { WorkspaceIndicator } from '../common/WorkspaceIndicator';
import { CommandPalette } from '../search/CommandPalette';
import { CustomTitleBar } from './CustomTitleBar';
import { PaneContainer } from './PaneContainer';
import { Sidebar } from './Sidebar';
export const TabbedLayout = (): React.JSX.Element => {
useKeyboardShortcuts();
const zoomFactor = useZoomFactor();
const isFullScreen = useFullScreen();
const trafficLightPadding = !isElectronMode()
? 0
: isFullScreen
? 8
: getTrafficLightPaddingForZoom(zoomFactor);
return (
<div
className="flex h-screen flex-col bg-claude-dark-bg text-claude-dark-text"
style={
{ '--macos-traffic-light-padding-left': `${trafficLightPadding}px` } as React.CSSProperties
}
>
<CustomTitleBar />
<UpdateBanner />
<div className="flex flex-1 overflow-hidden">
{/* Command Palette (Cmd+K) */}
<CommandPalette />
{/* Sidebar - Project dropdown + Sessions (280px) */}
<Sidebar />
{/* Multi-pane content area */}
<PaneContainer />
</div>
<UpdateDialog />
<WorkspaceIndicator />
</div>
);
};