@dxos/plugin-navtree 0.7.5-main.9d26e3a → 0.7.5-main.b19bfc8

package/src/capabilities/state.ts

@@ -0,0 +1,97 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { effect } from '@preact/signals-core';
+
+import { Capabilities, contributes, type PluginsContext } from '@dxos/app-framework';
+import { type ReactiveObject, create } from '@dxos/live-object';
+import { Path } from '@dxos/react-ui-list';
+
+import { NavTreeCapabilities } from './capabilities';
+import { NAVTREE_PLUGIN } from '../meta';
+
+const KEY = `${NAVTREE_PLUGIN}/state`;
+
+const getInitialState = () => {
+  const stringified = localStorage.getItem(KEY);
+  if (!stringified) {
+    return;
+  }
+
+  try {
+    const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
+    return cached.map(
+      ([key, value]): [
+        string,
+        ReactiveObject<{
+          open: boolean;
+          current: boolean;
+        }>,
+      ] => [key, create({ open: value.open, current: false })],
+    );
+  } catch {}
+};
+
+export default (context: PluginsContext) => {
+  const layout = context.requestCapability(Capabilities.Layout);
+
+  // TODO(wittjosiah): This currently needs to be not a ReactiveObject at the root.
+  //   If it is a ReactiveObject then React errors when initializing new paths because of state change during render.
+  //   Ideally this could be a ReactiveObject but be able to access and update the root level without breaking render.
+  //   Wrapping accesses and updates in `untracked` didn't seem to work in all cases.
+  const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>(
+    getInitialState() ?? [
+      // TODO(thure): Initialize these dynamically.
+      ['root', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/space-spaces', create({ open: true, current: false })],
+      ['root~dxos.org/plugin/files', create({ open: true, current: false })],
+    ],
+  );
+
+  const getItem = (_path: string[]) => {
+    const path = Path.create(..._path);
+    const value = state.get(path) ?? create({ open: false, current: false });
+    if (!state.has(path)) {
+      state.set(path, value);
+    }
+
+    return value;
+  };
+
+  const setItem = (path: string[], key: 'open' | 'current', next: boolean) => {
+    const value = getItem(path);
+    value[key] = next;
+
+    localStorage.setItem(KEY, JSON.stringify(Array.from(state.entries())));
+  };
+
+  const isOpen = (path: string[]) => getItem(path).open;
+  const isCurrent = (path: string[]) => getItem(path).current;
+
+  let previous: string[] = [];
+  const unsubscribe = effect(() => {
+    const removed = previous.filter((id) => !layout.active.includes(id));
+    previous = layout.active;
+
+    // TODO(wittjosiah): This is setTimeout because there's a race between the keys be initialized.
+    //   This could be avoided if the location was a path as well and not just an id.
+    setTimeout(() => {
+      removed.forEach((id) => {
+        const keys = Array.from(state.keys()).filter((key) => Path.last(key) === id);
+        keys.forEach((key) => {
+          setItem(Path.parts(key), 'current', false);
+        });
+      });
+
+      layout.active.forEach((id) => {
+        const keys = Array.from(new Set([...state.keys(), id])).filter((key) => Path.last(key) === id);
+        keys.forEach((key) => {
+          setItem(Path.parts(key), 'current', true);
+        });
+      });
+    });
+  });
+
+  return contributes(NavTreeCapabilities.State, { state, getItem, setItem, isOpen, isCurrent }, () => unsubscribe());
+};

package/src/components/CommandsDialog.tsx

@@ -4,10 +4,9 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { useIntentDispatcher, LayoutAction, createIntent } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { type ActionLike, isActionGroup, isAction } from '@dxos/app-graph';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
-import { useGraph } from '@dxos/plugin-graph';
 import { Button, Dialog, Icon, useTranslation, toLocalizedString } from '@dxos/react-ui';
 import { SearchList } from '@dxos/react-ui-searchlist';
 import { descriptionText, mx } from '@dxos/react-ui-theme';
@@ -20,7 +19,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const [selected, setSelected] = useState<string | undefined>(initial);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useGraph();
+  const { graph } = useAppGraph();
 
   // Traverse graph.
   // TODO(burdon): Factor out commonality with shortcut dialog.
@@ -83,7 +82,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                     return;
                   }
 
