From 55861cf3cd65ee942bf799e54c8ba6a675e24da0 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Mon, 20 Apr 2026 00:36:32 -0700
Subject: [PATCH] feat: add closing animation to all modal dialogs and fix
 drag-dismiss bug

---
 src/components/common/DialogProvider.css   | 25 ++++++++++
 src/components/common/DialogProvider.tsx   | 18 +++++--
 src/components/common/FileImportModal.css  | 24 ++++++++++
 src/components/common/FileImportModal.tsx  | 56 ++++++++++++++--------
 src/components/common/OpenProjectModal.css | 24 ++++++++++
 src/components/common/OpenProjectModal.tsx | 42 +++++++++++-----
 6 files changed, 154 insertions(+), 35 deletions(-)

diff --git a/src/components/common/DialogProvider.css b/src/components/common/DialogProvider.css
index 0d7202e..4fba3e8 100644
--- a/src/components/common/DialogProvider.css
+++ b/src/components/common/DialogProvider.css
@@ -35,6 +35,31 @@
   }
 }
 
+@keyframes dialogFadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+}
+
+@keyframes overlayFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.dialog-overlay-closing {
+  animation: overlayFadeOut 0.15s ease-in forwards;
+}
+
+.dialog-modal-closing {
+  animation: dialogFadeOut 0.15s ease-in forwards;
+}
+
 .dialog-header {
   display: flex;
   justify-content: space-between;
diff --git a/src/components/common/DialogProvider.tsx b/src/components/common/DialogProvider.tsx
index 15beb32..5e18460 100644
--- a/src/components/common/DialogProvider.tsx
+++ b/src/components/common/DialogProvider.tsx
@@ -66,11 +66,13 @@ interface DialogInfo {
 
 const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [dialog, setDialog] = useState<DialogInfo | null>(null);
+  const [isClosing, setIsClosing] = useState(false);
   const [inputValue, setInputValue] = useState('');
   const [timeSigNumerator, setTimeSigNumerator] = useState('');
   const [timeSigDenominator, setTimeSigDenominator] = useState('');
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const resolveRef = useRef<((value: any) => void) | null>(null);
+  const pendingValueRef = useRef<unknown>(undefined);
 
   const openAlert = useCallback((message: string): Promise<void> => {
     return new Promise<void>((resolve) => {
@@ -104,15 +106,23 @@ const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ children }) =
   }, []);
 
   const close = useCallback((value: unknown) => {
+    pendingValueRef.current = value;
+    setIsClosing(true);
+  }, []);
+
+  const handleAnimationEnd = useCallback((e: React.AnimationEvent) => {
+    if (e.target !== e.currentTarget) return;
+    if (!isClosing) return;
+    setIsClosing(false);
     setDialog(null);
     setInputValue('');
     setTimeSigNumerator('');
     setTimeSigDenominator('');
     if (resolveRef.current) {
-      resolveRef.current(value);
+      resolveRef.current(pendingValueRef.current);
       resolveRef.current = null;
     }
-  }, []);
+  }, [isClosing]);
 
   const mouseDownOnOverlay = useRef(false);
 
@@ -161,8 +171,8 @@ const DialogProvider: React.FC<{ children: React.ReactNode }> = ({ children }) =
   return (
     <>
       {children}
-      <div className="dialog-overlay" onMouseDown={handleOverlayMouseDown} onClick={handleOverlayClick}>
-        <div className="dialog-modal">
+      <div className={`dialog-overlay${isClosing ? ' dialog-overlay-closing' : ''}`} onMouseDown={handleOverlayMouseDown} onClick={handleOverlayClick} onAnimationEnd={handleAnimationEnd}>
+        <div className={`dialog-modal${isClosing ? ' dialog-modal-closing' : ''}`}>
           <div className="dialog-header">
             <h3 className="dialog-title">{title}</h3>
             <button
diff --git a/src/components/common/FileImportModal.css b/src/components/common/FileImportModal.css
index 5ce3f6f..6000beb 100644
--- a/src/components/common/FileImportModal.css
+++ b/src/components/common/FileImportModal.css
@@ -36,6 +36,30 @@
   }
 }
 
