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

package/src/components/Sidebar/L0Menu.tsx

@@ -12,9 +12,9 @@ import {
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import React, {
-  forwardRef,
   type MouseEvent,
   type PropsWithChildren,
+  forwardRef,
   useCallback,
   useLayoutEffect,
   useMemo,
@@ -23,16 +23,26 @@ import React, {
 } from 'react';
 
 import { type Node } from '@dxos/app-graph';
-import { invariant } from '@dxos/invariant';
-import { Icon, ListItem, ScrollArea, Tooltip, toLocalizedString, useMediaQuery, useTranslation } from '@dxos/react-ui';
-import { MenuProvider, DropdownMenu, type MenuItem } from '@dxos/react-ui-menu';
+import { DxAvatar } from '@dxos/lit-ui/react';
+import { useActionRunner } from '@dxos/plugin-graph';
+import {
+  Icon,
+  ListItem,
+  ScrollArea,
+  type ThemedClassName,
+  Tooltip,
+  toLocalizedString,
+  useMediaQuery,
+  useTranslation,
+} from '@dxos/react-ui';
+import { DropdownMenu, type MenuItem, MenuProvider } from '@dxos/react-ui-menu';
 import type { StackItemRearrangeHandler } from '@dxos/react-ui-stack';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { mx } from '@dxos/react-ui-theme';
-import { arrayMove, getFirstTwoRenderableChars } from '@dxos/util';
+import { mx } from '@dxos/ui-theme';
+import { arrayMove } from '@dxos/util';
 
-import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
+import { useNavTreeState } from '../../hooks';
+import { meta } from '../../meta';
 import { l0ItemType } from '../../util';
 import { useNavTreeContext } from '../NavTreeContext';
 import { UserAccountAvatar } from '../UserAccountAvatar';
@@ -47,43 +57,41 @@ type L0ItemData = {
 };
 
 type L0ItemRootProps = {
-  item: Node<any>;
-  parent?: Node<any>;
+  item: Node.Node;
+  parent?: Node.Node;
   path: string[];
 };
 
 type L0ItemProps = L0ItemRootProps & {
-  item: Node<any>;
-  parent?: Node<any>;
+  item: Node.Node;
+  parent?: Node.Node;
   path: string[];
   pinned?: boolean;
   onRearrange?: StackItemRearrangeHandler<L0ItemData>;
 };
 
 const useL0ItemClick = ({ item, parent, path }: L0ItemProps, type: string) => {
-  const { tab, isCurrent, onSelect, onTabChange } = useNavTreeContext();
-  const [isLg] = useMediaQuery('lg', { ssr: false });
+  const { tab, onSelect, onTabChange } = useNavTreeContext();
+  const { getItem } = useNavTreeState();
+  const [isLg] = useMediaQuery('lg');
+  const runAction = useActionRunner();
 
   return useCallback(
     (event: MouseEvent) => {
       switch (type) {
         case 'action': {
-          const {
-            data: invoke,
-            properties: { caller },
-          } = item;
-
-          return invoke?.(caller ? { node: parent, caller } : { node: parent });
+          const { properties: { caller } = {} } = item;
+          return void runAction(item as Node.Action, caller ? { parent, caller } : { parent });
         }
 
         case 'tab':
           return onTabChange?.(item);
 
         case 'link':
-          return onSelect?.({ item, path, current: !isCurrent(path, item), option: event.altKey });
+          return onSelect?.({ item, path, current: !getItem(path).current, option: event.altKey });
       }
     },
-    [item, parent, type, tab, isCurrent, onSelect, onTabChange, isLg],
+    [item, parent, type, tab, getItem, onSelect, onTabChange, isLg, runAction],
   );
 };
 
@@ -92,7 +100,7 @@ const l0Breakpoints: Record<string, string> = {
 };
 
 const l0ItemRoot =
-  'group/l0item flex w-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
+  'group/l0item flex is-full justify-center items-center relative data[type!="collection"]:cursor-pointer app-no-drag dx-focus-ring-group';
 
 const l0ItemContent = 'flex justify-center items-center dx-focus-ring-group-indicator transition-colors rounded-sm';
 
@@ -103,55 +111,43 @@ const L0ItemRoot = forwardRef<HTMLElement, PropsWithChildren<L0ItemRootProps>>(
     const type = l0ItemType(item);
     const itemPath = useMemo(() => [...path, item.id], [item.id, path]);
 
-    const { t } = useTranslation(NAVTREE_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const localizedString = toLocalizedString(item.properties.label, t);
 
     const handleClick = useL0ItemClick({ item, parent, path: itemPath }, type);
     const rootProps =
       type === 'tab'
-        ? { value: item.id, tabIndex: 0, onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
-        : type !== 'collection'
-          ? { onClick: handleClick, 'data-testid': testId, 'data-itemid': id }
-          : { onClick: handleClick };
-
-    const Root = type === 'collection' ? 'h2' : type === 'tab' ? Tabs.TabPrimitive : 'button';
+        ? { 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}>
-        <Root
+        <Tabs.TabPrimitive
           {...(rootProps as any)}
           data-type={type}
           className={mx(l0ItemRoot, l0Breakpoints[item.properties.l0Breakpoint])}
           ref={forwardedRef}
         >
           {children}
-        </Root>
+        </Tabs.TabPrimitive>
       </Tooltip.Trigger>
     );
   },
 );
 
-const L0Avatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
-  const type = l0ItemType(item);
-  const hue = item.properties.hue ?? null;
-  const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
-  const localizedString = toLocalizedString(item.properties.label, t);
-  const avatarValue = useMemo(
-    () => (type === 'tab' ? getFirstTwoRenderableChars(localizedString).join('').toUpperCase() : []),
-    [type, item.properties.label, t],
-  );
-
-  return (
-    <span role='img' className='place-self-center text-xl font-light' {...hueFgStyle}>
-      {avatarValue}
-    </span>
-  );
-};
+export const L0ItemActiveTabIndicator = ({ classNames }: ThemedClassName<{}>) => (
+  <div
+    role='none'
+    className={mx(
+      'hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie',
+      classNames,
+    )}
+  />
+);
 
 // TODO(burdon): Factor out pinned (non-draggable) items.
 const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const itemElement = useRef<HTMLElement | null>(null);
   const [closestEdge, setEdge] = useState<Edge | null>(null);
   const localizedString = toLocalizedString(item.properties.label, t);
@@ -228,10 +224,7 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
       >
         <ItemAvatar item={item} />
       </div>
-      <div
-        role='none'
-        className='hidden group-aria-selected/l0item:block absolute inline-start-0 inset-block-2 is-1 bg-accentSurface rounded-ie'
-      />
+      <L0ItemActiveTabIndicator />
       <span id={`${item.id}__label`} className='sr-only'>
         {localizedString}
       </span>
@@ -241,83 +234,68 @@ const L0Item = ({ item, parent, path, pinned, onRearrange }: L0ItemProps) => {
 };
 
 const ItemAvatar = ({ item }: Pick<L0ItemProps, 'item'>) => {
+  const { t } = useTranslation(meta.id);
   const type = l0ItemType(item);
   if (item.properties.icon) {
     const hue = item.properties.hue ?? null;
     const hueFgStyle = hue && { style: { color: `var(--dx-${hue}SurfaceText)` } };
-    return <Icon icon={item.properties.icon} size={5} {...hueFgStyle} />;
+    return <Icon icon={item.properties.icon} size={6} {...hueFgStyle} />;
   }
 
   if (type === 'tab' && item.properties.disposition !== 'pin-end') {
-    return <L0Avatar item={item} />;
+    const hue = item.properties.hue ?? null;
+    const localizedString = toLocalizedString(item.properties.label, t);
+    return <DxAvatar hue={hue} hueVariant='surface' variant='square' size={12} fallback={localizedString} />;
   }
 
   return null;
 };
 
 //
-// L0Collection
+// L0Menu
 //
 
-const L0Collection = ({ item, path }: L0ItemProps) => {
-  const navTreeContext = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = navTreeContext.useItems(item);
-  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
-  const { id, testId } = navTreeContext.getProps?.(item, path) ?? {};
+export type L0MenuProps = {
+  menuActions: MenuItem[];
+  topLevelItems: Node.Node[];
+  pinnedItems: Node.Node[];
+  userAccountItem?: Node.Node;
+  parent?: Node.Node;
+  path: string[];
+};
+
+export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
+  const { t } = useTranslation(meta.id);
+  const runAction = useActionRunner();
+  const handleAction = useCallback(
+    (action: Node.Action, params: Node.InvokeProps) => {
+      void runAction(action, params);
+    },
+    [runAction],
+  );
 
   const handleRearrange = useCallback<StackItemRearrangeHandler<L0ItemData>>(
     (source, target, closestEdge) => {
-      invariant(item.properties.onRearrangeChildren);
-      const sourceIndex = collectionItems.findIndex((i) => i.id === source.id);
-      const targetIndex = collectionItems.findIndex((i) => i.id === target.id);
+      const sourceItem = topLevelItems.find((i) => i.id === source.id);
+      if (!sourceItem?.properties.onRearrange) {
+        return;
+      }
+
+      const sourceIndex = topLevelItems.findIndex((i) => i.id === source.id);
+      const targetIndex = topLevelItems.findIndex((i) => i.id === target.id);
       const insertIndex =
         source.id === target.id
           ? sourceIndex
           : targetIndex +
             (sourceIndex < targetIndex ? (closestEdge === 'top' ? -1 : 0) : closestEdge === 'bottom' ? 1 : 0);
-      const nextOrder = arrayMove([...collectionItems], sourceIndex, insertIndex);
-      return item.properties.onRearrangeChildren(nextOrder);
+      const nextOrder = arrayMove([...topLevelItems], sourceIndex, insertIndex);
+      return sourceItem.properties.onRearrange(nextOrder.map((item) => item.data));
     },
-    [collectionItems, item.properties.onRearrangeChildren],
+    [topLevelItems],
   );
 
-  return (
-    <div
-      role='group'
-      className='contents group/l0c'
-      aria-labelledby={`${item.id}__label`}
-      data-itemid={id}
-      data-testid={testId}
-    >
-      {collectionItems.map((collectionItem) => (
-        <L0Item
-          key={collectionItem.id}
-          item={collectionItem}
-          parent={item}
-          path={groupPath}
-          {...(item.properties.onRearrangeChildren && { onRearrange: handleRearrange })}
-        />
-      ))}
-    </div>
-  );
-};
-
-//
-// L0Menu
-//
-
-export type L0MenuProps = {
-  menuActions: MenuItem[];
-  topLevelItems: Node<any>[];
-  pinnedItems: Node<any>[];
-  userAccountItem?: Node<any>;
-  parent?: Node<any>;
-  path: string[];
-};
-
-export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountItem, parent, path }: L0MenuProps) => {
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+  // Check if any items have onRearrange to enable drag-and-drop.
+  const hasRearrangeableItems = topLevelItems.some((item) => item.properties.onRearrange);
 
   return (
     <Tabs.Tablist
@@ -328,23 +306,29 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
       ]}
     >
       {/* TODO(wittjosiah): Use L0Item trigger. */}
