@dxos/plugin-navtree 0.8.4-main.21d9917 → 0.8.4-main.2244d791bb

package/src/components/Sidebar/L1Panel.tsx

@@ -2,18 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
+import * as Effect from 'effect/Effect';
 import React, { useCallback, useMemo } from 'react';
 
-import { type Node } from '@dxos/app-graph';
-import { DensityProvider, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Node } from '@dxos/app-graph';
+import { useActionRunner } from '@dxos/plugin-graph';
+import { DensityProvider, IconButton, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { useIsAlternateTree } from '../../hooks';
+import { useIsAlternateTree, useLoadDescendents } from '../../hooks';
 import { meta } from '../../meta';
+import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
-import { NavTreeItemColumns } from '../NavTreeItem';
+import { NavTreeItemAction, NavTreeItemColumns } from '../NavTreeItem';
 
 export type L1PanelProps = {
   open?: boolean;
@@ -61,31 +65,33 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
       {item.id === currentItemId && (
         <DensityProvider density='fine'>
           <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
-          <div role='none' className='overflow-y-auto'>
-            {isAlternate ? (
-              <Tree
-                {...navTreeContext}
-                id={alternateTree.id}
-                root={alternateTree}
-                path={alternatePath}
-                levelOffset={5}
-                gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-                renderColumns={NavTreeItemColumns}
-                useItems={useAlternateItems}
-              />
-            ) : (
-              <Tree
-                {...navTreeContext}
-                id={item.id}
-                root={item}
-                path={path}
-                levelOffset={5}
-                gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-                renderColumns={NavTreeItemColumns}
-                draggable
-              />
-            )}
-          </div>
+          <ScrollArea.Root thin orientation='vertical'>
+            <ScrollArea.Viewport>
+              {isAlternate ? (
+                <Tree
+                  {...navTreeContext}
+                  id={alternateTree.id}
+                  root={alternateTree}
+                  path={alternatePath}
+                  levelOffset={5}
+                  gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+                  renderColumns={NavTreeItemColumns}
+                  useItems={useAlternateItems}
+                />
+              ) : (
+                <Tree
+                  {...navTreeContext}
+                  id={item.id}
+                  root={item}
+                  path={path}
+                  levelOffset={5}
+                  gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+                  renderColumns={NavTreeItemColumns}
+                  draggable
+                />
+              )}
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
         </DensityProvider>
       )}
     </Tabs.Tabpanel>
@@ -97,55 +103,128 @@ export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProp
  */
 const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.id);
-  const { setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const { renderItemEnd: ItemEnd } = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
 
-  // TODO(wittjosiah): Support multiple alternate trees.
-  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
-  const backCapable = item.id.startsWith('!') || isAlternate;
+  const { primaryAction, groupedActions, menuActions, onAction } = useL1MenuActions({ item, path });
+  useLoadDescendents(item);
 
-  const handleOpen = useCallback(() => {
-    setAlternateTree?.(alternatePath, true);
-  }, [alternatePath, setAlternateTree]);
-
-  const handleBack = useCallback(() => {
-    if (isAlternate) {
-      setAlternateTree?.(alternatePath, false);
-    } else {
-      onBack?.();
-    }
-  }, [isAlternate, alternatePath, setAlternateTree, onBack]);
-
-  // TODO(burdon): Reuse same grid as tree?
   return (
     <div className='flex is-full items-center border-be border-subduedSeparator app-drag density-coarse'>
       <div className='is-6' />
       <h2 className='flex-1 truncate min-is-0'>{title}</h2>
-      {(backCapable && (
-        <IconButton
-          data-testid='treeView.primaryTreeButton'
-          variant='ghost'
-          icon='ph--arrow-u-down-left--regular'
-          iconOnly
-          label={t('button back')}
-          classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-          onClick={handleBack}
-        />
-      )) ||
-        (alternateTree && !isAlternate && (
+      {/* TODO(wittjosiah): Reconcile with NavTreeItemColumns. */}
+      <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={Node.isAction(primaryAction)}
+            menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
+            menuType={primaryAction.properties?.menuType}
+            caller={NAV_TREE_ITEM}
+          />
+        )}
+        {menuActions.length === 1 && (
           <IconButton
-            data-testid='treeView.alternateTreeButton'
+            size={5}
+            density='coarse'
+            classNames={['shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem]}
             variant='ghost'
-            icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
+            icon={menuActions[0].properties?.icon ?? 'ph--placeholder--regular'}
             iconOnly
-            label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
-            classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-            onClick={handleOpen}
+            label={toLocalizedString(menuActions[0].properties?.label, t)}
+            data-testid={menuActions[0].properties?.testId}
+            onClick={() => onAction(menuActions[0] as Node.Action)}
           />
-        ))}
-      <NavTreeItemColumns open path={path} item={item} density='coarse' />
+        )}
+        {menuActions.length > 1 && (
+          <MenuProvider onAction={onAction}>
+            <DropdownMenu.Root group={item} items={menuActions as MenuItem[]} caller={NAV_TREE_ITEM}>
+              <DropdownMenu.Trigger asChild>
+                <IconButton
+                  size={5}
+                  density='coarse'
+                  classNames={['shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem]}
+                  variant='ghost'
+                  icon='ph--dots-three-vertical--regular'
+                  iconOnly
+                  label={t('tree item actions label')}
+                  data-testid='navtree.treeItem.actionsLevel0'
+                />
+              </DropdownMenu.Trigger>
+            </DropdownMenu.Root>
+          </MenuProvider>
+        )}
+        {ItemEnd && <ItemEnd node={item} open />}
+      </div>
     </div>
   );
 };
+
+/**
+ * Builds the menu actions for the L1 panel header, combining graph actions with a synthetic settings/back action.
+ */
+const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>) => {
+  const { t } = useTranslation(meta.id);
+  const { setAlternateTree, useActions, ...navTreeContext } = useNavTreeContext();
+  const runAction = useActionRunner();
+
+  // TODO(wittjosiah): Support multiple alternate trees.
+  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
+  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
+  const isAlternate = useIsAlternateTree(alternatePath, item);
+
+  // Graph actions.
+  const { actions: _actions, groupedActions } = useActions(item);
+  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) =>
+    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
+  );
+
+  const graphMenuActions = (
+    primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions
+  )
+    .flatMap((action) => (Node.isAction(action) ? [action] : []))
+    .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
+
+  // Synthetic settings/back action.
+  const settingsActionId = `${item.id}~settings`;
+  const settingsAction = useMemo((): Node.Action | undefined => {
+    if (!alternateTree) {
+      return undefined;
+    }
+    return {
+      id: settingsActionId,
+      type: Node.ActionType,
+      data: () => Effect.void,
+      properties: {
+        label: isAlternate ? ['button back', { ns: meta.id }] : (alternateTree.properties.label ?? alternateTree.id),
+        icon: isAlternate
+          ? 'ph--arrow-u-down-left--regular'
+          : (alternateTree.properties.icon ?? 'ph--placeholder--regular'),
+        disposition: 'list-item',
+        testId: isAlternate ? 'navtree.backToSpace' : 'navtree.spaceSettings',
+      },
+    } as Node.Action;
+  }, [alternateTree, isAlternate, settingsActionId, t]);
+
+  const menuActions = useMemo(
+    () => [...graphMenuActions, ...(settingsAction ? [settingsAction] : [])],
+    [graphMenuActions, settingsAction],
+  );
+
+  const onAction = useCallback(
+    (action: Node.Action, params?: Node.InvokeProps) => {
+      if (action.id === settingsActionId) {
+        setAlternateTree?.(alternatePath, !isAlternate);
+      } else {
+        void runAction(action, params);
+      }
+    },
+    [settingsActionId, setAlternateTree, alternatePath, isAlternate, runAction],
+  );
+
+  return { primaryAction, groupedActions, menuActions, onAction };
+};

