From a3c82d802b379cfd24e908a6e92d85acead95611 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 23 Sep 2024 17:34:48 -0700
Subject: [PATCH 1/9] wip improve remove document ux

---
 .../WorkspaceFileRow/index.jsx                | 22 +++--
 .../Documents/WorkspaceDirectory/index.jsx    | 88 +++++++++++++++++--
 2 files changed, 98 insertions(+), 12 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 177d9b82324..7b60f4510ba 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -19,6 +19,8 @@ export default function WorkspaceFileRow({
   fetchKeys,
   hasChanges,
   movedItems,
+  selected,
+  toggleSelection,
 }) {
   const onRemoveClick = async () => {
     setLoading(true);
@@ -43,12 +45,22 @@ export default function WorkspaceFileRow({
     <div
       className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer ${
         isMovedItem ? "bg-green-800/40" : "file-row"
-      }`}
+      } ${selected ? "selected" : ""}`}
+      onClick={toggleSelection}
     >
-      <div
-        data-tooltip-id={`ws-directory-item-${item.url}`}
-        className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
-      >
+      <div className="col-span-10 w-fit flex gap-x-[4px] items-center relative">
+        <div
+          className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+          role="checkbox"
+          aria-checked={selected}
+          tabIndex={0}
+          onClick={(e) => {
+            e.stopPropagation();
+            toggleSelection();
+          }}
+        >
+          {selected && <div className="w-2 h-2 bg-white rounded-[2px]" />}
+        </div>
         <File
           className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-3"
           weight="fill"
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 4ec3a86ed4b..10f4ce7f818 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -7,6 +7,7 @@ import { Eye, PushPin } from "@phosphor-icons/react";
 import { SEEN_DOC_PIN_ALERT, SEEN_WATCH_ALERT } from "@/utils/constants";
 import paths from "@/utils/paths";
 import { Link } from "react-router-dom";
+import Workspace from "@/models/workspace";
 
 function WorkspaceDirectory({
   workspace,
@@ -22,6 +23,45 @@ function WorkspaceDirectory({
   embeddingCosts,
   movedItems,
 }) {
+  const [selectedItems, setSelectedItems] = useState({});
+
+  const toggleSelection = (item) => {
+    setSelectedItems((prevSelectedItems) => {
+      const newSelectedItems = { ...prevSelectedItems };
+      if (newSelectedItems[item.id]) {
+        delete newSelectedItems[item.id];
+      } else {
+        newSelectedItems[item.id] = true;
+      }
+      return newSelectedItems;
+    });
+  };
+
+  const removeSelectedItems = async () => {
+    setLoading(true);
+    setLoadingMessage("Removing selected files from workspace");
+
+    const itemsToRemove = Object.keys(selectedItems).map((itemId) => {
+      const folder = files.items.find((f) => f.items.some((i) => i.id === itemId));
+      const item = folder.items.find((i) => i.id === itemId);
+      return `${folder.name}/${item.name}`;
+    });
+
+    try {
+      await Workspace.modifyEmbeddings(workspace.slug, {
+        adds: [],
+        deletes: itemsToRemove,
+      });
+      await fetchKeys(true);
+      setSelectedItems({});
+    } catch (error) {
+      console.error("Failed to remove documents:", error);
+    }
+
+    setLoadingMessage("");
+    setLoading(false);
+  };
+
   if (loading) {
     return (
       <div className="px-8">
@@ -60,18 +100,16 @@ function WorkspaceDirectory({
           }`}
         >
           <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
-            <p className="col-span-5">Name</p>
+            <p className="col-span-10">Name</p>
             <p className="col-span-2" />
           </div>
-          <div className="w-full h-full flex flex-col z-0">
-            {Object.values(files.items).some(
-              (folder) => folder.items.length > 0
-            ) || movedItems.length > 0 ? (
+          <div className="overflow-y-auto h-[calc(100%-40px)]">
+            {files.items.some((folder) => folder.items.length > 0) || movedItems.length > 0 ? (
               <>
                 {files.items.map((folder) =>
-                  folder.items.map((item, index) => (
+                  folder.items.map((item) => (
                     <WorkspaceFileRow
-                      key={index}
+                      key={item.id}
                       item={item}
                       folderName={folder.name}
                       workspace={workspace}
@@ -80,6 +118,8 @@ function WorkspaceDirectory({
                       fetchKeys={fetchKeys}
                       hasChanges={hasChanges}
                       movedItems={movedItems}
+                      selected={selectedItems[item.id]}
+                      toggleSelection={() => toggleSelection(item)}
                     />
                   ))
                 )}
@@ -92,6 +132,40 @@ function WorkspaceDirectory({
               </div>
             )}
           </div>
+          {Object.keys(selectedItems).length > 0 && !hasChanges && (
+            <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none">
+              <div className="mx-auto bg-white/40 rounded-lg py-1 px-2 pointer-events-auto">
+                <div className="flex flex-row items-center gap-x-2">
+                  <button
+                    onClick={() => {
+                      const allItems = files.items.flatMap(folder => folder.items);
+                      const allSelected = allItems.every(item => selectedItems[item.id]);
+                      if (allSelected) {
+                        setSelectedItems({});
+                      } else {
+                        const newSelectedItems = {};
+                        allItems.forEach(item => {
+                          newSelectedItems[item.id] = true;
+                        });
+                        setSelectedItems(newSelectedItems);
+                      }
+                    }}
+                    className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
+                  >
+                    {Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0)
+                      ? "Deselect All"
+                      : "Select All"}
+                  </button>
+                  <button
+                    onClick={removeSelectedItems}
+                    className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
+                  >
+                    Remove Selected
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
         </div>
         {hasChanges && (
           <div className="flex items-center justify-between py-6">

From 8ae4dab0d54312e113278abe46cf9d0bf20f943d Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 24 Sep 2024 15:13:01 -0700
Subject: [PATCH 2/9] fix border ui bugs when adding files to workspace

---
 .../WorkspaceFileRow/index.jsx                |  41 ++---
 .../Documents/WorkspaceDirectory/index.jsx    | 142 +++++++++---------
 2 files changed, 96 insertions(+), 87 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 7b60f4510ba..c91d5af7237 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -21,8 +21,10 @@ export default function WorkspaceFileRow({
   movedItems,
   selected,
   toggleSelection,
+  disableSelection,
 }) {
-  const onRemoveClick = async () => {
+  const onRemoveClick = async (e) => {
+    e.stopPropagation();
     setLoading(true);
 
     try {
@@ -43,24 +45,26 @@ export default function WorkspaceFileRow({
   const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
   return (
     <div
-      className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer ${
-        isMovedItem ? "bg-green-800/40" : "file-row"
-      } ${selected ? "selected" : ""}`}
-      onClick={toggleSelection}
+      className={`items-center h-[34px] text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 ${
+        !disableSelection ? 'hover:bg-sky-500/20 cursor-pointer' : ''
+      } ${isMovedItem ? "bg-green-800/40" : "file-row"} ${selected ? "selected" : ""}`}
+      onClick={!disableSelection ? toggleSelection : undefined}
     >
       <div className="col-span-10 w-fit flex gap-x-[4px] items-center relative">
-        <div
-          className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
-          role="checkbox"
-          aria-checked={selected}
-          tabIndex={0}
-          onClick={(e) => {
-            e.stopPropagation();
-            toggleSelection();
-          }}
-        >
-          {selected && <div className="w-2 h-2 bg-white rounded-[2px]" />}
-        </div>
+        {!disableSelection && (
+          <div
+            className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+            role="checkbox"
+            aria-checked={selected}
+            tabIndex={0}
+            onClick={(e) => {
+              e.stopPropagation();
+              toggleSelection();
+            }}
+          >
+            {selected && <div className="w-2 h-2 bg-white rounded-[2px]" />}
+          </div>
+        )}
         <File
           className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-3"
           weight="fill"
@@ -117,7 +121,8 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
   const [hover, setHover] = useState(false);
   const pinEvent = new CustomEvent("pinned_document");
 
-  const updatePinStatus = async () => {
+  const updatePinStatus = async (e) => {
+    e.stopPropagation();
     try {
       if (!pinned) window.dispatchEvent(pinEvent);
       const success = await Workspace.setPinForDocument(
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 10f4ce7f818..2813c234e3c 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -94,78 +94,82 @@ function WorkspaceDirectory({
             {workspace.name}
           </h3>
         </div>
-        <div
-          className={`relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5 overflow-y-auto border-4 ${
-            highlightWorkspace ? "border-cyan-300/80" : "border-transparent"
-          }`}
-        >
-          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
-            <p className="col-span-10">Name</p>
-            <p className="col-span-2" />
-          </div>
-          <div className="overflow-y-auto h-[calc(100%-40px)]">
-            {files.items.some((folder) => folder.items.length > 0) || movedItems.length > 0 ? (
-              <>
-                {files.items.map((folder) =>
-                  folder.items.map((item) => (
-                    <WorkspaceFileRow
-                      key={item.id}
-                      item={item}
-                      folderName={folder.name}
-                      workspace={workspace}
-                      setLoading={setLoading}
-                      setLoadingMessage={setLoadingMessage}
-                      fetchKeys={fetchKeys}
-                      hasChanges={hasChanges}
-                      movedItems={movedItems}
-                      selected={selectedItems[item.id]}
-                      toggleSelection={() => toggleSelection(item)}
-                    />
-                  ))
-                )}
-              </>
-            ) : (
-              <div className="w-full h-full flex items-center justify-center">
-                <p className="text-white text-opacity-40 text-sm font-medium">
-                  No Documents
-                </p>
+        <div className="relative w-[560px] h-[445px] mt-5">
+          <div
+            className={`absolute inset-0 rounded-2xl  ${
+              highlightWorkspace ? "border-4 border-cyan-300/80 z-[999]" : ""
+            }`}
+          />
+          <div className="relative w-full h-full bg-zinc-900 rounded-2xl overflow-hidden">
+            <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
+              <p className="col-span-10">Name</p>
+              <p className="col-span-2" />
+            </div>
+            <div className="overflow-y-auto h-[calc(100%-40px)]">
+              {files.items.some((folder) => folder.items.length > 0) || movedItems.length > 0 ? (
+                <>
+                  {files.items.map((folder) =>
+                    folder.items.map((item) => (
+                      <WorkspaceFileRow
+                        key={item.id}
+                        item={item}
+                        folderName={folder.name}
+                        workspace={workspace}
+                        setLoading={setLoading}
+                        setLoadingMessage={setLoadingMessage}
+                        fetchKeys={fetchKeys}
+                        hasChanges={hasChanges}
+                        movedItems={movedItems}
+                        selected={selectedItems[item.id]}
+                        toggleSelection={() => toggleSelection(item)}
+                        disableSelection={hasChanges}
+                      />
+                    ))
+                  )}
+                </>
+              ) : (
+                <div className="w-full h-full flex items-center justify-center">
+                  <p className="text-white text-opacity-40 text-sm font-medium">
+                    No Documents
+                  </p>
+                </div>
+              )}
+            </div>
+            {Object.keys(selectedItems).length > 0 && !hasChanges && (
+              <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none">
+                <div className="mx-auto bg-white/40 rounded-lg py-1 px-2 pointer-events-auto">
+                  <div className="flex flex-row items-center gap-x-2">
+                    <button
+                      onClick={() => {
+                        const allItems = files.items.flatMap(folder => folder.items);
+                        const allSelected = allItems.every(item => selectedItems[item.id]);
+                        if (allSelected) {
+                          setSelectedItems({});
+                        } else {
+                          const newSelectedItems = {};
+                          allItems.forEach(item => {
+                            newSelectedItems[item.id] = true;
+                          });
+                          setSelectedItems(newSelectedItems);
+                        }
+                      }}
+                      className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
+                    >
+                      {Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0)
+                        ? "Deselect All"
+                        : "Select All"}
+                    </button>
+                    <button
+                      onClick={removeSelectedItems}
+                      className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
+                    >
+                      Remove Selected
+                    </button>
+                  </div>
+                </div>
               </div>
             )}
           </div>
-          {Object.keys(selectedItems).length > 0 && !hasChanges && (
-            <div className="absolute bottom-[12px] left-0 right-0 flex justify-center pointer-events-none">
-              <div className="mx-auto bg-white/40 rounded-lg py-1 px-2 pointer-events-auto">
-                <div className="flex flex-row items-center gap-x-2">
-                  <button
-                    onClick={() => {
-                      const allItems = files.items.flatMap(folder => folder.items);
-                      const allSelected = allItems.every(item => selectedItems[item.id]);
-                      if (allSelected) {
-                        setSelectedItems({});
-                      } else {
-                        const newSelectedItems = {};
-                        allItems.forEach(item => {
-                          newSelectedItems[item.id] = true;
-                        });
-                        setSelectedItems(newSelectedItems);
-                      }
-                    }}
-                    className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
-                  >
-                    {Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0)
-                      ? "Deselect All"
-                      : "Select All"}
-                  </button>
-                  <button
-                    onClick={removeSelectedItems}
-                    className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
-                  >
-                    Remove Selected
-                  </button>
-                </div>
-              </div>
-            </div>
-          )}
         </div>
         {hasChanges && (
           <div className="flex items-center justify-between py-6">

From f7583dfb355f8205dd50841aeea32b9191685e19 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 24 Sep 2024 15:26:02 -0700
Subject: [PATCH 3/9] sort workspacedirectory put adding files at top

---
 .../Documents/WorkspaceDirectory/index.jsx    | 46 +++++++++++--------
 1 file changed, 28 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 2813c234e3c..6ffa8db18fd 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -108,24 +108,34 @@ function WorkspaceDirectory({
             <div className="overflow-y-auto h-[calc(100%-40px)]">
               {files.items.some((folder) => folder.items.length > 0) || movedItems.length > 0 ? (
                 <>
-                  {files.items.map((folder) =>
-                    folder.items.map((item) => (
-                      <WorkspaceFileRow
-                        key={item.id}
-                        item={item}
-                        folderName={folder.name}
-                        workspace={workspace}
-                        setLoading={setLoading}
-                        setLoadingMessage={setLoadingMessage}
-                        fetchKeys={fetchKeys}
-                        hasChanges={hasChanges}
-                        movedItems={movedItems}
-                        selected={selectedItems[item.id]}
-                        toggleSelection={() => toggleSelection(item)}
-                        disableSelection={hasChanges}
-                      />
-                    ))
-                  )}
+                  {/* Sort items so that the items being moved are at the top */}
+                  {files.items.flatMap((folder) => folder.items)
+                    .sort((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;
+                      return 0;
+                    })
+                    .map((item) => {
+                      const folder = files.items.find((f) => f.items.includes(item));
+                      return (
+                        <WorkspaceFileRow
+                          key={item.id}
+                          item={item}
+                          folderName={folder.name}
+                          workspace={workspace}
+                          setLoading={setLoading}
+                          setLoadingMessage={setLoadingMessage}
+                          fetchKeys={fetchKeys}
+                          hasChanges={hasChanges}
+                          movedItems={movedItems}
+                          selected={selectedItems[item.id]}
+                          toggleSelection={() => toggleSelection(item)}
+                          disableSelection={hasChanges}
+                        />
+                      );
+                    })}
                 </>
               ) : (
                 <div className="w-full h-full flex items-center justify-center">

From 7ad6c2bce4bafeb0c34b88cc01ee79f2ea2ecd4f Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 24 Sep 2024 15:48:44 -0700
Subject: [PATCH 4/9] fix workspace file row ui shifting

---
 .../WorkspaceFileRow/index.jsx                | 34 ++++++++++---------
 1 file changed, 18 insertions(+), 16 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 c91d5af7237..0d267439855 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -50,23 +50,25 @@ export default function WorkspaceFileRow({
       } ${isMovedItem ? "bg-green-800/40" : "file-row"} ${selected ? "selected" : ""}`}
       onClick={!disableSelection ? toggleSelection : undefined}
     >
-      <div className="col-span-10 w-fit flex gap-x-[4px] items-center relative">
-        {!disableSelection && (
-          <div
-            className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
-            role="checkbox"
-            aria-checked={selected}
-            tabIndex={0}
-            onClick={(e) => {
-              e.stopPropagation();
-              toggleSelection();
-            }}
-          >
-            {selected && <div className="w-2 h-2 bg-white rounded-[2px]" />}
-          </div>
-        )}
+      <div className="col-span-10 w-fit flex gap-x-[2px] items-center relative">
+        <div className="shrink-0 w-3 h-3">
+          {!disableSelection ? (
+            <div
+              className="w-full h-full rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+              role="checkbox"
+              aria-checked={selected}
+              tabIndex={0}
+              onClick={(e) => {
+                e.stopPropagation();
+                toggleSelection();
+              }}
+            >
+              {selected && <div className="w-2 h-2 bg-white rounded-[2px]" />}
+            </div>
+          ) : null}
+        </div>
         <File
-          className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-3"
+          className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-1"
           weight="fill"
         />
         <p className="whitespace-nowrap overflow-hidden text-ellipsis">

From f01abeda14ea1dee4639aee03bf21d440a7cc254 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 24 Sep 2024 16:13:53 -0700
Subject: [PATCH 5/9] fix selected items bug when adding another item with
 items already selected on workspace

---
 .../Documents/WorkspaceDirectory/index.jsx    | 65 +++++++++++++------
 1 file changed, 46 insertions(+), 19 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 6ffa8db18fd..42a9a7634c2 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -37,6 +37,20 @@ function WorkspaceDirectory({
     });
   };
 
+  const toggleSelectAll = () => {
+    const allItems = files.items.flatMap(folder => folder.items);
+    const allSelected = allItems.every(item => selectedItems[item.id]);
+    if (allSelected) {
+      setSelectedItems({});
+    } else {
+      const newSelectedItems = {};
+      allItems.forEach(item => {
+        newSelectedItems[item.id] = true;
+      });
+      setSelectedItems(newSelectedItems);
+    }
+  };
+
   const removeSelectedItems = async () => {
     setLoading(true);
     setLoadingMessage("Removing selected files from workspace");
@@ -62,6 +76,11 @@ function WorkspaceDirectory({
     setLoading(false);
   };
 
+  const handleSaveChanges = (e) => {
+    setSelectedItems({});
+    saveChanges(e);
+  };
+
   if (loading) {
     return (
       <div className="px-8">
@@ -71,11 +90,14 @@ function WorkspaceDirectory({
           </h3>
         </div>
         <div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
-          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8">
-            <p className="col-span-5">Name</p>
+          <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-zinc-900 sticky top-0 z-10 rounded-t-2xl">
+            <div className="col-span-10 flex items-center gap-x-[4px]">
+              <div className="shrink-0 w-3 h-3" />
+              <p className="ml-[7px]">Name</p>
+            </div>
             <p className="col-span-2" />
           </div>
-          <div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
+          <div className="w-full h-[calc(100%-40px)] flex items-center justify-center flex-col gap-y-5">
             <PreLoader />
             <p className="text-white/80 text-sm font-semibold animate-pulse text-center w-1/3">
               {loadingMessage}
@@ -101,8 +123,25 @@ function WorkspaceDirectory({
             }`}
           />
           <div className="relative w-full h-full bg-zinc-900 rounded-2xl overflow-hidden">
-            <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
-              <p className="col-span-10">Name</p>
+            <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
+              <div className="col-span-10 flex items-center gap-x-[4px]">
+                {!hasChanges && files.items.some((folder) => folder.items.length > 0) ? (
+                  <div
+                    className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
+                    role="checkbox"
+                    aria-checked={Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0)}
+                    tabIndex={0}
+                    onClick={toggleSelectAll}
+                  >
+                    {Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0) && (
+                      <div className="w-2 h-2 bg-white rounded-[2px]" />
+                    )}
+                  </div>
+                ) : (
+                  <div className="shrink-0 w-3 h-3" />
+                )}
+                <p className="ml-[7px]">Name</p>
+              </div>
               <p className="col-span-2" />
             </div>
             <div className="overflow-y-auto h-[calc(100%-40px)]">
@@ -150,19 +189,7 @@ function WorkspaceDirectory({
                 <div className="mx-auto bg-white/40 rounded-lg py-1 px-2 pointer-events-auto">
                   <div className="flex flex-row items-center gap-x-2">
                     <button
-                      onClick={() => {
-                        const allItems = files.items.flatMap(folder => folder.items);
-                        const allSelected = allItems.every(item => selectedItems[item.id]);
-                        if (allSelected) {
-                          setSelectedItems({});
-                        } else {
-                          const newSelectedItems = {};
-                          allItems.forEach(item => {
-                            newSelectedItems[item.id] = true;
-                          });
-                          setSelectedItems(newSelectedItems);
-                        }
-                      }}
+                      onClick={toggleSelectAll}
                       className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
                     >
                       {Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0)
@@ -199,7 +226,7 @@ function WorkspaceDirectory({
             </div>
 
             <button
-              onClick={saveChanges}
+              onClick={(e) => handleSaveChanges(e)}
               className="border border-slate-200 px-5 py-2.5 rounded-lg text-white text-sm items-center flex gap-x-2 hover:bg-slate-200 hover:text-slate-800 focus:ring-gray-800"
             >
               Save and Embed

From b3e251d12e9eccb4a8e30c661cf49f85764d5d51 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 24 Sep 2024 16:20:58 -0700
Subject: [PATCH 6/9] fix tooltip

---
 .../WorkspaceDirectory/WorkspaceFileRow/index.jsx    | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 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 0d267439855..20ef09c628b 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -48,9 +48,17 @@ export default function WorkspaceFileRow({
       className={`items-center h-[34px] text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 ${
         !disableSelection ? 'hover:bg-sky-500/20 cursor-pointer' : ''
       } ${isMovedItem ? "bg-green-800/40" : "file-row"} ${selected ? "selected" : ""}`}
-      onClick={!disableSelection ? toggleSelection : undefined}
+      onClick={(e) => {
+        if (!disableSelection) {
+          e.stopPropagation();
+          toggleSelection();
+        }
+      }}
     >
-      <div className="col-span-10 w-fit flex gap-x-[2px] items-center relative">
+      <div
+        className="col-span-10 w-fit flex gap-x-[2px] items-center relative"
+        data-tooltip-id={`ws-directory-item-${item.url}`}
+      >
         <div className="shrink-0 w-3 h-3">
           {!disableSelection ? (
             <div

From e5c5aa551b798e54b9118c0f810fdfc2d01e3cb7 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Tue, 24 Sep 2024 16:21:51 -0700
Subject: [PATCH 7/9] lint

---
 .../WorkspaceFileRow/index.jsx                |  2 +-
 .../Documents/WorkspaceDirectory/index.jsx    | 53 +++++++++++++------
 2 files changed, 39 insertions(+), 16 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 20ef09c628b..38dcb29198f 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -46,7 +46,7 @@ export default function WorkspaceFileRow({
   return (
     <div
       className={`items-center h-[34px] text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 ${
-        !disableSelection ? 'hover:bg-sky-500/20 cursor-pointer' : ''
+        !disableSelection ? "hover:bg-sky-500/20 cursor-pointer" : ""
       } ${isMovedItem ? "bg-green-800/40" : "file-row"} ${selected ? "selected" : ""}`}
       onClick={(e) => {
         if (!disableSelection) {
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 42a9a7634c2..7476005735d 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -38,13 +38,13 @@ function WorkspaceDirectory({
   };
 
   const toggleSelectAll = () => {
-    const allItems = files.items.flatMap(folder => folder.items);
-    const allSelected = allItems.every(item => selectedItems[item.id]);
+    const allItems = files.items.flatMap((folder) => folder.items);
+    const allSelected = allItems.every((item) => selectedItems[item.id]);
     if (allSelected) {
       setSelectedItems({});
     } else {
       const newSelectedItems = {};
-      allItems.forEach(item => {
+      allItems.forEach((item) => {
         newSelectedItems[item.id] = true;
       });
       setSelectedItems(newSelectedItems);
@@ -56,7 +56,9 @@ function WorkspaceDirectory({
     setLoadingMessage("Removing selected files from workspace");
 
     const itemsToRemove = Object.keys(selectedItems).map((itemId) => {
-      const folder = files.items.find((f) => f.items.some((i) => i.id === itemId));
+      const folder = files.items.find((f) =>
+        f.items.some((i) => i.id === itemId)
+      );
       const item = folder.items.find((i) => i.id === itemId);
       return `${folder.name}/${item.name}`;
     });
@@ -125,17 +127,26 @@ function WorkspaceDirectory({
           <div className="relative w-full h-full bg-zinc-900 rounded-2xl overflow-hidden">
             <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-3.5 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
               <div className="col-span-10 flex items-center gap-x-[4px]">
-                {!hasChanges && files.items.some((folder) => folder.items.length > 0) ? (
+                {!hasChanges &&
+                files.items.some((folder) => folder.items.length > 0) ? (
                   <div
                     className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
                     role="checkbox"
-                    aria-checked={Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0)}
+                    aria-checked={
+                      Object.keys(selectedItems).length ===
+                      files.items.reduce(
+                        (sum, folder) => sum + folder.items.length,
+                        0
+                      )
+                    }
                     tabIndex={0}
                     onClick={toggleSelectAll}
                   >
-                    {Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0) && (
-                      <div className="w-2 h-2 bg-white rounded-[2px]" />
-                    )}
+                    {Object.keys(selectedItems).length ===
+                      files.items.reduce(
+                        (sum, folder) => sum + folder.items.length,
+                        0
+                      ) && <div className="w-2 h-2 bg-white rounded-[2px]" />}
                   </div>
                 ) : (
                   <div className="shrink-0 w-3 h-3" />
@@ -145,19 +156,27 @@ function WorkspaceDirectory({
               <p className="col-span-2" />
             </div>
             <div className="overflow-y-auto h-[calc(100%-40px)]">
-              {files.items.some((folder) => folder.items.length > 0) || movedItems.length > 0 ? (
+              {files.items.some((folder) => folder.items.length > 0) ||
+              movedItems.length > 0 ? (
                 <>
                   {/* Sort items so that the items being moved are at the top */}
-                  {files.items.flatMap((folder) => folder.items)
+                  {files.items
+                    .flatMap((folder) => folder.items)
                     .sort((a, b) => {
-                      const aIsMovedItem = movedItems.some((movedItem) => movedItem.id === a.id);
-                      const bIsMovedItem = movedItems.some((movedItem) => movedItem.id === b.id);
+                      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;
                       return 0;
                     })
                     .map((item) => {
-                      const folder = files.items.find((f) => f.items.includes(item));
+                      const folder = files.items.find((f) =>
+                        f.items.includes(item)
+                      );
                       return (
                         <WorkspaceFileRow
                           key={item.id}
@@ -192,7 +211,11 @@ function WorkspaceDirectory({
                       onClick={toggleSelectAll}
                       className="border-none text-sm font-semibold bg-white h-[30px] px-2.5 rounded-lg hover:text-white hover:bg-neutral-800/80"
                     >
-                      {Object.keys(selectedItems).length === files.items.reduce((sum, folder) => sum + folder.items.length, 0)
+                      {Object.keys(selectedItems).length ===
+                      files.items.reduce(
+                        (sum, folder) => sum + folder.items.length,
+                        0
+                      )
                         ? "Deselect All"
                         : "Select All"}
                     </button>

From f59d123b2183b5d10d3cb8f89227b3c846e8bdda Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Wed, 25 Sep 2024 12:32:41 -0700
Subject: [PATCH 8/9] refactor

---
 .../WorkspaceFileRow/index.jsx                | 25 ++++---
 .../Documents/WorkspaceDirectory/index.jsx    | 73 +++++++++----------
 2 files changed, 50 insertions(+), 48 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 38dcb29198f..ba5d98f6902 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -42,18 +42,24 @@ export default function WorkspaceFileRow({
     setLoading(false);
   };
 
+  function toggleRowSelection(e) {
+    if (disableSelection) return;
+    e.stopPropagation();
+    toggleSelection();
+  }
+
+  function handleRowSelection(e) {
+    e.stopPropagation();
+    toggleSelection();
+  }
+
   const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
   return (
     <div
       className={`items-center h-[34px] text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 ${
         !disableSelection ? "hover:bg-sky-500/20 cursor-pointer" : ""
       } ${isMovedItem ? "bg-green-800/40" : "file-row"} ${selected ? "selected" : ""}`}
-      onClick={(e) => {
-        if (!disableSelection) {
-          e.stopPropagation();
-          toggleSelection();
-        }
-      }}
+      onClick={toggleRowSelection}
     >
       <div
         className="col-span-10 w-fit flex gap-x-[2px] items-center relative"
@@ -66,10 +72,7 @@ export default function WorkspaceFileRow({
               role="checkbox"
               aria-checked={selected}
               tabIndex={0}
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleSelection();
-              }}
+              onClick={handleRowSelection}
             >
               {selected && <div className="w-2 h-2 bg-white rounded-[2px]" />}
             </div>
@@ -132,8 +135,8 @@ const PinItemToWorkspace = memo(({ workspace, docPath, item }) => {
   const pinEvent = new CustomEvent("pinned_document");
 
   const updatePinStatus = async (e) => {
-    e.stopPropagation();
     try {
+      e.stopPropagation();
       if (!pinned) window.dispatchEvent(pinEvent);
       const success = await Workspace.setPinForDocument(
         workspace.slug,
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 7476005735d..f8d3698d832 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -158,43 +158,24 @@ function WorkspaceDirectory({
             <div className="overflow-y-auto h-[calc(100%-40px)]">
               {files.items.some((folder) => folder.items.length > 0) ||
               movedItems.length > 0 ? (
-                <>
-                  {/* Sort items so that the items being moved are at the top */}
-                  {files.items
-                    .flatMap((folder) => folder.items)
-                    .sort((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;
-                      return 0;
-                    })
-                    .map((item) => {
-                      const folder = files.items.find((f) =>
-                        f.items.includes(item)
-                      );
-                      return (
-                        <WorkspaceFileRow
-                          key={item.id}
-                          item={item}
-                          folderName={folder.name}
-                          workspace={workspace}
-                          setLoading={setLoading}
-                          setLoadingMessage={setLoadingMessage}
-                          fetchKeys={fetchKeys}
-                          hasChanges={hasChanges}
-                          movedItems={movedItems}
-                          selected={selectedItems[item.id]}
-                          toggleSelection={() => toggleSelection(item)}
-                          disableSelection={hasChanges}
-                        />
-                      );
-                    })}
-                </>
+                <RenderFileRows files={files} movedItems={movedItems}>
+                  {({ item, folder }) => (
+                    <WorkspaceFileRow
+                      key={item.id}
+                      item={item}
+                      folderName={folder.name}
+                      workspace={workspace}
+                      setLoading={setLoading}
+                      setLoadingMessage={setLoadingMessage}
+                      fetchKeys={fetchKeys}
+                      hasChanges={hasChanges}
+                      movedItems={movedItems}
+                      selected={selectedItems[item.id]}
+                      toggleSelection={() => toggleSelection(item)}
+                      disableSelection={hasChanges}
+                    />
+                  )}
+                </RenderFileRows>
               ) : (
                 <div className="w-full h-full flex items-center justify-center">
                   <p className="text-white text-opacity-40 text-sm font-medium">
@@ -396,4 +377,22 @@ const DocumentWatchAlert = memo(() => {
   );
 });
 
+function RenderFileRows({ files, movedItems, children }) {
+  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;
+    return 0;
+  }
+
+  return files.items
+    .flatMap((folder) => folder.items)
+    .sort(sortMovedItemsAndFiles)
+    .map((item) => {
+      const folder = files.items.find((f) => f.items.includes(item));
+      return children({ item, folder });
+    });
+}
+
 export default memo(WorkspaceDirectory);

From 1c0363380008ee8a0f7b4ed1f3383d6a2bcec68d Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Wed, 25 Sep 2024 12:42:53 -0700
Subject: [PATCH 9/9] fix bug where unadding single item while selected would
 stay selected

---
 .../Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx    | 3 ++-
 .../ManageWorkspace/Documents/WorkspaceDirectory/index.jsx     | 1 +
 2 files changed, 3 insertions(+), 1 deletion(-)

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 ba5d98f6902..cc267170b87 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -22,6 +22,7 @@ export default function WorkspaceFileRow({
   selected,
   toggleSelection,
   disableSelection,
+  setSelectedItems,
 }) {
   const onRemoveClick = async (e) => {
     e.stopPropagation();
@@ -37,7 +38,7 @@ export default function WorkspaceFileRow({
     } catch (error) {
       console.error("Failed to remove document:", error);
     }
-
+    setSelectedItems({});
     setLoadingMessage("");
     setLoading(false);
   };
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index f8d3698d832..e9864f12ce4 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -173,6 +173,7 @@ function WorkspaceDirectory({
                       selected={selectedItems[item.id]}
                       toggleSelection={() => toggleSelection(item)}
                       disableSelection={hasChanges}
+                      setSelectedItems={setSelectedItems}
                     />
                   )}
                 </RenderFileRows>