From d36eaffafbad03065a7ded135e72939c07fb781e Mon Sep 17 00:00:00 2001
From: Chris-1010 <122332721@umail.ucc.ie>
Date: Wed, 26 Feb 2025 13:23:42 +0000
Subject: [PATCH] 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                          |  2 -
 .../components/Layout/DynamicPageContent.tsx  |  6 +-
 frontend/src/components/Layout/Logo.tsx       |  2 +-
 frontend/src/components/Navigation/Navbar.tsx | 85 +++++++++----------
 .../src/components/Stream/StreamerRoute.tsx   |  8 +-
 frontend/src/pages/CategoryPage.tsx           | 11 +--
 frontend/src/pages/HomePage.tsx               | 14 +--
 7 files changed, 57 insertions(+), 71 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 72b2a6b..1c11065 100644
--- a/frontend/src/App.tsx
+++ b/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="/"
diff --git a/frontend/src/components/Layout/DynamicPageContent.tsx b/frontend/src/components/Layout/DynamicPageContent.tsx
index fc3fd1f..a757462 100644
--- a/frontend/src/components/Layout/DynamicPageContent.tsx
+++ b/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] ${
diff --git a/frontend/src/components/Layout/Logo.tsx b/frontend/src/components/Layout/Logo.tsx
index 70080c2..7632652 100644
--- a/frontend/src/components/Layout/Logo.tsx
+++ b/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;
 }
 
diff --git a/frontend/src/components/Navigation/Navbar.tsx b/frontend/src/components/Navigation/Navbar.tsx
index 9ffc467..85ba348 100644
--- a/frontend/src/components/Navigation/Navbar.tsx
+++ b/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 */}
-      <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 />
+      {variant != "no-searchbar" && <SearchBar />}
 
       {/* Stream Button */}
       {isLoggedIn && !window.location.pathname.includes("go-live") && (
diff --git a/frontend/src/components/Stream/StreamerRoute.tsx b/frontend/src/components/Stream/StreamerRoute.tsx
index bdcbe8e..d120242 100644
--- a/frontend/src/components/Stream/StreamerRoute.tsx
+++ b/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) {
diff --git a/frontend/src/pages/CategoryPage.tsx b/frontend/src/pages/CategoryPage.tsx
index fd6c46a..6488bca 100644
--- a/frontend/src/pages/CategoryPage.tsx
+++ b/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"
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index a5c7531..71b464f 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/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"