@dxos/plugin-navtree 0.8.2-main.f11618f → 0.8.2-main.fbd8ed0

package/src/components/NavTree/NavTree.tsx

@@ -0,0 +1,62 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type TreeProps } from '@dxos/react-ui-list';
+import { Tabs } from '@dxos/react-ui-tabs';
+
+import { useLoadDescendents } from '../../hooks';
+import { type NavTreeItemGraphNode } from '../../types';
+import { useNavTreeContext } from '../NavTreeContext';
+import { L0Menu, L1Panels, type L1PanelsProps } from '../Sidebar';
+
+export const NAV_TREE_ITEM = 'NavTreeItem';
+
+export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1PanelsProps, 'open'>;
+
+export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
+  const { tab, useItems, onBack } = useNavTreeContext();
+  const topLevelActions = useItems(root, { disposition: 'menu', sort: true });
+  const topLevelCollections = useItems(root, { disposition: 'collection' });
+  const topLevelWorkspaces = useItems(root, { disposition: 'workspace' });
+  const topLevelNavigation = useItems(root, { disposition: 'navigation' });
+  const l0Items = useMemo(
+    () => [
+      // prettier-ignore
+      ...topLevelCollections,
+      ...topLevelWorkspaces,
+      ...topLevelNavigation,
+    ],
+    [topLevelCollections, topLevelWorkspaces, topLevelNavigation],
+  );
+  const pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
+  const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
+  const topLevelItems = useMemo(
+    () => [
+      // prettier-ignore
+      ...l0Items,
+      ...pinnedItems,
+      ...(userAccountItem ? [userAccountItem] : []),
+    ],
+    [l0Items, pinnedItems, userAccountItem],
+  );
+
+  useLoadDescendents(root);
+  const path = useMemo(() => [id], [id]);
+
+  return (
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+      <L0Menu
+        menuActions={topLevelActions}
+        topLevelItems={l0Items}
+        pinnedItems={pinnedItems}
+        userAccountItem={userAccountItem}
+        path={path}
+        parent={root}
+      />
+      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
+    </Tabs.Root>
+  );
+};

package/src/components/NavTree/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './NavTree';

package/src/components/NavTreeContainer.tsx

@@ -16,28 +16,22 @@ import {
   useIntentDispatcher,
   useLayout,
 } from '@dxos/app-framework';
-import { isAction, isActionLike, type Node } from '@dxos/app-graph';
+import { isAction, isActionLike, type ReadableGraph, ROOT_ID, type Node } from '@dxos/app-graph';
 import { PLANK_COMPANION_TYPE } from '@dxos/plugin-deck/types';
+import { useConnections } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { useMediaQuery } from '@dxos/react-ui';
+import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
-import { arrayMove } from '@dxos/util';
+import { arrayMove, byPosition } from '@dxos/util';
 
 import { NAV_TREE_ITEM, NavTree } from './NavTree';
 import { NavTreeContext } from './NavTreeContext';
 import { type NavTreeContextValue } from './types';
 import { NavTreeCapabilities } from '../capabilities';
+import { NAVTREE_PLUGIN } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
-import {
-  expandActions,
-  expandChildren,
-  getActions as naturalGetActions,
-  getChildren,
-  getParent,
-  resolveMigrationOperation,
-  expandChildrenAndActions,
-} from '../util';
+import { getActions as naturalGetActions, getChildren, getParent, resolveMigrationOperation } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
@@ -49,6 +43,29 @@ const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
 const getChildrenFilter = (node: Node): node is Node =>
   untracked(() => !isActionLike(node) && node.type !== PLANK_COMPANION_TYPE);
 
