dylan/gander
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

REFACTOR: Align icon imports;

Browse Source 
REFACTOR: Remove obsolete `EditButton` component
This commit is contained in:
Chris-1010
2025-02-27 12:28:44 +00:00
parent eb65e71cfb
commit cba900f8e0
14 changed files with 162 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/components/Auth/AuthModal.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import { ToggleButton } from "../Input/Button";
import { LogIn as LogInIcon, User as UserIcon } from "lucide-react";
import { LogInIcon, UserIcon } from "lucide-react";
import LoginForm from "./LoginForm";
import RegisterForm from "./RegisterForm";
import ForgotPasswordForm from "./ForgotPasswordForm";

2
frontend/src/components/Auth/LoginForm.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import Input from "../Input/Input";
import Button, { ToggleButton } from "../Input/Button";
import Button from "../Input/Button";
import { useAuth } from "../../context/AuthContext";
import GoogleLogin from "./OAuth";
import { CircleHelp as ForgotIcon } from "lucide-react";

17
frontend/src/components/Input/Button.tsx
View File

@@ -23,23 +23,6 @@ const Button: React.FC<ButtonProps> = ({
);
};
interface EditButtonProps extends ButtonProps {}
export const EditButton: React.FC<EditButtonProps> = ({
children = "",
extraClasses = "",
onClick,
}) => {
return (
<button
className={`${extraClasses} p-[0.5em] bg-yellow-500 hover:bg-black rounded-[3rem] border-2 border-white shadow-lg transition-all duration-300`}
onClick={onClick}
>
{children}
</button>
);
};
interface ToggleButtonProps extends ButtonProps {
toggled?: boolean;
}

2
frontend/src/components/Input/SearchBar.tsx
View File

