REFACTOR: Rename user_id to userId for consistency across components;

frontend/src/App.tsx

@@ -15,14 +15,14 @@ import { QuickSettingsProvider } from "./context/QuickSettingsContext";
 
 function App() {
   const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [user_id, setUserID] = useState<number | null>(null);
+  const [userId, setUserId] = useState<number | null>(null);
   const [username, setUsername] = useState<string | null>(null);
 
   useEffect(() => {
     fetch("/api/user/login_status")
       .then((response) => response.json())
       .then((data) => {
-        setUserID(data.user_id);
+        setUserId(data.user_id);
         setIsLoggedIn(data.status);
         setUsername(data.username);
       })
@@ -34,7 +34,7 @@ function App() {
 
   return (
     <AuthContext.Provider
-      value={{ isLoggedIn, username, user_id, setIsLoggedIn, setUsername }}
+      value={{ isLoggedIn, username, userId, setIsLoggedIn, setUsername, setUserId }}
     >
       <ContentProvider>
         <SidebarProvider>

frontend/src/components/Video/ChatPanel.tsx

@@ -22,7 +22,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
   streamId,
   onViewerCountChange,
 }) => {
-  const { isLoggedIn, username, user_id} = useAuth();
+  const { isLoggedIn, username, userId} = useAuth();
   const { showAuthModal, setShowAuthModal } = useAuthModal();
   const { socket, isConnected } = useSocket();
   const [messages, setMessages] = useState<ChatMessage[]>([]);
@@ -35,7 +35,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
     if (socket && isConnected) {
       // Add username check
       socket.emit("join", {
-        user_id: user_id ? user_id : null,
+        userId: userId ? userId : null,
         username: username ? username : "Guest",
         stream_id: streamId,
       });
@@ -43,7 +43,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
       // Handle beforeunload event
       const handleBeforeUnload = () => {
         socket.emit("leave", {         
-          user_id: user_id ? user_id : null,
+          userId: userId ? userId : null,
           username: username ? username : "Guest",
           stream_id: streamId, });
         socket.disconnect();
@@ -85,7 +85,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
         socket.disconnect();
       };
     }
-  }, [socket, isConnected, user_id, username, streamId]);
+  }, [socket, isConnected, userId, username, streamId]);
 
   // Auto-scroll to bottom when new messages arrive
   useEffect(() => {

frontend/src/context/AuthContext.tsx

@@ -3,7 +3,7 @@ import { createContext, useContext } from "react";
 interface AuthContextType {
   isLoggedIn: boolean;
   username: string | null;
-  user_id: number | null;
+  userId: number | null;
   setIsLoggedIn: (value: boolean) => void;
   setUsername: (value: string | null) => void;
   setUserId: (value: number | null) => void;