@dxos/plugin-navtree 0.8.4-main.1068cf700f → 0.8.4-main.1c7ec43d41

package/src/components/Sidebar/L1Panel.tsx

@@ -2,19 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import * as Effect from 'effect/Effect';
-import React, { useCallback, useMemo } from 'react';
+import * as Option from 'effect/Option';
+import React, { memo, useCallback, useMemo } from 'react';
 
 import { Node } from '@dxos/app-graph';
-import { useActionRunner } from '@dxos/plugin-graph';
+import { isPinnedWorkspace } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Graph, useActionRunner, useEdges } 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 { Menu, type MenuItem } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { useIsAlternateTree, useLoadDescendents } from '../../hooks';
-import { meta } from '../../meta';
+import { useActions, useLoadDescendents } from '#hooks';
+import { meta } from '#meta';
+
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { NavTreeItemAction, NavTreeItemColumns } from '../NavTreeItem';
@@ -23,208 +26,226 @@ export type L1PanelProps = {
   open?: boolean;
   path: string[];
   item: Node.Node;
-  currentItemId: string;
+  isCurrent: boolean;
   onBack?: () => void;
 };
 
 /**
  * Space or settings panel.
  */
-export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
+const L1Panel$ = ({ open, path, item, isCurrent, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.id);
-  const navTreeContext = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
-
-  // TODO(wittjosiah): Support multiple alternate trees.
-  const { useItems } = navTreeContext;
-  const alternateTree = useItems(item, { disposition: 'alternate-tree' })[0];
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
-  const useAlternateItems = useCallback(
-    (node?: Node.Node, { disposition }: { disposition?: string } = {}) => {
-      // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
-      return useItems(node, { disposition, sort: node?.id === alternateTree.id });
-    },
-    [alternateTree, useItems],
-  );
+  const isActivated = useIsActivatedWorkspace(item);
+  const shouldRenderContent = isCurrent || isActivated;
 
   return (
-    <Tabs.Tabpanel
+    <Tabs.Panel
       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]',
-        'pbs-[env(safe-area-inset-top)]',
-        item.id === currentItemId && 'grid',
+        'absolute inset-y-0 end-0',
+        'w-[calc(100%-var(--dx-l0-size))] lg:w-(--dx-l1-size) grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr]',
+        'py-[env(safe-area-inset-top)]',
+        isCurrent && 'grid',
       ]}
       tabIndex={-1}
       aria-label={title}
+      {...(isCurrent && { 'data-testid': 'navtree.workspace.visible' })}
       {...(!open && { inert: true })}
     >
-      {item.id === currentItemId && (
-        <DensityProvider density='fine'>
-          <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
-          <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>
+      {shouldRenderContent && <L1PanelContent open={open} path={path} item={item} onBack={onBack} />}
+    </Tabs.Panel>
+  );
+};
+
+/** Determines whether a workspace tab has been populated with real child content (i.e. expanded at least once). */
+const useIsActivatedWorkspace = (item: Node.Node): boolean => {
+  const { graph } = useAppGraph();
+  const edges = useEdges(graph, item.id);
+
+  return useMemo(() => {
+    const childIds = edges[Graph.relationKey('child')] ?? [];
+    return childIds.some((childId) => {
+      const child = Graph.getNode(graph, childId);
+      if (Option.isNone(child)) {
+        return false;
+      }
+      return child.value.properties.disposition === undefined;
+    });
+  }, [edges, graph]);
+};
+
+/**
+ * Mounted panel content for active or previously-visited tabs.
+ */
+const L1PanelContent = ({ path, item, onBack }: Pick<L1PanelProps, 'open' | 'path' | 'item' | 'onBack'>) => {
+  const navTreeContext = useNavTreeContext();
+
+  return (
+    <DensityProvider density='fine'>
+      <L1PanelHeader path={path} item={item} onBack={onBack} />
+      <ScrollArea.Root thin orientation='vertical'>
+        <ScrollArea.Viewport>
+          <Tree
+            model={navTreeContext.model}
+            id={item.id}
+            rootId={item.id}
+            path={path}
+            levelOffset={5}
+            gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+            draggable
+            renderColumns={NavTreeItemColumns}
+            blockInstruction={navTreeContext.blockInstruction}
+            canDrop={navTreeContext.canDrop}
+            canSelect={navTreeContext.canSelect}
+            onOpenChange={navTreeContext.onOpenChange}
+            onSelect={navTreeContext.onSelect}
+            onItemHover={navTreeContext.onItemHover}
+          />
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </DensityProvider>
   );
 };
 
 /**
  * Header row.
  */
-const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
+const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path' | 'onBack'>) => {
   const { t } = useTranslation(meta.id);
   const { renderItemEnd: ItemEnd } = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
+  const backCapableWorkspace = isPinnedWorkspace(item.id);
 
   const { primaryAction, groupedActions, menuActions, onAction } = useL1MenuActions({ item, path });
   useLoadDescendents(item);
 
   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>