+@keyframes fileImportFadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+}
+
+@keyframes fileImportOverlayFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.file-import-overlay-closing {
+  animation: fileImportOverlayFadeOut 0.15s ease-in forwards;
+}
+
+.file-import-modal-closing {
+  animation: fileImportFadeOut 0.15s ease-in forwards;
+}
+
 .file-import-header {
   display: flex;
   justify-content: space-between;
diff --git a/src/components/common/FileImportModal.tsx b/src/components/common/FileImportModal.tsx
index 7f9a134..c5fddf3 100644
--- a/src/components/common/FileImportModal.tsx
+++ b/src/components/common/FileImportModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import './FileImportModal.css';
 import { FaTimes } from 'react-icons/fa';
 import { showAlert } from './DialogProvider';
@@ -21,6 +21,17 @@ const FileImportModal: React.FC<FileImportModalProps> = ({
   description = 'Drag and drop your project file here'
 }) => {
   const [isDragOver, setIsDragOver] = useState(false);
+  const [isClosing, setIsClosing] = useState(false);
+  const mouseDownOnOverlay = useRef(false);
+
+  const startClose = useCallback(() => setIsClosing(true), []);
+
+  const handleAnimationEnd = useCallback((e: React.AnimationEvent) => {
+    if (e.target !== e.currentTarget) return;
+    if (!isClosing) return;
+    setIsClosing(false);
+    onClose();
+  }, [isClosing, onClose]);
 
   const handleDragEnter = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -31,7 +42,6 @@ const FileImportModal: React.FC<FileImportModalProps> = ({
   const handleDragLeave = useCallback((e: React.DragEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    // Only set drag over to false if we're leaving the drop zone entirely
     if (e.currentTarget === e.target) {
       setIsDragOver(false);
     }
@@ -50,51 +60,57 @@ const FileImportModal: React.FC<FileImportModalProps> = ({
     const files = Array.from(e.dataTransfer.files);
     if (files.length > 0) {
       const file = files[0];
-      
-      // Check if file type is accepted
       const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
       if (acceptedTypes.includes(fileExtension)) {
         onFileImport(file);
-        onClose();
+        startClose();
       } else {
         await showAlert(`Invalid file type. Please select a file with one of these extensions: ${acceptedTypes.join(', ')}`);
       }
     }
-  }, [acceptedTypes, onFileImport, onClose]);
+  }, [acceptedTypes, onFileImport, startClose]);
 
   const handleFileSelect = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
     const files = e.target.files;
     if (files && files.length > 0) {
       onFileImport(files[0]);
-      onClose();
+      startClose();
     }
-  }, [onFileImport, onClose]);
+  }, [onFileImport, startClose]);
+
+  const handleOverlayMouseDown = useCallback((e: React.MouseEvent) => {
+    mouseDownOnOverlay.current = e.target === e.currentTarget;
+  }, []);
 
   const handleOverlayClick = useCallback((e: React.MouseEvent) => {
-    // Only close if clicking on the overlay itself, not the modal content
-    if (e.target === e.currentTarget) {
-      onClose();
+    if (e.target === e.currentTarget && mouseDownOnOverlay.current) {
+      startClose();
     }
-  }, [onClose]);
+  }, [startClose]);
 
