@dxos/plugin-navtree 0.7.5-labs.a279d8c → 0.7.5-labs.c0e040f

package/src/components/L0Menu.tsx

@@ -0,0 +1,218 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type MouseEvent, useCallback, useMemo } from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import { Icon, toLocalizedString, Tooltip, useMediaQuery, useSidebars, useTranslation } from '@dxos/react-ui';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NotchStart } from './NotchStart';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { getFirstTwoRenderableChars, l0ItemType } from '../util';
+
+type L0ItemProps = {
+  item: Node<any>;
+  parent?: Node<any>;
+  path: string[];
+  pinned?: boolean;
+};
+
+const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
+  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  const [isLg] = useMediaQuery('lg', { ssr: false });
+
+  return useCallback(
+    (event: MouseEvent) => {
+      switch (type) {
+        case 'tab':
+          // TODO(thure): This dispatch should rightly be in `onTabChange`, but that callback wasn’t reacting to changes
+          //  to its dependencies.
+          void dispatch(
+            createIntent(LayoutAction.UpdateSidebar, {
+              part: 'sidebar',
+              options: {
+                state:
+                  item.id === tab
+                    ? navigationSidebarState === 'expanded'
+                      ? isLg
+                        ? 'collapsed'
+                        : 'closed'
+                      : 'expanded'
+                    : 'expanded',
+              },
+            }),
+          );
+          return onTabChange?.(item);
+        case 'link':
+          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
+        case 'action': {
+          const {
+            data: invoke,
+            properties: { caller },
+          } = item;
+          return invoke?.(caller ? { node: parent, caller } : { node: parent });
+        }
+      }
+    },
+    [item, type, onSelect, isCurrent, parent, tab, navigationSidebarState, isLg, dispatch],
+  );
+};
+
+const l0Breakpoints: Record<string, string> = {
+  lg: 'hidden lg:grid',
+};
+
+const L0Item = ({ item, parent, path, pinned }: L0ItemProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const type = l0ItemType(item);
+  const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
+  const { getProps } = useNavTreeContext();
+  const { id, testId } = getProps?.(item, path) ?? {};
+  const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
+  const handleClick = useL0ItemClick({ item, path: itemPath, parent }, type);
+  const rootProps =
+    type === 'tab'
+      ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+      : type !== 'collection'
+        ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
+        : { onClick: handleClick };
+  const localizedString = toLocalizedString(item.properties.label, t);
+  const hue = item.properties.hue ?? null;
+  const avatarValue = useMemo(
+    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('') : []),
+    [type, item.properties.label, t],
+  );
+
+  return (
+    <Tooltip.Root delayDuration={0}>
+      <Tooltip.Trigger asChild>
+        <Root
+          {...(rootProps as any)}
+          data-type={type}
+          className={mx(
+            'group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag',
+            l0Breakpoints[item.properties.l0Breakpoint],
+          )}
+        >
+          {type !== 'collection' && (
+            <div
+              role='none'
+              className={mx(
+                'absolute -z-[1] dx-focus-ring-group-indicator transition-colors',
+                type === 'tab' || pinned ? 'rounded' : 'rounded-full',
+                pinned
+                  ? 'bg-transparent group-hover/l0i:bg-groupSurface inset-inline-3 inset-block-0.5'
+                  : 'bg-groupSurface inset-inline-3 inset-block-2',
+              )}
+              {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
+            />
+          )}
+          <div
+            role='none'
+            className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+          />
+          {type === 'tab' && item.properties.disposition !== 'pin-end' ? (
+            <span
+              role='img'
+              className='place-self-center text-3xl font-light'
+              {...(hue && { style: { color: `var(--dx-${hue}SurfaceText)` } })}
+            >
+              {avatarValue}
+            </span>
+          ) : (
+            item.properties.icon && (
+              <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' />
+            )
+          )}
+          <span id={`${item.id}__label`} className='sr-only'>
+            {localizedString}
+          </span>
+        </Root>
+      </Tooltip.Trigger>
+      <Tooltip.Portal>
+        <Tooltip.Content side='right'>
+          {localizedString}
+          <Tooltip.Arrow />
+        </Tooltip.Content>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+};
+
+const L0Collection = ({ item, path, parent }: L0ItemProps) => {
+  const navTreeContext = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = navTreeContext.getItems(item);
+  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
+  const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+  return (
+    <div
+      role='group'
+      className='contents group/l0c'
+      aria-labelledby={`${item.id}__label`}
+      data-itemid={id}
+      data-testid={testId}
+    >
+      {/* TODO(burdon): Option. */}
+      {/* <L0Item item={item} parent={parent} path={groupPath} /> */}
+      {collectionItems.map((collectionItem) => (
+        <L0Item key={collectionItem.id} item={collectionItem} parent={item} path={groupPath} />
+      ))}
+    </div>
+  );
+};
+
+export const L0Menu = ({
+  topLevelItems,
+  pinnedItems,
+  parent,
+  path,
+}: {
+  topLevelItems: Node<any>[];
+  pinnedItems: Node<any>[];
+  parent?: Node<any>;
+  path: string[];
+}) => {
+  return (
+    <Tabs.Tablist classNames='group/l0 absolute z-[1] inset-block-0 inline-start-0 rounded-is-lg grid grid-cols-[var(--l0-size)] grid-rows-[1fr_min-content_var(--l0-size)] contain-layout !is-[--l0-size] bg-baseSurface border-ie border-separator app-drag'>
+      <div
+        role='none'
+        className='grid auto-rows-[calc(var(--l0-size)-.5rem)] min-bs-0 !overflow-y-auto plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]'
+      >
+        {topLevelItems.map((item) => {
+          if (l0ItemType(item) === 'collection') {
+            return <L0Collection key={item.id} item={item} parent={parent} path={path} />;
+          } else {
+            return <L0Item key={item.id} item={item} parent={parent} path={path} />;
+          }
+        })}
+      </div>
+      <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
+        {pinnedItems
+          .filter((item) => l0ItemType(item) !== 'collection')
+          .map((item) => (
+            <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
+          ))}
+      </div>
+      <div role='none' className='grid p-2 app-no-drag'>
+        <NotchStart />
+      </div>
+      <div
+        role='none'
+        className='hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]'
+        style={{
+          background:
+            'linear-gradient(to bottom, var(--dx-baseSurface) 0%, var(--dx-baseSurface) 70%, transparent 100%)',
+        }}
+      />
+    </Tabs.Tablist>
+  );
+};

package/src/components/L1Panels.tsx

@@ -0,0 +1,100 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { useLayout } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import { toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Tree } from '@dxos/react-ui-list';
+import { Tabs } from '@dxos/react-ui-tabs';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemColumns } from './NavTreeItemColumns';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { l0ItemType } from '../util';
+
+type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string };
+
+const L1Panel = ({ item, path, currentItemId }: L1PanelProps) => {
+  const layout = useLayout();
+  const navTreeContext = useNavTreeContext();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  return (
+    <Tabs.Tabpanel
+      key={item.id}
+      value={item.id}
+      classNames={[
+        'absolute inset-block-0 inline-end-0 is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]',
+        item.id === currentItemId && 'grid',
+      ]}
+      tabIndex={-1}
+      {...(!layout.sidebarOpen && { inert: 'true' })}
+    >
+      {item.id === currentItemId && (
+        <>
+          <h2 className='flex items-center border-be border-separator pis-4 app-drag'>
+            <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
+            <NavTreeItemColumns path={path} item={item} open />
+          </h2>
+          <div role='none' className='overflow-y-auto'>
+            <Tree
+              {...navTreeContext}
+              id={item.id}
+              root={item}
+              path={path}
+              levelOffset={5}
+              draggable
+              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+              renderColumns={NavTreeItemColumns}
+            />
+          </div>
+        </>
+      )}
+    </Tabs.Tabpanel>
+  );
+};
+
+const L1PanelCollection = ({ item, path, currentItemId }: L1PanelProps) => {
+  const { getItems } = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = getItems(item);
+  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
+  return (
+    <>
+      {collectionItems
+        .filter((item) => l0ItemType(item) === 'tab')
+        .map((item) => (
+          <L1Panel key={item.id} item={item} path={groupPath} currentItemId={currentItemId} />
+        ))}
+    </>
+  );
+};
+
+export const L1Panels = ({
+  topLevelItems,
+  path,
+  currentItemId,
+}: {
+  topLevelItems: Node<any>[];
+  path: string[];
+  currentItemId: string;
+}) => {
+  return (
+    <>
+      {topLevelItems.map((item) => {
+        const type = l0ItemType(item);
+        switch (type) {
+          case 'collection':
+            return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+          case 'tab':
+            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/components/NavTree.stories.tsx

@@ -13,10 +13,10 @@ import { isActionLike, type NodeArg } from '@dxos/app-graph';
 import { create, type ReactiveObject } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { isTreeData, type TreeData } from '@dxos/react-ui-list';
-import { Path } from '@dxos/react-ui-mosaic';
+import { Path } from '@dxos/react-ui-list';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { NavTree } from './NavTree';
+import { StorybookNavTree } from '../stories/StorybookNavTree';
 import { createTree, updateState } from '../testing';
 
 faker.seed(1234);
@@ -24,9 +24,9 @@ faker.seed(1234);
 const tree = create<NodeArg<any>>(createTree());
 const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
 
-const meta: Meta<typeof NavTree> = {
+const meta: Meta<typeof StorybookNavTree> = {
   title: 'plugins/plugin-navtree/NavTree',
-  component: NavTree,
+  component: StorybookNavTree,
   decorators: [withTheme, withLayout({ tooltips: true })],
   render: (args) => {
     useEffect(() => {
@@ -52,7 +52,7 @@ const meta: Meta<typeof NavTree> = {
       });
     }, []);
 
-    return <NavTree {...args} />;
+    return <StorybookNavTree {...args} />;
   },
   args: {
     id: tree.id,
@@ -60,7 +60,7 @@ const meta: Meta<typeof NavTree> = {
       actions: arg.nodes?.filter((node) => isActionLike(node)) ?? [],
       groupedActions: {},
     }),
-    getItems: (testItem?: NodeArg<any>) => {
+    getItems: (testItem?: any) => {
       return testItem?.nodes ?? tree.nodes ?? [];
     },
     getProps: (testItem: NodeArg<any>) => ({

package/src/components/NavTree.tsx

@@ -2,130 +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, open }) => {
-      return (
-        <NavTreeColumns
-          path={path}
-          node={item}
-          getActions={getActions}
-          open={open}
-          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;
-  open: boolean;
-  loadDescendents?: (node: Node) => MaybePromise<void>;
-  renderItemEnd?: FC<{ node: Node; open: boolean }>;
-  popoverAnchorId?: string;
-};
-
-const NavTreeColumns = ({
-  path,
-  node,
-  getActions,
-  open,
-  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}
-          />
-        ) : (
-          <Treegrid.Cell />
-        )}
-      </ActionRoot>
-      {ItemEnd && <ItemEnd node={node} open={open} />}
-    </>
+    // 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>
   );
 };