Fix dialogs

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} />;
+}

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>
     );
 }

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>
     );
 }