@dxos/plugin-navtree 0.7.4 → 0.7.5-labs.071a3e2

package/src/components/NavTree.tsx

@@ -2,135 +2,40 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, useCallback, useEffect, type FC } from 'react';
+import React, { useMemo } 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 { Tabs } from '@dxos/react-ui-tabs';
+import { byPosition } from '@dxos/util';
 
-import { NavTreeItemAction } from './NavTreeItemAction';
-import { NAVTREE_PLUGIN } from '../meta';
-import { type FlattenedActions, type NavTreeItemGraphNode } from '../types';
+import { L0Menu } from './L0Menu';
+import { L1Panels } from './L1Panels';
+import { useNavTreeContext } from './NavTreeContext';
+import { type NavTreeProps } from './types';
+import { useLoadDescendents } from '../hooks';
 
 export const NAV_TREE_ITEM = 'NavTreeItem';
 
-export type NavTreeProps = Omit<
-  TreeProps<NavTreeItemGraphNode>,
-  'draggable' | 'gridTemplateColumns' | 'renderColumns'
-> &
-  Pick<NavTreeColumnsProps, 'getActions' | 'loadDescendents' | 'renderItemEnd' | 'popoverAnchorId'>;
-
-export const NavTree = ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, ...props }: NavTreeProps) => {
-  const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItemGraphNode>['renderColumns']>>(
-    ({ item, path, menuOpen, setMenuOpen }) => {
-      return (
-        <NavTreeColumns
-          path={path}
-          node={item}
-          getActions={getActions}
-          menuOpen={menuOpen}
-          setMenuOpen={setMenuOpen}
-          loadDescendents={loadDescendents}
-          renderItemEnd={renderItemEnd}
-          popoverAnchorId={popoverAnchorId}
-        />
-      );
-    },
-    [renderItemEnd, popoverAnchorId, loadDescendents],
-  );
-
-  return (
-    <Tree
-      {...props}
-      draggable
-      gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-      renderColumns={renderColumns}
-    />
+export const NavTree = ({ id, root }: NavTreeProps) => {
+  const { getItems, tab } = useNavTreeContext();
+  const topLevelActions = getItems(root, 'item');
+  const topLevelCollections = getItems(root, 'collection');
+  const topLevelWorkspaces = getItems(root, 'workspace');
+  const topLevelNavigation = getItems(root, 'navigation');
+  const l0Items = useMemo(
+    () => [...topLevelActions, ...topLevelCollections, ...topLevelWorkspaces, ...topLevelNavigation],
+    [topLevelActions, topLevelCollections, topLevelWorkspaces, topLevelNavigation],
   );
-};
-
-type NavTreeColumnsProps = {
-  path: string[];
-  node: Node;
-  getActions: (node: Node) => FlattenedActions;
-  menuOpen: boolean;
-  setMenuOpen: (open: boolean) => void;
-  loadDescendents?: (node: Node) => MaybePromise<void>;
-  renderItemEnd?: FC<{ node: Node }>;
-  popoverAnchorId?: string;
-};
-
-const NavTreeColumns = ({
-  path,
-  node,
-  getActions,
-  menuOpen,
-  setMenuOpen,
-  loadDescendents,
-  renderItemEnd: ItemEnd,
-  popoverAnchorId,
-}: NavTreeColumnsProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-
-  const level = path.length - 2;
-
-  const { actions: _actions, groupedActions } = getActions(node);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
-    a.properties?.disposition === 'toolbar' ? -1 : 1,
-  );
-
-  const actions = (primaryAction?.properties?.disposition === 'toolbar' ? secondaryActions : _actions)
-    .flatMap((action) => (isAction(action) ? [action] : []))
-    .filter((action) => !action.properties?.hidden);
-
-  const ActionRoot = popoverAnchorId === `dxos.org/ui/${NAV_TREE_ITEM}/${node.id}` ? Popover.Anchor : Fragment;
+  const pinnedItems = getItems(root, 'pin-end').toSorted((a, b) => byPosition(a.properties, b.properties));
+  const topLevelItems = useMemo(() => [...l0Items, ...pinnedItems], [l0Items, pinnedItems]);
 
-  // TODO(thure): Ideally this should not be necessary.
-  useEffect(() => {
-    const frame = requestAnimationFrame(() => {
-      void loadDescendents?.(node);
-      if (primaryAction && !isAction(primaryAction)) {
-        void loadDescendents?.(primaryAction);
-      }
-    });
-    return () => cancelAnimationFrame(frame);
-  }, [primaryAction]);
+  useLoadDescendents(root);
+  const path = useMemo(() => [id], [id]);
 
   return (
-    <>
-      {primaryAction?.properties?.disposition === 'toolbar' ? (
-        <NavTreeItemAction
-          testId={primaryAction.properties?.testId}
-          label={toLocalizedString(primaryAction.properties?.label, t)}
-          icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
-          parent={node}
-          monolithic={isAction(primaryAction)}
-          menuActions={isAction(primaryAction) ? [primaryAction] : 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={node}
-            menuActions={actions}
-            menuType='dropdown'
-            caller={NAV_TREE_ITEM}
-            menuOpen={menuOpen}
-            onChangeMenuOpen={setMenuOpen}
-          />
-        ) : (
-          <Treegrid.Cell />
-        )}
-      </ActionRoot>
-      {ItemEnd && <ItemEnd node={node} />}
-    </>
+    // NOTE(thure): 74px (rather than rem) is intentional in order to match the size of macOS windowing controls
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+      <L0Menu topLevelItems={l0Items} pinnedItems={pinnedItems} path={path} parent={root} />
+      <L1Panels topLevelItems={topLevelItems} path={path} currentItemId={tab} />
+    </Tabs.Root>
   );
 };

package/src/components/NavTreeContainer.tsx

@@ -5,20 +5,28 @@
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { untracked } from '@preact/signals-core';
-import React, { memo, useCallback, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useMemo } from 'react';
 
-import { LayoutAction, NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import {
+  createIntent,
+  LayoutAction,
+  Surface,
+  useAppGraph,
+  useCapability,
+  useIntentDispatcher,
+  useLayout,
+} 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 { useMediaQuery } 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 { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
-import { NavTreeFooter } from './NavTreeFooter';
-import { NAVTREE_PLUGIN } from '../meta';
+import { NAV_TREE_ITEM, NavTree } from './NavTree';
+import { NavTreeContext } from './NavTreeContext';
+import { type NavTreeContextValue } from './types';
+import { NavTreeCapabilities } from '../capabilities';
 import { type NavTreeItemGraphNode } from '../types';
 import {
   expandActions,
@@ -27,35 +35,41 @@ import {
   getChildren,
   getParent,
   resolveMigrationOperation,
+  expandChildrenAndActions,
 } from '../util';
 
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderItemEnd = ({ node }: { node: Node }) => (
-  <Surface role='navtree-item-end' data={{ object: node.data, id: node.id }} />
+const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
+  <Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
 );
 
 export type NavTreeContainerProps = {
   popoverAnchorId?: string;
-} & Pick<NavTreeProps, 'isOpen' | 'isCurrent' | 'onOpenChange'>;
+  topbar?: boolean;
+} & Pick<NavTreeContextValue, 'tab'>;
 
-export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }: NavTreeContainerProps) => {
-  const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
+export const NavTreeContainer = memo(({ tab, popoverAnchorId, topbar }: NavTreeContainerProps) => {
   const [isLg] = useMediaQuery('lg', { ssr: false });
-  const dispatch = useIntentDispatcher();
-  const { graph } = useGraph();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { graph } = useAppGraph();
+  const layout = useLayout();
+  const { isOpen, isCurrent, setItem } = useCapability(NavTreeCapabilities.State);
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
 
   const getItems = useCallback(
-    (node?: Node) => {
+    (node?: Node, disposition?: string) => {
       return graph.nodes(node ?? graph.root, {
         filter: (node): node is Node => {
           return untracked(() => {
             const action = isActionLike(node);
-            const disposition = node.properties.disposition;
-            return !action || (action && disposition === 'item');
+            if (!disposition) {
+              return !action || node.properties.disposition === 'item';
+            }
+
+            return node.properties.disposition === disposition;
           });
         },
       });
@@ -97,6 +111,33 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     [graph],
   );
 
+  const onOpenChange = 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);
+      }
+    },
+    [graph],
+  );
+
+  const onTabChange = useCallback(
+    async (node: NavTreeItemGraphNode) => {
+      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));
+        if (item) {
+          await dispatch(createIntent(LayoutAction.Open, { part: 'main', subject: [item.id] }));
+        }
+      }
+    },
+    [dispatch, layout],
+  );
+
   const canDrop = useCallback((source: TreeData, target: TreeData) => {
     const sourceNode = source.item as Node;
     const targetNode = target.item as Node;
@@ -124,28 +165,19 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
 
       const current = isCurrent(path, node);
       if (!current) {
-        void dispatch({
-          action: NavigationAction.OPEN,
-          data: {
-            activeParts: {
-              main: [node.id],
-            },
-          },
-        });
+        void dispatch(
+          createIntent(LayoutAction.Open, {
+            part: 'main',
+            subject: [node.id],
+            options: { key: node.properties.key },
+          }),
+        );
       } else if (option) {
-        void dispatch({
-          action: NavigationAction.CLOSE,
-          data: {
-            activeParts: {
-              main: [node.id],
-            },
-          },
-        });
+        void dispatch(
+          createIntent(LayoutAction.Close, { part: 'main', subject: [node.id], options: { state: false } }),
+        );
       } else {
-        void dispatch({
-          action: LayoutAction.SCROLL_INTO_VIEW,
-          data: { id: node.id },
-        });
+        void dispatch(createIntent(LayoutAction.ScrollIntoView, { part: 'current', subject: node.id }));
       }
 
       const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
@@ -154,10 +186,10 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
       }
 
       if (!isLg) {
-        closeNavigationSidebar();
+        void dispatch(createIntent(LayoutAction.UpdateSidebar, { part: 'sidebar', options: { state: 'closed' } }));
       }
     },
