Flattened the sidebar tree

src-web/components/core/tree/TreeDragOverlay.tsx

@@ -1,20 +1,18 @@
 import { DragOverlay } from '@dnd-kit/core';
 import { useAtomValue } from 'jotai';
 import { draggingIdsFamily } from './atoms';
-import type { SelectableTreeNode, TreeNode } from './common';
+import type { SelectableTreeNode } from './common';
 import type { TreeProps } from './Tree';
 import { TreeItemList } from './TreeItemList';
 
 export function TreeDragOverlay<T extends { id: string }>({
   treeId,
-  root,
   selectableItems,
   getItemKey,
   ItemInner,
   ItemLeftSlot,
 }: {
   treeId: string;
-  root: TreeNode<T>;
   selectableItems: SelectableTreeNode<T>[];
 } & Pick<TreeProps<T>, 'getItemKey' | 'ItemInner' | 'ItemLeftSlot'>) {
   const draggingItems = useAtomValue(draggingIdsFamily(treeId));
@@ -22,22 +20,11 @@ export function TreeDragOverlay<T extends { id: string }>({
     <DragOverlay dropAnimation={null}>
       <TreeItemList
         treeId={treeId + '.dragging'}
-        node={{
-          item: { ...root.item, id: `${root.item.id}_dragging` },
-          parent: null,
-          children: draggingItems
-            .map((id) => {
-              const child = selectableItems.find((i2) => {
-                return i2.node.item.id === id;
-              })?.node;
-              return child == null ? null : { ...child, children: undefined };
-            })
-            .filter((c) => c != null),
-        }}
+        nodes={selectableItems.filter((i) => draggingItems.includes(i.node.item.id))}
         getItemKey={getItemKey}
         ItemInner={ItemInner}
         ItemLeftSlot={ItemLeftSlot}
-        depth={0}
+        forceDepth={0}
       />
     </DragOverlay>
   );