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

REFACTOR: Styles;

Browse Source 
UPDATE: Remove shortcut tips teleporting on toggle;
FIX: Clicking on a category on `AllCategoriesPage` now correctly routes;
REFACTOR: Update `StreamType` to match backend return structure;
This commit is contained in:
Chris-1010
2025-02-27 15:30:12 +00:00
parent 56985f8f6a
commit 53cdb87004
6 changed files with 52 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -30,6 +30,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
const [messages, setMessages] = useState<ChatMessage[]>([]);
const [inputMessage, setInputMessage] = useState("");
const chatContainerRef = useRef<HTMLDivElement>(null);
const [justToggled, setJustToggled] = useState(false);
// Join chat room when component mounts
useEffect(() => {
@@ -114,6 +115,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
const toggleChat = () => {
setShowChat(!showChat);
setJustToggled(true);
setTimeout(() => setJustToggled(false), 750);
};
const sendChat = () => {
@@ -147,11 +150,11 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
{/* Toggle Button for Chat */}
<button
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`}
className={`group cursor-pointer p-2 hover:bg-gray-800 rounded-md absolute top-[1vh] left-[1vw] ${showChat ? "" : "delay-[0.75s] -translate-x-[4vw]"} text-[1rem] text-purple-500 flex items-center flex-nowrap z-[20] duration-[0.3s] transition-all`}
>
{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`}>
<small className={`absolute ${showChat ? justToggled ? "left-0 group-hover:-left-[4vw] group-hover:bg-white/10" : "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : justToggled ? "right-0 group-hover:-right-[5vw] group-hover:bg-red-500/80" : "left-0 group-hover:-left-[4vw] group-hover:bg-white/10"} p-1 rounded-md w-fit opacity-0 group-hover:opacity-100 text-white transition-all`}>
Press C
</small>
</button>