Implement real-time online status and typing indicator

frontend/src/pages/chat/ui/ProfileDialog.tsx

@@ -6,6 +6,8 @@ import defaultAvatar from "@/images/default-avatar.png";
 import { confirm } from "mdui/functions/confirm";
 import { updateProfile, uploadProfilePicture, fetchUserProfile } from "@/core/api/profileApi";
 import { RichTextArea } from "@/core/components/RichTextArea";
+import { onlineStatusManager } from "@/core/onlineStatusManager";
+import { OnlineStatus } from "./right/OnlineStatus";
 
 export function ProfileDialog() {
     const { chat, user, closeProfileDialog } = useAppState();
@@ -100,6 +102,21 @@ export function ProfileDialog() {
         }
     }, [isOpen]);
 
+    // Subscribe to user's online status when dialog opens
+    useEffect(() => {
+        if (isOpen && currentData?.userId && !currentData.isOwnProfile) {
+            // Subscribe to the user's status
+            onlineStatusManager.subscribe(currentData.userId);
+
+            // Cleanup function to unsubscribe when dialog closes
+            return () => {
+                if (currentData.userId) {
+                    onlineStatusManager.unsubscribe(currentData.userId);
+                }
+            };
+        }
+    }, [isOpen, currentData?.userId, currentData?.isOwnProfile]);
+
     const hasChanges = useMemo(() => {
         if (!originalData || !currentData) return false;
         
@@ -279,12 +296,9 @@ export function ProfileDialog() {
                     )}
 
                     {/* Online Status */}
-                    {currentData.online !== undefined && (
+                    {currentData.userId && !currentData.isOwnProfile && (
                         <div className="online-status-section">
-                            <span className={`online-indicator ${currentData.online ? "" : "offline"}`} />
-                            <span className="status-text">
-                                {currentData.online ? "Онлайн" : "Оффлайн"}
-                            </span>
+                            <OnlineStatus userId={currentData.userId} />
                         </div>
                     )}