diff --git a/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx b/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx index fa67242c..b0bb3a6a 100644 --- a/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx +++ b/frontend/src/components/ui-new/containers/WorkspacesLayout.tsx @@ -40,7 +40,10 @@ import { useExpandedAll, PERSIST_KEYS, } from '@/stores/useUiPreferencesStore'; -import { useLayoutStore } from '@/stores/useLayoutStore'; +import { + useLayoutStore, + useIsRightMainPanelVisible, +} from '@/stores/useLayoutStore'; import { useDiffViewStore } from '@/stores/useDiffViewStore'; import { CommandBarDialog } from '@/components/ui-new/dialogs/CommandBarDialog'; import { useCommandBarShortcut } from '@/hooks/useCommandBarShortcut'; @@ -281,8 +284,12 @@ export function WorkspacesLayout() { setLogsMode, resetForCreateMode, setSidebarVisible, + setMainPanelVisible, } = useLayoutStore(); + // Derived state: right main panel (Changes/Logs/Preview) is visible + const isRightMainPanelVisible = useIsRightMainPanelVisible(); + // Read persisted draft for sidebar placeholder (works outside of CreateModeProvider) const { scratch: draftScratch } = useScratch( ScratchType.DRAFT_WORKSPACE, @@ -435,16 +442,13 @@ export function WorkspacesLayout() { // Ref to Allotment for programmatic control const allotmentRef = useRef(null); - // Reset Allotment sizes when changes, logs, or preview panel becomes visible + // Reset Allotment sizes when right main panel becomes visible // This re-applies preferredSize percentages based on current window size useEffect(() => { - if ( - (isChangesMode || isLogsMode || isPreviewMode) && - allotmentRef.current - ) { + if (isRightMainPanelVisible && allotmentRef.current) { allotmentRef.current.reset(); } - }, [isChangesMode, isLogsMode, isPreviewMode]); + }, [isRightMainPanelVisible]); // Reset changes and logs mode when entering create mode useEffect(() => { @@ -453,12 +457,20 @@ export function WorkspacesLayout() { } }, [isCreateMode, resetForCreateMode]); - // Show sidebar when no panel is open + // Show sidebar when right main panel is hidden useEffect(() => { - if (!isChangesMode && !isLogsMode && !isPreviewMode) { + if (!isRightMainPanelVisible) { setSidebarVisible(true); } - }, [isChangesMode, isLogsMode, isPreviewMode, setSidebarVisible]); + }, [isRightMainPanelVisible, setSidebarVisible]); + + // Ensure left main panel (chat) is visible when right main panel is hidden + // This prevents invalid state where only sidebars are visible after page reload + useEffect(() => { + if (!isMainPanelVisible && !isRightMainPanelVisible) { + setMainPanelVisible(true); + } + }, [isMainPanelVisible, isRightMainPanelVisible, setMainPanelVisible]); // Command bar keyboard shortcut (CMD+K) const handleOpenCommandBar = useCallback(() => { @@ -748,7 +760,7 @@ export function WorkspacesLayout() {
{isChangesMode && ( diff --git a/frontend/src/stores/useLayoutStore.ts b/frontend/src/stores/useLayoutStore.ts index e3dda9a0..c095d93f 100644 --- a/frontend/src/stores/useLayoutStore.ts +++ b/frontend/src/stores/useLayoutStore.ts @@ -26,6 +26,7 @@ type LayoutState = { setLogsMode: (value: boolean) => void; setPreviewMode: (value: boolean) => void; setSidebarVisible: (value: boolean) => void; + setMainPanelVisible: (value: boolean) => void; // Preview actions triggerPreviewRefresh: () => void; @@ -168,6 +169,8 @@ export const useLayoutStore = create()( setSidebarVisible: (value) => set({ isSidebarVisible: value }), + setMainPanelVisible: (value) => set({ isMainPanelVisible: value }), + triggerPreviewRefresh: () => set((s) => ({ previewRefreshKey: s.previewRefreshKey + 1 })), @@ -200,3 +203,7 @@ export const useIsGitPanelVisible = () => export const useIsChangesMode = () => useLayoutStore((s) => s.isChangesMode); export const useIsLogsMode = () => useLayoutStore((s) => s.isLogsMode); export const useIsPreviewMode = () => useLayoutStore((s) => s.isPreviewMode); + +// Derived selector: true when right main panel content is visible (Changes/Logs/Preview) +export const useIsRightMainPanelVisible = () => + useLayoutStore((s) => s.isChangesMode || s.isLogsMode || s.isPreviewMode);