@dxos/plugin-navtree 0.8.2-staging.7ac8446 → 0.8.2

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { Fragment, memo } from 'react';
+
+import { isAction } from '@dxos/app-graph';
+import { DensityProvider, Popover, toLocalizedString, Treegrid, useTranslation } from '@dxos/react-ui';
+
+import { NavTreeItemAction } from './NavTreeItemAction';
+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);
+  const { getActions, renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
+
+  const level = path.length - 2;
+
+  const { actions: _actions, groupedActions } = getActions(item);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, b) =>
+    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
+  );
+
+  const actions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _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;
+
+  useLoadDescendents(item);
+  useLoadDescendents(primaryAction && !isAction(primaryAction) ? primaryAction : undefined);
+
+  return (
+    <DensityProvider density={density}>
+      <div role='none' className='contents app-no-drag'>
+        {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
+          <NavTreeItemAction
+            testId={primaryAction.properties?.testId}
+            label={toLocalizedString(primaryAction.properties?.label, t)}
+            icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+            parent={item}
+            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={item}
+              menuActions={actions}
+              menuType='dropdown'
+              caller={NAV_TREE_ITEM}
+            />
+          ) : (
+            <Treegrid.Cell />
+          )}
+        </ActionRoot>
+        {ItemEnd && <ItemEnd node={item} open={open} />}
+      </div>
+    </DensityProvider>
+  );
+});

package/src/components/NavTreeItem/index.ts

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

package/src/components/{L0Menu.tsx → Sidebar/L0Menu.tsx}

@@ -7,88 +7,92 @@ import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-d
 import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
 import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
 import {
-  attachClosestEdge,
   type Edge,
+  attachClosestEdge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import React, { type MouseEvent, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  forwardRef,
+  type MouseEvent,
+  type PropsWithChildren,
+  useCallback,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { type Node } from '@dxos/app-graph';
 import { invariant } from '@dxos/invariant';
 import {
-  Popover,
+  Icon,
+  IconButton,
+  ListItem,
   ScrollArea,
-  toLocalizedString,
   Tooltip,
+  toLocalizedString,
   useMediaQuery,
-  useSidebars,
   useTranslation,
-  ListItem,
-  Icon,
 } from '@dxos/react-ui';
+import { MenuProvider, DropdownMenu, type MenuItem } from '@dxos/react-ui-menu';
 import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove, getFirstTwoRenderableChars } from '@dxos/util';
 
-import { useNavTreeContext } from './NavTreeContext';
-import { UserAccountAvatar } from './UserAccountAvatar';
-import { useLoadDescendents } from '../hooks';
-import { NAVTREE_PLUGIN } from '../meta';
-import { l0ItemType } from '../util';
+import { useLoadDescendents } from '../../hooks';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { l0ItemType } from '../../util';
+import { useNavTreeContext } from '../NavTreeContext';
+import { UserAccountAvatar } from '../UserAccountAvatar';
+
+//
+// L0Item
+//
+
+type L0ItemData = {
+  id: L0ItemProps['item']['id'];
+  type: 'l0Item';
+};
 
-type L0ItemData = { id: L0ItemProps['item']['id']; type: 'l0Item' };
+type L0ItemRootProps = {
+  item: Node<any>;
+  parent?: Node<any>;
+  path: string[];
+};
 
-type L0ItemProps = {
+type L0ItemProps = L0ItemRootProps & {
   item: Node<any>;
   parent?: Node<any>;
   path: string[];
   pinned?: boolean;
-  userAccount?: boolean;
   onRearrange?: StackItemRearrangeHandler<L0ItemData>;
 };
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
-  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
   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 });
         }
+
+        case 'tab':
+          return onTabChange?.(item);
+
+        case 'link':
+          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
       }
     },
-    [item, type, onSelect, isCurrent, parent, tab, navigationSidebarState, isLg, dispatch],
+    [item, parent, type, tab, isCurrent, onSelect, onTabChange, isLg],
   );
 };
 
@@ -96,28 +100,70 @@ const l0Breakpoints: Record<string, string> = {
   lg: 'hidden lg:grid',
 };
 