-      <MenuProvider>
+      <MenuProvider onAction={handleAction}>
         <DropdownMenu.Root group={parent} items={menuActions}>
           <Tooltip.Trigger content={t('app menu label')} side='right' asChild>
-            <DropdownMenu.Trigger
-              data-testid='spacePlugin.addSpace'
-              className={mx(l0ItemRoot, 'grid place-items-center')}
-            >
-              <div
-                role='none'
+            <Tabs.TabPrimitive value='options' asChild role='button'>
+              <DropdownMenu.Trigger
+                data-testid='spacePlugin.addSpace'
                 className={mx(
-                  l0ItemContent,
-                  'is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface',
+                  l0ItemRoot,
+                  'grid place-items-center dx-focus-ring-group',
+                  '[body[data-platform="macos"]_&]:mt-[30px]',
                 )}
               >
-                <Icon icon='ph--list--regular' size={5} />
-              </div>
-            </DropdownMenu.Trigger>
+                <div
+                  role='none'
+                  className={mx(
+                    l0ItemContent,
+                    'is-[--rail-action] bs-[--rail-action] group-hover/l0item:bg-hoverSurface',
+                  )}
+                >
+                  <Icon icon='ph--list--regular' size={5} />
+                </div>
+              </DropdownMenu.Trigger>
+            </Tabs.TabPrimitive>
           </Tooltip.Trigger>
         </DropdownMenu.Root>
       </MenuProvider>
