@dxos/plugin-navtree 0.6.13 → 0.6.14-main.69511f5

package/src/components/NavTree.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { Fragment, useCallback, useEffect, type FC } from 'react';
+
+import { isAction, type Node } from '@dxos/app-graph';
+import { Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+import { Tree, type TreeProps } from '@dxos/react-ui-list';
+import { type MaybePromise } from '@dxos/util';
+
+import { NavTreeItemAction } from './NavTreeItemAction';
+import { NAVTREE_PLUGIN } from '../meta';
+import { type NavTreeItem } from '../types';
+
+export const NAV_TREE_ITEM = 'NavTreeItem';
+
+export type NavTreeProps = Omit<TreeProps<NavTreeItem>, 'draggable' | 'gridTemplateColumns' | 'renderColumns'> &
+  Pick<NavTreeColumnsProps, 'loadDescendents' | 'renderPresence' | 'popoverAnchorId'>;
+
+export const NavTree = ({ loadDescendents, renderPresence, popoverAnchorId, ...props }: NavTreeProps) => {
+  const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItem>['renderColumns']>>(
+    ({ item, menuOpen, setMenuOpen }) => {
+      return (
+        <NavTreeColumns
+          item={item}
+          menuOpen={menuOpen}
+          setMenuOpen={setMenuOpen}
+          loadDescendents={loadDescendents}
+          renderPresence={renderPresence}
+          popoverAnchorId={popoverAnchorId}
+        />
+      );
+    },
+    [renderPresence, popoverAnchorId, loadDescendents],
+  );
+
+  return (
+    <Tree<NavTreeItem>
+      {...props}
+      draggable
+      gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+      classNames='pbs-1'
+      renderColumns={renderColumns}
+    />
+  );
+};
+
+type NavTreeColumnsProps = {
+  item: NavTreeItem;
+  menuOpen: boolean;
+  setMenuOpen: (open: boolean) => void;
+  loadDescendents?: (node: Node) => MaybePromise<void>;
+  renderPresence?: FC<{ item: NavTreeItem }>;
+  popoverAnchorId?: string;
+};
+
+const NavTreeColumns = ({
+  item,
+  menuOpen,
+  setMenuOpen,
+  loadDescendents,
+  renderPresence: Presence,
+  popoverAnchorId,
+}: NavTreeColumnsProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  const level = item.path.length - 2;
+
+  const [primaryAction, ...secondaryActions] = item.actions.toSorted((a, b) =>
+    a.properties?.disposition === 'toolbar' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : item.actions)
+    .flatMap((action) => (isAction(action) ? [action] : []))
+    .filter((action) => !action.properties?.hidden);
+
+  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${item.id}` ? Popover.Anchor : Fragment;
+
+  // TODO(thure): Ideally this should not be necessary.
+  useEffect(() => {
+    const frame = requestAnimationFrame(() => {
+      void loadDescendents?.(item.node);
+      if (primaryAction && !isAction(primaryAction)) {
+        void loadDescendents?.(primaryAction);
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [primaryAction]);
+
+  return (
+    <>
+      {primaryAction?.properties?.disposition === 'toolbar' ? (
+        <NavTreeItemAction
+          testId={primaryAction.properties?.testId}
+          label={toLocalizedString(primaryAction.properties?.label, t)}
+          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+          parent={item.node}
+          monolithic={isAction(primaryAction)}
+          menuActions={isAction(primaryAction) ? [primaryAction] : item.groupedActions[primaryAction.id]}
+          menuType={primaryAction.properties?.menuType}
+          caller={NAV_TREE_ITEM}
+        />
+      ) : (
+        <Treegrid.Cell />
+      )}
+      <ActionRoot>
+        {actions.length > 0 ? (
+          <NavTreeItemAction
+            testId={`navtree.treeItem.actionsLevel${level}`}
+            label={t('tree item actions label')}
+            icon='ph--dots-three-vertical--regular'
+            parent={item.node}
+            menuActions={actions}
+            menuType='dropdown'
+            caller={NAV_TREE_ITEM}
+            menuOpen={menuOpen}
+            onChangeMenuOpen={setMenuOpen}
+          />
+        ) : (
+          <Treegrid.Cell />
+        )}
+      </ActionRoot>
+      {Presence && <Presence item={item} />}
+    </>
+  );
+};

package/src/components/NavTreeContainer.tsx

@@ -2,84 +2,59 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { type ReactNode, useCallback, useMemo } from 'react';
-
-import {
-  NavigationAction,
-  LayoutAction,
-  Surface,
-  SLUG_PATH_SEPARATOR,
-  SLUG_COLLECTION_INDICATOR,
-  useIntentDispatcher,
-} from '@dxos/app-framework';
-import { getGraph, isAction, isActionLike } from '@dxos/app-graph';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { useCallback, useEffect } from 'react';
+
+import { NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import { isAction, isActionLike, type Node } from '@dxos/app-graph';
+import { useGraph } from '@dxos/plugin-graph';
+import { isEchoObject, isSpace } from '@dxos/react-client/echo';
 import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
-import { type MosaicDropEvent, type MosaicMoveEvent, Path } from '@dxos/react-ui-mosaic';
-import {
-  NavTree,
-  type NavTreeItemNode,
-  type NavTreeNode,
-  getLevel,
-  type NavTreeActionsNode,
-  type NavTreeProps,
-  type NavTreeItemMoveDetails,
-} from '@dxos/react-ui-navtree';
+import { isItem } from '@dxos/react-ui-list';
 import { arrayMove } from '@dxos/util';
 
+import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
 import { NavTreeFooter } from './NavTreeFooter';
 import { NAVTREE_PLUGIN } from '../meta';
+import { type NavTreeItem } from '../types';
 import {
   expandActions,
   expandChildren,
   getChildren,
   getParent,
-  type NavTreeItem,
-  type NavTreeItemGraphNode,
   resolveMigrationOperation,
-  treeItemsFromRootNode,
+  type NavTreeItemGraphNode,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderPresence = (node: NavTreeNode): ReactNode => (
-  <Surface role='presence--glyph' data={{ object: node.data }} />
+const renderPresence = ({ item }: { item: NavTreeItem }) => (
+  <Surface role='presence--glyph' data={{ object: item.node.data, id: item.node.id }} />
 );
 
-export const NavTreeContainer = ({
-  root,
-  activeIds,
-  openItemIds,
-  onOpenItemIdsChange,
-  attended,
-  popoverAnchorId,
-}: {
-  root: NavTreeItemGraphNode;
-  activeIds: Set<string>;
-  openItemIds: Record<string, true>;
-  onOpenItemIdsChange: (nextOpenItemIds: Record<string, true>) => void;
-  attended: Set<string>;
+export type NavTreeContainerProps = {
+  items: NavTreeItem[];
+  current: string[];
+  open: string[];
   popoverAnchorId?: string;
-}) => {
+} & Pick<NavTreeProps, 'onOpenChange'>;
+
+export const NavTreeContainer = ({ items, current, open, popoverAnchorId, ...props }: NavTreeContainerProps) => {
   const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const dispatch = useIntentDispatcher();
-
-  const graph = useMemo(() => getGraph(root), [root]);
-
-  const items = treeItemsFromRootNode(graph, root, openItemIds);
+  const { graph } = useGraph();
 
   const loadDescendents = useCallback(
-    (node: NavTreeNode | NavTreeActionsNode) => {
-      void expandActions(graph, node as NavTreeItemGraphNode);
+    (node: Node) => {
+      void expandActions(graph, node);
       if (!isActionLike(node)) {
-        void expandChildren(graph, node as NavTreeItemGraphNode).then(() =>
+        void expandChildren(graph, node).then(() =>
           // Load one level deeper, which resolves some juddering observed on open/close.
           Promise.all(
-            getChildren(graph, node as NavTreeItemGraphNode).flatMap((child) => [
-              expandActions(graph, child),
-              expandChildren(graph, child),
-            ]),
+            getChildren(graph, node).flatMap((child) => [expandActions(graph, child), expandChildren(graph, child)]),
           ),
         );
       }
@@ -87,262 +62,121 @@ export const NavTreeContainer = ({
     [graph],
   );
 
-  const handleNavigate = async ({ node, actions }: NavTreeItemNode) => {
-    if (!node.data) {
-      return;
-    }
-
-    // TODO(thure): Refactor opening related planks (comments in this case) to a generalized approach.
-    await dispatch({
-      action: NavigationAction.OPEN,
-      data: {
-        activeParts: node.data?.comments
-          ? {
-              main: [node.id],
-              complementary: [`${node.id}${SLUG_PATH_SEPARATOR}comments${SLUG_COLLECTION_INDICATOR}`],
-            }
-          : {
-              main: [node.id],
-            },
-      },
-    });
-
-    await dispatch({ action: LayoutAction.SCROLL_INTO_VIEW, data: { id: node.id } });
-
-    const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
-    if (isAction(defaultAction)) {
-      void (defaultAction.data as () => void)();
+  const canDrop = useCallback((source: NavTreeItem, target: NavTreeItem) => {
+    if (isSpace(target.node.data)) {
+      // TODO(wittjosiah): Find a way to only allow space as source for rearranging.
+      return isEchoObject(source.node.data) || isSpace(source.node.data);
+    } else if (isEchoObject(target.node.data)) {
+      return isEchoObject(source.node.data);
+    } else {
+      return false;
     }
-    if (!isLg) {
-      closeNavigationSidebar();
-    }
-  };
+  }, []);
 
-  const handleItemOpenChange = ({ id, actions, path }: NavTreeItemNode, nextOpen: boolean) => {
-    if (path) {
-      if (nextOpen) {
-        onOpenItemIdsChange({ ...openItemIds, [id]: true });
-      } else {
-        // TODO(thure): Filter vs single-remove, make setting?
-        const { [id]: _, ...nextOpenItemIds } = openItemIds;
-        onOpenItemIdsChange(nextOpenItemIds);
+  const handleSelect = useCallback(
+    ({ node, actions, path }: NavTreeItem) => {
+      if (!node.data) {
+        return;
       }
-    }
-
-    // TODO(wittjosiah): This is a temporary solution to ensure spaces get enabled when they are expanded.
-    const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
-    if (isAction(defaultAction)) {
-      void (defaultAction.data as () => void)();
-    }
-  };
 
-  const resolveItemLevel = useCallback(
-    (overPosition: number | undefined, activeId: string | undefined, levelOffset: number) => {
-      if (!(typeof overPosition === 'number' && activeId)) {
-        return 1;
-      } else {
-        const nextItems = arrayMove(
-          items,
-          items.findIndex(({ id }) => id === activeId),
-          overPosition,
-        );
-        const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
-        const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
-        return Math.min(
-          previousItem ? getLevel(previousItem?.path) + 1 : 1,
-          Math.max(nextItem ? getLevel(nextItem?.path) : 1, getLevel(nextItems[overPosition].path) + levelOffset),
-        );
+      if (isAction(node)) {
+        const [parentId] = path.slice(1);
+        const parent = items.find(({ id }) => id === parentId)?.node;
+        void (parent && node.data({ node: parent, caller: NAV_TREE_ITEM }));
+        return;
       }
-    },
-    [items],
-  );
 
-  const handleMove: NavTreeProps['onMove'] = useCallback(
-    ({ active, over, details }: MosaicMoveEvent<number, NavTreeItemMoveDetails>) => {
-      const levelOffset = Math.floor((details?.delta?.x ?? 0) / 16);
-      const overPosition = over.position ?? 0;
-
-      const nextItems = arrayMove(
-        items,
-        items.findIndex(({ id }) => id === active.item.id),
-        overPosition,
-      );
-
-      const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
-      const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
-
-      const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
-
-      if (!activeNode || !previousItem || !previousItem.path) {
-        // console.log('[reject]', !activeNode, !previousItem, !previousItem.path);
-        // log.warn('Top-level rearrange before the first item of the NavTree is unsupported at this time.');
-        return { operation: 'reject' as const, details: { levelOffset } };
+      // TODO(thure): Refactor opening related planks (comments in this case) to a generalized approach.
+      void dispatch({
+        action: NavigationAction.OPEN,
+        data: {
+          activeParts: {
+            main: [node.id],
+          },
+        },
+      });
+
+      const defaultAction = actions?.find((action) => action.properties?.disposition === 'default');
+      if (isAction(defaultAction)) {
+        void (defaultAction.data as () => void)();
       }
 
-      const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
-
-      const previousLevel = getLevel(previousItem.path);
-
-      // console.log('[over]', overLevel, previousLevel, levelOffset);
-
-      if (previousLevel === overLevel - 1) {
-        if (Path.hasChild(previousItem.id, active.item.id)) {
-          // Previous is already parent of Active, rearrange.
-          const operation = previousItem.node.properties.onRearrangeChildren
-            ? ('rearrange' as const)
-            : ('reject' as const);
-          return { operation, details: { levelOffset } };
-        } else {
-          // Previous is not yet parent of Active, check transfer or copy.
-          const operation = resolveMigrationOperation(graph, activeNode, previousItem.path, previousItem.node);
-          // console.log('[migration result]', operation, 'Previous is not yet parent of Active, check transfer or copy.');
-          return { operation, details: { levelOffset } };
-        }
-      } else if (previousLevel === overLevel) {
-        const parent = getParent(graph, previousItem.node, previousItem.path);
-        const parentPath = previousItem.path.slice(0, previousItem.path.length - 1);
-        if (Path.siblings(previousItem.id, active.item.id)) {
-          // Previous is already a sibling of Active, rearrange.
-          const operation = parent?.properties.onRearrangeChildren ? ('rearrange' as const) : ('reject' as const);
-          return { operation, details: { levelOffset } };
-        } else {
-          // Previous is not yet a sibling of Active, transfer/copy to Previous’s parent.
-          const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
-          // console.log(
-          //   '[migration result]',
-          //   operation,
-          //   'Previous is not yet a sibling of Active, transfer/copy to Previous’s parent.',
-          // );
-          return { operation, details: { levelOffset } };
-        }
-      } else if (nextItem && nextItem.path) {
-        const nextLevel = getLevel(nextItem.path);
-        if (nextLevel === overLevel) {
-          const parent = getParent(graph, nextItem.node, nextItem.path);
-          const parentPath = nextItem.path.slice(0, nextItem.path.length - 1);
-          if (Path.siblings(nextItem.id, active.item.id)) {
-            // Next is already a sibling of Active, rearrange.
-            const operation = parent?.properties.onRearrangeChildren ? ('rearrange' as const) : ('reject' as const);
-            return { operation, details: { levelOffset } };
-          } else {
-            // Next is not yet a sibling of Active, transfer to Next’s parent.
-            const operation = resolveMigrationOperation(graph, activeNode, parentPath, parent);
-            // console.log(
-            //   '[migration result]',
-            //   operation,
-            //   'Next is not yet a sibling of Active, transfer to Next’s parent.',
-            // );
-            return { operation, details: { levelOffset } };
-          }
-        } else {
-          // console.log('[migration result]', 'reject');
-          return { operation: 'reject' as const, details: { levelOffset } };
-        }
-      } else {
-        // console.log('[migration result]', 'reject');
-        return { operation: 'reject' as const, details: { levelOffset } };
+      if (!isLg) {
+        closeNavigationSidebar();
       }
     },
-    [root, items],
+    [items, dispatch, isLg, closeNavigationSidebar],
   );
 
-  const handleDrop = useCallback(
-    ({ operation, active, over, details = {} }: MosaicDropEvent<number, NavTreeItemMoveDetails>) => {
-      if (Path.first(over.path) !== root.id) {
-        return undefined;
-      }
-      const { levelOffset = 0 } = details;
-      const overPosition = over.position ?? 0;
-
-      const nextItems = arrayMove(
-        items,
-        items.findIndex(({ id }) => id === active.item.id),
-        overPosition,
-      );
-
-      const activeNode = 'node' in active.item ? (active.item as NavTreeItem).node : undefined;
-      const activeParentId = Path.parent(active.item.id);
-
-      if (!activeNode) {
-        return undefined;
-      }
-
-      const activeParent = getParent(graph, activeNode, (active.item as NavTreeItem).path ?? []);
+  // TODO(wittjosiah): Factor out hook.
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      onDrop: ({ location, source }) => {
+        // Didn't drop on anything.
+        if (!location.current.dropTargets.length) {
+          return;
+        }
 
-      if (operation === 'rearrange') {
-        void activeParent?.properties.onRearrangeChildren?.(
-          nextItems.filter(({ id }) => Path.hasChild(activeParentId, id)).map(({ node }) => node.data),
-        );
-        return null;
-      } else {
-        const previousItem: NavTreeItem | undefined = nextItems[overPosition - 1];
-        const nextItem: NavTreeItem | undefined = nextItems[overPosition + 1];
+        const target = location.current.dropTargets[0];
+        const instruction: Instruction | null = extractInstruction(target.data);
+        if (instruction !== null && instruction.type !== 'instruction-blocked') {
+          const sourceNode = source.data.node as NavTreeItemGraphNode;
+          const targetNode = target.data.node as NavTreeItemGraphNode;
+
+          const sourcePath = source.data.path as string[];
+          const targetPath = target.data.path as string[];
+
+          const nextItems = instruction.type.startsWith('reorder')
+            ? items.filter((item) => item.path.slice(0, -1).join() === targetPath.slice(0, -1).join())
+            : items.filter((item) => item.path.slice(0, -1).join() === targetPath.join());
+          const operation =
+            sourcePath.slice(0, -1).join() === targetPath.slice(0, -1).join() && instruction.type !== 'make-child'
+              ? 'rearrange'
+              : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
+
+          const sourceParent = getParent(graph, sourceNode, sourcePath);
+          const targetParent = getParent(graph, targetNode, targetPath);
+
+          const sourceIndex = nextItems.findIndex(({ id }) => id === sourceNode.id);
+          const targetIndex = nextItems.findIndex(({ id }) => id === targetNode.id);
+          const migrationIndex =
+            instruction.type === 'make-child'
+              ? nextItems.length > 0
+                ? nextItems.length - 1
+                : 0
+              : instruction.type === 'reorder-below'
+                ? targetIndex + 1
+                : targetIndex;
+
+          switch (operation) {
+            case 'rearrange': {
+              arrayMove(nextItems, sourceIndex, targetIndex);
+              void sourceParent?.properties.onRearrangeChildren?.(nextItems.map((item) => item.node.data));
+              break;
+            }
 
-        const overLevel = resolveItemLevel(overPosition, active.item.id, levelOffset);
+            case 'copy': {
+              const target = instruction.type === 'make-child' ? targetNode : targetParent;
+              void target?.properties.onCopy?.(sourceNode, migrationIndex);
+              break;
+            }
 
-        const previousLevel = getLevel(previousItem.path);
+            case 'transfer': {
+              const target = instruction.type === 'make-child' ? targetNode : targetParent;
+              if (!target?.properties.onTransferStart || !sourceParent?.properties.onTransferEnd) {
+                break;
+              }
 
-        if (operation === 'copy') {
-          if (previousLevel === overLevel - 1) {
-            void previousItem.node.properties.onCopy?.(activeNode, 0);
-            return null;
-          } else if (previousLevel === overLevel) {
-            const parent = getParent(graph, previousItem.node, previousItem.path ?? []);
-            void parent?.properties.onCopy?.(
-              activeNode,
-              getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1,
-            );
-            return null;
-          } else if (nextItem && nextItem.path) {
-            const parent = getParent(graph, nextItem.node, nextItem.path ?? []);
-            void parent?.properties.onCopy?.(
-              activeNode,
-              getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id),
-            );
-            return null;
-          }
-        } else if (operation === 'transfer') {
-          const onTransferEnd = activeParent?.properties.onTransferEnd;
-          if (!onTransferEnd) {
-            return undefined;
-          } else if (previousLevel === overLevel - 1) {
-            const onTransferStart = previousItem.node.properties.onTransferStart;
-            if (onTransferStart) {
-              void onTransferEnd(activeNode, previousItem.node);
-              void onTransferStart(activeNode, 0);
-              return null;
-            }
-          } else if (previousLevel === overLevel && previousItem.path) {
-            const parent = getParent(graph, previousItem.node, previousItem.path);
-            if (parent?.properties.onTransferStart) {
-              void onTransferEnd(activeNode, previousItem.node);
-              void parent.properties.onTransferStart(
-                activeNode,
-                getChildren(graph, parent).findIndex(({ id }) => id === previousItem.node.id) + 1,
-              );
-              return null;
-            }
-          } else if (nextItem && nextItem.path) {
-            const parent = getParent(graph, nextItem.node, nextItem.path);
-            if (parent?.properties.onTransferStart) {
-              void onTransferEnd(activeNode, previousItem.node);
-              void parent.properties.onTransferStart(
-                activeNode,
-                getChildren(graph, parent).findIndex(({ id }) => id === nextItem.node.id),
-              );
-              return null;
+              void target?.properties.onTransferStart(sourceNode, migrationIndex);
+              void sourceParent?.properties.onTransferEnd?.(sourceNode, target);
+              break;
             }
           }
         }
-      }
-      return undefined;
-    },
-    [root, items],
-  );
-
-  const handleDragEnd = useCallback(() => {
-    onOpenItemIdsChange({ ...openItemIds });
-  }, [onOpenItemIdsChange, openItemIds]);
+      },
+    });
+  }, [items]);
 
   return (
     <ElevationProvider elevation='chrome'>
@@ -351,26 +185,22 @@ export const NavTreeContainer = ({
         className='bs-full overflow-hidden row-span-3 grid grid-cols-1 grid-rows-[min-content_1fr_min-content]'
       >
         <Surface role='search-input' limit={1} />
-        {/* TODO(thure): what gives this an inline `overflow: initial`? */}
+
+        {/* TODO(thure): What gives this an inline `overflow: initial`? */}
         <div role='none' className='!overflow-y-auto'>
           <NavTree
-            id={root.id}
             items={items}
-            current={activeIds}
-            attended={attended}
-            type={NODE_TYPE}
-            open={openItemIds}
-            onNavigate={handleNavigate}
-            onItemOpenChange={handleItemOpenChange}
-            onMove={handleMove}
-            onDrop={handleDrop}
-            onDragEnd={handleDragEnd}
-            popoverAnchorId={popoverAnchorId}
-            renderPresence={renderPresence}
-            resolveItemLevel={resolveItemLevel}
+            open={open}
+            current={current}
             loadDescendents={loadDescendents}
+            renderPresence={renderPresence}
+            popoverAnchorId={popoverAnchorId}
+            canDrop={canDrop}
+            onSelect={handleSelect}
+            {...props}
           />
         </div>
+
         <NavTreeFooter />
       </div>
     </ElevationProvider>

package/src/components/NavTreeFooter.tsx

@@ -35,7 +35,7 @@ const buttonStyles = 'pli-1.5 text-xs font-normal';
 const repo = 'https://github.com/dxos/dxos';
 
 export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
-  const layoutPart = useDefaultValue(props.layoutPart, 'sidebar');
+  const layoutPart = useDefaultValue(props.layoutPart, () => 'sidebar');
   const config = useConfig();
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);