Pinning UI improvements (#3490)

* improve pinning ui + sort pinned docs to top

* lint

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

@@ -164,18 +164,28 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
     <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"
+      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
-        data-tooltip-id="pin-document"
-        data-tooltip-content={
-          pinned ? "Un-Pin from workspace" : "Pin to workspace"
-        }
-        size={16}
-        onClick={updatePinStatus}
-        weight={hover || pinned ? "fill" : "regular"}
-        className="outline-none text-base font-bold flex-shrink-0 cursor-pointer"
-      />
+      {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"}
+          </p>
+        </div>
+      ) : (
+        <PushPin
+          size={16}
+          weight="regular"
+          className="outline-none text-base font-bold flex-shrink-0"
+        />
+      )}
     </div>
   );
 });

frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx

@@ -162,7 +162,11 @@ function WorkspaceDirectory({
             <div className="overflow-y-auto h-[calc(100%-40px)]">
               {files.items.some((folder) => folder.items.length > 0) ||
               movedItems.length > 0 ? (
-                <RenderFileRows files={files} movedItems={movedItems}>
+                <RenderFileRows
+                  files={files}
+                  movedItems={movedItems}
+                  workspace={workspace}
+                >
                   {({ item, folder }) => (
                     <WorkspaceFileRow
                       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) {
     const aIsMovedItem = movedItems.some((movedItem) => movedItem.id === a.id);
     const bIsMovedItem = movedItems.some((movedItem) => movedItem.id === b.id);
     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;
   }