-                  void dispatch(createIntent(LayoutAction.SetLayout, { element: 'dialog', state: false }));
+                  void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
                   setTimeout(() => {
                     const node = graph.nodes(group ?? action, { relation: 'inbound' })[0];
                     void (node && isAction(action) && action.data({ node, caller: KEY_BINDING }));

package/src/components/CommandsTrigger.tsx

@@ -17,13 +17,15 @@ export const CommandsTrigger = () => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   return (
     <Button
-      classNames='w-full h-full !rounded-none'
+      classNames='m-1 pli-1 lg:pli-2'
       onClick={() =>
         dispatch(
-          createIntent(LayoutAction.SetLayout, {
-            element: 'dialog',
-            component: COMMANDS_DIALOG,
-            dialogBlockAlign: 'start',
+          createIntent(LayoutAction.UpdateDialog, {
+            part: 'dialog',
+            subject: COMMANDS_DIALOG,
+            options: {
+              blockAlign: 'start',
+            },
           }),
         )
       }

package/src/components/L0Menu.tsx

@@ -0,0 +1,238 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type MouseEvent, useCallback, useMemo } from 'react';
+
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+import {
+  Icon,
+  Popover,
+  ScrollArea,
+  toLocalizedString,
+  Tooltip,
+  useMediaQuery,
+  useSidebars,
+  useTranslation,
+} from '@dxos/react-ui';
+import { Tabs } from '@dxos/react-ui-tabs';
+import { mx } from '@dxos/react-ui-theme';
+
+import { useNavTreeContext } from './NavTreeContext';
+import { NotchStart } from './NotchStart';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { getFirstTwoRenderableChars, l0ItemType } from '../util';
+
+type L0ItemProps = {
+  item: Node<any>;
+  parent?: Node<any>;
+  path: string[];
+  pinned?: boolean;
+};
+
+const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
+  const { tab, onTabChange, onSelect, isCurrent } = useNavTreeContext();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { navigationSidebarState } = useSidebars(NAVTREE_PLUGIN);
+  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 });
+        }
+      }
+    },
+    [item, type, onSelect, isCurrent, parent, tab, navigationSidebarState, isLg, dispatch],
+  );
+};
+
+const l0Breakpoints: Record<string, string> = {
+  lg: 'hidden lg:grid',
+};
+
+const L0Item = ({ item, parent, path, pinned }: L0ItemProps) => {
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  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 avatarValue = useMemo(
+    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('').toUpperCase() : []),
+    [type, item.properties.label, t],
+  );
+  const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
+
+  const l0ItemTrigger = (
+    <Root
+      {...(rootProps as any)}
+      data-type={type}
+      className={mx(
+        'group/l0i dx-focus-ring-group grid overflow-hidden relative data[type!="collection"]:cursor-pointer app-no-drag',
+        l0Breakpoints[item.properties.l0Breakpoint],
+      )}
+    >
+      {type !== 'collection' && (
+        <div
+          role='none'
+          className={mx(
+            'absolute -z-[1] 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)` } })}
+        />
+      )}
+      <div
+        role='none'
+        className='hidden group-aria-selected/l0i:block absolute inline-start-0 inset-block-4 is-1 bg-accentSurface rounded-ie'
+      />
+      {(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} />
+          )
+        ))}
+      <span id={`${item.id}__label`} className='sr-only'>
+        {localizedString}
+      </span>
+    </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>
+  );
+};
+
+const L0Collection = ({ item, path, parent }: L0ItemProps) => {
+  const navTreeContext = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = navTreeContext.getItems(item);
+  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
+  const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+  return (
+    <div
+      role='group'
+      className='contents group/l0c'
+      aria-labelledby={`${item.id}__label`}
+      data-itemid={id}
+      data-testid={testId}
+    >
+      {/* TODO(burdon): Option. */}
+      {/* <L0Item item={item} parent={parent} path={groupPath} /> */}
+      {collectionItems.map((collectionItem) => (
+        <L0Item key={collectionItem.id} item={collectionItem} parent={item} path={groupPath} />
+      ))}
+    </div>
+  );
+};
+
+export const L0Menu = ({
+  topLevelItems,
+  pinnedItems,
+  parent,
+  path,
+}: {
+  topLevelItems: Node<any>[];
+  pinnedItems: Node<any>[];
+  parent?: Node<any>;
+  path: string[];
+}) => {
+  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)]'>
+      <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)]'
+          >
+            {topLevelItems.map((item) => {
+              if (l0ItemType(item) === 'collection') {
+                return <L0Collection key={item.id} item={item} parent={parent} path={path} />;
+              } else {
+                return <L0Item key={item.id} item={item} parent={parent} path={path} />;
+              }
+            })}
+          </div>
+          <ScrollArea.Scrollbar orientation='vertical'>
+            <ScrollArea.Thumb />
+          </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')
+          .map((item) => (
+            <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
+          ))}
+      </div>
+      <div role='none' className='grid p-2 app-no-drag'>
+        <NotchStart />
+      </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%)',
+        }}
+      />
+    </Tabs.Tablist>
+  );
+};

