From 3592262838a1cb600ae107c754ce77e3d6991386 Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Sat, 30 Aug 2025 20:28:26 +0300
Subject: [PATCH] Fix dialogs

---
 frontend/src/ui/components/Dialog.tsx         | 42 +++++++++++++++++++
 .../ui/components/chat/UserProfileDialog.tsx  |  9 ++--
 .../ui/components/profile/ProfileDialog.tsx   |  5 ++-
 frontend/src/ui/screen/ChatScreen.tsx         |  1 -
 4 files changed, 51 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/ui/components/Dialog.tsx

diff --git a/frontend/src/ui/components/Dialog.tsx b/frontend/src/ui/components/Dialog.tsx
new file mode 100644
index 0000000..f7e1352
--- /dev/null
+++ b/frontend/src/ui/components/Dialog.tsx
@@ -0,0 +1,42 @@
+import type { Dialog as MduiDialog } from "mdui/components/dialog";
+import React, { useEffect, useRef } from "react"
+
+export interface BaseDialogProps {
+    onOpenChange: (value: boolean) => void;
+}
+
+export type FullDialogProps = React.ComponentPropsWithoutRef<"mdui-dialog"> & BaseDialogProps;
+
+export function MaterialDialog(props: FullDialogProps) {
+    const dialogRef = useRef<MduiDialog>(null);
+
+    useEffect(() => {
+        const dialog = dialogRef.current;
+        if (!dialog) return;
+
+        const observer = new MutationObserver((mutations) => {
+            mutations.forEach((mutation) => {
+                if (mutation.type === "attributes" && mutation.attributeName === "open") {
+                    const isOpen = dialog.hasAttribute("open");
+                    console.log("isOpen:", isOpen);
+                    if (isOpen !== props.open) {
+                        props.onOpenChange(isOpen);
+                    }
+                }
+            });
+        });
+
+        // Start observing the dialog element for attribute changes
+        observer.observe(dialog, {
+            attributes: true,
+            attributeFilter: ["open"]
+        });
+
+        // Cleanup observer
+        return () => {
+            observer.disconnect();
+        };
+    }, [dialogRef.current, props.open, props.onOpenChange]);
+
+    return <mdui-dialog {...props} ref={dialogRef} />;
+}
\ No newline at end of file
diff --git a/frontend/src/ui/components/chat/UserProfileDialog.tsx b/frontend/src/ui/components/chat/UserProfileDialog.tsx
index d484189..70291ba 100644
--- a/frontend/src/ui/components/chat/UserProfileDialog.tsx
+++ b/frontend/src/ui/components/chat/UserProfileDialog.tsx
@@ -1,6 +1,9 @@
-export function UserProfileDialog() {
+import type { DialogProps } from "../../../core/types";
+import { MaterialDialog } from "../Dialog";
+
+export function UserProfileDialog({ isOpen, onOpenChange }: DialogProps) {
     return (
-        <mdui-dialog id="user-profile-dialog" close-on-overlay-click close-on-esc>
+        <MaterialDialog open={isOpen} onOpenChange={onOpenChange} close-on-overlay-click close-on-esc>
             <div className="content">
                 <div className="profile-picture-section">
                     <img className="profile-picture" alt="Profile Picture" />
@@ -32,6 +35,6 @@ export function UserProfileDialog() {
                     </div>
                 </div>
             </div>
-        </mdui-dialog>
+        </MaterialDialog>
     );
 }
diff --git a/frontend/src/ui/components/profile/ProfileDialog.tsx b/frontend/src/ui/components/profile/ProfileDialog.tsx
index c3dba58..53e8f86 100644
--- a/frontend/src/ui/components/profile/ProfileDialog.tsx
+++ b/frontend/src/ui/components/profile/ProfileDialog.tsx
@@ -2,6 +2,7 @@ import { useState, type FormEvent } from "react";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 import type { TextField } from "mdui/components/text-field";
 import type { DialogProps } from "../../../core/types";
+import { MaterialDialog } from "../Dialog";
 
 export function ProfileDialog({ isOpen, onOpenChange }: DialogProps) {
     const [username, setUsername] = useState("user123");
@@ -15,7 +16,7 @@ export function ProfileDialog({ isOpen, onOpenChange }: DialogProps) {
     };
 
     return (
-        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc open={isOpen}>
+        <MaterialDialog id="profile-dialog" close-on-overlay-click close-on-esc open={isOpen} onOpenChange={onOpenChange}>
             <div className="content">
                 <div className="header-top">
                     <div className="profile-picture-container">
@@ -49,6 +50,6 @@ export function ProfileDialog({ isOpen, onOpenChange }: DialogProps) {
                     </div>
                 </form>
             </div>
-        </mdui-dialog>
+        </MaterialDialog>
     );
 }
diff --git a/frontend/src/ui/screen/ChatScreen.tsx b/frontend/src/ui/screen/ChatScreen.tsx
index 5bb6432..c25baa7 100644
--- a/frontend/src/ui/screen/ChatScreen.tsx
+++ b/frontend/src/ui/screen/ChatScreen.tsx
@@ -17,7 +17,6 @@ export default function ChatScreen() {
             <MessageContextMenu />
             <EditMessageDialog />
             <ReplyMessageDialog />
-            <UserProfileDialog />
         </>
     );
 }
\ No newline at end of file