+    <div
+      data-tauri-drag-region
+      className='flex w-full items-center border-b border-subdued-separator dx-app-drag dx-density-coarse pe-1'
+    >
+      {backCapableWorkspace ? (
+        <IconButton
+          density='coarse'
+          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+          variant='ghost'
+          icon='ph--caret-left--regular'
+          iconOnly
+          label={t('button-back.button')}
+          data-testid='treeView.primaryTreeButton'
+          onClick={() => onBack?.()}
+        />
+      ) : (
+        <div data-tauri-drag-region className='w-6' />
+      )}
+      <h2 data-tauri-drag-region className='flex-1 truncate min-w-0'>
+        {title}
+      </h2>
       {/* TODO(wittjosiah): Reconcile with NavTreeItemColumns. */}
-      <div role='none' className='contents app-no-drag'>
+      <div role='none' className='contents dx-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}
+            path={path}
             monolithic={Node.isAction(primaryAction)}
             menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
             menuType={primaryAction.properties?.menuType}
             caller={NAV_TREE_ITEM}
           />
         )}
-        {menuActions.length === 1 && (
-          <IconButton
-            size={5}
-            density='coarse'
-            classNames={['shrink-0 pli-2 pointer-fine:pli-1', hoverableControlItem, hoverableOpenControlItem]}
-            variant='ghost'
-            icon={menuActions[0].properties?.icon ?? 'ph--placeholder--regular'}
-            iconOnly
-            label={toLocalizedString(menuActions[0].properties?.label, t)}
-            data-testid={menuActions[0].properties?.testId}
-            onClick={() => onAction(menuActions[0] as Node.Action)}
-          />
-        )}
-        {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>
-        )}
+        <MenuActions item={item} menuActions={menuActions} onAction={onAction} />
         {ItemEnd && <ItemEnd node={item} open />}
       </div>
     </div>
   );
 };
 
+type L1MenuActions = {
+  primaryAction: Node.ActionLike;
+  groupedActions: Record<string, Node.Action[]>;
+  menuActions: Node.Action[];
+  onAction: (action: Node.Action, params?: Node.InvokeProps) => void;
+};
+
 /**
- * Builds the menu actions for the L1 panel header, combining graph actions with a synthetic settings/back action.
+ * Header menu actions for an L1 workspace tab. Renders nothing for an empty
+ * `menuActions`, a single inline icon button for one action, and a
+ * `…`-menu trigger for multiple.
  */
-const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>) => {
+const MenuActions = ({
+  item,
+  menuActions,
+  onAction,
+}: {
+  item: Node.Node;
+} & Pick<L1MenuActions, 'menuActions' | 'onAction'>) => {
   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);
+  if (menuActions.length === 0) {
+    return null;
+  }
+
+  if (menuActions.length === 1) {
+    return (
+      <IconButton
+        density='coarse'
+        classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+        variant='ghost'
+        icon={menuActions[0].properties?.icon ?? 'ph--placeholder--regular'}
+        iconOnly
+        label={toLocalizedString(menuActions[0].properties?.label, t)}
+        data-testid={menuActions[0].properties?.testId}
+        onClick={() => onAction(menuActions[0] as Node.Action)}
+      />
+    );
+  }
 
-  // Graph actions.
-  const { actions: _actions, groupedActions } = useActions(item);
-  const [primaryAction, ...secondaryActions] = _actions.toSorted((a, _b) =>
+  return (
+    <Menu.Root caller={NAV_TREE_ITEM} onAction={onAction}>
+      <Menu.Trigger asChild>
+        <IconButton
+          density='coarse'
+          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+          variant='ghost'
+          icon='ph--dots-three-vertical--regular'
+          iconOnly
+          label={t('tree-item-actions.label')}
+          data-testid='navtree.treeItem.actionsLevel0'
+        />
+      </Menu.Trigger>
+      <Menu.Content group={item} items={menuActions as MenuItem[]} />
+    </Menu.Root>
+  );
+};
+
+/**
+ * Builds the menu actions for the L1 panel header.
+ */
+const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>): L1MenuActions => {
+  const runAction = useActionRunner();
+
+  const { actions: actionsProp, groupedActions } = useActions(item);
+  const [primaryAction, ...secondaryActions] = actionsProp.toSorted((a, _b) =>
     a.properties?.disposition === 'list-item-primary' ? -1 : 1,
   );
 
-  const graphMenuActions = (
-    primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : _actions
-  )
+  const menuActions = (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : actionsProp)
     .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);
-      }
+      void runAction(action, { ...params, path });
     },
-    [settingsActionId, setAlternateTree, alternatePath, isAlternate, runAction],
+    [runAction, path],
   );
 
   return { primaryAction, groupedActions, menuActions, onAction };
 };
+
+export const L1Panel = memo(L1Panel$);

package/src/components/Sidebar/L1Tabs.tsx

