@dxos/plugin-navtree 0.8.3 → 0.8.4-main.1f223c7

package/src/components/Sidebar/L1Panel.tsx

@@ -5,68 +5,45 @@
 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 { 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 { hoverableControlItem, hoverableOpenControlItem } from '@dxos/react-ui-theme';
 
-import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
-import { l0ItemType } from '../../util';
+import { meta } from '../../meta';
 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[];
+  item: Node<any>;
   currentItemId: string;
   onBack?: () => void;
 };
 
-const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
-  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+/**
+ * Space or settings panel.
+ */
+export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
+  const { t } = useTranslation(meta.id);
+  const { isAlternateTree, ...navTreeContext } = useNavTreeContext();
+  // NOTE(burdon): I'm very uneasy about this pattern of declaring hooks as context props.
+  const { useItems } = navTreeContext;
+  const title = toLocalizedString(item.properties.label, t);
 
   // TODO(wittjosiah): Support multiple alternate trees.
-  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
+  const alternateTree = 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 });
+      return useItems(node, { disposition, sort: node?.id === alternateTree.id });
     },
-    [navTreeContext, alternateTree],
+    [alternateTree, useItems],
   );
 
-  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}
@@ -83,27 +60,7 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
     >
       {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>
+          <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
           <div role='none' className='overflow-y-auto'>
             {isAlternate ? (
               <Tree
@@ -135,41 +92,61 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
   );
 };
 
-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} />
-        ))}
-    </>
-  );
-};
+/**
+ * Header row.
+ */
+const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
+  const { t } = useTranslation(meta.id);
+  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const title = toLocalizedString(item.properties.label, t);
 
-export type L1PanelsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
-  topLevelItems: Node<any>[];
-  path: string[];
-};
+  // 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 = isAlternateTree?.(alternatePath, item) ?? false;
+  const backCapable = item.id.startsWith('!') || isAlternate;
+
+  const handleOpen = useCallback(() => {
+    setAlternateTree?.(alternatePath, true);
+  }, [alternatePath, setAlternateTree]);
 
-export const L1Panels = ({ topLevelItems, onBack, ...props }: L1PanelsProps) => {
+  const handleBack = useCallback(() => {
+    if (isAlternate) {
+      setAlternateTree?.(alternatePath, false);
+    } else {
+      onBack?.();
+    }
+  }, [isAlternate, alternatePath, setAlternateTree, onBack]);
+
+  // TODO(burdon): Reuse same grid as tree?
   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;
-        }
-      })}
-    </>
+    <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
+          variant='ghost'
+          icon='ph--arrow-u-down-left--regular'
+          iconOnly
+          size={5}
+          label={t('button back')}
+          classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+          onClick={handleBack}
+        />
+      )) ||
+        (alternateTree && !isAlternate && (
+          <IconButton
+            data-testid='treeView.alternateTreeButton'
+            variant='ghost'
+            icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
+            iconOnly
+            size={5}
+            label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
+            classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+            onClick={handleOpen}
+          />
+        ))}
+      <NavTreeItemColumns open path={path} item={item} density='coarse' />
+    </div>
   );
 };

package/src/components/Sidebar/L1Tabs.tsx

@@ -0,0 +1,58 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { type Node } from '@dxos/app-graph';
+
+import { useLoadDescendents } from '../../hooks';
+import { l0ItemType } from '../../util';
+import { useNavTreeContext } from '../NavTreeContext';
+
+import { L1Panel, type L1PanelProps } from './L1Panel';
+
+export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
+  path: string[];
+  topLevelItems: Node<any>[];
+};
+
+/**
+ * Each space is an L1 tab.
+ */
+export const L1Tabs = ({ topLevelItems, onBack, ...props }: L1TabsProps) => {
+  return (
+    <>
+      {topLevelItems.map((item) => {
+        const type = l0ItemType(item);
+        switch (type) {
+          case 'tab':
+            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
+          case 'collection':
+            return <L1PanelCollection key={item.id} item={item} {...props} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};
+
+/**
+ *
+ */
+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} />
+        ))}
+    </>
+  );
+};

package/src/components/Sidebar/index.ts

@@ -4,3 +4,4 @@
 
 export * from './L0Menu';
 export * from './L1Panel';
+export * from './L1Tabs';

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

@@ -4,18 +4,20 @@
 
 import '@dxos-theme';
 
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { withTheme } from '@dxos/storybook-utils';
 
 import { UserAccountAvatar } from './UserAccountAvatar';
 
