@dxos/plugin-navtree 0.7.4-staging.f7e8224 → 0.7.5-feature-compute.4d9d99a

package/src/capabilities/state.ts

@@ -0,0 +1,100 @@
+//
+// 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-mosaic';
+
+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) => {
+  // 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;
+
+  const location = context.requestCapability(Capabilities.Location);
+  const layout = context.requestCapability(Capabilities.Layout);
+
+  let previous: string[] = [];
+  const unsubscribe = effect(() => {
+    const part = layout.layoutMode === 'solo' ? 'solo' : 'main';
+    const current = location.active[part]?.map(({ id }) => id) ?? [];
+    const removed = previous.filter((id) => !current.includes(id));
+    previous = current;
+
+    // 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);
+        });
+      });
+
+      current.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,7 +4,7 @@
 
 import React, { useMemo, useState } from 'react';
 
-import { useIntentDispatcher, LayoutAction } from '@dxos/app-framework';
+import { useIntentDispatcher, LayoutAction, createIntent } 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';
@@ -19,7 +19,7 @@ import { KEY_BINDING, NAVTREE_PLUGIN } from '../meta';
 export const CommandsDialogContent = ({ selected: initial }: { selected?: string }) => {
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const [selected, setSelected] = useState<string | undefined>(initial);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useGraph();
 
   // Traverse graph.
@@ -83,7 +83,7 @@ export const CommandsDialogContent = ({ selected: initial }: { selected?: string
                     return;
                   }
 
-                  void dispatch({ action: LayoutAction.SET_LAYOUT, data: { element: 'dialog', state: false } });
+                  void dispatch(createIntent(LayoutAction.SetLayout, { element: 'dialog', 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

@@ -5,24 +5,27 @@
 import { MagnifyingGlass } from '@phosphor-icons/react';
 import React from 'react';
 
-import { LayoutAction, useIntent } from '@dxos/app-framework';
+import { createIntent, LayoutAction, useIntentDispatcher } from '@dxos/app-framework';
 import { Button, useTranslation } from '@dxos/react-ui';
 import { getSize } from '@dxos/react-ui-theme';
 
-import { NAVTREE_PLUGIN } from '../meta';
+import { COMMANDS_DIALOG, NAVTREE_PLUGIN } from '../meta';
 
 // TODO(thure): Refactor to be handled by a more appropriate plugin.
 export const CommandsTrigger = () => {
-  const { dispatch } = useIntent();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { t } = useTranslation(NAVTREE_PLUGIN);
   return (
     <Button
-      classNames='w-full h-full !rounded-none'
+      classNames='m-1 !pli-1 lg:!pli-2'
       onClick={() =>
-        dispatch({
-          action: LayoutAction.SET_LAYOUT,
-          data: { element: 'dialog', component: `${NAVTREE_PLUGIN}/Commands`, dialogBlockAlign: 'start' },
-        })
+        dispatch(
+          createIntent(LayoutAction.SetLayout, {
+            element: 'dialog',
+            component: COMMANDS_DIALOG,
+            dialogBlockAlign: 'start',
+          }),
+        )
       }
     >
       <span className='text-description font-normal grow text-start'>{t('command list input placeholder')}</span>

package/src/components/NavTree.tsx

@@ -23,14 +23,13 @@ export type NavTreeProps = Omit<
 
 export const NavTree = ({ getActions, loadDescendents, renderItemEnd, popoverAnchorId, ...props }: NavTreeProps) => {
   const renderColumns = useCallback<NonNullable<TreeProps<NavTreeItemGraphNode>['renderColumns']>>(
-    ({ item, path, menuOpen, setMenuOpen }) => {
+    ({ item, path, open }) => {
       return (
         <NavTreeColumns
           path={path}
           node={item}
           getActions={getActions}
-          menuOpen={menuOpen}
-          setMenuOpen={setMenuOpen}
+          open={open}
           loadDescendents={loadDescendents}
           renderItemEnd={renderItemEnd}
           popoverAnchorId={popoverAnchorId}
@@ -54,10 +53,9 @@ type NavTreeColumnsProps = {
   path: string[];
   node: Node;
   getActions: (node: Node) => FlattenedActions;
-  menuOpen: boolean;
-  setMenuOpen: (open: boolean) => void;
+  open: boolean;
   loadDescendents?: (node: Node) => MaybePromise<void>;
-  renderItemEnd?: FC<{ node: Node }>;
+  renderItemEnd?: FC<{ node: Node; open: boolean }>;
   popoverAnchorId?: string;
 };
 
@@ -65,8 +63,7 @@ const NavTreeColumns = ({
   path,
   node,
   getActions,
-  menuOpen,
-  setMenuOpen,
+  open,
   loadDescendents,
   renderItemEnd: ItemEnd,
   popoverAnchorId,
@@ -123,14 +120,12 @@ const NavTreeColumns = ({
             menuActions={actions}
             menuType='dropdown'
             caller={NAV_TREE_ITEM}
-            menuOpen={menuOpen}
-            onChangeMenuOpen={setMenuOpen}
           />
         ) : (
           <Treegrid.Cell />
         )}
       </ActionRoot>
-      {ItemEnd && <ItemEnd node={node} />}
+      {ItemEnd && <ItemEnd node={node} open={open} />}
     </>
   );
 };

package/src/components/NavTreeContainer.tsx

@@ -7,17 +7,16 @@ import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-a
 import { untracked } from '@preact/signals-core';
 import React, { memo, useCallback, useEffect } from 'react';
 
-import { LayoutAction, NavigationAction, Surface, useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, LayoutAction, NavigationAction, useIntentDispatcher, Surface } from '@dxos/app-framework';
 import { isAction, isActionLike, type Node } from '@dxos/app-graph';
 import { useGraph } from '@dxos/plugin-graph';
 import { isEchoObject, isSpace } from '@dxos/react-client/echo';
-import { ElevationProvider, useMediaQuery, useSidebars } from '@dxos/react-ui';
+import { useMediaQuery, useSidebars } from '@dxos/react-ui';
 import { isTreeData, type TreeData, type PropsFromTreeItem } from '@dxos/react-ui-list';
 import { mx } from '@dxos/react-ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { NAV_TREE_ITEM, NavTree, type NavTreeProps } from './NavTree';
-import { NavTreeFooter } from './NavTreeFooter';
 import { NAVTREE_PLUGIN } from '../meta';
 import { type NavTreeItemGraphNode } from '../types';
 import {
@@ -32,8 +31,8 @@ import {
 // TODO(thure): Is NavTree truly authoritative in this regard?
 export const NODE_TYPE = 'dxos/app-graph/node';
 
-const renderItemEnd = ({ node }: { node: Node }) => (
-  <Surface role='navtree-item-end' data={{ object: node.data, id: node.id }} />
+const renderItemEnd = ({ node, open }: { node: Node; open: boolean }) => (
+  <Surface role='navtree-item-end' data={{ id: node.id, subject: node.data, open }} limit={1} />
 );
 
 export type NavTreeContainerProps = {
@@ -43,7 +42,7 @@ export type NavTreeContainerProps = {
 export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }: NavTreeContainerProps) => {
   const { closeNavigationSidebar } = useSidebars(NAVTREE_PLUGIN);
   const [isLg] = useMediaQuery('lg', { ssr: false });
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { graph } = useGraph();
 
   const getActions = useCallback((node: Node) => naturalGetActions(graph, node), [graph]);
@@ -124,28 +123,11 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
 
       const current = isCurrent(path, node);
       if (!current) {
-        void dispatch({
-          action: NavigationAction.OPEN,
-          data: {
-            activeParts: {
-              main: [node.id],
-            },
-          },
-        });
+        void dispatch(createIntent(NavigationAction.Open, { activeParts: { main: [node.id] } }));
       } else if (option) {
-        void dispatch({
-          action: NavigationAction.CLOSE,
-          data: {
-            activeParts: {
-              main: [node.id],
-            },
-          },
-        });
+        void dispatch(createIntent(NavigationAction.Close, { activeParts: { main: [node.id] } }));
       } else {
-        void dispatch({
-          action: LayoutAction.SCROLL_INTO_VIEW,
-          data: { id: node.id },
-        });
+        void dispatch(createIntent(LayoutAction.ScrollIntoView, { id: node.id }));
       }
 
       const defaultAction = graph.actions(node).find((action) => action.properties?.disposition === 'default');
@@ -219,36 +201,20 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
     });
   }, [graph]);
 
+  // TODO(thure): What gives this an inline `overflow: initial`?
   return (
-    <ElevationProvider elevation='chrome'>
-      <div
-        role='none'
-        className='grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] bs-full overflow-hidden'
-      >
-        {/* TODO(wittjosiah): Factor out surfaces to layout? */}
-        <div role='none' className='border-be border-separator'>
-          <Surface role='search-input' limit={1} />
-        </div>
-
-        {/* TODO(thure): What gives this an inline `overflow: initial`? */}
-        <div role='none' className='border-be border-separator !overflow-y-auto'>
-          <NavTree
-            id={graph.root.id}
-            getActions={getActions}
-            getItems={getItems}
-            getProps={getProps}
-            isCurrent={isCurrent}
-            loadDescendents={loadDescendents}
-            renderItemEnd={renderItemEnd}
-            popoverAnchorId={popoverAnchorId}
-            canDrop={canDrop}
-            onSelect={handleSelect}
-            {...props}
-          />
-        </div>
-
-        <NavTreeFooter />
-      </div>
-    </ElevationProvider>
+    <NavTree
+      id={graph.root.id}
+      getActions={getActions}
+      getItems={getItems}
+      getProps={getProps}
+      isCurrent={isCurrent}
+      loadDescendents={loadDescendents}
+      renderItemEnd={renderItemEnd}
+      popoverAnchorId={popoverAnchorId}
+      canDrop={canDrop}
+      onSelect={handleSelect}
+      {...props}
+    />
   );
 });

package/src/components/NavTreeFooter.tsx

@@ -2,16 +2,15 @@
 // Copyright 2024 DXOS.org
 //
 
-import { ArrowSquareOut, GearSix, Warning } from '@phosphor-icons/react';
 import { formatDistance } from 'date-fns/formatDistance';
 import React from 'react';
 
 import {
   type LayoutPart,
   SettingsAction,
-  parseNavigationPlugin,
-  useResolvePlugin,
   useIntentDispatcher,
+  createIntent,
+  usePluginManager,
 } from '@dxos/app-framework';
 import { useConfig } from '@dxos/react-client';
 import {
@@ -24,13 +23,15 @@ import {
   useDefaultValue,
   useSidebars,
   useTranslation,
+  Icon,
+  IconButton,
 } from '@dxos/react-ui';
 import { LayoutControls } from '@dxos/react-ui-stack';
-import { getSize, mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/react-ui-theme';
 
 import { NAVTREE_PLUGIN } from '../meta';
 
-const buttonStyles = 'pli-1.5 text-xs font-normal';
+const buttonStyles = '!pli-1.5 text-xs font-normal';
 
 const repo = 'https://github.com/dxos/dxos';
 
@@ -41,9 +42,9 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
   const config = useConfig();
   const { t } = useTranslation(NAVTREE_PLUGIN);
   const { navigationSidebarOpen } = useSidebars(NAVTREE_PLUGIN);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
-  const navigationPlugin = useResolvePlugin(parseNavigationPlugin);
+  const manager = usePluginManager();
   const [_, v] = version?.match(VERSION_REGEX) ?? [];
 
   const releaseUrl =
@@ -57,7 +58,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
     <div
       role='none'
       className={mx(
-        'flex bs-[--rail-size] pbe-[env(safe-area-inset-bottom)] box-content justify-end',
+        'flex pbe-[env(safe-area-inset-bottom)] box-content justify-end',
         layoutPart === 'complementary' && 'md:justify-end flex-row-reverse',
       )}
     >
@@ -75,7 +76,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
           >
             <Message.Root valence='warning' className='rounded-be-none p-5'>
               <Message.Title>
-                <Warning weight='duotone' className='inline mie-2 is-6 bs-6' />
+                <Icon icon='ph--warning--duotone' size={6} classNames='inline mie-2' />
                 <span>{t('warning title')}</span>
               </Message.Title>
               <Message.Body>
@@ -83,7 +84,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
                 <br />
                 <Link href={previewUrl} target='_blank' rel='noreferrer' variant='neutral'>
                   {t('learn more label')}
-                  <ArrowSquareOut className='inline mis-1' weight='bold' />
+                  <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
                 </Link>
               </Message.Body>
             </Message.Root>
@@ -96,7 +97,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
                   <br />
                   <Link href={releaseUrl} target='_blank' rel='noreferrer' variant='neutral'>
                     {t('see release label')}
-                    <ArrowSquareOut className='inline mis-1' weight='bold' />
+                    <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
                   </Link>
                 </p>
               )}
@@ -120,17 +121,19 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
       <Tooltip.Root>
         <Tooltip.Trigger asChild>
           {/* TODO(burdon): Reconcile with action created by LayoutPlugin. */}
-          <Button
+          <IconButton
+            icon='ph--gear-six--regular'
+            iconOnly
+            label={t('open settings label')}
+            size={4}
             variant='ghost'
             classNames={buttonStyles}
             data-testid='treeView.openSettings'
             data-joyride='welcome/settings'
             {...(!navigationSidebarOpen && { tabIndex: -1 })}
-            onClick={() => dispatch({ action: SettingsAction.OPEN })}
-          >
-            <span className='sr-only'>{t('open settings label')}</span>
-            <GearSix className={mx(getSize(5), 'rotate-90')} />
-          </Button>
+            iconClassNames='rotate-90'
+            onClick={() => dispatch(createIntent(SettingsAction.Open))}
+          />
         </Tooltip.Trigger>
         <Tooltip.Portal>
           <Tooltip.Content classNames='z-[12]'>
@@ -141,7 +144,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
       </Tooltip.Root>
 
       {/* NOTE(thure): Unpinning from the NavTree’s default position in Deck is temporarily disabled. */}
-      {navigationPlugin?.meta.id === 'dxos.org/plugin/deck' && (
+      {manager.enabled.includes('dxos.org/plugin/deck') && (
         <LayoutControls
           variant='hide-disabled'
           capabilities={{

package/src/components/NavTreeItemAction.stories.tsx

@@ -53,5 +53,3 @@ export default {
 };
 
 export const Default = {};
-
-export const SearchList = { args: { menuType: 'searchList' } };