feat: user registration and chat messaging (wip)

client/src/pages/Home.tsx

@@ -28,7 +28,7 @@ function Home() {
           <button
             type="button"
             onClick={onClickCreateRoom}
-            className="w-full py-2 px-4 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+            className="btn w-full"
           >
             Create
           </button>
@@ -56,7 +56,7 @@ function Home() {
             type="button"
             onClick={onClickJoinRoom}
             disabled={!roomId}
-            className="w-full py-2 px-4 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="w-full btn bg-green-600 hover:bg-green-700"
           >
             Join
           </button>

client/src/pages/Room.tsx

@@ -1,17 +1,24 @@
 import { useParams } from "react-router-dom";
 import Layout from "../components/Layout";
-import Connect from "../components/Connect";
+import Connect from "../components/ConnectWithName";
 import { useWebSocket } from "../hooks/useWebSocket";
+import ChatMessages from "../components/ChatMessages";
+import ChatInput from "../components/ChatInput";
+import { useChatState } from "../contexts/ChatContext";
 
 function Room() {
   const { roomId } = useParams();
-  const { isConnected, connect } = useWebSocket(roomId ?? "");
+  const { isConnected, connect, sendMessage } = useWebSocket(roomId ?? "");
+  const { currentUser } = useChatState();
 
   return (
     <Layout>
       <section className="w-full">
         <h2 className="text-xl bg-gray-100 p-4 flex justify-between items-center rounded-md shadow-sm">
           <span className="font-medium">Room ID: {roomId}</span>
+          {currentUser && (
+            <span className="font-medium">User: {currentUser?.name}</span>
+          )}
           <span
             className={`px-3 py-1 rounded-full text-sm font-medium ${
               isConnected
@@ -24,6 +31,12 @@ function Room() {
         </h2>
 
         {!isConnected && <Connect onConnect={connect} />}
+        {isConnected && (
+          <>
+            <ChatMessages />
+            <ChatInput onSendMessage={sendMessage} />
+          </>
+        )}
       </section>
     </Layout>
   );