@dxos/plugin-navtree 0.8.2-staging.7ac8446 → 0.8.3-main.672df60

package/src/components/Sidebar/L1Panel.tsx

@@ -0,0 +1,175 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useMemo } from 'react';
+
+import { type Node } from '@dxos/app-graph';
+import { Button, type ButtonProps, Icon, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Tree } from '@dxos/react-ui-list';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+
+import { useLoadDescendents } from '../../hooks';
+import { NAVTREE_PLUGIN } from '../../meta';
+import { l0ItemType } from '../../util';
+import { useNavTreeContext } from '../NavTreeContext';
+import { NavTreeItemColumns } from '../NavTreeItem';
+
+const headingBackButtonLabel = 'inset-0 min-is-0 truncate flex items-center pis-2';
+
+const TitleButton = ({ title, onClick }: { title: string } & Pick<ButtonProps, 'onClick'>) => {
+  return (
+    <Button
+      variant='ghost'
+      classNames='pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal'
+      onClick={onClick}
+    >
+      <Icon icon='ph--caret-left--bold' size={3} />
+      <span className={mx(headingBackButtonLabel)}>{title}</span>
+    </Button>
+  );
+};
+
+export type L1PanelProps = {
+  open?: boolean;
+  item: Node<any>;
+  path: string[];
+  currentItemId: string;
+  onBack?: () => void;
+};
+
+const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
+  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+
+  // 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 handleOpen = useCallback(() => setAlternateTree?.(alternatePath, true), [alternatePath, setAlternateTree]);
+  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+  const useAlternateItems = useCallback(
+    (node?: Node, { disposition }: { disposition?: string } = {}) => {
+      // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
+      return navTreeContext.useItems(node, { disposition, sort: node?.id === alternateTree.id });
+    },
+    [navTreeContext, alternateTree],
+  );
+
+  const handleBack = useCallback(() => {
+    if (isAlternate) {
+      setAlternateTree?.(alternatePath, false);
+    } else {
+      onBack?.();
+    }
+  }, [isAlternate, onBack, alternatePath, setAlternateTree]);
+
+  const title = toLocalizedString(item.properties.label, t);
+  const backCapable = item.id.startsWith('!') || isAlternate;
+
+  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]',
+        'pbs-[env(safe-area-inset-top)]',
+        item.id === currentItemId && 'grid',
+      ]}
+      tabIndex={-1}
+      aria-label={title}
+      {...(!open && { inert: 'true' })}
+    >
+      {item.id === currentItemId && (
+        <>
+          <h2 className='flex items-center border-be border-subduedSeparator app-drag pli-1'>
+            {backCapable ? (
+              <TitleButton title={title} onClick={handleBack} />
+            ) : (
+              <span className='flex-1 truncate min-is-0 pis-6'>{title}</span>
+            )}
+            {alternateTree && !isAlternate && (
+              <IconButton
+                variant='ghost'
+                classNames={mx('shrink-0', hoverableControlItem, hoverableOpenControlItem, 'pli-2 pointer-fine:pli-1')}
+                iconOnly
+                size={5}
+                density='coarse'
+                icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
+                label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
+                data-testid='treeView.alternateTreeButton'
+                onClick={handleOpen}
+              />
+            )}
+            <NavTreeItemColumns path={path} item={item} open density='coarse' />
+          </h2>
+          <div role='none' className='overflow-y-auto'>
+            {isAlternate ? (
+              <Tree
+                {...navTreeContext}
+                useItems={useAlternateItems}
+                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}
+              />
+            ) : (
+              <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, ...props }: L1PanelProps) => {
+  const { useItems } = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = useItems(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} {...props} />
+        ))}
+    </>
+  );
+};
+
+export type L1PanelsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
+  topLevelItems: Node<any>[];
+  path: string[];
+};
+
+export const L1Panels = ({ topLevelItems, onBack, ...props }: L1PanelsProps) => {
+  return (
+    <>
+      {topLevelItems.map((item) => {
+        const type = l0ItemType(item);
+        switch (type) {
+          case 'collection':
+            return <L1PanelCollection key={item.id} item={item} {...props} />;
+          case 'tab':
+            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/components/Sidebar/index.ts

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

package/src/components/{UserAccountAvatar.stories.tsx → UserAccountAvatar/UserAccountAvatar.stories.tsx}

@@ -5,17 +5,17 @@
 import '@dxos-theme';
 
 import { type Meta } from '@storybook/react';
-import React from 'react';
 
-import { UserAccountAvatar } from './UserAccountAvatar';
+import { withTheme } from '@dxos/storybook-utils';
 
-export const Default = (props: any) => {
-  return <UserAccountAvatar {...props} />;
-};
+import { UserAccountAvatar } from './UserAccountAvatar';
 
 const meta: Meta<typeof UserAccountAvatar> = {
   title: 'plugins/plugin-navtree/UserAccountAvatar',
   component: UserAccountAvatar,
+  decorators: [withTheme],
 };
 
 export default meta;
+
+export const Default = {};

package/src/components/{UserAccountAvatar.tsx → UserAccountAvatar/UserAccountAvatar.tsx}

@@ -15,19 +15,19 @@ export type UserAccountAvatarProps = {
   status?: AvatarStatus;
 };
 
-export const UserAccountAvatar = (props: UserAccountAvatarProps) => {
-  const fallbackValue = hexToFallback(props.userId ?? '0');
+export const UserAccountAvatar = ({ size, userId, hue, emoji, status }: UserAccountAvatarProps) => {
+  const fallbackValue = hexToFallback(userId ?? '0');
 
   return (
     <div className='grid place-items-center' data-joyride='welcome/account'>
       <Avatar.Root>
         <Avatar.Content
           variant='circle'
-          size={props.size ?? 12}
-          status={props.status ?? 'active'}
-          hue={props.hue || fallbackValue.hue}
-          fallback={props.emoji || fallbackValue.emoji}
-          data-testid='treeview.userAccount'
+          size={size ?? 12}
+          status={status ?? 'active'}
+          hue={hue || fallbackValue.hue}
+          fallback={emoji || fallbackValue.emoji}
+          data-testid='treeView.userAccount'
         />
       </Avatar.Root>
     </div>

package/src/components/UserAccountAvatar/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export * from './UserAccountAvatar';

package/src/components/index.ts

@@ -3,7 +3,6 @@
 //
 
 export * from './CommandsDialog';
-export * from './CommandsTrigger';
 export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeContext';

package/src/components/types.ts

@@ -5,31 +5,36 @@
 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 L1PanelProps } from './L1Panels';
+import { type L1PanelProps } from './Sidebar';
 import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
 
-export type NavTreeItemColumnsProps = {
-  path: string[];
-  item: Node;
-  open: boolean;
-};
-
-export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>;
-
 export type NavTreeContextValue = Pick<
   TreeProps<NavTreeItemGraphNode>,
-  'getProps' | 'isCurrent' | 'isOpen' | 'onOpenChange' | 'canDrop' | 'onSelect'
+  'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
 > &
   Pick<L1PanelProps, 'onBack'> & {
     tab: string;
-    onTabChange?: (node: NavTreeItemGraphNode) => void;
-    getItems: (node?: NavTreeItemGraphNode, disposition?: string) => NavTreeItemGraphNode[];
+    topbar?: boolean;
+    popoverAnchorId?: string;
+    renderItemEnd?: FC<{ node: Node; open: boolean }>;
+    useItems: (
+      node?: NavTreeItemGraphNode,
+      options?: { disposition?: string; sort?: boolean },
+    ) => NavTreeItemGraphNode[];
     getActions: (node: Node) => FlattenedActions;
     loadDescendents?: (node: Node) => MaybePromise<void>;
-    renderItemEnd?: FC<{ node: Node; open: boolean }>;
-    popoverAnchorId?: string;
-    topbar?: boolean;
+    isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
+    setAlternateTree?: (path: string[], open: boolean) => void;
+    onTabChange?: (node: NavTreeItemGraphNode) => void;
   };
+
+export type NavTreeItemColumnsProps = {
+  path: string[];
+  item: Node;
+  open: boolean;
+  density?: Density;
+};

package/src/testing/app-graph-builder.ts

@@ -0,0 +1,224 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Rx } from '@effect-rx/rx-react';
+import { Option, pipe } from 'effect';
+
+import { log } from '@dxos/log';
+import { createExtension, ROOT_ID, type BuilderExtensions } from '@dxos/plugin-graph';
+import { faker } from '@dxos/random';
+
+export const storybookGraphBuilders: BuilderExtensions = [
+  // Create app menu actions.
+  createExtension({
+    id: 'app-menu',
+    actions: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+          Option.map((node) => {
+            return [
+              ...Array.from({ length: 5 }, (_, i) => ({
+                id: `${node.id}/action-${i}`,
+                data: () => {
+                  log.info('action', { id: node.id, index: i });
+                },
+                properties: {
+                  label: `Action ${i}`,
+                  icon: faker.properties.icon(),
+                  disposition: 'menu',
+                },
+              })),
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // Create user account node.
+  createExtension({
+    id: 'user-account',
+    connector: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+          Option.map(() => {
+            return [
+              {
+                id: 'user-account',
+                type: 'user-account',
+                properties: {
+                  label: 'User Account',
+                  icon: 'ph--user--regular',
+                  disposition: 'user-account',
+                  userId: '1234567890ABCDEF',
+                  hue: faker.properties.hue(),
+                  emoji: faker.properties.emoji(),
+                  status: 'active',
+                },
+                nodes: [
+                  {
+                    id: 'profile',
+                    type: 'profile',
+                    properties: {
+                      label: 'Profile',
+                      icon: 'ph--user--regular',
+                    },
+                  },
+                  {
+                    id: 'devices',
+                    type: 'devices',
+                    properties: {
+                      label: 'Devices',
+                      icon: 'ph--devices--regular',
+                    },
+                  },
+                  {
+                    id: 'security',
+                    type: 'security',
+                    properties: {
+                      label: 'Security',
+                      icon: 'ph--key--regular',
+                    },
+                  },
+                ],
+              },
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // TODO(wittjosiah): This group node probably is unnecessary now with the flat L0 structure.
+  // Create spaces group node.
+  createExtension({
+    id: 'spaces-root',
+    position: 'hoist',
+    connector: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.id === ROOT_ID ? Option.some(node) : Option.none())),
+          Option.map(() => {
+            return [
+              {
+                id: 'spaces-root',
+                type: 'spaces-root',
+                properties: {
+                  label: 'Spaces',
+                  icon: 'ph--planet--regular',
+                  role: 'branch',
+                  disposition: 'collection',
+                },
+              },
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // Create space nodes.
+  createExtension({
+    id: 'spaces',
+    connector: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.id === 'spaces-root' ? Option.some(node) : Option.none())),
+          Option.map(() => {
+            return [
+              ...Array.from({ length: 5 }, (_, i) => ({
+                id: `space-${i}`,
+                type: 'space',
+                properties: {
+                  label: `Space ${i}`,
+                  icon: faker.properties.icon(),
+                  hue: faker.properties.hue(),
+                },
+              })),
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // Create space actions.
+  createExtension({
+    id: 'space-actions',
+    actions: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
+          Option.map((node) => {
+            return [
+              ...Array.from({ length: 5 }, (_, i) => ({
+                id: `${node.id}/action-${i}`,
+                data: () => {
+                  log.info('action', { id: node.id, index: i });
+                },
+                properties: {
+                  label: `Action ${i}`,
+                  icon: faker.properties.icon(),
+                },
+              })),
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // Create object nodes.
+  createExtension({
+    id: 'objects',
+    connector: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.type === 'space' ? Option.some(node) : Option.none())),
+          Option.map(() => {
+            return [
+              ...Array.from({ length: 5 }, (_, i) => ({
+                id: `object-${i}`,
+                type: 'object',
+                properties: {
+                  label: `Object ${i}`,
+                  icon: faker.properties.icon(),
+                },
+              })),
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+  // Create object actions.
+  createExtension({
+    id: 'object-actions',
+    actions: (node) =>
+      Rx.make((get) =>
+        pipe(
+          get(node),
+          Option.flatMap((node) => (node.type === 'object' ? Option.some(node) : Option.none())),
+          Option.map((node) => {
+            return [
+              ...Array.from({ length: 5 }, (_, i) => ({
+                id: `${node.id}/action-${i}`,
+                data: () => {
+                  log.info('action', { id: node.id, index: i });
+                },
+                properties: {
+                  label: `Action ${i}`,
+                  icon: faker.properties.icon(),
+                },
+              })),
+            ];
+          }),
+          Option.getOrElse(() => []),
+        ),
+      ),
+  }),
+];

package/src/testing/generator.ts

@@ -2,9 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Schema } from 'effect';
+
 import { type NodeArg } from '@dxos/app-graph';
-import { S, TypedObject } from '@dxos/echo-schema';
-import { create, type ReactiveObject } from '@dxos/live-object';
+import { TypedObject } from '@dxos/echo-schema';
+import { live, type Live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { range } from '@dxos/util';
 
@@ -15,12 +17,12 @@ import { range } from '@dxos/util';
 export type TestItem = { id: string; type: string } & Record<string, any>;
 
 type ObjectDataGenerator = {
-  createSchema?: () => S.Schema.AnyNoContext;
+  createSchema?: () => Schema.Schema.AnyNoContext;
   createData: () => any;
 };
 
-type ObjectFactory<T extends ReactiveObject<any>> = {
-  schema?: S.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
+type ObjectFactory<T extends Live<any>> = {
+  schema?: Schema.Schema.AnyNoContext; // TODO(burdon): Support both typed and expando schema.
   createObject: () => T;
 };
 
@@ -30,7 +32,7 @@ const createFactory = ({ createSchema, createData }: ObjectDataGenerator) => {
   const schema = createSchema?.();
   return {
     schema,
-    createObject: () => (schema ? create(schema, createData()) : create(createData())),
+    createObject: () => (schema ? live(schema, createData()) : live(createData())),
   };
 };
 
@@ -57,10 +59,10 @@ export const defaultGenerators: { [type: string]: ObjectDataGenerator } = {
   project: {
     createSchema: () =>
       class ProjectType extends TypedObject({ typename: 'example.com/type/Project', version: '0.1.0' })({
-        title: S.String,
-        repo: S.String,
-        status: S.String,
-        priority: S.Number,
+        title: Schema.String,
+        repo: Schema.String,
+        status: Schema.String,
+        priority: Schema.Number,
       }) {},
 
     createData: () => ({
@@ -87,7 +89,7 @@ export class TestObjectGenerator {
       }, {});
   }
 
-  get schema(): S.Schema.AnyNoContext[] {
+  get schema(): Schema.Schema.AnyNoContext[] {
     return Object.values(this.factories).map((f) => f.schema!);
   }
 
@@ -131,10 +133,11 @@ export const createTree = () => {
       return {
         id: faker.string.uuid(),
         data: null,
-        type: 'collection',
+        type: 'category',
         properties: {
           label: l0.title,
           icon: 'ph--horse--regular',
+          disposition: 'collection',
         },
         nodes: [
           ...[...Array(4)].map(() => {

package/src/testing/index.ts

@@ -2,5 +2,6 @@
 // Copyright 2024 DXOS.org
 //
 
+export * from './app-graph-builder';
 export * from './generator';
 export * from './update-state';

package/src/translations.ts

@@ -8,6 +8,7 @@ export default [
   {
     'en-US': {
       [NAVTREE_PLUGIN]: {
+        'app menu label': 'App menu',
         'open settings label': 'Settings',
         'open commands label': 'Search commands',
         'commands dialog title': 'Commands',