UPDATE: Style ResultsPage;

UPDATE: Improve components;

frontend/src/components/Input/Button.tsx

@@ -15,7 +15,7 @@ const Button: React.FC<ButtonProps> = ({
   return (
     <button
       type={type}
-      className={`${extraClasses} p-2 text-[1.5rem] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
+      className={`${extraClasses} p-2 text-[1.5vw] text-white hover:text-purple-600 bg-black/30 hover:bg-black/80 rounded-md border border-gray-300 hover:border-purple-500 hover:border-b-4 hover:border-l-4 active:border-b-2 active:border-l-2 transition-all`}
       {...props}
     >
       {children}

frontend/src/components/Input/SearchBar.tsx

@@ -3,8 +3,12 @@ import Input from "./Input";
 import { Search as SearchIcon } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 
-const SearchBar: React.FC = () => {
+interface SearchBarProps {
-  const [searchQuery, setSearchQuery] = useState("");
+  value?: string;
+}
+
+const SearchBar: React.FC<SearchBarProps> = ({ value = "" }) => {
+  const [searchQuery, setSearchQuery] = useState(value);
   //const [debouncedQuery, setDebouncedQuery] = useState(searchQuery);
   const navigate = useNavigate();
 
@@ -21,7 +25,6 @@ const SearchBar: React.FC = () => {
       });
 
       const data = await response.json();
-      console.log("Search results:", data);
 
       navigate("/results", {
         state: { searchResults: data, query: searchQuery },

frontend/src/components/Layout/ListItem.tsx

@@ -1,10 +1,10 @@
 import React from "react";
 
 export interface ListItemProps {
-  type: "stream" | "category";
+  type: "stream" | "category" | "user";
   id: number;
   title: string;
-  streamer?: string;
+  username?: string;
   streamCategory?: string;
   viewers: number;
   thumbnail?: string;
@@ -15,13 +15,38 @@ export interface ListItemProps {
 const ListItem: React.FC<ListItemProps> = ({
   type,
   title,
-  streamer,
+  username,
   streamCategory,
   viewers,
   thumbnail,
   onItemClick,
   extraClasses = "",
 }) => {
+  if (type === "user") {
+    return (
+      <div className="p-4 pb-10">
+        <div
+          className={`group relative w-fit flex flex-col bg-blue-600 rounded-tl-xl rounded-xl min-h-[calc((20vw+20vh)/3)] max-w-[calc((20vw+20vh)/2)] justify-end items-center cursor-pointer mx-auto hover:bg-blue-800 z-50`}
+          onClick={onItemClick}
+        >
+          <img
+            src="/images/monkey.png"
+            alt={`user ${username}`}
+            className="rounded-xl max-w-[calc((20vw+20vh)/2)] border-[0.15em] border-purple-500 cursor-pointer"
+          />
+          <button className="text-[calc((2vw+2vh)/2)] font-bold hover:underline w-full py-2">
+            {title}
+          </button>
+
+          {title.includes("🔴") && (
+            <p className="absolute font-black bottom-5 opacity-0 group-hover:translate-y-full group-hover:opacity-100 group-hover:-bottom-1 transition-all">
+              Currently Live!
+            </p>
+          )}
+        </div>
+      </div>
+    );
+  }
   return (
     <div className="p-4">
       <div
@@ -41,7 +66,7 @@ const ListItem: React.FC<ListItemProps> = ({
         </div>
         <div className="p-3">
           <h3 className="font-semibold text-lg text-center">{title}</h3>
-          {type === "stream" && <p className="font-bold">{streamer}</p>}
+          {type === "stream" && <p className="font-bold">{username}</p>}
           {type === "stream" && (
             <p className="text-sm text-gray-300">{streamCategory}</p>
           )}

frontend/src/components/Layout/ListRow.tsx

@@ -5,32 +5,41 @@ import {
 } from "lucide-react";
 import "../../assets/styles/listRow.css";
 import ListItem, { ListItemProps } from "./ListItem";
+import { useNavigate } from "react-router-dom";
 
 interface ListRowProps {
+  variant?: "default" | "search";
   type: "stream" | "category" | "user";
   title?: string;
   description?: string;
   items: ListItemProps[];
-  wrap: boolean;
+  wrap?: boolean;
   onClick: (itemName: string) => void;
+  titleClickable?: boolean;
   extraClasses?: string;
   itemExtraClasses?: string;
+  amountForScroll?: number;
   children?: React.ReactNode;
 }
 
 // Row of entries
 const ListRow: React.FC<ListRowProps> = ({
+  variant = "default",
+  type,
   title = "",
   description = "",
   items,
-  wrap,
+  wrap = false,
+  titleClickable = false,
   onClick,
   extraClasses = "",
   itemExtraClasses = "",
+  amountForScroll = 4,
   children,
 }) => {
   const slider = useRef<HTMLDivElement>(null);
   const scrollAmount = window.innerWidth * 0.3;
+  const navigate = useNavigate();
 
   const slideRight = () => {
     if (!wrap && slider.current) {
@@ -44,17 +53,46 @@ const ListRow: React.FC<ListRowProps> = ({
     }
   };
 
+  const handleTitleClick = (type: string) => {
+    switch (type) {
+      case "stream":
+        break;
+      case "category":
+        navigate("/categories");
+        break;
+      case "user":
+        break;
+      default:
+        break;
+    }
+  };
+
   return (
     <div
-      className={`flex flex-col w-full space-y-4 py-6 text-white px-5 mx-2 mt-5 rounded-[1.5rem] transition-all ${extraClasses}`}
+      className={`${extraClasses} flex w-full rounded-[1.5rem] text-white transition-all ${
+        variant === "search"
+          ? "items-center"
+          : "flex-col space-y-4 py-6 px-5 mx-2 mt-5"
+      }`}
     >
-      <div className="space-y-1">
+      <div
-        <h2 className="text-2xl font-bold">{title}</h2>
+        className={`text-center ${
+          variant === "search" ? "min-w-fit px-auto w-[15vw]" : ""
+        }`}
+      >
+        <h2
+          className={`${
+            titleClickable ? "cursor-pointer hover:underline" : "cursor-default"
+          } text-2xl font-bold`}
+          onClick={titleClickable ? () => handleTitleClick(type) : undefined}
+        >
+          {title}
+        </h2>
         <p>{description}</p>
       </div>
 
-      <div className="relative overflow-hidden flex items-center z-0">
+      <div className="relative overflow-hidden flex flex-grow items-center z-0">
-        {!wrap && items.length > 4 && (
+        {!wrap && items.length > amountForScroll && (
           <>
             <ArrowLeftIcon
               onClick={slideLeft}
@@ -73,24 +111,24 @@ const ListRow: React.FC<ListRowProps> = ({
           ref={slider}
           className={`flex ${
             wrap ? "flex-wrap" : "overflow-x-scroll whitespace-nowrap"
-          } max-w-[95%] items-center justify-between scroll-smooth scrollbar-hide gap-5 mx-auto`}
+          } max-w-[95%] items-center justify-evenly w-full mx-auto scroll-smooth scrollbar-hide gap-5`}
         >
-
           {items.map((item) => (
             <ListItem
               key={`${item.type}-${item.id}`}
               id={item.id}
-              type={item.type}
+              type={type}
               title={item.title}
-              streamer={item.type === "stream" ? item.streamer : undefined}
+              username={item.type === "category" ? undefined : item.username}
               streamCategory={
                 item.type === "stream" ? item.streamCategory : undefined
               }
               viewers={item.viewers}
               thumbnail={item.thumbnail}
               onItemClick={() =>
-                item.type === "stream" && item.streamer
+                (item.type === "stream" || item.type === "user") &&
-                  ? onClick?.(item.streamer)
+                item.username
+                  ? onClick?.(item.username)
                   : onClick?.(item.title)
               }
               extraClasses={`${itemExtraClasses} min-w-[20vw]`}

frontend/src/components/Layout/Logo.tsx

@@ -2,17 +2,21 @@ import React from "react";
 
 interface LogoProps {
   variant?: "home" | "default";
+  extraClasses?: string;
 }
 
-const Logo: React.FC<LogoProps> = ({ variant = "default" }) => {
+const Logo: React.FC<LogoProps> = ({
+  variant = "default",
+  extraClasses = "",
+}) => {
   const gradient = "text-transparent group-hover:mx-1 transition-all";
   return (
     <div
       id="logo"
-      className={`group py-3 cursor-pointer text-center font-bold hover:scale-110 transition-all ${
+      className={`${extraClasses} group py-3 cursor-pointer text-center font-bold hover:scale-110 transition-all ${
         variant === "home" ? "text-[12vh]" : "text-[4vh]"
       }`}
-      onClick={() => {window.location.href = "/";}}
+      onClick={() => (window.location.href = "/")}
     >
       <h6 className="text-sm bg-gradient-to-br from-blue-400 via-green-500 to-indigo-500 font-black text-transparent bg-clip-text">
         Go on, have a...

frontend/src/components/Navigation/Sidebar.tsx

@@ -104,7 +104,7 @@ const Sidebar: React.FC<SideBarProps> = ({ extraClasses }) => {
           <ul className="mt-2 space-y-2">
             {followedStreamers.map((streamer) => (
               <li
-                key={streamer.user_id}
+                key={`streamer-${streamer.user_id}`}
                 className="cursor-pointer bg-black py-2 rounded-lg text-white hover:text-purple-500 transition-colors"
                 onClick={() => navigate(`/user/${streamer.username}`)}
               >

frontend/src/pages/HomePage.tsx

@@ -66,6 +66,7 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         items={categories}
         wrap={false}
         onClick={handleCategoryClick}
+        titleClickable={true}
         extraClasses="bg-[var(--recommend)]"
       >
         <Button

frontend/src/pages/ResultsPage.tsx

@@ -1,82 +1,143 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
+import Button from "../components/Input/Button";
+import SearchBar from "../components/Input/SearchBar";
+import ListRow from "../components/Layout/ListRow";
+import Logo from "../components/Layout/Logo";
 
 const ResultsPage: React.FC = ({}) => {
+  const [overflow, setOverflow] = useState(false);
   const location = useLocation();
   const navigate = useNavigate();
   const { searchResults, query } = location.state || {
-    searchResults: null,
+    searchResults: { categories: [], users: [], streams: [] },
     query: "",
   };
-  if (!searchResults) {
+
+  useEffect(() => {
+    const checkHeight = () => {
+      setOverflow(
+        document.documentElement.scrollHeight + 20 > window.innerHeight
+      );
+    };
+
+    checkHeight();
+    window.addEventListener("resize", checkHeight);
+
+    return () => window.removeEventListener("resize", checkHeight);
+  }, []);
+
+  if (
+    searchResults.categories.length === 0 &&
+    searchResults.users.length === 0 &&
+    searchResults.streams.length === 0
+  ) {
     return (
-      <div className="p-4">
+      <div className="flex flex-col items-center justify-evenly min-h-[70vh] my-[15vh] p-4">
-        <h2 className="text-xl font-bold">No results found for "{query}"</h2>
+        <h1 className="text-3xl font-bold mb-4">
-        <button
+          Search results for "{query}"
-          onClick={() => navigate(-1)}
+        </h1>
-          className="mt-4 px-4 py-2 bg-purple-500 text-white rounded"
+        <SearchBar value={query} />
-        >
+        <h3 className="text-2xl text-gray-400">Nothing Found</h3>
-          Go Back
+        <div className="flex gap-8">
-        </button>
+          <Button onClick={() => navigate(-1)}>Go Back</Button>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="p-4">
+    <div
-      <h2 className="text-xl font-bold mb-4">Search Results for "{query}"</h2>
+      id="results-page"
-
+      className="flex flex-col items-center justify-evenly min-h-[96vh] p-4"
-      <div>
-        <h3 className="text-lg font-semibold">Categories</h3>
-        <ul>
-          {searchResults.categories.map((category: any, index: number) => (
-            <li
-              key={index}
-              className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => navigate(`/category/${category.category_name}`)}
     >
-              {category.category_name}
+      <Logo extraClasses="absolute top-[5vh] left-0" />
-            </li>
+      <h1 className="text-3xl font-bold mb-4">Search results for "{query}"</h1>
-          ))}
+      <SearchBar value={query} />
-        </ul>
+
+      <div id="results" className="flex flex-col flex-grow w-full">
+        {searchResults.streams.length > 0 && (
+          <ListRow
+            variant="search"
+            type="stream"
+            items={searchResults.streams.map((stream: any) => ({
+              id: stream.user_id,
+              type: "stream",
+              title: stream.title,
+              username: stream.username,
+              streamCategory: stream.category_name,
+              viewers: stream.num_viewers,
+              thumbnail: stream.thumbnail_url,
+            }))}
+            title="Streams"
+            onClick={(streamer_name: string) =>
+              (window.location.href = `/${streamer_name}`)
+            }
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+            amountForScroll={3}
+          />
+        )}
+
+        {searchResults.categories.length > 0 && (
+          <ListRow
+            variant="search"
+            type="category"
+            items={searchResults.categories.map((category: any) => ({
+              id: category.category_id,
+              type: "category",
+              title: category.category_name,
+              viewers: 0,
+              thumbnail: `/images/category_thumbnails/${category.category_name
+                .toLowerCase()
+                .replace(/ /g, "_")}.webp`,
+            }))}
+            title="Categories"
+            onClick={(category_name: string) =>
+              navigate(`/category/${category_name}`)
+            }
+            titleClickable={true}
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+            amountForScroll={3}
+          />
+        )}
+
+        {searchResults.users.length > 0 && (
+          <ListRow
+            variant="search"
+            type="user"
+            items={searchResults.users.map((user: any) => ({
+              id: user.user_id,
+              type: "user",
+              title: `${user.is_live ? "🔴" : ""} ${user.username}`,
+              viewers: 0,
+              username: user.username,
+              thumbnail: user.profile_picture,
+            }))}
+            title="Users"
+            onClick={(username: string) =>
+              (window.location.href = `/user/${username}`)
+            }
+            amountForScroll={3}
+            itemExtraClasses="min-w-[calc(12vw+12vh/2)]"
+          />
+        )}
       </div>
 
-      <div>
+      <div
-        <h3 className="text-lg font-semibold">Users</h3>
+        className={`${
-        <ul>
+          overflow && "absolute top-[5vh] right-[2vw]"
-          {searchResults.users.map((user: any, index: number) => (
+        } flex gap-[2vw]`}
-            <li
-              key={index}
-              className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => window.location.href = `/user/${user.username}`}
       >
-              {user.is_live ? "🔴" : ""} {user.username}
+        <Button
-            </li>
+          extraClasses="text-[2vw]"
-          ))}
+          onClick={() => (window.location.href = "/")}
-        </ul>
-      </div>
-
-      <div>
-        <h3 className="text-lg font-semibold">Streams</h3>
-        <ul>
-          {searchResults.streams.map((stream: any, index: number) => (
-            <li
-              key={index}
-              className="border p-2 rounded my-2 cursor-pointer"
-              onClick={() => window.location.href = `/${stream.username}`}
-            >
-              {stream.title} - {stream.username} - {stream.num_viewers} viewers
-            </li>
-          ))}
-        </ul>
-      </div>
-
-      <button
-        onClick={() => navigate(-1)}
-        className="mt-4 px-4 py-2 bg-purple-500 text-white rounded"
         >
+          Go Home
+        </Button>
+        <Button extraClasses="text-[2vw]" onClick={() => navigate(-1)}>
           Go Back
-      </button>
+        </Button>
+      </div>
     </div>
   );
 };

frontend/src/pages/UserPage.tsx

@@ -9,7 +9,6 @@ import { useNavigate } from "react-router-dom";
 import Button, { EditButton } from "../components/Input/Button";
 import DynamicPageContent from "../components/Layout/DynamicPageContent";
 
-
 interface UserProfileData {
   id: number;
   username: string;
@@ -110,23 +109,23 @@ const UserPage: React.FC = () => {
   }
   return (
     <DynamicPageContent
-      className={`min-h-screen ${profileData.isLive
+      className={`min-h-screen ${
+        profileData.isLive
           ? "bg-gradient-radial from-[#ff00f1] via-[#0400ff] to-[#2efd2d]"
           : bgColors[userPageVariant]
       } text-white flex flex-col`}
     >
-
       <div className="flex justify-evenly justify-self-center items-center h-full px-4 py-8 max-w-[80vw] w-full">
 
         <div className="grid grid-cols-4 grid-rows-[0.1fr_4fr] w-full gap-8">
           {/* Profile Section - TOP  */}
 
-
+          <div
-          <div id="profile"
+            id="profile"
             className="col-span-4 row-span-1 h-full bg-[var(--user-bg)] 
         rounded-[30px] p-3 shadow-lg 
-        relative flex flex-col items-center">
+        relative flex flex-col items-center"
-
+          >
             {/* Border Overlay (Always on Top) */}
             <div className="absolute left-[0px] inset-0 border-[5px] border-[var(--user-borderBg)] rounded-[20px] z-20"></div>
 
@@ -134,15 +133,16 @@ const UserPage: React.FC = () => {
             {/* Background Box */}
             <div className="absolute flex top-0 left-[0.55px] w-[99.9%] h-[5vh] min-h-[1em] max-h-[10em] rounded-t-[25.5px] 
                  bg-[var(--user-box)] z-10 flex-shrink justify-center"
-              style={{ boxShadow: 'var(--user-box-shadow)' }}
+              style={{ boxShadow: "var(--user-box-shadow)" }}
             >
               <div className="absolute top-4 w-[99.8%] h-[1.5vh] min-h-[10px] max-h-[2em]  bg-[var(--user-box-strip)]"></div>
-
             </div>
             {/* Profile Picture */}
-            <div className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
+            <div
+              className="relative -top-[40px] sm:-top-[90px] w-[16vw] h-[16vw] sm:w-[20vw] sm:h-[20vw] max-w-[10em] max-h-[10em]
                rounded-full overflow-hidden flex-shrink-0 border-4 border-[var(--user-pfp-border)] inset-0 z-20"
-              style={{ boxShadow: 'var(--user-pfp-border-shadow)' }}>
+              style={{ boxShadow: "var(--user-pfp-border-shadow)" }}
+            >
               <img
                 src="/images/monkey.png"
                 alt={`${profileData.username}'s profile`}
@@ -156,10 +156,6 @@ const UserPage: React.FC = () => {
               {profileData.username}
             </h1>
 
-
-
-
-
             {/* Follower Count  */}
             {userPageVariant === "streamer" && (
               <>
@@ -178,9 +174,7 @@ const UserPage: React.FC = () => {
                 {!isFollowing ? (
                   <Button
                     extraClasses="w-full bg-purple-700 hover:bg-[#28005e]"
-                    onClick={() =>
+                    onClick={() => followUser(profileData.id, setShowAuthModal)}
-                      followUser(profileData.id, setShowAuthModal)
-                    }
                   >
                     Follow
                   </Button>
@@ -194,7 +188,6 @@ const UserPage: React.FC = () => {
                     Unfollow
                   </Button>
                 )}
-
               </>
             )}
           </div>
@@ -207,8 +200,12 @@ const UserPage: React.FC = () => {
             <small className="text-green-400">{userPageVariant.toUpperCase()}</small>
 
             <div className="mt-6 text-center">
-              <h2 className="text-xl font-semibold mb-3">About {profileData.username}</h2>
+              <h2 className="text-xl font-semibold mb-3">
-              <p className="text-gray-300 whitespace-pre-wrap">{profileData.bio}</p>
+                About {profileData.username}
+              </h2>
+              <p className="text-gray-300 whitespace-pre-wrap">
+                {profileData.bio}
+              </p>
             </div>
           </div>
 
@@ -298,13 +295,9 @@ const UserPage: React.FC = () => {
             </div>
 
           </div>
-
-
         </div>
       </div>
       {showAuthModal && <AuthModal onClose={() => setShowAuthModal(false)} />}
-
-
     </DynamicPageContent>
   );
 };

web_server/blueprints/search_bar.py

@@ -41,10 +41,11 @@ def search_results():
 
     # 3 streams
     streams = db.fetchall("""
-                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, s.category_id, u.username
+                    SELECT bm25(stream_fts) AS score, s.user_id, s.title, s.num_viewers, c.category_name, u.username
                     FROM streams AS s
                     INNER JOIN stream_fts AS f ON s.user_id = f.user_id
                     INNER JOIN users AS u ON s.user_id = u.user_id
+                    INNER JOIN categories AS c ON s.category_id = c.category_id
                     WHERE f.title LIKE '%' || ? || '%'
                     ORDER BY score ASC
                     LIMIT 3;
@@ -54,7 +55,7 @@ def search_results():
 
     print(query, streams, users, categories, flush=True)
     
-    return jsonify({"categories": categories, "users": users, "streams": streams})
+    return jsonify({"streams": streams, "categories": categories, "users": users})
 
 @search_bp.route("/search/categories", methods=["GET", "POST"])
 def search_categories():