michael/merlyn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor WorkspaceFileRow component (#4740)

Browse Source 
* remove event listeners + useState on WorkspaceFileRow

* reduce complexity for render

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
This commit is contained in:
Sean Hatfield 2025-12-09 16:57:58 -08:00 committed by GitHub
parent 17717d39ac
commit f8c6bbdd97
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 21 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
View File

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