package/src/components/UserAccountAvatar/UserAccountAvatar.stories.tsx

@@ -11,7 +11,7 @@ import { UserAccountAvatar } from './UserAccountAvatar';
 const meta = {
   title: 'plugins/plugin-navtree/UserAccountAvatar',
 
-  decorators: [withTheme],
+  decorators: [withTheme()],
   component: UserAccountAvatar,
 } satisfies Meta<typeof UserAccountAvatar>;
 

package/src/experimental/Tree.stories.tsx

@@ -3,10 +3,10 @@
 //
 
 import { type Meta } from '@storybook/react-vite';
-import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
-import { Icon, IconButton } from '@dxos/react-ui';
+import { Icon, IconButton, Layout, ScrollArea } from '@dxos/react-ui';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { mx } from '@dxos/ui-theme';
 
@@ -14,28 +14,6 @@ import { type ItemMap, Tree, type TreeNodeData, type TreeProps, visitNodes, visi
 
 faker.seed(1234);
 
-/**
- * Space:
- * - Space panels are separated from each other to give them more weight than folders.
- * - Private space isn't different (just first, different icon).
- * - Edit titles in place.
- *
- * Navigation:
- *  - up/down across spaces/folder peers
- *  - right to enter space/folder children
- *  - left to parent
- */
-const Container = ({ children, sidebar }: PropsWithChildren<{ sidebar: JSX.Element }>) => {
-  return (
-    <div className='flex'>
-      {/* TODO(burdon): Custom thin scrollbar. */}
-      {/* TODO(burdon): Horizontal scrolling within navtree? */}
-      <div className='flex flex-col overflow-y-auto is-[300px] bg-neutral-100 dark:bg-neutral-950'>{sidebar}</div>
-      <div className='flex flex-col grow overflow-hidden'>{children}</div>
-    </div>
-  );
-};
-
 // TODO(burdon): Generate.
 const data: TreeNodeData[] = [
   {
@@ -134,7 +112,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
     }
   }, []);
 
