@@ -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}
-
-
@@ -223,10 +218,6 @@ export function FileTree({ tree, openDirs, toggleDir, onOpen, onContext, activeP
}): React.ReactElement {
return (
-
- Explorer
- {tree.name}
-