From f8c6bbdd975dda56963c12e0b8777d12aa3fae96 Mon Sep 17 00:00:00 2001
From: Sean Hatfield <seanhatfield5@gmail.com>
Date: Tue, 9 Dec 2025 16:57:58 -0800
Subject: [PATCH] Refactor WorkspaceFileRow component (#4740)

* remove event listeners + useState on WorkspaceFileRow

* reduce complexity for render

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
---
 .../WorkspaceFileRow/index.jsx                | 42 +++++++++----------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index 7bc85d31..a141635d 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -124,7 +124,6 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
   const [pinned, setPinned] = useState(
     item?.pinnedWorkspaces?.includes(workspace.id) || false
   );
-  const [hover, setHover] = useState(false);
   const pinEvent = new CustomEvent("pinned_document");
 
   const updatePinStatus = async (e) => {
@@ -162,21 +161,18 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
 
   return (
     <div
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
       onClick={updatePinStatus}
-      className="flex items-center ml-2 cursor-pointer"
+      className="group flex items-center ml-2 cursor-pointer"
       data-tooltip-id="pin-document"
       data-tooltip-content={
         pinned ? "Un-pin from workspace" : "Pin to workspace"
       }
     >
       {pinned ? (
-        <div
-          className={`bg-theme-settings-input-active rounded-3xl whitespace-nowrap ${hover ? "bg-red-500/20" : ""}`}
-        >
-          <p className={`text-xs px-2 py-0.5 ${hover ? "text-red-500" : ""}`}>
-            {hover ? "Un-pin" : "Pinned"}
+        <div className="bg-theme-settings-input-active group-hover:bg-red-500/20 rounded-3xl whitespace-nowrap">
+          <p className="text-xs px-2 py-0.5 group-hover:text-red-500">
+            <span className="group-hover:hidden">Pinned</span>
+            <span className="hidden group-hover:inline">Un-pin</span>
           </p>
         </div>
       ) : (
@@ -192,11 +188,11 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
 
 const WatchForChanges = memo(({ workspace, docPath, item }) => {
   const [watched, setWatched] = useState(item?.watched || false);
-  const [hover, setHover] = useState(false);
   const watchEvent = new CustomEvent("watch_document_for_changes");
 
-  const updateWatchStatus = async () => {
+  const updateWatchStatus = async (e) => {
     try {
+      e.stopPropagation();
       if (!watched) window.dispatchEvent(watchEvent);
       const success =
         await System.experimentalFeatures.liveSync.setWatchStatusForDocument(
@@ -238,19 +234,23 @@ const WatchForChanges = memo(({ workspace, docPath, item }) => {
 
   return (
     <div
-      onMouseEnter={() => setHover(true)}
-      onMouseLeave={() => setHover(false)}
-      className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2"
+      className="group flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2 cursor-pointer"
+      onClick={updateWatchStatus}
+      data-tooltip-id="watch-changes"
+      data-active={watched}
+      data-tooltip-content={
+        watched ? "Stop watching for changes" : "Watch document for changes"
+      }
     >
       <Eye
-        data-tooltip-id="watch-changes"
-        data-tooltip-content={
-          watched ? "Stop watching for changes" : "Watch document for changes"
-        }
         size={16}
-        onClick={updateWatchStatus}
-        weight={hover || watched ? "fill" : "regular"}
-        className="outline-none text-base font-bold flex-shrink-0 cursor-pointer"
+        weight="regular"
+        className="outline-none text-base font-bold flex-shrink-0 group-hover:hidden group-data-[active=true]:hidden"
+      />
+      <Eye
+        size={16}
+        weight="fill"
+        className="outline-none text-base font-bold flex-shrink-0 hidden group-hover:block group-data-[active=true]:block"
       />
     </div>
   );