FEAT: isChatOpen can now be expanded and collapsed

frontend/src/components/Layout/Navbar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Logo from "./Logo";
-import Button from "./Button";
+import Button, {ToggleButton} from "./Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
@@ -16,11 +16,14 @@ import { useAuth } from "../../context/AuthContext";
 
 interface NavbarProps {
   variant?: "home" | "default";
+  isChatOpen: boolean;
+  toggleChat: () => void;
 }
 
-const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
+const Navbar: React.FC<NavbarProps> = ({ variant = "default", isChatOpen, toggleChat }) => {
   const [showAuthModal, setShowAuthModal] = useState(false);
   const { isLoggedIn } = useAuth();
+  const isVideoPage = location.pathname.includes("/EduGuru");
 
   useEffect(() => {
     if (showAuthModal) {
@@ -79,6 +82,13 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
         <SettingsIcon className="h-15 w-15 mr-1" />
         Quick Settings
       </Button>
+      {isVideoPage && (
+      <ToggleButton onClick={toggleChat} toggled={isChatOpen}
+              extraClasses="absolute top-[80px] right-[20px] text-[1rem] flex items-center flex-nowrap"
+              >
+                {isChatOpen ? "Hide Chat" : "Show Chat"}
+      </ToggleButton>
+      )}
 
       <div id="search-bar" className="flex items-center">
         <Input

frontend/src/components/Video/ChatPanel.tsx

@@ -21,7 +21,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
   const [inputMessage, setInputMessage] = useState("");
   const chatContainerRef = useRef<HTMLDivElement>(null);
   const { isLoggedIn, username } = useAuth();
-  const [isChatVisible, setIsChatVisible] = useState(false);
 
   // Join chat room when component mounts
   useEffect(() => {
@@ -93,10 +92,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
     setInputMessage("");
   };
 
-  const toggleChat = () => {
-    setIsChatVisible((prev) => !prev);
-  };
-
   const handleKeyPress = (e: React.KeyboardEvent) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -120,14 +115,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
 
   return (
     <>
-      <ToggleButton
-        onClick={toggleChat}
-        toggled={isChatVisible}
-        extraClasses="cursor-pointer"
-      >
-        {isChatVisible ? "Hide Chat" : "Show Chat"}
-      </ToggleButton>
-      {isChatVisible && (
       <div id="chat-panel" className="h-full flex flex-col rounded-lg p-4">
         <h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>
 
@@ -142,8 +129,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
               className="grid grid-cols-[minmax(15%,_100px)_1fr] group h-fit items-center bg-gray-700 rounded p-2 text-white"
             >
               <span
-                  className={`font-bold ${
+                className={`font-bold ${msg.chatter_username === username
-                    msg.chatter_username === username
                     ? "text-blue-400"
                     : "text-green-400"
                   }`}
@@ -196,7 +182,6 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
           </div>
         )}
       </div>
-      )}
     </>
   );
 };

frontend/src/pages/VideoPage.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useEffect } from "react";
 import Navbar from "../components/Layout/Navbar";
-import Button from "../components/Layout/Button";
+import Button, { ToggleButton } from "../components/Layout/Button";
 import ChatPanel from "../components/Video/ChatPanel";
-// import CheckoutForm, { Return } from "../components/Checkout/CheckoutForm";
+import { useParams } from "react-router-dom";
-import { useNavigate, useParams } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import VideoPlayer from "../components/Video/VideoPlayer";
 import { SocketProvider } from "../context/SocketContext";
@@ -26,6 +25,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   const { isLoggedIn } = useAuth();
   const { streamerName } = useParams<{ streamerName: string }>();
   const [streamData, setStreamData] = useState<StreamDataProps>();
+  const [isChatOpen, setIsChatOpen] = useState(true);
   // const [showCheckout, setShowCheckout] = useState(false);
   // const showReturn = window.location.search.includes("session_id");
   // const navigate = useNavigate();
@@ -45,8 +45,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   useEffect(() => {
     // Fetch stream data for this streamer
     fetch(
-      `/api/get_stream_data/${streamerName}${
+      `/api/get_stream_data/${streamerName}${streamId == 0 ? "" : `/${streamId}`
-        streamId == 0 ? "" : `/${streamId}`
       }`
     ).then((res) => {
       if (!res.ok) {
@@ -73,19 +72,28 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
     });
   }, [streamId, streamerName]);
 
+  const toggleChat = () => {
+    setIsChatOpen((prev) => !prev);
+  };
+
   return (
     <SocketProvider>
       <div id="videoPage" className="w-full">
-        <Navbar />
+        <Navbar isChatOpen={isChatOpen} toggleChat={toggleChat} />
-        <div id="container" className="grid grid-rows-[auto_1fr] grid-cols-[3fr_1fr] bg-gray-900">
+        <div id="container" className={`grid grid-rows-[auto_1fr] bg-gray-900 h-full ${isChatOpen ? "grid-cols-[3fr_1fr]" : "grid-cols-1"}`}
+        >
+          <div className="relative">
             <VideoPlayer streamId={streamId} />
+          </div>
           <div
             id="chat"
-            className="relative top-0 right-0 w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 z-10"
+            className={`relative w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 z-10 ${
-            style={{ gridArea: "1 / 2 / 3 / 3" }}
+              isChatOpen ? "block" : "hidden"
+            }`}
           >
             <ChatPanel streamId={streamId} />
           </div>
+
           <div
             id="stream-info"
             className="flex flex-col gap-2 p-4 text-white"