Fix: Ensure close all properly closes all open files and handles multiple saved files (#2964)

Author: saddlepaddle

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-content/index.tsx

@@ -14,9 +14,11 @@ interface CodeEditorAreaProps {
     navigationTarget: CodeNavigationTarget | null;
     editorViewsRef: RefObject<Map<string, EditorView>>;
     onSaveFile: () => Promise<void>;
+    onSaveAndCloseFiles: () => Promise<void>;
     onUpdateFileContent: (fileId: string, content: string) => void;
-    onDiscardChanges: (fileId: string) => void;
+    onDiscardChanges: () => void;
     onCancelUnsaved: () => void;
+    fileCountToClose?: number;
 }
 
 export const CodeEditorArea = ({
@@ -26,9 +28,11 @@ export const CodeEditorArea = ({
     navigationTarget,
     editorViewsRef,
     onSaveFile,
+    onSaveAndCloseFiles,
     onUpdateFileContent,
     onDiscardChanges,
     onCancelUnsaved,
+    fileCountToClose,
 }: CodeEditorAreaProps) => {
     const [activeFileIsDirty, setActiveFileIsDirty] = useState(false);
 
@@ -82,9 +86,10 @@ export const CodeEditorArea = ({
             </div>
             {activeFileIsDirty && showUnsavedDialog && (
                 <UnsavedChangesDialog
-                    onSave={onSaveFile}
-                    onDiscard={() => onDiscardChanges(activeFile?.path || '')}
+                    onSave={onSaveAndCloseFiles}
+                    onDiscard={onDiscardChanges}
                     onCancel={() => { onCancelUnsaved(); }}
+                    fileCount={fileCountToClose}
                 />
             )}
         </div>

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/file-content/unsaved-changes-dialog.tsx

@@ -4,13 +4,15 @@ interface UnsavedChangesDialogProps {
     onSave: () => Promise<void>;
     onDiscard: () => void;
     onCancel: () => void;
+    fileCount?: number;
 }
 
-export function UnsavedChangesDialog({ onSave, onDiscard, onCancel }: UnsavedChangesDialogProps) {
+export function UnsavedChangesDialog({ onSave, onDiscard, onCancel, fileCount = 1 }: UnsavedChangesDialogProps) {
+    const isMultiple = fileCount > 1;
     return (
         <div className="absolute top-4 left-1/2 z-50 -translate-x-1/2 bg-white dark:bg-zinc-800 border dark:border-zinc-700 shadow-lg rounded-lg p-4 w-[320px]">
             <div className="text-sm text-gray-800 dark:text-gray-100 mb-4">
-                You have unsaved changes. Are you sure you want to close this file?
+                You have unsaved changes. Are you sure you want to close {isMultiple ? `${fileCount} files` : 'this file'}?
             </div>
             <div className="flex justify-end gap-1">
                 <Button

apps/web/client/src/app/project/[id]/_components/right-panel/code-tab/index.tsx

@@ -63,6 +63,7 @@ export const CodeTab = memo(forwardRef<CodeTabRef, CodeTabProps>(({ projectId, b
     const [activeEditorFile, setActiveEditorFile] = useState<EditorFile | null>(null);
     const [openedEditorFiles, setOpenedEditorFiles] = useState<EditorFile[]>([]);
     const [showLocalUnsavedDialog, setShowLocalUnsavedDialog] = useState(false);
+    const [filesToClose, setFilesToClose] = useState<string[]>([]);
 
     // This is a workaround to allow code controls to access the hasUnsavedChanges state
     const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
@@ -185,38 +186,64 @@ export const CodeTab = memo(forwardRef<CodeTabRef, CodeTabProps>(({ projectId, b
         }
     };
 
+    const saveFileWithHash = async (filePath: string, file: EditorFile): Promise<EditorFile> => {
+        if (!branchData) {
+            throw new Error('Branch data not found');
+        }
+
+        await branchData.codeEditor.writeFile(filePath, file.content || '');
+
+        if (file.type === 'text') {
+            const newHash = await hashContent(file.content);
+            return { ...file, originalHash: newHash };
+        }
+
+        return file;
+    };
+
     const handleSaveFile = async () => {
         if (!selectedFilePath || !activeEditorFile) return;
         try {
-            if (!branchData) {
-                throw new Error('Branch data not found');
-            }
-
-            await branchData.codeEditor.writeFile(selectedFilePath, activeEditorFile.content || '');
+            const updatedFile = await saveFileWithHash(selectedFilePath, activeEditorFile);
 
-            // Update originalHash to mark file as clean after successful save
-            if (activeEditorFile.type === 'text') {
-                const newHash = await hashContent(activeEditorFile.content);
-                const updatedFile = { ...activeEditorFile, originalHash: newHash };
-
-                // Update in opened files list
-                const updatedFiles = openedEditorFiles.map(file =>
-                    pathsEqual(file.path, selectedFilePath) ? updatedFile : file
-                );
-                setOpenedEditorFiles(updatedFiles);
-                setActiveEditorFile(updatedFile);
-            }
+            // Update in opened files list
+            const updatedFiles = openedEditorFiles.map(file =>
+                pathsEqual(file.path, selectedFilePath) ? updatedFile : file
+            );
+            setOpenedEditorFiles(updatedFiles);
+            setActiveEditorFile(updatedFile);
         } catch (error) {
             console.error('Failed to save file:', error);
             alert(`Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`);
         }
     };
 
+    const handleSaveAndCloseFiles = async () => {
+        try {
+            // Save all files in filesToClose
+            await Promise.all(filesToClose.map(async (filePath) => {
+                const fileToSave = openedEditorFiles.find(f => pathsEqual(f.path, filePath));
+                if (!fileToSave) return;
+
+                await saveFileWithHash(filePath, fileToSave);
+            }));
+
+            // Close the files (no need to update hashes since we're closing them)
+            filesToClose.forEach(filePath => closeFileInternal(filePath));
+            setFilesToClose([]);
+            setShowLocalUnsavedDialog(false);
+        } catch (error) {
+            console.error('Failed to save files:', error);
+            alert(`Failed to save: ${error instanceof Error ? error.message : 'Unknown error'}`);
+        }
+    };
+
     const closeLocalFile = useCallback((filePath: string) => {
         const fileToClose = openedEditorFiles.find(f => pathsEqual(f.path, filePath));
         if (fileToClose) {
             isDirty(fileToClose).then(dirty => {
                 if (dirty) {
+                    setFilesToClose([filePath]);
                     setShowLocalUnsavedDialog(true);
                     return;
                 }
@@ -238,6 +265,7 @@ export const CodeTab = memo(forwardRef<CodeTabRef, CodeTabProps>(({ projectId, b
             // Check if any dirty files remain
             const dirtyFiles = fileStatuses.filter(status => status.dirty);
             if (dirtyFiles.length > 0) {
+                setFilesToClose(dirtyFiles.map(status => status.file.path));
                 setShowLocalUnsavedDialog(true);
                 return;
             }
@@ -272,22 +300,27 @@ export const CodeTab = memo(forwardRef<CodeTabRef, CodeTabProps>(({ projectId, b
             editorViewsRef.current.delete(filePath);
         }
 
-        const updatedFiles = openedEditorFiles.filter(f => !pathsEqual(f.path, filePath));
-        setOpenedEditorFiles(updatedFiles);
+        setOpenedEditorFiles(prev => {
+            const updatedFiles = prev.filter(f => !pathsEqual(f.path, filePath));
 
-        if (activeEditorFile && pathsEqual(activeEditorFile.path, filePath)) {
-            const newActiveFile = updatedFiles.length > 0 ? updatedFiles[updatedFiles.length - 1] || null : null;
-            setActiveEditorFile(newActiveFile);
-        }
+            // Update active file if we're closing it
+            if (activeEditorFile && pathsEqual(activeEditorFile.path, filePath)) {
+                const newActiveFile = updatedFiles.length > 0 ? updatedFiles[updatedFiles.length - 1] || null : null;
+                setActiveEditorFile(newActiveFile);
+            }
+
+            return updatedFiles;
+        });
 
         // Clear selected file path if the closed file was selected
         if (selectedFilePath && pathsEqual(selectedFilePath, filePath)) {
             setSelectedFilePath(null);
         }
     };
 
-    const discardLocalFileChanges = (filePath: string) => {
-        closeFileInternal(filePath);
+    const discardLocalFileChanges = () => {
+        filesToClose.forEach(filePath => closeFileInternal(filePath));
+        setFilesToClose([]);
         setShowLocalUnsavedDialog(false);
     };
 
@@ -396,11 +429,14 @@ export const CodeTab = memo(forwardRef<CodeTabRef, CodeTabProps>(({ projectId, b
                     showUnsavedDialog={showLocalUnsavedDialog}
                     navigationTarget={navigationTarget}
                     onSaveFile={handleSaveFile}
+                    onSaveAndCloseFiles={handleSaveAndCloseFiles}
                     onUpdateFileContent={updateLocalFileContent}
                     onDiscardChanges={discardLocalFileChanges}
                     onCancelUnsaved={() => {
+                        setFilesToClose([]);
                         setShowLocalUnsavedDialog(false);
                     }}
+                    fileCountToClose={filesToClose.length}
                 />
             </div>
         </div>