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

Pinning UI improvements (#3490)

Browse Source 
* improve pinning ui + sort pinned docs to top

* lint
This commit is contained in:
Sean Hatfield 2025-03-17 17:01:21 -07:00 committed by GitHub
parent 39cd4602fe
commit 99ec269623
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -164,18 +164,28 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
<div <div
onMouseEnter={() => setHover(true)} onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)} onMouseLeave={() => setHover(false)}
className="flex gap-x-2 items-center hover:bg-theme-file-picker-hover p-[2px] rounded ml-2" onClick={updatePinStatus}
className="flex items-center ml-2 cursor-pointer"
data-tooltip-id="pin-document"
data-tooltip-content={
pinned ? "Un-pin from workspace" : "Pin to workspace"
}
> >
<PushPin {pinned ? (
data-tooltip-id="pin-document" <div
data-tooltip-content={ className={`bg-theme-settings-input-active rounded-3xl whitespace-nowrap ${hover ? "bg-red-500/20" : ""}`}
pinned ? "Un-Pin from workspace" : "Pin to workspace" >
} <p className={`text-xs px-2 py-0.5 ${hover ? "text-red-500" : ""}`}>
size={16} {hover ? "Un-pin" : "Pinned"}
onClick={updatePinStatus} </p>
weight={hover || pinned ? "fill" : "regular"} </div>
className="outline-none text-base font-bold flex-shrink-0 cursor-pointer" ) : (
/> <PushPin
size={16}
weight="regular"
className="outline-none text-base font-bold flex-shrink-0"
/>
)}
</div> </div>
); );
}); });

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

@ -162,7 +162,11 @@ function WorkspaceDirectory({
<div className="overflow-y-auto h-[calc(100%-40px)]"> <div className="overflow-y-auto h-[calc(100%-40px)]">
{files.items.some((folder) => folder.items.length > 0) || {files.items.some((folder) => folder.items.length > 0) ||
movedItems.length > 0 ? ( movedItems.length > 0 ? (
<RenderFileRows files={files} movedItems={movedItems}> <RenderFileRows
files={files}
movedItems={movedItems}
workspace={workspace}
>
{({ item, folder }) => ( {({ item, folder }) => (
<WorkspaceFileRow <WorkspaceFileRow
key={item.id} key={item.id}
@ -384,12 +388,19 @@ const DocumentWatchAlert = memo(() => {
); );
}); });
function RenderFileRows({ files, movedItems, children }) { function RenderFileRows({ files, movedItems, children, workspace }) {
function sortMovedItemsAndFiles(a, b) { function sortMovedItemsAndFiles(a, b) {
const aIsMovedItem = movedItems.some((movedItem) => movedItem.id === a.id); const aIsMovedItem = movedItems.some((movedItem) => movedItem.id === a.id);
const bIsMovedItem = movedItems.some((movedItem) => movedItem.id === b.id); const bIsMovedItem = movedItems.some((movedItem) => movedItem.id === b.id);
if (aIsMovedItem && !bIsMovedItem) return -1; if (aIsMovedItem && !bIsMovedItem) return -1;
if (!aIsMovedItem && bIsMovedItem) return 1; if (!aIsMovedItem && bIsMovedItem) return 1;
// Sort pinned items to the top
const aIsPinned = a.pinnedWorkspaces?.includes(workspace.id);
const bIsPinned = b.pinnedWorkspaces?.includes(workspace.id);
if (aIsPinned && !bIsPinned) return -1;
if (!aIsPinned && bIsPinned) return 1;
return 0; return 0;
} }