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}>
-      {navbarVariant !== "no-navbar" && <Navbar variant={navbarVariant} />}
+    <div className={`${className} bg-[url(/images/background-pattern.svg)]`} style={style}>
+      <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,14 +57,14 @@ 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] ${
@@ -85,7 +86,6 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
               </>
             )}
           </Button>
-
           {/* Quick Settings Sidebar */}
           <ToggleButton
             extraClasses={`absolute group text-[1rem] top-[2vh] ${
@@ -95,7 +95,6 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
             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
@@ -104,7 +103,7 @@ const Navbar: React.FC<NavbarProps> = ({ variant = "default" }) => {
           </ToggleButton>
           <QuickSettings />
 
-      <SearchBar />
+      {variant != "no-searchbar" && <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" }}
-    >
-            {/* Hide Scrollbar for WebKit-based Browsers */}
-            <style>
-        {`
-          ::-webkit-scrollbar {
-            display: none;
-          }
-        `}
-      </style>
+    <DynamicPageContent className="min-h-screen bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#ff0000]">
       <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"
-      style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+      className="min-h-screen animate-moving_bg"
     >
-            {/* 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"