-const meta: Meta<typeof UserAccountAvatar> = {
+const meta = {
   title: 'plugins/plugin-navtree/UserAccountAvatar',
   component: UserAccountAvatar,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof UserAccountAvatar>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/index.ts

@@ -7,4 +7,4 @@ export * from './NavTree';
 export * from './NavTreeContainer';
 export * from './NavTreeContext';
 export * from './NavTreeDocumentTitle';
-export * from './types';
+export type * from './types';

package/src/components/types.ts

@@ -9,9 +9,10 @@ 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 './Sidebar';
 import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
 
+import type { L1PanelProps } from './Sidebar';
+
 export type NavTreeContextValue = Pick<
   TreeProps<NavTreeItemGraphNode, { disposition?: string; sort?: boolean }>,
   'useItems' | 'getProps' | 'isCurrent' | 'isOpen' | 'canDrop' | 'onOpenChange' | 'onSelect'
@@ -21,7 +22,7 @@ export type NavTreeContextValue = Pick<
     topbar?: boolean;
     popoverAnchorId?: string;
     renderItemEnd?: FC<{ node: Node; open: boolean }>;
-    getActions: (node: Node) => FlattenedActions;
+    useActions: (node: Node) => FlattenedActions;
     loadDescendents?: (node: Node) => MaybePromise<void>;
     isAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
     setAlternateTree?: (path: string[], open: boolean) => void;

package/src/experimental/Tree.stories.tsx

@@ -4,11 +4,11 @@
 
 import '@dxos-theme';
 
-import { House, List, Planet, PlusCircle, Sailboat } from '@phosphor-icons/react';
-import { type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { type JSX, type PropsWithChildren, useEffect, useState } from 'react';
 
 import { faker } from '@dxos/random';
+import { Icon, IconButton } from '@dxos/react-ui';
 import { modalSurface, mx } from '@dxos/react-ui-theme';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
@@ -48,7 +48,7 @@ const data: TreeNodeData[] = [
         id: faker.string.uuid(),
         title: 'plugins/Personal Space',
         color: 'text-green-400',
-        Icon: House,
+        iconName: 'ph--house--regular',
         children: [
           {
             id: faker.string.uuid(),
@@ -83,7 +83,7 @@ const data: TreeNodeData[] = [
       {
         id: faker.string.uuid(),
         title: faker.commerce.productName(),
-        Icon: Planet,
+        iconName: 'ph--planet--regular',
         children: [
           {
             id: faker.string.uuid(),
@@ -94,12 +94,12 @@ const data: TreeNodeData[] = [
       {
         id: faker.string.uuid(),
         title: faker.commerce.productName(),
-        Icon: Sailboat,
+        iconName: 'ph--sailboat--regular',
       },
       {
         id: faker.string.uuid(),
         title: faker.commerce.productName(),
-        Icon: Planet,
+        iconName: 'ph--planet--regular',
       },
     ],
   },
@@ -181,7 +181,7 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
     setItems((items) => {
       items[0].children?.push({
         id: faker.string.uuid(),
-        Icon: Planet,
+        iconName: 'ph--planet--regular',
         title: faker.commerce.productName(),
       });
 
@@ -213,20 +213,22 @@ const Sidebar = ({ mutate }: { mutate?: boolean }) => {
       </div>
 
       <div className='flex items-center my-2 px-2 gap-2'>
-        <PlusCircle onClick={handleCreateSpace} />
+        <IconButton icon='ph--plus-circle--regular' iconOnly label='Create space' onClick={handleCreateSpace} />
         <span className='grow text-sm' onClick={handleCreateSpace}>
           New space
         </span>
-        <List />
+        <Icon icon='ph--list--regular' />
       </div>
     </div>
   );
 };
 
-const meta: Meta = {
+const meta = {
   title: 'plugins/plugin-navtree/experimental/Tree',
   component: Tree,
   decorators: [withTheme, withLayout({ fullscreen: true, classNames: modalSurface })],
-};
+} satisfies Meta<typeof Tree>;
 
 export default meta;
+
+type Story = StoryObj<typeof meta>;

package/src/experimental/Tree.tsx

@@ -2,11 +2,10 @@
 // Copyright 2024 DXOS.org
 //
 
-import { CaretRight, Circle, File, Folder, type Icon, type IconProps, Plus, UserCircle } from '@phosphor-icons/react';
 import React, { type HTMLAttributes, type PropsWithChildren } from 'react';
 
-import { type ClassNameValue, type Size } from '@dxos/react-ui';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { type ClassNameValue, Icon, type Size } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
 
 // TODO(burdon): Rounded border if first/last.
 const styles = {
@@ -15,21 +14,21 @@ const styles = {
 };
 
 export const IconButton = ({
-  Icon,
+  iconName,
   classNames,
   size = 4,
   onClick,
-  ...props
+  weight = 'regular',
 }: {
-  Icon: Icon;
+  iconName: string;
   classNames?: ClassNameValue;
   size?: Size;
-} & Pick<IconProps, 'weight'> &
-  Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>) => {
+  weight?: 'regular' | 'duotone' | 'fill';
+} & Pick<HTMLAttributes<HTMLDivElement>, 'onClick'>) => {
   // TODO(burdon): Density aware.
   return (
     <div className={mx('flex w-6 h-6 items-center justify-center select-none', classNames)} onClick={onClick}>
-      <Icon className={mx('cursor-pointer', getSize(size))} {...props} />
+      <Icon icon={iconName} classNames='cursor-pointer' size={size} />
     </div>
   );
 };
@@ -37,7 +36,7 @@ export const IconButton = ({
 export type TreeNodeData = {
   id: string;
   title: string;
-  Icon?: Icon;
+  iconName?: string;
   color?: string;
   children?: TreeNodeData[];
 };
@@ -123,7 +122,7 @@ const StateIcon = ({ node, open, selected, active }: TreeNodeProps) => {
   // TODO(burdon): No animation if opening/closing folder.
   return (
     <IconButton
-      Icon={isActive ? UserCircle : Circle}
+      iconName={isActive ? 'ph--user-circle--regular' : 'ph--circle--regular'}
       size={4}
       weight={selected?.[id] ? 'fill' : 'duotone'}
       classNames={mx(
@@ -143,7 +142,7 @@ const OpenIcon = ({
   return (
     (children?.length && open && (
       <IconButton
-        Icon={CaretRight}
+        iconName='ph--caret-right--regular'
         size={3}
         classNames={mx('transition duration-200', open?.[id] ? 'rotate-90' : 'transform-none')}
         onClick={(ev) => {
@@ -157,12 +156,12 @@ const OpenIcon = ({
 
 // TODO(burdon): Drag handle,
 const ItemIcon = ({
-  node: { children, Icon = children?.length ? Folder : File, color },
+  node: { children, iconName = children?.length ? 'ph--folder--regular' : 'ph--file--regular', color },
 }: Pick<TreeNodeProps, 'node'>) => {
   return (
-    (Icon && (
+    (iconName && (
       <IconButton
-        Icon={Icon}
+        iconName={iconName}
         classNames={color ?? 'text-neutral-700 dark:text-neutral-300'}
         weight={color ? 'duotone' : 'regular'}
       />
@@ -173,7 +172,7 @@ const ItemIcon = ({
 const MenuItem = ({ node: { id }, onMenuAction }: Pick<TreeNodeProps, 'node' | 'onMenuAction'>) => {
   return (
     <IconButton
-      Icon={Plus}
+      iconName='ph--plus--regular'
       classNames='invisible group-hover:visible'
       onClick={(ev) => {
         ev.stopPropagation();

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

@@ -7,7 +7,7 @@ import { Option, pipe } from 'effect';
 
 import { type PluginContext } from '@dxos/app-framework';
 import { log } from '@dxos/log';
-import { createExtension, ROOT_ID, type BuilderExtensions } from '@dxos/plugin-graph';
+import { type BuilderExtensions, ROOT_ID, createExtension } from '@dxos/plugin-graph';
 import { faker } from '@dxos/random';
 
 export const storybookGraphBuilders = (context: PluginContext): BuilderExtensions => {

package/src/translations.ts

@@ -2,12 +2,14 @@
 // Copyright 2023 DXOS.org
 //
 
-import { NAVTREE_PLUGIN } from './meta';
+import { type Resource } from '@dxos/react-ui';
 
-export default [
+import { meta } from './meta';
+
+export const translations = [
   {
     'en-US': {
-      [NAVTREE_PLUGIN]: {
+      [meta.id]: {
         'app menu label': 'App menu',
         'open settings label': 'Settings',
         'open commands label': 'Search commands',
@@ -16,7 +18,8 @@ export default [
         'node actions menu invoker label': 'More options',
         'tree item actions label': 'More actions',
         'empty branch message': ' ',
+        'button back': 'Back to Space',
       },
     },
   },
-];
+] as const satisfies Resource[];

package/src/util.ts

@@ -2,10 +2,10 @@
 // Copyright 2023 DXOS.org
 //
 
-import { type Action, type Node, type ReadableGraph, isAction, isActionLike } from '@dxos/app-graph';
+import { type Action, type Node, type ReadableGraph, isActionLike } from '@dxos/app-graph';
 import { isNonNullable } from '@dxos/util';
 
-import { type FlattenedActions, type NavTreeItemGraphNode } from './types';
+import { type NavTreeItemGraphNode } from './types';
 
 export const getParent = (
   graph: ReadableGraph,
@@ -88,24 +88,6 @@ export const getChildren = (
     .filter(isNonNullable) as NavTreeItemGraphNode[];
 };
 
-export const getActions = (graph: ReadableGraph, node: Node): FlattenedActions => {
-  return graph.getActions(node.id).reduce(
-    (acc: FlattenedActions, arg) => {
-      if (arg.properties.disposition === 'item') {
-        return acc;
-      }
-
-      acc.actions.push(arg);
-      if (!isAction(arg)) {
-        const actionGroup = graph.getActions(arg.id);
-        acc.groupedActions[arg.id] = actionGroup;
-      }
-      return acc;
-    },
-    { actions: [], groupedActions: {} },
-  );
-};
-
 export const l0ItemType = (item: Node<any>) => {
   if (item.properties.disposition === 'collection') {
     return 'collection';