REFACTOR: Update navbar position in project component hierarchy;

UPDATE: Add navbar 'no-searchbar' variant;

+ last commit - MINOR: Handle of new ChatContext

frontend/src/App.tsx

@@ -14,7 +14,6 @@ import { SidebarProvider } from "./context/SidebarContext";
 import { QuickSettingsProvider } from "./context/QuickSettingsContext";
 import StreamDashboardPage from "./pages/StreamDashboardPage";
 import { Brightness } from "./context/BrightnessContext";
-import Sidebar from "./components/Navigation/Sidebar";
 import LoadingScreen from "./components/Layout/LoadingScreen";
 import Following from "./pages/Following";
 
@@ -61,7 +60,6 @@ function App() {
           <SidebarProvider>
             <QuickSettingsProvider>
               <BrowserRouter>
-                {isLoggedIn && window.innerWidth > 900 && <Sidebar />}
                 <Routes>
                   <Route
                     path="/"

frontend/src/components/Layout/DynamicPageContent.tsx

@@ -4,7 +4,7 @@ import { useSidebar } from "../../context/SidebarContext";
 
 interface DynamicPageContentProps extends React.HTMLProps<HTMLDivElement> {
   children: React.ReactNode;
-  navbarVariant?: "home" | "no-navbar" | "default";
+  navbarVariant?: "home" | "no-searchbar" | "default";
   className?: string;
   contentClassName?: string;
   style?: React.CSSProperties;
@@ -20,8 +20,8 @@ const DynamicPageContent: React.FC<DynamicPageContentProps> = ({
   const { showSideBar } = useSidebar();
 
   return (
-    <div className={className} style={style}>
+    <div className={`${className} bg-[url(/images/background-pattern.svg)]`} style={style}>
-      {navbarVariant !== "no-navbar" && <Navbar variant={navbarVariant} />}
+      <Navbar variant={navbarVariant} />
       <div
         id="content"
         className={`min-w-[850px] ${

frontend/src/components/Layout/Logo.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
 interface LogoProps {
-  variant?: "home" | "default";
+  variant?: "home" | "no-searchbar" | "default";
   extraClasses?: string;
 }
 

frontend/src/components/Navigation/Navbar.tsx

@@ -14,9 +14,10 @@ import { useAuth } from "../../context/AuthContext";
 import QuickSettings from "../Settings/QuickSettings";
 import { useSidebar } from "../../context/SidebarContext";
 import { useQuickSettings } from "../../context/QuickSettingsContext";
+import Sidebar from "./Sidebar";
 
 interface NavbarProps {
-  variant?: "home" | "default";
+  variant?: "home" | "no-searchbar" | "default";
 }
 
 const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
@@ -56,55 +57,53 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
   return (
     <div
       id="navbar"
-      className={`flex justify-evenly items-center mx-[15vw] ${
+      className={`relative flex justify-evenly items-center ${
         variant === "home"
           ? "h-[45vh] flex-col"
           : "h-[15vh] col-span-2 flex-row"
       }`}
     >
+      {isLoggedIn && window.innerWidth > 900 && <Sidebar />}
       <Logo variant={variant} />
+          {/* Login / Logout Button */}
+          <Button
+            extraClasses={`absolute top-[2vh] ${
+              showSideBar
+                ? "left-[16vw] duration-[0.5s]"
+                : "left-[20px] duration-[1s]"
+            } text-[1rem] flex items-center flex-nowrap z-[99]`}
+            onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
+          >
+            {isLoggedIn ? (
+              <>
+                <LogOutIcon className="h-15 w-15 mr-1" />
+                Logout
+              </>
+            ) : (
+              <>
+                <LogInIcon className="h-15 w-15 mr-1" />
+                Login / Register
+              </>
+            )}
+          </Button>
+          {/* Quick Settings Sidebar */}
+          <ToggleButton
+            extraClasses={`absolute group text-[1rem] top-[2vh] ${
+              showQuickSettings ? "right-[21vw]" : "right-[20px]"
+            } cursor-pointer`}
+            onClick={() => handleQuickSettings()}
+            toggled={showQuickSettings}
+          >
+            <SettingsIcon className="h-[2vw] w-[2vw]" />
+            {showQuickSettings && (
+              <small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
+                Press Q
+              </small>
+            )}
+          </ToggleButton>
+          <QuickSettings />
 
-      {/* Login / Logout Button */}
+      {variant != "no-searchbar" && <SearchBar />}
-      <Button
-        extraClasses={`absolute top-[2vh] ${
-          showSideBar
-            ? "left-[16vw] duration-[0.5s]"
-            : "left-[20px] duration-[1s]"
-        } text-[1rem] flex items-center flex-nowrap z-[99]`}
-        onClick={() => (isLoggedIn ? handleLogout() : setShowAuthModal(true))}
-      >
-        {isLoggedIn ? (
-          <>
-            <LogOutIcon className="h-15 w-15 mr-1" />
-            Logout
-          </>
-        ) : (
-          <>
-            <LogInIcon className="h-15 w-15 mr-1" />
-            Login / Register
-          </>
-        )}
-      </Button>
-
-      {/* Quick Settings Sidebar */}
-      <ToggleButton
-        extraClasses={`absolute group text-[1rem] top-[2vh] ${
-          showQuickSettings ? "right-[21vw]" : "right-[20px]"
-        } cursor-pointer`}
-        onClick={() => handleQuickSettings()}
-        toggled={showQuickSettings}
-      >
-        <SettingsIcon className="h-[2vw] w-[2vw]" />
-
-        {showQuickSettings && (
-          <small className="absolute flex items-center top-0 mr-4 right-0 h-full w-full my-auto group-hover:right-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
-            Press Q
-          </small>
-        )}
-      </ToggleButton>
-      <QuickSettings />
-
-      <SearchBar />
 
       {/* Stream Button */}
       {isLoggedIn && !window.location.pathname.includes("go-live") && (

frontend/src/components/Stream/StreamerRoute.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useNavigate, useParams } from "react-router-dom";
 import VideoPage from "../../pages/VideoPage";
 import LoadingScreen from "../Layout/LoadingScreen";
+import { ChatProvider } from "../../context/ChatContext";
 
 const StreamerRoute: React.FC = () => {
   const { streamerName } = useParams();
@@ -35,9 +36,12 @@ const StreamerRoute: React.FC = () => {
 
   if (isLoading) return <LoadingScreen />;
 
-  // streamId=0 is a special case for the streamer's latest stream
   if (isLive) {
-    return <VideoPage streamerId={streamId} />;
+    return (
+      <ChatProvider>
+        <VideoPage streamerId={streamId} />
+      </ChatProvider>
+    );
   }
 
   if (streamerName) {

frontend/src/pages/CategoryPage.tsx

@@ -96,16 +96,7 @@ const CategoryPage: React.FC = () => {
   if (hasMoreData && !streams.length) return <LoadingScreen />;
 
   return (
-    <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000] bg-[url(/images/background-pattern.svg)]"style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+    <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]">
-    >
-            {/* Hide Scrollbar for WebKit-based Browsers */}
-            <style>
-        {`
-          ::-webkit-scrollbar {
-            display: none;
-          }
-        `}
-      </style>
       <div className="pt-8">
         <ListRow
           type="stream"

frontend/src/pages/HomePage.tsx

@@ -25,23 +25,15 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
   };
 
   if (!categories || categories.length === 0) {
+    console.log("No categories found yet");
     return <LoadingScreen>Loading Categories...</LoadingScreen>;
   }
 
   return (
     <DynamicPageContent
       navbarVariant="home"
-      className="h-full min-h-screen bg-[url(/images/background-pattern.svg)] animate-moving_bg"
+      className="min-h-screen animate-moving_bg"
-      style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
     >
-            {/* Hide Scrollbar for WebKit-based Browsers */}
-            <style>
-        {`
-          ::-webkit-scrollbar {
-            display: none;
-          }
-        `}
-      </style>
       <ListRow
         type="stream"
         title={
@@ -57,6 +49,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         wrap={false}
         onItemClick={handleStreamClick}
         extraClasses="bg-[var(--liveNow)]"
+        itemExtraClasses="w-[20vw]"
       />
 
       {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}
@@ -77,6 +70,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         onItemClick={handleCategoryClick}
         titleClickable={true}
         extraClasses="bg-[var(--recommend)]"
+        itemExtraClasses="w-[20vw]"
       >
         <Button
           extraClasses="absolute right-10"