feat: updated folder tree view

components/datarooms/folders/selection-tree.tsx

@@ -1,5 +1,6 @@
 import { memo, useMemo } from "react";
 
+import { TSelectedFolder } from "@/components/documents/move-folder-modal";
 import { FileTree } from "@/components/ui/nextra-filetree";
 
 import {
@@ -12,12 +13,12 @@ import { buildNestedFolderStructure } from "./utils";
 const FolderComponentSelection = memo(
   ({
     folder,
-    selectedFolderId,
-    setFolderId,
+    selectedFolder,
+    setSelectedFolder,
   }: {
     folder: DataroomFolderWithDocuments;
-    selectedFolderId: string;
-    setFolderId: React.Dispatch<React.SetStateAction<string>>;
+    selectedFolder: TSelectedFolder;
+    setSelectedFolder: React.Dispatch<React.SetStateAction<TSelectedFolder>>;
   }) => {
     // Recursively render child folders if they exist
     const childFolders = useMemo(
@@ -26,25 +27,34 @@ const FolderComponentSelection = memo(
           <FolderComponentSelection
             key={childFolder.id}
             folder={childFolder}
-            selectedFolderId={selectedFolderId}
-            setFolderId={setFolderId}
+            selectedFolder={selectedFolder}
+            setSelectedFolder={setSelectedFolder}
           />
         )),
-      [folder.childFolders, selectedFolderId, setFolderId],
+      [folder.childFolders, selectedFolder, setSelectedFolder],
+    );
+
+    const isActive = folder.id === selectedFolder?.id;
+    const isChildActive = folder.childFolders.some(
+      (childFolder) => childFolder.id === selectedFolder?.id,
     );
 
     return (
       <div
         onClick={(e) => {
           e.preventDefault();
           e.stopPropagation();
-          setFolderId(folder.id);
+          setSelectedFolder({ id: folder.id, name: folder.name });
         }}
       >
         <FileTree.Folder
           name={folder.name}
           key={folder.id}
-          active={folder.id === selectedFolderId}
+          active={isActive}
+          childActive={isChildActive}
+          onToggle={() =>
+            setSelectedFolder({ id: folder.id, name: folder.name })
+          }
         >
           {childFolders}
         </FileTree.Folder>
@@ -56,12 +66,12 @@ FolderComponentSelection.displayName = "FolderComponentSelection";
 
 const SidebarFoldersSelectipon = ({
   folders,
-  selectedFolderId,
-  setFolderId,
+  selectedFolder,
+  setSelectedFolder,
 }: {
   folders: DataroomFolderWithDocuments[];
-  selectedFolderId: string;
-  setFolderId: React.Dispatch<React.SetStateAction<string>>;
+  selectedFolder: TSelectedFolder;
+  setSelectedFolder: React.Dispatch<React.SetStateAction<TSelectedFolder>>;
 }) => {
   const nestedFolders = useMemo(() => {
     if (folders) {
@@ -76,8 +86,8 @@ const SidebarFoldersSelectipon = ({
         <FolderComponentSelection
           key={folder.id}
           folder={folder}
-          selectedFolderId={selectedFolderId}
-          setFolderId={setFolderId}
+          selectedFolder={selectedFolder}
+          setSelectedFolder={setSelectedFolder}
         />
       ))}
     </FileTree>
@@ -86,12 +96,12 @@ const SidebarFoldersSelectipon = ({
 
 export function SidebarFolderTreeSelection({
   dataroomId,
-  selectedFolderId,
-  setFolderId,
+  selectedFolder,
+  setSelectedFolder,
 }: {
   dataroomId: string;
-  selectedFolderId: string;
-  setFolderId: React.Dispatch<React.SetStateAction<string>>;
+  selectedFolder: TSelectedFolder;
+  setSelectedFolder: React.Dispatch<React.SetStateAction<TSelectedFolder>>;
 }) {
   const { folders, error } = useDataroomFoldersTree({ dataroomId });
 
@@ -100,8 +110,8 @@ export function SidebarFolderTreeSelection({
   return (
     <SidebarFoldersSelectipon
       folders={folders}
-      selectedFolderId={selectedFolderId}
-      setFolderId={setFolderId}
+      selectedFolder={selectedFolder}
+      setSelectedFolder={setSelectedFolder}
     />
   );
 }

components/datarooms/folders/sidebar-tree.tsx

@@ -47,17 +47,30 @@ const FolderComponent = memo(
       [folder.childFolders, dataroomId],
     );
 
+    const isActive =
+      folder.path === "/" + (router.query.name as string[])?.join("/");
+    const isChildActive = folder.childFolders.some(
+      (childFolder) =>
+        childFolder.path === "/" + (router.query.name as string[])?.join("/"),
+    );
+
+    const handleFolderClick = () => {
+      router.push(
+        `/datarooms/${dataroomId}/documents${folder.path}`,
+        `/datarooms/${dataroomId}/documents${folder.path}`,
+        {
+          scroll: false,
+        },
+      );
+    };
+
     return (
       <FileTree.Folder
         name={folder.name}
         key={folder.id}
-        active={
-          folder.path === "/" + (router.query.name as string[])?.join("/")
-        }
-        childActive={router.query.name?.includes(folder.name)}
-        onToggle={() =>
-          router.push(`/datarooms/${dataroomId}/documents${folder.path}`)
-        }
+        active={isActive}
+        childActive={isChildActive}
+        onToggle={handleFolderClick}
       >
         {childFolders}
         {documents}

components/datarooms/folders/view-tree.tsx

@@ -69,6 +69,11 @@ const FolderComponent = memo(
       [folder.childFolders, folderId, setFolderId],
     );
 
+    const isActive = folder.id === folderId;
+    const isChildActive = folder.childFolders.some(
+      (childFolder) => childFolder.id === folderId,
+    );
+
     return (
       <div
         onClick={(e) => {
@@ -80,11 +85,9 @@ const FolderComponent = memo(
         <FileTree.Folder
           name={folder.name}
           key={folder.id}
-          // childActive={folder.parentId === folderId}
-          active={folder.id === folderId}
-          // onToggle={() =>
-          //   router.push(`/datarooms/${dataroomId}/documents${folder.path}`)
-          // }
+          active={isActive}
+          childActive={isChildActive}
+          onToggle={() => setFolderId(folder.id)}
         >
           {childFolders}
           {documents}