Fix dialog click closing the context menu

frontend/src/ui/components/chat/ChatMessages.tsx

@@ -6,7 +6,7 @@ import type { UserProfile } from "../../../core/types";
 import { UserProfileDialog } from "./UserProfileDialog";
 import { MessageContextMenu, type ContextMenuState } from "./MessageContextMenu";
 import { fetchUserProfile } from "../../api/profileApi";
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { delay } from "../../../utils/utils";
 import { request } from "../../../websocket";
 
@@ -23,45 +23,6 @@ export function ChatMessages() {
         message: null,
         position: { x: 0, y: 0 }
     });
-    const [isContextMenuClosing, setIsContextMenuClosing] = useState(false);
-
-    // Effect to handle clicks outside the context menu
-    useEffect(() => {
-        const handleClickOutside = (event: MouseEvent) => {
-            if (contextMenu.isOpen && !isContextMenuClosing) {
-                // Check if the click is on a context menu element
-                const target = event.target as Element;
-                if (!target.closest('.context-menu')) {
-                    handleContextMenuClose();
-                }
-            }
-        };
-
-        const handleKeyDown = (event: KeyboardEvent) => {
-            if (event.key === 'Escape' && contextMenu.isOpen && !isContextMenuClosing) {
-                handleContextMenuClose();
-            }
-        };
-
-        const handleWindowBlur = () => {
-            // Close context menu when browser window loses focus
-            if (contextMenu.isOpen && !isContextMenuClosing) {
-                handleContextMenuClose();
-            }
-        };
-
-        // Add event listeners
-        document.addEventListener('mousedown', handleClickOutside);
-        document.addEventListener('keydown', handleKeyDown);
-        window.addEventListener('blur', handleWindowBlur);
-
-        // Cleanup
-        return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
-            document.removeEventListener('keydown', handleKeyDown);
-            window.removeEventListener('blur', handleWindowBlur);
-        };
-    }, [contextMenu.isOpen, isContextMenuClosing]);
 
     const handleProfileClick = async (username: string) => {
         if (!user.authToken) return;
@@ -83,7 +44,6 @@ export function ChatMessages() {
     const handleContextMenu = (e: React.MouseEvent, message: MessageType) => {
         e.preventDefault();
         console.log("Context menu triggered for message:", message.id, "at position:", e.clientX, e.clientY);
-        setIsContextMenuClosing(false);
         setContextMenu({
             isOpen: true,
             message,
@@ -91,17 +51,11 @@ export function ChatMessages() {
         });
     };
 
-    const handleContextMenuClose = () => {
-        setIsContextMenuClosing(true);
-        // Wait for animation to complete before removing from DOM
-        setTimeout(() => {
-            setContextMenu({
-                isOpen: false,
-                message: null,
-                position: { x: 0, y: 0 }
-            });
-            setIsContextMenuClosing(false);
-        }, 200); // Match the animation duration from _animations.scss
+    const handleContextMenuOpenChange = (isOpen: boolean) => {
+        setContextMenu(prev => ({
+            ...prev,
+            isOpen
+        }));
     };
 
     const handleEdit = async (message: MessageType) => {
@@ -191,16 +145,16 @@ export function ChatMessages() {
             />
             
             {/* Context Menu */}
-            {contextMenu.isOpen && contextMenu.message && (
+            {contextMenu.message && (
                 <MessageContextMenu
                     message={contextMenu.message}
                     isAuthor={contextMenu.message.username === user.currentUser?.username}
                     onEdit={handleEdit}
                     onReply={handleReply}
                     onDelete={handleDelete}
-                    onClose={handleContextMenuClose}
                     position={contextMenu.position}
-                    isClosing={isContextMenuClosing}
+                    isOpen={contextMenu.isOpen}
+                    onOpenChange={handleContextMenuOpenChange}
                 />
             )}
         </>