@dxos/plugin-navtree 0.8.4-main.d05673bc65 → 0.8.4-main.d9fc60f731

package/src/components/NavTree/NavTree.tsx

@@ -9,7 +9,8 @@ import { Node, useConnections, useActions as useGraphActions } from '@dxos/plugi
 import { Tabs } from '@dxos/react-ui-tabs';
 import { byPosition } from '@dxos/util';
 
-import { useLoadDescendents } from '../../hooks';
+import { useLoadDescendents } from '#hooks';
+
 import { useNavTreeContext } from '../NavTreeContext';
 import { L0Menu, L1Tabs, type L1TabsProps } from '../Sidebar';
 
@@ -30,7 +31,7 @@ export const NavTree = forwardRef<HTMLDivElement, NavTreeProps>(({ id, root, tab
     //  it uses RovingFocus and doesn't support moving focus to an item that is not a tab. Assess whether this situation
     //  should change including whether it should motivate a change in the design/taxonomy, or if this means this should
     //  not use `react-ui-tabs` at all.
-    <Tabs.Root value={tab} orientation='vertical' verticalVariant='stateless' classNames='relative' ref={forwardedRef}>
+    <Tabs.Root value={tab} orientation='vertical' classNames='relative' ref={forwardedRef}>
       <L0Menu
         menuActions={topLevelActions}
         topLevelItems={l0Items}
@@ -81,10 +82,10 @@ const useTopLevelNavItems = (root?: Node.Node) => {
     ].toSorted((a, b) => byPosition(a.properties, b.properties));
 
     return {
-      topLevelActions,
-      l0Items: topLevelWorkspaces,
       pinnedItems,
+      topLevelActions,
       userAccountItem,
+      l0Items: topLevelWorkspaces,
     };
   }, [rootActions, rootOutboundItems]);
 

package/src/components/NavTreeItem/NavTreeItemAction.stories.tsx

@@ -5,37 +5,36 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Effect from 'effect/Effect';
 
-import { RuntimePlugin } from '@dxos/app-framework';
+import { ProcessManagerPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { type Node } from '@dxos/app-graph';
 import { corePlugins } from '@dxos/plugin-testing';
-import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/react-ui/testing';
+import { random } from '@dxos/random';
 
 import { NavTreeItemAction, type NavTreeItemActionMenuProps } from './NavTreeItemAction';
 
 const parent = {
-  id: faker.string.uuid(),
+  id: random.string.uuid(),
   type: 'node',
   data: null,
   properties: {
-    label: faker.lorem.words(2),
+    label: random.lorem.words(2),
     icon: 'ph--circle--regular',
   },
 } satisfies Node.NodeArg<any>;
 
 // TODO(burdon): Factor out across tests.
-const menuActions = faker.helpers.multiple(
+const menuActions = random.helpers.multiple(
   () =>
     ({
-      id: faker.string.uuid(),
+      id: random.string.uuid(),
       type: 'action',
       data: () =>
         Effect.sync(() => {
           console.log('invoke');
         }),
       properties: {
-        label: faker.lorem.words(2),
+        label: random.lorem.words(2),
         icon: 'ph--circle--regular',
       },
     }) satisfies Node.NodeArg<any>,
@@ -52,9 +51,8 @@ const meta = {
     label: 'Select action',
   } satisfies Partial<NavTreeItemActionMenuProps>,
   decorators: [
-    withTheme(),
     withPluginManager({
-      plugins: [...corePlugins(), RuntimePlugin()],
+      plugins: [...corePlugins(), ProcessManagerPlugin()],
     }),
   ],
   parameters: {

package/src/components/NavTreeItem/NavTreeItemAction.tsx

@@ -7,11 +7,24 @@ import React, { useCallback } from 'react';
 import { type Node } from '@dxos/app-graph';
 import { useActionRunner } from '@dxos/plugin-graph';
 import { IconButton, toLocalizedString, useDensityContext, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/react-ui';
 import { Menu, type MenuItem } from '@dxos/react-ui-menu';
 import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { meta } from '../../meta';
-import { type ActionProperties } from '../../types';
+import { meta } from '#meta';
+import { type ActionProperties } from '#types';
+
+const fallbackIcon = 'ph--circle-dashed--regular';
+
+const mdActionButtonProps = {
+  size: 4 as const,
+  density: 'md' as const,
+};
+
+const lgActionButtonProps = {
+  size: 5 as const,
+  density: 'lg' as const,
+};
 
 export type NavTreeItemActionMenuProps = ActionProperties & {
   parent: Node.Node;
@@ -21,51 +34,38 @@ export type NavTreeItemActionMenuProps = ActionProperties & {
   menuActions?: Node.Action[];
 };
 
-const fallbackIcon = 'ph--placeholder--regular';
+export const NavTreeItemActionDropdownMenu = composable<HTMLButtonElement, NavTreeItemActionMenuProps>(
+  ({ parent, path, label, icon, testId, menuActions, caller, ...props }, forwardedRef) => {
+    const { t } = useTranslation(meta.id);
+    const density = useDensityContext();
+    const runAction = useActionRunner();
+    const handleAction = useCallback(
+      (action: Node.Action, params: Node.InvokeProps = {}) => runAction(action, { ...params, path }),
+      [runAction, path],
+    );
 
-const fineActionButtonProps = {
-  size: 4 as const,
-  density: 'fine' as const,
-};
-const coarseActionButtonProps = {
-  size: 5 as const,
-  density: 'coarse' as const,
-};
-
-export const NavTreeItemActionDropdownMenu = ({
-  parent,
-  path,
-  label,
-  icon,
-  testId,
-  menuActions,
-  caller,
-}: NavTreeItemActionMenuProps) => {
-  const { t } = useTranslation(meta.id);
-  const density = useDensityContext();
-  const runAction = useActionRunner();
-  const handleAction = useCallback(
-    (action: Node.Action, params: Node.InvokeProps = {}) => runAction(action, { ...params, path }),
-    [runAction, path],
-  );
+    return (
+      <Menu.Root caller={caller} onAction={handleAction}>
+        <Menu.Trigger asChild>
+          <IconButton
+            {...(density === 'lg' ? lgActionButtonProps : mdActionButtonProps)}
+            {...composableProps(props)}
+            classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
+            variant='ghost'
+            icon={icon ?? fallbackIcon}
+            iconOnly
+            label={toLocalizedString(label, t)}
+            data-testid={testId}
+            ref={forwardedRef}
+          />
+        </Menu.Trigger>
+        <Menu.Content group={parent} items={menuActions as MenuItem[]} />
+      </Menu.Root>
+    );
+  },
+);
 
-  return (
-    <Menu.Root caller={caller} onAction={handleAction}>
-      <Menu.Trigger asChild>
-        <IconButton
-          {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
-          classNames={['shrink-0 px-2 pointer-fine:px-1', hoverableControlItem, hoverableOpenControlItem]}
-          variant='ghost'
-          icon={icon ?? fallbackIcon}
-          iconOnly
-          label={toLocalizedString(label, t)}
-          data-testid={testId}
-        />
-      </Menu.Trigger>
-      <Menu.Content group={parent} items={menuActions as MenuItem[]} />
-    </Menu.Root>
-  );
-};
+NavTreeItemActionDropdownMenu.displayName = 'NavTreeItemActionDropdownMenu';
 
 export const NavTreeItemMonolithicAction = (
   props: Node.Action & {
@@ -85,7 +85,7 @@ export const NavTreeItemMonolithicAction = (
   const runAction = useActionRunner();
   return (
     <IconButton
-      {...(density === 'coarse' ? coarseActionButtonProps : fineActionButtonProps)}
+      {...(density === 'lg' ? lgActionButtonProps : mdActionButtonProps)}
       variant={variant}
       classNames={[
         'shrink-0',
@@ -113,7 +113,8 @@ export const NavTreeItemMonolithicAction = (
 export const NavTreeItemAction = ({
   monolithic,
   menuActions,
-  parent: node,
+  menuType,
+  parent,
   path,
   ...props
 }: NavTreeItemActionMenuProps) => {
@@ -121,10 +122,9 @@ export const NavTreeItemAction = ({
 
   const monolithicAction = menuActions?.length === 1 && menuActions[0];
   const baseLabel = toLocalizedString(monolithicAction ? monolithicAction.properties!.label : props.label, t);
-
   return monolithic && menuActions?.length === 1 ? (
-    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={node} path={path} {...menuActions[0]} />
+    <NavTreeItemMonolithicAction baseLabel={baseLabel} parent={parent} path={path} {...menuActions[0]} />
   ) : (
-    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={node} path={path} menuActions={menuActions} />
+    <NavTreeItemActionDropdownMenu {...props} label={baseLabel} parent={parent} path={path} menuActions={menuActions} />
   );
 };

package/src/components/NavTreeItem/NavTreeItemColumns.tsx

@@ -4,90 +4,47 @@
 
 import React, { Fragment, memo, useMemo } from 'react';
 
-import { Node } from '@dxos/app-graph';
 import { Popover, Treegrid, toLocalizedString, useTranslation } from '@dxos/react-ui';
 
-import { useActions } from '../../hooks';
-import { meta } from '../../meta';
+import { getListActions, useActions } from '#hooks';
+import { meta } from '#meta';
+
 import { NAV_TREE_ITEM } from '../NavTree';
 import { useNavTreeContext } from '../NavTreeContext';
 import { type NavTreeItemColumnsProps } from '../types';
-
-import { NavTreeItemAction } from './NavTreeItemAction';
+import { NavTreeItemActionDropdownMenu, NavTreeItemMonolithicAction } from './NavTreeItemAction';
 
 export const NavTreeItemColumns = memo(({ path, item, open }: NavTreeItemColumnsProps) => {
   const { t } = useTranslation(meta.id);
   const { renderItemEnd: ItemEnd, popoverAnchorId } = useNavTreeContext();
 
   const level = path.length - 2;
-  const { actions: actionsProp, groupedActions } = useActions(item);
-  const sortedActions = useMemo(
-    () =>
-      actionsProp.toSorted((actionA, actionB) => {
-        const primaryA = actionA.properties?.disposition === 'list-item-primary';
-        const primaryB = actionB.properties?.disposition === 'list-item-primary';
-        if (primaryA && !primaryB) {
-          return -1;
-        }
-        if (primaryB && !primaryA) {
-          return 1;
-        }
-        return 0;
-      }),
-    [actionsProp],
-  );
-  const [primaryAction, ...secondaryActions] = sortedActions;
-
-  const actions = useMemo(
-    () =>
-      (primaryAction?.properties?.disposition === 'list-item-primary' ? secondaryActions : sortedActions)
-        .flatMap((action) => (Node.isAction(action) ? [action] : []))
-        .filter((a) => ['list-item', 'list-item-primary'].includes(a.properties?.disposition)),
-    [sortedActions, primaryAction],
-  );
-
-  const primaryMenuActions = useMemo(
-    () =>
-      primaryAction
-        ? Node.isAction(primaryAction)
-          ? [primaryAction]
-          : groupedActions[primaryAction?.id ?? '']
-        : undefined,
-    [primaryAction, groupedActions],
-  );
+  const flattenedActions = useActions(item);
+  const allActions = useMemo(() => getListActions(flattenedActions), [flattenedActions]);
 
   const ActionRoot = popoverAnchorId === `${NAV_TREE_ITEM}:${item.id}` ? Popover.Anchor : Fragment;
 
   return (
-    <div role='none' className='contents dx-app-no-drag'>
-      {primaryAction?.properties?.disposition === 'list-item-primary' && !primaryAction?.properties?.disabled ? (
-        <Treegrid.Cell classNames='contents'>
-          <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={primaryMenuActions}
-            menuType={primaryAction.properties?.menuType}
-            caller={NAV_TREE_ITEM}
-          />
-        </Treegrid.Cell>
-      ) : (
-        <Treegrid.Cell role='none' />
-      )}
+    <div className='contents dx-app-no-drag'>
       <ActionRoot>
-        {actions.length > 0 ? (
+        {allActions.length === 1 ? (
+          <Treegrid.Cell classNames='contents'>
+            <NavTreeItemMonolithicAction
+              baseLabel={toLocalizedString(allActions[0].properties?.label, t)}
+              parent={item}
+              path={path}
+              {...allActions[0]}
+            />
+          </Treegrid.Cell>
+        ) : allActions.length > 1 ? (
           <Treegrid.Cell classNames='contents'>
-            <NavTreeItemAction
+            <NavTreeItemActionDropdownMenu
               testId={`navtree.treeItem.actionsLevel${level}`}
-              label={t('tree item actions label')}
+              label={t('tree-item-actions.label')}
               icon='ph--dots-three-vertical--regular'
               parent={item}
               path={path}
-              menuActions={actions}
-              menuType='dropdown'
+              menuActions={allActions}
               caller={NAV_TREE_ITEM}
             />
           </Treegrid.Cell>

package/src/components/Sidebar/L0Menu.tsx

@@ -2,15 +2,15 @@
 // Copyright 2025 DXOS.org
 //
 
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
-import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
 import {
   type Edge,
   attachClosestEdge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { preserveOffsetOnSource } from '@atlaskit/pragmatic-drag-and-drop/element/preserve-offset-on-source';
+import { scrollJustEnoughIntoView } from '@atlaskit/pragmatic-drag-and-drop/element/scroll-just-enough-into-view';
 import { useAtomValue } from '@effect-atom/atom-react';
 import React, {
   type MouseEvent,
@@ -29,6 +29,7 @@ import { DxAvatar } from '@dxos/lit-ui/react';
 import { useActionRunner } from '@dxos/plugin-graph';
 import {
   Icon,
+  IconButton,
   ListItem,
   ScrollArea,
   type ThemedClassName,
@@ -43,8 +44,9 @@ import { Tabs } from '@dxos/react-ui-tabs';
 import { mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
-import { useNavTreeState } from '../../hooks';
-import { meta } from '../../meta';
+import { useNavTreeState } from '#hooks';
+import { meta } from '#meta';
+
 import { l0ItemType } from '../../util';
 import { useNavTreeContext } from '../NavTreeContext';
 import { UserAccountAvatar } from '../UserAccountAvatar';
@@ -87,10 +89,8 @@ const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
           const { properties: { caller } = {} } = item;
           return void runAction(item as Node.Action, caller ? { parent, path, caller } : { parent, path });
         }
-
         case 'tab':
           return onTabChange?.(item);
-
         case 'link':
           return onSelect?.({ item, path, current: !getItem(path).current, option: event.altKey });
       }
@@ -103,36 +103,34 @@ const l0Breakpoints: Record<string, string> = {
   lg: 'hidden lg:grid',
 };
 
-const l0ItemRoot =
-  'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer dx-app-no-drag dx-focus-ring-group';
-
-const l0ItemContent = 'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm';
-
 const L0ItemRoot = memo(
-  forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
+  forwardRef<HTMLButtonElement, PropsWithChildren<L0ItemRootProps>>(
     ({ item, parent, path, onMouseEnter, children }, forwardedRef) => {
+      const { t } = useTranslation(meta.id);
       const { model } = useNavTreeContext();
       const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
       const { id, testId } = useAtomValue(model.itemProps(itemPath));
-      const type = l0ItemType(item);
-
-      const { t } = useTranslation(meta.id);
       const localizedString = toLocalizedString(item.properties.label, t);
 
+      const type = l0ItemType(item);
       const handleClick = useL0ItemClick({ item, parent, path: itemPath }, type);
-      const rootProps =
-        type === 'tab'
-          ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-object-id': id }
-          : { onClick: handleClick, 'data-testid': testId, 'data-object-id': id };
 
       return (
         <Tooltip.Trigger asChild delayDuration={0} side='right' content={localizedString}>
           <Tabs.TabPrimitive
-            {...(rootProps as any)}
+            className={mx(
+              'group/l0item flex w-full justify-center items-center relative',
+              'dx-app-no-drag dx-focus-ring-group data[type!="collection"]:cursor-pointer',
+              l0Breakpoints[item.properties.l0Breakpoint],
+            )}
+            tabIndex={type === 'tab' ? 0 : undefined}
             data-type={type}
-            className={mx(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint])}
-            ref={forwardedRef}
+            data-testid={testId}
+            data-object-id={id}
+            value={item.id}
+            onClick={handleClick}
             onMouseEnter={onMouseEnter}
+            ref={forwardedRef}
           >
             {children}
           </Tabs.TabPrimitive>
@@ -144,9 +142,8 @@ const L0ItemRoot = memo(
 
 export const L0ItemActiveTabIndicator = ({ classNames }: ThemedClassName<{}>) => (
   <div
-    role='none'
     className={mx(
-      'hidden group-aria-selected/l0item:block absolute start-0 inset-y-2 w-1 bg-accent-surface rounded-ie',
+      'hidden group-aria-selected/l0item:block absolute start-0 h-6 w-1.5 bg-accent-bg rounded-sm',
       classNames,
     )}
   />
@@ -155,13 +152,12 @@ export const L0ItemActiveTabIndicator = ({ classNames }: ThemedClassName<{}>) =>
 // TODO(burdon): Factor out pinned (non-draggable) items.
 const L0Item = memo(({ item, parent, path, pinned, onRearrange, onItemHover }: L0ItemProps) => {
   const { t } = useTranslation(meta.id);
-  const itemElement = useRef<HTMLElement | null>(null);
+  const itemElement = useRef<HTMLButtonElement | null>(null);
   const [closestEdge, setEdge] = useState<Edge | null>(null);
   const localizedString = toLocalizedString(item.properties.label, t);
   const hue = item.properties.hue ?? null;
 
   useLayoutEffect(() => {
-    // NOTE(thure): This is copied from StackItem, perhaps this should be DRYed out.
     if (!itemElement.current || !onRearrange) {
       return;
     }
@@ -221,14 +217,13 @@ const L0Item = memo(({ item, parent, path, pinned, onRearrange, onItemHover }: L
   return (
     <L0ItemRoot ref={itemElement} item={item} parent={parent} path={path} onMouseEnter={handleMouseEnter}>
       <div
-        role='none'
         data-frame={true}
         {...(hue && { style: { background: `var(--color-${hue}-surface)` } })}
         className={mx(
-          l0ItemContent,
+          'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm',
           pinned
-            ? 'p-2 group-hover/l0item:bg-active-surface'
-            : 'w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-active-surface',
+            ? 'p-2 group-hover/l0item:bg-current-surface'
+            : 'w-(--dx-l0-avatar-size) h-(--dx-l0-avatar-size) bg-current-surface',
         )}
       >
         <ItemAvatar item={item} />
@@ -244,13 +239,15 @@ const L0Item = memo(({ item, parent, path, pinned, onRearrange, onItemHover }: L
 
 const ItemAvatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
   const { t } = useTranslation(meta.id);
-  const type = l0ItemType(item);
+
+  // Actions.
   if (item.properties.icon) {
     const hue = item.properties.hue ?? null;
-    const hueFgStyle = hue && { style: { color: `var(--color-${hue}-surface-text)` } };
+    const hueFgStyle = hue && { style: { color: `var(--color-${hue}-fg)` } };
     return <Icon icon={item.properties.icon} size={6} {...hueFgStyle} />;
   }
 
+  const type = l0ItemType(item);
   if (type === 'tab' && item.properties.disposition !== 'pin-end') {
     const hue = item.properties.hue ?? null;
     const localizedString = toLocalizedString(item.properties.label, t);
@@ -317,74 +314,58 @@ export const L0Menu = ({
 
   return (
     <Tabs.Tablist
+      data-tauri-drag-region
       classNames={[
         'group/l0 absolute z-[1] inset-y-0 start-0 rounded-is',
         'grid grid-cols-[var(--dx-l0-size)] grid-rows-[var(--dx-rail-size)_1fr_min-content_var(--dx-l0-size)] dx-contain-layout',
-        '!w-(--dx-l0-size) bg-toolbar-surface border-e border-subdued-separator dx-app-drag pb-[env(safe-area-inset-bottom)]',
+        'w-(--dx-l0-size) bg-l0-surface dx-app-drag pb-[env(safe-area-inset-bottom)]',
+        '[body[data-platform="macos"]_&]:pt-[30px]',
+        '[body[data-platform="ios"]_&]:pt-[max(env(safe-area-inset-top),0.25rem)]',
       ]}
     >
       {/* TODO(wittjosiah): Use L0Item trigger. */}
       <Menu.Root onAction={handleAction}>
-        <Menu.Trigger
-          asChild
-          data-testid='spacePlugin.addSpace'
-          className={mx(
-            l0ItemRoot,
-            'grid place-items-center dx-focus-ring-group',
-            '[body[data-platform="macos"]_&]:mt-[30px]',
-          )}
-        >
-          <Tooltip.Trigger content={t('app menu label')} side='right' asChild>
-            <Tabs.TabPrimitive value='options' asChild role='button'>
-              <div
-                role='none'
-                className={mx(
-                  l0ItemContent,
-                  'h-(--dx-rail-action) w-(--dx-rail-action) group-hover/l0item:bg-hover-surface',
-                )}
-              >
-                <Icon icon='ph--list--regular' size={5} />
-              </div>
-            </Tabs.TabPrimitive>
-          </Tooltip.Trigger>
+        <Menu.Trigger asChild data-testid='spacePlugin.addSpace'>
+          <div className='grid place-items-center'>
+            <IconButton
+              density='lg'
+              variant='ghost'
+              size={5}
+              icon='ph--list--regular'
+              iconOnly
+              square
+              label={t('app-menu.label')}
+            />
+          </div>
         </Menu.Trigger>
         <Menu.Content group={parent} items={menuActions} />
       </Menu.Root>
 
       {/* Space list. */}
-      <ScrollArea.Root thin orientation='vertical'>
-        <ScrollArea.Viewport>
-          <div
-            role='none'
-            className={mx([
-              'flex flex-col gap-1 pt-1',
-              '[body[data-platform="macos"]_&]:py-[30px]',
-              '[body[data-platform="ios"]_&]:py-[max(env(safe-area-inset-top),0.25rem)]',
-            ])}
-          >
-            {topLevelItems.map((item) => (
-              <L0Item
-                key={item.id}
-                item={item}
-                parent={parent}
-                path={path}
-                onItemHover={onItemHover}
-                {...(hasRearrangeableItems && { onRearrange: handleRearrange })}
-              />
-            ))}
-          </div>
+      <ScrollArea.Root centered thin orientation='vertical'>
+        <ScrollArea.Viewport classNames='flex flex-col gap-2 py-1'>
+          {topLevelItems.map((item) => (
+            <L0Item
+              key={item.id}
+              item={item}
+              parent={parent}
+              path={path}
+              onItemHover={onItemHover}
+              {...(hasRearrangeableItems && { onRearrange: handleRearrange })}
+            />
+          ))}
         </ScrollArea.Viewport>
       </ScrollArea.Root>
 
       {/* Actions. */}
-      <div role='none' className='grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2'>
+      <div className='grid grid-cols-1 auto-rows-(--dx-rail-action) pt-2'>
         {pinnedItems.map((item) => (
           <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
         ))}
       </div>
 
       {userAccountItem && (
-        <div role='none' className='grid dx-app-no-drag'>
+        <div className='grid dx-app-no-drag'>
           <L0ItemRoot key={userAccountItem.id} item={userAccountItem} parent={parent} path={path}>
             <UserAccountAvatar
               userId={userAccountItem.properties.userId}