-const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0ItemProps) => {
+const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
+  ({ item, parent, path, children }, forwardedRef) => {
+    const { getProps } = useNavTreeContext();
+    const { id, testId } = getProps?.(item, path) ?? {};
+    const type = l0ItemType(item);
+    const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
+
+    const { t } = useTranslation(NAVTREE_PLUGIN);
+    const localizedString = toLocalizedString(item.properties.label, t);
+
+    const handleClick = useL0ItemClick({ item, parent, path: itemPath }, 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 Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
+
+    return (
+      <Tooltip.Trigger asChild delayDuration={0} side='right' content={localizedString}>
+        <Root
+          {...(rootProps as any)}
+          data-type={type}
+          className={mx(
+            'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group',
+            l0Breakpoints[item.properties.l0Breakpoint],
+          )}
+          ref={forwardedRef}
+        >
+          {children}
+        </Root>
+      </Tooltip.Trigger>
+    );
+  },
+);
+
+const L0Avator = ({ item }: Pick<L0ItemProps, 'item'>) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
-  const itemElement = useRef<HTMLElement | null>(null);
-  const [closestEdge, setEdge] = useState<Edge | null>(null);
   const type = l0ItemType(item);
-  const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
-  const { getProps, popoverAnchorId } = 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 hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
+  const localizedString = toLocalizedString(item.properties.label, t);
   const avatarValue = useMemo(
     () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('').toUpperCase() : []),
     [type, item.properties.label, t],
   );