@@ -1,6 +1,6 @@
import React, { useState } from "react";
import Input from "./Input";
import { Search as SearchIcon } from "lucide-react";
import { SearchIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";
interface SearchBarProps {

2
frontend/src/components/Layout/Footer.tsx
View File

@@ -1,4 +1,4 @@
import { Mail as MailIcon } from "lucide-react";
import { MailIcon } from "lucide-react";
import { useState } from "react";
const Footer = () => {

4
frontend/src/components/Layout/ListRow.tsx
View File

@@ -1,6 +1,6 @@
import {
ArrowLeft as ArrowLeftIcon,
ArrowRight as ArrowRightIcon,
ArrowLeftIcon,
ArrowRightIcon,
} from "lucide-react";
import React, {
forwardRef,

6
frontend/src/components/Navigation/Navbar.tsx
View File

@@ -2,9 +2,9 @@ import React, { useEffect } from "react";
import Logo from "../Layout/Logo";
import Button, { ToggleButton } from "../Input/Button";
import {
LogIn as LogInIcon,
LogOut as LogOutIcon,
Settings as SettingsIcon,
LogInIcon,
LogOutIcon,
SettingsIcon,
Radio as LiveIcon,
} from "lucide-react";
import SearchBar from "../Input/SearchBar";

2
frontend/src/components/Navigation/Sidebar.tsx
View File

@@ -1,5 +1,5 @@
import React, { useEffect, useState } from "react";
import { Sidebar as SidebarIcon } from "lucide-react";
import { SidebarIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useAuth } from "../../context/AuthContext";
import { useSidebar } from "../../context/SidebarContext";

12
frontend/src/components/Settings/ThemeSetting.tsx
View File

@@ -1,38 +1,38 @@
import React from "react";
import { Sun, Moon, Droplet, Leaf, Flame } from "lucide-react";
import { SunIcon, MoonIcon, DropletIcon, LeafIcon, FlameIcon } from "lucide-react";
import { useTheme } from "../../context/ThemeContext";
const themeConfig = {
light: {
icon: Sun,
icon: SunIcon,
color: "text-yellow-400",
background: "bg-white",
hoverBg: "hover:bg-gray-100",
label: "Light Theme",
},
dark: {
icon: Moon,
icon: MoonIcon,
color: "text-white",
background: "bg-gray-800",
hoverBg: "hover:bg-gray-700",
label: "Dark Theme",
},
blue: {
icon: Droplet,
icon: DropletIcon,
color: "text-blue-500",
background: "bg-blue-50",
hoverBg: "hover:bg-blue-100",
label: "Blue Theme",
},
green: {
icon: Leaf,
icon: LeafIcon,
color: "text-green-500",
background: "bg-green-50",
hoverBg: "hover:bg-green-100",
label: "Green Theme",
},
orange: {
icon: Flame,
icon: FlameIcon,
color: "text-orange-500",
background: "bg-orange-50",
hoverBg: "hover:bg-orange-100",

4
frontend/src/components/Stream/ChatPanel.tsx
View File

@@ -6,7 +6,7 @@ import { useAuthModal } from "../../hooks/useAuthModal";
import { useAuth } from "../../context/AuthContext";
import { useSocket } from "../../context/SocketContext";
import { useChat } from "../../context/ChatContext";
import { ArrowLeftFromLineIcon, ArrowRightFromLine } from "lucide-react";
import { ArrowLeftFromLineIcon, ArrowRightFromLineIcon } from "lucide-react";
interface ChatMessage {
chatter_username: string;
@@ -149,7 +149,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
onClick={toggleChat}
className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[3.3vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[50] duration-[0.3s] transition-all`}
>
{showChat ? <ArrowRightFromLine /> : <ArrowLeftFromLineIcon />}
{showChat ? <ArrowRightFromLineIcon /> : <ArrowLeftFromLineIcon />}
<small className={`absolute ${showChat ? "right-0 group-hover:-right-[4vw]" : "left-0 group-hover:-left-[4vw]"} p-1 rounded-md group-hover:bg-white/10 w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}>
Press C

8
frontend/src/pages/FollowedCategories.tsx
View File

@@ -1,11 +1,9 @@
import React, { useState, useEffect, useRef } from "react";
import { useAuth } from "../context/AuthContext";
import { useSidebar } from "../context/SidebarContext";
import { CircleMinus, CirclePlus, Sidebar as SidebarIcon } from "lucide-react";
import { CircleMinus as RemoveIcon, CirclePlus as AddIcon } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useParams } from "react-router-dom";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import { fetchContentOnScroll } from "../hooks/fetchContentOnScroll";
import Button from "../components/Input/Button";
import { useCategoryFollow } from "../hooks/useCategoryFollow";
import { ListItemProps as StreamData } from "../components/Layout/ListItem";
@@ -125,9 +123,9 @@ const FollowedCategories: React.FC<FollowedCategoryProps> = ({ extraClasses = ""
onClick={() => toggleFollow(category.category_id, category.category_name)}
>
{category.isFollowing ? (
<CircleMinus className="text-white w-5 h-5" />
<RemoveIcon className="text-white w-5 h-5" />
) : (
<CirclePlus className="text-white w-5 h-5" />
<AddIcon className="text-white w-5 h-5" />
)}
</Button>

220
frontend/src/pages/Following.tsx
View File

@@ -8,122 +8,136 @@ import { CategoryType } from "../types/CategoryType";
// Define TypeScript interfaces
interface Streamer {
user_id: number;
username: string;
user_id: number;
username: string;
}
interface FollowingProps {
extraClasses?: string;
extraClasses?: string;
}
const Following: React.FC<FollowingProps> = ({ extraClasses = "" }) => {
const { showSideBar, setShowSideBar } = useSidebar();
const navigate = useNavigate();
const { username, isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
const { showSideBar, setShowSideBar } = useSidebar();
const navigate = useNavigate();
const { username, isLoggedIn } = useAuth();
const [followedStreamers, setFollowedStreamers] = useState<Streamer[]>([]);
// Fetch followed streamers
useEffect(() => {
const fetchFollowedStreamers = async () => {
try {
const response = await fetch("/api/user/following");
if (!response.ok) throw new Error("Failed to fetch followed streamers");
const data = await response.json();
setFollowedStreamers(data.streamers || []);
} catch (error) {
console.error("Error fetching followed streamers:", error);
}
};
if (isLoggedIn) {
fetchFollowedStreamers();
}
}, [isLoggedIn]);
// Handle sidebar toggle
const handleSideBar = () => {
setShowSideBar(!showSideBar);
// Fetch followed streamers
useEffect(() => {
const fetchFollowedStreamers = async () => {
try {
const response = await fetch("/api/user/following");
if (!response.ok) throw new Error("Failed to fetch followed streamers");
const data = await response.json();
setFollowedStreamers(data.streamers || []);
} catch (error) {
console.error("Error fetching followed streamers:", error);
}
};
return (
<>
{/* Sidebar Toggle Button */}
<ToggleButton
onClick={handleSideBar}
extraClasses={`absolute group text-[1rem] top-[9vh] ${showSideBar ? "left-[16vw] duration-[0.5s]" : "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar}
if (isLoggedIn) {
fetchFollowedStreamers();
}
}, [isLoggedIn]);
// Handle sidebar toggle
const handleSideBar = () => {
setShowSideBar(!showSideBar);
};
return (
<>
{/* Sidebar Toggle Button */}
<ToggleButton
onClick={handleSideBar}
extraClasses={`absolute group text-[1rem] top-[9vh] ${
showSideBar
? "left-[16vw] duration-[0.5s]"
: "left-[20px] duration-[1s]"
} ease-in-out cursor-pointer z-[50]`}
toggled={showSideBar}
>
<SidebarIcon className="h-[2vw] w-[2vw]" />
{showSideBar && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press S
</small>
)}
</ToggleButton>
{/* Sidebar Container */}
<div
id="sidebar"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${
showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
>
{/* Profile Info */}
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
<img
src="/images/monkey.png"
alt="profile picture"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
/>
<div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
Logged in as
</h5>
<button
className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)}
>
<SidebarIcon className="h-[2vw] w-[2vw]" />
<div className="text-[var(--sideBar-profile-text)]">
{username}
</div>
</button>
</div>
</div>
{showSideBar && (
<small className="absolute flex items-center top-0 ml-4 left-0 h-full w-full my-auto group-hover:left-full opacity-0 group-hover:opacity-100 text-white transition-all delay-200">
Press S
</small>
)}
</ToggleButton>
{/* Following Section */}
<div
id="following"
className="flex flex-col flex-grow justify-evenly p-4 gap-4"
>
<div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
onMouseEnter={(e) =>
(e.currentTarget.style.boxShadow = "var(--follow-shadow)")
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
Following
</h1>
</div>
{/* Sidebar Container */}
<div
id="sidebar"
className={`top-0 left-0 w-screen h-screen overflow-x-hidden flex flex-col bg-[var(--sideBar-bg)] text-[var(--sideBar-text)] text-center overflow-y-auto scrollbar-hide
transition-all duration-500 ease-in-out ${showSideBar ? "translate-x-0" : "-translate-x-full"
} ${extraClasses}`}
>
{/* Profile Info */}
<div className="flex flex-row items-center border-b-4 border-[var(--profile-border)] justify-evenly bg-[var(--sideBar-profile-bg)] py-[1em]">
<img
src="/images/monkey.png"
alt="profile picture"
className="w-[3em] h-[3em] rounded-full border-[0.15em] border-purple-500 cursor-pointer"
onClick={() => navigate(`/user/${username}`)}
/>
<div className="text-center flex flex-col items-center justify-center">
<h5 className="font-thin text-[0.85rem] cursor-default text-[var(--sideBar-profile-text)]">
Logged in as
</h5>
<button
className="font-black text-[1.4rem] hover:underline"
onClick={() => navigate(`/user/${username}`)}
>
<div className="text-[var(--sideBar-profile-text)]">{username}</div>
</button>
</div>
</div>
{/* Following Section */}
<div id="following" className="flex flex-col flex-grow justify-evenly p-4 gap-4">
<div
className="bg-[var(--follow-bg)] rounded-[1em] hover:scale-105 transition-all ease-in-out duration-300"
onMouseEnter={(e) => (e.currentTarget.style.boxShadow = "var(--follow-shadow)")}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<h1 className="text-[2vw] font-bold text-2xl p-[0.75rem] cursor-default">
Following
</h1>
</div>
{/* Streamers Followed */}
<div id="streamers-followed" className="flex flex-col flex-grow items-center">
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
Streamers
</h2>
<div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => (
<button
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
</button>
))}
</div>
</div>
</div>
{/* Streamers Followed */}
<div
id="streamers-followed"
className="flex flex-col flex-grow items-center"
>
<h2 className="border-b-4 border-t-4 w-[125%] text-2xl cursor-default">
Streamers
</h2>
<div className="flex flex-col flex-grow justify-evenly w-full">
{followedStreamers.map((streamer) => (
<button
key={`streamer-${streamer.username}`}
className="cursor-pointer bg-black w-full py-2 border border-[--text-color] rounded-lg text-white hover:text-purple-500 transition-colors"
onClick={() => navigate(`/user/${streamer.username}`)}
>
{streamer.username}
</button>
))}
</div>
</>
);
</div>
</div>
</div>
</>
);
};
export default Following;

4
frontend/src/pages/StreamDashboardPage.tsx
View File

@@ -3,7 +3,7 @@ import DynamicPageContent from "../components/Layout/DynamicPageContent";
import Button from "../components/Input/Button";
import Input from "../components/Input/Input";
import { useCategories } from "../hooks/useContent";
import { X as XIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
import { X as CloseIcon, Eye as ShowIcon, EyeOff as HideIcon } from "lucide-react";
import { useAuth } from "../context/AuthContext";
import { debounce } from "lodash";
import VideoPlayer from "../components/Stream/VideoPlayer";
@@ -365,7 +365,7 @@ const StreamDashboardPage: React.FC = () => {
onClick={clearThumbnail}
className="absolute right-0 top-0 p-1 bg-red-500 rounded-full hover:bg-red-600 transition-colors"
>
<XIcon size={16} className="text-white" />
<CloseIcon size={16} className="text-white" />
</button>
)}
</div>

35
frontend/src/pages/UserPage.tsx
View File

@@ -5,11 +5,11 @@ import { useAuth } from "../context/AuthContext";
import { useParams } from "react-router-dom";
import { useFollow } from "../hooks/useFollow";
import { useNavigate } from "react-router-dom";
import Button, { EditButton } from "../components/Input/Button";
import Button from "../components/Input/Button";
import DynamicPageContent from "../components/Layout/DynamicPageContent";
import LoadingScreen from "../components/Layout/LoadingScreen";
import { StreamListItem } from "../components/Layout/ListItem";
import { Camera } from "lucide-react";
import { CameraIcon } from "lucide-react";
interface UserProfileData {
id: number;
@@ -40,7 +40,8 @@ const UserPage: React.FC = () => {
const bgColors = {
personal: "",
streamer: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 0, 0.5)]", // offline streamer
streamer:
"bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 0, 0.5)]", // offline streamer
user: "bg-gradient-radial from-[rgba(255, 0, 241, 0.5)] via-[rgba(4, 0, 255, 0.5)] to-[rgba(255, 0, 241, 0.5)]",
admin:
"bg-gradient-to-r from-[rgba(255,100,100,0.5)] via-transparent to-[rgba(100,100,255,0.5)]",
@@ -107,12 +108,12 @@ const UserPage: React.FC = () => {
return (
<DynamicPageContent
className={`min-h-screen ${profileData.isLive
? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
: bgColors[userPageVariant]
} text-white flex flex-col`}
className={`min-h-screen ${
profileData.isLive
? "bg-gradient-radial from-[#1a6600] via-[#66ff66] to-[#003900]"
: 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 */}
@@ -140,7 +141,9 @@ const UserPage: React.FC = () => {
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)" }}
>
<label className={`relative ${isUser ? 'cursor-pointer group' : ''}`}>
<label
className={`relative ${isUser ? "cursor-pointer group" : ""}`}
>
<img
src="/images/monkey.png"
alt={`${profileData.username}'s profile`}
@@ -151,13 +154,15 @@ const UserPage: React.FC = () => {
<>
<div className="absolute inset-0 bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full"></div>
<div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
<Camera size={32} className="text-white bg-black/50 p-1 rounded-full" />
<CameraIcon
size={32}
className="text-white bg-black/50 p-1 rounded-full"
/>
</div>
<input type="file" className="hidden" />
</>
)}
</label>
</div>
{/* Username - Now Directly Below PFP */}
@@ -284,7 +289,8 @@ const UserPage: React.FC = () => {
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<button className="text-[var(--follow-text)] whitespace-pre-wrap"
<button
className="text-[var(--follow-text)] whitespace-pre-wrap"
onClick={() => navigate(`/user/${username}/following`)}
>
Following
@@ -312,10 +318,11 @@ const UserPage: React.FC = () => {
}
onMouseLeave={(e) => (e.currentTarget.style.boxShadow = "none")}
>
<button onClick={() => navigate(`/user/${username}/yourCategories`)}>
<button
onClick={() => navigate(`/user/${username}/yourCategories`)}
>
Categories
</button>
</div>
</div>
</div>