@dxos/plugin-simple-layout 0.8.4-main.bc674ce → 0.8.4-main.d05673bc65

package/src/components/NavBranch/NavBranch.tsx

@@ -0,0 +1,130 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+
+import { useOperationInvoker } from '@dxos/app-framework/ui';
+import { LayoutOperation } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
+import { type Node, useConnections } from '@dxos/plugin-graph';
+import { Avatar, Icon, Panel, ScrollArea, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
+import { Card } from '@dxos/react-ui';
+import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
+import { SearchList, useSearchListItem, useSearchListResults } from '@dxos/react-ui-searchlist';
+import { mx } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+import { useExpandPath } from '../hooks';
+
+export type NavBranchProps = {
+  id: string;
+};
+
+/**
+ * Renders the children of a graph branch node as a searchable mosaic list.
+ * Used for any node with `role: 'branch'` or a workspace disposition, including
+ * spaces, collection sections, type sections, and schema nodes.
+ */
+export const NavBranch = ({ id }: NavBranchProps) => {
+  const { t } = useTranslation(meta.id);
+  const { graph } = useAppGraph();
+
+  useExpandPath(id);
+
+  const children = useConnections(graph, id, 'child');
+
+  // TODO(wittjosiah): Move alternate-tree nodes to a non-child relation so they don't need filtering.
+  const visibleChildren = useMemo(
+    () => children.filter((node) => node.properties.disposition !== 'alternate-tree'),
+    [children],
+  );
+
+  const { results, handleSearch } = useSearchListResults({
+    items: visibleChildren,
+    extract: (child) => toLocalizedString(child.properties.label, t),
+  });
+
+  return (
+    <SearchList.Root onSearch={handleSearch}>
+      <Panel.Root>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            {/* TODO(wittjosiah): Search should be pluggable. Must support searching via ECHO query inside a space. */}
+            <SearchList.Input placeholder={t('search placeholder')} autoFocus />
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <SearchList.Content>
+            <Mosaic.Container asChild>
+              <ScrollArea.Root orientation='vertical'>
+                <ScrollArea.Viewport classNames='p-2'>
+                  <Mosaic.Stack items={results} getId={(child) => child.id} Tile={NavBranchTile} />
+                </ScrollArea.Viewport>
+              </ScrollArea.Root>
+            </Mosaic.Container>
+          </SearchList.Content>
+        </Panel.Content>
+      </Panel.Root>
+    </SearchList.Root>
+  );
+};
+
+const NavBranchTile: MosaicStackTileComponent<Node.Node> = (props) => {
+  const data = props.data;
+  const { t } = useTranslation(meta.id);
+  const { invokeSync } = useOperationInvoker();
+  const ref = useRef<HTMLDivElement>(null);
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
+  const isSelected = selectedValue === data.id;
+
+  const name = toLocalizedString(data.properties.label, t);
+
+  const handleSelect = useCallback(
+    () => invokeSync(LayoutOperation.Open, { subject: [data.id] }),
+    [invokeSync, data.id],
+  );
+
+  // Register this item with the search context.
+  useEffect(() => {
+    if (ref.current) {
+      registerItem(data.id, ref.current, handleSelect);
+    }
+
+    return () => unregisterItem(data.id);
+  }, [data.id, handleSelect, registerItem, unregisterItem]);
+
+  // Scroll into view when selected.
+  useEffect(() => {
+    if (isSelected && ref.current) {
+      ref.current.scrollIntoView({ block: 'nearest', behavior: 'smooth' });
+    }
+  }, [isSelected]);
+
+  return (
+    <Card.Root
+      ref={ref}
+      role='button'
+      fullWidth
+      tabIndex={-1} // TODO(burdon): Use Mosaic.Focus.
+      data-selected={isSelected}
+      classNames={mx('dx-focus-ring', isSelected && 'bg-hover-overlay')}
+      onClick={handleSelect}
+    >
+      <Card.Toolbar density='coarse'>
+        <Avatar.Root>
+          <Avatar.Content
+            hue={data.properties.hue}
+            icon={data.properties.icon}
+            hueVariant='transparent'
+            variant='square'
+            size={12}
+            fallback={name}
+          />
+          <Avatar.Label>{name}</Avatar.Label>
+          <Icon icon='ph--caret-right--regular' />
+        </Avatar.Root>
+      </Card.Toolbar>
+    </Card.Root>
+  );
+};

package/src/components/{Workspace → NavBranch}/index.ts

@@ -2,4 +2,4 @@
 // Copyright 2025 DXOS.org
 //
 
-export * from './Workspace';
+export * from './NavBranch';

package/src/components/Popover/Popover.tsx

@@ -5,9 +5,10 @@
 import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
-import { Surface } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { useObjectNavigate } from '@dxos/app-toolkit/ui';
 import { Popover, type PopoverContentInteractOutsideEvent, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { Card } from '@dxos/react-ui-mosaic';
+import { Card } from '@dxos/react-ui';
 
 import { useSimpleLayoutState } from '../../hooks';
 import { meta } from '../../meta';
@@ -53,10 +54,15 @@ export const PopoverRoot = ({ children }: PropsWithChildren) => {
   );
 };
 
+// Extracts the subject from popover content if it has one, otherwise returns the content as-is.
+const getPopoverSubject = (content: unknown): unknown =>
+  content && typeof content === 'object' && 'subject' in content ? (content as { subject: unknown }).subject : content;
+
 export const PopoverContent = () => {
   const { t } = useTranslation(meta.id);
   const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext('PopoverContent');
+  const handleNavigate = useObjectNavigate(getPopoverSubject(state.popoverContent));
 
   const handleClose = useCallback(() => {
     setOpen(false);
@@ -100,18 +106,22 @@ export const PopoverContent = () => {
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
+          {state.popoverKind === 'base' && <Surface.Surface role='popover' data={state.popoverContent} limit={1} />}
           {state.popoverKind === 'card' && (
-            <Card.Root>
+            <Card.Root border={false} classNames='dx-card-popover'>
               <Card.Toolbar>
                 {/* TODO(wittjosiah): Cleaner way to handle no drag handle in toolbar? */}
                 <span />
-                {state.popoverTitle ? <Card.Title>{toLocalizedString(state.popoverTitle, t)}</Card.Title> : <span />}
-                <Card.Close onClick={handleClose} />
+                {state.popoverTitle ? (
+                  <Card.Title onClick={handleNavigate}>{toLocalizedString(state.popoverTitle, t)}</Card.Title>
+                ) : (
+                  <span />
+                )}
+                <Card.CloseIconButton onClick={handleClose} />
               </Card.Toolbar>
-              <Surface role='card--content' data={state.popoverContent} limit={1} />
+              <Surface.Surface role='card--content' data={state.popoverContent} limit={1} />
             </Card.Root>
           )}
-          {state.popoverKind === 'base' && <Surface role='popover' data={state.popoverContent} limit={1} />}
         </Popover.Viewport>
         <Popover.Arrow />
       </Popover.Content>

package/src/components/SimpleLayout/AppBar.stories.tsx

@@ -0,0 +1,144 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Atom } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo } from 'react';
+import { type Mock, expect, fn, screen, userEvent, within } from 'storybook/test';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { type ActionGraphProps, createMenuAction } from '@dxos/react-ui-menu';
+import { withRegistry } from '@dxos/storybook-utils';
+
+import { translations } from '../../translations';
+import { MobileLayout } from '../MobileLayout';
+
+import { AppBar, type AppBarProps } from './AppBar';
+
+const buildEmptyActions = (): ActionGraphProps => ({ nodes: [], edges: [] });
+
+const buildDefaultActions = (): ActionGraphProps => {
+  const result: ActionGraphProps = { nodes: [], edges: [] };
+  const actions = [
+    createMenuAction('action-edit', () => console.log('Edit'), {
+      icon: 'ph--pencil--regular',
+      label: 'Edit',
+    }),
+    createMenuAction('action-share', () => console.log('Share'), {
+      icon: 'ph--share--regular',
+      label: 'Share',
+    }),
+    createMenuAction('action-delete', () => console.log('Delete'), {
+      icon: 'ph--trash--regular',
+      label: 'Delete',
+    }),
+  ];
+  result.nodes.push(...actions);
+  result.edges.push(...actions.map((a) => ({ source: 'root', target: a.id, relation: 'child' })));
+  return result;
+};
+
+type StoryProps = Omit<AppBarProps, 'actions'> & {
+  actions: ActionGraphProps;
+};
+
+const DefaultStory = ({ actions: actionsProp, ...props }: StoryProps) => {
+  const actions = useMemo(() => Atom.make(actionsProp).pipe(Atom.keepAlive), [actionsProp]);
+  return (
+    <MobileLayout.Root>
+      <AppBar {...props} actions={actions} />
+    </MobileLayout.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-simple-layout/components/AppBar',
+  render: DefaultStory,
+  decorators: [
+    withTheme(),
+    withLayout({
+      layout: 'column',
+      classNames: 'relative',
+    }),
+    withRegistry,
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<StoryProps>;
+
+export const Default: Story = {
+  tags: ['test'],
+  args: {
+    actions: buildDefaultActions(),
+    title: 'Document Title',
+    showBackButton: true,
+    onAction: fn(),
+    onBack: fn(),
+  },
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // Verify the banner renders with the correct title.
+    await expect(canvas.getByRole('banner')).toBeInTheDocument();
+    await expect(canvas.getByText('Document Title')).toBeInTheDocument();
+
+    // Test back button click.
+    const backButton = canvas.getByRole('button', { name: /back/i });
+    await expect(backButton).toBeInTheDocument();
+    await userEvent.click(backButton);
+    await expect(args.onBack).toHaveBeenCalledTimes(1);
+
+    // Test actions menu opens and action fires.
+    const menuTrigger = canvas.getByRole('button', { name: /actions/i });
+    await expect(menuTrigger).toBeInTheDocument();
+    await userEvent.click(menuTrigger);
+
+    // Wait for menu to open and click an action (menu items render in a portal).
+    const editAction = await screen.findByRole('menuitem', { name: /edit/i });
+    await userEvent.click(editAction);
+    await expect(args.onAction).toHaveBeenCalledTimes(1);
+    await expect((args.onAction as Mock).mock.calls[0][0]).toHaveProperty('id', 'action-edit');
+  },
+};
+
+export const NoBackButton: Story = {
+  args: {
+    actions: buildDefaultActions(),
+    title: 'Home',
+    showBackButton: false,
+    onAction: (action) => console.log('Action:', action.id),
+  },
+};
+
+export const LongTitle: Story = {
+  args: {
+    actions: buildDefaultActions(),
+    title: 'This is a very long document title that should be truncated when it exceeds the available space',
+    showBackButton: true,
+    onBack: () => console.log('Back clicked'),
+    onAction: (action) => console.log('Action:', action.id),
+  },
+};
+
+export const NoActions: Story = {
+  args: {
+    actions: buildEmptyActions(),
+    title: 'Empty Document',
+    showBackButton: true,
+    onBack: () => console.log('Back clicked'),
+    onAction: (action) => console.log('Action:', action.id),
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    actions: buildEmptyActions(),
+  },
+};

package/src/components/SimpleLayout/AppBar.tsx

@@ -0,0 +1,94 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { type Atom, useAtomValue } from '@effect-atom/atom-react';
+import React, { Fragment } from 'react';
+
+import { IconButton, Popover, type ThemedClassName, Toolbar, useTranslation } from '@dxos/react-ui';
+import { type ActionExecutor, type ActionGraphProps, Menu, useMenuActions } from '@dxos/react-ui-menu';
+import { mx, osTranslations } from '@dxos/ui-theme';
+
+import { meta } from '../../meta';
+import { useMobileLayout } from '../MobileLayout';
+
+const APP_BAR_NAME = 'SimpleLayout.AppBar';
+
+export type AppBarProps = ThemedClassName<{
+  /** Title/label to display in the banner. */
+  title?: string;
+  /** Action graph atom for the dropdown menu. */
+  actions: Atom.Atom<ActionGraphProps>;
+  /** Whether to show the back button. */
+  showBackButton?: boolean;
+  /** Popover anchor ID for the dropdown trigger. */
+  popoverAnchorId?: string;
+  /** Action executor callback. */
+  onAction?: ActionExecutor;
+  /** Callback when back button is clicked. */
+  onBack?: () => void;
+}>;
+
+/**
+ * AppBar component that renders a title, optional back button, and actions dropdown.
+ */
+export const AppBar = ({
+  classNames,
+  title,
+  actions,
+  showBackButton,
+  popoverAnchorId,
+  onAction,
+  onBack,
+}: AppBarProps) => {
+  const { t } = useTranslation(meta.id);
+  const menu = useMenuActions(actions);
+  const actionsValue = useAtomValue(actions);
+  const hasActions = actionsValue.nodes.length > 0;
+  const { keyboardOpen } = useMobileLayout(APP_BAR_NAME);
+
+  // Fall back to app name if no title provided.
+  const displayTitle = title ?? t('current app name', { ns: osTranslations });
+
+  // Wrap the menu trigger with Popover.Anchor when the popoverAnchorId is set.
+  const AnchorRoot = popoverAnchorId ? Popover.Anchor : Fragment;
+
+  return (
+    <Toolbar.Root
+      role='banner'
+      classNames={mx(
+        'grid grid-cols-[var(--dx-rail-size)_1fr_var(--dx-rail-size)] items-center',
+        'dx-density-fine',
+        classNames,
+      )}
+    >
+      {keyboardOpen ? (
+        <IconButton variant='ghost' icon='ph--x--regular' iconOnly label={t('done label')} />
+      ) : showBackButton ? (
+        <IconButton variant='ghost' icon='ph--caret-left--regular' iconOnly label={t('back label')} onClick={onBack} />
+      ) : (
+        <div />
+      )}
+      <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
+      {hasActions ? (
+        <AnchorRoot>
+          <Menu.Root {...menu} caller={meta.id} onAction={onAction}>
+            <Menu.Trigger asChild>
+              <IconButton
+                variant='ghost'
+                icon='ph--dots-three-vertical--regular'
+                iconOnly
+                label={t('actions menu label')}
+              />
+            </Menu.Trigger>
+            <Menu.Content />
+          </Menu.Root>
+        </AnchorRoot>
+      ) : (
+        <span />
+      )}
+    </Toolbar.Root>
+  );
+};
+
+AppBar.displayName = APP_BAR_NAME;

package/src/components/SimpleLayout/Drawer.tsx

@@ -2,16 +2,16 @@
 // Copyright 2025 DXOS.org
 //
 
-import React, { useCallback, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
-import { Surface, useAppGraph } from '@dxos/app-framework/react';
+import { Surface } from '@dxos/app-framework/ui';
+import { getCompanionVariant } from '@dxos/app-toolkit';
+import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { type Node, useNode } from '@dxos/plugin-graph';
-import { IconButton, Main as NaturalMain, Toolbar, toLocalizedString, useTranslation } from '@dxos/react-ui';
-import { ATTENDABLE_PATH_SEPARATOR } from '@dxos/react-ui-attention';
+import { ErrorFallback, Panel } from '@dxos/react-ui';
+import { Menu, useMenuActions } from '@dxos/react-ui-menu';
 
-import { useCompanions, useSimpleLayoutState } from '../../hooks';
-import { meta } from '../../meta';
-import { ContentError } from '../ContentError';
+import { useCompanions, useDrawerActions, useSimpleLayoutState } from '../../hooks';
 import { ContentLoading } from '../ContentLoading';
 
 const DRAWER_NAME = 'SimpleLayout.Drawer';
@@ -20,16 +20,15 @@ const DRAWER_NAME = 'SimpleLayout.Drawer';
  * Companion drawer component.
  */
 export const Drawer = () => {
-  const { t } = useTranslation(meta.id);
-  const { state, updateState } = useSimpleLayoutState();
   const { graph } = useAppGraph();
+  const { state: layoutState } = useSimpleLayoutState();
 
   const placeholder = useMemo(() => <ContentLoading />, []);
 
   // Get all companions for the current active (primary) item.
-  const activeId = state.active ?? state.workspace;
+  const activeId = layoutState.active ?? layoutState.workspace;
   const companions = useCompanions(activeId);
-  const { companionId, variant } = useSelectedCompanion(companions, state.companionVariant);
+  const { companionId, variant } = useSelectedCompanion(companions, layoutState.companionVariant);
 
   // Get node for the selected companion.
   const node = useNode(graph, companionId);
@@ -48,77 +47,26 @@ export const Drawer = () => {
     );
   }, [companionId, node, parentNode, variant]);
 
-  // Handle tab click to switch companions.
-  const handleTabClick = useCallback(
-    (companion: Node.Node) => {
-      const [, companionVariant] = companion.id.split(ATTENDABLE_PATH_SEPARATOR);
-      updateState((s) => ({ ...s, companionVariant }));
-    },
-    [updateState],
-  );
-
-  // Handle expand/collapse toggle.
-  const handleToggleExpand = useCallback(() => {
-    updateState((s) => ({
-      ...s,
-      drawerState: s.drawerState === 'full' ? 'expanded' : 'full',
-    }));
-  }, [updateState]);
-
-  // Handle close.
-  const handleClose = useCallback(() => {
-    updateState((s) => ({ ...s, drawerState: 'closed' }));
-  }, [updateState]);
-
-  const drawerState = state.drawerState ?? 'closed';
-  if (drawerState === 'closed') {
-    return null;
-  }
-
-  const isFullyExpanded = drawerState === 'full';
+  // Get drawer actions (tabs + toolbar buttons).
+  const { actions, onAction } = useDrawerActions(DRAWER_NAME);
+  const menu = useMenuActions(actions);
 
   return (
-    <NaturalMain.Drawer label={t('drawer label')}>
-      <Toolbar.Root>
-        {/* TODO(thure): IMPORTANT: This is a tablist; it should be implemented as such. */}
-        <div role='tablist' className='flex-1 min-is-0 overflow-x-auto scrollbar-none flex gap-1'>
-          {/* TODO(burdon): Factor out in common with NavBar. */}
-          {companions.map((companion) => (
-            <IconButton
-              key={companion.id}
-              role='tab'
-              aria-selected={companionId === companion.id}
-              icon={companion.properties.icon}
-              iconOnly
-              label={toLocalizedString(companion.properties.label, t)}
-              variant={companionId === companion.id ? 'primary' : 'ghost'}
-              onClick={() => handleTabClick(companion)}
-            />
-          ))}
-        </div>
-        <Toolbar.Separator variant='gap' />
-        <Toolbar.IconButton
-          icon={isFullyExpanded ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
-          iconOnly
-          label={isFullyExpanded ? t('collapse drawer label') : t('expand drawer label')}
-          onClick={handleToggleExpand}
-        />
-        <Toolbar.IconButton icon='ph--x--regular' iconOnly label={t('close drawer label')} onClick={handleClose} />
-      </Toolbar.Root>
-      {/* TODO(burdon): Fix containment. */}
-      <Surface role='article' data={data} limit={1} fallback={ContentError} placeholder={placeholder} />
-    </NaturalMain.Drawer>
+    <Panel.Root>
+      <Panel.Toolbar>
+        <Menu.Root {...menu} alwaysActive onAction={onAction}>
+          <Menu.Toolbar density='coarse' />
+        </Menu.Root>
+      </Panel.Toolbar>
+      <Panel.Content asChild>
+        <Surface.Surface role='article' data={data} limit={1} fallback={ErrorFallback} placeholder={placeholder} />
+      </Panel.Content>
+    </Panel.Root>
   );
 };
 
 Drawer.displayName = DRAWER_NAME;
 
-/** Parse entry ID to extract primary ID and variant. */
-const parseEntryId = (entryId: string) => {
-  const [id, variant] = entryId.split(ATTENDABLE_PATH_SEPARATOR);
-  return { id, variant };
-};
-
 /**
  * Resolves which companion to show based on variant preference.
  * Falls back to first available if preferred variant not available.
@@ -131,10 +79,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
 
     // Try to find companion matching the preferred variant.
     if (preferredVariant) {
-      const preferred = companions.find((c) => {
-        const { variant } = parseEntryId(c.id);
-        return variant === preferredVariant;
-      });
+      const preferred = companions.find((c) => getCompanionVariant(c.id) === preferredVariant);
       if (preferred) {
         return preferred;
       }
@@ -145,7 +90,7 @@ const useSelectedCompanion = (companions: Node.Node[], preferredVariant?: string
   }, [companions, preferredVariant]);
 
   const companionId = selectedCompanion?.id;
-  const { variant } = parseEntryId(companionId ?? '');
+  const variant = companionId ? getCompanionVariant(companionId) : undefined;
 
   return { selectedCompanion, companionId, variant };
 };