Fix profile dialog

frontend/src/chat/dm.ts

@@ -9,6 +9,7 @@ import { request, websocket } from "../websocket";
 import type { FetchDMResponse, SendDMRequest, WebSocketMessage, User, DmEnvelope } from "../core/types";
 import type { Tabs } from "mdui/components/tabs";
 import { b64, ub64 } from "../utils/utils";
+import defaultAvatar from "../resources/images/default-avatar.png";
 
 export async function sendDm(recipientId: number, recipientPublicKeyB64: string, plaintext: string): Promise<void> {
 	const keys = getCurrentKeys();
@@ -101,7 +102,7 @@ async function loadUsers() {
 		
 		// Add avatar
 		const avatar = document.createElement("img");
-		avatar.src = u.profile_picture || "./src/resources/images/default-avatar.png";
+		avatar.src = u.profile_picture || defaultAvatar;
 		avatar.alt = u.username;
 		avatar.slot = "icon";
 		avatar.style.width = "40px";
@@ -111,7 +112,7 @@ async function loadUsers() {
 		
 		// Handle avatar load error
 		avatar.addEventListener("error", () => {
-			avatar.src = "./src/resources/images/default-avatar.png";
+			avatar.src = defaultAvatar;
 		});
 		
 		item.appendChild(avatar);

frontend/src/core/types.d.ts

@@ -223,4 +223,12 @@ export interface WebSocketError {
 export interface WebSocketCredentials {
     scheme: string;
     credentials: string;
+}
+
+// -----------
+// React types
+// -----------
+export interface DialogProps {
+    isOpen: boolean;
+    onOpenChange: (value: boolean) => void;
 }

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

@@ -2,6 +2,8 @@ import { PRODUCT_NAME } from "../../../core/config";
 import { useDialog } from "../../contexts/DialogContext";
 import { useChat } from "../../hooks/useChat";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
+import { useState } from "react";
+import { ProfileDialog } from "../profile/ProfileDialog";
 
 function BottomAppBar() {
     const { openSettings } = useDialog();
@@ -70,20 +72,17 @@ function ChatTabs() {
 
 
 function ChatHeader() {
-    const { openProfile } = useDialog();
-
-    const handleProfileClick = () => {
-        openProfile();
-    };
+    const [isProfileOpen, setProfileOpen] = useState(false);
 
     return (
         <header className="chat-header-left">
             <div className="product-name">{PRODUCT_NAME}</div>
             <div className="profile">
-                <a href="#" id="profile-open" onClick={handleProfileClick}>
+                <a href="#" id="profile-open" onClick={() => setProfileOpen(true)}>
                     <img src={defaultAvatar} alt="" id="preview1" />
                 </a>
             </div>
+            <ProfileDialog isOpen={isProfileOpen} onOpenChange={setProfileOpen} />
         </header>
     );
 }

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

@@ -3,7 +3,7 @@ export function UserProfileDialog() {
         <mdui-dialog id="user-profile-dialog" close-on-overlay-click close-on-esc>
             <div className="content">
                 <div className="profile-picture-section">
-                    <img className="profile-picture" src="" alt="Profile Picture" />
+                    <img className="profile-picture" alt="Profile Picture" />
                 </div>
                 <div className="profile-info">
                     <div className="username-section">

frontend/src/ui/components/profile/ProfileDialog.tsx

@@ -1,21 +1,21 @@
-import { useState } from "react";
-import { useDialog } from "../../contexts/DialogContext";
+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";
 
-export function ProfileDialog() {
+export function ProfileDialog({ isOpen, onOpenChange }: DialogProps) {
     const [username, setUsername] = useState("user123");
     const [description, setDescription] = useState("");
-    const { isProfileOpen, closeProfile } = useDialog();
 
     const handleSubmit = (e: React.FormEvent) => {
         e.preventDefault();
         // TODO: Implement profile update logic
         console.log("Profile update:", { username, description });
-        closeProfile();
+        onOpenChange(false);
     };
 
     return (
-        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc open={isProfileOpen}>
+        <mdui-dialog id="profile-dialog" close-on-overlay-click close-on-esc open={isOpen}>
             <div className="content">
                 <div className="header-top">
                     <div className="profile-picture-container">
@@ -28,7 +28,7 @@ export function ProfileDialog() {
                         label="Имя пользователя" 
                         variant="outlined" 
                         value={username}
-                        onChange={(e: any) => setUsername(e.target.value)}
+                        onChange={(e: FormEvent<HTMLElement & TextField>) => setUsername((e.target as TextField).value)}
                         autocomplete="username">
                     </mdui-text-field>
                 </div>
@@ -39,13 +39,13 @@ export function ProfileDialog() {
                         label="О себе" 
                         variant="outlined" 
                         value={description}
-                        onChange={(e: any) => setDescription(e.target.value)}
+                        onChange={(e: FormEvent<HTMLElement & TextField>) => setDescription((e.target as TextField).value)}
                         placeholder="Расскажите о себе..."
                         autocomplete="none">
                     </mdui-text-field>
                     <div className="dialog-actions">
                         <mdui-button type="submit" id="profile-submit">Сохранить изменения</mdui-button>
-                        <mdui-button id="profile-dialog-close" variant="outlined" onClick={closeProfile}>Закрыть</mdui-button>
+                        <mdui-button id="profile-dialog-close" variant="outlined" onClick={() => onOpenChange(false)}>Закрыть</mdui-button>
                     </div>
                 </form>
             </div>

frontend/src/ui/screen/ChatScreen.tsx

@@ -12,7 +12,6 @@ export default function ChatScreen() {
         <>
             <ChatInterface />
             
-            <ProfileDialog />
             <CropperDialog />
             <SettingsDialog />
             <MessageContextMenu />