@dxos/plugin-navtree 0.8.4-main.406dc2a → 0.8.4-main.52d7546f51

package/src/capabilities/state/state.ts

@@ -0,0 +1,122 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+
+import { Capabilities, Capability } from '@dxos/app-framework';
+import { AppCapabilities } from '@dxos/app-toolkit';
+import { Path } from '@dxos/react-ui-list';
+
+import { meta } from '../../meta';
+import { type NavTreeCapabilities as NC, NavTreeCapabilities } from '../../types';
+
+const KEY = `${meta.id}/state/v1`;
+
+/** Default item state for new entries. */
+const defaultItemState: NC.NavTreeItemState = { open: false, current: false, alternateTree: false };
+
+/** Default state entries for initial tree structure. */
+// TODO(thure): Initialize these dynamically.
+const defaultStateEntries: [string, NC.NavTreeItemState][] = [
+  ['root', { open: true, current: false }],
+  ['root~dxos.org/plugin/space-spaces', { open: true, current: false }],
+  ['root~dxos.org/plugin/files', { open: true, current: false }],
+];
+
+const getInitialState = (): Map<string, NC.NavTreeItemState> => {
+  const stringified = localStorage.getItem(KEY);
+  if (!stringified) {
+    return new Map(defaultStateEntries);
+  }
+
+  try {
+    const cached: [string, { open: boolean; current: boolean }][] = JSON.parse(stringified);
+    return new Map(cached.map(([key, value]) => [key, { open: value.open, current: false }]));
+  } catch {
+    return new Map(defaultStateEntries);
+  }
+};
+
+export default Capability.makeModule(
+  Effect.fnUntraced(function* () {
+    const registry = yield* Capability.get(Capabilities.AtomRegistry);
+    const layoutAtom = yield* Capability.get(AppCapabilities.Layout);
+
+    // Backing state for persistence (not reactive).
+    const backingState = getInitialState();
+
+    // Per-path atom family for fine-grained reactivity.
+    // keepAlive prevents atoms from being garbage collected when components unmount,
+    // ensuring state is preserved across deletion/restoration cycles.
+    const itemAtomFamily = Atom.family((pathString: string) =>
+      Atom.make<NC.NavTreeItemState>(backingState.get(pathString) ?? { ...defaultItemState }).pipe(Atom.keepAlive),
+    );
+
+    const getItemAtom = (path: string[]): Atom.Atom<NC.NavTreeItemState> => {
+      const pathString = Path.create(...path);
+      return itemAtomFamily(pathString);
+    };
+
+    const getItem = (path: string[]): NC.NavTreeItemState => {
+      return registry.get(getItemAtom(path));
+    };
+
+    const setItem = (path: string[], key: 'open' | 'current' | 'alternateTree', next: boolean) => {
+      const pathString = Path.create(...path);
+      const atom = itemAtomFamily(pathString);
+      const currentValue = registry.get(atom);
+      const newValue = { ...currentValue, [key]: next };
+
+      // Update the atom.
+      registry.set(atom, newValue);
+
+      // Update backing state and persist to localStorage.
+      backingState.set(pathString, newValue);
+      localStorage.setItem(KEY, JSON.stringify(Array.from(backingState.entries())));
+    };
+
+    // Subscribe to layout changes to update current state.
+    let previous: string[] = [];
+    const unsubscribe = registry.subscribe(layoutAtom, (layout) => {
+      const removed = previous.filter((id) => !layout.active.includes(id));
+      previous = layout.active;
+
+      const handleUpdate = () => {
+        // Mark removed items as not current.
+        removed.forEach((id) => {
+          const keys = Array.from(backingState.keys()).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', false);
+          });
+        });
+
+        // Mark active items as current.
+        layout.active.forEach((id: string) => {
+          const keys = Array.from(new Set([...backingState.keys(), id])).filter((key) => Path.last(key) === id);
+          keys.forEach((key) => {
+            setItem(Path.parts(key), 'current', true);
+          });
+        });
+      };
+
+      // TODO(wittjosiah): This is setTimeout because there's a race between the keys being initialized.
+      //   Keys are initialized on the first render of an item in the navtree.
+      //   This could be avoided if the location was a path as well and not just an id.
+      const timeout = setTimeout(handleUpdate, 500);
+      handleUpdate();
+      return () => clearTimeout(timeout);
+    });
+
+    return Capability.contributes(
+      NavTreeCapabilities.State,
+      {
+        getItem,
+        getItemAtom,
+        setItem,
+      },
+      () => Effect.sync(() => unsubscribe()),
+    );
+  }),
+);