@@ -356,17 +340,19 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
             role='none'
             className={mx([
               'flex flex-col gap-1 pbs-1',
-              '[body[data-platform="darwin"]_&]:pbs-[calc(30px+0.25rem)]',
+              '[body[data-platform="macos"]_&]:pbs-[30px]',
               '[body[data-platform="ios"]_&]:pbs-[max(env(safe-area-inset-top),0.25rem)]',
             ])}
           >
-            {topLevelItems.map((item) => {
-              if (l0ItemType(item) === 'collection') {
-                return <L0Collection key={item.id} item={item} parent={parent} path={path} />;
-              } else {
-                return <L0Item key={item.id} item={item} parent={parent} path={path} />;
-              }
-            })}
+            {topLevelItems.map((item) => (
+              <L0Item
+                key={item.id}
+                item={item}
+                parent={parent}
+                path={path}
+                {...(hasRearrangeableItems && { onRearrange: handleRearrange })}
+              />
+            ))}
           </div>
           <ScrollArea.Scrollbar orientation='vertical'>
             <ScrollArea.Thumb />
@@ -376,11 +362,9 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
 
       {/* Actions. */}
       <div role='none' className='grid grid-cols-1 auto-rows-[--rail-action] pbs-2'>
-        {pinnedItems
-          .filter((item) => l0ItemType(item) !== 'collection')
-          .map((item) => (
-            <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
-          ))}
+        {pinnedItems.map((item) => (
+          <L0Item key={item.id} item={item} parent={parent} path={path} pinned />
+        ))}
       </div>
 
       {userAccountItem && (
@@ -396,15 +380,6 @@ export const L0Menu = ({ menuActions, topLevelItems, pinnedItems, userAccountIte
           </L0ItemRoot>
         </div>
       )}
-
-      <div
-        role='none'
-        className='hidden [body[data-platform="darwin"]_&]:block absolute block-start-0 is-[calc(var(--l0-size)-1px)] bs-[calc(40px+0.25rem)]'
-        style={{
-          background:
-            'linear-gradient(to bottom, var(--dx-sidebarSurface) 0%, var(--dx-sidebarSurface) 70%, transparent 100%)',
-        }}
-      />
     </Tabs.Tablist>
   );
 };