-  if (!isVisible) {
+  if (!isVisible && !isClosing) {
     return null;
   }
 
   return (
-    <div className="file-import-overlay" onClick={handleOverlayClick}>
-      <div className="file-import-modal">
+    <div
+      className={`file-import-overlay${isClosing ? ' file-import-overlay-closing' : ''}`}
+      onMouseDown={handleOverlayMouseDown}
+      onClick={handleOverlayClick}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <div className={`file-import-modal${isClosing ? ' file-import-modal-closing' : ''}`}>
         <div className="file-import-header">
           <h3 className="file-import-title">{title}</h3>
           <button
             className="file-import-close-btn"
-            onClick={onClose}
+            onClick={startClose}
             aria-label="Close import modal"
           >
             <FaTimes />
           </button>
         </div>
-        
+
         <div
           className={`file-import-drop-zone ${isDragOver ? 'drag-over' : ''}`}
           onDragEnter={handleDragEnter}
@@ -108,11 +124,11 @@ const FileImportModal: React.FC<FileImportModalProps> = ({
             <p className="file-import-formats">
               Supported formats: {acceptedTypes.join(', ')}
             </p>
-            
+
             <div className="file-import-divider">
               <span>or</span>
             </div>
-            
+
             <label className="file-import-browse-btn">
               Browse Files
               <input
@@ -129,4 +145,4 @@ const FileImportModal: React.FC<FileImportModalProps> = ({
   );
 };
 
-export default FileImportModal;
\ No newline at end of file
+export default FileImportModal;
diff --git a/src/components/common/OpenProjectModal.css b/src/components/common/OpenProjectModal.css
index 9412b95..a6cb7a5 100644
--- a/src/components/common/OpenProjectModal.css
+++ b/src/components/common/OpenProjectModal.css
@@ -39,6 +39,30 @@
   }
 }
 
+@keyframes openProjectFadeOut {
+  from {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.95) translateY(-10px);
+  }
+}
+
+@keyframes openProjectOverlayFadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+.open-project-overlay-closing {
+  animation: openProjectOverlayFadeOut 0.15s ease-in forwards;
+}
+
+.open-project-panel-closing {
+  animation: openProjectFadeOut 0.15s ease-in forwards;
+}
+
 /* Header */
 .open-project-header {
   display: flex;
diff --git a/src/components/common/OpenProjectModal.tsx b/src/components/common/OpenProjectModal.tsx
index 5aaade1..099103a 100644
--- a/src/components/common/OpenProjectModal.tsx
+++ b/src/components/common/OpenProjectModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { FaTimes, FaSortUp, FaSortDown, FaCopy, FaTrash, FaUndo } from 'react-icons/fa';
 import { KGProjectStorage, type ProjectMeta } from '../../core/io/KGProjectStorage';
 import { isValidProjectName } from '../../util/projectNameUtil';
@@ -48,12 +48,23 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
   const [projects, setProjects] = useState<ProjectMeta[]>([]);
   const [isLoading, setIsLoading] = useState(true);
   const [filter, setFilter] = useState('');
+  const [isClosing, setIsClosing] = useState(false);
+  const mouseDownOnOverlay = useRef(false);
 
   const [sortField, setSortField] = useState<SortField>('updatedAt');
   const [sortDirection, setSortDirection] = useState<SortDirection>('desc');
 
   const [viewMode, setViewMode] = useState<ViewMode>('projects');
 
+  const startClose = useCallback(() => setIsClosing(true), []);
+
+  const handleAnimationEnd = useCallback((e: React.AnimationEvent) => {
+    if (e.target !== e.currentTarget) return;
+    if (!isClosing) return;
+    setIsClosing(false);
+    onClose();
+  }, [isClosing, onClose]);
+
   const fetchProjects = useCallback(async (mode: ViewMode) => {
     setIsLoading(true);
     try {
@@ -78,11 +89,11 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
 
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
+      if (e.key === 'Escape') startClose();
     };
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [onClose]);
+  }, [startClose]);
 
   const handleSortClick = useCallback((field: SortField) => {
     if (field === sortField) {
@@ -111,7 +122,7 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
 
   const handleOpen = async (projectName: string) => {
     await onOpenProject(projectName);
-    onClose();
+    startClose();
   };
 
   const handleDuplicate = async (e: React.MouseEvent, projectName: string) => {
@@ -130,7 +141,7 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
       const finalName = await storage.resolveUniqueName(trimmed);
       await storage.duplicate(projectName, finalName);
       await onOpenProject(finalName);
-      onClose();
+      startClose();
     } catch (error) {
       console.error('Error duplicating project:', error);
       await showAlert(`Failed to duplicate project: ${error}`);
@@ -187,11 +198,15 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
     setFilter('');
   };
 
+  const handleOverlayMouseDown = useCallback((e: React.MouseEvent) => {
+    mouseDownOnOverlay.current = e.target === e.currentTarget;
+  }, []);
+
   const handleOverlayClick = useCallback((e: React.MouseEvent) => {
-    if (e.target === e.currentTarget) {
-      onClose();
+    if (e.target === e.currentTarget && mouseDownOnOverlay.current) {
+      startClose();
     }
-  }, [onClose]);
+  }, [startClose]);
 
   const SortIcon: React.FC<{ field: SortField }> = ({ field }) => {
     if (sortField !== field) return null;
@@ -199,11 +214,16 @@ const OpenProjectModal: React.FC<OpenProjectModalProps> = ({ onClose, onOpenProj
   };
 
   return (
-    <div className="open-project-overlay" onClick={handleOverlayClick}>
-      <div className="open-project-panel">
+    <div
+      className={`open-project-overlay${isClosing ? ' open-project-overlay-closing' : ''}`}
+      onMouseDown={handleOverlayMouseDown}
+      onClick={handleOverlayClick}
+      onAnimationEnd={handleAnimationEnd}
+    >
+      <div className={`open-project-panel${isClosing ? ' open-project-panel-closing' : ''}`}>
         <div className="open-project-header">
           <h3 className="open-project-title">Open Project</h3>
-          <button className="open-project-close-btn" onClick={onClose} aria-label="Close">
+          <button className="open-project-close-btn" onClick={startClose} aria-label="Close">
             <FaTimes />
           </button>
         </div>