@dxos/plugin-navtree 0.8.4-main.bc674ce → 0.8.4-main.c351d160a8

package/src/components/Sidebar/L1Panel.tsx

@@ -2,150 +2,304 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+import React, { memo, useCallback, useMemo } from 'react';
 
-import { type Node } from '@dxos/app-graph';
-import { DensityProvider, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Node } from '@dxos/app-graph';
+import { isPinnedWorkspace } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { Graph, useActionRunner, useConnections, useEdges } from '@dxos/plugin-graph';
+import { DensityProvider, IconButton, ScrollArea, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { useAttended } from '@dxos/react-ui-attention';
 import { Tree } from '@dxos/react-ui-list';
+import { Menu, type MenuItem } from '@dxos/react-ui-menu';
 import { Tabs } from '@dxos/react-ui-tabs';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { useIsAlternateTree } from '../../hooks';
+import { useActions, useIsAlternateTree, useLoadDescendents } from '../../hooks';
 import { meta } from '../../meta';
+import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
-import { NavTreeItemColumns } from '../NavTreeItem';
+import { NavTreeItemAction, NavTreeItemColumns } from '../NavTreeItem';
 
 export type L1PanelProps = {
   open?: boolean;
   path: string[];
   item: Node.Node;
-  currentItemId: string;
+  isCurrent: boolean;
   onBack?: () => void;
 };
 
 /**
  * Space or settings panel.
  */
-export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
+const L1Panel$ = ({ open, path, item, isCurrent, onBack }: L1PanelProps) => {
   const { t } = useTranslation(meta.id);
-  const navTreeContext = useNavTreeContext();
   const title = toLocalizedString(item.properties.label, t);
-
-  // TODO(wittjosiah): Support multiple alternate trees.
-  const { useItems } = navTreeContext;
-  const alternateTree = useItems(item, { disposition: 'alternate-tree' })[0];
-  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const isAlternate = useIsAlternateTree(alternatePath, item);
-  const useAlternateItems = useCallback(
-    (node?: Node.Node, { disposition }: { disposition?: string } = {}) => {
-      // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
-      return useItems(node, { disposition, sort: node?.id === alternateTree.id });
-    },
-    [alternateTree, useItems],
-  );
+  const isActivated = useIsActivatedWorkspace(item);
+  const shouldRenderContent = isCurrent || isActivated;
 
   return (
     <Tabs.Tabpanel
       key={item.id}
       value={item.id}
       classNames={[
-        'absolute inset-block-0 inline-end-0',
-        'is-[calc(100%-var(--l0-size))] lg:is-[--l1-size] grid-cols-1 grid-rows-[var(--rail-size)_1fr]',
-        'pbs-[env(safe-area-inset-top)]',
-        item.id === currentItemId && 'grid',
+        'absolute inset-y-0 end-0',
+        'w-[calc(100%-var(--dx-l0-size))] lg:w-(--dx-l1-size) grid-cols-1 grid-rows-[var(--dx-rail-size)_1fr]',
+        'py-[env(safe-area-inset-top)]',
+        isCurrent && 'grid',
       ]}
       tabIndex={-1}
       aria-label={title}
+      {...(isCurrent && { 'data-testid': 'navtree.workspace.visible' })}
       {...(!open && { inert: true })}
     >
-      {item.id === currentItemId && (
-        <DensityProvider density='fine'>
-          <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
-          <div role='none' className='overflow-y-auto'>
-            {isAlternate ? (
-              <Tree
-                {...navTreeContext}
-                id={alternateTree.id}
-                root={alternateTree}
-                path={alternatePath}
-                levelOffset={5}
-                gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-                renderColumns={NavTreeItemColumns}
-                useItems={useAlternateItems}
-              />
-            ) : (
-              <Tree
-                {...navTreeContext}
-                id={item.id}
-                root={item}
-                path={path}
-                levelOffset={5}
-                gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
-                renderColumns={NavTreeItemColumns}
-                draggable
-              />
-            )}
-          </div>
-        </DensityProvider>
-      )}
+      {shouldRenderContent && <L1PanelContent open={open} path={path} item={item} onBack={onBack} />}
     </Tabs.Tabpanel>
   );
 };
 
+/** Determines whether a workspace tab has been populated with real child content (i.e. expanded at least once). */
+const useIsActivatedWorkspace = (item: Node.Node): boolean => {
+  const { graph } = useAppGraph();
+  const edges = useEdges(graph, item.id);
+
+  return useMemo(() => {
+    const childIds = edges[Graph.relationKey('child')] ?? [];
+    return childIds.some((childId) => {
+      const child = Graph.getNode(graph, childId);
+      if (Option.isNone(child)) {
+        return false;
+      }
+      return child.value.properties.disposition === undefined;
+    });
+  }, [edges, graph]);
+};
+
 /**
- * Header row.
+ * Mounted panel content for active or previously-visited tabs.
  */
-const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
-  const { t } = useTranslation(meta.id);
-  const { setAlternateTree, ...navTreeContext } = useNavTreeContext();
-  const title = toLocalizedString(item.properties.label, t);
+const L1PanelContent = ({ path, item, onBack }: Pick<L1PanelProps, 'open' | 'path' | 'item' | 'onBack'>) => {
+  const navTreeContext = useNavTreeContext();
 
-  // TODO(wittjosiah): Support multiple alternate trees.
-  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
+  const alternateTree = useAlternateTreeItem(item);
   const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
   const isAlternate = useIsAlternateTree(alternatePath, item);
-  const backCapable = item.id.startsWith('!') || isAlternate;
 
-  const handleOpen = useCallback(() => {
-    setAlternateTree?.(alternatePath, true);
-  }, [alternatePath, setAlternateTree]);
+  return (
+    <DensityProvider density='fine'>
+      <L1PanelHeader path={path} item={item} onBack={onBack} />
+      <ScrollArea.Root thin orientation='vertical'>
+        <ScrollArea.Viewport>
+          {isAlternate && alternateTree ? (
+            <Tree
+              model={navTreeContext.model}
+              id={alternateTree.id}
+              rootId={alternateTree.id}
+              path={alternatePath}
+              levelOffset={5}
+              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+              renderColumns={NavTreeItemColumns}
+              blockInstruction={navTreeContext.blockInstruction}
+              canDrop={navTreeContext.canDrop}
+              canSelect={navTreeContext.canSelect}
+              onOpenChange={navTreeContext.onOpenChange}
+              onSelect={navTreeContext.onSelect}
+              onItemHover={navTreeContext.onItemHover}
+            />
+          ) : (
+            <Tree
+              model={navTreeContext.model}
+              id={item.id}
+              rootId={item.id}
+              path={path}
+              levelOffset={5}
+              gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
+              draggable
+              renderColumns={NavTreeItemColumns}
+              blockInstruction={navTreeContext.blockInstruction}
+              canDrop={navTreeContext.canDrop}
+              canSelect={navTreeContext.canSelect}
+              onOpenChange={navTreeContext.onOpenChange}
+              onSelect={navTreeContext.onSelect}
+              onItemHover={navTreeContext.onItemHover}
+            />
+          )}
+        </ScrollArea.Viewport>
+      </ScrollArea.Root>
+    </DensityProvider>
+  );
+};
 
-  const handleBack = useCallback(() => {
-    if (isAlternate) {
-      setAlternateTree?.(alternatePath, false);
-    } else {
-      onBack?.();
+/**
+ * Header row.
+ */
+const L1PanelHeader = ({ item, path, onBack }: Pick<L1PanelProps, 'item' | 'path' | 'onBack'>) => {
+  const { t } = useTranslation(meta.id);
+  const { renderItemEnd: ItemEnd } = useNavTreeContext();
+  const title = toLocalizedString(item.properties.label, t);
+  const backCapableWorkspace = isPinnedWorkspace(item.id);
+
+  const { primaryAction, groupedActions, menuActions, onAction } = useL1MenuActions({ item, path });
+  useLoadDescendents(item);
+
+  // TODO(wittjosiah): Hack to only show containsAttended when attended item is within alternate tree (e.g. settings).
+  //  Since every object in the space is a descendant of the space node, we'd otherwise always show containsAttended.
+  const alternateTree = useAlternateTreeItem(item);
+  const attended = useAttended();
+  const alternateTreeOpen = useMemo(() => {
+    if (!alternateTree) {
+      return true;
     }
-  }, [isAlternate, alternatePath, setAlternateTree, onBack]);
+    const hasAlternateAttended = attended.some(
+      (attendedId) => attendedId === alternateTree.id || attendedId.startsWith(alternateTree.id + '/'),
+    );
+    return !hasAlternateAttended;
+  }, [alternateTree, attended]);
 
-  // TODO(burdon): Reuse same grid as tree?
   return (
-    <div className='flex is-full items-center border-be border-subduedSeparator app-drag density-coarse'>
-      <div className='is-6' />
-      <h2 className='flex-1 truncate min-is-0'>{title}</h2>
-      {(backCapable && (
+    <div className='flex w-full items-center border-b border-subdued-separator dx-app-drag dx-density-coarse pe-1'>
+      {backCapableWorkspace ? (
         <IconButton
-          data-testid='treeView.primaryTreeButton'
+          size={5}
+          density='coarse'
+          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
           variant='ghost'
-          icon='ph--arrow-u-down-left--regular'
+          icon='ph--caret-left--regular'
           iconOnly
           label={t('button back')}
-          classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-          onClick={handleBack}
+          data-testid='treeView.primaryTreeButton'
+          onClick={() => onBack?.()}
         />
-      )) ||
-        (alternateTree && !isAlternate && (
+      ) : (
+        <div className='w-6' />
+      )}
+      <h2 className='flex-1 truncate min-w-0'>{title}</h2>
+      {/* TODO(wittjosiah): Reconcile with NavTreeItemColumns. */}
+      <div role='none' className='contents dx-app-no-drag'>
+        {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled && (
+          <NavTreeItemAction
+            testId={primaryAction.properties?.testId}
+            label={toLocalizedString(primaryAction.properties?.label, t)}
+            icon={primaryAction.properties?.icon ?? 'ph--placeholder--regular'}
+            parent={item}
+            path={path}
+            monolithic={Node.isAction(primaryAction)}
+            menuActions={Node.isAction(primaryAction) ? [primaryAction] : groupedActions[primaryAction?.id ?? '']}
+            menuType={primaryAction.properties?.menuType}
+            caller={NAV_TREE_ITEM}
+          />
+        )}
+        {menuActions.length === 1 && (
           <IconButton
-            data-testid='treeView.alternateTreeButton'
+            size={5}
+            density='coarse'
+            classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
             variant='ghost'
-            icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
+            icon={menuActions[0].properties?.icon ?? 'ph--placeholder--regular'}
             iconOnly
-            label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
-            classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
-            onClick={handleOpen}
+            label={toLocalizedString(menuActions[0].properties?.label, t)}
+            data-testid={menuActions[0].properties?.testId}
+            onClick={() => onAction(menuActions[0] as Node.Action)}
           />
-        ))}
-      <NavTreeItemColumns open path={path} item={item} density='coarse' />
+        )}
+        {menuActions.length > 1 && (
+          <Menu.Root caller={NAV_TREE_ITEM} onAction={onAction}>
+            <Menu.Trigger asChild>
+              <IconButton
+                size={5}
+                density='coarse'
+                classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+                variant='ghost'
+                icon='ph--dots-three-vertical--regular'
+                iconOnly
+                label={t('tree item actions label')}
+                data-testid='navtree.treeItem.actionsLevel0'
+              />
+            </Menu.Trigger>
+            <Menu.Content group={item} items={menuActions as MenuItem[]} />
+          </Menu.Root>
+        )}
+        {ItemEnd && <ItemEnd node={item} open={alternateTreeOpen} />}
+      </div>
     </div>
   );
 };
+
+/**
+ * Builds the menu actions for the L1 panel header, combining graph actions with a synthetic settings/back action.
+ */
+const useL1MenuActions = ({ item, path }: Pick<L1PanelProps, 'item' | 'path'>) => {
+  const { t } = useTranslation(meta.id);
+  const { setAlternateTree } = useNavTreeContext();
+  const { graph } = useAppGraph();
+  const runAction = useActionRunner();
+
+  const alternateTree = useAlternateTreeItem(item);
+  const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
+  const isAlternate = useIsAlternateTree(alternatePath, item);
+
+  // Graph actions.
+  const { actions: actionsProp, groupedActions } = useActions(item);
+  const [primaryAction, ...secondaryActions] = actionsProp.toSorted((a, _b) =>
+    a.properties?.disposition === 'list-item-primary' ? -1 : 1,
+  );
+
+  const graphMenuActions = (
+    primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : actionsProp
+  )
+    .flatMap((action) => (Node.isAction(action) ? [action] : []))
+    .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition));
+
+  // Synthetic settings/back action.
+  const settingsActionId = `${item.id}~settings`;
+  const settingsAction = useMemo((): Node.Action | undefined => {
+    if (!alternateTree) {
+      return undefined;
+    }
+    return {
+      id: settingsActionId,
+      type: Node.ActionType,
+      data: () => Effect.void,
+      properties: {
+        label: isAlternate ? ['button back', { ns: meta.id }] : (alternateTree.properties.label ?? alternateTree.id),
+        icon: isAlternate
+          ? 'ph--arrow-u-down-left--regular'
+          : (alternateTree.properties.icon ?? 'ph--placeholder--regular'),
+        disposition: 'list-item',
+        testId: isAlternate ? 'navtree.backToSpace' : 'navtree.spaceSettings',
+      },
+    } as Node.Action;
+  }, [alternateTree, isAlternate, settingsActionId, t]);
+
+  const menuActions = useMemo(
+    () => [...graphMenuActions, ...(settingsAction ? [settingsAction] : [])],
+    [graphMenuActions, settingsAction],
+  );
+
+  const onAction = useCallback(
+    (action: Node.Action, params?: Node.InvokeProps) => {
+      if (action.id === settingsActionId) {
+        if (alternateTree && !isAlternate) {
+          Graph.expand(graph, alternateTree.id, 'child');
+        }
+        setAlternateTree?.(alternatePath, !isAlternate);
+      } else {
+        void runAction(action, { ...params, path });
+      }
+    },
+    [settingsActionId, setAlternateTree, alternatePath, isAlternate, runAction, graph, alternateTree, path],
+  );
+
+  return { primaryAction, groupedActions, menuActions, onAction };
+};
+
+/** Finds the first child with disposition 'alternate-tree' using graph connections directly. */
+const useAlternateTreeItem = (item: Node.Node): Node.Node | undefined => {
+  const { graph } = useAppGraph();
+  const connections = useConnections(graph, item.id, 'child');
+  return connections.find((node) => node.properties.disposition === 'alternate-tree');
+};
+
+export const L1Panel = memo(L1Panel$);

