From 220b2a318bb3e42323462f50d12dda65aa4df8a2 Mon Sep 17 00:00:00 2001 From: Shreyas Papinwar Date: Thu, 12 Mar 2026 00:15:52 +0530 Subject: [PATCH 1/4] fix(ui): close editor mode when opening settings --- src/renderer/views/Workspace.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/renderer/views/Workspace.tsx b/src/renderer/views/Workspace.tsx index f2b64bd45..91bdfe21e 100644 --- a/src/renderer/views/Workspace.tsx +++ b/src/renderer/views/Workspace.tsx @@ -335,8 +335,10 @@ export function Workspace() { handleCloseSettingsPage(); return; } + // Close editor mode so the main content area (where settings renders) is visible + setShowEditorMode(false); openSettingsPage(); - }, [showSettingsPage, handleCloseSettingsPage, openSettingsPage]); + }, [showSettingsPage, handleCloseSettingsPage, openSettingsPage, setShowEditorMode]); return ( From 1af046ccdb687d464102e9bed593993b15653cd9 Mon Sep 17 00:00:00 2001 From: Shreyas Papinwar Date: Thu, 12 Mar 2026 00:23:39 +0530 Subject: [PATCH 2/4] fix(ui): also close editor on native menu Settings click --- src/renderer/views/Workspace.tsx | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/renderer/views/Workspace.tsx b/src/renderer/views/Workspace.tsx index 91bdfe21e..43f1e255e 100644 --- a/src/renderer/views/Workspace.tsx +++ b/src/renderer/views/Workspace.tsx @@ -155,14 +155,6 @@ export function Workspace() { }; }, []); - // Listen for native menu "Settings" click (main → renderer) - useEffect(() => { - const cleanup = window.electronAPI.onMenuOpenSettings?.(() => { - openSettingsPage(); - }); - return () => cleanup?.(); - }, [openSettingsPage]); - // Listen for native menu Undo/Redo (main → renderer) and keep operations editor-scoped. useEffect(() => { const cleanupUndo = window.electronAPI.onMenuUndo?.(() => { @@ -189,6 +181,15 @@ export function Workspace() { const projectMgmt = useProjectManagementContext(); const { showEditorMode, setShowEditorMode, setShowKanban } = projectMgmt; + // Listen for native menu "Settings" click (main → renderer) + useEffect(() => { + const cleanup = window.electronAPI.onMenuOpenSettings?.(() => { + setShowEditorMode(false); + openSettingsPage(); + }); + return () => cleanup?.(); + }, [openSettingsPage, setShowEditorMode]); + const handleToggleKanban = useCallback(() => { if (!projectMgmt.selectedProject) return; setShowEditorMode(false); From c9d53326f59c16685fe9c35a5d997152fdead477 Mon Sep 17 00:00:00 2001 From: Shreyas Papinwar Date: Thu, 12 Mar 2026 01:17:09 +0530 Subject: [PATCH 3/4] fix(ui): close editor on update notifier and command palette settings entry points --- src/renderer/views/Workspace.tsx | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/src/renderer/views/Workspace.tsx b/src/renderer/views/Workspace.tsx index 43f1e255e..d9efd1cb4 100644 --- a/src/renderer/views/Workspace.tsx +++ b/src/renderer/views/Workspace.tsx @@ -258,7 +258,13 @@ export function Workspace() { }); // Show toast on update availability - useUpdateNotifier({ checkOnMount: true, onOpenSettings: () => openSettingsPage('general') }); + useUpdateNotifier({ + checkOnMount: true, + onOpenSettings: () => { + setShowEditorMode(false); + openSettingsPage('general'); + }, + }); // Listen for native menu "Check for Updates" click (main → renderer) useEffect(() => { @@ -476,8 +482,14 @@ export function Workspace() { handleCloseSettingsPage(); projectMgmt.handleGoHome(); }} - handleOpenSettings={() => openSettingsPage()} - handleOpenKeyboardShortcuts={() => openSettingsPage('interface')} + handleOpenSettings={() => { + setShowEditorMode(false); + openSettingsPage(); + }} + handleOpenKeyboardShortcuts={() => { + setShowEditorMode(false); + openSettingsPage('interface'); + }} /> {showEditorMode && activeTask && selectedProject && ( Date: Fri, 13 Mar 2026 02:45:11 +0530 Subject: [PATCH 4/4] fix(ui): render settings inside editor overlay instead of closing editor mode Keep the file explorer sidebar visible when opening settings from any entry point (titlebar, menu, command palette, update notifier). Settings now renders in the CodeEditor content area, replacing the Monaco editor, while the file tree stays intact. The right sidebar is auto-collapsed while settings is shown and restored on close. --- .../components/FileExplorer/CodeEditor.tsx | 79 ++++++++++++++----- .../components/FileExplorer/EditorHeader.tsx | 49 +++++++----- src/renderer/views/Workspace.tsx | 25 ++---- 3 files changed, 97 insertions(+), 56 deletions(-) diff --git a/src/renderer/components/FileExplorer/CodeEditor.tsx b/src/renderer/components/FileExplorer/CodeEditor.tsx index bf0c0f2a0..bb7da6f00 100644 --- a/src/renderer/components/FileExplorer/CodeEditor.tsx +++ b/src/renderer/components/FileExplorer/CodeEditor.tsx @@ -25,6 +25,7 @@ import { FileTree } from './FileTree'; import { FileTabs } from './FileTabs'; import { EditorHeader } from './EditorHeader'; import { MarkdownPreview } from './MarkdownPreview'; +import { SettingsPage, type SettingsPageTab } from '../SettingsPage'; import '@/styles/editor-diff.css'; interface CodeEditorProps { @@ -35,6 +36,9 @@ interface CodeEditorProps { onClose: () => void; connectionId?: string | null; remotePath?: string | null; + showSettingsPage?: boolean; + settingsPageInitialTab?: SettingsPageTab; + onCloseSettingsPage?: () => void; } export default function CodeEditor({ @@ -45,12 +49,37 @@ export default function CodeEditor({ onClose, connectionId, remotePath, + showSettingsPage, + settingsPageInitialTab, + onCloseSettingsPage, }: CodeEditorProps) { const { effectiveTheme } = useTheme(); - const { toggle: toggleRightSidebar, collapsed: rightSidebarCollapsed } = useRightSidebar(); + const { + toggle: toggleRightSidebar, + collapsed: rightSidebarCollapsed, + setCollapsed: setRightSidebarCollapsed, + } = useRightSidebar(); const monacoRef = useRef(null); const editorRef = useRef(null); const editorRegistrationCleanupRef = useRef<(() => void) | null>(null); + const rightSidebarWasCollapsedRef = useRef(false); + + // Collapse the right sidebar when settings is shown inside the editor, + // and restore the previous state when settings is closed. + useEffect(() => { + if (showSettingsPage) { + rightSidebarWasCollapsedRef.current = rightSidebarCollapsed; + if (!rightSidebarCollapsed) { + setRightSidebarCollapsed(true); + } + } else { + if (!rightSidebarWasCollapsedRef.current && rightSidebarCollapsed) { + setRightSidebarCollapsed(false); + } + } + // Only react to showSettingsPage toggling, not rightSidebarCollapsed changes + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [showSettingsPage, setRightSidebarCollapsed]); // File management with custom hook const { @@ -277,6 +306,7 @@ export default function CodeEditor({ onSaveAll={saveAllFiles} onToggleRightSidebar={toggleRightSidebar} onClose={onClose} + showSettingsPage={showSettingsPage} />
@@ -297,24 +327,35 @@ export default function CodeEditor({ />
- - - + {showSettingsPage ? ( +
+ {})} + /> +
+ ) : ( + <> + + + + + )}
diff --git a/src/renderer/components/FileExplorer/EditorHeader.tsx b/src/renderer/components/FileExplorer/EditorHeader.tsx index c75cede5b..149b29d87 100644 --- a/src/renderer/components/FileExplorer/EditorHeader.tsx +++ b/src/renderer/components/FileExplorer/EditorHeader.tsx @@ -10,6 +10,7 @@ interface EditorHeaderProps { onSaveAll: () => void; onToggleRightSidebar: () => void; onClose: () => void; + showSettingsPage?: boolean; } export const EditorHeader: React.FC = ({ @@ -20,10 +21,11 @@ export const EditorHeader: React.FC = ({ onSaveAll, onToggleRightSidebar, onClose, + showSettingsPage, }) => { return (
- + = ({ onSaveAll={onSaveAll} onToggleRightSidebar={onToggleRightSidebar} onClose={onClose} + showSettingsPage={showSettingsPage} />
); @@ -54,6 +57,7 @@ const EditorControls: React.FC<{ onSaveAll: () => void; onToggleRightSidebar: () => void; onClose: () => void; + showSettingsPage?: boolean; }> = ({ hasUnsavedChanges, isSaving, @@ -61,27 +65,32 @@ const EditorControls: React.FC<{ onSaveAll, onToggleRightSidebar, onClose, + showSettingsPage, }) => (
- - + {!showSettingsPage && ( + <> + + + + )} diff --git a/src/renderer/views/Workspace.tsx b/src/renderer/views/Workspace.tsx index d9efd1cb4..c071f281a 100644 --- a/src/renderer/views/Workspace.tsx +++ b/src/renderer/views/Workspace.tsx @@ -184,11 +184,10 @@ export function Workspace() { // Listen for native menu "Settings" click (main → renderer) useEffect(() => { const cleanup = window.electronAPI.onMenuOpenSettings?.(() => { - setShowEditorMode(false); openSettingsPage(); }); return () => cleanup?.(); - }, [openSettingsPage, setShowEditorMode]); + }, [openSettingsPage]); const handleToggleKanban = useCallback(() => { if (!projectMgmt.selectedProject) return; @@ -260,10 +259,7 @@ export function Workspace() { // Show toast on update availability useUpdateNotifier({ checkOnMount: true, - onOpenSettings: () => { - setShowEditorMode(false); - openSettingsPage('general'); - }, + onOpenSettings: () => openSettingsPage('general'), }); // Listen for native menu "Check for Updates" click (main → renderer) @@ -342,10 +338,8 @@ export function Workspace() { handleCloseSettingsPage(); return; } - // Close editor mode so the main content area (where settings renders) is visible - setShowEditorMode(false); openSettingsPage(); - }, [showSettingsPage, handleCloseSettingsPage, openSettingsPage, setShowEditorMode]); + }, [showSettingsPage, handleCloseSettingsPage, openSettingsPage]); return ( @@ -482,14 +476,8 @@ export function Workspace() { handleCloseSettingsPage(); projectMgmt.handleGoHome(); }} - handleOpenSettings={() => { - setShowEditorMode(false); - openSettingsPage(); - }} - handleOpenKeyboardShortcuts={() => { - setShowEditorMode(false); - openSettingsPage('interface'); - }} + handleOpenSettings={() => openSettingsPage()} + handleOpenKeyboardShortcuts={() => openSettingsPage('interface')} /> {showEditorMode && activeTask && selectedProject && ( )}