diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 244db5f..143a7fd 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -36,7 +36,7 @@ function Splitter({ orientation = 'v', onDelta }: { orientation?: 'v' | 'h'; onD return
} -function RightColumn({ width }: { width: number }): React.ReactElement { +function RightColumn({ width, onFocus }: { width: number; onFocus: () => void }): React.ReactElement { const [topFrac, setTopFrac] = useState(() => loadNum('helder.topFrac', 0.52)) const ref = useRef(null) useEffect(() => saveNum('helder.topFrac', topFrac), [topFrac]) @@ -45,7 +45,7 @@ function RightColumn({ width }: { width: number }): React.ReactElement { setTopFrac((f) => Math.max(0.18, Math.min(0.82, (f * h + dy) / h))) } return ( -
+
@@ -130,22 +130,37 @@ export function App(): React.ReactElement { toast('Discarded changes', path) } - // Columns are proportional — Source Control 10%, Explorer 10%, Editor 40% - // (flex:1, takes the remainder), Right column 40% — and re-apply on resize. - // Dragging a splitter still adjusts them until the next window resize. - const [gitW, setGitW] = useState(() => Math.round(window.innerWidth * 0.1)) - const [treeW, setTreeW] = useState(() => Math.round(window.innerWidth * 0.1)) - const [rightW, setRightW] = useState(() => Math.round(window.innerWidth * 0.4)) + // Proportional columns, two regimes (Editor C is the flex remainder): + // ≥ 1650px (roomy) → Git 10% · Explorer 10% · Editor 40% · Right 40% + // (no focus-driven changes — everything fits) + // < 1650px (tight) → Git 15% · Explorer 15%, Editor/Right react to focus: + // default Editor 40% / Right 30% + // focus editor → Editor 50% / Right 20% + // focus agent/terminal → Editor 20% / Right 50% + // Re-applied on resize + focus change; dragging still works in between. + const FOCUS_RESIZE_BELOW = 1650 + const [focusZone, setFocusZone] = useState<'default' | 'editor' | 'terminal'>('default') + const [gitW, setGitW] = useState(() => Math.round(window.innerWidth * 0.15)) + const [treeW, setTreeW] = useState(() => Math.round(window.innerWidth * 0.15)) + const [rightW, setRightW] = useState(() => Math.round(window.innerWidth * 0.3)) useEffect(() => { - function applyProportions(): void { + function apply(): void { const w = window.innerWidth - setGitW(Math.round(w * 0.1)) - setTreeW(Math.round(w * 0.1)) - setRightW(Math.round(w * 0.4)) + if (w >= FOCUS_RESIZE_BELOW) { + setGitW(Math.round(w * 0.1)) + setTreeW(Math.round(w * 0.1)) + setRightW(Math.round(w * 0.4)) + } else { + setGitW(Math.round(w * 0.15)) + setTreeW(Math.round(w * 0.15)) + const rightFrac = focusZone === 'terminal' ? 0.5 : focusZone === 'editor' ? 0.2 : 0.3 + setRightW(Math.round(w * rightFrac)) + } } - window.addEventListener('resize', applyProportions) - return () => window.removeEventListener('resize', applyProportions) - }, []) + apply() + window.addEventListener('resize', apply) + return () => window.removeEventListener('resize', apply) + }, [focusZone]) // Seed explorer expansion from the tree's `open` flags once per opened project. const seededRoot = useRef(undefined) @@ -222,6 +237,7 @@ export function App(): React.ReactElement { function openFile(path: string, opts: { diff?: boolean; line?: number } = {}): void { const changed = !!proj.diffs[path] + setFocusZone('editor') actions.ensureFile(path) setTabs((t) => t.some((x) => x.path === path) ? t : [...t, { path }]) setActive(path) @@ -370,12 +386,12 @@ export function App(): React.ReactElement { ) : ( -
Explorer
+
)}
setTreeW((w) => clamp(w + dx, 160, 520))} /> -
+
setFocusZone('editor')}> { if (active) { setTabMode((mm) => ({ ...mm, [active]: m })); setSplitFor(null) } }} onActivate={setActive} onClose={closeTab} onContext={openMenu} @@ -390,7 +406,7 @@ export function App(): React.ReactElement { })} /> {/* keyed by root so the PTYs respawn in the new cwd when the project switches */} - {proj.ready && } + {proj.ready && setFocusZone('terminal')} />}
{/* status bar */} diff --git a/src/renderer/src/components.tsx b/src/renderer/src/components.tsx index 416a16b..ec5c4dc 100644 --- a/src/renderer/src/components.tsx +++ b/src/renderer/src/components.tsx @@ -107,14 +107,9 @@ export function GitPanel({ branch, changes, staged, committed, commitMsg, setCom return ( -
- {Icon.branch()}Source Control - {visible.length} -
-