-  const handleCreateItem: TreeProps['onMenuAction'] = (id, action) => {
+  const handleCreateItem: TreeProps['onMenuAction'] = (id) => {
     setItems((items) => {
       let parent: TreeNodeData | undefined;
       visitNodes(root, (node) => {
@@ -167,27 +145,29 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
   };
 
   return (
-    <div className='flex flex-col overflow-hidden'>
-      <div className='flex flex-col overflow-y-auto'>
-        <Tree
-          className='p-0.5 gap-1'
-          node={root}
-          open={openItems}
-          selected={selectedItems}
-          active={activeItems}
-          onChangeOpen={(id, open) => setOpenItems((items) => ({ ...items, [id]: open }))}
-          onChangeSelected={(id, open) => setSelectedItems((items) => ({ ...items, [id]: open }))}
-          onMenuAction={handleCreateItem}
-          getSlots={(node, open, depth, ancestors) => {
-            if (depth === 1) {
-              return {
-                root: 'rounded bg-white dark:bg-neutral-850',
-                header: mx('rounded-t bg-neutral-50 dark:bg-neutral-900', !open && 'rounded-b'),
-              };
-            }
-          }}
-        />
-      </div>
+    <Layout.Main>
+      <ScrollArea.Root orientation='vertical' thin>
+        <ScrollArea.Viewport>
+          <Tree
+            className='p-0.5 gap-1'
+            node={root}
+            open={openItems}
+            selected={selectedItems}
+            active={activeItems}
+            onChangeOpen={(id, open) => setOpenItems((items) => ({ ...items, [id]: open }))}
+            onChangeSelected={(id, open) => setSelectedItems((items) => ({ ...items, [id]: open }))}
+            onMenuAction={handleCreateItem}
+            getSlots={(node, open, depth) => {
+              if (depth === 1) {
+                return {
+                  root: 'rounded bg-white dark:bg-neutral-850',
+                  header: mx('rounded-t bg-neutral-50 dark:bg-neutral-900', !open && 'rounded-b'),
+                };
+              }
+            }}
+          />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
 
       <div className='flex items-center my-2 pli-2 gap-2'>
         <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
@@ -196,20 +176,34 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
         </span>
         <Icon icon='ph--list--regular' />
       </div>
-    </div>
+    </Layout.Main>
   );
 };
 
 const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'is-[20rem]' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
 } satisfies Meta<typeof Tree>;
 
 export default meta;
 
+/**
+ * Space:
+ * - Space panels are separated from each other to give them more weight than folders.
+ * - Private space isn't different (just first, different icon).
+ * - Edit titles in place.
+ *
+ * Navigation:
+ *  - up/down across spaces/folder peers
+ *  - right to enter space/folder children
+ *  - left to parent
+ */
 export const Default = () => {
-  return <Container sidebar={<Sidebar mutate />} />;
+  return <Sidebar mutate />;
 };
 
 export const Visitor = () => {

package/src/hooks.ts

@@ -5,7 +5,7 @@
 import { type Atom, useAtomValue } from '@effect-atom/atom-react';
 import { useEffect, useMemo } from 'react';
 
-import { useCapability } from '@dxos/app-framework/react';
+import { useCapability } from '@dxos/app-framework/ui';
 import { type Node } from '@dxos/app-graph';
 
 import { useNavTreeContext } from './components';

package/src/types/events.ts

@@ -2,10 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import { type ActivationEvent, Common } from '@dxos/app-framework';
+import { type ActivationEvent } from '@dxos/app-framework';
+import { AppActivationEvents } from '@dxos/app-toolkit';
 
 import { meta } from '../meta';
 
 export namespace NavTreeEvents {
-  export const StateReady: ActivationEvent.ActivationEvent = Common.ActivationEvent.createStateEvent(meta.id);
+  export const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(meta.id);
 }

package/dist/lib/browser/app-graph-builder-RSMA6I22.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/app-graph-builder/app-graph-builder.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\n\nimport { Capability, Common } from '@dxos/app-framework';\nimport { Operation } from '@dxos/operation';\nimport { GraphBuilder, NodeMatcher } from '@dxos/plugin-graph';\n\nimport { COMMANDS_DIALOG, meta } from '../../meta';\n\nexport default Capability.makeModule(\n  Effect.fnUntraced(function* () {\n    const extensions = yield* GraphBuilder.createExtension({\n      id: meta.id,\n      match: NodeMatcher.whenRoot,\n      actions: () =>\n        Effect.succeed([\n          {\n            id: COMMANDS_DIALOG,\n            data: () =>\n              Operation.invoke(Common.LayoutOperation.UpdateDialog, {\n                subject: COMMANDS_DIALOG,\n                blockAlign: 'start',\n              }),\n            properties: {\n              label: ['open commands label', { ns: meta.id }],\n              icon: 'ph--magnifying-glass--regular',\n              keyBinding: {\n                macos: 'meta+k',\n                windows: 'ctrl+k',\n              },\n            },\n          },\n        ]),\n    });\n\n    return Capability.contributes(Common.Capability.AppGraphBuilder, extensions);\n  }),\n);\n"],
-  "mappings": ";;;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,YAAYC,cAAc;AACnC,SAASC,iBAAiB;AAC1B,SAASC,cAAcC,mBAAmB;AAI1C,IAAA,4BAAeC,WAAWC,WACjBC,kBAAW,aAAA;AAChB,QAAMC,aAAa,OAAOC,aAAaC,gBAAgB;IACrDC,IAAIC,KAAKD;IACTE,OAAOC,YAAYC;IACnBC,SAAS,MACAC,eAAQ;MACb;QACEN,IAAIO;QACJC,MAAM,MACJC,UAAUC,OAAOC,OAAOC,gBAAgBC,cAAc;UACpDC,SAASP;UACTQ,YAAY;QACd,CAAA;QACFC,YAAY;UACVC,OAAO;YAAC;YAAuB;cAAEC,IAAIjB,KAAKD;YAAG;;UAC7CmB,MAAM;UACNC,YAAY;YACVC,OAAO;YACPC,SAAS;UACX;QACF;MACF;KACD;EACL,CAAA;AAEA,SAAO5B,WAAW6B,YAAYZ,OAAOjB,WAAW8B,iBAAiB3B,UAAAA;AACnE,CAAA,CAAA;",
-  "names": ["Effect", "Capability", "Common", "Operation", "GraphBuilder", "NodeMatcher", "Capability", "makeModule", "fnUntraced", "extensions", "GraphBuilder", "createExtension", "id", "meta", "match", "NodeMatcher", "whenRoot", "actions", "succeed", "COMMANDS_DIALOG", "data", "Operation", "invoke", "Common", "LayoutOperation", "UpdateDialog", "subject", "blockAlign", "properties", "label", "ns", "icon", "keyBinding", "macos", "windows", "contributes", "AppGraphBuilder"]
-}