-    [graph, dispatch, isCurrent, isLg, closeNavigationSidebar],
+    [graph, dispatch, isCurrent, isLg],
   );
 
   // TODO(wittjosiah): Factor out hook.
@@ -219,36 +251,44 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     });
   }, [graph]);
 
+  const navTreeContextValue = useMemo(
+    () => ({
+      tab,
+      onTabChange,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      onSelect: handleSelect,
+    }),
+    [
+      tab,
+      onTabChange,
+      getActions,
+      loadDescendents,
+      renderItemEnd,
+      popoverAnchorId,
+      topbar,
+      getItems,
+      getProps,
+      isCurrent,
+      isOpen,
+      onOpenChange,
+      canDrop,
+      handleSelect,
+    ],
+  );
+
   return (
-    <ElevationProvider elevation='chrome'>
-      <div
-        role='none'
-        className='grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden'
-      >
-        {/* TODO(wittjosiah): Factor out surfaces to layout? */}
-        <div role='none' className='border-be border-separator'>
-          <Surface role='search-input' limit={1} />
-        </div>
-
-        {/* TODO(thure): What gives this an inline `overflow: initial`? */}
-        <div role='none' className='border-be border-separator !overflow-y-auto'>
-          <NavTree
-            id={graph.root.id}
-            getActions={getActions}
-            getItems={getItems}
-            getProps={getProps}
-            isCurrent={isCurrent}
-            loadDescendents={loadDescendents}
-            renderItemEnd={renderItemEnd}
-            popoverAnchorId={popoverAnchorId}
-            canDrop={canDrop}
-            onSelect={handleSelect}
-            {...props}
-          />
-        </div>
-
-        <NavTreeFooter />
-      </div>
-    </ElevationProvider>
+    <NavTreeContext.Provider value={navTreeContextValue}>
+      <NavTree root={graph.root} id={graph.root.id} />
+    </NavTreeContext.Provider>
   );
 });

package/src/components/NavTreeContext.tsx

@@ -0,0 +1,13 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { createContext, useContext } from 'react';
+
+import { raise } from '@dxos/debug';
+
+import { type NavTreeContextValue } from './types';
+
+export const NavTreeContext = createContext<NavTreeContextValue | null>(null);
+
+export const useNavTreeContext = () => useContext(NavTreeContext) ?? raise(new Error('NavTreeContext not found'));

package/src/components/NavTreeItemAction.stories.tsx

@@ -53,5 +53,3 @@ export default {
 };
 
 export const Default = {};
-
-export const SearchList = { args: { menuType: 'searchList' } };