+
+  return (
+    <span role='img' className='place-self-center text-xl font-light' {...hueFgStyle}>
+      {avatarValue}
+    </span>
+  );
+};
+
+// TODO(burdon): Factor out pinned (non-draggable) items.
+const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const itemElement = useRef<HTMLElement | null>(null);
+  const [closestEdge, setEdge] = useState<Edge | null>(null);
+  const type = l0ItemType(item);
+  const localizedString = toLocalizedString(item.properties.label, t);
+  const hue = item.properties.hue ?? null;
   const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
 
   useLayoutEffect(() => {
@@ -125,6 +171,7 @@ const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0Item
     if (!itemElement.current || !onRearrange) {
       return;
     }
+
     return combine(
       draggable({
         element: itemElement.current,
@@ -175,80 +222,43 @@ const L0Item = ({ item, parent, path, pinned, userAccount, onRearrange }: L0Item
     );
   }, [item, onRearrange]);
 
-  const l0ItemTrigger = (
-    <Root
-      {...(rootProps as any)}
-      data-type={type}
-      className={mx(
-        'group/l0i dx-focus-ring-group grid relative data[type!="collection"]:cursor-pointer app-no-drag',
-        l0Breakpoints[item.properties.l0Breakpoint],
-      )}
-      ref={itemElement}
-    >
-      {userAccount ? (
-        <UserAccountAvatar
-          userId={item.properties.userId}
-          hue={item.properties.hue}
-          emoji={item.properties.emoji}
-          status={item.properties.status}
-        />
-      ) : (
-        <div
-          role='none'
-          data-frame={true}
-          className={mx(
-            'absolute grid 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)` } })}
-        >
-          {(item.properties.icon && (
-            <Icon icon={item.properties.icon} size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
-          )) ||
-            (type === 'tab' && item.properties.disposition !== 'pin-end' ? (
-              <span role='img' className='place-self-center text-3xl font-light' {...hueFgStyle}>
-                {avatarValue}
-              </span>
-            ) : (
-              item.properties.icon && (
-                <Icon icon='ph--planet--regular' size={pinned ? 5 : 7} classNames='place-self-center' {...hueFgStyle} />
-              )
-            ))}
-        </div>
-      )}
+  return (
+    <L0ItemRoot ref={itemElement} item={item} parent={parent} path={path}>
       <div
         role='none'
-        className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+        data-frame={true}
+        className={mx(
+          'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded',
+          // TODO(burdon): Create reusable button/component and/or create var for size.
+          pinned
+            ? 'bg-transparent w-[50px] p-2 group-hover/l0item:bg-activeSurface'
+            : 'bg-activeSurface w-[50px] h-[50px]',
+        )}
+        {...(hue && { style: { background: `var(--dx-${hue}Surface)` } })}
+      >
+        {(item.properties.icon && <Icon icon={item.properties.icon} size={pinned ? 5 : 6} {...hueFgStyle} />) ||
+          (type === 'tab' && item.properties.disposition !== 'pin-end' && <L0Avator item={item} />)}
+      </div>
+      <div
+        role='none'
+        className='hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
       />
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
       </span>
       {onRearrange && closestEdge && <ListItem.DropIndicator edge={closestEdge} />}
-    </Root>
-  );
-
-  return popoverAnchorId === id ? (
-    <Popover.Anchor asChild>{l0ItemTrigger}</Popover.Anchor>
-  ) : (
-    <Tooltip.Root delayDuration={0}>
-      <Tooltip.Trigger asChild>{l0ItemTrigger}</Tooltip.Trigger>
-      <Tooltip.Portal>
-        <Tooltip.Content side='right'>
-          {localizedString}
-          <Tooltip.Arrow />
-        </Tooltip.Content>
-      </Tooltip.Portal>
-    </Tooltip.Root>
+    </L0ItemRoot>
   );
 };
 
-const L0Collection = ({ item, path, parent }: L0ItemProps) => {
+//
+// L0Collection
+//
+
+const L0Collection = ({ item, path }: L0ItemProps) => {
   const navTreeContext = useNavTreeContext();
   useLoadDescendents(item);
-  const collectionItems = navTreeContext.getItems(item);
+  const collectionItems = navTreeContext.useItems(item);
   const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
   const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
   const handleRearrange = useCallback<StackItemRearrangeHandler<L0ItemData>>(
@@ -266,6 +276,7 @@ const L0Collection = ({ item, path, parent }: L0ItemProps) => {
     },
     [collectionItems, item.properties.onRearrangeChildren],
   );
+
   return (
     <div
       role='group'
@@ -287,26 +298,59 @@ const L0Collection = ({ item, path, parent }: L0ItemProps) => {
   );
 };
 
-export const L0Menu = ({
-  topLevelItems,
-  pinnedItems,
-  userAccountItem,
-  parent,
-  path,
-}: {
+//
+// L0Menu
+//
+
+export type L0MenuProps = {
+  menuActions: MenuItem[];
   topLevelItems: Node<any>[];
   pinnedItems: Node<any>[];
   userAccountItem: Node<any>;
   parent?: Node<any>;
   path: string[];
-}) => {
+};
+
+export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
   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  pbe-[env(safe-area-inset-bottom)]'>
+    <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-[var(--rail-size)_1fr_min-content_var(--l0-size)] gap-1 contain-layout',
+        '!is-[--l0-size] bg-baseSurface border-ie border-subduedSeparator app-drag pbe-[env(safe-area-inset-bottom)]',
+      ]}
+    >
+      <div role='none' className='flex justify-center p-1'>
+        <MenuProvider>
+          <DropdownMenu.Root group={parent} items={menuActions}>
+            <DropdownMenu.Trigger asChild>
+              {/* TODO(wittjosiah): Use L0Item trigger. */}
+              {/* TODO(burdon): Replace with Sigil. */}
+              <IconButton
+                iconOnly
+                icon='ph--dots-three--regular'
+                size={5}
+                label={t('app menu label')}
+                tooltipSide='right'
+                classNames='w-[50px] _bg-primary-500'
+                data-testid='spacePlugin.addSpace'
+              />
+            </DropdownMenu.Trigger>
+          </DropdownMenu.Root>
+        </MenuProvider>
+      </div>
+
       <ScrollArea.Root>
         <ScrollArea.Viewport>
           <div
             role='none'
-            className='grid auto-rows-[calc(var(--l0-size)-.5rem)] plb-1 [body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)] [body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]'
+            className={mx([
+              'flex flex-col gap-2 pbs-1',
+              '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
+              '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]',
+            ])}
           >
             {topLevelItems.map((item) => {
               if (l0ItemType(item) === 'collection') {
@@ -321,6 +365,7 @@ export const L0Menu = ({
           </ScrollArea.Scrollbar>
         </ScrollArea.Viewport>
       </ScrollArea.Root>
+
       <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
         {pinnedItems
           .filter((item) => l0ItemType(item) !== 'collection')
@@ -328,17 +373,27 @@ export const L0Menu = ({
             <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
           ))}
       </div>
+
       {userAccountItem && (
-        <div role='none' className='grid py-2 app-no-drag'>
-          <L0Item key={userAccountItem.id} item={userAccountItem} parent={parent} path={path} userAccount />
+        <div role='none' className='grid app-no-drag'>
+          <L0ItemRoot key={userAccountItem.id} item={userAccountItem} parent={parent} path={path}>
+            <UserAccountAvatar
+              userId={userAccountItem.properties.userId}
+              hue={userAccountItem.properties.hue}
+              emoji={userAccountItem.properties.emoji}
+              status={userAccountItem.properties.status}
+              size={11}
+            />
+          </L0ItemRoot>
         </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%)',
+            'linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)',
         }}
       />
     </Tabs.Tablist>