package/src/components/CommandsDialog/CommandsDialog.tsx

@@ -2,117 +2,127 @@
 // Copyright 2023 DXOS.org
 //
 
-import React, { useMemo, useState } from 'react';
+import React, { forwardRef, useMemo, useState } from 'react';
 
-import { LayoutAction, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
-import { type ActionLike, isAction, isActionGroup } from '@dxos/app-graph';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { Keyboard, keySymbols } from '@dxos/keyboard';
+import { Graph, Node, useActionRunner } from '@dxos/plugin-graph';
 import { useActions } from '@dxos/plugin-graph';
-import { Button, Dialog, Icon, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { SearchList } from '@dxos/react-ui-searchlist';
-import {
-  cardDialogContent,
-  cardDialogHeader,
-  cardDialogPaddedOverflow,
-  cardDialogSearchListRoot,
-} from '@dxos/react-ui-stack';
-import { descriptionText, mx } from '@dxos/react-ui-theme';
+import { Button, Dialog, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { SearchList, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { osTranslations } from '@dxos/ui-theme';
 import { getHostPlatform } from '@dxos/util';
 
 import { KEY_BINDING, meta } from '../../meta';
 
+export type CommandsDialogContentProps = {
+  selected?: string;
+};
+
 // TODO(wittjosiah): This probably deserves its own plugin but for now it lives here w/ other navigation UI.
-export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
-  const { t } = useTranslation(meta.id);
-  const [selected, setSelected] = useState<string | undefined>(initial);
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const { graph } = useAppGraph();
+export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
+  ({ selected: initial }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const { invokeSync } = useOperationInvoker();
+    const runAction = useActionRunner();
+    const { graph } = useAppGraph();
+    const [selected, setSelected] = useState<string | undefined>(initial);
 
-  // Traverse graph.
-  // TODO(burdon): Factor out commonality with shortcut dialog.
-  const allActions = useMemo(() => {
-    // TODO(burdon): Get from navtree (not keyboard).
-    const current = Keyboard.singleton.getCurrentContext();
-    const actionMap = new Set<string>();
-    const actions: ActionLike[] = [];
-    graph.traverse({
-      visitor: (node, path) => {
-        if (
-          (isAction(node) || isActionGroup(node)) &&
-          !actionMap.has(node.id) &&
-          current.startsWith(path.slice(0, -1).join('/'))
-        ) {
-          actionMap.add(node.id);
-          actions.push(node);
-        }
-      },
-    });
+    // Traverse graph.
+    // TODO(burdon): Factor out commonality with shortcut dialog.
+    const allActions = useMemo(() => {
+      // TODO(burdon): Get from navtree (not keyboard).
+      const current = Keyboard.singleton.getCurrentContext();
+      const actionMap = new Set<string>();
+      const actions: Node.ActionLike[] = [];
+      Graph.traverse(graph, {
+        visitor: (node, path) => {
+          if (
+            (Node.isAction(node) || Node.isActionGroup(node)) &&
+            !actionMap.has(node.id) &&
+            current.startsWith(path.slice(0, -1).join('/'))
+          ) {
+            actionMap.add(node.id);
+            actions.push(node);
+          }
+        },
+      });
 
-    actions.sort((a, b) => {
-      return toLocalizedString(a.properties.label, t)
-        ?.toLowerCase()
-        .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
-    });
+      actions.sort((a, b) => {
+        return toLocalizedString(a.properties.label, t)
+          ?.toLowerCase()
+          .localeCompare(toLocalizedString(b.properties.label, t)?.toLowerCase());
+      });
 
-    return actions;
-  }, [graph]);
+      return actions;
+    }, [graph]);
 
-  const group = allActions.find(({ id }) => id === selected);
-  const groupActions = useActions(graph, group?.id);
-  const actions = isActionGroup(group) ? groupActions : allActions;
+    const group = allActions.find(({ id }) => id === selected);
+    const groupActions = useActions(graph, group?.id);
+    const actions = Node.isActionGroup(group) ? groupActions : allActions;
 
-  return (
-    <Dialog.Content classNames={cardDialogContent}>
-      <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+    const { results, handleSearch } = useSearchListResults({
+      items: actions,
+      extract: (action) => toLocalizedString(action.properties.label, t),
+    });
 
-      {/* TODO(burdon): BUG: Overscrolls container. */}
-      <SearchList.Root label={t('command list input placeholder')} classNames={cardDialogSearchListRoot}>
-        <SearchList.Input placeholder={t('command list input placeholder')} />
-        <SearchList.Content classNames={cardDialogPaddedOverflow}>
-          {actions?.map((action) => {
-            const label = toLocalizedString(action.properties.label, t);
-            const shortcut =
-              typeof action.properties.keyBinding === 'string'
-                ? action.properties.keyBinding
-                : action.properties.keyBinding?.[getHostPlatform()];
-            return (
-              <SearchList.Item
-                value={label}
-                key={action.id}
-                onSelect={() => {
-                  if (action.properties.disabled) {
-                    return;
-                  }
+    return (
+      <Dialog.Content ref={forwardedRef}>
+        <Dialog.Title>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+        <SearchList.Root onSearch={handleSearch}>
+          <SearchList.Content>
+            <SearchList.Input placeholder={t('command list input placeholder')} />
+            <SearchList.Viewport>
+              {results.map((action) => {
+                const shortcut =
+                  typeof action.properties.keyBinding === 'string'
+                    ? action.properties.keyBinding
+                    : action.properties.keyBinding?.[getHostPlatform()];
 
-                  if (isActionGroup(action)) {
-                    setSelected(action.id);
-                    return;
-                  }
+                return (
+                  <SearchList.Item
+                    value={action.id}
+                    key={action.id}
+                    label={toLocalizedString(action.properties.label, t)}
+                    icon={action.properties.icon}
+                    suffix={shortcut ? keySymbols(shortcut).join('') : undefined}
+                    onSelect={() => {
+                      if (action.properties.disabled) {
+                        return;
+                      }
 
-                  void dispatch(createIntent(LayoutAction.UpdateDialog, { part: 'dialog', options: { state: false } }));
-                  setTimeout(() => {
-                    const node = graph.getConnections(group?.id ?? action.id, 'inbound')[0];
-                    void (node && isAction(action) && action.data({ parent: node, caller: KEY_BINDING }));
-                  });
-                }}
-                classNames='flex items-center gap-2'
-                disabled={action.properties.disabled}
-                {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
-              >
-                <Icon icon={action.properties.icon} size={4} />
-                <span className='grow truncate'>{label}</span>
-                {shortcut && <span className={mx('shrink-0', descriptionText)}>{keySymbols(shortcut).join('')}</span>}
-              </SearchList.Item>
-            );
-          })}
-        </SearchList.Content>
-      </SearchList.Root>
+                      if (Node.isActionGroup(action)) {
+                        setSelected(action.id);
+                        return;
+                      }
 
-      <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
-        <Dialog.Close asChild>
-          <Button classNames='is-full'>{t('close label', { ns: 'os' })}</Button>
-        </Dialog.Close>
-      </div>
-    </Dialog.Content>
-  );
-};
+                      invokeSync(LayoutOperation.UpdateDialog, { state: false });
+                      setTimeout(() => {
+                        const node = Graph.getConnections(graph, group?.id ?? action.id, 'inbound')[0];
+                        if (node && Node.isAction(action)) {
+                          void runAction(action, { parent: node, caller: KEY_BINDING });
+                        }
+                      });
+                    }}
+                    classNames='flex items-center gap-2'
+                    disabled={action.properties.disabled}
+                    {...(action.properties?.testId && {
+                      'data-testid': action.properties.testId,
+                    })}
+                  />
+                );
+              })}
+            </SearchList.Viewport>
+          </SearchList.Content>
+        </SearchList.Root>
+        <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
+          <Dialog.Close asChild>
+            <Button classNames='is-full'>{t('close label', { ns: osTranslations })}</Button>
+          </Dialog.Close>
+        </div>
+      </Dialog.Content>
+    );
+  },
+);

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -4,29 +4,20 @@
 
 import React from 'react';
 
-import { LayoutAction, createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
 import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
 import { COMMANDS_DIALOG, meta } from '../../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { dispatchPromise: dispatch } = useIntentDispatcher();
+  const { invokeSync } = useOperationInvoker();
   const { t } = useTranslation(meta.id);
   return (
     <Button
       classNames='m-1 pli-1 lg:pli-2'
-      onClick={() =>
-        dispatch(
-          createIntent(LayoutAction.UpdateDialog, {
-            part: 'dialog',
-            subject: COMMANDS_DIALOG,
-            options: {
-              blockAlign: 'start',
-            },
-          }),
-        )
-      }
+      onClick={() => invokeSync(LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>
       <Icon icon='ph--magnifying-glass--regular' size={5} />

package/src/components/NavTree/NavTree.stories.tsx

@@ -2,33 +2,24 @@
 // Copyright 2023 DXOS.org
 //
 
+import { Atom, type Registry } from '@effect-atom/atom-react';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import * as Schema from 'effect/Schema';
+import * as Effect from 'effect/Effect';
 import React, { type KeyboardEvent, useCallback, useRef } from 'react';
 import { expect, userEvent, within } from 'storybook/test';
 
-import {
-  Capabilities,
-  IntentPlugin,
-  LayoutAction,
-  SettingsPlugin,
-  contributes,
-  createResolver,
-  defineCapability,
-  useCapability,
-} from '@dxos/app-framework';
+import { Capabilities, Capability } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
-import { live } from '@dxos/live-object';
-import { AttentionPlugin } from '@dxos/plugin-attention';
-import { GraphPlugin } from '@dxos/plugin-graph';
-import { StorybookLayoutPlugin } from '@dxos/plugin-storybook-layout';
-import { ThemePlugin } from '@dxos/plugin-theme';
+import { useAtomCapability } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation } from '@dxos/app-toolkit';
+import { OperationResolver } from '@dxos/operation';
+import { StorybookPlugin, corePlugins } from '@dxos/plugin-testing';
 import { faker } from '@dxos/random';
 import { IconButton, Input, Main, Toolbar } from '@dxos/react-ui';
 import { withTheme } from '@dxos/react-ui/testing';
 import { useAttention, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { Stack, StackItem } from '@dxos/react-ui-stack';
-import { defaultTx, mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { NavTreePlugin } from '../../NavTreePlugin';
 import { storybookGraphBuilders } from '../../testing';
@@ -37,7 +28,7 @@ import { NavTreeContainer } from '../NavTreeContainer';
 
 faker.seed(1234);
 
-const StoryState = defineCapability<{ tab: string }>('story-state');
+const StoryState = Capability.make<Atom.Atom<{ tab: string }>>('story-state');
 
 // TODO(burdon): Fix outline (e.g., button in sidebar nav is clipped when focused).
 // TODO(burdon): Consider similar containment of: Table, Sheet, Kanban Column, Form, etc.
@@ -49,7 +40,7 @@ const StoryPlankHeading = ({ attendableId }: { attendableId: string }) => {
   const { hasAttention } = useAttention(attendableId);
   console.log('hasAttention', hasAttention);
   return (
-    <div className='flex p-1 items-center border-b border-separator'>
+    <div className='flex p-1 items-center border-be border-separator'>
       <IconButton
         density='coarse'
         icon='ph--atom--regular'
@@ -86,7 +77,7 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
     >
       <StoryPlankHeading attendableId={attendableId} />
       <StackItem.Content toolbar>
-        <Toolbar.Root classNames='border-b border-subduedSeparator'>
+        <Toolbar.Root classNames='border-be border-subduedSeparator'>
           <Toolbar.Button>Test</Toolbar.Button>
         </Toolbar.Root>
 
@@ -107,10 +98,10 @@ const StoryPlank = ({ attendableId }: { attendableId: string }) => {
 };
 
 const DefaultStory = () => {
-  const state = useCapability(StoryState);
+  const state = useAtomCapability(StoryState);
 
   return (
-    <Main.Root complementarySidebarState='closed'>
+    <Main.Root navigationSidebarState='expanded'>
       <Main.NavigationSidebar label='Navigation' classNames='grid'>
         <NavTreeContainer tab={state.tab} />
       </Main.NavigationSidebar>
@@ -129,32 +120,33 @@ const meta = {
   component: NavTreeContainer,
   render: DefaultStory,
   decorators: [
-    withTheme,
+    withTheme(),
     withPluginManager({
       plugins: [
-        ThemePlugin({ tx: defaultTx }),
-        GraphPlugin(),
-        IntentPlugin(),
-        SettingsPlugin(),
-        AttentionPlugin(),
+        ...corePlugins(),
+        StorybookPlugin({
+          initialState: { sidebarState: 'expanded' },
+        }),
+
         NavTreePlugin(),
-        StorybookLayoutPlugin({ initialState: { sidebarState: 'expanded' } }),
-      ],
-      capabilities: (context) => [
-        contributes(StoryState, live({ tab: 'space-0' })),
-        contributes(Capabilities.AppGraphBuilder, storybookGraphBuilders(context)),
-        contributes(Capabilities.IntentResolver, [
-          createResolver({
-            intent: LayoutAction.UpdateLayout,
-            filter: (data): data is Schema.Schema.Type<typeof LayoutAction.SwitchWorkspace.fields.input> =>
-              Schema.is(LayoutAction.SwitchWorkspace.fields.input)(data),
-            resolve: ({ subject }) => {
-              const state = context.getCapability(StoryState);
-              state.tab = subject;
-            },
-          }),
-        ]),
       ],
+      capabilities: () => {
+        const storyStateAtom = Atom.make({ tab: 'space-0' }).pipe(Atom.keepAlive);
+        return [
+          Capability.contributes(StoryState, storyStateAtom),
+          Capability.contributes(AppCapabilities.AppGraphBuilder, storybookGraphBuilders()),
+          Capability.contributes(Capabilities.OperationResolver, [
+            OperationResolver.make({
+              operation: LayoutOperation.SwitchWorkspace,
+              handler: ({ subject }) =>
+                Effect.gen(function* () {
+                  const registry: Registry.Registry = yield* Capability.get(Capabilities.AtomRegistry);
+                  registry.set(storyStateAtom, { tab: subject });
+                }),
+            }),
+          ]),
+        ];
+      },
     }),
   ],
   parameters: {

package/src/components/NavTree/NavTree.tsx

@@ -2,7 +2,7 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { useMemo } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 
 import { type TreeProps } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
@@ -16,21 +16,11 @@ export const NAV_TREE_ITEM = 'NavTreeItem';
 
 export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'> & Pick<L1TabsProps, 'open'>;
 
-export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
+export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, ...props }, forwardedRef) => {
   const { tab, useItems, onBack } = useNavTreeContext();
   const topLevelActions = useItems(root, { disposition: 'menu', sort: true });
-  const topLevelCollections = useItems(root, { disposition: 'collection' });
   const topLevelWorkspaces = useItems(root, { disposition: 'workspace' });
-  const topLevelNavigation = useItems(root, { disposition: 'navigation' });
-  const l0Items = useMemo(
-    () => [
-      // prettier-ignore
-      ...topLevelCollections,
-      ...topLevelWorkspaces,
-      ...topLevelNavigation,
-    ],
-    [topLevelCollections, topLevelWorkspaces, topLevelNavigation],
-  );
+  const l0Items = topLevelWorkspaces;
   const pinnedItems = useItems(root, { disposition: 'pin-end', sort: true });
   const userAccountItem = useItems(root, { disposition: 'user-account' })[0];
   const topLevelItems = useMemo(
@@ -51,7 +41,7 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
     //  it uses RovingFocus and doesn’t support moving focus to an item that is not a tab. Assess whether this situation
     //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
     //  not use `react-ui-tabs` at all.
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative'>
+    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -63,4 +53,4 @@ export const NavTree = ({ id, root, ...props }: NavTreeProps) => {
       <L1Tabs topLevelItems={topLevelItems} path={path} currentItemId={tab} onBack={onBack} {...props} />
     </Tabs.Root>
   );
-};
+});