FEAT: Click on chatter's username to visit profile;

REFACTOR: Formatting;

frontend/src/components/Video/ChatPanel.tsx

@@ -5,6 +5,7 @@ import AuthModal from "../Auth/AuthModal";
 import { useAuthModal } from "../../hooks/useAuthModal";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
+import { useNavigate } from "react-router-dom";
 
 interface ChatMessage {
   chatter_username: string;
@@ -29,6 +30,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
   const [messages, setMessages] = useState<ChatMessage[]>([]);
   const [inputMessage, setInputMessage] = useState("");
   const chatContainerRef = useRef<HTMLDivElement>(null);
+  const navigate = useNavigate();
 
   // Join chat room when component mounts
   useEffect(() => {
@@ -136,7 +138,16 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
             className="flex items-start space-x-2 bg-gray-800 rounded p-2 text-white"
           >
             {/* User avatar with image */}
-            <div className="w-2em h-2em rounded-full overflow-hidden flex-shrink-0">
+            <div
+              className={`w-2em h-2em rounded-full overflow-hidden flex-shrink-0 ${
+                msg.chatter_username === username ? "" : "cursor-pointer"
+              }`}
+              onClick={() =>
+                msg.chatter_username === username
+                  ? null
+                  : navigate(`/user/${msg.chatter_username}`)
+              }
+            >
               <img
                 src="/images/monkey.png"
                 alt="User Avatar"
@@ -152,8 +163,13 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
                   className={`font-bold text-[1em] ${
                     msg.chatter_username === username
                       ? "text-purple-600"
-                      : "text-green-400"
+                      : "text-green-400 cursor-pointer"
                   }`}
+                  onClick={() =>
+                    msg.chatter_username === username
+                      ? null
+                      : navigate(`/user/${msg.chatter_username}`)
+                  }
                 >
                   {msg.chatter_username}
                 </span>

frontend/src/pages/UserPage.tsx

@@ -205,7 +205,7 @@ const UserPage: React.FC = () => {
           {/* Content Section */}
           <div
             id="content"
-            className="col-span-2 bg-gray-800 rounded-lg p-6 grid grid-rows-[auto_1fr] items-center justify-center"
+            className="col-span-2 bg-gray-800 rounded-lg p-6 grid grid-rows-[auto_1fr] text-center items-center justify-center"
           >
             {userPageVariant === "streamer" && (
               <>

frontend/src/pages/VideoPage.tsx

@@ -102,11 +102,12 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
         <div
           id="container"
-          className={`grid ${isChatOpen ? "w-[100vw]" : "w-[125vw]"
-            } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
+          className={`grid ${
+            isChatOpen ? "w-[100vw]" : "w-[125vw]"
+          } grid-rows-[auto_1fr] bg-gray-900 h-full grid-cols-[auto_25vw] transition-all`}
         >
           <div className="relative">
-            <VideoPlayer streamId={streamerId} />
+            <VideoPlayer />
           </div>
 
           <ToggleButton
@@ -116,7 +117,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
           >
             {isChatOpen ? "Hide Chat" : "Show Chat"}
 
-            <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">Press C</small>
+            <small className="absolute right-0 left-0 -bottom-0 group-hover:-bottom-5 opacity-0 group-hover:opacity-100 text-white transition-all">
+              Press C
+            </small>
           </ToggleButton>
 
           <ChatPanel
@@ -193,7 +196,10 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
               <span className="text-gray-400 text-[0.75em]">Started</span>
               <span className="text-[0.75em]">
                 {streamData
-                  ? `${Math.floor((Date.now() - new Date(streamData.startTime).getTime()) / 3600000)} hours ago`
+                  ? `${Math.floor(
+                      (Date.now() - new Date(streamData.startTime).getTime()) /
+                        3600000
+                    )} hours ago`
                   : "Loading..."}
               </span>
             </div>
@@ -213,11 +219,17 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
                 Subscribe
               </button>
             </div>
-
           </div>
-          {showCheckout && <CheckoutForm onClose={() => setShowCheckout(false)} streamerID={streamerId}/>}
+          {showCheckout && (
+            <CheckoutForm
+              onClose={() => setShowCheckout(false)}
+              streamerID={streamerId}
+            />
+          )}
           {showReturn && <Return />}
-          {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
+          {showAuthModal && (
+            <AuthModal onClose={() => setShowAuthModal(false)} />
+          )}
         </div>
       </div>
     </SocketProvider>