package/src/components/L1Panels.tsx

@@ -0,0 +1,119 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useMemo } from 'react';
+
+import { useLayout } from '@dxos/app-framework';
+import { type Node } from '@dxos/app-graph';
+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 { useNavTreeContext } from './NavTreeContext';
+import { NavTreeItemColumns } from './NavTreeItemColumns';
+import { useLoadDescendents } from '../hooks';
+import { NAVTREE_PLUGIN } from '../meta';
+import { l0ItemType } from '../util';
+
+export type L1PanelProps = { item: Node<any>; path: string[]; currentItemId: string; onBack?: () => void };
+
+const L1Panel = ({ item, path, currentItemId, onBack }: L1PanelProps) => {
+  const layout = useLayout();
+  const navTreeContext = useNavTreeContext();
+  const { t } = useTranslation(NAVTREE_PLUGIN);
+  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}
+      {...(!layout.sidebarOpen && { inert: 'true' })}
+    >
+      {item.id === currentItemId && (
+        <>
+          <h2 className='flex items-center border-be border-separator pis-4 app-drag'>
+            {item.properties.disposition === 'pin-end' && (
+              <IconButton
+                label={t('back label')}
+                iconOnly
+                icon='ph--caret-left--regular'
+                size={5}
+                density='fine'
+                variant='ghost'
+                classNames={mx(
+                  'shrink-0 mie-2',
+                  'pli-2 pointer-fine:pli-1',
+                  hoverableControlItem,
+                  hoverableOpenControlItem,
+                )}
+                onClick={onBack}
+              />
+            )}
+            <span className='flex-1 truncate cursor-default'>{toLocalizedString(item.properties.label, t)}</span>
+            <NavTreeItemColumns path={path} item={item} open />
+          </h2>
+          <div role='none' className='overflow-y-auto'>
+            <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, currentItemId }: L1PanelProps) => {
+  const { getItems } = useNavTreeContext();
+  useLoadDescendents(item);
+  const collectionItems = getItems(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} currentItemId={currentItemId} />
+        ))}
+    </>
+  );
+};
+
+export const L1Panels = ({
+  topLevelItems,
+  path,
+  currentItemId,
+  onBack,
+}: Pick<L1PanelProps, 'onBack'> & {
+  topLevelItems: Node<any>[];
+  path: string[];
+  currentItemId: string;
+}) => {
+  return (
+    <>
+      {topLevelItems.map((item) => {
+        const type = l0ItemType(item);
+        switch (type) {
+          case 'collection':
+            return <L1PanelCollection key={item.id} item={item} path={path} currentItemId={currentItemId} />;
+          case 'tab':
+            return <L1Panel key={item.id} item={item} path={path} currentItemId={currentItemId} onBack={onBack} />;
+          default:
+            return null;
+        }
+      })}
+    </>
+  );
+};

package/src/components/NavTree.stories.tsx

@@ -13,10 +13,10 @@ import { isActionLike, type NodeArg } from '@dxos/app-graph';
 import { create, type ReactiveObject } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { isTreeData, type TreeData } from '@dxos/react-ui-list';
-import { Path } from '@dxos/react-ui-mosaic';
+import { Path } from '@dxos/react-ui-list';
 import { withLayout, withTheme } from '@dxos/storybook-utils';
 
-import { NavTree } from './NavTree';
+import { StorybookNavTree } from '../stories/StorybookNavTree';
 import { createTree, updateState } from '../testing';
 
 faker.seed(1234);
@@ -24,9 +24,9 @@ faker.seed(1234);
 const tree = create<NodeArg<any>>(createTree());
 const state = new Map<string, ReactiveObject<{ open: boolean; current: boolean }>>();
 
-const meta: Meta<typeof NavTree> = {
+const meta: Meta<typeof StorybookNavTree> = {
   title: 'plugins/plugin-navtree/NavTree',
-  component: NavTree,
+  component: StorybookNavTree,
   decorators: [withTheme, withLayout({ tooltips: true })],
   render: (args) => {
     useEffect(() => {
@@ -52,7 +52,7 @@ const meta: Meta<typeof NavTree> = {
       });
     }, []);
 
-    return <NavTree {...args} />;
+    return <StorybookNavTree {...args} />;
   },
   args: {
     id: tree.id,
@@ -60,7 +60,7 @@ const meta: Meta<typeof NavTree> = {
       actions: arg.nodes?.filter((node) => isActionLike(node)) ?? [],
       groupedActions: {},
     }),
-    getItems: (testItem?: NodeArg<any>) => {
+    getItems: (testItem?: any) => {
       return testItem?.nodes ?? tree.nodes ?? [];
     },
     getProps: (testItem: NodeArg<any>) => ({