From 0b05c669a09eca637c9a2910de13001729850832 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 5 Dec 2023 10:33:24 -0800
Subject: [PATCH 1/3] gear icon appear on hover for workspace

---
 .../Sidebar/ActiveWorkspaces/index.jsx        | 35 +++++++++++++++----
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index 4e423a6dd91..b1f39bcb9a1 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -14,11 +14,11 @@ import useUser from "../../../hooks/useUser";
 export default function ActiveWorkspaces() {
   const { slug } = useParams();
   const [loading, setLoading] = useState(true);
-  const [settingHover, setSettingHover] = useState(false);
+  const [settingHover, setSettingHover] = useState({});
   const [workspaces, setWorkspaces] = useState([]);
   const [selectedWs, setSelectedWs] = useState(null);
+  const [hoverStates, setHoverStates] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
-  const { user } = useUser();
 
   useEffect(() => {
     async function getWorkspaces() {
@@ -29,6 +29,22 @@ export default function ActiveWorkspaces() {
     getWorkspaces();
   }, []);
 
+  const handleMouseEnter = (workspaceId) => {
+    setHoverStates((prev) => ({ ...prev, [workspaceId]: true }));
+  };
+
+  const handleMouseLeave = (workspaceId) => {
+    setHoverStates((prev) => ({ ...prev, [workspaceId]: false }));
+  };
+
+  const handleGearMouseEnter = (workspaceId) => {
+    setSettingHover((prev) => ({ ...prev, [workspaceId]: true }));
+  };
+
+  const handleGearMouseLeave = (workspaceId) => {
+    setSettingHover((prev) => ({ ...prev, [workspaceId]: false }));
+  };
+
   if (loading) {
     return (
       <>
@@ -48,10 +64,14 @@ export default function ActiveWorkspaces() {
     <>
       {workspaces.map((workspace) => {
         const isActive = workspace.slug === slug;
+        const isHovered = hoverStates[workspace.id];
+        const isGearHovered = settingHover[workspace.id];
         return (
           <div
             key={workspace.id}
             className="flex gap-x-2 items-center justify-between"
+            onMouseEnter={() => handleMouseEnter(workspace.id)}
+            onMouseLeave={() => handleMouseLeave(workspace.id)}
           >
             <a
               href={isActive ? null : paths.workspace.chat(workspace.slug)}
@@ -82,17 +102,18 @@ export default function ActiveWorkspaces() {
                   </p>
                 </div>
                 <button
-                  onMouseEnter={() => setSettingHover(true)}
-                  onMouseLeave={() => setSettingHover(false)}
-                  onClick={() => {
+                  onClick={(e) => {
+                    e.preventDefault();
                     setSelectedWs(workspace);
                     showModal();
                   }}
+                  onMouseEnter={() => handleGearMouseEnter(workspace.id)}
+                  onMouseLeave={() => handleGearMouseLeave(workspace.id)}
                   className="rounded-md flex items-center justify-center text-white ml-auto"
                 >
                   <GearSix
-                    weight={settingHover ? "fill" : "regular"}
-                    hidden={!isActive || user?.role === "default"}
+                    weight={isGearHovered ? "fill" : "regular"}
+                    hidden={!isActive && !isHovered}
                     className="h-[20px] w-[20px] transition-all duration-300"
                   />
                 </button>

From 6f6f6e262685e82db69935dc85fd99b8d35ead1f Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 5 Dec 2023 14:37:30 -0800
Subject: [PATCH 2/3] put back user role check for default

---
 frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index b1f39bcb9a1..ed73edcb51d 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -19,6 +19,7 @@ export default function ActiveWorkspaces() {
   const [selectedWs, setSelectedWs] = useState(null);
   const [hoverStates, setHoverStates] = useState({});
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
+  const { user } = useUser();
 
   useEffect(() => {
     async function getWorkspaces() {
@@ -113,7 +114,7 @@ export default function ActiveWorkspaces() {
                 >
                   <GearSix
                     weight={isGearHovered ? "fill" : "regular"}
-                    hidden={!isActive && !isHovered}
+                    hidden={(!isActive && !isHovered) || user?.role === "default"}
                     className="h-[20px] w-[20px] transition-all duration-300"
                   />
                 </button>

From 28d11fac1dda65f532c699092661a85a095e7052 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Tue, 5 Dec 2023 15:58:33 -0800
Subject: [PATCH 3/3] wrap in callback

---
 .../Sidebar/ActiveWorkspaces/index.jsx        | 23 +++++++++++--------
 .../ChatContainer/ChatHistory/index.jsx       |  2 +-
 2 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
index ed73edcb51d..fe14bf9f2ca 100644
--- a/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
+++ b/frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useCallback } from "react";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import Workspace from "../../../models/workspace";
@@ -30,21 +30,21 @@ export default function ActiveWorkspaces() {
     getWorkspaces();
   }, []);
 
-  const handleMouseEnter = (workspaceId) => {
+  const handleMouseEnter = useCallback((workspaceId) => {
     setHoverStates((prev) => ({ ...prev, [workspaceId]: true }));
-  };
+  }, []);
 
-  const handleMouseLeave = (workspaceId) => {
+  const handleMouseLeave = useCallback((workspaceId) => {
     setHoverStates((prev) => ({ ...prev, [workspaceId]: false }));
-  };
+  }, []);
 
-  const handleGearMouseEnter = (workspaceId) => {
+  const handleGearMouseEnter = useCallback((workspaceId) => {
     setSettingHover((prev) => ({ ...prev, [workspaceId]: true }));
-  };
+  }, []);
 
-  const handleGearMouseLeave = (workspaceId) => {
+  const handleGearMouseLeave = useCallback((workspaceId) => {
     setSettingHover((prev) => ({ ...prev, [workspaceId]: false }));
-  };
+  }, []);
 
   if (loading) {
     return (
@@ -103,6 +103,7 @@ export default function ActiveWorkspaces() {
                   </p>
                 </div>
                 <button
+                  type="button"
                   onClick={(e) => {
                     e.preventDefault();
                     setSelectedWs(workspace);
@@ -114,7 +115,9 @@ export default function ActiveWorkspaces() {
                 >
                   <GearSix
                     weight={isGearHovered ? "fill" : "regular"}
-                    hidden={(!isActive && !isHovered) || user?.role === "default"}
+                    hidden={
+                      (!isActive && !isHovered) || user?.role === "default"
+                    }
                     className="h-[20px] w-[20px] transition-all duration-300"
                   />
                 </button>
diff --git a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
index 036bb03895a..1de2504b723 100644
--- a/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
+++ b/frontend/src/components/WorkspaceChat/ChatContainer/ChatHistory/index.jsx
@@ -26,7 +26,7 @@ export default function ChatHistory({ history = [], workspace }) {
   const debouncedScroll = debounce(handleScroll, 100);
 
   useEffect(() => {
-    if(!chatHistoryRef.current) return null;
+    if (!chatHistoryRef.current) return null;
     const chatHistoryElement = chatHistoryRef.current;
     chatHistoryElement.addEventListener("scroll", debouncedScroll);