+const filterItems = (node: Node, disposition?: string) => {
+  if (!disposition && (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')) {
+    return false;
+  } else if (!disposition) {
+    const action = isAction(node);
+    return !action || node.properties.disposition === 'item';
+  } else {
+    return node.properties.disposition === disposition;
+  }
+};
+
+const getItems = (graph: ReadableGraph, node?: Node, disposition?: string) => {
+  return graph.getConnections(node?.id ?? ROOT_ID, 'outbound').filter((node) => filterItems(node, disposition));
+};
+
+const useItems = (node?: Node, options?: { disposition?: string; sort?: boolean }) => {
+  const { graph } = useAppGraph();
+  const connections = useConnections(graph, node?.id ?? ROOT_ID).filter((node) =>
+    filterItems(node, options?.disposition),
+  );
+  return options?.sort ? connections.toSorted((a, b) => byPosition(a.properties, b.properties)) : connections;
+};
+
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
   topbar?: boolean;
@@ -58,37 +75,15 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
   const [isLg] = useMediaQuery('lg', { ssr: false });
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useAppGraph();
-  const layout = useLayout();
   const { isOpen, isCurrent, isAlternateTree, setItem } = useCapability(NavTreeCapabilities.State);
+  const layout = useLayout();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
-  const getItems = useCallback(
-    (node?: Node, disposition?: string) => {
-      return graph.nodes(node ?? graph.root, {
-        filter: (node): node is Node => {
-          return untracked(() => {
-            if (
-              !disposition &&
-              (node.properties.disposition === 'hidden' || node.properties.disposition === 'alternate-tree')
-            ) {
-              return false;
-            } else if (!disposition) {
-              const action = isAction(node);
-              return !action || node.properties.disposition === 'item';
-            } else {
-              return node.properties.disposition === disposition;
-            }
-          });
-        },
-      });
-    },
-    [graph],
-  );
-
   const getProps = useCallback(
     (node: Node, path: string[]): PropsFromTreeItem => {
-      const children = getChildren(graph, node, getChildrenFilter, path);
+      const children = getChildren(graph, node, path).filter(getChildrenFilter);
       const parentOf =
         children.length > 0 ? children.map(({ id }) => id) : node.properties.role === 'branch' ? [] : undefined;
       return {
@@ -105,51 +100,63 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph],
   );
 
-  const loadDescendents = useCallback(
-    (node: Node) => {
-      void expandActions(graph, node);
-      if (!isActionLike(node)) {
-        void expandChildren(graph, node).then(() =>
-          // Load one level deeper, which resolves some juddering observed on open/close.
-          Promise.all(
-            getChildren(graph, node).flatMap((child) => [expandActions(graph, child), expandChildren(graph, child)]),
-          ),
-        );
-      }
-    },
-    [graph],
-  );
+  // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
+  // const loadDescendents = useCallback(
+  //   (node: Node) => {
+  //     graph.expand(node.id, 'outbound');
+  //     // Load one level deeper, which resolves some juddering observed on open/close.
+  //     graph.getConnections(node.id, 'outbound').forEach((child) => {
+  //       graph.expand(child.id, 'outbound');
+  //     });
+  //   },
+  //   [graph],
+  // );
 
-  const onOpenChange = useCallback(
+  const handleOpenChange = useCallback(
     ({ item: { id }, path, open }: { item: Node; path: string[]; open: boolean }) => {
       // TODO(thure): This might become a localstorage leak; openItemIds that no longer exist should be removed from this map.
       setItem(path, 'open', open);
-
-      if (graph) {
-        const node = graph.findNode(id);
-        return node && expandChildrenAndActions(graph, node as NavTreeItemGraphNode);
-      }
+      // TODO(wittjosiah): Graph is currently expanded eagerly. See graph plugin.
+      // graph.expand(id, 'outbound');
     },
     [graph],
   );
 
-  const onTabChange = useCallback(
+  const handleTabChange = useCallback(
     async (node: NavTreeItemGraphNode) => {
+      await dispatch(
+        createIntent(LayoutAction.UpdateSidebar, {
+          part: 'sidebar',
+          options: {
+            state:
+              node.id === tab
+                ? navigationSidebarState === 'expanded'
+                  ? isLg
+                    ? 'collapsed'
+                    : 'closed'
+                  : 'expanded'
+                : 'expanded',
+          },
+        }),
+      );
+
       await dispatch(createIntent(LayoutAction.SwitchWorkspace, { part: 'workspace', subject: node.id }));
+
       // Open the first item if the workspace is empty.
       if (layout.active.length === 0) {
-        const [item] = getItems(node).filter((node) => !isActionLike(node));
+        const [item] = getItems(graph, node).filter((node) => !isActionLike(node));
         if (item && item.data) {
           await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
         }
       }
     },
-    [dispatch, layout],
+    [dispatch, layout.active, tab, navigationSidebarState, isLg],
   );
 
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
     const sourceNode = source.item as Node;
     const targetNode = target.item as Node;
+    // TODO(wittjosiah): This shouldn't depend directly on client, there should be a graph-level abstraction.
     if (isSpace(targetNode.data)) {
       // TODO(wittjosiah): Find a way to only allow space as source for rearranging.
       return isEchoObject(sourceNode.data) || isSpace(sourceNode.data);
@@ -167,8 +174,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
       }
 
       if (isAction(node)) {
-        const [parent] = graph.nodes(node, { relation: 'inbound' });
-        void (parent && node.data({ node: parent, caller: NAV_TREE_ITEM }));
+        const [parent] = graph.getConnections(node.id, 'inbound');
+        void (parent && node.data({ parent, caller: NAV_TREE_ITEM }));
         return;
       }
 
@@ -189,7 +196,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
         void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
       }
 
-      const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
+      const defaultAction = graph.getActions(node.id).find((action) => action.properties?.disposition === 'default');
       if (isAction(defaultAction)) {
         void (defaultAction.data as () => void)();
       }
@@ -201,7 +208,7 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
     [graph, dispatch, isCurrent, isLg],
   );
 
-  const onBack = useCallback(
+  const handleBack = useCallback(
     () => dispatch(createIntent(LayoutAction.RevertWorkspace, { part: 'workspace', options: { revert: true } })),
     [dispatch],
   );
@@ -228,8 +235,8 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
               : resolveMigrationOperation(graph, sourceNode, targetPath, targetNode);
           const sourceParent = getParent(graph, sourceNode, sourcePath);
           const targetParent = getParent(graph, targetNode, targetPath);
-          const sourceItems = getItems(sourceParent);
-          const targetItems = getItems(targetParent);
+          const sourceItems = getItems(graph, sourceParent);
+          const targetItems = getItems(graph, targetParent);
           const sourceIndex = sourceItems.findIndex(({ id }) => id === sourceNode.id);
           const targetIndex = targetItems.findIndex(({ id }) => id === targetNode.id);
           const migrationIndex =
@@ -274,48 +281,47 @@ export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeC
 
   const navTreeContextValue = useMemo(
     () => ({
+      useItems,
       tab,
-      onTabChange,
-      onBack,
       getActions,
-      loadDescendents,
+      // loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,
-      getItems,
       getProps,
       isCurrent,
       isOpen,
-      onOpenChange,
       canDrop,
-      onSelect: handleSelect,
       isAlternateTree,
       setAlternateTree,
+      onTabChange: handleTabChange,
+      onOpenChange: handleOpenChange,
+      onSelect: handleSelect,
+      onBack: handleBack,
     }),
     [
       tab,
-      onTabChange,
-      onBack,
       getActions,
-      loadDescendents,
+      // loadDescendents,
       renderItemEnd,
       popoverAnchorId,
       topbar,
-      getItems,
       getProps,
       isCurrent,
       isOpen,
-      onOpenChange,
       canDrop,
-      handleSelect,
       isAlternateTree,
       setAlternateTree,
+      handleTabChange,
+      handleOpenChange,
+      handleSelect,
+      handleBack,
     ],
   );
 
   return (
     <NavTreeContext.Provider value={navTreeContextValue}>
-      <NavTree root={graph.root} id={graph.root.id} />
+      <NavTree id={ROOT_ID} root={graph.root} open={layout.sidebarOpen} />
     </NavTreeContext.Provider>
   );
 });

package/src/components/NavTreeContext.tsx

@@ -10,4 +10,4 @@ import { type NavTreeContextValue } from './types';
 
 export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
 
-export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));
+export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('Missing NavTreeContext'));

