Implement better call UI

frontend/src/pages/chat/ui/left/ChatHeader.tsx

@@ -3,35 +3,29 @@ import useProfile from "@/pages/chat/hooks/useProfile";
 import defaultAvatar from "@/images/default-avatar.png";
 import { useState } from "react";
 import { ProfileDialog } from "./profile/ProfileDialog";
+import { MinimizedCallBar } from "@/pages/chat/ui/right/calls/MinimizedCallBar";
 
 export function ChatHeader() {
     const { profileData } = useProfile();
     const [isProfileOpen, setIsProfileOpen] = useState(false);
 
-    const handleProfileClick = () => {
-        setIsProfileOpen(true);
-    };
-
-    const profilePictureUrl = profileData?.profile_picture || defaultAvatar;
+    const [profilePictureUrl, setProfilePictureUrl] = useState(profileData?.profile_picture || defaultAvatar);
 
     return (
         <>
             <header className="chat-header-left">
                 <div className="product-name">{PRODUCT_NAME}</div>
                 <div className="profile">
-                    <a href="#" id="profile-open" onClick={handleProfileClick}>
-                        <img 
+                    <a href="#" id="profile-open" onClick={() => setIsProfileOpen(true)}>
+                        <img
                             src={profilePictureUrl} 
-                            alt="" 
+                            alt=""
                             id="preview1"
-                            onError={(e) => {
-                                const target = e.target as HTMLImageElement;
-                                target.src = defaultAvatar;
-                            }}
-                        />
+                            onError={() => setProfilePictureUrl(defaultAvatar)} />
                     </a>
                 </div>
             </header>
+            <MinimizedCallBar />
             <ProfileDialog isOpen={isProfileOpen} onOpenChange={setIsProfileOpen} />
         </>
     );