Clean up the code

frontend/src/ui/api/profileApi.ts

@@ -1,128 +0,0 @@
-import { getAuthHeaders } from "../../auth/api";
-import { API_BASE_URL } from "../../core/config";
-import type { UserProfile } from "../../core/types";
-
-export interface ProfileData {
-    profile_picture?: string;
-    nickname?: string;
-    description?: string;
-}
-
-export interface UploadResponse {
-    profile_picture_url: string;
-}
-
-/**
- * Loads user profile data from the server
- */
-export async function loadProfile(token: string): Promise<ProfileData | null> {
-    try {
-        const response = await fetch(`${API_BASE_URL}/user/profile`, {
-            headers: getAuthHeaders(token)
-        });
-
-        if (response.ok) {
-            const data = await response.json();
-            // Map backend fields to frontend fields
-            return {
-                profile_picture: data.profile_picture,
-                nickname: data.username,
-                description: data.bio
-            };
-        }
-        
-        return null;
-    } catch (error) {
-        console.error('Error loading profile:', error);
-        return null;
-    }
-}
-
-/**
- * Uploads a profile picture to the server
- */
-export async function uploadProfilePicture(token: string, file: Blob): Promise<UploadResponse | null> {
-    try {
-        const formData = new FormData();
-        formData.append('profile_picture', file, 'profile_picture.jpg');
-
-        const response = await fetch(`${API_BASE_URL}/upload-profile-picture`, {
-            method: 'POST',
-            body: formData,
-            headers: getAuthHeaders(token, false)
-        });
-
-        if (response.ok) {
-            return await response.json();
-        }
-        return null;
-    } catch (error) {
-        console.error('Upload error:', error);
-        return null;
-    }
-}
-
-/**
- * Updates user profile information
- */
-export async function updateProfile(token: string, data: Partial<ProfileData>): Promise<boolean> {
-    try {
-        // Map frontend fields to backend fields
-        const backendData = {
-            nickname: data.nickname,
-            description: data.description
-        };
-
-        const response = await fetch(`${API_BASE_URL}/user/profile`, {
-            method: 'PUT',
-            headers: {
-                ...getAuthHeaders(token),
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(backendData)
-        });
-
-        return response.ok;
-    } catch (error) {
-        console.error('Error updating profile:', error);
-        return false;
-    }
-}
-
-/**
- * Updates user bio
- */
-export async function updateBio(token: string, bio: string): Promise<boolean> {
-    try {
-        const response = await fetch(`${API_BASE_URL}/user/bio`, {
-            method: 'PUT',
-            headers: getAuthHeaders(token),
-            body: JSON.stringify({ bio })
-        });
-
-        return response.ok;
-    } catch (error) {
-        console.error('Error updating bio:', error);
-        return false;
-    }
-}
-
-/**
- * Fetches user profile data by username
- */
-export async function fetchUserProfile(token: string, username: string): Promise<UserProfile | null> {
-    try {
-        const response = await fetch(`${API_BASE_URL}/user/${username}`, {
-            headers: getAuthHeaders(token)
-        });
-
-        if (response.ok) {
-            return await response.json();
-        }
-        
-        return null;
-    } catch (error) {
-        console.error('Error fetching user profile:', error);
-        return null;
-    }
-}

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

@@ -5,10 +5,10 @@ import type { Message as MessageType } from "../../../core/types";
 import type { UserProfile } from "../../../core/types";
 import { UserProfileDialog } from "./UserProfileDialog";
 import { MessageContextMenu, type ContextMenuState } from "./MessageContextMenu";
-import { fetchUserProfile } from "../../api/profileApi";
+import { fetchUserProfile } from "../../../api/profileApi";
 import { useState, type ReactNode } from "react";
 import { delay } from "../../../utils/utils";
-import { request } from "../../../websocket";
+import { request } from "../../../core/websocket";
 
 interface ChatMessagesProps {
     messages?: MessageType[];

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

@@ -1,6 +1,6 @@
 import { useState, useEffect, useRef } from "react";
 import { useAppState } from "../../state";
-import { useDM } from "../../../hooks/useDM";
+import { useDM } from "../../hooks/useDM";
 import { ChatMessages } from "./ChatMessages";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 

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

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { useDM } from "../../../hooks/useDM";
+import { useDM } from "../../hooks/useDM";
 import { useAppState } from "../../state";
 import { fetchUserPublicKey } from "../../../api/dmApi";
 import defaultAvatar from "../../../resources/images/default-avatar.png";

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

@@ -2,7 +2,7 @@ import { useState, useEffect, useRef } from "react";
 import { MessagePanel, type MessagePanelState } from "../../panels/MessagePanel";
 import { ChatMessages } from "./ChatMessages";
 import { ChatInputWrapper } from "./ChatInputWrapper";
-import { setGlobalMessageHandler } from "../../../websocket";
+import { setGlobalMessageHandler } from "../../../core/websocket";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 
 interface MessagePanelRendererProps {

frontend/src/ui/hooks/useChat.ts

@@ -1,6 +1,6 @@
 import { useEffect, useCallback, useRef } from "react";
 import { useAppState } from "../state";
-import { request } from "../../websocket";
+import { request } from "../../core/websocket";
 import { API_BASE_URL } from "../../core/config";
 import type { Message } from "../../core/types";
 import { getAuthHeaders } from "../../auth/api";

frontend/src/ui/hooks/useDM.ts

@@ -0,0 +1,341 @@
+import { useState, useEffect, useCallback, useRef } from "react";
+import { useAppState } from "../state";
+import { 
+    fetchUsers, 
+    fetchUserPublicKey, 
+    fetchDMHistory, 
+    decryptDm, 
+    sendDMViaWebSocket 
+} from "../../api/dmApi";
+import type { User, Message } from "../../core/types";
+import { websocket } from "../../core/websocket";
+
+interface DMUser extends User {
+    lastMessage?: string;
+    unreadCount: number;
+    publicKey?: string | null;
+}
+
+export function useDM() {
+    const { user, chat, setDmUsers, setActiveDm, addMessage, clearMessages } = useAppState();
+    const [dmUsers, setDmUsersState] = useState<DMUser[]>([]);
+    const [isLoadingUsers, setIsLoadingUsers] = useState(false);
+    const [isLoadingHistory, setIsLoadingHistory] = useState(false);
+    const usersLoadedRef = useRef(false);
+
+    // Load last message and unread count for a specific user
+    const loadUserLastMessage = useCallback(async (dmUser: DMUser) => {
+        if (!user.authToken) return;
+
+        try {
+            // Get public key
+            const publicKey = await fetchUserPublicKey(dmUser.id, user.authToken);
+            if (!publicKey) return;
+
+            // Get message history
+            const messages = await fetchDMHistory(dmUser.id, user.authToken, 50);
+            if (messages.length === 0) return;
+
+            // Find last message
+            const lastMessage = messages[messages.length - 1];
+            let lastPlaintext: string | null = null;
+            
+            try {
+                lastPlaintext = await decryptDm(lastMessage, publicKey);
+            } catch (error) {
+                console.error("Failed to decrypt last message:", error);
+            }
+
+            // Calculate unread count
+            const lastReadId = getLastReadId(dmUser.id);
+            let unreadCount = 0;
+            for (const msg of messages) {
+                if (msg.senderId === dmUser.id && msg.id > lastReadId) {
+                    unreadCount++;
+                }
+            }
+
+            // Update user state
+            setDmUsersState(prev => prev.map(u => 
+                u.id === dmUser.id 
+                    ? { 
+                        ...u, 
+                        lastMessage: lastPlaintext ? lastPlaintext.split(/\r?\n/).slice(0, 2).join("\n") : undefined,
+                        unreadCount,
+                        publicKey
+                    }
+                    : u
+            ));
+        } catch (error) {
+            console.error("Failed to load last message for user:", dmUser.id, error);
+        }
+    }, [user.authToken]);
+
+    // Load users when DM tab is active
+    const loadUsers = useCallback(async () => {
+        if (!user.authToken || isLoadingUsers || usersLoadedRef.current) return;
+        
+        usersLoadedRef.current = true;
+        setIsLoadingUsers(true);
+        try {
+            const users = await fetchUsers(user.authToken);
+            console.log("Fetched users:", users);
+            const dmUsersWithState: DMUser[] = users.map(user => ({
+                ...user,
+                unreadCount: 0,
+                lastMessage: undefined,
+                publicKey: null
+            }));
+            
+            setDmUsersState(dmUsersWithState);
+            setDmUsers(users);
+            
+            // Load last messages and unread counts for visible users
+            // Call loadUserLastMessage directly without dependency
+            for (const dmUser of dmUsersWithState) {
+                if (!user.authToken) continue;
+                
+                try {
+                    // Get public key
+                    const publicKey = await fetchUserPublicKey(dmUser.id, user.authToken);
+                    if (!publicKey) continue;
+
+                    // Get message history
+                    const messages = await fetchDMHistory(dmUser.id, user.authToken, 50);
+                    if (messages.length === 0) continue;
+
+                    // Find last message
+                    const lastMessage = messages[messages.length - 1];
+                    let lastPlaintext: string | null = null;
+                    
+                    try {
+                        lastPlaintext = await decryptDm(lastMessage, publicKey);
+                    } catch (error) {
+                        console.error("Failed to decrypt last message:", error);
+                    }
+
+                    // Calculate unread count
+                    const lastReadId = getLastReadId(dmUser.id);
+                    let unreadCount = 0;
+                    for (const msg of messages) {
+                        if (msg.senderId === dmUser.id && msg.id > lastReadId) {
+                            unreadCount++;
+                        }
+                    }
+
+                    // Update user state
+                    setDmUsersState(prev => prev.map(u => 
+                        u.id === dmUser.id 
+                            ? { 
+                                ...u, 
+                                lastMessage: lastPlaintext ? lastPlaintext.split(/\r?\n/).slice(0, 2).join("\n") : undefined,
+                                unreadCount,
+                                publicKey
+                            }
+                            : u
+                    ));
+                } catch (error) {
+                    console.error("Failed to load last message for user:", dmUser.id, error);
+                }
+            }
+        } catch (error) {
+            console.error("Failed to load DM users:", error);
+        } finally {
+            setIsLoadingUsers(false);
+        }
+    }, [user.authToken, isLoadingUsers]);
+
+    // Reset users loaded flag when user changes
+    useEffect(() => {
+        usersLoadedRef.current = false;
+    }, [user.authToken]);
+
+    // Load DM history for active conversation
+    const loadDMHistory = useCallback(async (userId: number, publicKey: string) => {
+        if (!user.authToken || isLoadingHistory) return;
+        
+        setIsLoadingHistory(true);
+        try {
+            const messages = await fetchDMHistory(userId, user.authToken, 50);
+            const decryptedMessages: Message[] = [];
+            let maxIncomingId = 0;
+
+            for (const env of messages) {
+                try {
+                    const text = await decryptDm(env, publicKey);
+                    const isAuthor = env.senderId !== userId;
+                    const username = isAuthor ? (user.currentUser?.username || "Unknown") : "Other User";
+                    
+                    decryptedMessages.push({
+                        id: env.id,
+                        content: text,
+                        username: username,
+                        timestamp: env.timestamp,
+                        is_read: false,
+                        is_edited: false
+                    });
+
+                    if (env.senderId === userId && env.id > maxIncomingId) {
+                        maxIncomingId = env.id;
+                    }
+                } catch (error) {
+                    console.error("Error decrypting message:", error);
+                }
+            }
+
+            clearMessages();
+            decryptedMessages.forEach(msg => addMessage(msg));
+
+            // Update last read ID
+            if (maxIncomingId > 0) {
+                setLastReadId(userId, maxIncomingId);
+                // Clear unread count
+                setDmUsersState(prev => prev.map(u => 
+                    u.id === userId ? { ...u, unreadCount: 0 } : u
+                ));
+            }
+        } catch (error) {
+            console.error("Failed to load DM history:", error);
+        } finally {
+            setIsLoadingHistory(false);
+        }
+    }, [user.authToken, user.currentUser, isLoadingHistory, clearMessages, addMessage]);
+
+    // Send DM message
+    const sendDMMessage = useCallback(async (recipientId: number, publicKey: string, content: string) => {
+        if (!user.authToken) return;
+
+        try {
+            await sendDMViaWebSocket(recipientId, publicKey, content, user.authToken);
+        } catch (error) {
+            console.error("Failed to send DM:", error);
+        }
+    }, [user.authToken]);
+
+    // Start DM conversation
+    const startDMConversation = useCallback(async (dmUser: DMUser) => {
+        if (!user.authToken) return;
+
+        try {
+            // Get public key if not already loaded
+            let publicKey = dmUser.publicKey;
+            if (!publicKey) {
+                publicKey = await fetchUserPublicKey(dmUser.id, user.authToken);
+                if (!publicKey) return;
+            }
+
+            // Set active DM
+            setActiveDm({
+                userId: dmUser.id,
+                username: dmUser.username,
+                publicKey
+            });
+
+            // Load conversation history
+            await loadDMHistory(dmUser.id, publicKey);
+        } catch (error) {
+            console.error("Failed to start DM conversation:", error);
+        }
+    }, [user.authToken, setActiveDm, loadDMHistory]);
+
+    // WebSocket message handler
+    useEffect(() => {
+        const handleWebSocketMessage = async (e: MessageEvent) => {
+            try {
+                const msg = JSON.parse(e.data);
+                if (msg.type === "dmNew") {
+                    const { senderId, recipientId, ...envelope } = msg.data;
+                    
+                    // If this is for the active DM conversation
+                    if (chat.activeDm && (senderId === chat.activeDm.userId || recipientId === chat.activeDm.userId)) {
+                        try {
+                            const plaintext = await decryptDm(envelope, chat.activeDm.publicKey!);
+                            const isAuthor = senderId !== chat.activeDm.userId;
+                            
+                            addMessage({
+                                id: envelope.id,
+                                content: plaintext,
+                                username: isAuthor ? (user.currentUser?.username || "Unknown") : (chat.activeDm.username || "Unknown"),
+                                timestamp: envelope.timestamp,
+                                is_read: false,
+                                is_edited: false
+                            });
+
+                            // Update last read if it's from the other user
+                            if (senderId === chat.activeDm.userId) {
+                                setLastReadId(chat.activeDm.userId, Math.max(getLastReadId(chat.activeDm.userId), envelope.id));
+                            }
+                        } catch (error) {
+                            console.error("Failed to decrypt incoming DM:", error);
+                        }
+                    } else {
+                        // Update unread count for other users
+                        const otherUserId = senderId;
+                        setDmUsersState(prev => prev.map(u => 
+                            u.id === otherUserId 
+                                ? { ...u, unreadCount: u.unreadCount + 1 }
+                                : u
+                        ));
+
+                        // Update last message preview
+                        try {
+                            const publicKey = await fetchUserPublicKey(otherUserId, user.authToken!);
+                            if (publicKey) {
+                                const plaintext = await decryptDm(envelope, publicKey);
+                                setDmUsersState(prev => prev.map(u => 
+                                    u.id === otherUserId 
+                                        ? { 
+                                            ...u, 
+                                            lastMessage: plaintext.split(/\r?\n/).slice(0, 2).join("\n"),
+                                            publicKey
+                                        }
+                                        : u
+                                ));
+                            }
+                        } catch (error) {
+                            console.error("Failed to update last message preview:", error);
+                        }
+                    }
+                }
+            } catch (error) {
+                console.error("Failed to handle WebSocket message:", error);
+            }
+        };
+
+        websocket.addEventListener("message", handleWebSocketMessage);
+        return () => websocket.removeEventListener("message", handleWebSocketMessage);
+    }, [chat.activeDm, user.currentUser, addMessage]);
+
+    // Force reload users (useful for refreshing the list)
+    const reloadUsers = useCallback(() => {
+        usersLoadedRef.current = false;
+        loadUsers();
+    }, [loadUsers]);
+
+    return {
+        dmUsers,
+        isLoadingUsers,
+        isLoadingHistory,
+        loadUsers,
+        reloadUsers,
+        startDMConversation,
+        sendDMMessage,
+        loadUserLastMessage
+    };
+}
+
+// Helper functions for localStorage
+function getLastReadId(userId: number): number {
+    try {
+        const v = localStorage.getItem(`dmLastRead:${userId}`);
+        return v ? Number(v) : 0;
+    } catch {
+        return 0;
+    }
+}
+
+function setLastReadId(userId: number, id: number): void {
+    try {
+        localStorage.setItem(`dmLastRead:${userId}`, String(id));
+    } catch {}
+}

frontend/src/ui/hooks/useProfile.ts

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from "react";
 import { useAppState } from "../state";
-import { loadProfile, updateProfile, uploadProfilePicture, type ProfileData } from "../api/profileApi";
+import { loadProfile, updateProfile, uploadProfilePicture, type ProfileData } from "../../api/profileApi";
 import { showSuccess, showError } from "../../utils/notification";
 
 export function useProfile() {

frontend/src/ui/panels/PublicChatPanel.ts

@@ -1,7 +1,7 @@
 import { MessagePanel, type MessagePanelCallbacks } from "./MessagePanel";
 import { API_BASE_URL } from "../../core/config";
 import { getAuthHeaders } from "../../auth/api";
-import { request } from "../../websocket";
+import { request } from "../../core/websocket";
 import type { Message, WebSocketMessage } from "../../core/types";
 import type { UserState } from "../state";
 

frontend/src/ui/state.ts

@@ -1,6 +1,6 @@
 import { create } from "zustand";
 import type { Message, User, WebSocketMessage } from "../core/types";
-import { request } from "../websocket";
+import { request } from "../core/websocket";
 import { MessagePanel } from "./panels/MessagePanel";
 import { PublicChatPanel } from "./panels/PublicChatPanel";
 import { DMPanel, type DMPanelData } from "./panels/DMPanel";