package/src/components/Sidebar/L1Tabs.tsx

@@ -10,7 +10,8 @@ import { l0ItemType } from '../../util';
 
 import { L1Panel, type L1PanelProps } from './L1Panel';
 
-export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
+export type L1TabsProps = Pick<L1PanelProps, 'open' | 'onBack'> & {
+  currentItemId: string;
   path: string[];
   topLevelItems: Node.Node[];
 };
@@ -18,13 +19,22 @@ export type L1TabsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'
 /**
  * Each workspace is an L1 tab.
  */
-export const L1Tabs = ({ topLevelItems, onBack, ...props }: L1TabsProps) => {
+export const L1Tabs = ({ topLevelItems, currentItemId, onBack, open, path }: L1TabsProps) => {
   return (
     <>
       {topLevelItems.map((item) => {
         const type = l0ItemType(item);
         if (type === 'tab') {
-          return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
+          return (
+            <L1Panel
+              key={item.id}
+              item={item}
+              path={path}
+              open={open}
+              onBack={onBack}
+              isCurrent={item.id === currentItemId}
+            />
+          );
         }
         return null;
       })}

package/src/components/UserAccountAvatar/UserAccountAvatar.stories.tsx

@@ -9,9 +9,8 @@ import { withTheme } from '@dxos/react-ui/testing';
 import { UserAccountAvatar } from './UserAccountAvatar';
 
 const meta = {
-  title: 'plugins/plugin-navtree/UserAccountAvatar',
-
-  decorators: [withTheme],
+  title: 'plugins/plugin-navtree/components/UserAccountAvatar',
+  decorators: [withTheme()],
   component: UserAccountAvatar,
 } satisfies Meta<typeof UserAccountAvatar>;
 

package/src/components/UserAccountAvatar/UserAccountAvatar.tsx

@@ -22,7 +22,7 @@ export const UserAccountAvatar = ({ size, userId, hue, emoji, status }: UserAcco
 
   return (
     <>
-      <L0ItemActiveTabIndicator classNames='inset-block-6' />
+      <L0ItemActiveTabIndicator classNames='inset-y-6' />
       <div
         className='grid place-items-center dx-focus-ring-group-indicator rounded-full'
         data-joyride='welcome/account'

package/src/components/index.ts

@@ -2,10 +2,7 @@
 // Copyright 2023 DXOS.org
 //
 
-export * from './CommandsDialog';
 export * from './NavTree';
-export * from './NavTreeContainer';
 export * from './NavTreeContext';
-export * from './NavTreeDocumentTitle';
 
 export type * from './types';

package/src/components/types.ts

@@ -6,28 +6,23 @@ import type { FC } from 'react';
 
 import { type Node } from '@dxos/app-graph';
 import type { Density } from '@dxos/react-ui';
-import type { TreeProps } from '@dxos/react-ui-list';
-import type { MaybePromise } from '@dxos/util';
+import type { TreeModel, TreeProps } from '@dxos/react-ui-list';
 
-import type { FlattenedActions, NavTreeItemGraphNode } from '../types';
+import type { NavTreeItemGraphNode } from '../types';
 
 import type { L1PanelProps } from './Sidebar';
 
-export type NavTreeContextValue = Pick<
-  TreeProps<NavTreeItemGraphNode, { disposition?: string; sort?: boolean }>,
-  'useItems' | 'getProps' | 'useIsCurrent' | 'useIsOpen' | 'blockInstruction' | 'canDrop' | 'onOpenChange' | 'onSelect'
+export type NavTreeContextValue = {
+  model: TreeModel<NavTreeItemGraphNode>;
+  popoverAnchorId?: string;
+  renderItemEnd?: FC<{ node: Node.Node; open: boolean }>;
+  setAlternateTree?: (path: string[], open: boolean) => void;
+  onTabChange?: (node: NavTreeItemGraphNode) => void;
+} & Pick<
+  TreeProps<NavTreeItemGraphNode>,
+  'blockInstruction' | 'canDrop' | 'canSelect' | 'onOpenChange' | 'onSelect' | 'onItemHover'
 > &
-  Pick<L1PanelProps, 'onBack'> & {
-    tab: string;
-    topbar?: boolean;
-    popoverAnchorId?: string;
-    renderItemEnd?: FC<{ node: Node.Node; open: boolean }>;
-    useActions: (node: Node.Node) => FlattenedActions;
-    loadDescendents?: (node: Node.Node) => MaybePromise<void>;
-    useIsAlternateTree?: (path: string[], item: NavTreeItemGraphNode) => boolean;
-    setAlternateTree?: (path: string[], open: boolean) => void;
-    onTabChange?: (node: NavTreeItemGraphNode) => void;
-  };
+  Pick<L1PanelProps, 'onBack'>;
 
 export type NavTreeItemColumnsProps = {
   path: string[];

package/src/{components/CommandsDialog/CommandsDialog.tsx → containers/CommandsDialogContent/CommandsDialogContent.tsx}

@@ -4,8 +4,9 @@
 
 import React, { forwardRef, useMemo, useState } from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useAppGraph, useOperationInvoker } from '@dxos/app-framework/react';
+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';
@@ -37,6 +38,7 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
       const actionMap = new Set<string>();
       const actions: Node.ActionLike[] = [];
       Graph.traverse(graph, {
+        relation: ['child', 'action'],
         visitor: (node, path) => {
           if (
             (Node.isAction(node) || Node.isActionGroup(node)) &&
@@ -69,11 +71,11 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
 
     return (
       <Dialog.Content ref={forwardedRef}>
-        <Dialog.Title>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
-        <SearchList.Root onSearch={handleSearch}>
-          <div aria-label={t('command list input placeholder')} role='combobox' aria-expanded='true'>
-            <SearchList.Input placeholder={t('command list input placeholder')} />
+        <Dialog.Title srOnly>{t('commands dialog title', { ns: meta.id })}</Dialog.Title>
+        <Dialog.Body>
+          <SearchList.Root onSearch={handleSearch}>
             <SearchList.Content>
+              <SearchList.Input placeholder={t('command list input placeholder')} />
               <SearchList.Viewport>
                 {results.map((action) => {
                   const shortcut =
@@ -98,9 +100,13 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
                           return;
                         }
 
-                        invokeSync(Common.LayoutOperation.UpdateDialog, { state: false });
+                        invokeSync(LayoutOperation.UpdateDialog, { state: false });
                         setTimeout(() => {
-                          const node = Graph.getConnections(graph, group?.id ?? action.id, 'inbound')[0];
+                          const node = Graph.getConnections(
+                            graph,
+                            group?.id ?? action.id,
+                            Node.childRelation('inbound'),
+                          )[0];
                           if (node && Node.isAction(action)) {
                             void runAction(action, { parent: node, caller: KEY_BINDING });
                           }
@@ -116,13 +122,13 @@ export const CommandsDialogContent = forwardRef<HTMLDivElement, CommandsDialogCo
                 })}
               </SearchList.Viewport>
             </SearchList.Content>
-          </div>
-        </SearchList.Root>
-        <div role='none' className='pli-cardSpacingInline pbe-cardSpacingBlock'>
+          </SearchList.Root>
+        </Dialog.Body>
+        <Dialog.ActionBar>
           <Dialog.Close asChild>
-            <Button classNames='is-full'>{t('close label', { ns: osTranslations })}</Button>
+            <Button classNames='w-full'>{t('close label', { ns: osTranslations })}</Button>
           </Dialog.Close>
-        </div>
+        </Dialog.ActionBar>
       </Dialog.Content>
     );
   },

package/src/containers/CommandsDialogContent/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { CommandsDialogContent } from './CommandsDialogContent';
+
+export default CommandsDialogContent;

package/src/{components/CommandsDialog → containers/CommandsTrigger}/CommandsTrigger.tsx

@@ -4,8 +4,8 @@
 
 import React from 'react';
 
-import { Common } from '@dxos/app-framework';
-import { useOperationInvoker } 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';
@@ -16,8 +16,8 @@ export const CommandsTrigger = () => {
   const { t } = useTranslation(meta.id);
   return (
     <Button
-      classNames='m-1 pli-1 lg:pli-2'
-      onClick={() => invokeSync(Common.LayoutOperation.UpdateDialog, { subject: COMMANDS_DIALOG, blockAlign: 'start' })}
+      classNames='m-1 px-1 lg:px-2'
+      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/containers/CommandsTrigger/index.ts

@@ -0,0 +1,7 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { CommandsTrigger } from './CommandsTrigger';
+
+export default CommandsTrigger;