package/src/components/Sidebar/L1Panel.tsx

@@ -5,68 +5,45 @@
 import React, { useCallback, useMemo } from 'react';
 
 import { type Node } from '@dxos/app-graph';
-import { Button, type ButtonProps, Icon, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { DensityProvider, IconButton, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tree } from '@dxos/react-ui-list';
 import { Tabs } from '@dxos/react-ui-tabs';
-import { hoverableControlItem, hoverableOpenControlItem, mx } from '@dxos/react-ui-theme';
+import { hoverableControlItem, hoverableOpenControlItem } from '@dxos/ui-theme';
 
-import { useLoadDescendents } from '../../hooks';
-import { NAVTREE_PLUGIN } from '../../meta';
-import { l0ItemType } from '../../util';
+import { useIsAlternateTree } from '../../hooks';
+import { meta } from '../../meta';
 import { useNavTreeContext } from '../NavTreeContext';
 import { NavTreeItemColumns } from '../NavTreeItem';
 
-const headingBackButtonLabel = 'inset-0 min-is-0 truncate flex items-center pis-2';
-
-const TitleButton = ({ title, onClick }: { title: string } & Pick<ButtonProps, 'onClick'>) => {
-  return (
-    <Button
-      variant='ghost'
-      classNames='pli-1 flex-1 group text-start justify-start bs-[--rail-action] font-normal'
-      onClick={onClick}
-    >
-      <Icon icon='ph--caret-left--bold' size={3} />
-      <span className={mx(headingBackButtonLabel)}>{title}</span>
-    </Button>
-  );
-};
-
 export type L1PanelProps = {
   open?: boolean;
-  item: Node<any>;
   path: string[];
+  item: Node.Node;
   currentItemId: string;
   onBack?: () => void;
 };
 
-const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
-  const { isAlternateTree, setAlternateTree, ...navTreeContext } = useNavTreeContext();
-  const { t } = useTranslation(NAVTREE_PLUGIN);
+/**
+ * Space or settings panel.
+ */
+export const L1Panel = ({ open, path, item, currentItemId, onBack }: L1PanelProps) => {
+  const { t } = useTranslation(meta.id);
+  const navTreeContext = useNavTreeContext();
+  const title = toLocalizedString(item.properties.label, t);
 
   // TODO(wittjosiah): Support multiple alternate trees.
-  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
+  const { useItems } = navTreeContext;
+  const alternateTree = useItems(item, { disposition: 'alternate-tree' })[0];
   const alternatePath = useMemo(() => [...path, item.id], [item.id, path]);
-  const handleOpen = useCallback(() => setAlternateTree?.(alternatePath, true), [alternatePath, setAlternateTree]);
-  const isAlternate = isAlternateTree?.(alternatePath, item) ?? false;
+  const isAlternate = useIsAlternateTree(alternatePath, item);
   const useAlternateItems = useCallback(
-    (node?: Node, { disposition }: { disposition?: string } = {}) => {
+    (node?: Node.Node, { disposition }: { disposition?: string } = {}) => {
       // TODO(wittjosiah): Sorting is expensive, limit to necessary items for now.
-      return navTreeContext.useItems(node, { disposition, sort: node?.id === alternateTree.id });
+      return useItems(node, { disposition, sort: node?.id === alternateTree.id });
     },
-    [navTreeContext, alternateTree],
+    [alternateTree, useItems],
   );
 
-  const handleBack = useCallback(() => {
-    if (isAlternate) {
-      setAlternateTree?.(alternatePath, false);
-    } else {
-      onBack?.();
-    }
-  }, [isAlternate, onBack, alternatePath, setAlternateTree]);
-
-  const title = toLocalizedString(item.properties.label, t);
-  const backCapable = item.id.startsWith('!') || isAlternate;
-
   return (
     <Tabs.Tabpanel
       key={item.id}
@@ -79,41 +56,22 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
       ]}
       tabIndex={-1}
       aria-label={title}
-      {...(!open && { inert: 'true' })}
+      {...(!open && { inert: true })}
     >
       {item.id === currentItemId && (
-        <>
-          <h2 className='flex items-center border-be border-subduedSeparator app-drag pli-1 density-coarse'>
-            {backCapable ? (
-              <TitleButton title={title} onClick={handleBack} />
-            ) : (
-              <span className='flex-1 truncate min-is-0 pis-6'>{title}</span>
-            )}
-            {alternateTree && !isAlternate && (
-              <IconButton
-                variant='ghost'
-                classNames={['shrink-0', hoverableControlItem, hoverableOpenControlItem, 'pli-2 pointer-fine:pli-1']}
-                iconOnly
-                size={5}
-                icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
-                label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
-                data-testid='treeView.alternateTreeButton'
-                onClick={handleOpen}
-              />
-            )}
-            <NavTreeItemColumns path={path} item={item} open density='coarse' />
-          </h2>
+        <DensityProvider density='fine'>
+          <L1PanelHeader path={path} item={item} currentItemId={currentItemId} onBack={onBack} />
           <div role='none' className='overflow-y-auto'>
             {isAlternate ? (
               <Tree
                 {...navTreeContext}
-                useItems={useAlternateItems}
                 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
@@ -122,53 +80,72 @@ const L1Panel = ({ open, item, path, currentItemId, onBack }: L1PanelProps) => {
                 root={item}
                 path={path}
                 levelOffset={5}
-                draggable
                 gridTemplateColumns='[tree-row-start] 1fr min-content min-content min-content [tree-row-end]'
                 renderColumns={NavTreeItemColumns}
+                draggable
               />
             )}
           </div>
-        </>
+        </DensityProvider>
       )}
     </Tabs.Tabpanel>
   );
 };
 
-const L1PanelCollection = ({ item, path, ...props }: L1PanelProps) => {
-  const { useItems } = useNavTreeContext();
-  useLoadDescendents(item);
-  const collectionItems = useItems(item);
-  const groupPath = useMemo(() => [...path, item.id], [item.id, path]);
-  return (
-    <>
-      {collectionItems
-        .filter((item) => l0ItemType(item) === 'tab')
-        .map((item) => (
-          <L1Panel key={item.id} item={item} path={groupPath} {...props} />
-        ))}
-    </>
-  );
-};
+/**
+ * Header row.
+ */
+const L1PanelHeader = ({ item, path, onBack }: L1PanelProps) => {
+  const { t } = useTranslation(meta.id);
+  const { setAlternateTree, ...navTreeContext } = useNavTreeContext();
+  const title = toLocalizedString(item.properties.label, t);
 
-export type L1PanelsProps = Pick<L1PanelProps, 'open' | 'currentItemId' | 'onBack'> & {
-  topLevelItems: Node<any>[];
-  path: string[];
-};
+  // TODO(wittjosiah): Support multiple alternate trees.
+  const alternateTree = navTreeContext.useItems(item, { disposition: 'alternate-tree' })[0];
+  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]);
 