@@ -7,10 +7,10 @@ import React from 'react';
 import { type Node } from '@dxos/app-graph';
 
 import { l0ItemType } from '../../util';
-
 import { L1Panel, type L1PanelProps } from './L1Panel';
 
-export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
+export type L1TabsProps = Pick<L1PanelProps, 'open' | 'onBack'> & {
+  currentItemId: string;
   path: string[];
   topLevelItems: Node.Node[];
 };
@@ -18,13 +18,22 @@ export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'
 /**
  * Each workspace is an L1 tab.
  */
-export const L1Tabs = ({ topLevelItems, onBack, ...props }: L1TabsProps) => {
+export const L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }: L1TabsProps) => {
   return (
     <>
       {topLevelItems.map((item) => {
         const type = l0ItemType(item);
         if (type === 'tab') {
-          return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
+          return (
+            <L1Panel
+              key={item.id}
+              item={item}
+              path={path}
+              open={open}
+              onBack={onBack}
+              isCurrent={item.id === currentItemId}
+            />
+          );
         }
         return null;
       })}

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

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

package/src/components/UserAccountAvatar/UserAccountAvatar.tsx

@@ -22,7 +22,7 @@ export const UserAccountAvatar = ({ size, userId, hue, emoji, status }: UserAcco
 
   return (
     <>
-      <L0ItemActiveTabIndicator classNames='inset-block-6' />
+      <L0ItemActiveTabIndicator classNames='inset-y-6' />
       <div
         className='grid place-items-center dx-focus-ring-group-indicator rounded-full'
         data-joyride='welcome/account'

package/src/components/index.ts

@@ -2,10 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './CommandsDialog';
 export * from './NavTree';
-export * from './NavTreeContainer';
 export * from './NavTreeContext';
-export * from './NavTreeDocumentTitle';
 
 export type * from './types';

package/src/components/types.ts

@@ -6,28 +6,22 @@ import type { FC } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 import type { Density } from '@dxos/react-ui';
-import type { TreeProps } from '@dxos/react-ui-list';
-import type { MaybePromise } from '@dxos/util';
+import type { TreeModel, TreeProps } from '@dxos/react-ui-list';
 
-import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
+import type { NavTreeItemGraphNode } from '#types';
 
 import type { L1PanelProps } from './Sidebar';
 
-export type NavTreeContextValue = Pick<
-  TreeProps<NavTreeItemGraphNode, { disposition?: string; sort?: boolean }>,
-  'useItems' | 'getProps' | 'useIsCurrent' | 'useIsOpen' | 'blockInstruction' | 'canDrop' | 'onOpenChange' | 'onSelect'
+export type NavTreeContextValue = {
+  model: TreeModel<NavTreeItemGraphNode>;
+  popoverAnchorId?: string;
+  renderItemEnd?: FC<{ node: Node.Node; open: boolean }>;
+  onTabChange?: (node: NavTreeItemGraphNode) => void;
+} & Pick<
+  TreeProps<NavTreeItemGraphNode>,
+  'blockInstruction' | 'canDrop' | 'canSelect' | 'onOpenChange' | 'onSelect' | 'onItemHover'
 > &
-  Pick<L1PanelProps, 'onBack'> & {
-    tab: string;
-    topbar?: boolean;
-    popoverAnchorId?: string;
-    renderItemEnd?: FC<{ node: Node.Node; open: boolean }>;
-    useActions: (node: Node.Node) => FlattenedActions;
-    loadDescendents?: (node: Node.Node) => MaybePromise<void>;
-    useIsAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
-    setAlternateTree?: (path: string[], open: boolean) => void;
-    onTabChange?: (node: NavTreeItemGraphNode) => void;
-  };
+  Pick<L1PanelProps, 'onBack'>;
 
 export type NavTreeItemColumnsProps = {
   path: string[];

package/src/containers/CommandsDialogContent/CommandsDialogContent.stories.tsx

@@ -0,0 +1,46 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { withPluginManager } from '@dxos/app-framework/testing';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
+import { Dialog } from '@dxos/react-ui';
+import { withLayout } from '@dxos/react-ui/testing';
+
+import { translations } from '#translations';
+
+import { NavTreePlugin } from '../../NavTreePlugin';
+import { CommandsDialogContent } from './CommandsDialogContent';
+
+const DefaultStory = () => (
+  <Dialog.Root defaultOpen>
+    <Dialog.Overlay>
+      <CommandsDialogContent />
+    </Dialog.Overlay>
+  </Dialog.Root>
+);
+
+const meta = {
+  title: 'plugins/plugin-navtree/containers/CommandsDialogContent',
+  component: CommandsDialogContent,
+  render: DefaultStory,
+  decorators: [
+    withLayout({ layout: 'fullscreen' }),
+    withPluginManager({
+      plugins: [...corePlugins(), StorybookPlugin({}), NavTreePlugin()],
+    }),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof CommandsDialogContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};