@dxos/plugin-navtree 0.8.3-staging.0fa589b → 0.8.4-main.1068cf700f

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 { createIntent, LayoutAction, 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, useTranslation, toLocalizedString } 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, NAVTREE_PLUGIN } from '../../meta';
+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(NAVTREE_PLUGIN);
-  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: NAVTREE_PLUGIN })}</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

@@ -2,36 +2,25 @@
 // Copyright 2024 DXOS.org
 //
 
-import { MagnifyingGlass } from '@phosphor-icons/react';
 import React from 'react';
 
-import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
-import { Button, useTranslation } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { Button, Icon, useTranslation } from '@dxos/react-ui';
 
-import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../../meta';
+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 { t } = useTranslation(NAVTREE_PLUGIN);
+  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>
-      <MagnifyingGlass className={getSize(5)} />
+      <Icon icon='ph--magnifying-glass--regular' size={5} />
     </Button>
   );
 };