-export const L1Panels = ({ topLevelItems, onBack, ...props }: L1PanelsProps) => {
+  const handleBack = useCallback(() => {
+    if (isAlternate) {
+      setAlternateTree?.(alternatePath, false);
+    } else {
+      onBack?.();
+    }
+  }, [isAlternate, alternatePath, setAlternateTree, onBack]);
+
+  // TODO(burdon): Reuse same grid as tree?
   return (
-    <>
-      {topLevelItems.map((item) => {
-        const type = l0ItemType(item);
-        switch (type) {
-          case 'collection':
-            return <L1PanelCollection key={item.id} item={item} {...props} />;
-          case 'tab':
-            return <L1Panel key={item.id} item={item} {...props} onBack={onBack} />;
-          default:
-            return null;
-        }
-      })}
-    </>
+    <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 && (
+        <IconButton
+          data-testid='treeView.primaryTreeButton'
+          variant='ghost'
+          icon='ph--arrow-u-down-left--regular'
+          iconOnly
+          label={t('button back')}
+          classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+          onClick={handleBack}
+        />
+      )) ||
+        (alternateTree && !isAlternate && (
+          <IconButton
+            data-testid='treeView.alternateTreeButton'
+            variant='ghost'
+            icon={alternateTree.properties.icon ?? 'ph--placeholder--regular'}
+            iconOnly
+            label={toLocalizedString(alternateTree.properties.label ?? alternateTree.id, t)}
+            classNames={[hoverableControlItem, hoverableOpenControlItem, 'pointer-fine:pli-1']}
+            onClick={handleOpen}
+          />
+        ))}
+      <NavTreeItemColumns open path={path} item={item} density='coarse' />
+    </div>
   );
 };