package/src/components/{NavTreeItemAction.stories.tsx → NavTreeItem/NavTreeItemAction.stories.tsx}

@@ -4,6 +4,8 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react';
+
 import { type NodeArg } from '@dxos/app-graph';
 import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
@@ -37,19 +39,23 @@ const menuActions = faker.helpers.multiple(
   { count: 20 },
 );
 
-export default {
+const meta: Meta<typeof NavTreeItemAction> = {
   title: 'plugins/plugin-navtree/NavTreeItemAction',
   component: NavTreeItemAction,
-  decorators: [withTheme, withLayout({ fullscreen: true, tooltips: true })],
+  decorators: [withTheme, withLayout()],
   args: {
     icon: 'ph--list--regular',
     parent,
     menuActions,
     label: 'Select action',
-    onAction: (action) => {
-      console.log(action);
-    },
   } satisfies Partial<NavTreeItemActionMenuProps>,
+  parameters: {
+    layout: 'centered',
+  },
 };
 
-export const Default = {};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/{NavTreeItemAction.tsx → NavTreeItem/NavTreeItemAction.tsx}

@@ -9,8 +9,8 @@ import { useTranslation, toLocalizedString, IconButton, useDensityContext } from
 import { DropdownMenu, MenuProvider, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../meta';
-import { type ActionProperties } from '../types';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { type ActionProperties } from '../../types';
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
   parent: Node;
@@ -18,7 +18,6 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
   monolithic?: boolean;
   menuActions?: Action[];
   suppressNextTooltip?: MutableRefObject<boolean>;
-  onAction?: (action: Action) => void;
 };
 
 const fallbackIcon = 'ph--placeholder--regular';
@@ -33,18 +32,24 @@ const coarseActionButtonProps = {
 };
 
 export const NavTreeItemActionDropdownMenu = ({
+  parent,
   label,
   icon,
   testId,
   menuActions,
-  onAction,
+  caller,
 }: NavTreeItemActionMenuProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const suppressNextTooltip = useRef<boolean>(false);
   const density = useDensityContext();
   return (
-    <MenuProvider onAction={onAction}>
-      <DropdownMenu.Root items={menuActions as MenuItem[]} suppressNextTooltip={suppressNextTooltip}>
+    <MenuProvider>
+      <DropdownMenu.Root
+        group={parent}
+        items={menuActions as MenuItem[]}
+        caller={caller}
+        suppressNextTooltip={suppressNextTooltip}
+      >
         <DropdownMenu.Trigger asChild>
           <IconButton
             {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
@@ -88,7 +93,7 @@ export const NavTreeItemMonolithicAction = ({
           return;
         }
         event.stopPropagation();
-        void invoke?.(caller ? { node: parent, caller } : { node: parent });
+        void invoke?.(caller ? { parent, caller } : { parent });
       }}
       data-testid={testId}
     />
@@ -104,12 +109,6 @@ export const NavTreeItemAction = ({ monolithic, menuActions, parent: node, ...pr
   return monolithic && menuActions?.length === 1 ? (
     <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu
-      {...props}
-      label={baseLabel}
-      parent={node}
-      menuActions={menuActions}
-      onAction={(action) => action.data?.(props.caller ? { node, caller: props.caller } : { node })}
-    />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} menuActions={menuActions} />
   );
 };

package/src/components/{NavTreeItemColumns.tsx → NavTreeItem/NavTreeItemColumns.tsx}

@@ -7,12 +7,12 @@ import React, { Fragment, memo } from 'react';
 import { isAction } from '@dxos/app-graph';
 import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
 
-import { NAV_TREE_ITEM } from './NavTree';
-import { useNavTreeContext } from './NavTreeContext';
 import { NavTreeItemAction } from './NavTreeItemAction';
-import type { NavTreeItemColumnsProps } from './types';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
+import { useLoadDescendents } from '../../hooks';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { NAV_TREE_ITEM } from '../NavTree';
+import { useNavTreeContext } from '../NavTreeContext';
+import type { NavTreeItemColumnsProps } from '../types';
 
 export const NavTreeItemColumns = memo(({ path, item, open, density = 'fine' }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);

package/src/components/NavTreeItem/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './NavTreeItemAction';
+export * from './NavTreeItemColumns';