REFACTOR: Separated Navbar and ChatPanel components; Updated VideoPage layout and toggle chat functionality

frontend/src/components/Layout/Navbar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Logo from "./Logo";
-import Button, { ToggleButton } from "./Button";
+import Button from "./Button";
 import Sidebar from "./Sidebar";
 import { Sidebar as SidebarIcon } from "lucide-react";
 import {
@@ -15,18 +15,13 @@ import { useAuth } from "../../context/AuthContext";
 
 interface NavbarProps {
   variant?: "home" | "default";
-  isChatOpen?: boolean;
-  toggleChat?: () => void;
 }
 
 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) {
@@ -88,15 +83,6 @@ const Navbar: React.FC<NavbarProps> = ({
         <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

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import Input from "../Layout/Input";
 import { useAuth } from "../../context/AuthContext";
 import { useSocket } from "../../context/SocketContext";
-import Button, { ToggleButton } from "../Layout/Button";
+import Button from "../Layout/Button";
 import AuthModal from "../Auth/AuthModal";
 
 interface ChatMessage {
@@ -47,6 +47,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
         })
         .then((data) => {
           if (data.chat_history) {
+            console.log("Chat history:", data.chat_history);
             setMessages(data.chat_history);
           }
         })
@@ -114,75 +115,77 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
   }, [showAuthModal]);
 
   return (
-    <>
+    <div
-      <div id="chat-panel" className="h-full flex flex-col rounded-lg p-4">
+      id="chat-panel"
-        <h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>
+      className="max-w-[30vw] h-full flex flex-col rounded-lg p-4"
+      style={{ gridArea: "1 / 2 / 3 / 3" }}
+    >
+      <h2 className="text-xl font-bold mb-4 text-white">Stream Chat</h2>
 
-        <div
+      <div
-          ref={chatContainerRef}
+        ref={chatContainerRef}
-          id="chat-message-list"
+        id="chat-message-list"
-          className="flex-grow w-full max-h-[50vh] overflow-y-auto mb-4 space-y-2 rounded-md"
+        className="flex-grow w-full max-h-[50vh] overflow-y-auto mb-4 space-y-2 rounded-md"
-        >
+      >
-          {messages.map((msg, index) => (
+        {messages.map((msg, index) => (
-            <div
+          <div
-              key={index}
+            key={index}
-              className="grid grid-cols-[minmax(15%,_100px)_1fr] group h-fit items-center bg-gray-700 rounded p-2 text-white"
+            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 ${
+                msg.chatter_username === username
+                  ? "text-blue-400"
+                  : "text-green-400"
+              }`}
             >
-              <span
+              {" "}
-                className={`font-bold ${
+              {msg.chatter_username}:{" "}
-                  msg.chatter_username === username
+            </span>
-                    ? "text-blue-400"
+            <span className="text-center">{msg.message}</span>
-                    : "text-green-400"
+            <span className="text-gray-400 text-sm scale-0 group-hover:scale-100 h-[0px] group-hover:h-[10px] transition-all delay-1000 group-hover:delay-200">
-                }`}
+              {new Date(msg.time_sent).toLocaleTimeString()}
-              >
+            </span>
-                {" "}
-                {msg.chatter_username}:{" "}
-              </span>
-              <span className="text-center">{msg.message}</span>
-              <span className="text-gray-400 text-sm scale-0 group-hover:scale-100 h-[0px] group-hover:h-[10px] transition-all delay-1000 group-hover:delay-200">
-                {new Date(msg.time_sent).toLocaleTimeString()}
-              </span>
-            </div>
-          ))}
-        </div>
-
-        <div className="flex justify-center gap-2">
-          {isLoggedIn ? (
-            <>
-              <Input
-                type="text"
-                value={inputMessage}
-                onChange={(e) => setInputMessage(e.target.value)}
-                onKeyDown={handleKeyPress}
-                placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
-                disabled={!isLoggedIn}
-                extraClasses="flex-grow focus:w-[20vw]"
-                onClick={() => !isLoggedIn && setShowAuthModal(true)}
-              />
-
-              <button
-                onClick={sendChat}
-                className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
-              >
-                Send
-              </button>
-            </>
-          ) : (
-            <Button
-              extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
-              onClick={() => setShowAuthModal(true)}
-            >
-              Login to Chat
-            </Button>
-          )}
-        </div>
-        {showAuthModal && (
-          <div className="fixed inset-0 z-[9999] flex items-center justify-center">
-            <AuthModal onClose={() => setShowAuthModal(false)} />
           </div>
+        ))}
+      </div>
+
+      <div className="flex justify-center gap-2">
+        {isLoggedIn ? (
+          <>
+            <Input
+              type="text"
+              value={inputMessage}
+              onChange={(e) => setInputMessage(e.target.value)}
+              onKeyDown={handleKeyPress}
+              placeholder={isLoggedIn ? "Type a message..." : "Login to chat"}
+              disabled={!isLoggedIn}
+              extraClasses="flex-grow w-full focus:w-full"
+              onClick={() => !isLoggedIn && setShowAuthModal(true)}
+            />
+
+            <button
+              onClick={sendChat}
+              className="px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"
+            >
+              Send
+            </button>
+          </>
+        ) : (
+          <Button
+            extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
+            onClick={() => setShowAuthModal(true)}
+          >
+            Login to Chat
+          </Button>
         )}
       </div>
-    </>
+      {showAuthModal && (
+        <div className="fixed inset-0 z-[9999] flex items-center justify-center">
+          <AuthModal onClose={() => setShowAuthModal(false)} />
+        </div>
+      )}
+    </div>
   );
 };
 

frontend/src/components/Video/VideoPlayer.tsx

@@ -52,7 +52,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamId }) => {
   return (
     <div
       id="video-container"
-      className="h-full flex items-center bg-gray-900 rounded-lg"
+      className="min-w-[65vw] w-full h-full flex items-center bg-gray-900 rounded-lg"
       style={{ gridArea: "1 / 1 / 2 / 2" }}
     >
       <div ref={videoRef} id="video-player" className="w-full" />

frontend/src/pages/VideoPage.tsx

@@ -1,6 +1,6 @@
 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 { useNavigate, useParams } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
@@ -45,7 +45,9 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   useEffect(() => {
     // Fetch stream data for this streamer
     fetch(
-      `/api/get_stream_data/${streamerName}${streamId == 0 ? "" : `/${streamId}`}`,
+      `/api/get_stream_data/${streamerName}${
+        streamId == 0 ? "" : `/${streamId}`
+      }`
     ).then((res) => {
       if (!res.ok) {
         console.error("Failed to load stream data:", res.statusText);
@@ -78,23 +80,27 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
   return (
     <SocketProvider>
       <div id="videoPage" className="w-full">
-        <Navbar isChatOpen={isChatOpen} toggleChat={toggleChat} />
+        <Navbar />
 
         <div
           id="container"
-          className={`grid grid-rows-[auto_1fr] bg-gray-900 h-full ${isChatOpen ? "grid-cols-[3fr_1fr]" : "grid-cols-1"}`}
+          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={streamId} />
           </div>
-          <div
+
-            id="chat"
+          <ToggleButton
-            className={`relative w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 z-10 ${
+            onClick={toggleChat}
-              isChatOpen ? "block" : "hidden"
+            toggled={isChatOpen}
-            }`}
+            extraClasses="absolute top-[70px] right-[20px] text-[1rem] flex items-center flex-nowrap"
           >
-            <ChatPanel streamId={streamId} />
+            {isChatOpen ? "Hide Chat" : "Show Chat"}
-          </div>
+          </ToggleButton>
+
+          <ChatPanel streamId={streamId} />
 
           <div
             id="stream-info"
@@ -105,8 +111,16 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
               {streamData ? streamData.streamTitle : "Loading..."}
             </h1>
             <div className="flex flex-col gap-2">
-              <div id="streamer" className="flex items-center gap-2 cursor-pointer" onClick={() => navigate(`/user/${streamerName}`)} >
+              <div
-                <img src="/images/monkey.png" alt="streamer" className="w-10 h-10 bg-indigo-500 rounded-full" />
+                id="streamer"
+                className="flex items-center gap-2 cursor-pointer"
+                onClick={() => navigate(`/user/${streamerName}`)}
+              >
+                <img
+                  src="/images/monkey.png"
+                  alt="streamer"
+                  className="w-10 h-10 bg-indigo-500 rounded-full"
+                />
                 <span>
                   {streamData ? streamData.streamerName : "Loading..."}
                 </span>

web_server/blueprints/chat.py

@@ -58,7 +58,7 @@ def get_past_chat(stream_id: int):
                             FROM chat
                             JOIN users ON chat.chatter_id = users.user_id
                             WHERE stream_id = ?
-                            ORDER BY time_sent DESC
+                            ORDER BY time_sent ASC
                             LIMIT 50;
                             """, (stream_id,))