@dxos/plugin-navtree 0.8.4-main.3c1ae3b → 0.8.4-main.3eb6e50203

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

@@ -4,20 +4,15 @@
 
 import React, { forwardRef, useMemo, useState } from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useAppGraph, useIntentDispatcher } from '@dxos/app-framework/react';
-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';
@@ -30,7 +25,8 @@ export type CommandsDialogContentProps = {
 export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogContentProps>(
   ({ selected: initial }, forwardedRef) => {
     const { t } = useTranslation(meta.id);
-    const { dispatchPromise: dispatch } = useIntentDispatcher();
+    const { invokeSync } = useOperationInvoker();
+    const runAction = useActionRunner();
     const { graph } = useAppGraph();
     const [selected, setSelected] = useState<string | undefined>(initial);
 
@@ -40,11 +36,11 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
       // TODO(burdon): Get from navtree (not keyboard).
       const current = Keyboard.singleton.getCurrentContext();
       const actionMap = new Set<string>();
-      const actions: ActionLike[] = [];
-      graph.traverse({
+      const actions: Node.ActionLike[] = [];
+      Graph.traverse(graph, {
         visitor: (node, path) => {
           if (
-            (isAction(node) || isActionGroup(node)) &&
+            (Node.isAction(node) || Node.isActionGroup(node)) &&
             !actionMap.has(node.id) &&
             current.startsWith(path.slice(0, -1).join('/'))
           ) {
@@ -65,63 +61,65 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
 
     const group = allActions.find(({ id }) => id === selected);
     const groupActions = useActions(graph, group?.id);
-    const actions = isActionGroup(group) ? groupActions : allActions;
+    const actions = Node.isActionGroup(group) ? groupActions : allActions;
+
+    const { results, handleSearch } = useSearchListResults({
+      items: actions,
+      extract: (action) => toLocalizedString(action.properties.label, t),
+    });
 
     return (
-      <Dialog.Content classNames={cardDialogContent} ref={forwardedRef}>
-        <Dialog.Title classNames={cardDialogHeader}>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+      <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()];
 
-        <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 (
+                  <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;
+                      }
 
-                    if (isActionGroup(action)) {
-                      setSelected(action.id);
-                      return;
-                    }
+                      if (Node.isActionGroup(action)) {
+                        setSelected(action.id);
+                        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>
-              );
-            })}
+                      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: 'os' })}</Button>
+            <Button classNames='is-full'>{t('close label', { ns: osTranslations })}</Button>
           </Dialog.Close>
         </div>
       </Dialog.Content>

package/src/components/CommandsDialog/CommandsTrigger.tsx

@@ -4,30 +4,20 @@
 
 import React from 'react';
 
-import { LayoutAction, createIntent } from '@dxos/app-framework';
-import { useIntentDispatcher } from '@dxos/app-framework/react';
+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,
-} from '@dxos/app-framework';
-import { useCapability } from '@dxos/app-framework/react';
+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'
@@ -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

@@ -19,18 +19,8 @@ export type NavTreeProps = Pick<TreeProps<NavTreeItemGraphNode>, 'id' | 'root'>
 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(