Remove the DialogContext

frontend/src/ui/App.tsx

@@ -3,7 +3,6 @@ import ChatScreen from "./screen/ChatScreen";
 import LoginScreen from "./screen/LoginScreen";
 import RegisterScreen from "./screen/RegisterScreen";
 import { useAppState } from "./state";
-import { DialogProvider } from "./contexts/DialogContext";
 import { useEffect } from "react";
 
 export default function App() {
@@ -32,11 +31,11 @@ export default function App() {
     }
 
     return (
-        <DialogProvider>
+        <>
             <ElectronTitleBar />
             <div id="main-wrapper">
                 {page}
             </div>
-        </DialogProvider>
+        </>
     )
 }

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

@@ -1,19 +1,21 @@
 import { PRODUCT_NAME } from "../../../core/config";
-import { useDialog } from "../../contexts/DialogContext";
 import { useProfile } from "../../hooks/useProfile";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
+import { useState } from "react";
+import { ProfileDialog } from "../profile/ProfileDialog";
 
 export function ChatHeader() {
-    const { openProfile } = useDialog();
     const { profileData } = useProfile();
+    const [isProfileOpen, setIsProfileOpen] = useState(false);
 
     const handleProfileClick = () => {
-        openProfile();
+        setIsProfileOpen(true);
     };
 
     const profilePictureUrl = profileData?.profile_picture || defaultAvatar;
 
     return (
+        <>
             <header className="chat-header-left">
                 <div className="product-name">{PRODUCT_NAME}</div>
                 <div className="profile">
@@ -30,5 +32,7 @@ export function ChatHeader() {
                     </a>
                 </div>
             </header>
+            <ProfileDialog isOpen={isProfileOpen} onOpenChange={setIsProfileOpen} />
+        </>
     );
 }

frontend/src/ui/contexts/DialogContext.tsx

@@ -1,44 +0,0 @@
-import { createContext, useContext, useState } from "react";
-import type { ReactNode } from "react";
-
-interface DialogContextType {
-    isProfileOpen: boolean;
-    isSettingsOpen: boolean;
-    openProfile: () => void;
-    closeProfile: () => void;
-    openSettings: () => void;
-    closeSettings: () => void;
-}
-
-const DialogContext = createContext<DialogContextType | undefined>(undefined);
-
-export function DialogProvider({ children }: { children: ReactNode }) {
-    const [isProfileOpen, setIsProfileOpen] = useState(false);
-    const [isSettingsOpen, setIsSettingsOpen] = useState(false);
-
-    const openProfile = () => setIsProfileOpen(true);
-    const closeProfile = () => setIsProfileOpen(false);
-    const openSettings = () => setIsSettingsOpen(true);
-    const closeSettings = () => setIsSettingsOpen(false);
-
-    return (
-        <DialogContext.Provider value={{
-            isProfileOpen,
-            isSettingsOpen,
-            openProfile,
-            closeProfile,
-            openSettings,
-            closeSettings
-        }}>
-            {children}
-        </DialogContext.Provider>
-    );
-}
-
-export function useDialog() {
-    const context = useContext(DialogContext);
-    if (context === undefined) {
-        throw new Error("useDialog must be used within a DialogProvider");
-    }
-    return context;
-}