@dxos/plugin-navtree 0.7.4 → 0.7.5-main.9cb18ac

package/src/components/NavTreeContainer.tsx

@@ -7,11 +7,11 @@ 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, Surface, useIntentDispatcher } 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';
@@ -32,8 +32,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 +43,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 +124,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');
@@ -220,35 +203,30 @@ export const NavTreeContainer = memo(({ isCurrent, popoverAnchorId, ...props }:
   }, [graph]);
 
   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 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>
-    </ElevationProvider>
+
+      {/* 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>
   );
 });

package/src/components/NavTreeFooter.tsx

@@ -12,6 +12,7 @@ import {
   parseNavigationPlugin,
   useResolvePlugin,
   useIntentDispatcher,
+  createIntent,
 } from '@dxos/app-framework';
 import { useConfig } from '@dxos/react-client';
 import {
@@ -41,7 +42,7 @@ 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 [_, v] = version?.match(VERSION_REGEX) ?? [];
@@ -126,7 +127,7 @@ export const NavTreeFooter = (props: { layoutPart?: LayoutPart }) => {
             data-testid='treeView.openSettings'
             data-joyride='welcome/settings'
             {...(!navigationSidebarOpen && { tabIndex: -1 })}
-            onClick={() => dispatch({ action: SettingsAction.OPEN })}
+            onClick={() => dispatch(createIntent(SettingsAction.Open))}
           >
             <span className='sr-only'>{t('open settings label')}</span>
             <GearSix className={mx(getSize(5), 'rotate-90')} />

package/src/components/NavTreeItemAction.tsx

@@ -90,7 +90,7 @@ export const NavTreeItemActionDropdownMenu = ({
         </DropdownMenu.Trigger>
       </Tooltip.Trigger>
       <DropdownMenu.Portal>
-        <DropdownMenu.Content classNames='z-[31]'>
+        <DropdownMenu.Content>
           <DropdownMenu.Viewport>
             {menuActions?.map((action) => {
               const shortcut = getShortcut(action);
@@ -144,7 +144,7 @@ const NavTreeItemActionContextMenuImpl = ({
     <ContextMenu.Root>
       <ContextMenu.Trigger asChild>{children}</ContextMenu.Trigger>
       <ContextMenu.Portal>
-        <ContextMenu.Content classNames='z-[31]'>
+        <ContextMenu.Content>
           <ContextMenu.Viewport>
             {menuActions?.map((action) => {
               const shortcut = getShortcut(action);
@@ -241,7 +241,7 @@ export const NavTreeItemActionSearchList = ({
       </Tooltip.Trigger>
       <Dialog.Portal>
         <Dialog.Overlay>
-          <Dialog.Content classNames='z-[31] is-full max-is-[24rem] pli-2 plb-1'>
+          <Dialog.Content classNames='is-full max-is-[24rem] pli-2 plb-1'>
             <SearchList.Root label={t('tree item searchlist input placeholder')}>
               <SearchList.Input placeholder={t('tree item searchlist input placeholder')} classNames='pli-3' />
               <SearchList.Content classNames='min-bs-[12rem] bs-[50dvh] max-bs-[30rem] overflow-auto'>

package/src/components/NotchStart.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { useIntentDispatcher, useResolvePlugin } from '@dxos/app-framework';
-import { ClientAction } from '@dxos/plugin-client/meta';
+import { createIntent, useIntentDispatcher, useResolvePlugin } from '@dxos/app-framework';
+import { ClientAction } from '@dxos/plugin-client/types';
 import { parseObservabilityPlugin } from '@dxos/plugin-observability';
 import { useIdentity } from '@dxos/react-client/halo';
 
@@ -15,7 +15,7 @@ import { HaloButton } from './HaloButton';
 export const NotchStart = () => {
   const identity = useIdentity();
   const observabilityPlugin = useResolvePlugin(parseObservabilityPlugin);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
   return (
     <HaloButton
       size={8}
@@ -23,7 +23,7 @@ export const NotchStart = () => {
       hue={identity?.profile?.data?.hue}
       emoji={identity?.profile?.data?.emoji}
       internal={observabilityPlugin?.provides?.observability?.group === 'dxos'}
-      onClick={() => dispatch({ action: ClientAction.SHARE_IDENTITY })}
+      onClick={() => dispatch(createIntent(ClientAction.ShareIdentity))}
     />
   );
 };

package/src/meta.ts

@@ -8,6 +8,8 @@ export const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';
 
 // TODO(wittjosiah): Factor out.
 export const KEY_BINDING = 'KeyBinding';
+// TODO(wittjosiah): Factor out.
+export const COMMANDS_DIALOG = `${NAVTREE_PLUGIN}/CommandsDialog`;
 
 export default {
   id: NAVTREE_PLUGIN,

package/dist/lib/browser/chunk-PSVCPL4T.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/meta.ts"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type PluginMeta } from '@dxos/app-framework';\n\nexport const NAVTREE_PLUGIN = 'dxos.org/plugin/navtree';\n\n// TODO(wittjosiah): Factor out.\nexport const KEY_BINDING = 'KeyBinding';\n\nexport default {\n  id: NAVTREE_PLUGIN,\n} satisfies PluginMeta;\n"],
-  "mappings": ";AAMO,IAAMA,iBAAiB;AAGvB,IAAMC,cAAc;AAE3B,IAAA,eAAe;EACbC,IAAIF;AACN;",
-  "names": ["NAVTREE_PLUGIN", "KEY_BINDING", "id"]
-}